/* ============================================================================
   R3K4L — Refined surface  (2026-08-23)
   Tesla/Apple direction: Minimalism & Swiss Style + "Minimal Swiss" type
   (Inter, single family, weight variations only — both verified matches from
   the ui-ux-pro-max design DB).

   This sheet is ADDITIVE. It overrides tokens and surface treatment only; it
   touches no id, no JS hook, and no behaviour. Delete the <link> to revert.

   The look is built from four moves, not decoration:
     1. One family, real weight hierarchy, tight optical tracking on display.
     2. A spacious 4px-based scale (density 3/10) — calm, not dense.
     3. Hairlines instead of boxes; almost no fill.
     4. Colour is monochrome + ONE accent. The cyan belongs to the neural core;
        spending it anywhere else is what makes an interface read as generic.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- palette: monochrome + single accent ------------------------------
     Deeper, cooler black than the old #06080c so the cyan reads as emitted
     light rather than a tinted panel. Greys are a true neutral ramp; the old
     set drifted blue and muddied every border. */
  --color-bg:      #000000;
  --r-surface-1:   #0A0A0B;
  --r-surface-2:   #121214;
  --color-line:    #1F1F23;
  --r-line-strong: #2E2E34;
  --color-fg:      #F5F5F7;   /* Apple's off-white — pure #FFF vibrates on black */
  --color-mut:     #86868B;   /* 5.80:1 on #000 — AA for body text, measured */
  /* 4.14:1 on #000 = AA-LARGE ONLY. Never put this on the ~11px uppercase
     labels; it fails there. Reserve it for 18px+/decorative. */
  --r-dim:         #6E6E73;

  --color-acc:     #5CC8FF;   /* unchanged: the neural core is built on it */
  --r-acc-dim:     #5CC8FF1F;

  --color-ok:      #30D158;
  --color-warn:    #FFD426;
  --color-danger:  #FF453A;

  /* ---- type ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display sizes carry NEGATIVE tracking; small caps-y labels carry positive.
     That inversion is most of what separates considered type from default type. */
  --r-track-display: -0.022em;
  --r-track-label:    0.14em;

  /* ---- space: 4px base, spacious end of the scale ---- */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-6:24px;
  --r-8:32px; --r-12:48px; --r-16:64px; --r-24:96px;

  --r-radius:10px;
  --r-ease:cubic-bezier(.4,0,.2,1);
}

/* ---- base ---------------------------------------------------------------- */
body{
  font-family:var(--font-sans);
  background:var(--color-bg);
  color:var(--color-fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;          /* Inter needs a touch of negative at body size */
}

h1,h2,h3,.r-display{
  font-weight:600;
  letter-spacing:var(--r-track-display);
  line-height:1.08;
}

/* The one-line brand lockup. Tesla sets its wordmark wide and thin; the product
   name sits tight and heavy. Both, together, is the whole masthead. */
#nnstatus,.nnstatus{
  font-family:var(--font-sans);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:var(--r-track-label);
  text-transform:uppercase;
  color:var(--color-mut);           /* 5.80:1 — --r-dim would fail AA at this size */
  text-shadow:none;                 /* the old cyan glow was the "AI template" tell */
  transition:color .4s var(--r-ease);
}
.nncore.live .nnstatus,.live .nnstatus{
  color:var(--color-acc);
  text-shadow:none;
}

/* ---- the neural core -----------------------------------------------------
   Kept exactly as built. What changes is its FRAME: the old radial wash and
   violet gradient sat on top of the canvas and flattened it. Removing them
   lets the canvas be the only light source, which is the Apple move — the
   content glows, the chrome never does. */
.nncore{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-line);
  height:180px;                     /* was 128px — give it room to breathe */
  position:relative;
  overflow:hidden;
}
@media(max-width:820px){ .nncore{height:132px} }

/* Hairline sweep, not a neon bar. */
.scan{
  height:1px;
  background:linear-gradient(90deg,transparent,#5CC8FF4D,transparent);
  box-shadow:none;
  opacity:.7;
}

/* ---- surfaces: hairlines, not cards -------------------------------------- */
#side,#team,#ops,#skills,#hist,#cli,#settings{
  background:var(--color-bg);
}
.card,.item,.guide,.spend,.modes,.panel,.box{
  background:var(--r-surface-1);
  border:1px solid var(--color-line);
  border-radius:var(--r-radius);
  box-shadow:none;                  /* flat: the style's own anti-pattern list */
}

