/* === styles/tokens.css === */
/* Yumi design tokens — v3 "UNISON" (Ben's pick, 2026-07-06).
   yumi = you + me: cobalt lens on porcelain, crisp white surfaces, heavyweight grotesk.
   Themes: default (unison light) · night (unison dark) · enclave (the switchable
   Concept-3 alternate Ben reserved: acid lime on graphite, mono voice, square edges).
   Density contract unchanged: [data-density="tight|cozy|roomy"]. */
:root{
  --bg:#F4F4F2; --bg-2:#EBEBE7; --surface:#FFFFFF; --surface-2:#F7F7F5;
  --ink:#0E1116; --ink-2:#2A2F36; --mute:#6B7076; --faint:#A2A6AB;
  --line:#E4E4DF; --line-soft:#EFEFEA; --accent:#2743F0; --accent-soft:#DDE2F9;
  --teal:#2743F0; /* trust states = accent; green is banned outside the enclave theme */
  --trust-green:#178754; /* scoped exception (Ben, 2026-07-09): the model-info lock indicator ONLY —
    not a general trust-state color, the --teal ban above still stands for everything else */
  --shadow:0 1px 2px rgba(14,17,22,.05), 0 12px 40px rgba(14,17,22,.08);
  --shadow-sm:0 1px 2px rgba(14,17,22,.05), 0 3px 10px rgba(14,17,22,.05);
  --display:"Inter","Helvetica Neue",-apple-system,system-ui,sans-serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:18px; --r-sm:12px; --r-xs:8px; --r-pill:999px;
  --on-accent:#FFFFFF; --on-ink:#F4F4F2;
  /* admin (YumYum console) aliases */
  --paper:#FFFFFF; --paper-2:#F7F7F5; --ink-soft:#2A2F36;
}
/* unison dark */
[data-theme="night"]{
  --bg:#0D0F13; --bg-2:#13161B; --surface:#171A20; --surface-2:#1F232A;
  --ink:#F2F2F0; --ink-2:#D4D6DA; --mute:#969BA3; --faint:#666C74;
  --line:#272B32; --line-soft:#1F232A; --accent:#5D73FF; --accent-soft:#232A4E;
  --teal:#5D73FF; --on-ink:#0D0F13;
  --trust-green:#3ECF8E;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 40px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.28);
}
/* the reserved alternate: ENCLAVE — acid lime on graphite, mono voice, hard edges */
[data-theme="enclave"]{
  --bg:#0B0D0F; --bg-2:#101316; --surface:#14171A; --surface-2:#1A1E22;
  --ink:#EDEFF0; --ink-2:#D7DBDE; --mute:#8B949B; --faint:#5C646B;
  --line:#242A2F; --line-soft:#1A1E22; --accent:#C6F32F; --accent-soft:#2A3313;
  --teal:#C6F32F; --on-accent:#0B0D0F; --on-ink:#0B0D0F;
  --trust-green:#3ECF8E; /* deliberately NOT the enclave lime accent — the lock must stay
    visually distinct from "current theme" and read as "verified", not as themed chrome */
  --shadow:0 0 0 rgba(0,0,0,0); --shadow-sm:0 0 0 rgba(0,0,0,0);
  --display:"JetBrains Mono",ui-monospace,monospace;
  --ui:"JetBrains Mono",ui-monospace,monospace;
  --r:2px; --r-sm:2px; --r-xs:2px; --r-pill:2px;
}

/* === styles/yumi.css === */
/* Yumi component CSS — v3 "UNISON" (2026-07-06). Class vocabulary and component APIs
   unchanged since v1 (extracted from apps/yumi-app); the skin is now design-forward:
   porcelain + white + cobalt, heavyweight grotesk display, pill geometry.
   All colors/radii route through tokens.css vars so [data-theme="night"|"enclave"]
   restyle every component without component changes. */

