/* Compliance & Monitoring Dashboard — wireframe styles
   Retuned to match the eAuditRisk React landing page design system
   (Lato / --ea-* tokens / soft rounded cards). */
:root {
  color-scheme: light;
  /* eAuditRisk React tokens */
  --ea-font: 'Lato', 'Helvetica Neue', sans-serif;
  --ea-bg-page: #eaeff2;
  --ea-bg-surface-1: #ffffff;
  --ea-bg-surface-2: #edf3fc;
  --ea-bg-surface-3: #e4edfa;
  --ea-border: #dce2e7;
  --ea-border-accent: #c5cdd5;
  --ea-text-primary: #2d353c;
  --ea-text-secondary: #525c65;
  --ea-text-muted: #647585;
  --ea-accent: #0089d6;
  --ea-accent-hover: #006bb3;
  --ea-shadow-1: 0 4px 24px rgba(41, 50, 65, 0.08);
  --ea-shadow-2: 0 8px 32px rgba(41, 50, 65, 0.12);

  /* Legacy aliases — keep for existing class selectors */
  --ink: var(--ea-text-primary);
  --ink-2: var(--ea-text-primary);
  --ink-3: var(--ea-text-secondary);
  --ink-4: var(--ea-text-muted);
  --line: var(--ea-border);
  --line-2: var(--ea-border);
  --bg: var(--ea-bg-page);
  --panel: var(--ea-bg-surface-1);
  --stripe: var(--ea-bg-surface-2);

  /* Semantic status — Tailwind-ish to match React pill treatments */
  --red: #ef4444;
  --red-bg: rgba(239, 68, 68, 0.10);
  --amber: #f59e0b;
  --amber-bg: rgba(245, 158, 11, 0.10);
  --green: #22c55e;
  --green-bg: rgba(34, 197, 94, 0.10);
  --blue: var(--ea-accent);
  --blue-bg: rgba(0, 137, 214, 0.10);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--ea-bg-page);
  color: var(--ea-text-primary);
  font-family: var(--ea-font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Keep .mono as a tabular-numerics helper rather than a font swap */
.mono {
  font-family: var(--ea-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* Card subtitle — the small caption line that follows each card's <h3>.
   Replaces an earlier all-caps + heavy letter-spacing treatment that read
   as decoration; mixed-case + tabular-nums + a soft steel-blue tint give
   the captions presence without competing with the title. */
.card-caption {
  font-family: var(--ea-font);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #5a7d99;
  letter-spacing: 0;
  text-transform: none;
}
.app {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

/* Top chrome */
.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 14px;
}
.chrome .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.chrome .brand .logo-mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--ea-font);
  font-size: 12px;
  font-weight: 700;
}
.chrome .brand .title { font-size: 13px; }
.chrome .brand .title small {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chrome nav {
  display: flex;
  gap: 4px;
  font-size: 12px;
}
.chrome nav a {
  padding: 6px 10px;
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid transparent;
}
.chrome nav a.active {
  border-color: var(--ink);
  background: #fff;
}
.chrome .user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3);
}
.chrome .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line-2);
  border: 1px solid var(--line);
}

