/* ResQ OS components, v2 (Joe, Nov 8; spec: docs/design-system.md).
   Loaded last on every page (index.html), on top of Collab (style.css), the
   shell (os.css) and the module stylesheets. Colors, sizes and radii come
   from /ui/tokens.css only: never put a color here that isn't a token.

   Selectors that restyle an existing class start at .os-main (or .modal) so
   they outrank the older per-module copies, as os.css's layer did. New
   classes (identity header, rows, timeline, icon containers…) are global.
   Collab's chat keeps its own sizes: the global .btn and input rules below
   only set color, border and radius. */

/* ---------- Base ---------- */
html { background: var(--os-ground); }
body { font-family: var(--os-sans); background: var(--os-ground); color: var(--os-ink); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
.os-frame, .os-main { background: var(--os-ground); color: var(--os-ink); font-family: var(--os-sans); }
::selection { background: var(--os-accent-soft); }
:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 2px; }
.os-main :is(.os-mono-text, .os-num, .num, td.num, .st-num) { font-family: var(--os-num); font-variant-numeric: tabular-nums; }
.os-id, code, kbd, pre, .os-code { font-family: var(--os-code); }
.os-main .os-id { font-size: 12px; font-weight: 500; color: var(--os-subtle); }
.os-muted, .muted, .hint { color: var(--os-muted); }
.os-subtle { color: var(--os-subtle); }
/* Icons: the Lucide set in /icons.css (<i class="i i-name">). 16px in controls and rows. */
:is(.btn, .os-rows, .os-identity-meta, .os-tabs, .os-icon-box, .os-notice) .i { width: var(--os-icon); height: var(--os-icon); }

/* ---------- Brand accent: the ResQ orange in a few deliberate places ----------
   Dock, Home tile, the active module tab marker, record avatars and brand
   icons (.tone-brand), and .os-brand-mark before a hero title. Never on
   buttons, links, focus or status badges. */
.os-brand-mark { display: inline-block; width: 4px; height: 1em; border-radius: 2px; background: var(--os-brand-gradient); vertical-align: -0.1em; margin-right: 10px; }

/* ---------- Labels: small sentence-case sans ---------- */
.os-main :is(.os-label, .os-sec-title, .os-crumbs ol, .rid-table thead th, .os-stat .os-label),
:is(.modal, .shell) :is(.os-label, .os-sec-title) {
  font-family: var(--os-sans); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--os-muted);
}
.os-main :is(.os-label, .os-stat .os-label) { font-size: 13px; }

/* ---------- Page header and breadcrumbs ---------- */
.os-main .os-hero h1 { font: 700 var(--os-text-2xl) var(--os-sans); letter-spacing: -0.015em; color: var(--os-ink); }
.os-main .os-sub { color: var(--os-muted); font-size: 14px; }
.os-main .os-crumbs ol { font-size: 13px; color: var(--os-subtle); }
.os-main .os-crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--os-line-strong); font-size: 13px; }
.os-main .os-crumbs a { color: var(--os-muted); }
.os-main .os-crumbs [aria-current=page] { color: var(--os-ink); }

/* ---------- Section heading ---------- */
.os-main .os-sec-title { font: 600 var(--os-text-lg) var(--os-sans); color: var(--os-ink); }
.os-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border: 0; border-radius: var(--os-radius-pill); background: var(--os-soft); color: var(--os-subtle); font: 500 11.5px/1 var(--os-sans); font-variant-numeric: tabular-nums; }
.os-count.attn { background: var(--os-partial-bg); color: var(--os-partial-ink); }

