/* ============================================================
   UniHub — Redesign layer (v3 "Calm")
   Drops in AFTER tokens.css. Adds a product-tuned token sub-scale
   and a redesigned set of primitives that map onto the existing
   app.css / admin.css class names.

   Nothing here invents a new palette or typeface — it only
   evolves spacing, type density, surface/line treatment and the
   composition rules. Blue/yellow stay accents on a neutral canvas.
   ============================================================ */

:root {
  /* ---------- Refined neutral canvas ----------
     The old model stacked pure-white bordered cards on #FAFAFA, so
     every element read as an equal-weight box. We define a quiet,
     slightly-cool canvas, a single card surface, and a sunken well —
     three layers instead of a sea of borders. */
  --rd-canvas:        #F6F8FB;   /* page background */
  --rd-surface:       #FFFFFF;   /* primary cards / panels */
  --rd-surface-2:     #FBFCFE;   /* nested / header strips */
  --rd-sunken:        #EEF2F7;   /* wells, insets, track backgrounds */
  --rd-tint:          #F2F7FD;   /* faint blue wash for active/hover rows */

  /* One hairline, used everywhere — replaces the subtle/default/strong mix.
     Tinted navy so it reads as part of the brand, not a generic gray. */
  --rd-line:          rgba(13, 38, 68, 0.08);
  --rd-line-soft:     rgba(13, 38, 68, 0.05);
  --rd-line-strong:   rgba(13, 38, 68, 0.14);

  /* ---------- Semantic ink ramp (text) ---------- */
  --rd-ink:           #14233A;   /* primary text — navy-black, softer than #171717 */
  --rd-ink-2:         #51627A;   /* secondary */
  --rd-ink-3:         #8595AC;   /* muted / meta */
  --rd-ink-on-tint:   var(--blue-semi-dark);

  /* ---------- Product type sub-scale ----------
     The marketing scale (display 80 / h1 64 / h2 48 / h3 32) jumps hard
     and was bleeding oversized type into product chrome (38px greetings,
     32px admin H1s). This is a tighter scale just for in-product surfaces. */
  --pt-page:    28px;   /* screen title (was 32–38) */
  --pt-page-lh: 1.15;
  --pt-section: 18px;   /* section header inside a screen */
  --pt-card:    15px;   /* card / row title */
  --pt-stat:    30px;   /* hero stat number */
  --pt-stat-sm: 22px;   /* secondary stat */
  --pt-body:    14px;   /* product body default (denser than 16 marketing) */
  --pt-sm:      13px;
  --pt-eyebrow: 11px;   /* uppercase section / category labels */
  --pt-micro:   12px;

  /* ---------- Density spacing ----------
     Adds the missing 20px step and names a product rhythm distinct
     from the 96/128 marketing section spacing. */
  --d-1: 4px;  --d-2: 8px;  --d-3: 12px; --d-4: 16px;
  --d-5: 20px; --d-6: 24px; --d-7: 32px; --d-8: 40px;
  --card-pad:   20px;   /* default interior padding */
  --card-pad-s: 16px;
  --screen-gap: 24px;   /* gap between stacked screen sections */
  --screen-pad: 32px;   /* main content gutter */

  /* ---------- Elevation discipline ----------
     Resting surfaces are flat (line only). Elevation is earned:
     hover on interactive cards, and overlays. */
  --rd-shadow-hover: 0 6px 20px rgba(13, 38, 68, 0.08);
  --rd-shadow-pop:   0 24px 60px rgba(13, 38, 68, 0.18);
  --rd-radius:       12px;
  --rd-radius-s:     8px;
}

/* ============================================================
   PRIMITIVE 1 — Card
   Flat at rest (surface + hairline, no shadow). Interactive cards
   lift on hover. Replaces the .tile / .panel / .stat-card shadows.
   ============================================================ */
