/* ============================================================
   MCC dashboard — base layout + components.
   All colors come from theme tokens defined in theme.css.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  /* UI body is sans-serif (var(--font-ui)). Mono is reserved for code,
     labels, IDs, and timestamps; serif (roman) is reserved for headlines.
     This is the headline readability fix from MCC v2 — the old design ran
     monospace across all body copy and was hard to scan. */
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  background: var(--bg-1);
  color: var(--ink);
  font-size: var(--ui-size, 15px);
  line-height: var(--ui-leading, 1.55);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s, color .4s;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%);
}
/* In light mode the ambient radial reads better as a faint warm wash, not a glow. */
html[data-theme="sage-light"] body::before {
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%);
}

a { color: inherit; text-decoration: none; }
.serif { font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif; }
code, .mono { font-family: var(--font-mono, "IBM Plex Mono"), ui-monospace, monospace; }

/* ---------- Classification banner ---------- */
.classification {
  background: var(--accent);
  color: var(--bg-0);
  text-align: center;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px; letter-spacing: .42em;
  padding: 6px 0;
  text-transform: uppercase;
  font-weight: 600;
  position: relative; z-index: 2;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  /* z-index above .navrow so the user-menu pop-out (a child) clears the nav. */
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: baseline; gap: 12px; flex-shrink: 0; }
.brand .mark {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: .02em;
}
.brand .mark .br { color: var(--accent); }
.brand .sub {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .26em;
  text-transform: uppercase;
  border-left: 1px solid var(--line-strong);
  padding-left: 12px;
}
.topbar-spacer { flex: 1; }
.topbar-right {
  display: flex; align-items: center; gap: 16px;
  font-size: 12.5px; flex-shrink: 0; color: var(--ink-3);
}
.topbar-right .who { color: var(--ink); }
.topbar-right .sep { color: var(--ink-4); }
.topbar-right a { color: var(--accent); }

/* ---------- Nav row ---------- */
.navrow {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  position: relative; z-index: 3;
}
.nav-links {
  display: flex; gap: 0; flex: 1;
  overflow: hidden;
}
.nav-link {
  padding: 11px 16px 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  letter-spacing: .06em;
  transition: color .12s, background .12s, border-color .12s;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.nav-link:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.nav-link.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.nav-link .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  background: var(--accent);
  color: var(--bg-0);
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 1px;
}
.nav-link.active .badge { background: var(--alert); color: var(--bg-0); }
.nav-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-left: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  flex-shrink: 0;
  margin: 0;
}
.nav-search .icon { color: var(--ink-4); }
.nav-search input[type="text"] {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  width: 180px;
  padding: 0;
}
.nav-search input[type="text"]::placeholder {
  color: var(--ink-3);
}
.nav-search input[type="text"]:focus {
  width: 240px;
  color: var(--ink);
}
.nav-search .kbd {
  border: 1px solid var(--line-strong);
  padding: 1px 6px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* ---------- Theme picker ---------- */
.theme-picker {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
}
.theme-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  padding: 6px 10px 6px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  letter-spacing: .04em;
}
.theme-button:hover { border-color: var(--accent); color: var(--ink); }
.theme-button .swatches { display: inline-flex; gap: 2px; }
.theme-button .sw { width: 8px; height: 12px; border-radius: 0; }
.theme-button .caret { color: var(--ink-3); font-size: 9px; margin-left: 2px; }

.theme-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  min-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.theme-menu.open { display: block; }
/* Footer variant: open upward and align to the right edge of the picker. */
.theme-menu--up {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0; left: auto;
  max-height: 60vh;
  overflow-y: auto;
}
.theme-menu .item {
  display: grid;
  grid-template-columns: 16px 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 12.5px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.theme-menu .item:last-child { border-bottom: 0; }
.theme-menu .item:hover { background: var(--bg-3); color: var(--ink); }
.theme-menu .item.active { color: var(--ink); }
.theme-menu .item .check { color: var(--accent); visibility: hidden; }
.theme-menu .item.active .check { visibility: visible; }
.theme-menu .item .name { font-weight: 500; }
.theme-menu .item .season {
  color: var(--ink-3); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .12em;
}
.theme-menu .item .sw-row { display: inline-flex; gap: 1px; }
.theme-menu .item .sw { width: 14px; height: 14px; }
.theme-menu .head {
  padding: 8px 12px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.theme-menu .head .auto-tag {
  margin-left: 8px;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- DTG strip — subdued ambient bar ----------
   The status bar under the nav was previously full-contrast ink-on-bg-0 and
   visually competed with the navrow. It's now transparent-bg + 60% opacity,
   tighter padding, and ink-4 typography so the user's eye lands on the nav
   and KPI cards first. */
.dtg {
  display: flex; align-items: center; gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: .6;
}
.dtg .cell {
  padding: 4px 16px;
  border-right: 1px dotted var(--line);
  display: flex; align-items: baseline; gap: 8px;
}
.dtg .cell:last-child { border-right: 0; margin-left: auto; }
.dtg .label { font-size: 9.5px; color: var(--ink-4); letter-spacing: .22em; }
.dtg .val   { color: var(--ink-4); font-weight: 500; letter-spacing: .08em; font-size: 10.5px; }
.dtg .val.warn { color: var(--warn); }
.dtg .heartbeat {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 6px var(--accent);
  animation: hb 2s ease-in-out infinite;
}
@keyframes hb {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------- Page ---------- */
.page {
  max-width: 1640px;
  margin: 0 auto;
  padding: 28px 28px 48px;
  position: relative; z-index: 2;
}
/* Used by templates that haven't been ported to the v2 design yet —
   they still use Tailwind utility classes for content blocks but get
   the themed chrome around them. */
.page-default {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 28px 48px;
  position: relative; z-index: 2;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 22px;
  border-bottom: 1px dashed var(--line-strong);
  margin-bottom: 26px;
}
.page-title {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-weight: var(--headline-weight, 500);
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.015em;
}
.page-title .underline,
.page-title .accent { color: var(--accent); }
.page-sub {
  color: var(--ink-2);
  font-size: 15px;
  margin-top: 10px;
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  max-width: 720px;
}
.page-sub b {
  color: var(--accent-2); font-weight: 600;
}
.page-actions { display: flex; gap: 12px; align-items: stretch; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .12s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-2); }
.btn.primary {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg-0); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }

.refresh-wrap { display: inline-flex; flex-direction: column; gap: 5px; }
.refresh-progress {
  height: 2px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  position: relative; overflow: hidden;
}
.refresh-progress::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: left center;
  animation: refreshDeplete 30s linear infinite;
}
.refresh-meta {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); text-align: center;
}
@keyframes refreshDeplete { 0%{transform:scaleX(1);} 100%{transform:scaleX(0);} }