/* ---------- Cards ---------- */
.os-main :is(.os-card, .rid-table-wrap, .os-steps, .os-fold), .modal .os-card {
  background: var(--os-card); border: 1px solid var(--os-line); border-radius: var(--os-radius); box-shadow: var(--os-shadow-sm);
}
.os-main :is(a.os-card, button.os-card):hover { border-color: var(--os-line-strong); box-shadow: var(--os-shadow); transform: none; text-decoration: none; }
.os-main .os-fold > summary { border-radius: var(--os-radius); }
.os-main .os-fold[open] > summary { border-radius: var(--os-radius) var(--os-radius) 0 0; }
.os-main :is(.os-pad, .os-card.os-pad, .os-card > .os-card-body) { padding: var(--os-s-5); }
/* Card header: title, count, actions on the right */
.os-card-head { display: flex; align-items: center; gap: var(--os-s2); min-height: 52px; padding: 0 var(--os-s4) 0 var(--os-s-5); border-bottom: 1px solid var(--os-line); }
.os-card-head :is(h2, h3) { margin: 0; font: 600 var(--os-text-md) var(--os-sans); color: var(--os-ink); }
.os-card-acts { margin-left: auto; display: flex; gap: var(--os-s1); align-items: center; }
.os-card-foot { padding: var(--os-s3) var(--os-s-5); border-top: 1px solid var(--os-line); font: 500 var(--os-text-sm) var(--os-sans); }
/* Layout helpers */
.os-stack { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--os-s4); align-content: start; }
.os-split { display: grid; gap: var(--os-s4); grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 1024px) { .os-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Identity header: customer, vendor, organization, person, entity ---------- */
.os-identity { display: flex; gap: var(--os-s4); align-items: center; padding: var(--os-s-5); }
.os-identity .os-avatar { width: 56px; height: 56px; border-radius: var(--os-radius); font: 600 20px/56px var(--os-sans); }
.os-identity-main { min-width: 0; flex: 1; }
.os-identity-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--os-s2); margin: 0; font: 600 var(--os-text-xl) var(--os-sans); letter-spacing: -0.01em; color: var(--os-ink); }
.os-identity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font: 400 var(--os-text-sm) var(--os-sans); color: var(--os-muted); }
.os-identity-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.os-identity-acts { display: flex; flex-wrap: wrap; gap: var(--os-s2); align-items: center; flex: none; }

/* ---------- Avatars and icon containers ---------- */
.os-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--os-soft); color: var(--os-muted); font: 600 12px/1 var(--os-sans); overflow: hidden; }
.os-avatar img { width: 100%; height: 100%; object-fit: cover; }
.os-icon-box { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--os-radius-xs); background: var(--os-soft); color: var(--os-muted); flex: none; }
:is(.os-avatar, .os-icon-box).tone-blue { background: var(--os-info-bg); color: var(--os-info-ink); }
:is(.os-avatar, .os-icon-box).tone-green { background: var(--os-live-bg); color: var(--os-live-ink); }
:is(.os-avatar, .os-icon-box).tone-amber { background: var(--os-partial-bg); color: var(--os-partial-ink); }
:is(.os-avatar, .os-icon-box).tone-red { background: var(--os-gap-bg); color: var(--os-gap-ink); }
:is(.os-avatar, .os-icon-box).tone-brand { background: var(--os-brand-soft); color: var(--os-brand); }

/* ---------- Metrics ---------- */
.os-main .os-stats { display: grid; gap: var(--os-s4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* A group of four never leaves an orphan tile: 4 across on desktop, 2×2 below */
.os-main .os-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .os-main .os-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.os-main .os-stat { display: grid; gap: 4px; align-content: start; justify-items: start; padding: var(--os-s4) var(--os-s-5); min-width: 0; overflow-wrap: anywhere; }
.os-stat-top { display: flex; align-items: center; gap: var(--os-s2); }
/* Older tiles are built from <p> blocks: no paragraph margins inside a tile, so every tile has the same rhythm. */
.os-main .os-stat > p { margin: 0; }
.os-main .os-stat > .os-muted.small, .os-main .os-stat > .small { font-size: var(--os-text-xs); color: var(--os-subtle); }
.os-main .os-stat .os-label { margin: 0; font: 500 var(--os-text-sm) var(--os-sans); color: var(--os-muted); }
.os-main :is(.os-stat .os-num, .os-num-big, .pp-metric-value) { font: 600 var(--os-text-kpi) var(--os-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--os-ink); }
.os-stat-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 var(--os-text-xs) var(--os-sans); color: var(--os-subtle); }
.os-trend { display: inline-flex; align-items: center; gap: 2px; font: 600 var(--os-text-xs) var(--os-sans); font-variant-numeric: tabular-nums; }
.os-trend.up { color: var(--os-live-ink); } .os-trend.down { color: var(--os-gap-ink); } .os-trend.flat { color: var(--os-subtle); }

/* ---------- Status badges and tags ---------- */
:is(.os-chip, .st-chip) { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--os-radius-pill); font: 500 12px/1 var(--os-sans); letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.os-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.os-chip.no-dot::before { display: none; }
.os-chip-live, .st-live { background: var(--os-live-bg); color: var(--os-live-ink); }
.os-chip-partial, .st-partial { background: var(--os-partial-bg); color: var(--os-partial-ink); }
.os-chip-gap, .st-gap { background: var(--os-gap-bg); color: var(--os-gap-ink); }
.os-chip-info { background: var(--os-info-bg); color: var(--os-info-ink); }
.os-chip-external, .os-chip-neutral, .st-external { background: var(--os-ext-bg); color: var(--os-ext-ink); }
.os-chip-planned { background: transparent; color: var(--os-muted); box-shadow: inset 0 0 0 1px var(--os-line-strong); }
.os-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--os-radius-xs); background: var(--os-soft); color: var(--os-ink-2); font: 500 12px/1 var(--os-sans); white-space: nowrap; vertical-align: middle; }

