/*
 * ════════════════════════════════════════════════════════════════
 *  CIVIC SWISS - Shared Design System
 *  Climate Change Duties Platform · Argyll & Bute Council
 * ════════════════════════════════════════════════════════════════
 *
 *  This file contains the shared tokens, shell, and component
 *  styles used across all tools in the platform. Each tool adds
 *  its own tool-specific styles in a <style> block within its
 *  HTML file.
 *
 *  Tokens are the single source of truth for colour, type, and
 *  spacing. Dark theme is the default. No external fonts, no
 *  CDN dependencies.
 *
 *  v1.0 - March 2026
 * ════════════════════════════════════════════════════════════════
 */


/* ── DESIGN TOKENS ─────────────────────────────────────────── */

:root {
  /* Type scale (fluid) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  /* Spacing scale */
  --sp1: .25rem;
  --sp2: .5rem;
  --sp3: .75rem;
  --sp4: 1rem;
  --sp5: 1.25rem;
  --sp6: 1.5rem;
  --sp8: 2rem;

  /* Layout */
  --topbar-h: 48px;

  /* Radii */
  --r-sm: var(--tile-radius);
  --r-md: var(--tile-radius);
  --r-lg: .75rem;
  --r-xl: 1rem;
  --r-full: 9999px;
  --tile-radius: 4px;       /* Unified tile/card corner radius — tuneable */

  /* Card list gap — spacing between tiles in dense card lists */
  --card-gap: 8px;

  /* Bento shuffle — hard offset shadow + lift on hover (see MEMORY) */
  --shadow-tile:            4px 5px 0 var(--surface3);
  --shadow-tile-hover:      6px 7px 0 var(--surface3);
  --shadow-tile-mini:       2px 3px 0 var(--surface3);
  --shadow-tile-mini-hover: 4px 5px 0 var(--surface3);

  /* Motion */
  --trans: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts - system stack, no CDN */
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: Consolas, 'Cascadia Code', 'SF Mono', 'Liberation Mono', monospace;

  /* Brand constants (theme-invariant) */
  --brand-teal:    #32687A;
  --brand-amber:   #E2AF47;
  --brand-green:   #92BD39;
  --brand-red:     #B0413E;
  --brand-soft:    #6BB4B1;
  --brand-sand:    #DBC79E;
  --brand-charcoal:#222222;
}


/* ── DARK THEME (default) ──────────────────────────────────── */

[data-theme="dark"] {
  --bg:       #0f1117;
  --surface:  #161b22;
  --surface2: #1c2128;
  --surface3: #21262d;
  --surface4: #2d333b;
  --divider:  #30363d;
  --border:   #3d444d;

  --text:     #e6edf3;
  --text-m:   #8b949e;
  --text-f:   #484f58;
  --text-inv: #0d1117;

  --primary:   #4a8fa3;
  --primary-s: rgba(50, 104, 122, .2);
  --accent:    #32687A;

  --green:   #92BD39;
  --green-s: rgba(146, 189, 57, .15);
  --amber:   #E2AF47;
  --amber-s: rgba(226, 175, 71, .15);
  --red:     #B0413E;
  --red-s:   rgba(176, 65, 62, .15);
  --teal:    #4a8fa3;
  --teal-s:  rgba(74, 143, 163, .15);

  --sh-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 16px rgba(0, 0, 0, .5);
  --sh-lg: 0 12px 40px rgba(0, 0, 0, .6);
}


/* ── LIGHT THEME ───────────────────────────────────────────── */

