/* ForgeOS product surface — the visual language of the 2026 reference design.
 *
 * This stylesheet carries the marketing hero at /os and Mission Control at /os/app. It
 * loads after forgeos.css and reuses that file's token aliases, so nothing here names a
 * colour of its own: the accent is the platform spectrum's first stop, the near-black
 * action is platform ink, and every status tone is a platform state token. A hex in this
 * file would be a colour that cannot be themed and will not follow the next system change.
 *
 * Layout rule for the whole surface: one column on a phone, two from 900px (rail plus
 * work), three from 1240px (rail, work, insight). Nothing is desktop-only — the sections
 * rail becomes a bottom bar rather than disappearing, and every panel that can overflow
 * scrolls inside itself rather than widening the page.
 */

:root {
  /* Accent. The reference design's blue is the platform spectrum's execution stop, so it
     is referenced rather than re-picked; --os-accent-ink is the tone that carries words. */
  --os-accent: var(--m19-spectrum-1);
  --os-accent-ink: var(--m19-spectrum-1);
  --os-accent-tint: color-mix(in srgb, var(--m19-spectrum-1) 8%, var(--m19-surface));
  --os-accent-edge: color-mix(in srgb, var(--m19-spectrum-1) 26%, transparent);
  --os-accent-wash: color-mix(in srgb, var(--m19-spectrum-1) 12%, transparent);

  /* Ground and paper. The design sits a hair cooler and lighter than the platform canvas
     so the white cards read as raised without a heavy shadow. */
  --os-ground: color-mix(in srgb, var(--m19-canvas) 62%, var(--m19-surface));
  --os-paper: var(--m19-surface);
  --os-paper-2: var(--m19-surface-2);
  --os-line: var(--m19-line);
  --os-line-soft: color-mix(in srgb, var(--m19-line) 62%, var(--m19-surface));

  --os-radius: 14px;
  --os-radius-sm: 10px;
  --os-radius-xs: 8px;
  --os-radius-pill: var(--m19-radius-pill);

  --os-shadow-card: 0 1px 2px color-mix(in srgb, var(--m19-ink) 4%, transparent);
  --os-shadow-raise: 0 4px 16px color-mix(in srgb, var(--m19-ink) 7%, transparent);
  --os-shadow-node: 0 2px 6px color-mix(in srgb, var(--m19-ink) 8%, transparent);

  --os-rail: 236px;
  --os-insight: 316px;
}

/* Both surfaces opt in, so the base stylesheet keeps its own pages unchanged. */
.os {
  background: var(--os-ground);
  color: var(--m19-ink);
  font-family: var(--m19-font);
  font-size: 15px;
  line-height: 1.5;
}

/* The reset is deliberately one class deep and declared before every component.
   Written as `.os a` it outranks `.os-btn-primary { color: … }` and each anchor styled as
   a button loses its label colour — ink on ink. Written as `:where(.os a)` it carries no
   weight at all and loses to the base stylesheet's own `a { color: … }`, which turns the
   wordmark and the footer indigo. `.os :where(a)` ties with the components and is
   declared first, so the component wins. */
.os :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.os :where(ul, ol) { list-style: none; padding: 0; }
.os :where(a) { color: inherit; text-decoration: none; }
/* The base stylesheet's .btn-primary (0-1-0) ties with the reset above and
   loses on order alone -- its label would inherit page ink onto the brand
   background. One class deeper settles the fight in the label's favour. */
.os a.btn-primary { color: var(--on-brand); }
.os :where(button) { font: inherit; color: inherit; }
.os :where(svg) { display: block; }

/* The hidden attribute has to beat a component's own display. The user agent's
   `[hidden] { display: none }` is a single attribute selector, so `.os-conn { display:
   grid }` outranks it and a filtered-out card stays on screen — the count said one
   connection while eight were still drawn. */
.os [hidden] { display: none !important; }

/* The icon sprite is markup, not picture: it defines symbols and draws nothing itself. */
.os .svg-defs { display: none; }

/* Visually hidden, still announced and still focusable when it is a control's label. */
.os .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The mark ──────────────────────────────────────────────────────────────
   The hexagon is drawn in currentColor so it inverts with the theme rather than
   carrying a baked-in black. The wordmark is the product's, set in the platform
   face at the weight and tracking the reference design uses. */
.os-logo { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.os-logo-glyph { width: 30px; height: 30px; flex: none; color: var(--m19-ink); }
.os-logo-word {
  font-size: 1.06rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
}
.os-logo-sm .os-logo-glyph { width: 22px; height: 22px; }
.os-logo-sm .os-logo-word { font-size: .8rem; letter-spacing: .13em; }

/* ── Shared atoms ────────────────────────────────────────────────────────── */
.os-card {
  background: var(--os-paper);
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  box-shadow: var(--os-shadow-card);
  min-width: 0;
}
.os-card-pad { padding: 18px; }

.os-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--os-accent-edge);
  background: var(--os-accent-tint);
  color: var(--os-accent-ink);
  border-radius: var(--os-radius-xs);
  padding: 7px 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}

.os-chip {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--os-radius-xs);
  padding: 3px 9px; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.os-chip-decision { color: var(--m19-state-warning-ink); background: var(--m19-state-warning-soft); border-color: color-mix(in srgb, var(--m19-state-warning) 34%, transparent); }
.os-chip-review   { color: var(--m19-state-info-ink);    background: var(--m19-state-info-soft);    border-color: color-mix(in srgb, var(--m19-state-info) 30%, transparent); }
.os-chip-verified { color: var(--m19-state-success-ink); background: var(--m19-state-success-soft); border-color: color-mix(in srgb, var(--m19-state-success) 32%, transparent); }
.os-chip-ready    { color: var(--os-accent-ink);         background: var(--os-accent-tint);         border-color: var(--os-accent-edge); }
.os-chip-quiet    { color: var(--m19-state-neutral-ink); background: var(--m19-state-neutral-soft); border-color: color-mix(in srgb, var(--m19-state-neutral) 24%, transparent); }

/* Status set as a word rather than a pill — the evidence list uses this. */
.os-status { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.os-status-verified { color: var(--m19-state-success-ink); }
.os-status-review   { color: var(--os-accent-ink); }
.os-status-high     { color: var(--m19-state-danger-ink); }
.os-status-medium   { color: var(--m19-state-warning-ink); }
.os-status-low      { color: var(--m19-state-success-ink); }

/* The square tinted icon tile that fronts every row in the design. */
.os-tile {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--os-radius-sm);
  background: var(--m19-state-neutral-soft);
  color: var(--m19-state-neutral-ink);
}
.os-tile svg { width: 17px; height: 17px; }
.os-tile-accent   { background: var(--os-accent-tint);              color: var(--os-accent-ink); }
.os-tile-success  { background: var(--m19-state-success-soft);      color: var(--m19-state-success-ink); }
.os-tile-warning  { background: var(--m19-state-warning-soft);      color: var(--m19-state-warning-ink); }
.os-tile-danger   { background: var(--m19-state-danger-soft);       color: var(--m19-state-danger-ink); }
.os-tile-info     { background: var(--m19-state-info-soft);         color: var(--m19-state-info-ink); }
.os-tile-solid    { background: var(--m19-state-success);           color: var(--m19-on-accent-light); }
.os-tile-round    { border-radius: var(--os-radius-pill); }
.os-tile-lg       { width: 44px; height: 44px; }
.os-tile-lg svg   { width: 21px; height: 21px; }