/* ---------- Tabs: a pill track, the active tab a raised pill with the orange marker ---------- */
.os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) {
  display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 var(--os-s5); padding: 3px; overflow-x: auto; scrollbar-width: none;
  background: var(--os-soft); border: 1px solid var(--os-line); border-radius: var(--os-radius-pill);
}
.os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) :is(a, button) {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 32px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--os-radius-pill);
  background: none; color: var(--os-muted) !important; font: 500 var(--os-text-sm) var(--os-sans); white-space: nowrap; text-decoration: none !important; cursor: pointer;
}
.os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) :is(a, button):hover { color: var(--os-ink) !important; background: none; }
.os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) :is(a[aria-current=page], button[aria-selected=true], .on) {
  background: var(--os-card); color: var(--os-ink) !important; font-weight: 600; border-bottom-color: transparent; box-shadow: var(--os-shadow-sm), 0 0 0 1px var(--os-line);
}
.os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) :is(a[aria-current=page], button[aria-selected=true], .on)::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--os-brand);
}
/* The pill track never touches what's around it (Joe, Nov 8): 24px above when it
   follows content, 24px below, whatever the next block's own margin is. */
.os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) { margin-bottom: var(--os-s5) !important; }
.os-main :is(.os-stats, .os-card, .os-identity, .os-notice, .os-steps, .setup-notice, .rid-table-wrap, .os-fold) + :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) { margin-top: var(--os-s5) !important; }
/* Segmented controls (sub-views, filters): the same track, no brand marker */
.os-seg-nav { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--os-soft); border: 1px solid var(--os-line); border-radius: var(--os-radius-pill); }
.os-seg-nav :is(a, button) { display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 30px; padding: 0 12px; border: 0; border-radius: var(--os-radius-pill); background: none; color: var(--os-muted); font: 500 var(--os-text-sm) var(--os-sans); text-decoration: none !important; cursor: pointer; }
.os-seg-nav :is(a, button):hover { color: var(--os-ink); }
.os-seg-nav :is(a[aria-current], button[aria-current], button[aria-pressed=true]) { background: var(--os-card); color: var(--os-ink); box-shadow: var(--os-shadow-sm), 0 0 0 1px var(--os-line); }

/* ---------- Filter toolbar and inline notice ---------- */
.os-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-s2); }
.os-filters .os-filters-reset { margin-left: auto; }
.os-notice { margin: 0; display: flex; align-items: center; gap: var(--os-s2); padding: 8px var(--os-s3); border-radius: var(--os-radius-sm); background: var(--os-partial-bg); color: var(--os-partial-ink); font: 500 var(--os-text-sm) var(--os-sans); }
.os-notice a { color: inherit; text-decoration: underline; margin-left: auto; }
.os-notice .btn { margin-left: auto; }
.os-notice-info { background: var(--os-info-bg); color: var(--os-info-ink); }
.os-notice-neutral { background: var(--os-ext-bg); color: var(--os-ext-ink); }

/* ---------- Label and value rows ---------- */
.os-kv { margin: 0; }
.os-kv > div { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: var(--os-s4); align-items: center; min-height: 40px; padding: 6px 0; border-top: 1px solid var(--os-line); }
.os-card > .os-kv > div { padding-left: var(--os-s-5); padding-right: var(--os-s-5); }
.os-kv > div:first-child { border-top: 0; }
.os-kv dt { font: 400 var(--os-text-sm) var(--os-sans); color: var(--os-muted); }
.os-kv dd { margin: 0; font: 500 var(--os-text-md) var(--os-sans); color: var(--os-ink); min-width: 0; overflow-wrap: anywhere; text-align: left; }
.os-kv dd a { color: var(--os-link); }
.os-kv dd.empty { color: var(--os-subtle); font-weight: 400; }
.os-kv dd.edit { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -8px; padding: 4px 8px; border-radius: var(--os-radius-sm); cursor: pointer; }
.os-kv dd.edit:hover, .os-kv dd.edit:focus-within { background: var(--os-hover); }
.os-kv dd.edit .i { color: var(--os-subtle); opacity: 0; }
.os-kv dd.edit:hover .i, .os-kv dd.edit:focus-within .i { opacity: 1; }