[data-theme="light"] {
  --bg:       #f6f8fa;
  --surface:  #ffffff;
  --surface2: #f0f4f8;
  --surface3: #e8ecf0;
  --surface4: #dde1e7;
  --divider:  #d0d7de;
  --border:   #c9d1d9;

  --text:     #1f2328;
  --text-m:   #656d76;
  --text-f:   #adb4bc;
  --text-inv: #ffffff;

  --primary:   #32687A;
  --primary-s: rgba(50, 104, 122, .1);
  --accent:    #1d4f5c;

  --green:   #5a8a1a;
  --green-s: rgba(90, 138, 26, .12);
  --amber:   #E2AF47;
  --amber-s: rgba(226, 175, 71, .15);
  --red:     #B0413E;
  --red-s:   rgba(176, 65, 62, .1);
  --teal:    #32687A;
  --teal-s:  rgba(50, 104, 122, .12);

  --sh-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --sh-md: 0 4px 16px rgba(0, 0, 0, .1);
  --sh-lg: 0 12px 40px rgba(0, 0, 0, .15);
}


/* ── BASE RESET ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

/* Subtle scrollbars - belt-and-braces for short viewports */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--tile-radius); }
::-webkit-scrollbar-thumb:hover { background: var(--text-f); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  line-height: 1.6;
}
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
::selection { background: var(--primary-s); color: var(--text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ── APP SHELL ─────────────────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}


/* ── TOPBAR ────────────────────────────────────────────────── */

.topbar {
  grid-column: 1 / -1;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  padding: 0 var(--sp6);
  height: var(--topbar-h);
  gap: var(--sp4);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-logo     { display: flex; align-items: center; gap: var(--sp3); flex-shrink: 0; }
.topbar-title    { font-size: var(--text-sm); font-weight: 700; color: var(--text); line-height: 1.2; }
.topbar-subtitle { font-size: var(--text-xs); color: var(--text-m); margin-top: 1px; }
.topbar-divider  { width: 1px; height: 28px; background: var(--divider); flex-shrink: 0; }
.topbar-badge    { font-size: var(--text-xs); font-weight: 600; background: var(--primary-s); color: var(--primary); padding: var(--sp1) var(--sp3); border-radius: var(--r-full); white-space: nowrap; }
.topbar-spacer   { flex: 1; }
.topbar-actions  { display: flex; align-items: center; gap: var(--sp3); }


/* ── BUTTONS ───────────────────────────────────────────────── */

.btn-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-m);
  transition: background var(--trans), color var(--trans);
  border: 1px solid transparent;
}
.btn-icon:hover { background: var(--surface3); color: var(--text); border-color: var(--border); }

.btn-sm {
  font-size: var(--text-xs); font-weight: 600;
  padding: var(--sp2) var(--sp3);
  border-radius: var(--r-md);
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-m);
  transition: background var(--trans);
}
.btn-sm:hover { background: var(--surface4); color: var(--text); }


/* ── SIDEBAR ───────────────────────────────────────────────── */

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--divider);
  padding: var(--sp5) 0;
  overflow-y: clip;    /* clip (not auto) so overflow-x can remain visible */
  overflow-x: visible; /* allows active pill to bleed past sidebar edge */
  position: sticky;
  top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  z-index: 1;          /* render above main-content so pill bleed is visible */
}
.sidebar-section { padding: 0 var(--sp3) var(--sp4); }
.sidebar-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-f);
  padding: var(--sp1) var(--sp3);
  margin-bottom: var(--sp1);
}
.sidebar-divider { height: 1px; background: var(--divider); margin: var(--sp3); }

/* Sidebar navigation */
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--sp3);
  padding: var(--sp2) var(--sp3);
  border-radius: var(--r-md);
  font-size: var(--text-xs); font-weight: 500;
  color: var(--text-m);
  transition: background var(--trans), color var(--trans);
  cursor: pointer; text-decoration: none;
  justify-content: space-between;
}
.sidebar-nav a .nav-left { display: flex; align-items: center; gap: var(--sp3); }
.sidebar-nav a:hover { background: var(--surface3); color: var(--text); }
.sidebar-nav a.active { background: var(--primary-s); color: var(--primary); font-weight: 700; }

/* Platform nav links (have href): contained pill with left accent, no bleed */
.sidebar-nav a[href].active {
  background: var(--primary-s);
  border-left: 2px solid var(--primary);
  border-radius: var(--r-md);
  padding-left: calc(var(--sp3) - 2px);   /* compensate for border-left so text stays aligned */
  color: var(--primary);
  font-weight: 700;
}

