@import url("tokens.css");
/* ==========================================================================
   MONE AGENT - component layer.  web/static/app.css

   Written against web/index.html and web/static/app.js. Every selector here
   names a class or an id that one of those two files actually puts into the
   DOM; there are no rules for screens that do not exist.

   THE TOKEN VOCABULARY (tokens.css, and nothing else):
     colour    --bg --surface-1..3 --surface-hover --surface-body --surface-card
               --surface-inset --surface-auth --surface-pill --surface-badge
               --surface-upgrade --surface-offer --scrim --dot
               --line --line-strong --line-group --line-suggestion
               --line-input --line-input-strong --line-plan --line-popover
               --line-modal
               --fg --fg-muted --fg-subtle --fg-disabled --fg-keycap --fg-date
               --fg-close --wordmark --wordmark-center
               --accent --accent-solid --accent-fg --accent-wash
               --accent-ring --accent-line
               --success* --danger* --warning* --fill-light --fg-inverse
               --shadow-veil --scroll-tint --scroll-thumb --scroll-thumb-side
               --avatar-ring
     spacing   --s0 .. --s16 and nothing else, for every padding, margin and gap
     radius    --r-xs --r-sm --r-md --r-badge --r-lg --r-nav --r-xl --r-2xl
               --r-full --r-circle
      type      --fs-* --lh-* --fw-* --ls-* --ff-* --font-sans --font-display
                --font-serif --font-mono
      depth     --sh-1 .. --sh-5 --ring-w --ring-offset --ring-inset --focus-ring
      motion    --dur-fast --dur --dur-slow --dur-sheet --ease --spinner --shimmer
      layout    --sidebar-w --sidebar-rail --sidebar-drawer --sidebar-pad
                --nav-pitch --nav-icon --nav-gap --icon --icon-gap
                --titlebar-h --topbar-h --gutter
                --content-col --content-max --content-wide --content-market
                --content-narrow
                --content-prose --prose-bubble --prose-column
                --tap --row-phone --scroll-w --scrollbar-w --scrollbar-inset
                --z-scrim --z-drawer --z-modal
                --z-overlay --z-toast

   The type scale is a MIXED measurement: the hero, the section heading and the
   24px title step are a transitional serif, and every other step is the
   grotesque. The face therefore travels with the step (--ff-display /
   --ff-title / --ff-ui) rather than with a class, so an <h1> written into
   index.html and one built by app.js cannot render as two different typefaces.


   The dark values behind those names are MEASURED - sampled out of 206 real
   product screenshots - not chosen. UI-SPEC.md §1 carries the same table.

   --n-* is the neutral COLOUR ramp and is never used for a length: a colour
   given to a <length> property is invalid at computed-value time, so the
   browser drops the whole declaration and the element renders unpadded.

   DIRECTION. Logical properties throughout (margin-inline-start, padding-block,
   inset-inline-end, border-inline-end, text-align: start). There is no
   flex-direction: row-reverse anywhere: `row` already reverses under RTL, so
   row-reverse renders left-to-right.

   BIDI. Model and user prose takes unicode-bidi: plaintext so each paragraph
   derives its base direction from its own content. Code, paths, ids and other
   forced-LTR runs take isolate, so their punctuation never reorders across an
   Arabic run.
   ========================================================================== */


/* ==========================================================================
   1. RESET AND BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  /* UI-SPEC 3.3: the page itself never scrolls. 100dvh, not 100vh, because
     iOS Safari's collapsing toolbar would otherwise clip the composer. */
  overflow:hidden;height:100dvh;
}
h1,h2,h3,h4,h5,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
code,.mono{
  font-family:var(--font-mono);font-size:var(--fs-code);
  line-height:var(--lh-code);
}
summary{cursor:pointer}
img,svg{max-inline-size:100%}

/* ---- utilities ---- */
.hidden{display:none !important}
/* Removed from view but kept in the accessibility tree and the tab order. The
   file input is opened by the composer's Attach button rather than clicked
   directly, so hiding it visually is right; `display:none` would take it out of
   the tab order too, which breaks keyboard use. Not `aria-hidden`: a control
   that is hidden from assistive technology is a control nobody can reach. */
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.muted{color:var(--fg-muted)}
.small{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
.serif{font-family:var(--font-serif)}
.tabular{font-variant-numeric:tabular-nums}
.center{justify-content:center}

/* ---- one focus treatment everywhere, never removed ---- */
:focus-visible{
  outline:var(--ring-w) solid var(--accent);
  outline-offset:var(--ring-offset);
  border-radius:var(--r-sm);
}
/* Pointer input only. The ring above is the indicator; this suppresses it for
   a mouse press, which is the one accepted case. */
:focus:not(:focus-visible){outline:none}
::selection{background:var(--accent-ring);color:var(--fg)}

/* ---- scrollbars. MEASURED: the thumb is 6px wide, #535353 over content and
   #595959 over the sidebar. --scrollbar-w is that 6px and --scroll-w is the
   10px GUTTER it sits in; --scrollbar-inset is the half-gutter border that
   leaves the measured 6px visible, and background-clip:content-box is what
   keeps that border from painting. ---- */
::-webkit-scrollbar{inline-size:var(--scroll-w);block-size:var(--scroll-w)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);border-radius:var(--r-full);
  border:var(--scrollbar-inset) solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong);background-clip:content-box}
.sidebar ::-webkit-scrollbar-thumb,
.sidebar *::-webkit-scrollbar-thumb{background:var(--scroll-thumb-side)}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
.sidebar,.sidebar *{scrollbar-color:var(--scroll-thumb-side) transparent}
/* Focus is never hidden by a scroll container (UI-SPEC 6.1). */
.pane,.pad,.messages,.home,.side-list,.settings-nav,.settings-main,
.overlay-body,.popover,.credits-history,.chips,.tabs{
  scroll-padding-block:var(--s4);
}


/* ==========================================================================
   2. TYPOGRAPHY SCALE AND BIDI CONTROL
   ========================================================================== */
/* THE SERIF STEPS. The measurement is mixed, and the face is stated on the
   step rather than only on .display: the hero and the section heading are a
   transitional serif, and so is the 24px title step - a modal title and a page
   title are the same 24px, so both take it. Everything else - the top-bar
   title, the card title, body, disclaimer, mono - is the grotesque and says so
   explicitly here, because "inherits the body font" is a statement that stops
   being true the moment someone sets a font-family on body. */
.display{
  font-family:var(--ff-display);font-size:var(--fs-display);
  line-height:var(--lh-display);font-weight:var(--fw-display);text-align:center;
}
h1,.h1{
  font-family:var(--ff-title);
  font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-h1)
}
h2,.h2{
  font-family:var(--ff-ui);
  font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-h2)
}
h3,.h3{
  font-family:var(--ff-ui);
  font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3)
}
.field-label{
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:550;
  color:var(--fg-muted);
  display:flex;align-items:center;gap:var(--s1);
}

/* Prose authored by a person or a model. `plaintext` rather than `isolate`
   because it needs no wrapper markup: a title that opens with an emoji then
   Arabic resolves RTL, and one that opens with "Fix the" resolves LTR, in
   whichever direction the page itself is. */
.bubble,.what,.preview,.composer textarea,.input,.select,.task-title,
.setting-desc,.lead,.muted,.small,.card .body p,.sub{
  unicode-bidi:plaintext;
}
/* Runs that must NOT take their direction from their surroundings: code,
   paths, ids, emails, dates and signed amounts. A trailing path or a leading
   minus sign jumps to the wrong side of an Arabic run without this. */
code,pre,.mono,.keycap,.name,.amount,.amt,.when,.count,.tabular,
.tool-card pre,.tool-card .name,.credits-row .amt,.shortcut .keys,
.set-row .txt span[dir],#tokenInput,#libraryTasks code{
  unicode-bidi:isolate;direction:ltr;
}
[dir=ltr]{unicode-bidi:isolate}


/* ==========================================================================
   3. SHELL  (UI-SPEC 3.1, screen B)
   ========================================================================== */
#appView{height:100dvh}
/* MEASURED SHELL. Two rows, not one flex row: the reference has a 39px window
   strip spanning the full width at y 0-38, and the 299px sidebar starts BELOW
   it rather than at y0. So #app is a grid with the strip in row 1 spanning both
   columns, the sidebar in row 2 column 1, and .main in row 2 column 2.

   This is the one place a grid is load-bearing: a flex row cannot put a
   full-bleed bar above a two-column layout without an extra wrapper element,
   and the wrapper would then be what the panes are measured against.

   Column 1 is `auto`, not a fixed width, so the sidebar's own inline-size IS
   the column: collapsing it (the .collapsed class), the 64px rail at 1024 and
   the drawer at 820 all take effect by changing one declaration on .sidebar
   rather than by having to restate a track width at every breakpoint. */
#app{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:var(--titlebar-h) minmax(0,1fr);
  block-size:100dvh;inline-size:100%;
  overflow:hidden;background:var(--bg);
}
.main{
  grid-column:2;grid-row:2;
  display:flex;flex-direction:column;
  min-inline-size:0;background:var(--bg);
}
/* Exactly one scroller per pane (UI-SPEC 3.3): the pane is a frame, and
   .pad / .home / .messages inside it is the scroller. */
