/* ============================================================
   sc-brand.css v2 -- ServerCrate portal brand layer
   Loads AFTER portal.css + sc-ui.css. 2026-07-22.
   Identity: Syne display + Geist Mono instrumentation, matching
   the marketing proof object. All fonts self-hosted.
   v2: KPI mono-wrap fix, headline gradient, sidebar treatment,
   interaction states, snapshot proof-object rows, calmer CTA.
   ============================================================ */

@font-face{
  font-family:'Syne';
  src:url('/css/fonts/Syne-Variable.woff2') format('woff2-variations'),
      url('/css/fonts/Syne-Variable.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --display:'Syne',var(--font),ui-sans-serif,sans-serif;
  --brand-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --grad-headline:linear-gradient(92deg,#5eead4 0%,#89c4e1 48%,#a78bfa 100%);
  --grad-cta:linear-gradient(135deg,#6ea8ff 0%,#5b7cff 100%);
  --shadow-cta:0 6px 18px -8px rgba(91,124,255,.45);
  --shadow-lift:0 10px 26px -10px rgba(91,124,255,.55);
}

/* ============ DISPLAY TYPE ============ */
.sc-greet__title,
.sc-profile-name,
.empty h3,
.modal-box h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.01em;
}
.sc-greet__title{
  font-size:1.9rem;
  line-height:1.12;
  text-transform:capitalize;
  background:var(--grad-headline);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  width:fit-content;
}
.sc-profile-name{text-transform:capitalize}

/* ============ MONO INSTRUMENTATION ============ */
.sc-greet__hello,
.sc-eyebrow,
.sc-field-label,
.sc-tier-ribbon__name,
.sc-vital__head > span:first-child,
.sc-section__title,
.sidebar .nav-section,
.sidebar .nav-label{
  font-family:var(--brand-mono);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.sc-greet__hello{font-size:.68rem;color:var(--blue)}
.sc-vital__head > span:first-child{font-size:.64rem}
.sc-section__title{font-size:.72rem;letter-spacing:.17em}
.sc-section__title i{color:var(--blue)}
.sc-vital__meta{
  font-family:var(--font,inherit);
  letter-spacing:0;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}

/* ============ DATA IS MONO -- sized so it never wraps ============ */
.sc-vital__value{
  font-family:var(--brand-mono);
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.sc-stat__value{
  font-family:var(--brand-mono);
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.sc-vital__unit{font-family:var(--brand-mono);font-weight:500;font-size:.72rem}
.sc-stat__pct{font-variant-numeric:tabular-nums}
.sc-tier-ribbon__chip{font-family:var(--brand-mono);font-size:.7rem}

/* ============ SURFACES: hierarchy, not sameness ============ */
.card{
  box-shadow:0 18px 44px -26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.sc-page-hero{
  background-image:linear-gradient(135deg,rgba(137,196,225,.06) 0%,rgba(137,196,225,0) 42%);
  border-color:var(--bdr2);
}
.sc-vital,
.sc-action{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.sc-vital:hover{border-color:var(--bdr2)}
.sc-action:hover{
  transform:translateY(-2px);
  border-color:rgba(137,196,225,.35);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}
.sc-server-strip{transition:border-color .16s,background .16s}
.sc-server-strip:hover{border-color:rgba(137,196,225,.35);background:var(--bg3)}
.sc-server-strip:hover .sc-server-strip__chev{color:var(--blue);opacity:1}
.sc-server-strip__chev{transition:color .16s,opacity .16s}

/* ============ SIDEBAR: quiet chrome, clear state ============ */
.sidebar{border-right:1px solid var(--bdr)}
.nav-item{transition:background .14s,color .14s}
.nav-item.active{
  box-shadow:inset 2px 0 0 var(--blue);
  border-radius:0 8px 8px 0;
}

/* ============ BUTTONS: brand gradient, less balloon ============ */
.btn{border-radius:10px}
.btn-primary{
  background:var(--grad-cta);
  border-color:transparent;
  color:#fff;
  font-weight:600;
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover:not(:disabled){
  background:var(--grad-cta);
  filter:brightness(1.08);
  border-color:transparent;
  box-shadow:var(--shadow-lift);
}
.btn-gold{box-shadow:0 6px 18px -10px rgba(240,192,64,.3)}

/* ============ PROGRESS: brand gradient fill ============ */
.progress-fill{background:linear-gradient(90deg,#5eead4,#89c4e1)}
.progress-fill.warn{background:linear-gradient(90deg,#f0c040,#f0a840)}
.progress-fill.danger{background:linear-gradient(90deg,#f87171,#ef4444)}

/* ============ SNAPSHOTS: proof-object rows ============ */
.sc-snap{transition:background .14s;border-radius:8px}
.sc-snap:hover{background:var(--bg3)}
.sc-snap__id{font-family:var(--brand-mono);font-weight:500}
.sc-snap__meta{font-family:var(--brand-mono);font-size:.72rem;letter-spacing:.02em}

/* ============ CODE / IDENTIFIERS ============ */
.code-block,
.sc-code-chip,
.mono{font-family:var(--brand-mono)}


/* ============================================================
   sc-skin-v2: Evidence Ledger (DESIGN-BASELINE v1, 2026-07-23)
   Override layer - loads last, wins on specificity or order.
   ============================================================ */
:root{
  --bg0:#07090c; --bg1:#0b0e13; --bg2:#10141b;
  --line:#1c222c; --line-strong:#2a3240;
  --ink:#e8ecf2; --ink2:#9aa4b2; --ink3:#5c6673;
  --accent:#6ea8ff;
}
body{background:var(--bg0)}

/* --- Panels: opaque steps + defined lines, tight radius, no bubble --- */
.card{
  background:var(--bg1);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:none;
}
.card::before{content:none}          /* kill top-light gradient from brand v1 */
.card:hover{border-color:var(--line-strong)}

/* --- Section titles: mono ledger labels, icons demoted --- */
.sc-section__title{
  font-family:var(--mono,'Geist Mono',monospace);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink3);
  display:flex;align-items:center;gap:10px;
}
.sc-section__title::after{content:"";flex:1;height:1px;background:var(--line)}
.sc-section__title i{display:none}   /* decorative glyphs carry no information */

/* --- Facts are mono --- */
.sc-pref-num input[type=number],
.sc-otp,.sc-otp-lg,
[class*="kpi"],[class*="value"]{
  font-variant-numeric:tabular-nums;
}

/* --- Ledger rows: pref list becomes ruled records --- */
.sc-pref-row{
  border-bottom:1px solid var(--line);
  padding:14px 0;
}
.sc-pref-row:last-child{border-bottom:0}
.sc-pref-row__title{font-size:.9rem;font-weight:600;color:var(--ink)}
.sc-pref-row__desc{color:var(--ink3)}
.sc-pref-lock{
  font-family:var(--mono,'Geist Mono',monospace);
  font-size:.66rem;letter-spacing:.12em;
  color:var(--ok,#3ecf8e);
  border:1px solid currentColor;border-radius:3px;
  padding:3px 8px;background:transparent;
}

/* --- Inputs: 3px radius, opaque field on line --- */
.sc-pref-num input[type=number],.sc-field__input,.form-input{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:3px;
}
.sc-pref-num input[type=number]:focus,.sc-field__input:focus,.form-input:focus{
  border-color:var(--accent);
  background:var(--bg2);
  box-shadow:0 0 0 1px var(--accent);
}

/* --- CTA: flat accent, gradient retired --- */
.btn-primary{
  background:var(--accent);
  background-image:none;
  color:#0a0d12;
  border:1px solid var(--accent);
  border-radius:4px;
  box-shadow:none;
  font-weight:700;
}
.btn-primary:hover{filter:brightness(1.08);box-shadow:none}
.btn-ghost{border-radius:4px;border-color:var(--line-strong)}

/* --- Modal + err inherit panel language --- */
.sc-modal__panel{background:var(--bg1);border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sc-err-box{border-radius:4px}

/* --- Sidebar: rule-separated, mono group labels if present --- */
[class*="sidebar"] a.active,[class*="nav"] a.active{border-radius:4px}


/* ============================================================
   sc-theme-v1: day mode (Evidence Ledger, light paper variant)
   Dark remains default; [data-theme=light] flips the tokens.
   ============================================================ */
[data-theme="light"]{ /* sc-theme-legacy-v5 */
  --ink-2:#49535f; --ink-3:#77808d;
  --bg:#f2f3f6; --bg3:#e9ebef; --bg4:#e1e4ea;
  --surf:#ffffff; --card:#ffffff;
  --bdr:#d7dbe2; --bdr2:#b8bfca;
  --muted:#6b7686; --blue-d:#2456b8;
  --bg0:#f2f3f6; --bg1:#ffffff; --bg2:#e9ebef;
  --line:#d7dbe2; --line-strong:#b8bfca;
  --ink:#171c24; --ink2:#49535f; --ink3:#77808d;
  --accent:#2f6bdd;
  --blue:#2f6bdd; --blue-dim:rgba(47,107,221,.08);
}
[data-theme="light"] body{background:var(--bg0);color:var(--ink)}

/* classes that hardcode dark-mode white-alpha get explicit light values */
[data-theme="light"] .sc-modal__panel{background:var(--bg1);border-color:var(--line-strong)}
[data-theme="light"] .sc-modal__title{color:var(--ink)}
[data-theme="light"] .sc-modal__sub,
[data-theme="light"] .sc-intro{color:var(--ink2)}
[data-theme="light"] .sc-field{color:var(--ink2)}
[data-theme="light"] .sc-field__input,
[data-theme="light"] .form-input,
[data-theme="light"] .sc-pref-num input[type=number]{
  background:var(--bg1);border-color:var(--line);color:var(--ink);
}
[data-theme="light"] .sc-pref-num input[type=number]::placeholder{color:var(--ink3)}
[data-theme="light"] .sc-pref-num__unit{color:var(--ink3)}
[data-theme="light"] .sc-pref-row__title{color:var(--ink)}
[data-theme="light"] .sc-pref-row__desc{color:var(--ink3)}
[data-theme="light"] .sc-done-title{color:var(--ink)}
[data-theme="light"] .sc-err-box{background:rgba(214,69,69,.06);border-color:rgba(214,69,69,.3);color:#b23a3a}
[data-theme="light"] .btn-primary{color:#ffffff}
[data-theme="light"] .sc-info-banner{background:var(--blue-dim);border-color:rgba(47,107,221,.25);color:var(--blue)}

/* theme toggle chip */
.sc-theme-chip{
  position:fixed;top:14px;right:16px;z-index:9000;
  width:34px;height:34px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg1);border:1px solid var(--line);
  color:var(--ink3);cursor:pointer;font-size:.95rem;
  transition:border-color .15s ease,color .15s ease;
}
.sc-theme-chip:hover{border-color:var(--line-strong);color:var(--ink)}


/* ============================================================
   sc-theme-polish-v1: light-mode pass 1 (2026-07-23)
   Rule: dark exhibits (code, terminals, connection boxes) stay
   dark on paper by design - the ledger's exhibits.
   ============================================================ */
[data-theme="light"]{
  --grad-headline:linear-gradient(92deg,#171c24 0%,#171c24 100%); /* solid ink; gradient text is a dark-mode instrument */
}
[data-theme="light"] .progress-fill{background:var(--accent)}
[data-theme="light"] .info-tile{background:var(--bg1);border:1px solid var(--line);border-radius:6px}
[data-theme="light"] .sc-secret__cta{color:var(--accent)}
[data-theme="light"] .sc-callout{background:var(--bg2);border-color:var(--line)}
[data-theme="light"] .sc-help,[data-theme="light"] .sc-help-sm,[data-theme="light"] .sc-hint{color:var(--ink3)}
[data-theme="light"] .text-muted{color:var(--ink3)}
[data-theme="light"] .sc-theme-chip{background:var(--bg1)}


/* ============================================================
   sc-theme-exhibits-v2 (2026-07-23): light-mode systemic fix.
   Components that keep hardcoded dark backgrounds are EXHIBITS.
   Inside them, re-scope the ink tokens back to dark-mode values
   so every descendant self-heals. One rule, whole families.
   ============================================================ */
/* sc-theme-exhibits-v3 */
/* sc-theme-exhibits-v4 */
[data-theme="light"] :is(
  .plan-card:not(.is-current),
  .card.sc-hero,
  .code-block,
  .sc-token-block,
  .sc-callout--dark,
  #notif-panel
){
  --ink:#e8ecf2;
  --ink2:#9aa4b2;
  --ink3:#77808d;
  --muted:#9aa4b2;
  --bg1:#0b0e13;
  --bg2:#10141b;
  --line:#1c222c;
  --line-strong:#2a3240;
  --grad-headline:linear-gradient(92deg,#5eead4 0%,#89c4e1 48%,#a78bfa 100%);
  --ink-2:#9aa4b2;
  --ink-3:#77808d;
  --bg:#060d18; --bg3:#0d1e34; --bg4:#132540;
  --surf:#0f1e32; --card:#0f1e32;
  --bdr:rgba(255,255,255,.07); --bdr2:rgba(255,255,255,.13);
  --muted:#4e6a86; --blue-d:#89c4e1;
  color:var(--ink);
}
/* generic descendants inherit the pinned ink unless they carry their own color */
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero,.code-block,.sc-token-block)
  :is(p,li,span,div,h2,h3,h4,label,code,pre){color:inherit}
/* elements with explicit token colors re-resolve against the re-scoped tokens */
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero) .text-muted{color:var(--ink3)}
/* exhibit borders read against paper */
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero){border:1px solid #2a3240}
/* buttons inside exhibits: explicit colors */
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero) .btn-primary,
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero) .btn-primary *{color:#0a0d12}
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero) .btn-ghost,
[data-theme="light"] :is(.plan-card:not(.is-current),.card.sc-hero) .btn-ghost *{color:#e8ecf2}


/* ============================================================
   sc-ledger-pass-v1 (2026-07-23): section numerals + icon demotion
   ============================================================ */
body{counter-reset:scsec}
.sc-section__title{counter-increment:scsec}
.sc-section__title::before{
  content:counter(scsec,decimal-leading-zero) " /";
  font-family:var(--mono,'Geist Mono',monospace);
  font-size:.68rem;letter-spacing:.1em;
  color:var(--ink3);
  flex-shrink:0;
}

/* decorative glyphs demoted; functional icons (nav, status dots, actions) untouched */
.card-title > i,
.card-header > .card-title > i{display:none}
.sc-page-hero__icon{display:none}


/* srv-row-click-v1: the compact row opens the detail modal */
.srv-row{cursor:pointer}
.srv-row:hover .srv-chevron{transform:translateX(2px)}
.srv-chevron{transition:transform .12s ease}