/* Modelit.US design system.
   Calm, Claude-like shell on the Modelit palette (navy #174A7E, charcoal #3A434E, ink #111820,
   band #DCE8F3, off-white #F7F8FA). One sans for UI (Inter), one mono for tool rows, marks and IDs
   (IBM Plex Mono); Archivo Black only for the public hero.
   Order: tokens (light + dark) · base · layout (site, staff shell) · components · pages. */

/* ==== 1. tokens ============================================================================== */
:root{
  color-scheme:light dark;
  /* brand */
  --navy:#174a7e;--navy-d:#103a63;--ink:#111820;--charcoal:#3a434e;--band:#dce8f3;
  /* surfaces */
  --bg:#f7f8fa;--surface:#fff;--surface-2:#f1f3f6;--side-bg:#f1f3f6;--hover:rgba(17,24,32,.045);
  --active:rgba(23,74,126,.08);--line:#e3e7ec;--line-strong:#d2d8e0;
  /* text */
  --text:#1f2a37;--text-strong:#111820;--muted:#5b6876;--faint:#636e7c;
  /* accent */
  --accent:#174a7e;--accent-hover:#103a63;--on-accent:#fff;--accent-text:#174a7e;
  --accent-soft:#e7eff8;--accent-soft-text:#123d68;--accent-line:#bcd0e6;
  --bubble:#e8eef5;--bubble-text:#14324f;
  /* status: soft pill background + text (all text >= 4.5:1 on its background) */
  --ok:#1a6a40;--ok-soft:#e5f2ea;--warn:#8a5000;--warn-soft:#fbf0dc;--err:#b42318;--err-soft:#fbe9e7;
  --info:#174a7e;--info-soft:#e7eff8;--neutral:#4a5563;--neutral-soft:#eef1f4;
  --dot-ok:#2ea043;--dot-run:#d9822b;--dot-err:#d1453b;--dot-wait:#174a7e;--dot-idle:#9aa5b1;
  /* code */
  --code-bg:#f3f5f8;
  /* type */
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:16px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:28px;
  /* space, radius, elevation */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:18px;--r-full:999px;
  --sh-1:0 1px 2px rgba(17,24,32,.05);
  --sh-2:0 1px 2px rgba(17,24,32,.05),0 10px 28px -14px rgba(17,24,32,.22);
  --ring:0 0 0 3px rgba(23,74,126,.28);
  --side-w:260px;--col:720px;--page:1000px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f141a;--surface:#161c24;--surface-2:#1b222c;--side-bg:#12181f;--hover:rgba(255,255,255,.05);
    --active:rgba(121,167,217,.14);--line:#252e39;--line-strong:#323d4a;
    --text:#dfe5ec;--text-strong:#f2f5f8;--muted:#9ba7b3;--faint:#76828f;
    --accent:#3d76b3;--accent-hover:#4b84c2;--on-accent:#fff;--accent-text:#8fb9e6;
    --accent-soft:#1b2c40;--accent-soft-text:#c7dbf1;--accent-line:#2d4766;
    --bubble:#1f2c3b;--bubble-text:#dbe7f3;
    --ok:#7fd3a0;--ok-soft:rgba(46,160,67,.16);--warn:#e8b56b;--warn-soft:rgba(217,130,43,.16);
    --err:#f59389;--err-soft:rgba(244,112,103,.15);--info:#a9c9ec;--info-soft:rgba(121,167,217,.15);
    --neutral:#b4bec9;--neutral-soft:rgba(255,255,255,.07);
    --dot-ok:#3fb950;--dot-run:#e0a04f;--dot-err:#f47067;--dot-wait:#79a7d9;--dot-idle:#5d6976;
    --code-bg:#11161d;
    --sh-1:0 1px 2px rgba(0,0,0,.3);--sh-2:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
    --ring:0 0 0 3px rgba(121,167,217,.4);
  }
}

/* ==== 2. base ================================================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-md)/1.6 var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--text-strong);margin:0}
p{margin:0 0 var(--s3)}
code{font:.92em var(--mono)}
pre{white-space:pre-wrap;word-break:break-word;max-width:100%;overflow-x:auto;font:12px/1.55 var(--mono);
  background:var(--code-bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin:6px 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:0;box-shadow:var(--ring)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.mono{font:500 var(--fs-xs)/1.5 var(--mono);color:var(--muted);letter-spacing:0}
.mono-num{font:400 var(--fs-sm) var(--mono)}
.mono-text{font:var(--fs-sm)/1.5 var(--mono)}
.nowrap{white-space:nowrap}
.pre-line{white-space:pre-line}
.inline-block{display:inline-block}
.narrow{max-width:440px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ==== 3a. layout: public site + customer portal (base.html) ================================= */
.nav{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav-in{max-width:1120px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:24px}
.brand{flex:none}.brand img{height:26px;display:block}
.links{display:flex;gap:4px;margin:0 auto}
.links a,.nav-right a.plain,.nav-right button.plain{font:500 var(--fs-base)/1 var(--sans);color:var(--muted);text-decoration:none;background:none;border:0;
  padding:8px 10px;border-radius:var(--r-md);cursor:pointer}
.links a:hover,.nav-right a.plain:hover,.nav-right button.plain:hover{color:var(--text-strong);background:var(--hover)}
.links a.on{color:var(--text-strong);background:var(--active)}
.nav-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-right form{margin:0;display:flex;align-items:center;gap:12px}
.who{font-size:var(--fs-sm);color:var(--muted)}
.wrap{max-width:var(--page);margin:0 auto;padding:var(--s6) 24px var(--s8)}
.flash{max-width:var(--page);margin:var(--s4) auto 0}
.foot{border-top:1px solid var(--line);background:var(--bg);color:var(--muted)}
.foot-in{max-width:1120px;margin:0 auto;padding:var(--s5) 24px;display:flex;gap:var(--s5);flex-wrap:wrap;justify-content:space-between;font-size:var(--fs-sm)}
.foot strong{color:var(--text);font-weight:600}
.foot a{color:var(--muted);margin-left:18px}.foot a:hover{color:var(--text-strong)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-md)}
.menu summary:hover{background:var(--hover)}
.menu summary::-webkit-details-marker{display:none}
.burger{font-size:20px;line-height:1;color:var(--text)}
.menu-in{position:absolute;right:0;top:44px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);
  min-width:220px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-2);font-size:var(--fs-base)}
