/* Shared shell: colour system, typography and the primitives (card, chip, pill
   button, links, footer) used by index.html, registry.html and report.html.

   The look borrows from UK estate-agency particulars rather than property
   portals: deep green ink on warm stone, a serif for display type only, hairline
   rules, and small-caps captions. It lands here rather than in a per-page
   stylesheet because the registry's own fields are already brochure captions —
   licence, coverage, update cadence — so all three pages want the same set. */

/* Newsreader for display, Inter for everything else. Both are Latin subsets,
   variable across weight, and self-hosted, so no page makes a third-party
   request and no CSP needs a Google host allowed.

   Newsreader over a higher-contrast display serif because most of the serif on
   these pages is not the 68px masthead — it is 19px dataset titles, 45 of them
   down the catalogue. Newsreader is drawn for screen text and holds up there;
   its opsz axis is pinned to 36 so the shipped file is 58 KB, not 132 KB.
   Inter replaces the system stack for the same reason in the other direction:
   the small print here runs 12.5–15px, and Inter's letterfit at those sizes is
   where the readability actually comes from. */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#f4f1ea; --card:#fffdf9; --ink:#1c2b24; --muted:#5f665c; --line:#ddd6c9;
  --accent:#1f4d3a; --accent-soft:#e6ece7; --chip:#eeeae0;
  /* Brass. Decorative only — 3.4:1 on stone, so it rules and borders but never
     sets text. */
  --rule:#a67c2e;
  /* Text laid on --accent. A literal #fff works in light mode but fails badly on
     the pale dark-mode accent, so the pairing is a token rather than a constant. */
  --on-accent:#ffffff;
  --good:#0a7d32; --warn:#8a5a00; --bad:#a33030;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#121611; --card:#1a1f18; --ink:#e9e6dd; --muted:#9aa196; --line:#2c342a;
         --accent:#8fc0a4; --accent-soft:#1b2a20; --chip:#232b21;
         --rule:#c9a253; --on-accent:#0e1310;
         --good:#6fc98f; --warn:#e0b26a; --bad:#f09a92; }
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 var(--ui);background:var(--bg);color:var(--ink);padding:0}
/* One shell for all three pages — the gutters and measure must not shift when
   you click between them. Page padding lives here rather than on body so the
   masthead bar can sit flush at the top. */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px 80px}
h1{font-family:var(--display);font-weight:600;font-size:33px;line-height:1.15;letter-spacing:-.005em;margin:0 0 8px}
/* Measure, not pixels. At 16px this lands around 70 characters — past ~75 the
   eye loses the line it is returning to. */
.sub{color:var(--muted);max-width:70ch;margin:0 0 24px}

/* Masthead bar: brand lockup left, section nav right, hairline under. Identical
   on every page, so only the `.here` link and the h1 beneath it change.

   Sticky, so the brand and the section nav stay reachable down a 45-card
   catalogue or an eleven-section report. It needs an opaque background and a
   z-index above the report's own sticky anchor strip, which docks beneath it —
   see --topbar-h. */
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:16px 0 14px;margin:0 0 30px;border-bottom:1px solid var(--line)}

/* Height of the bar, published so a second sticky element can sit under it.
   js/topbar.js keeps this exact — the fallback matters only for the first
   paint and for anyone with JS off. */
:root{--topbar-h:66px}

/* The lockup: keyline house with a rising bar chart inside it. The house is ink
   and inherits currentColor so the hover state carries both halves; the bars are
   brass. It is a graphic, never the only carrier of meaning, and the wordmark
   next to it always says the name in full. */
.topbar .mark{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:.005em;color:var(--ink);text-decoration:none;white-space:nowrap}
.topbar .mark:hover{color:var(--accent)}
.logo{width:29px;height:29px;flex:none;display:block}
.logo .house{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linejoin:round}
.logo .bars{stroke:var(--rule);stroke-width:2.3;stroke-linecap:round;fill:none}
.topbar .nav{margin:0}

/* Four sections wrap to three rows on a phone, and a sticky bar that deep eats
   a fifth of the screen for good. Below this width the lockup shrinks and the
   nav becomes one scrollable row — the same move the report already makes with
   its category anchors. */
@media (max-width:560px){
  .topbar{padding:12px 0 10px;margin:0 0 22px;gap:10px}
  .topbar .mark{font-size:17px;gap:8px}
  .logo{width:25px;height:25px}
  .topbar .nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    width:100%;gap:16px;scrollbar-width:none;
    /* The last section is clipped mid-word with the scrollbar hidden, which
       reads as a rendering fault rather than as "there is more". Fading the
       edge is the only cue left that it scrolls. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .topbar .nav::-webkit-scrollbar{display:none}
  .topbar .nav a{white-space:nowrap}
}

.nav{display:flex;gap:18px;font-size:14px;margin:0 0 18px}
.nav a{color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.nav a.here{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.nav a:hover{color:var(--accent)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
input[type=search],input[type=text],input[type=password]{flex:1;min-width:240px;padding:11px 14px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font-family:inherit;font-size:16px;outline:none}
input:focus{border-color:var(--accent)}
/* The postcode fields uppercase what you type. The example should not be
   shouted back at you, on either page. */
input::placeholder{text-transform:none;letter-spacing:normal}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters button,.pill{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:7px 13px;border-radius:999px;font-family:inherit;font-size:13.5px;cursor:pointer;text-decoration:none;display:inline-block}
.filters button.active,.pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
select{padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font-family:inherit;font-size:14.5px}
.btn{border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);padding:11px 17px;border-radius:4px;font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer}
.btn.ghost{background:var(--card);color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}

.count{color:var(--muted);font-size:13.5px;margin:0 0 14px}
/* Deep-linked cards (registry.html#src-epc) must clear the sticky masthead. */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px;margin-bottom:14px;
  scroll-margin-top:calc(var(--topbar-h) + 14px)}
.card h2{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3;margin:0 0 3px}
.pub{color:var(--muted);font-size:13.5px;margin:0 0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.chip{background:var(--chip);color:var(--muted);border-radius:3px;padding:3px 9px;font-size:12.5px}
.chip.cat{background:var(--accent-soft);color:var(--accent);font-weight:600}
.links{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;margin:0 0 12px}
.links a,a.src{color:var(--accent);text-decoration:none;word-break:break-all}
.links a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;background:var(--chip);border-radius:4px;padding:9px 11px;margin:0 0 12px;word-break:break-all;color:var(--ink)}
.mono b{color:var(--muted);font-weight:600;font-family:inherit}

/* The particulars caption: LICENCE, COVERAGE, UPDATE CADENCE. `.qhead` predates
   it and is the same thing, kept so existing markup does not have to change. */
.label,.qhead{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700;margin:0 0 6px}

/* Brochure double rule — a hairline under a brass keyline. */
.rule{border:0;border-top:2px solid var(--rule);margin:0 0 18px;position:relative}
.rule::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--line)}

/* Figures are compared down columns far more than they are read in prose. */
.num,.figure,td.num{font-variant-numeric:tabular-nums}

footer{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:32px;border-top:1px solid var(--line);padding-top:16px}
footer p{margin:0 0 10px;max-width:80ch}
.err{color:var(--bad)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}