.pane{
  flex:1 1 auto;display:flex;flex-direction:column;
  min-block-size:0;overflow:hidden;
}
.pad{
  flex:1 1 auto;min-block-size:0;overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--gutter);
}


/* ==========================================================================
   4. SIDEBAR  (B).  Row 2, column 1 of the shell grid: 299px plus a 1px
   divider, starting BELOW the 39px strip rather than at y0.
   ========================================================================== */
.sidebar{
  grid-column:1;grid-row:2;
  inline-size:var(--sidebar-w);min-inline-size:0;min-block-size:0;
  display:flex;flex-direction:column;gap:var(--s2);
  padding-block:var(--s3);padding-inline-start:var(--sidebar-pad);
  padding-inline-end:var(--s3);
  background:var(--surface-1);
  border-inline-end:1px solid var(--line);
  overflow:hidden;
}
.sidebar.collapsed{
  inline-size:0;padding-inline:0;border-inline-end:0;
}
.brand{
  display:flex;align-items:center;gap:var(--s2);
  font-weight:650;font-size:var(--fs-h3);
  padding-inline:var(--s1);padding-block:var(--s1);
  white-space:nowrap;overflow:hidden;
  color:var(--wordmark);
}
.brand .mark{color:var(--accent);font-size:var(--fs-h3);line-height:1}
.brand.center{justify-content:center}

/* ---- primary nav. MEASURED: 37px row pitch, 16px glyph box, 10px icon-to-label
       gap. The hover/selected pill is 17px, which is not --r-md. ---- */
.nav{display:flex;flex-direction:column;gap:var(--s0)}
.nav button{
  display:flex;align-items:center;gap:var(--nav-gap);
  min-block-size:var(--nav-pitch);padding-inline:var(--s2);
  border-radius:var(--r-nav);color:var(--fg-muted);
  text-align:start;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.nav button:hover{background:var(--surface-hover);color:var(--fg)}
.nav button.active{background:var(--surface-3);color:var(--fg);font-weight:600}
.nav .ico{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:var(--nav-icon);block-size:var(--nav-icon);
  font-size:var(--nav-icon);line-height:1;
}
.nav .label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .kbd-hint{flex:0 0 auto}

.badge-new{
  flex:0 0 auto;display:inline-flex;align-items:center;
  padding-block:2px;padding-inline:var(--s2);
  border-radius:var(--r-badge);
  background:var(--accent-solid);color:var(--accent-fg);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;
}

/* ---- section headers ---- */
.side-section{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);padding-inline:var(--s3);
  margin-block-start:var(--s4);
}
.side-section h2{
  font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--fg-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-micro);
}
.side-section .icon-btn{
  inline-size:22px;block-size:22px;min-block-size:0;font-size:var(--fs-body-sm);
}

/* ---- project + task lists ---- */
.side-list{
  display:flex;flex-direction:column;gap:var(--s0);
  flex:0 1 auto;max-block-size:28%;
  min-block-size:0;overflow-y:auto;
  padding-inline:var(--s1);
  scrollbar-width:none;
}
.side-list::-webkit-scrollbar{display:none}
#taskList{flex:1 1 auto;max-block-size:none}
.side-row{
  display:flex;align-items:center;gap:var(--s2);
  inline-size:100%;min-block-size:var(--tap);
  padding-inline:var(--s2);
  border-radius:var(--r-sm);color:var(--fg-muted);text-align:start;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.side-row:hover{background:var(--surface-hover);color:var(--fg)}
.side-row.active{background:var(--surface-3);color:var(--fg)}
.side-row .ico{flex:0 0 auto;font-size:var(--fs-body-sm);line-height:1;opacity:.8}
.side-row .label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-row .dot{
  flex:0 0 auto;inline-size:6px;block-size:6px;
  border-radius:var(--r-full);background:var(--accent);
}
.project-create{display:grid;gap:var(--s2);padding:var(--s2)}
.project-create .input{inline-size:100%;min-inline-size:0}
.project-create-actions{display:flex;gap:var(--s2)}
.project-create-actions button{flex:1 1 0}
.project-task{padding-inline-start:var(--s7);font-size:var(--fs-body-sm)}
.schedule-form{display:grid;gap:var(--s3);max-inline-size:720px;margin-inline:auto;margin-block:var(--s6);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-1)}
.schedule-form textarea{resize:vertical;min-block-size:96px}
.schedule-job{max-inline-size:720px;margin-inline:auto;margin-block-end:var(--s2)}

/* ---- footer / account row ---- */
.side-foot{
  display:flex;flex-direction:column;gap:var(--s2);
  padding-block-start:var(--s3);margin-block-start:var(--s2);
  border-block-start:1px solid var(--line);
}
.side-me{
  display:flex;align-items:center;gap:var(--s2);
  min-block-size:var(--tap);padding-inline:var(--s1);
  border-radius:var(--r-md);cursor:pointer;
}
.side-me:hover{background:var(--surface-hover)}
.side-me .who{
  flex:1 1 auto;min-inline-size:0;
  line-height:1.25;overflow:hidden;
}
.side-me .who b{
  display:block;font-size:var(--fs-body-sm);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.side-me .who span{
  display:block;font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--fg-muted);
}
.side-me .actions{display:flex;align-items:center;gap:var(--s0)}
.side-foot > .field-label{display:block;margin-block-start:var(--s1)}
.side-foot .select{margin-block-start:var(--s1)}

.avatar{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:28px;block-size:28px;border-radius:var(--r-full);
  background:var(--accent-solid);color:var(--accent-fg);
  font-size:var(--fs-cap);line-height:1;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--ls-micro);
  unicode-bidi:plaintext;
}
.avatar.lg{inline-size:56px;block-size:56px;font-size:var(--fs-h3)}


/* ==========================================================================
   5. THE WINDOW STRIP  (C)

   Row 1 of the shell grid: full width, y 0-38, above the sidebar. Measured:
   39px tall, #242424, title 18px w600. It is a sibling of the sidebar, not a
   child of .main - see the note on #app.
   ========================================================================== */
.topbar{
  grid-column:1/-1;grid-row:1;
  min-block-size:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding-inline:var(--gutter);
  background:var(--surface-2);border-block-end:1px solid var(--line);
}
.topbar .title{
  flex:1 1 auto;min-inline-size:0;
  display:flex;align-items:center;
  font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;
  letter-spacing:var(--ls-tight);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar .right{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}

.edition{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:var(--fs-h3);font-weight:650;letter-spacing:var(--ls-tight);
  padding-block:var(--s1);padding-inline:var(--s2);
  border-radius:var(--r-sm);
}
.edition:hover{background:var(--surface-hover)}
.edition .chev{color:var(--fg-muted);font-size:var(--fs-cap);line-height:1}

.conn{
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;
  padding-inline:var(--s2);
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  color:var(--fg-muted);white-space:nowrap;
}
.conn.ok{color:var(--success);border-color:var(--success-line)}
.conn.err{color:var(--danger-fg);border-color:var(--danger-line)}

.credits-pill{
  display:inline-flex;align-items:center;gap:var(--s1);
  min-block-size:32px;padding-inline:var(--s3);
  border:1px solid var(--line-strong);border-radius:var(--r-xl);
  font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.credits-pill .spark{color:var(--accent);font-size:var(--fs-icon);line-height:1}


/* ==========================================================================
   6. BUTTONS AND SMALL CONTROLS  (P1, P2, P7, P8, P9, P10, P15, P22)
   ========================================================================== */
.primary,.ghost,.danger,.icon-btn,.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-block-size:32px;
  border-radius:var(--r-md);white-space:nowrap;
  font-size:var(--fs-btn);line-height:var(--lh-btn);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
}
.primary{
  background:var(--accent-solid);color:var(--accent-fg);font-weight:600;
  padding-block:var(--s2);padding-inline:var(--s4);
}
.primary:hover:not(:disabled){background:var(--accent-solid-hover)}
.primary:active:not(:disabled){background:var(--accent-solid-active)}
.primary.wide{inline-size:100%}

.ghost{
  border:1px solid var(--line-strong);color:var(--fg);font-weight:550;
  padding-block:var(--s2);padding-inline:var(--s4);
}
.ghost:hover:not(:disabled){background:var(--surface-hover);border-color:var(--line-strong)}
.ghost.wide{inline-size:100%}

.danger{
  border:1px solid var(--danger-line);color:var(--danger-fg);font-weight:600;
  padding-block:var(--s2);padding-inline:var(--s4);
}
.danger:hover:not(:disabled){background:var(--danger-wash)}

.primary:disabled,.ghost:disabled,.danger:disabled,.pill:disabled{
  opacity:.45;cursor:not-allowed;
}

.icon-btn{
  inline-size:32px;block-size:32px;min-block-size:32px;
  color:var(--fg-muted);font-size:var(--fs-h3);line-height:1;
  border-radius:var(--r-md);
}
.icon-btn:hover:not(:disabled){background:var(--surface-hover);color:var(--fg)}
.icon-btn.sm{
  inline-size:24px;block-size:24px;min-block-size:0;
  font-size:var(--fs-body-sm);
}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
.icon-btn .badge-new{
  position:absolute;transform:translate(-50%,-50%);
}
.side-me .actions .icon-btn{position:relative}

.pill{
  border:1px solid var(--line-strong);color:var(--fg);font-weight:550;
  padding-block:var(--s2);padding-inline:var(--s4);border-radius:var(--r-full);
}
.pill:hover:not(:disabled){background:var(--surface-hover)}
.pill.on{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent)}
.pill .ico{font-size:var(--fs-icon);line-height:1}

.link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.link-quiet{
  color:var(--fg-muted);text-decoration:underline;text-underline-offset:2px;
  font:inherit;cursor:pointer;white-space:nowrap;
}
.link-quiet:hover{color:var(--fg)}

/* ---- P8 toggle. The knob moves with inset-inline-start, which needs no
        [dir=rtl] branch: the logical inset already resolves per direction. ---- */
.toggle{
  flex:0 0 auto;position:relative;
  inline-size:40px;block-size:22px;
  border-radius:var(--r-full);border:1px solid var(--line-strong);
  background:var(--surface-inset);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),
             inset-inline-start var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.toggle::after{
  content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;
  inline-size:18px;block-size:18px;border-radius:var(--r-full);
  background:var(--fg-muted);
  transition:inset-inline-start var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.toggle[aria-checked=true]{background:var(--accent-solid);border-color:var(--accent-solid)}
.toggle[aria-checked=true]::after{inset-inline-start:20px;background:var(--accent-fg)}
.toggle:disabled{opacity:.45;cursor:not-allowed}

/* ---- P9 segmented control (a radiogroup, never a tablist) ---- */
.segmented{
  display:inline-flex;gap:var(--s0);padding:var(--s1);
  background:var(--surface-inset);border:1px solid var(--line);
  border-radius:var(--r-md);
}
.segmented button{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding-block:var(--s2);padding-inline:var(--s3);
  border-radius:var(--r-sm);color:var(--fg-muted);font-weight:550;
  font-size:var(--fs-btn);line-height:var(--lh-btn);
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.segmented button:hover{color:var(--fg)}
.segmented button.on,.segmented button[aria-checked=true]{
  background:var(--surface-2);color:var(--fg);box-shadow:var(--sh-1);
}
.segmented .ico{font-size:var(--fs-icon);line-height:1}

/* ---- P10 tabs ---- */
.tabs{
  display:flex;gap:var(--s6);overflow-x:auto;
  border-block-end:1px solid var(--line);
}
.tabs button{
  position:relative;white-space:nowrap;
  padding-block:var(--s3);padding-inline:var(--s1);
  color:var(--fg-muted);font-weight:550;
}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected=true]{color:var(--fg)}
.tabs button[aria-selected=true]::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;
  block-size:2px;border-radius:var(--r-full);background:var(--accent-solid);
}
[role=tabpanel]{padding-block-start:var(--s4)}
[role=tabpanel]:focus-visible{outline-offset:0}

/* ---- category chips (a filter radiogroup) ---- */
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-block:var(--s4)}
.chip{
  padding-block:var(--s2);padding-inline:var(--s4);
  border-radius:var(--r-full);border:1px solid transparent;
  color:var(--fg-muted);font-weight:550;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.chip:hover{background:var(--surface-hover);color:var(--fg)}
.chip.on{
  background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent);
}

/* ---- P7 tag / count. MEASURED: a tag is 9px and a count badge is 8px, and the
       neutral badge fill is #303030. A count is a NUMBER the user reads, so it
       gets --fg-muted rather than --fg-subtle: the measured subtle step is
       1.90:1, which is a decorative value and unreadable as a label. ---- */
.tag{
  display:inline-flex;align-items:center;gap:var(--s1);
  padding-block:2px;padding-inline:var(--s2);
  border-radius:var(--r-badge);
  background:var(--surface-badge);color:var(--fg-muted);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;
}
.tag.brand{background:var(--accent-wash);color:var(--accent)}
.tag.beta{background:var(--surface-inset);color:var(--fg-muted);text-transform:uppercase}

.count{
  display:inline-grid;place-items:center;
  min-inline-size:20px;min-block-size:20px;padding-inline:var(--s1);
  border-radius:var(--r-md);
  background:var(--surface-badge);
  font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---- P15 keycap / kbd hint. A key label is a literal, never mirrored.
       MEASURED: #363636 border, #A8A8A8 ink. ---- */
.keycap{
  display:inline-grid;place-items:center;
  min-inline-size:28px;block-size:28px;padding-inline:var(--s2);
  border:1px solid var(--line-input);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--fg-keycap);
  font-family:var(--font-mono);font-size:var(--fs-cap);
  line-height:var(--lh-cap);
}
kbd.kbd-hint{
  display:inline-grid;place-items:center;
  min-block-size:20px;padding-inline:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--surface-inset);color:var(--fg-muted);
  font-family:var(--font-mono);font-size:var(--fs-micro);
  line-height:var(--lh-micro);white-space:nowrap;
}


/* ==========================================================================
   7. FORM CONTROLS  (P3, P4, P5, P6)
   ========================================================================== */
.field{
  display:flex;flex-direction:column;gap:var(--s2);
  flex:1 1 0;min-inline-size:0;
}
/* MEASURED: input border #363636 at rest, #646464 on hover, focus takes the
   accent. The measured track behind a segmented control is #151515 and its
   selected segment is #242424. */
.input,.select,.textarea{
  inline-size:100%;
  padding-block:var(--s2);padding-inline:var(--s3);
  background:var(--surface-2);
  border:1px solid var(--line-input);border-radius:var(--r-md);
  color:var(--fg);font-size:var(--fs-body);line-height:var(--lh-body);
  transition:border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--fg-muted);opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-input-strong)}
.input:focus,.select:focus,.textarea:focus{
  /* The accent border IS the focus indicator for these three, which is why
     removing the outline here is allowed. */
  outline:none;border-color:var(--accent);background:var(--surface-3);
}
.input:disabled,.select:disabled,.textarea:disabled{
  opacity:.5;cursor:not-allowed;
}
.textarea{resize:vertical;min-block-size:88px;line-height:var(--lh-body)}
.input[type=search]{-webkit-appearance:textfield}

/* Native select on purpose: it is the only variant that gets the OS picker on
   a phone. The caret is drawn with two gradients because appearance:none
   removes it. background-position has no logical keyword, so the RTL case is
   the one genuinely physical override in this file. */
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-inline-end:var(--s8);
  background-image:
    linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),
    linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
  background-position:right var(--s4) center,right var(--s2) center;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
[dir=rtl] .select{
  padding-inline-end:var(--s3);padding-inline-start:var(--s8);
  background-position:left var(--s4) center,left var(--s2) center;
}


/* ==========================================================================
   8. SCREEN D - NEW TASK / HOME
   ========================================================================== */
.home{
  flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--s8);padding:var(--gutter);
  overflow-y:auto;overscroll-behavior:contain;
}
.home-inner{
  inline-size:100%;max-inline-size:var(--content-max);
  display:flex;flex-direction:column;align-items:center;gap:var(--s6);
}
#view-agent .home-inner{max-inline-size:var(--content-market);gap:var(--s10)}
#view-agent .display{max-inline-size:var(--content-narrow)}

.plan-strip{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding-block:var(--s2);padding-inline:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-full);
  font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-muted);
}
.plan-strip:hover{background:var(--surface-hover)}
.plan-strip .sep{color:var(--fg-muted)}
.plan-strip .link{white-space:nowrap}
.home .display{margin-block:var(--s5) var(--s8)}

.quick{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s2);
}
/* MEASURED: 8px between quick-action chips. --s2 is that value, and it is named
   here rather than inlined so the pitch is one edit if the sample moves. */
.quick > .field{flex:1 1 200px;min-inline-size:0}
/* MEASURED: a quick-action chip is a 20px-rounded rectangle, not a pill. */
.quick .pill{border-radius:var(--r-2xl)}

/* ---- carousel ---- */
.carousel{inline-size:100%;max-inline-size:var(--content-market);margin-block-start:auto}
.carousel-card{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4);
  background:var(--surface-inset);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.carousel-card .field{flex:1 1 auto;gap:var(--s1);font-size:var(--fs-body)}
.carousel-card .art{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:120px;block-size:56px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--fg-muted);
  font-size:var(--fs-cap);line-height:var(--lh-cap);
}
.carousel-dots{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  margin-block-start:var(--s3);
}
.carousel-dots button{
  inline-size:6px;block-size:6px;border-radius:var(--r-full);
  background:var(--line-strong);
  transition:inline-size var(--dur) var(--ease),background var(--dur) var(--ease);
}
.carousel-dots button.on{inline-size:16px;background:var(--fg-muted)}


/* ==========================================================================
   9. SCREEN E - THE AGENT
   ========================================================================== */
#agentArc{
  flex-wrap:wrap;max-inline-size:var(--content-market);
}
#agentArt{
  display:flex;align-items:center;gap:var(--s3);
  max-inline-size:320px;padding:var(--s3) var(--s4);
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
}
#agentFeatures{grid-template-columns:repeat(4,1fr)}
#agentPills{margin-block-start:var(--s2)}
#agentGetStarted{min-block-size:var(--tap);padding-inline:var(--s5)}


/* ==========================================================================
   10. SCREEN F - CONVERSATION
   ========================================================================== */
.messages{
  flex:1 1 auto;min-block-size:0;overflow-y:auto;
  overscroll-behavior:contain;
  inline-size:100%;max-inline-size:var(--prose-column);margin-inline:auto;
  padding:var(--gutter);
  display:flex;flex-direction:column;gap:var(--s6);
}
.msg{display:flex;flex-direction:column;gap:var(--s2);max-inline-size:100%}
.msg.user{align-items:flex-end}
.bubble{
  max-inline-size:var(--prose-bubble);
  padding-block:var(--s3);padding-inline:var(--s4);
  background:var(--surface-2);color:var(--fg);
  border-radius:var(--r-lg);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg.user .bubble{background:var(--surface-3);border-end-end-radius:var(--r-xs)}
.msg .who{
  display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:650;
}
.msg .who .tag{font-weight:600}
.bubble strong{font-weight:650}
.bubble pre{
  display:block;inline-size:100%;margin-block:var(--s3);
  padding:var(--s3);
  background:var(--surface-inset);border:1px solid var(--line);
  border-radius:var(--r-md);overflow-x:auto;
  white-space:pre;
}
.bubble code{
  padding-inline:var(--s1);border-radius:var(--r-xs);
  background:var(--surface-inset);
}
.bubble pre code{background:none;padding:0}
.bubble ul,.bubble ol{
  display:flex;flex-direction:column;gap:var(--s1);
  margin-block:var(--s2);padding-inline-start:var(--s5);
}
.bubble li{position:relative;unicode-bidi:plaintext}
.bubble li::before{
  content:"";position:absolute;inset-inline-start:calc(var(--s5) * -1 + var(--s1));
  inset-block-start:.65em;inline-size:5px;block-size:5px;
  border-radius:var(--r-full);background:var(--fg-muted);
}
.bubble a{overflow-wrap:anywhere}

/* ---- P21 status line ---- */
.task-done{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin-block-start:var(--s1);
  color:var(--success);font-size:var(--fs-body-sm);
  line-height:var(--lh-body-sm);font-weight:550;
}
.task-done .acts{display:inline-flex;gap:var(--s0);margin-inline-start:var(--s1)}

/* ---- suggestion stack ---- */
.suggestions{display:flex;flex-direction:column;gap:var(--s2);inline-size:100%}
/* MEASURED: suggestion outline #383838 at rest, 12px radius. */
.suggestion{
  display:flex;align-items:center;gap:var(--s3);
  min-block-size:var(--tap);
  padding-block:var(--s2);padding-inline:var(--s3);
  border:1px solid var(--line-suggestion);border-radius:var(--r-lg);
  background:var(--surface-1);color:var(--fg);text-align:start;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.suggestion:hover{background:var(--surface-hover);border-color:var(--line-strong)}
.suggestion .ico{flex:0 0 auto;font-size:var(--fs-icon);line-height:1;color:var(--fg-muted)}
.suggestion .grow{flex:1 1 auto;min-inline-size:0;font-size:var(--fs-body-sm)}
.suggestion .arrow{flex:0 0 auto;color:var(--fg-subtle)}

/* ---- live tool timeline ---- */
.tool-card-list{display:flex;flex-direction:column;gap:var(--s2);inline-size:100%}
.tool-card{
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--surface-2);overflow:hidden;
}
.tool-card summary{
  display:flex;align-items:center;gap:var(--s3);
  padding-block:var(--s2);padding-inline:var(--s3);
  list-style:none;font-size:var(--fs-body-sm);
}
.tool-card summary::-webkit-details-marker{display:none}
.tool-card summary:hover{background:var(--surface-hover)}
.tool-card .name{
  flex:1 1 auto;min-inline-size:0;font-family:var(--font-mono);
  font-size:var(--fs-code);line-height:var(--lh-code);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tool-card .state{
  flex:0 0 auto;padding-inline:var(--s2);
  border-radius:var(--r-full);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:600;
}
.tool-card .state.running{background:var(--accent-wash);color:var(--accent)}
.tool-card .state.done{background:var(--success-wash);color:var(--success)}
.tool-card .state.err{background:var(--danger-wash);color:var(--danger-fg)}
.tool-card pre{
  margin:0;padding:var(--s3);
  border-block-start:1px solid var(--line);
  background:var(--surface-inset);overflow-x:auto;
  max-block-size:280px;
  font-family:var(--font-mono);font-size:var(--fs-code);
  line-height:var(--lh-code);
  white-space:pre-wrap;overflow-wrap:anywhere;
}


/* ==========================================================================
   11. THE COMPOSER  (UI-SPEC 2.3, two sizes: home and conversation)
   ========================================================================== */
/* ---------------------------------------------------------- attachments */
/* One document gets the room it needs; several get compact tiles side by side.
   The two states are separate rules rather than one rule with a modifier,
   because "one" is the common case and the modifier would be on the single
   tile 99% of the time. */
.attach-tray{
  max-inline-size:var(--content-max);margin-inline:auto;margin-block-end:var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:stretch;
}
.attach-tile{
  display:flex;align-items:center;gap:var(--s2);
  /* inline-size rather than width, so the row mirrors correctly in RTL: the
     browser's own layout puts the first tile at the inline start. */
  flex:0 1 auto;min-inline-size:0;max-inline-size:220px;
  padding:var(--s2) var(--s3);
  background:var(--surface-1);border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--fg);text-align:start;
  font:inherit;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.attach-tile:hover,.attach-tile:focus-visible{border-color:var(--line-strong);background:var(--surface-2)}
.attach-tile:focus-visible{outline:2px solid var(--focus-ring,currentColor);outline-offset:2px}
.attach-tile .ico{flex:0 0 auto;color:var(--fg-muted)}
.attach-tile .txt{min-inline-size:0;display:flex;flex-direction:column;gap:2px}
/* Two lines: the name, then the size. The name truncates rather than wrapping
   because a wrapped filename pushes the row's height around as it uploads. */
.attach-tile .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-body-sm)}
.attach-tile .meta{color:var(--fg-muted);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums}
/* The single-document state. Wide and short: a document is read, not scanned,
   so it earns the horizontal space over the vertical. */
.attach-tray.solo .attach-tile{flex:1 1 auto;max-inline-size:none;padding:var(--s3) var(--s4)}
.attach-tray.solo .attach-tile .name{font-size:var(--fs-body)}
.attach-tile.err{border-color:var(--danger-line,var(--danger-fg))}
.attach-tile.err .meta{color:var(--danger-fg)}
.attach-tray .progress{color:var(--fg-muted);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums}

.composer-wrap{
  flex:0 0 auto;
  padding-block:var(--s4);padding-inline:var(--gutter);
  background:var(--bg);border-block-start:1px solid var(--line);
}
.composer{
  inline-size:100%;max-inline-size:var(--content-max);margin-inline:auto;
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s3);
  background:var(--surface-1);
  border:1px solid var(--line-strong);border-radius:var(--r-xl);
  transition:border-color var(--dur-fast) var(--ease);
}
.composer:focus-within{border-color:var(--accent)}
#homeComposer{min-block-size:120px}
.composer textarea{
  inline-size:100%;min-block-size:24px;max-block-size:200px;
  background:none;border:0;resize:none;
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--fg);
}
.composer textarea:focus{
  /* The wrapper .composer:focus-within draws the accent border, which is the
     indicator standing in for this outline. */
  outline:none;
}
.composer textarea::placeholder{color:var(--fg-muted)}
.composer-bar{display:flex;align-items:center;gap:var(--s1)}
.composer-bar .spacer{flex:1 1 auto}
.composer-bar .sep{flex:0 0 auto;color:var(--fg-subtle);line-height:1}
.send{
  flex:0 0 auto;
  display:grid;place-items:center;
  inline-size:32px;block-size:32px;
  border-radius:var(--r-circle);
  background:var(--surface-3);color:var(--fg-muted);
  font-size:var(--fs-h3);line-height:1;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.send:hover:not(:disabled){background:var(--accent-solid);color:var(--accent-fg)}
.send:disabled{opacity:.5;cursor:not-allowed}
.composer-hint{
  max-inline-size:var(--content-max);margin:var(--s3) auto 0;
  font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--fg-subtle);text-align:center;
}
.composer-hint code{
  padding-inline:var(--s1);border-radius:var(--r-xs);
  background:var(--surface-inset);
}


/* ==========================================================================
   12. CARDS, GRIDS, EMPTY STATES  (P13, P17, P18, P19)
   ========================================================================== */
.grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.wide-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* MEASURED: a card is raised to #242424 on the page, its border is #3F3F3F, its
   radius is 12px and its body well is a step darker at #1C1C1C. */
.card{
  display:flex;flex-direction:column;text-align:start;overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  transition:border-color var(--dur-fast) var(--ease);
}
.card:hover{border-color:var(--line-input-strong)}
.card .art{
  aspect-ratio:16/11;display:grid;place-items:center;
  background:var(--surface-body);color:var(--fg-subtle);
  font-size:var(--fs-display-2);line-height:1;
}
.card .body{
  flex:1 1 auto;
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4);
  background:var(--surface-body);
}
.card .body .ico{font-size:var(--fs-h2);line-height:1;color:var(--accent)}
.card .body h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
.card .body p{
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;min-block-size:calc(var(--lh-body-sm) * 2);
}
.card .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  margin-block-start:auto;padding-block-start:var(--s2);
}
.card .usage{
  font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--fg-muted);font-variant-numeric:tabular-nums;
}

/* ---- wide row card: connectors, notes, transcripts, knowledge rows ---- */
.row-card{
  display:flex;align-items:center;gap:var(--s4);
  min-block-size:64px;padding:var(--s3) var(--s4);text-align:start;
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  transition:border-color var(--dur-fast) var(--ease);
}
.row-card:hover{border-color:var(--line-strong)}
.row-card .ic{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:36px;block-size:36px;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--fg-muted);
  font-size:var(--fs-h3);line-height:1;
}
.row-card .txt{flex:1 1 auto;min-inline-size:0}
.row-card .txt b{display:block;font-weight:600;font-size:var(--fs-body)}
.row-card .txt span{
  display:block;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row-card .act{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2)}
.row-card .avatar{border-radius:var(--r-full)}

/* ---- P17 empty state ---- */
.empty{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding-block:var(--s10);padding-inline:var(--gutter);
  text-align:center;
}
.empty .art{
  display:grid;place-items:center;
  inline-size:120px;block-size:120px;
  border:1px solid var(--line);border-radius:var(--r-2xl);
  background:var(--surface-inset);color:var(--fg-subtle);
  font-size:var(--fs-display-2);line-height:1;
}
.empty h2{
  font-family:var(--ff-title);
  font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:650;
  max-inline-size:var(--content-narrow);
}
.empty > p{max-inline-size:420px;color:var(--fg-muted)}
.empty .list{
  display:flex;flex-direction:column;gap:var(--s2);
  inline-size:100%;max-inline-size:var(--content-narrow);
}
#scheduledTile{max-inline-size:none;inline-size:120px;block-size:120px}
/* The one heading that is NOT a title. It sits inside a pane rather than on a
   modal, so it opts out of the serif 24px step and states the grotesque
   through the same token rather than reaching past the scale to --font-sans. */
#scheduledHeading{
  font-family:var(--ff-ui);font-weight:650;
  margin-block:52px 0;
}
#scheduledCreate{margin-block-start:var(--s4);background:var(--fg);color:var(--bg)}
#scheduledCreate::before{content:"+";font-size:18px;margin-inline-end:8px}
#scheduledEmpty{padding-block-start:76px;padding-block-end:24px}
#scheduledSub{display:none}
#scheduledSuggestions{max-inline-size:768px}
#scheduledTile{position:relative;background:var(--surface-2);border-color:var(--line)}
#scheduledTile::after{content:"+";position:absolute;inset-block-start:-12px;inset-inline-end:-12px;display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--fg-muted);color:var(--bg);font:700 19px var(--ff-ui)}
.section-title{font-family:var(--ff-ui);font-size:18px;font-weight:650;line-height:28px;margin-block:0 var(--s4)}


/* ==========================================================================
   13. SCREEN H - SKILLS, I - PLUGINS, LIBRARY
   ========================================================================== */
#skillScope{margin-block-start:var(--s1)}
#pluginFeatures{margin-block:var(--s4)}
.catalog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-block-size:40px}
.catalog-head h1{font-family:var(--ff-ui);font-size:18px;font-weight:650;line-height:28px}
.catalog-head .ctl{display:flex;gap:var(--s2)}
.catalog-search{display:block;inline-size:100%;margin-block:var(--s3) var(--s5)}
#skillCategories .chip.on{background:var(--surface-3);color:var(--fg);border-color:transparent}
#skillModal .skill-modal{inline-size:min(760px,94vw);max-block-size:88dvh;display:flex;flex-direction:column;gap:var(--s4)}
.skill-modal .catalog-head{flex:0 0 auto}
.skill-modal .catalog-head h1{overflow-wrap:anywhere}
.skill-content{flex:1 1 auto;min-block-size:120px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-inset);color:var(--fg);font:var(--fs-body-sm)/1.6 var(--font-mono)}
#scheduledTile .skeleton{background:var(--surface-3)}
#view-plugins .pad > *{inline-size:100%;max-inline-size:768px;margin-inline:auto}
#view-plugins .row-card{min-inline-size:0}
#view-plugins .row-card .txt span{max-inline-size:100%}
.connector-reason{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Keep the task rail as compact as the desktop reference. Account, language
   and sign-out remain available through the account/settings menus. */
@media (min-width:821px){
  .sidebar #newTaskBtn{background:transparent;color:var(--fg);border:0;box-shadow:none;text-align:start;justify-content:flex-start;padding-inline:var(--s2);font-weight:600}
  .sidebar #newTaskBtn::before{content:"✎";font-size:20px;font-weight:400;margin-inline-end:var(--s3)}
  #sideNav button[data-route="chat"]{display:none}
  .side-foot > .field-label,.side-foot > #signOutBtn{display:none}
}
.view-plugins .field-label{margin-block:var(--s6) var(--s3)}
#connectorGrid{gap:var(--s3)}
#libraryHeading{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:650}
#libraryNotesLabel,#libraryTasksLabel{margin-block:var(--s6) var(--s3)}
#libraryNotes,#libraryTasks{gap:var(--s3)}


/* ==========================================================================
   14. SCREEN G - SEARCH OVERLAY
   ========================================================================== */
.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:var(--scrim);backdrop-filter:blur(3px);
}
.overlay{
  position:fixed;inset-block-start:12vh;inset-inline:0;margin-inline:auto;
  inline-size:min(660px,92vw);
  z-index:var(--z-overlay);
  background:var(--surface-1);
  border:1px solid var(--line-strong);border-radius:var(--r-xl);
  box-shadow:var(--sh-4);overflow:hidden;
}
.overlay-head{
  display:flex;align-items:center;gap:var(--s3);
  padding-inline:var(--s4);
  border-block-end:1px solid var(--line);
}
.overlay-head .muted{flex:0 0 auto}
.overlay-head input{
  flex:1 1 auto;min-inline-size:0;
  padding-block:var(--s3);
  background:none;border:0;
  font-size:var(--fs-h3);line-height:var(--lh-h3);
  color:var(--fg);
}
.overlay-head input:focus{
  /* The row is a single control; its own border-bottom is the boundary, and the
     global :focus-visible ring stands in for this outline. */
  outline:none;
}
.overlay-head input::placeholder{color:var(--fg-muted)}
.overlay-body{
  max-block-size:56vh;overflow-y:auto;padding:var(--s2);
}
.overlay-group{
  padding-block:var(--s3);padding-inline:var(--s2);
  font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:var(--ls-micro);
}
.overlay-row{
  display:flex;align-items:center;gap:var(--s3);
  inline-size:100%;min-block-size:56px;
  padding-block:var(--s2);padding-inline:var(--s2);
  border-radius:var(--r-md);text-align:start;
  transition:background var(--dur-fast) var(--ease);
}
.overlay-row:hover,.overlay-row.cursor{background:var(--surface-3)}
.overlay-row .txt{flex:1 1 auto;min-inline-size:0}
.overlay-row .txt b{
  display:block;font-weight:550;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.overlay-row .txt span{
  display:block;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.overlay-row .when{flex:0 0 auto;font-size:var(--fs-cap);color:var(--fg-date)}
.overlay-body > p{padding-inline:var(--s2)}


/* ==========================================================================
   15. POPOVERS AND MODALS  (P11, P12, screen M)
   ========================================================================== */
/* MEASURED: a popover is #242424 on a #323232 border, 12px radius. */
.popover{
  position:absolute;z-index:var(--z-drawer);
  min-inline-size:280px;max-inline-size:min(380px,92vw);
  padding:var(--s2);
  background:var(--surface-2);
  border:1px solid var(--line-popover);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:auto;
}
.popover .head{
  display:flex;align-items:center;gap:var(--s3);
  padding-block:var(--s2);padding-inline:var(--s1);
  border-radius:var(--r-md);
}
.popover .head .txt{flex:1 1 auto;min-inline-size:0}
.popover .item{
  display:flex;align-items:center;gap:var(--s3);
  inline-size:100%;min-block-size:36px;
  padding-block:var(--s2);padding-inline:var(--s3);
  border-radius:var(--r-md);text-align:start;color:var(--fg);
}
.popover .item:hover{background:var(--surface-hover)}
.popover .item.danger{color:var(--danger-fg)}
.popover .item.danger:hover{background:var(--danger-wash)}
.popover .rule{
  block-size:1px;background:var(--line);
  margin-block:var(--s2);
}
.popover .label{
  padding-block:var(--s1);padding-inline:var(--s3);
  font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:var(--ls-micro);
}
#accountMenu{min-inline-size:300px}
#editionMenu{min-inline-size:264px}
#overflowMenu{min-inline-size:264px}

.modal-wrap{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:grid;place-items:center;
  padding:var(--gutter);
  background:var(--scrim);backdrop-filter:blur(4px);
}
/* MEASURED: a modal is the PAGE colour (#1A1A1A) behind a #2A2A2A border at a
   12px radius - it is not a raised surface. The only thing separating it from
   the page behind it is the scrim and that border, which is why both are named
   rather than borrowed from --line / --line-strong. */
.modal{
  display:flex;flex-direction:column;
  inline-size:min(var(--content-wide),96vw);
  max-block-size:92vh;
  padding:var(--s6);gap:var(--s4);
  background:var(--bg);
  border:1px solid var(--line-modal);border-radius:var(--r-lg);
  box-shadow:var(--sh-5);
}
.modal .display{text-align:start}
.modal .quick{justify-content:flex-start}
/* MEASURED: the close affordance sits at #535353, a step above the muted ink. */
.modal .close{
  position:absolute;inset-block-start:var(--s4);inset-inline-end:var(--s4);
  color:var(--fg-close);
}
#settingsModal .modal{padding:0}
#pricingModal .modal{inline-size:min(1040px,96vw)}
#licenseModal .modal{inline-size:min(560px,94vw)}


/* ==========================================================================
   16. SCREENS N-T - SETTINGS  (P11 lg, P13 plan, P14, P15)
   ========================================================================== */
.settings{
  display:grid;grid-template-columns:330px 1fr;
  block-size:min(840px,92vh);min-block-size:0;
}
.settings-nav{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s5) var(--s3);
  border-inline-end:1px solid var(--line);
  overflow-y:auto;min-block-size:0;
}
.settings-nav .set-row{padding-block:0;border-block-end:0;gap:var(--s2)}
.settings-nav .input{margin-block:var(--s2)}
.settings-nav .group{
  padding-inline:var(--s3);
  font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-muted);
  font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-micro);
}
.settings-nav .item{
  display:flex;align-items:center;gap:var(--s3);
  inline-size:100%;min-block-size:36px;
  padding-block:var(--s2);padding-inline:var(--s3);
  border-radius:var(--r-md);text-align:start;color:var(--fg-muted);
}
.settings-nav .item .ico{flex:0 0 auto;font-size:var(--fs-icon);line-height:1}
.settings-nav .item .label{
  flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.settings-nav .item:hover{background:var(--surface-hover);color:var(--fg)}
.settings-nav .item.on{background:var(--surface-3);color:var(--fg);font-weight:550}
.settings-main{
  min-block-size:0;overflow-y:auto;
  padding:var(--s7) var(--s8) var(--s8);
}
.settings-main > div{
  inline-size:100%;max-inline-size:var(--content-prose);
}
.settings-main h1{
  font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:650;
  margin-block-end:var(--s5);
}
.settings-main .lead{
  font-size:var(--fs-body);color:var(--fg-muted);
  margin-block-start:var(--s1);
}
.settings-section{
  margin-block-start:var(--s6);padding-block-start:var(--s5);
  border-block-start:1px solid var(--line);
}
.settings-section:first-child{border-block-start:0}
.settings-section h2{
  font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:650;
  margin-block-end:var(--s3);
}
.settings-section > .quick{gap:var(--s4)}
.settings-section textarea + p{margin-block-start:var(--s2)}

/* ---- one settings row: title, description, control at the far end ---- */
.set-row{
  display:flex;align-items:center;gap:var(--s4);
  padding-block:var(--s4);
  border-block-end:1px solid var(--line);
}
.set-row:last-child{border-block-end:0}
.set-row .txt{flex:1 1 auto;min-inline-size:0}
.set-row .txt b{display:block;font-weight:600;font-size:var(--fs-body)}
.set-row .txt span{
  display:block;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);
}
.set-row .ctl{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2)}
.set-row .field{flex:1 1 auto}
#view-settings .set-row,
#settingsPanel .set-row{background:none}

