/* =========================================================================
   SKILLS RADAR — SHARED STYLES
   Every page uses this file. Edit here and all pages change.
   ========================================================================= */

:root{
  --ink:#0D1B1E;
  --ink-2:#16302F;
  --ink-3:#2A4B45;

  --paper:#FAF9F6;
  --surface:#FFFFFF;
  --line:#E4E0D6;
  --line-strong:#CBC5B6;

  --text:#152023;
  --text-2:#57676A;
  --text-3:#8A9698;

  --high:#B3261E;
  --high-bg:#FBEAE8;
  --med:#A96A06;
  --med-bg:#FBF0DC;
  --low:#10796A;
  --low-bg:#E4F1EE;

  --display:'Bricolage Grotesque', Georgia, serif;
  --sans:'Instrument Sans', system-ui, sans-serif;

  --topbar:62px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.wrap.narrow{ max-width:980px; }

/* ================= Top bar (always visible) ================= */

.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--ink); color:#EDEBE4;
  border-bottom:1px solid var(--ink-3);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; min-height:var(--topbar);
}

/* ---------- Wordmark with rules ---------- */

.mark{ display:flex; align-items:center; gap:12px; }
.mark .rule{ width:26px; height:1px; background:#4E7169; flex:none; }
.mark .rule.two{ position:relative; }
.mark .rule.two::before,
.mark .rule.two::after{
  content:''; position:absolute; left:0; width:100%; height:1px; background:#4E7169;
}
.mark .rule.two::before{ top:-5px; }
.mark .rule.two::after{ top:5px; }

.wordmark{
  font-family:var(--display);
  font-weight:600; letter-spacing:-0.038em; line-height:1;
  color:#FFFFFF; margin:0; font-size:24px; white-space:nowrap;
}
.wordmark a{ color:inherit; text-decoration:none; }
.wordmark .dot{ color:#6ED0B6; }

.nav{ display:flex; gap:2px; flex-wrap:wrap; }
.nav a{
  font-size:14px; font-weight:500; color:#9DB0AD;
  text-decoration:none; padding:10px 13px;
  border-bottom:2px solid transparent;
}
.nav a:hover{ color:#FFFFFF; }
.nav a.on{ color:#FFFFFF; border-bottom-color:#6ED0B6; }

/* ================= Masthead (scrolls away) ================= */

.masthead{ background:var(--ink); color:#EDEBE4; padding:30px 0 0; }

.bigmark{ display:flex; align-items:center; gap:18px; margin-bottom:4px; }
.bigmark h1{
  font-family:var(--display); font-size:44px; font-weight:600;
  letter-spacing:-0.04em; line-height:1; color:#fff; margin:0; white-space:nowrap;
}
.bigmark .stack{ flex:1; display:flex; flex-direction:column; gap:5px; min-width:30px; }
.bigmark .stack i{ height:1px; background:#3E635C; display:block; }
.bigmark .stack i:nth-child(1){ background:#6ED0B6; }
.bigmark .stack i:nth-child(3){ background:#2C4B45; }

.hero{ max-width:62ch; margin:14px 0 0; color:#A9BCB8; font-size:16.5px; line-height:1.55; }
.stamp{ font-size:12.5px; color:#7D918E; line-height:1.7; margin-top:14px; }
.stamp strong{ color:#C6D3D0; font-weight:500; }

.readings{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:26px; border-top:1px solid var(--ink-3);
}
.reading{ padding:18px 22px 22px 0; border-right:1px solid var(--ink-3); }
.reading:last-child{ border-right:none; }
.reading:not(:first-child){ padding-left:22px; }
.reading .n{
  font-family:var(--display); font-size:32px; font-weight:500;
  line-height:1; letter-spacing:-0.02em; color:#FFFFFF;
}
.reading .l{ margin-top:8px; font-size:12.5px; line-height:1.4; color:#8FA4A1; }
.reading.warm .n{ color:#F2B858; }
.reading.cool .n{ color:#6ED0B6; }

/* ================= Page headers ================= */

.pagehead{ padding:32px 0 24px; }
.pagehead h1{
  font-family:var(--display); font-size:30px; font-weight:600;
  letter-spacing:-0.028em; margin:0 0 10px;
}
.pagehead p{ margin:0; color:var(--text-2); font-size:15.5px; max-width:66ch; }

/* ================= Controls ================= */

.controls{
  position:sticky; top:var(--topbar); z-index:40;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:13px 0 12px;
}
.controlgrid{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.tabs button{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  padding:7px 13px; cursor:pointer;
  border:1px solid transparent; background:transparent;
  color:var(--text-2); border-radius:2px;
}
.tabs button:hover{ background:#F0EEE7; color:var(--text); }
.tabs button.active{ background:var(--ink); color:#fff; }
.tabs button:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

.searchbox{ position:relative; flex:1; min-width:250px; }
.searchbox input{
  width:100%; font-family:var(--sans); font-size:14px;
  padding:9px 62px 9px 13px;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); border-radius:2px;
}
.searchbox input::placeholder{ color:var(--text-3); }
.searchbox input:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }
.searchbox .x{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer;
  color:var(--text-3); font-size:17px; line-height:1; padding:6px 8px;
}
.searchbox .x:hover{ color:var(--text); }

.radar{
  position:absolute; right:30px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.radar.on{ opacity:1; }
.radar .sweep{ transform-origin:10px 10px; animation:sweep 1.1s linear infinite; }
@keyframes sweep{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .radar .sweep{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ================= Kanban board ================= */

.board{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:20px; padding-bottom:26px;
}

.col{ display:flex; flex-direction:column; min-width:0; }

.colhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:11px 14px; border:1px solid var(--line); border-bottom:none;
  background:var(--surface);
}
.colhead h2{
  font-family:var(--display); font-size:14px; font-weight:600;
  margin:0; letter-spacing:-0.005em;
}
.colhead .ct{ font-size:12.5px; color:var(--text-3); }
.colhead::before{ content:''; position:absolute; }

.col.upcoming .colhead{ border-top:3px solid var(--med); }
.col.review .colhead{ border-top:3px solid var(--text-3); }
.col.recent .colhead{ border-top:3px solid var(--low); }

.colbody{
  border:1px solid var(--line); background:var(--paper);
  padding:10px; overflow-y:auto; overscroll-behavior:contain;
  max-height:calc(100vh - var(--topbar) - 148px);
  min-height:220px;
  scrollbar-width:thin;
}
.colbody::-webkit-scrollbar{ width:8px; }
.colbody::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
.colbody::-webkit-scrollbar-track{ background:transparent; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  padding:14px 15px; margin-bottom:9px;
}
.card:last-child{ margin-bottom:0; }
.card.high{ border-left-color:var(--high); }
.card.medium{ border-left-color:var(--med); }
.card.low{ border-left-color:var(--low); }

.card .cwhen{ font-size:11.5px; color:var(--text-3); margin-bottom:6px; }
.card h3{
  font-family:var(--display); font-size:15px; font-weight:500;
  line-height:1.3; letter-spacing:-0.01em; margin:0 0 7px;
}
.card p{ font-size:13.3px; line-height:1.55; color:var(--text-2); margin:0 0 10px; }
.card .std{ font-size:12px; color:var(--text-2); margin:0 0 8px; }
.card .std b{ font-weight:500; color:var(--text); }

.meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }

.pill{ font-size:11px; padding:2.5px 7px; }
.pill.route{ background:var(--paper); border:1px solid var(--line); color:var(--text-2); }
.pill.updated{ background:var(--low-bg); color:var(--low); }
.pill.upcoming{ background:var(--med-bg); color:var(--med); }
.pill.in-review{ background:#EEECE5; color:var(--text-2); }
.pill.flag{ background:var(--high-bg); color:var(--high); font-weight:500; }

.links{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.links a{ font-size:12.5px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px; }
.links a:hover{ border-bottom-color:var(--text); }
.links a.read{ color:var(--ink-3); font-weight:500; border-bottom-color:var(--ink-3); }

.colempty{ padding:26px 14px; font-size:13px; color:var(--text-3); text-align:center; }

/* ================= Route context ================= */

.routecard{
  margin:18px 0 0; padding:16px 20px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3);
}
.routecard h2{ font-family:var(--display); font-size:16.5px; font-weight:600; margin:0 0 5px; letter-spacing:-0.01em; }
.routecard p{ margin:0; font-size:13.5px; color:var(--text-2); line-height:1.6; }
.routecard .chips{ margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.routecard .chip{ font-size:12px; padding:3px 9px; border:1px solid var(--line); color:var(--text-2); background:var(--paper); }

/* ================= Key ================= */

.key{ display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; color:var(--text-2); padding:14px 0 0; }
.key span{ display:flex; align-items:center; gap:8px; }
.key i{ width:14px; height:3px; display:inline-block; }
.key i.h{ background:var(--high); }
.key i.m{ background:var(--med); }
.key i.l{ background:var(--low); }

/* ================= Article list ================= */

.artlist{ border-top:1px solid var(--line); margin-top:6px; }

.artrow{
  display:grid; grid-template-columns:56px 1fr auto; gap:20px; align-items:center;
  padding:18px 6px; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; cursor:pointer;
}
.artrow:hover{ background:var(--surface); }

.sym{ width:44px; height:44px; }
.sym line, .sym path, .sym rect, .sym circle, .sym polyline{
  stroke:var(--ink-3); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.sym .fade{ stroke:var(--line-strong); }
.sym .hg{ stroke:var(--low); }
.sym .slash{ stroke:var(--high); stroke-width:2.4; }
.sym .tick{ stroke:var(--low); stroke-width:2.6; }
.artrow.high .sym .hg{ stroke:var(--high); }
.artrow.medium .sym .hg{ stroke:var(--med); }

.artrow h3{
  font-family:var(--display); font-size:17.5px; font-weight:500;
  letter-spacing:-0.015em; line-height:1.3; margin:0 0 4px;
}
.artrow p{ font-size:14px; color:var(--text-2); margin:0 0 8px; line-height:1.5; max-width:70ch; }

.tagset{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tag{
  font-size:11px; padding:2.5px 8px; letter-spacing:0.005em;
  border:1px solid var(--line); color:var(--text-2); background:var(--paper);
}
.tag.act{ background:var(--high-bg); color:var(--high); border-color:transparent; font-weight:500; }
.tag.plan{ background:var(--med-bg); color:var(--med); border-color:transparent; }
.tag.info{ background:var(--low-bg); color:var(--low); border-color:transparent; }
.tag.topic{ background:var(--ink); color:#fff; border-color:transparent; }

.artrow .go{ font-size:13px; color:var(--text-3); white-space:nowrap; }
.artrow:hover .go{ color:var(--text); }

/* ---------- Full article ---------- */

.article{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  padding:26px 28px; margin-bottom:16px;
}
.article.high{ border-left-color:var(--high); }
.article.medium{ border-left-color:var(--med); }
.article.low{ border-left-color:var(--low); }
.article h2{
  font-family:var(--display); font-size:24px; font-weight:600;
  letter-spacing:-0.022em; line-height:1.22; margin:9px 0 10px;
}
.article .standfirst{ font-size:16px; color:var(--text); line-height:1.5; margin:0 0 18px; max-width:62ch; font-weight:500; }
.article p{ font-size:15.5px; line-height:1.68; color:var(--text-2); max-width:68ch; margin:0 0 15px; }
.article .sources{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.article .sources h4{ font-family:var(--display); font-size:12.5px; font-weight:600; margin:0 0 8px; color:var(--text-2); }
.article .sources a{ display:block; font-size:13.5px; color:var(--text); margin-bottom:5px; }

.back{
  display:inline-block; font-size:13.5px; color:var(--text-2);
  text-decoration:none; margin:22px 0 4px;
  border-bottom:1px solid var(--line-strong); padding-bottom:1px;
}
.back:hover{ color:var(--text); }

/* ---------- Further reading ---------- */

.readgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:16px; }
.readcard{
  background:var(--surface); border:1px solid var(--line);
  padding:16px 18px; text-decoration:none; color:inherit; display:block;
}
.readcard:hover{ border-color:var(--line-strong); }
.readcard h3{ font-family:var(--display); font-size:15.5px; font-weight:500; margin:7px 0 6px; letter-spacing:-0.01em; }
.readcard p{ font-size:13.3px; color:var(--text-2); line-height:1.55; margin:0; }
.src-official{ background:var(--low-bg); color:var(--low); }
.src-press{ background:var(--high-bg); color:var(--high); }
.src-sector{ background:var(--med-bg); color:var(--med); }
.src-provider{ background:#EEECE5; color:var(--text-2); }

/* ================= Standards table ================= */

.routeblock{ margin-top:34px; }
.routeblock > h2{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-0.018em; margin:0 0 3px; }
.routeblock .sub{ font-size:13px; color:var(--text-3); margin:0 0 14px; }

table.std{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); font-size:13.5px; }
table.std th{
  text-align:left; font-weight:500; font-size:12px; color:var(--text-2);
  padding:10px 12px; border-bottom:1px solid var(--line-strong); background:var(--paper);
}
table.std td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-2); }
table.std tr:last-child td{ border-bottom:none; }
table.std td.nm{ color:var(--text); font-weight:500; }
table.std td.nm small{ display:block; font-weight:400; color:var(--text-3); font-size:11.5px; margin-top:2px; }
table.std td.num{ white-space:nowrap; }
table.std tr.changed{ background:#FFFDF7; }
table.std tr.defunded{ background:var(--high-bg); }
table.std tr.noepa{ background:#F7F6FB; }

.chg{ font-size:12.5px; }
.chg.none{ color:var(--text-3); }
.chg.yes{ color:var(--med); }
.chg.stop{ color:var(--high); font-weight:500; }
.chg a{ color:inherit; }
.noepa-flag{ font-size:11px; padding:2px 7px; background:#EAE7F5; color:#4B3E7A; }

/* ================= Calendar grid ================= */

.calbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:6px 0 18px;
}
.calbar h2{ font-family:var(--display); font-size:22px; font-weight:600; margin:0; letter-spacing:-0.02em; }
.calnav{ display:flex; gap:6px; }
.calnav button{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  padding:7px 14px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); cursor:pointer; border-radius:2px;
}
.calnav button:hover{ background:#F0EEE7; }

.calgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.mon{ background:var(--surface); border:1px solid var(--line); padding:12px 12px 14px; }
.mon.hasflags{ border-color:var(--line-strong); }
.mon h3{
  font-family:var(--display); font-size:13.5px; font-weight:600;
  margin:0 0 9px; letter-spacing:-0.005em;
}
.mon h3 span{ color:var(--text-3); font-weight:400; }

.dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px; }
.dow div{ font-size:9.5px; color:var(--text-3); text-align:center; }

.days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:var(--text-2); border-radius:2px; position:relative;
}
.day.pad{ color:transparent; }
.day.today{ outline:1.5px solid var(--ink); font-weight:500; color:var(--text); }

.day.flag{ cursor:pointer; font-weight:500; color:#fff; }
.day.flag.high{ background:var(--high); }
.day.flag.medium{ background:var(--med); }
.day.flag.low{ background:var(--low); }
.day.flag::after{
  content:'!'; position:absolute; top:-4px; right:-2px;
  font-size:10px; font-weight:600; color:var(--high);
  background:var(--surface); border-radius:50%;
  width:12px; height:12px; line-height:12px; text-align:center;
  border:1px solid currentColor;
}
.day.flag.medium::after{ color:var(--med); }
.day.flag.low::after{ color:var(--low); }
.day.flag:hover, .day.flag:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

/* ---------- Day tooltip ---------- */

.tip{
  position:fixed; z-index:80; width:330px; max-width:calc(100vw - 32px);
  background:var(--surface); border:1px solid var(--line-strong);
  border-left:3px solid var(--line-strong);
  padding:16px 18px; box-shadow:0 6px 24px rgba(13,27,30,0.16);
  display:none;
}
.tip.on{ display:block; }
.tip.high{ border-left-color:var(--high); }
.tip.medium{ border-left-color:var(--med); }
.tip.low{ border-left-color:var(--low); }
.tip .td{ font-size:12px; color:var(--text-3); margin-bottom:4px; }
.tip h4{ font-family:var(--display); font-size:16px; font-weight:600; margin:0 0 4px; letter-spacing:-0.012em; }
.tip .who{ font-size:12px; color:var(--text-3); margin-bottom:8px; }
.tip p{ font-size:13.5px; color:var(--text-2); line-height:1.55; margin:0 0 10px; }
.tip + .tip{ margin-top:8px; }
.tip .close{
  position:absolute; top:8px; right:9px; border:none; background:none;
  font-size:16px; color:var(--text-3); cursor:pointer; line-height:1; padding:4px;
}

/* ---------- Milestone list (below calendar) ---------- */

.mile{
  display:grid; grid-template-columns:84px 1fr; gap:20px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  padding:18px 20px 18px 17px; margin-bottom:8px;
}
.mile.high{ border-left-color:var(--high); }
.mile.medium{ border-left-color:var(--med); }
.mile.low{ border-left-color:var(--low); }
.mile .d{ font-family:var(--display); font-size:20px; font-weight:500; color:var(--text); line-height:1.1; }
.mile .d small{ display:block; font-family:var(--sans); font-size:12px; font-weight:400; color:var(--text-3); margin-top:3px; }
.mile h3{ font-family:var(--display); font-size:16.5px; font-weight:500; margin:0 0 7px; letter-spacing:-0.012em; }
.mile p{ font-size:14px; color:var(--text-2); line-height:1.6; margin:0 0 9px; max-width:68ch; }
.mile .who{ font-size:12px; color:var(--text-3); margin-bottom:8px; }
.past{ opacity:0.62; }

/* ================= Horizon ================= */

.horizon{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong); padding:20px 22px; margin-bottom:12px;
}
.horizon.high{ border-left-color:var(--high); }
.horizon.medium{ border-left-color:var(--med); }
.horizon .win{ font-size:12px; color:var(--text-3); margin-bottom:6px; }
.horizon h3{ font-family:var(--display); font-size:17px; font-weight:500; margin:0 0 9px; letter-spacing:-0.012em; }
.horizon p{ font-size:14.5px; color:var(--text-2); line-height:1.6; margin:0 0 11px; max-width:72ch; }
.horizon .watch{
  font-size:13.5px; color:var(--text); background:var(--paper);
  padding:10px 13px; border-left:2px solid var(--line-strong); max-width:72ch;
}
.horizon .watch b{ font-weight:500; }

.conf{ font-size:11.5px; padding:2.5px 8px; }
.conf.confirmed{ background:var(--low-bg); color:var(--low); }
.conf.signalled{ background:var(--med-bg); color:var(--med); }
.conf.speculative{ background:#EEECE5; color:var(--text-2); }

/* ================= Login gate ================= */

.gate{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.gate.off{ display:none; }
.gatebox{ width:100%; max-width:400px; text-align:center; }
.gatebox .bigmark{ justify-content:center; margin-bottom:22px; }
.gatebox h2{ font-family:var(--display); font-size:21px; font-weight:600; color:#fff; margin:0 0 8px; letter-spacing:-0.02em; }
.gatebox p{ font-size:14px; color:#9DB0AD; margin:0 0 22px; line-height:1.55; }
.gatebox input{
  width:100%; font-family:var(--sans); font-size:15px; text-align:center;
  padding:11px 14px; margin-bottom:9px; border-radius:2px;
  border:1px solid var(--ink-3); background:#12262A; color:#fff;
}
.gatebox input::placeholder{ color:#6C8480; }
.gatebox input:focus{ outline:none; border-color:#6ED0B6; }
.gatebox .btn{ width:100%; background:#6ED0B6; color:var(--ink); margin-top:6px; }
.gatebox .btn:hover{ background:#8ADCC6; }
.gatebox .err{ color:#F3A9A2; }
.gatebox .demo{ font-size:12.5px; color:#6C8480; margin-top:18px; }

/* ================= Forms ================= */

.form{
  background:var(--surface); border:1px solid var(--line);
  padding:32px 34px; max-width:600px; margin:24px auto 0;
}
.form .field{ margin-bottom:24px; text-align:center; }
.form .field > label{ display:block; font-size:14.5px; font-weight:500; margin-bottom:4px; }
.form .field .hint{ font-size:13px; color:var(--text-2); margin:0 auto 12px; max-width:46ch; }

.field input[type=email], .field input[type=text]{
  width:100%; font-family:var(--sans); font-size:15px; text-align:center;
  padding:11px 12px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); border-radius:2px;
}
.field input:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }

.opts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.opt{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-strong); padding:9px 14px;
  font-size:14px; cursor:pointer; background:var(--surface); text-align:left;
}
.opt:hover{ background:var(--paper); }
.opt input{ margin:0; }
.opt.sel{ border-color:var(--ink); background:var(--ink); color:#fff; }

.routegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:7px; }
.routegrid .opt{ padding:8px 12px; font-size:13.5px; }

.btn{
  font-family:var(--sans); font-size:15px; font-weight:500;
  background:var(--ink); color:#fff; border:none;
  padding:13px 30px; cursor:pointer; border-radius:2px;
}
.btn:hover{ background:var(--ink-2); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.btnrow{ text-align:center; }

.notice{
  margin:24px auto 0; max-width:600px;
  padding:14px 16px; font-size:13.5px; line-height:1.6;
  background:var(--med-bg); color:#6B4304; border-left:3px solid var(--med);
}
.ok{
  margin-top:18px; padding:14px 16px; font-size:14px; text-align:left;
  background:var(--low-bg); color:var(--low); border-left:3px solid var(--low);
}
.err{ font-size:13px; color:var(--high); margin-top:6px; }

/* ================= Misc ================= */

.tally{ font-size:13px; color:var(--text-3); margin:18px 0 0; }
.empty{
  padding:40px 22px; background:var(--surface); border:1px solid var(--line);
  color:var(--text-2); font-size:14.5px; margin-top:22px;
}
.empty b{ display:block; font-weight:500; color:var(--text); margin-bottom:5px; font-family:var(--display); }

footer{
  margin-top:52px; background:var(--ink); color:#8FA4A1;
  font-size:13px; padding:26px 0 34px; line-height:1.65;
}
footer p{ margin:0; max-width:76ch; }

/* ================= Responsive ================= */

@media (max-width:1080px){
  .calgrid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:900px){
  .board{ grid-template-columns:1fr; }
  .colbody{ max-height:420px; }
  .calgrid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:760px){
  .readings{ grid-template-columns:repeat(2,1fr); }
  .reading{ border-right:none; border-bottom:1px solid var(--ink-3); padding:15px 0; }
  .reading:not(:first-child){ padding-left:0; }
  .reading:nth-child(odd){ border-right:1px solid var(--ink-3); padding-right:18px; }
  .reading:nth-child(even){ padding-left:18px; }
  .bigmark h1{ font-size:32px; }
  .artrow{ grid-template-columns:40px 1fr; gap:14px; }
  .artrow .go{ display:none; }
  .sym{ width:34px; height:34px; }
  .mile{ grid-template-columns:1fr; gap:11px; }
  .calgrid{ grid-template-columns:1fr; }
  table.std{ font-size:12.5px; }
  table.std th, table.std td{ padding:9px 8px; }
  .hidecol{ display:none; }
  .topbar .wrap{ padding-top:8px; padding-bottom:4px; }
}

/* =========================================================================
   ADDITIONS — title treatment, kanban, article list, calendar grid, login
   ========================================================================= */

/* ---------- Title treatment ---------- */

.titleblock{ position:relative; padding-top:6px; }

.scanlines{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  mask-image:linear-gradient(90deg, transparent, #000 22%, #000 62%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 62%, transparent);
}
.scanlines i{
  position:absolute; left:0; right:0; height:1px; background:#20423E;
}

.wordmark{ position:relative; }

.markrule{ display:flex; align-items:center; gap:14px; margin:0 0 2px; }
.markrule .tick{ display:flex; gap:5px; align-items:flex-end; height:13px; }
.markrule .tick b{ display:block; width:2px; background:#3E635C; }
.markrule .tick b:nth-child(1){ height:5px; }
.markrule .tick b:nth-child(2){ height:9px; }
.markrule .tick b:nth-child(3){ height:13px; background:#6ED0B6; }
.markrule .line{ flex:1; height:1px; background:#24463F; }
.markrule .lbl{ font-size:11px; color:#5F7B77; letter-spacing:0.06em; white-space:nowrap; }

/* ---------- Sticky compact bar ---------- */

.stickybar{
  position:sticky; top:0; z-index:40; background:var(--ink);
  border-bottom:1px solid var(--ink-3);
}
.stickybar .inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:11px 0; }
.stickybar .mini{
  font-family:var(--display); font-size:20px; font-weight:600;
  letter-spacing:-0.03em; color:#fff; text-decoration:none; white-space:nowrap;
}
.stickybar .nav{ margin-top:0; }
.stickybar .nav a{ padding:7px 12px; font-size:13.5px; }

.collapsing{ transition:opacity .25s ease, max-height .3s ease; overflow:hidden; }
.collapsing.hid{ opacity:0; max-height:0 !important; }

/* ---------- Kanban ---------- */

.kanban{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:22px; align-items:start;
}

.col{ background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }

.colhead{
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--paper); position:sticky; top:0; z-index:2;
}
.colhead h2{
  font-family:var(--display); font-size:15px; font-weight:600;
  margin:0; letter-spacing:-0.01em; display:flex; align-items:center; gap:9px;
}
.colhead h2 em{
  font-style:normal; font-size:12px; font-weight:500;
  background:var(--paper); border:1px solid var(--line-strong);
  color:var(--text-2); padding:1px 7px;
}
.colhead p{ margin:5px 0 0; font-size:12px; color:var(--text-3); line-height:1.45; }

.colbody{ overflow-y:auto; max-height:60vh; padding:10px; scrollbar-width:thin; }
.colbody::-webkit-scrollbar{ width:8px; }
.colbody::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
.colbody::-webkit-scrollbar-track{ background:transparent; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong); padding:13px 14px; margin-bottom:9px;
}
.card.high{ border-left-color:var(--high); }
.card.medium{ border-left-color:var(--med); }
.card.low{ border-left-color:var(--low); }
.card .cdate{ font-size:11.5px; color:var(--text-3); margin-bottom:6px; }
.card h3{ font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:-0.01em; line-height:1.3; margin:0 0 7px; }
.card p{ font-size:13.5px; color:var(--text-2); line-height:1.55; margin:0 0 9px; }
.card .links a{ font-size:12.5px; }
.card .meta{ margin-bottom:7px; }
.card .pill{ font-size:11px; padding:2px 7px; }

.colempty{ padding:26px 14px; font-size:13.5px; color:var(--text-3); text-align:center; }

/* ---------- Article list ---------- */

.alist{ border-top:1px solid var(--line); margin-top:20px; }

.arow{
  display:grid; grid-template-columns:52px 1fr auto; gap:18px; align-items:start;
  padding:18px 4px; border-bottom:1px solid var(--line); cursor:pointer;
  background:none; border-left:none; border-right:none; border-top:none;
  width:100%; text-align:left; font-family:var(--sans);
}
.arow:hover{ background:#F3F1EA; }
.arow:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }

.arow .ico{ width:52px; height:52px; }
.arow h3{ font-family:var(--display); font-size:17.5px; font-weight:500; letter-spacing:-0.015em; margin:2px 0 5px; line-height:1.28; }
.arow p{ font-size:14px; color:var(--text-2); line-height:1.5; margin:0 0 8px; max-width:64ch; }
.arow .tagrow{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.arow .when{ font-size:12px; color:var(--text-3); white-space:nowrap; padding-top:5px; }

.abody{ padding:4px 4px 30px 70px; border-bottom:1px solid var(--line); }
.abody p{ font-size:15.5px; line-height:1.68; color:var(--text-2); max-width:66ch; margin:0 0 15px; }
.abody .standfirst{ font-size:16px; color:var(--text); font-weight:500; margin-bottom:18px; }

.tag{ font-size:11.5px; padding:2.5px 9px; border:1px solid transparent; }
.tag.t-funding{ background:#EAEFF6; color:#2A4A78; }
.tag.t-levy{ background:#EDEBF7; color:#443E86; }
.tag.t-tlevels{ background:#E9F2EC; color:#2C6142; }
.tag.t-standard{ background:#F6EFE6; color:#77522A; }
.tag.t-act{ background:var(--high-bg); color:var(--high); font-weight:500; }
.tag.t-plan{ background:var(--med-bg); color:var(--med); }
.tag.t-info{ background:#EEECE5; color:var(--text-2); }

/* ---------- Further reading ---------- */

.reading{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.readgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; margin-top:16px; }
.readcard{ background:var(--surface); border:1px solid var(--line); padding:15px 17px; }
.readcard a{ font-family:var(--display); font-size:15.5px; font-weight:500; color:var(--text); text-decoration:none; letter-spacing:-0.01em; }
.readcard a:hover{ text-decoration:underline; }
.readcard p{ font-size:13px; color:var(--text-2); line-height:1.55; margin:6px 0 0; }
.readcard .host{ font-size:11.5px; color:var(--text-3); margin-top:7px; }

/* ---------- Calendar grid ---------- */

.calgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }

.cmonth{ background:var(--surface); border:1px solid var(--line); padding:13px 14px 15px; }
.cmonth h3{
  font-family:var(--display); font-size:13.5px; font-weight:600;
  margin:0 0 9px; color:var(--text); letter-spacing:-0.005em;
}
.cdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cdow{ font-size:9.5px; color:var(--text-3); text-align:center; padding-bottom:3px; }
.cday{
  position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--text-2); border-radius:2px;
}
.cday.out{ color:transparent; }
.cday.today{ outline:1px solid var(--ink-3); font-weight:500; color:var(--text); }
.cday.has{ cursor:pointer; font-weight:500; color:#fff; }
.cday.has.high{ background:var(--high); }
.cday.has.medium{ background:var(--med); }
.cday.has.low{ background:var(--low); }
.cday.has:hover, .cday.has:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.cday .bang{
  position:absolute; top:-4px; right:-3px; font-size:10px; line-height:1;
  color:var(--high); font-weight:700;
}

.cpop{
  position:fixed; z-index:60; max-width:340px;
  background:var(--surface); border:1px solid var(--ink-3);
  box-shadow:0 6px 24px rgba(13,27,30,0.18);
  padding:15px 17px; font-size:13.5px; display:none;
}
.cpop.on{ display:block; }
.cpop .pd{ font-size:11.5px; color:var(--text-3); margin-bottom:5px; }
.cpop h4{ font-family:var(--display); font-size:15.5px; font-weight:600; margin:0 0 7px; letter-spacing:-0.01em; }
.cpop p{ margin:0 0 9px; color:var(--text-2); line-height:1.55; font-size:13px; }
.cpop .who{ font-size:11.5px; color:var(--text-3); margin-bottom:7px; }
.cpop a{ font-size:12.5px; color:var(--ink-3); font-weight:500; }

.callist{ margin-top:34px; }

/* ---------- Login gate ---------- */

.gate{
  max-width:420px; margin:60px auto; background:var(--surface);
  border:1px solid var(--line); padding:32px 34px; text-align:center;
}
.gate h2{ font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 8px; letter-spacing:-0.02em; }
.gate p{ font-size:14px; color:var(--text-2); margin:0 0 22px; line-height:1.55; }
.gate .field{ text-align:left; margin-bottom:15px; }
.gate .btn{ width:100%; }

/* ---------- Centred newsletter form ---------- */

.form.centred{ margin-left:auto; margin-right:auto; text-align:center; }
.form.centred .field > label{ display:block; text-align:center; font-size:15px; }
.form.centred .hint{ text-align:center; max-width:46ch; margin-left:auto; margin-right:auto; }
.form.centred .opts{ justify-content:center; }
.form.centred .routegrid{ text-align:left; }
.form.centred .routegrid .opt{ justify-content:flex-start; }
.form.centred input[type=email], .form.centred input[type=text]{ text-align:center; }
.form.centred .btn{ min-width:220px; }
.form.centred .err{ text-align:center; }
.pagehead.centred{ text-align:center; }
.pagehead.centred p{ margin-left:auto; margin-right:auto; }
.notice.centred{ max-width:640px; margin-left:auto; margin-right:auto; }

@media (max-width:900px){
  .kanban{ grid-template-columns:1fr; }
  .colbody{ max-height:none; }
  .calgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .calgrid{ grid-template-columns:1fr; }
  .arow{ grid-template-columns:40px 1fr; gap:13px; }
  .arow .ico{ width:40px; height:40px; }
  .arow .when{ display:none; }
  .abody{ padding-left:0; }
}


/* ---------- Smoother header collapse ---------- */

.collapsing{
  overflow:hidden;
  transition:
    max-height .42s cubic-bezier(.22,.61,.36,1),
    opacity .28s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1),
    margin .42s cubic-bezier(.22,.61,.36,1);
  will-change:max-height, opacity, transform;
}
.collapsing.hid{
  opacity:0;
  max-height:0 !important;
  transform:translateY(-8px);
  margin-top:0 !important;
  margin-bottom:0 !important;
  pointer-events:none;
}

/* ---------- Header spacing ---------- */

.masthead{ padding:34px 0 0; }
.titleblock{ padding-top:10px; padding-bottom:6px; }
.markrule{ margin:0 0 18px; }
.markrule .lbl{ letter-spacing:0.1em; }
.wordmark{ font-size:40px; line-height:1.06; margin-bottom:2px; }
.hero{
  margin:18px 0 4px;
  font-size:17px; line-height:1.62;
  max-width:58ch; letter-spacing:0.002em;
  word-spacing:0.04em;
}
.brandrow{ gap:36px; align-items:flex-start; }
.stamp{ padding-top:12px; line-height:1.8; }
.stamp strong{ margin-bottom:3px; }
.nav{ margin-top:30px; }
.readings{ margin-top:10px; }
.stickybar .inner{ padding:12px 0; }

@media (max-width:760px){
  .wordmark{ font-size:31px; }
  .hero{ font-size:15.5px; margin-top:14px; }
  .brandrow{ gap:20px; }
}

/* ---------- Clickable tracker readings ---------- */

button.reading{
  font-family:var(--sans); text-align:left; cursor:pointer;
  background:none; border:none; border-right:1px solid var(--ink-3);
  width:100%; transition:background .18s ease;
}
button.reading:hover{ background:rgba(110,208,182,0.07); }
button.reading:focus-visible{ outline:2px solid #6ED0B6; outline-offset:-2px; }
button.reading.on{ background:rgba(110,208,182,0.12); }
button.reading.on .l{ color:#C6D3D0; }
button.reading.on::after{
  content:''; display:block; height:2px; background:#6ED0B6;
  margin:14px -22px -24px 0;
}
button.reading:last-child{ border-right:none; }

/* ---------- Standard links ---------- */

a.stdlink{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-strong); }
a.stdlink:hover{ border-bottom-color:var(--text); }

/* ---------- Sign-in ---------- */

.signin{
  display:grid; grid-template-columns:1fr 300px; gap:0;
  max-width:760px; margin:48px auto 60px;
  border:1px solid var(--line); background:var(--surface);
}
.signin-panel{ padding:34px 36px 30px; }
.signin-panel h2{
  font-family:var(--display); font-size:24px; font-weight:600;
  letter-spacing:-0.022em; margin:0 0 9px; line-height:1.2;
}
.signin-panel > p{ font-size:14.5px; color:var(--text-2); margin:0 0 26px; line-height:1.55; max-width:42ch; }
.signin-panel .field{ margin-bottom:17px; }
.signin-panel .field > label{ font-size:13.5px; margin-bottom:6px; }
.signin-panel input{
  width:100%; font-family:var(--sans); font-size:15px;
  padding:11px 13px; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--text); border-radius:2px;
}
.signin-panel input:focus{ outline:none; border-color:var(--ink-3); background:var(--surface); box-shadow:0 0 0 3px rgba(22,48,47,0.09); }
.signin-panel .btn{ width:100%; margin-top:4px; padding:13px 24px; }

.pwwrap{ position:relative; }
.pwwrap .peek{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer; padding:7px 10px;
  font-family:var(--sans); font-size:12.5px; color:var(--text-2);
}
.pwwrap .peek:hover{ color:var(--text); text-decoration:underline; }

.demo{
  margin-top:24px; padding-top:19px; border-top:1px solid var(--line);
  font-size:13px; color:var(--text-2); display:flex;
  align-items:center; gap:10px; flex-wrap:wrap;
}
.demo b{ font-weight:500; color:var(--text); }
.demo code{
  background:var(--paper); border:1px solid var(--line);
  padding:1.5px 6px; font-size:12.5px; font-family:ui-monospace, monospace;
}
.demo .fill{
  margin-left:auto; border:1px solid var(--line-strong); background:var(--surface);
  font-family:var(--sans); font-size:12.5px; padding:6px 12px; cursor:pointer; color:var(--text-2);
}
.demo .fill:hover{ background:var(--paper); color:var(--text); }

.signin-side{ background:var(--paper); border-left:1px solid var(--line); padding:34px 26px 30px; }
.signin-side h3{ font-family:var(--display); font-size:14px; font-weight:600; margin:0 0 13px; }
.signin-side ul{ margin:0 0 20px; padding-left:17px; }
.signin-side li{ font-size:13px; color:var(--text-2); line-height:1.55; margin-bottom:10px; }
.signin-side .note{
  font-size:11.5px; color:var(--text-3); line-height:1.55; margin:0;
  padding-top:15px; border-top:1px solid var(--line);
}

.linkbtn{
  border:none; background:none; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:inherit; color:var(--ink-3);
  text-decoration:underline; font-weight:500;
}

@media (max-width:680px){
  .signin{ grid-template-columns:1fr; margin-top:26px; }
  .signin-side{ border-left:none; border-top:1px solid var(--line); }
  .signin-panel{ padding:26px 22px 22px; }
  .demo .fill{ margin-left:0; }
}

/* ---------- Simplified board cards ---------- */

button.card{
  display:block; width:100%; text-align:left; position:relative;
  font-family:var(--sans); cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  padding:12px 14px 11px; margin-bottom:7px;
  transition:background .15s ease, border-color .15s ease;
}
button.card:hover{ background:#F6F4EE; border-color:var(--line-strong); }
button.card:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
button.card.high{ border-left-color:var(--high); }
button.card.medium{ border-left-color:var(--med); }
button.card.low{ border-left-color:var(--low); }

button.card h3{
  font-family:var(--display); font-size:14.5px; font-weight:500;
  letter-spacing:-0.012em; line-height:1.32; margin:0 0 4px;
  color:var(--text); padding-right:14px;
}
button.card p{ font-size:13px; color:var(--text-2); line-height:1.45; margin:0 0 7px; }
button.card .cdate{ font-size:11.5px; color:var(--text-3); }

.dotflag{
  position:absolute; top:13px; right:13px;
  width:7px; height:7px; border-radius:50%; background:var(--high);
}

/* ---------- Detail drawer ---------- */

.scrim{
  position:fixed; inset:0; background:rgba(13,27,30,0.42);
  opacity:0; pointer-events:none; transition:opacity .26s ease; z-index:70;
}
.scrim.on{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(460px, 92vw);
  background:var(--surface); border-left:1px solid var(--line-strong);
  z-index:80; padding:30px 32px 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
  box-shadow:-8px 0 34px rgba(13,27,30,0.12);
}
.drawer.on{ transform:translateX(0); }

.drawerclose{
  position:absolute; top:16px; right:18px;
  border:none; background:none; cursor:pointer;
  font-size:24px; line-height:1; color:var(--text-3); padding:6px 9px;
}
.drawerclose:hover{ color:var(--text); }
.drawerclose:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

.drawer h2{
  font-family:var(--display); font-size:21px; font-weight:600;
  letter-spacing:-0.02em; line-height:1.24; margin:11px 0 8px; padding-right:28px;
}
.drawer .stdname{ font-size:13px; color:var(--text-3); margin:0 0 14px; }
.drawer .dsum{ font-size:14.5px; color:var(--text-2); line-height:1.62; margin:0 0 20px; }

.facts{ margin:0 0 22px; border-top:1px solid var(--line); }
.fact{
  display:grid; grid-template-columns:112px 1fr; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.fact dt{ font-size:12.5px; color:var(--text-3); }
.fact dd{ margin:0; font-size:13.5px; color:var(--text); }

.drawer .links{ flex-direction:column; align-items:flex-start; gap:11px; }

/* ---------- Commonly delivered block ---------- */

.routeblock.common{ margin-top:26px; }
.routeblock.common > h2::after{
  content:'Most used'; display:inline-block; vertical-align:middle;
  font-family:var(--sans); font-size:11px; font-weight:500;
  background:var(--low-bg); color:var(--low);
  padding:3px 9px; margin-left:11px;
}
.routeblock.common table.std{ border-color:var(--line-strong); }

/* ---------- Lead column ---------- */

/* retired: the board no longer uses a three-column grid */
.col.lead{ border-color:var(--line-strong); }
.col.lead .colhead{ background:var(--ink); border-bottom-color:var(--ink); }
.col.lead .colhead h2{ color:#fff; }
.col.lead .colhead h2 em{ background:transparent; border-color:var(--ink-3); color:#9DB0AD; }
.col.lead .colhead p{ color:#8FA4A1; }
.col.lead .colbody{ max-height:66vh; }

@media (max-width:900px){ .kanban{ grid-template-columns:1fr; } }

/* ---------- Members ---------- */

.benefits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:26px; }
.benefit{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--ink-3); padding:22px 24px; }
.benefit h3{ font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-0.015em; margin:0 0 9px; }
.benefit p{ font-size:14px; color:var(--text-2); line-height:1.6; margin:0; }

.memberbar{ background:var(--ink-2); color:#C6D3D0; }
.memberbar .inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:11px 0; flex-wrap:wrap; }
.memberbar .who b{ font-family:var(--display); font-size:15px; font-weight:600; color:#fff; margin-right:12px; }
.memberbar .who span{ font-size:12.5px; color:#8FA4A1; }
.memberbar .linkbtn{ color:#9DB0AD; }
.memberbar .linkbtn:hover{ color:#fff; }

.mgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:22px 0 8px; }
.mcard{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line-strong); padding:18px 20px; }
.mcard .n{ font-family:var(--display); font-size:30px; font-weight:500; line-height:1; letter-spacing:-0.025em; }
.mcard .l{ font-size:12.5px; color:var(--text-2); margin-top:8px; line-height:1.4; }
.mcard.warm{ border-left-color:var(--med); } .mcard.warm .n{ color:var(--med); }
.mcard.cool{ border-left-color:var(--low); } .mcard.cool .n{ color:var(--low); }
.mcard.bad{ border-left-color:var(--high); }  .mcard.bad .n{ color:var(--high); }

.alert{
  background:var(--high-bg); border-left:3px solid var(--high);
  padding:16px 19px; margin:22px 0 4px; font-size:14.5px; line-height:1.62; color:#6E1D17;
}
.alert b{ color:var(--high); }
.alert a{ color:#6E1D17; }

.okbox{
  background:var(--low-bg); border-left:3px solid var(--low);
  padding:16px 19px; margin-top:18px; font-size:14.5px; line-height:1.62; color:#0B5A4E;
}

.levyform{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; max-width:560px; margin-bottom:26px; }
.levyform input{
  width:100%; font-family:var(--display); font-size:20px; font-weight:500;
  padding:11px 13px; border:1px solid var(--line-strong); background:var(--surface); border-radius:2px;
}
.levyform input:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }

table.levytable td.big{ font-family:var(--display); font-size:17px; font-weight:500; color:var(--text); }
table.levytable td.nm{ width:30%; }

/* ---------- Contents navigation ---------- */

.contents{ background:var(--surface); border:1px solid var(--line); padding:18px 20px 16px; margin-top:22px; }
.contents h2{
  font-family:var(--display); font-size:13px; font-weight:600;
  color:var(--text-2); margin:0 0 13px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.clist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px; }
.clist a{
  display:block; padding:8px 10px; text-decoration:none;
  border-left:2px solid transparent; transition:background .14s ease;
}
.clist a:hover{ background:var(--paper); border-left-color:var(--ink-3); }
.clist a b{ display:block; font-size:13.5px; font-weight:500; color:var(--text); line-height:1.35; }
.clist a span{ display:block; font-size:11.5px; color:var(--text-3); margin-top:2px; }

/* ---------- Document locator ---------- */

.locator{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
}
.locator a{ font-size:13px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px; }
.locator a.read{ color:var(--ink-3); font-weight:500; border-bottom-color:var(--ink-3); }
.locator a:hover{ border-bottom-color:var(--text); }
.locator .find{ font-size:12.5px; color:var(--text-3); }
.locator .find code{
  background:var(--paper); border:1px solid var(--line);
  padding:1.5px 6px; font-family:ui-monospace, monospace; font-size:12px; color:var(--text);
}
.copybtn{
  border:1px solid var(--line-strong); background:var(--surface);
  font-family:var(--sans); font-size:12px; padding:4px 11px; cursor:pointer; color:var(--text-2);
}
.copybtn:hover{ background:var(--paper); color:var(--text); }

/* ---------- Collapsible contents strip ---------- */

.contents{ background:var(--surface); border:1px solid var(--line); padding:0; margin-top:22px; }

.ctoggle{
  display:flex; align-items:center; gap:12px; width:100%;
  border:none; background:none; cursor:pointer;
  font-family:var(--sans); padding:14px 18px; text-align:left;
}
.ctoggle:hover{ background:var(--paper); }
.ctoggle:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.ctoggle .ctitle{ font-family:var(--display); font-size:14px; font-weight:600; color:var(--text); }
.ctoggle .ccount{
  font-size:11.5px; color:var(--text-2); background:var(--paper);
  border:1px solid var(--line); padding:2px 8px;
}
.ctoggle .cchev{ margin-left:auto; color:var(--text-3); font-size:12px; transition:transform .22s ease; }
.ctoggle.open .cchev{ transform:rotate(180deg); }

.clist{
  display:none; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2px; padding:0 12px 14px;
}
.clist.open{ display:grid; }
.clist a{
  display:block; padding:9px 11px; text-decoration:none;
  border-left:2px solid transparent; position:relative;
  transition:background .14s ease;
}
.clist a:hover{ background:var(--paper); border-left-color:var(--ink-3); }
.clist a b{ display:block; font-size:13.5px; font-weight:500; color:var(--text); line-height:1.35; }
.clist a span{ display:block; font-size:11.5px; color:var(--text-3); margin-top:2px; }
.cdot{ position:absolute; left:-1px; top:13px; width:3px; height:calc(100% - 22px); }
.cdot.high{ background:var(--high); } .cdot.medium{ background:var(--med); } .cdot.low{ background:var(--low); }
.cextra{ grid-column:1/-1; padding:11px 11px 0; border-top:1px solid var(--line); margin-top:6px; }
.cdoc{ font-size:13px; color:var(--ink-3); font-weight:500; text-decoration:none; }
.cdoc:hover{ text-decoration:underline; }

/* ---------- Linkable rules document ---------- */

.docwrap{ display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start; margin-top:26px; }

.doctoc{ position:sticky; top:64px; }
.tocinner{ background:var(--surface); border:1px solid var(--line); padding:18px 16px; max-height:calc(100vh - 100px); overflow-y:auto; }
.tocinner h2{ font-family:var(--display); font-size:12.5px; font-weight:600; color:var(--text-2); margin:0 0 12px; }
.tocgroup{ margin-bottom:15px; }
.tocgroup h3{ font-family:var(--sans); font-size:11px; font-weight:600; color:var(--text-3); margin:0 0 5px; letter-spacing:0.04em; }
.tocgroup a{
  display:block; font-size:13px; color:var(--text-2); text-decoration:none;
  padding:5px 9px; border-left:2px solid transparent; line-height:1.35;
}
.tocgroup a:hover{ background:var(--paper); color:var(--text); }
.tocgroup a.on{ border-left-color:var(--ink-3); background:var(--paper); color:var(--text); font-weight:500; }
.tocgroup a em{
  font-style:normal; font-size:10.5px; background:var(--med-bg); color:var(--med);
  padding:1px 5px; margin-left:6px;
}
.tocpdf{ display:block; margin-top:12px; padding-top:13px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); text-decoration:none; font-weight:500; }

.docgroup{ margin-bottom:14px; }
.docsec{ background:var(--surface); border:1px solid var(--line); padding:24px 26px; margin-bottom:10px; scroll-margin-top:80px; }
.docmeta{ display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--text-3); margin-bottom:8px; }
.docsec h2{ font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-0.02em; margin:0 0 10px; }
.docgist{ font-size:15px; color:var(--text-2); line-height:1.66; margin:0; max-width:66ch; }

.docchanges{ margin-top:20px; padding-top:17px; border-top:1px solid var(--line); }
.docchanges h4{ font-family:var(--display); font-size:12.5px; font-weight:600; color:var(--text-2); margin:0 0 11px; }
.docchange{ border-left:3px solid var(--line-strong); padding:11px 15px; margin-bottom:9px; background:var(--paper); }
.docchange.high{ border-left-color:var(--high); }
.docchange.medium{ border-left-color:var(--med); }
.docchange.low{ border-left-color:var(--low); }
.docchange .cwhen{ font-size:11px; color:var(--text-3); margin-bottom:4px; }
.docchange b{ display:block; font-size:14px; font-weight:500; margin-bottom:7px; }
.docchange p{ font-size:13.5px; color:var(--text-2); line-height:1.58; margin:0 0 5px; }
.docchange p span{
  display:inline-block; font-size:11px; color:var(--text-3);
  min-width:66px; font-weight:500;
}

.docrelated{ margin-top:15px; font-size:13px; color:var(--text-2); }
.docrelated b{ font-weight:500; color:var(--text); }
.docrelated a{ color:var(--ink-3); text-decoration:none; }
.docrelated a:hover{ text-decoration:underline; }

@media (max-width:860px){
  .docwrap{ grid-template-columns:1fr; }
  .doctoc{ position:static; }
  .tocinner{ max-height:none; }
}

/* ---------- Two-column bands ---------- */

.kanban.two{ grid-template-columns:1fr 1fr; }

.band{ margin-top:30px; }
.band.lead{ margin-top:22px; }
.bandhead{ margin-bottom:12px; padding-bottom:11px; border-bottom:1px solid var(--line-strong); }
.bandhead h2{
  font-family:var(--display); font-size:19px; font-weight:600;
  letter-spacing:-0.02em; margin:0; display:flex; align-items:center; gap:10px;
}
.bandhead h2 em{
  font-style:normal; font-size:12px; font-weight:500;
  background:var(--surface); border:1px solid var(--line-strong);
  color:var(--text-2); padding:2px 8px;
}
.bandhead p{ margin:5px 0 0; font-size:13px; color:var(--text-2); }
.band.lead .bandhead h2 em{ background:var(--ink); border-color:var(--ink); color:#fff; }

.band .col.lead .colhead{ background:var(--paper); border-bottom-color:var(--line); }
.band .col.lead .colhead h2{ color:var(--text); }
.band .col .colbody{ max-height:52vh; }

/* ---------- Members feed columns ---------- */

.kanban.two .col.lead .colhead{ background:var(--ink); border-bottom-color:var(--ink); }
.kanban.two .col.lead .colhead h2{ color:#fff; }
.kanban.two .col.lead .colhead h2 em{ background:transparent; border-color:var(--ink-3); color:#9DB0AD; }
.kanban.two .col.lead .colhead p{ color:#8FA4A1; }
.kanban.two .card{ position:relative; }

/* ---------- Members landing layout ---------- */

.joinlayout{ display:grid; grid-template-columns:1fr 360px; gap:22px; align-items:start; margin-top:26px; }
.joinlayout .benefits{ grid-template-columns:1fr 1fr; margin-top:0; }
.joinpanel{
  background:var(--surface); border:1px solid var(--line-strong);
  padding:28px 28px 24px; position:sticky; top:64px;
}

/* ---------- Calendar scope switch ---------- */

.scopeswitch{ display:flex; gap:4px; margin:18px 0 4px; }
.scopeswitch button{
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  padding:8px 14px; cursor:pointer; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text-2);
  display:flex; align-items:center; gap:9px;
}
.scopeswitch button:hover{ background:var(--paper); color:var(--text); }
.scopeswitch button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.scopeswitch button em{
  font-style:normal; font-size:11.5px; padding:1px 7px;
  background:var(--paper); border:1px solid var(--line); color:var(--text-2);
}
.scopeswitch button.on em{ background:transparent; border-color:var(--ink-3); color:#9DB0AD; }

.cpop .reason{ font-size:11.5px; color:var(--low); background:var(--low-bg); padding:3px 8px; display:inline-block; margin-bottom:8px; }

@media (max-width:900px){
  .kanban.two{ grid-template-columns:1fr; }
  .joinlayout{ grid-template-columns:1fr; }
  .joinlayout .benefits{ grid-template-columns:1fr 1fr; }
  .joinpanel{ position:static; }
}
@media (max-width:600px){
  .joinlayout .benefits{ grid-template-columns:1fr; }
}


/* ---------- Band layout, refined ---------- */

.band{ margin-top:38px; position:relative; }
.band.lead{ margin-top:20px; }

.band:not(.lead)::before{
  content:''; display:block; height:1px;
  background:var(--line-strong); margin-bottom:36px;
}

.bandhead{ margin-bottom:16px; padding-bottom:0; border-bottom:none; }
.bandtitle{ display:flex; align-items:baseline; gap:12px; }
.bandtitle h2{
  font-family:var(--display); font-size:24px; font-weight:600;
  letter-spacing:-0.028em; margin:0; line-height:1.1;
}
.bandtitle em{
  font-style:normal; font-size:12px; font-weight:500;
  background:var(--surface); border:1px solid var(--line-strong);
  color:var(--text-2); padding:2px 9px;
}
.band.lead .bandtitle em{ background:var(--ink); border-color:var(--ink); color:#fff; }
.bandhead p{ margin:7px 0 0; font-size:14px; color:var(--text-2); max-width:66ch; }

/* Lead band gets more room to breathe */
.band.lead .colbody{ max-height:60vh; padding:12px; }
.band.lead .colhead{ padding:16px 18px; }
.band.lead .colhead h2{ font-size:16px; }
.band.lead button.card{ padding:15px 17px 14px; margin-bottom:9px; }
.band.lead button.card h3{ font-size:15.5px; margin-bottom:6px; }
.band.lead button.card p{ font-size:13.5px; margin-bottom:9px; }

.band:not(.lead) .colbody{ max-height:44vh; }
.band:not(.lead) .colhead{ background:var(--paper); }

/* 2. Sign-in panel matches the height of the benefits grid */
.joinlayout{ align-items:stretch; }
.joinpanel{
  position:static; display:flex; flex-direction:column;
  border-top:3px solid var(--ink);
}
.joinpanel form{ margin-top:auto; }
.joinpanel > p{ margin-bottom:20px; }
.joinlayout .benefits{ align-content:stretch; }
.joinlayout .benefit{ display:flex; flex-direction:column; }
.joinlayout .benefit p{ margin-top:auto; }

@media (max-width:900px){
  .joinpanel{ min-height:0; }
}

/* =========================================================================
   BOARD LAYOUT FIX
   #board previously carried the .kanban grid class, which made the two
   bands sit side by side as grid columns instead of stacking. The bands
   must be full-width block rows; only the columns inside them are a grid.
   ========================================================================= */

#board{ display:block; width:100%; }
#board > .band{ display:block; width:100%; }

/* Column headers: title and count on one line, blurb underneath */
.colhead{ display:block; }
.colhead h2{
  display:flex; align-items:center; gap:9px;
  flex-wrap:nowrap; min-width:0;
}
.colhead h2 em{ flex:none; }
.colhead p{ display:block; width:100%; margin:6px 0 0; }

/* Stop long standard names blowing out the column width */
.col{ min-width:0; }
.colbody{ min-width:0; overflow-x:hidden; }
button.card h3{ overflow-wrap:break-word; word-break:normal; hyphens:auto; }
button.card p{ overflow-wrap:break-word; }

/* Give the two bands clear separation */
.band + .band{ margin-top:44px; }

/* ---------- Wordmark appears in the bar only once scrolled ---------- */

.stickybar .mini{
  opacity:0; transform:translateY(4px);
  transition:opacity .26s ease, transform .26s ease;
  pointer-events:none;
}
.stickybar.scrolled .mini{ opacity:1; transform:none; pointer-events:auto; }

/* keep the nav where it is while the wordmark fades in beside it */
.stickybar .inner{ min-height:46px; }

.kanban.one{ grid-template-columns:1fr; }
.kanban.one .colbody{ max-height:56vh; }

/* ---------- Levy calculator sections ---------- */

.lsection{ margin-top:34px; }
.lhead{ margin-bottom:14px; }
.lhead h2{
  font-family:var(--display); font-size:19px; font-weight:600;
  letter-spacing:-0.02em; margin:0 0 5px;
}
.lhead p{ margin:0; font-size:14px; color:var(--text-2); max-width:68ch; line-height:1.6; }

/* The costs block is set apart, because it is the answer */
.lsection.costs{
  margin-top:42px; padding:26px 28px 28px;
  background:var(--surface);
  border:2px solid var(--ink);
  border-top:5px solid var(--ink);
}
.lsection.costs .lhead h2{ font-size:22px; }
.lsection.costs .lhead{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.lsection.costs table.std{ border-color:var(--line-strong); }

.csub{
  font-family:var(--display); font-size:14px; font-weight:600;
  margin:26px 0 11px; color:var(--text-2);
}

/* ---------- Cohort table ---------- */

table.cohort input.cnt{
  width:74px; font-family:var(--display); font-size:16px; font-weight:500;
  padding:6px 9px; text-align:center;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); border-radius:2px;
}
table.cohort input.cnt:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }
table.cohort tfoot td{
  border-top:2px solid var(--line-strong); padding:12px;
  font-family:var(--display); font-size:15px; font-weight:500; color:var(--text);
}
table.cohort .rm{
  border:none; background:none; cursor:pointer; padding:5px 8px;
  font-family:var(--sans); font-size:12px; color:var(--text-3); text-decoration:underline;
}
table.cohort .rm:hover{ color:var(--high); }

.addrow{ display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.addrow select{
  flex:1; min-width:260px; font-family:var(--sans); font-size:14px;
  padding:9px 12px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); border-radius:2px;
}
.addrow select:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }
.btn.small{ padding:9px 20px; font-size:14px; }

/* ---------- Age slider ---------- */

.sliderbox{ background:var(--surface); border:1px solid var(--line); padding:20px 24px 18px; }
.sliderbox > label{ display:block; font-size:14px; font-weight:500; margin-bottom:14px; }
.sliderrow{ display:flex; align-items:center; gap:20px; }

.sliderrow input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none;
  height:6px; background:var(--line); border-radius:3px; outline:none;
}
.sliderrow input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--ink); border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--line-strong); cursor:pointer;
}
.sliderrow input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--ink); border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--line-strong); cursor:pointer;
}
.sliderrow input[type=range]:focus-visible{ box-shadow:0 0 0 3px rgba(22,48,47,0.16); }

.sliderrow output{
  font-family:var(--display); font-size:17px; font-weight:500;
  color:var(--text); white-space:nowrap; min-width:130px; text-align:right;
}
.sliderends{
  display:flex; justify-content:space-between;
  font-size:11.5px; color:var(--text-3); margin-top:9px;
}

/* ---------- Figures ---------- */

table.levytable tr.totalrow td{ border-top:2px solid var(--line-strong); background:var(--paper); }
table.levytable td.big.neg{ color:var(--high); }
table.levytable td.big.pos{ color:var(--low); }
table.levytable td.num.big{ white-space:nowrap; }

@media (max-width:640px){
  .lsection.costs{ padding:20px 18px 22px; }
  .sliderrow{ flex-direction:column; align-items:stretch; gap:12px; }
  .sliderrow output{ text-align:left; }
}

/* ---------- Compliance note ---------- */

.lawbox{
  background:#F2F4F8; border-left:3px solid #2A4A78;
  padding:16px 19px; margin-top:18px;
  font-size:14px; line-height:1.62; color:#2C3A52;
}
.lawbox b{ color:#1F3557; }

/* ---------- Card links ---------- */

.readcard .cardlinks{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
}
.readcard .cardlinks a{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid var(--line-strong); padding-bottom:1px;
}
.readcard .cardlinks a:hover{ border-bottom-color:var(--ink-3); }
.readcard .cardlinks a:last-child{ color:var(--text-2); font-weight:400; }

/* ---------- Standards picker ---------- */

.picker{ margin-top:16px; position:relative; }
.picker > label{ display:block; font-size:13.5px; font-weight:500; margin-bottom:7px; }

.pickerbox{ position:relative; }
.pickerbox input{
  width:100%; font-family:var(--sans); font-size:14.5px;
  padding:11px 38px 11px 13px;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); border-radius:2px;
}
.pickerbox input::placeholder{ color:var(--text-3); }
.pickerbox input:focus{
  outline:none; border-color:var(--ink-3);
  box-shadow:0 0 0 3px rgba(22,48,47,0.08);
}
.pickerbox .radar{ right:12px; }

.pickerresults{
  display:none; position:absolute; left:0; right:0; top:100%; z-index:30;
  background:var(--surface); border:1px solid var(--ink-3); border-top:none;
  box-shadow:0 8px 24px rgba(13,27,30,0.13);
  max-height:330px; overflow-y:auto;
}
.pickerresults.on{ display:block; }

.pickeritem{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:none; border-bottom:1px solid var(--line);
  background:var(--surface); padding:11px 14px;
  font-family:var(--sans);
}
.pickeritem:last-child{ border-bottom:none; }
.pickeritem:hover, .pickeritem:focus-visible{ background:var(--paper); outline:none; }
.pickeritem b{
  display:block; font-family:var(--display); font-size:14.5px;
  font-weight:500; color:var(--text); line-height:1.3;
}
.pickeritem span{ display:block; font-size:12px; color:var(--text-3); margin-top:3px; }
.pickeritem em.warn{
  display:inline-block; font-style:normal; font-size:11px; margin-top:6px;
  background:var(--high-bg); color:var(--high); padding:2px 7px;
}
.pickernone{ padding:16px 14px; font-size:13.5px; color:var(--text-3); }

/* ---------- Remove buttons ---------- */

table.cohort .rm{
  border:1px solid transparent; background:none; cursor:pointer;
  width:28px; height:28px; border-radius:2px; padding:0;
  font-size:19px; line-height:1; color:var(--text-3);
}
table.cohort .rm:hover{ background:var(--high-bg); color:var(--high); border-color:var(--high); }
table.cohort .rm:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }

.cohortempty{ padding:22px 12px !important; color:var(--text-3); font-size:13.5px; text-align:center; }

/* ---------- Standard chips ---------- */

.chiplist{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:4px; }
.stdchip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line-strong);
  padding:6px 7px 6px 12px; font-size:13.5px; color:var(--text);
}
.chipx{
  border:none; background:none; cursor:pointer; padding:0;
  width:20px; height:20px; border-radius:2px;
  font-size:16px; line-height:1; color:var(--text-3);
}
.chipx:hover{ background:var(--high-bg); color:var(--high); }
.chipx:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.chipnone{ font-size:13.5px; color:var(--text-3); }

.grouphead .linkbtn{ font-size:13px; white-space:nowrap; }

/* ---------- Data age note ---------- */

.agenote{ display:block; font-size:11.5px; color:#7D918E; margin-top:2px; }
.agenote.stale{ color:#F2B858; }

/* ---------- CSV import ---------- */

.dropzone{
  border:2px dashed var(--line-strong); background:var(--surface);
  padding:44px 24px; text-align:center; cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.dropzone:hover{ border-color:var(--ink-3); background:var(--paper); }
.dropzone.over{ border-color:var(--ink); background:var(--low-bg); }
.dropmain{ font-family:var(--display); font-size:17px; font-weight:500; margin:0 0 7px; color:var(--text); }
.dropsub{ font-size:13px; color:var(--text-3); margin:0; }
.dropzone .linkbtn{ font-size:17px; font-family:var(--display); font-weight:500; }

/* ---------- What changed ---------- */

.whatchanged{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.whatchanged.big{ margin:10px 0 14px; }
.wclabel{ font-size:10.5px; letter-spacing:0.04em; color:var(--text-3); }

.ctag{ font-size:11.5px; padding:2.5px 9px; white-space:nowrap; }
.ctag.stop{ background:var(--high-bg); color:var(--high); font-weight:500; }
.ctag.money{ background:#EDEBF7; color:#443E86; font-weight:500; }
.ctag.warn{ background:var(--med-bg); color:var(--med); }
.ctag.new{ background:var(--low-bg); color:var(--low); }
.ctag.info{ background:#EEECE5; color:var(--text-2); }

table.std .ctag{ display:inline-block; }

/* ---------- Import: documents tool ---------- */

.form textarea{
  width:100%; font-family:var(--sans); font-size:14.5px; line-height:1.55;
  padding:10px 12px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); border-radius:2px; resize:vertical;
}
.form textarea:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }

.codeout{
  background:var(--ink); color:#D7E3E0; padding:18px 20px; margin:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; line-height:1.6; overflow-x:auto; white-space:pre-wrap;
  border-radius:2px;
}

/* ---------- Announce toggle ---------- */

.announce{
  display:flex; gap:13px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--med);
  padding:15px 18px; margin-top:14px; cursor:pointer;
}
.announce:hover{ background:var(--paper); }
.announce input{ margin-top:3px; flex:none; }
.announce b{ display:block; font-size:14px; font-weight:500; margin-bottom:4px; }
.announce span{ font-size:13px; color:var(--text-2); line-height:1.55; }

/* =========================================================================
   MASTHEAD — rebuilt

   Overrides the earlier header rules. Depth comes from a gradient and a set
   of radar arcs sweeping out of the right-hand corner, so the wordmark can
   carry the page without a logo next to it.
   ========================================================================= */

.masthead{
  background:
    radial-gradient(1100px 420px at 88% 18%, #173834 0%, rgba(23,56,52,0) 62%),
    linear-gradient(168deg, #0A1518 0%, #0D1B1E 46%, #112724 100%);
  padding:0;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #1D3C38;
}
.masthead > .wrap{ position:relative; z-index:2; }

.titleblock{ position:relative; padding:40px 0 30px; }

/* ---------- Radar backdrop ---------- */

.backdrop{
  position:absolute; inset:-40px -28px -30px 0;
  pointer-events:none; z-index:0;
  mask-image:linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.backdrop svg{ width:100%; height:100%; display:block; }

/* ---------- Eyebrow ---------- */

.markrule{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:13px; margin:0 0 20px;
}
.markrule .lbl{
  font-size:11px; color:#7FA79F; letter-spacing:0.14em;
  white-space:nowrap; text-transform:uppercase;
}
.markrule .line{
  flex:1; height:1px;
  background:linear-gradient(90deg, #2A5049, rgba(42,80,73,0));
}

.pulse{
  width:7px; height:7px; border-radius:50%;
  background:#6ED0B6; flex:none; position:relative;
  box-shadow:0 0 0 0 rgba(110,208,182,0.6);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(110,208,182,0.5); }
  70%  { box-shadow:0 0 0 9px rgba(110,208,182,0); }
  100% { box-shadow:0 0 0 0 rgba(110,208,182,0); }
}

/* ---------- Wordmark ---------- */

.brandrow{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.brandmain{ min-width:0; }

.wordmark{
  font-family:var(--display);
  font-size:clamp(42px, 6.4vw, 68px);
  font-weight:600; letter-spacing:-0.045em; line-height:0.94;
  margin:0; color:#FFFFFF;
}
.wordmark a{ color:inherit; text-decoration:none; display:inline-block; }
.wordmark em{
  font-style:normal; font-weight:600;
  background:linear-gradient(96deg, #6ED0B6 0%, #9BE3CF 58%, #F2B858 130%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#6ED0B6;
}

/* a hairline under the wordmark, weighted to the left */
.wordmark::after{
  content:''; display:block; height:2px; width:96px; margin-top:16px;
  background:linear-gradient(90deg, #6ED0B6, rgba(110,208,182,0));
}

.hero{
  margin:20px 0 2px; max-width:56ch;
  color:#A9C2BC; font-size:clamp(15px, 1.25vw, 17.5px); line-height:1.6;
}

/* ---------- Stamp ---------- */

.stamp{
  text-align:right; font-size:12.5px; color:#7FA79F; line-height:1.7;
  padding:12px 0 8px 18px; border-left:1px solid #22443F;
  align-self:flex-end; white-space:nowrap;
}
.stamp strong{ color:#E6EFEC; font-weight:500; display:block; font-size:13.5px; }

/* ---------- Navigation ---------- */

.nav{ position:relative; z-index:2; margin-top:32px; gap:0; }
.nav a{
  font-size:14px; padding:12px 16px; color:#8FAEA8;
  border-bottom:2px solid transparent; letter-spacing:0.005em;
}
.nav a:first-child{ padding-left:0; }
.nav a:hover{ color:#FFFFFF; }
.nav a.on{ color:#FFFFFF; border-bottom-color:#6ED0B6; }

/* ---------- Readings strip ---------- */

.readings{ position:relative; z-index:2; border-top:1px solid #1D3C38; margin-top:0; }
.reading{ border-right:1px solid #1D3C38; padding:22px 24px 26px 0; }
.reading .n{ font-size:36px; letter-spacing:-0.03em; }
.reading .l{ color:#89A7A1; }

/* ---------- Sticky bar ---------- */

.stickybar{
  background:rgba(10,21,24,0.94);
  backdrop-filter:saturate(1.3) blur(10px);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid #1D3C38;
}
.stickybar .mini{ letter-spacing:-0.035em; font-size:21px; }
.stickybar .mini em{
  font-style:normal;
  background:linear-gradient(96deg, #6ED0B6, #9BE3CF);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#6ED0B6;
}

@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none; }
}

@media (max-width:760px){
  .titleblock{ padding:30px 0 24px; }
  .wordmark::after{ width:70px; margin-top:12px; }
  .stamp{ text-align:left; border-left:none; padding:14px 0 0; border-top:1px solid #22443F; width:100%; }
  .backdrop{ opacity:0.55; }
  .nav{ margin-top:22px; }
}

/* ---------- Dashboard: things to do ---------- */

.todolist{ margin-top:12px; }
.todo{
  display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  padding:17px 20px; margin-bottom:8px; flex-wrap:wrap;
}
.todo.stop{ border-left-color:var(--high); }
.todo.warn{ border-left-color:var(--med); }
.todo.watch{ border-left-color:var(--low); }
.todotext{ flex:1; min-width:240px; }
.todo h3{
  font-family:var(--display); font-size:15.5px; font-weight:500;
  letter-spacing:-0.012em; margin:0 0 6px; line-height:1.35;
}
.todo p{ font-size:13.5px; color:var(--text-2); line-height:1.6; margin:0; max-width:70ch; }

.todoact{
  flex:none; font-family:var(--sans); font-size:13px; font-weight:500;
  padding:8px 15px; cursor:pointer; white-space:nowrap; text-decoration:none;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--text);
  border-radius:2px; align-self:center;
}
.todoact:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.todo.stop .todoact{ border-color:var(--high); color:var(--high); }
.todo.stop .todoact:hover{ background:var(--high); color:#fff; }

/* ---------- Dashboard: coming up ---------- */

.soonlist{ margin-top:12px; }
.soon{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  padding:16px 20px; margin-bottom:8px;
}
.soon.high{ border-left-color:var(--high); }
.soon.medium{ border-left-color:var(--med); }
.soon.low{ border-left-color:var(--low); }
.soondate{
  font-family:var(--display); font-size:18px; font-weight:500;
  color:var(--text); line-height:1.15;
}
.soondate small{
  display:block; font-family:var(--sans); font-size:11.5px;
  font-weight:400; color:var(--text-3); margin-top:4px;
}
.soon h3{ font-family:var(--display); font-size:15.5px; font-weight:500; margin:0 0 6px; letter-spacing:-0.012em; }
.soon p{ font-size:13.5px; color:var(--text-2); line-height:1.6; margin:0 0 7px; max-width:70ch; }
.soon .who{ font-size:11.5px; color:var(--low); background:var(--low-bg); display:inline-block; padding:2px 8px; }

.grouphead .linkbtn{ margin-left:auto; }

@media (max-width:640px){
  .soon{ grid-template-columns:1fr; gap:8px; }
  .todo{ flex-direction:column; gap:12px; }
  .todoact{ align-self:flex-start; }
}

/* ---------- Off-the-job table ---------- */

table.otj input.otjin{
  width:88px; font-family:var(--display); font-size:15px; font-weight:500;
  padding:6px 9px; text-align:center; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); border-radius:2px;
}
table.otj input.otjin::placeholder{ color:var(--text-3); font-weight:400; font-size:13.5px; }
table.otj input.otjin:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }
small.cap{ display:block; font-size:11px; color:var(--text-3); margin-top:4px; font-weight:400; }

/* ---------- Governance report ---------- */

.report{
  background:var(--surface); border:1px solid var(--line);
  padding:44px 48px; margin-top:8px; max-width:900px;
  font-size:14px; line-height:1.55; color:var(--text);
}

.rephead{
  display:flex; justify-content:space-between; align-items:flex-start; gap:30px;
  padding-bottom:20px; border-bottom:2px solid var(--ink); margin-bottom:28px;
}
.rephead h1{ font-family:var(--display); font-size:25px; font-weight:600; letter-spacing:-0.022em; margin:0 0 5px; }
.repmeta{ margin:0; font-size:13.5px; color:var(--text-2); }
.repbrand{
  font-family:var(--display); font-size:19px; font-weight:600;
  letter-spacing:-0.03em; text-align:right; white-space:nowrap;
}
.repbrand em{ font-style:normal; color:var(--low); }
.repbrand small{ display:block; font-family:var(--sans); font-size:10.5px; font-weight:400; color:var(--text-3); letter-spacing:0; margin-top:3px; }

.repsec{ margin-bottom:30px; break-inside:avoid; }
.repsec h2{
  font-family:var(--display); font-size:13px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--text-2);
  margin:0 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line);
}

.repgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.repstat b{ font-family:var(--display); font-size:30px; font-weight:600; display:block; line-height:1; letter-spacing:-0.025em; }
.repstat span{ font-size:12px; color:var(--text-2); display:block; margin-top:6px; line-height:1.35; }
.repstat.bad b{ color:var(--high); }

table.reptable{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.reptable th{
  text-align:left; font-weight:500; font-size:11.5px; color:var(--text-2);
  padding:7px 10px 7px 0; border-bottom:1px solid var(--line-strong);
}
table.reptable td{ padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.reptable td.r, table.reptable th.r{ text-align:right; padding-right:0; white-space:nowrap; }
table.reptable td.w{ white-space:nowrap; color:var(--text-2); width:150px; }
table.reptable tr.rtotal td{ border-top:1.5px solid var(--line-strong); border-bottom:none; }
table.reptable td.neg{ color:var(--high); font-weight:500; }
table.reptable td.note{ font-size:12px; color:var(--text-3); border-bottom:none; padding-top:6px; }
table.reptable .sub{ font-size:12.5px; color:var(--text-2); }
.est{ font-size:10.5px; color:var(--med); background:var(--med-bg); padding:1px 6px; }

.replist{ margin:0; padding-left:20px; }
.replist li{ margin-bottom:11px; padding-left:4px; }
.replist li b{ display:block; font-weight:500; font-size:13.5px; }
.replist li span{ font-size:12.5px; color:var(--text-2); }
.replist li.stop::marker{ color:var(--high); }
.replist li.warn::marker{ color:var(--med); }

.repnote{ font-size:12px; color:var(--text-3); margin:10px 0 0; line-height:1.5; }
.repalert{
  font-size:12.5px; margin:12px 0 0; padding:10px 13px;
  background:var(--high-bg); color:#6E1D17; border-left:3px solid var(--high); line-height:1.55;
}
.repfoot{ margin-top:32px; padding-top:14px; border-top:1px solid var(--line); }
.repfoot p{ font-size:11px; color:var(--text-3); margin:0; line-height:1.5; }

/* ---------- Print ---------- */

@media print{
  .masthead, .stickybar, .memberbar, .controls, .noprint,
  footer, .scrim, .drawer, .cpop{ display:none !important; }

  body{ background:#fff; font-size:11pt; }
  .wrap{ max-width:none; padding:0; }

  .report{
    border:none; padding:0; margin:0; max-width:none;
    font-size:10pt; line-height:1.45; color:#000;
  }
  .rephead{ border-bottom:1.5pt solid #000; }
  .rephead h1{ font-size:18pt; }
  .repbrand{ font-size:14pt; }
  .repbrand em{ color:#0F6B5C; }
  .repsec{ page-break-inside:avoid; margin-bottom:20pt; }
  .repsec h2{ font-size:9pt; }
  .repstat b{ font-size:20pt; }
  table.reptable{ font-size:9pt; }
  .repalert{ background:#fff; border-left:2pt solid #B3261E; color:#000; }
  a{ text-decoration:none; color:#000; }

  @page{ margin:16mm 14mm; }
}

/* ---------- Your own events ---------- */

.eventadd{
  display:grid; grid-template-columns:1.6fr 170px auto; gap:14px; align-items:end;
  background:var(--surface); border:1px solid var(--line); padding:20px 22px;
}
.eventadd .field{ margin:0; }
.eventadd .field.wide{ grid-column:1 / -2; }
.eventadd .field > label{ font-size:13px; margin-bottom:6px; }
.eventadd input{
  width:100%; font-family:var(--sans); font-size:14.5px;
  padding:10px 12px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); border-radius:2px;
}
.eventadd input:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }
.eventadd .btn{ grid-column:-2 / -1; grid-row:2; padding:11px 26px; }

.eventlist{ margin-top:16px; }
.evrow{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3); padding:14px 16px; margin-bottom:7px;
}
.evrow.overdue{ border-left-color:var(--high); }
.evrow.done{ opacity:0.55; border-left-color:var(--low); }
.evrow.done h3{ text-decoration:line-through; }

.evtick{
  width:24px; height:24px; flex:none; cursor:pointer;
  border:1.5px solid var(--line-strong); background:var(--surface);
  border-radius:3px; font-size:14px; line-height:1; color:var(--low); padding:0;
}
.evtick:hover{ border-color:var(--low); }
.evtick:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.evrow.done .evtick{ background:var(--low-bg); border-color:var(--low); }

.evmain h3{ font-family:var(--display); font-size:15px; font-weight:500; margin:0; letter-spacing:-0.01em; }
.evmain p{ font-size:13px; color:var(--text-2); margin:4px 0 0; line-height:1.5; }

.evwhen{ font-size:13px; color:var(--text-2); text-align:right; white-space:nowrap; }
.evwhen small{ display:block; font-size:11.5px; color:var(--text-3); margin-top:3px; }
.evrow.overdue .evwhen small{ color:var(--high); font-weight:500; }

.evdel{
  border:none; background:none; cursor:pointer; padding:0;
  width:26px; height:26px; border-radius:2px;
  font-size:18px; line-height:1; color:var(--text-3);
}
.evdel:hover{ background:var(--high-bg); color:var(--high); }

/* own events in the month grid */
.cday.has.mine{ background:var(--ink-3); }
.cday .own{
  position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#fff;
}
.key i.own{ background:var(--ink-3); }

@media (max-width:700px){
  .eventadd{ grid-template-columns:1fr; }
  .eventadd .field.wide{ grid-column:1; }
  .eventadd .btn{ grid-column:1; grid-row:auto; }
  .evrow{ grid-template-columns:auto 1fr auto; row-gap:8px; }
  .evwhen{ grid-column:2 / -1; text-align:left; }
}

@media print{ .eventadd, .evtick, .evdel{ display:none !important; } }

/* ---------- Off-the-job figures ---------- */

.otjpub{ font-family:var(--display); font-size:15px; font-weight:500; color:var(--text); display:block; }
.otjnone{ font-size:12.5px; color:var(--text-3); display:block; }
table.otj input.otjin.small{
  width:78px; margin-top:6px; font-size:13px; padding:4px 7px;
  font-family:var(--sans); font-weight:400;
}

/* ---------- Tab separators ---------- */

.tabsep{
  width:1px; align-self:stretch; background:var(--line);
  margin:4px 7px; flex:none;
}

/* ---------- Apprenticeship Service panel ---------- */

.lsection.das{
  background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--ink-3); padding:26px 28px 28px; margin-top:44px;
}
.lsection.das .lhead{ margin-bottom:18px; }

.daswhat h3{
  font-family:var(--display); font-size:13px; font-weight:600;
  color:var(--text-2); margin:0 0 12px;
}
.daswhat ul{
  list-style:none; padding:0; margin:0 0 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px;
}
.daswhat li{
  background:var(--paper); border:1px solid var(--line);
  border-left:2px solid var(--low); padding:11px 14px;
}
.daswhat li b{ display:block; font-size:13.5px; font-weight:500; margin-bottom:3px; }
.daswhat li span{ font-size:12.5px; color:var(--text-2); line-height:1.5; }

.dasmini{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3);
  padding:15px 18px; margin:22px 0 4px; flex-wrap:wrap;
}
.dasmini b{ display:block; font-size:14.5px; font-weight:500; margin-bottom:3px; }
.dasmini span{ font-size:13px; color:var(--text-2); }

@media print{ .das, .dasmini{ display:none !important; } }

/* ---------- Achievement rates ---------- */

.ratelow{ color:var(--high); }
.ratemid{ color:var(--med); }
.ratehigh{ color:var(--low); }

/* ---------- Download list ---------- */

.dllist{ margin-top:4px; }
.dlrow{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3);
  padding:15px 18px; margin-bottom:8px;
}
.dlmain{ flex:1; min-width:250px; }
.dlmain b{ display:block; font-family:var(--display); font-size:15px; font-weight:500; margin-bottom:4px; }
.dlmain span{ font-size:13px; color:var(--text-2); line-height:1.55; }
.dlrow .btn.small{ flex:none; text-decoration:none; display:inline-block; }
.dlpage{
  flex:none; font-size:12.5px; color:var(--text-2);
  text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:1px;
}
.dlpage:hover{ color:var(--text); border-bottom-color:var(--text); }

/* ---------- How-to block ---------- */

.howto{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3); padding:20px 24px;
}
.howto .btn{ display:inline-block; text-decoration:none; margin-bottom:16px; }
.howto ol{ margin:0 0 12px; padding-left:20px; }
.howto li{ font-size:14px; color:var(--text-2); line-height:1.6; margin-bottom:7px; }
.howto li b{ color:var(--text); font-weight:500; }

.looksfor{
  display:block; margin-top:9px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:var(--text-2);
  background:var(--paper); border:1px solid var(--line);
  padding:6px 10px; line-height:1.45;
}
.dlrow:has(.looksfor){ align-items:flex-start; }

/* ---------- Standards listed on a route article ---------- */

.onroute{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
.onroute h4{
  font-family:var(--display); font-size:13px; font-weight:600;
  margin:0 0 4px; color:var(--text-2);
}
.onroute > p{ font-size:12.5px; color:var(--text-3); margin:0 0 12px; }
.onroutelist{ max-height:300px; overflow-y:auto; border:1px solid var(--line); }
.orrow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 13px; border-bottom:1px solid var(--line); background:var(--surface);
}
.orrow:last-child{ border-bottom:none; }
.orrow b{ display:block; font-size:13.5px; font-weight:500; }
.orrow span{ display:block; font-size:12.5px; color:var(--text-2); margin-top:2px; }
.orrow a{
  flex:none; font-size:12.5px; font-weight:500; color:var(--ink-3);
  text-decoration:none; border-bottom:1px solid var(--ink-3); padding-bottom:1px;
}
.ornone{ flex:none; font-size:11.5px; color:var(--text-3); }

/* ---------- Pathways within a standard ---------- */

.pathways{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.pathways span{
  font-size:11px; color:var(--text-2); background:var(--paper);
  border:1px solid var(--line); padding:1.5px 7px;
}

/* =========================================================================
   SECTION HEADERS — dark treatment

   The lead column header on the feed reads better than the hairline rules
   used everywhere else, so the same treatment is applied to every section
   header on the site: solid ink ground, white type, count badge on the
   right where there is one.
   ========================================================================= */

.grouphead{
  background:var(--ink);
  margin:34px 0 0;
  padding:13px 18px;
  gap:14px;
  border:none;
}
.grouphead h2{
  color:#FFFFFF; font-size:14.5px; font-weight:600;
  letter-spacing:-0.005em; white-space:nowrap;
}
.grouphead .rule{
  background:var(--ink-3); height:1px; opacity:0.85;
}
.grouphead .linkbtn{
  color:#9DB0AD; margin-left:0; flex:none;
}
.grouphead .linkbtn:hover{ color:#FFFFFF; }

/* the thing directly under a header should sit flush against it */
.grouphead + table.std,
.grouphead + .todolist,
.grouphead + .soonlist,
.grouphead + .readgrid,
.grouphead + .eventlist,
.grouphead + div > table.std{ margin-top:0 !important; }

/* ---------- Section headers inside the calculator and report ---------- */

.lhead h2{
  background:var(--ink); color:#fff;
  display:inline-block; padding:8px 15px;
  font-size:15px; letter-spacing:-0.005em; margin:0 0 10px;
}
.lsection.costs .lhead h2{ font-size:17px; padding:10px 18px; }
.lsection.costs .lhead{ border-bottom:none; padding-bottom:0; }

.csub{
  background:var(--ink-2); color:#fff;
  display:inline-block; padding:6px 13px;
  font-size:12.5px; margin:26px 0 11px;
}

/* ---------- Route and standards blocks ---------- */

.routeblock > h2{
  background:var(--ink); color:#fff;
  padding:12px 18px; margin:0;
  font-size:16px; letter-spacing:-0.01em;
}
.routeblock .sub{
  background:var(--ink-2); color:#9DB0AD;
  margin:0; padding:8px 18px; font-size:12px;
}
.routeblock table.std{ border-top:none; }
.routeblock.common > h2::after{
  background:#6ED0B6; color:var(--ink);
}

/* ---------- Column headers on the board ---------- */

.colhead{ background:var(--ink); border-bottom-color:var(--ink); }
.colhead h2{ color:#FFFFFF; }
.colhead h2 em{ background:transparent; border-color:var(--ink-3); color:#9DB0AD; }
.colhead p{ color:#8FA4A1; }
.band:not(.lead) .colhead{ background:var(--ink-2); border-bottom-color:var(--ink-2); }

/* ---------- Report keeps its quieter treatment in print ---------- */

.repsec h2{
  background:var(--ink); color:#fff; display:inline-block;
  padding:7px 14px; border-bottom:none; letter-spacing:0.04em;
}

@media print{
  .repsec h2{
    background:#000; color:#fff;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    padding:5pt 9pt;
  }
}

@media (max-width:600px){
  .grouphead{ padding:11px 14px; flex-wrap:wrap; }
  .grouphead h2{ white-space:normal; }
  .routeblock > h2{ padding:11px 14px; font-size:15px; }
  .routeblock .sub{ padding:8px 14px; }
}

/* ---------- Skills England attribution (licence condition) ---------- */

.attribution{
  display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--ink-3);
}
.selogo{ flex:none; display:block; opacity:0.92; }
.selogo img{ display:block; height:38px; width:auto; }
.attribution p{ font-size:11.5px; color:#7FA79F; line-height:1.55; margin:0; max-width:62ch; }
.attribution a{ color:#9DB0AD; }

/* ---------- Pathways and job titles ---------- */

.pathways span.pw{ background:var(--low-bg); color:var(--low); border-color:var(--low-bg); }
.pathways span.jt{ background:var(--paper); color:var(--text-3); }
.pathways span.more{ font-style:italic; }

/* ---------- Forecast ---------- */

.planadd{ margin-top:18px; background:var(--surface); border:1px solid var(--line); padding:20px 22px; }
.planfields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:16px; }
.planfields .field{ margin:0; }
.planfields .field > label{ font-size:13px; margin-bottom:6px; }
.planfields input, .planfields select{
  width:100%; font-family:var(--sans); font-size:14.5px; padding:9px 11px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text); border-radius:2px;
}
.planfields input:focus, .planfields select:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }

.levyform select{
  width:100%; font-family:var(--display); font-size:19px; font-weight:500;
  padding:11px 13px; border:1px solid var(--line-strong); background:var(--surface); border-radius:2px;
}

.chartwrap{ background:var(--surface); border:1px solid var(--line); padding:18px 16px 12px; }
.chartwrap svg{ width:100%; height:auto; display:block; }
.chartkey{ display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; padding-left:6px; font-size:12px; color:var(--text-2); }
.chartkey span{ display:flex; align-items:center; gap:7px; }
.chartkey i{ width:14px; height:3px; display:inline-block; }

table.fctable th.r, table.fctable td.num{ text-align:right; }
table.fctable tr.hascost{ background:#FFFBFA; }
table.fctable td.neg{ color:var(--high); }
table.fctable td.nm{ white-space:nowrap; }

@media print{ .chartwrap{ break-inside:avoid; } }

/* ---------- Article index rows as links ---------- */

a.arow{ text-decoration:none; color:inherit; }
a.arow .when{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
a.arow .go{ font-size:12px; color:var(--ink-3); font-weight:500; opacity:0; transition:opacity .15s ease; }
a.arow:hover .go{ opacity:1; }

/* ---------- A single article ---------- */

.crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:20px 0 0; font-size:12.5px; color:var(--text-3);
}
.crumbs a{ color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line-strong); }
.crumbs a:hover{ color:var(--text); }
.crumbs b{ color:var(--text); font-weight:500; }

.piece{
  background:var(--surface); border:1px solid var(--line);
  border-top:4px solid var(--line-strong);
  padding:40px 46px 38px; margin-top:16px; max-width:820px;
}
.piece.high{ border-top-color:var(--high); }
.piece.medium{ border-top-color:var(--med); }
.piece.low{ border-top-color:var(--low); }

.ptags{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.pdate{ font-size:12.5px; color:var(--text-3); margin-left:auto; }

.piece h1{
  font-family:var(--display); font-size:clamp(26px, 3.4vw, 36px);
  font-weight:600; letter-spacing:-0.028em; line-height:1.14; margin:0 0 16px;
}
.pstand{
  font-size:18px; line-height:1.5; color:var(--text);
  font-weight:500; margin:0 0 26px; max-width:60ch;
}
.pbody p{ font-size:16.5px; line-height:1.72; color:var(--text-2); margin:0 0 18px; max-width:66ch; }
.pbody p:first-child{ font-size:17px; }

/* ---------- Standard fact box ---------- */

.factbox{
  background:var(--paper); border:1px solid var(--line);
  border-left:3px solid var(--ink-3);
  padding:22px 24px; margin:0 0 28px;
}
.factbox h2{ font-family:var(--display); font-size:16px; font-weight:600; margin:0 0 14px; letter-spacing:-0.012em; }
.factbox dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 20px; margin:0 0 14px; }
.factbox dt{ font-size:11.5px; color:var(--text-3); margin-bottom:2px; }
.factbox dd{ margin:0; font-size:14.5px; color:var(--text); font-weight:500; }
.fbextra{ font-size:13px; color:var(--text-2); line-height:1.55; padding-top:11px; border-top:1px solid var(--line); margin-top:4px; }
.fbextra b{ display:block; font-size:11.5px; color:var(--text-3); font-weight:400; margin-bottom:3px; }
.fblink{ display:inline-block; margin-top:13px; font-size:13px; color:var(--ink-3); font-weight:500; text-decoration:none; border-bottom:1px solid var(--ink-3); }

/* ---------- Sources and sharing ---------- */

.psources{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line); }
.psources h2{ font-family:var(--display); font-size:13px; font-weight:600; color:var(--text-2); margin:0 0 10px; }
.psources a{ display:block; font-size:14px; color:var(--text); margin-bottom:7px; text-decoration:none; border-bottom:1px solid transparent; width:fit-content; }
.psources a:hover{ border-bottom-color:var(--line-strong); }

.sharebox{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
}
.btn.ghost{ background:var(--surface); color:var(--text); border:1px solid var(--line-strong); text-decoration:none; display:inline-block; }
.btn.ghost:hover{ background:var(--paper); }
.sharebox .hint{ margin:0; font-size:12.5px; }

/* ---------- Read next ---------- */

.relwrap{ max-width:820px; margin-top:38px; }
.relgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:9px; margin-top:0; }
.relcard{
  display:flex; gap:14px; align-items:flex-start; text-decoration:none;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--line-strong); padding:15px 17px;
}
.relcard:hover{ background:var(--paper); border-left-color:var(--ink-3); }
.relcard .ico{ width:40px; height:40px; flex:none; }
.relcard b{ display:block; font-family:var(--display); font-size:14.5px; font-weight:500; color:var(--text); line-height:1.3; margin-bottom:4px; }
.relcard span{ display:block; font-size:12.5px; color:var(--text-2); line-height:1.5; }
.relcard em{ display:block; font-style:normal; font-size:11px; color:var(--text-3); margin-top:6px; }

@media (max-width:640px){
  .piece{ padding:26px 22px 24px; }
  .pdate{ margin-left:0; width:100%; }
}

/* ---------- Admin: article writer ---------- */

.writegrid{ display:grid; grid-template-columns:1fr 420px; gap:22px; align-items:start; margin-top:8px; }
.writepreview{
  position:sticky; top:66px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3); padding:22px 24px;
  max-height:calc(100vh - 100px); overflow-y:auto;
}
.writepreview .lhead{ margin-bottom:14px; }
.writepreview .lhead h2{ font-size:13px; padding:6px 12px; }

.counter{ font-size:11.5px; color:var(--text-3); margin-top:5px; }
.counter.over{ color:var(--med); }

.srcrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.srcrow input{
  font-family:var(--sans); font-size:13.5px; padding:8px 11px;
  border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); border-radius:2px; width:100%;
}
.srcrow input:focus{ outline:none; border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(22,48,47,0.08); }

.btn.small.ghost{ padding:7px 14px; font-size:13px; }

@media (max-width:1000px){
  .writegrid{ grid-template-columns:1fr; }
  .writepreview{ position:static; max-height:none; }
}

/* ---------- Account pages ---------- */

.paylist{ list-style:none; padding:0; margin:18px 0 22px; }
.paylist li{
  font-size:14px; color:var(--text-2); padding:8px 0 8px 26px;
  position:relative; line-height:1.5; border-bottom:1px solid var(--line);
}
.paylist li:last-child{ border-bottom:none; }
.paylist li::before{
  content:'✓'; position:absolute; left:0; top:8px;
  color:var(--low); font-weight:600;
}

.signin-panel h2{ margin-bottom:6px; }
.demo .fill{ margin-left:0; }
.btn.ghost{ background:var(--surface); color:var(--text); border:1px solid var(--line-strong); }

@media (max-width:900px){
  .joinlayout .benefits{ grid-template-columns:1fr 1fr; }
}

/* ---------- Hero subline and call to action ---------- */

.herosub{
  display:block; margin-top:8px;
  font-size:0.87em; color:#8FAEA8; font-weight:400;
}

.herocta{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:26px; padding-top:24px;
  border-top:1px solid #1D3C38;
}
.ctabtn{
  display:inline-block; text-decoration:none;
  background:#6ED0B6; color:#07201C;
  font-family:var(--sans); font-size:15px; font-weight:600;
  padding:13px 26px; border-radius:2px;
  transition:background .15s ease, transform .15s ease;
}
.ctabtn:hover{ background:#8CE0C8; transform:translateY(-1px); }
.ctalink{
  color:#A9C2BC; font-size:14px; text-decoration:none;
  border-bottom:1px solid #2A5049; padding-bottom:2px;
}
.ctalink:hover{ color:#fff; border-bottom-color:#6ED0B6; }
@media (max-width:640px){
  .herocta{ gap:14px; margin-top:22px; padding-top:20px; }
  .ctabtn{ width:100%; text-align:center; }
}

/* ---------- Forecast: adding a cohort ---------- */

.planadd{ padding:0; border:none; background:none; margin-top:18px; }

.planstep{
  display:grid; grid-template-columns:38px 1fr; gap:16px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--ink-3); padding:20px 22px; margin-bottom:8px;
}
.planstep.locked{ opacity:0.5; pointer-events:none; border-left-color:var(--line-strong); }
.stepnum{
  width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:#fff; display:flex;
  align-items:center; justify-content:center;
  font-family:var(--display); font-size:14px; font-weight:600;
}
.stepbody > label{
  display:block; font-family:var(--display); font-size:15px;
  font-weight:500; margin-bottom:12px;
}
.stepbody .picker{ margin-top:0; }
.stepbody .picker > label{ display:none; }

.chosen{
  position:relative; background:var(--paper); border:1px solid var(--line);
  padding:12px 42px 12px 15px; margin-bottom:16px; font-size:13.5px; color:var(--text-3);
}
.chosen b{ display:block; font-family:var(--display); font-size:15px; font-weight:500; color:var(--text); }
.chosen span{ display:block; font-size:12.5px; color:var(--text-2); margin-top:3px; }
.chosen em.warn{ font-style:normal; color:var(--high); }
.chosen .chipx{ position:absolute; right:10px; top:50%; transform:translateY(-50%); }

.planrow{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }

.numbump{ display:flex; align-items:center; gap:0; }
.numbump button{
  width:34px; height:38px; cursor:pointer; font-size:17px; line-height:1;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--text);
}
.numbump button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.numbump input{
  width:64px; height:38px; text-align:center; border:1px solid var(--line-strong);
  border-left:none; border-right:none; background:var(--surface);
  font-family:var(--display); font-size:16px; font-weight:500; color:var(--text);
}
.numbump input:focus{ outline:none; box-shadow:0 0 0 3px rgba(22,48,47,0.08); position:relative; z-index:1; }
.numbump span{ margin-left:10px; font-size:13px; color:var(--text-2); }

.whenpick, .agepick{ display:flex; gap:0; }
.whenpick button, .agepick button{
  padding:9px 13px; cursor:pointer; font-family:var(--sans); font-size:13px;
  border:1px solid var(--line-strong); border-right:none;
  background:var(--surface); color:var(--text-2);
}
.whenpick button:last-child, .agepick button:last-child{ border-right:1px solid var(--line-strong); }
.whenpick button:hover, .agepick button:hover{ background:var(--paper); }
.whenpick button.on, .agepick button.on{
  background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500;
}

.planimpact{
  display:flex; gap:26px; flex-wrap:wrap;
  background:var(--paper); border-left:3px solid var(--low);
  padding:14px 18px; margin-bottom:16px;
}
.planimpact:empty{ display:none; }
.impactrow b{
  display:block; font-family:var(--display); font-size:19px;
  font-weight:600; letter-spacing:-0.02em; line-height:1;
}
.impactrow b.neg{ color:var(--high); }
.impactrow b.pos{ color:var(--low); }
.impactrow span{ display:block; font-size:12px; color:var(--text-2); margin-top:4px; }

@media (max-width:620px){
  .planrow{ gap:14px; }
  .whenpick, .agepick{ flex-wrap:wrap; }
  .planstep{ grid-template-columns:1fr; gap:10px; }
  .stepnum{ margin-bottom:2px; }
}

/* ---------- Footer legal links ---------- */

.legal{ font-size:12.5px; margin:0 0 14px; }
.legal a{ color:#9DB0AD; text-decoration:none; border-bottom:1px solid #22443F; }
.legal a:hover{ color:#fff; }


/* =========================================================================
   STICKY BAR — smooth

   Overrides the earlier collapsing-header rules. Nothing here changes
   layout: the masthead scrolls away normally and the bar fades in over the
   top, so there is no height animation to fight with the scroll.
   ========================================================================= */

.collapsing{ max-height:none !important; overflow:visible !important; opacity:1 !important; }
.collapsing.hid{ max-height:none !important; opacity:1 !important; }

.stickybar{
  position:sticky; top:0; z-index:40;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  will-change:opacity, transform;
}
.stickybar.scrolled{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .22s ease, transform .22s ease, visibility 0s;
}
.stickybar .mini{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .stickybar{ transition:opacity .01s linear; transform:none; }
  .stickybar.scrolled{ transform:none; }
}

/* =========================================================================
   CALL TO ACTION — lighter, especially on a phone
   ========================================================================= */

.herocta{
  position:relative; z-index:2;
  margin-top:26px; padding-top:22px;
  border-top:1px solid #1D3C38;
}

.ctamain{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ctabtn{
  display:inline-block; text-decoration:none;
  background:#6ED0B6; color:#07201C;
  font-family:var(--sans); font-size:15px; font-weight:600;
  padding:12px 24px; border-radius:2px;
  transition:background .15s ease;
}
.ctabtn:hover{ background:#8CE0C8; }
.ctaprice{ font-size:13.5px; color:#8FAEA8; }
.ctalink{
  font-size:13.5px; color:#A9C2BC; text-decoration:none;
  border-bottom:1px solid #2A5049; padding-bottom:2px; margin-left:auto;
}
.ctalink:hover{ color:#fff; border-bottom-color:#6ED0B6; }

.ctawhat{
  list-style:none; padding:0; margin:20px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ctawhat li{
  font-size:12.5px; color:#7FA79F; line-height:1.5;
  padding-left:13px; border-left:1px solid #22443F;
}
.ctawhat b{
  display:block; font-family:var(--display); font-size:14px;
  font-weight:500; color:#D7E3E0; margin-bottom:3px; letter-spacing:-0.008em;
}

/* On a phone the three-up list is the thing that makes it feel heavy, so it
   becomes one line of text rather than three blocks. */
@media (max-width:720px){
  .herocta{ margin-top:20px; padding-top:18px; }
  .ctamain{ gap:12px; }
  .ctabtn{ flex:1; text-align:center; padding:13px 18px; }
  .ctaprice{ order:3; flex-basis:100%; }
  .ctalink{ margin-left:0; }

  .ctawhat{ display:block; margin-top:14px; }
  .ctawhat li{
    display:inline; padding:0; border:none;
    font-size:12.5px; color:#7FA79F;
  }
  .ctawhat li b{ display:inline; font-family:var(--sans); font-size:12.5px; color:#A9C2BC; font-weight:500; }
  .ctawhat li b::after{ content:''; }
  .ctawhat li::after{ content:' · '; color:#3A5F59; }
  .ctawhat li:last-child::after{ content:''; }
  /* the explanatory half of each item is dropped, leaving three short labels */
  .ctawhat li{ font-size:0; }
  .ctawhat li b{ font-size:12.5px; }
  .ctawhat li::after{ font-size:12.5px; }
}

/* ---------- Admin mode pill ---------- */

.warnpill{
  display:inline-block; background:var(--med-bg); color:var(--med);
  font-size:11px; font-weight:600; padding:2px 8px; margin-right:7px;
}

/* =========================================================================
   STICKY BAR — out of the flow

   The previous version was position:sticky with opacity:0. A hidden sticky
   element still occupies its full height in the layout, which is what left
   the pale band sitting under the masthead doing nothing until you scrolled.

   Fixed positioning takes it out of the flow entirely, so there is no gap.
   It slides down from above rather than fading, which reads as the bar
   arriving rather than something appearing out of nowhere.
   ========================================================================= */

.stickybar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  opacity:0; visibility:hidden;
  transform:translateY(-100%);
  transition:transform .26s cubic-bezier(0.22, 0.61, 0.36, 1),
             opacity .18s ease,
             visibility 0s linear .26s;
  box-shadow:0 1px 0 rgba(13,27,30,0.08);
  will-change:transform;
}
.stickybar.scrolled{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:transform .26s cubic-bezier(0.22, 0.61, 0.36, 1),
             opacity .18s ease,
             visibility 0s;
  box-shadow:0 4px 18px rgba(13,27,30,0.16);
}

/* Nothing sits under it, so the masthead starts at the very top of the page */
.masthead{ margin-top:0; }

@media (prefers-reduced-motion: reduce){
  .stickybar{ transition:opacity .12s linear, visibility 0s linear .12s; transform:none; }
  .stickybar.scrolled{ transition:opacity .12s linear, visibility 0s; transform:none; }
}

/* =========================================================================
   CALL TO ACTION — an offer rather than a button
   ========================================================================= */

.herocta{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  margin-top:30px; padding:24px 26px;
  background:rgba(110,208,182,0.06);
  border:1px solid #235049;
  border-left:3px solid #6ED0B6;
}

.ctahook{
  margin:0 0 8px;
  font-family:var(--display);
  font-size:clamp(17px, 1.7vw, 21px);
  font-weight:500; letter-spacing:-0.018em; line-height:1.32;
  color:#EAF3F1;
}
.ctahook em{ font-style:normal; color:#6ED0B6; }

.ctasub{
  margin:0; max-width:52ch;
  font-size:13.5px; line-height:1.6; color:#9DB7B2;
}

.ctaact{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }

.ctabtn{
  display:block; text-decoration:none; text-align:center;
  background:#6ED0B6; color:#06211C;
  padding:14px 30px; border-radius:2px;
  transition:background .15s ease, transform .15s ease;
}
.ctabtn:hover{ background:#8CE7CE; transform:translateY(-1px); }
.ctabtn b{
  display:block; font-family:var(--sans);
  font-size:16px; font-weight:600; letter-spacing:-0.005em;
}
.ctabtn span{
  display:block; font-size:12px; font-weight:400;
  color:#0C4438; margin-top:3px;
}

.ctalink{
  text-align:center; font-size:13px; color:#8FAEA8;
  text-decoration:none; padding:2px 0;
}
.ctalink:hover{ color:#fff; text-decoration:underline; }

@media (max-width:860px){
  .herocta{
    grid-template-columns:1fr; gap:20px;
    margin-top:22px; padding:20px 20px 22px;
  }
  .ctahook{ font-size:17px; }
  .ctasub{ font-size:13px; }
  .ctabtn{ padding:15px 24px; }
}

/* =========================================================================
   CALL TO ACTION — the hand-drawn bit

   A wobbly ring round the button and a little arrow with a note, as if
   somebody has marked up a printout. It is decorative, so it is hidden from
   screen readers, drops away on narrow screens where there is no room for
   it, and the animation stops for anyone who has asked for less motion.
   ========================================================================= */

.ctaact{ position:relative; }

/* ---------- The ring ---------- */

.ctaring{ position:relative; display:block; }

.ctaring .ring{
  position:absolute;
  left:-14px; right:-14px; top:-11px; bottom:-11px;
  width:calc(100% + 28px); height:calc(100% + 22px);
  color:#F2B858;
  pointer-events:none;
  overflow:visible;
  /* drawn on, rather than simply present */
  stroke-dasharray:1100;
  stroke-dashoffset:1100;
  animation:draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) .45s forwards;
}
@keyframes draw{ to { stroke-dashoffset:0; } }

.ctaring .ring path{ vector-effect:non-scaling-stroke; }

/* ---------- The arrow and its note ---------- */

.ctascribble{
  position:absolute;
  left:-104px; top:-30px;
  width:112px; height:96px;
  color:#F2B858;
  pointer-events:none;
  opacity:0;
  animation:fadein .5s ease 1.25s forwards;
}
@keyframes fadein{ to { opacity:1; } }

.ctascribble .arrow{
  position:absolute; right:-6px; bottom:-6px;
  width:96px; height:72px;
  transform:rotate(-4deg);
  overflow:visible;
}

.ctanote{
  position:absolute; left:0; top:0;
  font-family:'Caveat', 'Bricolage Grotesque', cursive;
  font-size:26px; font-weight:600; line-height:1;
  color:#F2B858;
  transform:rotate(-7deg);
  white-space:nowrap;
}

/* ---------- Give the ring somewhere to live ---------- */

.herocta{ overflow:visible; }
.ctaact{ padding-top:2px; }

/* No room for marginalia on a narrow screen, and it would collide with the
   copy. The button carries itself. */
@media (max-width:900px){
  .ctascribble{ display:none; }
  .ctaring .ring{ left:-8px; right:-8px; width:calc(100% + 16px); }
}
@media (max-width:860px){
  .ctaring .ring{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ctaring .ring{ animation:none; stroke-dashoffset:0; }
  .ctascribble{ animation:none; opacity:1; }
}


/* ---------- Annotation: belt and braces ----------
   The markup is not generated below 1000px (see roomToScribble in ui.js).
   These are here so that if it ever is — a cached page, a resize after
   load — it still cannot appear where there is no room for it. */

@media (max-width:999px){
  .ctascribble, .ctaring .ring{ display:none !important; }
}

/* ---------- Skip link ----------
   Off screen until focused, so a keyboard user can jump past the masthead
   and navigation instead of tabbing through them on every page. */

.skiplink{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#6ED0B6; color:#06211C;
  font-family:var(--sans); font-size:14px; font-weight:600;
  padding:12px 20px; text-decoration:none;
}
.skiplink:focus{ left:8px; top:8px; outline:2px solid var(--ink); outline-offset:2px; }

main:focus{ outline:none; }

/* ---------- Admin: email list actions ---------- */

.mailbtns{ display:flex; gap:8px; flex:none; align-self:center; flex-wrap:wrap; }