/* console.css — Yarnball CDS theme "Console".
   The product computes inside a sealed enclave, so this dresses it as the instrument that
   reports on one. Monospace throughout, a hairline grid, amber for anything working. The
   brand red is kept for the mark and for anything genuinely wrong — never as decoration.

   Same contract as xp.css and letterpress.css: this is a THEME, not app styling. Every
   selector carries [data-theme="console"]; the other skins are untouched. It restyles DS
   classes that already exist — no app file gains a style attribute, a utility class, or a
   theme-specific class name. Tokens alone do not move the shell far enough, so this file
   owns the element layer below the token block too.

   Three traps this file is written around, all found on the XP lane 2026-08-22:
     - the height chain (root, body, #root) must be carried or a full-height window
       collapses to content height;
     - .fld is the label+input WRAPPER, so bordering it double-boxes every field — the
       border belongs on .box alone;
     - app-extensions.css hard-codes .modal-maximize-btn geometry, so a theme must not
       assume it can reposition the modal head. */

/* ------------------------------------------------------------------ */
/* tokens                                                              */
[data-theme="console"]{
  --bg:#0D1117; --bg-2:#161B22; --surface:#0F141A; --surface-2:#010409;
  --ink:#C9D3DF; --ink-2:#E6EDF3; --mute:#6B7684; --faint:#4D5866;
  --line:#21262D; --line-soft:#1A1F26;
  --accent:#E8A33D; --accent-soft:#2A1F0C; --teal:#58A6FF; --trust-green:#3FB950;
  --on-accent:#0D1117; --on-ink:#0D1117;
  --paper:#0F141A; --paper-2:#010409; --ink-soft:#E6EDF3;
  --display:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-body-serif:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:2px; --r-sm:2px; --r-xs:2px; --r-pill:2px;
  --shadow:none; --shadow-sm:none;
}

