/*
 * ════════════════════════════════════════════════════════════════
 *  GAP ANALYSIS MATRIX — Component Styles
 *  Climate Change Duties Platform · Argyll & Bute Council
 *
 *  Matrix-specific components only. All shared tokens, shell,
 *  layout, and shared components are in civic-swiss.css, loaded first.
 *
 *  v1.0 — April 2026
 * ════════════════════════════════════════════════════════════════
 */


/* ── OBLIGATION CARDS ──────────────────────────────────────── */
/*
 *  .ob-card uses .panel as base box (background, border, radius).
 *  The left border is defined here at 4px — slightly heavier than
 *  .panel--bar's 3px because it carries a priority signal, not
 *  just decoration. --ob-accent is set per card by the JS renderer.
 */
.ob-card {
  border-radius: var(--tile-radius);
  cursor: pointer;
  transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
  user-select: none;
  margin-bottom: var(--card-gap);
  padding: calc(var(--sp4) + 4px) var(--sp5) var(--sp4);
  scroll-margin-top: var(--sp8);
  box-shadow: var(--shadow-tile-mini);
}
.ob-card::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp6); right: var(--sp6);
  height: 4px; border-radius: var(--tile-radius);
  background: var(--ob-accent, var(--primary));
}
.ob-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-tile-mini-hover);
  border-color: var(--primary);
}

.ob-head        { display: flex; align-items: flex-start; gap: var(--sp3); }
.ob-id          { font-family: var(--font-mono); font-weight: 600; font-size: 10px; color: var(--text-f); letter-spacing: .08em; flex-shrink: 0; opacity: .9; }
.ob-body        { flex: 1; min-width: 0; }
.ob-eyebrow     { font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ob-accent, var(--primary)); height: 14px; margin-bottom: 5px; line-height: 1; display: flex; align-items: flex-end; }
.ob-title       { font-weight: 700; font-size: var(--text-sm); color: var(--text); line-height: 1.35; margin-bottom: 0; }
.ob-head-top    { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp3); margin-bottom: 2px; }
.ob-subline     { font-size: 11px; color: var(--text-m); line-height: 1.55; }
.ob-ref-inline  { font-family: var(--font-mono); font-size: 10px; color: var(--text-f); letter-spacing: .08em; white-space: nowrap; padding-top: 2px; }
.ob-detail-ref  { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--divider); border-radius: var(--r-full); background: var(--surface2); font-family: var(--font-mono); font-size: 10px; color: var(--text-f); margin-bottom: var(--sp3); }
.ob-badges      { display: none; }
.ob-card.open .ob-chevron { transform: rotate(180deg); }

.ob-detail      { display: none; margin-top: var(--sp4); padding-top: var(--sp3); border-top: 1px solid var(--divider); }
.ob-card.open .ob-detail { display: block; }
.ob-detail-label  { font-weight: 700; font-size: 10px; color: var(--text-f); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp2); }
.ob-detail-section { margin-bottom: var(--sp3); }
.ob-risk          { font-size: var(--text-xs); color: var(--text-m); line-height: 1.6; margin: 0; }
.ob-service-tag   { display: inline-block; background: var(--primary-s); color: var(--primary); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); margin: 0 4px 4px 0; }
.ob-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp4); padding-top: var(--sp3); border-top: 1px solid var(--divider); }
.ob-back-link   { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--divider); border-radius: var(--r-md); background: var(--surface2); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.ob-back-link:hover { border-color: var(--border); box-shadow: var(--sh-sm); }
.ob-nav-back    { margin-bottom: var(--sp3); }
.ob-nav-back a,
.ob-nav-back button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; border-radius: 0; background: none; color: var(--primary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; text-decoration: none; cursor: pointer; }
.ob-nav-back a:hover,
.ob-nav-back button:hover { text-decoration: underline; }


/* ── OBLIGATION BADGES ─────────────────────────────────────── */

/* MSC badges (badge-msc, badge-must, badge-should, badge-could) → civic-swiss.css */