.menu-in a{color:var(--text)}
.menu-in form{margin:0}
.menu-in button.plain{background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer;text-align:left}

/* auth / one-card pages */
.auth{max-width:420px;margin:var(--s6) auto 0}
.auth-logo{display:block;width:160px;margin:0 auto var(--s5)}
.auth .page-title{text-align:center;font-size:var(--fs-xl)}
.auth .card{padding:var(--s5)}
.auth .card.narrow{max-width:none}
.auth-foot{text-align:center;font-size:var(--fs-sm);color:var(--muted);margin:var(--s4) 0 0}
.auth form .btn{width:100%;min-height:40px}
.auth form>p.small{text-align:center;margin:var(--s3) 0 0}
.auth .card>p:last-child{margin-bottom:0}

/* ==== 3b. layout: staff shell (console/shell.html, Claude-style) =========================== */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;min-height:100dvh;font-size:var(--fs-base);background:var(--bg);overflow-x:hidden}
.app .nav-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);color:var(--text);text-decoration:none;cursor:pointer;background:none;border:0}
.icon-btn:hover{background:var(--hover);text-decoration:none}
.icon-btn svg,.ico{width:18px;height:18px;flex:none}
.app .app-top,.app .scrim,.app .side-close{display:none}
.app .nav-toggle:focus-visible ~ .app-top label[for=nav-toggle]{box-shadow:var(--ring)}

/* sidebar */
.app .side{background:var(--side-bg);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:var(--s3) var(--s3) var(--s2);gap:var(--s1);min-width:0;z-index:30}
.app .side-head{display:flex;align-items:center;justify-content:space-between;padding:6px var(--s2) var(--s3)}
.side-brand img,.app-brand img{height:20px;display:block}
.app .new-chat{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-1);color:var(--text-strong);font:500 var(--fs-base)/1.3 var(--sans);text-decoration:none}
.app .new-chat:hover{border-color:var(--line-strong);text-decoration:none}
.app .new-chat .ico{color:var(--accent-text)}
.app .side-nav{display:flex;flex-direction:column;gap:1px}
.app .side-nav a,.app .recent{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-md);color:var(--text);text-decoration:none;font:400 var(--fs-base)/1.35 var(--sans)}
.app .side-nav a:hover,.app .recent:hover{background:var(--hover);text-decoration:none}
.app .side-nav a.on,.app .recent.on{background:var(--active);color:var(--text-strong);font-weight:500}
/* nav icons (CSS masks keyed on the link target, so the markup and its text stay as they are) */
.app .side-nav a::before{content:"";width:16px;height:16px;flex:none;background:currentColor;opacity:.7;-webkit-mask:var(--i) center/16px no-repeat;mask:var(--i) center/16px no-repeat}
.app .side-nav a[href$="/console"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E")}
.app .side-nav a[href$="/jobs/new"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M12 11v6M9 14h6'/%3E%3C/svg%3E")}
.app .side-nav a[href$="/lessons"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v16H6.5A2.5 2.5 0 0 0 4 21.5 2.5 2.5 0 0 0 6.5 24'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3C/svg%3E")}
.app .side-nav a[href$="/dev"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9-4 3 4 3M16 9l4 3-4 3M13.5 5l-3 14'/%3E%3C/svg%3E")}
.app .side-nav a[href$="/machines"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E")}
.app .side-nav a[href$="/team"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5'/%3E%3C/svg%3E")}
.count{display:inline-block;min-width:18px;padding:0 6px;margin-left:auto;background:var(--accent);color:var(--on-accent);border-radius:var(--r-full);font:600 11px/18px var(--sans);text-align:center}
.links .count,.tabs .count{margin-left:6px}
.app .recents{flex:1;overflow-y:auto;min-height:0;margin:var(--s3) calc(-1 * var(--s1)) 0;padding:0 var(--s1)}
.app .recents-label{font:500 var(--fs-xs)/1 var(--sans);color:var(--faint);padding:var(--s3) 10px 6px}
.app .recent{font-size:var(--fs-sm);color:var(--text)}
.app .recent-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .recent-tag{font:400 11px var(--mono);color:var(--faint)}
.app .recents-empty{color:var(--faint);font-size:var(--fs-sm);padding:var(--s2) 10px;margin:0}
.app .side-user{position:relative;border-top:1px solid var(--line);padding-top:var(--s2)}
.app .side-user summary{list-style:none;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;font:500 var(--fs-base) var(--sans)}
.app .side-user summary::-webkit-details-marker{display:none}
.app .side-user summary:hover{background:var(--hover)}
.app .avatar{width:28px;height:28px;border-radius:50%;background:var(--charcoal);color:#fff;display:grid;place-items:center;font:600 12px var(--sans);flex:none}
.app .side-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .side-user-menu{position:absolute;bottom:52px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.app .side-user-menu a{color:var(--text);font-size:var(--fs-base)}
.app .side-user-menu form{margin:0}
.app .side-user-menu .linkish{font:400 var(--fs-base) var(--sans);color:var(--text)}

/* main column */
.app .main{min-width:0;display:flex;flex-direction:column}
.app .app-main{width:100%;max-width:calc(var(--page) + 2 * 40px);margin:0 auto;padding:var(--s6) 40px var(--s8)}
.app .flash{max-width:var(--page);width:calc(100% - 80px);margin:var(--s4) auto 0}

/* phone: sticky top bar + off-canvas drawer (checkbox + scrim label, no JS) */
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);align-content:start}
  .app .app-top{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 var(--s2);position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .app .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,85vw);transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--sh-2);visibility:hidden}
  .app .side-close{display:inline-grid}
  .app .nav-toggle:checked ~ .side{transform:none;visibility:visible}
  .app .nav-toggle:checked ~ .scrim{display:block;position:fixed;inset:0;background:rgba(10,14,19,.4);z-index:25}
  .app .app-main{padding:var(--s5) var(--s4) var(--s7)}
  .app .flash{width:calc(100% - 32px)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.app .side{transition:none}}

/* ==== 4. components ========================================================================== */
/* headings */
.page-title{font-size:var(--fs-xl);font-weight:600;margin:0 0 var(--s4);color:var(--text-strong)}
h2.sub{font:600 var(--fs-md)/1.3 var(--sans);margin:var(--s6) 0 var(--s3);color:var(--text-strong)}
.card h2.sub:first-child,.card>input[type=hidden]:first-child+h2.sub{margin-top:0}
input+p.small,select+p.small,textarea+p.small,input+p.hint{margin-top:6px}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.head-row .page-title,.head-row h2.sub{margin:0}
.head-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:4px;margin:0 0 var(--s3);font-size:var(--fs-sm)}
.back a{color:var(--muted)}.back a:hover{color:var(--text-strong)}
.meta{margin:0 0 var(--s4);font-size:var(--fs-sm);color:var(--muted)}
.meta strong{color:var(--text);font-weight:500}

/* buttons: primary (default) / secondary / ghost / danger / dark · sizes: sm, default, wide */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;min-height:36px;background:var(--accent);color:var(--on-accent);
  border:1px solid transparent;border-radius:var(--r-md);font:500 var(--fs-base)/1.2 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--accent-hover);text-decoration:none}
.btn.secondary{background:var(--surface);color:var(--text-strong);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--text)}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:var(--surface);color:var(--err);border-color:var(--line-strong)}
.btn.danger:hover{background:var(--err-soft);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:#000}
.btn.sm{padding:4px 10px;min-height:30px;font-size:var(--fs-sm);border-radius:7px}
.btn.wide{padding:9px 18px;min-height:40px}
.btn[disabled],button[disabled]{opacity:.5;cursor:not-allowed}
.btn.secondary[disabled]:hover,.btn.danger[disabled]:hover{background:var(--surface)}
.btn[disabled]:hover{background:var(--accent)}
.arrow{width:14px;height:14px}
.linkish{background:none;border:0;padding:0;color:var(--accent-text);font:500 var(--fs-sm) var(--sans);cursor:pointer;text-decoration:none}
.linkish:hover{text-decoration:underline;text-underline-offset:2px}
summary.linkish{list-style:none;display:inline}
summary.linkish::-webkit-details-marker{display:none}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:var(--s3) 0}.row form{margin:0}
.inline{display:flex;gap:var(--s2);align-items:center}.inline input{flex:1}
.inline input[type=file]{flex:1 1 220px}

