/* ===========================================================================
   console.css — the pieces /calls established, shared (REDESIGN-PLAN.md,
   Phase 0). Plain CSS, loaded after base.css like nav.css. /calls itself
   still carries its own copy; everything newer uses these.

     .pane-head        a section's head: title + one line on the left, exactly
                       one control on the right, a hairline under it
     .seg / .seg-ind   one pill that slides to the picked button (seg.js)
     .vnav / .vnav-ind the same for a vertical list: a sidebar (seg.js)
     .st-tiles         equal stat tiles over a list, from real data only
     .srow             a list row with a tinted icon tile coloured by status
     .spf-state        a designed empty / error state: icon tile, one line,
                       one action (never a bare grey sentence)
   =========================================================================== */

/* ---- pane head ---------------------------------------------------------- */
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px;
  padding:16px 20px;border-bottom:1px solid var(--line,rgba(37,99,235,.09))}
.pane-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pane-t,.pane-tx > h2,.pane-tx > h3{font-family:var(--font-sans,'Geist',sans-serif);font-weight:700;font-size:16px;line-height:1.2;
  letter-spacing:-.01em;color:var(--ink,#EEF1FA);margin:0}
.pane-tx > small,.pane-tx > .desc{font-size:12.5px;line-height:1.4;color:var(--muted,#A9B4D6);margin:0}
.pane-head > .pane-ctl{flex:0 0 auto;display:flex;align-items:center;gap:8px}
@media(max-width:560px){.pane-head{flex-wrap:wrap;padding:14px 16px}}

/* ---- sliding segmented control -------------------------------------------
   A .seg holds buttons; seg.js adds one .seg-ind behind them that glides to
   the one that's on (.on, .active, aria-selected or aria-current). Its
   gradient is wider than the pill, so an AI button (data-ai) slides it into
   violet as it moves.
   The look is a default under :where() (no weight), so a page's own button
   styles always win; only what makes the slide work carries weight: the
   stacking, and the picked button dropping its own fill once the pill is
   there to show it. */
:where(.seg){display:inline-flex;gap:3px;padding:3px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--glass-brd,rgba(37,99,235,.16))}
:where(.seg) > :where(button,a){font-family:var(--font-sans,'Geist',sans-serif);font-weight:600;font-size:13px;
  color:var(--muted,#A9B4D6);background:none;border:0;border-radius:8px;padding:7px 14px;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:color var(--dur-1,.18s) ease}
:where(.seg) > :where(button,a):hover{color:var(--ink,#EEF1FA)}
:where(.seg) > :where(.on,.active,[aria-selected="true"],[aria-current]){color:#fff}
/* before seg.js runs (or with it off) the picked button paints its own pill */
:where(.seg:not(.has-ind)) > :where(.on,.active,[aria-selected="true"]){background:linear-gradient(135deg,var(--electric,#2563EB),#1D4ED8)}
.seg{position:relative}
.seg > button,.seg > a{position:relative;z-index:1}
.seg.has-ind > :is(.on,.active,[aria-selected="true"],[aria-current]){background:none;box-shadow:none}
.seg-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:8px;pointer-events:none;
  background:linear-gradient(110deg,var(--electric,#2563EB) 0%,#1D4ED8 44%,#6D28D9 72%,#A21CAF 100%);background-size:230% 100%;background-position:0% 50%;
  box-shadow:0 8px 20px -10px rgba(2,6,23,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--dur-3,.45s) var(--ease-out,cubic-bezier(.16,1,.3,1)),width var(--dur-3,.45s) var(--ease-out,cubic-bezier(.16,1,.3,1)),
    background-position .55s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.seg-ind.ai{background-position:100% 50%;box-shadow:0 8px 22px -10px rgba(2,6,23,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.seg.no-anim .seg-ind{transition:none}

/* ---- vertical sliding nav --------------------------------------------------
   A sidebar list: one tinted pill (.vnav-ind, from seg.js) slides to the item
   you're on, as on the admin panel and Settings. An AI item (data-ai) turns it
   violet. */
.vnav{position:relative}
.vnav > button,.vnav > a{position:relative;z-index:1}
.vnav-ind{position:absolute;z-index:0;left:0;right:0;top:0;height:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(37,99,235,.12));border:1px solid rgba(37,99,235,.36);
  box-shadow:0 10px 24px -14px rgba(2,6,23,.55);
  transition:transform var(--dur-3,.45s) var(--ease-out,cubic-bezier(.16,1,.3,1)),height var(--dur-3,.45s) var(--ease-out,cubic-bezier(.16,1,.3,1)),
    background var(--dur-2,.32s) ease,border-color var(--dur-2,.32s) ease}
.vnav-ind.ai{background:linear-gradient(135deg,rgba(109,40,217,.34),rgba(162,28,175,.18));border-color:rgba(167,139,250,.45);
  box-shadow:0 10px 24px -14px rgba(2,6,23,.55)}
.vnav.no-anim .vnav-ind{transition:none}

/* ---- stat tiles ----------------------------------------------------------- */
.st-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-tile{position:relative;min-width:0;padding:14px 16px 15px;border-radius:14px;background:rgba(10,7,20,.3);border:1px solid var(--line,rgba(37,99,235,.09))}
.st-tile .st-k{display:block;font-size:12px;color:var(--faint,#8E9BC4);margin-bottom:6px}
.st-tile .st-v{display:flex;align-items:baseline;gap:6px;font-family:var(--font-sans,'Geist',sans-serif);font-size:24px;font-weight:600;
  letter-spacing:-.02em;line-height:1.1;color:var(--ink,#EEF1FA);font-variant-numeric:tabular-nums}
.st-tile .st-v small{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted,#A9B4D6)}
.st-tile .st-s{display:block;margin-top:5px;font-size:12px;color:var(--muted,#A9B4D6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-tile.bump .st-v{animation:numBump .9s ease}
/* phones: the three tiles stay on one row, compact, instead of three
   full-width cards stacked down the screen */
@media(max-width:620px){
  .st-tiles{gap:8px}
  .st-tile{padding:11px 11px 12px;border-radius:12px}
  .st-tile .st-k{font-size:12px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .st-tile .st-v{font-size:18px;flex-wrap:wrap;gap:0 4px}
  .st-tile .st-v small{font-size:12px}
  .st-tile .st-s{font-size:12px}
}
@media(max-width:340px){.st-tiles{grid-template-columns:1fr}}

/* ---- status-tile rows ------------------------------------------------------
   <div class="srow" data-tone="ok|warn|bad|info|ai"><span class="srow-ic">svg</span>
   <div class="srow-main">…</div><div class="srow-meta">…</div></div> */
.srow{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;min-width:0;
  background:rgba(15,10,26,.4);border:1px solid var(--line,rgba(37,99,235,.09));transition:border-color var(--dur-1,.18s) ease,background var(--dur-1,.18s) ease}
.srow:hover{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.05)}
.srow-ic{--t:147,165,255;flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:rgb(var(--t));background:rgba(var(--t),.1);border:1px solid rgba(var(--t),.26)}
.srow-ic svg{width:17px;height:17px}
.srow[data-tone="ok"] .srow-ic{--t:52,211,153}
.srow[data-tone="warn"] .srow-ic{--t:251,191,36}
.srow[data-tone="bad"] .srow-ic{--t:248,113,113}
.srow[data-tone="info"] .srow-ic{--t:56,189,248}
.srow[data-tone="ai"] .srow-ic{--t:167,139,250}
.srow-main{flex:1;min-width:0}
.srow-main b{display:block;font-weight:600;font-size:14px;color:var(--ink,#EEF1FA);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow-main span{display:block;font-size:12.5px;color:var(--muted,#A9B4D6);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow-meta{flex:0 0 auto;text-align:right;font-size:12px;color:var(--faint,#8E9BC4)}

/* ---- empty / error state --------------------------------------------------- */
.spf-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 20px}
.spf-state-ic{--t:147,165,255;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  color:rgb(var(--t));background:rgba(var(--t),.1);border:1px solid rgba(var(--t),.26)}
.spf-state-ic svg{width:21px;height:21px}
.spf-state.err .spf-state-ic{--t:248,113,113}
.spf-state p{margin:0;max-width:360px;font-size:14px;line-height:1.5;color:var(--muted,#A9B4D6)}
.spf-state p b{display:block;color:var(--ink,#EEF1FA);font-weight:600;font-size:15px;margin-bottom:2px}
.spf-state .btn,.spf-state a.spf-state-act{margin-top:4px}
a.spf-state-act{font-family:var(--font-sans,'Geist',sans-serif);font-weight:600;font-size:13px;color:var(--glow,#93C5FD);text-decoration:none}
a.spf-state-act:hover{text-decoration:underline;text-underline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .seg-ind,.vnav-ind{transition:none}
  .st-tile.bump .st-v{animation:none}
}