.rd-card {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  padding: var(--card-pad);
}
.rd-card.is-interactive {
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.rd-card.is-interactive:hover {
  border-color: var(--blue-light);
  box-shadow: var(--rd-shadow-hover);
  transform: translateY(-2px);
}

/* ============================================================
   PRIMITIVE 2 — Stat line
   A single quiet row of numbers divided by hairlines, instead of
   N separate bordered stat-cards. One container, calmer.
   ============================================================ */
.rd-statline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  overflow: hidden;
}
.rd-stat {
  padding: var(--d-5) var(--d-6);
  border-left: 1px solid var(--rd-line);
}
.rd-stat:first-child { border-left: none; }
.rd-stat-label {
  font-size: var(--pt-eyebrow);
  font-weight: var(--fw-demi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
}
.rd-stat-value {
  font-size: var(--pt-stat);
  font-weight: var(--fw-demi);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: var(--d-3);
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
}
.rd-stat-value.is-accent { color: var(--blue-semi-dark); }
.rd-stat-value.is-warn   { color: var(--yellow-semi-dark); }
.rd-stat-meta {
  font-size: var(--pt-micro);
  color: var(--rd-ink-3);
  margin-top: var(--d-2);
}

/* ============================================================
   PRIMITIVE 3 — Data table
   No zebra, no per-row borders fighting the card edge. One hairline
   between rows, generous height, muted micro header, whisper hover.
   ============================================================ */
.rd-table {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  overflow: hidden;
}
.rd-tr {
  display: grid;
  gap: var(--d-5);
  align-items: center;
  padding: var(--d-4) var(--d-6);
  border-top: 1px solid var(--rd-line-soft);
}
.rd-thead {
  border-top: none;
  background: var(--rd-surface-2);
  font-size: var(--pt-eyebrow);
  font-weight: var(--fw-demi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink-3);
  padding-top: var(--d-3);
  padding-bottom: var(--d-3);
}
.rd-tbody-row {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.rd-tbody-row:hover { background: var(--rd-tint); }
.rd-cell-strong { font-size: var(--pt-card); font-weight: var(--fw-demi); color: var(--rd-ink); }
.rd-cell-sub { font-size: var(--pt-micro); color: var(--rd-ink-3); margin-top: 1px; }
.rd-cell-num { font-variant-numeric: tabular-nums; }

/* App / object icon */
.rd-ico {
  width: 36px; height: 36px;
  border-radius: var(--rd-radius-s);
  display: grid; place-items: center;
  color: #fff; font-weight: var(--fw-demi); font-size: 13px;
  flex-shrink: 0;
}
.rd-ico.sq { border-radius: var(--rd-radius-s); }

/* Health dot (collapsed state of the sparkline) */
.rd-health {
  display: inline-flex; align-items: center; gap: var(--d-2);
  font-size: var(--pt-micro); color: var(--rd-ink-2); font-weight: var(--fw-demi);
}
.rd-health .dot { width: 8px; height: 8px; border-radius: 50%; }
.rd-health.ok  .dot { background: var(--success); }
.rd-health.warn .dot { background: var(--yellow-semi-dark); }
.rd-health.down .dot { background: var(--danger); }

/* Compact seats bar */
.rd-meter { height: 5px; background: var(--rd-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.rd-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.rd-meter > span.is-full { background: var(--danger); }
.rd-meter > span.is-internal { background: var(--success); }

/* ============================================================
   PRIMITIVE 4 — Tab shell (underline)
   ============================================================ */
.rd-tabs {
  display: flex; gap: var(--d-6);
  border-bottom: 1px solid var(--rd-line);
}
.rd-tab {
  padding: var(--d-3) 0;
  font-size: var(--pt-sm); font-weight: var(--fw-demi);
  color: var(--rd-ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.rd-tab:hover { color: var(--rd-ink-2); }
.rd-tab.active { color: var(--rd-ink); border-bottom-color: var(--blue); }

/* ============================================================
   PRIMITIVE 5 — Side panel (collapsible context rail)
   ============================================================ */
.rd-panel {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  overflow: hidden;
}
.rd-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--d-4) var(--d-5);
  border-bottom: 1px solid var(--rd-line);
}
.rd-panel-title {
  font-size: var(--pt-eyebrow); font-weight: var(--fw-demi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-ink-3);
}
.rd-panel-body { padding: var(--d-5); }

/* ============================================================
   PRIMITIVE 6 — Section header (in-screen)
   The "one focal point" helper: a quiet label + optional action,
   not a 32px headline competing with the data below it.
   ============================================================ */
.rd-section {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--d-4);
}
.rd-section h3 {
  font-size: var(--pt-section);
  font-weight: var(--fw-demi);
  letter-spacing: -0.01em;
  color: var(--rd-ink);
  margin: 0;
}
.rd-section .sub { font-size: var(--pt-micro); color: var(--rd-ink-3); }
.rd-eyebrow {
  font-size: var(--pt-eyebrow); font-weight: var(--fw-demi);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-ink-3);
}

/* ============================================================
   Neutral chips / badges — demote brand color
   Category labels, "INTERNAL", counts etc. go neutral by default;
   blue is reserved for the active filter and key status only.
   ============================================================ */
.rd-chip {
  display: inline-flex; align-items: center; gap: var(--d-2);
  white-space: nowrap;
  padding: var(--d-2) var(--d-3);
  border-radius: var(--radius-pill);
  font-size: var(--pt-sm); font-weight: var(--fw-medium);
  color: var(--rd-ink-2); background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.rd-chip:hover { background: var(--rd-sunken); color: var(--rd-ink); }
.rd-chip.active {
  background: var(--rd-surface); color: var(--rd-ink);
  border-color: var(--rd-line-strong); font-weight: var(--fw-demi);
  box-shadow: var(--shadow-xs);
}
.rd-chip .n {
  font-size: 11px; font-weight: var(--fw-demi);
  color: var(--rd-ink-3);
}
.rd-chip.active .n { color: var(--blue-semi-dark); }

.rd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: var(--fw-demi); letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--radius-pill);
  background: var(--rd-sunken); color: var(--rd-ink-2);
}
.rd-badge.is-accent { background: var(--blue-ultra-light); color: var(--blue-semi-dark); }
.rd-badge.is-warn   { background: var(--yellow-ultra-light); color: #8a5a00; }
.rd-badge.is-ok     { background: rgba(24,178,107,0.12); color: #0d6e44; }

/* Quiet secondary button to pair with the existing .btn-primary */
.rd-btn {
  display: inline-flex; align-items: center; gap: var(--d-2);
  white-space: nowrap;
  font-size: var(--pt-sm); font-weight: var(--fw-demi);
  padding: 9px 16px; border-radius: var(--rd-radius-s);
  color: var(--rd-ink-2); background: var(--rd-surface);
  border: 1px solid var(--rd-line-strong);
  transition: all var(--dur-fast) var(--ease-out);
}
.rd-btn:hover { background: var(--rd-surface-2); color: var(--rd-ink); border-color: var(--rd-ink-3); }
.rd-btn.is-primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.rd-btn.is-primary:hover { background: var(--blue-medium); border-color: var(--blue-medium); }

/* ============================================================
   INTEGRATION LAYER (added during implementation, 2026-05-30)
   The block above is the designer's portable system (new --rd-*/
   --pt-*/--d-* tokens + .rd-* primitives). This section APPLIES that
   system to the live app by re-skinning the EXISTING class names from
   app.css / admin.css. It is the part that actually changes the running
   UI. Loaded LAST (after admin.css) so single-class overrides win.

   Strategy = the brief's principles, applied globally with the lowest
   structural risk (no JSX/markup changes here):
     1. a quiet 3-layer canvas so cards separate by SURFACE, not borders
     2. one tinted-navy hairline replacing the gray border mix
     3. flat-at-rest cards; elevation earned on hover only
     4. a product type sub-scale (smaller in-product headings)
     5. demoted brand color (blue reserved for active/key status)
   Screen-specific layout moves (Home/Cowork/Insights/Apps) follow as
   targeted JSX passes — see docs/REDESIGN_BRIEF.md / NEXT.md Section D.
   ============================================================ */

:root {
  /* (a) Define the admin ink ramp. These tokens were referenced ~220×
     in admin inline styles as `var(--ink-3, #fallback)` but were never
     actually defined — so all that text rendered from its hardcoded
     fallback. Defining them here switches the whole admin to the calm
     navy ink ramp in one move (and fixes the few fallback-less uses). */
  --ink:   var(--rd-ink);     /* #14233A */
  --ink-2: var(--rd-ink-2);   /* #51627A */
  --ink-3: var(--rd-ink-3);   /* #8595AC */

  /* (b) Soften the light-surface border mix to the single tinted-navy
     hairline. Reads as part of the brand, not a generic gray, and
     instantly calms every bordered card/table/input app-wide. (Dark
     surfaces use --border-on-dark, untouched.) */
  --border-subtle:  var(--rd-line-soft);
  --border-default: var(--rd-line);
  --border-strong:  var(--rd-line-strong);

  /* (c) Quieter resting shadow for any remaining --shadow-xs/s users so
     cards stop reading as equal-weight raised boxes. */
  --shadow-xs: none;
  --shadow-s:  var(--rd-shadow-hover);
}

/* (d) Product canvas — page goes to the cool neutral; cards stay white
   and now separate by surface contrast instead of a sea of borders. */
body { background: var(--rd-canvas); }
.hub-main, .admin-main { background: var(--rd-canvas); }

/* ---- Home: greeting + stat cards ---- */
.greet-title { font-size: var(--pt-page); line-height: var(--pt-page-lh); }
.greet-eyebrow { color: var(--rd-ink-3); }            /* demote: was brand blue */
.greet-sub { color: var(--rd-ink-2); }

.stat-card {
  border-color: var(--rd-line);
  box-shadow: none;                                    /* flat at rest */
  border-radius: var(--rd-radius);
}

/* ---- Home: recent strip + side panels (flat at rest, lift only on hover) ---- */
.recent { box-shadow: none; border-color: var(--rd-line); border-radius: var(--rd-radius); }
.recent-head h3 svg, .panel-head h3 svg { color: var(--rd-ink-3); } /* demote brand blue chrome */
.recent-chip { background: var(--rd-surface-2); border-color: var(--rd-line); }
.recent-chip:hover { background: var(--rd-surface); border-color: var(--blue-light); box-shadow: var(--rd-shadow-hover); }

/* ---- Home: apps section + filter chips ---- */
.apps-title { font-size: var(--pt-stat-sm); }          /* 22 → 22-ish product stat scale */
.chip.active { border-color: var(--rd-line-strong); box-shadow: var(--shadow-xs); }

/* ---- Home: tiles — flat at rest, single earned hover elevation ---- */
.tile { box-shadow: none; border-color: var(--rd-line); border-radius: var(--rd-radius); }
.tile:hover { border-color: var(--blue-light); box-shadow: var(--rd-shadow-hover); }
.tile.locked { background: var(--rd-surface-2); }
.tile.locked:hover { box-shadow: none; border-color: var(--rd-line); }

/* ---- Admin shell: calmer page title + flat search ---- */
.admin-h1 { font-size: var(--pt-page); line-height: var(--pt-page-lh); }
.admin-search, .admin-select { border-color: var(--rd-line-strong); }

/* ---- Admin tables (.at-*): quiet rows, hairline divider, whisper hover ----
   The current table tints hover/open rows with full blue-ultra-light; soften
   to the faint blue wash so the row reads as "focused" not "highlighted". */
.at-row:hover, .at-row-open { background: var(--rd-tint); }
.at-head { color: var(--rd-ink-3); }

/* ---- Generic surfaces that used the old white+shadow card recipe ---- */
.panel, .group-card, .req-card, .req-sum-card, .ann-card {
  box-shadow: none;
  border-color: var(--rd-line);
}
.group-card:hover, .req-card:hover {
  box-shadow: var(--rd-shadow-hover);
  border-color: var(--blue-light);
}

/* ============================================================
   SCREEN: Home (D2) — structural moves from the mockup
   ============================================================ */

/* Favorites: bordered card → slim borderless strip above the grid */
.fav-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--d-3);
  margin-bottom: var(--d-6);
}
.fav-strip-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--pt-eyebrow); font-weight: var(--fw-demi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-ink-3);
}
.fav-strip-lbl svg { color: var(--rd-ink-3); }
.fav-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  font-size: var(--pt-sm); font-weight: var(--fw-demi);
  color: var(--rd-ink); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fav-chip:hover { border-color: var(--blue-light); box-shadow: var(--rd-shadow-hover); transform: translateY(-1px); }
