/* Shared by every page of Canada's Expense Ledger (expenses.publicly.ca): colour and type tokens (light and dark), base
   elements, the skip link and the site navigation. Page-specific styles stay in each page. */
:root{
  --bg:#eef1f5; --surface:#ffffff; --ink:#132030; --muted:#5a6779; --line:#d6dce5; --tint:#e5eaf1;
  --accent:#0b6b60; --accent-ink:#ffffff; --accent-soft:#d8eeea;
  --sel:#1d4f80; --sel-ink:#ffffff; --sel-soft:#dde8f4;
  --warn:#9a5b00; --warn-soft:#fbefd9;
  --c1:#1d4f80; --c2:#6f7d1e; --c3:#2f8a6e; --c4:#c7881c; --c5:#6b4ea8; --c6:#3a9cc2; --c7:#8a5a3c; --c8:#a7b0bd;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:6px;
  /* content width and side padding of .wrap; the Publicly bar and footer line up with them */
  --page-max:1200px; --page-gutter:20px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e131a; --surface:#151c26; --ink:#e4e9f0; --muted:#93a0b2; --line:#263142; --tint:#1b2431;
  --accent:#4cc4ae; --accent-ink:#04201b; --accent-soft:#12332e;
  --sel:#86b6e6; --sel-ink:#0e131a; --sel-soft:#1b2c40;
  --warn:#e6ad4f; --warn-soft:#33270f;
  --c1:#6fa3d8; --c2:#b5c45a; --c3:#4fbf9a; --c4:#e3a83d; --c5:#a58be0; --c6:#5cc3e6; --c7:#c98f6a; --c8:#5d6878;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e131a; --surface:#151c26; --ink:#e4e9f0; --muted:#93a0b2; --line:#263142; --tint:#1b2431;
  --accent:#4cc4ae; --accent-ink:#04201b; --accent-soft:#12332e;
  --sel:#86b6e6; --sel-ink:#0e131a; --sel-soft:#1b2c40;
  --warn:#e6ad4f; --warn-soft:#33270f;
  --c1:#6fa3d8; --c2:#b5c45a; --c3:#4fbf9a; --c4:#e3a83d; --c5:#a58be0; --c6:#5cc3e6; --c7:#c98f6a; --c8:#5d6878;
  color-scheme:dark;
}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:0.9375rem/1.5 var(--f-body);margin:0}
::selection{background:var(--sel-soft);color:var(--ink)}
button,select,input,textarea{font:inherit;color:inherit}
input,textarea{caret-color:var(--sel)}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
img{max-width:100%}
[hidden]{display:none!important}
main{display:block}
main:focus{outline:none}
/* Links in text and tables: padding enlarges the tap area to 24px+ without moving the text.
   Links with their own class (buttons, chips) set their own size. */
main a:not([class]),footer a:not([class]){padding-block:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:8px}

/* Site navigation. Markup, identical on every page:
   <nav class="sitenav" aria-label="Site"><a class="brand" href="/">Canada's Expense Ledger</a>
   <div class="links"><a href="/">Overview</a>…<a href="/methodology/">Methodology</a><a href="/corrections/">Corrections</a></div></nav>
   The brand is the site name in the display font; the Publicly wordmark is in the network bar above it.
   Links are at least 28px tall so they are comfortable to tap. */
.sitenav{display:flex;flex-wrap:wrap;gap:0 18px;align-items:baseline;padding-top:8px;font:500 0.8125rem/1.6 var(--f-body)}
.sitenav .links{display:flex;gap:0 18px}
.sitenav a{display:inline-block;color:var(--muted);text-decoration:none;padding-block:4px;white-space:nowrap}
.sitenav a:hover{color:var(--ink);text-decoration:underline}
.sitenav a[aria-current]{color:var(--ink);font-weight:600}
.sitenav .brand{font:800 1.125rem/1.4 var(--f-display);font-stretch:85%;letter-spacing:-.01em;color:var(--ink);margin-right:auto}
.sitenav .brand:hover{color:var(--accent)}
@media (max-width:640px){
  .sitenav .brand{flex-basis:100%}
  .sitenav .links{overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;max-width:calc(100% + 32px)}
  .sitenav .links::-webkit-scrollbar{display:none}
}