/* ---------- Section header rule ---------- */
.section-rule {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  color: var(--ink-4);
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
}
.section-rule::before, .section-rule::after {
  content: ""; flex: 1; border-top: 1px solid var(--line);
}
.section-rule::before { flex: 0 0 18px; }
.section-rule .lab {
  color: var(--accent);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.section-rule .meta {
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* ---------- KPI cards ----------
   Each card carries a categorical hue (coral / amber / blue / sage / violet)
   on its top border + label, so the four-up KPI strip stops reading as a
   block of identical-coloured tiles. The fifth/sixth slot reuse the palette;
   --kpi-tint can be overridden per-card via inline style. */
.kpis {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 5), 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
  margin-bottom: 32px;
}
.kpi {
  padding: 16px 20px 14px;
  background: var(--bg-2);
  position: relative;
  transition: background .12s;
  overflow: hidden;
  color: inherit;
  border-top: 2px solid var(--kpi-tint, var(--accent));
}
.kpi:nth-child(6n+1) { --kpi-tint: var(--hue-coral); }
.kpi:nth-child(6n+2) { --kpi-tint: var(--hue-amber); }
.kpi:nth-child(6n+3) { --kpi-tint: var(--hue-blue); }
.kpi:nth-child(6n+4) { --kpi-tint: var(--hue-sage); }
.kpi:nth-child(6n+5) { --kpi-tint: var(--hue-violet); }
.kpi:nth-child(6n+6) { --kpi-tint: var(--hue-teal); }
.kpi:hover { background: var(--bg-3); }
.kpi.alert .kpi-label,
.kpi.alert .kpi-value { color: var(--kpi-tint, var(--alert)); }
.kpi-label {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kpi-tint, var(--accent));
  opacity: .9;
  font-weight: 600;
}
.kpi-value {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-weight: var(--headline-weight, 500);
  font-size: 36px;
  line-height: 1;
  margin: 10px 0 8px;
  color: var(--ink);
  letter-spacing: -.02em;
}
.kpi.alert .kpi-value { color: var(--accent-2); }
.kpi.dim .kpi-value { color: var(--ink-3); }
.kpi-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.kpi-hint {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.kpi-hint .pos { color: var(--alert); font-weight: 600; font-family: var(--font-mono, "IBM Plex Mono"), monospace; }
.kpi-hint .pos.ok { color: var(--accent); }
.kpi-spark {
  width: 60px; height: 18px; flex-shrink: 0;
  color: var(--kpi-tint, var(--accent));
  opacity: .8;
}

/* ---------- Main grid ---------- */
.main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.second-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}

/* ---------- Situations rows ---------- */
.sit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background .12s;
}
.sit-row:last-child { border-bottom: 0; }
.sit-row:hover { background: var(--bg-3); }
.sit-row .ttl {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.sit-row .meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex; gap: 12px; align-items: center;
}
.sit-row .meta code {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.sit-row .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  flex-shrink: 0;
}
.sit-row .age {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .12em;
}

/* ---------- Findings table ---------- */
.findings { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.findings thead th {
  text-align: left;
  color: var(--ink-3);
  font-weight: 500;
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.findings tbody tr { border-bottom: 1px dotted var(--line); transition: background .12s; }
.findings tbody tr:last-child { border-bottom: 0; }
.findings tbody tr:hover { background: var(--bg-3); }
.findings td {
  padding: 11px 14px;
  color: var(--ink);
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 12px;
  vertical-align: middle;
}
.findings td.serif {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-size: 14px;
  color: var(--ink);
}
.findings td .sev {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
}
.findings td .sev .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.findings td .sev.amber { color: var(--alert); }
.findings td .sev.norm  { color: var(--ink-2); }
.findings td .sev.ok    { color: var(--ok); }

/* ---------- Panel ---------- */
.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 18px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.panel-title {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1;
  font-weight: var(--headline-weight, 500);
}
.panel-title .accent { color: var(--accent); }
.panel-sub {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-left: auto;
}
.panel-body { padding: 0; }

/* ---------- Collapsible panels ---------- */
.panel[data-collapsible] .panel-head {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.panel[data-collapsible] .panel-head:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg-3)); }
.panel-chevron {
  margin-left: 10px;
  color: var(--ink-3);
  font-size: 11px;
  transition: transform .15s;
  flex-shrink: 0;
}
.panel.collapsed .panel-chevron { transform: rotate(-90deg); }
.panel.collapsed .panel-body,
.panel.collapsed .panel-foot { display: none; }
.panel.is-empty .panel-title,
.panel.is-empty .panel-sub { color: var(--ink-3); }

/* ---------- Pills ----------
   The urgency pills (.now, .soon) are now solid-filled in their semantic
   colour rather than just outlined: NOW reads as a coral chip, SOON reads
   as an amber chip. Reading the queue is faster because urgency colours
   pop instead of blending into the row tint. The .d dot inside used to
   draw a duplicate colour swatch; collapse it (display:none for filled
   variants) so the pill stays compact. */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--ink-4);
  color: var(--ink-2);
  font-weight: 600;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  white-space: nowrap;
}
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.now {
  color: var(--bg-0);
  background: var(--alert);
  border-color: var(--alert);
}
.pill.now .d { display: none; }
.pill.soon {
  color: var(--bg-0);
  background: var(--warn);
  border-color: var(--warn);
}
.pill.soon .d { display: none; }
.pill.normal { color: var(--ink-3); background: transparent; border-color: var(--line-strong); }
.pill.backlog { color: var(--ink-4); background: transparent; border-color: var(--line); }
.pill.solid  { background: var(--accent); color: var(--bg-0); border-color: var(--accent); }
.pill.ok     { background: var(--ok); color: var(--bg-0); border-color: var(--ok); }
.pill.ok .d  { display: none; }