.fav-chip-name { line-height: 1; }
.fav-chip-unpin { color: #f2a900; font-size: 13px; line-height: 1; padding-left: 2px; }
.fav-strip-log {
  margin-left: auto;
  font-size: var(--pt-micro); font-weight: var(--fw-demi);
  color: var(--rd-ink-3); background: none; border: none; cursor: pointer;
  white-space: nowrap;
}
.fav-strip-log:hover { color: var(--blue-semi-dark); }

/* ============================================================
   SCREEN: Insights (D2) — six scattered stat-cards → one stat line
   ============================================================ */
.stat-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  overflow: hidden;
  margin-bottom: var(--d-5);
}
.stat-cell {
  padding: var(--d-4) var(--d-5);
  border-left: 1px solid var(--rd-line-soft);
}
.stat-cell:first-child { border-left: none; }
.stat-cell-label {
  font-size: var(--pt-eyebrow); font-weight: var(--fw-demi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-ink-3);
}
.stat-cell-value {
  font-size: var(--pt-stat); font-weight: var(--fw-demi);
  letter-spacing: -0.02em; line-height: 1; margin-top: 6px;
  color: var(--rd-ink); font-variant-numeric: tabular-nums;
}
.stat-cell-sub { font-size: var(--pt-micro); color: var(--rd-ink-3); margin-top: 4px; }