/* ------------------------------------------------------------------ */
/* ground + height chain                                               */
[data-theme="console"]{ height:100%; }
[data-theme="console"] #root{ height:100%; display:flex; flex-direction:column; min-height:0; }
[data-theme="console"] body{
  height:100%; min-height:0; background:var(--bg); color:var(--ink); font-family:var(--ui);
  /* the hairline grid the instrument is ruled on */
  background-image:
    linear-gradient(rgba(33,38,45,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(33,38,45,.5) 1px,transparent 1px);
  background-size:32px 32px;
}

/* ------------------------------------------------------------------ */
/* brand + headings                                                    */
[data-theme="console"] .brand,
[data-theme="console"] .mark{ font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
[data-theme="console"] .greet{ font-family:var(--display); color:var(--ink); font-weight:400; color:var(--ink-2); }

/* ------------------------------------------------------------------ */
/* buttons                                                             */
[data-theme="console"] .btn{
  background:transparent; color:var(--ink); border:1px solid #30363D; border-radius:var(--r-sm);
  font-family:var(--ui); box-shadow:none; transition:background .12s ease,border-color .12s ease;
}
[data-theme="console"] .btn:hover{ background:#161B22; }
[data-theme="console"] .btn:active{ background:#21262D; }
[data-theme="console"] .btn.active{ background:#21262D; }
[data-theme="console"] .btn.solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
[data-theme="console"] .btn.solid:hover{ background:#D08F2A; border-color:#D08F2A; }
[data-theme="console"] .btn-danger{ background:transparent; border-color:var(--accent); color:var(--accent); }
[data-theme="console"] .btn-link{ background:transparent; border:0; color:var(--accent); }
[data-theme="console"] .icbtn,
[data-theme="console"] .gbtn{ background:transparent; border:1px solid #30363D; border-radius:var(--r-sm); color:var(--ink); box-shadow:none; }
[data-theme="console"] .icbtn:hover,
[data-theme="console"] .gbtn:hover{ background:#161B22; }

/* ------------------------------------------------------------------ */
/* fields — border on .box only, never on the .fld wrapper             */
[data-theme="console"] .fld{ background:transparent; border:0; box-shadow:none; font-family:var(--ui); color:var(--mute); }
[data-theme="console"] .box{ background:#010409; border:1px solid #30363D; border-radius:var(--r-xs); box-shadow:none; color:var(--ink); }
[data-theme="console"] .box:focus-within{ border-color:var(--accent); outline:none; }

/* ------------------------------------------------------------------ */
/* cards, tiles, modals                                                */
[data-theme="console"] .mcard,
[data-theme="console"] .conntile,
[data-theme="console"] .account-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
[data-theme="console"] .modal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
[data-theme="console"] .modal-head{ background:var(--surface-2); border-bottom:1px solid var(--line); }
[data-theme="console"] .modal-title{ font-family:var(--display); font-weight:600; color:var(--ink); }
[data-theme="console"] .mclosebtn{ background:transparent; border:0; color:var(--mute); }
[data-theme="console"] .mclosebtn:hover{ color:var(--ink); }

/* ------------------------------------------------------------------ */
/* chat                                                                */
[data-theme="console"] .row,
[data-theme="console"] .bub{ font-family:var(--ui); color:var(--ink); box-shadow:none; }
[data-theme="console"] .row.me .bub{ background:var(--bg-2); border-left:2px solid #30363D; padding-left:10px; }
[data-theme="console"] .row.yarnball .bub{ background:transparent; border-left:2px solid var(--accent); padding-left:10px; }
[data-theme="console"] .compwrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }

/* ------------------------------------------------------------------ */
/* left rail                                                           */
[data-theme="console"] .chat-nav-panel{ background:var(--surface-2); border-right:1px solid var(--line); box-shadow:none; }
[data-theme="console"] .chat-nav-panel-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
[data-theme="console"] .chat-nav-panel-item{ background:transparent; border-radius:var(--r-sm); color:var(--ink); }
[data-theme="console"] .chat-nav-panel-item:hover{ background:var(--bg-2); }
[data-theme="console"] .chat-nav-panel-item-title{ font-family:var(--ui); color:var(--ink); }
[data-theme="console"] .chat-nav-panel-item-time{ font-family:var(--mono); font-size:.7rem; color:var(--mute); }

/* ------------------------------------------------------------------ */
/* tabs                                                                */
[data-theme="console"] .atabs{ background:transparent; border-bottom:1px solid var(--line); gap:0; }
[data-theme="console"] .atab{ background:transparent; border:0; border-radius:var(--r-sm); color:var(--mute); font-family:var(--ui); }
[data-theme="console"] .atab.active{ color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }

/* ------------------------------------------------------------------ */
/* model switch                                                        */
[data-theme="console"] .model-toggle-track{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:none; }
[data-theme="console"] .model-toggle-knob{ background:var(--accent); border-radius:var(--r-pill); box-shadow:none; }
[data-theme="console"] .model-toggle-pill{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--mute); font-family:var(--mono); font-size:.72rem; }
[data-theme="console"] .model-toggle-side{ font-family:var(--mono); font-size:.72rem; color:var(--mute); }
[data-theme="console"] .model-toggle-side.is-current{ color:var(--ink); }
[data-theme="console"] .model-lock-standalone{ background:transparent; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--mute); font-family:var(--mono); font-size:.72rem; }
[data-theme="console"] .model-lock-standalone.is-ok{ border-color:var(--accent); color:var(--accent); }

/* ------------------------------------------------------------------ */
/* small print                                                         */
[data-theme="console"] .hint{ color:var(--mute); font-family:var(--ui); }
[data-theme="console"] .app-footer{ background:transparent; border-top:1px solid var(--line); }
[data-theme="console"] .app-footer-text{ font-family:var(--mono); font-size:.7rem; color:var(--mute); }
[data-theme="console"] :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }