/* The website's own pages — the front door, a project's versions, and sign-in.
 *
 * Not the canvas: a published deck carries its own `viewer.css` inside the bundle, because a bundle
 * has to open from a folder with no server in front of it.
 *
 * But it is the same product, so it uses the same design language rather than a second one. These
 * tokens, type roles and the diff colours are the viewer's, copied deliberately: pages
 * styled with `Canvas`/`CanvasText` and default fonts read as browser defaults next to a canvas that
 * has a system, and the seam between them was the most obvious thing about the site.
 */
:root {
  --well: #eaeaeb; --panel: #ffffff; --panel-2: #f4f4f5; --line: #e4e4e6; --line-2: #cfcfd2;
  --canvas:#F6F7F5; --canvas-dot:#CCD2C9;
  --canvas-dot-radius:1px; --canvas-grid:26px;
  --ink: #17181a; --ink-2: #5c5f63; --ink-3: #64676B;
  --accent: #1f242b; --accent-soft: #e3e6ea; --accent-line: #b3b9c1; --new: #2563a8; --gold: #ddbc16; --gold-soft: #fcf6ce;
  --warn: #9c7420; --crit: #b94a42;
  --shadow: 0 1px 2px rgba(20, 26, 34, .10), 0 8px 24px -12px rgba(20, 26, 34, .22);
  --sans:"Pretendard Variable",system-ui,-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","Pretendard Variable",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* By role, not by size, so "make it bigger" is one edit rather than forty literals that drift. */
  --t-title: 16px;    /* the one heading in a region */
  --t-body: 14px;     /* prose and table rows */
  --t-body-2: 13px; /* secondary prose */
  --t-label: 13px;    /* compact controls and labels */
  --t-meta: 12px;     /* secondary metadata and technical identifiers */
  --t-micro: 12px;    /* compact counts, never smaller than metadata */
  --t-prose:17px;
  --leading-prose:1.65;
  --leading-ko:1.75;
  --t-code:14px;
  --t-hero:44px;
  --t-hero-mobile:32px;
  --t-article:32px;
  --t-section:24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --well: #121213; --panel: #1a1a1c; --panel-2: #212123; --line: #2a2a2d; --line-2: #3a3a3e;
    --canvas:#121213; --canvas-dot:#363D37;
    --ink: #eaeaeb; --ink-2: #9b9ca0; --ink-3: #909297;
    --accent: #e7eaee; --accent-soft: #232931; --accent-line: #4a525c; --new: #5aa0e8; --gold: #ddbc16; --gold-soft: #302b0c;
    --warn: #c99640; --crit: #d5665c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="light"] {
  --well: #eaeaeb; --panel: #ffffff; --panel-2: #f4f4f5; --line: #e4e4e6; --line-2: #cfcfd2;
  --canvas:#F6F7F5; --canvas-dot:#CCD2C9;
  --ink: #17181a; --ink-2: #5c5f63; --ink-3: #64676B;
  --accent: #1f242b; --accent-soft: #e3e6ea; --accent-line: #b3b9c1; --new: #2563a8; --gold: #ddbc16; --gold-soft: #fcf6ce;
  --warn: #9c7420; --crit: #b94a42;
  --shadow: 0 1px 2px rgba(20, 26, 34, .10), 0 8px 24px -12px rgba(20, 26, 34, .22); color-scheme: light;
}
:root[data-theme="dark"] {
  --well: #121213; --panel: #1a1a1c; --panel-2: #212123; --line: #2a2a2d; --line-2: #3a3a3e;
  --canvas:#121213; --canvas-dot:#363D37;
  --ink: #eaeaeb; --ink-2: #9b9ca0; --ink-3: #909297;
  --accent: #e7eaee; --accent-soft: #232931; --accent-line: #4a525c; --new: #5aa0e8; --gold: #ddbc16; --gold-soft: #302b0c;
  --warn: #c99640; --crit: #d5665c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -14px rgba(0, 0, 0, .7); color-scheme: dark;
}

* { box-sizing: border-box }
/* Korean wraps between words (eojeol), never inside one; an unbroken run such as a URL may still
   wrap rather than push a control past its column. */
:root:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere }
body {
  margin: 0;
  /* White, not the canvas grey. The deck is a workspace you pan around and the grey says so; this
     is a page you read, and the same grey on it read as unfinished chrome. */
  background: var(--panel);
  color: var(--ink);
  font: var(--t-body)/1.55 var(--sans);
  text-rendering: optimizeLegibility;
}

/* A console shell: a rail of projects on the left, the page filling the rest.
 *
 * The bar it replaces could say where you were and offer nowhere to go - moving between projects
 * meant going back through the front door, which is the one page nobody was heading for. */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh }
.app.bare { grid-template-columns: 1fr }

.rail { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column }
.rail .rtop { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px }
.mark { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--t-title);
        letter-spacing: -.012em; color: inherit; text-decoration: none }
/* The mark carries its own colour: five cells in `currentColor`, one in gold. It is drawn on a
   24x24 grid with a 2.45 margin, so 16px is the smallest size where the gap between cells still
   reads - below that the six frames close up into one block. */
.ms-mark { display: block; flex: none; color: var(--ink) }
.mark .ms-mark { width: 16px; height: 16px }
.mark:hover { text-decoration: none }
.rail nav { padding: 0 8px }
.rail .grouplabel {
  padding: 12px 8px 5px; font: var(--t-micro)/1 var(--sans); letter-spacing:normal;
  text-transform: none; color: var(--ink-3);
}
.rail .item {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px;
  font-size: var(--t-body-2); color: var(--ink-2); text-decoration: none;
}
.rail a.item:hover { background: var(--panel-2); color: var(--ink); text-decoration: none }
.rail .item[aria-current="true"] { background: var(--gold-soft); color: var(--ink); font-weight: 500 }
.rail .item .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--line-2); flex: none }
.rail .item > svg { width: 1em; height: 1em; flex: none }
.rail .item[aria-current="true"] .dot { background: var(--gold) }
.rail .item .n { margin-left: auto; font: var(--t-micro)/1 var(--sans); color: var(--ink-3) }
.me { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--t-body-2); color: var(--ink-2) }
.me .addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.me .signout { font: var(--t-body-2)/1 var(--sans); color: var(--ink-3); text-decoration: none; flex: none }
.me .signout:hover { color: var(--ink); text-decoration: none }
.av {
  width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; font: 500 var(--t-meta)/1 var(--sans); color: var(--ink-2); flex: none;
}
.content { min-width: 0; display: flex; flex-direction: column }
.chead { padding: 20px 28px 0 }
.cbody { padding: 20px 28px 40px; min-width: 0 }

/* Prose in the console. `.content` carries no padding of its own - the project page lays out its
   own head and body - so a page that is only text has to bring its own margins, and the front door
   came up flush against the rail with its first line cut off. */
.doc { padding: 30px 28px 64px; max-width: 84ch }
.doc > :first-child { margin-top: 0 }
.app.bare main { max-width: 1040px; margin: 0 auto; padding: 26px 16px 64px }

h1, h2, h3, h4, h5, h6 { font-family: var(--sans); font-weight: 600 }
h1 { font-size: 19px; line-height: 1.25; letter-spacing: -.012em; margin: 0 0 8px; text-wrap: balance }
h2 {
  font: 600 var(--t-title)/1.4 var(--sans); letter-spacing: normal; text-transform: none;
  color: var(--ink); margin: 28px 0 12px;
}
p { margin: 0 0 12px; color: var(--ink-2); max-width: 72ch }
p.lede { color: var(--ink); font-size: 15px }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
code { font: var(--t-meta)/1.4 var(--mono); background: var(--panel-2); padding: 1px 5px; border-radius: 4px }
.m { font-family: var(--mono); font-size: var(--t-meta) }
.dim { color: var(--ink-3) }
.crumb { margin: 0 0 8px; color: var(--ink-3) }
.crumb a { color: var(--ink-3) }
.who { margin-left: auto; font: var(--t-meta)/1 var(--sans); color: var(--ink-3) }

pre {
  margin: 0 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; font: var(--t-meta)/1.7 var(--mono); color: var(--ink-2);
}
pre code { background: none; padding: 0; font-size: inherit }

/* Projects: a destination each, so a target big enough to aim at rather than a table row. */
/* 340 rather than 300 because the widest thing a card holds is a line of metadata - version count,
   date and PR - and at 300 it wrapped onto `PR #4810`, which is the half a reader is aiming for. */
.projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px }
.proj {
  display: flex; flex-direction: column; gap: 4px; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  color: inherit; text-decoration: none;
}
.proj:hover { border-color: var(--accent-line); text-decoration: none }
.proj .n { font-weight:500; font-size: var(--t-body) }
.proj .m { color: var(--ink-3); font-family: var(--sans) }

/* How to read one: terms with explanations, not steps, so a definition list and not a count. */
.how { margin: 0; max-width: 76ch }
.how dt { font-weight:500; font-size: var(--t-body-2); margin-top: 14px }
.how dt:first-child { margin-top: 0 }
.how dd { margin: 3px 0 0; color: var(--ink-2) }

/* The version list.
 *
 * `main` is lifted out of it: everything else on the page is measured against main, so listing it
 * as one branch among the proposals about it made the reader hunt for the thing they were
 * comparing to. It gets its own ground and a gold edge; the rest are "in review".
 */
.chead .row { padding: 0 0 4px }
.chead .row { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap }
.chead h1 { font-size: 24px; letter-spacing: -.02em; margin: 0; font-weight: 600 }
.chead .purpose { color: var(--ink-2); font-size: 14px; margin: 5px 0 0; max-width: 62ch }
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
  font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); text-decoration: none }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--panel) }

.trunk { border: 1px solid var(--line); border-radius: 11px; overflow: hidden }
/* The picture strip and the whole left half open the deck: the banner was a block of text with one
   small link in it, so the thing people came to press was the smallest target on the page. */
.tstrip {
  display: flex; gap: 6px; padding: 12px 16px; background: var(--panel-2);
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.tstrip:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none }
.twho { display: block; color: inherit; text-decoration: none }
.twho:hover { text-decoration: none }
.twho:hover .tname { text-decoration: underline }
.tstrip img {
  width: 74px; height: 50px; object-fit: cover; object-position: top center;
  border-radius: 4px; border: 1px solid var(--line); display: block;
}
.tbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 16px }
.trunk .eyebrow {
  display: flex; align-items: center; gap: 8px;
  font: var(--t-micro)/1 var(--sans); letter-spacing:normal; text-transform: none; color: var(--ink-3);
}
.trunk .tname { font-size: 19px; font-weight: 500; letter-spacing: -.015em; margin: 6px 0 2px }
.trunk .tname a { color: inherit; text-decoration: none }
.trunk .tname a:hover { text-decoration: underline }
.facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px }
.fact .k { font: var(--t-micro)/1 var(--sans); letter-spacing:normal; text-transform: none; color: var(--ink-3) }
.fact .v { font-size: 15px; font-weight: 500; margin-top: 3px; font-variant-numeric: tabular-nums }
.fact .v small { font-size: var(--t-meta); font-weight: 400; color: var(--ink-3); margin-left: 3px }

.sect-hd { display: flex; align-items: center; gap: 12px; padding: 26px 0 10px; flex-wrap: wrap }
.sect-hd h2 { margin: 0 0 0 auto; font: 500 13px/1.3 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--ink-2) }
.sect-hd .n { font: var(--t-micro)/1 var(--sans); color: var(--ink-3) }
/* Left, where a hand already is: these two switches are the controls a reader reaches for most, and
   at the far right of the heading they were the furthest thing on the row from everything else. */
.tools { display: flex; align-items: center; gap: 12px }
.tools .lbl { font: var(--t-micro)/1 var(--sans); color: var(--ink-3) }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden }
.seg a { padding: 5px 10px; font: 400 var(--t-body-2)/1.4 var(--sans); color: var(--ink-2); text-decoration: none }
.seg a + a { border-left: 1px solid var(--line) }
.seg a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none }
.seg a[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--ink); font-weight: 500;
}

/* Cards: the default, and the reason the page is full width. The picture leads because it answers
   "what is this branch" faster than the branch name does. */
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line); font: var(--t-micro)/1.7 var(--sans); color: var(--ink-2); text-decoration: none;
}
.chip:hover { border-color: var(--line-2); color: var(--ink); text-decoration: none }

/* the list and the panel beside it */
.withpanel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start }
.panel {
  position: sticky; top: 20px; border: 1px solid var(--line); border-radius: 11px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel.empty { color: var(--ink-3); font-size: var(--t-body-2) }
.panel .phead { position: relative; padding-right: 22px }
.panel .chips { margin-top: -4px }
.panel h2 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; margin: 3px 0 0; text-transform: none; color: var(--ink) }
.panel h3 {
  font: var(--t-micro)/1 var(--sans); letter-spacing:normal; text-transform: none;
  color: var(--ink-3); margin: 4px 0 -6px;
}
.panel .close { position: absolute; top: -2px; right: 0; color: var(--ink-3); text-decoration: none; font-size: 17px }
.panel .close:hover { color: var(--ink); text-decoration: none }
.pfacts { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: var(--t-body-2) }
.pfacts dt { font: var(--t-micro)/1.7 var(--sans); color: var(--ink-3) }
.pfacts dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere }
.pfacts dd.m { font: var(--t-micro)/1.7 var(--mono) }
.pacts { display: flex; gap: 6px }
.phist { list-style: none; margin: 0; padding: 0; font-size: var(--t-body-2) }
.phist li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line) }
.phist li a { font: var(--t-micro)/1.7 var(--mono); color: var(--accent); text-decoration: none }
.phist li a:hover { text-decoration: underline }
.phist li .ago { font-size: var(--t-meta); text-align: right; color: var(--ink-3) }
.phist li .moved { grid-column: 1 / -1; font-size: var(--t-meta); color: var(--ink-3) }
.phist li.head a { font-weight: 500 }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px }
.card {
  position: relative; border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--line-2) }
/* The whole edge, and no extra box: the border it already has changes colour and an outline doubles
   it. An *inset shadow* was the obvious way to double it and the wrong one - a card clips its cover
   to the padding box, so the image sat on top of the shadow and ate three of the four edges.
   Outlines paint after the content, and cost no layout, so the selected card is no larger than the
   others and nothing shuffles as the selection moves. */
.card.sel { border-color: var(--gold); outline: 1px solid var(--gold) }
.card .cover {
  position: relative; display: block; aspect-ratio: 16 / 10; background: var(--panel-2);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.card .cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block }
.card .cover .pill { position: absolute; top: 9px; right: 9px; background: var(--panel) }
.card .cover .pill.live { background: var(--gold-soft) }
.card .cbits {
  padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 2px; flex: 1;
  color: inherit; text-decoration: none;
}
.card .cbits:hover { text-decoration: none }
.card .cbits:hover .title { text-decoration: underline }
/* Title and how stale it is on one line - the two facts a reader compares across cards - with who
   pushed it underneath, where it answers a question they have already decided to ask. */
.crow { display: flex; align-items: baseline; gap: 12px }
.crow .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.crow .pill { flex: none }
.crow .ago { flex: none; font-size: var(--t-meta); font-weight: 400; color: var(--ink-3) }
.crow .ago.fresh { color: var(--warn) }
.by { font-size: var(--t-body-2); color: var(--ink-3) }

.card .cbr { font: var(--t-micro)/1.45 var(--mono); color: var(--ink-3); word-break: break-all }
.card .title { font-size: 15px; font-weight: 500; letter-spacing: -.005em }


.card .cfoot .acts { margin-left: auto }
.card details.older { margin: 8px 0 0 }
.card details.older li { grid-template-columns: 1fr auto; gap: 10px }
.card details.older .prev { display: none }

/* One outlined container with hairlines between the rows, and the whole row is the hover target -
   the row is a single link, so tinting only its title would be lying about where the click lands. */
.list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.br + .br { border-top: 1px solid var(--line) }
.br:hover { background: color-mix(in srgb, var(--ink) 8%, transparent) }
.br.sel { box-shadow: inset 3px 0 0 var(--gold) }
.br .ver { padding-left: 14px; padding-right: 14px }
a.pick { display: block; text-decoration: none }

/* The whole row is the target: the picture, what it is, when and who. What moved, where it moved
   and the links out are one click away in the panel, which has room to say them properly. */
.ver {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 11px 0; text-decoration: none; color: inherit;
}
.ver:hover { text-decoration: none }

/* What moved, as pictures - the bundle already carries a jpg per frame, so "which screens" is
   answerable without opening anything. Gold on the ones that moved. */
.prev { display: flex; gap: 4px; align-items: flex-start }
.prev .tile {
  display: block; width: 60px; height: 42px; border-radius: 4px; flex: none;
  object-fit: cover; object-position: top center;
  background: var(--panel-2); border: 1px solid var(--line);
}
.prev .tile.hit { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset }
.ver .title { font-size: 15.5px; font-weight: 500; letter-spacing: -.005em }
.ver .title a { color: inherit; text-decoration: none }
.ver .title a:hover { text-decoration: underline }

/* When it last moved is what decides whether to look, so it is read before the hash beside it. */
.when { display: flex; align-items: baseline; gap: 9px; margin-top: 4px; flex-wrap: wrap }
.when .ago { font-size: 13px; font-weight: 500; color: var(--ink-2) }
.when .ago.fresh { color: var(--warn) }
.when .rest { display: flex; gap: 10px; flex-wrap: wrap; font: var(--t-micro)/1.6 var(--sans); color: var(--ink-3) }
.when .by { font-family: var(--sans); font-size: var(--t-body-2); color: var(--ink-3) }

.moved { font-size: 14px; color: var(--ink-2) }
.moved b { font-weight: 600; font-variant-numeric: tabular-nums }
/* The canvas outlines a changed frame amber, a new one blue and a gone one red. The counts use the
   same three, so a colour means the same thing on both sides of a link. */
.ch { color: var(--warn) }
.nw { color: var(--new) }
.gn { color: var(--crit) }
.vs { font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3); margin-top: 3px }
.where { font-size: var(--t-meta); color: var(--ink-3); margin-top: 3px }
.quiet { color: var(--ink-3) }
.none { padding: 10px 0 }

.acts { display: flex; gap: 6px; align-items: center; white-space: nowrap }
.lnk {
  padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--accent); text-decoration: none; border: 1px solid transparent;
}
.lnk:hover { background: var(--panel-2); text-decoration: none }
.lnk.strong { border-color: var(--line-2) }
.lnk.off { color: var(--ink-3); font-weight: 400; pointer-events: none }
.pill {
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  font: var(--t-micro)/1.75 var(--sans); color: var(--ink-2); white-space: nowrap;
}
.pill.live { border-color: var(--gold); background: var(--gold-soft); color: var(--ink) }

details.older { margin: 0 0 12px }
details.older > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font: var(--t-micro)/1.7 var(--sans); color: var(--ink-3);
}
details.older > summary::-webkit-details-marker { display: none }
details.older > summary::before { content: "\25b8"; font-size: var(--t-meta); transition: transform .12s }
details.older[open] > summary::before { transform: rotate(90deg) }
details.older > summary:hover { color: var(--ink) }
details.older ul { list-style: none; margin: 9px 0 0; padding: 0 0 0 15px; border-left: 2px solid var(--line) }
details.older li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 230px auto; gap: 20px; align-items: baseline; padding: 6px 0;
}
details.older .title { font-size: var(--t-body-2); font-weight: 400; color: var(--ink-2) }
details.older .moved { font-size: 13px; color: var(--ink-3) }

/* `margin-top:auto` in the content column: a short page pins it to the bottom of the window and a
   long one puts it under the content. Before, it sat wherever the content happened to end, so it
   jumped up the page as soon as anything was filtered out. Full width, because a rule that stops
   short of the edges reads as a page that failed to finish. */
/* `margin-top:auto` in the content column: a short page pins it to the bottom of the window and a
   long one puts it under the content. Full width, because a rule that stops short of the edges
   reads as a page that failed to finish. */
.foot {
  margin-top: auto; padding: 10px 28px; border-top: 1px solid var(--line);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.foot .grow { flex: 1 }
.foot .hint { font-size: var(--t-body-2); color: var(--ink-3) }

@media (max-width: 1180px) {
  .withpanel { grid-template-columns: 1fr }
  .panel { position: static }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr }
  .rail { display: none }
  .ver, details.older li, .trunk { grid-template-columns: 1fr; gap: 8px }
}

/* The sign-in wall: one thing to do, so nothing else on the page. The button is the shared
   `.btn` recipe — a second definition here used to silently restyle every .btn on the site —
   just larger, because the page's one action earns the page's biggest target. */
.gate { max-width: 34ch; margin: 14vh auto 0; text-align: center }
.gate h1 { font-size: var(--t-title) }
.gate .btn { margin-top: 6px; padding: 9px 18px }
.err { color: var(--crit); max-width: none }

/* ---- The workbench -------------------------------------------------------------------------
 *
 * Built for the person who does not read code: the conversation owns a wide left column, and the
 * right side is their screens - the captures themselves, never another application's chrome
 * nested inside this one. The look borrows shadcn's restraint: one neutral ramp, soft radii,
 * hairline borders, and color spent only on state.
 */
.workbench-open { margin-left: auto }
.wb-page { height: 100%; overflow: hidden; background: var(--well) }
.wb-page button, .wb-page input, .wb-page textarea { font: inherit }
.wb-page button { color: inherit }
.workbench { --wb-toolbar-h: 52px; height: 100dvh; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) }

.wb-header {
  display: flex; align-items: center; gap: 12px; padding: 0 16px 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); z-index: 5;
}
.wb-identity { display: flex; align-items: center; gap: 9px; min-width: 0 }
.wb-identity .mark span, .wb-project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-slash { color: var(--line-2) }
.wb-project { font-size: 13px; font-weight: 500; letter-spacing: -.01em }
.wb-head-meta { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0 }
.wb-connection, .wb-agent {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: var(--t-meta); color: var(--ink-3);
}
.wb-connection i, .wb-agent i { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.wb-connection[data-state="live"] { color: var(--new) }
.wb-connection[data-state="reconnecting"] { color: var(--warn) }
/* Whether an agent's lease is current - a different fact from the SSE connection beside it. */
.wb-agent[data-mode="live"] { color: var(--new) }
.wb-agent[data-mode="live"] i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--new) 18%, transparent) }
.wb-viewer { flex: none; display: flex; align-items: center }

.wb-body {
  --rail-w: 48px; position: relative; min-height: 0; display: grid;
  grid-template-columns: var(--rail-w) auto minmax(0, 1fr) auto;
  /* Row one is the toolbar, spanning canvas and panel together, so its right-side cluster
     is pinned to the window edge and never moves when the comments panel comes and goes. */
  grid-template-rows: auto minmax(0, 1fr);
}
/* The rail is an overlay strip: 48px of icons at rest, widening on hover (or keyboard focus)
   to say what each icon means - no click spent on learning. One layout for both widths, with
   the labels clipped away when narrow, so nothing jumps as it grows. Controls fit the actual
   rail width, keeping selected outlines inside the rail instead of cutting them at its edge. */
.wb-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 48px; z-index: 24; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0 5px 14px 6px;
  background: var(--panel); border-right: 1px solid var(--line);
  transition: width 150ms ease 60ms, box-shadow 150ms ease 60ms;
}
/* While a drawer is open the rail stays put - expanding here would clip the drawer. */
.workbench:not([data-flyout="open"]):not([data-drafts-open]) .wb-rail:hover,
.workbench:not([data-flyout="open"]):not([data-drafts-open]) .wb-rail:focus-within {
  width: 148px;
  box-shadow: 10px 0 28px -18px rgba(20, 26, 34, .35);
}
@media (prefers-reduced-motion: reduce) {
  .wb-rail { transition: none }
}
.wb-rail-logo {
  display: flex; align-items: center; gap: 10px; flex: none; height: var(--wb-toolbar-h);
  margin: 0 -5px 2px -6px; padding: 0 15px; border-bottom: 1px solid var(--line); text-decoration: none;
}
.wb-rail-logo:hover { text-decoration: none }
.wb-rail-logo .ms-mark { flex: none; width: 18px; height: 18px }
/* The wordmark rides the same reveal as the buttons' labels: dot at rest, name on hover. */
.wb-rail-logo span { font-size: var(--t-meta); font-weight: 600; color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity 120ms ease 80ms }
.workbench:not([data-flyout="open"]):not([data-drafts-open]) .wb-rail:hover .wb-rail-logo span,
.workbench:not([data-flyout="open"]):not([data-drafts-open]) .wb-rail:focus-within .wb-rail-logo span { opacity: 1 }
.wb-rail-btn {
  position: relative; flex: none; width: 100%; min-width: 0; height: 36px; border: 0; border-radius: 8px; background: none;
  display: flex; align-items: center; gap: 10px; padding: 0 9px; color: var(--ink-3); cursor: pointer;
}
.wb-rail-btn svg { flex: none; width: 18px; height: 18px }
.wb-rail-btn[hidden] { display: none }
.wb-rail-btn > span { min-width: 0; overflow: hidden; font-size: var(--t-meta); font-weight: 500; white-space: nowrap; opacity: 0; transition: opacity 120ms ease 80ms }
.workbench:not([data-flyout="open"]):not([data-drafts-open]) .wb-rail:hover .wb-rail-btn > span,
.workbench:not([data-flyout="open"]):not([data-drafts-open]) .wb-rail:focus-within .wb-rail-btn > span { opacity: 1 }
.wb-rail-btn:hover { color: var(--ink); background: var(--panel-2) }
.wb-rail-btn[aria-pressed="true"] { color: var(--ink); background: var(--panel-2); outline: 1px solid var(--line-2) }
/* Anchored near the icon, so the count survives both widths. */
.wb-rail-badge {
  position: absolute; top: 1px; left: 22px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--crit); color: #fff; font: 600 9.5px/15px var(--sans); text-align: center;
}
.wb-rail-badge[hidden] { display: none }
.wb-rail-grow { flex: 1 }
.wb-rail > .wb-rail-av { flex: none; margin-left: 8px }

/* Lane two, at rest: the design navigator - the build's own page list. */
.wb-designnav {
  position: relative; grid-column: 2; grid-row: 1 / -1; width: var(--nav-width, 268px); min-width: 0; min-height: 0; display: flex; flex-direction: column;
  padding: 0 0 12px; background: var(--panel); border-right: 1px solid var(--line);
}
.wb-designnav[hidden] { display: none }
.wb-designnav-brand {
  margin: 0; height: var(--wb-toolbar-h); display: flex; align-items: center; padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
}
.wb-designnav-tabs {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 10px 12px 0; padding: 3px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
}
.wb-designnav-tabs button {
  min-width: 0; min-height: 30px; padding: 4px 8px; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ink-2); font-size: var(--t-body-2); cursor: pointer;
}
.wb-designnav-tabs button:hover { color: var(--ink) }
.wb-designnav-tabs button[aria-selected="true"] {
  border-color: var(--line-2); background: var(--panel); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 2px rgba(20, 26, 34, .05);
}
.wb-designnav-panel { min-height: 0; flex: 1; display: flex; flex-direction: column }
.wb-designnav-panel[hidden] { display: none }
.wb-drafts-panel { padding: 4px 10px 0 }
.wb-drafts-list { scrollbar-gutter: stable }
/* The draft on the canvas, named beside "Design" - the pencil says it renames in place. */
.wb-work-line { display: flex; align-items: center; gap: 6px; min-width: 0 }
.wb-draft-name {
  min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 0; border-radius: 7px;
  background: none; text-align: left; color: var(--ink); cursor: text;
  font-size: var(--t-meta); font-weight: 500; letter-spacing: -.01em;
}
.wb-draft-name > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wb-draft-name svg { flex: none; color: var(--ink-3) }
.wb-draft-name:hover { background: var(--panel-2) }
.wb-draft-name:hover svg { color: var(--ink) }
.wb-draft-name[hidden] { display: none }
/* The staged draft's kind, always on: main is the product, everything else says its source. */
.wb-draft-kind { flex: none; font: 500 var(--t-meta)/1 var(--sans); padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--ink-2); white-space: nowrap }
.wb-draft-kind[data-kind="pr"] { background: var(--accent-soft); color: var(--ink) }
.wb-draft-kind[data-kind="chat"] { background: var(--panel-2); color: var(--ink-2) }
.wb-draft-kind[hidden] { display: none }
/* A PR's chip is a link when the record knows the repo; the other kinds are the same chip
   without one, so the chip must not look like a link until it is one. */
a.wb-draft-kind { text-decoration: none }
a.wb-draft-kind[href]:hover { filter: brightness(.96); text-decoration: underline }
/* What the draft was built on, on the title's own line - a note beside the name, never a
   heading under it. */
.wb-work-base { flex: none; color: var(--ink-3); font-size: var(--t-meta); white-space: nowrap }
.wb-work-base[hidden] { display: none }
#wbWorkSubtitle[hidden] { display: none }
/* What the request builds on: the draft on screen, or the trunk. Two segments, not a button
   somewhere else - the choice belongs where the ask is written. */
.wb-form-base[hidden] { display: none }
.wb-form-note { margin: 6px 1px 0; color: var(--crit); font-size: var(--t-meta); line-height: 1.45 }
.wb-form-note[hidden] { display: none }
.wb-base-choice { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px }
.wb-base-choice button {
  flex: 0 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-2); font-size: var(--t-meta); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-base-choice button b { font-weight: 500; color: inherit }
.wb-base-choice button:hover { color: var(--ink) }
.wb-base-choice button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); border-color: var(--line-2) }
.wb-base-chip { font-family: var(--mono) }
.wb-draft-input {
  width: 220px; height: 26px; border: 1px solid var(--accent-line); border-radius: 7px; background: var(--panel);
  color: var(--ink); padding: 0 7px; font-size: var(--t-meta); font-weight: 500;
}
.wb-draft-input:focus { outline: none }
.wb-draft-input[hidden] { display: none }

/* ---- level one: the sidebar, wide at rest, a rail while you work ----
 *
 * The wide state is the front door: icon + word, readable without hovering. Opening a list or
 * a conversation collapses it to icons so the content gets the width back - the Mindtrip move. */
.wb-shellnav {
  display: flex; flex-direction: column; gap: 5px; padding: 18px 12px 18px; width: 100%; min-width: 0;
  background: var(--panel); border-right: 1px solid var(--line); z-index: 19;
}

.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-shellnav { width: 58px; padding-left: 6px; padding-right: 6px; align-items: center }
.wb-nav-btn {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer;
}
.wb-nav-btn svg { flex: none }
.wb-nav-btn span { font-size: var(--t-body); font-weight: 500; white-space: nowrap }
.wb-nav-btn:hover { color: var(--ink); background: var(--panel-2) }
.wb-nav-btn[aria-pressed="true"] { color: var(--ink); background: var(--panel-2) }
.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-nav-btn { width: 44px; justify-content: center; padding: 10px 0 }
.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-nav-btn span { display: none }
.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-nav-btn[aria-pressed="true"] { outline: 1px solid var(--line-2) }
.wb-nav-badge {
  margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--crit); color: #fff; font: 600 var(--t-meta)/17px var(--sans); text-align: center;
}
.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-nav-badge { position: absolute; top: 3px; right: 3px; margin: 0; min-width: 15px; height: 15px; line-height: 15px }
.wb-nav-badge[hidden] { display: none }
.wb-nav-brand {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px 8px; flex: none;
  font-size: var(--t-title); letter-spacing: -.012em; color: var(--ink); text-decoration: none;
}
.wb-nav-brand:hover { text-decoration: none }
.wb-nav-brand .ms-mark { width: 16px; height: 16px }
.wb-nav-grow { flex: 1 }
/* The navigator's page list is the only thing that grows: `.wb-pages` already claims the free
   height, so a spacer beside it would split that height in two and leave the list scrolling
   inside half a panel with dead space under it. The button pins itself to the bottom instead,
   which also holds when the list is hidden and there is nothing to push against. */
.wb-designnav .wb-nav-new { margin-top: auto }
.wb-nav-new {
  min-height: 32px; margin: 10px 12px 0; border: 0; border-radius: 999px;
  /* !important against `.wb-page button { color: inherit }`, which outranks a lone class. */
  background: var(--accent); color: var(--panel) !important; font-size: 12px; font-weight: 500; cursor: pointer;
}
.wb-nav-new:hover { filter: brightness(.92) }

.wb-nav-me { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 2px 8px }
.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-nav-me { padding: 0 }
.wb-nav-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: var(--t-body-2) }
.workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-nav-mail { display: none }
.wb-rail-av {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; font: 500 var(--t-meta)/1 var(--sans); color: var(--ink-2);
}

/* Chats is a transient flyout; Drafts uses the persistent resizable design lane above. */
/* No backdrop on drawers: the shadow does the layering, and this is only the invisible
   click-catcher that dismisses. */
.wb-scrim { position: absolute; inset: 0; left: var(--rail-w, 48px); z-index: 20; background: transparent }
.wb-scrim[hidden] { display: none }
.wb-flyout {
  position: absolute; left: var(--rail-w, 48px); top: 0; bottom: 0; width: 280px; z-index: 21;
  display: flex; flex-direction: column; padding: 12px 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 12px 36px -8px rgba(20, 26, 34, .18), 0 2px 8px rgba(20, 26, 34, .06);
}
.wb-flyout[hidden] { display: none }
.wb-flyout-head { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px }
.wb-flyout-head h2 { margin: 0; flex: 1; font: 600 var(--t-title)/1.4 var(--sans); letter-spacing: normal }
.wb-flyout-head button {
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink-2);
  padding: 4px 10px; font-size: var(--t-micro); font-weight: 500; cursor: pointer;
}
.wb-flyout-head button:hover { border-color: var(--ink-3); color: var(--ink) }
.wb-flyout-list { min-height: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px }
.wb-fly-h { margin: 12px 8px 4px; font: 600 var(--t-meta)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink) }
.wb-fly-item {
  width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
}
.wb-fly-item:hover { background: var(--panel-2) }
/* Inset outline: the list scrolls, and an outline drawn outside the row is clipped at its edge. */
.wb-fly-item[aria-current="true"] { background: var(--panel-2); outline: 1px solid var(--line-2); outline-offset: -1px }
.wb-fly-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2) }
.wb-fly-dot[data-tone="running"] { background: var(--warn) }
.wb-fly-dot[data-tone="attention"] { background: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 18%, transparent) }
.wb-fly-dot[data-tone="done"] { background: var(--new) }
/* The list's one action row, marked by a bare plus where the status dots sit. Drawn as two
   strokes, not a text glyph - a font's "+" hangs off the baseline and never sits centred. The
   box is wider than a dot, so negative margins keep its centre on the dot column. */
.wb-fly-plus { flex: none; width: 16px; height: 16px; margin: 0 -4px; position: relative; color: var(--ink-2) }
.wb-fly-plus::before, .wb-fly-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: currentColor; border-radius: 1px;
}
.wb-fly-plus::before { width: 9px; height: 1.5px }
.wb-fly-plus::after { width: 1.5px; height: 9px }
.wb-fly-item:hover .wb-fly-plus { color: var(--ink) }
/* The door out of the picker: same row shape, marked by an arrow where the dots sit. */
a.wb-fly-item { text-decoration: none; color: inherit }
.wb-fly-all { margin-top: 4px }
.wb-fly-arrow { flex: none; width: 16px; height: 16px; margin: 0 -4px; position: relative; color: var(--ink-2) }
.wb-fly-arrow::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; rotate: 45deg;
  border-radius: 1px;
}
.wb-fly-item:hover .wb-fly-arrow { color: var(--ink) }
.wb-fly-text { min-width: 0; flex: 1; display: grid; gap: 1px }
.wb-fly-text b { font-size: var(--t-meta); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wb-fly-text span { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wb-fly-text span[data-tone="attention"] { color: var(--crit) }
/* The pinned row's own badge: main is the product, and the picker says so without a second line. */
.wb-fly-text b .wb-fly-chip { margin-left: 6px; font: 500 var(--t-meta)/1 var(--sans); font-style: normal; color: var(--ink-2); background: var(--gold-soft); border-radius: 999px; padding: 2px 6px; vertical-align: 1px }
.wb-fly-empty { margin: 2px 8px; color: var(--ink-3); font-size: var(--t-body-2) }
.wb-flyout-hint { margin: 12px 8px 0; flex: none; color: var(--ink-3); font-size: var(--t-micro); line-height: 1.5 }
.wb-sidebar {
  grid-column: 2; grid-row: 1 / -1; width: 424px; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
}
.wb-sidebar[hidden] { display: none }
.wb-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px 12px 9px; border-bottom: 1px solid var(--line) }
.wb-tab {
  min-height: 34px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font-size: var(--t-body-2); cursor: pointer;
}
.wb-tab:hover { background: var(--panel-2); color: var(--ink) }
.wb-tab[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-weight: 500 }
.wb-count {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; padding: 0 5px;
  border-radius: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); font: var(--t-micro)/1 var(--sans);
}
.wb-count:empty { display: none }
.wb-panel { min-height: 0; flex: 1 }
.wb-panel[hidden] { display: none }
/* The composer must shrink with the pane, including when native input metrics are wider. */
.wb-chat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto }

/* ---- level two: the open conversation's header ---- */
.wb-convo-head { border-bottom: 1px solid var(--line); background: var(--panel) }
.wb-convo-head:empty { display: none }
.wb-convo-main { display: grid; gap: 3px; padding: 17px 20px 15px }
.wb-convo-main b { font-size: var(--t-body); font-weight: 500 }
.wb-convo-main span { color: var(--ink-3); font-size: var(--t-body-2) }
.wb-convo-request { padding: 16px 20px 17px }
.wb-convo-top { display: flex; align-items: center; gap: 8px }
.wb-convo-top .wb-thread-pills { flex: 1; min-width: 0 }
.wb-details-toggle { flex: none; border: 0; background: none; color: var(--ink-3); font-size: var(--t-body-2); cursor: pointer; padding: 3px 4px }
.wb-details-toggle:hover { color: var(--ink) }
.wb-convo-request h1 { margin: 7px 0 0; font-size: 14px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em }
.wb-convo-actions { display: grid; gap: 7px; margin-top: 11px }
.wb-convo-request .wb-callout { margin: 11px 0 0 }
.wb-convo-request .wb-thread-body { border-top: 1px solid var(--line); margin-top: 12px; padding: 2px 0 0 }
.wb-requests { overflow: hidden }
.wb-panel-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 10px }
.wb-panel-head > div:first-child { min-width: 0; flex: 1 }
.wb-panel-head h1 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.012em }
.wb-sub { margin: 3px 0 0; color: var(--ink-3); font-size: var(--t-body-2); line-height: 1.45 }

.wb-primary {
  flex: none; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--panel) !important;
  min-height: 34px; padding: 7px 14px; font-size: var(--t-body-2); font-weight: 500; cursor: pointer;
}
.wb-primary:hover { filter: brightness(.92) }
.wb-form-actions .wb-primary { background: var(--accent); border-color: var(--accent) }
.wb-primary:disabled { opacity: .48; cursor: wait }
.wb-secondary {
  flex: none; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); color: var(--ink-2);
  min-height: 34px; padding: 7px 14px; font-size: var(--t-body-2); font-weight: 500; cursor: pointer;
}
.wb-secondary:hover { border-color: var(--ink-3); color: var(--ink) }
.wb-secondary:disabled { opacity: .48; cursor: wait }

.wb-notice {
  flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 10px 12px 0; padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--crit) 40%, var(--line)); border-radius: 9px;
  color: var(--crit); background: color-mix(in srgb, var(--crit) 6%, var(--panel)); font-size: var(--t-body-2);
}
.wb-notice[hidden] { display: none }
.wb-notice span { flex: 1 }
.wb-notice button { border: 0; padding: 0; background: none; color: inherit; font-weight: 500; cursor: pointer }
/* Something to know, not something that failed: the same place, without the error hue. */
.wb-notice[data-tone="info"] { border-color: var(--line-2); color: var(--ink-2); background: var(--panel-2) }

/* ---- chat: a conversation, not a log ---- */
.wb-context {
  display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); min-width: 0;
}
.wb-context[hidden] { display: none }
.wb-context span { flex: none; font-size: var(--t-micro); color: var(--ink-3) }
.wb-context b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body-2); font-weight: 500; color: var(--ink-2) }
.wb-context button { flex: none; border: 0; background: none; color: var(--ink-3); font-size: 15px; cursor: pointer; padding: 0 2px }
.wb-context button:hover { color: var(--ink) }
/* `overflow-x: hidden` is the guard, not the fix: a chat column has one axis, and anything wide
   enough to need a second one is a wrapping bug in what is inside it - the artifact paths below
   were the one that got out. Clipping here keeps one long path from sliding the whole
   conversation sideways while it is being read. */
.wb-messages { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 12px; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 14px }
/* The conversation grows up from the composer, like any chat: a flexible spacer above keeps a
   short history at the bottom, so the input never moves and the newest thing is always beside it. */
.wb-messages::before { content: ""; flex: 1 }
.wb-empty { margin: 0 8px; padding: 10px 6px 16px; text-align: center }
.wb-empty strong { display: block; font-size: var(--t-body); font-weight: 500; color: var(--ink-2) }
.wb-empty p { margin: 6px auto 0; max-width: 42ch; color: var(--ink-3); font-size: var(--t-body-2); line-height: 1.5 }
.wb-message { display: flex; flex-direction: column; gap: 4px }
.wb-message-head { display: flex; align-items: baseline; gap: 8px }
.wb-message-head strong { font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); letter-spacing: .02em }
.wb-message-head time { font: var(--t-micro)/1 var(--sans); color: var(--ink-3); opacity: .8 }
.wb-bubble {
  max-width: 92%; padding: 10px 13px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.wb-message[data-role="user"] { align-items: flex-end }
.wb-message[data-role="user"] .wb-message-head { flex-direction: row-reverse }
.wb-message[data-role="user"] .wb-bubble {
  background: var(--accent); border-color: var(--accent); color: var(--panel);
  border-bottom-right-radius: 5px;
}
.wb-message[data-role="user"] .wb-message-body { color: inherit }
.wb-message[data-role="agent"] .wb-bubble, .wb-message[data-role="system"] .wb-bubble { border-bottom-left-radius: 5px }
.wb-message-body { margin: 0; max-width: none; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: var(--t-body-2); line-height: 1.55 }
.wb-message-artifacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px }
/* A file path has no spaces, so a flex item sized by its content is as wide as the path - which
   is wider than the panel, and it took the conversation with it. `min-width: 0` lets the chip
   shrink and `anywhere` gives the path somewhere to break. */
.wb-message-artifacts span { min-width: 0; overflow-wrap: anywhere; padding: 2px 7px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 6px; opacity: .75; font: var(--t-micro)/1.4 var(--mono) }
.wb-mode-chip {
  font: var(--t-micro)/1 var(--sans); color: var(--warn); letter-spacing:normal;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 999px; padding: 2px 7px;
}
/* The composer floats: a soft card resting over the conversation, not a form welded to the
   frame. The panel keeps no border above it - lightness is the point. */
.wb-composer { flex: none; padding: 6px 16px 14px; background: transparent }
.wb-composer-card {
  display: flex; align-items: flex-end; gap: 9px; padding: 8px 8px 8px 9px;
  border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel);
  box-shadow: 0 2px 6px rgba(20, 26, 34, .06), 0 12px 28px -18px rgba(20, 26, 34, .28);
}
.wb-composer-card:focus-within { border-color: var(--accent-line); box-shadow: 0 2px 6px rgba(20,26,34,.08), 0 12px 30px -16px rgba(20,26,34,.32) }
.wb-composer textarea {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
  /* The card bottom-aligns its children so the send button rides the last line as the text
     grows; the resting line then needs to fill the button's height itself, padded to sit
     centered - otherwise it sinks to the card's bottom edge and reads clipped. */
  padding: 6px 0; line-height: 1.5; min-height: 33px; resize: none; max-height: 160px; overflow-y: auto;
}
.wb-composer textarea:focus { outline: none }
.wb-plus {
  flex: none; width: 30px; height: 30px; margin-bottom: 1px; border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--panel); color: var(--ink-2); font-size: 17px; line-height: 1; cursor: pointer;
}
.wb-plus:hover { border-color: var(--ink-3); color: var(--ink) }
.wb-send {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center;
  /* !important against '.wb-page button { color: inherit }' - the same cascade that blacked
     out the New request pill; without it the arrow is accent-on-accent. */
  background: var(--accent); color: var(--panel) !important; cursor: pointer;
}
.wb-send svg { display: block }
.wb-send:hover { filter: brightness(.92) }
.wb-send:disabled { opacity: .45; cursor: wait }
.wb-compose-hint { display: block; margin: 7px 4px 0; text-align: center; color: var(--ink-3); font-size: var(--t-micro) }
.wb-request-form textarea, .wb-request-form input, .wb-request-form select, .wb-triage-select {
  width: 100%; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel);
  color: var(--ink); padding: 10px 12px; line-height: 1.45; resize: none;
}
.wb-request-form textarea:focus, .wb-request-form input:focus, .wb-request-form select:focus, .wb-triage-select:focus {
  border-color: var(--accent-line); outline: 2px solid color-mix(in srgb, var(--accent) 12%, transparent); outline-offset: 0;
}

/* ---- requests ---- */
.wb-request-list-view, .wb-request-detail { height: 100%; min-height: 0; overflow-y: auto }
/* The form is a sheet over the whole conversation: filling it is a different act from
   chatting, and covering the composer is what says so. */
.wb-chat { position: relative }
.wb-request-form {
  position: absolute; inset: 0; z-index: 12; margin: 0; padding: 16px 18px 18px; overflow-y: auto;
  background: var(--panel); border: 0; border-radius: 0;
}
.wb-form-eyebrow { display: block; font: var(--t-meta)/1.4 var(--sans); letter-spacing:normal; text-transform: none; color: var(--ink-3) }
.wb-form-sub { margin: -4px 0 10px; color: var(--ink-3); font-size: var(--t-body-2); line-height: 1.45 }
.wb-request-form[hidden] { display: none }
/* Composing is one send area: the conversation underneath leaves the pane - and the tab order -
   rather than sitting behind the sheet with a second composer. */
#workbench[data-composing] .wb-chat > :not(.wb-request-form) { display: none }
.wb-form-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px }
.wb-form-head > div { flex: 1; min-width: 0; display: grid; gap: 2px }
.wb-form-head strong { flex: 1; font-size: var(--t-body-2); font-weight: 500 }
.wb-form-head button { border: 0; background: none; color: var(--ink-3); font-size: 18px; cursor: pointer }
.wb-request-form > label { display: block; margin: 10px 1px 5px; font-size: var(--t-body-2); font-weight: 500; color: var(--ink-2) }
.wb-request-form > label span { color: var(--ink-3); font-weight: 400 }
.wb-request-form input, .wb-request-form select { height: 38px }
.wb-request-form select, .wb-triage-select { padding-block: 0; font: inherit; font-size: var(--t-body-2) }
/* Urgency: a queue position beside the status, never a status of its own. */
.wb-triage { flex-wrap: wrap }
.wb-triage-select { width: auto; min-height: 32px }
.wb-urgency[data-level="urgent"] { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)) }
.wb-urgency[data-level="high"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)) }
.wb-request-form input[type="checkbox"] { width: 15px; height: 15px; padding: 0; margin: 0; border-radius: 4px; flex: none }
.wb-share-row { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: var(--t-body-2); color: var(--ink-2) }
.wb-share-row input { accent-color: var(--accent) }
.wb-share-row span { color: var(--ink-3); font-size: var(--t-micro) }
.wb-share-row b { color: var(--ink-2); font-size: var(--t-body-2); font-weight: 500 }
/* ---- what the request is about: the capture itself, with its version ---- */
/* minmax(0, 1fr): a long label or the offer row clips inside the form instead of widening it (B2). */
.wb-target { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px }
.wb-target-label { margin: 0 1px; font-size: var(--t-body-2); font-weight: 500; color: var(--ink-2) }
.wb-target-card {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2);
}
.wb-target-thumb { display: block; width: 76px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--well) }
.wb-target-thumb img, .wb-target-option-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top }
.wb-target-thumb img[hidden] { display: none }
.wb-target-text { min-width: 0; display: grid; gap: 2px }
.wb-target-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body); font-weight: 500; color: var(--ink) }
.wb-target-text span { font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere }
.wb-target-text span[hidden] { display: none }
.wb-target-text .wb-target-status { color: var(--ink-3) }
.wb-target-card:is([data-state="unavailable"], [data-state="private"]) { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); background: color-mix(in srgb, var(--crit) 6%, var(--panel)) }
.wb-target-card:is([data-state="unavailable"], [data-state="private"]) .wb-target-status { color: var(--crit) }
.wb-target-card[data-state="unavailable"] .wb-target-thumb { opacity: .48 }
.wb-target-actions { display: flex; flex-wrap: wrap; gap: 4px }
.wb-target-actions button, .wb-target-suggest button {
  min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--accent); font-size: var(--t-body-2); font-weight: 500; cursor: pointer;
}
.wb-target-actions button:hover, .wb-target-suggest button:hover, .wb-target-actions button[aria-expanded="true"] { background: var(--panel-2) }
.wb-target-actions button[hidden] { display: none }
.wb-target-suggest { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 4px 4px 10px; border: 1px dashed var(--line-2); border-radius: 9px; color: var(--ink-2); font-size: var(--t-body-2) }
.wb-target-suggest[hidden] { display: none }
.wb-target-suggest span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-target-find { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel) }
.wb-target-find[hidden] { display: none }
.wb-target-results { max-height: 280px; overflow-y: auto; display: grid; gap: 2px }
.wb-target-group { display: grid; gap: 2px }
.wb-target-group-h { margin: 6px 4px 2px; font: 600 var(--t-meta)/1.5 var(--sans); color: var(--ink) }
.wb-target-option { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; padding: 4px 6px; border-radius: 8px; cursor: pointer }
.wb-target-option:hover { background: var(--panel-2) }
.wb-target-option[data-current="true"] { background: var(--gold-soft) }
.wb-target-option[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px }
.wb-target-option-thumb { display: block; width: 44px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--well) }
.wb-target-option-text { min-width: 0; display: grid; gap: 1px }
.wb-target-option-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body-2); font-weight: 500; color: var(--ink) }
.wb-target-option-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-meta)/1.4 var(--sans); color: var(--ink-3) }
.wb-target-count { margin: 0 4px; color: var(--ink-3); font-size: var(--t-meta) }
.wb-target-count:empty { display: none }
.wb-form-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px }
.wb-form-actions button { min-height: 32px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); cursor: pointer; font-size: var(--t-body-2) }
.wb-form-actions button:hover { border-color: var(--ink-3) }
.wb-howto { margin: 14px 2px 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); text-align: left }
.wb-howto strong { display: block; margin-bottom: 8px; font-size: var(--t-body-2); font-weight: 500 }
.wb-howto ol { margin: 0; padding-left: 19px; display: grid; gap: 7px }
.wb-howto li { font-size: var(--t-body-2); line-height: 1.45; color: var(--ink-3) }
.wb-howto li b { color: var(--ink-2); font-weight: 500 }
.wb-request-groups { padding: 0 12px 18px }
.wb-request-group + .wb-request-group { margin-top: 16px }
.wb-group-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 6px }
.wb-group-head h2 { margin: 0; font: 600 var(--t-meta)/1.5 var(--sans); color: var(--ink-2); letter-spacing: normal; text-transform: none }
.wb-group-head span { color: var(--ink-3); font: var(--t-micro)/1 var(--sans) }
.wb-request-row {
  width: 100%; display: grid; gap: 6px; text-align: left; margin-bottom: 7px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); cursor: pointer;
}
.wb-request-row:hover { border-color: var(--ink-3) }
.wb-request-top { display: flex; align-items: center; gap: 8px; min-width: 0 }
.wb-request-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-body-2); font-weight: 500 }
.wb-lock, .wb-urgency { flex: none; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-3); font-size: var(--t-micro) }
.wb-request-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
.wb-request-time { margin-left: auto; color: var(--ink-3); font: var(--t-micro)/1.3 var(--sans) }
.wb-status {
  padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: var(--t-meta); font-weight: 500; white-space: nowrap;
}
.wb-status[data-tone="running"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 6%, transparent) }
.wb-status[data-tone="attention"] { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); background: color-mix(in srgb, var(--crit) 6%, transparent) }
.wb-status[data-tone="done"] { color: var(--new); border-color: color-mix(in srgb, var(--new) 40%, var(--line)); background: color-mix(in srgb, var(--new) 6%, transparent) }
.wb-detail-back { margin: 12px 12px 0; padding: 5px 6px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: var(--t-body-2) }
.wb-detail-back:hover { color: var(--ink) }
.wb-detail-head { padding: 10px 18px 12px; border-bottom: 1px solid var(--line) }
.wb-detail-pills { display: flex; gap: 6px; flex-wrap: wrap }
.wb-detail-head h1 { margin: 9px 0 5px; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.015em }
.wb-detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: var(--t-micro) }

/* A request as a thread in the conversation. */
.wb-thread { display: grid; gap: 8px }
.wb-thread-card {
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel);
  box-shadow: 0 1px 3px rgba(20, 26, 34, .05); overflow: hidden;
}
.wb-thread[data-active="true"] .wb-thread-card { border-color: var(--accent-line) }
.wb-thread-head { display: grid; gap: 7px; width: 100%; padding: 12px 14px 11px; border: 0; background: none; text-align: left; cursor: pointer }
.wb-thread-head:hover { background: var(--panel-2) }
.wb-thread-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
/* A queue note is a sentence: in a narrow pane it wraps inside its pill instead of widening the header. */
.wb-thread-pills .wb-status { white-space: normal; overflow-wrap: anywhere }
.wb-thread-title { display: flex; align-items: baseline; gap: 9px; min-width: 0 }
.wb-thread-title b { min-width: 0; flex: 1; font-size: var(--t-body); font-weight: 500; line-height: 1.35 }
.wb-thread-title span { flex: none; color: var(--ink-3); font: var(--t-micro)/1 var(--sans) }
.wb-mini-steps { display: flex; align-items: center; gap: 5px }
.wb-mini-steps i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2) }
.wb-mini-steps i[data-state="done"] { background: var(--new) }
.wb-mini-steps i[data-state="current"] { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.wb-thread-body { padding: 2px 14px 12px; border-top: 1px solid var(--line) }
.wb-thread-copy { padding: 11px 0 0 }
.wb-thread-copy h3 { margin: 0 0 8px; font: 600 var(--t-meta)/1.5 var(--sans); letter-spacing: normal; text-transform: none; color: var(--ink-2) }
.wb-thread-copy p { margin: 0; max-width: none; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-body-2); line-height: 1.55 }
.wb-thread-body .wb-steps { padding: 13px 0 4px }
.wb-thread-body .wb-callout { margin: 11px 0 0 }
.wb-thread-body .wb-secondary { margin-top: 12px }
.wb-thread-actions { padding: 11px 14px 13px; border-top: 1px solid var(--line); display: grid; gap: 7px; background: var(--panel-2) }
.wb-thread-msgs { display: grid; gap: 12px; margin-left: 14px; padding-left: 13px; border-left: 2px solid var(--line) }

/* Honest activity: derived from record time and the server's stall observation, never asserted. */
.wb-activity {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 40ch;
  font-size: var(--t-micro); color: var(--ink-2);
}
.wb-activity[hidden] { display: none }
.wb-activity span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-activity i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft) }
.wb-activity[data-state="stalled"] i { background: var(--crit); box-shadow: none }
.wb-activity[data-state="stalled"] { color: var(--crit) }

/* What the run is saying right now, in the conversation it is saying it about. Unlike the status
   pill above, this may wrap: it is the work talking, not a badge. */
.wb-live {
  display: flex; gap: 8px; align-items: baseline;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.wb-live::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 1px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}

/* The loop, with "you are here". */
.wb-steps { margin: 0; padding: 15px 18px 4px; list-style: none; display: grid; gap: 2px }
.wb-step { display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 4px 0 }
.wb-step i { width: 9px; height: 9px; margin: 5px 0 0 4px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-2) }
.wb-step b { display: block; font-size: var(--t-meta); font-weight: 500; color: var(--ink-3) }
.wb-step span { display: block; margin-top: 2px; font-size: var(--t-body-2); line-height: 1.45; color: var(--ink-2) }
.wb-step[data-state="done"] i { background: var(--new); border-color: var(--new) }
.wb-step[data-state="done"] b { color: var(--ink-2) }
.wb-step[data-state="current"] i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft) }
.wb-step[data-state="current"] b { color: var(--ink); font-weight: 500 }
.wb-step[data-state="quiet"] i { border-color: var(--line) }

.wb-callout { margin: 12px 18px 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--crit) 35%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--crit) 5%, var(--panel)) }
.wb-callout strong { display: block; font-size: var(--t-body-2); font-weight: 500; color: var(--crit) }
.wb-callout p { margin: 4px 0 0; font-size: var(--t-body-2); color: var(--ink-2) }
.wb-review-state { margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2) }
.wb-review-state strong { display: block; font-size: var(--t-body-2); font-weight: 500 }
.wb-review-state p { margin: 3px 0 0; font-size: var(--t-body-2) }
.wb-review-feedback { display: grid; gap: 7px; margin-top: 2px }
.wb-review-feedback[hidden] { display: none }
.wb-review-feedback textarea { width: 100%; min-height: 76px; padding: 9px 10px; resize: vertical; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink); font: var(--t-body-2)/1.45 var(--sans) }
.wb-request-artifacts { display: grid; gap: 6px; margin-top: 10px }
.wb-request-artifact { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); text-decoration: none }
.wb-request-artifact:hover { border-color: var(--ink-3); text-decoration: none }
.wb-request-artifact strong { flex: none; font-size: var(--t-meta); font-weight: 600 }
.wb-request-artifact span { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: var(--t-meta); text-overflow: ellipsis; white-space: nowrap }
.wb-detail-copy { padding: 14px 18px 2px }
.wb-detail-copy h2 { margin: 0 0 8px; font: 600 var(--t-meta)/1.5 var(--sans); letter-spacing: normal; text-transform: none; color: var(--ink-2) }
.wb-detail-copy p { margin: 0; max-width: none; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-body-2); line-height: 1.6 }
.wb-plan p { padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--ink) }
.wb-detail-actions { padding: 16px 18px 24px; display: grid; gap: 8px }
.wb-action-hint { margin: 0; color: var(--ink-3); font-size: var(--t-body-2); line-height: 1.5 }

/* ---- the work area: your screens ---- */
/* Pinned to the last column: with the conversation pane hidden, auto-placement would slide the
   work area into the pane's slot and strand the 1fr column empty. */
.wb-work { grid-column: 3; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--well) }
.wb-work-tools {
  grid-column: 3 / -1; grid-row: 1;
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: var(--wb-toolbar-h); padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.wb-work-switch, .wb-viewport { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2) }
.wb-work-switch button, .wb-viewport button, .wb-refresh {
  min-height: 26px; padding: 3px 10px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-2); cursor: pointer; font-size: var(--t-meta);
}
.wb-work-switch button:hover, .wb-viewport button:hover, .wb-refresh:hover { color: var(--ink) }
.wb-work-switch button[aria-pressed="true"], .wb-viewport button[aria-pressed="true"] { background: var(--panel); border-color: var(--line-2); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.05) }
.wb-work-switch[hidden] { display: none }
.wb-work-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.wb-work-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); font-weight: 500 }
.wb-work-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--t-meta) }
.wb-tool-grow { flex: 1 }
.wb-viewport[hidden] { display: none }
.wb-refresh { flex: none; border-color: var(--line-2); background: var(--panel) }
.wb-stage-wrap { position: relative; min-width: 0; min-height: 0; flex: 1; background: var(--well) }
.wb-view-menu { display: none }
.wb-view-switch, .wb-fit-controls { display: flex; align-items: center; gap: 2px }
.wb-view-switch { min-width: 0; overflow-x: auto; scrollbar-width: none }
.wb-fit-controls { flex: none; padding-left: 8px; border-left: 1px solid var(--line) }
.wb-context-request {
  flex: none; min-height: 34px; padding: 6px 11px; border: 1px solid var(--accent); border-radius: 7px;
  background: var(--accent); color: var(--panel) !important; cursor: pointer; font: 500 var(--t-meta)/1.3 var(--sans); white-space: nowrap;
}
.wb-context-request:hover { filter: brightness(.94) }
.wb-request-label-short { display: none }
.wb-request-unavailable { max-width: 34ch; color: var(--crit); font-size: var(--t-micro); line-height: 1.3 }
.wb-view-switch button, .wb-fit-controls button { flex: none; min-height: 32px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: var(--t-body-2); white-space: nowrap }
.wb-view-switch button:hover:not(:disabled), .wb-fit-controls button:hover:not(:disabled) { background: var(--panel-2); color: var(--ink) }
.wb-view-switch button[aria-pressed="true"], .wb-fit-controls button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); font-weight: 500 }
.wb-view-switch button:disabled, .wb-view-switch button[aria-disabled="true"], .wb-fit-controls button:disabled { opacity: .4; cursor: not-allowed }
.wb-view-switch [hidden], .wb-fit-controls[hidden] { display: none }
.wb-stage-wrap iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--well) }
.wb-stage-wrap iframe[hidden] { display: none }
.wb-stage-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; color: var(--ink-3) }
.wb-stage-empty[hidden] { display: none }
.wb-stage-empty strong { font-size: var(--t-body); font-weight: 500; color: var(--ink-2) }
.wb-stage-empty p { margin: 0; max-width: 40ch; font-size: var(--t-body-2) }
.wb-open-full {
  flex: none; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--ink-2); font-size: var(--t-body-2); text-decoration: none; background: var(--panel);
}
.wb-open-full:hover { color: var(--ink); border-color: var(--ink-3); text-decoration: none }

@media (max-width: 1280px) {
  .wb-sidebar { width: 380px }
}
@media (max-width: 1020px) {
  .wb-sidebar { width: 330px }
}
@media (max-width: 720px) {
  .wb-page { overflow: auto }
  .workbench { height: auto; min-height: 100dvh; grid-template-rows: 50px minmax(0, 1fr) }
  .wb-head-meta { gap: 9px }
  .wb-body { grid-template-columns: auto auto minmax(0, 1fr) }
  .wb-shellnav, .workbench:is([data-nav="rail"], [data-flyout="open"]) .wb-shellnav { width: 52px; padding-left: 5px; padding-right: 5px; align-items: center }
  .wb-shellnav .wb-nav-btn span, .wb-shellnav .wb-nav-new, .wb-shellnav .wb-nav-mail { display: none }
  .wb-shellnav .wb-nav-btn { width: 42px; justify-content: center; padding: 10px 0 }
  .wb-sidebar { width: min(86vw, 340px) }
  .wb-flyout { width: min(80vw, 312px); left: 52px }
  .wb-scrim { left: 52px }
  .wb-sidebar { border-right: 0; border-bottom: 1px solid var(--line) }
  .wb-work-tools { gap: 8px; overflow-x: auto }
  .wb-screens { padding: 12px 12px 30px }
}
/* Everything, not a list of known offenders: a list is stale the day after it is written. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important }
}

/* ---- the front door, in the same shell ---- */
.hm { grid-template-rows: minmax(0, 1fr) }
/* Rows too, not only columns: the base shell reserves a toolbar row, and with no toolbar here
   the whole page would sit inside that auto row while the 1fr row below stays empty. */
.hm .wb-body { grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) }
.hm .wb-shellnav { overflow-y: auto }
.hm-h { margin: 6px 10px 4px; font-size: var(--t-micro); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ink-3) }
.hm-item { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; text-decoration: none; color: inherit }
.hm-item:hover { background: var(--panel-2); text-decoration: none }
.hm-item[aria-current="true"] { background: var(--panel-2) }
.hm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold) }
.hm-text { min-width: 0; display: grid; gap: 1px }
.hm-text b { font-size: var(--t-body-2); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hm-text span { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hm-empty { margin: 4px 10px; color: var(--ink-3); font-size: var(--t-body-2) }
/* The two pages that are not a project - the guide and the release notes - read as navigation,
   not as a version stamp: same type as the project rows, a shade quieter. */
.hm-version { display: block; padding: 7px 11px; border-radius: 8px; color: var(--ink-2); font-size: var(--t-body-2); text-decoration: none }
.hm-version:hover { background: var(--panel-2); color: var(--ink); text-decoration: none }
.hm-version[aria-current="page"] { color: var(--ink); font-weight: 500 }
.hm-version + .hm-version { margin-bottom: 6px }
.hm-main { grid-column: 2; min-width: 0; overflow-y: auto; padding: 44px 48px 60px; background: var(--well) }
.hm-hero { max-width: 60ch; margin-bottom: 30px }
.hm-hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25 }
.hm-hero p { margin: 0; color: var(--ink-2); font-size: var(--t-body); line-height: 1.6 }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; max-width: 1100px }
.hm-card {
  display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(20,26,34,.04);
}
.hm-card:hover { border-color: var(--ink-3); text-decoration: none }
/* The current project's desk: its requests and drafts, each row a door into the workbench
   opened on exactly that thing. Reuses the flyout's row grammar - same rows, same dots. */
.hm-work {
  padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); box-shadow: 0 1px 2px rgba(20,26,34,.04);
}
.hm-work-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px }
.hm-work-head > div { min-width: 0 }
.hm-work-head h2 { margin: 0; font-size: 18px; letter-spacing: -.012em }
.hm-work-head p { margin: 2px 0 0; font-size: var(--t-body-2); color: var(--ink-2) }
.hm-work-head .hm-card-meta { margin-left: auto }
.hm-work-name { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none }
.hm-work-name:hover { text-decoration: none }
.hm-go { position: relative; width: 14px; height: 14px; color: var(--ink-3) }
.hm-go::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; rotate: 45deg;
  border-radius: 1px;
}
.hm-work-name:hover .hm-go { color: var(--ink) }
.hm-open-canvas, .hm-project-settings {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px;
  border: 1px solid var(--line-2); border-radius: 7px; font-size: var(--t-body-2); font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.hm-open-canvas { background: var(--accent); border-color: var(--accent); color: var(--panel) }
:root[data-theme="dark"] .hm-open-canvas { color: var(--well) }
.hm-open-canvas:hover, .hm-project-settings:hover { text-decoration: none }
.hm-project-settings:hover { border-color: var(--ink-3) }
.hm-request-groups { display: grid; gap: 24px }
.hm-request-group { min-width: 0 }
.hm-request-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px }
.hm-request-group-head h3 { margin: 0; font-size: var(--t-body); font-weight: 600 }
.hm-request-group-head p { margin: 0; color: var(--ink-3); font-size: var(--t-meta) }
.hm-request-group ol { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none }
.hm-request-row {
  display: grid; grid-template-columns: minmax(124px, .8fr) minmax(220px, 2.3fr) 104px minmax(104px, .7fr);
  align-items: center; gap: 14px; min-height: 76px; padding: 9px 2px;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.hm-request-row:hover { background: var(--panel-2); text-decoration: none }
.hm-request-state { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); font-size: var(--t-meta) }
.hm-request-state i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2) }
.hm-request-state[data-tone="attention"] i { background: var(--gold) }
.hm-request-state[data-tone="running"] i { background: var(--new) }
.hm-request-state[data-tone="done"] i { background: var(--ink-3) }
.hm-request-copy { display: grid; min-width: 0; gap: 3px }
.hm-request-copy strong { font-size: var(--t-body); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere }
.hm-request-context { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.45; overflow-wrap: anywhere }
.hm-request-context b { color: var(--ink-2); font-weight: 500 }
.hm-request-preview {
  display: grid; place-items: center; width: 104px; aspect-ratio: 16 / 9; overflow: clip;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2);
}
.hm-request-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top }
.hm-request-preview > span { padding: 5px; color: var(--ink-3); font-size: var(--t-meta); line-height: 1.25; text-align: center }
.hm-request-action { display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--ink); font-size: var(--t-body-2); font-weight: 500; text-align: right }
.hm-work-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--panel-2) }
.hm-work-empty strong { display: block; font-size: var(--t-body); font-weight: 500 }
.hm-work-empty p { margin: 4px 0 10px; font-size: var(--t-body-2) }
.hm-work-empty a { display: inline-flex; min-height: 36px; align-items: center; font-weight: 500 }
.hm-work > .hm-flows { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line) }
.hm-work-history { display: flex; align-items: center; gap: 16px; padding-top: 14px; color: var(--ink-2); font-size: var(--t-body-2) }
.hm-work-history span { color: var(--ink-3) }
.hm-work-history a { display: inline-flex; align-items: center; min-height: 36px }
@media (max-width: 980px) {
  .hm-work-head { align-items: flex-start; flex-wrap: wrap }
  .hm-work-head .hm-card-meta { display: none }
  .hm-open-canvas { margin-left: auto }
  .hm-request-row { grid-template-columns: 118px minmax(0, 1fr) 96px; }
  .hm-request-action { grid-column: 2 / -1; justify-content: flex-start; text-align: left }
}
@media (max-width: 560px) {
  .hm-work { padding: 16px 14px }
  .hm-work-head > div { flex-basis: 100% }
  .hm-open-canvas { margin-left: 0 }
  .hm-request-group-head { display: block }
  .hm-request-group-head p { margin-top: 2px }
  .hm-request-row { grid-template-columns: minmax(0, 1fr) 78px; gap: 7px 10px; padding: 12px 0 }
  .hm-request-state { grid-column: 1 }
  .hm-request-copy { grid-column: 1 }
  .hm-request-preview { grid-column: 2; grid-row: 1 / span 2; width: 78px }
  .hm-request-action { grid-column: 1 / -1; justify-content: flex-start }
  .hm-work-history { flex-wrap: wrap; gap: 4px 16px }
}
.hm-others-h { margin: 30px 0 10px }

/* ---- full-record pages: every chat, every draft, one project ---- */
.hm-page-head { max-width: 820px; margin-bottom: 16px }
.hm-page-top { display: flex; align-items: center; gap: 12px }
/* shadcn's page header: font-semibold tracking-tight title, muted text-sm description. */
.hm-page-top h1 { margin: 0; flex: 1; min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hm-open-wb { text-decoration: none; display: inline-flex; align-items: center }
.hm-open-wb:hover { text-decoration: none }
.hm-page-sub { margin: 6px 0 0; color: var(--ink-3); font-size: var(--t-body-2); line-height: 1.55 }
.hm-page-sub a { color: var(--ink-2) }
/* The record shell: the workbench's own rail beside one reading column. The rail items are
   links here rather than flyout buttons, but they mean the same three sections everywhere. */
.rec { grid-template-rows: minmax(0, 1fr) }
/* Nothing competes for the left edge on a record page, so the rail stays open: labels always
   readable, no hover dance, and the content column starts past the wide rail. */
.rec .wb-body { --rail-w: 148px; grid-template-columns: var(--rail-w, 48px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) }
.rec .wb-rail { width: 148px; transition: none }
.rec .wb-rail .wb-rail-btn > span,
.rec .wb-rail .wb-rail-logo span { opacity: 1; transition: none }
/* On a phone the open rail would take half the screen, so it is the workbench's 48px icon rail
   there: labels stay the links' names and show on hover or focus, as in the workbench. */
@media (max-width: 760px) {
  .rec .wb-body { --rail-w: 48px }
  .rec .wb-rail { width: 48px }
  .rec .wb-rail .wb-rail-btn > span,
  .rec .wb-rail .wb-rail-logo span { opacity: 0 }
}
.rec-main { grid-column: 2; min-width: 0; overflow-y: auto; padding: 32px 40px 60px; background: var(--well) }
a.wb-rail-btn { text-decoration: none }
a.wb-rail-btn:hover { text-decoration: none }
.wb-rail-btn[aria-current="page"] { color: var(--ink); background: var(--panel-2); outline: 1px solid var(--line-2) }
.hm-list-page { max-width: 820px }
.hm-list-page .hm-how-h { margin: 18px 0 8px }
.hm-list { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden }
.hm-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); text-decoration: none; color: inherit }
.hm-row:first-child { border-top: 0 }
.hm-row:hover { background: var(--panel-2); text-decoration: none }
/* The whole row opens the draft through one stretched link, so a PR chip can be a real link
   of its own beside it - nesting anchors is not a thing HTML allows. */
.hm-row-open { color: inherit; text-decoration: none }
.hm-row-open:hover { text-decoration: none }
.hm-row-open::after { content: ""; position: absolute; inset: 0 }
.hm-chip {
  position: relative; z-index: 1; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font: 500 var(--t-meta)/1 var(--mono); text-decoration: none; vertical-align: 2px;
}
.hm-chip-pr { background: var(--accent-soft); color: var(--ink) }
a.hm-chip-pr:hover { text-decoration: underline }
.hm-chip-chat { background: var(--panel-2); color: var(--ink-2) }
.hm-chip-main { background: var(--gold-soft); color: var(--ink-2) }
.hm-merged { background: var(--panel-2); color: var(--ink-3) }
.hm-row-base { font-weight: 500; color: var(--ink-2) }
/* Search and filters, carried by the URL like every switch on the site. */
.hm-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px }
.hm-filter-form { flex: none; display: inline-flex; align-items: center; gap: 6px }
.hm-filter-form input[type="search"] {
  width: 260px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: var(--t-meta);
}
.hm-filter-form input[type="search"]:focus { outline: none; border-color: var(--accent-line) }
/* The author filter, GitHub's way: a summary pill opening a menu of links. */
.hm-menu { position: relative }
.hm-menu summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none }
.hm-menu summary::-webkit-details-marker { display: none }
.hm-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4.5px solid currentColor; opacity: .7 }
.hm-menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; max-height: 320px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(20, 26, 34, .25), 0 2px 8px rgba(20, 26, 34, .06);
}
.hm-menu-list a {
  padding: 6px 9px; border-radius: 7px; font-size: var(--t-meta); color: var(--ink-2);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-menu-list a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none }