/* Empty section → one-line all-clear row (replaces a full titled "None" card) */
.ins-allclear {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--d-5);
  padding: 11px 16px;
  background: rgba(24, 178, 107, 0.06);
  border: 1px solid rgba(24, 178, 107, 0.22);
  border-radius: var(--rd-radius);
  font-size: var(--pt-sm); color: var(--rd-ink-2);
}
.ins-allclear-tick {
  width: 18px; height: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--success); color: #fff;
  font-size: 11px; font-weight: 700;
}
.ins-allclear-label { font-weight: var(--fw-demi); color: var(--rd-ink); }
.ins-allclear-extra { margin-left: auto; color: var(--rd-ink-3); font-size: var(--pt-micro); }

/* Pager — for long lists paginated client-side (search stays full-dataset) */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--d-4); flex-wrap: wrap;
  margin-top: var(--d-4); padding-top: var(--d-3);
  border-top: 1px solid var(--rd-line-soft);
}
.pager-info { font-size: var(--pt-micro); color: var(--rd-ink-3); }
.pager-btns { display: flex; align-items: center; gap: 6px; }
.pager-page { font-size: var(--pt-micro); color: var(--rd-ink-2); font-weight: var(--fw-demi); padding: 0 4px; }
.pager-btn {
  font-size: var(--pt-sm); font-weight: var(--fw-demi);
  padding: 6px 10px; border-radius: var(--rd-radius-s);
  background: var(--rd-surface); color: var(--rd-ink-2);
  border: 1px solid var(--rd-line-strong); cursor: pointer;
}
.pager-btn:hover:not(:disabled) { background: var(--rd-surface-2); color: var(--rd-ink); border-color: var(--rd-ink-3); }
.pager-btn:disabled { opacity: 0.4; cursor: default; }