.yumi-app{
  background:
    radial-gradient(1100px 640px at 84% -14%, color-mix(in srgb, var(--surface) 65%, transparent) 0%, transparent 52%),
    radial-gradient(880px 560px at -6% 114%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 48%),
    var(--bg);
  color:var(--ink-2);font-family:var(--ui);font-weight:450;-webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
.yumi-app *{box-sizing:border-box}
.yumi-shell{display:flex;flex-direction:column;height:100dvh}

.top{display:flex;align-items:center;gap:14px;padding:20px 28px 0;max-width:880px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:11px}
.mark{width:34px;height:34px;flex:none;border-radius:9px}
.word{font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink);letter-spacing:-.045em;line-height:1}
.word em{font-style:normal;color:var(--accent)}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding-left:12px;border-left:1px solid var(--line);margin-left:2px;white-space:nowrap}
.sp{flex:1}
.whoami{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:lowercase;color:var(--faint);white-space:nowrap}
.btn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-family:var(--ui);font-weight:600;font-size:12.5px;padding:8px 15px;border-radius:var(--r-pill);cursor:pointer;box-shadow:var(--shadow-sm);transition:all .15s;white-space:nowrap;line-height:1}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn.active{background:var(--surface-2);border-color:var(--ink-2);color:var(--ink);box-shadow:none}
.btn.solid{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.yumi-main{flex:1;overflow-y:auto;padding:16px 0 6px}
/* Density fix (QA defect): empty-chat state stops forcing yumi-main to stretch the full
   flex:1 height between the top bar and the composer — chat.js applies this modifier
   ONLY when there are no messages/streaming reply, so the composer sits right under the
   hero instead of ~500px below it. Real conversations are untouched (still flex:1 +
   overflow-y:auto, unchanged, so scroll behavior for long transcripts doesn't regress). */
.yumi-main-compact{flex:0 1 auto}
/* Density fix (QA defect): transcript column widened from 880px (~40% usable width once
   .col's own 76% cap is applied, at 1280) to 1040px (~81% at 1280) — target was 70-80%
   usable width. .compwrap below is widened to match so the composer stays aligned under
   the transcript, not narrower than it. */
.card{max-width:1040px;margin:0 auto;padding:0 28px}
.greet{font-family:var(--display);font-weight:800;font-size:40px;line-height:1.04;color:var(--ink);margin:8px 0 12px;letter-spacing:-.05em}
.greet em{font-style:normal;color:var(--accent)}
.sub{color:var(--mute);font-size:14.5px;line-height:1.6;margin-bottom:22px;max-width:58ch}
.sub b{color:var(--ink-2);font-weight:600}

.row{display:flex;margin:14px 0;gap:10px;align-items:flex-start}
.row.me{flex-direction:row-reverse}
.av{width:29px;height:29px;flex:none;margin-top:2px}
/* Density fix (QA defect): message column widened from 76% to 88% of the (now wider)
   .card — email lists/tables were the narrowest, most truncation-prone content at the
   old width; prose bubbles keep a readable measure via .bub's own font-size/line-height,
   not this cap, so widening it doesn't turn short replies into full-bleed walls of text. */
.col{max-width:88%;min-width:0}
.who{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:2px 6px 5px}
.row.me .who{text-align:right}
.bub{padding:13px 16px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.row.yumi .bub{background:var(--surface);border:1px solid var(--line);border-radius:var(--r) var(--r) var(--r) 5px;color:var(--ink-2);box-shadow:var(--shadow-sm);white-space:normal}
.row.yumi .bub p{margin:0 0 6px}.row.yumi .bub p:last-child{margin-bottom:0}
.row.yumi .bub pre{background:color-mix(in srgb,var(--surface) 70%,var(--ink) 5%);border:1px solid var(--line);border-radius:var(--r-xs);padding:10px 14px;overflow-x:auto;margin:6px 0;white-space:pre}
.row.yumi .bub code{font-family:var(--mono);font-size:12.5px;background:color-mix(in srgb,var(--surface) 70%,var(--ink) 5%);padding:2px 5px;border-radius:3px}
.row.yumi .bub pre code{background:none;padding:0}
.row.yumi .bub ul,.row.yumi .bub ol{margin:4px 0 4px 20px;padding:0}
.row.yumi .bub li{margin:2px 0}
.row.yumi .bub h1{font-size:1.15em;font-weight:700;margin:8px 0 4px}
.row.yumi .bub h2{font-size:1.08em;font-weight:700;margin:8px 0 4px}
.row.yumi .bub h3,.row.yumi .bub h4,.row.yumi .bub h5,.row.yumi .bub h6{font-size:1em;font-weight:700;margin:6px 0 3px}
.row.yumi .bub a{color:var(--accent);text-decoration:underline}
.row.yumi .bub hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.row.yumi .bub strong{font-weight:700}.row.yumi .bub em{font-style:italic}
.row.me .bub{background:var(--ink);color:var(--on-ink);border-radius:var(--r) var(--r) 5px var(--r)}
.typing{color:var(--faint);font-style:italic}
.err{color:var(--accent);font-family:var(--mono);font-size:12px}
.step{color:var(--faint);font-style:italic;font-size:13.5px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.clip.mic-live{animation:pulse 1s ease-in-out infinite}

/* theme fine-tuning */
[data-theme="night"] .fld input{background:var(--surface-2)}
[data-theme="enclave"] .bub,[data-theme="enclave"] .box,[data-theme="enclave"] .btn{box-shadow:none}
[data-theme="enclave"] .step,[data-theme="enclave"] .typing{font-style:normal}

/* density + scale */
[data-density="tight"] .bub{padding:9px 12px;font-size:14px}
[data-density="tight"] .row{margin-bottom:8px}
[data-density="roomy"] .bub{padding:16px 20px}
[data-density="roomy"] .row{margin-bottom:20px}

/* sso + biometric */
.sso-row{display:flex;gap:10px;justify-content:center}
.sso-ic{width:46px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);cursor:pointer}
.sso-ic:hover{border-color:var(--ink-2)}
.sso-btn{width:100%;padding:11px;margin-top:8px;background:var(--ink);color:var(--on-ink);border:none;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0}
.setrow label{font-size:13px;color:var(--ink-2);font-weight:600}
.setrow select,.setrow input[type=range]{flex:0 0 auto}
.seth{font-size:12.5px;color:var(--mute);margin:16px 0 8px;font-weight:600}
.secbox{font-size:12.5px;line-height:1.7;background:var(--surface-2);border-radius:var(--r-sm);padding:12px;color:var(--ink-2)}
.secbox b{color:var(--ink)}
.toolrow{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px}
.mcard.wide{max-width:680px}
.clip{background:none;border:none;cursor:pointer;width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--mute);flex:none}
.clip:hover{color:var(--ink);background:var(--surface-2)}
[data-theme="enclave"] .clip{border-radius:var(--r)}

/* composer */
.compwrap{max-width:1040px;margin:0 auto;padding:10px 28px 24px;width:100%}
.box{display:flex;gap:6px;align-items:center;background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-pill);padding:7px 7px 7px 18px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent),var(--shadow-sm)}
.box textarea{flex:1;border:0;background:transparent;resize:none;font-family:var(--ui);font-size:15px;color:var(--ink);outline:none;max-height:160px;line-height:1.55;padding:7px 0;font-weight:450}
.box textarea::placeholder{color:var(--faint)}
.send{appearance:none;border:0;background:var(--accent);color:var(--on-accent);font-family:var(--ui);font-weight:700;font-size:13.5px;padding:10px 20px;border-radius:var(--r-pill);cursor:pointer;flex:none;transition:background .15s,transform .1s}
.send:hover{background:var(--ink);color:var(--on-ink)} .send:active{transform:scale(.97)} .send:disabled{background:var(--faint);color:var(--surface)}
.hint{text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--faint);text-transform:uppercase;margin-top:10px}

