/* lemonbench tokens — the hazard triangle
   asphalt near-black · concrete gray · hazard amber (single accent) · headlight white
   shape language: chamfered corners (cut, not rounded); thick left border on warnings */

:root {
  --asphalt: #131518;
  --asphalt-2: #1b1e22;
  --asphalt-3: #24282d;
  --line: #2e3338;
  --concrete: #9aa1a8;
  --concrete-2: #6d747b;
  --headlight: #eef3f7;
  --amber: #ffb000;
  --amber-dim: #8f6a10;
  --amber-glow: rgba(255, 176, 0, .12);
  --chamfer: 10px;
  --chamfer-sm: 6px;
  --font: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "Consolas", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--headlight);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
}
a { color: var(--headlight); text-decoration-color: var(--amber-dim); text-underline-offset: 3px; }
a:hover { color: var(--amber); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-top: 2em; }
h3 { font-size: 1.05rem; }
p { margin: .6em 0; }
small, .muted { color: var(--concrete); }

.chamfer { clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
.chamfer-sm { clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ---- header ---- */
.site-head { background: #0d0f11; border-bottom: 2px solid var(--amber); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.logo b { font-size: 1.25rem; letter-spacing: .04em; font-weight: 700; color: var(--headlight); }
.logo b span { color: var(--amber); }
.site-nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.site-nav a { color: var(--concrete); text-decoration: none; font-size: .92rem; text-transform: uppercase; letter-spacing: .07em; }
.site-nav a:hover { color: var(--amber); }
.tagline { color: var(--concrete-2); font-size: .85rem; }

/* ---- search ---- */
.search { position: relative; min-width: 230px; flex: 1 1 230px; max-width: 360px; }
.search input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: .95rem;
  background: var(--asphalt-2); color: var(--headlight);
  border: 1px solid var(--line);
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
}
.search input:focus { outline: none; border-color: var(--amber); }
.search-results {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--asphalt-3); border: 1px solid var(--line); display: none;
}
.search-results a { display: block; padding: 9px 12px; text-decoration: none; font-size: .95rem; border-bottom: 1px solid var(--line); }
.search-results a:last-child { border-bottom: none; }
.search-results a:hover, .search-results a.active { background: var(--amber-glow); color: var(--amber); }

/* ---- badges & callouts ---- */
.badge {
  display: inline-block; padding: 2px 10px 3px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm));
}
.badge-avoid { background: var(--amber); color: #131518; }
.badge-caution { background: none; border: 1px solid var(--amber); color: var(--amber); }
.badge-typical { background: var(--asphalt-3); color: var(--concrete); }
.badge-better { background: none; border: 1px solid var(--concrete); color: var(--headlight); }
.badge-early, .badge-low-data { background: none; border: 1px dashed var(--concrete-2); color: var(--concrete); }
.badge-watch { background: none; border: 1px solid var(--amber); color: var(--amber); }
.badge-parkit { background: #ffb000; color: #131518; }

.callout {
  border-left: 6px solid var(--amber);
  background: var(--amber-glow);
  padding: 14px 18px; margin: 1.2em 0;
}
.callout.positive { border-left-color: var(--concrete); background: rgba(154, 161, 168, .08); }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ---- stat row ---- */
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 1.2em 0; }
.stat {
  flex: 1 1 140px; min-width: 140px; background: var(--asphalt-2); border: 1px solid var(--line);
  padding: 12px 16px;
}
.stat b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--amber); font-variant-numeric: tabular-nums; }
.stat.neutral b { color: var(--headlight); }
.stat span { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--concrete); }

