/* Fleet's interface: the dashboard window's screens and the orb's chat panel (docs/DESIGN-CORE.md §7).
   Values only from tokens.css (DESIGN.md DS-T1..T3); the signal colour only where the owner is needed (DS-A2):
   `.count.signal`, `.status[data-s="waiting"]`, `.act.call[open]`. Dark by default, light from the same markup.
   The bundled fonts are loaded by web/js/fonts.js, named from the tokens.
   Three materials, lit from above like the app icon (DESIGN.md "Materials"): a tile (raised, pale), a ball (the icon's
   glossy sphere: the one action of a region, the current place) and a well (sunken). One per component. */

* { box-sizing: border-box; }
/* Where a ball is lit from (DESIGN.md Materials): the top by default; over a control it follows the pointer
   (web/js/glint.js), eased so the light slides rather than jumps. */
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --gw { syntax: "<length-percentage>"; inherits: false; initial-value: 130%; }
@property --gh { syntax: "<length-percentage>"; inherits: false; initial-value: 160%; }
.btn-primary, .option.rec, .stop-btn, .send-btn, .nav-item[aria-current] { transition: --gx var(--motion-duration-slow) var(--motion-easing-standard), --gy var(--motion-duration-slow) var(--motion-easing-standard), --gw var(--motion-duration-slow) var(--motion-easing-standard), --gh var(--motion-duration-slow) var(--motion-easing-standard); }
/* The ball has one light (owner 2026-10-27): at rest the soft oval on top; under the pointer the same light gathers into
   a circle there and follows it, the rest of the ball in its shade. */
.btn-primary:hover:not(:disabled), .option.rec:hover, .stop-btn:hover, .send-btn:hover:not(:disabled), .nav-item[aria-current]:hover { --gw: var(--size-control-lg); --gh: var(--size-control-lg); }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-canvas); color: var(--text-primary);
  font-family: var(--font-family-ui); font-size: var(--type-body-size); line-height: var(--type-body-line);
  font-feature-settings: var(--font-features-ui); -webkit-font-smoothing: antialiased;
}
a { color: var(--text-link); text-underline-offset: var(--space-1); }
p { margin: 0; }
p + p { margin-top: var(--space-4); }
:focus-visible { outline: var(--focus-ring-width) solid var(--border-focus); outline-offset: var(--focus-ring-offset); }
.sr-only { position: absolute; width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ the dashboard's frame */
.shell { display: flex; height: 100vh; padding: var(--space-5); gap: var(--space-5); }
/* The lead's panel docked on the right in a browser (dashboard.js), the orb panel's width. */
.dock { width: var(--orb-panel-width); flex-shrink: 0; border-radius: var(--radius-panel); background: var(--bg-sunken); box-shadow: var(--elevation-tile); overflow: hidden; }
.dock-frame { display: block; width: 100%; height: 100%; border: 0; }
.nav {
  width: var(--layout-nav-collapsed); flex-shrink: 0; overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile);
  border-radius: var(--radius-card);
  padding: var(--space-6) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-5);
}
/* A place: a round raised button holding its icon; the current place is a ball. Its name is its label and title. */
.nav-item {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--size-control-lg); height: var(--size-control-lg); padding: 0; border: 0; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control);
  color: var(--text-secondary); text-decoration: none; font: inherit; cursor: pointer;
}
.nav-item:hover { background: var(--bg-raised); color: var(--text-primary); }
.nav-label { display: none; }
.nav-icon { display: inline-grid; place-items: center; width: var(--size-icon); height: var(--size-icon); }
.nav-icon svg { width: var(--size-icon); height: var(--size-icon); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item[aria-current] { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-ball); color: var(--ball-on); }
.nav-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-top: var(--space-6); }
/* A count is a small sphere (DESIGN.md Badge): tomato when it is what waits on the person, a well when it is just
   a number. */
.count {
  display: inline-grid; place-items: center; flex-shrink: 0;
  font-size: var(--type-caption-size); line-height: 1; font-weight: var(--font-weight-semibold);
  font-feature-settings: var(--font-features-tabular);
  min-width: var(--size-badge); height: var(--size-badge); padding: 0 var(--space-3); border-radius: var(--radius-pill); text-align: center;
  color: var(--text-secondary); background: var(--bg-sunken); box-shadow: var(--elevation-well); border: 0;
}
.count.signal { color: var(--signal-onSolid); background: radial-gradient(130% 160% at 50% 0%, var(--signal-hi) 0%, var(--signal-solid) 70%); box-shadow: var(--elevation-1); }
.nav-item .count { position: absolute; top: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); box-shadow: var(--elevation-ring-surface); }

/* The containing block of what is placed inside it (.sr-only), which would otherwise stretch the window. */
.main { position: relative; flex: 1; min-width: 0; overflow-y: auto; padding: var(--space-6) var(--space-9) var(--layout-page-padding); }
.screen { max-width: var(--orb-dashboard-max-width); display: flex; flex-direction: column; gap: var(--space-8); }

/* ------------------------------------------------------------ shared pieces */
.page-head { display: flex; flex-direction: column; gap: var(--space-2); }
.page-title { margin: 0; font-size: var(--type-page-size); line-height: var(--type-page-line); font-weight: var(--type-page-weight); letter-spacing: var(--type-page-tracking); }
.page-sub { color: var(--text-secondary); font-size: var(--type-meta-size); line-height: var(--type-meta-line); max-width: var(--layout-content-max-reading); }
.board-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-8); flex-wrap: wrap; }
.stats { display: flex; gap: var(--space-10); flex-wrap: wrap; }
.stat { display: flex; align-items: baseline; gap: var(--space-4); color: var(--text-secondary); }
.stat-n { font-size: var(--type-stat-size); line-height: var(--type-stat-line); font-weight: var(--type-stat-weight); letter-spacing: var(--type-stat-tracking); color: var(--text-primary); font-feature-settings: var(--font-features-tabular); }
.stat.need .stat-n { color: var(--signal-solid); }
/* The bar: the products to narrow to on the left, how to see them and the one action on the right. */
.bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.bar-end { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.filters { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filter { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--size-control); padding: 0 var(--space-7); border-radius: var(--radius-pill);
  color: var(--text-primary); text-decoration: none; white-space: nowrap; box-shadow: var(--elevation-ring); }
.filter:hover { background: var(--bg-hover); }
.filter[aria-current="page"] { background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); font-weight: var(--font-weight-medium); }
.btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* A product's mark (DESIGN.md ProductMark): its hue as a dot before its name, never a fill. */
.dot { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); flex-shrink: 0; background: var(--text-muted); }
.dot.p1 { background: var(--product-1); } .dot.p2 { background: var(--product-2); } .dot.p3 { background: var(--product-3); }
.dot.p4 { background: var(--product-4); } .dot.p5 { background: var(--product-5); } .dot.p6 { background: var(--product-6); }
.crumb { font-size: var(--type-meta-size); color: var(--text-secondary); }
.group { display: flex; flex-direction: column; gap: var(--space-5); }
.group-title, .panel-title { margin: 0; font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }
.group-hint { color: var(--text-muted); font-weight: var(--font-weight-regular); }
.label-caps { margin: 0 0 var(--space-3); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--font-weight-medium); color: var(--text-muted); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-card-gap); }
.panel {
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile); border-radius: var(--radius-card);
  padding: var(--layout-card-padding) var(--space-8); display: flex; flex-direction: column; gap: var(--space-3);
}
.head-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; }
.empty { color: var(--text-muted); }
.empty.bad { color: var(--danger-fg); }
.error-line { color: var(--danger-fg); font-size: var(--type-meta-size); }
.error-line[hidden] { display: none; }
.skel { height: var(--layout-board-row); border-radius: var(--radius-card); background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.bullets { margin: 0; padding-left: var(--space-7); display: flex; flex-direction: column; gap: var(--space-2); }
.cell-sub { display: block; color: var(--text-muted); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.row-meta { color: var(--text-muted); font-size: var(--type-meta-size); }
.row-meta.bad { color: var(--danger-fg); }
.foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding-top: var(--space-6); border-top: var(--size-hairline) solid var(--border-subtle); }

/* status: a pill with a dot and its words (DESIGN.md StatusPill); the words carry the meaning, the colour repeats it */
.status { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-3); max-width: 100%; min-height: var(--size-badge);
  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-4); border-radius: var(--radius-pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-secondary); background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.status::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--status-idle-dot); flex-shrink: 0; }
