/* My Evidence Map. Dark "e1 / Sea glass" tokens ported from Module 1 (site.css, last :root block).
   One type scale, two card types (.card = link card, .panel = content), generous spacing. */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-normal-200-800-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-normal-200-800-latin.woff2") format("woff2");
  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-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-normal-100-800-latin.woff2") format("woff2");
  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; }

:root {
  --bg: #0a1420; --surface: #0e1a28; --surface2: #122232; --surface3: #16283a;
  --line: #1c2b3a; --line2: #2a3d4f; --tx: #e8f0f2; --sec: #bfccd1; --mut: #a3b4bc;
  --acc: #7fd8c4; --acc-ink: #06231d;
  --c-supported: #7fd8c4; --c-promising: #e4d6a2; --c-open: #b3c0c7; --c-not_recommended: #ec9b86;
  --bar-open: #7c8b95;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px; --gap: 1.5rem; --tap: 44px;
  /* the one type scale */
  --fs-s: .875rem; --fs-b: 1rem; --fs-l: 1.25rem; --fs-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 var(--fs-b)/1.6 var(--font);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: var(--acc); color: var(--acc-ink); }
a { color: var(--acc); text-underline-offset: .18em; }
a:hover { color: #b5ecdf; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--acc); color: var(--acc-ink); padding: .75rem 1rem; z-index: 30; }
.skip:focus { left: 0; }

h1, h2, h3, p, ul { margin: 0; }
h1 { font-size: var(--fs-xl); line-height: 1.12; font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--fs-l); line-height: 1.25; font-weight: 650; letter-spacing: -.015em; }
h3 { font-size: var(--fs-b); line-height: 1.35; font-weight: 650; }
ul { padding: 0; list-style: none; }
.small, .meta { font-size: var(--fs-s); }
.meta, .lede { color: var(--mut); }
.lede { font-size: var(--fs-b); line-height: 1.45; color: var(--sec); max-width: 40rem; }
.mono { font-family: var(--mono); font-size: var(--fs-s); }

/* shell */
.top { border-bottom: 1px solid var(--line); }
.top .in { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; min-height: 56px; display: flex; align-items: center; }
.brand { color: var(--tx); font-weight: 700; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
main { width: 100%; max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; flex: 1; display: flex; flex-direction: column; gap: 2rem; }
.stack > * + * { margin-top: 1rem; }

.tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line2);
  padding-bottom: env(safe-area-inset-bottom); }
.tabs ul { display: flex; max-width: 64rem; margin: 0 auto; }
.tabs li { flex: 1; }
.tabs a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--sec); text-decoration: none; font-weight: 600; border-top: 3px solid transparent; }
.tabs a[aria-current="page"] { color: var(--acc); border-top-color: var(--acc); }
.foot { max-width: 64rem; width: 100%; margin: 0 auto; padding: 1.5rem 1.25rem calc(56px + 2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--mut); font-size: var(--fs-s); }
.foot p + p { margin-top: .5rem; }
.foot strong { color: var(--sec); font-weight: 650; }

@media (min-width: 640px) { .lede { font-size: var(--fs-l); } }
@media (min-width: 768px) {
  .tabs { top: 0; bottom: auto; left: auto; right: max(1.25rem, calc((100vw - 64rem) / 2 + 1.25rem)); background: transparent; border: 0; padding: 0; width: auto; }
  .tabs a { min-height: 56px; min-width: 88px; padding: 0 1rem; border-top: 0; border-bottom: 3px solid transparent; }
  .tabs a[aria-current="page"] { border-bottom-color: var(--acc); }
  .foot { padding-bottom: 2rem; }
  main { padding-top: 3rem; }
}

/* controls */
.search { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 40rem; }
.search input { flex: 1 1 15rem; min-height: 52px; padding: 0 1rem; font: inherit; color: var(--tx); background: var(--surface); border: 1px solid var(--line2); border-radius: var(--radius); }
.search input::placeholder { color: var(--mut); }
.btn, .search button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: var(--tap); padding: 0 1.25rem; font: inherit; font-weight: 650;
  color: var(--acc-ink); background: var(--acc); border: 0; border-radius: var(--radius); text-decoration: none; cursor: pointer; }
.btn:hover, .search button:hover { background: #b5ecdf; color: var(--acc-ink); }
.btn.ghost { color: var(--acc); background: transparent; border: 1px solid var(--line2); }
.btn.ghost:hover { background: var(--surface2); color: #b5ecdf; }
.back { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-weight: 600; }
.row-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* card type 1: link card */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.tiles { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; min-height: var(--tap); color: var(--tx); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
a.card:hover { background: var(--surface2); border-color: var(--line2); color: var(--tx); }
.card h3 { color: var(--tx); }
.card p { color: var(--sec); }
.card .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.empty { border-style: dashed; border-color: var(--line2); background: transparent; }
.card.compact { padding: .875rem 1.25rem; }

/* card type 2: content panel */
.panel { padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel > * + * { margin-top: .75rem; }
.panel h2 { color: var(--tx); }
.panel ul > li + li { margin-top: .5rem; }
.panel.gap-state { border-style: dashed; border-color: var(--line2); }

/* evidence buckets: colour plus glyph plus words, never colour alone */
.tag { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-s); font-weight: 650; color: var(--c-open); }
.tag .g { width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: .75rem; line-height: 1; }
.b-supported { color: var(--c-supported); } .b-promising { color: var(--c-promising); }
.b-open { color: var(--c-open); } .b-not_recommended { color: var(--c-not_recommended); }
.counts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); gap: 2px; }
.bar i { display: block; height: 100%; }
.bar .s-supported { background: var(--c-supported); } .bar .s-promising { background: var(--c-promising); }
.bar .s-open { background: var(--bar-open); } .bar .s-not_recommended { background: var(--c-not_recommended); }
.bucket-h { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.bucket-h .n { color: var(--mut); font-weight: 500; font-family: var(--mono); font-size: var(--fs-s); }
.chip { display: inline-block; font-size: var(--fs-s); color: var(--mut); border: 1px solid var(--line2); border-radius: 999px; padding: .1rem .6rem; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: var(--fs-s); color: var(--mut); }
dl.facts dt { font-weight: 650; color: var(--sec); } dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.status { color: var(--mut); padding: 2rem 0; }
.status.err { color: var(--c-not_recommended); }
.long { overflow-wrap: anywhere; }
@media (max-width: 380px) { dl.facts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* closed-by-default expert detail on the rating page */
details.sci > summary { cursor: pointer; font-weight: 650; color: var(--tx); min-height: 44px; display: flex; align-items: center; }
details.sci[open] > summary { margin-bottom: .75rem; }
details.sci > * + * { margin-top: .75rem; }
.meta.tech { font-size: var(--fs-s); }