.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--red); color: var(--text-inv);
  font-size: 10px; font-weight: 700;
  border-radius: var(--r-full); line-height: 1;
}
[data-theme="light"] .nav-badge { color: #fff; }

/* Sidebar filters */
.filter-group { padding: 0 var(--sp3); }
.filter-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-f);
  margin-bottom: var(--sp2);
}
.filter-select {
  width: 100%;
  font-size: var(--text-xs);
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface3);
  color: var(--text);
  font-family: var(--font-body);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
  transition: border-color var(--trans);
  margin-bottom: var(--sp3);
}
.filter-select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

.filter-check-row { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp2); }
.filter-check-row input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary); }
.filter-check-row label { font-size: var(--text-xs); color: var(--text-m); cursor: pointer; line-height: 1.3; }
.filter-check-row.disabled { opacity: .35; pointer-events: none; }
.filter-check-row.disabled label { cursor: default; }

/* Sidebar summary metric */
.ssm {
  padding: var(--sp3);
  background: var(--surface3);
  border-radius: var(--tile-radius);
  border: 1px solid var(--divider);
  margin: var(--sp2) var(--sp3) 0;
}
.ssm-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-f); margin-bottom: var(--sp1); }
.ssm-val { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.ssm-green { color: var(--green); }
.ssm-amber { color: var(--amber); }
.ssm-red   { color: var(--red); }


/* ── MAIN CONTENT ──────────────────────────────────────────── */

.main-content {
  overflow-y: auto;
  padding: var(--sp6);
  display: flex;
  flex-direction: column;
  gap: var(--sp6);
}

/* Page sections (tab content) */
.page-section {
  display: none;
  flex-direction: column;
  gap: var(--sp5);
  max-width: 1280px;
}
.page-section.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-section.active { animation: fadeIn .25s ease forwards; }

.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp4); padding-top: var(--sp2); }
.section-title { font-size: var(--text-md); font-weight: 600; color: var(--text); line-height: 1.2; letter-spacing: -0.01em; font-family: var(--font-body); }
.section-description { font-size: var(--text-xs); color: var(--text-f); margin-top: var(--sp1); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; }


/* ── KPI CARDS ─────────────────────────────────────────────── */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--sp4); }

.kpi-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp5);
  box-shadow: var(--shadow-tile);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.kpi-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tile-hover); border-color: var(--primary); }
.kpi-card.kpi-alert { padding-top: calc(var(--sp5) + 4px); }
.kpi-card.kpi-alert::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp6); right: var(--sp6);
  height: 4px; border-radius: var(--tile-radius);
  background: var(--red);
}
.kpi-card.kpi-alert:hover { border-color: var(--red); }

.kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-m); margin-bottom: var(--sp2); }
.kpi-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; line-height: 1; margin-bottom: var(--sp1); }
.kpi-sub   { font-size: var(--text-xs); color: var(--text-m); }

.kpi-accent { color: var(--primary); }
.kpi-green  { color: var(--green); }
.kpi-amber  { color: var(--amber); }
.kpi-red    { color: var(--red); }

.kpi-bar      { margin-top: var(--sp3); height: 4px; background: var(--surface3); border-radius: var(--r-full); overflow: hidden; }
.kpi-bar-fill { height: 100%; border-radius: var(--r-full); transition: width .6s cubic-bezier(.16, 1, .3, 1); }


/* ── INSIGHT BANNER ────────────────────────────────────────── */

.insight-banner {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp5);
  padding-left: calc(var(--sp5) + 8px);
}
/* Left handle - inset from top/bottom, lighter weight */
.insight-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--sp3);
  bottom: var(--sp3);
  width: 3px;
  border-radius: var(--tile-radius);
  background: var(--primary);
}
.insight-banner-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--primary); margin-bottom: var(--sp3); }
.insight-banner-body  { font-size: var(--text-xs); color: var(--text-m); line-height: 1.8; }
.insight-banner-body strong { color: var(--text); font-weight: 600; }


