/* ============================================================================
   OurIdea.ai Directory
   Design note: this is a register, not a marketing page. The data is sparse
   and official, so the layout is a ruled list with a mono column for the
   things that are literally identifiers. Cards would imply a richness the
   records do not have. Boldness is spent in exactly two places: the stat
   strip and the abi. Clone panel.
   ========================================================================== */

/* ---- fonts, served from this site --------------------------------------
   Variable woff2 subsets (Fontsource builds, OFL-1.1, licences in the same
   directory). Declared under the plain family names the rest of this file
   already uses, with a weight RANGE, so one file per subset covers every
   weight. URLs are relative to this stylesheet, so they resolve in both the
   deployed site and the file:// preview. latin-ext carries a unicode-range
   and only downloads when a page actually uses such a character. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/montserrat-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- tokens ------------------------------------------------------------
   Every value here is copied verbatim from the brand guide, which took them
   from the shipping app. Nothing is approximated. Where the guide does not
   give a value it is derived with color-mix from one that it does, rather
   than invented.

   The site OPENS IN LIGHT. Dark is an explicit choice, and when chosen it is
   the app platform's own dark theme (#000 page, #0a0a0a cards), not a
   generic inversion. So there is no prefers-color-scheme block: following
   the OS would mean a visitor's laptop decides which brand they see.

   THE CONTRAST RULE, and it is not decorative:
     #7C3AED carries white text at 5.70:1 and is legible ON light.
     #a855f7 reads on near-black at 5.12:1 but only 3.56:1 on white, which
     fails. So --accent flips per theme and is the ONLY token used for
     accent-coloured text. --purple stays #7C3AED in both themes because it
     is the fill behind white text, where it must not change.
--------------------------------------------------------------------------*/
:root{
  /* light theme, from the guide */
  --bg:#FAFAFB;
  --surface:#ffffff;
  --surface-2:#F1F1F4;
  --line:rgba(0,0,0,0.08);
  --line-soft:rgba(0,0,0,0.05);
  --border2:rgba(0,0,0,0.14);

  --ink:#0c0a14;
  --body:#3d3757;
  --muted:#6b6490;
  --faint:color-mix(in srgb, #6b6490 62%, #FAFAFB);

  --shadow:0 2px 20px rgba(0,0,0,0.07);

  /* brand, shared across themes */
  --purple:#7C3AED;            /* accentSolid: fills that carry white text */
  --pink:#ec4899;
  --grad:linear-gradient(135deg,#a855f7,#ec4899);
  --grad-bg:linear-gradient(135deg,rgba(168,85,247,0.10),rgba(236,72,153,0.06));

  --accent:#7c3aed;            /* accent TEXT on light. Never #a855f7 here. */
  --wash:rgba(168,85,247,0.09);

  --ok:#3aa87a;
  --ok-bg:rgba(58,168,122,0.13);
  --warn:#b8860b;
  --warn-bg:rgba(184,134,11,0.13);
  /* The pill TEXT sits on its own tinted wash, not on the page, so the
     border colour is too light to read at 10px: #3aa87a on that wash is
     2.62:1. These are the same hues darkened until they clear 4.5:1 against
     the composited pill background, and they are used for the label only. */
  --ok-ink:#297857;            /* 4.70:1 on the ok wash */
  --warn-ink:#866208;          /* 4.87:1 on a card, 4.68:1 on the page */

  --rad:14px;
  --rad-sm:10px;
  --maxw:1140px;
  --focus:#7c3aed;
}

:root[data-theme="dark"]{
  /* the app platform's dark theme, verbatim */
  --bg:#000000;
  --surface:#0a0a0a;
  --surface-2:#121212;
  --line:#1f1f1f;
  --line-soft:#181818;
  --border2:#2c2c2c;

  --ink:#e2e4e8;
  --body:#858c95;
  --muted:#858c95;
  --faint:#5a616a;

  --shadow:0 4px 24px rgba(0,0,0,0.4);

  --purple:#7C3AED;
  --pink:#ec4899;

  --accent:#a855f7;            /* accent TEXT on near-black. Legible here. */
  --wash:rgba(168,85,247,0.10);

  --ok:#4ec994;
  --ok-bg:rgba(78,201,148,0.13);
  --warn:#e0b84c;
  --warn-bg:rgba(224,184,76,0.13);
  /* On near-black these already clear 4.5:1, so the ink is the hue itself. */
  --ok-ink:#4ec994;
  --warn-ink:#e0b84c;

  --focus:#a855f7;
}

/* ---- base ---------------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--ink); margin:0; text-wrap:balance}
/* Tight negative tracking on large text is a brand signature. Headings never
   sit at default spacing. */
h1{font-family:Montserrat,sans-serif; font-weight:900; letter-spacing:-.045em; line-height:1.05}
h2{font-family:Montserrat,sans-serif; font-weight:800; letter-spacing:-.03em}
h3{font-weight:700; font-size:15px; letter-spacing:-.01em}
/* Avoids a one-word last line in the sparse, short paragraphs this site is
   mostly made of. Ignored by browsers that do not support it. */
p{margin:0; text-wrap:pretty}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--pink)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
/* A row is a grid, so a focus ring drawn on the inner link alone traced an
   odd shape across the middle of it. Lifting the row and ringing the whole
   thing matches what a keyboard user thinks they have selected. */
.row:focus-within{background:var(--surface-2)}
.row:has(.row-main:focus-visible){outline:2px solid var(--focus); outline-offset:-2px; border-radius:6px}
.row:has(.row-main:focus-visible) .row-main:focus-visible{outline:none}

/* Anchored headings would otherwise land underneath the sticky header. */
:target{scroll-margin-top:84px}
h1,h2,h3,section[id],[id]{scroll-margin-top:84px}

/* Selection picks up the brand rather than the browser default blue. */
::selection{background:color-mix(in srgb, var(--purple) 22%, transparent); color:var(--ink)}
.mono,.card-n,.row-inc{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--accent);
}
.tiny{font-size:13px; color:var(--muted)}
/* A link that is the whole paragraph behaves like a button, so it gets a
   24px hit box. Negative margin keeps the surrounding rhythm unchanged. */