/* Priority tiers */
.badge-priority {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--tile-radius);
  white-space: nowrap;
  color: var(--text);
}
.badge-p1 { background: var(--red);        color: #fff; }
.badge-p2 { background: var(--amber);      color: var(--brand-charcoal); }
.badge-p3 { background: var(--brand-soft); color: var(--brand-charcoal); }
.badge-p4 { background: var(--surface3);   color: var(--text-m); }

/* Status */
.badge-status {
  display: inline-block;
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--tile-radius);
  white-space: nowrap;
}
.badge-active       { background: var(--green-s); color: var(--green); }
.badge-transitional { background: var(--amber-s); color: var(--amber); }
.badge-emerging     { background: var(--surface3); color: var(--text-m); }


/* ── LEGEND ────────────────────────────────────────────────── */

/* .legend-card uses .panel as base box */
.legend-card  { padding: var(--sp4) var(--sp5); }

.legend-grid  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp4); align-items: start; }
.legend-grid,
.legend-grid * { text-align: left; }
.legend-col-title { font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-f); margin-bottom: var(--sp2); }
.legend-row       { display: block; margin-bottom: var(--sp1); font-size: var(--text-xs); color: var(--text-m); }


/* ── MSC TILES ─────────────────────────────────────────────── */

.msc-tiles    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp3); }
.msc-tile       { border-radius: var(--r-sm); padding: var(--sp4) var(--sp5); text-align: left; color: #fff; }
.msc-tile-val   { font-family: var(--font-mono); font-weight: 800; font-size: var(--text-xl); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.msc-tile-label { font-weight: 700; font-size: 11px; letter-spacing: .1em; margin-top: var(--sp2); opacity: .92; text-transform: uppercase; }


/* ── PRIORITY HEATMAP ──────────────────────────────────────── */

.hm-grid      { display: grid; grid-template-columns: 130px repeat(3, 1fr); gap: 6px; }

.hm-header    { font-weight: 800; font-size: var(--text-sm); text-align: center; padding: var(--sp3) var(--sp2); border-radius: var(--r-sm); color: #fff; }

.hm-row-label { border-radius: var(--r-sm); padding: var(--sp3) var(--sp4); display: flex; flex-direction: column; justify-content: center; }
.hm-row-tier  { font-weight: 800; font-size: 16px; }
.hm-row-sub   { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; opacity: .85; }

.hm-cell      { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-sm); padding: var(--sp3); min-height: 80px; }
.hm-cell.empty { background: var(--surface2); border: 1px dashed var(--border); opacity: .5; }
.hm-cell-count { display: flex; justify-content: flex-end; margin-bottom: var(--sp2); }
.hm-cell-count span { font-family: var(--font-mono); font-weight: 700; font-size: 10px; padding: 1px 6px; border-radius: var(--tile-radius); color: #fff; }

.hm-chips     { display: flex; flex-wrap: wrap; gap: 4px; }
.hm-chip      { position: relative; border-radius: var(--tile-radius); padding: 4px 8px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.hm-dot       { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; }


/* ── SERVICE IMPACT MAP ────────────────────────────────────── */

.svc-row {
  display: grid;
  grid-template-columns: 190px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: var(--sp2) 0;
  border-top: 1px solid var(--divider);
  transition: background var(--trans);
}
.svc-row:first-child          { border-top: none; }
.svc-row:hover                { background: var(--surface2); }

.svc-name                     { font-weight: 600; font-size: var(--text-xs); color: var(--text); text-align: right; line-height: 1.3; }
.svc-row.cross-cut .svc-name  { font-weight: 400; font-style: italic; }
.svc-row.cross-cut            { opacity: .65; }

.svc-bar-track        { position: relative; height: 26px; background: var(--surface3); border-radius: var(--tile-radius); overflow: hidden; }
.svc-bar-fill         { position: absolute; left: 0; top: 0; bottom: 0; display: flex; overflow: hidden; }
.svc-bar-seg-must     { background: var(--red); }
.svc-bar-seg-should   { background: var(--teal); }
.svc-bar-seg-could    { background: var(--brand-soft); }
.svc-bar-label        { position: absolute; left: 6px; top: 0; bottom: 0; display: flex; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: #fff; pointer-events: none; }

.svc-total      { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); color: var(--text); }
.svc-total-unit { font-size: 10px; font-weight: 400; color: var(--text-f); margin-left: 2px; }


/* ── FINDING CARDS ─────────────────────────────────────────── */

/* .finding-card — legacy, kept for reference */
.finding-card       { padding: var(--sp4) var(--sp5); }
.finding-card-label { font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-f); margin-bottom: var(--sp2); }
.finding-card-body  { font-size: var(--text-xs); color: var(--text-m); line-height: 1.6; }
.finding-card-body strong { color: var(--text); font-weight: 600; }

/* ── SERVICE IMPACT STAT STRIP ─────────────────────────────── */
/* .svc-stat-strip / .svc-stat-card / .svc-stat-eyebrow / .svc-stat-value / .svc-stat-sub
   → Platform-wide tile system. Defined in civic-swiss.css. */

/* result-count → civic-swiss.css */


/* ── REGISTER ENRICHMENT ───────────────────────────────────── */

/* Signals row — quick win + effort on collapsed card header */
.ob-signals { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--sp2); }
.ob-signal  {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .04em;
  padding: 2px 6px; border-radius: var(--tile-radius); white-space: nowrap;
}
.ob-signal-qw  { background: var(--green-s); color: var(--green); }
.ob-effort-low { background: var(--green-s); color: var(--green); }
.ob-effort-med { background: var(--amber-s); color: var(--amber); }
.ob-effort-hi  { background: var(--red-s);   color: var(--red);   }

/* Reference block — legislation + guidance citation pair */
.ob-ref-block { display: flex; flex-direction: column; gap: var(--sp2); margin-top: var(--sp1); }
.ob-ref-item  { display: flex; gap: var(--sp3); align-items: baseline; font-size: var(--text-xs); color: var(--text-m); line-height: 1.5; }
.ob-ref-type  {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-f); flex-shrink: 0; min-width: 82px;
}

/* Description — interpretive narrative */
.ob-description { font-size: var(--text-sm); color: var(--text); line-height: 1.65; margin: 0; }

/* Change from previous guidance — teal-accented callout */
.ob-change-callout {
  position: relative;
  background: var(--primary-s);
  border-radius: var(--tile-radius);
  padding: var(--sp3) var(--sp4) var(--sp3) calc(var(--sp4) + 8px);
  font-size: var(--text-xs); color: var(--text-m);
  line-height: 1.75; font-style: italic; margin-top: var(--sp1);
}
.ob-change-callout::before {
  content: '';
  position: absolute;
  left: 0; top: var(--sp3); bottom: var(--sp3);
  width: 3px; border-radius: var(--tile-radius);
  background: var(--primary);
}


/* ── RISK WORKSPACE ────────────────────────────────────────── */

.rwc-intro { padding: var(--sp4) var(--sp5); margin-bottom: var(--sp4); }
.rwc-intro-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--sp2); }
.rwc-intro-body  { font-size: var(--text-xs); color: var(--text-m); line-height: 1.8; max-width: none; }

