/* The new look's shared parts, built from tokens.css, as the approved prototype draws them: the dock and the sidebar, the page's title row and segmented control,
   a section head, the hero and list cards, a row, its icon tile and priority chip, two stat tiles, and the property panel (Its ask, Ticket).
   Every box sits on a 4px grid with one 16px gutter. index.html's own rules come after this file, so a screen not yet in the new look keeps its own. */

/* The dock: a 56px pill of round 48px tabs, 24px over the bottom and centred with the round Search button 12px beside it. The tab on screen sits raised,
   its filled icon in ink; the others are quiet grey. */
:root { --dock-n: 4; --dock-w: calc(0.5rem + var(--dock-n) * 3rem + (var(--dock-n) - 1) * 2px); --dock-at: calc(50% - (var(--dock-w) + 4.25rem) / 2); }
.side { display: none; }
.tabs { position: fixed; z-index: 2; left: var(--dock-at); bottom: calc(1.5rem + env(safe-area-inset-bottom)); width: var(--dock-w); display: flex; gap: 2px; height: 3.5rem; padding: 0.25rem;
  border-radius: 1.75rem; background: var(--tk-card); box-shadow: var(--tk-elev-dock), inset 0 1px 0 var(--tk-hl); }
.tabs .hl { position: absolute; top: 0.25rem; left: 0.25rem; width: 3rem; height: 3rem; border-radius: 1.5rem; background: var(--tk-on); box-shadow: var(--tk-elev-raised); transition: transform 300ms var(--spring); }
.tabs a { position: relative; flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1.5rem; color: var(--tk-idle); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tabs a[aria-current] { color: var(--tk-ink); }
.tabs a:active .icon { transform: scale(0.86); transition-duration: 90ms; }
.tabs a:focus-visible { outline-offset: -2px; }
/* Decide carries a red count of what waits on you at its tab's corner, Reports an ink one of what is new; a count that changes bumps. */
.tabs .bd { position: absolute; top: 0.375rem; right: 0.375rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 0.5rem; background: var(--tk-critical); color: var(--tk-on-critical);
  font-size: 0.625rem; line-height: 1rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--tk-card); }
.tabs a[aria-current] .bd { box-shadow: 0 0 0 2px var(--tk-on); }
.bd.bump, .side .n.bump { animation: bump 380ms var(--spring); }
@keyframes bump { 30% { transform: scale(1.25); } }
.tabs .icon, .side .icon { width: 1.5rem; height: 1.5rem; background: none; transition: transform 300ms var(--spring); }
.tabs .icon svg, .side .icon svg { width: 1.5rem; height: 1.5rem; fill: currentColor; fill-rule: evenodd; stroke: none; }
.dock-find { position: fixed; z-index: 2; left: calc(var(--dock-at) + var(--dock-w) + 0.75rem); bottom: calc(1.5rem + env(safe-area-inset-bottom)); display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 1.75rem; background: var(--tk-go); color: var(--tk-on-go); box-shadow: var(--tk-elev-go); -webkit-tap-highlight-color: transparent; }
.dock-find:active { transform: scale(0.94); }
/* Under the dock the page fades to its ground, so a row or a line never reads half hidden behind it; scrolled to its end, a list clears it by the body's room. */
body::after { content: ''; position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(6.5rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) calc(5rem + env(safe-area-inset-bottom)), transparent); pointer-events: none; }
.dock-find svg, .sfind svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The page's title row: 8px from the top (24px on a desk), a 24px medium title in a 44px row, round 40px buttons at its right edge. */
.ui-top { display: flex; align-items: center; gap: 0.5rem; height: 2.75rem; margin-top: 0.5rem; }
.ui-top h1 { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--tk-ink); font-size: var(--tk-fs-page); line-height: var(--tk-lh-page); font-weight: 500; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
.ui-rb { position: relative; display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 1.25rem; background: var(--tk-card); color: var(--tk-ink); box-shadow: var(--tk-elev-card), inset 0 1px 0 var(--tk-hl); }
.ui-rb::after { content: ''; position: absolute; inset: -2px; }
/* The segmented control: 40px, a 4px inset, the segment on screen raised. */
.ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 2.5rem; margin-top: 0.75rem; padding: 0.25rem; border-radius: 1.25rem; background: var(--tk-card); box-shadow: var(--tk-elev-card), inset 0 1px 0 var(--tk-hl); }
.ui-seg button { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2rem; min-height: 0; padding: 0; border: 0; border-radius: 1rem; background: none;
  color: var(--tk-text-tertiary); font: inherit; font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); font-weight: 500; box-shadow: none; }