.status[data-s="working"] { color: var(--live-fg); background: var(--live-bg); box-shadow: var(--elevation-0); }
.status[data-s="working"]::before { background: var(--live-mark); }
.status[data-s="review"] { color: var(--ball-on); background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-ball); }
.status[data-s="review"]::before { background: var(--ball-on); }
.status[data-s="ended"]::before { background: var(--status-ended-dot); }
.status[data-s="error"] { color: var(--status-error-fg); background: var(--danger-bg); box-shadow: var(--elevation-0); }
.status[data-s="error"]::before { background: var(--status-error-dot); }
.status[data-s="waiting"] { color: var(--signal-fg); background: var(--signal-bg); box-shadow: var(--elevation-0); }
.status[data-s="waiting"]::before { background: var(--signal-dot); }

/* controls */
/* A button is a pill: raised by default; the one action a region is for is a ball (.btn-primary). Pressed, it sinks. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--size-control); padding: 0 var(--space-7);
  border-radius: var(--radius-pill); border: 0; background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); white-space: nowrap;
  color: var(--text-primary); font: inherit; font-weight: var(--font-weight-medium); text-decoration: none; cursor: pointer;
}
.btn:hover:not(.btn-primary) { background: var(--bg-raised); }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .option:active:not(:disabled), .seg-btn:active, .chip:active { transform: translateY(var(--size-hairline)); box-shadow: var(--elevation-pressed); }
.btn:disabled { color: var(--text-disabled); cursor: default; box-shadow: var(--elevation-0); }
.btn-primary { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-ball); color: var(--ball-on); }
.btn-primary:disabled { color: var(--ball-on); opacity: 0.45; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--text-link); text-decoration: underline; text-underline-offset: var(--space-1); cursor: pointer; }
.field {
  flex: 1; min-width: 0; min-height: var(--size-control); padding: 0 var(--space-6); font: inherit; color: var(--text-primary);
  background: var(--bg-sunken); box-shadow: var(--elevation-well); border: 0; border-radius: var(--radius-pill);
}
/* A segmented switch: a groove, the chosen option a tile lifted out of it. */
.seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.seg-btn { font: inherit; font-size: var(--type-meta-size); min-height: var(--size-control-sm); padding: 0 var(--space-6); border-radius: var(--radius-pill); background: none; border: 0; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.seg-btn:hover { color: var(--text-primary); }
.seg-btn[aria-pressed="true"] { background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-primary); font-weight: var(--font-weight-medium); }

/* ------------------------------------------------------------ board */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--layout-column-width), 1fr)); gap: var(--layout-card-gap); }
/* A task on the board: a tile (DESIGN.md TaskCard). Up next is no tile, only an outline on the canvas. */
.card {
  display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; min-height: var(--layout-card-min-height); padding: var(--space-6) var(--space-6) var(--space-7) var(--space-8);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile); border: 0; border-radius: var(--radius-panel);
  color: var(--text-primary); text-decoration: none; transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.card:hover { transform: translateY(calc(-1 * var(--size-hairline))); }
.card-queued { background: transparent; box-shadow: var(--elevation-ring); }
.card-head { display: flex; align-items: center; gap: var(--space-4); min-height: var(--size-control); }
.card-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-4); font-size: var(--type-meta-size); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-go { width: var(--size-control); height: var(--size-control); }
.card .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.card-now { margin-top: calc(-1 * var(--space-2)); font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-secondary); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: auto; min-width: 0; }
.card-foot .status { align-self: center; min-width: 0; min-height: var(--size-control-sm); }
.age { flex: none; display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--type-age-size); line-height: var(--type-age-line); letter-spacing: var(--type-age-tracking); font-feature-settings: var(--font-features-tabular); }
.age-unit { font-size: var(--type-meta-size); color: var(--text-secondary); letter-spacing: 0; }
/* The board's switches (DESIGN-CORE §7): tasks or projects on the left, how tasks are grouped on the right. */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.toolbar-group { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--text-muted); font-size: var(--type-meta-size); }
.group-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.group-sub { color: var(--text-muted); font-size: var(--type-meta-size); }
.group-goal { color: var(--text-secondary); font-size: var(--type-meta-size); line-height: var(--type-meta-line); max-width: var(--layout-content-max-reading); margin-top: calc(-1 * var(--space-3)); }
.link-btn { align-self: flex-start; font: inherit; font-size: var(--type-meta-size); color: var(--text-secondary); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: var(--space-1); }
/* A project, one row (after Linear's projects list): name with its product and health, its goal, its progress. */
.project-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: center; cursor: pointer; }
.project-row:hover { background: var(--bg-hover); }
.project-name { display: flex; align-items: center; gap: var(--space-4); min-width: 0; font-weight: var(--font-weight-medium); }
.project-name .status { font-weight: var(--font-weight-regular); }
.project-product { color: var(--text-muted); font-size: var(--type-meta-size); font-weight: var(--font-weight-regular); }
.project-goal { min-width: 0; color: var(--text-secondary); font-size: var(--type-meta-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-facts { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-5); color: var(--text-secondary); font-size: var(--type-meta-size); font-feature-settings: var(--font-features-tabular); white-space: nowrap; }
.ring { width: var(--size-icon); height: var(--size-icon); transform: rotate(-90deg); flex-shrink: 0; }
.ring-bg, .ring-fg { fill: none; stroke-width: 2.5; }
.ring-bg { stroke: var(--bg-selected); }
.ring-fg { stroke: var(--live-mark); stroke-linecap: round; }
/* A shared product's people (mockup https://claude.ai/artifact/EhXpLByr7cdSY3GSmX2m79, section 4; Linear's avatars):
   a round initial on the person's own hue; offline faded. Who is in folds into one control at the end of the bar. */
.avatar { flex-shrink: 0; display: inline-grid; place-items: center; width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-pill);
  font-size: var(--type-caption-size); line-height: 1; font-weight: var(--font-weight-semibold); color: var(--avatar-fg); background: var(--avatar-1); }