.rwc-topline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp3); margin-bottom: var(--sp4); }
.rwc-metric {
  position: relative;
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--tile-radius);
  padding: var(--sp4) var(--sp5) var(--sp4) calc(var(--sp5) + 8px);
}
.rwc-metric::before {
  content: '';
  position: absolute;
  left: 0; top: var(--sp3); bottom: var(--sp3);
  width: 3px; border-radius: var(--tile-radius);
  background: var(--metric-accent, var(--primary));
}
.rwc-metric-value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 800; line-height: 1; color: var(--metric-accent, var(--primary)); font-variant-numeric: tabular-nums lining-nums; }
.rwc-metric-label { margin-top: var(--sp2); font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.rwc-metric-sub   { margin-top: 2px; font-size: 11px; color: var(--text-f); line-height: 1.45; }

.rwc-board-shell { position: relative; }
.rwc-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp4); align-items: stretch; }
.rwc-lane {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider); border-radius: var(--tile-radius);
  overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
}
.rwc-lane::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp6); right: var(--sp6);
  height: 4px; border-radius: var(--tile-radius);
  background: var(--lane-accent, var(--primary));
  z-index: 1;
}
.rwc-lane-head {
  padding: var(--sp4) var(--sp4) var(--sp3);
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--lane-accent, var(--primary)) 8%, var(--surface));
  display: grid; grid-template-rows: 24px 44px 44px; align-content: start;
  height: 136px; min-height: 136px;
}
.rwc-lane-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lane-accent, var(--primary)); margin-bottom: 6px; height: 24px; min-height: 24px; display: flex; align-items: flex-end; }
.rwc-lane-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp2); min-height: 44px; }
.rwc-lane-title { font-size: var(--text-base); font-weight: 700; color: var(--text); line-height: 1.15; max-width: 12ch; }
.rwc-lane-count {
  min-width: 32px; height: 28px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  background: var(--lane-accent, var(--primary));
  color: #fff;
}
.rwc-lane-desc  { min-height: 44px; margin-top: var(--sp2); font-size: 11px; color: var(--text-m); line-height: 1.55; display: flex; align-items: flex-start; }
.rwc-lane-body  {
  position: relative; padding: var(--sp3); padding-bottom: var(--sp6);
  display: flex; flex-direction: column; gap: var(--sp2);
  flex: 1 1 auto; min-height: 0; max-height: 62vh; overflow: auto;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--lane-accent) 55%, var(--divider)) color-mix(in srgb, var(--surface2) 85%, transparent);
}
.rwc-lane-body::-webkit-scrollbar { width: 12px; }
.rwc-lane-body::-webkit-scrollbar-track { background: color-mix(in srgb, var(--surface2) 88%, transparent); border-left: 1px solid var(--divider); }
.rwc-lane-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--lane-accent) 62%, var(--divider)); border-radius: 999px; border: 2px solid color-mix(in srgb, var(--surface2) 88%, transparent); }
.rwc-lane-body::-webkit-scrollbar-thumb:hover { background: var(--lane-accent); }
.rwc-empty { border: 1px dashed var(--border); border-radius: var(--tile-radius); padding: var(--sp4); font-size: var(--text-xs); color: var(--text-f); background: var(--surface2); }