/* pills (chat actions): same family as buttons, fully rounded */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--line-strong);background:var(--surface);
  font:500 var(--fs-sm)/1.3 var(--sans);color:var(--text-strong);cursor:pointer;text-decoration:none}
.pill:hover{background:var(--surface-2);text-decoration:none}
.pill.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pill.primary:hover{background:var(--accent-hover)}
.pill.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.pill.ghost:hover{background:var(--hover);color:var(--text-strong)}
.pill[disabled]{opacity:.45;cursor:not-allowed}

/* forms */
label{display:block;margin:var(--s4) 0 6px;font:500 var(--fs-sm)/1.4 var(--sans);color:var(--text)}
input,select,textarea{width:100%;padding:8px 11px;min-height:38px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);
  font:var(--fs-base)/1.4 var(--sans);transition:border-color .15s,box-shadow .15s}
textarea{min-height:0;line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
input[readonly]{background:var(--surface-2)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--accent);margin:0}
input[type=file]{padding:10px;background:var(--surface-2);border-style:dashed;color:var(--muted);font-size:var(--fs-sm)}
input[type=file]::file-selector-button{margin-right:10px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--text-strong);
  font:500 var(--fs-sm) var(--sans);cursor:pointer}
label.check,label.inline-check{display:flex;gap:8px;align-items:center;font:400 var(--fs-base)/1.4 var(--sans)}
.inline-check{margin:var(--s3) 0 6px;white-space:nowrap}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3) var(--s4);margin-top:var(--s4)}
.grid-form label{margin-top:0}
.card>.grid-form:first-child,.card>input[type=hidden]:first-child+.grid-form,.card>label:first-child,.card>input[type=hidden]:first-child+label,
.card>input[type=hidden]:first-child+p.flash+label{margin-top:0}
form>p:has(>.btn),form>p:has(>button){margin-top:var(--s4)}
td select{width:auto;min-height:30px;padding:3px 8px;font-size:var(--fs-sm)}
.grid-form .full{grid-column:1/-1}
.form-actions,form>p:last-child{margin:var(--s4) 0 0}
.hint{font-size:var(--fs-sm);color:var(--muted);margin:6px 0 0}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:0 0 var(--s3)}
.filters select{width:auto;flex:1;min-width:140px;max-width:240px}
.tiny-form{margin:6px 0 0}
td .tiny-form{display:inline-block;margin:2px 4px 2px 0}td .tiny-form select{width:auto}