.avatar.a2 { background: var(--avatar-2); } .avatar.a3 { background: var(--avatar-3); } .avatar.a4 { background: var(--avatar-4); }
.avatar.a5 { background: var(--avatar-5); } .avatar.a6 { background: var(--avatar-6); }
.avatar.off { opacity: 0.5; }
.people-fold { position: relative; }
.people-sum { list-style: none; cursor: pointer; white-space: nowrap; }
.people-sum::-webkit-details-marker { display: none; }
.people-fold[open] .row-chev { transform: rotate(180deg); }
.av-stack { display: inline-flex; }
.av-stack .avatar { box-shadow: var(--elevation-ring-surface); }
.av-stack .avatar + .avatar { margin-left: calc(-1 * var(--space-3)); }
.people-menu { position: absolute; right: 0; top: calc(100% + var(--space-4)); z-index: var(--z-popover); width: var(--layout-column-width); display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-card); background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-3); }
.people-menu .row-meta { margin: var(--space-2) 0 0; }
.person { display: flex; align-items: center; gap: var(--space-4); min-width: 0; font-size: var(--type-meta-size); color: var(--text-primary); }
.person .row-meta { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.on .avatar { outline: var(--size-rule) solid var(--live-mark); outline-offset: var(--size-hairline); }
.wait-row { align-items: center; justify-content: flex-start; }
.wait-row .row-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title { font-size: var(--type-card-title-size); line-height: var(--type-card-title-line); font-weight: var(--type-card-title-weight); letter-spacing: var(--type-card-title-tracking); text-wrap: balance; }
.card-meta { font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-secondary); }
.fold > summary { cursor: pointer; color: var(--text-secondary); padding: var(--space-3) 0; }
.rows { list-style: none; margin: 0; padding: 0; background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile); border-radius: var(--radius-card); overflow: hidden; }
.rows-signal { box-shadow: var(--elevation-tile), var(--elevation-ring-strong); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding: var(--space-6) var(--space-7); }
.row + .row { border-top: var(--size-hairline) solid var(--border-subtle); }
.row-title { flex: 0 0 var(--layout-column-width); font-weight: var(--font-weight-medium); text-decoration: none; }
.row-text { flex: 1; min-width: 0; }
/* A glance line never grows into a paragraph: two lines at most, the rest on the task's page. */
.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.row-link { white-space: nowrap; font-size: var(--type-meta-size); }
/* A row that opens in place (the owner's skills): its summary is the row, a drawn chevron turns when open. */
.row-fold + .row-fold { border-top: var(--size-hairline) solid var(--border-subtle); }
.row-fold summary { list-style: none; cursor: pointer; }
.row-fold summary::-webkit-details-marker { display: none; }
.row-fold summary:hover { background: var(--bg-hover); }
.row-chev { flex-shrink: 0; align-self: center; width: var(--size-icon-sm); height: var(--size-icon-sm); fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }
.row-fold details[open] .row-chev { transform: rotate(180deg); }
.row-open { display: grid; gap: var(--space-4); padding: 0 var(--space-7) var(--space-6) calc(var(--space-7) + var(--layout-column-width) + var(--space-6)); }
.skill-steps { margin: 0; padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
.ask-name { color: var(--text-primary); font-weight: var(--font-weight-medium); }
.act .skill-steps { margin-block: var(--space-2) var(--space-4); }

/* ------------------------------------------------------------ asks */
/* An ask: a tile (DESIGN.md AskCard). What it waits for is the tomato dot in its head, not the card's colour. */
.act {
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile); border: 0; border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--orb-dashboard-min-width);
}
.act.call[open] > .call-head + .ask-meta { margin-top: calc(-1 * var(--space-3)); }
.act.call[open] > .call-head { display: flex; align-items: center; gap: var(--space-4); color: var(--signal-fg); font-weight: var(--font-weight-medium); cursor: pointer; }
.act.call[open] > .call-head::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--signal-dot); flex-shrink: 0; }
.call-head { list-style: none; }
.call-head::-webkit-details-marker { display: none; }
.ask-meta { font-size: var(--type-meta-size); color: var(--text-secondary); }
.ask-question { margin: 0; font-size: var(--type-card-title-size); line-height: var(--type-card-title-line); font-weight: var(--font-weight-medium); letter-spacing: var(--type-card-title-tracking); text-wrap: balance; }
.ask-why { color: var(--text-secondary); }
/* An answer is a whole row (DESIGN.md OptionRow): raised; the recommended one is a ball. */
.options { display: flex; flex-direction: column; gap: var(--space-3); }
.option {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; text-align: left; font: inherit;
  min-height: calc(var(--size-control) + var(--space-4)); padding: var(--space-5) var(--space-7); border-radius: var(--radius-card); cursor: pointer;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-primary); border: 0;
}
.option.rec { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-ball); color: var(--ball-on); }
.option.rec .option-detail { color: var(--ball-on); opacity: 0.72; }
/* A choice made in place (setup.js: the model a product runs on), shown as chosen until it is kept. */
.option[aria-pressed="true"] { box-shadow: var(--elevation-control), var(--elevation-ring-ink); }
.option:hover:not(.rec) { background: var(--bg-raised); }
.option:disabled { color: var(--text-disabled); }
.option-detail { color: var(--text-muted); font-size: var(--type-meta-size); }
/* What the person does before answering (screen 10): numbered, a command copied with a click, a secret in place. */
.ask-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.step { display: flex; gap: var(--space-5); }
.step-mark {
  flex-shrink: 0; width: var(--size-badge); height: var(--size-badge); border-radius: var(--radius-pill); display: flex;
  align-items: center; justify-content: center; font-size: var(--type-meta-size); font-weight: var(--font-weight-semibold);
  background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-primary);
}
.step.done .step-mark { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--live-hi) 0%, var(--live-solid) 60%, var(--live-lo) 100%); color: var(--live-fg); box-shadow: var(--elevation-1); }
.step.done .step-say { color: var(--text-secondary); }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.step-run {
  position: relative; background: var(--bg-sunken); box-shadow: var(--elevation-well); border: 0;
  border-radius: var(--radius-control); padding: var(--space-5) var(--space-11) var(--space-5) var(--space-6);
}
.step-run code { display: block; }
.step-copy {
  position: absolute; top: var(--space-3); right: var(--space-3); min-width: var(--size-hit-min); height: var(--size-hit-min);
  display: flex; align-items: center; justify-content: center; padding: 0 var(--space-3); cursor: pointer;
  border: 0; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-primary); font: inherit;
}
.step-copy:hover { background: var(--bg-raised); }
.step-copied { display: flex; color: var(--success-fg); }
.step-link { font-size: var(--type-meta-size); }
/* A page to open: its QR beside the step's words, not under them. */
.step-body:has(> .step-qr-box) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-7); row-gap: var(--space-3); align-content: start; }
.step-body:has(> .step-qr-box) > :not(.step-qr-box) { grid-column: 1; }
.step-body > .step-qr-box { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.step-qr-box { margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* Dark on white in both themes: a phone camera reads it as printed. */
.step-qr { width: var(--size-qr); height: var(--size-qr); color: var(--chart-qr-ink); background: var(--chart-qr-paper); border-radius: var(--radius-control); box-shadow: var(--elevation-control); }
.own { display: flex; flex-direction: column; gap: var(--space-3); }
.own-label { font-size: var(--type-meta-size); color: var(--text-secondary); }
.own-row { display: flex; gap: var(--space-4); }

/* ------------------------------------------------------------ task */
.table-box { overflow-x: auto; background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile); border-radius: var(--radius-card); }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: var(--font-weight-regular); font-size: var(--type-meta-size); color: var(--text-muted); background: transparent; border-bottom: var(--size-hairline) solid var(--border-subtle); }
.table th, .table td { padding: var(--space-5) var(--space-7); vertical-align: top; }
.table tbody tr + tr td { border-top: var(--size-hairline) solid var(--border-subtle); }
.table td:last-child { text-align: right; white-space: nowrap; }
.overturn-row td { background: var(--bg-hover); }
.overturn { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.actions { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); }
.log > summary { display: flex; justify-content: space-between; padding-top: var(--space-6); border-top: var(--size-hairline) solid var(--border-subtle); }
.log-body { padding-top: var(--space-5); }
.log-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-family: var(--font-family-mono); font-size: var(--type-code-size); line-height: var(--type-code-line); white-space: pre-wrap; word-break: break-word; }
/* What a shared product shows its members (✓) and what stays the person's own (—). */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.ticks li::before { content: "✓"; color: var(--text-secondary); margin-right: var(--space-4); }
.ticks.no li::before { content: "—"; color: var(--text-muted); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-5) var(--space-9); margin: 0; }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; font-feature-settings: var(--font-features-tabular); }