.hm-menu-list a[aria-current="true"] { color: var(--ink); font-weight: 500 }
.hm-filter-group { display: inline-flex; gap: 4px; align-items: center }
.hm-fbtn {
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-2); font-size: var(--t-meta); font-weight: 500; text-decoration: none;
}
.hm-fbtn:hover { color: var(--ink); text-decoration: none }
.hm-fbtn[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); border-color: var(--line-2) }
.hm-row > .wb-fly-dot { margin-top: 0 }
.hm-row-thumb { flex: none; width: 76px; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--panel-2); overflow: hidden }
.hm-row-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.hm-row-main { min-width: 0; flex: 1; display: grid; gap: 2px }
.hm-row-main b { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hm-latest { margin-left: 8px; font: 500 var(--t-meta)/1 var(--sans); font-style: normal; color: var(--ink-2); background: var(--gold-soft); border-radius: 999px; padding: 2px 7px; vertical-align: 2px }
.hm-row-meta { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hm-row-meta[data-tone="attention"] { color: var(--crit) }
.hm-row-snippet { font-size: var(--t-micro); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hm-row-when { flex: none; color: var(--ink-3); font: var(--t-micro)/1 var(--sans) }
.hm-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 9px; background: var(--panel-2); margin-bottom: 9px }
.hm-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.hm-card-name { font-size: var(--t-body); font-weight: 500 }
.hm-card-meta { color: var(--ink-3); font-size: var(--t-micro) }
.hm-more { max-width: 68ch; margin-top: 36px; color: var(--ink-2) }
.hm-more summary { cursor: pointer; font-size: var(--t-body-2); color: var(--ink-3) }
.hm-more pre { margin-top: 10px }

/* ---- onboarding: the loop, told in the workbench's own five words ---- */
.hm-how { margin-top: 44px }
.hm-how-h { margin: 0 0 12px; font-size: var(--t-micro); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ink-3) }
.hm-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: hmstep;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.hm-steps li {
  counter-increment: hmstep; display: grid; gap: 4px; align-content: start;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.hm-steps li::before {
  content: counter(hmstep); width: 20px; height: 20px; margin-bottom: 2px; border-radius: 50%;
  background: var(--panel-2); color: var(--ink-2); font: 500 var(--t-meta)/20px var(--sans); text-align: center;
}
.hm-steps b { font-size: var(--t-body-2); font-weight: 500; color: var(--ink) }
.hm-steps span { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.5 }
.hm-how .hm-more { margin-top: 18px }

/* ---- what changed, week by week ---- */
/* The door to the notes, in the corner the version used to sit in. A commit hash is not something
   anyone was going to click, so the chip says what is behind it instead and keeps the build on its
   tooltip. Not the mono the version wore - it is a sentence now, not an identifier - and not a blue
   underlined link either, which would shout louder than the projects above it. */
a.hm-version { font: var(--t-micro)/1 var(--sans); text-decoration: none; color: var(--ink-3) }
a.hm-version:hover { color: var(--ink-2); text-decoration: none }
/* The exit belongs to the address above it, not to the product link below it. Same foot of the
   same nav, so it borrows that link's restraint - but a grey micro line that reads the same as
   "What's new" is a coin toss, and one of the two ends your session. */
a.hm-version.signout { padding-top: 2px; font: var(--t-body-2)/1.4 var(--sans); color: var(--ink-2) }
a.hm-version.signout:hover { color: var(--ink) }

.rel-list { display: grid; gap: 10px; max-width: 900px }
/* Date on the left, prose on the right: a reader scanning for "what did I miss since Friday"
   scans one narrow column, not the first words of every paragraph. It stacks under 720px, where
   two columns would leave the prose about twelve characters wide. */
.rel {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 20px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.rel-when { display: grid; gap: 4px; align-content: start; justify-items: start }
.rel-date { font-size: var(--t-body-2); font-weight: 500; color: var(--ink) }
.rel-tag { font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); text-decoration: none; word-break: break-all }
.rel-tag:hover { color: var(--ink-2); text-decoration: none }
.rel-what { min-width: 0 }
.rel-lead { margin: 0 0 10px; max-width: 68ch; color: var(--ink-2); font-size: var(--t-body); line-height: 1.65 }
.rel-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.rel-items li {
  position: relative; padding-left: 14px; max-width: 68ch;
  color: var(--ink-2); font-size: var(--t-body-2); line-height: 1.6;
}
/* The marker is drawn rather than a list bullet, so it sits on the first line's baseline whatever
   the item wraps to - a `list-style` disc centres itself against the whole block. */
.rel-items li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px;
  border-radius: 50%; background: var(--line-2);
}
.rel-items b { color: var(--ink); font-weight: 500 }
.rel-items code, .rel-lead code { font: var(--t-meta)/1 var(--mono); color: var(--ink-2) }
.rel-items a, .rel-lead a { color: var(--ink-2); text-underline-offset: 2px }
.rel-items a:hover, .rel-lead a:hover { color: var(--ink) }

/* Get started — a page you read, not a panel you operate.
   Shared reading prose and headings, with reference tables folded into <details>
   so the path stays short. The three doors
   are one ruled band, not three cards: hairlines divide, nothing floats. */
.gs { max-width: 1040px; padding: 44px 52px 64px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  font-size: var(--t-prose); line-height: var(--leading-prose); color: var(--ink) }
.gs a { color: var(--new); text-decoration: none; text-underline-offset: 3px }
.gs a:hover { text-decoration: underline }
.gs-head { max-width: 64ch }
.gs-head h1 { margin: 0 0 12px; font-size: var(--t-article); font-weight: 600; letter-spacing: -.022em; line-height: 1.15 }
.gs-lede { margin: 0; font-size: var(--t-prose); line-height: var(--leading-prose); color: var(--ink-2) }

.gs-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 8px;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2) }
.gs-doors a { display: grid; gap: 6px; align-content: start; padding: 20px 22px 22px 0; color: inherit; text-decoration: none }
.gs-doors a + a { padding-left: 22px; border-left: 1px solid var(--line) }
.gs-doors-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.gs-doors-5 a { padding-right: 16px }
.gs-doors-5 a + a { padding-left: 16px }
.gs-doors b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3 }
.gs-doors span { font-size: 14px; line-height: 1.5; color: var(--ink-2) }
.gs-doors a:hover { text-decoration: none }
.gs-doors a:hover b { color: var(--new) }
.gs-doors a:focus-visible { outline: 2px solid var(--new); outline-offset: -2px; border-radius: 6px }

.gs-pointer { margin: 14px 0 0; font-size: 14px; color: var(--ink-2) }
.gs-cols { display: grid; grid-template-columns: minmax(0, 72ch) 1fr; gap: 0 40px; align-items: start }
.gs-main { min-width: 0 }
.gs-sec { padding-top: 28px }
/* Chapters use the shared public heading role; sidebar labels stay compact. */
.gs-sec h2 { margin: 0 0 12px; font: 600 var(--t-section)/1.3 var(--sans); letter-spacing: -.015em; text-transform: none; color: var(--ink); scroll-margin-top: 24px }
.gs-sec > p { margin: 0 0 14px; color: var(--ink); font-size: var(--t-prose); max-width: none }
.gs-lede { max-width: none }
.gs-aside { color: var(--ink-2); font-size: 14px; margin-top: 14px }
.gs-who { color: var(--ink-2); font-size: 14px; padding-left: 12px; border-left: 2px solid var(--line-2) }
.gs-h3 { margin: 28px 0 0; font-size: var(--t-title); font-weight: 600 }
.gs-sec code, .gs-terms code { font: var(--t-code)/1.5 var(--mono); background: var(--panel-2); padding: 1px 5px; border-radius: 4px }

.gs-terms { margin: 18px 0 0; display: grid; gap: 10px }
.gs-terms div { display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); gap: 0 16px; align-items: baseline }
.gs-terms-wide div { grid-template-columns: 1fr; gap: 2px }
.gs-terms-wide dt { font-weight: 500 }
.gs-terms dt { font-weight: 600 }
.gs-terms dd { margin: 0; color: var(--ink-2); font-size: var(--t-prose) }

.gs-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 20px }
/* `min-width: 0`, because the list is a grid and a grid item's default minimum is its min-content
   width: one long command in a <pre> made the whole step wider than its column and pushed the
   code block under the contents rail. Now the block stays in its column and scrolls inside. */
.gs-steps li { position: relative; padding-left: 40px; counter-increment: step; min-width: 0 }
.gs-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
  border: 1px solid var(--line-2); border-radius: 50%; font: 600 13px/24px var(--sans); text-align: center; color: var(--ink) }
.gs-steps h3 { margin: 0 0 4px; font-size: var(--t-title); font-weight: 600; line-height: 1.4 }
.gs-steps p { margin: 0 0 10px; color: var(--ink-2); font-size: var(--t-prose); max-width: none }
.gs-steps p b, .gs-sec > p b { color: var(--ink); font-weight: 600 }

.gs-demo { display: flex; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2) }
.gs-demo p { margin: 0; max-width: 34ch }
.gs-demo strong, .gs-demo span { display: block }
.gs-demo span { margin-top: 3px; color: var(--ink-2); font-size: 14px }
.gs-demo nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 18px; font-size: 14px }
.gs-demo a { display: inline-flex; align-items: center; min-height: 44px }

.gs-code { margin: 10px 0 0; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--well); overflow: hidden }
.gs-code + .gs-code { margin-top: 8px }
.gs-code figcaption { padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-meta); color: var(--ink-3); background: var(--panel) }
.gs-onboarding .gs-code figcaption { display: flex; align-items: center; gap: 12px; min-height: 44px }
.gs-onboarding .docs-code-toolbar { margin-left: auto; padding: 0; border: 0; flex: none }
.gs-onboarding .docs-code-toolbar button { padding: 0 }
.gs-onboarding .gs-code pre code { padding: 0; border: 0; background: none; font: inherit }
/* Wrap rather than scroll: these are one-line commands and URLs, and a scrollbar under a single
   line hides its tail exactly where the interesting flag is. */
.gs-code pre { margin: 0; border: 0; border-radius: 0; background: none; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--t-code)/var(--leading-prose) var(--mono); color: var(--ink) }
.gs-code pre code { font-size: inherit }

.gs-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px }
.gs-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5 }
.gs-table th, .gs-table td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top }
.gs-table thead th { border-top: 0; background: var(--panel-2); color: var(--ink-2); font-weight: 600; font-size: 13px; white-space: nowrap }
.gs-table tbody th { color: var(--ink); font-weight: 600; line-height: 1.6 }
.gs-table td { color: var(--ink-2) }
/* Routes and commands wrap rather than force the table wider than the page: a table you have to
   scroll sideways to read the second column of is a table nobody reads. */
.gs-table code { white-space: normal; overflow-wrap: break-word; background: none; padding: 0; font-size: 13px }
.gs-table tbody th { min-width: 16ch }
#api .gs-table { font-size: 13px }
#api .gs-table th, #api .gs-table td { padding: 8px 10px }

.gs-ref { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px }
.gs-ref summary { padding: 12px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px }
.gs-ref summary::-webkit-details-marker { display: none }
.gs-ref summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(-45deg); transition: transform .15s; margin-right: 4px }
.gs-ref[open] summary::before { transform: rotate(45deg) }
.gs-ref summary span { color: var(--ink-3); font-weight: 500; font-size: 13px }
.gs-ref > p { margin: 0 0 12px; color: var(--ink-2); font-size: 14px }
.gs-ref .gs-table-wrap { margin: 0 0 16px }
.gs-ref .gs-code { margin-bottom: 12px }

.gs-toc { position: sticky; top: 24px; padding-top: 48px; font-size: 13.5px; line-height: 1.6 }
.gs-toc p { margin: 0 0 8px; color: var(--ink-3); font-size: var(--t-meta) }
.gs-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line) }
.gs-toc li a { display: block; padding: 3px 0 3px 14px; margin-left: -1px; color: var(--ink-2); border-left: 1px solid transparent }
.gs-toc li a:hover { color: var(--ink); text-decoration: none; border-left-color: var(--ink) }

@media (max-width: 1180px) {
  .gs-cols { grid-template-columns: minmax(0, 1fr) }
  .gs-toc { display: none }
}
@media (max-width: 760px) {
  .gs { padding: 28px 22px 44px; border-radius: 10px }
  .gs-head h1 { font-size: 26px }
  .gs-doors, .gs-doors-5 { grid-template-columns: 1fr }
  .gs-doors a { padding: 16px 0 }
  .gs-doors a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line) }
  .gs-terms div { grid-template-columns: 1fr; gap: 2px }
  .gs-demo { display: block }
  .gs-demo p { max-width: none }
  .gs-demo nav { justify-content: flex-start; margin-top: 10px }
}
@media (prefers-reduced-motion: reduce) {
  .gs-ref summary::before { transition: none }
}
@media (max-width: 720px) {
  .rel { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .rel-when { display: flex; align-items: baseline; gap: 10px }
}

/* ---- the walls: sign-in, consent, and a route saying no ----
 *
 * The document scrolls, not the card. `.wb-page` clips the body because the workbench manages its
 * own scroll regions; a wall has one card and nothing to manage, and clipping it meant a short
 * window cut the button off with no way to reach it. `min-height` rather than `height` for the same
 * reason: the card is centred in at least one viewport, and pushes the page taller when it needs to.
 * `100%` rather than `92vw` for the width: the gate's own padding already keeps it off the edges,
 * and a card wider than its track sat off-centre on a phone. */
.gate-page { background: var(--well); min-height: 100dvh }
.gate-page button, .gate-page input, .gate-page textarea { font: inherit }
.gate-page button { color: inherit }
.wb-gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px }
.wb-gate-card {
  width: min(400px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 30px 30px 28px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: var(--shadow);
}
.wb-gate-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; color: var(--ink) }
.wb-gate-brand .ms-mark { width: 16px; height: 16px }
.wb-gate-card h1 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance }
.wb-gate-card p { margin: 0; color: var(--ink-2); font-size: var(--t-body-2); line-height: 1.6; overflow-wrap: anywhere }
.wb-gate-card code { font: var(--t-meta)/1.5 var(--mono); color: var(--ink) }
.wb-gate-card form { display: contents }
.wb-gate-card textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; resize: none; text-align: left;
  border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); color: var(--ink);
  font: var(--t-meta)/1.5 var(--mono); overflow-wrap: anywhere;
}
.wb-gate-err { color: var(--crit) !important }
.wb-gate-btn { margin-top: 8px; display: inline-flex; align-items: center; text-decoration: none }
.wb-gate-btn:hover { text-decoration: none }
/* The refusal page: the code sits above the headline in the compact label role, the server's own
   words below it in the secondary one, and the request id last - it is for the log search, not
   for reading. */
.wb-gate-status { font: var(--t-label)/1 var(--sans); letter-spacing:normal; color: var(--ink-3) !important }
.wb-gate-card.is-error .wb-gate-status { color: var(--crit) !important }
.wb-gate-detail { color: var(--ink-3) !important; font-size: var(--t-meta) !important }
.wb-gate-meta { margin-top: 6px !important; font: var(--t-micro)/1.4 var(--mono) !important; color: var(--ink-3) !important }

/* The build's page list, inline under Design. Hidden with the labels when the nav is a rail. */
.wb-pages { min-height: 0; flex: 1; overflow-y: auto; padding-left: 8px; display: flex; flex-direction: column; gap: 1px }
.wb-pages[hidden] { display: none }
.wb-flow-list { flex: none; min-width: 0 }
.wb-pages-h { flex: none; margin: 12px 8px 4px; font: 600 var(--t-body-2)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* A rule above every section but the first, edge to edge.
 *
 * The panel stacks three lists - what changed, the journeys, and the pages in each - and headings
 * alone left them reading as one long list with bold rows scattered through it. Full width and not
 * inset, the way a layers panel rules its sections: a line that stops short of the edges reads as
 * decoration attached to the text, while one that crosses the panel reads as "a new list starts
 * here", which is the whole job.
 *
 * The negative left margin is what reaches the edge - it cancels `.wb-pages`' own padding - and the
 * padding puts the text back where the rows' text is, so the heading still lines up with what it
 * heads. The first section needs none: the navigator's title above it is already ruled.
 *
 * The flow sub-labels inside What changed are deliberately not ruled - they divide rows within one
 * section, not sections. */
.wb-pages-h:not(:first-child) {
  margin: 15px 0 4px -8px; padding: 12px 8px 0 16px; border-top: 1px solid var(--line);
}
.wb-page-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; text-align: left;
  /* The selected background runs to the panel's right edge - the original selection design:
     a row is a shelf attached to the divider, not a floating pill. */
  padding: 4px 14px 4px 8px; border: 0; border-radius: 6px 0 0 6px; background: none; color: var(--ink-2); cursor: pointer;
}
.wb-page-row:hover { background: var(--panel-2); color: var(--ink) }
.wb-page-row[aria-current="true"] { background: var(--panel-2); color: var(--ink) }
.wb-page-name { min-width: 0; flex: 1; font-size: var(--t-body-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* A journey's name sits at the same weight as a page's. It was heavier to mark it as the bigger
   thing, but the two lists are separated by a rule and a heading now - so the weight was saying
   something already said, and saying it in the one place a panel can least afford emphasis. */
.wb-flow-row .wb-page-name { font-weight: inherit; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip }
/* A state, inside the page it belongs to: indented to the page's text, and dimmer, because the
   page is the thing being named and the state is which of it you are looking at. */
.wb-state-row { padding-left: 24px }
.wb-state-row .wb-page-name { color: var(--ink-3); font-size: var(--t-body-2) }
.wb-state-row:hover .wb-page-name, .wb-state-row[aria-current="true"] .wb-page-name { color: var(--ink-2) }
/* The twist beside a page's state count: closed points right, open points down. Drawn rather than
   typed so it inherits the count's colour and cannot pick up a font's own metrics. */
.wb-page-twist {
  width: 0; height: 0; margin-left: 5px; display: inline-block; vertical-align: 1px;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  border-left: 4px solid currentColor; opacity: .75;
}
.wb-page-twist.open {
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; border-bottom: 0; vertical-align: 2px;
}
.wb-page-n { flex: none; color: var(--ink-3); font: var(--t-meta)/1 var(--sans) }
/* The changeset's rows. Same row design as a page row, because they answer the same question -
   which page am I looking at - with the state named beside it and what moved on the right, where
   a page row already puts its count. */
/* Subordinate to a section heading, not another one: inside What changed the journey's name is
   only there to tell two identical screen names apart, and at the same weight as "What changed"
   it read as a third section. */
.wb-pages-sub { margin: 7px 8px 2px 8px; font-size: var(--t-meta); font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wb-page-state { margin-left: 6px; font-style: normal; color: var(--ink-3) }
.wb-page-row[aria-current="true"] .wb-page-state { color: var(--ink-2) }
.wb-changed-row .wb-page-n { color: var(--warn) }

/* ---- the right panel: comments first, presence as an avatar stack ---- */
.wb-side {
  grid-column: 4; grid-row: 2; width: 300px; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
}
.wb-side[hidden] { display: none }
.wb-side-head { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line) }
.wb-side-head h2 { margin: 0; flex: 1; font: 600 var(--t-meta)/1.5 var(--sans); letter-spacing: normal; display: flex; gap: 6px; align-items: baseline }
.wb-side-head h2 span { color: var(--ink-3); font: var(--t-micro)/1.5 var(--sans) }
.wb-viewer-stack { display: flex; align-items: center }
.wb-viewer-stack .wb-rail-av { width: 24px; height: 24px; font-size: var(--t-meta); margin-left: -7px; box-shadow: 0 0 0 2px var(--panel) }
.wb-viewer-stack .wb-rail-av:first-child { margin-left: 0 }
.wb-viewer-more { margin-left: 4px; color: var(--ink-3); font: var(--t-meta)/1 var(--sans) }
.wb-side-close { flex: none; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--ink-3); font-size: 16px; cursor: pointer }
.wb-side-close:hover { background: var(--panel-2); color: var(--ink) }
.wb-side-empty { margin: 0; color: var(--ink-3); font-size: var(--t-body-2); line-height: 1.5; max-width: 34ch }
.wb-comment-list { min-height: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px }
/* A row is the pin's note, and pressing it takes the stage to the pin - so the whole row is a
   button, drawn as the quiet list item it was. */
.wb-comment {
  display: flex; gap: 10px; min-width: 0; text-align: left;
  border: 0; background: transparent; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer;
}
.wb-comment:hover { background: var(--panel-2) }
.wb-comment[data-resolved="true"] .wb-comment-body { text-decoration: line-through; color: var(--ink-3) }
.wb-comment-done { flex: none; color: var(--ink-3); font: var(--t-meta)/1 var(--sans) }
.wb-comment > .wb-rail-av { flex: none; width: 24px; height: 24px; font-size: var(--t-meta); margin-top: 1px }
.wb-comment-main { min-width: 0; flex: 1 }
.wb-comment-head { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.wb-comment-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); font-weight: 500; color: var(--ink) }
.wb-comment-head time { flex: none; color: var(--ink-3); font: var(--t-meta)/1 var(--sans) }
.wb-comment-body { margin: 3px 0 0; font-size: var(--t-meta); line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere }
/* Reopen lives in the toolbar: the same speech mark as the rail, with the count. */
.wb-side-toggle {
  position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel); color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
}
.wb-side-toggle:hover { color: var(--ink); border-color: var(--ink-3) }
.wb-side-toggle[aria-pressed="true"] { background: var(--panel-2); color: var(--ink) }
.wb-side-toggle b {
  position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--new); color: #fff; font: 600 var(--t-meta)/14px var(--sans); text-align: center;
}
.wb-side-toggle b[hidden] { display: none }
@media (max-width: 1180px) {
  .wb-side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 15; border-left: 1px solid var(--line-2); box-shadow: -8px 0 24px -16px rgba(20,26,34,.3) }
  .wb-side-close { width: 44px; height: 44px }
}