/* cards + lists */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) 20px;margin-bottom:var(--s3);overflow-wrap:anywhere}
.card.flush,.card.list{padding:0;overflow:hidden}
.card>.mono:first-child{display:block;margin-bottom:var(--s1)}
.need{display:flex;gap:var(--s3);align-items:center;padding:10px var(--s4);border-bottom:1px solid var(--line);min-height:52px}
.need:last-child{border-bottom:0}
.need:hover{background:var(--hover)}
.need-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center}
.need-main>a{color:var(--text-strong)}
.need-main>a strong{font-weight:500}
.need .mono-num{color:var(--faint);min-width:2.5em}
.note-card{background:var(--surface-2);border-color:var(--line)}
.note-card p{margin:4px 0 0}
.owned{background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px;margin:var(--s2) 0 0;font-size:var(--fs-base)}
.empty{color:var(--muted);font-size:var(--fs-base);padding:var(--s5) var(--s4);text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-lg);margin:0 0 var(--s3)}
.empty a{font-weight:500}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.file-list>div{padding:6px 0;border-bottom:1px solid var(--line)}
.file-list>div:last-child{border-bottom:0}
.file-list>p:only-child{margin:0}
td.empty-cell{text-align:center;padding:var(--s5) var(--s4)}

/* disclosure: one chevron style for every collapsible */
.more-box{margin:var(--s3) 0}
.more-box>summary,.older>summary,.group>summary,.err>summary,.op-args>summary,.inline-block>summary,td details>summary:not(.linkish){
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-sm)/1.4 var(--sans);color:var(--muted);margin:var(--s2) 0;user-select:none}
.more-box>summary:hover,.older>summary:hover,.group>summary:hover,.err>summary:hover,.op-args>summary:hover,.inline-block>summary:hover,td details>summary:not(.linkish):hover{color:var(--text-strong)}
.more-box>summary::-webkit-details-marker,.older>summary::-webkit-details-marker,.group>summary::-webkit-details-marker,.err>summary::-webkit-details-marker,
.op-args>summary::-webkit-details-marker,.inline-block>summary::-webkit-details-marker,td details>summary::-webkit-details-marker{display:none}
.more-box>summary::before,.older>summary::before,.group>summary::before,.err>summary::before,.op-args>summary::before,.inline-block>summary::before,td details>summary:not(.linkish)::before{
  content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s;margin:0 3px 0 1px}
details[open]>summary::before{transform:translate(0,-2px) rotate(45deg)}
.group{margin:0 0 var(--s2)}
.group>summary{font-size:var(--fs-base);font-weight:600;color:var(--text-strong);margin:var(--s3) 0 var(--s2)}
.group>summary.mono{font-family:var(--sans)}

/* badges: soft pills, sentence case */
.badge{display:inline-block;padding:0 8px;border-radius:var(--r-full);font:500 var(--fs-xs)/20px var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;
  background:var(--neutral-soft);color:var(--neutral);border:0;vertical-align:middle}
.badge::first-letter{text-transform:uppercase}
.badge.rfi{text-transform:uppercase}
.badge.svc,.badge.src{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted)}
.badge.rfi,.badge.st-open,.badge.fb-open,.badge.rv-needs_fix,.badge.run-failed,.badge.ls-rejected,.badge.sev-high,.badge.sev-blocker,
.badge.reason-late,.badge.reason-failed,.badge.reason-stuck{background:var(--err-soft);color:var(--err)}
.badge.check,.badge.st-assumed,.badge.st-sent,.badge.run-running,.badge.sev-medium,.badge.reason-at_risk{background:var(--warn-soft);color:var(--warn)}
.badge.st-answered,.badge.st-closed,.badge.fb-resolved,.badge.rv-ok,.badge.run-succeeded,.badge.ls-accepted,.badge.dv-done,.badge.stage-delivered{background:var(--ok-soft);color:var(--ok)}
.badge.reason-new,.badge.reason-ready,.badge.reason-ready_assumed,.badge.reason-rfi_answered,.badge.reason-rfis,.badge.reason-review,.badge.dv-open,.badge.ls-proposed,
.badge.stage-submitted,.badge.stage-accepted,.badge.stage-reading,.badge.stage-flag_review,.badge.stage-modeling,.badge.stage-drawings,.badge.stage-internal_review,.badge.run-queued{background:var(--info-soft);color:var(--info)}
.badge.dv-wont_do,.badge.stage-rejected,.badge.stage-cancelled,.badge.run-cancelled{background:var(--neutral-soft);color:var(--muted)}

/* chips: due / SLA, mono */
.chip{display:inline-flex;align-items:center;gap:6px;padding:0 8px;border-radius:var(--r-full);font:500 var(--fs-xs)/20px var(--mono);letter-spacing:0;white-space:nowrap;
  background:var(--neutral-soft);color:var(--neutral)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot-idle);flex:none}