/* ------------------------------------------------------------ a task as a picture (DESIGN.md DS-L5, amended 2026-10-19) */
.headline { font-weight: var(--font-weight-medium); }
/* the stage track: a mark per stage, the line solid up to where the task is */
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.track-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-muted); }
.track-step::before { content: ""; position: absolute; top: calc(var(--size-badge) / 2 - var(--size-hairline)); left: -50%; right: 50%; height: var(--size-rule); background: var(--bg-selected); }
.track-step:first-child::before { display: none; }
.track-step[data-s="done"]::before, .track-step[data-s="current"]::before, .track-step[data-s="gap"]::before { background: var(--text-primary); }
.track-mark { position: relative; width: var(--size-badge); height: var(--size-badge); border-radius: var(--radius-pill); border: 0; background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.track-step[data-s="done"] .track-mark { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-1); }
.track-step[data-s="current"] .track-mark { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--live-hi) 0%, var(--live-solid) 60%, var(--live-lo) 100%); box-shadow: var(--elevation-1); }
.track-step[data-s="gap"] .track-mark { box-shadow: var(--elevation-ring-ink); }
.track-step[data-s="done"], .track-step[data-s="gap"] { color: var(--text-secondary); }
.track-step[data-s="current"] { color: var(--text-primary); font-weight: var(--font-weight-medium); }
/* A stage that began opens its step (screen 9): the whole step is the button, it draws nothing of its own. */
.track-btn { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-control); }
.track-btn:hover .track-label { text-decoration: underline; text-underline-offset: var(--space-1); }
.track-btn[aria-expanded="true"] .track-label { text-decoration: underline; text-underline-offset: var(--space-1); }
.track-doing { max-width: var(--layout-column-width); color: var(--text-secondary); font-weight: var(--font-weight-regular); }
.panel.step { flex-direction: column; max-height: calc(var(--layout-board-row) * 7); }
.step-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.step-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); }
.step-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.step-line { display: flex; gap: var(--space-5); align-items: baseline; }
.step-at { flex: 0 0 auto; min-width: var(--space-11); font-family: var(--font-family-mono); font-size: var(--type-caption-size); color: var(--text-muted); }
.step-now { color: var(--text-primary); font-weight: var(--font-weight-medium); }
.step-next { color: var(--text-muted); }
.clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* The compact stage track on a card: segments in a groove, done in ink, now in lime. */
.track-mini { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.track-bit { width: var(--space-7); height: var(--space-3); border-radius: var(--radius-pill); background: transparent; }
.track-bit[data-s="done"] { background: var(--text-primary); }
.track-bit[data-s="current"] { background: var(--live-mark); }
.track-bit[data-s="gap"] { background: var(--border-strong); }
/* screenshots */
/* What the task tests now: its browser live, what it checks beside it (owner 2026-10-29, mockup approved). */
.live { margin-bottom: var(--space-7); }
.live-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-7); align-items: start; margin-top: var(--space-4); }
.live-frame { display: block; max-width: calc(var(--layout-board-row) * 10); max-height: calc(var(--layout-board-row) * 7); border-radius: var(--radius-card); box-shadow: var(--elevation-2); object-fit: contain; }
.live-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.live-side .status { align-self: flex-start; margin: 0; }
.mono.live-url { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.split.solo { grid-template-columns: minmax(0, 1fr); }
.shot-box { display: flex; justify-content: center; }
.shot-frame { max-width: 100%; max-height: calc(var(--layout-board-row) * 6); border-radius: var(--radius-card); box-shadow: var(--elevation-2); object-fit: contain; }
.shot-thumb { display: block; width: 100%; height: calc(var(--layout-board-row) * 2); object-fit: cover; object-position: top; background: var(--bg-sunken); }
.shot-none { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--type-meta-size); background: var(--bg-sunken); box-shadow: var(--elevation-well); min-height: calc(var(--layout-board-row) * 2); }
.shot-frame.shot-none { width: 100%; }
/* A picture opens large on a press (zoom.js). */
.zoom-open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; }
.expect .zoom-open { flex: 0 0 auto; }
.zoom { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; padding: var(--space-6); border: 0; background: transparent; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); cursor: zoom-out; }
.zoom[open] { display: flex; }
.zoom::backdrop { background: var(--bg-overlay); }
.zoom-img { max-width: 100%; max-height: calc(100vh - var(--space-6) * 4); object-fit: contain; border-radius: var(--radius-card); box-shadow: var(--elevation-2); background: var(--bg-raised); }
.zoom-hint { font-size: var(--type-meta-size); color: var(--text-secondary); background: var(--bg-raised); padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); }
/* the task screen */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-7); align-items: start; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.tl-item { display: flex; gap: var(--space-5); align-items: flex-start; }
.tl-mark {
  flex-shrink: 0; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); display: inline-grid; place-items: center;
  font-size: var(--type-caption-size); background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); border: 0; color: var(--text-secondary);
}
.tl-mark[data-actor="owner"] { color: var(--text-primary); }
.tl-mark[data-actor="fleet"] { background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-1); color: var(--ball-on); }
.tl-text { min-width: 0; padding-top: var(--space-1); }
.chips-box { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--size-hairline) solid var(--border-subtle); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* A product's approved look: its colours and type, drawn from its DESIGN.md (the values are the product's data). */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.swatch-chip { width: var(--size-control); height: var(--size-control); border-radius: var(--radius-pill); box-shadow: var(--elevation-control); }
.type-specimens { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.type-sample { font-size: var(--type-label-size); font-weight: var(--font-weight-medium); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; white-space: nowrap; text-align: left;
  font: inherit; font-size: var(--type-meta-size); line-height: var(--type-meta-line); min-height: var(--size-control-sm); padding: var(--space-1) var(--space-6); cursor: pointer;
  border-radius: var(--radius-pill); border: 0; background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-primary);
}
.chip:hover { background: var(--bg-raised); }
.chip[aria-expanded="true"] { background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.chip-alone { background: transparent; box-shadow: var(--elevation-ring-strong); }
.chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip-who { flex-shrink: 0; color: var(--text-muted); }
.chip-detail { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-control); background: var(--bg-sunken); box-shadow: var(--elevation-well); }
.chip-detail[hidden] { display: none; }
.more > summary { padding-top: var(--space-6); border-top: var(--size-hairline) solid var(--border-subtle); }
.more > .stack { padding-top: var(--space-6); }
/* Since you looked (its mockup approved by the owner 2026-10-29): one row per change --
   the task, what changed in its own words, when -- after Linear's Inbox rows (docs/design/inspiration/ref-linear-inbox.webp);
   the idea of showing only what is new after GitHub's "new changes since you last viewed" and Basecamp's Catch up. */
.since-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; }
.chg { display: grid; grid-template-columns: var(--layout-column-width) minmax(0, 1fr) auto; gap: var(--space-7); align-items: baseline; padding: var(--space-6) var(--space-7); }
.chg + .chg { border-top: var(--size-hairline) solid var(--border-subtle); }
.chg-task { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; color: var(--text-primary); text-decoration: none; }
.chg-task:hover .chg-name { text-decoration: underline; }
.chg-key { flex-shrink: 0; color: var(--text-muted); font-size: var(--type-meta-size); }
.chg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); }
.chg-what { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.chg-line b { font-weight: var(--font-weight-semibold); }
.chg-sub { color: var(--text-secondary); font-size: var(--type-meta-size); }
.chg-end { display: flex; align-items: baseline; gap: var(--space-6); white-space: nowrap; }
.chg-age { color: var(--text-muted); font-size: var(--type-meta-size); font-feature-settings: var(--font-features-tabular); }
.chg-was { color: var(--text-muted); text-decoration: line-through; }
.chg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.chg-steps li { display: grid; grid-template-columns: calc(var(--space-10) * 1.5) minmax(0, 1fr); gap: var(--space-4); font-size: var(--type-meta-size); color: var(--text-secondary); }
.chg-more { align-self: flex-start; font-size: var(--type-meta-size); }
@media (max-width: 1100px) { .chg { grid-template-columns: minmax(0, 1fr) auto; } .chg-task { grid-column: 1 / -1; } }
/* The chat's card for it: the milestone card (milestone-linear-project-updates.png) with a clock, the counts in a line,
   home's one line per product. */
.since-card .milestone-head svg { background: var(--bg-sunken); box-shadow: var(--elevation-well); color: var(--text-primary); }
.since-counts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--type-meta-size); color: var(--text-secondary); }
.since-counts b { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.since-products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--type-meta-size); color: var(--text-secondary); }
/* since you looked */
.product { gap: var(--space-4); }
.product-bar { display: flex; gap: var(--space-1); height: var(--space-4); padding: var(--space-1); border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-sunken); box-shadow: var(--elevation-well); box-sizing: content-box; }
.product-part { flex: 1; background: transparent; border-radius: var(--radius-pill); }
.product-part[data-s="done"] { background: var(--text-primary); }
.product-part[data-s="working"] { background: var(--live-mark); }
/* waiting for the person: drawn hollow (the signal colour stays for the words beside it, DS-A2) */
.product-part[data-s="you"] { background: var(--bg-canvas); border: var(--size-hairline) solid var(--text-primary); border-radius: var(--radius-pill); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-7); font-size: var(--type-meta-size); color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-3); }
.legend-item::before { content: ""; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-xs); background: var(--text-muted); }
.legend-item[data-s="done"]::before { background: var(--text-primary); }
.legend .status[data-s="waiting"]::before { background: var(--bg-canvas); border: var(--size-hairline) solid var(--text-primary); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--layout-column-width), 1fr)); gap: var(--layout-card-gap); }
.tile {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-tile-lo)); box-shadow: var(--elevation-tile); border: 0; border-radius: var(--radius-card);
}
.tile-you { box-shadow: var(--elevation-tile), var(--elevation-ring-strong); }
.tile-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--layout-card-padding); }
/* options shown as pictures (a style, a layout) */
/* Each whole and side by side to compare, as wide as the page allows (owner 2026-10-27); stacked on a narrow window. */
.act:has(.options-pics) { max-width: none; }
.options-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--layout-board-row) * 4), 100%), 1fr)); gap: var(--space-5); }
.option-pic { flex-direction: column; align-items: stretch; padding: var(--space-3); gap: var(--space-2); }
.option-pic { padding: var(--space-3) var(--space-3) var(--space-5); }
/* A picture keeps its own colours: the recommended one is ringed in ink, not turned into a ball. */
.option-pic.rec { background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control), var(--elevation-ring-ink); color: var(--text-primary); }
.option-pic.rec .option-detail { color: var(--text-muted); opacity: 1; }
.option-img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: var(--radius-control); background: var(--bg-sunken); }
span.option-img { aspect-ratio: 3 / 4; }
.see-options { align-self: flex-start; }