/* Page header */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4px 4px 20px;
  margin-bottom: 18px;
}
.page-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ea-text-primary);
}
.page-head .sub {
  color: var(--ea-text-muted);
  font-size: 13px;
  margin-top: 6px;
}
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.filters .chip {
  border: 1px solid var(--ea-border);
  background: var(--ea-bg-surface-1);
  padding: 6px 12px;
  border-radius: 9999px;
  color: var(--ea-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.filters .chip:hover {
  background: var(--ea-bg-surface-2);
  border-color: var(--ea-border-accent);
}
.filters .chip .caret { color: var(--ea-text-muted); }
.filters .chip.primary {
  background: var(--ea-accent);
  color: #fff;
  border-color: var(--ea-accent);
}
.filters .chip.primary:hover {
  background: var(--ea-accent-hover);
  border-color: var(--ea-accent-hover);
}

/* Panels (cards) */
.panel {
  background: var(--ea-bg-surface-1);
  border: 0;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--ea-shadow-1);
}
/* Hero variant — applied to §1 Outstanding Issues. Marks the primary
   "today's portfolio pulse" card, distinct from the analytical cards
   (§2–§5) below it. Accent stripe + heavier shadow + larger title. */
.panel.panel-hero {
  border-top: 3px solid var(--ea-accent);
  box-shadow: var(--ea-shadow-2);
}
.panel.panel-hero h3 {
  font-size: 18px;
}
.panel h3 {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ea-text-primary);
  font-weight: 700;
  text-transform: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel h3 .meta {
  font-family: var(--ea-font);
  color: var(--ea-text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

/* KPI tiles */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 0;
}
.kpi {
  background: var(--ea-bg-surface-1);
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.kpi.kpi-green {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.18);
}
.kpi.kpi-amber {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.22);
}
.kpi.kpi-red {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.22);
}
.kpi[data-kpi]:hover {
  transform: translateY(-1px);
  box-shadow: var(--ea-shadow-1);
}
.kpi .label {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ea-text-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.kpi .value {
  font-family: var(--ea-font);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ea-text-primary);
}
.kpi .value.red { color: var(--red); }
.kpi .value.amber { color: var(--amber); }
.kpi .value.green { color: var(--green); }
.kpi .delta {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ea-text-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
}
.kpi .delta .up { color: var(--red); }
.kpi .delta .down { color: var(--green); }
.kpi .spark {
  height: 22px;
  margin-top: 10px;
}

/* Grid layouts */
.grid { display: grid; gap: 12px; }
.g-2 { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-23 { grid-template-columns: 2fr 1fr; }
.g-32 { grid-template-columns: 1fr 2fr; }

/* Chart placeholder */
.chart-box {
  background: repeating-linear-gradient(
    135deg,
    var(--stripe),
    var(--stripe) 6px,
    transparent 6px,
    transparent 12px
  );
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--ea-font);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.chart-box .chart-inner {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.85);
  padding: 2px 6px;
  border: 1px solid var(--line-2);
}

/* Tables */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ea-text-muted);
  padding: 10px 8px;
  border-bottom: 1px solid var(--ea-border);
  white-space: nowrap;
  background: transparent;
}
table.data th.num { text-align: center; }
table.data td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--ea-border);
  vertical-align: middle;
  color: var(--ea-text-primary);
}
table.data tbody tr { transition: background 0.12s; }
table.data tbody tr:hover { background: var(--ea-bg-surface-2); }
#rep-pivot tbody tr.rep-pivot-row.active { background: rgba(0, 137, 214, 0.12); }
#rep-pivot tbody tr.rep-pivot-row.active td { font-weight: 600; }
#exc-year-pivot tbody tr.exc-year-row.active { background: rgba(0, 137, 214, 0.12); }
#exc-year-pivot tbody tr.exc-year-row.active td { font-weight: 600; }
#exc-rao-crosstab tbody tr.rao-parent.expanded { background: rgba(0, 137, 214, 0.08); }
#exc-rao-crosstab tbody tr.rao-child td { border-top: 1px dashed var(--ea-border); }
#exc-rao-crosstab tbody tr.rao-child.expanded { background: rgba(0, 137, 214, 0.06); }
#exc-rao-crosstab tbody tr.rao-child:hover { background: var(--ea-bg-surface-2); }
/* Leakage-by-entity tree — same visual language as the RAO crosstab */
#leakage-tree tbody tr.leak-parent.expanded { background: rgba(0, 137, 214, 0.08); }
#leakage-tree tbody tr.leak-child td { border-top: 1px dashed var(--ea-border); }
#leakage-tree tbody tr.leak-child.expanded { background: rgba(0, 137, 214, 0.06); }
#leakage-tree tbody tr.leak-child:hover { background: var(--ea-bg-surface-2); }
#leakage-tree tbody tr.leak-leaf td { border-top: 1px dashed var(--ea-border); }
#leakage-tree tbody tr.leak-leaf:hover { background: var(--ea-bg-surface-2); }
/* Repeated-observations tree — same visual pattern as the leakage tree */
#rep-tree tbody tr.rep-parent.expanded { background: rgba(0, 137, 214, 0.08); }
#rep-tree tbody tr.rep-region td { border-top: 1px dashed var(--ea-border); }
#rep-tree tbody tr.rep-region.expanded { background: rgba(0, 137, 214, 0.06); }
#rep-tree tbody tr.rep-region:hover { background: var(--ea-bg-surface-2); }
#rep-tree tbody tr.rep-entity td { border-top: 1px dashed var(--ea-border); }
#rep-tree tbody tr.rep-entity:hover { background: var(--ea-bg-surface-2); }
/* Compliance-progress tree — same pattern; entity rows are leaves (no hover click target) */
#compliance-tree tbody tr.comp-parent.expanded { background: rgba(0, 137, 214, 0.08); }
#compliance-tree tbody tr.comp-region td { border-top: 1px dashed var(--ea-border); }
#compliance-tree tbody tr.comp-region.expanded { background: rgba(0, 137, 214, 0.06); }
#compliance-tree tbody tr.comp-region:hover { background: var(--ea-bg-surface-2); }
#compliance-tree tbody tr.comp-entity td { border-top: 1px dashed var(--ea-border); }
#compliance-tree tbody tr.comp-total td { background: var(--ea-bg-surface-1); border-bottom: 2px solid var(--ea-border); }
#rep-tree tbody tr.rep-total td { background: var(--ea-bg-surface-1); border-bottom: 2px solid var(--ea-border); }
#leakage-tree tbody tr.leak-total td { background: var(--ea-bg-surface-1); border-bottom: 2px solid var(--ea-border); }
/* Nested exception table inside the accordion panel */
.rao-exc-table th { padding: 6px 8px; }
.rao-exc-table td { padding: 6px 8px; }
/* Drill-down list is dense — 20 rows at reduced row height so the card stays readable */
#exc-drill td { padding: 6px 8px; font-size: 12.5px; }
#exc-drill th { padding: 8px 8px; }
table.data tr:last-child td { border-bottom: none; }
table.data .num {
  font-family: var(--ea-font);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
table.data .num.amount { text-align: right; }

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-family: var(--ea-font);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  border: 0;
  background: var(--ea-bg-surface-2);
  color: var(--ea-text-secondary);
}
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.blue { background: var(--blue-bg); color: var(--blue); }
.pill .dot { display: none; }