/* ── INSIGHT CARDS ─────────────────────────────────────────── */

.insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp4); }

.insight-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp5);
}
.insight-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp3); flex-shrink: 0;
}
.insight-icon svg { width: 16px; height: 16px; }

.ii-red   { background: var(--red-s);     color: var(--red); }
.ii-green { background: var(--green-s);   color: var(--green); }
.ii-amber { background: var(--amber-s);   color: var(--amber); }
.ii-blue  { background: var(--primary-s); color: var(--primary); }

.insight-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp2); }
.insight-body  { font-size: var(--text-xs); color: var(--text-m); line-height: 1.6; }
.insight-hl    { color: var(--text); font-weight: 600; }


/* ── CHART CARDS ───────────────────────────────────────────── */

.chart-grid-2       { display: grid; grid-template-columns: 1fr 1fr;     gap: var(--sp4); }
.chart-grid-3       { display: grid; grid-template-columns: 2fr 1fr;     gap: var(--sp4); }
.chart-grid-equal-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp4); }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp5);
}
.chart-card.full-width { grid-column: 1 / -1; }

.chart-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp4); gap: var(--sp3); }
.chart-card-title  { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.chart-card-sub    { font-size: var(--text-xs); color: var(--text-m); margin-top: 2px; }
.chart-wrap        { position: relative; }

.legend-row   { display: flex; flex-wrap: wrap; gap: var(--sp4); margin-top: var(--sp3); justify-content: center; }
.legend-item  { display: flex; align-items: center; gap: var(--sp2); font-size: var(--text-xs); color: var(--text-m); }
.legend-swatch { width: 10px; height: 10px; border-radius: var(--tile-radius); flex-shrink: 0; }


/* ── PILLS & TAGS ──────────────────────────────────────────── */

.pill-sm {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
.pill-g { background: var(--green-s); color: var(--green); }
.pill-a { background: var(--amber-s); color: var(--amber); }
.pill-r { background: var(--red-s);   color: var(--red); }
.pill-n { background: var(--surface3); color: var(--text-f); }

.status-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap; display: inline-block; }
.sp-red   { background: var(--red-s);   color: var(--red); }
.sp-amber { background: var(--amber-s); color: var(--amber); }
.sp-green { background: var(--green-s); color: var(--green); }

.dtag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 5px; border-radius: var(--tile-radius); background: var(--primary-s); color: var(--primary); white-space: nowrap; }
.dtag-snap { font-style: italic; }
.dtag-proc { opacity: .85; }

/* ── MSC OBLIGATION TYPE BADGES ────────────────────────────── */
/* badge-msc   — base shell (font, size, shape)                 */
/* badge-must  — MUST obligation: red tint                      */
/* badge-should — SHOULD obligation: teal tint                  */
/* badge-could  — COULD obligation: neutral surface             */
.badge-msc {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--tile-radius);
  white-space: nowrap;
  line-height: 1.4;
}
.badge-must   { background: var(--red-s);    color: var(--red); }
.badge-should { background: var(--teal-s);   color: var(--teal); }
.badge-could  { background: var(--surface3); color: var(--text-m); }

/* GAR (Green / Amber / Red) bar - reusable stacked segment bar */
.gar-bar { display: flex; height: 8px; border-radius: var(--r-sm); overflow: hidden; width: 80px; gap: 1px; }


/* ── TABLES ────────────────────────────────────────────────── */

.data-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  overflow: hidden;
  border-collapse: collapse;
}
.data-table th {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-f);
  padding: var(--sp3) var(--sp4);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  background: var(--surface2);
  white-space: nowrap;
}
.data-table th:not(:first-child) { text-align: center; }
.data-table td {
  padding: var(--sp3) var(--sp4);
  border-bottom: 1px solid var(--divider);
  font-size: var(--text-xs);
  vertical-align: middle;
  color: var(--text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface2); }