/* ------------------------------------------------------------ the orb's windows */
/* Owner 2026-11-06 (mockup https://claude.ai/artifact/C5D2Kaubkmzc5ygsGhv3Zd; DS-S1 amended): the panel's tabs, input,
   lines and cards are glass like the orb's puck, standing at the bottom by the orb; the app masks its own blur to them
   (web/js/compact.js `glass`) and lets the pointer through elsewhere. Owner 2026-11-06 (live, over a terminal; mockup
   https://claude.ai/artifact/RTk5opxP8KHc4q16g7TfuL, the translucent variant): behind the conversation alone stands a translucent
   sheet of the same glass, so what is under it does not read through the lines; on it the lines have only their
   hairline (a drop shadow on each, cut at the thread's edge, read as dirt). Tabs, cards and the input are as they were. */
.compact-body { background: transparent; }
.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--orb-glass-blur)) saturate(var(--orb-glass-saturate)); backdrop-filter: blur(var(--orb-glass-blur)) saturate(var(--orb-glass-saturate));
  box-shadow: var(--elevation-glass); border: 0; }
/* In the app the blur is the app's material under each shape: the page's own backdrop filter on a clear web view draws
   a grey slab cut at a compositing tile's edge (owner 2026-11-06, live). */
.compact-body[data-shell="app"] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* In the app the glass's shadow is the app's, around each shape (orb.glass-shadow): the page's own was cut in squares on
   a clear web view (owner 2026-11-06, live). The page keeps the hairline. */
.compact-body[data-shell="app"] { --elevation-glass: var(--elevation-glass-flat); }
.compact-body[data-mode="panel"] .tools-root, .compact-body[data-mode="tools"] .compact, .compact-body[data-mode="tools"] .compact-sheet { display: none; }
.compact-sheet { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: var(--orb-panel-radius); pointer-events: none;
  background: color-mix(in srgb, var(--glass-bg) var(--orb-sheet-tint), transparent); opacity: var(--orb-sheet-opacity); }
.compact-sheet[hidden] { display: none; }
.compact-sheet, .sheeted .compact-thread .glass, .sheeted .working-line { box-shadow: var(--elevation-glass-flat); }
.compact { position: relative; }
.compact { display: flex; flex-direction: column; justify-content: flex-end; height: 100vh; padding: var(--orb-panel-padding); gap: var(--space-4); }
/* With the orb at the top of its screen the input stands at the top, by it, and the conversation hangs below. */
.from-top .compact { flex-direction: column-reverse; }
.compact-thread { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4);
  margin: 0 calc(-1 * var(--orb-panel-padding)) calc(-1 * var(--space-4)); padding: var(--space-8) var(--orb-panel-padding) var(--space-8); }
.compact-thread[hidden] { display: none; }
/* A line: the owner's on the right, the lead's on the left, each a glass bubble. */
.msg { display: flex; flex-direction: column; gap: var(--space-2); align-self: flex-start; max-width: 88%; overflow-wrap: anywhere;
  padding: var(--space-5) var(--space-7); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--space-3); color: var(--text-primary); }
.msg p { margin: 0; }
.msg-mine { align-self: flex-end; max-width: 82%; background: var(--glass-bg-strong); border-radius: var(--radius-card) var(--radius-card) var(--space-3) var(--radius-card); }
.msg-fleet { color: var(--text-secondary); font-size: var(--type-meta-size); }
/* A new line comes in once: its bubble fades in and the lead's words appear in order (owner 2026-11-06, as in Claude). */
.msg-new { animation: msg-fade var(--motion-duration-fast) var(--motion-easing-enter) var(--msg-in-at, 0ms) both; scroll-margin-top: var(--space-8); }
.msg-new .word { animation: msg-fade var(--motion-duration-base) var(--motion-easing-enter) calc(var(--msg-in-at, 0ms) + var(--word-at, 0ms)) both; }
@keyframes msg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes msg-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* A board the lead showed: a compact chip -- its icon, title, "board · live" and ↗ -- that opens it in the dashboard. */
.msg-board { align-self: flex-start; display: flex; align-items: center; gap: var(--space-5); max-width: 88%; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-card); color: var(--text-primary); text-decoration: none; }
.board-thumb { flex-shrink: 0; width: var(--size-control-lg); height: var(--size-control-lg); display: inline-grid; place-items: center; border-radius: var(--radius-control); background: var(--glass-field); color: var(--text-secondary); }
.board-thumb svg, .board-go svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.board-text { display: flex; flex-direction: column; min-width: 0; }
.board-text .card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-go { flex-shrink: 0; color: var(--text-muted); display: inline-grid; place-items: center; }
.msg-board:hover .board-go { color: var(--text-primary); }
.msg-view-inline { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); }
.msg-view-inline .view-host { width: 100%; border: 0; border-radius: var(--radius-control); background: transparent; }
/* A closed conversation's receipt: one line, a check, what it did and when. */
.receipt { align-self: flex-start; display: flex; align-items: center; gap: var(--space-3); max-width: 100%; margin: 0; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  border-radius: var(--radius-pill); font-size: var(--type-meta-size); color: var(--text-primary); }
.receipt svg { flex-shrink: 0; width: var(--size-icon-sm); height: var(--size-icon-sm); fill: none; stroke: var(--live-mark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.receipt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt .row-meta { flex-shrink: 0; white-space: nowrap; }
.compact .error-line { align-self: flex-start; margin: 0; padding: var(--space-3) var(--space-6); border-radius: var(--radius-card); }
.compact-stopped { align-self: flex-start; margin: 0; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); }
.compact-stopped[hidden] { display: none; }
/* Thin pill tabs just above the input (owner 2026-11-06): each a product's dot and name, home an icon; those that do not
   fit go whole into the menu at the strip's end. */
.compact-tabbar { flex-shrink: 0; position: relative; display: flex; align-items: center; gap: var(--space-2); }
.compact-tabbar[hidden] { display: none; }
.compact-tabs { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); overflow: hidden; margin: calc(-1 * var(--space-6)) 0 calc(-1 * var(--space-6)) calc(-1 * var(--orb-panel-padding)); padding: var(--space-6) var(--space-1) var(--space-6) var(--orb-panel-padding); }
.compact-tabs a[hidden] { display: none; }
.compact-tabs a { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: var(--size-control-sm); padding: 0 var(--space-5); font-size: var(--type-meta-size); font-weight: var(--font-weight-medium);
  color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-radius: var(--radius-pill); }
.compact-tabs a[data-tab=""] { width: var(--size-control-sm); padding: 0; }
.compact-tabs a:hover { color: var(--text-primary); }
.compact-tabs a[aria-current="page"] { color: var(--text-primary); }
/* The mark of the tab on show: one chip under the tabs that glides to the picked one (owner 2026-11-06). */
.tab-pill { position: absolute; left: 0; top: var(--space-6); height: var(--size-control-sm); border-radius: var(--radius-pill); pointer-events: none;
  background: var(--glass-bg-strong); box-shadow: var(--elevation-glass), var(--elevation-ring-strong); }
.tab-pill.glide { transition: transform var(--motion-duration-base) var(--motion-easing-standard), width var(--motion-duration-base) var(--motion-easing-standard); }
/* Another tab: what it shows fades out, then the new one fades in. */
.swap-out { animation: msg-fade-out var(--motion-duration-instant) var(--motion-easing-exit) both; }
.swap-in { animation: msg-fade var(--motion-duration-fast) var(--motion-easing-enter) both; }
.working-line.leaving { animation: msg-fade-out var(--motion-duration-fast) var(--motion-easing-exit) both; }
.compact-tabs .tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.compact-tabs svg, .tabs-more svg { width: var(--size-icon); height: var(--size-icon); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.tab-badge { flex-shrink: 0; height: var(--size-badge); min-width: var(--size-badge); }
.tab-dot { flex-shrink: 0; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); background: var(--text-primary); }
.compact-tabs a.lit.owed { color: var(--text-primary); }
.compact-tabs a.lit.signal { color: var(--signal-solid); }
.compact-tabs a.lit svg { stroke-width: 2.4; }
.compact-tabs a.unread { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.tab-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--size-icon); height: var(--size-icon);
  margin-right: calc(-1 * var(--space-3)); border-radius: var(--radius-pill); color: var(--text-muted); }