/* Aging bars */
.aging {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 11.5px;
}
.aging:last-child { border-bottom: none; }
.aging .bucket-label { color: var(--ink-2); }
.aging .bar-wrap {
  background: var(--line-2);
  height: 10px;
  position: relative;
}
.aging .bar {
  height: 100%;
}
.aging .bar.g { background: var(--green); }
.aging .bar.a { background: var(--amber); }
.aging .bar.r { background: var(--red); }
.aging .count {
  font-family: var(--ea-font);
  text-align: right;
  color: var(--ink-2);
}

/* Heatmap */
.heatmap {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  gap: 2px;
  font-size: 10px;
  font-family: var(--ea-font);
}
.heatmap .h-cell {
  aspect-ratio: 2.2 / 1;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background: #fff;
}
.heatmap .h-label {
  display: flex;
  align-items: center;
  color: var(--ink-3);
  padding-right: 6px;
  border: none;
  background: transparent;
  aspect-ratio: auto;
  justify-content: flex-end;
  text-align: right;
}
.heatmap .h-head {
  aspect-ratio: auto;
  padding: 4px 0;
  color: var(--ink-3);
  border: none;
  background: transparent;
}
.heatmap .c1 { background: #f4f4f1; }
.heatmap .c2 { background: #e6ead8; }
.heatmap .c3 { background: var(--amber-bg); }
.heatmap .c4 { background: #f0c9bf; }
.heatmap .c5 { background: var(--red-bg); color: var(--red); font-weight: 600;}

/* List rows */
.row-list { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 90px 1fr 120px 90px 70px;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-2);
  align-items: center;
  font-size: 11.5px;
}
.row:last-child { border-bottom: none; }
.row .id { font-family: var(--ea-font); color: var(--ink-3); }
.row .title { color: var(--ink); }
.row .title small { display: block; color: var(--ink-3); font-size: 10px; margin-top: 2px; }
.row .bu { color: var(--ink-2); font-size: 11px; }
.row .age { font-family: var(--ea-font); text-align: right; }
.row .age.over { color: var(--red); }

/* Card footer — consistent across all cards that list rows */
.card-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ea-border);
  font-family: var(--ea-font);
  font-size: 12px;
  color: var(--ea-text-muted);
}
.card-foot .foot-left { justify-self: start; }
.card-foot .foot-mid {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-foot .foot-mid .count {
  color: var(--ea-text-muted);
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
}
.card-foot .foot-right { justify-self: end; }
.card-foot .export-btn {
  background: var(--ea-accent);
  color: #fff;
  border: 0;
  padding: 6px 14px;
  font-family: var(--ea-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  border-radius: 9999px;
  transition: background 0.15s;
}
.card-foot .export-btn:hover { background: var(--ea-accent-hover); }
.pg-btn {
  background: var(--ea-bg-surface-1);
  border: 1px solid var(--ea-border);
  padding: 4px 10px;
  min-width: 26px;
  font-family: var(--ea-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--ea-text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.pg-btn:hover {
  background: var(--ea-bg-surface-2);
  border-color: var(--ea-border-accent);
}
.pg-btn.active {
  background: var(--ea-accent);
  color: #fff;
  border-color: var(--ea-accent);
}
.pg-btn:disabled,
.pg-btn[disabled] {
  color: var(--ea-text-muted);
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--ea-bg-surface-1);
}
.pg-ellipsis {
  color: var(--ea-text-muted);
  padding: 0 4px;
}

/* §1 headline overdue trigger — clickable button styled to be visually obvious */
#overdue-trigger:hover {
  background: linear-gradient(180deg, #d6eaf6 0%, #c5dff0 100%) !important;
  border-color: rgba(0, 137, 214, 0.55) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 4px 8px rgba(0, 137, 214, 0.28),
    0 6px 16px rgba(0, 137, 214, 0.18) !important;
  transform: translateY(-1px);
}
#overdue-trigger:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(0, 137, 214, 0.30) !important;
}
#overdue-trigger:focus-visible {
  outline: 2px solid var(--ea-accent);
  outline-offset: 2px;
}

/* Clickable age bucket tiles (aging hero) */
.age-bucket-tile {
  gap: 2px;
  transition: filter 0.15s, transform 0.15s;
}
.age-bucket-tile:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.age-bucket-tile:focus-visible {
  outline: 2px solid var(--ea-accent);
  outline-offset: 2px;
}

/* Clickable age × risk matrix cells */
.age-risk-cell {
  transition: background 0.12s;
}
.age-risk-cell:hover {
  background: var(--ea-bg-surface-3) !important;
}

/* Leakage category rows (section 7) — clickable */
.leakage-category-row:hover { background: var(--ea-bg-surface-2); }

/* KRI rows — clickable with chevron affordance */
.kri-row .kri-chevron {
  font-size: 18px;
  color: var(--ea-text-muted);
  transition: transform 0.15s, color 0.15s;
  font-weight: 300;
}
.kri-row:hover .kri-chevron {
  color: var(--ea-accent);
  transform: translateX(2px);
}

/* Chip dropdown (used by Audit Group filter) */
.chip-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--ea-bg-surface-1);
  border: 1px solid var(--ea-border);
  border-radius: 10px;
  box-shadow: var(--ea-shadow-1);
  padding: 6px 0;
  z-index: 50;
  min-width: 220px;
  display: none;
}
.chip-dropdown.open { display: block; }
.chip-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  background: none;
  border: 0;
  font-family: var(--ea-font);
  font-size: 13px;
  color: var(--ea-text-primary);
  cursor: pointer;
}
.chip-dropdown button:hover { background: var(--ea-bg-surface-2); }
.chip-dropdown button.active { color: var(--ea-accent); font-weight: 600; background: var(--ea-bg-surface-2); }