/* ---------- Coloured code chips ----------
   Topic chips were all the same green-tinted accent before. With 5-7 topics
   in active use that meant five identical chips per row. Each topic now
   gets a categorical hue so the eye can sort by topic at a glance. Role
   chips (creator vs app) carry their own hue too. Set --chip-c via inline
   style on the chip, or via one of the .topic-* helpers below. */
.code-chip {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--chip-c, var(--accent));
  background: color-mix(in srgb, var(--chip-c, var(--accent)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-c, var(--accent)) 22%, transparent);
  padding: 1px 6px;
  letter-spacing: .02em;
  white-space: nowrap;
  display: inline-flex; align-items: center;
}
.code-chip.id-tag      { --chip-c: var(--hue-blue); font-weight: 600; }
.code-chip.role-creator{ --chip-c: var(--hue-coral); }
.code-chip.role-app    { --chip-c: var(--ink-3); }
.code-chip.topic-msl-marketing,
.code-chip.topic-msl-sales,
.code-chip.topic-msl-service,
.code-chip.topic-msl-release       { --chip-c: var(--hue-sage); }
.code-chip.topic-requipmarket      { --chip-c: var(--hue-amber); }
.code-chip.topic-requipmarket-marketing { --chip-c: var(--hue-violet); }
.code-chip.topic-mane-match,
.code-chip.topic-mane-match-marketing   { --chip-c: var(--hue-teal); }
.code-chip.topic-corejobtrack,
.code-chip.topic-corejobtrack-marketing { --chip-c: var(--hue-blue); }
.code-chip.topic-pricebook        { --chip-c: var(--hue-violet); }
.code-chip.topic-personal,
.code-chip.topic-general          { --chip-c: var(--ink-3); }

/* ---------- Approval queue rows ----------
   Urgency now reads as a coloured left-rule (.urg-now / .urg-soon /
   .urg-normal) rather than buried in a pill at the right edge. The eye
   sees NOW vs SOON before it sees title — same scan pattern as the v2
   design canvas. */
.qrow {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background .12s;
  position: relative;
}
.qrow::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--row-tint, transparent);
  transition: background .12s, width .12s;
}
.qrow.urg-now    { --row-tint: var(--alert); }
.qrow.urg-soon   { --row-tint: var(--warn); }
.qrow.urg-normal { --row-tint: var(--ink-4); }
.qrow.urg-backlog { --row-tint: transparent; }
.qrow:last-child { border-bottom: 0; }
.qrow:hover { background: color-mix(in srgb, var(--accent) 3%, var(--bg-2)); }
.qrow .num {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--ink-4);
  letter-spacing: .08em;
  padding-top: 4px;
}
.qrow .body { min-width: 0; }
.qrow .head-line { margin-bottom: 4px; }
.qrow .ttl {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.25;
  font-weight: 500;
}
.qrow:hover .ttl { color: var(--accent-2); }
.qrow .brief {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qrow .meta {
  margin-top: 8px;
  display: flex; gap: 12px; align-items: center;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.qrow .meta code {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.qrow .meta .who {
  color: var(--ink-2);
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
}
.qrow .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  flex-shrink: 0;
}
.qrow .age {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .12em;
}

.panel-foot {
  padding: 11px 18px;
  border-top: 1px dashed var(--line-strong);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-1);
}
.panel-foot a { color: var(--accent); }
.panel-foot a:hover { color: var(--accent-2); }
.panel-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Activity feed ---------- */
.feed {
  padding: 0;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 13px;
}
.feed-row {
  display: grid;
  grid-template-columns: 60px 120px 1fr;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px dotted var(--line);
  align-items: baseline;
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--bg-3); }
.feed-row .t { color: var(--ink-3); font-size: 12px; }
.feed-row .src {
  color: var(--accent);
  font-size: 11.5px;
  letter-spacing: .04em;
}
.feed-row .msg {
  color: var(--ink);
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
}
.feed-row .msg b { color: var(--accent-2); font-weight: 500; }

/* ---------- Session table ---------- */
.kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kv-table tr { border-bottom: 1px dotted var(--line); }
.kv-table tr:last-child { border-bottom: 0; }
.kv-table th {
  text-align: left;
  color: var(--ink-3);
  font-weight: 400;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  width: 38%;
  background: var(--bg-3);
}
.kv-table td {
  color: var(--ink);
  padding: 10px 18px;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
}
.kv-table td .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  display: inline-block;
  margin-right: 8px;
}
.kv-table td code {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  margin-right: 4px;
}