/* ---------- Rows: people, products, records ---------- */
.os-rows { list-style: none; margin: 0; padding: 0; }
.os-rows > li { display: flex; align-items: center; gap: var(--os-s3); min-height: 52px; padding: 8px var(--os-s-5); border-top: 1px solid var(--os-line); }
.os-rows > li:first-child { border-top: 0; }
.os-rows > li:hover { background: var(--os-hover); }
.os-row-main { min-width: 0; flex: 1; }
/* Row text wraps. Only a title that is a link to its record (with the full text in title) may end in … on wide screens; sub-lines, dates and amounts never truncate. */
.os-row-title { font: 500 var(--os-text-md) var(--os-sans); color: var(--os-ink); overflow-wrap: anywhere; }
a.os-row-title[title] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.os-row-sub { font: 400 var(--os-text-xs) var(--os-sans); color: var(--os-subtle); overflow-wrap: anywhere; }
.os-row-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--os-s2); flex: none; font: 400 var(--os-text-sm) var(--os-sans); color: var(--os-muted); font-variant-numeric: tabular-nums; }

/* ---------- Timeline ---------- */
.os-timeline { list-style: none; margin: 0; padding: var(--os-s2) var(--os-s-5) var(--os-s3); }
.os-timeline > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--os-s3); padding: 10px 0; }
.os-timeline > li:not(:last-child)::after { content: ''; position: absolute; left: 13.5px; top: 42px; bottom: -6px; width: 1px; background: var(--os-line); }
.os-timeline time { font: 400 var(--os-text-xs) var(--os-sans); color: var(--os-subtle); white-space: nowrap; }

/* ---------- Buttons: primary / secondary / outline / ghost / danger ---------- */
.btn, .os-main .btn, .modal .btn { border-radius: var(--os-radius-sm); background: var(--os-card); border: 1px solid var(--os-line-strong); color: var(--os-ink); box-shadow: none; font-family: var(--os-sans); }
.btn:hover, .os-main .btn:hover, .modal .btn:hover { background: var(--os-hover); }
/* Size: ResQ OS pages and dialogs (Collab's chat keeps its own sizes) */
.os-main .btn, .os-main button.btn, .modal .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--os-control-h); padding: 0 14px; font-size: 14px; font-weight: 500; }
.os-main .btn.small, .modal .btn.small { min-height: var(--os-control-h-sm); padding: 0 10px; font-size: 13px; }
:is(.os-main, .modal) .btn.icon { width: var(--os-control-h); padding: 0; }
.btn.primary, .os-main .btn.primary, .modal .btn.primary { background: var(--os-accent-bg); border-color: var(--os-accent-bg); color: #fff; box-shadow: var(--os-shadow-sm); }
.btn.primary:hover, .os-main .btn.primary:hover, .modal .btn.primary:hover { background: var(--os-accent-bg-hover); border-color: var(--os-accent-bg-hover); }
:is(.os-main, .modal) .btn.secondary { background: var(--os-soft); border-color: transparent; }
:is(.os-main, .modal) .btn.secondary:hover { background: var(--os-line); }
:is(.os-main, .modal) .btn.outline { background: transparent; }
:is(.os-main, .modal) .btn.ghost { background: transparent; border-color: transparent; color: var(--os-muted); }
:is(.os-main, .modal) .btn.ghost:hover { background: var(--os-hover); color: var(--os-ink); }
.btn.danger, .os-main .btn.danger, .modal .btn.danger { background: var(--os-card); border-color: var(--os-line-strong); color: var(--os-gap-ink); }
.btn.danger:hover, .os-main .btn.danger:hover, .modal .btn.danger:hover { background: var(--os-gap-bg); border-color: var(--os-gap-ink); }
.btn.danger.primary, .os-main .btn.danger.primary, .modal .btn.danger.primary { background: var(--os-gap-ink); border-color: var(--os-gap-ink); color: #fff; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--os-muted); border-right-color: transparent; animation: os-spin .7s linear infinite; }
.btn.primary.is-loading::after { border-color: #fff; border-right-color: transparent; }
@keyframes os-spin { to { transform: rotate(360deg); } }

/* ---------- Inputs ---------- */
:is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select, textarea) {
  background: var(--os-card); color: var(--os-ink); border: 1px solid var(--os-line-strong); border-radius: var(--os-radius-sm);
}
:is(.os-main, .modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select) { min-height: var(--os-control-h); }
:is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--os-accent); outline: none; box-shadow: 0 0 0 3px var(--os-focus); }
/* Radios and checkboxes: no glow on a click or when a dialog focuses them; a ring only from the keyboard (#126). */
input:is([type=checkbox], [type=radio]):focus { outline: none; box-shadow: none; }
input:is([type=checkbox], [type=radio]):focus-visible { outline: 2px solid var(--os-accent); outline-offset: 2px; }
:is(input, select, textarea):disabled { background: var(--os-soft); color: var(--os-subtle); }
::placeholder { color: var(--os-subtle); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--os-accent-bg); }