/* ============================================================
   SCREEN: Applications (D2)
   Already has expand-on-click health detail + red-at-cap seat meter from the
   earlier health work. These finish the mockup's "more room / demote" asks:
   taller rows on a single hairline, provisioning + category as quiet captions.
   ============================================================ */
.at-row { padding-top: var(--d-4); padding-bottom: var(--d-4); }
.at-prov { font-size: var(--pt-micro); color: var(--rd-ink-3); }
.at-cat { color: var(--rd-ink-3); }

/* ============================================================
   SCREEN: Admin shell (D2)
   The canvas / ink ramp / hairlines / smaller H1 are already handled by the
   foundation layer. These align the left nav with the calm system: active
   item uses the faint blue tint (not a saturated chip), labels go muted.
   ============================================================ */
.aside-item.active { background: var(--rd-tint); }
.aside-label { color: var(--rd-ink-3); }
.aside-help { border-color: var(--rd-line); }

/* ============================================================
   SCREEN: Settings — left section nav + single focused panel
   Replaces the long single-scroll page + the wide multi-column runtime grid
   that read as cluttered. One concern visible at a time; runtime info is
   re-carded instead of bare columns of mono text.
   ============================================================ */
.set-shell {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--d-7); align-items: start; max-width: 1100px;
}
.set-nav {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: var(--d-4);
}
.set-nav-item {
  display: flex; flex-direction: column; gap: 1px;
  text-align: left; width: 100%;
  padding: 9px 12px; border-radius: var(--rd-radius-s);
  background: transparent; border: 1px solid transparent; cursor: pointer;
}
.set-nav-item:hover { background: var(--rd-surface-2); }
.set-nav-item.active { background: var(--rd-tint); }
.set-nav-label { font-size: var(--pt-sm); font-weight: var(--fw-demi); color: var(--rd-ink); }
.set-nav-item.active .set-nav-label { color: var(--blue-semi-dark, var(--rd-ink)); }
.set-nav-desc { font-size: 11px; color: var(--rd-ink-3); }