/* Buttons. The primary action is platform ink, as the reference design draws it. */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--m19-tap);
  padding: 0 18px;
  border-radius: var(--os-radius-sm);
  border: 1px solid var(--os-line);
  background: var(--os-paper);
  font-size: .9rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.os-btn:hover { border-color: color-mix(in srgb, var(--m19-ink) 24%, var(--os-line)); }
.os-btn-primary {
  background: var(--m19-ink); border-color: var(--m19-ink); color: var(--m19-surface);
  padding: 0 22px;
}
.os-btn-primary:hover { background: var(--m19-ink-2); border-color: var(--m19-ink-2); }
.os-btn-lg { min-height: 52px; font-size: .98rem; }
/* The quiet button carries the paths we deliberately do not lead with --
   e.g. pasting a provider key when one sign-in already reaches those models. */
.os-btn-quiet { background: transparent; border-color: transparent; color: var(--os-ink-2, inherit); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.os-btn-quiet:hover { border-color: transparent; color: inherit; }
/* The preview frame renders the changed page from the submitted result, fully
   sandboxed. White on purpose: the page being previewed owns its own colors. */
.os-preview-frame { width: 100%; height: 420px; border: 1px solid var(--os-line); border-radius: 8px; background: #fff; }
.os-thread-diff { max-height: 260px; overflow: auto; margin-top: .5rem; }
/* A decision in the thread reads top-to-bottom: what happened at full width,
   then the diff, then the buttons. A side-by-side row squeezes the sentence
   into a ribbon next to its own buttons. Layout only -- same components. */
.os-thread-decision { flex-direction: column; align-items: stretch; }
.os-thread-decision .os-row-meta { margin-top: .55rem; justify-content: flex-start; }
.os-thread-decision .os-preview-frame { height: 300px; margin-top: .5rem; }
.os-btn svg { width: 16px; height: 16px; flex: none; }

.os-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--os-accent-ink); font-size: .86rem; font-weight: 600;
  min-height: var(--m19-tap);
}
.os-link svg { width: 15px; height: 15px; }
.os-link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Icon-only controls keep the platform tap minimum even though they are drawn small. */
.os-iconbtn {
  display: inline-grid; place-items: center;
  min-width: var(--m19-tap); min-height: var(--m19-tap);
  border: 0; background: transparent; border-radius: var(--os-radius-sm);
  color: var(--m19-ink-2); cursor: pointer;
}
.os-iconbtn:hover { background: var(--os-paper-2); color: var(--m19-ink); }
.os-iconbtn svg { width: 19px; height: 19px; }
.os-iconbtn-sm svg { width: 16px; height: 16px; }

/* Fields */
.os-field { display: grid; gap: 7px; min-width: 0; }
.os-field > label { font-size: .8rem; font-weight: 600; color: var(--m19-ink-2); }
.os-input, .os-select {
  width: 100%; min-height: var(--m19-tap);
  padding: 0 14px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  background: var(--os-paper); color: var(--m19-ink);
  font: inherit; font-size: .88rem;
}
.os-input::placeholder { color: var(--m19-ink-4); }
.os-input:focus, .os-select:focus { border-color: var(--os-accent); outline: none; }
.os-select { appearance: none; padding-right: 38px; color: var(--m19-ink-3); cursor: pointer; }
.os-select-wrap { position: relative; }
.os-select-wrap > svg {
  position: absolute; right: 13px; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; pointer-events: none; color: var(--m19-ink-4);
}

/* The Ask row: an input with a send affordance parked inside it. */
.os-ask { position: relative; }
.os-ask .os-input { padding-right: 52px; }
.os-ask-send {
  position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  min-width: 38px; min-height: 38px;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--os-radius-xs);
  color: var(--os-accent-ink); cursor: pointer;
}
.os-ask-send:hover { background: var(--os-accent-tint); }
.os-ask-send svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   Landing surface
   ══════════════════════════════════════════════════════════════════════════ */

.os-page { width: min(1280px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.os-site-head { padding-block: clamp(24px, 4vw, 40px); }

.os-hero { position: relative; padding-block: clamp(8px, 2vw, 22px) clamp(28px, 5vw, 52px); }

/* The contour field. It is atmosphere, so it is drawn behind everything at low
   contrast and is removed entirely from forced-colours and print. */
.os-topo {
  /* Flush with the hero, not bleeding past it. The sweep's element test is the one a
     containment rule cannot silence, and it is right to be: paint that hangs past the
     viewport is a defect even where `overflow: clip` stops the page from scrolling to
     it. The contours are clipped in geometry instead, so they still run off the edges. */
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  color: color-mix(in srgb, var(--m19-ink) 11%, transparent);
  mask-image: linear-gradient(100deg, transparent 4%, black 34%, black 88%, transparent 100%);
}
.os-topo svg { width: 100%; height: 100%; }

/* The contour field is drawn wide (1200x760) and stretched to its container.
   On a phone that container is taller than it is wide, so the contours stretch
   into vertical streaks -- a texture meant to read as distant landscape instead
   reads as scribble behind the words. Anchored to the top at its own proportions
   and faded, it stays a texture. */
@media (max-width: 719.98px) {
  .os-topo { inset: 0 0 auto 0; height: 60vh; opacity: .55; }
  .os-topo svg { height: 100%; object-fit: cover; }
}
.os-topo path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

.os-hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.os-hero-copy { max-width: 44rem; }
.os-hero h1 {
  margin-block: 22px 20px;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.06; font-weight: 800; letter-spacing: -.035em;
  text-wrap: balance;
}
.os h1 em { font-style: normal; color: var(--os-accent-ink); }
.os-hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.6; color: var(--m19-ink-2); max-width: 35ch;
}
.os-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 34px); }

/* The isometric object. Every stop is a platform token; the glass reads as tinted
   white rather than as a second brand colour. */
.os-iso { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
@media (max-width: 719.98px) {
  .os-iso { max-width: 300px; }
}
.os-iso svg { width: 100%; height: auto; }
.os-iso .iso-glass-a { stop-color: color-mix(in srgb, var(--m19-spectrum-1) 12%, var(--m19-surface)); }
.os-iso .iso-glass-b { stop-color: color-mix(in srgb, var(--m19-spectrum-1) 4%, var(--m19-surface)); }
.os-iso .iso-plate-a { stop-color: color-mix(in srgb, var(--m19-spectrum-1) 8%, var(--m19-surface)); }
.os-iso .iso-plate-b { stop-color: color-mix(in srgb, var(--m19-spectrum-1) 2%, var(--m19-surface)); }
.os-iso .iso-face { stroke: color-mix(in srgb, var(--m19-spectrum-1) 22%, transparent); stroke-width: 1.1; }
.os-iso .iso-edge { fill: none; stroke: color-mix(in srgb, var(--m19-spectrum-1) 38%, transparent); stroke-width: 1.2; }
.os-iso .iso-hair { fill: none; stroke: color-mix(in srgb, var(--m19-spectrum-1) 20%, transparent); stroke-width: 1; }
.os-iso .iso-spark { fill: var(--os-accent); }

/* Reliability strip */
.os-stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding: clamp(16px, 2vw, 22px) clamp(8px, 2vw, 18px);
}
.os-stat { display: flex; align-items: center; gap: 14px; padding: 14px clamp(12px, 2vw, 22px); }
.os-stat svg { width: 27px; height: 27px; flex: none; color: var(--os-accent); }
.os-stat-value { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; }
.os-stat-label { font-size: .86rem; color: var(--m19-ink-3); }