.compact-tabs .tab-close svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.tab-close:hover, .tab-close:focus-visible { color: var(--text-primary); background: var(--bg-hover); }
.compact-tabs a[data-tab=""] .tab-dot { position: absolute; top: var(--space-1); right: var(--space-1); box-shadow: var(--elevation-ring-surface); }
.tabs-more { flex-shrink: 0; align-self: center; }
.tabs-more[hidden] { display: none; }
.tabs-more summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--size-control-sm); min-width: var(--size-control-sm); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; }
.tabs-more summary::-webkit-details-marker { display: none; }
.tabs-more summary:hover, .tabs-more[open] summary { color: var(--text-primary); }
.tabs-menu { position: absolute; right: 0; bottom: calc(100% + var(--space-2)); z-index: 2; min-width: calc(var(--layout-dock-width) / 2); max-height: calc(var(--layout-board-row) * 4); overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--space-2); border-radius: var(--radius-control); }
.from-top .tabs-menu { bottom: auto; top: calc(100% + var(--space-2)); }
.tabs-menu-item { display: flex; align-items: center; gap: var(--space-4); height: var(--size-control); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--type-meta-size); text-align: left; cursor: pointer; }
.tabs-menu-item .tab-name { flex: 1; }
.tabs-menu-item:hover { background: var(--bg-hover); }
/* The cards: one at a time; the home tab keeps its input under them, a product's tab shows them in its place. */
.slider { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.slider[hidden] { display: none; }
.stack { position: relative; display: flex; flex-direction: column; min-height: 0; }
.ocard { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; overflow-y: auto;
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-panel); }
/* The type's tint (DS-A5): a quiet wash inside the glass, the same word on its chip. A layer of the card's own
   background, so it fills the card however far its words are scrolled (owner 2026-11-06: opened, the colour ended
   halfway down). */
.ocard { --wash: var(--tint-decision-wash); }
.ocard[data-type="permission"] { --wash: var(--tint-permission-wash); }
.ocard[data-type="access"] { --wash: var(--tint-access-wash); }
.ocard[data-type="look"] { --wash: var(--tint-look-wash); }
.ocard[data-type="rule"] { --wash: var(--tint-rule-wash); }
.ocard[data-type="person"] { --wash: var(--tint-person-wash); }
.ocard[data-type="result"] { --wash: var(--tint-result-wash); }
.ocard.glass { background-image: linear-gradient(var(--wash), var(--wash)); }
.card-where { display: flex; align-items: center; gap: var(--space-3); font-size: var(--type-meta-size); color: var(--text-secondary); min-width: 0; }
.where-text { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where-text .dot { margin-right: var(--space-1); }
.type-chip { flex-shrink: 0; display: inline-flex; align-items: center; height: var(--size-badge); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  font-size: var(--type-caption-size); font-weight: var(--font-weight-medium); background: var(--tint-decision-chip); color: var(--tint-decision-fg); }
.type-chip[data-type="permission"] { background: var(--tint-permission-chip); color: var(--tint-permission-fg); }
.type-chip[data-type="access"] { background: var(--tint-access-chip); color: var(--tint-access-fg); }
.type-chip[data-type="look"] { background: var(--tint-look-chip); color: var(--tint-look-fg); }
.type-chip[data-type="rule"] { background: var(--tint-rule-chip); color: var(--tint-rule-fg); }
.type-chip[data-type="person"] { background: var(--tint-person-chip); color: var(--tint-person-fg); }
.type-chip[data-type="result"] { background: var(--tint-result-chip); color: var(--tint-result-fg); }
/* The card's task as a link (owner 2026-10-29): underlined, in the link colour. */
.slider-link { color: var(--text-link); text-decoration: underline; text-underline-offset: var(--space-1); }
.slider-link:hover { color: var(--text-primary); }
.call-dot { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-pill); background: var(--signal-dot); flex-shrink: 0; }
.slider .act { padding: 0; gap: var(--space-3); max-width: none; background: none; box-shadow: var(--elevation-0); border-radius: 0; }
.slider .act.call[open] > .call-head { display: none; }
.oask .ask-question { font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--font-weight-semibold); }
/* Four lines of context, whole on a press; then one line on why the recommended option. */
.ask-context { margin: 0; font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ask-context[aria-expanded="true"] { display: block; }
.ask-more { align-self: flex-start; margin-top: calc(var(--space-2) * -1); font-size: var(--type-meta-size); }
.ask-more[hidden] { display: none; }
.ask-because { margin: 0; font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-primary); font-weight: var(--font-weight-medium); }
/* The options as pills named by their outcome; the recommended one the ball, the others equal (DS-C3). */
.opts, .oask .options, .ocard .act .options { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.opts > .option, .oask .options > .option, .ocard .act .options > .option { width: auto; min-height: var(--size-control-sm); padding: 0 var(--space-5); font-size: var(--type-meta-size); border-radius: var(--radius-pill); flex-direction: row; align-items: center; }
.opts > .option .option-detail, .oask .options > .option .option-detail, .ocard .act .options > .option .option-detail { display: none; }
.oask .own-row, .ocard .own .own-row { gap: var(--space-3); }
.oask .own .btn, .ocard .own .btn { min-height: var(--size-control-sm); padding: 0 var(--space-5); border-radius: var(--radius-pill); }
/* A key on its card: the title names it, so the field's label is for screen readers; the Keychain note stays one small line. */
.oask .key-form .own-label { position: absolute; width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.oask .key-form .row-meta { margin: 0; font-size: var(--type-caption-size); line-height: var(--type-caption-line); }
.oask .own .field { min-height: var(--size-control-sm); border-radius: var(--radius-pill); background: var(--glass-field); }
/* Folded while the owner writes to the lead (owner 2026-11-07): the card's question on one line, a click unfolds it. */
.ocard.folded { padding: var(--space-3) var(--space-5); overflow: hidden; }
.card-unfold { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: var(--size-control-sm); padding: 0; border: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.card-unfold-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-unfold svg { width: var(--size-icon); height: var(--size-icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.slider-nav { display: inline-flex; align-items: center; gap: var(--space-1); }
.slider-count { min-width: var(--size-control-sm); text-align: center; font-variant-numeric: tabular-nums; }
/* A round button holding one icon (DESIGN.md IconButton): a fixed square, the icon centred by the grid. */
.icon-btn { flex-shrink: 0; width: var(--size-control-sm); height: var(--size-control-sm); display: inline-grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-secondary); cursor: pointer; }
.icon-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
.icon-btn:disabled { color: var(--text-disabled); cursor: default; box-shadow: var(--elevation-0); background: transparent; }
.icon-btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  font: inherit; color: var(--text-primary); border-radius: var(--radius-card); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-7); cursor: pointer; }
.btn-sm { min-height: var(--size-control-sm); min-width: var(--size-control-sm); padding: 0 var(--space-4); }
.ask-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.ask-head a { white-space: nowrap; }
/* The input (DESIGN.md Composer): a glass pill; its button a round live ball. */
/* One line is the button's height, so the button stands at its middle with the same room above, beside and below it;
   longer words grow upward and the button stays at the foot (as in ChatGPT and Messages). */
.composer { --composer-inset: calc((var(--orb-composer-min-height) + var(--space-3) * 2 - var(--size-control)) / 2);
  flex-shrink: 0; display: flex; gap: var(--space-4); align-items: flex-end; border-radius: var(--radius-panel); padding: var(--composer-inset) var(--composer-inset) var(--composer-inset) var(--space-7); }
.composer[hidden] { display: none; }
/* Pictures attached to the message (owner 2026-11-06, variant A): thumbnails over the words, inside the input. */
.composer:has(.composer-pictures:not([hidden])) { flex-wrap: wrap; }
/* The row stands at the input's inset on the left, as the button does on the right, and takes a whole line of its own. */
.composer-pictures { --pictures-shift: calc(var(--composer-inset) - var(--space-7)); flex-basis: 100%; display: flex; gap: var(--space-3);
  margin-left: var(--pictures-shift); margin-right: calc(-1 * var(--pictures-shift)); }
.composer-pictures[hidden] { display: none; }
.picture-thumb { position: relative; flex-shrink: 0; width: var(--orb-picture-thumb-width); height: var(--orb-picture-thumb-height); border-radius: var(--radius-control); overflow: hidden; }
.picture-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.picture-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picture-remove { position: absolute; top: var(--space-2); right: var(--space-2); width: var(--size-badge); height: var(--size-badge); display: grid; place-items: center; padding: 0; border: 0;
  border-radius: var(--radius-pill); background: var(--text-primary); color: var(--text-inverse); cursor: pointer; }
.picture-remove svg { width: var(--size-icon-sm); height: var(--size-icon-sm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The owner's pictures in their bubble, over their words; a press shows one whole over the panel. */
.msg-pictures { padding: var(--space-2) var(--space-2) var(--space-5); }
.msg-pictures > :not(.msg-picture-row) { padding: 0 calc(var(--space-7) - var(--space-2)); }
.msg-pictures:not(:has(> :not(.msg-picture-row))) { padding-bottom: var(--space-2); }
.msg-picture-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.msg-picture-row .picture-open { flex: 1 1 40%; height: auto; }
.msg-picture-row img { width: 100%; height: auto; max-height: var(--orb-picture-max-height); object-fit: contain; border-radius: calc(var(--radius-card) - var(--space-2)); }
.picture-view { position: fixed; inset: var(--orb-panel-padding); z-index: var(--z-popover); display: grid; place-items: center; padding: var(--space-4); border-radius: var(--radius-card); cursor: zoom-out; }
.picture-view[hidden] { display: none; }
.picture-view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-control); }
.composer:focus-within { box-shadow: var(--elevation-glass), 0 0 0 var(--focus-ring-width) var(--border-focus); }
.composer-input { flex: 1; resize: none; border: 0; background: none; color: var(--text-primary); font: inherit; line-height: var(--type-body-line); min-height: var(--size-control); max-height: var(--orb-composer-max-height); outline: none; padding: calc((var(--size-control) - var(--type-body-line)) / 2) 0; field-sizing: content; }
.send-btn { flex-shrink: 0; width: var(--size-control); height: var(--size-control); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--live-hi) 0%, var(--live-solid) 60%, var(--live-lo) 100%); box-shadow: var(--elevation-control); color: var(--live-fg); cursor: pointer; }
.send-btn svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.send-btn:active:not(:disabled) { transform: translateY(var(--size-hairline)); box-shadow: var(--elevation-pressed); }
.send-btn[hidden], .stop-btn[hidden] { display: none; }
.stop-btn { flex-shrink: 0; width: var(--size-control); height: var(--size-control); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy), var(--ball-hi) 0%, var(--ball-mid) 55%, var(--ball-lo) 100%); box-shadow: var(--elevation-ball); color: var(--ball-on); cursor: pointer; }
.stop-btn svg { width: var(--size-icon-sm); height: var(--size-icon-sm); fill: currentColor; stroke: none; }
.stop-btn:active { transform: translateY(var(--size-hairline)); box-shadow: var(--elevation-pressed); }
/* The lead's sentence while it works: two lines' room whatever it says, so a new one moves nothing; the mark at the first. */
.working-line { display: flex; align-items: flex-start; gap: var(--space-4); flex-shrink: 0; align-self: flex-start; max-width: 100%; margin: 0; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-card); min-height: calc(var(--type-meta-line) * 2 + var(--space-3) * 2); font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-secondary); text-wrap: balance; }
.working-line[hidden] { display: none; }
.working-line::before { content: ""; width: var(--size-dot); height: var(--size-dot); margin-top: calc((var(--type-meta-line) - var(--size-dot)) / 2); border-radius: var(--radius-pill); background: var(--live-mark); flex-shrink: 0; }
/* Beside the closed orb: the cards alone, sized to them (`?mode=peek`). */
.compact-body[data-mode="peek"], .compact-body[data-mode="tools"] { overflow: hidden; }
/* The column over the orb (`?mode=tools`): round glass buttons, the pinned boards first, a hairline, then the tools. */
/* The column over the orb as approved (owner 2026-11-06, the orb proposal's "Hover: boards, then tools"): round
   raised buttons on the orb's axis, no sheet behind them; a tool that is on wears an ink ring; on hover a one-line
   pill beside it says its name and, muted, what it is. */