.chip.ok::before{background:var(--dot-ok)}
.chip.risk{background:var(--warn-soft);color:var(--warn)}.chip.risk::before{background:var(--dot-run)}
.chip.late{background:var(--err-soft);color:var(--err)}.chip.late::before{background:var(--dot-err)}
.chip.waiting{background:var(--info-soft);color:var(--info)}.chip.waiting::before{background:var(--dot-wait)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* tables: quiet borders, no zebra, hover rows */
table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
th{font:500 var(--fs-xs)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);background:var(--surface)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{white-space:nowrap}
.card table{overflow-wrap:normal}
tr:last-child>td{border-bottom:0}
tr:hover>td{background:var(--hover)}
tr:has(>th):hover>th{background:var(--surface)}
.card.flush th:first-child,.card.flush td:first-child,.card.list th:first-child{padding-left:var(--s4)}
.card.flush th:last-child,.card.flush td:last-child{padding-right:var(--s4)}
td a{color:var(--text-strong);font-weight:500}
td a.linkish,td .small a{font-weight:500;color:var(--accent-text)}
td .mono-num,td.mono-num{color:var(--muted)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.card.flush table{min-width:520px}
.sub-row>td{padding-top:0;font-size:var(--fs-sm)}
tr:has(+ .sub-row)>td{border-bottom:0}

/* tabs: underline */
.tabbar{display:flex;align-items:flex-end;gap:var(--s2);border-bottom:1px solid var(--line);margin:var(--s6) 0 var(--s4)}
.tabs{display:flex;gap:var(--s5);overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1;min-width:0;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 0;font:500 var(--fs-base)/1.2 var(--sans);color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text-strong);text-decoration:none}
.tabs a.on{color:var(--text-strong);border-bottom-color:var(--accent)}
.tabbar .toggle{margin-bottom:6px}

/* segmented toggle */
.toggle{display:inline-flex;padding:2px;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.toggle a{padding:4px 12px;border-radius:var(--r-sm);font:500 var(--fs-sm)/1.4 var(--sans);color:var(--muted);text-decoration:none;white-space:nowrap}
.toggle a:hover{color:var(--text-strong);text-decoration:none}
.toggle a.on{background:var(--surface);color:var(--text-strong);box-shadow:var(--sh-1)}

/* dropdown menu (More ▾, Sessions ▾) */
.more-menu{position:relative;flex:none}
.more-menu>summary{list-style:none;cursor:pointer;padding:6px 10px;margin-bottom:4px;border-radius:var(--r-md);font:500 var(--fs-sm)/1.2 var(--sans);color:var(--muted)}
.more-menu>summary:hover,.more-menu[open]>summary{background:var(--hover);color:var(--text-strong)}
.more-menu>summary::-webkit-details-marker{display:none}
.more-in{position:absolute;right:0;z-index:15;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px var(--s4) var(--s4);
  width:min(320px,90vw);box-shadow:var(--sh-2);font-size:var(--fs-base)}
.more-in form{padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s3)}
.more-in form p{margin:var(--s3) 0 0}

/* flash: inline toast */
.flash{display:block;padding:10px 14px 10px 36px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);font-size:var(--fs-base);
  line-height:1.45;box-shadow:var(--sh-1);position:relative;overflow-wrap:anywhere}
.flash::before{content:"";position:absolute;left:14px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--dot-wait)}
.flash.ok{border-color:color-mix(in srgb,var(--ok) 28%,var(--line));background:color-mix(in srgb,var(--ok-soft) 55%,var(--surface))}
.flash.ok::before{background:var(--dot-ok)}
.flash.error{border-color:color-mix(in srgb,var(--err) 28%,var(--line));background:color-mix(in srgb,var(--err-soft) 60%,var(--surface));color:var(--text)}
.flash.error::before{background:var(--dot-err)}
p.flash{margin:0 0 var(--s3)}
.inline-flash{margin:var(--s2) 0 var(--s3);box-shadow:none}

/* status dots (tool rows, live pill) */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--dot-idle)}
.dot-ok{background:var(--dot-ok)}
.dot-err{background:var(--dot-err)}
.dot-run{background:var(--dot-run);animation:dot-pulse 1.2s ease-in-out infinite}
.dot-wait{background:var(--dot-wait)}
@keyframes dot-pulse{50%{opacity:.35}}

/* code + diffs */
pre.code{background:var(--surface);max-height:70vh;overflow:auto}
.diff .add{color:var(--ok);background:var(--ok-soft);display:block}.diff .del{color:var(--err);background:var(--err-soft);display:block}.diff .hunk{color:var(--accent-text);display:block}
.err pre{margin-top:0}
.link-panel textarea,.link-panel input[readonly]{font:var(--fs-xs)/1.5 var(--mono)}
.link-panel ol{padding-left:1.3em}.link-panel li{margin:0 0 var(--s3)}