/* ---- linking a page, state or component into chat or a request ---- */
.wb-refpicker {
  position: absolute; left: var(--rail-w, 48px); bottom: 12px; width: 300px; max-height: 60%; z-index: 23;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0 14px 14px 0;
  box-shadow: 0 12px 36px -8px rgba(20, 26, 34, .18), 0 2px 8px rgba(20, 26, 34, .06);
}
.wb-refpicker[hidden] { display: none }
.wb-refpicker input {
  width: 100%; height: 30px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2);
  color: var(--ink); padding: 0 10px; font-size: var(--t-meta);
}
.wb-refpicker input:focus { border-color: var(--accent-line); outline: none; background: var(--panel) }
.wb-ref-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px }
.wb-ref-chip {
  display: flex; align-items: center; gap: 6px; margin: 0 16px 5px; padding: 2.5px 8px; max-width: fit-content;
  border: 1px solid color-mix(in srgb, var(--new) 35%, var(--line)); border-radius: 999px;
  background: color-mix(in srgb, var(--new) 6%, var(--panel)); font-size: var(--t-meta); color: var(--ink-2);
}
.wb-ref-chip[hidden] { display: none }
.wb-ref-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--new); flex: none }
.wb-ref-chip b { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wb-ref-chip button { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px; padding: 0 1px }
.wb-ref-chip button:hover { color: var(--ink) }
button.wb-msg-ref {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px; padding: 1.5px 7px; max-width: 100%;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px;
  background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; font-size: var(--t-meta); cursor: pointer;
}
button.wb-msg-ref:disabled { cursor: default }
button.wb-msg-ref i { width: 5px; height: 5px; border-radius: 50%; background: var(--new); flex: none }
button.wb-msg-ref span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500 }

/* Share: the one primary action in the toolbar, the way design tools place it. */
.wb-share {
  flex: none; min-height: 30px; padding: 5px 14px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--panel) !important; font-size: var(--t-meta); font-weight: 500; cursor: pointer;
}
.wb-share:hover { filter: brightness(.92) }
/* Presence belongs beside sharing; comments keep one consistent panel. */
.wb-viewers { flex: none; display: flex; align-items: center; gap: 0; max-width: 140px }
.wb-viewers[hidden] { display: none }
.wb-viewer-row { display: flex; align-items: center; min-width: 0; margin-left: -6px }
.wb-viewer-row:first-child { margin-left: 0 }
.wb-viewer-row .wb-rail-av { flex: none; width: 28px; height: 28px; font-size: var(--t-micro); box-shadow: 0 0 0 2px var(--panel) }
.wb-presence-label { font-size: var(--t-micro); color: var(--ink-3) }
.wb-viewer-more { margin-left: 4px }
.wb-side-h2 { margin: 0; flex: none; padding: 12px 18px 2px; font-size: var(--t-meta); font-weight: 500; color: var(--ink); display: flex; gap: 6px; align-items: baseline }
.wb-side-h2 span { color: var(--ink-3); font: var(--t-meta)/1 var(--sans) }
.wb-side-comments { flex: 1; min-height: 0; display: flex; flex-direction: column }

/* ---- the share dialog: read the link before you send it ---- */
.wb-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 20px 0; border: 0; background: transparent; color: var(--ink) }
.wb-modal[hidden] { display: none }
.wb-modal::backdrop { background: transparent }
.wb-modal-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 26%, transparent) }
.wb-modal-card {
  position: relative; width: min(440px, calc(100vw - 40px)); max-height: 100%; overflow-y: auto; padding: 20px 22px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px -16px rgba(20, 26, 34, .35), 0 4px 14px rgba(20, 26, 34, .1);
}
.wb-modal-card h2 { margin: 0; font: 600 var(--t-title)/1.4 var(--sans); letter-spacing: normal }
.wb-modal-sub { margin: 4px 0 0; color: var(--ink-3); font-size: var(--t-meta) }
.wb-share-what { margin: 14px 0 0; display: grid; gap: 5px }
.wb-share-what div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline }
.wb-share-what dt { font: var(--t-meta)/1.5 var(--sans); color: var(--ink-3); text-transform: none; letter-spacing:normal}
.wb-share-what dd { margin: 0; min-width: 0; font-size: var(--t-meta); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-share-url {
  width: 100%; margin-top: 13px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2);
  color: var(--ink-2); font: var(--t-meta)/1 var(--mono);
}
.wb-share-url:focus { outline: none; border-color: var(--accent-line); color: var(--ink) }
.wb-modal-row { display: flex; align-items: center; gap: 7px; margin-top: 14px }

/* ---- who a draft is for ----
   One word in two states everywhere a draft is named: `private` is the one that has to be
   noticed, so it borrows the warning ink, and `public` stays quiet in the panel's own grey - a
   badge that shouts the ordinary case teaches people to stop reading badges. */
.hm-vis, .wb-fly-vis {
  margin-left: 7px; font: 500 var(--t-meta)/1 var(--sans); font-style: normal;
  border-radius: 999px; padding: 2px 7px; vertical-align: 1px; white-space: nowrap;
  background: var(--panel-2); color: var(--ink-3);
}
.hm-vis[data-vis="private"], .wb-fly-vis[data-vis="private"] { background: var(--gold-soft); color: var(--warn) }
.wb-fly-text b .wb-fly-vis { vertical-align: 1px }

/* In the work header it is a control, not a label: the same chip, plus a pointer. */
.wb-page .wb-draft-vis {
  position: relative; flex: none; margin: 0; min-height: 20px; font: 500 var(--t-micro)/1 var(--sans); padding: 2px 6px; border-radius: 4px;
  border: 0; background: var(--panel-2); color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.wb-draft-vis[data-vis="private"] { background: var(--gold-soft); color: var(--warn) }
.wb-draft-vis:hover { filter: brightness(.96) }
.wb-draft-vis[hidden] { display: none }

/* The permission half of the share dialog, above the link it decides the usefulness of. */
.wb-perm { margin-top: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--line) }
.wb-perm h3, .wb-perm-h { margin: 0; font: 600 var(--t-meta)/1.5 var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: normal }
.wb-perm-h { margin-top: 15px }
.wb-perm-owner { margin: 3px 0 0; font-size: var(--t-meta); color: var(--ink-2) }
.wb-perm-owner[hidden] { display: none }
.wb-perm-choice { margin-top: 9px; display: grid; gap: 6px }
.wb-perm-choice button {
  display: grid; gap: 2px; text-align: left; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
}
.wb-perm-choice button b { font-size: var(--t-meta); font-weight: 500 }
.wb-perm-choice button span { font-size: var(--t-meta); color: var(--ink-3) }
.wb-perm-choice button:hover:not(:disabled) { border-color: var(--line-2) }
.wb-perm-choice button[aria-checked="true"] { border-color: var(--accent-line); background: var(--accent-soft) }
.wb-perm-choice button:disabled { cursor: default; opacity: .6 }
.wb-perm-note { margin: 8px 0 0; font-size: var(--t-meta); color: var(--ink-2) }
.wb-perm-note[hidden] { display: none }

/* The project names the drawer, quietly, above its title. */
.wb-fly-id { min-width: 0; flex: 1; display: grid; gap: 1px }
.wb-fly-id span { font: var(--t-meta)/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wb-fly-id h2 { margin: 0 }

.wb-comment-main button.wb-msg-ref { color: var(--ink-2); margin: 2px 0 1px }

/* Canvas pick mode: the banner that says what the cursor now does. */
.wb-pick-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px;
  background: var(--accent); color: var(--panel); border-radius: 999px; font-size: var(--t-meta); font-weight: 500;
  box-shadow: 0 8px 24px -8px rgba(20, 26, 34, .4);
}
.wb-pick-banner[hidden] { display: none }
.wb-pick-banner button {
  border: 1px solid color-mix(in srgb, var(--panel) 35%, transparent); border-radius: 999px;
  background: none; color: var(--panel); padding: 3px 10px; font-size: var(--t-meta); cursor: pointer;
}
.wb-pick-banner button:hover { background: color-mix(in srgb, var(--panel) 14%, transparent) }

/* ---- the alert panel: status and notifications, out of the toolbar's face ---- */
.wb-alerts-btn {
  position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel); color: var(--ink-2); display: grid; place-items: center; cursor: pointer;
}
.wb-alerts-btn:hover { color: var(--ink); border-color: var(--ink-3) }
.wb-alerts-btn[aria-expanded="true"] { background: var(--panel-2); color: var(--ink) }
.wb-alerts-btn b {
  position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--crit); color: #fff; font: 600 var(--t-meta)/14px var(--sans); text-align: center;
}
.wb-alerts-btn b[hidden] { display: none }
.wb-alerts {
  position: absolute; top: 52px; right: 10px; z-index: 30; width: min(360px, calc(100% - 68px)); max-height: calc(100dvh - 80px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px; padding: 12px 14px 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 36px -8px rgba(20, 26, 34, .18), 0 2px 8px rgba(20, 26, 34, .06);
}
.wb-alerts[hidden] { display: none }
.wb-alerts h2 { margin: 0 0 1px; font-size: var(--t-meta); font-weight: 500; color: var(--ink) }
.wb-alerts .wb-connection, .wb-alerts .wb-agent, .wb-alerts .wb-activity {
  display: flex; align-items: flex-start; gap: 7px; margin: 0 -6px; padding: 4px 6px; border-radius: 7px;
  font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); white-space: normal;
}
/* A row that leads somewhere reads like it: rows with a target (or a retry) get the hand. */
.wb-alerts .wb-activity[data-request], .wb-alerts .wb-agent[data-request], .wb-alerts .wb-connection[data-state="down"] { cursor: pointer }
.wb-alerts .wb-activity[data-request]:hover, .wb-alerts .wb-agent[data-request]:hover, .wb-alerts .wb-connection[data-state="down"]:hover { background: var(--panel-2); color: var(--ink) }
.wb-alerts i { margin-top: 4.5px }
.wb-alerts .wb-activity[data-state="stalled"] { color: var(--crit) }

/* ---- candidates: several answers to one open ask ---- */
.wb-candidates { display: grid; gap: 8px; margin: 12px 0 4px }
.wb-candidates-top { display: flex; align-items: center; gap: 10px }
.wb-candidates-h { margin: 0; flex: 1; font-size: var(--t-meta); font-weight: 500; color: var(--ink-3) }
.wb-candidate {
  display: grid; gap: 7px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--panel);
}
.wb-candidate[data-showing="true"] { border-color: var(--accent-line) }
.wb-candidate[data-chosen="true"] { border-color: var(--new); background: color-mix(in srgb, var(--new) 5%, var(--panel)) }
.wb-candidate-head { display: flex; align-items: center; gap: 8px; min-width: 0 }
.wb-candidate-head strong { min-width: 0; flex: 1; font-size: var(--t-meta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-candidate-badge {
  flex: none; padding: 1.5px 7px; border-radius: 999px; background: var(--new); color: #fff;
  font-size: var(--t-meta); font-weight: 500;
}
.wb-candidate-body { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2) }
.wb-candidate-actions { display: flex; gap: 6px; justify-content: flex-end }
.wb-candidate-actions button { min-height: 28px; padding: 4px 11px; font-size: var(--t-meta) }

/* ---- the whole candidate card is the control that shows it ---- */
.wb-candidate-pick { cursor: pointer }
.wb-candidate-pick:hover { border-color: var(--ink-3) }
.wb-candidate-pick:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px }
.wb-candidate[data-superseded="true"] { opacity: .62 }
.wb-candidate-mark { flex: none; font-size: var(--t-meta); color: var(--ink-3) }
.wb-candidates-all {
  flex: none; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); color: var(--ink-2); font-size: var(--t-meta); cursor: pointer;
}
.wb-candidates-all:hover { color: var(--ink); border-color: var(--ink-3) }
/* Every option at once: one deck per tile, the same screen in each. */
.wb-grid {
  position: absolute; inset: 0; z-index: 4; overflow: auto; background: var(--well);
  display: grid; gap: 12px; padding: 12px;
  /* Wrap rather than squeeze: below ~520px a column shows a screen too small to judge, so the
     options stack and each gets the full width instead. `min(100%, …)` is what lets a single
     column survive - a bare minmax(520px, …) overflows a narrower canvas rather than wrapping. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  align-content: start;
}
.wb-grid[hidden] { display: none }
.wb-tile {
  margin: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
}
/* The tile is the shape of the screen it shows: a row stretched to the canvas height framed a
   viewport-tall capture in a column of empty white. */
.wb-tile-body { aspect-ratio: var(--shot-ratio, 1.47) }
.wb-tile[data-chosen="true"] { border-color: var(--new); box-shadow: 0 0 0 1px var(--new) }
.wb-tile-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 13px; border-bottom: 1px solid var(--line) }
.wb-tile-head strong { flex: 1; min-width: 0; font-size: var(--t-meta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-tile-head button { flex: none; min-height: 26px; padding: 3px 10px; font-size: var(--t-meta) }
.wb-tile-body { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--panel) }
.wb-tile-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform-origin: top left; background: var(--panel) }

/* Authenticated agent setup reuses the guide sheet. */
.np-result { border-top: 1px solid var(--line); padding-top: 24px }
.np-result h2 { margin: 0 0 10px; font: 600 var(--t-section)/1.3 var(--sans); letter-spacing: -.015em; text-transform: none; color: var(--ink) }
.np-result > p { margin: 0 0 14px; color: var(--ink); font-size: var(--t-prose); max-width: 68ch }
.np-prompt pre { white-space: pre-wrap; overflow-wrap: anywhere }

/* The shared mark inherits both themes. Its single identity cell uses the canonical gold. */
.ms-mark-gold { fill: var(--gold) }

/* Reading / desk navigation may collapse; no workbench stage or camera column changes here. */
.hm-nav-desktop { display: flex; flex: 1; flex-direction: column; gap: 5px; min-height: 0 }
.hm-nav-mobile { display: none }
@media (max-width: 760px) {
  .hm-page { height: auto; overflow: visible }
  .hm { height: auto; min-height: 100dvh }
  .hm .wb-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  .hm .wb-shellnav { width: 100%; padding: 10px 16px; align-items: stretch; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line) }
  .hm .wb-nav-brand { min-height: 44px; margin: 0 }
  .hm-nav-desktop { display: none }
  .hm-nav-mobile { display: block; min-width: 0 }
  .hm-nav-mobile summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--ink); font-size: var(--t-body) }
  .hm-nav-mobile a { min-height: 44px }
  .hm-nav-mobile .wb-nav-mail { display: inline; overflow-wrap: anywhere }
  .hm-main { grid-column: 1; overflow: visible; padding: 20px 16px 28px }
  .hm .gs { padding: 20px 0; border: 0; border-radius: 0 }
  .hm .gs-lede { max-width: 100%; overflow-wrap: anywhere }
  .hm .gs-steps li { padding-left: 28px }
  .hm .gs-steps li::before { width: 20px; height: 20px; line-height: 18px }
  .hm .gs-code pre { padding: 12px 10px }
  .hm-grid { grid-template-columns: minmax(0, 1fr) }
  .hm :is(a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
}

/* Theme placement follows each existing shell; no canvas column changes. */
.hm-theme { margin:10px 0; flex:none }
.wb-gate-card > .theme-control { margin-top:20px }
.rec-theme { display:flex; justify-content:flex-end; margin-bottom:12px }
.wb-rail > .theme-control { align-self: flex-start; margin-top: 8px }
.rtop > .theme-control { margin-top:12px }
/* Keep embedded products' media queries/native controls independent of the chrome override.
   A Mockspace viewer inside a frame applies its own synchronized theme through theme.js. */