/* ── ABOUT PANEL ───────────────────────────────────────────── */

.about-panel {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp6);
}
.about-panel h2 { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--sp3); margin-top: var(--sp4); }
.about-panel h2:first-child { margin-top: 0; }
.about-panel p { font-size: var(--text-sm); color: var(--text-m); margin-bottom: var(--sp4); line-height: 1.75; }
.about-panel code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--surface3);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--primary);
}

.def-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp2) var(--sp4);
  font-size: var(--text-xs);
  margin-bottom: var(--sp4);
}
.def-key { font-weight: 700; color: var(--text); font-family: var(--font-mono); padding: var(--sp1) 0; white-space: nowrap; }
.def-val { color: var(--text-m); padding: var(--sp1) 0; line-height: 1.5; }

.rating-def { display: flex; flex-direction: column; gap: var(--sp3); margin-bottom: var(--sp4); }
.rating-row { display: flex; align-items: flex-start; gap: var(--sp3); }
.rating-text { font-size: var(--text-xs); color: var(--text-m); line-height: 1.5; }


/* ── PANEL COMPONENT ───────────────────────────────────────── */
/*
 *  The shared base component for every surfaced box in the platform.
 *  Any bordered, rounded card should carry .panel as a base class.
 *
 *  The accent is controlled by --panel-accent (CSS custom property).
 *
 *  .panel--stripe  Top handle, 5px, inset from left/right. Heavier
 *                  visual weight - for feature and stat cards.
 *
 *  .panel--bar     Left handle, 3px, inset from top/bottom (meta-strip
 *                  style). Lighter visual weight - for informational and
 *                  list cards.
 *
 *  Colour modifiers (or set --panel-accent inline on the element):
 *  .panel--primary  .panel--amber  .panel--green  .panel--red  .panel--soft
 *
 *  Named components (insight-banner, chart-card, duty-card etc.) use
 *  .panel for the base box and define their own accent in their own CSS.
 *  The modifier classes are available for generic or future use.
 */

.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
}

/* Top handle - inset from left/right, heavier (5px) than left handle (3px) */
.panel--stripe {
  padding-top: calc(var(--sp4) + 4px);
}
.panel--stripe::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp6); right: var(--sp6);
  height: 4px; border-radius: var(--tile-radius);
  background: var(--panel-accent, var(--primary));
}

/* Left handle - inset from top/bottom, meta-strip style */
.panel--bar {
  padding-left: calc(var(--sp5) + 8px);
}
.panel--bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--sp3);
  bottom: var(--sp3);
  width: 3px;
  border-radius: var(--tile-radius);
  background: var(--panel-accent, var(--primary));
}

/* Colour modifiers */
.panel--primary { --panel-accent: var(--primary); }
.panel--amber   { --panel-accent: var(--amber); }
.panel--green   { --panel-accent: var(--green); }
.panel--red     { --panel-accent: var(--red); }
.panel--soft    { --panel-accent: var(--brand-soft); }

/*
 * ── PLATFORM STAT TILES ─────────────────────────────────────────
 *
 *  Shared tile system for dynamic stat strips across the platform
 *  (Service Impact map, Activity Overview, etc.).
 *  Use: <div class="svc-stat-strip"> containing
 *       <div class="svc-stat-card panel panel--bar" style="--panel-accent:...">
 *
 *  Accent colour signals the meaning of the stat (red = risk/MUST,
 *  amber = cross-cutting, green = positive/coverage, primary = neutral).
 */

.svc-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp4);
  margin-top: var(--sp5);
}

.svc-stat-card {
  padding: var(--sp4) var(--sp5);
  display: flex;
  flex-direction: column;
  gap: var(--sp1);
}

.svc-stat-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-f);
}

.svc-stat-value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.svc-stat-sub {
  font-size: var(--text-xs);
  color: var(--text-m);
  line-height: 1.5;
}


/* ── MOBILE DRAWER ─────────────────────────────────────────── */