/* ==== 5. pages =============================================================================== */
/* ---- public home ---- */
.hero{max-width:1120px;margin:0 auto;padding:var(--s7) 24px var(--s8);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center}
.hero .logo{width:min(380px,100%);margin:0 0 var(--s6);display:block}
.hero p.lead{font-size:17px;line-height:1.7;margin:0 0 var(--s5);max-width:520px;color:var(--muted)}
.hero h1{font:400 clamp(26px,3.2vw,36px)/1.12 var(--display);letter-spacing:-.02em;max-width:540px}
.upload{background:var(--charcoal);padding:12px;border-radius:var(--r-xl);box-shadow:var(--sh-2);display:block;text-decoration:none;color:inherit}
.upload:hover{text-decoration:none}
.upload-in{background:var(--surface);border-radius:12px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:24px 24px;padding:36px 28px 32px;text-align:center}
.upload svg.up{width:52px;height:52px;color:var(--accent-text)}
.upload h2{font:400 26px/1.1 var(--display);letter-spacing:-.01em;margin:12px 0 14px}
.upload p{font-size:var(--fs-base);margin:0 0 12px;color:var(--text)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--accent-text);margin-bottom:18px}
.status i{width:6px;height:6px;border-radius:50%;background:var(--dot-ok);display:inline-block}
.band{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-in{max-width:1120px;margin:0 auto;padding:var(--s8) 24px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.step .num{width:44px;height:44px;border:2px solid var(--text-strong);border-radius:50%;display:grid;place-items:center;font:400 18px var(--display);color:var(--text-strong);
  position:relative;margin-bottom:var(--s4)}
.step .num::after{content:"";position:absolute;left:56px;top:50%;width:calc(100% + 120px);border-top:2px dotted var(--line-strong)}
.step:last-child .num::after{display:none}
.step h3{font-size:var(--fs-md);margin-bottom:6px}
.step p{margin:0;font-size:var(--fs-base);color:var(--muted)}
.cta-line{font-weight:600;font-size:var(--fs-lg);margin:var(--s7) 0 var(--s2);color:var(--text-strong)}

/* ---- overview ---- */
.section-head{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s6) 0 var(--s3)}
.section-head h2.sub{margin:0}
.section-head .n{font:500 var(--fs-sm) var(--mono);color:var(--faint)}
.attention .need-main .muted{font-size:var(--fs-sm)}
.attention .need>.badge{min-width:64px;text-align:center}

/* ---- job ---- */
.job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);flex-wrap:wrap}
.job-head .page-title{margin:0 0 6px;font-size:26px;line-height:1.2}
.job-head .page-title .job-id{font:400 .72em var(--mono);color:var(--faint);margin-right:.35em;vertical-align:.1em}
.job-head .chips{padding-top:8px}
.stepper{display:flex;list-style:none;padding:0;margin:0 0 var(--s4);gap:4px}
.stepper li{flex:1;min-width:0;padding-top:10px;font:500 11px/1.3 var(--sans);color:var(--faint);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:2px;background:var(--line)}
.stepper li.done{color:var(--muted)}.stepper li.done::before{background:color-mix(in srgb,var(--accent) 55%,var(--line))}
.stepper li.on{color:var(--text-strong)}.stepper li.on::before{background:var(--accent)}
.stepper-sm{display:none;margin:0 0 var(--s3)}
.next{padding:var(--s4) 20px;border-color:var(--accent-line);box-shadow:var(--sh-1)}
.next>.mono:first-child{display:block;color:var(--accent-text)}
.next-title{font-size:var(--fs-lg);margin:2px 0 var(--s1)}
.next>p.muted{font-size:var(--fs-base);margin:0 0 var(--s3)}
.next>form,.next>.row,.next>.btn,.next>button{margin-top:var(--s2)}
.next .grid-form{margin-top:0}
/* on the Session tab the next step shrinks to a slim bar so the conversation gets the room */
.next.is-compact{padding:10px var(--s4);box-shadow:none}
.next-line{display:flex;align-items:center;gap:6px var(--s3);flex-wrap:wrap}
.next-line .mono{color:var(--accent-text)}
.next-line .next-title{font-size:var(--fs-base);font-weight:600;margin:0;min-width:0;flex:0 1 auto}
.next-line .blockers-n{background:var(--err-soft);color:var(--err)}
.next-act{margin-left:auto;display:flex;gap:var(--s2)}
.next-act form{margin:0}
.next-options>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-xs)/1.4 var(--sans);color:var(--muted);margin:6px 0 0}
.next-options>summary::-webkit-details-marker{display:none}
.next-options>summary::before{content:"";width:5px;height:5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);margin:0 3px 0 1px}
.next-options>summary:hover{color:var(--text-strong)}
.next-options[open]{margin-top:var(--s2)}
.next-options>.muted{font-size:var(--fs-sm)}
.spec-check .chips{margin-bottom:var(--s2)}
.blockers{margin:var(--s2) 0 var(--s3);padding-left:20px;color:var(--err);font-size:var(--fs-base)}
.blockers li{margin:2px 0}
.flag{padding:14px var(--s4)}
.flag.closed{opacity:.7}
.flag-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.flag-top strong{font-weight:600;color:var(--text-strong);margin-left:2px}
.flag p{margin:var(--s2) 0}
.flag-form{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.flag-form input[name=decision]{flex:1 1 220px;width:auto}
.flag-form select{width:auto}
.flag-form .inline-check{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.bulk-form{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;background:var(--surface-2)}
.bulk-form input{flex:1 1 260px;width:auto}
.fb-actions{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.fb-actions form{margin:0}
.fb-actions .tiny-form{margin:0}
.fb-actions .badge{font-size:11px}
.thread .fb{padding:var(--s3) 0;border-top:1px solid var(--line)}
.thread .fb:first-of-type{border-top:0}
.fb-open{box-shadow:inset 2px 0 0 var(--err);padding-left:var(--s3)!important}
.sheet-forms{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.sheet-forms form{margin:0}
.sheet-forms textarea{margin:6px 0}
h3.day{font:500 var(--fs-xs)/1 var(--sans);margin:var(--s5) 0 var(--s2);color:var(--faint)}
.event{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-base)}
.event>.small.muted:first-child{font-family:var(--mono);font-size:var(--fs-xs);margin-right:6px}
.event strong{font-weight:500;color:var(--text-strong)}
.superseded>a{text-decoration:line-through;color:var(--muted)}
.chat-cost{margin:var(--s3) 0}
.lesson p{margin:var(--s2) 0}
.dev-row .mono-num{color:var(--faint)}

/* ---- chat (full page) ---- */
.app .chat{display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0}
.app .chat-head{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s6);min-height:52px;border-bottom:1px solid var(--line);min-width:0}
.app .chat-title{font:500 var(--fs-base)/1.3 var(--sans);color:var(--text-strong);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.app .job-chip{font:500 var(--fs-xs)/20px var(--mono);color:var(--accent-soft-text);background:var(--accent-soft);border-radius:var(--r-full);padding:0 10px;
  white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis}
.app .chat-head .chat-cost{margin:0 0 0 auto;font:400 var(--fs-xs) var(--mono);color:var(--faint)}
.app .chat-scroll{flex:1;overflow-y:auto;min-height:0}
.app .chat-col{max-width:calc(var(--col) + 48px);margin:0 auto;padding:0 var(--s5);width:100%}
.app .thread{display:flex;flex-direction:column;gap:var(--s5);padding:var(--s6) 0 var(--s5)}
.app .chat-note{color:var(--muted);font-size:var(--fs-sm);margin:var(--s4) 0 0}
.app .greeting{text-align:center;padding:var(--s7) 0 var(--s5)}
.app .greeting h1{font:500 30px/1.2 var(--sans);letter-spacing:-.02em;color:var(--text-strong)}
.app .greeting p{margin:var(--s3) auto 0;max-width:560px}
.app .chat.is-empty{justify-content:center}
.app .chat.is-empty .chat-scroll{flex:0 0 auto;overflow:visible}
.app .chat.is-empty .thread{padding:0}
.app .flash.chat-flash{margin:var(--s4) 0 0;width:auto;max-width:none}

/* messages */
.msg{min-width:0}
.msg.user{display:flex;justify-content:flex-end}
.bubble{background:var(--bubble);color:var(--bubble-text);border-radius:var(--r-xl);padding:9px var(--s4);max-width:85%;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.msg.assistant{font-size:15px;line-height:1.7;color:var(--text)}
.msg.assistant + .msg.assistant{margin-top:calc(-1 * var(--s4))}
.md{overflow-wrap:anywhere}
.md p{margin:0 0 var(--s3)}
.md p:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 var(--s3);padding-left:1.4em}
.md li{margin:2px 0}
.md h1,.md h2,.md h3{font:600 var(--fs-md)/1.4 var(--sans);margin:var(--s4) 0 var(--s2)}
.md strong{font-weight:600;color:var(--text-strong)}
.md code{font:13px var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.md pre{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);margin:0 0 var(--s3)}
.md pre code{background:none;border:0;padding:0}
.md table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 var(--s3);font-size:var(--fs-base);max-width:100%;width:auto}
.md th,.md td{border:1px solid var(--line);padding:6px 10px}
.md th{font:600 var(--fs-sm) var(--sans);color:var(--text-strong);background:var(--surface-2)}
.md tr:hover>td{background:none}
.md blockquote{margin:0 0 var(--s3);padding-left:var(--s3);border-left:3px solid var(--line-strong);color:var(--muted)}
.md.streaming{white-space:pre-wrap}
.md.streaming::after{content:"";display:inline-block;width:7px;height:1.05em;background:var(--accent-text);vertical-align:text-bottom;margin-left:2px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.thinking{font:500 var(--fs-sm) var(--sans);color:var(--muted);background:linear-gradient(90deg,var(--muted) 0%,var(--line-strong) 50%,var(--muted) 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.6s linear infinite;margin:var(--s1) 0}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.thinking{-webkit-text-fill-color:var(--muted)}}
.trail{font:400 var(--fs-xs)/1.6 var(--mono);color:var(--muted);margin:var(--s1) 0}
.msg-error{margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--err-soft);color:var(--err);font-size:var(--fs-base);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.msg-error form{margin:0}
.msg.retried .msg-error{opacity:.6}
.msg-foot{display:flex;align-items:center;gap:2px;margin-top:var(--s2);opacity:.6;transition:opacity .15s}
.msg:hover .msg-foot,.msg-foot:focus-within{opacity:1}
.foot-btn{background:none;border:0;padding:3px 8px;border-radius:var(--r-sm);font:500 var(--fs-xs) var(--sans);color:var(--muted);cursor:pointer;text-decoration:none}
.foot-btn:hover{background:var(--hover);color:var(--text-strong);text-decoration:none}
.usage{font:400 11px var(--mono);color:var(--faint);margin-left:auto}
.msg.note{font:400 var(--fs-xs)/1.5 var(--mono);color:var(--muted);padding:2px 0 2px 10px;border-left:2px solid var(--line-strong)}
.msg.note.err{color:var(--err);border-left-color:var(--err)}

/* tool rows (Claude-Code style) */
.tools{margin:2px 0;display:flex;flex-direction:column;gap:1px}
.md + .tools,.tools + .md{margin-top:var(--s3)}
.tool{font:400 12.5px/1.5 var(--mono);color:var(--text);border-radius:var(--r-sm)}
.tool>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:3px 8px;margin:0 -8px;cursor:pointer;border-radius:var(--r-sm)}
.tool>summary::-webkit-details-marker{display:none}
.tool>summary:hover{background:var(--hover)}
.tool-sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool[open] .tool-sum{white-space:normal}
.tool-ms{color:var(--faint);font-size:11px}
.tool-err .tool-sum{color:var(--err)}
.tool-body{margin:2px 0 6px 3px;border-left:1px solid var(--line-strong);padding-left:var(--s4)}
.tool-name{font-size:11px;color:var(--muted);margin:4px 0 2px}
.tool-json{background:var(--code-bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px;font:400 11.5px/1.45 var(--mono);
  max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:4px 0}

/* confirm + proposal cards: quiet surface, accent edge only while waiting */
.op-card,.proposal{background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);margin:var(--s3) 0;
  font-size:var(--fs-base);line-height:1.5;color:var(--text);box-shadow:var(--sh-1)}
.op-head{display:flex;align-items:center;gap:8px}
.op-kind{color:var(--accent-text)}
.op-model{margin-left:auto;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-what{margin:var(--s2) 0 var(--s1);font-weight:600;color:var(--text-strong)}
.op-why{font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--s2)}
.op-card p.small{margin:0 0 var(--s2)}
.op-args pre{font-size:11.5px;max-height:200px;overflow:auto}
.op-actions,.pr-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:flex-end;margin-top:var(--s2)}
.op-actions form,.pr-actions form{margin:0}
.pr-kind{color:var(--accent-text)}
.pr-title{font-weight:600;color:var(--text-strong);margin:var(--s1) 0 var(--s2)}
.pr-body{margin:0 0 var(--s2)}
.pr-fields{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px var(--s3);margin:0 0 var(--s2)}
.pr-fields dt{font:500 var(--fs-xs)/1.5 var(--sans);color:var(--muted);padding-top:1px}
.pr-fields dd{margin:0;overflow-wrap:anywhere}
.pr-state{font-size:var(--fs-xs);margin-top:var(--s1)}
.pr-state.ok{color:var(--ok)}.pr-state.warn{color:var(--warn)}.pr-state.err{color:var(--err);margin-bottom:var(--s2)}
.proposal.pr-applied,.proposal.pr-dismissed,.proposal.pr-stale{border-color:var(--line);box-shadow:none}
.proposal.pr-dismissed{opacity:.6}
.apply-all{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0}

/* composer */
.composer-wrap{padding:0 0 var(--s4);background:linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 20px)}
.composer{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:var(--s3) var(--s3) var(--s2) var(--s4);margin:0}
.composer:focus-within{border-color:var(--accent-line);box-shadow:var(--sh-2),var(--ring)}
.composer textarea{border:0;padding:4px 0;resize:none;font:15px/1.5 var(--sans);background:transparent;color:var(--text);box-shadow:none;min-height:28px;max-height:260px}
.composer textarea:focus{box-shadow:none}
.composer-bar{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.job-select{width:auto;max-width:min(320px,60vw);min-height:30px;padding:4px 10px;font-size:var(--fs-sm);border-radius:var(--r-full);background:var(--surface-2);border-color:var(--line)}
.composer-hint{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--faint)!important;font-size:var(--fs-xs)!important}
.send{margin-left:auto;width:32px;height:32px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;display:grid;place-items:center;flex:none}
.send svg{width:16px;height:16px}
.send:hover{background:var(--accent-hover)}
.send[disabled]{background:var(--line-strong);color:var(--surface);opacity:1}
.chat-alert{margin:0 0 var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--warn-soft);color:var(--warn);font-size:var(--fs-base)}
.chips-row{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s4)}
.sugg{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-full);padding:6px 14px;font:400 var(--fs-sm) var(--sans);color:var(--text);cursor:pointer;text-decoration:none}
.sugg:hover{border-color:var(--accent-line);color:var(--accent-text);text-decoration:none}
.attach{display:inline-flex;align-items:center;gap:4px;margin:0;color:var(--muted);cursor:pointer;padding:3px 10px 3px 8px;border-radius:var(--r-full);border:1px solid var(--line);font:500 var(--fs-xs) var(--sans)}
.attach svg{width:14px;height:14px}
.attach:hover{color:var(--text-strong);border-color:var(--line-strong)}
.attach:focus-within{box-shadow:var(--ring)}

