/* ===== ui/fonts.css ===== */
/* Self-hosted. The design system shipped a Google Fonts @import as a stand-in; the worker's
   CSP is script/style 'self' with no font-src, so a remote font silently fails to load and
   the whole type system falls back to Georgia/Helvetica. These are the same two families,
   latin subset, served from /fonts. */
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/source-serif-4-italic-300_700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/source-serif-4-normal-300_700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/space-grotesk-normal-300_700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== ds/tokens/colors.css ===== */
:root{
/* carbon — deep-water near-black base scale. Same luminance steps as the source scale,
   hue rotated onto blue so every surface reads as depth rather than warmth. */
--carbon-0:#070C11;--carbon-1:#0C1218;--carbon-2:#111A22;--carbon-3:#16202A;--carbon-4:#1C2833;--carbon-5:#24313D;--carbon-6:#2E3D4A;
/* foam — cool foreground scale (holds the --cream-* names the component library reads) */
--cream-1:#E4EEF4;--cream-2:#A9BECB;--cream-3:#77909F;--cream-4:#4C6473;
/* current — primary accent, shallow to deep water (holds the --ember-* names) */
--ember-200:#CDEBF6;--ember-300:#A5DCEF;--ember-400:#6FC5E4;--ember-500:#3FA9D4;--ember-600:#2A87B4;--ember-700:#1E6A91;
/* signal — seafoam (live/ok) */
--signal-300:#9FE0D2;--signal-400:#79D0BE;--signal-500:#55BCA6;--signal-600:#3E9A87;
/* support hues — warn and error stay warm on purpose: they have to break the blue to read */
--amber-400:#E3B564;--amber-500:#D29F42;
--red-400:#E2685C;--red-500:#CE4B40;
--blue-400:#93B8E8;--blue-500:#6E93D6;
/* surfaces */
--surface-page:var(--carbon-1);
--surface-panel:#0E151C;
--surface-card:var(--carbon-3);
--surface-raised:var(--carbon-4);
--surface-sunken:var(--carbon-0);
--overlay-hover:rgba(228,238,244,.05);
--overlay-press:rgba(228,238,244,.09);
--scrim:rgba(6,10,14,.72);
/* text */
--text-body:var(--cream-1);
--text-muted:var(--cream-2);
--text-faint:var(--cream-3);
--text-ghost:var(--cream-4);
--text-accent:var(--ember-400);
--text-inverse:#08131A;
/* accent (theming seam — override these 5 to retheme) */
--accent:var(--ember-500);
--accent-hover:var(--ember-400);
--accent-press:var(--ember-600);
--accent-tint:rgba(63,169,212,.14);
--border-accent:rgba(63,169,212,.5);
--caret:var(--accent);
/* status */
--status-ok:var(--signal-500);
--status-working:var(--ember-400);
--status-warn:var(--amber-400);
--status-err:var(--red-400);
--status-info:var(--blue-400);
/* borders */
--border-subtle:rgba(228,238,244,.08);
--border-strong:rgba(228,238,244,.16);
}


/* ===== ds/tokens/typography.css ===== */
:root{
--font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
--font-ui:'Space Grotesk','Avenir Next','Helvetica Neue',sans-serif;
--font-code:ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* code content only — never UI; intentionally a system stack, no webfont */
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-lg:16px;--text-xl:19px;--text-2xl:24px;--text-3xl:31px;--text-4xl:40px;
--leading-tight:1.15;--leading-snug:1.4;--leading-body:1.6;--leading-prose:1.7;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;
--tracking-label:.05em;--tracking-tight:-.01em;
/* role shorthands (font:) */
--type-display:600 var(--text-3xl)/var(--leading-tight) var(--font-display);
--type-title:600 var(--text-xl)/1.25 var(--font-display);
--type-prose:400 var(--text-lg)/var(--leading-prose) var(--font-display);
--type-body:400 var(--text-md)/var(--leading-body) var(--font-ui);
--type-small:400 var(--text-sm)/1.5 var(--font-ui);
--type-label:500 var(--text-2xs)/1 var(--font-ui);
--type-code:400 12.5px/1.55 var(--font-code);
}