/* ---------- Cadence strip ---------- */
.cadence {
  display: grid;
  grid-template-columns: repeat(var(--cadence-cols, 5), 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.cadence-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-3);
  padding: 14px 16px 13px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s;
}
.cadence-item.alert { border-left-color: var(--alert); }
.cadence-item.warn  { border-left-color: var(--warn); }
.cadence-item:hover { border-color: var(--line-strong); }
.cadence-item .when {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cadence-item.alert .when { color: var(--alert); }
.cadence-item.warn  .when { color: var(--warn); }
.cadence-item .what {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  margin: 2px 0 1px;
  font-weight: var(--headline-weight, 500);
}
.cadence-item .who {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* ---------- Footer ---------- */
.mcc-footer {
  max-width: 1640px;
  margin: 0 auto;
  padding: 14px 28px 24px;
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  display: flex; gap: 16px; align-items: center;
}
.mcc-footer code {
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
}
.mcc-footer a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.mcc-footer a:hover {
  color: var(--ink-2);
  border-bottom-color: var(--line-strong);
}
.mcc-footer .footer-spacer { flex: 1; }
.mcc-footer .theme-indicator {
  color: var(--ink-3);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: none;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}
.theme-picker--footer {
  text-transform: none;
  letter-spacing: 0;
}
.theme-picker--footer .theme-button {
  font-size: 11px;
  padding: 4px 10px;
}

/* ---------- User picker (top-bar dropdown) ---------- */
.user-picker {
  position: relative;
  display: inline-flex; align-items: center;
}
.user-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  padding: 6px 10px 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all .12s;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  letter-spacing: .04em;
  max-width: 100%;
}
.user-button:hover { border-color: var(--accent); color: var(--ink); }
.user-button .who {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.user-button .role {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 10.5px;
  border-left: 1px solid var(--line);
  padding-left: 8px;
}
.user-button .caret { color: var(--ink-3); font-size: 9px; margin-left: 2px; }
.user-button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.user-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  min-width: 340px;
  max-width: 92vw;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.user-menu.open { display: block; }
.user-menu .head {
  padding: 8px 12px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
}
.user-menu .head .auto-tag {
  margin-left: 8px;
  color: var(--accent);
  font-weight: 600;
}
.user-menu .kv-table th { width: 30%; }
.user-menu-foot {
  display: block;
  padding: 11px 18px;
  border-top: 1px dashed var(--line-strong);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-1);
  text-align: right;
}
.user-menu-foot:hover { color: var(--accent-2); }

/* ============================================================
   Approval-detail rows + filter chips + keyboard hint bar.

   The approvals detail page (the 20-items-to-chew screen) was the
   primary target of the v2 overhaul. Rows are ~40% slimmer, big
   Approve/Reject buttons replace radios, and the comment field
   doubles as a 'comment' decision when ↵ is pressed. j/k a/r/c
   keyboard nav is handled in ui.js.

   The hidden-radio + styled-label pattern means the form still
   posts decision_<id> and comment_<id> without JS — keyboard
   shortcuts and 'type-to-comment' are a progressive enhancement,
   not a hard requirement.
   ============================================================ */

.apv-form { display: flex; flex-direction: column; gap: 0; }

.apv-row {
  position: relative;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  transition: background .12s, opacity .15s;
}
.apv-row:last-child { border-bottom: 0; }
.apv-row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--row-tint, transparent);
  transition: background .12s, width .12s;
}
.apv-row.urg-now    { --row-tint: var(--alert); }
.apv-row.urg-soon   { --row-tint: var(--warn); }
.apv-row.urg-normal { --row-tint: var(--ink-4); }
.apv-row.urg-backlog { --row-tint: transparent; }
.apv-row.is-cursor::before { background: var(--accent); width: 4px; }
.apv-row.is-cursor { background: color-mix(in srgb, var(--accent) 5%, var(--bg-2)); }
.apv-row:hover { background: color-mix(in srgb, var(--accent) 3%, var(--bg-2)); }
.apv-row.responded { opacity: .82; }

.apv-num {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
  padding-top: 4px;
}

.apv-body { min-width: 0; }
.apv-title-line {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.apv-title {
  font-family: var(--font-serif, "IBM Plex Serif"), Georgia, serif;
  font-weight: var(--headline-weight, 500);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.25;
  flex: 1; min-width: 200px;
}
.apv-title a { color: inherit; }
.apv-title a:hover { color: var(--accent-2); }
.apv-meta {
  display: flex; align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.apv-meta .dot { color: var(--ink-4); }
.apv-meta .attach {
  display: inline-flex; gap: 4px; align-items: center;
  color: var(--ink-2);
}
.apv-summary {
  margin-top: 6px;
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.apv-summary.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.apv-content {
  margin-top: 8px;
}
.apv-content .mcc-md { font-size: 13.5px; }
.apv-content > *:first-child { margin-top: 0; }
.apv-content > *:last-child { margin-bottom: 0; }

.apv-attach-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}
.apv-link-chip {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 3px 8px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.apv-link-chip:hover { color: var(--accent-2); border-color: var(--accent); }

.apv-side {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.apv-time {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase;
}

/* Slim action bar — two big buttons + comment field + hint chip. */
.apv-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: stretch;
}

/* Hide native radios — they're still in the DOM so the form posts
   decision_<id> = approve/reject/comment without JS. The visible
   <label class="apv-btn"> elements are what the user clicks. */
.apv-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

.apv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.apv-btn .key {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid currentColor;
  padding: 1px 5px;
  letter-spacing: .04em;
  opacity: .65;
}
.apv-btn:hover { color: var(--ink); border-color: var(--accent); }

/* Approve: solid filled in accent when chosen. */
.apv-radio[value="approve"]:checked + .apv-btn.approve,
.apv-btn.approve.active,
.apv-btn.approve:hover {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
}
.apv-radio[value="approve"]:checked + .apv-btn.approve .key,
.apv-btn.approve.active .key,
.apv-btn.approve:hover .key { color: var(--bg-0); opacity: .85; }

/* Reject: alert tint when chosen — not solid filled, less aggressive. */
.apv-radio[value="reject"]:checked + .apv-btn.reject,
.apv-btn.reject.active,
.apv-btn.reject:hover {
  background: color-mix(in srgb, var(--alert) 14%, var(--bg-3));
  color: var(--alert);
  border-color: var(--alert);
}
.apv-radio[value="reject"]:checked + .apv-btn.reject .key,
.apv-btn.reject.active .key,
.apv-btn.reject:hover .key { color: var(--alert); }

/* When a row is in "comment" decision (text typed, no approve/reject yet),
   give the comment field a subtle accent border so the user knows their
   typed text will be saved as a decision when they hit submit. */
.apv-radio[value="comment"]:checked ~ .apv-comment {
  border-color: var(--accent-3);
}

.apv-comment {
  flex: 1;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  padding: 0 12px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  height: 38px;
  min-width: 0;
}
.apv-comment:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.apv-comment::placeholder { color: var(--ink-4); }
.apv-comment-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  color: var(--ink-4);
  border: 1px solid var(--line);
  background: var(--bg-1);
  height: 38px;
  white-space: nowrap;
}

/* Decision stamp on rows that already have a logged response. */
.apv-decision-stamp {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid currentColor;
}
.apv-decision-stamp.approve { color: var(--ok); }
.apv-decision-stamp.reject  { color: var(--alert); }
.apv-decision-stamp.comment { color: var(--ink-2); }

/* ----- Submit bar (sticky-footer-style at the bottom of detail page) ----- */
.apv-submit-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bg-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-strong);
  margin-top: 16px;
}
.apv-submit-bar .meta {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.apv-submit-bar .meta .count { color: var(--accent-2); font-weight: 600; }

/* ----- Filter chips (used on /approvals list page) ----- */
.chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.chip {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--accent); color: var(--accent-2); }
.chip.on {
  background: var(--accent);
  color: var(--bg-0);
  border-color: var(--accent);
  font-weight: 600;
}
.chip .n {
  color: var(--ink-4);
  font-size: 10.5px;
  letter-spacing: 0;
}
.chip.on .n { color: color-mix(in srgb, var(--bg-0) 70%, transparent); }