/* Legend */
.legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--ea-text-muted);
  font-family: var(--ea-font);
  margin-top: 12px;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
}
.legend .ig { background: var(--green); }
.legend .ia { background: var(--amber); }
.legend .ir { background: var(--red); }

/* Section headers for long scroll */
.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--ea-border);
  margin: 18px 0 14px;
}
.section-h h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--ea-text-primary);
}
.section-h .anchor {
  font-family: var(--ea-font);
  color: var(--ea-text-muted);
  font-size: 12px;
}

/* Tweaks panel */
.tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #fff;
  border: 1px solid var(--ink);
  padding: 12px 14px;
  z-index: 100;
  font-size: 11px;
  box-shadow: 4px 4px 0 var(--ink);
  display: none;
}
.tweaks.on { display: block; }
.tweaks h4 {
  margin: 0 0 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.tweaks .opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tweaks label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 3px 4px;
}
.tweaks label:hover { background: var(--bg); }
.tweaks input { accent-color: var(--ink); }

/* Variation tabs in page */
.variation-tag {
  display: inline-block;
  font-family: var(--ea-font);
  font-size: 10px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 2px 6px;
  margin-left: 8px;
}

/* Risk cockpit specifics */
.cockpit {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
.posture-score {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
}
.posture-score .big {
  font-family: var(--ea-font);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--amber);
}
.posture-score .out-of {
  font-family: var(--ea-font);
  color: var(--ink-4);
  font-size: 18px;
}
.posture-meta { font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.posture-meta .k { color: var(--ink); font-family: var(--ea-font); }

/* Board report callouts */
.callout {
  border-left: 3px solid var(--ea-accent);
  padding: 12px 14px;
  background: var(--ea-bg-surface-2);
  font-size: 13px;
  color: var(--ea-text-primary);
  margin-top: 12px;
  border-radius: 0 8px 8px 0;
}

/* Exception stack */
.exc-bar {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
  font-size: 11px;
}
.exc-bar .bar-track {
  height: 14px;
  background: var(--line-2);
  display: flex;
}
.exc-bar .seg { height: 100%; }

/* Footer */
.foot {
  color: var(--ea-text-muted);
  font-size: 12px;
  font-family: var(--ea-font);
  text-align: center;
  padding: 24px 0 12px;
}

/* Variation container */
.variation { display: none; }
.variation.active { display: block; }

/* Control effectiveness — grouped, scalable */
.ctrl-scroll { max-height: 460px; overflow-y: auto; margin: -4px -4px 0; padding: 0 4px; }
.ctrl-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 6px;
}
.ctrl-summary .k {
  font-family: var(--ea-font);
  font-size: 18px;
  line-height: 1.1;
}
.ctrl-grp { border-bottom: 1px dashed var(--line-2); }
.ctrl-grp summary {
  display: grid;
  grid-template-columns: 14px 1fr 70px 120px 52px 100px;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  cursor: pointer;
  font-size: 11.5px;
  list-style: none;
}
.ctrl-grp summary::-webkit-details-marker { display: none; }
.ctrl-grp[open] > summary .caret { transform: rotate(90deg); }
.ctrl-grp .caret {
  display: inline-block;
  color: var(--ink-4);
  transition: transform 0.15s;
  font-family: var(--ea-font);
  font-size: 10px;
}
.ctrl-grp .gname { color: var(--ink); font-weight: 500; }
.ctrl-grp .gcount { color: var(--ink-4); }
.ctrl-grp .gbar {
  display: flex;
  height: 8px;
  background: var(--line-2);
}
.ctrl-grp .gbar span { height: 100%; }
.ctrl-grp .gpass {
  font-size: 11px;
  color: var(--ink-2);
  text-align: right;
}
.ctrl-grp .grating { display: flex; gap: 3px; justify-content: flex-end; }
.ctrl-sub {
  padding: 4px 0 10px 20px;
  background: #fafaf8;
  border-left: 2px solid var(--line-2);
  margin-left: 6px;
}
.ctrl-row {
  display: grid;
  grid-template-columns: 1fr 120px 60px;
  gap: 10px;
  align-items: center;
  padding: 5px 8px;
  font-size: 11px;
}
.ctrl-name { color: var(--ink-2); }
.ctrl-minibar { height: 6px; background: var(--ea-bg-surface-2); border-radius: 3px; overflow: hidden; }
.ctrl-minibar .mb-fill { height: 100%; }
.ctrl-minibar .mb-fill.g { background: var(--green); }
.ctrl-minibar .mb-fill.a { background: var(--amber); }
.ctrl-minibar .mb-fill.r { background: var(--red); }
.ctrl-more { padding: 6px 8px; color: var(--ink-4); }
.ctrl-more a { color: var(--ink-2); }

/* Small helpers */
.muted { color: var(--ink-3); }
.tiny { font-size: 10px; }
.right { text-align: right; }
.flex { display: flex; }
.between { justify-content: space-between; }
.gap-s { gap: 6px; }
.gap-m { gap: 10px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
hr.dash { border: none; border-top: 1px solid var(--ea-border); margin: 14px 0; }