.os-features {
  display: grid; gap: clamp(22px, 3vw, 30px);
  padding-block: clamp(30px, 5vw, 46px);
}
.os-feature { display: flex; gap: 15px; align-items: flex-start; }
.os-feature > svg { width: 30px; height: 30px; flex: none; color: var(--m19-ink); margin-top: 2px; }
.os-feature h2, .os-feature h3 { font-size: .98rem; font-weight: 700; margin-bottom: 5px; }
.os-feature p { font-size: .88rem; color: var(--m19-ink-3); line-height: 1.55; max-width: 26ch; }

/* ══════════════════════════════════════════════════════════════════════════
   Mission Control shell
   ══════════════════════════════════════════════════════════════════════════ */

.os-app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* Sections rail. On a phone it is a fixed bottom bar carrying the same eight
   destinations — reduced to icons, never to a shorter list. */
.os-rail {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; gap: 2px;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--os-paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--os-line);
}
.os-rail-head { display: none; }
.os-rail-nav { display: contents; }
.os-rail a {
  flex: 1 1 0;
  display: grid; justify-items: center; align-content: center; gap: 3px;
  min-width: 0; min-height: var(--m19-tap);
  padding: 6px 2px; border-radius: var(--os-radius-sm);
  font-size: .66rem; font-weight: 600; color: var(--m19-ink-3);
  text-align: center;
}
.os-rail a svg { width: 20px; height: 20px; }
/* Icons, never a shorter list: the label stays for screen readers but is not
   shown here, the same treatment as .vh, so nine destinations fit one phone
   row without a horizontal scroll. The sidebar below restores it visually. */
.os-rail a span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.os-rail a:hover { background: var(--os-paper-2); color: var(--m19-ink); }
.os-rail a[aria-current="page"] { color: var(--os-accent-ink); background: var(--os-accent-tint); }

.os-body { min-width: 0; padding-bottom: 92px; }

/* Section header. It stays put while the section scrolls under it: it carries which
   section you are in, which is exactly the thing you should not have to scroll up for. */
.os-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--os-ground) 88%, transparent);
  backdrop-filter: blur(10px);
}
.os-head-id {
  width: 27px; height: 27px; flex: none;
  display: grid; place-items: center; border-radius: var(--os-radius-pill);
  background: var(--os-accent); color: var(--m19-on-accent-light);
  font-size: .78rem; font-weight: 700;
}
.os-head-text { min-width: 0; flex: 1 1 260px; }
.os-head-text h1 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; }
.os-head-text p { font-size: .82rem; color: var(--m19-ink-3); }
.os-head-tools { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.os-theme {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--m19-tap); padding: 0 12px;
  border: 0; background: transparent; border-radius: var(--os-radius-sm);
  font-size: .82rem; font-weight: 600; color: var(--m19-ink-2); cursor: pointer;
}
.os-theme:hover { background: var(--os-paper-2); }
.os-theme svg { width: 14px; height: 14px; }

/* Work column and insight column */
.os-columns {
  display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px);
  padding: clamp(4px, 1vw, 10px) clamp(16px, 3vw, 28px) clamp(20px, 3vw, 30px);
  align-items: start;
}
/* The base stylesheet gives every <section> a 76px block margin, which is right for a
   marketing page and wrong for a workspace: it opened a band of empty ground between the
   header and the first card. A view is a route, not an article. */
.os-view { margin-block: 0; }
.os-view[hidden] { display: none; }
.os-panel { padding: clamp(18px, 2.4vw, 26px); }
.os-panel > h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.os-panel > h2 + p { font-size: .88rem; color: var(--m19-ink-3); margin-top: 5px; }
.os-section-gap { margin-top: 22px; }
.os-subhead { font-size: .88rem; font-weight: 600; margin-bottom: 10px; }

.os-stack { display: grid; gap: clamp(14px, 2vw, 20px); align-content: start; }
.os-panel-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }

/* Tabs */
.os-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--os-line);
  margin-bottom: 22px;
}
.os-tabs button {
  min-height: var(--m19-tap); padding: 0 14px;
  border: 0; background: transparent; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--m19-ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.os-tabs button:hover { color: var(--m19-ink); }
.os-tabs button[aria-selected="true"] { color: var(--os-accent-ink); border-bottom-color: var(--os-accent); }

/* Pill tabs, as Trust & Control draws them */
.os-tabs-pill { border-bottom: 0; gap: 6px; }
.os-tabs-pill button { border-radius: var(--os-radius-sm); border-bottom: 0; margin-bottom: 0; }
.os-tabs-pill button[aria-selected="true"] { background: var(--os-accent-tint); }

/* Filter chips, as Connections draws them */
.os-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.os-chips button {
  min-height: 34px; padding: 0 14px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-pill);
  background: var(--os-paper); cursor: pointer;
  font-size: .8rem; font-weight: 600; color: var(--m19-ink-2);
}
.os-chips button[aria-pressed="true"] { background: var(--os-accent); border-color: var(--os-accent); color: var(--m19-on-accent-light); }