.burger {
  display: none;
  align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  background: var(--primary); color: #fff;
  border: none;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  transition: opacity var(--trans);
  flex-shrink: 0; cursor: pointer;
}
.burger:hover { opacity: .85; }

.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 150;
  backdrop-filter: blur(2px);
}
.drawer-overlay.open { display: block; }

.drawer {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--divider);
  z-index: 160;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
  padding: var(--sp5) 0;
}
.drawer.open { transform: translateX(0); }

.drawer-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-m);
  border: 1px solid var(--border);
  background: var(--surface3);
}
.drawer-close:hover { background: var(--surface4); color: var(--text); }


/* ── TOOLTIPS ──────────────────────────────────────────────── */

.has-tooltip { position: relative; cursor: default; }
.has-tooltip .tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px); left: 0;
  background: var(--surface4); color: var(--text);
  font-size: 11px; font-weight: 400;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  width: 220px;
  z-index: 100;
  line-height: 1.4;
  box-shadow: var(--sh-md);
  pointer-events: none;
}
.has-tooltip:hover .tooltip { display: block; }


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

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .burger { display: flex; }
  .chart-grid-2,
  .chart-grid-3,
  .chart-grid-equal-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .page-section { max-width: 100%; }
}


/* ── NET ZERO (shared) ────────────────────────────────────── */
/* Tile rendering uses existing .sc-*, .msc-tile, and .kpi-* classes.
   Only supplementary styles needed here. */

.nz-no-data .nz-tile-sub {
  font-size: var(--text-xs);
  color: var(--text-f);
}


/* ══════════════════════════════════════════════════════════════
   CIVIC BENTO SWISS - Shared unification vocabulary (April 2026)
   ══════════════════════════════════════════════════════════════
   Components introduced to cascade the lobby / dashboard grammar
   across every tool page. Existing .panel / .kpi-card / .chart-card
   remain valid - these are additive, not a replacement.

   Vocabulary:
     .cbs-header     Eyebrow + title + lead + rule page opener
     .cbs-strip      Full-width cell context / status bar
     .cbs-card       Bento chassis (4px radius, offset shadow, lift)
     .cbs-card.cbs-handled  Adds inset vertical handle on left edge
     .cbs-section-label  ALL CAPS label with trailing horizontal rule
     .cbs-door       Prefix rule + DOOR NN + multi-line heavy title
     .cbs-zone-*     Zone colour accents (teal / charcoal / red / amber)

   Defaults to lobby teal; zone modifiers override via --cbs-accent.
   ══════════════════════════════════════════════════════════════ */

:root {
  --cbs-radius: var(--tile-radius);
  --cbs-shadow: var(--shadow-tile);
  --cbs-shadow-hover: var(--shadow-tile-hover);
  --cbs-accent: var(--primary);
}

/* ── Page header (eyebrow + title + lead + rule) ───────────── */
.cbs-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  padding-bottom: var(--sp5);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--sp2);
}
.cbs-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp3);
}
.cbs-eyebrow > span + span::before {
  content: "·";
  margin-right: var(--sp3);
  color: var(--text-f);
}
.cbs-title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--text);
  max-width: 30ch;
}
.cbs-title .cbs-accent {
  color: var(--cbs-accent);
}
.cbs-lead {
  font-size: var(--text-sm);
  color: var(--text-m);
  max-width: 65ch;
  line-height: 1.65;
}

/* ── Context / status strip (full-width cell row) ──────────── */
.cbs-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  background: var(--divider);
  border: 1px solid var(--divider);
  border-radius: var(--cbs-radius);
  overflow: hidden;
}
.cbs-strip.cbs-strip--loud {
  background: var(--cbs-accent);
  border-color: var(--cbs-accent);
}
.cbs-strip-cell {
  background: var(--surface);
  padding: var(--sp4) var(--sp5);
  display: flex;
  flex-direction: column;
  gap: var(--sp1);
  min-width: 0;
}
.cbs-strip--loud .cbs-strip-cell {
  background: var(--cbs-accent);
  color: #fff;
}
.cbs-strip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbs-strip--loud .cbs-strip-label {
  color: rgba(255, 255, 255, 0.75);
}
.cbs-strip-value {
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
  line-height: 1.2;
}
.cbs-strip--loud .cbs-strip-value {
  color: #fff;
}