/* ---------- Tables ---------- */
.os-main .rid-table-wrap { overflow: auto; }
.os-main .rid-table thead th { background: var(--os-soft); color: var(--os-muted); font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
.os-main .rid-table :is(th, td) { border-top-color: var(--os-line); }
.os-main .rid-table tbody tr:hover { background: var(--os-hover); }

/* ---------- Menus, dialogs, toasts ---------- */
.os-more-pop, .menu-pop, .view-pop, .pop { background: var(--os-raised); border: 1px solid var(--os-line); border-radius: var(--os-radius); box-shadow: var(--os-shadow-md); color: var(--os-ink); }
.os-more-pop { padding: 4px; }
.os-more-pop :is(button, a) { min-height: 34px; border-radius: var(--os-radius-sm); font-weight: 400; }
.os-more-pop .danger, .os-more-pop [data-danger] { color: var(--os-gap-ink); }
.modal-back { background: var(--os-overlay); }
.modal { background: var(--os-raised); border: 1px solid var(--os-line); border-radius: var(--os-radius-lg); box-shadow: var(--os-shadow-lg); color: var(--os-ink); }
.modal-head { border-bottom-color: var(--os-line); }
.modal-foot { border-top-color: var(--os-line); }
.toast { background: var(--os-ink); color: var(--os-card); border: 0; border-radius: var(--os-radius-sm); box-shadow: var(--os-shadow-lg); }

/* ---------- Workflow bubbles ---------- */
.os-step-done::before, .os-step-current::before { background: var(--os-accent); }
.os-step-done .os-step-dot { background: var(--os-accent-bg); border-color: var(--os-accent-bg); color: #fff; }
.os-step-current .os-step-dot { border-color: var(--os-accent); color: var(--os-accent); box-shadow: 0 0 0 4px var(--os-accent-soft); }
.os-step-dot, .os-step-label small { font-family: var(--os-sans); }

/* ---------- Dock: the brand lives here ---------- */
.dock { background: var(--os-dock); }
.dock-tile { background: var(--os-tile); color: var(--os-tile-ink); }
.dock-home { background: var(--os-brand-gradient); color: #fff; }
.dock-theme { display: flex; gap: 4px; margin: 8px 6px 4px; padding: 4px; border: 1px solid var(--os-dock-line); border-radius: var(--os-radius-pill); }
.dock-theme button { flex: 1; min-height: 36px; border: 0; border-radius: var(--os-radius-pill); background: none; color: var(--os-tile-ink); font: 500 13px var(--os-sans); cursor: pointer; }
.dock-theme button[aria-pressed=true] { background: var(--os-tile); color: #fff; }
.dock-theme button:focus-visible { outline: 2px solid var(--os-home-from); outline-offset: 1px; }

/* ---------- ResQ Collab ---------- */
.shell { background: var(--os-ground); }
.shell :is(.side, .sidebar) { background: var(--os-soft); border-color: var(--os-line); }
.shell :is(.main, .panel) { background: var(--os-ground); }
.shell .composer, .shell .msg-input { background: var(--os-card); border-color: var(--os-line-strong); border-radius: var(--os-radius); }

/* ---------- Spacing ----------
   Cards keep their distance through their container's gap (.os-stack,
   .os-split, .os-stats, grids), never a margin on the card: a margin on a card
   inside a grid or flex row pushes it down and makes the row uneven (Joe,
   Nov 8: "card heights are not uniform"). Cards in one row stretch to the
   same height. */
.os-main .home-todos { margin-bottom: var(--os-s3); }
.os-main .cap-edit { row-gap: var(--os-s3); }
.os-main :is(.cap-add, .cap-edit, .rid-row, .os-form) :is(input, select, textarea) + :is(input, select, textarea) { margin-top: var(--os-s2); }
.os-sec { min-width: 0; }
.os-sec-title { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.os-main .os-pillars, .os-main .os-pillars:has(.cap-mods) { align-items: stretch; }

/* ---------- Touch screens: every control reaches 44px ---------- */
@media (pointer: coarse) {
  .os-main .btn, .modal .btn, .os-main .btn.small, .modal .btn.small, .os-more-pop :is(a, button),
  .os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs, .os-seg-nav) :is(a, button),
  :is(.os-main, .modal) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select) { min-height: var(--os-touch); height: auto; }
  :is(.os-main, .modal) .btn.icon { min-width: var(--os-touch); }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .os-main :is(.os-tabs, .rid-tabs, .mn-tabs, .sl-tabs, .agx-tabs, .ask-tabs, .cp-tabs, .hr-tabs, .in-tabs, .lg-tabs, .pr-tabs, .sp-tabs) { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .os-main :is(.os-pad, .os-card.os-pad, .os-card > .os-card-body), .os-identity { padding: var(--os-s4); }
  .os-card > .os-kv > div, .os-rows > li, .os-card-head { padding-left: var(--os-s4); padding-right: var(--os-s4); }
  .os-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .os-main .os-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--os-s3); }
  .os-main .os-stat { padding: var(--os-s3); gap: 2px; }
  .os-main :is(.os-stat .os-num, .os-num-big) { font-size: 20px; line-height: 26px; }
  /* The record header stays compact so the tabs start in the first screen */
  .os-identity { flex-wrap: wrap; }
  .os-identity .os-avatar { width: 40px; height: 40px; font-size: 15px; line-height: 40px; }
  .os-identity-meta > span:not(.os-id):not(:first-child) { display: none; }
  .os-identity-acts { width: 100%; flex: 1 1 100%; }
  /* Phone: the primary action gets the first row; the rest share the second (all 44px, none clipped) */
  .os-identity-acts > .btn.primary { order: -1; flex: 1 1 100%; }
  .os-identity-acts > .btn:not(.primary):not(.icon) { flex: 1 1 0; min-width: 0; }
  .os-identity-acts > .os-more { flex: none; }
  .os-stats-record .os-stat .os-icon-box, .os-stats-record .os-stat-sub { display: none; }
  /* Never hide text on phones */
  .os-row-title, a.os-row-title[title], .os-row-sub { white-space: normal; overflow: visible; }
  .os-rows > li { align-items: flex-start; flex-wrap: wrap; }
  .os-rows > li > .os-row-end { margin-left: auto; }
  .os-timeline > li { grid-template-columns: 28px minmax(0, 1fr); row-gap: 2px; }
  .os-timeline time { grid-column: 2; }
}

/* ---------- View as (/ui/view-as.js): the banner on every screen while the owner views as someone ---------- */
html.va-on { --va-h: 44px; }
html.va-on #app { height: calc(100% - var(--va-h)); margin-top: var(--va-h); }
html.va-on .os-frame { height: 100%; }
.va-banner { position: fixed; inset: 0 0 auto 0; z-index: 950; height: var(--va-h); display: flex; align-items: center; gap: var(--os-s3); padding: 0 var(--os-s4); background: var(--os-info-bg); color: var(--os-info-ink); border-bottom: 1px solid var(--os-line); font: 500 var(--os-text-sm) var(--os-sans); box-sizing: border-box; }
.va-banner .va-end { order: 3; margin-left: auto; min-height: 32px; white-space: nowrap; }
.va-banner .va-text { display: flex; align-items: center; gap: var(--os-s2); min-width: 0; overflow: hidden; white-space: nowrap; }
.va-banner .va-text > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.va-banner .va-eye { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--os-radius-sm); background: var(--os-card); }
.va-banner .va-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; }
.va-banner .va-left { font-variant-numeric: tabular-nums; }
.va-hidden { position: relative; order: 2; }
.va-hidden summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; list-style: none; white-space: nowrap; padding: 6px 2px; }
.va-hidden summary::-webkit-details-marker { display: none; }
.va-hidden summary:focus-visible, .va-banner .va-end:focus-visible { outline: 2px solid var(--os-primary); outline-offset: 2px; }
.va-pop { position: absolute; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 32px)); padding: var(--os-s3) var(--os-s4); background: var(--os-card); color: var(--os-ink); border: 1px solid var(--os-line); border-radius: var(--os-radius); box-shadow: var(--os-shadow-lg); white-space: normal; font-weight: 400; }
.va-pop p { margin: 0 0 var(--os-s2); }
.va-pop ul { margin: 0 0 var(--os-s2); padding-left: 18px; }
.va-list { padding-left: 18px; margin: var(--os-s2) 0; display: grid; gap: var(--os-s1); }
.va-agent { display: block; margin-top: var(--os-s3); }
.va-ended { position: fixed; inset: var(--va-h, 0) 0 0 0; z-index: 940; display: grid; place-items: center; padding: var(--os-s4); background: var(--os-ground); }
.va-ended-card { max-width: 440px; padding: var(--os-s5); background: var(--os-card); border: 1px solid var(--os-line); border-radius: var(--os-radius); text-align: center; }
.va-ended-card h1 { margin: 0 0 var(--os-s2); font: 600 20px/28px var(--os-sans); color: var(--os-ink); }
.va-ended-card p { margin: 0 0 var(--os-s4); color: var(--os-ink-2, var(--os-ink)); }
@media (max-width: 720px) {
  html.va-on { --va-h: 36px; }
  .va-banner { gap: var(--os-s2); padding: 0 var(--os-s2) 0 var(--os-s3); font-size: 12px; }
  .va-banner .va-kind, .va-banner .va-chip, .va-banner .va-eye { display: none; }
  .va-banner .va-end { min-height: 28px; padding: 0 10px; }
  .va-hidden summary { font-size: 0; padding: 4px; }
  .va-hidden summary::after { content: 'Hidden?'; font-size: 12px; }
  .va-pop { position: fixed; top: var(--va-h); left: 8px; right: 8px; width: auto; }
}