iframe { color-scheme:light dark }

/* A phone opens its screen list on demand. Chat docks below the canvas so fitting measures
   visible space instead of fitting screens behind a conversation drawer. */
#wbDesignNavClose { display: none }
@media (max-width: 760px) {
  #workbench { height: 100dvh; min-height: 0; grid-template-rows: minmax(0, 1fr) }
  #workbench .wb-body { --wb-chat-h: 0px; grid-template-columns: 48px 0 minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) var(--wb-chat-h) }
  #workbench .wb-body:has(.wb-sidebar:not([hidden])) { --wb-chat-h: min(44dvh, 400px) }
  #workbench .wb-rail { width: 48px; box-shadow: none }
  #workbench .wb-designnav { position: absolute; grid-column: 1 / -1; grid-row: 1 / -1; inset: 0 auto 0 48px; width: min(280px, calc(100% - 48px)); z-index: 20; border-right: 1px solid var(--line) }
  #workbench .wb-sidebar { grid-column: 3; grid-row: 3; width: auto; border: 0; border-top: 1px solid var(--line); overflow: auto }
  #workbench .wb-designnav { display: none }
  #workbench[data-design-nav-open] .wb-designnav:not([hidden]) { display: flex }
  #workbench .wb-designnav-brand { justify-content: space-between; gap: 8px; padding-right: 4px }
  #workbench .wb-designnav-brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  #wbDesignNavClose { display: block; flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink-2); font-size: var(--t-section); cursor: pointer }
  #workbench .wb-designnav-tabs button { min-height: 44px }
}

.wb-work-tools > .wb-tool-grow { display: block }
.wb-work-line > strong { flex: none }
@media (max-width: 760px) {
  #workbench .wb-work-tools { gap: 6px; padding: 0 8px; overflow: visible }
  #workbench:not([data-live-app]) #wbWorkTitle, #workbench .wb-draft-kind, #workbench .wb-work-base { display: none }
  #workbench .wb-draft-name { padding-left: 0; padding-right: 0 }
  #workbench .wb-draft-vis[data-vis="public"] { display: none }
  #workbench .wb-draft-name svg { display: none }
}
@media (pointer: coarse) {
  .wb-draft-vis::after { content: ""; position: absolute; inset: -12px 0 }
}

/* One toolbar for the canvas. Draft identity stays with its navigation. */
.wb-designnav .wb-work-meta { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line) }
.wb-designnav .wb-work-line { flex-wrap: wrap; gap: 6px }
.wb-designnav #wbWorkTitle { display: none }
.wb-designnav .wb-draft-name { max-width: 100%; padding-left: 0 }
.wb-designnav-brand, .wb-side-head { min-height: var(--wb-toolbar-h); height: var(--wb-toolbar-h) }
.wb-alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.wb-alerts .wb-alerts-head h2 { display: grid; gap: 1px; min-width: 0; margin: 0; font: 600 var(--t-title)/1.4 var(--sans); text-transform: none; letter-spacing: normal }
.wb-alerts .wb-alerts-head h2 small { color: var(--ink-3); font: 500 var(--t-meta)/1.4 var(--sans); overflow-wrap: anywhere }
.wb-alerts-head button { border: 0; background: transparent; color: var(--ink-2); min-width: 44px; min-height: 44px; font-size: var(--t-section); cursor: pointer }
.wb-alerts-summary { margin: 0; color: var(--ink-2); font-size: var(--t-body-2); line-height: 1.5 }
.wb-alerts h3 { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-meta); font-weight: 500 }
.wb-request-alerts { display: grid; gap: 2px }
.wb-alert-row { position: relative; display: grid; gap: 2px; width: 100%; min-width: 0; min-height: 44px; align-content: center; padding: 8px 10px 8px 22px; text-align: left; text-decoration: none; border: 0; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer }
.wb-alert-row:hover, .wb-alert-row[data-unread="true"] { background: var(--panel-2) }
.wb-alert-row[data-unread="true"]::before { content: ""; position: absolute; left: 8px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent) }
.wb-alert-subject { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-body-2); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere }
.wb-alert-context { display: flex; align-items: baseline; gap: 4px; min-width: 0; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.4 }
.wb-alert-project, .wb-alert-area { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-alert-context:has(.wb-alert-area) .wb-alert-project { flex: 0 1 auto; max-width: 45% }
.wb-alert-area { flex: 1 }
.wb-alert-separator { flex: none }
.wb-alert-meta { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.4; overflow-wrap: anywhere }
.wb-alerts :is(.wb-connection, .wb-agent, .wb-activity) { border: 0; background: none; text-align: left; width: 100%; font-family: inherit; line-height: 1.5 }
.wb-alerts :is(.wb-connection, .wb-agent, .wb-activity) span { white-space: normal; overflow: visible; color: var(--ink-2) }
.wb-alerts :is(.wb-connection, .wb-agent, .wb-activity) i { flex: none }
.wb-alerts :is(.wb-connection, .wb-agent):disabled { cursor: default; opacity: 1 }
.wb-alerts [hidden] { display: none }
.wb-comment-retry { margin: 0 18px 18px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--panel); cursor: pointer }
.wb-work > .wb-notice { flex: none; margin: 8px; z-index: 5 }
.np-auth-note { padding: 12px 16px; border-left: 2px solid var(--line-2); color: var(--ink-2); line-height: 1.6 }
@media (min-width: 761px) and (max-width: 1180px) {
  #workbench .wb-fit-controls { position: absolute; right: 12px; bottom: 70px; z-index: 4; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow) }
}
/* With the 268px navigator still present, a tablet does not have room for three view tabs plus
   request, status, sharing and comments. Use the same complete select as phones before any item
   would need to scroll; the request remains a first-class compact action beside it. */
@media (max-width: 900px) {
  #workbench .wb-work-tools { gap: 6px; padding: 0 8px; overflow: visible }
  #workbench .wb-request-label-wide { display: none }
  #workbench .wb-request-label-short { display: inline }
  #workbench .wb-view-switch { display: none }
  #workbench .wb-view-menu { display: block; flex: 1; min-width: 0; max-width: 180px; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink); font: 500 var(--t-body-2)/1.4 var(--sans) }
  #workbench .wb-tool-grow, #workbench #wbViewers { display: none }
}
@media (max-width: 760px) {
  #workbench .wb-work-tools { gap: 4px; padding: 0 6px; min-height: 52px }
  #workbench .wb-context-request { min-height: 44px; padding-inline: 7px }
  #workbench .wb-view-menu { min-height: 44px }
  #workbench .wb-view-switch button { min-height: 44px; padding: 0 6px; font-size: var(--t-micro) }
  #workbench :is(.wb-share, .wb-alerts-btn, .wb-side-toggle) { min-height: 44px; min-width: 36px }
  #workbench .wb-share { padding: 0 8px }
  #workbench .wb-fit-controls { position: absolute; bottom: calc(var(--wb-chat-h) + 70px); left: calc(50% + 24px); transform: translateX(-50%); z-index: 4; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow) }
  #workbench .wb-view-switch button[aria-disabled="true"] { display: none }
  #workbench .wb-fit-controls button { min-height: 44px }
}

.np-connect .gs-code figcaption { display: flex; align-items: center; gap: 12px; min-height: 44px }
.np-connect .docs-code-toolbar { margin-left: auto; padding: 0; border: 0; flex: none }
.np-connect .docs-code-toolbar button { padding-top: 0; padding-bottom: 0 }
.np-connect .gs-code pre code { padding: 0; border: 0; background: none; font: inherit }
.np-connect .np-result { margin-top: 32px }

/* Agents takes the navigator's lane. Activity needs a little more reading width; the
   embedded viewer's ResizeObserver preserves the world centre or the current flow fit. */
.wb-agents {
  --agent-gap: 12px; --agent-pad: 16px;
  grid-column: 2; grid-row: 1 / -1; width: clamp(304px, 26vw, 352px); min-width: 0; min-height: 0;
  display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line);
  font: var(--t-body-2)/1.55 var(--sans); overflow-wrap: anywhere;
}
.wb-agents[hidden], .wb-agents [hidden] { display: none }
.wb-agents-head { height: var(--wb-toolbar-h); min-height: var(--wb-toolbar-h); padding: 0 var(--agent-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--agent-gap); border-bottom: 1px solid var(--line) }
.wb-agents-head h2 { margin: 0; font: 600 var(--t-title)/1.4 var(--sans) }
.wb-agents-head button { min-height: 36px; min-width: 36px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: var(--t-section) }
.wb-agents-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--agent-pad); scrollbar-gutter: stable }
.wb-agents p { margin: 0 0 var(--agent-gap) }
.wb-agent-notice, .wb-agent-freshness, .wb-agent-deck, .wb-agent-copy-result, .wb-agent-explainer { font-size: var(--t-meta); color: var(--ink-3) }
.wb-agent-notice { padding-bottom: var(--agent-gap); border-bottom: 1px solid var(--line) }
.wb-agent-copy-result:empty { display: none }
.wb-agent-copy-result { color: var(--new) }
.wb-agent-connect { margin: 0 }
.wb-agents[data-empty="true"] .wb-agent-connect > summary { display: none }
.wb-agent-review { color: var(--ink-2); font-size: var(--t-meta) }
.wb-agent-updates { margin-bottom: var(--agent-gap); font-size: var(--t-meta) }
.wb-agent-updates > summary, .wb-agent-event-details > summary { cursor: pointer; color: var(--ink-2); padding-block: 4px }
.wb-agent-updates[open] > summary { margin-bottom: 8px }
.wb-agent-event-details { font-size: var(--t-meta) }
.wb-agent-reconnect { border: 0; padding: 0; color: var(--ink); background: none; font: inherit; font-size: var(--t-meta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer }
.wb-agent-connect > summary { font-weight: 500; cursor: pointer; padding: var(--agent-gap) 0 }
.wb-agent-connect[open] > summary { color: var(--ink-3); font-size: var(--t-meta) }
.wb-agent-setup { display: grid; gap: var(--agent-gap); padding: 4px 0 }
.wb-agent-setup > h3 { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; margin: 0; max-width: 12ch }
.wb-agent-setup > p { margin: 0 }
.wb-agent-provider { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2) }
.wb-agent-provider button { flex: 1; min-width: 0; min-height: 36px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-2); font: 500 var(--t-body-2)/1.4 var(--sans); cursor: pointer }
.wb-agent-provider button[aria-pressed="true"] { background: var(--panel); border-color: var(--line-2); color: var(--ink) }
.wb-agent-copy { width: 100%; min-height: 40px; justify-content: center; font-family: var(--sans) }
.wb-agent-copy:disabled { opacity: .5; cursor: not-allowed }
.wb-agent-instructions { min-width: 0; font-size: var(--t-meta) }
.wb-agent-instructions summary { cursor: pointer; padding: 4px 0; color: var(--ink-2) }
.wb-agent-instructions[open] summary { margin-bottom: 8px }
.wb-agent-code { display: flex; align-items: flex-start; gap: 4px; margin: 0 0 var(--agent-gap); border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2) }
.wb-agent-code pre { flex: 1; min-width: 0; margin: 0; padding: 10px; border: 0; background: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-micro) }
.wb-agent-code button { flex: none; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font: 500 var(--t-meta)/1.4 var(--sans); cursor: pointer }
.wb-agent-instructions a { text-decoration: underline; text-underline-offset: 3px }
.wb-agent-instructions textarea { display: block; width: 100%; resize: vertical; padding: 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--ink-2); font: var(--t-meta)/1.6 var(--sans) }
.wb-agent-label { display: block; margin: 0 0 6px; font: 500 var(--t-meta)/1.5 var(--sans); color: var(--ink-2) }
.wb-agent-roster-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--agent-gap); margin-bottom: var(--agent-gap) }
.wb-agent-roster-head .wb-agent-label { margin: 0 }
.wb-agent-list { display: grid; gap: calc(var(--agent-gap) / 2); max-height: 34vh; overflow: auto; margin-bottom: var(--agent-pad); padding: calc(var(--agent-gap) / 4); scrollbar-gutter: stable }
.wb-agent-list:empty { display: none }
.wb-agent-row { display: grid; gap: calc(var(--agent-gap) / 4); width: 100%; min-width: 0; padding: var(--agent-gap); border: 1px solid transparent; border-radius: calc(var(--agent-gap) / 2); background: var(--panel-2); text-align: left; color: var(--ink); cursor: pointer; font: var(--t-body-2)/1.5 var(--sans) }
.wb-agent-row:hover { border-color: var(--line-2) }
.wb-agent-row[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent) }
.wb-agent-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.wb-agent-row-title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500 }
.wb-agent-row-meta, .wb-agent-row-contact { color: var(--ink-3); font-size: var(--t-micro); overflow-wrap: anywhere }
.wb-agent-row[data-status="error"] .wb-agent-row-meta { color: var(--crit) }
.wb-agent-row-summary { color: var(--ink-2); font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wb-agent-history { margin-bottom: var(--agent-pad); font-size: var(--t-meta); color: var(--ink-2) }
.wb-agent-history > summary { cursor: pointer; padding-block: calc(var(--agent-gap) / 2) }
.wb-agent-recovery { padding-bottom: var(--agent-gap); margin-bottom: var(--agent-pad); border-bottom: 1px solid var(--line) }
.wb-agent-recovery > button { margin-bottom: var(--agent-gap) }
.wb-agent-task { width: 100%; min-width: 0; padding: var(--agent-gap); border: 1px solid var(--line-2); border-radius: calc(var(--agent-gap) / 2); background: var(--panel); color: var(--ink); font: var(--t-body-2)/1.5 var(--sans) }
.wb-agent-current { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 4px; font-weight: 500 }
.wb-agent-status { font-size: var(--t-meta); color: var(--ink-2); padding: 2px 7px; border-radius: 5px; background: var(--panel-2) }
.wb-agent-status[data-status="working"] { color: var(--new) }
.wb-agent-status[data-status="done"] { color: var(--ink); background: var(--gold-soft) }
.wb-agent-status[data-status="error"] { color: var(--crit) }
.wb-agents .wb-agent-summary { color: var(--ink) }
.wb-agent-target { display: block; max-width: 100%; padding: 6px 8px; margin-bottom: var(--agent-gap); border: 1px solid var(--accent-line); border-radius: 6px; background: var(--accent-soft); color: var(--ink); text-align: left; overflow-wrap: anywhere; font: var(--t-meta)/1.5 var(--sans); cursor: pointer }
.wb-agent-follow { padding: var(--agent-gap) 0; margin-bottom: var(--agent-gap); border-block: 1px solid var(--line) }
.wb-agent-follow label { display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 500; color: var(--ink) }
.wb-agent-follow input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent) }
.wb-agent-follow p { font-size: var(--t-meta); color: var(--ink-3); margin: 6px 0 0 }
.wb-agent-change-group { margin-bottom: var(--agent-gap) }
.wb-agent-values { margin: 0; padding: 0; list-style: none; font-size: var(--t-meta); color: var(--ink-2) }
.wb-agent-values li { padding: 2px 0; overflow-wrap: anywhere }
.wb-agent-events { margin: var(--agent-gap) 0; padding: 0; list-style: none }
.wb-agent-event { position: relative; margin-left: 4px; padding: 0 0 20px 16px; border-left: 1px solid var(--line-2) }
.wb-agent-event::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; background: var(--line-2); border-radius: 50%; box-shadow: 0 0 0 3px var(--panel) }
.wb-agent-event[data-status="working"]::before { background: var(--new) }
.wb-agent-event[data-status="done"]::before { background: var(--gold) }
.wb-agent-event[data-status="error"]::before { background: var(--crit) }
.wb-agent-event:last-child { padding-bottom: 0; border-color: transparent }
.wb-agent-event-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; font-size: var(--t-meta); margin-bottom: 4px }
.wb-agent-event-head strong { font-weight: 500 }
.wb-agent-event-head time { color: var(--ink-3); font-size: var(--t-micro) }
.wb-agent-event p { margin: 0 0 6px }
.wb-agent-event-target { font-size: var(--t-meta) }
.wb-agent-event .wb-agent-change-group { margin: 6px 0 0 }
.wb-agent-event .wb-agent-label { margin-bottom: 2px }
.wb-agent-artifacts { display: grid; gap: 6px; margin-top: 8px }
.wb-agent-artifact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); text-decoration: none }
.wb-agent-artifact:hover { border-color: var(--ink-3); text-decoration: none }
.wb-agent-artifact strong { font-size: var(--t-meta); font-weight: 600 }
.wb-agent-artifact span { min-width: 0; overflow: hidden; font-size: var(--t-meta); text-overflow: ellipsis; white-space: nowrap }
.wb-agent-artifact small { grid-column: 2; color: var(--ink-3); font-size: var(--t-micro) }
.wb-agent-artifact-event > strong { display: block; margin-bottom: 5px; font-size: var(--t-meta); font-weight: 500 }
.wb-agent-error { padding: var(--agent-gap); margin-bottom: var(--agent-gap); border: 1px solid var(--crit); border-radius: 6px }
.wb-agent-error p { color: var(--crit) }
.wb-agent-event-empty { color: var(--ink-3); font-size: var(--t-meta) }
.wb-focus-sharing { padding-bottom: var(--agent-gap); margin-bottom: var(--agent-gap); border-bottom: 1px solid var(--line) }
.wb-focus-switch { display: flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 500; cursor: pointer }
.wb-focus-switch input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent) }
.wb-focus-sharing p, .wb-agent-linkage { font-size: var(--t-meta); color: var(--ink-3); overflow-wrap: anywhere }
.wb-focus-sharing #wbFocusStatus { margin: 4px 0 6px }
#wbFocusStatus[data-state="sharing"] { color: var(--new) }
#wbFocusStatus[data-state="error"] { color: var(--crit) }
.wb-focus-sharing .wb-agent-instructions summary { font-size: var(--t-meta) }
.wb-focus-sharing #wbFocusTarget { margin-bottom: 4px }
#wbAgentCopyProject { text-align: center; min-height: 36px }
@media (max-width: 760px) {
  #workbench[data-agents-open] .wb-body { --wb-chat-h: min(54dvh, 480px) }
  #workbench .wb-agents { grid-column: 3; grid-row: 3; width: auto; border-right: 0; border-top: 1px solid var(--line) }
  #workbench .wb-agents-head { min-height: 44px; height: 44px }
  #workbench .wb-agents-head button, .wb-agent-provider button, .wb-agent-copy, .wb-agent-code button, .wb-agent-instructions summary, .wb-agent-connect > summary { min-height: 44px }
  .wb-agent-instructions summary, .wb-agent-connect > summary { align-content: center }
  .wb-focus-switch, #wbAgentCopyProject, #wbFocusRetry { min-height: 44px }
}