/* ----- Slim approvals-list rows ----- */
.apvlist {
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.apvlist-head {
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 16px;
  display: grid;
  grid-template-columns: 32px 1fr 140px 90px 60px 70px;
  gap: 14px;
  align-items: center;
}
.apvlist-row {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 140px 90px 60px 70px;
  gap: 14px;
  align-items: center;
  padding: 11px 16px 11px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: inherit;
  cursor: pointer;
  transition: background .1s;
}
.apvlist-row:last-child { border-bottom: 0; }
.apvlist-row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--row-tint, transparent);
  transition: background .12s, width .12s;
}
.apvlist-row.urg-now    { --row-tint: var(--alert); }
.apvlist-row.urg-soon   { --row-tint: var(--warn); }
.apvlist-row.urg-normal { --row-tint: var(--ink-4); }
.apvlist-row.urg-backlog { --row-tint: transparent; }
.apvlist-row:hover { background: color-mix(in srgb, var(--accent) 3%, var(--bg-2)); }
.apvlist-row.is-cursor { background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.apvlist-row.is-cursor::before { background: var(--accent); width: 4px; }
.apvlist-num { font-family: var(--font-mono, "IBM Plex Mono"), monospace; color: var(--ink-3); font-size: 11.5px; }
.apvlist-title {
  font-family: var(--font-ui, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
}
.apvlist-meta {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  color: var(--ink-3);
  font-size: 11px;
  margin-top: 3px;
  letter-spacing: .02em;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.apvlist-col {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11.5px;
  color: var(--ink-3);
}
.apvlist-col.dim { color: var(--ink-4); }
.apvlist-age {
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: right;
}

/* ----- Floating keyboard-hint bar ----- */
.kbd-hint-bar {
  position: fixed;
  bottom: 14px;
  right: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg-3) 92%, transparent);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono, "IBM Plex Mono"), monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  z-index: 90;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.kbd-hint-bar .grp { display: inline-flex; align-items: center; gap: 5px; }
.kbd-hint-bar .grp + .grp { border-left: 1px solid var(--line); padding-left: 8px; }
.kbd-hint-bar .kbd {
  border: 1px solid var(--line-strong);
  padding: 1px 5px;
  font-size: 10px;
  background: var(--bg-2);
  color: var(--ink-2);
}

/* Tablet/phone: collapse the apv-actions grid so buttons + field stack.
   Mobile-list grid also collapses to a single visible column with the
   urgency rule still on the left edge. */
@media (max-width: 960px) {
  .apv-row {
    grid-template-columns: 32px 1fr;
    padding: 14px 16px 14px 18px;
  }
  .apv-side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .apv-actions {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .apv-actions .apv-comment { grid-column: 1 / -1; }
  .apv-actions .apv-comment-hint { display: none; }

  .apvlist-head { display: none; }
  .apvlist-row {
    grid-template-columns: 1fr auto;
    padding: 12px 14px 12px 18px;
    gap: 10px;
  }
  .apvlist-row .apvlist-num,
  .apvlist-row .apvlist-col { display: none; }
  .apvlist-row .apvlist-age { grid-row: 1; }

  .kbd-hint-bar { display: none; }
}

/* ============================================================
   Responsive — tablet and phone breakpoints
   ============================================================ */

/* Tablet: ≤ 960px */
@media (max-width: 960px) {
  body { font-size: 14px; }

  .topbar { padding: 12px 16px; gap: 12px; }
  .brand .sub { display: none; }

  .navrow { padding: 0 8px; }
  .nav-links {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { padding: 11px 12px 10px; white-space: nowrap; }
  .nav-search { display: none; }

  .dtg { flex-wrap: wrap; }
  .dtg .cell { padding: 8px 14px; }
  .dtg .cell:last-child { margin-left: 0; }

  .page, .page-default { padding: 18px 16px 36px; }
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .page-actions { justify-content: space-between; }

  .kpis { grid-template-columns: repeat(3, 1fr) !important; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:nth-child(3n) { border-right: 0; }
  .kpi:nth-last-child(-n+3) { border-bottom: 0; }

  .main-grid { grid-template-columns: 1fr; }
  .second-grid { grid-template-columns: 1fr; }

  .cadence { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Phone: ≤ 560px
   Brings the live mobile view in line with the design-system mobile prototype:
   compressed topbar (mark + role only), horizontal-scroll NavRow with a
   right-edge fade-out hint, single-line DTG, taller 2-up KPI cards, vertical
   approval rows, and tighter typography throughout. Hit areas stay ≥44px. */
@media (max-width: 560px) {
  body { font-size: 13.5px; }

  .classification {
    letter-spacing: .42em;
    font-size: 9px;
    padding: 6px 0 5px;
    font-weight: 600;
  }

  /* Topbar — brand mark + role badge only. Hide the verbose email and
     theme-picker swatches; the picker still works in the footer. */
  .topbar {
    padding: 12px 16px 10px;
    gap: 8px;
  }
  .brand .mark { font-size: 16px; letter-spacing: .06em; }
  .topbar-right {
    flex-shrink: 0;
    min-width: 0;
    gap: 8px;
  }
  .user-button { padding: 5px 8px; gap: 6px; min-width: 0; }
  .user-button .who { display: none; }
  .user-button .role { border-left: 0; padding-left: 0; }

  /* NavRow — horizontal-scroll with a fade-out gradient on the right
     edge to hint at scrollability (matches the design's `m-navrow-wrap`).
     Active item gets a subtle bg lift + accent rule along the bottom. */
  .navrow {
    padding: 0;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
    position: relative;
  }
  .navrow::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg-2));
    z-index: 1;
  }
  .nav-link {
    padding: 13px 14px 12px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-right: 1px solid var(--line);
    color: var(--ink-3);
    font-weight: 500;
  }
  .nav-link.active { background: var(--bg-1); color: var(--ink); }
  .nav-link .badge {
    margin-left: 6px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 14px;
    min-width: 14px;
    text-align: center;
    background: var(--alert);
    color: var(--ink);
    letter-spacing: 0;
  }
  .nav-link.active .badge { background: var(--alert); color: var(--ink); }

  /* DTG — single horizontal line, comma-style separators, no wrapping.
     The wrap rule from the ≤960px breakpoint is reset here. */
  .dtg {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 14px;
    gap: 10px;
    background: var(--bg-2);
  }
  .dtg .cell {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    gap: 6px;
    font-size: 10px;
    letter-spacing: .12em;
    position: relative;
    padding-right: 10px;
    margin-right: 0;
  }
  .dtg .cell:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: 0;
    color: var(--ink-4);
  }
  .dtg .cell:last-child { margin-left: 0; }
  .dtg .cell .label { display: none; }
  .dtg .cell .val { font-size: 10px; letter-spacing: .08em; color: var(--ink-2); }

  .page, .page-default { padding: 18px 14px 28px; }
  .page-title { font-size: 24px; }
  .page-sub { font-size: 13.5px; }
  .page-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .refresh-wrap { width: 100%; }

  .section-rule .lab { letter-spacing: .14em; font-size: 10px; }

  /* KPI cards — 2-up grid, ≥96px tall to match the design's mobile spec. */
  .kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .kpi {
    padding: 14px 16px 12px;
    min-height: 96px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .kpi:nth-child(2n) { border-right: 0; }
  .kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .kpi-label { font-size: 9.5px; letter-spacing: .18em; }
  .kpi-value { font-size: 30px; margin: 6px 0 4px; }
  .kpi-spark { width: 44px; height: 14px; }

  .panel-head { padding: 11px 14px 10px; gap: 8px; }
  .panel-title { font-size: 16px; }
  .panel-sub { font-size: 9.5px; }
  .panel-foot { padding: 10px 14px; }

  /* Approval rows go vertical with a swipe-hint affordance on the right
     edge (visual hint only — gesture handler not yet wired up). */
  .qrow {
    grid-template-columns: 1fr;
    padding: 14px 16px;
    gap: 8px;
    position: relative;
  }
  .qrow::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 6px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent));
  }
  .qrow .num { display: none; }
  .qrow .right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .qrow .ttl { font-size: 15px; padding-bottom: 2px; }
  .qrow .brief { font-size: 13px; }
  .qrow .meta { gap: 8px; flex-wrap: wrap; }

  .feed-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 9px 14px;
  }
  .feed-row .t, .feed-row .src { font-size: 11px; }
  .feed-row .msg { font-size: 13px; }

  .sit-row { padding: 13px 14px; gap: 10px; }
  .sit-row .ttl { font-size: 14.5px; }
  .sit-row .meta { font-size: 10.5px; }

  .findings { font-size: 11.5px; }
  .findings thead { display: none; }
  .findings, .findings tbody, .findings tr, .findings td { display: block; width: 100%; }
  .findings tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .findings tr:last-child { border-bottom: 0; }
  .findings td {
    padding: 3px 0;
    border: 0;
  }
  .findings td.serif { font-size: 14px; padding: 4px 0 6px; }
  .findings td:last-child { color: var(--ink-3); font-size: 11px; }

  .kv-table th, .kv-table td { padding: 8px 12px; font-size: 12px; }
  .user-menu { min-width: 0; left: 0; right: 0; max-width: 100vw; }

  .mcc-footer {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 14px 20px;
    font-size: 10px;
  }

  /* Cadence — single-column row layout (time · name · pill) on phone,
     same horizontal grid as the design's mobile cadence rows. */
  .cadence { grid-template-columns: 1fr !important; gap: 0; }
  .cadence-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 10px;
    align-items: center;
    border-left-width: 0;
    border-bottom: 1px dotted var(--line);
    padding: 11px 16px;
  }
  .cadence-item:last-child { border-bottom: 0; }
  .cadence-item .when { font-size: 11px; letter-spacing: .12em; }
  .cadence-item .what { font-size: 13.5px; margin: 0; }
  .cadence-item .who { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

  /* Buttons — keep ≥44px tall on phone so taps don't miss. */
  .btn { padding: 12px 16px; font-size: 12.5px; min-height: 44px; }
}

