/* ============================================================================
   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.
   ========================================================================== */

/* ---- 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);

  --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);

  --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}
p{margin:0}
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}
.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)}
.unstated{color:var(--faint); font-style:italic; font-size:.92em}

/* ---- fixture warning ----------------------------------------------------*/
.fixture-bar{
  background:var(--warn-bg); color:var(--warn); 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(--faint); 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}
.crumbs a:hover{color:var(--purple)}
.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(--purple)}
.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); background:var(--ok-bg); border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.pill.warn{color:var(--warn); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.pill.self{color:var(--purple); 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(--purple);
  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(--purple); 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}

/* ---- 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}
  header.site nav{gap:16px; font-size:13px}
  .wordmark span{display:none}
}
@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:4px; margin:-4px; cursor:pointer;
  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}
.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(--purple)}
.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(--purple)}
.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(--purple); 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)}