/* components.css — reusable FantasyCabin controls (class-based mirror of the inline styles used in the screens).
   States: default · :hover · :active (pressed) · [aria-pressed="true"] / .is-selected · :disabled / [aria-disabled] · .is-loading · :focus-visible
   Structure: <button class="sv-btn sv-btn--primary"><svg class="sv-btn__icon">…</svg><span class="sv-btn__label" data-i18n="key">Label</span></button>
   Icon and label are separate children so translations never touch artwork. */

.sv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-r-md);
  background: transparent; color: var(--sv-violet-bright); cursor: pointer; font-family: var(--sv-font-mono); font-size: 11px; letter-spacing: var(--sv-label-tracking); text-transform: uppercase; line-height: 1;
  transition: transform var(--sv-t-fast) var(--sv-ease-spring), border-color var(--sv-t-fast) ease, color var(--sv-t-fast) ease, box-shadow var(--sv-t-fast) ease, background var(--sv-t-fast) ease; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sv-btn__icon { width: 14px; height: 14px; flex: 0 0 auto; }
.sv-btn__label { white-space: nowrap; }
.sv-btn:hover { color: var(--sv-text); border-color: var(--sv-line-hover); transform: translateY(-3px); }
.sv-btn:active { transform: translateY(0) scale(.98); transition-duration: .05s; }
.sv-btn:focus-visible { outline: none; box-shadow: var(--sv-glow-focus); }
.sv-btn[aria-pressed="true"], .sv-btn.is-selected { background: rgba(var(--sv-accent-rgb),.16); border-color: var(--sv-line-strong); color: var(--sv-text); }
.sv-btn:disabled, .sv-btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.sv-btn.is-loading { color: transparent !important; pointer-events: none; }
.sv-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(var(--sv-glow-rgb),.3); border-top-color: var(--sv-violet-bright); animation: sv-spin .8s linear infinite; }
.sv-btn--primary { border-color: var(--sv-violet-deep); color: var(--sv-on-primary); background: var(--sv-grad-primary); box-shadow: var(--sv-glow-primary); }
.sv-btn--primary:hover { color: var(--sv-on-primary); box-shadow: 0 14px 40px -10px rgba(var(--sv-glow-rgb),.7); }
.sv-btn--primary.is-loading::after { border-color: rgba(var(--sv-ground-rgb),.3); border-top-color: var(--sv-bg); }
.sv-btn--ghost { border-color: var(--sv-line-2); color: var(--sv-text-muted); }
.sv-btn--danger { border-color: rgba(220,90,78,.5); color: var(--sv-danger); }
.sv-btn--danger:hover { color: var(--sv-text); border-color: var(--sv-danger); background: rgba(220,90,78,.12); }
.sv-btn--sm { padding: 9px 14px; font-size: 10px; letter-spacing: .18em; }
.sv-btn--icon { width: 38px; height: 38px; padding: 0; border-radius: var(--sv-r-pill); color: var(--sv-text-muted); border-color: var(--sv-line-2); }
.sv-btn--icon:hover { transform: none; color: var(--sv-text); }
.sv-btn--icon .sv-btn__icon { width: 16px; height: 16px; }

/* top-bar tab (also the drawer nav row) */
.sv-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid transparent; border-radius: var(--sv-r-sm); background: transparent; cursor: pointer;
  font-family: var(--sv-font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-text-muted); transition: color var(--sv-t-fast), background var(--sv-t-fast); }
.sv-tab:hover { color: var(--sv-text); background: rgba(var(--sv-accent-rgb),.06); }
.sv-tab[aria-selected="true"], .sv-tab.is-selected { color: var(--sv-text); background: rgba(var(--sv-accent-rgb),.16); border-color: var(--sv-line-strong); }
.sv-tab:focus-visible { outline: none; box-shadow: var(--sv-glow-focus); }
.sv-tab__gem { width: 7px; height: 7px; transform: rotate(45deg); background: var(--sv-line-strong); }
.sv-tab[aria-selected="true"] .sv-tab__gem { background: var(--sv-violet-bright); box-shadow: 0 0 10px var(--sv-violet-bright); }
.sv-tab__soon { font-size: 7.5px; letter-spacing: .14em; padding: 2px 5px; border: 1px solid rgba(var(--sv-accent-rgb),.4); border-radius: 4px; color: var(--sv-text-dim); }