/* ===== ds/tokens/spacing.css ===== */
:root{
--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;
--radius-1:4px;--radius-2:8px;--radius-3:12px;--radius-4:16px;--radius-full:999px;
--size-control-sm:28px;--size-control-md:34px;--size-control-lg:42px;
--width-sidebar:264px;--width-prose:680px;--width-composer:760px;--width-drawer:380px;
}


/* ===== ds/tokens/effects.css ===== */
:root{
--shadow-1:0 1px 2px rgba(0,0,0,.35);
--shadow-2:0 6px 24px rgba(0,0,0,.45);
--shadow-3:0 16px 48px rgba(0,0,0,.55);
--glow-accent:0 0 0 1px var(--border-accent),0 0 20px rgba(63,169,212,.18);
--glow-ok:0 0 6px rgba(85,188,166,.6);
--focus-ring:0 0 0 2px rgba(63,169,212,.6);
--ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.55,.06,.25,.95); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:180ms; /* @kind other */
--duration-slow:280ms; /* @kind other */
--blur-overlay:8px;
}


/* ===== ds/css/base.css ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--text-body)}
code,pre,kbd,samp{font-family:var(--font-code)}
::selection{background:rgba(63,169,212,.35);color:var(--cream-1)}
a{color:var(--ember-400);text-decoration:none}
a:hover{color:var(--ember-300);text-decoration:underline;text-underline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--carbon-5) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--carbon-5);border-radius:5px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}


/* ===== ds/css/components.css ===== */
/* buttons */
.tn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-2);font-family:var(--font-ui);font-weight:500;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.tn-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-btn--sm{height:var(--size-control-sm);padding:0 10px;font-size:12px}
.tn-btn--md{height:var(--size-control-md);padding:0 14px;font-size:13px}
.tn-btn--lg{height:var(--size-control-lg);padding:0 18px;font-size:14.5px}
.tn-btn--block{width:100%}
.tn-btn--primary{background:var(--accent);color:var(--text-inverse)}
.tn-btn--primary:hover{background:var(--accent-hover)}
.tn-btn--primary:active{background:var(--accent-press);transform:translateY(1px)}
.tn-btn--secondary{background:var(--surface-raised);border-color:var(--border-subtle);color:var(--text-body)}
.tn-btn--secondary:hover{background:var(--carbon-5);border-color:var(--border-strong)}
.tn-btn--secondary:active{transform:translateY(1px)}
.tn-btn--ghost{background:transparent;color:var(--text-muted)}
.tn-btn--ghost:hover{background:var(--overlay-hover);color:var(--text-body)}
.tn-btn--ghost:active{background:var(--overlay-press);transform:translateY(1px)}
.tn-btn--danger{background:transparent;border-color:rgba(226,104,92,.4);color:var(--red-400)}
.tn-btn--danger:hover{background:rgba(226,104,92,.12);border-color:rgba(226,104,92,.6)}
.tn-btn--danger:active{transform:translateY(1px)}
.tn-btn:disabled{opacity:.4;pointer-events:none}
.tn-btn svg{flex:none}
.tn-iconbtn--sm{width:var(--size-control-sm);padding:0}
.tn-iconbtn--md{width:var(--size-control-md);padding:0}
.tn-iconbtn--lg{width:var(--size-control-lg);padding:0}
/* badge */
.tn-badge{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:6px;border:1px solid;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:lowercase}
.tn-badge--neutral{color:var(--cream-2);border-color:var(--border-strong);background:var(--overlay-hover)}
.tn-badge--accent{color:var(--ember-300);border-color:rgba(63,169,212,.35);background:var(--accent-tint)}
.tn-badge--ok{color:var(--signal-300);border-color:rgba(138,179,99,.35);background:rgba(138,179,99,.12)}
.tn-badge--warn{color:var(--amber-400);border-color:rgba(227,181,100,.35);background:rgba(227,181,100,.12)}
.tn-badge--err{color:var(--red-400);border-color:rgba(226,104,92,.4);background:rgba(226,104,92,.12)}
.tn-badge--info{color:var(--blue-400);border-color:rgba(143,176,206,.4);background:rgba(143,176,206,.12)}
.tn-badge__dot{width:6px;height:6px;border-radius:2px;background:currentColor}
/* card */
.tn-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-3);box-shadow:var(--shadow-1)}
.tn-card--sunken{background:var(--surface-sunken);box-shadow:none}
.tn-card--interactive{cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.tn-card--interactive:hover{border-color:var(--border-strong);background:var(--surface-raised)}
/* tabs */
.tn-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle)}
.tn-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 10px;font:500 13px var(--font-ui);color:var(--text-faint);cursor:pointer;transition:color var(--duration-fast) var(--ease-out)}
.tn-tab:hover{color:var(--text-muted)}
.tn-tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px 6px 0 0}
.tn-tab--active{color:var(--text-body);border-bottom-color:var(--accent)}
/* tooltip */
.tn-tip{position:relative;display:inline-flex}
.tn-tip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(3px);background:var(--carbon-5);border:1px solid var(--border-strong);color:var(--cream-1);font:400 12px/1.4 var(--font-ui);padding:5px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow-2);z-index:50;transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.tn-tip:hover .tn-tip__bubble,.tn-tip:focus-within .tn-tip__bubble{opacity:1;transform:translateX(-50%) translateY(0)}
/* label */
.tn-label{display:block;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:lowercase;color:var(--text-faint);margin-bottom:8px}
/* input + select */
.tn-input{width:100%;height:var(--size-control-md);padding:0 12px;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-2);color:var(--text-body);font:400 13.5px var(--font-ui);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.tn-input::placeholder{color:var(--text-ghost)}
.tn-input:hover{border-color:var(--border-strong)}
.tn-input:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px var(--accent-tint)}
.tn-input--invalid{border-color:rgba(206,75,64,.55)}
.tn-input--invalid:focus{border-color:var(--red-400);box-shadow:0 0 0 3px rgba(206,75,64,.15)}
textarea.tn-input{height:auto;padding:8px 12px;resize:none;line-height:1.5}
.tn-select{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAB4A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;cursor:pointer}
.tn-select option{background:var(--carbon-4);color:var(--cream-1)}
/* checkbox + radio */
.tn-choice{display:inline-flex;align-items:center;gap:9px;font:400 13.5px var(--font-ui);color:var(--text-muted);cursor:pointer}
.tn-check,.tn-radio{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:none;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-sunken);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.tn-check:hover,.tn-radio:hover{border-color:var(--cream-3)}
.tn-check:focus-visible,.tn-radio:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-check:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171310' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--accent)}
.tn-radio{border-radius:var(--radius-full)}
.tn-radio:checked{border:5px solid var(--accent);background:var(--cream-1)}
/* switch */
.tn-switchwrap{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:400 13.5px var(--font-ui);color:var(--text-muted)}
.tn-switchwrap input{position:absolute;opacity:0;width:0;height:0}
.tn-switch{width:34px;height:19px;border-radius:var(--radius-full);background:var(--carbon-5);border:1px solid var(--border-subtle);display:inline-flex;align-items:center;padding:2px;flex:none;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}
.tn-switch__knob{width:13px;height:13px;border-radius:var(--radius-full);background:var(--cream-2);transition:transform var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}
.tn-switchwrap input:checked+.tn-switch{background:var(--accent);border-color:var(--accent)}
.tn-switchwrap input:checked+.tn-switch .tn-switch__knob{transform:translateX(15px);background:var(--text-inverse)}
.tn-switchwrap input:focus-visible+.tn-switch{box-shadow:var(--focus-ring)}
/* dialog */
.tn-scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(var(--blur-overlay));-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;animation:tn-fade var(--duration-base) var(--ease-out)}
.tn-dialog{background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-4);box-shadow:var(--shadow-3);width:100%;animation:tn-rise var(--duration-base) var(--ease-out)}
.tn-dialog__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}
.tn-dialog__title{margin:0;font:var(--type-title);color:var(--text-body)}
.tn-dialog__body{padding:14px 20px 20px;font:400 13.5px/1.6 var(--font-ui);color:var(--text-muted)}
.tn-dialog__foot{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 18px}
/* toast */
.tn-toast{display:flex;align-items:center;gap:10px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-2);padding:10px 12px;box-shadow:var(--shadow-2);font:400 13px/1.45 var(--font-ui);color:var(--text-body);max-width:380px;animation:tn-rise var(--duration-base) var(--ease-out)}
.tn-toast__msg{flex:1;min-width:0}
.tn-toast__title{font-weight:500;color:var(--text-body)}
.tn-toast__body{color:var(--text-faint);font-size:12.5px;margin-top:2px}
/* spinner (pulsing block caret) + status dot */
.tn-spinner{display:inline-block;width:9px;height:14px;border-radius:2px;background:var(--accent);animation:tn-pulse 1.1s var(--ease-in-out) infinite}
.tn-caret{display:inline-block;width:.45em;height:.9em;border-radius:2px;background:var(--caret);margin-left:.14em;vertical-align:-.06em;animation:tn-blink 1.1s steps(1) infinite}
.tn-status{width:8px;height:8px;border-radius:var(--radius-full);flex:none}
.tn-status--ok{background:var(--status-ok);box-shadow:var(--glow-ok)}
.tn-status--working{background:var(--status-working);box-shadow:0 0 6px rgba(111,197,228,.6);animation:tn-pulse 1.2s var(--ease-in-out) infinite}
.tn-status--warn{background:var(--status-warn);box-shadow:0 0 6px rgba(227,181,100,.5)}
.tn-status--err{background:var(--status-err);box-shadow:0 0 6px rgba(206,75,64,.5)}
.tn-status--info{background:var(--status-info);box-shadow:0 0 6px rgba(143,176,206,.5)}
.tn-status--off{background:var(--cream-4)}
.tn-statusrow{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--font-ui);letter-spacing:var(--tracking-label);text-transform:lowercase;color:var(--text-faint)}
/* messages */
.tn-thread{display:flex;flex-direction:column;gap:22px}
.tn-msg__meta{display:flex;align-items:center;gap:8px;margin-bottom:7px;font:500 11.5px/1 var(--font-ui);letter-spacing:var(--tracking-label);text-transform:lowercase;color:var(--text-faint)}
.tn-msg__time{color:var(--text-ghost)}
.tn-msg--assistant .tn-msg__dot{width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none}
.tn-msg__prose{font:var(--type-prose);color:var(--text-body);max-width:var(--width-prose)}
.tn-msg__prose p{margin:0 0 10px}
.tn-msg__prose p:last-child{margin-bottom:0}
.tn-msg--user{display:flex;flex-direction:column;align-items:flex-end}
.tn-msg--user .tn-msg__bubble{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:14px 14px 4px 14px;padding:10px 14px;font:400 14px/1.55 var(--font-ui);color:var(--text-body);max-width:560px}
.tn-msg--system{display:flex;justify-content:center;font:400 11.5px/1 var(--font-ui);letter-spacing:var(--tracking-label);text-transform:lowercase;color:var(--text-ghost)}
/* code block */
.tn-code{background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-2);overflow:hidden;max-width:var(--width-prose)}
.tn-code__head{display:flex;align-items:center;justify-content:space-between;padding:5px 5px 5px 12px;border-bottom:1px solid var(--border-subtle);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:lowercase;color:var(--text-faint)}
.tn-code__body{margin:0;padding:12px 14px;font:var(--type-code);color:var(--cream-2);overflow-x:auto}
.tn-msg__prose .tn-code{margin:10px 0}
/* composer */
.tn-composer{background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-4);padding:12px 12px 10px;box-shadow:var(--shadow-2);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.tn-composer:focus-within{border-color:var(--border-accent);box-shadow:var(--shadow-2),0 0 0 3px var(--accent-tint)}
.tn-composer__input{width:100%;background:none;border:0;outline:0;resize:none;font:400 14.5px/1.55 var(--font-ui);color:var(--text-body);padding:2px 4px;max-height:200px;display:block}
.tn-composer__input::placeholder{color:var(--text-ghost)}
.tn-composer__row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.tn-composer__hint{font:400 11.5px/1 var(--font-ui);color:var(--text-ghost);letter-spacing:.03em}
/* session item */
.tn-session{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:var(--radius-2);border:0;background:none;cursor:pointer;text-align:left;font-family:var(--font-ui);transition:background var(--duration-fast) var(--ease-out)}
.tn-session:hover{background:var(--overlay-hover)}
.tn-session:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-session--active{background:var(--overlay-press)}
.tn-session__body{flex:1;min-width:0}
.tn-session__title{display:block;font:500 13px/1.3 var(--font-ui);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-session--active .tn-session__title{color:var(--text-body)}
.tn-session__meta{display:block;font:400 11px/1.3 var(--font-ui);color:var(--text-ghost);margin-top:2px}
/* kbd */
.tn-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:4px;background:var(--surface-raised);border:1px solid var(--border-strong);border-bottom-width:2px;font:500 10.5px var(--font-ui);color:var(--text-faint)}
/* segmented */
.tn-seg{display:inline-flex;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:8px;padding:2px;gap:2px}
.tn-seg__btn{appearance:none;border:0;background:none;border-radius:6px;height:23px;padding:0 10px;font:500 12px var(--font-ui);color:var(--text-faint);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.tn-seg__btn:hover{color:var(--text-muted)}
.tn-seg__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-seg__btn--active{background:var(--surface-raised);color:var(--text-body);box-shadow:0 1px 2px rgba(0,0,0,.35)}
/* command chip */
.tn-cmd{display:inline-flex;align-items:stretch;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;height:26px}
.tn-cmd__run{appearance:none;border:0;background:none;display:inline-flex;align-items:center;gap:6px;padding:0 9px;font:500 12px var(--font-ui);color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.tn-cmd__run:hover{background:var(--overlay-hover);color:var(--text-body)}
.tn-cmd__run:focus-visible,.tn-cmd__star:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tn-cmd__caret{color:var(--ember-400);font-size:11px}
.tn-cmd__star{appearance:none;border:0;border-left:1px solid var(--border-subtle);background:none;width:24px;color:var(--text-ghost);cursor:pointer;font-size:12px;line-height:1;transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}
.tn-cmd__star:hover{color:var(--amber-400);background:var(--overlay-hover)}
.tn-cmd--starred .tn-cmd__star{color:var(--amber-400)}
/* terminal view */
.tn-term{background:var(--surface-sunken);font:var(--type-code);color:var(--cream-2);padding:12px 14px;overflow-y:auto}
.tn-term__line{white-space:pre-wrap;line-height:1.62;min-height:1.62em}
.tn-term__cmd{color:var(--cream-1)}
.tn-term__cmd::before{content:'▸ ';color:var(--ember-400)}
.tn-term__meta{color:var(--text-ghost)}
.tn-term__ok{color:var(--signal-400)}
.tn-term__err{color:var(--red-400)}
/* tour */
.tn-spot{position:fixed;z-index:400;pointer-events:none;border-radius:12px;box-shadow:0 0 0 1.5px var(--border-accent),0 0 24px rgba(63,169,212,.25),0 0 0 9999px rgba(6,10,14,.62);transition:left 240ms var(--ease-out),top 240ms var(--ease-out),width 240ms var(--ease-out),height 240ms var(--ease-out)}
.tn-tourdim{position:fixed;inset:0;z-index:400;background:rgba(6,10,14,.62);pointer-events:none}
.tn-tourcard{position:fixed;z-index:401;width:330px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-3);padding:16px;animation:tn-rise var(--duration-base) var(--ease-out)}
.tn-starglow{color:var(--amber-400)!important;border-radius:6px;box-shadow:0 0 0 2px rgba(227,181,100,.55),0 0 14px rgba(227,181,100,.45);animation:tn-pulse 1.2s var(--ease-in-out) infinite}
/* keyframes */
@keyframes tn-fade{from{opacity:0}}
@keyframes tn-rise{from{opacity:0;transform:translateY(6px)}}
@keyframes tn-pulse{50%{opacity:.25}}
@keyframes tn-blink{0%,55%{opacity:1}56%,100%{opacity:0}}


/* ===== ui/app.css ===== */
/* From the kit's index.html inline <style>: page shell + the op-row control the sidebar,
   palette and chip lists are built from. Kept as-is; it is part of the design. */
html, body, #root { height: 100%; }
body { overflow: hidden; }
.op-row {
  display: flex; gap: 10px; align-items: center; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  cursor: pointer; transition: background 120ms; appearance: none; text-align: left;
}
.op-row:hover { background: var(--overlay-hover); }
.op-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.op-row:disabled { opacity: .45; cursor: not-allowed; }

/* Terminal transcript line types (assistant prose + agent-style tool call / result),
   inlined after the design system so they extend .tn-term without editing the DS reference. */
.tn-term__assistant { color: var(--cream-1); }
.tn-term__tool { color: var(--text-muted); }
.tn-term__tool::before { content: '⏺ '; color: var(--ember-400); }
.tn-term__result { color: var(--text-faint); padding-left: 18px; }
.tn-term__result::before { content: '⎿ '; color: var(--text-ghost); }

/* The tour card travels on the same curve and duration as its spotlight ring. Without this
   the ring glides to the next target and the card jumps after it, which reads as the whole
   thing stuttering. Only left/top animate: width would fight the text reflow. */
.tn-tourcard {
  transition: left 240ms var(--ease-out), top 240ms var(--ease-out);
  will-change: left, top;
}
.tn-tourtext { animation: rh-fadein 220ms var(--ease-out); }
@keyframes rh-fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tn-tourcard { transition: none; }
  .tn-tourtext { animation: none; }
}