.rwc-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--tile-radius); padding: calc(var(--sp3) + 4px) var(--sp3) var(--sp3); cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
  box-shadow: var(--shadow-tile-mini);
}
.rwc-card::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp6); right: var(--sp6);
  height: 4px; border-radius: var(--tile-radius);
  background: var(--card-accent, var(--primary));
}
.rwc-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-tile-mini-hover);
  border-color: var(--primary);
}
.rwc-card.active { background: var(--surface2); box-shadow: var(--shadow-tile-mini-hover); }
.rwc-card-row { display: block; }
.rwc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp2); margin-bottom: var(--sp2); }
.rwc-card-ref { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--text-f); white-space: nowrap; padding-top: 2px; opacity: .9; }
.rwc-card-main { min-width: 0; }
.rwc-card-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--card-accent, var(--primary)); height: 14px; margin-bottom: 5px; line-height: 1; display: flex; align-items: flex-end; }
.rwc-card-title { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.45; margin-bottom: var(--sp2); }
.rwc-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--sp2); }
.rwc-mini-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: var(--tile-radius);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; color: var(--text);
}
.rwc-mini-badge--msc-must    { background: var(--red-s);   color: var(--red); }
.rwc-mini-badge--msc-should  { background: var(--teal-s);  color: var(--teal); }
.rwc-mini-badge--msc-could   { background: var(--surface3); color: var(--text-f); }
.rwc-mini-badge--p1          { background: var(--red-s);   color: var(--red); }
.rwc-mini-badge--p2          { background: var(--amber-s); color: var(--amber); }
.rwc-mini-badge--p3          { background: var(--primary-s); color: var(--primary); }
.rwc-mini-badge--p4          { background: var(--surface3); color: var(--text-f); }
.rwc-mini-badge--active      { background: var(--green-s); color: var(--green); }
.rwc-mini-badge--transitional { background: var(--amber-s); color: var(--amber); }
.rwc-mini-badge--emerging    { background: var(--surface3); color: var(--text-m); }
.rwc-card-summary { font-size: 11px; color: var(--text-m); line-height: 1.55; margin-bottom: var(--sp2); }
.rwc-card-meta    { display: flex; flex-wrap: wrap; gap: 6px; }
.rwc-service-chip { display: inline-block; padding: 2px 7px; border-radius: var(--r-full); font-size: 10px; font-weight: 600; background: var(--surface3); color: var(--text-m); }

.rwc-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp4); margin-top: var(--sp5); }
.rwc-note  { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--tile-radius); padding: var(--sp4) var(--sp5); }
.rwc-note-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-f); margin-bottom: var(--sp2); }
.rwc-note-body  { font-size: var(--text-xs); color: var(--text-m); line-height: 1.75; }
.rwc-note-body strong { color: var(--text); font-weight: 600; }