/* Workspace inbox sits with app navigation; current-project health stays in its navigator. */
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn) {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.625rem; flex: none;
  width: 100%; min-width: 0; height: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0 0.5625rem;
  border: 0; border-radius: 0.5rem; background: transparent; color: var(--ink-3); line-height: 1; text-decoration: none;
}
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn) svg { flex: none; width: 1.125rem; height: 1.125rem }
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn) svg [stroke] { stroke-width: 1.5 }
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn)[hidden] { display: none }
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn):is(:hover, [aria-pressed="true"], [aria-current="page"], [aria-expanded="true"]) { color: var(--ink); background: var(--panel-2) }
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn):is([aria-pressed="true"], [aria-current="page"], [aria-expanded="true"]) { outline: 0.0625rem solid var(--line-2); outline-offset: -0.0625rem }
.wb-rail .wb-account-avatar { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--panel-2); color: var(--ink-2); font: 600 var(--t-micro)/1 var(--sans) }
.wb-rail :is(.wb-rail-btn, .wb-alerts-btn):focus-visible { outline: 0.125rem solid var(--accent); outline-offset: -0.125rem }
.wb-rail .wb-alerts-btn b { top: 0.0625rem; left: 1.375rem; right: auto }
.wb-alerts { position: fixed; left: 54px; right: auto; top: auto; bottom: 8px; width: min(380px, calc(100% - 62px)); max-height: calc(100dvh - 16px); z-index: 60 }
.public-header .wb-alerts { left: auto; right: calc(max(0px, (100% - var(--site-max, 1360px)) / 2) + var(--site-gutter, 28px)); top: 64px; bottom: auto; max-height: calc(100dvh - 80px) }
.public-header .wb-alerts-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 44px; min-height: 44px; padding: 0 8px; font: 500 var(--t-meta)/1 var(--sans) }
a.wb-alert-row:hover { text-decoration: none; color: var(--ink) }
.wb-alert-row:focus-visible, .wb-alerts button:focus-visible, .wb-alerts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wb-alerts-head > button { flex: none }
.wb-project-status { padding: 8px 14px; border-bottom: 1px solid var(--line); font: 500 var(--t-meta)/1.5 var(--sans); color: var(--ink-2) }
.wb-project-status summary { cursor: pointer }
.wb-project-status :is(.wb-connection, .wb-agent, .wb-activity) { display: flex; align-items: flex-start; width: 100%; margin: 6px 0 0; padding: 4px 0; border: 0; text-align: left; white-space: normal; background: none; color: var(--ink-2); font: inherit }
.wb-project-status :is(.wb-connection, .wb-agent, .wb-activity) span { white-space: normal; overflow-wrap: anywhere }
.wb-project-status :is(.wb-connection, .wb-agent, .wb-activity) i { flex: none; margin-top: 5px }
.wb-project-status button:not(:disabled) { cursor: pointer }
.wb-project-status [hidden] { display: none }
@media (max-width: 600px) {
  .public-header .wb-alerts-btn > span { display: none }
  .public-header .wb-alerts { right: 8px; width: calc(100% - 16px) }
}

/* One approval belongs to the selected canvas; the grid grows with wrapping tools. */
#workbench .wb-body:has(#wbMerge:not([hidden])) { grid-template-rows: auto minmax(0, 1fr); }
#workbench .wb-work-tools:has(#wbMerge:not([hidden])) { flex-wrap:wrap; padding-block:6px; }
.wb-merge { display:flex; align-items:center; gap:8px; min-width:0; }
.wb-merge[hidden] { display:none; }
.wb-merge button { flex-shrink:0; }
.wb-merge [role="status"] { max-width:30ch; font-size:var(--t-meta); color:var(--ink-2); overflow-wrap:anywhere; }
.wb-merge [role="status"]:empty { display:none; }
@media (max-width: 1180px) {
  .wb-merge { order:10; flex-basis:100%; }
  .wb-merge [role="status"] { max-width:none; flex:1; }
}
@media (max-width: 760px) {
  #workbench .wb-body:has(#wbMerge:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) var(--wb-chat-h); }
  .wb-merge button { min-height:44px; }
}

.wb-merge-target { flex:none; font:500 var(--t-meta)/1.4 var(--sans); color:var(--ink-2); }
#workbench .wb-work-tools:has(#wbMerge:not([hidden])) .wb-context-request {
  background:var(--panel); color:var(--ink-2) !important; border-color:var(--line-2); box-shadow:none;
}

/* The review panel holds explanations; canvas and navigation keep concise titles. */
.wb-side-tabs{display:flex;flex:1;gap:.7rem;min-width:0}
.wb-side-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-3);font:500 var(--t-body-2)/1.5 var(--sans);padding:.7em 0;cursor:pointer}
.wb-side-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.wb-summary{overflow:auto;min-height:0;padding:1rem;display:flex;flex-direction:column;gap:.65rem;font:var(--t-body-2)/1.55 var(--sans);overflow-wrap:anywhere}
.wb-summary[hidden],.wb-side-comments[hidden]{display:none}
.wb-summary :is(p,h2,h3,h4){margin:0}
.wb-summary h2{font:600 var(--t-title)/1.45 var(--sans)}
.wb-summary h3{font:600 var(--t-meta)/1.5 var(--sans);padding-top:.75rem;border-top:1px solid var(--line)}
.wb-summary h4{font:500 var(--t-body-2)/1.5 var(--sans)}
.wb-summary :is(.wb-summary-source,.wb-summary-notice,.wb-summary-context,.wb-summary-route){color:var(--ink-3);font-size:var(--t-meta)}
.wb-summary-description p{white-space:pre-wrap;max-height:22rem;overflow:auto}
.wb-summary-description summary{cursor:pointer;color:var(--ink-2)}
.wb-summary-refs{display:flex;flex-direction:column;gap:.3em;font-size:var(--t-micro)}
.wb-summary-counts{display:flex;flex-wrap:wrap;gap:.6em;font-size:var(--t-meta)}
.wb-summary :is(.added){color:var(--new)}
.wb-summary :is(.removed){color:var(--crit)}
.wb-summary :is(.changed){color:var(--warn)}
.wb-summary-regions{padding-left:1.2em;margin:0}
#wbSideToggle{width:auto;min-width:3.4rem;padding:0 .5em;font:500 var(--t-meta)/1.4 var(--sans)}
/* The mobile grid has three columns. Keeping the desktop fourth-column placement gives
   an absolute panel a zero-width containing grid area; percentage sizing then spills its text. */
@media(max-width:1180px){
  .wb-side{grid-column:1 / -1;width:min(300px,calc(100vw - var(--rail-w,48px)))}
}
@media(max-width:600px){
  .wb-side-tabs button{min-height:44px}
}

/* Mockspace's own bug report (product-feedback-entry.js): one floating entry at the bottom right,
   only for someone who turned it on in Settings -> Developer. It floats, so it carries the shadow;
   it sits under every menu, panel and dialog, so anything that opens covers it rather than the
   other way round. */
.product-feedback-float {
  position: fixed; z-index: 10; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow); font: 500 var(--t-body-2)/1.2 var(--sans); text-decoration: none; white-space: nowrap;
}
.product-feedback-float:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none }
.product-feedback-float:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.product-feedback-float[hidden] { display: none }
.product-feedback-float svg { flex: none; color: var(--ink-2) }
/* While it shows, the end of a page can always scroll clear of it. A record page scrolls its
   column, not the document, so the column takes the room. */
.public-page:has(> .product-feedback-float:not([hidden])) { padding-bottom: 72px }
.wb-page:has(> .product-feedback-float:not([hidden])) .rec-main { padding-bottom: 72px }
@media (max-width: 48rem) {
  .product-feedback-float { min-height: 44px }
}
/* In the workbench it belongs to the canvas area: never over the conversation, the composer or the
   review details beside it, and lifted above the viewer's own dock (Comment and zoom). What it must
   clear depends on the canvas's own width, not the window's: under 48rem the viewer adds its Fit
   flow / Fit screen card above the dock, so the entry rises above that too. */
.wb-stage-wrap { container: wb-stage / inline-size }
.wb-stage-wrap > .product-feedback-float { position: absolute; z-index: 7; right: 16px; bottom: 76px }
@container wb-stage (max-width: 48rem) {
  .wb-stage-wrap > .product-feedback-float { right: 12px; bottom: 132px; min-height: 44px }
}

/* ---- Report a Mockspace bug, on the page (product-feedback-composer.js) ----
   A native modal dialog over the page it reports on: the page behind keeps its layout, scroll
   and canvas exactly as they were. The screenshot is the subject, so it gets the room and the
   well; the writing stays a quiet column beside it, stacked under it on a phone. The marks are
   the only colour. The card keeps one height whether or not there is a screenshot, so capturing
   or removing one never moves anything. */
.pf-composer {
  position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 20px; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.pf-composer[open] { display: grid; place-items: center }
.pf-composer::backdrop { background: transparent }
/* While capturing, the report and its entry are out of the picture - hidden, never removed, so
   nothing behind them reflows into the shot. */
.pf-composer[data-capturing] { visibility: hidden }
:root[data-pf-capturing] .product-feedback-float { visibility: hidden }
.pf-composer .pfc-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 26%, transparent) }
.pf-composer .pfc-card {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1120px, 100%); height: min(760px, 100%);
  min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
  font: 400 var(--t-body)/1.5 var(--sans);
}
.pf-composer .pfc-card:lang(ko) { line-height: 1.6 }
.pf-composer .pfc-card[hidden] { display: none }
.pf-composer .pfc-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line) }
.pf-composer .pfc-head h2 { margin: 0; font: 600 var(--t-title)/1.4 var(--sans); letter-spacing: normal }
.pf-composer .pfc-sub { margin: 2px 0 0; max-width: 72ch; color: var(--ink-3); font-size: var(--t-body-2) }
.pf-composer .pfc-close {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -4px -6px 0 auto; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer;
}
.pf-composer .pfc-close:hover { background: var(--panel-2); color: var(--ink) }
.pf-composer .pfc-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0 }

/* The screenshot side */
.pf-composer .pfc-shot {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-width: 0; min-height: 0;
  padding: 14px 16px; border-right: 1px solid var(--line); background: var(--well);
}
.pf-composer .pfc-label { margin: 0; font: 600 var(--t-body-2)/1.4 var(--sans); color: var(--ink); letter-spacing: normal }
.pf-composer .pfc-label span, .pf-composer .pfc-write label span { color: var(--ink-3); font-weight: 400 }
.pf-composer .pfc-help { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: var(--t-body-2) }
.pf-composer .pfc-empty { display: grid; align-content: center; justify-items: start; gap: 14px; min-height: 0; padding: 20px; border: 1px dashed var(--line-2); border-radius: 10px }
.pf-composer .pfc-actions { display: flex; flex-wrap: wrap; gap: 8px }
.pf-composer .pfc-ready { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 0 }
.pf-composer .pfc-shot[data-state="empty"] .pfc-ready, .pf-composer .pfc-shot[data-state="ready"] .pfc-empty { display: none }
.pf-composer .pfc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.pf-composer .pfc-grow { flex: 1 }
.pf-composer .pfc-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2) }
.pf-composer .pfc-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 9px; background: color-mix(in srgb, var(--ink) 6%, var(--well)) }
/* The drawn image is exactly the canvas, so a pointer's place on it is its place on the PNG. */
.pf-composer .pfc-stage canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 0 0 1px var(--line-2); cursor: crosshair; touch-action: none }
.pf-composer .pfc-notice { margin: 0; color: var(--ink-2); font-size: var(--t-body-2) }
.pf-composer .pfc-notice:empty { display: none }
.pf-composer .pfc-notice[data-error="true"] { color: var(--crit) }

/* Controls: the site's secondary recipe, at the dialog's size */
.pf-composer .pfc-secondary, .pf-composer .pfc-tools button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink-2);
  font: 500 var(--t-body-2)/1.2 var(--sans); white-space: nowrap; cursor: pointer;
}
.pf-composer .pfc-secondary:hover, .pf-composer .pfc-tools button:hover { border-color: var(--ink-3); color: var(--ink) }
/* Capture and Retake are hidden where the browser cannot capture; the recipe above must not show
   them anyway. */
.pf-composer :is(.pfc-secondary, .pfc-tools button)[hidden] { display: none }
.pf-composer .pfc-seg button { border-color: transparent; background: none }
.pf-composer .pfc-tools button[aria-pressed="true"] { border-color: var(--line-2); background: var(--panel); color: var(--ink) }
.pf-composer .pfc-seg button[aria-pressed="false"]:hover { border-color: transparent; background: var(--panel) }
.pf-composer .pfc-attach { position: relative }
.pf-composer .pfc-attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer }
.pf-composer .pfc-attach:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.pf-composer .pfc-attach:has(input:disabled) { opacity: .48; cursor: not-allowed }
.pf-composer .pfc-quiet { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: 500 var(--t-body-2)/1.2 var(--sans); cursor: pointer }
.pf-composer .pfc-quiet:hover { background: var(--panel-2) }
.pf-composer .pfc-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px;
  border: 0; border-radius: 8px; background: var(--accent); color: var(--panel); font: 500 var(--t-body-2)/1.2 var(--sans); white-space: nowrap; cursor: pointer;
}
.pf-composer .pfc-primary:hover { filter: brightness(.92) }
.pf-composer :is(button, .pf-composer select, .pf-composer input, .pf-composer textarea, .pf-composer summary, .pf-composer canvas):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.pf-composer :is(button, .pf-composer select, .pf-composer input, .pf-composer textarea):disabled { opacity: .48; cursor: not-allowed }
.pf-composer .pfc-primary:disabled:hover { filter: none }

/* The writing side */
.pf-composer .pfc-write { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 0; margin: 0; padding: 14px 20px 16px; border: 0; overflow-y: auto }
.pf-composer .pfc-write label, .pf-composer .pfc-write summary { color: var(--ink); font: 500 var(--t-body-2)/1.4 var(--sans) }
.pf-composer .pfc-write label:not(:first-child) { margin-top: 8px }
.pf-composer .pfc-write :is(input, .pf-composer textarea, .pf-composer select) {
  width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: 400 var(--t-body)/1.45 var(--sans);
}
.pf-composer .pfc-write textarea { resize: vertical }
.pf-composer .pfc-write :is(input, .pf-composer textarea)::placeholder { color: var(--ink-3) }
.pf-composer .pfc-write details { display: grid; gap: 6px; margin-top: 10px }
.pf-composer .pfc-write summary { cursor: pointer }
.pf-composer .pfc-page { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 10px 0 0; color: var(--ink-3); font-size: var(--t-body-2) }
.pf-composer .pfc-page[hidden] { display: none }
.pf-composer .pfc-page code { min-width: 0; color: var(--ink-2); font: 400 var(--t-meta)/1.5 var(--mono); overflow-wrap: anywhere }

.pf-composer .pfc-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line) }
.pf-composer .pfc-status { display: grid; gap: 2px; flex: 1; min-width: 0 }
.pf-composer .pfc-state { margin: 0; color: var(--ink-2); font-size: var(--t-body-2) }
.pf-composer .pfc-state:empty { display: none }

/* Sent: the card says where the report is tracked, and nothing else. */
.pf-composer .pfc-done { display: grid; align-content: start; gap: 10px; width: min(440px, 100%); height: auto; padding: 20px 22px 18px }
.pf-composer .pfc-done h2 { margin: 0; font: 600 var(--t-title)/1.4 var(--sans) }
.pf-composer .pfc-done p { margin: 0 }
.pf-composer .pfc-links { display: flex; flex-wrap: wrap; gap: 4px 16px }
.pf-composer .pfc-links a { color: var(--accent); font-weight: 500 }
.pf-composer .pfc-links a[hidden] { display: none }
.pf-composer .pfc-done .pfc-primary { justify-self: start }

/* Enlarged: the screenshot takes the whole window for precise marks; Esc or Enlarge returns. */
.pf-composer[data-enlarged] { padding: 0 }
.pf-composer[data-enlarged] .pfc-card { width: 100%; height: 100%; border: 0; border-radius: 0 }
.pf-composer[data-enlarged] :is(.pfc-write, .pf-composer .pfc-foot, .pf-composer .pfc-sub) { display: none }
.pf-composer[data-enlarged] .pfc-body { grid-template-columns: minmax(0, 1fr) }
.pf-composer[data-enlarged] .pfc-shot { border-right: 0 }

/* A phone: one column, the whole screen, and touch-sized controls. */
@media (max-width: 48rem) {
  .pf-composer { padding: 0 }
  .pf-composer .pfc-card { width: 100%; height: 100%; border: 0; border-radius: 0 }
  .pf-composer .pfc-head { padding: 12px 16px 10px }
  /* One scrolling column: each part keeps its own height rather than shrinking into the next. */
  .pf-composer .pfc-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; align-content: start; overflow-y: auto }
  .pf-composer .pfc-shot { grid-template-rows: auto auto auto; border-right: 0; border-bottom: 1px solid var(--line) }
  .pf-composer .pfc-ready { grid-template-rows: auto auto auto }
  .pf-composer .pfc-stage { height: min(44dvh, 360px) }
  /* Enlarged, the screenshot takes what the screen has left, as on a desktop. */
  .pf-composer[data-enlarged] .pfc-body { grid-template-rows: minmax(0, 1fr); overflow: hidden }
  .pf-composer[data-enlarged] :is(.pfc-shot, .pfc-ready) { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0 }
  .pf-composer[data-enlarged] .pfc-stage { height: auto }
  .pf-composer .pfc-write { overflow: visible; padding: 14px 16px 16px }
  .pf-composer .pfc-foot { flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) }
  .pf-composer .pfc-status { flex-basis: 100% }
  .pf-composer .pfc-foot .pfc-primary { margin-left: auto }
  .pf-composer :is(.pfc-secondary, .pf-composer .pfc-tools button, .pf-composer .pfc-quiet, .pf-composer .pfc-primary, .pf-composer .pfc-close) { min-height: 44px }
  .pf-composer .pfc-close { width: 44px }
}

/* Consistent action rhythm across workspace, workbench and form chrome. */
:where(.wb-page) :is(button,select){font-weight:500; line-height:1.4}
:where(.rail .item .n,.sect-hd .n,.wb-count,.wb-page-n,.wb-request-time,.wb-comment-head time,.hm-row-when){font-variant-numeric:tabular-nums}
:where(b,strong){font-weight:600}

.hm-chip-chat { font-family: var(--sans) }