.tools-root { display: flex; justify-content: flex-end; padding: var(--space-6); width: calc(var(--orb-tool-size) + var(--space-6) * 2 + var(--space-5) + var(--tool-tip-room, var(--orb-tool-tip-room))); }
.tools-root[data-side="right"] { justify-content: flex-start; }
.tools { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
/* The tools are the orb's own glass (owner 2026-11-06): the material, its hairline, no app surface. */
.tool { position: relative; width: var(--orb-tool-size); height: var(--orb-tool-size); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pill);
  box-shadow: var(--elevation-glass); color: var(--text-secondary); cursor: pointer; }
.tool:hover, .tool[data-hover] { background: var(--glass-bg-strong); color: var(--text-primary); }
.tool svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool[aria-pressed="true"] { background: var(--glass-bg-strong); color: var(--text-primary); box-shadow: var(--elevation-ring-ink), var(--elevation-glass); }
.tool:active { transform: translateY(var(--size-hairline)); }
/* A tool's name: one line of the orb's glass like the system's own tip -- "name · what it does", one size, never cut. */
.tool-tip { display: inline-flex; visibility: hidden; position: absolute; right: calc(100% + var(--space-5)); top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); box-shadow: var(--elevation-glass); pointer-events: none;
  font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-primary); }