.rwc-overlay  { position: fixed; inset: 0; background: rgba(0,0,0,.22); opacity: 0; pointer-events: none; transition: opacity var(--trans); z-index: 80; }
.rwc-overlay.open { opacity: 1; pointer-events: auto; }
.rwc-inspector {
  position: fixed; right: 24px; top: calc(var(--topbar-h) + 24px);
  width: min(360px, calc(100vw - 48px)); max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow: auto; padding: var(--sp5); z-index: 90; box-shadow: var(--sh-lg);
  opacity: 0; transform: translateX(24px); pointer-events: none;
  transition: transform var(--trans), opacity var(--trans);
}
.rwc-inspector.open  { opacity: 1; transform: translateX(0); pointer-events: auto; }
.rwc-inspector-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-f); margin-bottom: var(--sp2); }
.rwc-inspector-title   { font-size: var(--text-lg); font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: var(--sp3); }
.rwc-inspector-badges  { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp4); }
.rwc-inspector-section { margin-bottom: var(--sp4); }
.rwc-inspector-label   { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-f); margin-bottom: var(--sp2); }
.rwc-inspector-body    { font-size: var(--text-xs); color: var(--text-m); line-height: 1.8; }
.rwc-inspector-body strong { color: var(--text); font-weight: 600; }
.rwc-inspector-services { display: flex; flex-wrap: wrap; gap: 6px; }
.rwc-inspector-service  { padding: 3px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; background: var(--primary-s); color: var(--primary); }
.rwc-inspector-actions  { display: flex; gap: var(--sp2); flex-wrap: wrap; margin-top: var(--sp4); }
.rwc-inspector-close    { position: absolute; right: 12px; top: 12px; }
.rwc-btn         { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-md); padding: 9px 12px; font-size: 12px; font-weight: 700; border: 1px solid var(--divider); cursor: pointer; transition: background var(--trans), border-color var(--trans), color var(--trans); }
.rwc-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.rwc-btn--ghost   { background: var(--surface2); color: var(--text); }
.rwc-btn:hover    { border-color: var(--border); }


/* ── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .rwc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .legend-grid  { grid-template-columns: 1fr; }
  .hm-grid      { grid-template-columns: 90px repeat(3, 1fr); gap: 4px; }
  .hm-header    { font-size: 11px; padding: var(--sp2); }
  .hm-row-label { padding: var(--sp2); }
  .hm-row-tier  { font-size: 13px; }
  .svc-row      { grid-template-columns: 120px 1fr 60px; gap: 8px; }
  .msc-tiles    { grid-template-columns: repeat(2, 1fr); }
  .rwc-topline  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rwc-board    { grid-template-columns: 1fr; }
  .rwc-notes    { grid-template-columns: 1fr; }
  .rwc-lane-body { max-height: none; }
  .rwc-inspector {
    position: fixed;
    right: 0; top: var(--topbar-h);
    width: min(420px, 92vw); max-height: calc(100vh - var(--topbar-h));
    height: calc(100vh - var(--topbar-h));
    border-radius: var(--tile-radius) 0 0 var(--tile-radius);
  }
}

@media (max-width: 640px) {
  .rwc-topline  { grid-template-columns: 1fr; }
  .rwc-inspector { width: 100vw; max-width: none; border-radius: 0; }
}


/* highlight-pulse → civic-swiss.css */


/* ── CCIR EVIDENCE SECTION ────────────────────────────────────────────────── */

.ccir-evidence { margin-top: var(--sp4); padding-top: var(--sp3); border-top: 1px solid var(--divider); }
.ccir-badge { display: inline-block; background: var(--primary-s); color: var(--primary); font-family: var(--font-body); font-weight: 700; font-size: 10px; padding: 2px 6px; border-radius: var(--r-sm); margin-left: var(--sp2); }
.ccir-summary { font-size: var(--text-xs); color: var(--text-m); margin: var(--sp2) 0 var(--sp3); }
.ccir-refs-list { display: flex; flex-direction: column; gap: var(--sp2); }
.ccir-ref { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp3); padding: var(--sp2); background: var(--surface2); border-radius: var(--r-sm); font-size: var(--text-xs); }
.ccir-committee { font-weight: 600; color: var(--text); }
.ccir-date { color: var(--text-f); }
.ccir-item { color: var(--text-m); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccir-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--text-f) 25%, transparent); }
.ccir-more { font-size: var(--text-xs); color: var(--text-f); margin-top: var(--sp2); }