/* IKARA — /stats/fuel — Canberra diesel watch
   Series colours are re-stepped from the site's --cool-fg / --warn-fg into the
   dark-mode OKLCH lightness band (0.48–0.67) so the set passes CVD separation
   against --bg-raised. Do not eyeball replacements — re-run the palette
   validator (scripts/validate_palette.py, --mode dark --surface #111d2b).

   Validated as a trio 15 Sep 2026:
     lightness band  PASS   chroma floor PASS   contrast PASS
     normal vision   worst adjacent ΔE 22.0
     CVD             worst adjacent ΔE 10.5 (protan), tritan 27.8
   10.5 clears the ΔE 8 target, and identity never rests on colour alone here:
   every tile and legend row is labelled with the station's name. */
:root{
  --s1:#3f95ef;   /* slot 0 — blue   */
  --s2:#d4771e;   /* slot 1 — orange */
  --s3:#2a9d7c;   /* slot 2 — green  */
}

.container{max-width:60rem;margin:0 auto;padding:2.5rem 1.5rem 4rem}

h1{font-family:var(--font-disp);font-size:1.55rem;letter-spacing:.04em;
   text-transform:uppercase;margin:0 0 .35rem}

.page-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);margin-bottom:2rem}

.card{background:var(--bg-raised);border:1px solid var(--line);border-radius:4px;
  padding:1.35rem 1.5rem;margin-bottom:1.5rem}
.card h2{font-family:var(--font-disp);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem;font-weight:600}

/* ---- hero tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-bottom:1.5rem}
.tile{background:var(--bg-raised);border:1px solid var(--line);border-radius:4px;
  padding:1.2rem 1.35rem;border-left:3px solid var(--idle)}
.tile.s1{border-left-color:var(--s1)}
.tile.s2{border-left-color:var(--s2)}
.tile.s3{border-left-color:var(--s3)}

/* ---- opening hours on a tile ---- */
.tile .hrs{font-size:.76rem;margin-top:.35rem;color:var(--ink-dim)}
.tile .hrs .shut{color:var(--warn-fg)}

/* ---- worth the drive ---- */
.verdict{font-size:1rem;line-height:1.6;margin:0 0 1rem}
.verdict b{color:var(--ok-fg);font-size:1.15rem}
.drive-wrap{overflow-x:auto}
table.drive{width:100%;border-collapse:collapse;font-size:.88rem;min-width:34rem}
table.drive th{text-align:right;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:400;padding:.4rem .5rem;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.drive th:first-child,table.drive td:first-child{text-align:left}
table.drive td{text-align:right;padding:.5rem;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.drive tr.best td{color:var(--ink)}
table.drive tr.best td:first-child{font-weight:600}
table.drive .sw{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:.5em;vertical-align:0}
table.drive .save{color:var(--ok-fg)}
table.drive .cost{color:var(--ink-dim)}

.tile .name{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:.55rem;line-height:1.45}
.tile .price{font-family:var(--font-disp);font-size:2.5rem;font-weight:600;
  line-height:1;letter-spacing:-.01em;color:var(--ink)}
.tile .price .unit{font-size:.85rem;font-weight:400;color:var(--ink-dim);letter-spacing:.08em;margin-left:.3rem}
.tile .delta{font-family:var(--font-mono);font-size:.72rem;margin-top:.6rem;letter-spacing:.04em}
.tile .delta.up{color:var(--bad-fg)}
.tile .delta.down{color:var(--ok-fg)}
.tile .delta.flat{color:var(--steel)}
.tile .when{font-family:var(--font-mono);font-size:.63rem;color:var(--steel);
  margin-top:.5rem;letter-spacing:.06em}
.tile.cheapest .name::after{content:"cheapest";margin-left:.5rem;padding:.1rem .4rem;
  background:var(--ok);color:#fff;border-radius:2px;font-size:.58rem;letter-spacing:.09em}

/* ---- chart ---- */
.chart-wrap{position:relative}
svg.chart{display:block;width:100%;height:auto;overflow:visible}
.legend{display:flex;flex-wrap:wrap;gap:1.3rem;margin-bottom:1rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-dim)}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.legend i{width:.85rem;height:.2rem;border-radius:1px;display:inline-block}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:.55rem .7rem;
  font-family:var(--font-mono);font-size:.68rem;color:var(--ink);white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:5}
.tip .th{color:var(--steel);font-size:.62rem;letter-spacing:.08em;margin-bottom:.35rem}
.tip .row{display:flex;align-items:center;gap:.45rem;margin-top:.2rem}
.tip .row i{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.tip .row b{font-weight:600;margin-left:auto;padding-left:1rem}

/* ---- table ---- */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:.72rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--steel);font-weight:400;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}
td.num{text-align:right}
td .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.5rem}
.up{color:var(--bad-fg)} .down{color:var(--ok-fg)}

.note{font-size:.82rem;color:var(--ink-dim);line-height:1.65;margin:.4rem 0 0}
.empty{color:var(--steel);font-family:var(--font-mono);font-size:.74rem;padding:2rem 0;text-align:center}


/* ---------------------------------------------------------------- USA card
   The AUD figure is the headline because it is the one comparable with the
   Canberra prices above it; the published US figure sits under it in its own
   units, because that is the number anyone checking the source will see. */
.tile .usd{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-dim);
  margin-top:-.15rem;letter-spacing:.02em}
.tile .usd .unit{font-size:.74em;margin-left:.1em;color:var(--steel)}
.tile.usa .price{font-size:2.1rem}

/* Expanding "Every recorded change". Collapsed by default: it is the raw log
   behind the chart, useful when you want it and long enough to bury the rest
   of the page when you do not. */
#changesBox > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:.8rem;flex-wrap:wrap}
#changesBox > summary::-webkit-details-marker{display:none}
#changesBox > summary h2{display:inline-block;margin:0}
#changesBox > summary::before{content:"\25b8";color:var(--accent);font-size:.8rem;
  transition:transform .15s ease;display:inline-block}
#changesBox[open] > summary::before{transform:rotate(90deg)}
#changesBox > summary:hover h2{color:var(--accent)}
#changesBox > summary .hint{font-family:var(--font-mono);font-size:.7rem;
  color:var(--steel);letter-spacing:.06em}
#changesBox > .table-wrap{margin-top:.9rem}

/* dashed legend swatches mark the US series */
.legend em{font-style:normal;font-family:var(--font-mono);font-size:.68em;color:var(--steel)}

/* --------------------------------------------------- the run to Graford
   Deliberately the quietest thing on the page: it is a curiosity, not the
   reason anyone came. Collapsed, muted heading, sitting under the footnote. */
.card.quiet{background:transparent;border-style:dashed;opacity:.9}
.card.quiet h2{color:var(--steel)}
.card.quiet:hover{opacity:1}
#tripBox > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:.8rem;flex-wrap:wrap}
#tripBox > summary::-webkit-details-marker{display:none}
#tripBox > summary h2{display:inline-block;margin:0}
#tripBox > summary::before{content:"\25b8";color:var(--steel);font-size:.8rem;
  transition:transform .15s ease;display:inline-block}
#tripBox[open] > summary::before{transform:rotate(90deg)}
#tripBox > summary:hover h2{color:var(--accent)}
#tripBox > summary .hint{font-family:var(--font-mono);font-size:.7rem;
  color:var(--steel);letter-spacing:.06em}
#tripBox .drive td .sub{font-family:var(--font-mono);font-size:.68rem;
  color:var(--steel);margin-top:.1rem}
#tripBox .verdict{margin-top:.9rem}