/* A flow is a sequence that moves; the marker drifts rather than sitting still. */
.rh-flow {
  display: inline-block; color: var(--ember-400);
  animation: rh-drift 3.6s var(--ease-in-out) infinite;
}
@keyframes rh-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Depth. The page sits under two very slow, very faint currents so a still screen is not
   a flat screen. Both are fixed and behind everything; neither takes pointer events. */
#root::before {
  content: ''; position: fixed; inset: -20% -10% auto -10%; height: 70%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 55% at 20% 0%, rgba(63,169,212,.07), transparent 70%),
    radial-gradient(50% 50% at 80% 10%, rgba(85,188,166,.05), transparent 70%);
  animation: rh-tide 24s var(--ease-in-out) infinite;
}
@keyframes rh-tide {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .9; }
  50% { transform: translate3d(-3%, 2%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-flow, #root::before { animation: none; }
}

/* Drag handles for the pane splits and the rail. The hit area is wider than the visible grip
   so the target is reachable without thickening the gap the panes sit in. */
.op-split { background: none; border: 0; }
.op-split-grip {
  border-radius: 2px; background: var(--border-subtle);
  opacity: 0; transition: opacity 120ms, background 120ms;
}
.op-split:hover .op-split-grip,
.op-split:active .op-split-grip { opacity: 1; background: var(--accent); }
.op-split:focus-visible { outline: none; }
.op-split:focus-visible .op-split-grip { opacity: 1; background: var(--accent); box-shadow: var(--focus-ring); }

/* Phone layout. The app's own boxes branch on the matchMedia hook in workspace.jsx; these
   rules cover the design system's own fixed widths and desktop-sized padding, which no
   amount of layout branching reaches. Breakpoint matches NARROW in workspace.jsx. */
@media (max-width: 820px) {
  .tn-scrim { padding: 12px; align-items: flex-start; padding-top: 40px; }
  .tn-thread { gap: 16px; }
  .tn-msg--user .tn-msg__bubble { max-width: 100%; }
  .tn-msg__prose { max-width: 100%; }
  .tn-code { max-width: 100%; }
  .tn-term { padding: 10px 10px; font-size: 12px; }
  .tn-toast { max-width: calc(100vw - 24px); }
  .tn-tourcard { width: calc(100vw - 24px); max-width: 330px; }
  .tn-dialog__head { padding: 14px 14px 0; }
  .tn-dialog__body { padding: 12px 14px 14px; }
  .tn-dialog__foot { padding: 0 14px 14px; }
}