.tool-about::before { content: " · "; white-space: pre; }
.tools-root[data-side="right"] .tool-tip { right: auto; left: calc(100% + var(--space-5)); }
.tool:hover .tool-tip, .tool[data-hover] .tool-tip, .tool:focus-visible .tool-tip { visibility: visible; }
.tools-rule { width: var(--space-8); margin: 0; border: 0; border-top: var(--size-hairline) solid var(--border-subtle); }
.tools-choices { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.tools-root[data-side="right"] .tools-choices { align-items: flex-start; }
.tool-choice { height: var(--size-control); padding: 0 var(--space-7); border-radius: var(--radius-pill); color: var(--text-primary); font: inherit; font-size: var(--type-meta-size); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; }
.send-btn:disabled { opacity: 0.45; cursor: default; box-shadow: var(--elevation-0); }

@media (max-width: 1100px) {
  .pair, .split, .live-body { grid-template-columns: minmax(0, 1fr); }
  .track-label { font-size: var(--type-caption-size); }
  .row { flex-direction: column; }
  .project-row { grid-template-columns: minmax(0, 1fr); }
  .project-goal { white-space: normal; }
  .row-title { flex-basis: auto; }
}

/* selection hooks: scripts find these, they draw nothing of their own */
.asks, .decisions, .send-back, .key-form, .agent-key-form { min-width: 0; }
/* What a service is, exactly (its address, the whole command Fleet will run): shown as it is, wrapped, never cut. */
/* Code an agent marks in its words (html.js lines). */
p code, li code { font-family: var(--font-family-mono); font-size: var(--type-meta-size); overflow-wrap: anywhere; }
.mono { font-family: var(--font-family-mono); font-size: var(--type-meta-size); overflow-wrap: anywhere; white-space: pre-wrap; margin: 0; }
.option-label { font-weight: var(--font-weight-medium); }
.log-line { padding: 0; }

/* ------------------------------------------------------------ review (the owner's screen 8, 2026-10-19) */
.review { gap: var(--space-5); }
.review-shot { max-width: calc(var(--layout-device-phone-width) / 2); }
.try { border-top: var(--size-hairline) solid var(--border-subtle); padding-top: var(--space-4); }
.try-title { cursor: pointer; font-weight: var(--font-weight-medium); }
.steps { margin: var(--space-4) 0; padding-left: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); }
.expect { display: flex; gap: var(--space-5); align-items: flex-start; }
.expect .shot-thumb { flex: 0 0 calc(var(--layout-device-phone-width) / 3); width: calc(var(--layout-device-phone-width) / 3); height: auto; max-height: calc(var(--layout-board-row) * 3); border-radius: var(--radius-control); }
.btn-open { align-self: flex-start; margin-top: var(--space-4); }
.verdict { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
.verdict[data-said="1"] [data-ok="1"], .verdict[data-said="0"] [data-ok="0"] { background: var(--bg-selected); }
.risks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.risks-fold > summary { color: var(--text-primary); }
.risks-fold[open] > summary { margin-bottom: var(--space-4); }
.risks-title { font-weight: var(--font-weight-medium); }
.risk-line { cursor: pointer; list-style: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.risk-line::-webkit-details-marker { display: none; }
.risk details[open] > .risk-line { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.risk-area {
  display: inline-block; margin-right: var(--space-2); font-size: var(--type-caption-size); line-height: var(--type-caption-line);
  color: var(--text-secondary); background: var(--bg-sunken); box-shadow: var(--elevation-well); border-radius: var(--radius-pill); padding: 0 var(--space-4);
}
.risk-more { margin: var(--space-2) 0 0; }
.risk-why { color: var(--text-secondary); }
/* the product, at the size its user sees it */
.device { display: block; border: 0; border-radius: var(--radius-card); background: var(--bg-raised); box-shadow: var(--elevation-2); }
.device-phone { width: var(--layout-device-phone-width); max-width: 100%; height: var(--layout-device-phone-height); }
.device-desktop { width: 100%; height: var(--layout-device-desktop-height); }
.preview-side { display: flex; flex-direction: column; gap: var(--space-5); }
/* Trying as a walkthrough (DESIGN-CORE §7): a slim bar, the product on a quiet stage, a rail of steps to the verdict. */
.trying { display: flex; flex-direction: column; gap: var(--space-5); min-height: 0; }
.trying-bar { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: space-between; }
.trying-bar .crumb { margin: 0; }
.trying-tools { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.seg-item { font-size: var(--type-meta-size); min-height: var(--size-control-sm); display: inline-flex; align-items: center; padding: 0 var(--space-6); border-radius: var(--radius-pill); color: var(--text-secondary); text-decoration: none; }
.seg-item.on { background: linear-gradient(180deg, var(--bg-raised), var(--bg-surface)); box-shadow: var(--elevation-control); color: var(--text-primary); font-weight: var(--font-weight-medium); }
.trying-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--layout-column-width) + var(--space-9) * 2); gap: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-surface); box-shadow: var(--elevation-2); }
.trying.wide .trying-body { grid-template-columns: minmax(0, 1fr); }
.trying-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); min-height: calc(var(--layout-device-phone-height) + var(--space-8) * 2); min-width: 0; }
.trying-stage.desk { align-items: stretch; justify-content: flex-start; gap: 0; padding: 0; min-height: 0; }
.trying-stage.desk .site-frame { width: 100%; border-radius: 0; box-shadow: var(--elevation-0); }
.trying-stage.desk .stage-note { padding: var(--space-3) var(--space-5); }
.stage-chip { margin: 0; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); background: var(--ball-mid); color: var(--ball-on); font-size: var(--type-meta-size); box-shadow: var(--elevation-ball); max-width: var(--layout-device-phone-width); text-align: center; }
.stage-chip[hidden] { display: none; }
.stage-why { align-self: center; text-align: center; }
.stage-pic { width: 100%; max-height: var(--layout-device-desktop-height); overflow-y: auto; border-radius: var(--radius-control); box-shadow: var(--elevation-2); background: var(--bg-raised); }
.stage-pic.phone { width: var(--layout-device-phone-width); max-width: 100%; max-height: var(--layout-device-phone-height); border-radius: var(--radius-card); }
.stage-pic .zoom-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.stage-shot { display: block; width: 100%; height: auto; }
.stage-note { margin: 0; align-self: flex-end; font-size: var(--type-caption-size); color: var(--text-muted); }
.site-frame { display: flex; flex-direction: column; width: min(100%, calc(var(--layout-device-desktop-height) * 16 / 10)); border-radius: var(--radius-control); overflow: hidden; background: var(--bg-raised); box-shadow: var(--elevation-2); min-width: 0; }
.site-chrome { display: flex; align-items: center; padding: var(--space-3) var(--space-5); background: var(--bg-surface); border-bottom: var(--size-hairline) solid var(--border-subtle); }
.site-url { flex: 1; min-width: 0; padding: var(--space-1) var(--space-5); border-radius: var(--radius-pill); background: var(--bg-sunken); font-size: var(--type-caption-size); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-vp { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.site-page { position: absolute; top: 0; left: 0; width: var(--site-width); height: var(--site-height, var(--layout-device-desktop-height)); border: 0; transform-origin: 0 0; transform: scale(var(--site-scale, 1)); background: var(--bg-raised); }
.trying-rail { display: flex; flex-direction: column; min-width: 0; border-left: var(--size-hairline) solid var(--border-subtle); }
.rail-head { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7) var(--space-7) var(--space-5); border-bottom: var(--size-hairline) solid var(--border-subtle); }
.rail-title { margin: 0; font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-line); font-weight: var(--font-weight-semibold); text-wrap: balance; }
.try-tabs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.try-tab { font-size: var(--type-caption-size); padding: var(--space-1) var(--space-5); border-radius: var(--radius-pill); background: var(--bg-sunken); color: var(--text-secondary); text-decoration: none; }
.try-tab.on { background: var(--ball-mid); color: var(--ball-on); }
.try-tab.done { background: var(--success-bg); color: var(--success-fg); }
.progress { display: flex; gap: var(--space-2); }
.progress i { flex: 1; height: var(--space-2); border-radius: var(--radius-pill); background: var(--border-subtle); }
.progress i.ok { background: var(--success-fg); }
.progress i.off { background: var(--danger-fg); }
.progress i.now { background: var(--text-primary); }
.walk { list-style: none; margin: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.walk-step { display: grid; grid-template-columns: var(--size-control-sm) minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-control); }
.walk-step.now { background: var(--bg-raised); box-shadow: var(--elevation-control); }
.walk-mark { width: var(--size-badge); height: var(--size-badge); border-radius: var(--radius-pill); display: grid; place-items: center; line-height: 1; font-feature-settings: var(--font-features-tabular); font-size: var(--type-caption-size); font-weight: var(--font-weight-semibold); color: var(--text-muted); border: var(--size-hairline) solid var(--border-subtle); box-sizing: border-box; }
.walk-step.now .walk-mark { color: var(--text-primary); border-color: var(--text-primary); }
.walk-step.ok .walk-mark { background: var(--success-bg); color: var(--success-fg); border-color: transparent; }
.walk-step.off .walk-mark { background: var(--danger-bg); color: var(--danger-fg); border-color: transparent; }
.walk-say { font-weight: var(--font-weight-medium); }
.walk-step.later .walk-say { color: var(--text-muted); font-weight: var(--font-weight-regular); }
.walk-step.ok .walk-say, .walk-step.off .walk-say { color: var(--text-secondary); font-weight: var(--font-weight-regular); }
.walk-detail { grid-column: 2; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.walk-see { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-control); background: var(--bg-sunken); }
.walk-see p { margin: 0; }
.walk-see .shot-thumb { width: calc(var(--layout-board-row) * 1); height: auto; }
.walk-note { grid-column: 2; margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--danger-bg); color: var(--danger-fg); font-size: var(--type-meta-size); }
.step-acts { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.step-acts .btn, .trying-verdict .btn { border-radius: var(--radius-pill); }
.step-say { margin: 0; font-weight: var(--font-weight-semibold); }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-7) var(--space-7); border-top: var(--size-hairline) solid var(--border-subtle); }
.trying-sum { margin: 0; font-weight: var(--font-weight-semibold); }
.trying-sum.ok { color: var(--success-fg); }
.trying-sum.off { color: var(--danger-fg); }
.trying-worth { display: flex; flex-direction: column; gap: var(--space-3); }
.trying-verdict { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.trying-verdict .link { align-self: flex-start; font-size: var(--type-meta-size); }
.trying-back .own-row { flex-direction: column; align-items: stretch; }
.trying-dock { position: absolute; left: var(--space-8); bottom: var(--space-8); width: calc(var(--layout-column-width) + var(--space-9)); max-width: calc(100% - var(--space-8) * 2); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-card); background: var(--bg-raised); box-shadow: var(--elevation-3); }
.trying-dock .row-meta { margin: 0; }
@media (max-width: 1100px) { .trying-body { grid-template-columns: minmax(0, 1fr); } .trying-rail { border-left: 0; border-top: var(--size-hairline) solid var(--border-subtle); } }
/* A question's own page reads at reading width, not across the whole window; pictures keep it whole. */
.ask-page:not(:has(.options-pics)) { max-width: var(--layout-content-max-reading); }
/* Where to get a key, on its card: the one line the owner acts on before pasting. */
.key-where { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-control); background: var(--glass-field); font-size: var(--type-meta-size); line-height: var(--type-meta-line); color: var(--text-primary); }
.key-where .label-caps { color: var(--text-secondary); margin-right: var(--space-2); }

/* A try whose product did not start: the sentence first, its own output one fold away. */
.preview-failed { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.preview-output pre { max-height: var(--layout-device-desktop-height); overflow: auto; margin-top: var(--space-4); padding: var(--space-6); background: var(--bg-sunken); box-shadow: var(--elevation-well); border-radius: var(--radius-control); }
.preview-output summary { cursor: pointer; font-size: var(--type-meta-size); color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .msg-new { animation: msg-fade var(--motion-duration-fast) linear var(--msg-in-at, 0ms) both; }
  .tab-pill.glide { transition: none; }
  .card { transition: none; }
  .btn-primary, .option.rec, .stop-btn, .send-btn, .nav-item[aria-current] { transition: none; }
  .btn-primary:hover:not(:disabled), .option.rec:hover, .stop-btn:hover, .send-btn:hover:not(:disabled), .nav-item[aria-current]:hover { --gw: 130%; --gh: 160%; }
  .card:hover, .btn:active, .icon-btn:active, .option:active, .seg-btn:active, .chip:active, .send-btn:active, .stop-btn:active { transform: none; }
}