/* ============================================================
   GoA Visualization Theme
   Derived from the Government of Alberta design system tokens
   (design-system.zip). Brand face Acumin SemiCondensed is
   substituted by Archivo per the design system's font notes.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Archivo+Narrow:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* Alberta Blue scale */
  --ab-blue-900: #002060;
  --ab-blue-800: #002C4E;
  --ab-blue-700: #004C8C;
  --ab-blue-600: #0077CD;
  --ab-blue-500: #0096DE;
  --ab-blue-400: #00B6ED;
  --ab-blue-300: #5FC8F3;
  --ab-blue-200: #9AD7F9;
  --ab-blue-100: #CFEBFC;
  --ab-blue-50:  #EAF6FE;

  /* Neutrals */
  --grey-900: #1A1D21; --grey-800: #2E3338; --grey-700: #4A4F55;
  --grey-600: #6B7178; --grey-500: #8C9197; --grey-400: #B4B8BE;
  --grey-300: #D0D1DB; --grey-200: #E3E5EA; --grey-100: #F1F2F5;
  --grey-50: #F8F9FB; --white: #FFFFFF;

  /* Accents */
  --brick-red: #9E2B33; --plum: #730067; --forest: #3A6B35; --amber: #B26B00;

  /* Categorical palette, light surfaces — validated (six checks) */
  --cat-1: #0077CD; --cat-2: #B26B00; --cat-3: #A5299A;
  --cat-4: #2E8540; --cat-5: #0096DE; --cat-6: #C0392B;
  --cat-other: #8C9197;

  /* Categorical palette, dark surfaces — validated vs #0F2438 */
  --catd-1: #3D9BE0; --catd-2: #C68118; --catd-3: #C355B8;
  --catd-4: #3FA35C; --catd-5: #1E9BC9; --catd-6: #D65E68;

  /* Status (reserved): good / warning / serious / critical */
  --status-good: #3A6B35; --status-warning: #B26B00;
  --status-serious: #9E2B33; --status-critical: #5C1219;

  /* Semantic */
  --text-strong: var(--ab-blue-800);
  --text-body: var(--grey-800);
  --text-muted: var(--grey-600);
  --surface-page: var(--white);
  --surface-subtle: var(--grey-50);
  --surface-wash: var(--ab-blue-50);
  --surface-dark: #0F2438;
  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);

  --font-sans: "Archivo", "Acumin Pro SemiCondensed", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-condensed: "Archivo Narrow", "Archivo", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius: 6px;
  --shadow-card: 0 1px 3px rgba(0, 32, 96, .08), 0 4px 14px rgba(0, 32, 96, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-subtle);
  font-size: 16px;
  line-height: 1.55;
}