/* ---- trouble strip (signature) ---- */
.strip-block { margin: 1.4em 0 1.8em; }
.strip { display: flex; gap: 3px; align-items: stretch; }
.strip a { flex: 1 1 0; min-width: 10px; text-decoration: none; display: block; }
.strip .cell { height: 44px; border: 1px solid rgba(255,255,255,.06); }
.strip a:hover .cell, .strip a:focus .cell { outline: 2px solid var(--amber); outline-offset: 1px; }
.strip a.current .cell { outline: 2px solid var(--headlight); outline-offset: 1px; }
.strip .yr { display: block; text-align: center; font-size: .62rem; color: var(--concrete-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.strip-legend { display: flex; justify-content: space-between; font-size: .78rem; color: var(--concrete-2); margin-top: 6px; }
@media (max-width: 700px) { .strip a:nth-child(even) .yr { visibility: hidden; } }

/* ---- year table ---- */
.table-wrap { overflow-x: auto; margin: 1em 0; }
table.years { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.years th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--concrete); border-bottom: 2px solid var(--line); padding: 8px 10px;
}
table.years td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
table.years td.prob { white-space: normal; min-width: 150px; }
table.years tr:hover td { background: var(--amber-glow); }
table.years a { text-decoration: none; font-weight: 700; color: var(--amber); }
.idxbar { display: inline-block; width: 90px; height: 10px; background: var(--asphalt-3); vertical-align: middle; }
.idxbar i { display: block; height: 100%; background: var(--amber); }
td .num { font-variant-numeric: tabular-nums; }

/* ---- component bars ---- */
.comp { margin: 14px 0 20px; }
.comp .comp-head { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; flex-wrap: wrap; }
.comp .comp-head b { font-weight: 700; }
.comp .comp-head .muted { font-variant-numeric: tabular-nums; }
.comp .track { height: 12px; background: var(--asphalt-3); margin-top: 5px; }
.comp .track i { display: block; height: 100%; background: var(--amber); }
blockquote.owner {
  margin: 10px 0 0 0; padding: 10px 14px; border-left: 4px solid var(--line);
  color: var(--concrete); font-size: .92rem; font-style: normal; background: var(--asphalt-2);
}
blockquote.owner cite { display: block; margin-top: 6px; font-size: .78rem; color: var(--concrete-2); font-style: normal; }

/* ---- recalls / investigations ---- */
.recall { background: var(--asphalt-2); border: 1px solid var(--line); padding: 14px 16px; margin: 12px 0; }
.recall .rc-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.recall .rc-head b { font-size: 1rem; }
.recall .campaign { font-family: var(--mono); font-size: .82rem; color: var(--concrete); }
.recall p { font-size: .93rem; color: var(--concrete); margin: 6px 0 0; }
.recall p b { color: var(--headlight); }

/* ---- cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 1.2em 0; }
.card {
  background: var(--asphalt-2); border: 1px solid var(--line); padding: 16px;
  text-decoration: none; display: block;
}
.card:hover { border-color: var(--amber); }
.card h3 { margin: 0 0 4px; color: var(--headlight); }
.card .mini { display: flex; gap: 2px; margin: 10px 0 8px; }
.card .mini i { flex: 1 1 0; height: 14px; display: block; }
.card small { color: var(--concrete-2); }

/* ---- misc ---- */
.crumbs { font-size: .85rem; color: var(--concrete-2); margin: 18px 0 10px; }
.crumbs a { color: var(--concrete); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.lede { font-size: 1.08rem; color: var(--concrete); max-width: 62ch; }
.provenance { border: 1px solid var(--line); padding: 14px 18px; margin: 2em 0; font-size: .9rem; color: var(--concrete); }
.provenance a { color: var(--headlight); }
.updated { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--concrete-2); }
.updated b { color: var(--amber); font-weight: 700; }
.faq details { border: 1px solid var(--line); background: var(--asphalt-2); margin: 8px 0; }
.faq summary { cursor: pointer; padding: 12px 16px; font-weight: 700; }
.faq details p { padding: 0 16px 12px; margin: 0; color: var(--concrete); }
.pn { display: flex; justify-content: space-between; gap: 12px; margin: 2em 0; flex-wrap: wrap; }
.pn a { text-decoration: none; color: var(--amber); font-weight: 700; }
.spark { display: block; margin-top: 6px; }

.site-foot { border-top: 1px solid var(--line); margin-top: 60px; background: #0d0f11; }
.site-foot .wrap { padding-top: 26px; padding-bottom: 34px; font-size: .88rem; color: var(--concrete-2); }
.site-foot a { color: var(--concrete); }
.hero { padding: 44px 0 10px; }
.hero .lede { font-size: 1.15rem; }
.hero-search { max-width: 520px; margin: 22px 0; }
.hero-search input { font-size: 1.05rem; padding: 13px 16px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1.4em 0; }
.step { background: var(--asphalt-2); border: 1px solid var(--line); padding: 16px; }
.step b { color: var(--amber); display: block; margin-bottom: 6px; }
.step p { font-size: .93rem; color: var(--concrete); margin: 0; }