.ui-seg button::after { content: ''; position: absolute; inset: -0.375rem 0; }
.ui-seg button[aria-pressed="true"] { background: var(--tk-on); color: var(--tk-ink); box-shadow: var(--tk-elev-raised); font-weight: 500; }
.ui-seg button[aria-pressed="true"]::before { content: none; }

/* Cards: the hero and a list, radius 22, a step lighter than the canvas. */
.ui-card { border-radius: var(--tk-r-card); background: var(--tk-card); box-shadow: var(--tk-elev-card), inset 0 1px 0 var(--tk-hl); }
/* The hero: a label (and a chip) on one 24px line, the big number, then what it is made of on the right. */
.ui-hero { margin-top: 1rem; padding: 0.75rem 1rem 1rem; }
.ui-hero .hl { display: flex; align-items: center; gap: 0.5rem; height: 1.5rem; }
.ui-hero .lab { overflow: hidden; color: var(--tk-text-tertiary); font-size: var(--tk-fs-row); line-height: 1.5rem; white-space: nowrap; text-overflow: ellipsis; }
.ui-hero .hv { display: flex; align-items: baseline; gap: 0.5rem; height: 2rem; }
.ui-hero .big { color: var(--tk-ink); font-size: var(--tk-fs-big); line-height: var(--tk-lh-big); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-hero .big small { color: var(--tk-text-tertiary); font-size: inherit; font-weight: 500; }
.ui-hero .vs { margin-left: auto; color: var(--tk-text-secondary); font-size: var(--tk-fs-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A section head: 18px, its count muted, See all at the card's right edge. */
.ui-sec { display: flex; align-items: center; gap: 0.5rem; height: 1.75rem; margin: 1rem 0 0.25rem; color: var(--tk-ink); font-size: var(--tk-fs-head); line-height: var(--tk-lh-head); font-weight: 500; letter-spacing: -0.014em; }
.ui-sec .n, .ui-sec small { color: var(--tk-text-tertiary); font-size: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-sec .see { position: relative; margin-left: auto; color: var(--tk-ink); font-size: var(--tk-fs-row); line-height: 1.5rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ui-sec .see::after { content: ''; position: absolute; inset: -0.625rem -0.25rem; }

/* A list card: 12px in, rows 68px tall, a hairline between rows on the card's content box. */
.ui-list { margin: 0; padding: 0.25rem 0.75rem; list-style: none; overflow: hidden; }
.ui-list > li { position: relative; }
.ui-list > li + li::before { content: ''; position: absolute; z-index: 2; top: -0.5px; right: 0; left: 0; height: 1px; background: var(--tk-line); }
/* A row: its 40px icon tile, then the title over one second line (project and time) or a progress bar with its percent in a 40px column; a priority chip only where one is set. */
.ui-row { position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; height: 4.25rem; color: var(--tk-text); text-decoration: none; }
.ui-row .rm { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ui-row .l1 { display: flex; align-items: center; gap: 0.75rem; height: 1.25rem; }
.ui-row .l1 .t { flex: 1; min-width: 0; overflow: hidden; color: var(--tk-text); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); font-weight: 400; letter-spacing: -0.006em; white-space: nowrap; text-overflow: ellipsis; }
.ui-row .l1 .val { flex: none; color: var(--tk-text-secondary); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); font-variant-numeric: tabular-nums; }
.ui-row .l2 { display: flex; align-items: center; height: 1rem; }
.ui-row .meta { display: block; overflow: hidden; color: var(--tk-text-tertiary); font-size: var(--tk-fs-meta); line-height: var(--tk-lh-meta); white-space: nowrap; text-overflow: ellipsis; }
.ui-bar { flex: 1; height: 0.25rem; overflow: hidden; border-radius: 2px; background: var(--tk-track); }
.ui-bar i { display: block; height: 100%; border-radius: 2px; background: var(--tk-fill); }
.ui-row .pct { flex: none; width: 2.5rem; color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); line-height: var(--tk-lh-small); text-align: right; font-variant-numeric: tabular-nums; }
/* The icon tile: 40px white, radius 12, the project's own icon inside at 24px, else a 20px line icon (optically the same size) or its monogram. */
.ui-icon { position: relative; display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--tk-r-icon); background: var(--tk-raised); color: var(--tk-ink);
  box-shadow: var(--tk-elev-tile); }
.ui-icon img, .ui-icon svg { display: block; width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; object-fit: cover; }
.ui-icon svg { width: 1.25rem; height: 1.25rem; border-radius: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon .mono { width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: var(--tk-ink); color: var(--tk-raised); font-size: 0.625rem; line-height: 1.5rem; font-weight: 600; text-align: center; letter-spacing: 0.02em; }
/* The priority chip: one width so the column reads straight; P0 and P1 tinted. */
.ui-pc { display: grid; flex: none; place-items: center; width: 2.25rem; height: 1.25rem; border-radius: 0.375rem; font-size: 0.6875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }
.ui-pc.p0 { background: var(--tk-p0); color: var(--tk-p0-text); } .ui-pc.p1 { background: var(--tk-p1); color: var(--tk-p1-text); }
.ui-pc.p2 { background: var(--tk-p2); color: var(--tk-p2-text); } .ui-pc.p3 { background: var(--tk-p3); color: var(--tk-p3-text); }

/* Two stat tiles, 8px apart, radius 20: a 20px icon, the label, the number. */
.ui-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.ui-stat { display: flex; flex-direction: column; padding: 0.75rem 0.75rem 0.5rem; border-radius: var(--tk-r-tile); color: inherit; text-align: left; text-decoration: none; }
.ui-stat .si { height: 1.25rem; color: var(--tk-ink); }
.ui-stat .si svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-stat .lab { margin-top: 0.75rem; overflow: hidden; color: var(--tk-text-tertiary); font-size: var(--tk-fs-row); line-height: 1rem; white-space: nowrap; text-overflow: ellipsis; }
.ui-stat b { color: var(--tk-text); font-size: var(--tk-fs-head); line-height: var(--tk-lh-head); font-weight: 500; letter-spacing: -0.014em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-stat b small { color: var(--tk-text-tertiary); font-size: inherit; font-weight: 500; }

/* The property panel on a card's screen: a label over a sunk group of 48px rows (Its ask, Ticket, PR), each a name at the left and its value, or a bar and percent, at the right. */
.ui-dl { margin: 1.5rem 0 0; color: var(--tk-text-tertiary); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); font-weight: 400; }
.ui-props { margin-top: 0.5rem; padding: 0 1rem; border-radius: 1rem; background: var(--tk-inset); }
.ui-pr { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; color: var(--tk-ink); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); text-decoration: none; }
.ui-pr + .ui-pr::before { content: ''; position: absolute; top: -0.5px; right: 0; left: 0; height: 1px; background: var(--tk-line); }
.ui-pr .k { display: flex; flex: none; align-items: center; gap: 0.5rem; color: var(--tk-text-secondary); }
.ui-pr .v { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: 0; color: var(--tk-ink); text-align: right; }
.ui-pr .v > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-pr .v .ui-bar { flex: none; width: 4rem; }
.ui-pr .v .n { flex: none; font-variant-numeric: tabular-nums; }

/* A desk (64rem and wider) keeps the areas in a slim sidebar on the canvas: the board's mark, Search, then the areas, the one on screen raised.
   The mark, Search's glass and every area's icon are 20px on one left edge, and the name, Search and every label start on the next one;
   the mark sits on the name's line, centred on it; at the foot, whose board it is with the light-or-dark button. */
@media (min-width: 64rem) {
  .tabs, .dock-find, body::after { display: none; }
  .ui-top { margin-top: 1.5rem; }
  .side { display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 0; height: 100vh; padding: 1.5rem 1rem; background: none; }
  .brand { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; margin: 0; padding: 0 0.75rem; color: var(--tk-ink); font-size: var(--tk-fs-body); line-height: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
  /* The board's mark is the prototype's blue check (web/icon.svg's gradient), the one blue the new look keeps. */
  .brand .logo { display: grid; flex: none; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 0.3125rem; background: linear-gradient(#6A93FF, #2C48D3); color: #FFFFFF; }
  .brand .logo .glyph { width: 0.875rem; height: 0.875rem; stroke-width: 2.8; }
  .sfind { display: flex; align-items: center; gap: 0.75rem; height: 2.75rem; margin: 1rem 0 0.75rem; padding: 0 0.75rem; border-radius: 1.375rem; background: var(--tk-card); color: var(--tk-text-tertiary);
    font-size: var(--tk-fs-row); text-decoration: none; box-shadow: var(--tk-elev-card), inset 0 1px 0 var(--tk-hl); }
  .sfind svg { width: 1.25rem; height: 1.25rem; }
  .side .me { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; margin-top: auto; padding: 0 0 0 0.75rem; color: var(--tk-text-secondary); font-size: var(--tk-fs-row); }
  .side .me > i { display: grid; flex: none; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--tk-ink); color: var(--tk-canvas); font-size: 0.625rem; font-style: normal; font-weight: 600; }
  .side .me > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* The version under the name, on the name's left edge. */
  .side .ver { margin: 0; padding: 0 0.75rem 0 2.75rem; color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); line-height: var(--tk-lh-small); }
  .side a:not(.sfind) { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 1.375rem; color: var(--tk-text-secondary); font-size: var(--tk-fs-row); font-weight: 500; text-decoration: none; }
  .side a:not(.sfind):hover:not([aria-current]) { background: var(--tk-card); }
  .side a[aria-current] { background: var(--tk-on); color: var(--tk-ink); box-shadow: var(--tk-elev-raised); }
  .side a:active .icon { transform: scale(0.86); transition-duration: 90ms; }
  .side .icon, .side .icon svg { width: 1.25rem; height: 1.25rem; }
  .side .n { display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: auto; padding: 0 0.375rem; border-radius: 0.625rem; color: var(--tk-text-tertiary);
    font-size: var(--tk-fs-small); font-weight: 500; font-variant-numeric: tabular-nums; }
  .side .n.red { background: var(--tk-critical); color: var(--tk-on-critical); font-weight: 600; } .side .n.ink { background: var(--tk-ink); color: var(--tk-canvas); font-weight: 600; }
}

/* The hero's chip (added with Decide): a small raised pill at the right of the hero's label line, as "2 answered today". */
.ui-hero .chip { flex: none; margin-left: auto; height: 1.5rem; padding: 0 0.5rem; border-radius: 0.75rem; background: var(--tk-on); color: var(--tk-ink); font-size: var(--tk-fs-small); line-height: 1.5rem;
  font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; border: 0; box-shadow: var(--tk-elev-raised); }

/* ---- The feedback trail (added with the trail): what the person sent on a card and how far it got. ---- */

/* On a card: four steps on one track (Sent, Delivered, Read, Replied), a 10px dot each on a 2px line, its word under it and its time once reached; reached steps and
   the line between them are ink. Under it, in a sunk panel, the agent's reply and the link to what changed. */
.ui-trail { margin-top: 0.75rem; }
.ui-trail ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.ui-trail li { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ui-trail li + li::before { content: ''; position: absolute; top: 0.25rem; right: calc(100% - 0.125rem); left: -100%; height: 2px; margin-left: 0.75rem; border-radius: 1px; background: var(--tk-line); }
.ui-trail li.on + li.on::before { background: var(--tk-fill); }
.ui-trail i { position: relative; z-index: 1; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--tk-card); box-shadow: inset 0 0 0 1.5px var(--tk-mid); }
.ui-trail li.on i { background: var(--tk-fill); box-shadow: none; }
.ui-trail b { margin-top: 0.5rem; overflow: hidden; color: var(--tk-text-tertiary); font-size: var(--tk-fs-meta); line-height: var(--tk-lh-meta); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ui-trail li.on b { color: var(--tk-ink); }
.ui-trail time { height: 1rem; color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); line-height: var(--tk-lh-small); font-variant-numeric: tabular-nums; }
.ui-trail .tr-said { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem 1rem; border-radius: 1rem; background: var(--tk-inset); }
.ui-trail .tr-said p { margin: 0; color: var(--tk-ink); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); }
.ui-trail .tr-said a { position: relative; color: var(--tk-ink); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); font-weight: 500; text-decoration: underline; text-decoration-color: var(--tk-line); text-underline-offset: 3px; }
.ui-trail .tr-said a::after { content: ''; position: absolute; inset: -0.75rem -0.25rem; }
/* In a list: the badge at the end of a row's first line, four 4px marks and the step's word, quiet; a reply not opened yet is ink. */
.ui-tb { display: inline-flex; flex: none; align-items: center; gap: 0.375rem; height: 1.25rem; padding: 0 0.5rem; border-radius: 0.375rem; background: var(--tk-p3); color: var(--tk-text-secondary);
  font-size: 0.6875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.ui-tb .tb-d { display: flex; gap: 2px; }
.ui-tb .tb-d i { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--tk-mid); }
.ui-tb .tb-d i.on { background: currentColor; }
.ui-tb.new { background: var(--tk-ink); color: var(--tk-canvas); }
.ui-row .l2:has(> .ui-tb) { gap: 0.5rem; }
.ui-row .l2 > .meta { flex: 1; min-width: 0; margin: 0; }
/* On a ticket: each comment the person made on it, its words over its track, in one sunk panel. */
.tk-said { margin-top: 0.5rem; padding: 0.75rem 1rem 1rem; border-radius: 1rem; background: var(--tk-inset); }
.tk-said > p { margin: 0; color: var(--tk-ink); font-size: var(--tk-fs-row); line-height: var(--tk-lh-row); }
.tk-said .ui-trail i { background: var(--tk-inset); }
.tk-said .ui-trail .tr-said { padding: 0.75rem 0 0; border-top: 1px solid var(--tk-line); border-radius: 0; background: none; }

/* ---- Card detail (added with slice 8): the panel's title rows and links, the Activity thread, and the desk shell with the open item beside its list. ---- */

/* A panel row's mark is 18px. A tall row, whose value is a title (Its ask, Ticket), sets the title in full at the right, with the bar and its percent under it; a link inside a value reads in ink. */
.ui-pr .k .glyph { width: 1.125rem; height: 1.125rem; stroke-width: 1.8; }
.ui-pr.tall { align-items: flex-start; padding: 0.875rem 0; }
.ui-pr.tall .v { flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.ui-pr.tall .v > .wt { overflow: visible; white-space: normal; }
.ui-pr.tall .bp { display: flex; align-items: center; gap: 0.5rem; }
.ui-pr.tall .bp .ui-bar { width: 6rem; }
.ui-props.ui-tk { margin-top: 1.5rem; }
.ui-pr .v a { position: relative; color: var(--tk-ink); text-decoration: underline; text-decoration-color: var(--tk-line); text-underline-offset: 3px; }
.ui-pr .v a::after { content: ''; position: absolute; inset: -0.75rem 0; }

/* A card's Activity: under its label, one sunk group of steps in plain words, each with its time at the right, the note that went with it, and on a ticket the card it is on. */
.ui-act { margin-bottom: 0; list-style: none; }
.ui-act .ui-pr { flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.75rem 0; }
.ui-act .aw { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; }
.ui-act .aw b { flex: 1; min-width: 0; color: var(--tk-ink); font-weight: 500; }
.ui-act .aw b a { position: relative; color: inherit; text-decoration: underline; text-decoration-color: var(--tk-line); text-underline-offset: 3px; }
.ui-act .aw b a::after { content: ''; position: absolute; inset: -0.8125rem -0.25rem; }
.ui-act time { flex: none; color: var(--tk-text-tertiary); font-size: var(--tk-fs-small); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-act .th-n { color: var(--tk-text-secondary); font-size: var(--tk-fs-meta); line-height: 1.25rem; }
.ui-act .on { max-width: 100%; color: var(--tk-text-tertiary); font-size: var(--tk-fs-meta); line-height: 1.25rem; text-decoration: none; }

/* The desk (64rem and wider) as the approved prototype draws it: one filled screen with no page scroll, 24px around. The head across (where you are, the 32px title, one line
   of what it holds, the controls at its right), then 12 columns with 16px gutters to the foot. A column is a stack: its last card grows and its rows scroll inside, and a column
   that holds more than it shows scrolls as a whole. The open item is a card of its own beside its list: its body scrolls, its title is never cut. */
@media (min-width: 64rem) {
  body:has(.ui-desk) { height: 100vh; padding-bottom: 0; overflow: hidden; }
  main:has(.ui-desk) { max-width: none; height: 100vh; margin: 0; padding: 1.5rem; overflow: hidden; }
  main:has(.ui-desk) > #board { height: 100%; }
  .ui-desk { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
  .ui-dhead { display: flex; flex: none; align-items: flex-end; gap: 1rem; }
  .ui-dhead .tx { flex: 1; min-width: 0; }
  .ui-dhead .crumb { margin: 0; color: var(--tk-text-tertiary); font-size: var(--tk-fs-meta); line-height: 1.25rem; } .ui-dhead .crumb span { margin: 0 0.25rem; }
  .ui-dhead h1 { margin: 0; color: var(--tk-ink); font-size: 2rem; line-height: 2.5rem; font-weight: 500; letter-spacing: -0.012em; outline: none; }
  .ui-dhead .tx > p:last-child { margin: 0.25rem 0 0; color: var(--tk-text-secondary); font-size: 0.9375rem; line-height: 1.5rem; }
  .ui-dhead .acts { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.25rem; }
  .ui-dhead .acts .ui-seg { min-width: 17.5rem; margin: 0; }
  .ui-dhead .acts .bulk { margin: 0; } .ui-dhead .acts .bulk button { min-height: 2.5rem; padding: 0 0.75rem; border-radius: 1.25rem; background: none; color: var(--tk-ink); font-size: var(--tk-fs-row); font-weight: 500; }
  .ui-dgrid { display: grid; flex: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 1rem; min-height: 0; }
  .ui-dgrid > * { min-width: 0; min-height: 0; }
  .ui-dgrid > .s4 { grid-column: span 4; } .ui-dgrid > .s8 { grid-column: span 8; } .ui-dgrid > .s12 { grid-column: 1 / -1; }
  .ui-col { display: flex; flex-direction: column; gap: 1rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .ui-col > * { flex: none; margin: 0; } .ui-col > .grow { flex: 1 1 0; min-height: 14.5rem; } .ui-col > .half { flex: 0 1 auto; min-height: 0; max-height: calc(50% - 0.5rem); }
  .ui-col::-webkit-scrollbar, .ui-pane::-webkit-scrollbar, .ui-pane .pbody::-webkit-scrollbar { display: none; }
  /* The open item: 20px over its head, 24px at its sides; two parts side by side split 3 : 2 with 24px between, or one. Past its foot it fades while it holds more. */
  .ui-pane { min-height: 0; padding: 1.25rem 1.5rem 1.5rem; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  .ui-pane.two, .ui-pane .pbody { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 1.5rem; align-content: start; }
  .ui-pane :is(.pmain, .pside) { min-width: 0; }
  .ui-pane .pside > .ui-dl:first-child { margin-top: 0.75rem; }
  .ui-col.fades:not(.at-end), .ui-pane.fades:not(.at-end), .ui-pane .pbody.fades:not(.at-end) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent); }
  .ui-pane .ui-shd { display: flex; align-items: center; gap: 0.5rem; height: 2rem; margin: 0; color: var(--tk-text-tertiary); font-size: var(--tk-fs-row); line-height: 1.25rem; }
  .ui-pane .ui-shd > span:not(.ui-icon) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ui-pane .ui-shd .ui-icon { width: 1.25rem; height: 1.25rem; border-radius: 0.3125rem; box-shadow: none; } .ui-pane .ui-shd .ui-icon :is(img, .mono, svg) { width: 1.25rem; height: 1.25rem; }
  .ui-pane .ui-shd .ui-icon .mono { font-size: 0.5rem; line-height: 1.25rem; }
  .ui-pane .dt { margin: 0.5rem 0 0; color: var(--tk-ink); font-size: 1.5rem; line-height: 2rem; font-weight: 500; letter-spacing: -0.017em; text-wrap: wrap; overflow-wrap: anywhere; outline: none; }
  .ui-pane .dt.long { font-size: 1.125rem; line-height: 1.625rem; }
  .ui-pane .dp { margin: 0.5rem 0 0; color: var(--tk-text-secondary); font-size: 0.9375rem; line-height: 1.5rem; }
  /* An ask's answers stay in view: the ask and what it touches scroll above a hairline, and under it the answers as cards side by side, then the note, Ask me later and Answer on one line. */
  .ui-pane.ask2 { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .ui-pane.ask2 > .pbody { flex: 1 1 auto; min-height: 0; padding: 1.25rem 1.5rem 1rem; overflow: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  .ui-pane.ask2 > .ppin { flex: none; max-height: 65%; padding: 1rem 1.5rem 1.25rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border-top: 1px solid var(--tk-line); }
}

/* The pending step and receipt beside a composer share the feedback trail's new-look tokens. */
.ui-send { scroll-margin-block: 4.5rem; margin: 0.5rem 0; color: var(--tk-text-secondary); font-size: var(--tk-fs-meta); line-height: var(--tk-lh-meta); }
.ui-send[hidden] { display: none; }
.ui-send button { color: var(--tk-ink); background: none; border: 0; min-height: 2.75rem; text-decoration: underline; }
[aria-busy="true"] { opacity: 0.65; }
.foot:has(> .ui-send) { flex-wrap: wrap; }
:is(.design-review, .dz-info, .design-viewer-panel) .foot > .ui-send { flex: 0 0 100%; }

/* Shared detail navigation uses the same ink and surface as the existing header. */
.detail-sequence { display:flex; align-items:center; gap:2px; margin-inline-start:auto; flex-shrink:0; }
.detail-sequence button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--tk-r-ctl); background:transparent; color:inherit; cursor:pointer; font-size:28px; }
.detail-sequence button:hover:not(:disabled) { background:var(--tk-inset); }
.detail-sequence button:disabled { opacity:.3; cursor:default; }
.detail-sequence .position { white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; }
@media(max-width:639px) { :is(.sh-head,.ev-shd,.rp-shd,.tk-shd,.dz-oh):has(.detail-sequence) { flex-wrap:wrap; } }

:is(.sh-head,.ui-pane .ui-shd,#reader .rp-shd):has(.detail-sequence) { height:auto; min-height:44px; flex-wrap:wrap; }
.sh-head:has(.detail-sequence) .sh-lab, .ui-pane .ui-shd:has(.detail-sequence) > span:not(.ui-icon), #reader .rp-shd:has(.detail-sequence) .rp-what { flex:1 0 auto; flex-wrap:wrap; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:374px) { .ask-sheet .sh-head .detail-sequence { flex-basis:100%; justify-content:flex-end; } }