/* ── Rows ───────────────────────────────────────────────────────────────── */
.os-rows { display: grid; }
.os-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 2px;
  border-top: 1px solid var(--os-line-soft);
  min-width: 0;
}
.os-rows > .os-row:first-child { border-top: 0; }
.os-row-text { min-width: 0; flex: 1 1 auto; }
.os-row-title { font-size: .89rem; font-weight: 600; }
.os-row-sub { font-size: .8rem; color: var(--m19-ink-3); }
.os-row-meta { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.os-row-time { font-size: .8rem; color: var(--m19-ink-3); white-space: nowrap; }
.os-row-bordered { border: 1px solid var(--os-line); border-radius: var(--os-radius-sm); padding: 13px 14px; }
.os-rows-carded { gap: 8px; }
.os-rows-carded > .os-row { border-top: 0; }

/* The suggestion list on Today sits on hairlines rather than cards. */
.os-suggest .os-row { padding-block: 11px; }
.os-suggest .os-tile { width: 26px; height: 26px; border-radius: var(--os-radius-pill); }
.os-suggest .os-tile svg { width: 14px; height: 14px; }

/* ── Counters ───────────────────────────────────────────────────────────── */
.os-counters {
  /* 150px is the width the longest state name ("Waiting on you") needs beside its tile.
     Below it the row wraps to fewer columns rather than clipping the label. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  overflow: hidden;
}
.os-counter {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-inline-start: 1px solid var(--os-line-soft);
}
.os-counter:first-child { border-inline-start: 0; }
.os-counter-label { font-size: .76rem; color: var(--m19-ink-3); white-space: nowrap; }
.os-counter-value { font-size: 1rem; font-weight: 700; }

/* Quick actions under the Ask box */
.os-quick { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.os-quick button {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--m19-tap); padding: 0 14px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  background: var(--os-paper); cursor: pointer;
  font-size: .82rem; font-weight: 500; color: var(--m19-ink-2);
}
.os-quick button:hover { border-color: var(--os-accent-edge); color: var(--m19-ink); }
.os-quick svg { width: 15px; height: 15px; flex: none; color: var(--m19-ink-3); }

/* ── Insight cards ──────────────────────────────────────────────────────── */
.os-insight-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.os-insight-head h3 { font-size: .95rem; font-weight: 700; }

/* Node graph. The nodes are absolutely placed on a padded box and the edges are an
   SVG beneath them, so the diagram scales with its container instead of a fixed size. */
.os-graph { position: relative; aspect-ratio: 4 / 3; min-height: 190px; }
.os-graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.os-graph-edges path { fill: none; stroke: var(--os-line); stroke-width: 1.2; }
.os-graph-edges .arrow { fill: var(--m19-ink-4); }
.os-graph-node {
  position: absolute; translate: -50% -50%;
  display: grid; place-items: center;
  min-width: 30px; min-height: 30px; padding: 6px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-xs);
  background: var(--os-paper); box-shadow: var(--os-shadow-node);
  color: var(--m19-ink-3);
}
.os-graph-node svg { width: 15px; height: 15px; }
.os-graph-node.is-accent { color: var(--os-accent-ink); }
.os-graph-node.is-solid { background: var(--m19-state-success); border-color: var(--m19-state-success); color: var(--m19-on-accent-light); }
/* Positions are expressed as custom properties so the markup carries no inline style. */
.os-graph-node { left: var(--x); top: var(--y); }
.n1 { --x: 50%; --y: 13%; }
.n2 { --x: 15%; --y: 38%; }
.n3 { --x: 50%; --y: 47%; }
.n4 { --x: 85%; --y: 33%; }
.n5 { --x: 27%; --y: 78%; }
.n6 { --x: 65%; --y: 82%; }
.n7 { --x: 88%; --y: 68%; }

/* Flow chart */
.os-flow { position: relative; }
.os-flow svg { width: 100%; height: auto; }
.os-flow .flow-area { fill: url(#os-flow-fill); }
.os-flow .flow-line { fill: none; stroke: var(--os-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.os-flow .flow-dot { fill: var(--os-accent); }
.os-flow-a { stop-color: color-mix(in srgb, var(--m19-spectrum-1) 26%, transparent); }
.os-flow-b { stop-color: color-mix(in srgb, var(--m19-spectrum-1) 0%, transparent); }
.os-flow-axis {
  display: flex; justify-content: space-between; gap: 4px;
  margin-top: 9px; font-size: .69rem; color: var(--m19-ink-3); white-space: nowrap;
}

/* Donut */
.os-donut-wrap { display: flex; align-items: center; gap: clamp(14px, 3vw, 22px); flex-wrap: wrap; }
.os-donut { width: 108px; height: 108px; flex: none; }
.os-donut circle { fill: none; stroke-width: 15; }
.os-donut .seg-1 { stroke: var(--os-accent); }
.os-donut .seg-2 { stroke: color-mix(in srgb, var(--m19-spectrum-1) 42%, var(--m19-surface)); }
.os-donut .seg-3 { stroke: var(--m19-ink-4); }
.os-donut .seg-4 { stroke: var(--m19-ink); }
.os-legend { display: grid; gap: 9px; flex: 1 1 140px; min-width: 0; }
.os-legend li { display: flex; align-items: center; gap: 9px; font-size: .82rem; }
.os-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.os-legend .key-1 { background: var(--os-accent); }
.os-legend .key-2 { background: color-mix(in srgb, var(--m19-spectrum-1) 42%, var(--m19-surface)); }
.os-legend .key-3 { background: var(--m19-ink-4); }
.os-legend .key-4 { background: var(--m19-ink); }
.os-legend span:last-child { margin-inline-start: auto; color: var(--m19-ink-3); font-variant-numeric: tabular-nums; }

/* ── Work section diagram ───────────────────────────────────────────────── */
.os-workgraph { position: relative; aspect-ratio: 5 / 4; min-height: 300px; }
.os-workgraph .os-graph-edges path { stroke: var(--os-line); stroke-width: 1.4; }
.os-wnode {
  position: absolute; translate: -50% -50%; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  background: var(--os-paper); box-shadow: var(--os-shadow-node);
  white-space: nowrap;
}
.os-wnode .os-tile { width: 30px; height: 30px; }
.os-wnode .os-tile svg { width: 15px; height: 15px; }
.os-wnode-label { font-size: .8rem; font-weight: 600; }
.os-wnode-count { font-size: .95rem; font-weight: 700; }
.w-planned { --x: 20%; --y: 40%; }
.w-ready   { --x: 52%; --y: 13%; }
.w-review  { --x: 82%; --y: 40%; }
.w-waiting { --x: 55%; --y: 71%; }
.w-verified{ --x: 18%; --y: 88%; }
.w-hub {
  --x: 50%; --y: 45%;
  position: absolute; translate: -50% -50%; left: var(--x); top: var(--y);
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  background: var(--os-paper); box-shadow: var(--os-shadow-node); color: var(--os-accent-ink);
}
.w-hub svg { width: 17px; height: 17px; }

.os-graph-tools { display: flex; gap: 2px; margin-inline-start: auto; }

/* Legend strip under the work graph */
.os-legend-strip {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding-top: 16px; margin-top: 18px; border-top: 1px solid var(--os-line-soft);
}
.os-legend-strip > li { display: flex; align-items: center; gap: 9px; }
.os-legend-strip .os-tile { width: 27px; height: 27px; }
.os-legend-strip .os-tile svg { width: 14px; height: 14px; }
.os-legend-strip-label { font-size: .76rem; color: var(--m19-ink-3); white-space: nowrap; }
.os-legend-strip-count { font-size: .86rem; font-weight: 700; }

/* Flow legend: icons joined by arrows, scrolling inside itself on narrow screens */
.os-flowlegend { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.os-flowlegend .os-tile { width: 30px; height: 30px; }
.os-flowlegend .os-tile svg { width: 15px; height: 15px; }
.os-flowlegend > li { display: flex; align-items: center; }
.os-flowlegend .os-tile { flex: none; }
.os-flowlegend svg.os-arrow { width: 16px; height: 12px; flex: none; color: var(--m19-ink-4); }

/* ── Metric cards ───────────────────────────────────────────────────────── */
.os-metrics { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.os-metric { display: flex; align-items: center; gap: 14px; padding: 18px; }
.os-metric-text { min-width: 0; flex: 1 1 auto; }
.os-metric-label { font-size: .84rem; color: var(--m19-ink-2); }
.os-metric-value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; margin-block: 6px 4px; }
.os-metric-note { font-size: .82rem; color: var(--m19-ink-3); }
.os-metric-note.is-active { color: var(--m19-state-success-ink); font-weight: 600; }

/* Work summary tiles */
.os-summary { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.os-summary-item { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--os-line); border-radius: var(--os-radius-sm); }
.os-summary-value { font-size: 1.15rem; font-weight: 700; }
.os-summary-label { font-size: .76rem; color: var(--m19-ink-3); white-space: nowrap; }

/* ── Projects ───────────────────────────────────────────────────────────── */
.os-progress {
  /* A fixed track, not `width: 100%; max-width: 88px`. Inside a content-sized flex row
     that percentage resolves against a width the row itself takes from its content, so
     the bar and the figure beside it ran past the card's edge. */
  width: 88px; height: 6px; flex: none;
  border-radius: var(--os-radius-pill); background: var(--os-paper-2); overflow: hidden;
}
.os-progress > i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: var(--os-accent); }
.os-progress-risk > i { background: var(--m19-state-danger); }
/* Completion is data, so it is carried by a class rather than an inline style the
   content security policy would drop. */
.p52 { --v: 52%; } .p64 { --v: 64%; } .p78 { --v: 78%; } .p91 { --v: 91%; }
.os-pct { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* The device code is read off one screen and typed into another, so it is set
   large, monospaced and widely tracked: this is the one string in the product a
   customer has to copy by eye, and 0/O and 1/l must not be a guess. */
.gh-code {
  margin-block: 14px;
  font-family: var(--m19-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--m19-ink);
}

.os-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.os-inline-form input {
  flex: 1 1 240px; min-width: 0; padding: 10px 13px;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  background: var(--os-paper); color: var(--m19-ink); font: inherit;
}

/* ── Connections ────────────────────────────────────────────────────────── */
.os-connections {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  margin-top: 18px;
}
.os-conn { display: grid; gap: 10px; padding: 15px; }
.os-conn-logo {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--os-radius-sm); font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.os-conn-logo svg { width: 21px; height: 21px; }
.os-conn-name { font-size: .86rem; font-weight: 600; }
.os-conn-state { font-size: .76rem; color: var(--m19-state-success-ink); font-weight: 600; }
.os-conn-state.is-off { color: var(--m19-ink-4); }
/* Vendor marks are drawn as tinted monograms from platform tones: this surface does not
   hotlink or bundle third-party trademarks to make a demo look real. */
.os-conn-logo { background: var(--m19-state-neutral-soft); color: var(--m19-state-neutral-ink); }
.os-conn-logo.tone-warning { background: var(--m19-state-warning-soft); color: var(--m19-state-warning-ink); }
.os-conn-logo.tone-info    { background: var(--m19-state-info-soft);    color: var(--m19-state-info-ink); }
.os-conn-logo.tone-success { background: var(--m19-state-success-soft); color: var(--m19-state-success-ink); }
.os-conn-logo.tone-danger  { background: var(--m19-state-danger-soft);  color: var(--m19-state-danger-ink); }
.os-conn-logo.tone-accent  { background: var(--os-accent-tint);         color: var(--os-accent-ink); }

/* ── Settings ───────────────────────────────────────────────────────────── */
.os-profile { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--os-line-soft); }
.os-avatar {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: var(--os-radius-pill);
  background: var(--os-accent-tint); color: var(--os-accent-ink);
  font-weight: 700; font-size: .95rem;
}
.os-setting {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--os-line-soft);
}
.os-setting > label { flex: 1 1 160px; font-size: .88rem; font-weight: 500; }
.os-setting .os-select-wrap { flex: 0 1 260px; min-width: 180px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.os-foot { border-top: 1px solid var(--os-line); background: var(--os-paper); }
.os-foot-inner {
  display: grid; gap: clamp(20px, 3vw, 28px);
  padding: clamp(22px, 3vw, 30px) clamp(16px, 3vw, 40px);
  width: min(1280px, 100%); margin-inline: auto;
}
.os-foot-links { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
.os-foot-links a { display: flex; gap: 11px; align-items: flex-start; min-height: var(--m19-tap); }
.os-foot-links svg { width: 21px; height: 21px; flex: none; color: var(--m19-ink); margin-top: 2px; }
.os-foot-title { font-size: .85rem; font-weight: 600; }
.os-foot-sub { font-size: .76rem; color: var(--m19-ink-3); }
.os-foot-brand { display: grid; gap: 8px; justify-items: start; }
.os-foot-legal { font-size: .74rem; color: var(--m19-ink-3); }
.os-foot-parent { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--m19-ink-3); }
.os-foot-parent img { width: 18px; height: 18px; }

/* On a phone the description under each link roughly triples the footer's
   height for words the title already carries ("Status" / "System health and
   uptime"). Icon and title alone stay legible and cut that back down. */
@media (max-width: 599.98px) {
  .os-foot-sub { display: none; }
  .os-foot-links a { min-height: 0; }
  .os-foot-links { gap: 12px 16px; }
  .os-foot-inner { gap: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Widths. One column, then work plus insight, then the rail joins them.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 560px) {
  .os-stats { grid-template-columns: 1fr 1fr; }
  .os-stat + .os-stat { border-inline-start: 1px solid var(--os-line-soft); }
  .os-stat:nth-child(3) { border-inline-start: 0; }
  .os-stats > .os-stat:nth-child(n+3) { border-top: 1px solid var(--os-line-soft); }
  .os-features { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .os-foot-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .os-foot-brand { justify-items: end; text-align: end; }
  .os-hero-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
  .os-columns { grid-template-columns: minmax(0, 1fr) minmax(0, var(--os-insight)); }
  .os-columns-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1040px) {
  .os-stats { grid-template-columns: repeat(4, 1fr); }
  .os-stats > .os-stat:nth-child(n+3) { border-top: 0; }
  .os-stat:nth-child(3) { border-inline-start: 1px solid var(--os-line-soft); }
  .os-features { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1080px) {
  /* The rail leaves the bottom of the screen and becomes a column. */
  .os-app { grid-template-columns: var(--os-rail) minmax(0, 1fr); }
  .os-rail {
    position: sticky; inset: 0 auto auto 0; height: 100vh;
    display: block; overflow-y: auto; overflow-x: hidden;
    padding: 22px 14px;
    background: var(--os-paper); backdrop-filter: none;
    border-top: 0; border-inline-end: 1px solid var(--os-line);
  }
  .os-rail-head { display: grid; gap: 16px; padding: 0 8px 20px; justify-items: start; }
  .os-rail-head .os-badge { font-size: .58rem; letter-spacing: .04em; padding: 6px 9px; line-height: 1.45; }
  .os-rail-nav { display: grid; gap: 2px; }
  .os-rail a {
    grid-auto-flow: column; grid-template-columns: 20px 1fr; justify-items: start;
    align-items: center; gap: 12px;
    min-width: 0; padding: 0 12px; min-height: 42px;
    font-size: .87rem; text-align: start;
  }
  /* The sidebar has room, so the label goes back to being seen, not just heard. */
  .os-rail a span {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip-path: none; white-space: nowrap; line-height: 1.15;
  }
  .os-body { padding-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Environment
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .os *, .os *::before, .os *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

@media (prefers-color-scheme: dark) {
  /* Everything resolves through the platform tokens, which define both themes. The one
     thing that cannot: the hero's contour field and glass need more light to survive on a
     dark ground, and the ink action inverts to paper so its label stays readable. */
  :root {
    --os-ground: color-mix(in srgb, var(--m19-canvas) 82%, var(--m19-surface));
  }
  .os-topo { color: color-mix(in srgb, var(--m19-surface) 16%, transparent); }
  .os-btn-primary { background: var(--m19-ink); border-color: var(--m19-ink); color: var(--m19-canvas); }
  .os-btn-primary:hover { background: var(--m19-ink-2); border-color: var(--m19-ink-2); }
  .os-logo-glyph { color: var(--m19-ink); }
}

:root[data-m19-theme="dark"] {
  --os-ground: color-mix(in srgb, var(--m19-canvas) 82%, var(--m19-surface));
}
:root[data-m19-theme="dark"] .os-topo { color: color-mix(in srgb, var(--m19-surface) 16%, transparent); }
:root[data-m19-theme="dark"] .os-btn-primary { background: var(--m19-ink); border-color: var(--m19-ink); color: var(--m19-canvas); }
:root[data-m19-theme="dark"] .os-btn-primary:hover { background: var(--m19-surface-2); border-color: var(--m19-surface-2); }

:root[data-m19-theme="light"] .os-topo { color: color-mix(in srgb, var(--m19-ink) 11%, transparent); }
:root[data-m19-theme="light"] .os-btn-primary { background: var(--m19-ink); border-color: var(--m19-ink); color: var(--m19-surface); }

@media (forced-colors: active) {
  .os-card, .os-btn, .os-graph-node, .os-wnode, .os-counters, .os-row-bordered { border-color: CanvasText; }
  .os-topo, .os-iso { display: none; }
  .os-rail a[aria-current="page"] { outline: 2px solid CanvasText; }
}

@media print {
  .os-rail, .os-head-tools, .os-topo, .os-quick, .os-ask-send { display: none; }
  .os-app { grid-template-columns: 1fr; }
  .os-card { box-shadow: none; border-color: #000; }
  .os-view[hidden] { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Reference pass two — the components the second sheet introduces.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Vendor marks ─────────────────────────────────────────────────────────
   Third-party logos are the one thing on this surface that must NOT follow the
   theme: a brand mark recoloured is a different mark. They carry their own
   colours in the markup and are sized, never restyled, from here. */
.os-vendor { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.os-vendor svg { width: 100%; height: 100%; }
.os-vendor-aws { display: grid; justify-items: center; gap: 1px; color: var(--m19-ink); }
.os-vendor-aws b { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.os-vendor-aws svg { width: 26px; height: 9px; }

/* ── The account card at the foot of the rail ─────────────────────────── */
.os-rail-user { display: none; }
.os-rail-user button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px; min-height: var(--m19-tap);
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  background: var(--os-paper); cursor: pointer; text-align: start;
}
.os-rail-user button:hover { border-color: color-mix(in srgb, var(--m19-ink) 20%, var(--os-line)); }
.os-rail-user .os-avatar { width: 34px; height: 34px; font-size: .78rem; }
.os-rail-user-text { min-width: 0; flex: 1 1 auto; }
.os-rail-user-name { font-size: .82rem; font-weight: 600; }
.os-rail-user-line { font-size: .72rem; color: var(--m19-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-rail-user svg { width: 15px; height: 15px; flex: none; color: var(--m19-ink-4); }

/* The avatar in its large, quiet form — Settings draws it at 88px in a lilac
   ground, which is the one place a product accent rather than a state applies. */
.os-avatar-lg { width: 88px; height: 88px; font-size: 1.7rem; letter-spacing: .01em; }
.os-avatar-soft { background: color-mix(in srgb, var(--m19-spectrum-2) 16%, var(--m19-surface)); color: var(--m19-ink); }

/* ── Segmented tabs with counts ──────────────────────────────────────── */
.os-tabs-seg {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--os-line); border-radius: var(--os-radius-sm);
  padding: 4px; background: var(--os-paper); border-bottom: 1px solid var(--os-line);
  margin-bottom: 22px;
}
.os-tabs-seg button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--os-radius-xs); margin-bottom: 0;
  font-size: .88rem; font-weight: 600; color: var(--m19-ink-3);
}
.os-tabs-seg button:hover { color: var(--m19-ink); }
.os-tabs-seg button[aria-selected="true"] { color: var(--os-accent-ink); background: var(--os-accent-tint); }
.os-tab-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px;
  padding: 0 7px; border-radius: var(--os-radius-pill);
  background: var(--m19-state-neutral-soft); color: var(--m19-state-neutral-ink);
  font-size: .7rem; font-weight: 700;
}
.os-tabs-seg button[aria-selected="true"] .os-tab-count { background: var(--os-accent); color: var(--m19-on-accent-light); }

/* ── Table ────────────────────────────────────────────────────────────── */
.os-table-wrap { border: 1px solid var(--os-line); border-radius: var(--os-radius); overflow: hidden; }
.os-table { width: 100%; border-collapse: collapse; }
.os-table th, .os-table td { text-align: start; padding: 15px 18px; border: 0; }
.os-table thead th {
  font-size: .8rem; font-weight: 600; color: var(--m19-ink-3);
  border-bottom: 1px solid var(--os-line); text-transform: none; letter-spacing: 0;
}
.os-table tbody tr + tr td { border-top: 1px solid var(--os-line-soft); }
.os-table .col-status, .os-table .col-progress { text-align: end; white-space: nowrap; }
.os-table .col-progress { font-weight: 600; font-variant-numeric: tabular-nums; }
.os-table-project { display: flex; align-items: center; gap: 14px; min-width: 0; }
.os-table-project .os-tile { width: 40px; height: 40px; }
.os-table-project .os-tile svg { width: 20px; height: 20px; }
.os-table-name { font-size: .92rem; font-weight: 500; }
/* Below the table's natural width it scrolls inside its own frame rather than
   widening the page — a wide table in its own scroller is the design. */
.os-table-scroll { overflow-x: auto; }
.os-table-scroll > .os-table { min-width: 480px; }

/* ── Status pill with a dot ──────────────────────────────────────────── */
.os-dotpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--os-radius-xs);
  border: 1px solid var(--m19-line); font-size: .76rem; font-weight: 500;
}
.os-dotpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.os-dotpill-on  { color: var(--m19-state-success-ink); border-color: color-mix(in srgb, var(--m19-state-success) 34%, transparent); }
.os-dotpill-off { color: var(--m19-state-danger-ink);  border-color: color-mix(in srgb, var(--m19-state-danger) 30%, transparent); }

/* ── Connection tile, reference proportions ──────────────────────────── */
.os-conn { justify-items: center; text-align: center; gap: 13px; padding: 22px 14px; }
.os-conn-name { font-size: .92rem; font-weight: 500; }

/* ── Settings value rows ─────────────────────────────────────────────── */
/* The control is still a select — it is the thing that works — but drawn as the
   reference draws it: the value sitting at the end of the row under a chevron,
   with the whole row as the hit target. */
.os-setting-value { position: relative; flex: 0 1 auto; margin-inline-start: auto; }
.os-setting-value select {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--m19-ink-2);
  padding: 0 30px 0 8px; min-height: var(--m19-tap); text-align: end;
  direction: rtl;
}
.os-setting-value select:focus-visible { outline: 3px solid var(--os-accent); border-radius: var(--os-radius-xs); }
.os-setting-value > svg {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; pointer-events: none; color: var(--m19-ink-3);
}
.os-setting-lg { padding: 20px 0; }
.os-setting-lg > label { font-size: .95rem; font-weight: 600; }
.os-profile-lg { gap: 24px; padding-bottom: 26px; }
.os-profile-lg .os-row-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.os-profile-lg .os-row-sub { font-size: .92rem; }

/* The header badge can carry the section's own glyph instead of its number. */
.os-head-id-icon { width: 34px; height: 34px; border-radius: var(--os-radius-sm); }
.os-head-id-icon svg { width: 18px; height: 18px; }

/* ── Phone previews ──────────────────────────────────────────────────── */
.os-phones {
  display: grid; gap: clamp(16px, 3vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.os-phone {
  border: 1px solid var(--os-line); border-radius: 26px;
  background: var(--os-paper); box-shadow: var(--os-shadow-raise);
  padding: 10px 9px 8px; display: grid; grid-template-rows: auto 1fr auto;
  min-width: 0; overflow: hidden;
}
.os-phone-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 10px 8px; font-size: .68rem; font-weight: 600; color: var(--m19-ink-2);
}
.os-phone-status svg { width: 34px; height: 11px; color: var(--m19-ink-2); }
.os-phone-body { padding: 0 9px; display: grid; gap: 11px; align-content: start; min-width: 0; }
.os-phone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.os-phone-head h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }
.os-phone-head svg { width: 16px; height: 16px; color: var(--m19-ink-2); }
.os-phone-body .os-card-pad { padding: 11px; }
.os-phone-body .os-row { padding: 8px 0; gap: 9px; }
.os-phone-body .os-row-title { font-size: .72rem; }
.os-phone-body .os-row-sub { font-size: .66rem; }
.os-phone-body .os-row-time { font-size: .62rem; }
.os-phone-body .os-tile { width: 20px; height: 20px; border-radius: 6px; }
.os-phone-body .os-tile svg { width: 11px; height: 11px; }
.os-phone-body .os-chip { font-size: .6rem; padding: 2px 6px; }
.os-phone-body .os-subhead { font-size: .72rem; margin-bottom: 4px; }
.os-phone-body .os-input { min-height: 30px; font-size: .68rem; padding: 0 9px; }
.os-phone-body .os-ask .os-input { padding-right: 32px; }
.os-phone-body .os-ask-send { min-width: 26px; min-height: 26px; }
.os-phone-body .os-ask-send svg { width: 13px; height: 13px; }
.os-phone-body .os-legend li { font-size: .64rem; gap: 6px; }
.os-phone-body .os-legend { gap: 5px; }
.os-phone-body .os-donut { width: 66px; height: 66px; }
.os-phone-body .os-flow-axis { font-size: .54rem; margin-top: 5px; }
.os-phone-body .os-graph { min-height: 120px; aspect-ratio: 5 / 4; }
.os-phone-body .os-graph-node { min-width: 20px; min-height: 20px; padding: 4px; border-radius: 6px; }
.os-phone-body .os-graph-node svg { width: 11px; height: 11px; }
.os-phone-body .os-link { font-size: .66rem; min-height: 26px; }
.os-phone-body .os-link svg { width: 11px; height: 11px; }
.os-phone-body .os-tabs { margin-bottom: 8px; gap: 2px; }
.os-phone-body .os-tabs button { min-height: 26px; padding: 0 7px; font-size: .64rem; }
.os-phone-tabbar {
  display: flex; align-items: center; justify-content: space-around;
  padding: 9px 6px 4px; margin-top: 12px; border-top: 1px solid var(--os-line-soft);
}
.os-phone-tabbar svg { width: 17px; height: 17px; color: var(--m19-ink-4); }
.os-phone-tabbar .is-on svg { color: var(--os-accent); }
.os-phone-grip { width: 84px; height: 4px; border-radius: 999px; background: var(--m19-line-strong); margin: 7px auto 0; }

/* ── Specimen sheet ──────────────────────────────────────────────────── */
.os-sheet-band { padding-block: clamp(26px, 4vw, 40px); }
.os-sheet-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: clamp(18px, 3vw, 26px); }
.os-sheet-head h2 { font-size: 1.06rem; font-weight: 700; }
.os-sheet-head p { font-size: .82rem; color: var(--m19-ink-3); }
.os-specimens { display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
.os-specimen { display: grid; gap: 12px; align-content: start; min-width: 0; }
.os-specimen > h3 { font-size: .84rem; font-weight: 700; }
.os-specimen-items { display: grid; gap: 9px; justify-items: start; }
.os-specimen-grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 9px; }
.os-specimen .os-btn, .os-specimen .os-dotpill, .os-specimen .os-chip { width: auto; }
.os-btn-tertiary { border-color: transparent; background: var(--os-accent-tint); color: var(--os-accent-ink); }
.os-specimen-node { display: grid; justify-items: center; gap: 6px; }
.os-specimen-node span:last-child { font-size: .66rem; color: var(--m19-ink-3); }
.os-states { display: grid; gap: clamp(16px, 3vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 152px), 1fr)); }
.os-state-item { display: flex; gap: 11px; align-items: flex-start; }
.os-state-item > span:first-child { flex: none; }
.os-state-name { font-size: .82rem; font-weight: 600; }
.os-state-note { font-size: .74rem; color: var(--m19-ink-3); }
.os-swatch {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--os-line); background: var(--os-paper); color: var(--m19-ink-3);
}
.os-swatch svg { width: 14px; height: 14px; }
.os-swatch-hover { box-shadow: var(--os-shadow-raise); }
.os-swatch-active { background: var(--os-accent); border-color: var(--os-accent); }
.os-swatch-selected { background: var(--os-accent); border-color: var(--os-accent); color: var(--m19-on-accent-light); }
.os-swatch-disabled { background: var(--os-paper-2); color: var(--m19-ink-4); }
.os-swatch-loading { border-color: var(--os-accent); border-top-color: transparent; }
.os-swatch-success { background: var(--m19-state-success-soft); border-color: color-mix(in srgb, var(--m19-state-success) 34%, transparent); color: var(--m19-state-success-ink); }
.os-swatch-error { background: var(--m19-state-danger-soft); border-color: color-mix(in srgb, var(--m19-state-danger) 34%, transparent); color: var(--m19-state-danger-ink); }
.os-swatch-info { background: var(--m19-state-info-soft); border-color: color-mix(in srgb, var(--m19-state-info) 34%, transparent); color: var(--m19-state-info-ink); }

@media (min-width: 1080px) {
  .os-rail { display: flex; flex-direction: column; }
  .os-rail-user { display: block; margin-top: auto; padding-top: 16px; }
}

/* A project at risk is a state, not a decision waiting: it takes the danger tone. */
.os-chip-risk { color: var(--m19-state-danger-ink); background: var(--m19-state-danger-soft); border-color: color-mix(in srgb, var(--m19-state-danger) 30%, transparent); }

/* Rows inside their own frame, as Decisions draws them. */
.os-rows-framed { border: 1px solid var(--os-line); border-radius: var(--os-radius); overflow: hidden; }
.os-rows-framed > .os-row { padding: 14px 18px; border-top: 1px solid var(--os-line-soft); }
.os-rows-framed > .os-row:first-child { border-top: 0; }

/* Filter chips drawn as tabs rather than solid pills. */
.os-chips-tab { gap: 2px; border-bottom: 1px solid var(--os-line); padding-bottom: 0; }
.os-chips-tab button {
  border: 0; border-radius: var(--os-radius-sm) var(--os-radius-sm) 0 0;
  min-height: 40px; margin-bottom: -1px; background: transparent;
}
.os-chips-tab button[aria-pressed="true"] {
  background: var(--os-accent-tint); color: var(--os-accent-ink); border: 0;
}

/* Specimen-only presentation. These are drawn states, not live controls: the sheet
   shows what each component looks like, so hover and press belong to the real thing. */
.os-iconbtn-boxed { border: 1px solid var(--os-line); background: var(--os-paper); border-radius: var(--os-radius-sm); min-width: 40px; min-height: 40px; }
.os-seg-on  { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: var(--os-radius-sm); background: var(--os-accent-tint); color: var(--os-accent-ink); font-size: .84rem; font-weight: 600; }
.os-seg-off { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: var(--os-radius-sm); color: var(--m19-ink-3); font-size: .84rem; font-weight: 600; }
.os-specimen .os-chip { gap: 6px; padding: 5px 10px; }
.os-specimen .os-chip svg { width: 13px; height: 13px; }
.os-specimen-wide { justify-items: stretch; width: 100%; }
.os-specimen .os-quick span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--os-line); border-radius: var(--os-radius-sm); font-size: .8rem; color: var(--m19-ink-2); }
.os-ask-tall .os-input { min-height: 74px; padding: 11px 52px 11px 14px; line-height: 1.5; }
.os-ask-tall .os-ask-send { top: auto; bottom: 6px; translate: none; }
.os-specimen-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.os-graph-node.is-static { position: static; translate: none; width: 34px; height: 34px; }
.os-graph-node.is-warn { background: var(--m19-state-warning-soft); border-color: color-mix(in srgb, var(--m19-state-warning) 34%, transparent); color: var(--m19-state-warning-ink); }
/* The loading swatch is a ring with a gap; it turns only where motion is welcome. */
.os-swatch-loading { border-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .os-swatch-loading { animation: os-spin 1.1s linear infinite; }
}
@keyframes os-spin { to { rotate: 360deg; } }


/* ══════════════════════════════════════════════════════════════════════════
   The specimen sheet is a poster: it needs more room across than a reading
   page, and its three bands each want a fixed number of columns rather than
   whatever auto-fit decides.
   ══════════════════════════════════════════════════════════════════════════ */
.os-page-wide { width: min(1480px, 100%); }
.os-sheet-band > .os-hero-grid { align-items: start; }
.os-specimen .os-btn { font-size: .8rem; min-height: 38px; padding: 0 13px; gap: 7px; }
.os-specimen .os-btn-primary { padding: 0 15px; }
.os-specimen .os-btn svg { width: 13px; height: 13px; }
.os-specimen .os-link { font-size: .8rem; min-height: 34px; }
.os-specimen .os-select { font-size: .8rem; min-height: 38px; }
.os-specimen .os-select-wrap { width: 100%; max-width: 150px; }
.os-specimen .os-legend li { font-size: .78rem; }

@media (min-width: 1080px) {
  .os-sheet-band > .os-hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 3fr); }
  .os-phones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
  /* Seven specimen groups across, with the composer given the extra room it needs
     for a multi-line field. */
  .os-specimens { grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr 1fr 1fr; }
  .os-states { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Phone typography at four-across. The frames are ~215px wide there, so the row
   text column is ~120px and the defaults were wrapping titles onto three lines. */
.os-phone-body .os-row-title { font-size: .68rem; line-height: 1.3; }
.os-phone-body .os-row-sub { font-size: .62rem; line-height: 1.3; }
.os-phone-body .os-row-time { font-size: .58rem; }
.os-phone-body .os-chip { font-size: .55rem; padding: 2px 5px; }
.os-phone-body .os-row-meta { gap: 7px; }
.os-phone-body .os-tabs button { min-height: 24px; padding: 0 5px; font-size: .58rem; }
.os-phone-head h3 { font-size: .95rem; }


/* The sheet's masthead sits in a narrow column beside four phone frames, so it takes
   its own headline size rather than the marketing hero's — at hero scale the word
   "Components," ran straight under the first preview. */
.os-sheet-band h1 { font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.12; }
.os-sheet-band .os-hero-lead { font-size: .95rem; max-width: 30ch; }
.os-sheet-band .os-hero-actions { gap: 10px; margin-top: 22px; }
.os-sheet-band .os-badge { font-size: .66rem; letter-spacing: .05em; }

@media (min-width: 1080px) {
  .os-sheet-band > .os-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 4fr); }
  .os-sheet-band .os-hero-actions { display: grid; justify-items: start; }
}

/* The state diagram has a floor: five labelled nodes laid out as a diamond need about
   460px, and below that the node boxes painted past the edge of the screen. It scrolls
   inside its own frame instead — the same answer the surface gives a wide table, and the
   one the sweep's element test explicitly allows. Every count in it is also written out
   in the legend strip underneath, so nothing here is reachable only by scrolling. */
.os-graph-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.os-graph-scroll > .os-workgraph { min-width: 460px; }

/* The callback URL, which shares .gh-code's monospace but none of its sizing:
   that is tuned for an eight-character device code, and at 2.4rem with .18em
   tracking a URL becomes three lines of unreadable stagger. It has to be
   selectable and copyable exactly, so it wraps anywhere rather than scrolling
   off the right edge of a phone. */
.os-callback {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius-sm);
  background: var(--os-well, var(--os-paper));
  user-select: all;
}