/* ---- P13 plan card (M, P and Q are the same component) ---- */
/* MEASURED: the plan card border is #292929, one step softer than a content
   divider, because the card is chosen rather than edited. */
.plan-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);
  background:var(--surface-card);
  border:1px solid var(--line-plan);border-radius:var(--r-lg);
}
.plan-card .top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.plan-card .top b{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:650}
.plan-card .line{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-block:var(--s2);
}
.plan-card .line > span{
  display:flex;align-items:center;gap:var(--s2);min-inline-size:0;
}
.plan-card .line .ico{flex:0 0 auto;color:var(--accent);line-height:1}
.plan-card .line .field{gap:0}
.plan-card .line b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- Q: credits ledger ---- */
.credits-history{
  display:flex;flex-direction:column;
  max-block-size:420px;overflow-y:auto;
  margin-block-start:var(--s2);
}
.credits-row{
  display:grid;grid-template-columns:80px 1fr auto;align-items:center;
  gap:var(--s3);
  padding-block:var(--s3);
  border-block-end:1px solid var(--line);
}
.credits-row .when{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-muted)}
.credits-row .what{
  min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.credits-row .amt{
  font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;
}
.credits-row .amt.minus{color:var(--danger-fg)}
.credits-history .ghost{align-self:flex-start;margin-block-start:var(--s3)}
.credits-history .empty{padding-block:var(--s6)}

/* ---- R: shortcut rows ---- */
.shortcut{
  display:grid;grid-template-columns:1fr auto auto;
  align-items:center;gap:var(--s4);
  padding-block:var(--s3);
  border-block-end:1px solid var(--line);
}
.shortcut:hover{background:var(--surface-hover)}
.shortcut .label{font-weight:500;min-inline-size:0}
.shortcut .keys{display:flex;align-items:center;gap:var(--s1)}
.shortcut .keys .x{color:var(--fg-muted)}
.shortcut .icon-btn{margin-inline-start:var(--s2)}

/* ---- S: profile form ---- */
#settingsPanel .textarea + p,
#settingsPanel .set-row + p{margin-block-start:var(--s2)}


/* ==========================================================================
   16b. SCREEN O - THE OWNER'S DASHBOARD

   The one screen whose content width is the table rather than the prose column,
   so #adminMain opts out of `.settings-main > div`'s measure instead of the
   panel fighting its own table. Every rule below is logical-property only and
   takes its spacing from the --s0..--s16 scale, like the rest of this file.
   ========================================================================== */
#view-admin .pad{
  padding:var(--s0) var(--gutter) var(--gutter);
}
#adminHeading{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:650}
#adminLead{margin-block-start:var(--s2)}
#adminTabs{margin-block:var(--s5) var(--s4)}
#adminMain{inline-size:100%}
#adminMain > div{
  inline-size:100%;max-inline-size:100%;
  display:flex;flex-direction:column;gap:var(--s2);
}

/* ---- the four figures across the top ---- */
.admin-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s3);margin-block:var(--s2) var(--s4);
}
.admin-stat{
  display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s4);
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
}
.admin-stat b{
  font-size:var(--fs-price-sm);line-height:var(--lh-price-sm);font-weight:650;
  font-variant-numeric:tabular-nums;
}
.admin-stat span{
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--fg-muted);
}

/* ---- a definition list, because a labelled figure IS one ---- */
.admin-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s2) var(--s6);
  margin-block:var(--s1);
}
.admin-fact{
  display:flex;align-items:baseline;gap:var(--s2);
  min-inline-size:0;
  padding-block:var(--s2);border-block-end:1px solid var(--line);
}
.admin-fact dt{
  flex:0 1 auto;min-inline-size:0;
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--fg-muted);
}
.admin-fact dd{
  flex:0 0 auto;margin:0;margin-inline-start:auto;
  font-weight:600;font-variant-numeric:tabular-nums;text-align:end;
  overflow-wrap:anywhere;
}

/* ---- the filter bar: a search field and a select, one row ---- */
.admin-bar{
  align-items:flex-end;flex-wrap:wrap;
  border-block-end:1px solid var(--line);
}
.admin-filter{flex:0 0 auto;min-inline-size:180px}
.admin-bar .input,.admin-bar .select{inline-size:100%}

/* ---- a real table. The columns stay columns; the header stays associated. ---- */
.admin-table-wrap{
  overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.admin-table{
  inline-size:100%;border-collapse:collapse;
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
}
.admin-table caption{
  padding:var(--s3) var(--s4);text-align:start;
  font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-muted);
  border-block-end:1px solid var(--line);
}
.admin-table th,.admin-table td{
  padding-block:var(--s3);padding-inline:var(--s4);
  text-align:start;vertical-align:middle;white-space:nowrap;
}
.admin-table thead th{
  font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:600;
  color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--ls-micro);
  border-block-end:1px solid var(--line-strong);
}
.admin-table tbody tr{border-block-end:1px solid var(--line)}
.admin-table tbody tr:last-child{border-block-end:0}
.admin-table tbody tr:hover{background:var(--surface-hover)}
.admin-table tbody tr[data-workspace]{cursor:pointer}
.admin-table td:first-child{white-space:normal}
/* Row hover is a pointer affordance, so the ring the row cannot show is
   drawn on the button inside it instead - the keyboard path is never the one
   that lost the indicator. */
.admin-link{
  font:inherit;color:var(--accent);text-align:start;
  text-decoration:underline;text-underline-offset:2px;
  max-inline-size:100%;overflow-wrap:anywhere;
}
.admin-link:hover{color:var(--fg)}

/* ---- the audit log and the grant list: <ul>, because a log is a sequence ---- */
.admin-log{display:flex;flex-direction:column;margin-block:var(--s2)}
.admin-log-item{
  display:flex;flex-direction:column;gap:var(--s2);
  padding-block:var(--s4);border-block-end:1px solid var(--line);
}
.admin-log-item:last-child{border-block-end:0}
.admin-log-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
}
.admin-log-head b{
  font-size:var(--fs-body);font-weight:650;min-inline-size:0;
  overflow-wrap:anywhere;
}
.admin-log-when{
  flex:0 0 auto;margin-inline-start:auto;
  font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--fg-subtle);
  font-variant-numeric:tabular-nums;
}
.admin-log-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--fg-muted);
}
.admin-log-meta > *{min-inline-size:0;overflow-wrap:anywhere}