/* chip (topic / filter / question pills) */
.sv-chip { padding: 8px 13px; border: 1px solid var(--sv-line-2); border-radius: var(--sv-r-pill); background: transparent; cursor: pointer; font-family: var(--sv-font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-text-soft); transition: border-color var(--sv-t-fast), background var(--sv-t-fast); }
.sv-chip:hover { border-color: var(--sv-line-hover); }
.sv-chip[aria-pressed="true"], .sv-chip.is-selected { border-color: var(--sv-line-hover); background: rgba(var(--sv-accent-rgb),.16); }
.sv-chip:disabled { opacity: .38; cursor: not-allowed; }
.sv-chip:focus-visible { outline: none; box-shadow: var(--sv-glow-focus); }
.sv-chip--serif { font-family: var(--sv-font-body); font-style: italic; font-size: 17px; letter-spacing: 0; text-transform: none; border-radius: 9px; padding: 11px 15px; }

/* segmented (EN/BR) */
.sv-seg { display: inline-flex; border: 1px solid var(--sv-line-2); border-radius: var(--sv-r-sm); overflow: hidden; }
.sv-seg__btn { padding: 7px 10px; border: 0; background: transparent; cursor: pointer; font-family: var(--sv-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--sv-text-dim); }
.sv-seg__btn[aria-pressed="true"] { background: rgba(var(--sv-accent-rgb),.18); color: var(--sv-violet-bright); }
.sv-seg__btn:focus-visible { outline: none; box-shadow: inset var(--sv-glow-focus); }

/* toggle */
.sv-toggle { position: relative; width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--sv-line-strong); background: var(--sv-panel-strong); cursor: pointer; transition: background var(--sv-t-med); }
.sv-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sv-text); transition: left var(--sv-t-fast); }
.sv-toggle[aria-checked="true"] { background: var(--sv-grad-primary); }
.sv-toggle[aria-checked="true"]::after { left: 23px; }
.sv-toggle:disabled { opacity: .38; cursor: not-allowed; }
.sv-toggle:focus-visible { outline: none; box-shadow: var(--sv-glow-focus); }

/* text inputs */
.sv-input, .sv-textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; background: rgba(var(--sv-ground-rgb),.6); border: 1px solid var(--sv-line-2); border-radius: 9px; color: var(--sv-text); font-family: var(--sv-font-body); font-size: 18px; outline: none; transition: border-color var(--sv-t-fast), box-shadow var(--sv-t-fast); }
.sv-input::placeholder, .sv-textarea::placeholder { color: var(--sv-placeholder); font-style: italic; }
.sv-input:hover, .sv-textarea:hover { border-color: var(--sv-line-strong); }
.sv-input:focus, .sv-textarea:focus { border-color: var(--sv-line-hover); }
.sv-input:focus-visible, .sv-textarea:focus-visible { box-shadow: var(--sv-glow-focus); }
.sv-input:disabled { opacity: .38; }
.sv-input.is-invalid { border-color: var(--sv-danger); }
.sv-label { display: block; margin-bottom: 6px; font-family: var(--sv-font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-text-dim); }
.sv-range { width: 100%; accent-color: var(--sv-violet-bright); }

/* card + badge + gem */
.sv-card { position: relative; padding: 22px 24px; background: var(--sv-panel); border: 1px solid var(--sv-line); box-shadow: var(--sv-card-inset); transition: transform var(--sv-t-fast) var(--sv-ease-spring), border-color var(--sv-t-fast); }
.sv-card--hover:hover { transform: translateY(-4px); border-color: rgba(var(--sv-glow-rgb),.6); }
.sv-card--selected { border-color: rgba(var(--sv-glow-rgb),.85); box-shadow: inset 0 0 0 4px var(--sv-bg), inset 0 0 0 5px rgba(var(--sv-accent-rgb),.25), 0 0 50px -14px rgba(var(--sv-glow-rgb),.7); }
.sv-badge { display: inline-block; font-family: var(--sv-font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--sv-bg); background: var(--sv-grad-badge); border-radius: 5px; padding: 4px 10px; white-space: nowrap; }
.sv-eyebrow { font-family: var(--sv-font-mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--sv-violet); }
.sv-gem { display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sv-violet-bright); box-shadow: 0 0 10px var(--sv-violet-bright); }
.sv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sv-bg); }
.sv-dot--online { background: var(--sv-success); } .sv-dot--away { background: var(--sv-warning); } .sv-dot--dnd { background: var(--sv-danger); } .sv-dot--off { background: var(--sv-tint-slate); }

/* toast */
.sv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; padding: 11px 20px; background: rgba(var(--sv-plum-rgb),.97); border: 1px solid rgba(var(--sv-glow-rgb),.6); font-family: var(--sv-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sv-violet-bright); white-space: nowrap; animation: sv-rise .25s ease both; }

@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sv-btn, .sv-tab, .sv-chip, .sv-card, .sv-toggle::after { transition: none !important; } .sv-btn.is-loading::after { animation-duration: 1.6s; } }