/* The price-history page. It sits on the map app's tokens (styles.css), and
   only adds the few aliases the charts' script reads by name (see css() in
   stats.js), plus one colour per fuel type. */
:root {
    --page: var(--background);
    --ink: var(--on-surface);
    --ink-2: var(--on-surface-variant);
    --muted: var(--outline);
    --grid: var(--surface-container-high);
    --axis: var(--outline-variant);
    --border: var(--outline-variant);
    --hover: var(--surface-container);
    --accent: var(--secondary);
    /* The same three colours as the map's trend pill (fuel-trend.js). */
    --good: #2E7D32;
    --bad: #E53935;
    --warn: #FB8C00;
    --div-low: #006097;
    --div-high: #E53935;
    /* Chart colours, one fixed hue per fuel type across every view. */
    --c-U91: #2a78d6;
    --c-E10: #eb6834;
    --c-P95: #1baf7a;
    --c-P98: #eda100;
    --c-DSL: #e87ba4;
    --c-PDSL: #008300;
    --c-E85: #4a3aa7;
    --c-LPG: #e34948;
    --c-other: #898781;
}

@media (prefers-color-scheme: dark) {
    :root {
        --good: #4CAF50;
        --bad: #FF6B66;
        --warn: #FFB74D;
        --div-low: #97CBFF;
        --div-high: #FF6B66;
        --c-U91: #3987e5;
        --c-E10: #d95926;
        --c-P95: #199e70;
        --c-P98: #c98500;
        --c-DSL: #d55181;
        --c-E85: #9085e9;
        --c-LPG: #e66767;
    }
}

/* styles.css fixes the map app to the viewport; this page scrolls. */
body.stats { display: block; height: auto; min-height: 100dvh; }

/* The back arrow leads the app bar, pulled in so its icon lines up with the page margin. */
.app-bar__back {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -.5rem;
    margin-right: -.25rem;
    border-radius: 50%;
    color: #FFFFFF;
}

.app-bar__back:active { background: rgba(255, 255, 255, .16); }

@media (hover: hover) {
    .app-bar__back:hover { background: rgba(255, 255, 255, .16); }
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 calc(1rem + env(safe-area-inset-right)) 0 calc(1rem + env(safe-area-inset-left));
}

.intro { padding: 1.25rem 0 .75rem; }
.intro__title { font-size: 1.5rem; margin: 0; letter-spacing: -0.01em; }
.sub { color: var(--ink-2); margin: .125rem 0 0; font-size: .9rem; }

/* Sticky controls */
.controls {
  position: sticky; top: env(safe-area-inset-top); z-index: 10;
  background: var(--page);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: none; color: var(--ink-2);
  font: inherit; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.tab:hover { background: var(--hover); }
.tab[aria-selected="true"] { background: var(--primary-container); color: var(--on-primary-container); }
.row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip, .seg button, .preset {
  font: inherit; font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px;
}
.chip:hover, .preset:hover, .seg button:hover { background: var(--hover); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600; }
.chip.stale { color: var(--muted); }
.preset { color: var(--ink-2); border-style: dashed; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; border-radius: 0; min-width: 42px; justify-content: center; }
.seg button[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
@media (max-width: 720px) {
  /* Keep the sticky bar short on phones: chips scroll sideways instead of wrapping */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .chips::-webkit-scrollbar { display: none; }
  .chip, .preset { flex: none; }
  .row { margin-top: 8px; }
}

main.wrap { padding-top: 1rem; padding-bottom: 2.5rem; }
.panel[hidden] { display: none; }
.card {
  background: var(--surface);
  box-shadow: 0 1px 4px var(--shadow);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.card h2 { font-size: 1rem; margin: 0; }
.card .desc { color: var(--ink-2); font-size: 0.85rem; margin: 2px 0 12px; }
.chart-box { position: relative; height: 360px; }
@media (max-width: 600px) { .chart-box { height: 300px; } }
.note { color: var(--muted); font-size: 0.8rem; margin: 8px 0 0; }

/* Overview tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 0; box-shadow: 0 1px 4px var(--shadow); border-radius: var(--radius);
  padding: 12px 14px;
}
.tile:hover { background: var(--hover); }
.tile:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-head { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 0.85rem; }
.tile-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.tile-price { font-size: 1.7rem; font-weight: 650; margin: 2px 0 0; letter-spacing: -0.01em; }
.tile-price small { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.deltas { display: flex; gap: 10px; font-size: 0.8rem; color: var(--ink-2); flex-wrap: wrap; }
.up { color: var(--bad); }
.down { color: var(--good); }
.flat { color: var(--muted); }
.spark { display: block; width: 100%; height: 32px; margin: 8px 0 4px; }
.tile-foot { font-size: 0.78rem; color: var(--muted); }

.callout { font-size: 0.95rem; margin: 0 0 12px; }
.callout strong { font-weight: 650; }

details { margin-top: 12px; }
summary { cursor: pointer; color: var(--ink-2); font-size: 0.85rem; }
.table-scroll { max-height: 320px; overflow: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { position: sticky; top: 0; background: var(--surface); color: var(--ink-2); font-weight: 600; }

.foot { color: var(--ink-2); font-size: 0.8rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.foot a { color: var(--secondary); }