/* ---- the notes list: a name, then the facts about it ---- */
.admin-notes{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-block:var(--s2);
}
.admin-notes li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);
  padding-block:var(--s2);border-block-end:1px solid var(--line);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);
}
.admin-notes li:last-child{border-block-end:0}
.admin-notes b{color:var(--fg);font-weight:600}

/* ---- the confirm dialog's consequence list ---- */
.admin-points{display:flex;flex-direction:column;gap:var(--s2)}
.admin-points li{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
}
.admin-points .tick{
  flex:0 0 auto;color:var(--warning);line-height:1.4;
}

/* ---- a one-shot secret: the value, and a copy control ---- */
.admin-secret{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);margin-block-start:var(--s2);
  background:var(--surface-inset);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.admin-secret code{
  flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere;white-space:pre-wrap;
}

.admin-foot{justify-content:flex-start;align-items:center;gap:var(--s4)}
.admin-pad .settings-section{margin-block-start:var(--s6)}


/* ==========================================================================
   17. SCREEN U - PRICING
   ========================================================================== */
#pricingModal .modal{gap:var(--s6)}
.pricing-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s4);
}
.pricing-head h1{
  flex:1 1 100%;
  font-family:var(--ff-display);font-size:var(--fs-display-2);
  line-height:var(--lh-display-2);font-weight:400;text-align:center;
}
.price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  align-items:stretch;
}
.price-card{
  position:relative;
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
}
.price-card.featured{border-color:var(--accent-solid)}
.price-card .badge{
  position:absolute;inset-block-start:calc(var(--s5) * -1);
  inset-inline-start:var(--s5);
  padding-inline:var(--s2);
  background:var(--accent-solid);color:var(--accent-fg);
  border-radius:var(--r-full);
  font-size:var(--fs-micro);line-height:var(--lh-micro);font-weight:700;
}
.price-card .amount{
  display:flex;align-items:baseline;gap:var(--s2);
  font-variant-numeric:tabular-nums;
}
.price-card .amount .big{
  font-size:var(--fs-price);line-height:var(--lh-price);font-weight:650;
}
.price-card .amount .per{font-size:var(--fs-body-sm);color:var(--fg-muted)}
.price-card .tagline{
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);min-block-size:calc(var(--lh-body-sm) * 2);
}
.price-card .feats{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-block-start:var(--s2);
}
.price-card .feats li{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
  color:var(--fg-muted);
}
.price-card .feats .tick{flex:0 0 auto;color:var(--success);line-height:1.3}
.price-card .primary,.price-card .ghost,.price-card .select{margin-block-start:var(--s2)}

.price-banner{
  display:flex;align-items:center;gap:var(--s4);
  margin-block-start:var(--s4);
  padding:var(--s4);
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
}
.price-banner .txt{flex:1 1 auto;min-inline-size:0}
.price-banner .txt b{display:block;font-weight:600}
.price-banner .txt span{
  display:block;font-size:var(--fs-body-sm);color:var(--fg-muted);
}
.price-banner .primary,.price-banner .ghost{flex:0 0 auto}
.price-foot{
  margin-block-start:var(--s6);
  font-size:var(--fs-body-sm);color:var(--fg-muted);text-align:center;
}


/* ==========================================================================
   18. SCREEN A - SIGN IN
   ========================================================================== */
/* MEASURED: the sign-in page is #050505 - darker than the app page, not the
   same colour - which is what makes the card on it read as a card. */
.auth-screen{
  position:fixed;inset:0;z-index:calc(var(--z-scrim) + 5);
  display:grid;place-items:center;
  padding:var(--gutter);overflow:auto;
  background-color:var(--surface-auth);
  /* The dotted field: a repeating radial gradient, so it costs no image
     request and stays crisp at any zoom. --dot, not a literal. */
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:24px 24px;background-position:1px 1px;
}
.auth-card{
  display:flex;flex-direction:column;gap:var(--s4);
  inline-size:min(360px,100%);
  padding:var(--s8);
  background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-2xl);
  box-shadow:var(--sh-4);
}
.auth-card .logo{
  display:grid;place-items:center;
  inline-size:40px;block-size:40px;margin-inline:auto;
  color:var(--accent);font-size:var(--fs-display-2);line-height:1;
}
.auth-card h1{
  font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:650;
  text-align:center;
}
.auth-card .sub{
  margin-block-start:calc(var(--s4) * -1);
  font-size:var(--fs-body-sm);color:var(--fg-muted);text-align:center;
}
.auth-card .set-row{padding-block:var(--s2)}
.auth-card .set-row .ctl .input[type=checkbox]{inline-size:18px;block-size:18px}
.auth-card .err{
  min-block-size:1.2em;
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--danger-fg);
}
#authWorkspaceRow,#authTierRow{display:flex;flex-direction:column;gap:var(--s4)}


/* ==========================================================================
   19. BANNERS, TOASTS, SPINNERS, SKELETONS
   ========================================================================== */
.banner{
  display:flex;align-items:center;gap:var(--s3);
  padding-block:var(--s2);padding-inline:var(--s4);
  border-radius:var(--r-md);
  font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);
}
.banner.warn{background:var(--warning-wash);border:1px solid var(--warning-line);color:var(--warning)}
.banner.err{background:var(--danger-wash);border:1px solid var(--danger-line);color:var(--danger-fg)}
.banner.ok{background:var(--success-wash);border:1px solid var(--success-line);color:var(--success)}
.banner > .link-quiet{margin-inline-start:auto}
.banner.err > .quick,.banner.err .quick{inline-size:100%}
#offlineBanner{flex:0 0 auto;border-radius:0;border-inline:0}
#convoError{flex:0 0 auto}
#updateBanner{
  position:fixed;inset-block-end:var(--s6);inset-inline:0;
  margin-inline:auto;inline-size:max-content;max-inline-size:92vw;
  z-index:var(--z-toast);box-shadow:var(--sh-3);
}
#updateBannerText{unicode-bidi:plaintext}

.spinner{
  flex:0 0 auto;
  inline-size:14px;block-size:14px;
  border-radius:var(--r-full);
  border:2px solid var(--line-strong);border-block-start-color:var(--fg);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,
    var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer var(--shimmer) linear infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}
#agentFeatures .skeleton,.price-grid .skeleton{min-block-size:120px}


/* ==========================================================================
   20. RESPONSIVE
   Breakpoints are all max-width, so the sheet stays desktop-first.
   ========================================================================== */

/* ---- 1100px: the plan label goes, the credits pill follows ---- */
@media (max-width:1100px){
  #planLabel{display:none}
  .grid,.grid.wide-cards{grid-template-columns:repeat(2,1fr)}
  #agentFeatures{grid-template-columns:repeat(2,1fr)}
  .settings{grid-template-columns:260px 1fr}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-inline-size:420px;margin-inline:auto}
  .credits-pill{padding-inline:var(--s2)}
}

/* ---- 1024px: the 299px sidebar becomes a 64px rail. Because the grid column
       is `auto`, changing the sidebar's own inline-size is all it takes - the
       track follows, and `.main` keeps taking the rest. ---- */
@media (max-width:1024px){
  .sidebar{
    inline-size:var(--sidebar-rail);
    align-items:center;padding-inline:var(--s2);
  }
  .sidebar .brand{display:none}
  .nav{inline-size:100%}
  .nav button{justify-content:center;padding-inline:0}
  .nav .label,.nav .badge-new,.nav .kbd-hint{display:none}
  /* New task and Sign out stay reachable from the top bar's "..." menu, so the
     rail drops their labels rather than rendering two unreadable words. */
  #newTaskBtn,.side-section,.side-list{display:none}
  .side-foot{inline-size:100%}
  .side-me{justify-content:center;padding-inline:0}
  .side-me .who,.side-me .actions{display:none}
  .side-foot > .field-label,.side-foot .ghost{display:none}
}