/* ---- job Session tab: the conversation sits in the page, composer pinned under it ---- */
.app .session.chat{height:auto;min-height:0;margin-top:0;border-top:1px solid var(--line)}
.app .session .session-scroll{max-height:calc(100vh - 300px);max-height:calc(100dvh - 300px);min-height:300px}
.app .session.is-empty .session-scroll{min-height:0}
.app .session.dropping{outline:2px dashed var(--accent-line);outline-offset:4px;border-radius:var(--r-lg)}
.app .session .chat-col{padding:0 var(--s2)}
.session-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.session-tools{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.session-tools .chat-cost{margin:0;color:var(--faint)}
.session-tools .more-menu>summary{margin:0}
.session-list .more-in a{display:block;padding:6px 0;color:var(--text)}
.session-list .more-in a.on{font-weight:600}
.live-hint{color:var(--faint)!important}
.session-greeting{text-align:left!important;padding:var(--s6) 0 var(--s2)!important}
.session-greeting h2{font:600 var(--fs-lg)/1.3 var(--sans);margin:0 0 var(--s2);color:var(--text-strong)}
.session-greeting p{margin:0!important;font-size:var(--fs-base)}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:2px 10px;border-radius:var(--r-full);background:var(--neutral-soft);font:500 var(--fs-xs)/1.5 var(--mono);color:var(--muted)}
.live-pill .dot{background:var(--dot-idle)}
.live-pill.on{color:var(--ok);background:var(--ok-soft)}
.live-pill.on .dot{background:var(--dot-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot-ok) 25%,transparent)}

