/* mymalta.fyi site layer. Loaded after tokens.css and components.css on every page.
   1. Compatibility: the older page templates use their own token names; map them onto the design tokens.
   2. Data colours that are page-specific (org chart body types, pie slices, map fills), light and dark.
   3. Shared chrome: header menu on phones, footer, source glyph, page wrapper.
   Colours come only from tokens, per design/DESIGN.md. Chart palette steps validated with the dataviz
   validator (light: cat-4 deepened to #c9b100; dark: cat-1, 2, 4, 5, 7 stepped into the dark band). */

:root, [data-theme="light"] {
  /* compatibility names used by the templates */
  --sunk: var(--surface-2);
  --faint: var(--muted);
  --line: var(--rule-strong);
  --grid: var(--surface-2);
  --red: var(--brand);            /* ministry accent: brand ochre, red is reserved for the mark */
  --red-soft: var(--brand-soft);
  --focus: var(--sea);
  --hit: var(--stone);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* org chart body types (labelled categories) */
  --dept: #2f5d8a;   --dept-soft: #e3ebf3;
  --entity: #2f6b3a; --entity-soft: #e2efe3;
  --board: #8a5a16;  --board-soft: #f3e5c6;
  --council: #6a4c8c; --council-soft: #ece5f3;
  --gozo: #0f6470;   --gozo-soft: #d9eef0;

  /* budget pie: design categorical palette (cat-4 deepened for contrast on white) */
  --s1: #e69f00; --s2: #3aa6e6; --s3: #00a67a; --s4: #d4b800;
  --s5: #0072c6; --s6: #e25d00; --s7: #d46fa6;
  --other: var(--data-other); --other2: #a8a296;

  /* council map */
  /* party chip text (pl, pn) on its soft fill must reach 4.5:1: light pl 4.64, pn 4.93; dark pl 4.99, pn 4.76 */
  --pl: var(--data-labour); --pl-soft: #fdeeee;
  --pn: var(--data-pn);     --pn-soft: #dde8f7;
  --ind: var(--data-other); --ind-soft: var(--surface-2);
  --q1: var(--seq-1); --q2: var(--seq-2); --q3: var(--seq-3); --q4: var(--seq-4); --q5: var(--seq-5);
  --ocean: var(--surface-2); --land-edge: var(--surface); --nodata: var(--rule); --hl: var(--ink);
}
[data-theme="dark"] {
  --dept: #8fb3dc;   --dept-soft: #1c2733;
  --entity: #86cf93; --entity-soft: #17291b;
  --board: #e3b96a;  --board-soft: #3b2d12;
  --council: #c2a8e6; --council-soft: #2a2238;
  --gozo: #74c9d2;   --gozo-soft: #12343a;

  /* vivid for the pie (Drew, 25 Sept 2026): the design's own categorical colours; pass colour-blind separation and
     3:1 contrast on the dark surface, above the validator's lightness band by choice */
  --s1: #f0a800; --s2: #56b4e9; --s3: #00b386; --s4: #f0e442;
  --s5: #2e8fd9; --s6: #f06a1a; --s7: #de86b8;
  --other2: #5b5850;

  --pl-soft: #301719; --pn-soft: #172a42;
}

/* ---------- shared chrome ---------- */
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
.mm-header { position: relative; z-index: 20; flex: none; }
.mm-header .mm-iconbtn { display: none; }
@media (max-width: 720px) {
  .mm-header-in { height: 52px; gap: var(--space-3); }
  .mm-header .mm-nav { display: none; }
  .mm-header .mm-iconbtn { display: inline-flex; margin-left: auto; }
  .mm-header.open .mm-nav {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: var(--surface); border-bottom: 1px solid var(--rule); padding: var(--space-2) var(--space-4) var(--space-3);
  }
  .mm-header.open .mm-nav a { padding: 10px 8px; }
  .mm-footer-in { grid-template-columns: 1fr; }
}
.mm-logo .mm-mark { width: 28px; height: 28px; }
.mm-cross { width: 12px; height: 12px; vertical-align: -1px; }
.mm-srcline a, a.srclink { color: var(--sea); }
.mm-page { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- accessibility fixes (audit M1, M2, M10, minor 8) ---------- */
.mm-skip { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 100; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 600; }
.mm-skip:not(:focus) { width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id="main"]:focus { outline: none; }
.bar .search, .search input, label.search, .bar .search input { border-color: var(--rule-strong) !important; }
.mm-footer li + li { margin-top: 0; }
.mm-footer li a { display: inline-block; padding: 4px 0; }
.mm-dl-row:focus-visible, .mm-search-results a:focus-visible { box-shadow: inset 0 0 0 2px var(--sea); border-radius: 0; }
.mm-tile .s a { overflow-wrap: anywhere; }