/* Light-mode values are set to WCAG measurements, not to taste:
   --tag-fg on --tag-bg 6.24:1, --mid on --card 6.37:1 (both were below 4.5:1), --accent on
   --card 7.27:1, --line 1.68:1 for structural edges and --line-strong 3.29:1 for control
   boundaries, which is WCAG 1.4.11. Dark: --line 1.52:1 on --card (was 1.21:1, invisible),
   --tag-fg 6.61:1 on --tag-bg, placeholders use --muted at full opacity (5.83:1 on --card). */
:root{
  color-scheme:light dark;
  --bg:#fbfbfa; --fg:#1a1a18; --muted:#6b6b66; --line:#c9c8c0; --line-strong:#8f8e85;
  --card:#fff; --accent:#155e75; --ok:#1f6f4a; --mid:#755c10; --low:#7a4a4a;
  --tag-bg:#eceae5; --tag-fg:#55554f; --wip-bg:#faf1d8; --wip-line:#b8933a;
  --flag:#c8102e; --flag-mid:#d9d8d2;
  /* type scale: xs tags; sm meta, confidence, dt, count, footer, banner; md card text,
     controls, nav, back link; base body and dd; lg card title, entry summary, h2 */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-h1:2rem;
  --lh:1.6; --lh-card:1.55; --lh-title:1.3; --lh-h1:1.2;
  --r:8px; --r-tag:4px;
  --w:64rem; --pad:1.5rem;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16171a; --fg:#e8e8e4; --muted:#9a9a94; --line:#3a3d44; --line-strong:#666b76;
  --card:#1d1f23; --accent:#8fc4d6; --ok:#7fd0a6; --mid:#d9be76; --low:#e0a3a3;
  --tag-bg:#272a2f; --tag-fg:#b0b0aa; --wip-bg:#2a2418; --wip-line:#7a6528;
  --flag:#e04257; --flag-mid:#4a4d55;}
}
@media (max-width:34rem){:root{--fs-h1:1.625rem; --pad:1.25rem}}
*{box-sizing:border-box}
[hidden]{display:none!important}

/* Sticky footer: the page is a column and main takes the slack, so a short page (404,
   a filter with no results) does not leave the footer floating mid-screen. */
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--bg);
  color:var(--fg);font:400 var(--fs-base)/var(--lh) ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif}
/* The Canadian flag abstracted to its 1:2:1 band proportions, as a 3px rule across the top.
   No maple leaf: the pale/red/pale ratio is the recognisable part, and it stays out of the way. */
body::before{content:"";display:block;flex:none;height:3px;
  background:linear-gradient(to right,var(--flag) 0 25%,var(--flag-mid) 25% 75%,var(--flag) 75% 100%)}
header,main,footer{width:100%;max-width:var(--w);margin:0 auto}
main{flex:1 0 auto;padding:2rem var(--pad) 4rem}
main:focus{outline:none}

.skip{position:absolute;left:var(--pad);top:.5rem;z-index:10;padding:.45rem .8rem;
  background:var(--card);color:var(--accent);border:2px solid var(--accent);border-radius:var(--r);
  font-size:var(--fs-md);font-weight:600;text-decoration:none;transform:translateY(-250%)}
.skip:focus{transform:none}

.wip{background:var(--wip-bg);border-bottom:1px solid var(--wip-line)}
.wip p{max-width:var(--w);margin:0 auto;padding:.6rem var(--pad);font-size:var(--fs-sm);line-height:1.5;
  color:var(--fg)}

/* Header and footer rules run to the content edge, not into the side padding. */
header{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);
  background:linear-gradient(var(--line),var(--line)) center bottom/calc(100% - 2*var(--pad)) 1px no-repeat}
footer{padding:1.5rem var(--pad);color:var(--muted);font-size:var(--fs-sm);
  background:linear-gradient(var(--line),var(--line)) center top/calc(100% - 2*var(--pad)) 1px no-repeat}
footer p{margin:0}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:650;font-size:var(--fs-base);
  line-height:var(--lh-title);letter-spacing:-.005em;color:var(--fg);text-decoration:none}
.brand svg{width:1.375rem;height:1.375rem;flex:none}
.brand svg rect{fill:var(--accent)}
.brand svg .t{fill:var(--bg)}
.brand svg .f{fill:var(--flag)}
nav{display:flex;gap:1.1rem;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:var(--fs-md)}
nav a:hover,nav a.on{color:var(--accent)}