/* ---------- Approval decision (Joe, Nov 10): /ui/approval-decide.js, shared by Collab, Promotion and Agents ---------- */
.apd-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-s2); padding: var(--os-s3) 0; background: var(--os-card); border-top: 1px solid var(--os-line); }
.apd-bar .btn .i { margin-right: 2px; }
.apd-bar .btn.ghost.danger { border-color: transparent; background: transparent; }
.apd-bar .btn.ghost.danger:hover { background: var(--os-gap-bg); }
.apd-hint { margin-left: auto; color: var(--os-muted); font-size: var(--os-text-xs); }
.apd-count { font-variant-numeric: tabular-nums; }
.apd-lnk { border: 0; background: none; padding: 2px 6px; border-radius: var(--os-radius-xs); color: var(--os-link); font: 500 var(--os-text-sm) var(--os-sans); cursor: pointer; min-height: 28px; }
.apd-lnk:hover { background: var(--os-hover); }
.apd-lnk:focus-visible { outline: 2px solid var(--os-focus); outline-offset: 1px; }
.apd-note { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; padding: 6px 8px; border-radius: var(--os-radius-sm); background: var(--os-info-bg); color: var(--os-info-ink); font-size: var(--os-text-sm); white-space: pre-wrap; }
.apd-panel { display: flex; gap: var(--os-s3); align-items: flex-start; margin: 0 0 var(--os-s3); padding: var(--os-s3) var(--os-s4); border-radius: var(--os-radius); background: var(--os-info-bg); color: var(--os-info-ink); }
.apd-panel > div { min-width: 0; flex: 1; }
.apd-panel-stop { background: var(--os-ext-bg); color: var(--os-ink); }
.apd-panel-foot { margin-top: 6px; }
.apd-resp { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.apd-resp li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; }
.apd-resp li > span:first-child:empty { display: none; }
.apd-resp li:has(> span:first-child:empty) { grid-template-columns: minmax(0, 1fr); }
.apd-ok { color: var(--os-live-ink); font-weight: 600; white-space: nowrap; }
.apd-no { color: var(--os-partial-ink); font-weight: 600; white-space: nowrap; }
.apd-why { color: var(--os-muted); }
.apd-panel .apd-why { color: inherit; opacity: .85; }
.apd-links { margin: 0 0 var(--os-s3); font-size: var(--os-text-sm); }
.apd-diff { margin-top: var(--os-s2); padding: var(--os-s3); border-radius: var(--os-radius-sm); background: var(--os-card); color: var(--os-ink); }
.apd-diff-list { margin: 0; display: grid; gap: 6px 12px; grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); }
.apd-diff-list dt { color: var(--os-muted); font-size: var(--os-text-sm); }
.apd-diff-list dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.apd-diff ins { background: var(--os-live-bg); color: var(--os-live-ink); text-decoration: none; }
.apd-diff del { background: var(--os-gap-bg); color: var(--os-gap-ink); }
.apd-fc { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) auto; gap: var(--os-s2); align-items: start; margin-top: var(--os-s2); }
.apd-err { color: var(--os-gap-ink); font-size: var(--os-text-sm); }
.apd-hist { list-style: none; padding: 0; margin: 0 0 var(--os-s4); display: grid; gap: var(--os-s2); }
.apd-hist li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--os-s3); }
.apd-when { color: var(--os-muted); font-size: var(--os-text-sm); font-variant-numeric: tabular-nums; }
.apd-round { border-top: 1px solid var(--os-line); padding: var(--os-s2) 0; }
.apd-round summary { cursor: pointer; font-weight: 500; }
.apd-bulk { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--os-s2); max-height: 50vh; overflow: auto; }
.apd-bulk-item { padding: var(--os-s2) 0; border-top: 1px solid var(--os-line); display: grid; gap: 4px; }
.apd-noted { box-shadow: inset 3px 0 0 var(--os-info); }
@media (max-width: 760px) {
  .apd-bar .btn { flex: 1 1 auto; min-height: var(--os-touch); }
  .apd-hint { display: none; }
  .apd-fc { grid-template-columns: minmax(0, 1fr) auto; }
  .apd-fc select { grid-column: 1 / -1; }
  .apd-hist li { grid-template-columns: 1fr; gap: 0; }
}
/* With the bottom dock (phones), the decision bar sits in the page instead of sticking under the dock. */
body:has(.dock-bottom) .os-main .apd-bar { position: static; }
/* Operational proposals: the posting table and the before-and-after. */
.apd-ops { display: grid; gap: var(--os-s3); margin: 0 0 var(--os-s3); min-width: 0; container-type: inline-size; }
.apd-kv { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.apd-kv dt { color: var(--os-muted); font-size: var(--os-text-sm); }
.apd-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.apd-table-wrap { overflow-x: auto; border: 1px solid var(--os-line); border-radius: var(--os-radius); background: var(--os-card); }
.apd-table { width: 100%; border-collapse: collapse; font-size: var(--os-text-sm); }
.apd-table th, .apd-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--os-line); vertical-align: top; }
.apd-table thead th { color: var(--os-muted); font-weight: 500; white-space: nowrap; }
.apd-table tfoot th, .apd-table tfoot td { font-weight: 600; border-bottom: 0; }
.apd-table .apd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apd-table .apd-act { width: 1%; white-space: nowrap; }
.apd-table .apd-note { margin-top: 6px; }
.apd-nowrap { white-space: nowrap; }
.apd-before { color: var(--os-muted); }
.apd-after { font-weight: 500; }
.apd-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.apd-notice { display: flex; gap: var(--os-s2); align-items: flex-start; margin: 0 0 var(--os-s3); padding: var(--os-s3); border-radius: var(--os-radius); background: var(--os-partial-bg); color: var(--os-partial-ink); font-size: var(--os-text-sm); }
.apd-table tr.apd-noted td:first-child { box-shadow: inset 3px 0 0 var(--os-info); }
.apv-d-body, .ag-main, .pr-apv-main, .apd-panel, .apv-detail { min-width: 0; }
.apd-table-wrap { max-width: 100%; }
@container (max-width: 640px) {
  /* Narrow panes and phones: each line is a small card (labels from data-label). */
  .apd-table thead { display: none; }
  .apd-table, .apd-table tbody, .apd-table tfoot, .apd-table tr, .apd-table td, .apd-table th { display: block; width: auto; }
  .apd-table tr { padding: 8px 10px; border-bottom: 1px solid var(--os-line); }
  .apd-table tr[hidden] { display: none; }
  .apd-table td, .apd-table th { border: 0; padding: 2px 0; text-align: left; }
  .apd-table td[data-label]:not([data-label=""])::before { content: attr(data-label) ": "; color: var(--os-muted); }
  .apd-table .apd-num { text-align: left; }
  .apd-table td:empty { display: none; }
  .apd-kv { grid-template-columns: 1fr; gap: 0; }
  .apd-kv dd { margin-bottom: 6px; }
}