/* ── Bento card chassis ────────────────────────────────────── */
.cbs-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--cbs-radius);
  padding: var(--sp5);
  box-shadow: var(--cbs-shadow);
  transition: transform var(--trans), box-shadow var(--trans);
}
.cbs-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--cbs-shadow-hover);
}
.cbs-card.cbs-card--static:hover {
  transform: none;
  box-shadow: var(--cbs-shadow);
}

/* Handle detail - inset vertical bar, card corners curve past it */
.cbs-card.cbs-handled {
  padding-left: calc(var(--sp5) + 10px);
}
.cbs-card.cbs-handled::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--cbs-accent);
  border-radius: 0;
}

/* Dotted top border for in-development / lower fidelity cards */
.cbs-card.cbs-card--dev {
  border-top: 3px dashed var(--border);
  opacity: 0.82;
}

/* ── Section label (ALL CAPS + trailing rule) ─────────────── */
.cbs-section-label {
  display: flex;
  align-items: center;
  gap: var(--sp4);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-m);
  margin-bottom: var(--sp3);
}
.cbs-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* ── Door tile (prefix rule + DOOR NN + heavy stacked title) */
.cbs-door {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cbs-door-num {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cbs-accent);
  margin-bottom: var(--sp4);
}
.cbs-door-num::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--cbs-accent);
}
.cbs-door-title {
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* ── Zone colour modifiers ─────────────────────────────────── */
.cbs-zone-teal     { --cbs-accent: var(--brand-teal); }
.cbs-zone-charcoal { --cbs-accent: var(--brand-charcoal); }
.cbs-zone-red      { --cbs-accent: var(--brand-red); }
.cbs-zone-amber    { --cbs-accent: var(--brand-amber); }


/* ═══════════════════════════════════════════════════════════════
   DEMO MODE - View-only lock for demonstration
   Activated by nav.js when ?admin=true is NOT in the URL.
   Body gets .demo-mode class; write controls are shown but
   greyed out with pointer-events disabled.
   ═══════════════════════════════════════════════════════════════ */

/* Badge injected by nav.js into the dash-header */
.demo-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-s);
  border: 1px solid var(--amber);
  border-radius: var(--tile-radius);
  padding: 2px 10px;
  margin-left: var(--sp3);
  vertical-align: middle;
}

/* Shared demo-mode lock: disable all write affordances */
.demo-mode .demo-lock {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
  user-select: none;
  position: relative;
}

/* Tooltip on hover for locked containers (via wrapper) */
.demo-mode .demo-lock-wrap {
  position: relative;
  cursor: not-allowed;
}
.demo-mode .demo-lock-wrap::after {
  content: 'View only';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  background: var(--surface2);
  border: 1px solid var(--amber);
  border-radius: var(--tile-radius);
  padding: 2px 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.demo-mode .demo-lock-wrap:hover::after {
  opacity: 1;
}

/* ── pbccd.html: upload zone and action buttons ──────────── */
.demo-mode #upload-zone {
  opacity: 0.35;
  pointer-events: none;
}
.demo-mode #btn-submit,
.demo-mode #btn-seed-spine {
  opacity: 0.35;
  pointer-events: none;
}

/* ── pbccd-dashboard.html: edit, approve, officer identity ─ */
.demo-mode .cell-action-btn {
  opacity: 0.35;
  pointer-events: none;
}
.demo-mode .officer-change {
  display: none;
}

/* ── compliance.html: assessment add/edit/delete + form ──── */
.demo-mode .ev-add-btn {
  opacity: 0.35;
  pointer-events: none;
}
.demo-mode .ev-action-btn {
  opacity: 0.35;
  pointer-events: none;
}
.demo-mode .ev-form-wrap {
  display: none !important;
}