/* ── The goal view ─────────────────────────────────────────────────────── */

/* A goal row is a link in behaviour, so it must read as one: pointer, and a
   hover the rest of the rows do not have. */
.os-row-link { cursor: pointer; }
.os-row-link:hover, .os-row-link:focus-visible { background: var(--os-well, rgba(127,127,127,.07)); }

.os-goal-title { overflow-wrap: anywhere; }

/* The exact diff. Monospace, scrolls inside its own box rather than widening
   the page, and never wraps: a wrapped diff line reads as two lines changed. */
.os-diff {
  font-family: var(--m19-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .8rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  max-height: 26rem;
  overflow-y: auto;
}

/* Diff lines read as diffs, in state colors the token system already owns. */
.os-diff .dl-add { color: var(--m19-state-success-ink); }
.os-diff .dl-del { color: var(--m19-state-danger-ink); }
.os-diff .dl-hunk { color: var(--m19-state-info-ink); }

/* `hidden` must win over a class that sets `display`; the UA rule
   `[hidden] { display: none }` loses to any class selector. */
.os-ask-send[hidden] { display: none; }
.os-avatar[hidden] { display: none; }
.os-connections[hidden] { display: none; }
.os-head-id[hidden] { display: none; }
.os-rows[hidden] { display: none; }
.os-tile[hidden] { display: none; }