/* ============================================================
   Dark-theme overrides for legacy templates that still use
   Tailwind utility classes for content blocks (approvals,
   situations, audit_findings, leads, projects, playbooks, email).

   These templates extend base.html via `page-default` and were
   authored against a light Tailwind palette; the chrome around
   them is dark, so on a dark theme they showed white panels with
   dark-on-light text. The rules below remap those Tailwind utility
   classes so panels, tables, badges, and form controls all read
   correctly on a dark background.

   Two destinations, deliberately:
     • Neutral chrome (slate-* surfaces, borders, neutral text, form
       controls) → theme-INDEPENDENT --surface-* tokens, so a strong
       season (Pentecost, Good Friday…) never tints the table to
       "looking through coloured glass". Status/category badges keep
       their fixed hues for the same reason.
     • Accent uses (primary/active surface, links, focus ring) and the
       page headings → the themed --accent / --ink, so the season still
       shows through where it should.

   Scoped to `main.page-default` (and `main.page` for the approval
   content blocks) to keep the v2-themed pages (overview, cadence, etc.)
   untouched. Higher specificity than the dynamically-injected Tailwind
   utilities.
   ============================================================ */

main.page-default,
main.page { color: var(--ink); }

/* ---- Surfaces ----
   Neutral chrome (panels, table bodies, header rows, neutral chips)
   reads from the theme-independent --surface-* tokens so the seasonal
   accent never tints it. bg-slate-900 / hover:bg-slate-800 are the
   "primary / active" surfaces and stay on --accent — an intentional
   themed accent use. */