p > a:only-child{display:inline-block; padding:4px 0; margin:-4px 0}
.unstated{color:var(--faint); font-style:italic; font-size:.92em}

/* ---- fixture warning ----------------------------------------------------*/
.fixture-bar{
  background:var(--warn-bg); color:var(--warn-ink); border-bottom:1px solid var(--warn);
  font-size:13px; padding:10px 20px; text-align:center; font-weight:500;
}
.fixture-bar code{font-family:"JetBrains Mono",monospace; font-size:12px}

/* ---- header -------------------------------------------------------------*/
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:60px; display:flex; align-items:center; gap:24px;
}
/* The mark is the word "abi" followed by a gradient dot, built in markup
   rather than as an image so it inherits the current text colour and scales
   cleanly. The dot is sized in em, so it tracks the font size. */
.abi{
  display:inline-flex; align-items:baseline; gap:0;
  font-weight:900; letter-spacing:-.04em; line-height:1;
  color:var(--ink); font-size:22px;
}
.abi .dot{
  width:.32em; height:.32em; border-radius:50%;
  background:var(--grad);
  display:inline-block; margin-left:.05em; margin-bottom:.05em;
  flex-shrink:0;
}
.brand{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  white-space:nowrap; padding:4px 0;
}
.brand-txt{display:flex; flex-direction:column; gap:0; border-left:1px solid var(--line); padding-left:11px}
.brand-name{
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:10px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--body); line-height:1.5;
}
.brand:hover .brand-name{color:var(--ink)}
.byline{display:flex; align-items:baseline; gap:3px; margin-top:1px}
.byline .by{font-size:9px;  color:var(--muted); font-weight:400; letter-spacing:.02em}
.byline .oi{font-size:11px; color:var(--muted); font-weight:700; letter-spacing:-.01em}
.byline .ai{font-size:11px; color:var(--accent); font-weight:700; letter-spacing:-.01em}
header.site nav{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
header.site nav a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
  padding:4px 0; border-bottom:2px solid transparent;
}
header.site nav a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.theme{
  background:none; border:1px solid var(--line); color:var(--muted);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px;
  display:grid; place-items:center; flex:none;
}
.theme:hover{color:var(--accent); border-color:var(--accent)}
.theme svg{display:block}

/* ---- layout -------------------------------------------------------------*/
main{
  max-width:var(--maxw); margin:0 auto; padding:40px 24px 88px;
  display:flex; flex-direction:column; gap:40px;
}
.crumbs{font-size:13px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; margin-bottom:-16px}
.crumbs a{color:var(--muted); text-decoration:none; padding:3px 0; display:inline-block}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-current]{color:var(--ink); font-weight:500}

