/* kinplace shared tokens and small parts (re-haul, 20 Oct 2026).

   One stylesheet for every page the re-haul builds: the header, the Your plan
   dock and drawer, the schools map, the home page, Homes, the tools. Values come
   straight from the approved mockups (briefs/rehaul-mockups/*.dc.html).

   Use the tokens (var(--kp-...)) and these few parts; keep page layout in the
   page's own stylesheet. The class names here are fixed: other builds use them.

     .kp-chip            an outlined chip; .is-on filled mint; .is-star coral (the kept/favourite one)
     .kp-ofsted          Ofsted, an outlined chip with a small coloured dot: data-g="top|good|att|bad|none"
     .kp-rank            the league badge: "Top 4% (12/343)"; put the table's name in title=
     .kp-years           year squares, oldest first: <span class="kp-years"><i class="in"></i><i class="out"></i><i class="na"></i></span>
                         in  = a place reached this address that year (solid green, and only that)
                         out = it did not reach it that year
                         na  = we hold no figure for that year (never drawn as "out")
     .kp-btn             a 30px control; .kp-btn-p coral, .kp-btn-t teal, .kp-btn-g outlined, .kp-btn-sm 26px
     .kp-keep            the "Keep" toggle (aria-pressed="true" when kept), see plan-store.js
     .kp-eyebrow         the small mono capitals over a heading
     .kp-src             a figure's source and year, small and muted
     .kp-opt             the dashed "Add" line an empty section shows instead of a blank box
   On phones (under 700px) every control is 44px tall. */