/* One link style: a thin underline at 40% of the text colour, full colour on hover. */
a{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:currentColor;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

h1{font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-h1);letter-spacing:-.022em;
  margin:0 0 1rem;text-wrap:balance}
h2{font-size:var(--fs-lg);font-weight:650;line-height:var(--lh-title);margin:2rem 0 .5rem;
  letter-spacing:-.01em}
h3{font-size:var(--fs-base);margin:1.2rem 0 .3rem}
.lede{color:var(--muted);max-width:44rem;margin:0 0 1.5rem}
.muted{color:var(--muted);font-size:var(--fs-md)}
.sub{margin:-.9rem 0 1.5rem;max-width:44rem}
.prose{max-width:44rem}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Filter bar: search on its own row, then type, focus, location and the scope toggle in one
   compact row. A grid, so the controls line up at every width instead of wrapping ragged. */
.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:.5rem;margin:0 0 .25rem}
.filters input[type=search],.filters select{width:100%;min-width:0;height:2.5rem;margin:0;
  padding:0 .75rem;border:1px solid var(--line-strong);border-radius:var(--r);
  background-color:var(--card);color:var(--fg);font:inherit;font-size:var(--fs-md)}
.filters input[type=search]{-webkit-appearance:none;appearance:none;grid-column:1/-1;height:3rem;
  padding:0 1rem;font-size:var(--fs-base)}
.filters select{-webkit-appearance:none;appearance:none;padding-right:2rem;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238f8e85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:.7rem auto;background-position:right .8rem center}
.filters select:not(.set){color:var(--muted)}
.filters ::placeholder{color:var(--muted);opacity:1}
/* scope: a two-segment toggle, radios underneath so arrow keys and screen readers work */
.seg{display:flex;min-width:0;margin:0;padding:3px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--card);height:2.5rem}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg label{display:flex;align-items:center;padding:0 .8rem;border-radius:5px;cursor:pointer;
  font-size:var(--fs-md);color:var(--muted);white-space:nowrap}
.seg label:hover{color:var(--fg)}
.seg input:checked+label{background:var(--tag-bg);color:var(--fg);font-weight:600}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:1px}
.check{grid-column:1/-1;display:flex;align-items:flex-start;gap:.5rem;font-size:var(--fs-md);
  line-height:1.45;color:var(--muted);cursor:pointer;padding-top:.25rem}
.check input{flex:none;width:1rem;height:1rem;margin:.15rem 0 0;accent-color:var(--accent)}
@media(max-width:52rem){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg{grid-column:2}.seg label{flex:1;justify-content:center}}
@media(max-width:34rem){#prov{grid-column:1/-1}.seg{grid-column:1/-1}
  .filters input[type=search]{font-size:var(--fs-md);padding:0 .75rem}}

button{font:inherit;font-size:var(--fs-sm);height:2rem;padding:0 .75rem;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--fg);
  cursor:pointer}
button:hover{border-color:var(--fg)}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;min-height:2rem;margin:.35rem 0 0}
#count{margin:0;color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
#empty{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.25rem;background:var(--card);
  margin:1rem 0}
#empty p{margin:.3rem 0}
#showadj{color:var(--accent);border-color:var(--accent);font-size:var(--fs-md);height:2.25rem}

/* Cards: the whole card is the link (the title's ::after covers it). Three rows: name, the
   one-line blurb, then type and place pinned to the bottom edge so a row of cards reads as a row. */
#list{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));
  margin-top:1.25rem}
.card{position:relative;display:flex;flex-direction:column;min-height:9.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.35rem 1.1rem;
  transition:border-color .15s,box-shadow .15s}
/* display:flex beats the hidden attribute's UA display:none; without this, filtering breaks */
.card[hidden]{display:none}
.card:hover{border-color:var(--line-strong);
  box-shadow:0 1px 2px rgb(0 0 0/.04),0 6px 16px -6px rgb(0 0 0/.08)}
.card h2{margin:0 0 .4rem;font-size:var(--fs-lg);font-weight:650;line-height:var(--lh-title);
  letter-spacing:-.012em;text-wrap:balance}