/* ---- hero ---------------------------------------------------------------*/
.hero{display:flex; flex-direction:column; gap:14px; padding-top:12px}
.hero h1{font-size:clamp(30px,4.9vw,46px); max-width:20ch}
.hero.small h1{font-size:clamp(26px,4vw,38px); max-width:22ch}
.hero.tight{gap:11px; padding-top:6px}
.hero.tight h1{max-width:23ch}
.lede{font-size:17px; color:var(--body); max-width:68ch; line-height:1.62}

/* the one bold moment on the index */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; margin:14px 0 0; background:var(--line);
  border:1px solid var(--line); border-radius:var(--rad); overflow:hidden;
}
.stats > div{background:var(--surface); padding:16px 18px; display:flex; flex-direction:column; gap:3px}
.stats dt{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.stats dd{
  margin:0; font-family:Montserrat,sans-serif; font-weight:800; font-size:22px;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stats > div:first-child dd{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- filters ------------------------------------------------------------*/
.panel{display:flex; flex-direction:column; gap:0}
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--rad) var(--rad) 0 0; border-bottom:none;
  position:sticky; top:60px; z-index:20;
}
.f-search{flex:1 1 260px}
.filters input[type="search"],.filters select{
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:9px 12px;
}
.filters select{min-width:190px; cursor:pointer}
.filters input::placeholder{color:var(--faint)}
.filters input:focus,.filters select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ghost{
  font:inherit; font-size:13.5px; font-weight:500; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:8px;
  padding:9px 14px; cursor:pointer;
}
.ghost:hover{color:var(--ink); border-color:var(--accent)}

/* ---- the register list --------------------------------------------------*/
.list-head,.row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 150px 66px 96px;
  gap:14px; align-items:center;
}
.list-head{
  padding:9px 18px; background:var(--wash); border:1px solid var(--line); border-bottom:none;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.rows{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:0 0 var(--rad) var(--rad);
  background:var(--surface); overflow:hidden;
}
.row{
  padding:11px 18px; border-bottom:1px solid var(--line-soft);
  position:relative; transition:background .12s ease;
}
.row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); opacity:0; transition:opacity .12s ease;
}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface-2)}
.row:hover::before{opacity:1}
.row[hidden]{display:none}
.row-main{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  text-decoration:none; color:inherit;
}
.row-name{
  font-weight:600; color:var(--ink); font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row:hover .row-name{color:var(--accent)}
.row-sub{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-loc{font-size:13.5px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-inc{font-size:13px; color:var(--muted)}
.count{padding:14px 2px 0; font-size:13px; color:var(--muted)}
.count span{font-family:"JetBrains Mono",monospace; color:var(--ink); font-weight:500}
.empty{padding:36px 18px; text-align:center; color:var(--muted); font-size:14.5px}

/* ---- pills --------------------------------------------------------------*/
.pill{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; border:1px solid transparent;
}
.pill.ok{color:var(--ok-ink); background:var(--ok-bg); border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.pill.warn{color:var(--warn-ink); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.pill.self{color:var(--accent); background:var(--wash); border-color:color-mix(in srgb,var(--purple) 30%,transparent)}

/* ---- honest block -------------------------------------------------------*/
.honest{
  border:1px solid var(--line); border-radius:var(--rad);
  background:var(--surface); padding:26px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.honest h2{font-size:19px}
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px}
.two h3{color:var(--muted); font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px}
.two p{font-size:14.5px}

/* ---- cards (category / location indexes) --------------------------------*/
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.cards.tight{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card a{
  display:flex; flex-direction:column; gap:7px; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:20px; text-decoration:none; color:inherit; transition:border-color .14s ease, transform .14s ease;
}
.card a:hover{border-color:var(--accent); transform:translateY(-1px)}
.card-n{
  font-size:12px; font-weight:500; color:var(--accent);
  background:var(--wash); align-self:flex-start; padding:2px 8px; border-radius:5px;
}
.card h2{font-size:17px}
.card p{font-size:13.5px; color:var(--muted); line-height:1.55}

/* ---- profile ------------------------------------------------------------*/
.profile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:30px 32px; display:flex; flex-direction:column; gap:18px;
}
.p-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}
.p-head h1{font-size:clamp(24px,3.6vw,33px)}
.p-sub{font-size:14px; color:var(--muted); margin-top:5px}
h2.sec{
  font-family:"JetBrains Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  border-top:1px solid var(--line); padding-top:18px; margin-top:4px;
}
.alert{
  background:var(--warn-bg); color:var(--warn); border-left:3px solid var(--warn);
  padding:12px 16px; border-radius:0 8px 8px 0; font-size:14px;
}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.facts > div{background:var(--surface-2); padding:14px 16px}
.facts > div.wide{grid-column:1/-1}
.facts dt{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.facts dd{margin:0; font-size:14.5px; color:var(--ink)}
.sics{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:14px}
.sics .mono{color:var(--accent); font-size:12.5px; margin-right:7px}
.prov{font-size:13px; color:var(--muted); line-height:1.6; max-width:78ch}
.ext::after{content:" ↗"; font-size:.85em}

.declared{
  border:1px solid var(--line); border-radius:10px; padding:22px 24px;
  display:flex; flex-direction:column; gap:11px; background:var(--surface-2);
}
.declared.empty-declared{border-style:dashed}
.declared-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.declared-head h2{font-size:17px}
.declared p{font-size:14.5px}
.declared-body{color:var(--body)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--body);
  background:var(--surface); border:1px solid var(--line); padding:3px 9px; border-radius:6px;
}

/* ---- prose (about) ------------------------------------------------------*/
.prose{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:34px 36px; max-width:74ch; display:flex; flex-direction:column; gap:14px;
}
.prose h1{font-size:clamp(26px,4vw,38px); margin-bottom:6px}
.prose h2{font-size:18px; margin-top:16px}
.prose ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:7px}
.prose li::marker{color:var(--accent)}

/* ---- abi. Clone panel: the second bold moment ---------------------------*/
.cta{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--rad);
  background:var(--surface); padding:32px 34px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.cta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
}
.cta h2{font-size:23px; max-width:26ch}
.cta p{font-size:15px; max-width:64ch}
/* Solid purple, never a gradient. Gradient fills belong to the logo dot,
   headline accents and thin rules. #7C3AED carries white text at 5.70:1. */
.btn{
  display:inline-block; margin-top:8px; background:var(--purple); color:#fff;
  font-weight:700; font-size:14.5px; text-decoration:none;
  padding:11px 22px; border-radius:var(--rad-sm); transition:opacity .15s ease;
}
.btn:hover{opacity:.88; color:#fff}

/* ---- footer -------------------------------------------------------------*/
footer.site{border-top:1px solid var(--line); background:var(--surface); margin-top:8px}
.foot{
  max-width:var(--maxw); margin:0 auto; padding:34px 24px 48px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px;
}
.foot p{font-size:13px; color:var(--muted); line-height:1.62; margin-bottom:9px; max-width:62ch}
.fw{color:var(--ink); font-weight:600; font-size:13.5px; font-family:Montserrat,sans-serif}
/* Footer links were 16px tall, under the 24px minimum for a standalone
   control. Padding gives the thumb something to hit without moving anything
   visually, and the negative margin keeps the line rhythm. */
.foot a{display:inline-block; padding:4px 0; margin:-4px 0}

/* ---- narrow -------------------------------------------------------------*/
@media (max-width:820px){
  .list-head{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:14px 16px}
  .row-main{grid-column:1; grid-row:1}
  .row-status{grid-column:2; grid-row:1; justify-self:end}
  .row-loc{grid-column:1; grid-row:2; font-size:12.5px; color:var(--muted)}
  .row-inc{grid-column:2; grid-row:2; justify-self:end; font-size:12px}
  .filters{position:static}
  .profile,.prose,.cta,.honest{padding:22px 20px}

  /* The header was one fixed-height flex row, so six nav items on a narrow
     screen wrapped INSIDE a 60px box and spilled over the page. Two rows
     instead: brand and theme toggle, then the nav as a single scrolling
     strip. No hamburger, because hiding navigation behind a tap costs more
     than a strip the thumb can flick, and it would need JavaScript to do it. */
  .bar{
    flex-wrap:wrap; height:auto; min-height:56px;
    padding:9px 16px; gap:8px 14px; align-items:center;
  }
  /* Explicit order: the nav is a full-width flex item, so without this the
     toggle is pushed to a third row of its own. */
  .brand{order:1; flex:1 1 auto; min-width:0}
  .theme{order:2; margin-left:auto}
  header.site nav{
    order:3;
    flex:1 0 100%; margin-left:0; gap:18px; font-size:13.5px;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -ms-overflow-style:none; padding-bottom:1px;
    scroll-padding-inline:16px;
    /* The strip has more in it than fits, and a hard cut at the edge looks
       like the end of the list rather than the middle of it. Fading the
       last few pixels is the affordance; the trailing space guarantees the
       next item is partly visible, which is what actually tells a thumb
       there is more. */
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  header.site nav::after{content:''; flex:0 0 22px}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a{white-space:nowrap; padding:3px 0 5px}
}

/* Below this the sticky header costs more screen than it returns: a phone
   scroll back to the top is one flick, and the filter rail already goes
   static at 820. */
@media (max-width:640px){
  header.site{position:static}
  .bar{padding:8px 14px}
  main{padding:28px 16px 64px; gap:30px}
}

/* Filter controls sized themselves by content, which left a ragged stack on
   a phone. A two-column grid with a full-width search gives every control a
   predictable, thumb-sized hit area. */
@media (max-width:560px){
  .filters{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px}
  .f-search{grid-column:1 / -1}
  .f-sel{min-width:0}
  .filters select{min-width:0; width:100%}
  .filters .ghost{width:100%; justify-content:center; padding:10px 12px}
  .filters .pin{gap:6px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .card a:hover,.btn:hover{transform:none}
}


/* ==========================================================================
   Additions: shortlist, sort, freshness strip, insights, charts, pager
   ========================================================================== */

/* ---- shortlist star -----------------------------------------------------*/
.star{
  background:none; border:none; padding:6px; margin:-6px; cursor:pointer;
  min-width:26px; min-height:26px;
  color:var(--faint); display:grid; place-items:center; border-radius:6px;
  transition:color .12s ease, transform .12s ease;
}
.star svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.star:hover{color:var(--accent); transform:scale(1.12)}
.row.is-saved .star{color:var(--pink)}
.row.is-saved .star svg{fill:currentColor; stroke:currentColor}
.row.is-saved{background:color-mix(in srgb, var(--pink) 5%, var(--surface))}

.ghost.pin{display:inline-flex; align-items:center; gap:7px}
.ghost.pin svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.ghost.pin.has-any{color:var(--ink); border-color:color-mix(in srgb,var(--pink) 40%,transparent)}
.ghost.pin.has-any svg{fill:var(--pink); stroke:var(--pink)}
.ghost.pin[aria-pressed="true"]{
  color:#fff; background:var(--purple); border-color:var(--purple);
}
.ghost.pin[aria-pressed="true"] svg{fill:#fff; stroke:#fff}
.ghost.pin span{font-variant-numeric:tabular-nums; font-family:"JetBrains Mono",monospace; font-size:12px}

/* ---- freshness strip / related ------------------------------------------*/
.strip{display:flex; flex-direction:column; gap:16px}
.strip-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.strip-head h2{font-size:20px; margin-top:3px}
.more{font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; display:inline-block; padding:4px 0}
.more::after{content:" →"}
.newest{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px;
}
.newest a{
  display:flex; flex-direction:column; gap:3px; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:13px 15px; text-decoration:none; color:inherit;
  border-left:3px solid var(--accent); transition:border-color .14s ease;
}
.newest a:hover{border-color:var(--accent)}
.n-name{font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35}
.newest a:hover .n-name{color:var(--accent)}
.n-meta{font-size:12.5px; color:var(--muted)}
.n-meta .mono{font-family:"JetBrains Mono",monospace}

/* ---- pager --------------------------------------------------------------*/
.pager{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pg{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface);
  min-width:0; transition:border-color .14s ease;
}
.pg:hover{border-color:var(--accent)}
.pg span{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.pg strong{font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg.next{text-align:right}

/* ---- insights: stat tiles ----------------------------------------------*/
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:20px 22px; display:flex; flex-direction:column; gap:4px; position:relative; overflow:hidden;
}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad); opacity:.55}
.tile-v{
  font-family:Montserrat,sans-serif; font-weight:900; font-size:30px; line-height:1.05;
  color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.tile-l{font-size:13.5px; font-weight:600; color:var(--body)}
.tile-n{font-size:12px; color:var(--muted)}

.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:20px}
.chartcard{gap:12px}
.lead-note{max-width:70ch}

/* ---- charts -------------------------------------------------------------*/
.chart{margin:6px 0 0; display:flex; flex-direction:column; gap:0}
.chart svg{width:100%; height:190px; display:block; overflow:visible}
.chart svg.chart-axis{height:18px}
.c-grid{stroke:var(--line); stroke-width:1; stroke-dasharray:2 4}
.c-axis{stroke:var(--line); stroke-width:1}
.c-fill{fill:var(--purple); transition:fill .12s ease}
.c-hit{fill:transparent}
.c-bar{cursor:default; outline:none}
.c-bar:hover .c-fill,.c-bar.is-on .c-fill,.c-bar:focus-visible .c-fill{fill:var(--pink)}
.c-bar:focus-visible .c-hit{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.c-val{
  font-family:"JetBrains Mono",monospace; font-size:11px; fill:var(--ink);
  font-variant-numeric:tabular-nums;
}
.c-tick{font-family:"JetBrains Mono",monospace; font-size:10px; fill:var(--muted)}
.c-tip{
  position:absolute; transform:translate(-50%,-100%); z-index:60; pointer-events:none;
  background:var(--ink); color:var(--bg); font-size:12px; font-weight:500;
  padding:5px 9px; border-radius:6px; white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
}

/* ---- ranked bars --------------------------------------------------------*/
.rank{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.rank-row{border-radius:6px}
.rank-row > *{
  display:grid; grid-template-columns:118px minmax(0,1fr) 44px; gap:12px;
  align-items:center; padding:5px 7px; text-decoration:none; color:inherit; border-radius:6px;
}
.rank-row a{color:inherit; text-decoration:none}
.rank-row a:hover{background:var(--wash)}
.rank-label{
  font-size:13px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rank-row a:hover .rank-label{color:var(--accent)}
.rank-track{height:11px; background:var(--line-soft); border-radius:3px; overflow:hidden}
.rank-fill{display:block; height:100%; background:var(--purple); border-radius:0 3px 3px 0}
.rank-row:first-child .rank-fill{background:var(--grad)}
.rank-val{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums;
}

@media (max-width:820px){
  .row{grid-template-columns:26px minmax(0,1fr) auto; gap:6px 12px}
  .star{grid-column:1; grid-row:1/3; align-self:center}
  .row-main{grid-column:2; grid-row:1}
  .row-status{grid-column:3; grid-row:1; justify-self:end}
  .row-loc{grid-column:2; grid-row:2}
  .row-inc{grid-column:3; grid-row:2; justify-self:end}
  .pager{grid-template-columns:1fr}
  .rank-row > *{grid-template-columns:96px minmax(0,1fr) 38px; gap:9px}
}

.preview-bar{background:var(--wash); color:var(--accent); border-bottom-color:var(--line)}

/* ---- abi. Clone template chooser ---------------------------------------*/
.cta-q{font-size:14px; font-weight:600; color:var(--ink); margin-top:6px}
.tpls{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px}
.tpl{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:500;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:9px 15px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
.tpl:hover{
  color:#fff; background:var(--purple); border-color:var(--purple); transform:translateY(-1px);
}
.tpl:first-child{border-color:rgba(168,85,247,.34)}
.cta .tiny a{font-weight:500}
@media (prefers-reduced-motion: reduce){ .tpl:hover{transform:none} }

/* ---- analytics consent --------------------------------------------------
   Bottom-anchored, dismissible, and never blocking: the directory is fully
   usable while it is on screen. A modal cookie wall would make declining
   harder than accepting, which is the thing regulators object to. */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  max-width:520px; margin-left:auto;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--rad); box-shadow:var(--shadow);
  padding:20px 22px; display:flex; flex-direction:column; gap:14px;
}
.consent[hidden]{display:none !important}
.consent p{font-size:13.5px; color:var(--body); line-height:1.6}
.consent .fw{color:var(--ink); font-weight:700; font-size:14.5px}
.consent-body{display:flex; flex-direction:column; gap:7px}
/* Equal visual weight: accept is not louder than decline. */
.consent-btns{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.consent-btns .ghost,.consent-btns .btn{margin-top:0; font-size:13.5px; padding:9px 18px}
#cookieSettings{font-size:13.5px}
@media (max-width:560px){
  .consent{left:10px; right:10px; bottom:10px; padding:18px}
  .consent-btns{justify-content:stretch}
  .consent-btns .ghost,.consent-btns .btn{flex:1; text-align:center}
}

/* ---- observed block -----------------------------------------------------
   Visually distinct from the self-declared block on purpose. These are three
   different kinds of statement and the reader has to be able to tell them
   apart at a glance: register fact, what we observed, what they told us. */
.observed{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:22px 24px; background:var(--surface-2);
  display:flex; flex-direction:column; gap:11px;
}
.observed p{font-size:14.5px}
.pill.obs{color:var(--accent); background:var(--wash); border-color:rgba(168,85,247,.34)}

/* ---- blueprints ---------------------------------------------------------
   First-party editorial content, so it may look authored in a way the
   register pages must not: sectioned panels, a step list with mono system
   chips, and a provenance box that says whose model this is before anything
   else does. The manual chip is deliberately the odd one out — a dashed
   border where every real system is solid — because the manual steps are
   the point of the whole exercise. */
.prov{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:16px 20px; background:var(--surface-2);
}
.prov p{font-size:14px; color:var(--body); max-width:none}
.bp-sec{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--rad);
  padding:24px 26px; gap:14px;
}
.bp-sec h2{font-size:19px}
.bp-sec .cards{margin-top:4px}
.card h3{font-size:17px; margin:0}
.bp-note{font-size:14px; color:var(--muted); max-width:70ch; line-height:1.6}
.bp-chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:500;
  color:var(--accent); background:var(--wash);
  padding:3px 9px; border-radius:6px; border:1px solid color-mix(in srgb,var(--purple) 26%,transparent);
}
.bp-chip.manual{
  color:var(--muted); background:none; border:1px dashed var(--faint);
  text-transform:uppercase; letter-spacing:.4px; font-size:10px;
}
.bp-cat{font-size:13px; color:var(--muted)}
.bp-syslist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px 18px}
.bp-syslist li{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line)}
.bp-depts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.bp-depts li{font-size:14.5px; color:var(--body); padding:6px 0; border-bottom:1px solid var(--line); line-height:1.6}
.bp-depts li:last-child,.bp-syslist li:last-child{border-bottom:none}
.bp-dept{
  display:inline-block; min-width:150px; font-family:"JetBrains Mono",monospace;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.bp-exts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.bp-exts li{border:1px solid var(--line); border-radius:var(--rad-sm); padding:14px 16px; background:var(--surface-2); font-size:14.5px; line-height:1.7}
/* No wash here: these pills sit on surface-2, where the tint pushed the
   label to 4.30:1. On the surface itself the same colour reads 4.73:1. */
.bp-exts .pill{color:var(--accent); background:none; border-color:color-mix(in srgb,var(--purple) 34%,transparent); margin-left:4px}
.bp-steps{
  list-style:none; margin:4px 0 0; padding:0;
  counter-reset:bpstep; display:flex; flex-direction:column;
}
.bp-steps li{
  counter-increment:bpstep;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 4px 12px 0; border-bottom:1px solid var(--line);
  position:relative;
}
.bp-steps li:last-child{border-bottom:none}
.bp-steps li::before{
  content:counter(bpstep, decimal-leading-zero);
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  color:var(--faint); min-width:26px;
}
.bp-act{font-size:15px; font-weight:600; color:var(--ink); flex:1 1 auto}
@media (max-width:640px){
  .bp-sec{padding:18px 16px}
  .bp-dept{display:block; min-width:0; margin-bottom:2px}
}

/* ---- report table -------------------------------------------------------*/
.rpt-wrap{overflow-x:auto}
.rpt-table{width:100%; border-collapse:collapse; font-size:14.5px}
.rpt-table th{
  text-align:left; font-family:"JetBrains Mono",monospace; font-size:11px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:8px 14px 8px 0; border-bottom:1px solid var(--line);
}
.rpt-table td{
  padding:10px 14px 10px 0; border-bottom:1px solid var(--line);
  color:var(--body); font-variant-numeric:tabular-nums;
}
.rpt-table td:not(:first-child),.rpt-table th:not(:first-child){text-align:right}
.rpt-table tbody tr:last-child td{border-bottom:none}
/* Sector names are the only links in the report table, so they need a real
   hit box; the cell padding absorbs it without changing the row height. */
.rpt-table a{font-weight:600; display:inline-block; padding:3px 0}

/* ---- website-on-file marker ---------------------------------------------
   A dot, not a tick or a shield. Those read as approval; this only records
   that we fetched a page and found the company's own registered number on
   it. Same reason it sits beside the name rather than in a badge column. */
.site-dot{
  display:inline-block; margin-left:7px; font-size:8px; line-height:1;
  color:var(--accent); vertical-align:middle; cursor:help;
}
#onlySite[aria-pressed="true"]{color:var(--accent); border-color:var(--accent); background:var(--wash)}
#siteCount{font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; margin-left:3px}


/* ---- print ---------------------------------------------------------------
   Someone comparing suppliers prints the shortlist or saves it as a PDF.
   Chrome, controls and the calls to action are noise on paper; the records,
   their provenance and the URL behind each link are what is wanted. */
@media print{
  :root{--bg:#fff; --surface:#fff; --surface-2:#fff; --ink:#000; --body:#222; --muted:#444; --line:#bbb}
  header.site, footer.site, .filters, .cta, .consent, .theme, .skip,
  .fixture-bar, .star, .tpls, .prov{display:none !important}
  body{background:#fff; font-size:11pt}
  main{padding:0; gap:18px; max-width:none}
  a{color:#000; text-decoration:underline}
  /* On paper a link is a dead end unless it says where it goes — but only
     where the URL is worth reading. Printing it after every row of a list
     forced the name column to a few characters wide and stacked the URL
     vertically down the page, which is worse than no URL at all. */
  .prose a[href^="http"]::after, .ext[href]::after{
    content:" (" attr(href) ")"; font-size:9pt; color:#555; word-break:break-all;
  }
  .rows{width:100%}
  .row{grid-template-columns:minmax(0,1fr) 130px 60px 78px; padding:8px 0}
  .row-main{min-width:0}
  .row-name{font-size:11pt}
  .row-sub{font-size:9pt; color:#555; white-space:normal}
  .row, .card, .panel, .honest, .profile, .bp-sec{
    break-inside:avoid; page-break-inside:avoid; box-shadow:none;
  }
  .row{border-bottom:1px solid #ccc}
  h1{font-size:20pt} h2{font-size:14pt}
  .chartcard svg{max-width:100%}
}

/* ---- claim form ----------------------------------------------------------
   Deliberately plain. A form asking a stranger for their company details
   should look like a form, not a conversion funnel: no gradients, no
   reassurance badges, and every hint sitting under the field it explains
   rather than in a tooltip nobody opens. */
.claimform{display:flex; flex-direction:column; gap:22px; max-width:660px}
.claimform fieldset{border:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.radios{
  border:1px solid var(--line); border-radius:var(--rad-sm);
  background:var(--surface-2); overflow:hidden; gap:0;
}
.radios label{
  padding:12px 14px; border-bottom:1px solid var(--line); margin:0;
  transition:background .12s ease;
}
.radios label:last-child{border-bottom:none}
.radios label:hover{background:var(--surface)}
/* The chosen option should be obvious without reading all three. */
.radios label:has(input:checked){background:var(--surface)}
.radios label:has(input:checked) span{color:var(--ink)}
.radios label:focus-within{background:var(--surface)}
.claimform legend{
  padding:0; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.radios{display:flex; flex-direction:column; gap:9px}
.radios label{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; cursor:pointer; padding:2px 0}
.radios input{margin-top:4px; accent-color:var(--purple); flex:none; width:16px; height:16px}
.radios b{color:var(--ink); font-weight:700}
.fieldrow{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.field{display:flex; flex-direction:column; gap:7px; margin:0}
.field label{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.req{
  font-size:9.5px; letter-spacing:.08em; color:var(--accent);
  background:var(--wash); padding:2px 6px; border-radius:4px; font-weight:700;
}
/* Scoped away from radios on purpose: a bare `.claimform input` rule sets
   width:100% at the same specificity as the radio rule above and, coming
   later, wins — which stretches each radio to the full form width and shunts
   its label off the end of the row. */
.claimform input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),.claimform textarea{
  font:inherit; font-size:15px; color:var(--ink); width:100%;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--rad-sm); padding:12px 14px; resize:vertical;
}
.claimform input::placeholder,.claimform textarea::placeholder{color:var(--faint)}
.radios label:focus-within span{color:var(--ink)}
.claimform input:not([type="radio"]):focus,.claimform textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.hint{font-size:12.5px; color:var(--faint); line-height:1.5; max-width:52ch}
.formfoot{border-top:1px solid var(--line); padding-top:16px; max-width:70ch}
/* Netlify's honeypot: hidden from people and from assistive technology, but
   present in the DOM for the bots that fill everything in. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:640px){
  .fieldrow{grid-template-columns:1fr; gap:20px}
  .claimform{gap:18px}
}
/* Needs to out-rank `.field label`, which sets the uppercase mono treatment
   for field labels: a sentence-long consent line set in 10px uppercase mono
   is close to unreadable. */
.claimform .checkline{display:flex; align-items:flex-start; gap:10px; cursor:pointer; text-transform:none; letter-spacing:0; font-family:inherit; font-size:14px; font-weight:400; color:var(--body)}
.claimform .checkline input{margin-top:3px; accent-color:var(--purple); flex:none; width:16px; height:16px}
.consent-line{border-top:1px solid var(--line); padding-top:16px}