/* ---- Masthead ------------------------------------------------ */
.goa-masthead {
  background: var(--ab-blue-800);
  color: var(--white);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 4px solid var(--ab-blue-400);
}
.goa-masthead img.sig { height: 34px; }
.goa-masthead .mast-title { font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.goa-masthead .mast-sub { font-size: 13px; opacity: .82; margin-left: auto; text-align: right; }
.goa-masthead a { color: #9AD7F9; text-decoration: none; }
.goa-masthead a:hover { text-decoration: underline; }
.lang-switch { display: flex; gap: 4px; margin-left: 14px; }
.lang-switch button {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: transparent; color: #9AD7F9; border: 1px solid #2A5B86;
  border-radius: 4px; padding: 3px 8px; cursor: pointer;
}
.lang-switch button:hover { background: #123B5E; }
.lang-switch button.on { background: var(--ab-blue-400); color: var(--ab-blue-900); border-color: var(--ab-blue-400); cursor: default; }

/* ---- Page hero ------------------------------------------------ */
.viz-hero { background: var(--surface-wash); padding: 26px 28px 20px; border-bottom: 1px solid var(--border-subtle); }
.viz-hero h1 { margin: 0 0 6px; color: var(--text-strong); font-size: 30px; line-height: 1.15; font-weight: 700; }
.viz-hero p.lead { margin: 0; max-width: 74ch; color: var(--grey-700); font-size: 16px; }

/* ---- Layout -------------------------------------------------- */
.viz-wrap { padding: 22px 28px 60px; max-width: 1560px; margin: 0 auto; }
.viz-card {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.viz-card h2 { margin: 0 0 4px; font-size: 19px; color: var(--text-strong); font-weight: 600; }
.viz-card .card-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }

/* ---- KPI tiles ------------------------------------------------ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface-page); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow-card);
  border-top: 3px solid var(--ab-blue-600);
}
.kpi .kpi-value { font-size: 30px; font-weight: 700; color: var(--text-strong); line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi .kpi-label { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

/* ---- Legend --------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-body); align-items: center; }
.legend .chip { display: inline-flex; align-items: center; gap: 7px; }
.legend .swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }

/* ---- Tooltip --------------------------------------------------- */
.viz-tip {
  position: fixed; pointer-events: none; z-index: 50;
  background: var(--ab-blue-800); color: var(--white);
  border-radius: 6px; padding: 9px 12px; font-size: 13px; line-height: 1.45;
  max-width: 320px; box-shadow: 0 6px 22px rgba(0, 22, 55, .35);
  opacity: 0; transition: opacity .12s;
}
.viz-tip.on { opacity: 1; }
.viz-tip .tip-title { font-weight: 600; margin-bottom: 3px; }
.viz-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; }
.viz-tip .tip-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.viz-tip .muted { opacity: .75; }

/* ---- Controls -------------------------------------------------- */
.viz-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; }
.viz-controls label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.viz-controls select, .viz-controls input[type="search"], .viz-controls input[type="text"] {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 6px 10px; background: var(--white);
}
.viz-controls select:focus, .viz-controls input:focus { outline: 2px solid var(--ab-blue-400); outline-offset: 1px; }
.btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--white); background: var(--ab-blue-600); border: none;
  border-radius: 4px; padding: 8px 16px; cursor: pointer;
}
.btn:hover { background: var(--ab-blue-700); }
.btn.ghost { background: transparent; color: var(--ab-blue-700); border: 1px solid var(--ab-blue-600); }
.btn.ghost:hover { background: var(--ab-blue-50); }

/* ---- Pills / crumbs ------------------------------------------- */
.crumb { font-size: 13.5px; color: var(--text-muted); margin-bottom: 10px; }
.crumb a { color: var(--ab-blue-700); cursor: pointer; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.pill {
  display: inline-block; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 2px 10px; line-height: 1.5;
}
.pill.risk-low { background: #E7F0E6; color: var(--status-good); }
.pill.risk-medium { background: #FAF0DD; color: var(--status-warning); }
.pill.risk-high { background: #F6E7E8; color: var(--status-serious); }
.pill.risk-critical { background: var(--status-critical); color: var(--white); }

/* ---- Footer ----------------------------------------------------- */
.viz-footer {
  padding: 18px 28px 30px; font-size: 12.5px; color: var(--text-muted);
  border-top: 1px solid var(--border-subtle); background: var(--surface-page);
}
.viz-footer .prov { font-family: var(--font-mono); font-size: 11.5px; }

/* ---- Dark surface pages ----------------------------------------- */
body.dark-page { background: var(--surface-dark); color: #D9E4EE; }
body.dark-page .viz-hero { background: #12293F; border-bottom-color: #1D3A57; }
body.dark-page .viz-hero h1 { color: #EAF3FB; }
body.dark-page .viz-hero p.lead { color: #A8BCCD; }
body.dark-page .viz-card { background: #132B44; border-color: #1D3A57; }
body.dark-page .viz-card h2 { color: #EAF3FB; }
body.dark-page .viz-card .card-sub { color: #8FA6BA; }
body.dark-page .legend { color: #C9D8E4; }
body.dark-page .viz-footer { background: #0C1E30; border-top-color: #1D3A57; color: #8FA6BA; }
body.dark-page .viz-controls label { color: #A8BCCD; }
body.dark-page .viz-controls select, body.dark-page .viz-controls input {
  background: #0F2438; color: #D9E4EE; border-color: #2A4A68;
}

@media (max-width: 760px) {
  .viz-hero h1 { font-size: 24px; }
  .viz-wrap { padding: 16px 14px 44px; }
  .goa-masthead { padding: 12px 14px; flex-wrap: wrap; }
  .goa-masthead .mast-sub { margin-left: 0; text-align: left; }
}