/* ---- 820px: PHONE. Drawer, single column, 44px targets ---- */
@media (max-width:820px){
  .topbar .title .chev{display:none}
  /* The sidebar becomes a drawer over the content rather than a column, so the
     conversation and the composer keep the full width on a phone. It leaves the
     grid entirely (position:fixed), so the shell collapses to one column and
     the strip spans what was left of it. */
  #app{grid-template-columns:minmax(0,1fr)}
  .main{grid-column:1}
  .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;
    z-index:var(--z-drawer);
    inline-size:var(--sidebar-drawer);max-inline-size:var(--sidebar-drawer);
    align-items:stretch;padding-inline:var(--sidebar-pad);
    box-shadow:var(--sh-5);
    /* translateX is an EFFECT here, not a layout, and the closed offset has no
       logical equivalent, so both directions need a rule of their own. */
    transform:translateX(-100%);
    transition:transform var(--dur) var(--ease);
  }
  [dir=rtl] .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar .brand{display:flex}
  .nav button{justify-content:flex-start;padding-inline:var(--s3)}
  .nav .label,.nav .badge-new{display:flex}
  .nav .kbd-hint{display:none}
  #newTaskBtn,.side-section,.side-list{display:flex}
  .side-foot > .field-label,.side-foot .ghost{display:block}
  .side-me{justify-content:flex-start;padding-inline:var(--s1)}
  .side-me .who,.side-me .actions{display:flex}
  .side-list{max-block-size:24%}
  #taskList{max-block-size:none}
  .grid,.grid.two,.grid.wide-cards,#agentFeatures,.price-grid,.settings{
    grid-template-columns:1fr;
  }
  /* The owner's four headline figures and its two-column fact grid both become
     one column. The TABLE is deliberately not: an operator reading customer
     rows on a phone needs the columns, and `.admin-table-wrap` scrolls it
     sideways rather than reflowing a comparison into something unreadable. */
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .admin-facts{grid-template-columns:1fr}
  .admin-filter{flex:1 1 100%;min-inline-size:0}
  .admin-log-when{margin-inline-start:0}
  .admin-foot{justify-content:flex-start}
  .settings{
    grid-template-columns:1fr;
    block-size:min(92dvh,880px);
  }
  .settings-nav{
    flex:0 0 auto;
    padding-block:var(--s3);
    border-inline-end:0;border-block-end:1px solid var(--line);
    overflow:visible;
  }
  .settings-nav .input{display:none}
  .settings-nav #settingsNavList{
    display:flex;gap:var(--s2);
    overflow-x:auto;min-block-size:var(--tap);
    align-items:center;
  }
  .settings-nav .group{display:none}
  .settings-nav .item{white-space:nowrap}
  .settings-main{padding:var(--s4)}
  .settings-main h1{font-size:var(--fs-h2);line-height:var(--lh-h2)}
  .modal{max-inline-size:96vw;max-block-size:92dvh}
  .set-row,.shortcut{flex-wrap:wrap}
  .set-row .ctl{margin-inline-start:auto}
  .quick > .field{flex:1 1 100%}
  .bubble{max-inline-size:86%}
  .credits-row{grid-template-columns:1fr auto}
  .credits-row .when{grid-column:1;font-size:var(--fs-micro)}
  .credits-row .amt{grid-column:2;grid-row:1}
  .credits-row .what{grid-column:1 / -1}
  .overlay{
    inset-block:0;inset-inline:0;
    inline-size:100%;block-size:100dvh;
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  }
  .overlay-body{max-block-size:none;flex:1 1 auto}
  .overlay{display:flex;flex-direction:column}
  .overlay-head{min-block-size:56px}
  .popover{
    position:fixed;inset-inline:0;inset-block-end:0;
    inline-size:100%;max-inline-size:none;
    border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    padding:var(--s3);
  }
  .popover .item{min-block-size:var(--tap)}
  /* --tap is 44px: every interactive element is enlarged, not just the ones
     that happen to have a large default. */
  .primary,.ghost,.danger,.pill{min-block-size:var(--tap);padding-inline:var(--s5)}
  .icon-btn{inline-size:var(--tap);block-size:var(--tap);min-block-size:var(--tap)}
  .nav button,.side-row,.suggestion,.overlay-row,.row-card,
  .settings-nav .item,.set-row,.shortcut{min-block-size:var(--tap)}
  .send{inline-size:var(--tap);block-size:var(--tap)}
  .chip,.segmented button{min-block-size:36px}
  .home{gap:var(--s6);justify-content:flex-start}
  .home .display{margin-block:var(--s4) var(--s6)}
  .quick{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory}
  .quick .pill{flex:0 0 auto;scroll-snap-align:start}
  .price-banner{flex-wrap:wrap}
  .price-banner .primary,.price-banner .ghost{inline-size:100%}
  .price-card .feats{margin-block-start:var(--s3)}
}

/* ---- 560px: phone refinements ---- */
@media (max-width:560px){
  :root{
    --gutter:var(--s4);
    /* The 39px strip is measured DESKTOP chrome and it is below --tap, so on a
       phone it is raised to the 44px minimum touch target rather than kept at
       the measured value. The measurement and the touch floor genuinely
       disagree here and the touch floor wins. */
    --topbar-h:var(--tap);
    --content-prose:100%;
    --content-narrow:100%;
    --content-max:100%;
  }
  #creditsPill .spark{display:none}
  .conn{display:none}
  .grid{gap:var(--s3)}
  .composer{padding:var(--s2);border-radius:var(--r-lg)}
  #homeComposer{min-block-size:140px}
  .composer-wrap{padding-block:var(--s2);padding-inline:var(--s4)}
  .quick .pill{padding-inline:var(--s3);font-size:var(--fs-body-sm)}
  .carousel-card .art{display:none}
  .settings-main{padding:var(--s4)}
  .settings-section{padding-block-start:var(--s4)}
  .modal{padding:var(--s4)}
  .auth-card{padding:var(--s5)}
  .empty{padding-block:var(--s8)}
  .bubble{max-inline-size:90%}
  .bubble ul,.bubble ol{padding-inline-start:var(--s4)}
  .tool-card pre{max-block-size:200px}
  .price-banner{gap:var(--s2)}
}

/* ---- short phone: the carousel is decoration, so it goes ---- */
@media (max-height:599px){
  .carousel{display:none}
}


/* ==========================================================================
   21. REDUCED MOTION
   Every transition and animation is neutralised, not merely shortened: the
   trigger is the movement, not its duration.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .sidebar{transition:none}
  .carousel-dots button{transition:none}
}


/* ==========================================================================
   22. HIGH CONTRAST
   The tokens are remapped in tokens.css; this adds the two component-level
   things a token cannot express: a thicker boundary and a thicker ring.
   ========================================================================== */
@media (prefers-contrast:more){
  .input,.select,.textarea,.card,.row-card,.chip,.suggestion,.popover,
  .modal,.overlay,.tool-card,.set-row{border-color:var(--fg-muted)}
  .input,.select,.textarea{border-width:2px}
  :focus-visible{outline-width:3px}
  .credits-pill,.conn{border-color:var(--fg-muted)}
  .send{border:1px solid var(--line-strong)}
}


/* ==========================================================================
   23. PRINT
   Not a supported surface, but a stray print must not produce a black
   rectangle, so the chrome is dropped and everything collapses to plain ink.
   The literals below are the single sanctioned exception to the no-literal
   rule in this file: paper is not a themed surface.
   ========================================================================== */
@media print{
  .sidebar,.topbar,.composer-wrap,.popover,.scrim,.overlay{display:none}
  body{background:#fff;color:#000}
}

/* ------------------------------------------------- workspace editor */
.workspace-shell{max-inline-size:1160px;min-block-size:100%;margin-inline:auto;padding:32px 24px 24px}
.workspace-head,.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.workspace-head{margin-block-end:18px}
.workspace-head h1{font:650 22px/1.3 var(--ff-ui);margin:0}
.workspace-head p{color:var(--fg-muted);font-size:var(--fs-body-sm);margin:6px 0 0}
.workspace-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.workspace-new{display:flex;gap:8px;margin-block-end:12px}
.workspace-new .input{flex:1;min-inline-size:0}
.workspace-layout{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);
  min-block-size:620px;max-block-size:calc(100dvh - 165px);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.workspace-tree{overflow:auto;border-inline-end:1px solid var(--line);padding:10px}
.workspace-entry{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;
  padding:6px 10px;text-align:start;border-radius:var(--r-md);color:var(--fg-muted);
  font-size:var(--fs-body-sm);overflow-wrap:anywhere}
.workspace-entry:hover,.workspace-entry.active{background:var(--surface-2);color:var(--fg)}
.workspace-entry .glyph{flex:0 0 auto}
.workspace-main{display:flex;flex-direction:column;min-inline-size:0;min-block-size:0}
.workspace-toolbar{min-block-size:56px;padding:8px 12px;border-block-end:1px solid var(--line)}
#workspacePath{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:12px var(--font-mono);color:var(--fg-muted)}
#workspaceEditor,#workspaceFrame{display:block;inline-size:100%;flex:1;min-block-size:0;
  border:0;background:var(--bg);color:var(--fg)}
#workspaceEditor{resize:none;padding:20px 24px;white-space:pre;overflow:auto;
  font:13px/1.6 var(--font-mono);tab-size:2}
#workspaceFrame{background:var(--fill-light)}
#workspaceStatus{min-block-size:30px;padding:5px 14px;margin:0;border-block-start:1px solid var(--line)}
#workspaceStatus.err{color:var(--danger)}
@media (max-width:800px){.workspace-shell{padding:18px 12px}.workspace-head{align-items:flex-start}
  .workspace-layout{grid-template-columns:1fr;max-block-size:none;min-block-size:70dvh}
  .workspace-tree{max-block-size:180px;border-inline-end:0;border-block-end:1px solid var(--line)}
  .workspace-main{min-block-size:460px}.workspace-toolbar{flex-wrap:wrap}}
/* Keep the task rail as compact as the desktop reference. Account, language
   and sign-out remain available through the account/settings menus. */
@media (min-width:821px){
  .sidebar #newTaskBtn{background:transparent;color:var(--fg);border:0;box-shadow:none;text-align:start;justify-content:flex-start;padding-inline:var(--s2);font-weight:600}
  .sidebar #newTaskBtn::before{content:"✎";font-size:20px;font-weight:400;margin-inline-end:var(--s3)}
  #sideNav button[data-route="chat"]{display:none}
  .side-foot > .field-label,.side-foot > #signOutBtn{display:none}
}