@font-face{font-family:"Gabarito";src:url("/fonts/gabarito-latin.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* colour */
  --kp-teal:#0E3B43;          /* brand, headings, the drawer's top */
  --kp-coral:#CF3F2E;         /* the action colour: buttons, "Continue" */
  --kp-coral-2:#FF6B5B;       /* the accent stroke in icons, the count pill on the tab */
  --kp-coral-wash:#FFF4F1;
  --kp-coral-line:#FFD9D1;
  --kp-mint:#D5F5E8;
  --kp-mint-2:#BDE8DA;        /* small text on teal */
  --kp-wash:#F2FBF7;          /* hover, the open menu item */
  --kp-bg:#F7FAF9;            /* page background, list rows */
  --kp-paper:#FFFFFF;
  --kp-ink:#1F3A40;           /* body text */
  --kp-ink-2:#33484D;
  --kp-head:#0E3B43;          /* headings and names */
  --kp-muted:#4B6469;         /* small text */
  --kp-line:#E3ECEA;
  --kp-line-2:#DCE6E4;
  --kp-line-3:#CFDCD9;
  --kp-soft:#EEF3F2;          /* row borders */
  --kp-grey-fill:#F2F6F5;     /* segmented controls */
  --kp-in:#2E8B74;            /* a place reached the address that year: solid green, nothing else */
  --kp-out:#C9D6D3;
  --kp-good-ink:#0B6B4E;
  --kp-good-wash:#E9F7F0;
  --kp-amber:#8A5A00;
  --kp-amber-wash:#FFF5DF;
  --kp-rank:#23408E;          /* the league badge */
  --kp-ofsted-top:#0B6B4E; --kp-ofsted-good:#2E8B74; --kp-ofsted-att:#C78A00; --kp-ofsted-bad:#CF3F2E;
  --kp-shadow:0 18px 40px rgba(14,59,67,.10);
  --kp-shadow-2:0 10px 30px rgba(14,59,67,.14);

  /* type: dense desktop, 13px body */
  --kp-font:"Gabarito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --kp-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --kp-fs-body:13px;
  --kp-fs-small:11.5px;
  --kp-fs-xs:11px;
  --kp-fs-tiny:10.5px;
  --kp-fs-lead:13.5px;
  --kp-fs-h3:14px;
  --kp-fs-h2:15.5px;
  --kp-fs-h1:27.5px;

  /* controls */
  --kp-ctl:30px;
  --kp-ctl-sm:26px;
  --kp-ctl-lg:34px;
  --kp-tap:44px;
  --kp-r:8px;
  --kp-r-lg:16px;
  --kp-gutter:24px;
}
@media (max-width:699px){:root{--kp-ctl:44px;--kp-ctl-sm:44px;--kp-ctl-lg:44px;--kp-gutter:16px}}

/* ---- parts ---- */
.kp-eyebrow{font:500 11px var(--kp-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--kp-muted)}
.kp-src{font-size:var(--kp-fs-xs);color:var(--kp-muted)}
.kp-src a{color:inherit}

.kp-chip{display:inline-flex;align-items:center;gap:5px;font:600 11px/1.5 var(--kp-font);border:1px solid var(--kp-line-2);
  border-radius:999px;padding:1px 8px;background:var(--kp-paper);color:var(--kp-head);white-space:nowrap;text-decoration:none}
.kp-chip.is-on{background:var(--kp-mint);border-color:var(--kp-mint)}
.kp-chip.is-star{border-color:var(--kp-coral-2);background:var(--kp-coral-wash)}
button.kp-chip{cursor:pointer}

.kp-ofsted{display:inline-flex;align-items:center;gap:5px;font:600 11px/1.5 var(--kp-font);border:1px solid var(--kp-line-2);
  border-radius:999px;padding:0 7px;background:var(--kp-paper);color:var(--kp-head);white-space:nowrap}
.kp-ofsted:before{content:"";width:6px;height:6px;border-radius:6px;background:var(--kp-line-3);flex:none}
.kp-ofsted[data-g="top"]:before{background:var(--kp-ofsted-top)}
.kp-ofsted[data-g="good"]:before{background:var(--kp-ofsted-good)}
.kp-ofsted[data-g="att"]:before{background:var(--kp-ofsted-att)}
.kp-ofsted[data-g="bad"]:before{background:var(--kp-ofsted-bad)}

.kp-rank{display:inline-flex;align-items:center;gap:3px;font:700 11px/1.4 var(--kp-font);color:var(--kp-rank);white-space:nowrap}
.kp-rank.is-pill{border:1px solid #D6DEF2;background:#F3F6FD;border-radius:999px;padding:0 7px}
.kp-rank:before{content:"\1F3C6";font-size:.95em}
.kp-rank.no-cup:before{content:none}

.kp-years{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.kp-years i{width:7px;height:7px;border-radius:2px;display:block;background:var(--kp-out);box-sizing:border-box}
.kp-years i.in{background:var(--kp-in)}
.kp-years i.out{background:var(--kp-out)}
.kp-years i.na{background:transparent;border:1px dashed var(--kp-line-3)}
.kp-years.is-lg i{width:12px;height:12px;border-radius:3px}

.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--kp-ctl);padding:0 12px;border-radius:var(--kp-r);
  border:1px solid var(--kp-line-3);background:var(--kp-paper);color:var(--kp-head);font:600 12.5px var(--kp-font);cursor:pointer;
  text-decoration:none;white-space:nowrap;box-sizing:border-box}
.kp-btn:hover{background:var(--kp-wash)}
.kp-btn-p{background:var(--kp-coral);border-color:var(--kp-coral);color:#fff}
.kp-btn-p:hover{background:#A93122;border-color:#A93122}
.kp-btn-t{background:var(--kp-teal);border-color:var(--kp-teal);color:#fff}
.kp-btn-t:hover{background:#174D57}
.kp-btn-g{background:transparent}
.kp-btn-sm{height:var(--kp-ctl-sm);padding:0 9px;font-size:11px;border-radius:6px}

.kp-keep{display:inline-flex;align-items:center;gap:5px;height:var(--kp-ctl-sm);padding:0 9px;border-radius:999px;border:1px solid var(--kp-line-3);
  background:var(--kp-paper);color:var(--kp-head);font:600 11.5px var(--kp-font);cursor:pointer;white-space:nowrap}
.kp-keep:before{content:"\2606"}
.kp-keep[aria-pressed="true"]{border-color:var(--kp-coral-2);background:var(--kp-coral-wash);color:var(--kp-coral)}
.kp-keep[aria-pressed="true"]:before{content:"\2605"}

.kp-opt{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--kp-fs-xs);color:var(--kp-muted);
  padding:5px 7px;border:1px dashed var(--kp-line-3);border-radius:8px}
.kp-opt a{font-weight:600;color:var(--kp-head);text-decoration:none;white-space:nowrap}

:where(.kp-btn,.kp-keep,.kp-chip):focus-visible{outline:2px solid var(--kp-coral);outline-offset:2px}