main.page-default .bg-white,
main.page .bg-white { background-color: var(--surface-2) !important; }
main.page-default .bg-slate-50,
main.page .bg-slate-50 { background-color: var(--surface-3) !important; }
main.page-default .bg-slate-100,
main.page .bg-slate-100 { background-color: var(--surface-3) !important; }
/* bg-slate-200 was the one neutral surface with no remap: it stayed
   Tailwind's light grey while text-slate-* mapped to a light ink, so
   the "P2 · normal" priority band rendered light-on-light. Map it to a
   raised neutral so the light ink reads against it. */
main.page-default .bg-slate-200,
main.page .bg-slate-200 { background-color: var(--surface-hi) !important; }
main.page-default .bg-slate-900,
main.page .bg-slate-900 {
  background-color: var(--accent) !important;
  color: var(--bg-0) !important;
}
main.page-default .hover\:bg-slate-50:hover,
main.page .hover\:bg-slate-50:hover { background-color: var(--surface-3) !important; }
main.page-default .hover\:bg-slate-800:hover,
main.page .hover\:bg-slate-800:hover {
  background-color: var(--accent-2) !important;
  color: var(--bg-0) !important;
}

/* ---- Text on neutral surfaces ----
   Slate text reads from the neutral inks so it doesn't carry the
   season's warmth. text-white (on accent) and the blue link text stay
   themed below. */
main.page-default .text-slate-900,
main.page .text-slate-900 { color: var(--surface-ink) !important; }
main.page-default .text-slate-800,
main.page .text-slate-800 { color: var(--surface-ink) !important; }
main.page-default .text-slate-700,
main.page .text-slate-700 { color: var(--surface-ink) !important; }
main.page-default .text-slate-600,
main.page .text-slate-600 { color: var(--surface-ink-2) !important; }
main.page-default .text-slate-500,
main.page .text-slate-500 { color: var(--surface-ink-3) !important; }
main.page-default .text-slate-400,
main.page .text-slate-400 { color: var(--surface-ink-4) !important; }
main.page-default .text-slate-300,
main.page .text-slate-300 { color: var(--surface-ink-4) !important; }
main.page-default .text-white,
main.page .text-white { color: var(--bg-0) !important; }
main.page-default .text-blue-700,
main.page .text-blue-700 { color: var(--accent) !important; }
main.page-default .text-blue-600,
main.page .text-blue-600 { color: var(--accent) !important; }

/* ---- Borders / rings / dividers ----
   Structural slate lines read from the neutral line tokens (these are
   the orange hairlines that made the table feel "too strong" on
   Pentecost). The accent focus ring + accent hover ring below stay
   themed. */
main.page-default .border-slate-200,
main.page .border-slate-200,
main.page-default .border-slate-300,
main.page .border-slate-300 { border-color: var(--surface-line-strong) !important; }
main.page-default .border-slate-100,
main.page .border-slate-100 { border-color: var(--surface-line) !important; }
main.page-default .ring-slate-200,
main.page .ring-slate-200 { --tw-ring-color: var(--surface-line) !important; }
main.page-default .ring-slate-300,
main.page .ring-slate-300 { --tw-ring-color: var(--surface-line-strong) !important; }
main.page-default .hover\:ring-slate-400:hover,
main.page .hover\:ring-slate-400:hover { --tw-ring-color: var(--accent-3) !important; }
main.page-default .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
main.page .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
main.page-default .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
main.page .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--surface-line) !important;
}
main.page-default .focus\:border-slate-500:focus,
main.page .focus\:border-slate-500:focus { border-color: var(--accent) !important; }
main.page-default .focus\:ring-slate-500:focus,
main.page .focus\:ring-slate-500:focus { --tw-ring-color: var(--accent) !important; }

/* ---- Form controls (inputs, textareas, selects) ---- */
main.page-default input[type="text"],
main.page input[type="text"],
main.page-default input[type="email"],
main.page input[type="email"],
main.page-default input[type="search"],
main.page input[type="search"],
main.page-default input[type="number"],
main.page input[type="number"],
main.page-default input[type="url"],
main.page input[type="url"],
main.page-default input[type="password"],
main.page input[type="password"],
main.page-default textarea,
main.page textarea,
main.page-default select,
main.page select {
  background-color: var(--surface-1);
  color: var(--surface-ink);
  border-color: var(--surface-line-strong);
}
main.page-default input::placeholder,
main.page input::placeholder,
main.page-default textarea::placeholder,
main.page textarea::placeholder { color: var(--surface-ink-4); }
main.page-default input:focus,
main.page input:focus,
main.page-default textarea:focus,
main.page textarea:focus,
main.page-default select:focus,
main.page select:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 1px var(--accent);
}
main.page-default select option,
main.page select option { background-color: var(--surface-2); color: var(--surface-ink); }
main.page-default input[type="radio"],
main.page input[type="radio"],
main.page-default input[type="checkbox"],
main.page input[type="checkbox"] { accent-color: var(--accent); }

/* ---- Badge / pill color pairs (light bg + dark text → tinted bg + bright text) ----
   The templates use Tailwind pairs like "bg-amber-100 text-amber-800". On a dark
   background those pills wash out. Remap each pair so the background becomes a
   translucent tint of the badge color and the text uses a bright variant. */