.set-body { min-width: 0; }
.set-section-head { margin-bottom: var(--d-5); }
.set-h2 { font-size: 18px; font-weight: var(--fw-demi); color: var(--rd-ink); margin: 0 0 4px; }
.set-lead { font-size: var(--pt-sm); color: var(--rd-ink-2); line-height: 1.5; margin: 0; max-width: 760px; }
.set-lead code { font-size: 12px; }

/* Runtime — per-service live-build banners + re-carded groups */
.set-builds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--d-4); max-width: 980px; margin-bottom: var(--d-5);
}
.set-build {
  display: flex; align-items: center; justify-content: space-between; gap: var(--d-4);
  padding: var(--d-4) var(--d-5);
  background: var(--rd-tint); border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
}
.set-build-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rd-ink-3); margin-bottom: 3px;
}
.set-build-sha {
  font-size: 20px; font-weight: var(--fw-demi);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--rd-ink);
}
.set-build-rev { font-size: var(--pt-micro); color: var(--rd-ink-3); margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.set-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--d-4); max-width: 980px; align-items: start;
}
.set-card {
  background: var(--rd-surface); border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius); padding: var(--d-4) var(--d-5);
}
.set-card-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rd-ink-3); margin-bottom: var(--d-3);
}
.set-card-note { font-size: 11.5px; color: var(--rd-ink-3); line-height: 1.45; margin-top: var(--d-3); }
.set-card-note code { font-size: 11px; }

.set-dl-row {
  display: flex; gap: var(--d-3); padding: 5px 0;
  border-bottom: 1px solid var(--rd-line-soft);
}
.set-dl-row:last-child { border-bottom: none; }
.set-dt { flex: 0 0 190px; color: var(--rd-ink-3); font-size: 12.5px; }
.set-dd { flex: 1; min-width: 0; font-size: 13px; color: var(--rd-ink); word-break: break-all; }
.set-dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 760px) {
  .set-shell { grid-template-columns: 1fr; gap: var(--d-4); }
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .set-dt { flex-basis: 140px; }
}