/* icon-only round button (settings gear, new chat, back) */
.icbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;flex:none;box-shadow:var(--shadow-sm)}
.icbtn:hover{border-color:var(--accent);color:var(--accent)}
[data-theme="enclave"] .icbtn{border-radius:var(--r)}

/* grouped settings (Settings is the container: memory, connections, appearance…) */
.setgh{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:18px 2px 8px}
.setgroup{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.setlink{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.setlink:last-child{border-bottom:0}
.setlink:hover{background:var(--surface-2)}
.setlink .sl-ic{width:30px;height:30px;border-radius:var(--r-xs);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none}
.setlink .sl-b{flex:1;min-width:0}
.setlink .sl-l{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.setlink .sl-v{font-size:12px;color:var(--mute);margin-top:1px}
.setlink .sl-ch{color:var(--faint);display:flex}

/* phone sub-page header */
.mhead{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}
.mhead .mh-t{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--ink);flex:1;text-align:center}
.mhead .mh-sp{width:36px;flex:none}

/* page title — left-aligned surface header, same rail as content */
.ptitle{display:flex;align-items:center;gap:14px;margin:10px 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ptitle h2{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--ink);margin:0}
.ptitle .pt-sub{font-size:12.5px;color:var(--mute)}
.ptitle .sp{flex:1}

/* auth + modal */
.authc{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:30px 26px;position:relative;overflow:hidden}
.authc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.authc .mark{display:block;margin:0 auto 12px;width:42px;height:42px}
.authc .word{display:block;text-align:center;font-size:26px;margin-bottom:2px}
.asub{text-align:center;color:var(--mute);font-size:13px;margin:0 0 18px}
.atabs{display:flex;gap:6px;margin:0 0 14px;background:var(--surface-2);padding:4px;border-radius:var(--r-pill)}
.atab{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--mute);padding:7px;border-radius:var(--r-pill);cursor:pointer}
.atab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.fld{margin-bottom:11px}
.fld label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin:0 0 5px 3px}
.fld input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:11px 13px;font-family:var(--ui);font-size:14.5px;color:var(--ink);outline:none;box-shadow:inset 0 1px 2px rgba(14,17,22,.03)}
.fld input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.submit{width:100%;border:0;background:var(--ink);color:var(--on-ink);font-family:var(--ui);font-weight:700;font-size:14px;padding:12px;border-radius:var(--r-pill);cursor:pointer;margin-top:3px}
.submit:hover{background:var(--accent);color:var(--on-accent)}
.gbtn{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;padding:11px;border-radius:var(--r-pill);cursor:pointer;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:9px}
.gbtn:hover{border-color:var(--ink-2)}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11px;margin:14px 0 4px;text-transform:uppercase;letter-spacing:.06em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.aerr{color:var(--accent);font-family:var(--mono);font-size:11px;margin-top:10px;min-height:14px;text-align:center}
.modal{position:fixed;inset:0;background:rgba(8,10,14,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.on{display:flex}
.mcard{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px;max-height:86vh;overflow-y:auto}
.mcard h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:21px;color:var(--ink);margin:0 0 4px}
.mcard p.s{color:var(--mute);font-size:13px;margin:0 0 16px}
.conn{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 13px;margin-bottom:10px}
.conn .cn{font-weight:600;color:var(--ink);font-size:13.5px}
.conn .cd{color:var(--mute);font-size:12px;margin-top:2px}
.srv{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:8px;font-size:13px}
.srv .x{color:var(--accent);cursor:pointer;font-family:var(--mono);font-size:11px}
.mclose{margin-top:8px}
.hidden{display:none!important}

@media(max-width:600px){
  .top,.card,.compwrap{padding-left:14px;padding-right:14px}
  .top{gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-top:16px;scrollbar-width:none}.top::-webkit-scrollbar{display:none}.brand,.btn{flex:none}
  .greet{font-size:28px}.tag{display:none}.col{max-width:90%}
  .whoami{display:none}
  .btn{font-size:12px;padding:7px 11px}
  .word{font-size:21px}.mark{width:30px;height:30px}
  .authc{padding:24px 18px}
  .mcard{padding:18px;max-height:90vh}
  .bub{font-size:14px;padding:12px 14px}
  .box textarea{font-size:16px}
}
@media(max-width:380px){.btn{padding:6px 9px;font-size:11px}.greet{font-size:25px}}

/* ============ product components (VoiceBar / TrustBadge / MemoryChip / ConnectorTile) ============ */
.voicebar{display:inline-flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px 8px 9px;box-shadow:var(--shadow-sm);font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.voicebar .orb{width:30px;height:30px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--on-ink);font-size:14px;flex:none}
[data-theme="enclave"] .voicebar .orb{border-radius:var(--r)}
.voicebar[data-state="listening"] .orb{background:var(--accent);color:var(--on-accent);animation:pulse 1.1s ease-in-out infinite}
.voicebar[data-state="thinking"] .orb{background:var(--teal);color:var(--on-accent)}
.voicebar[data-state="speaking"] .orb{background:var(--accent);color:var(--on-accent)}
.voicebar .vstate{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.voicebar .wave{display:inline-flex;gap:2.5px;align-items:center;height:14px}
.voicebar .wave i{width:2.5px;border-radius:2px;background:var(--faint);height:5px}
.voicebar[data-state="listening"] .wave i,.voicebar[data-state="speaking"] .wave i{background:var(--accent)}
.voicebar .wave i:nth-child(2){height:10px}.voicebar .wave i:nth-child(3){height:14px}.voicebar .wave i:nth-child(4){height:8px}.voicebar .wave i:nth-child(5){height:12px}
.trust{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);background:color-mix(in srgb,var(--teal) 7%,transparent);border-radius:var(--r-xs);padding:4px 9px;white-space:nowrap}
.trust .tk{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.trust.inkline{color:var(--mute);border-color:var(--line);background:var(--surface-2)}
.trust.inkline .tk{background:var(--faint)}
.memchip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink-2);border-radius:var(--r-pill);padding:5px 11px;font-size:12.5px;max-width:100%}
.memchip .mk{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.memchip .mx{font-family:var(--mono);font-size:10px;color:var(--mute);cursor:pointer;margin-left:2px}
.memchip .mx:hover{color:var(--accent)}
.conntile{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;box-shadow:var(--shadow-sm)}
.conntile .ci{width:34px;height:34px;border-radius:var(--r-xs);background:var(--surface-2);border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;flex:none}
.conntile .cb{flex:1;min-width:0}
.conntile .cn{font-weight:600;color:var(--ink);font-size:13.5px;line-height:1.25}
.conntile .cd{color:var(--mute);font-size:12px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conntile .cs{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);flex:none}
.conntile .cs.on{color:var(--teal)}

/* === styles/admin.css === */
/* YumYum admin console CSS — extracted verbatim from apps/yumi-app/public/admin.html <style>,
   scoped under .yumyum-admin because the admin surface redefines .top/.btn/.brand/.tag/.sp/.who
   with different values than the consumer app. Token names map to the shared tokens.css
   (--paper/--paper-2/--ink-soft aliases). body{} paint → .yumyum-admin. */
.yumyum-admin{background:var(--bg);color:var(--ink-soft);font-family:var(--ui);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.yumyum-admin *{box-sizing:border-box}
.yumyum-admin .top{height:54px;background:#0E0E0C;color:#FAFAF6;display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:20;max-width:none;margin:0}
.yumyum-admin .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.yumyum-admin .brand img{height:28px;width:28px;border-radius:7px;background:#fff;display:block}
.yumyum-admin .brand .word{font-family:var(--display);font-style:italic;font-weight:600;font-size:18px;color:#FAFAF6;letter-spacing:-.01em}
.yumyum-admin .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#A6A39A;border-left:none;padding-left:0}
.yumyum-admin .sp{flex:1}
.yumyum-admin .who{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#CFCcC2;opacity:.85;margin:0}
.yumyum-admin .btn{border:1px solid #FAFAF6;background:transparent;color:#FAFAF6;font-family:var(--ui);font-weight:600;font-size:12px;padding:6px 12px;border-radius:5px;cursor:pointer;box-shadow:none}
.yumyum-admin .btn:hover{border-color:var(--accent);color:var(--accent);transform:none}
.yumyum-admin .layout{display:grid;grid-template-columns:196px 1fr;min-height:calc(100vh - 54px)}
.yumyum-admin nav{background:var(--paper);border-right:1px solid var(--line);padding:12px 8px}
.yumyum-admin nav a{display:block;padding:8px 12px;border-radius:5px;color:var(--ink-soft);font-size:13px;margin-bottom:2px;cursor:pointer;text-decoration:none}
.yumyum-admin nav a:hover{background:var(--paper-2);color:var(--ink)}
.yumyum-admin nav a.act{background:var(--paper-2);color:var(--ink);font-weight:600;border-left:2px solid var(--accent)}
.yumyum-admin main{padding:20px 26px;max-width:1180px}
.yumyum-admin h1{font-family:var(--display);font-style:italic;font-weight:600;font-size:24px;color:var(--ink);margin:0 0 2px}
.yumyum-admin .bar{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;margin:2px 0 18px;font-size:12.5px;color:var(--mute)}
.yumyum-admin .bar b{font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink);margin-right:5px}
.yumyum-admin .panel{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:18px}
.yumyum-admin .panel .hd{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-size:13px}
.yumyum-admin table{width:100%;border-collapse:collapse}
.yumyum-admin th,.yumyum-admin td{text-align:left;padding:9px 15px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
.yumyum-admin thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:500;background:var(--paper-2)}
.yumyum-admin tbody tr:last-child td{border-bottom:0}
.yumyum-admin tbody tr.dim{opacity:.55}
.yumyum-admin .m{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.yumyum-admin .pill{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:3px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.yumyum-admin .pill.on{color:var(--teal);border-color:var(--teal)} .yumyum-admin .pill.admin{color:#FAFAF6;background:var(--ink);border-color:var(--ink)}
.yumyum-admin .pill.off{color:#a04;border-color:#e6c9b8}
.yumyum-admin .muted{color:var(--mute)} .yumyum-admin .r{text-align:right}
.yumyum-admin .msg{padding:40px 26px;color:var(--mute)} .yumyum-admin .msg a{color:var(--accent)}
.yumyum-admin .warn{margin:0 0 14px;font-family:var(--mono);font-size:11px;color:#a04; background:#fbeee6;border:1px solid #e6c9b8;border-radius:5px;padding:8px 12px}
.yumyum-admin .note{margin:0 0 14px;font-family:var(--mono);font-size:11px;color:var(--mute);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:8px 12px}
.yumyum-admin .mini{font-family:var(--ui);font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);padding:3px 9px;border-radius:4px;cursor:pointer;margin-right:5px}
.yumyum-admin .mini:hover{border-color:var(--accent);color:var(--accent)}
.yumyum-admin .mini.danger:hover{border-color:#a04;color:#a04}
.yumyum-admin input.seat{width:56px;font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:4px;padding:3px 6px;background:var(--paper)}
.yumyum-admin select.plan{font-family:var(--ui);font-size:12px;border:1px solid var(--line);border-radius:4px;padding:3px 6px;background:var(--paper)}
.yumyum-admin .ssobtn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#FAFAF6;border:none;padding:9px 16px;border-radius:5px;font-weight:600;font-size:13px;text-decoration:none;margin-top:10px}
.yumyum-admin .ssobtn:hover{background:var(--accent)}
@media(max-width:760px){.yumyum-admin .layout{grid-template-columns:1fr}.yumyum-admin nav{display:none}}

/* === YB-04 security-path (live TEE verification) — allowlisted classes ===
   Verified/trust states use --accent (the DS trust colour). Per the token note above
   ("green is banned outside the enclave theme") there is deliberately NO red/green
   status token, so a FAILED hop reads through weight (--ink) + the established mono
   .err idiom, never an invented colour. All motion honours prefers-reduced-motion. */
.secpath{display:flex;flex-direction:column;gap:0;margin:2px 0}
.secnode{display:flex;flex-direction:column;position:relative}
.secnode-hd{display:flex;align-items:flex-start;gap:12px;padding:8px 0;cursor:pointer;text-align:left}
.secnode-mark{width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--faint);transition:border-color .3s,color .3s,background .3s}
[data-theme="enclave"] .secnode-mark{border-radius:var(--r)}
.secnode-body{flex:1;min-width:0}
.secnode-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.secnode-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.secnode-chev{color:var(--faint);font-family:var(--mono);font-size:12px;flex:none;align-self:center}
.secnode.pending .secnode-mark{animation:pulse 1.2s ease-in-out infinite}
.secnode.pending .secnode-s{animation:pulse 1.4s ease-in-out infinite}
.secnode.ok .secnode-mark{border-color:var(--accent);background:var(--accent);color:var(--on-accent);animation:secpop .35s ease}
.secnode.ok .secnode-s{color:var(--accent)}
.secnode.fail .secnode-mark{border-color:var(--ink);color:var(--ink);background:var(--surface);animation:secpop .35s ease}
.secnode.fail .secnode-s{color:var(--ink)}
.secnode-err{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:3px;line-height:1.5}
.secedge{width:2px;height:16px;margin-left:12px;background:var(--line);position:relative;overflow:hidden;flex:none}
.secedge::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .4s ease}
.secedge.filled::after{transform:scaleY(1)}
.secev{font-family:var(--mono);font-size:11.5px;line-height:1.6;background:var(--surface-2);border-radius:var(--r-xs);padding:10px 12px;margin:0 0 6px 38px;color:var(--ink-2);overflow-x:auto}
.secev b{color:var(--ink);font-family:var(--ui)}
.secev pre{white-space:pre;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);margin:6px 0 0;max-height:280px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);padding:8px}
.secev-disc{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--accent);cursor:pointer;margin-top:8px;display:inline-block}
@keyframes secpop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .secnode .secnode-mark,.secnode.pending .secnode-mark,.secnode.pending .secnode-s{animation:none}
  .secedge::after{transition:none}
}

/* === YB-01 "What Yumi did" per-task audit trail — allowlisted classes ===
   Compact, collapsed-by-default trail of the REAL tool calls a turn made. Trust/ok
   uses --accent; a failed step reads via weight (--ink) + mono, no invented red/green
   (same DS token rule as the security-path block above). Reduced-motion honoured. */
.ywd{margin:2px 0 14px 0}
.ywd-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--mute)}
.ywd-toggle:hover{color:var(--ink)}
.ywd-toggle .ywd-tick{color:var(--accent);font-weight:700}
.ywd-toggle .ywd-chev{font-size:10px;transition:transform .2s ease}
.ywd-toggle[aria-expanded="true"] .ywd-chev{transform:rotate(90deg)}
.ywd-list{list-style:none;margin:8px 0 0;padding:8px 0 4px 4px;border-left:2px solid var(--line-soft);display:flex;flex-direction:column;gap:6px}
.ywd-step{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.ywd-mark{width:15px;flex:none;text-align:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);margin-top:1px}
.ywd-step.bad .ywd-mark{color:var(--ink)}
.ywd-step.bad{color:var(--mute)}
.ywd-tool{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-left:auto;padding-left:10px;flex:none}
@media(prefers-reduced-motion:reduce){.ywd-toggle .ywd-chev{transition:none}}

/* === admin DataTable / RecordModal — YUMI-R-031..035 (existing tokens only, no new hex) === */
.yumyum-admin .dt-toolbar{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.yumyum-admin .dt-search{font-family:var(--ui);font-size:12.5px;border:1px solid var(--line);border-radius:4px;padding:5px 10px;background:var(--paper);color:var(--ink-soft);width:220px}
.yumyum-admin .dt-search:focus{outline:none;border-color:var(--accent)}
.yumyum-admin .dt-search::placeholder{color:var(--mute)}
.yumyum-admin .dt-sp{flex:1}
.yumyum-admin th.sortable{cursor:pointer;user-select:none}
.yumyum-admin th.sortable:hover{color:var(--ink)}
.yumyum-admin th .arrow{margin-left:5px;color:var(--faint);font-size:9px}
.yumyum-admin tbody tr.clickable{cursor:pointer}
.yumyum-admin tbody tr.clickable:hover{background:var(--paper-2)}
.yumyum-admin .dt-pager{display:flex;gap:8px;align-items:center;margin:10px 0 18px}
.mcard{position:relative}
.mclosebtn{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--mute);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.mclosebtn:hover{border-color:var(--accent);color:var(--accent)}

/* === email results UX — allowlisted classes ===
   Dense, clickable inbox/search-results list rendered from server.js steps[n].emails
   (replaces the old raw-pipe-table LLM output). Each row expands in place (accordion) to
   show the full message fetched from GET /api/mail/message/:id — no modal, no new tab, no
   scroll jump. Same visual language as the .ywd trail above (mono labels/dates, --accent
   for the live/unread signal, no invented red/green). */
.email-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:0 0 10px}
.email-row{border-bottom:1px solid var(--line-soft)}
.email-row:last-child{border-bottom:0}
.email-row-head{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);border:0;padding:9px 12px;cursor:pointer;font-family:var(--ui);color:var(--ink-2)}
.email-row-head:hover{background:var(--surface-2)}
.email-row.unread .email-row-head{background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface) 45%)}
.email-row.unread .email-row-head:hover{background:var(--accent-soft)}
.email-unread-dot{width:14px;flex:none;text-align:center;color:var(--accent);font-size:8px;line-height:1}
.email-from{flex:0 0 auto;max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.email-row.unread .email-from{font-weight:700}
.email-subject{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-date{flex:none;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--faint)}
.email-detail{background:var(--surface-2);border-top:1px solid var(--line-soft);padding:12px 14px 14px}
.email-detail-loading,.email-detail-error{font-size:12.5px;color:var(--mute)}
.email-detail-error{color:var(--ink)}
.email-detail-meta{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;font-size:12px;color:var(--ink-2)}
.email-detail-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-right:6px}
.email-detail-body{max-height:280px;overflow-y:auto;white-space:pre-wrap;font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xs);padding:10px 12px}
.email-detail-attach{margin-top:8px;font-size:11.5px;color:var(--mute)}
.email-ask-yumi{margin-top:10px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--accent);cursor:pointer}
.email-ask-yumi:hover{background:var(--accent-soft);border-color:var(--accent)}