/* ---- controls ------------------------------------------------------------
   44px minimum target, real focus ring, motion on colour only (never on
   width/height — that lands on the layout thread). */
button,.btn,.mode,select,input,textarea{
  font-family:var(--font-sans);
  border-radius:var(--r-radius);
  transition:background-color .18s var(--r-ease),
             border-color .18s var(--r-ease),
             color .18s var(--r-ease),
             opacity .18s var(--r-ease);
}
button,.btn,.mode{
  min-height:36px;
  cursor:pointer;
  font-weight:500;
  letter-spacing:-0.006em;
}
button:hover,.btn:hover,.mode:hover{ border-color:var(--r-line-strong); }

:where(button,a,select,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--color-acc);
  outline-offset:2px;
  border-radius:var(--r-radius);
}

/* Primary action: solid, single accent, no gradient. */
#send,.send,button.primary{
  background:var(--color-acc);
  color:#001018;
  border:1px solid var(--color-acc);
  font-weight:600;
}
#send:hover,.send:hover,button.primary:hover{ opacity:.88; }

/* ---- the model guide panel ---------------------------------------------- */
.guide{ padding:var(--r-6); line-height:1.55; }
.guide .h{
  display:block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:var(--r-track-label);
  text-transform:uppercase;
  color:var(--color-mut);           /* 5.80:1 at 11px */
  margin-bottom:var(--r-4);
}
.guide b{ font-weight:600; color:var(--color-fg); }
.mtag{
  display:inline-block;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--color-mut);
  border:1px solid var(--color-line);
  border-radius:999px;
  padding:2px var(--r-2);
  margin-right:var(--r-2);
}

/* ---- conversation -------------------------------------------------------- */
#conv{ padding:var(--r-8) var(--r-6); }
#conv .you{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:var(--r-track-label);
  text-transform:uppercase;
  color:var(--color-mut);           /* 5.80:1 at 12px */
  margin-bottom:var(--r-3);
}
#conv .body{ font-size:1rem; line-height:1.6; }
.histhead{
  color:var(--color-mut);
  cursor:pointer;
  padding:var(--r-2) 0;
  transition:color .18s var(--r-ease);
}
.histhead:hover{ color:var(--color-fg); }

/* ---- accessibility: honour reduced motion --------------------------------
   The neural canvas runs an unconditional requestAnimationFrame loop. We
   cannot stop it from CSS, so we hide the moving layer and keep a static
   field — the page still reads as itself, without vestibular risk. The rest
   of the sheet drops to near-zero duration rather than 0, because a true 0ms
   state change reads as a glitch. */
@media (prefers-reduced-motion:reduce){
  .scan{ animation:none; opacity:0; }
  #nn{ opacity:.42; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---- responsive: no horizontal scroll, ever ------------------------------ */
html,body{ max-width:100%; overflow-x:hidden; }
pre,table,.wide{ overflow-x:auto; max-width:100%; }
img,canvas,svg{ max-width:100%; }

/* ---- badge pills ---------------------------------------------------------
   Replaces the 💲 / 🆓 emoji that used to mark paid vs free models. Emoji are
   rendered by the OS, so they arrived in a different family, weight and colour
   than everything around them, and at 11px they were closer to noise than
   signal. A typographic pill reads at any size, inherits the theme, and states
   the fact in words instead of asking the reader to decode a glyph. */
.mpill{
  display:inline-block;
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.6;
  padding:0 6px;
  border-radius:4px;
  vertical-align:1px;
  white-space:nowrap;
}
/* FREE is the good news, so it carries the accent. PAID is deliberately quiet —
   it is information, not a warning, and colouring it red would misstate that. */
.mpill-free{ color:#7FE3B0; background:rgba(48,209,88,.13); }
.mpill-paid{ color:var(--color-mut); background:rgba(255,255,255,.06); }

/* Active team mode — there was no way to see which profile was in force. */
.mode.active{
  border-color:var(--color-acc);
  color:var(--color-acc);
  background:var(--r-acc-dim);
}

/* ---- icons ---------------------------------------------------------------
   Sized in em so an icon always matches the text it sits beside, rather than
   being pinned to a px size that drifts as type scales. Optical alignment via
   a small negative offset — a glyph's baseline and a box's centre are not the
   same thing, and 1px is the difference between "aligned" and "almost". */
.ico{
  /* Tailwind preflight sets svg{display:block}, which drops a text-inline
     icon onto its own line. These icons always sit beside a label. */
  display:inline-block;
  width:1.05em; height:1.05em;
  flex:none;
  vertical-align:-0.16em;
  margin-right:.5em;
  opacity:.85;
}
button:hover .ico,.mode:hover .ico{ opacity:1; }
/* Icon-only buttons carry no label, so the icon's trailing gap would
   push them off-centre inside their square hit area. */
button.icon .ico{ margin-right:0; }

/* The gate heading paints its text with a clipped gradient, so currentColor
   resolves to transparent — an inheriting SVG icon renders invisible. */
.gatebox h2 .ico{ color:#5cc8ff; opacity:1; vertical-align:-0.12em; }

/* A panel that could not load. Deliberately an alert, not an empty state:
   an empty panel says "the stack has nothing", which is a claim about the
   system; this says "we could not find out", which is a claim about the
   request. Those are different answers and must not look the same. */
.perr{
  border:1px solid rgba(255,107,107,.35);
  background:rgba(255,107,107,.08);
  border-radius:12px;
  padding:12px 14px;
  color:#ffb4b4;
  font-size:.82rem;
}
.perr .m{ color:var(--color-fg-dim); margin-top:4px; font-size:.76rem; }
.perr .pretry{
  margin-top:9px;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  color:var(--color-fg);
  border:1px solid var(--color-line);
  border-radius:9px;
  padding:6px 12px;
  font:inherit;
  font-size:.76rem;
  min-height:32px;
}
.perr .pretry:hover{ background:rgba(255,255,255,.1); }
.mode.active .ico{ opacity:1; }

/* Quick-action + mode buttons: icon and label on one baseline, label allowed
   to truncate rather than wrap a button to two lines. */
.qa button,.mode{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Per-run stop. A single global Stop becomes ambiguous the moment two tasks run
   at once — it is no longer clear which one it ends. Each card stops itself. */
.cardstop{
  margin-left:auto;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--color-mut);
  background:none;
  border:1px solid var(--color-line);
  border-radius:6px;
  padding:1px 8px;
  min-height:0;
  cursor:pointer;
}
.cardstop:hover{ color:var(--color-danger); border-color:var(--color-danger); }
.runhead{ display:flex; align-items:center; gap:.5rem; }

/* ---- pipeline tiles: colour has to mean something ------------------------
   The rail was showing blue counts, a green money figure and an orange
   warning all at once, so nothing led. When every number is coloured, colour
   stops being information and becomes decoration — and the eye lands nowhere.

   The hierarchy here is: counts are context, money is the headline, and
   "needs contact" is the only thing that is actually a call to action.
   So counts go neutral, money keeps the accent, and the warning keeps amber.
   One accent, one alert, everything else quiet. */
.pcard .pn{
  color:var(--color-fg);
  font-weight:600;
  letter-spacing:var(--r-track-display);
  font-variant-numeric:tabular-nums;   /* digits stop jittering as values change */
}
.pcard .pl{
  color:var(--color-mut);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:var(--r-track-label);
  text-transform:uppercase;
}
.pcard{
  background:var(--r-surface-1);
  border:1px solid var(--color-line);
  border-radius:var(--r-radius);
  box-shadow:none;
}
/* The headline number: the one figure worth the accent. */
.pvalue b{
  color:var(--color-ok);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--r-track-display);
}
.pvalue{
  background:var(--r-surface-1);
  border:1px solid var(--color-line);
  color:var(--color-mut);
}
/* The only genuine call to action keeps amber — and now it is the ONLY
   coloured count, so it actually reads as one. */
.pcard.warn .pn{ color:var(--color-warn); }
.pcard.warn{ border-color:color-mix(in srgb, var(--color-warn) 28%, var(--color-line)); }