/* ---- responsive ---- */
@media (max-width:860px){
  .links{display:none}.nav-in{gap:12px}.who{display:none}
  .hero{grid-template-columns:1fr;gap:var(--s6);padding-top:var(--s6)}
  .steps{grid-template-columns:1fr 1fr}.step .num::after{display:none}
  .links.staff{display:flex;gap:0;margin:0}
  .app .chat{height:calc(100vh - 52px);height:calc(100dvh - 52px)}
  .app .chat-head{padding:var(--s2) var(--s4)}
  .app .chat-col{padding:0 var(--s4)}
  .app .greeting h1{font-size:24px}
  .bubble{max-width:92%}
  .app .session .session-scroll{max-height:calc(100dvh - 220px)}
  .session-bar{padding:var(--s2) 0}
}
@media (max-width:720px){
  .two{grid-template-columns:1fr}
  .stepper{display:none}.stepper-sm{display:block}
  .need{flex-wrap:wrap}.need .btn{width:100%}
  .btn.wide{width:100%}
  .job-head .page-title{font-size:var(--fs-xl)}
  .job-head .chips{padding-top:0}
  .tabbar{margin-top:var(--s5)}
  .composer-hint{display:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}.nav-right .btn{padding:6px 10px}
  .hide-sm,.hide-xs{display:none}
  .card.flush table{min-width:0}
  .card.flush table.keep-wide{min-width:640px}
  .nav-in{padding:0 12px;gap:8px}.brand img{height:20px}
  .links.staff a{font-size:var(--fs-sm);padding:6px 8px}
  .wrap{padding:var(--s5) var(--s4) var(--s7)}
  .card{padding:14px var(--s4)}
  .page-title{font-size:22px}
  .filters select{max-width:none}
  .auth{margin-top:var(--s4)}
}

/* dark mode: brand logo (dark charcoal on transparent) needs lifting */
@media (prefers-color-scheme:dark){
  .brand img,.side-brand img,.app-brand img,.hero .logo,.auth-logo{filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.05)}
  .upload{background:#2a323c}
  .btn.dark{background:var(--accent)}.btn.dark:hover{background:var(--accent-hover)}
  .app .avatar{background:#3a4654}
}