/* === md() table renderer — allowlisted classes ===
   Fallback for any markdown pipe-table an LLM reply emits (not just email results). */
.md-table-wrap{overflow-x:auto;margin:6px 0}
table.md-table{border-collapse:collapse;font-size:12.5px;min-width:100%}
table.md-table th,table.md-table td{border:1px solid var(--line);padding:5px 10px;text-align:left;white-space:nowrap}
table.md-table thead th{background:var(--surface-2);font-weight:700;color:var(--ink)}
table.md-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface) 92%,var(--ink) 3%)}

/* === model-info trust badge (YB-05, 2026-07-09) ===
   Compact top-bar indicator: live model name + TEE label, plus a lock/shield icon whose
   color is the ONLY visual cue for encryption status. Text and icon both come from
   GET /api/model-info at runtime — nothing here is a color for "always trust", it is a
   color for "this call told us so, right now". Green (--trust-green, defined above,
   scoped exception to the --teal-only trust-state rule) fires ONLY when the caller
   passes the .lock-secure modifier; the unmodified state uses --faint (neutral ink),
   never red — a failed/unverified state is silence or neutral, not an alarm color. */
.model-badge{display:flex;align-items:center;gap:4px;flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--faint);white-space:nowrap}
.model-badge-label{text-transform:none}
.model-badge-lock{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;margin:0;border:none;background:none;color:var(--faint);cursor:pointer;border-radius:50%;transition:color .2s ease,background-color .2s ease}
.model-badge-lock:hover,.model-badge-lock:focus-visible{background:var(--surface-2);color:var(--ink-2)}
.model-badge-lock:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.model-badge-lock.lock-secure{color:var(--trust-green)}
.model-badge-lock.lock-secure:hover,.model-badge-lock.lock-secure:focus-visible{background:var(--surface-2);color:var(--trust-green)}
@media (max-width:600px){
  .model-badge-label{display:none} /* mobile .top is an icon-only horizontal-scroll row (see .brand,.btn{flex:none} above) — keep only the lock, same as the other icon buttons */
}

/* === composer "Think" toggle (2026-07-09) — existing tokens only, no new hex ===
   Per-message deep-reasoning toggle, sticky until turned off (state lives in chat.js's
   chat state, default OFF). Sized to match the composer's round .clip icon buttons
   (38px tall) so it sits in the same row with no layout shift; base state reserves a
   1px transparent border so toggling .on never changes box size (box-sizing:border-box
   is already global via .yumi-app *). ON state reuses the same accent-border + accent-ink
   language as .icbtn:hover/.box:focus-within/.fld input:focus elsewhere in this file —
   no new color, just the existing "active/focused" token pairing held persistently. */
.think-toggle{display:flex;align-items:center;justify-content:center;gap:5px;height:38px;padding:0 13px;border:1px solid transparent;border-radius:var(--r-pill);background:none;color:var(--mute);font-family:var(--ui);font-size:12.5px;font-weight:600;cursor:pointer;flex:none;line-height:1;white-space:nowrap;transition:border-color .15s,color .15s,background-color .15s}
.think-toggle:hover{color:var(--ink);background:var(--surface-2)}
.think-toggle.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.think-toggle.on:hover{background:var(--accent-soft)}
[data-theme="enclave"] .think-toggle{border-radius:var(--r)}