.card h2 a{color:var(--fg);text-decoration:none}
.card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card:hover h2 a{color:var(--accent)}
.card h2 a:focus-visible{outline:none}
.card:has(h2 a:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.card p{margin:0;font-size:var(--fs-md);line-height:var(--lh-card)}
.card .blurb{color:color-mix(in srgb,var(--fg) 82%,var(--card));text-wrap:pretty}
.card .meta{margin-top:auto;padding-top:.9rem;font-size:var(--fs-sm)}
.meta{color:var(--muted);font-size:var(--fs-sm)}
.meta a{color:inherit}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 0}
.tag{font-size:var(--fs-xs);line-height:1.5;padding:.12rem .45rem;border-radius:var(--r-tag);
  background:var(--tag-bg);color:var(--tag-fg);white-space:nowrap;text-decoration:none}
a.tag:hover{color:var(--accent);box-shadow:inset 0 0 0 1px var(--line-strong)}
/* Confidence is not a topic tag. No pill, different position, different axis. It sits above
   the card's link overlay so its tooltip still shows. */
.conf{position:relative;z-index:1;font-size:var(--fs-sm);white-space:nowrap;color:var(--muted)}
.meta .conf,dt .conf,dd .conf{font-size:inherit}
.conf-ok{color:var(--ok)}
.conf-plain{color:var(--muted)}
.conf-mid{color:var(--mid)}
.conf-low{color:var(--low)}
.note{margin-top:1rem}
.legend{margin:0 0 .5rem}

/* Entry page */
.entry{max-width:46rem}
.back{font-size:var(--fs-md);margin:0 0 1rem}
.lead{max-width:40rem}
.entry h1{margin-bottom:.35rem}
.entry .meta{margin:0 0 .5rem}
.site{margin:0 0 .9rem;font-size:var(--fs-base)}
.site a{font-weight:600;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.entry .tags{margin:0 0 1.4rem}
.summary{font-size:var(--fs-lg);line-height:var(--lh);margin:0 0 1.6rem;text-wrap:pretty}
.coi{border-left:3px solid var(--line-strong);padding:.1rem 0 .1rem .8rem;margin:1.1rem 0;
  font-size:var(--fs-md)}
dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.6rem 1.4rem;margin:.5rem 0;
  padding-top:1.2rem;border-top:1px solid var(--line)}
