/* file: web/style.css — replaces the file */
:root {
  --bg: #f6f6f4;
  --card: #ffffff;
  --ink: #17181a;
  --muted: #5c6066;
  --line: #dedfe2;
  --accent: #1a6b3c;
  --accent-ink: #ffffff;
  --warn: #8a4b00;
  --warn-bg: #fdf1e0;
  /* Magnitude ramps. Each pair is strong -> weak; card.js sets how far along
     the ramp a number sits, so colour carries size as well as meaning. */
  --shy-strong: hsl(146 74% 27%);
  --shy-weak: hsl(146 14% 52%);
  --sideways-strong: hsl(30 92% 38%);
  --sideways-weak: hsl(30 16% 52%);
  --past-strong: hsl(2 78% 45%);
  --past-weak: hsl(2 14% 52%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121316;
    --card: #1c1e22;
    --ink: #ecedef;
    --muted: #9aa0a8;
    --line: #2d3036;
    --accent: #4cc07d;
    --accent-ink: #0d1a12;
    --warn: #f0b866;
    --warn-bg: #2b2317;
    --shy-strong: hsl(146 68% 58%);
    --shy-weak: hsl(146 12% 52%);
    --sideways-strong: hsl(32 92% 62%);
    --sideways-weak: hsl(32 14% 54%);
    --past-strong: hsl(4 88% 66%);
    --past-weak: hsl(4 12% 54%);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main { max-width: 34rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h3 { font-size: 1.05rem; margin: 0; }
.sub, .hint, .facts, .pool-note, .source, footer { color: var(--muted); }
.sub { margin: 0 0 1rem; font-size: .9rem; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
fieldset.providers { border: 0; margin: 0 0 1rem; padding: 0; }
fieldset.providers legend { padding: 0 0 .4rem; font-weight: 600; font-size: .85rem; }
fieldset.providers label { display: block; padding: .35rem 0; }
.hint { font-size: .8rem; }
.field { display: block; font-weight: 600; font-size: .85rem; margin: .75rem 0 .35rem; }
.row { display: flex; gap: .5rem; }
input[type=text], select {
  flex: 1 1 auto; min-width: 0;
  font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .7rem;
}
select { width: 100%; }
.button {
  display: inline-block; font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: .5rem; padding: .6rem .9rem; cursor: pointer;
}
.button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.button.subtle { width: 100%; margin-bottom: 1rem; }
.button[disabled] { opacity: .5; }
.where { display: grid; grid-template-columns: 3rem 1fr; gap: .2rem .5rem; margin: .9rem 0 0; font-size: .9rem; }
.where dt { color: var(--muted); }
.where dd { margin: 0; }
.where dd.simplified { border-bottom: 1px dotted var(--muted); }
.status { border-radius: .5rem; padding: .7rem .8rem; margin: 0 0 1rem; font-size: .9rem; }
.status.info { background: var(--card); border: 1px solid var(--line); }
.status.busy { background: var(--card); border: 1px dashed var(--line); }
.status.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.results { list-style: none; margin: 0; padding: 0; }
.spot {
  background: var(--card); border: 1px solid var(--line); border-radius: .75rem;
  padding: .9rem 1rem; margin-bottom: .75rem;
}
.spot.best { border-color: var(--accent); border-width: 2px; }
.badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
         padding: .15rem .45rem; border-radius: .3rem; }
.badge-best { background: var(--accent); color: var(--accent-ink); }
.badge-walk { background: var(--warn-bg); color: var(--warn); }
.facts { margin: 0 0 .5rem; font-size: .85rem; }
.flag { background: var(--warn-bg); color: var(--warn); font-size: .82rem;
        padding: .45rem .6rem; border-radius: .4rem; margin: .4rem 0; }
.actions { display: flex; gap: .5rem; margin-top: .6rem; }
.actions .button { flex: 1 1 0; }
.pool-note { font-size: .8rem; margin: 0 0 1rem; }
.rules ul { padding-left: 1.1rem; margin: .5rem 0; }
.rules li { margin-bottom: .4rem; font-size: .9rem; }
.source { font-size: .8rem; margin: .5rem 0 0; }
footer { font-size: .78rem; margin-top: 1.5rem; }

/* ---- the benchmark every card is measured against ---- */
.benchmark {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  background: var(--card); border: 1px dashed var(--line); border-radius: .6rem;
  padding: .55rem .8rem; margin: 0 0 .75rem;
}
.benchmark-label { font-weight: 600; font-size: .9rem; }
.benchmark-value { font-size: 1.15rem; font-weight: 700; }
.benchmark-note { font-size: .78rem; color: var(--muted); flex: 1 1 100%; }

/* ---- the info key ---- */
.results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; margin: -.2rem 0 .5rem;
}
.key-toggle {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink);
  background: none; border: 0; padding: .3rem 0;
}
.key-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font: italic 700 .78rem/1 Georgia, serif;
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
}
.key-toggle[aria-expanded="true"] .key-icon { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chev { color: var(--muted); font-size: .7rem; }
.sort { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.sort select { width: auto; padding: .3rem .45rem; font-size: .82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.key h3 { font-size: .92rem; margin: .8rem 0 .4rem; }
.key h3:first-child { margin-top: 0; }
.key p { font-size: .85rem; margin: .4rem 0; }
.key dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .6rem; margin: .5rem 0; font-size: .85rem; }
.key dt { font-weight: 600; }
.key dd { margin: 0; color: var(--muted); }
.key code { background: var(--bg); border-radius: .25rem; padding: .05rem .3rem; font-size: .82em; }
.key-line { font-size: .9rem; }
.key-note { color: var(--muted); font-size: .78rem !important; }

/* ---- the card header line ---- */
.head {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .3rem; font-variant-numeric: tabular-nums;
}
.rank { font-weight: 700; color: var(--muted); font-size: .85rem; }
.name { font-weight: 700; font-size: 1rem; margin-right: auto; }
.head .total { font-size: 1.1rem; font-weight: 700; margin: 0; }
.extra { font-size: .85rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.extra-none { color: var(--accent); }
.split { flex: 1 1 100%; font-size: .8rem; color: var(--muted); }

/* ---- the relation row ---- */
.rel { font-size: .85rem; margin: 0 0 .2rem; color: var(--muted); }
.rel-term { font-weight: 700; }
.rel-onway .rel-term { color: var(--shy-strong); }
.rel-detour .rel-term { color: var(--sideways-strong); }
.rel-back .rel-term { color: var(--past-strong); }
.num { font-weight: 700; }
.num-shy { color: color-mix(in oklab, var(--shy-strong) var(--tone, 100%), var(--shy-weak)); }
.num-sideways { color: color-mix(in oklab, var(--sideways-strong) var(--tone, 100%), var(--sideways-weak)); }
.num-past { color: color-mix(in oklab, var(--past-strong) var(--tone, 100%), var(--past-weak)); }

/* ---- the strip diagram ---- */
.strip { display: block; width: 100%; height: auto; margin: .1rem 0 .5rem; overflow: visible; }
.axis { stroke: var(--line); stroke-width: 2; }
.break { stroke: var(--line); stroke-width: 2; fill: none; }
.breakmask { fill: var(--card); }
.dot-you { fill: var(--muted); }
.dot-door { fill: var(--ink); }
.walk { stroke-width: 2.5; stroke-dasharray: 4 3; fill: none; }
.walk-onway, .dot-onway { stroke: var(--shy-strong); fill: var(--shy-strong); }
.walk-detour, .dot-detour { stroke: var(--sideways-strong); fill: var(--sideways-strong); }
.walk-back, .dot-back { stroke: var(--past-strong); fill: var(--past-strong); }
.lbl { font-size: 10px; fill: var(--muted); text-anchor: middle; font-family: inherit; }
.lbl-stand { font-weight: 700; }
.lbl-onway { fill: var(--shy-strong); }
.lbl-detour { fill: var(--sideways-strong); }
.lbl-back { fill: var(--past-strong); }
.walklbl { text-anchor: end; }
.lbl-start { text-anchor: start; }
.lbl-end { text-anchor: end; }