main.page-default .bg-red-100,
main.page .bg-red-100 { background-color: rgba(220, 70, 70, 0.18) !important; }
main.page-default .text-red-800,
main.page .text-red-800 { color: #f4a8a8 !important; }
main.page-default .bg-red-50,
main.page .bg-red-50 { background-color: rgba(220, 70, 70, 0.12) !important; }
main.page-default .text-red-700,
main.page .text-red-700 { color: #f0a0a0 !important; }
main.page-default .border-red-200,
main.page .border-red-200 { border-color: rgba(220, 70, 70, 0.35) !important; }

main.page-default .bg-orange-100,
main.page .bg-orange-100 { background-color: rgba(230, 130, 60, 0.20) !important; }
main.page-default .text-orange-800,
main.page .text-orange-800 { color: #f4be8c !important; }

main.page-default .bg-amber-100,
main.page .bg-amber-100 { background-color: rgba(228, 184, 90, 0.20) !important; }
main.page-default .text-amber-800,
main.page .text-amber-800 { color: #f0d088 !important; }
main.page-default .bg-amber-50,
main.page .bg-amber-50 { background-color: rgba(228, 184, 90, 0.10) !important; }
main.page-default .text-amber-700,
main.page .text-amber-700 { color: #e8c878 !important; }
main.page-default .border-amber-200,
main.page .border-amber-200 { border-color: rgba(228, 184, 90, 0.35) !important; }
main.page-default .bg-yellow-50,
main.page .bg-yellow-50 { background-color: rgba(228, 200, 90, 0.12) !important; }
main.page-default .text-yellow-800,
main.page .text-yellow-800 { color: #ecd894 !important; }
main.page-default .border-yellow-200,
main.page .border-yellow-200 { border-color: rgba(228, 200, 90, 0.35) !important; }

main.page-default .bg-green-100,
main.page .bg-green-100 { background-color: rgba(110, 200, 130, 0.18) !important; }
main.page-default .text-green-800,
main.page .text-green-800 { color: #a8d8b0 !important; }
main.page-default .bg-green-50,
main.page .bg-green-50 { background-color: rgba(110, 200, 130, 0.10) !important; }
main.page-default .text-green-700,
main.page .text-green-700 { color: #98d4a4 !important; }
main.page-default .border-green-200,
main.page .border-green-200 { border-color: rgba(110, 200, 130, 0.35) !important; }
main.page-default .bg-green-600,
main.page .bg-green-600 { background-color: #4a9a64 !important; color: #ffffff !important; }
main.page-default .hover\:bg-green-700:hover,
main.page .hover\:bg-green-700:hover { background-color: #3a8a54 !important; }

main.page-default .bg-emerald-100,
main.page .bg-emerald-100 { background-color: rgba(80, 200, 140, 0.18) !important; }
main.page-default .text-emerald-800,
main.page .text-emerald-800 { color: #9cd8b4 !important; }
main.page-default .bg-emerald-50,
main.page .bg-emerald-50 { background-color: rgba(80, 200, 140, 0.10) !important; }
main.page-default .text-emerald-700,
main.page .text-emerald-700 { color: #98d4a8 !important; }
main.page-default .ring-emerald-200,
main.page .ring-emerald-200 { --tw-ring-color: rgba(80, 200, 140, 0.35) !important; }

main.page-default .bg-blue-100,
main.page .bg-blue-100 { background-color: rgba(110, 160, 230, 0.18) !important; }
main.page-default .text-blue-800,
main.page .text-blue-800 { color: #b0c8e8 !important; }
main.page-default .bg-blue-50,
main.page .bg-blue-50 { background-color: rgba(110, 160, 230, 0.10) !important; }
main.page-default .border-blue-200,
main.page .border-blue-200 { border-color: rgba(110, 160, 230, 0.35) !important; }

main.page-default .bg-purple-100,
main.page .bg-purple-100 { background-color: rgba(170, 130, 210, 0.20) !important; }
main.page-default .text-purple-800,
main.page .text-purple-800 { color: #d0b0e8 !important; }

/* Violet — used by the Monitoring posture panel (situations) + the
   "monitoring" pill in situations list/detail. Same remap shape as
   the other badge color pairs above. */
main.page-default .bg-violet-50,
main.page .bg-violet-50 { background-color: rgba(140, 100, 230, 0.10) !important; }
main.page-default .bg-violet-100,
main.page .bg-violet-100 { background-color: rgba(140, 100, 230, 0.20) !important; }
main.page-default .text-violet-700,
main.page .text-violet-700 { color: #c8b0f0 !important; }
main.page-default .text-violet-800,
main.page .text-violet-800 { color: #c8b0f0 !important; }
main.page-default .text-violet-900,
main.page .text-violet-900 { color: var(--ink) !important; }
main.page-default .hover\:text-violet-900:hover,
main.page .hover\:text-violet-900:hover { color: var(--ink) !important; }
main.page-default .border-violet-100,
main.page .border-violet-100 { border-color: rgba(140, 100, 230, 0.20) !important; }
main.page-default .border-violet-200,
main.page .border-violet-200 { border-color: rgba(140, 100, 230, 0.35) !important; }
main.page-default .border-violet-300,
main.page .border-violet-300 { border-color: rgba(140, 100, 230, 0.50) !important; }
main.page-default .focus\:border-violet-500:focus,
main.page .focus\:border-violet-500:focus { border-color: var(--accent) !important; }
main.page-default .focus\:ring-violet-500:focus,
main.page .focus\:ring-violet-500:focus { --tw-ring-color: var(--accent) !important; }

main.page-default .ring-slate-200,
main.page .ring-slate-200 { --tw-ring-color: var(--surface-line) !important; }
main.page-default .ring-amber-200,
main.page .ring-amber-200 { --tw-ring-color: rgba(228, 184, 90, 0.35) !important; }
main.page-default .ring-amber-300,
main.page .ring-amber-300 { --tw-ring-color: rgba(228, 184, 90, 0.50) !important; }
main.page-default .ring-red-200,
main.page .ring-red-200 { --tw-ring-color: rgba(220, 70, 70, 0.35) !important; }
main.page-default .ring-red-300,
main.page .ring-red-300 { --tw-ring-color: rgba(220, 70, 70, 0.50) !important; }
main.page-default .ring-emerald-200,
main.page .ring-emerald-200 { --tw-ring-color: rgba(80, 200, 140, 0.35) !important; }

/* The .prose / typography overrides that previously lived here were
   removed on 2026-05-05 in L2 of the approval-rendering rebuild. The
   typography plugin is no longer part of the precompiled Tailwind build
   (tailwind.config.js drops it) and every template that used to apply
   `prose` now uses `.mcc-md` (markdown.css). Inline-code styling for
   .playbook-content moved to .mcc-md as well. */

/* ---- Page headings inside legacy templates ---- */
main.page-default h1,
main.page h1,
main.page-default h2,
main.page h2,
main.page-default h3,
main.page h3 { color: var(--ink); }

/* ---- Code chips outside .prose ---- */
main.page-default code,
main.page code {
  color: var(--accent);
}