dt{color:var(--muted);font-size:var(--fs-sm);padding-top:.15rem}
dd{margin:0;font-size:var(--fs-base);min-width:0}
dd .muted{font-size:inherit}
dd .gloss{display:block;margin-top:.2rem;font-size:var(--fs-sm);line-height:1.5}
.people,.srcs{list-style:none;margin:0;padding:0}
.people li{margin:0 0 .5rem}
.people li:last-child{margin:0}
.people .role{display:block;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.srcs li{margin:0 0 .2rem}
.srcs a{overflow-wrap:anywhere}
.fix{margin-top:2rem;font-size:var(--fs-md)}
@media(min-width:60rem){
  /* the last row takes the facts column's overflow, so the correction line follows the
     summary instead of being pushed down by a long people list */
  .entry{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 18rem;
    grid-template-rows:auto auto 1fr;column-gap:3rem;align-items:start}
  .entry>.back{grid-column:1/-1}
  .lead{grid-column:1;grid-row:2}
  .facts{grid-column:2;grid-row:2/span 2;border-left:1px solid var(--line);padding-left:1.5rem}
  .entry>.fix{grid-column:1;grid-row:3;margin-top:.5rem}
  .facts dl{grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;border:0}
  .facts dt{margin-top:1.1rem;padding:0}
  .facts dt:first-child{margin-top:0}
  .facts dd{margin-top:.2rem}
}
@media(max-width:34rem){
  main{padding-top:1.25rem}
  .wip p{padding-top:.5rem;padding-bottom:.5rem}
  /* One header row on a phone: the brand already links home, so "Directory" goes. */
  header{flex-wrap:nowrap;gap:.75rem;padding-top:.75rem;padding-bottom:.75rem}
  .brand{font-size:var(--fs-md);gap:.5rem}
  .brand svg{width:1.25rem;height:1.25rem}
  nav{flex:none}
  nav a[href="/"]{display:none}
  dl{grid-template-columns:minmax(0,1fr);gap:0}
  dt{margin-top:1rem;padding:0}
  dt:first-child{margin-top:0}
  dd{margin-top:.15rem}
}

.claim,.warn,.checked{border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;margin:1.2rem 0;
  background:var(--card)}
.warn{border-left:3px solid var(--mid)}
.checked h3{margin-top:0}
.stale{columns:2;column-gap:2rem}
.stale li{margin-bottom:.3rem;break-inside:avoid}
@media(max-width:34rem){.stale{columns:1}}

.rv{border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;margin:.6rem 0;
  background:var(--card)}
.rv.done{opacity:.45}
.rvhead{display:flex;gap:.5rem;align-items:baseline;cursor:pointer;font-size:var(--fs-base)}
.rvn{color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.6rem}
.rvsite{margin:.3rem 0 .1rem;font-size:var(--fs-sm)}
.rvsum{margin:.3rem 0;font-size:var(--fs-md)}
.rvdl{grid-template-columns:max-content 1fr;gap:.1rem .9rem;font-size:var(--fs-sm);margin:.4rem 0 0}
#rvcopy,#rvclear{margin-left:.5rem}

@media(prefers-reduced-motion:reduce){.card,.cities a{transition:none}}

/* the brand wraps as "Canadian AI Safety / Ecosystem Map", not with an orphan "Map" beside
   the nav's own Map link */
.brand span{text-wrap:balance}
/* a control that is filtering the list says so, so a reader arriving from a map mark or a
   province link can see why the list is short (--accent on --card is 7.27:1) */
.filters .set{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}

/* Home hero: the dot map of Canada. Land dots are a muted texture; each city with listed
   entries is one accent mark, sized by build.py (sqrt of the count) as a % of the map width. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem 2rem;
  align-items:stretch;margin:0 0 2rem}
.hero-text{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;padding:.5rem 0 .25rem}
.hero h1{margin:0;font-size:clamp(1.75rem,3.4vw,2.5rem)}
.hero-foot{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;margin:0}
.cw{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .75rem;border:1px solid var(--line-strong);
  border-radius:999px;font-size:var(--fs-sm);color:var(--fg);text-decoration:none;background:var(--card)}
.cw b{color:var(--accent);font-variant-numeric:tabular-nums}
.cw:hover,.cw.on{border-color:var(--accent)}
.cw.on{box-shadow:inset 0 0 0 1px var(--accent)}
.hero .gap{color:var(--muted);font-size:var(--fs-sm);max-width:16rem}
.dotmap{position:relative;width:100%;max-width:32rem;justify-self:end;align-self:center;container-type:inline-size}
.dotmap svg{display:block;width:100%;height:100%;overflow:visible}
.dotmap path{fill:none;stroke:color-mix(in srgb,var(--muted) 50%,transparent);stroke-width:.5;stroke-linecap:round}
.cities{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.cities li{position:absolute;width:0;height:0}
.cities a{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:max(var(--d),min(1.75rem,var(--hit)));aspect-ratio:1;border-radius:50%;
  display:block;text-decoration:none}
/* the visible mark; the link around it is the (larger) hit area */
.cities a::before{content:"";position:absolute;left:50%;top:50%;width:var(--d);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent);
  transition:transform .15s}
.cities a:hover::before,.cities a:focus-visible::before{transform:translate(-50%,-50%) scale(1.25)}
.cities a.on::before{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.cities a:focus-visible{outline:none}
.cities a:focus-visible::before{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--fg)}
.tip{position:absolute;left:50%;bottom:calc(100% + .35rem);transform:translateX(-50%);
  padding:.2rem .5rem;border-radius:6px;background:var(--fg);color:var(--bg);font-size:var(--fs-xs);
  line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:2}
.tip b{font-variant-numeric:tabular-nums}
.cities a:hover .tip,.cities a:focus-visible .tip,.cities a.on .tip{opacity:1}
.cities li:hover,.cities li:focus-within{z-index:3}
@media(max-width:52rem){
  .hero{grid-template-columns:minmax(0,1fr);gap:1rem;margin-bottom:1.5rem}
  .hero-text{display:contents}
  .hero h1{order:0}
  .dotmap{order:1;max-width:none;justify-self:stretch}
  .hero-foot{order:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
  .hero .gap{max-width:none}
}