:root {
  --v-higher: #d63939;
  --v-lower: #4263eb;
  --v-match: #2fb344;
  --v-none: #667382;
  --app-border: #e6e7e9;
  --app-bg: #f6f8fb;
  --app-tabs-h: 3.75rem;
  --tblr-font-sans-serif: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
}

body { background: var(--app-bg); overflow-x: hidden; }

/* Verdict colors: text, left border, pill */
.v-higher { color: var(--v-higher); }
.v-lower { color: var(--v-lower); }
.v-match { color: var(--v-match); }
.v-none { color: var(--v-none); }
.vb-higher { border-left: 4px solid var(--v-higher); }
.vb-lower { border-left: 4px solid var(--v-lower); }
.vb-match { border-left: 4px solid var(--v-match); }
.vb-none { border-left: 4px solid var(--v-none); }
.vp-higher, .vp-lower, .vp-match, .vp-none {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px;
  padding: .125rem .5rem; font-size: .75rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vp-higher { background: #fbebeb; color: var(--v-higher); }
.vp-lower { background: #eceffd; color: var(--v-lower); }
.vp-match { background: #eaf7ec; color: #1f8a34; }
.vp-none { background: #eef0f3; color: var(--v-none); }

/* Shell */
.app-nav { background: #fff; border-bottom: 1px solid var(--app-border); padding: .5rem 0; min-height: 0; }
.app-brand { font-weight: 700; color: var(--tblr-body-color); }
.app-nav .nav-link { display: inline-flex; align-items: center; gap: .375rem; color: var(--v-none); padding: .25rem 0; }
.app-nav .nav-link.active { color: var(--tblr-primary); font-weight: 600; }
.app-logout { display: inline-flex; align-items: center; gap: .375rem; color: var(--v-none); }
.app-pill { font-size: .75rem; }

.app-main { margin-top: 1rem; padding-bottom: 1rem; }

/* Bottom tab bar (phones) */
.app-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: #fff; border-top: 1px solid var(--app-border);
  padding: .4rem .25rem calc(.5rem + env(safe-area-inset-bottom));
}
.app-tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem;
  font-size: .625rem; color: var(--v-none); text-decoration: none;
}
.app-tabs a .ti { font-size: 1.375rem; }
.app-tabs a.on { color: var(--tblr-primary); font-weight: 600; }
@media (max-width: 767.98px) {
  .page-body.app-main { padding-bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom) + 1rem); }
}

/* Toasts sit above the tab bar on phones */
.app-toasts { right: 0; bottom: 0; padding: 1rem; z-index: 1090; }
@media (max-width: 767.98px) {
  .app-toasts { left: 0; bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom)); }
}
.app-toasts .toast { background: #1d273b; color: #fff; border: 0; border-radius: .625rem; }
.app-toasts .toast.toast-error { background: var(--v-higher); }

/* Modal: bottom sheet below 576px, centered dialog above */
.sheet-grab { width: 2.4rem; height: .25rem; border-radius: 2px; background: #c9d0d9; margin: .5rem auto 0; }
@media (max-width: 575.98px) {
  .modal-sheet .modal-dialog { margin: 0; align-items: flex-end; min-height: 100%; max-width: none; }
  .modal-sheet .modal-content { border-radius: 1.125rem 1.125rem 0 0; border: 0; width: 100%; max-height: 90vh; overflow-y: auto; }
  .modal-sheet.fade .modal-dialog { transform: translateY(100%); }
  .modal-sheet.show .modal-dialog { transform: none; }
}

.app-login { background: var(--app-bg); }

/* ---- Compare screen ---------------------------------------------------------------------- */
.cmp { --cmp-muted: var(--v-none); --cmp-line: #f0f2f4; font-variant-numeric: tabular-nums; }
.cmp.htmx-request > * { opacity: .55; transition: opacity .15s; }

/* Filter chips and actions */
.cmp-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cmp-chips {
  display: flex; gap: .375rem; flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cmp-chips::-webkit-scrollbar { display: none; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  background: #fff; border: 1px solid var(--app-border); border-radius: 999px;
  padding: .3rem .7rem; font-size: .8125rem; color: var(--tblr-body-color); line-height: 1.2;
}
.cmp-chip .ti { font-size: 1rem; color: var(--cmp-muted); }
.cmp-chip .cmp-caret { font-size: .8rem; margin-left: -.05rem; }
.cmp-chip.on { background: #e7f1fb; border-color: #b6d4f2; color: var(--tblr-primary); font-weight: 600; }
.cmp-chip.on .ti { color: var(--tblr-primary); }
.cmp-chip-text { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
/* the period turns by invoice weeks, Wednesday to Tuesday, a step either side of its chip (2026-11-12) */
.cmp-week { display: inline-flex; gap: .2rem; flex: 0 0 auto; }
.cmp-step { padding: .3rem .4rem; text-decoration: none; }
a.cmp-step:hover { background: #f1f5f9; color: var(--tblr-body-color); text-decoration: none; }
.cmp-step.off .ti { color: #c6cdd6; }
.cmp-menu { min-width: 12rem; padding: .25rem 0; }
.cmp-menu .dropdown-item { display: flex; align-items: center; gap: .4rem; }
.cmp-menu-items { max-height: min(50vh, 20rem); overflow-y: auto; }
.cmp-search { padding: .25rem .5rem .375rem; }
.cmp-period { padding: .5rem .75rem; width: 15rem; }
.cmp-actions { display: flex; gap: .375rem; flex: 0 0 auto; }
.cmp-btn { background: #fff; gap: .35rem; padding: .3rem .6rem; font-size: .8125rem; }
.cmp-btn .ti { font-size: 1.05rem; margin: 0; }
.cmp-head-actions { display: flex; gap: .375rem; }
.cmp-head-actions .btn { padding: .3rem .45rem; }
.cmp-chip[aria-disabled="true"] { cursor: default; color: var(--cmp-muted); }
/* Phones: the chips wrap instead of scrolling sideways. Safari clips a dropdown's menu to a row that scrolls,
   so a tap on a filter seemed to do nothing (2026-11-13). */
@media (max-width: 767.98px) {
  .cmp-chips { flex-wrap: wrap; overflow-x: visible; }
  .cmp-chip-text { max-width: 8.5rem; }
}

/* Tiles: 2 x 2 on phones, 4 in a row above md */
.cmp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 768px) { .cmp-tiles { grid-template-columns: repeat(4, 1fr); gap: .75rem; } }
.cmp-tile {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--tblr-body-color);
  background: #fff; border: 1px solid var(--app-border); border-left: 4px solid #b8c0cc;
  border-radius: .625rem; padding: .55rem .7rem; min-height: 4.6rem;
}
.cmp-tile:hover { text-decoration: none; color: var(--tblr-body-color); box-shadow: 0 1px 4px rgba(29, 39, 59, .08); }
.cmp-tile.sel { box-shadow: 0 0 0 2px #b6d4f2; }
.cmp-tile-label { font-size: .75rem; color: var(--cmp-muted); padding-right: 2rem; }
.cmp-tile-n { font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.cmp-tile-usd { font-size: .8125rem; font-weight: 600; }
.cmp-tile-icon {
  position: absolute; right: .55rem; top: .55rem; width: 1.65rem; height: 1.65rem; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center; background: #eef0f3; color: var(--cmp-muted);
}
.cmp-tile.t-higher { border-left-color: var(--v-higher); }
.cmp-tile.t-higher .cmp-tile-usd { color: var(--v-higher); }
.cmp-tile.t-higher .cmp-tile-icon { background: #fbebeb; color: var(--v-higher); }
.cmp-tile.t-lower { border-left-color: var(--v-lower); }
.cmp-tile.t-lower .cmp-tile-usd { color: var(--v-lower); }
.cmp-tile.t-lower .cmp-tile-icon { background: #eceffd; color: var(--v-lower); }
.cmp-tile.t-match { border-left-color: var(--v-match); }
.cmp-tile.t-match .cmp-tile-icon { background: #eaf7ec; color: #1f8a34; }

/* Three-way switch */
.cmp-switch-row { margin: .75rem 0 .625rem; display: flex; }
.cmp-switch { display: flex; width: 100%; --tblr-nav-height: 2.1rem; font-size: .8125rem; }
@media (min-width: 768px) { .cmp-switch-row { justify-content: flex-end; } .cmp-switch { width: auto; } }
.cmp-switch .nav-link.active { font-weight: 600; }
/* five views on a phone: they stay on one line, tighter, and the line scrolls before one drops under the rest */
@media (max-width: 575.98px) { .cmp-switch { flex-wrap: nowrap; overflow-x: auto; } .cmp-switch .nav-link { flex: 1 0 auto; padding-inline: .375rem; white-space: nowrap; } }

.cmp-card { background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; }
.cmp-empty { text-align: center; color: var(--cmp-muted); padding: 2rem 0; margin: 0; }
.cmp .r { text-align: right; }

/* Fill list and cards: a table above md */
.cmp-table, .cmp-cards { font-size: .8125rem; }
.cmp-table th, .cmp-cards th {
  font-size: .6875rem; font-weight: 600; color: var(--cmp-muted); background: #fafbfc;
  text-transform: none; letter-spacing: 0; white-space: nowrap; padding: .5rem .55rem;
}
.cmp-table td, .cmp-cards td { padding: .45rem .55rem; white-space: nowrap; border-color: var(--cmp-line); }
.cmp-table tbody tr:last-child td, .cmp-cards tbody tr:last-child td { border-bottom: 0; }
/* six columns of numbers since addendum l: closer together, so the list fits a 1280 px screen with the longest names */
.cmp-table :is(th, td).r { padding-left: .35rem; padding-right: .35rem; }
/* Who fuelled: the name and unit, the whole card number under them, a button that copies it all */
.who { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; vertical-align: middle; }
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.who-card { font-size: .6875rem; color: var(--cmp-muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.who-copy {
  flex: 0 0 auto; border: 0; background: none; padding: .2rem; border-radius: .375rem; line-height: 1;
  color: var(--cmp-muted); opacity: .45; cursor: pointer; transition: opacity .12s, background-color .12s;
}
.who-copy .ti { font-size: 1rem; display: block; }
tr:hover .who-copy, .who-copy:hover, .who-copy:focus-visible { opacity: 1; }
.who-copy:hover, .who-copy:focus-visible { background: #e9edf2; color: var(--tblr-body-color); }
.who-copy.done { opacity: 1; color: #1f8a34; }
.cmp-cards .who-name { white-space: normal; }
.fm-who { margin-top: .3rem; font-size: .8125rem; }
.cmp-menu .dropdown-item.cmp-two { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
/* over a long period a card carries several names and units: the line wraps, the menu keeps its width */
.cmp-menu .dropdown-item.cmp-two { white-space: normal; max-width: min(26rem, 88vw); padding-top: .35rem; padding-bottom: .35rem; }
.cmp-menu-sub { font-size: .6875rem; color: var(--cmp-muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cmp-menu .dropdown-item.active .cmp-menu-sub { color: inherit; opacity: .8; }
.cmp-row, .cmp-link { cursor: pointer; }
.cmp-row:hover td, .cmp-link:hover td { background: #f8fafc; }
.cmp-mk { display: inline-block; width: 4px; height: 1rem; border-radius: 2px; vertical-align: middle; margin-right: .45rem; background: var(--app-border); }
.cmp-row[data-v="higher"] .cmp-mk { background: var(--v-higher); }
.cmp-row[data-v="lower"] .cmp-mk { background: var(--v-lower); }
.cmp-row[data-v="match"] .cmp-mk { background: var(--v-match); }
.cmp-row[data-v="higher"] :is(.c-dc, .c-du) { color: var(--v-higher); font-weight: 700; }
.cmp-row[data-v="lower"] :is(.c-dc, .c-du) { color: var(--v-lower); font-weight: 700; }
.cmp-row:is([data-v="match"], [data-v="none"]) :is(.c-dc, .c-du) { color: var(--cmp-muted); }
.c-flags { display: flex; gap: .3rem; align-items: center; }
.c-flags .ti { font-size: 1rem; }
/* An icon is not text. The newer Tabler icons have code points in the Arabic presentation forms (U+FB50 and
   up), which the browser lays out right to left — and digits beside such an icon with them: a pencil put
   before "5.795" was drawn after it. Isolated, an icon never reorders what stands next to it. */
.ti { unicode-bidi: isolate; }
/* Three prices (addendum l): the transaction's, the invoice's, the site's; a changed price says what it was */
.cmp-num .ti { font-size: .95rem; margin-right: .25rem; vertical-align: -2px; }  /* before the number: the column's numbers stay in line */
.cmp-was { display: block; font-size: .6875rem; color: var(--cmp-muted); }
.cmp-under { display: block; font-size: .6875rem; color: var(--cmp-muted); white-space: nowrap; }  /* a line riding along: its own total */
.cmp-flag { color: #f59f00; }
.cmp-extra { margin-left: .35rem; font-size: .6875rem; color: var(--v-none); white-space: nowrap; }
.cmp-wait { color: var(--v-none); opacity: .7; }
@media (min-width: 768px) {
  .cmp-table .c-meta { display: none; }
  /* a row is two lines tall (the card under the name): the marks stay a table cell, or its border would not reach */
  .cmp-table .c-flags { display: table-cell; }
  .cmp-table .c-flags .ti + .ti { margin-left: .3rem; }
  .cmp-table .c-card .who-text { min-width: 13.5rem; }  /* the copy buttons stand in one line down the list */
  .cmp-table .c-station { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
  .cmp-table .cmp-pill { background: none; padding: 0; font-size: inherit; color: inherit; font-weight: inherit; }
}

/* Fill list: a card per fill below md */
@media (max-width: 767.98px) {
  .cmp-card:has(.cmp-table) { background: none; border: 0; border-radius: 0; overflow: visible; }
  .cmp-table, .cmp-table tbody { display: block; }
  .cmp-table thead { display: none; }
  .cmp-table tr.cmp-row {
    display: grid; grid-template-columns: max-content max-content max-content 1fr max-content;
    column-gap: .75rem; align-items: end;
    background: #fff; border: 1px solid var(--app-border); border-left: 4px solid var(--app-border);
    border-radius: .625rem; padding: .5rem .625rem; margin-bottom: .45rem; font-size: .8125rem;
  }
  .cmp-table tr.cmp-row[data-v="higher"] { border-left-color: var(--v-higher); }
  .cmp-table tr.cmp-row[data-v="lower"] { border-left-color: var(--v-lower); }
  .cmp-table tr.cmp-row[data-v="match"] { border-left-color: var(--v-match); }
  .cmp-table tr.cmp-row td { display: block; padding: 0; border: 0; background: none; white-space: nowrap; text-align: left; }
  .cmp-table :is(.c-date, .c-fuel, .c-gal, .c-total) { display: none !important; }  /* the total stands in the meta line */
  .cmp-table .c-station { grid-row: 1; grid-column: 1 / 5; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cmp-table .c-du { grid-row: 1; grid-column: 5; text-align: right; font-weight: 600; }
  .cmp-table .c-meta { grid-row: 2; grid-column: 1 / 5; color: var(--cmp-muted); font-size: .75rem; margin-top: .1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cmp-table tr.cmp-row .c-meta { white-space: normal; }  /* the totals of the lines riding along wrap, each whole */
  .cmp-table tr.cmp-row .c-card { grid-row: 3; grid-column: 1 / 6; font-size: .75rem; margin: .2rem 0 .4rem; min-width: 0; }
  .cmp-table .c-flags { grid-row: 2; grid-column: 5; justify-self: end; align-self: start; margin-top: .1rem; }
  /* the three prices start on one line (a "was" hangs under its own); the one the verdict goes by is the bold one */
  .cmp-table :is(.c-trans, .c-invoice, .c-site, .c-ref) { grid-row: 4; display: flex !important; flex-direction: column; align-self: start; }
  .cmp-table :is(.c-trans, .c-invoice) b { font-weight: 700; }
  .cmp-table .c-site { font-weight: 600; }
  .cmp-table .c-trans { grid-column: 1; }
  .cmp-table .c-invoice { grid-column: 2; }
  .cmp-table .c-site { grid-column: 3; }
  .cmp-table .c-ref { grid-column: 3; font-weight: 400; }
  .cmp-table td[data-label]::before { content: attr(data-label); font-size: .625rem; font-weight: 400; color: var(--cmp-muted); }
  .cmp-table .c-dc { grid-row: 4; grid-column: 4 / 6; justify-self: end; }
  .cmp-table .cmp-pill { font-size: .75rem; gap: 0; }
  /* Cards: a block per card — who it is, then the five counts */
  .cmp-cards, .cmp-cards tbody { display: block; }
  .cmp-cards thead { display: none; }
  .cmp-cards tr { display: grid; grid-template-columns: .8fr .6fr 1.2fr 1.2fr 1.2fr; column-gap: .5rem; padding: .5rem .625rem; border-bottom: 1px solid var(--cmp-line); }
  .cmp-cards tr:last-child { border-bottom: 0; }
  .cmp-cards tr td { display: block; padding: 0; border: 0; background: none; }
  .cmp-cards td:first-child { grid-column: 1 / 6; margin-bottom: .35rem; }
  .cmp-cards td[data-label] { display: flex; flex-direction: column; text-align: left; }
  .cmp-cards td[data-label]::before { content: attr(data-label); font-size: .625rem; font-weight: 400; color: var(--cmp-muted); }
}

/* ---- Fill popup ----------------------------------------------------------------------------- */
.fm-head { min-height: 0; align-items: flex-start; gap: .625rem; padding: .875rem 1rem .5rem; border-bottom: 0; }
.fm-title { flex: 1 1 auto; min-width: 0; }
.fm-head .modal-title { font-size: .9375rem; font-weight: 700; margin: 0; }
.fm-meta { font-size: .75rem; color: var(--v-none); margin-top: .125rem; }
.fm-pill { flex: 0 0 auto; margin-top: .1rem; font-size: .8125rem; }
.fm-head .btn-close { position: relative; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; margin: -.125rem -.375rem 0 0; padding: 0; }
.fm { padding: .25rem 1rem 1rem; font-variant-numeric: tabular-nums; }
.fm-card { background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .625rem .75rem; margin-bottom: .625rem; }
.fm-grid { display: grid; grid-template-columns: 5.4rem repeat(var(--fm-cols), 1fr); gap: .3rem .5rem; align-items: baseline; font-size: .875rem; }
/* five columns (both sides of the hour moved) on a phone: tighter, and the card scrolls before a number crosses its edge */
.fm-card:has(> .fm-grid) { overflow-x: auto; }
@media (max-width: 575.98px) { .fm-grid { grid-template-columns: 4.5rem repeat(var(--fm-cols), 1fr); column-gap: .3rem; font-size: .8125rem; } }
.fm-h { font-size: .75rem; font-weight: 600; color: var(--v-none); line-height: 1.2; }
.fm-h small { display: block; font-size: .625rem; font-weight: 400; }
.fm-h .ti { font-size: .85rem; }
.fm-l { color: var(--v-none); }
.fm-billed { font-weight: 700; }
.fm-sub { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; margin-bottom: .3rem; }
.fm-diff-line { display: grid; grid-template-columns: 5.4rem 1fr; gap: .5rem; font-size: .8125rem; }
.fm-flags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .625rem; }
.fm-flag { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-weight: 600; background: #fff4e5; color: #b26b00; }
.fm-flag-wait { background: #f1f3f5; color: var(--v-none); }
.fm-legend { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .6875rem; color: var(--v-none); margin-bottom: .25rem; }
.fm-legend span { display: inline-flex; align-items: center; gap: .3rem; }
/* the popup's legend reads out the prices at the fill, and at the pointer while it is on the chart */
.fm-legend b { font-size: .8125rem; font-weight: 600; color: var(--tblr-body-color); min-width: 2.6rem; }
.fm-legend b:empty { min-width: 0; }
.fm-legend .fm-at { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--tblr-body-color); }
.fm-chart-bar { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: .375rem .75rem; margin-bottom: .25rem; }
.fm-chart-bar .fm-legend { flex: 1 1 18rem; margin-bottom: 0; }
.fm-seg { --tblr-nav-height: 1.75rem; flex: 0 0 auto; font-size: .75rem; }
.fm-seg .nav-link.active { font-weight: 600; }
.fm-sw-billed { height: 0; background: none; border-top: 2px dotted var(--v-higher); }
.fm-sum { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; margin-bottom: .375rem; }
.fm-sum b { font-weight: 600; }
.fm-records-box { max-height: 15rem; overflow-y: auto; }
.fm-records { width: 100%; font-size: .8125rem; border-collapse: collapse; }
.fm-records th { position: sticky; top: 0; background: #fff; font-size: .75rem; font-weight: 600; color: var(--v-none); text-align: left; padding: .15rem .5rem .25rem 0; }
.fm-records td { padding: .2rem .5rem .2rem 0; border-top: 1px solid var(--app-border); white-space: nowrap; }
.fm-records td:first-child, .fm-records td:last-child { color: var(--v-none); }
.fm-records td small { font-size: .6875rem; font-weight: 600; border: 1px solid var(--app-border); border-radius: 999px; padding: 0 .35rem; margin-right: .2rem; }
.fm-rec-fill td { background: #f6f8fb; font-weight: 600; }
.fm-rec-fill td:first-child, .fm-rec-fill td:last-child { color: var(--tblr-body-color); }
.fm-norecords { margin: 0; font-size: .8125rem; color: var(--v-none); }
/* a fill popup with a chart is wider than the other popups: the chart needs the room */
@media (min-width: 768px) { .modal-dialog:has(#fm-prices) { max-width: 720px; } }
.fm-sw { display: inline-block; width: .75rem; height: .1875rem; border-radius: 2px; }
.fm-sw-disc { background: #066fd1; }
.fm-sw-retail { background: #b8c0cc; }
.fm-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; }
.fm-dot-hist { background: #fff; border: 1.5px solid #066fd1; }
.fm-dot-billed { background: var(--v-higher); }
.fm-chart { position: relative; height: 250px; }
/* A finger along a chart moves its time line; up and down still scroll the page (2026-11-13). */
.fm-chart canvas, .pr-chart canvas, .tr-chart canvas { touch-action: pan-y; }
.fm-files { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .8125rem; }
.fm-file { display: inline-flex; align-items: center; gap: .25rem; }

/* ---- Files screen --------------------------------------------------------------------------- */
.fl { font-variant-numeric: tabular-nums; background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .625rem .75rem; margin-bottom: .5rem; overflow: hidden; }
.fl-bar { display: flex; align-items: center; gap: .5rem; }
.fl-acts-bar { margin-left: auto; display: inline-flex; gap: .375rem; }
.fl-bar .btn { gap: .35rem; }
.fl-h { font-size: inherit; font-weight: 700; margin: 0; }
.fl-meta { font-size: .75rem; color: var(--v-none); white-space: nowrap; }
.fl-none { margin: .375rem 0 0; font-size: .8125rem; color: var(--v-none); }
/* The files as lines of a table in a box that scrolls: many files do not push the rest of Data away. */
.fl-box { list-style: none; margin: .625rem -.75rem -.625rem; padding: 0; max-height: 21rem; overflow-y: auto; border-top: 1px solid var(--app-border); }
.fl-row {
  display: grid; grid-template-columns: minmax(0, 1.7fr) 6.5rem 3.5rem minmax(0, 1.3fr) 6.5rem 5rem; align-items: center;
  column-gap: .75rem; padding: .3rem .75rem; border-bottom: 1px solid var(--app-border); font-size: .8125rem;
}
.fl-row:last-child { border-bottom: 0; }
.fl-head { position: sticky; top: 0; z-index: 1; background: #f6f8fa; color: var(--v-none); font-size: .6875rem; font-weight: 600; }
.fl-c { min-width: 0; }
.fl-c.r { text-align: right; }
.fl-rows small { display: none; }
.fl-main { display: flex; align-items: baseline; gap: .5rem; color: var(--tblr-body-color); text-decoration: none; }
.fl-main:hover { text-decoration: none; color: var(--tblr-primary); }
.fl-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-kind { flex: 0 0 auto; font-size: .6875rem; color: var(--v-none); }
.fl-period, .fl-when { white-space: nowrap; }
.fl-when { color: var(--v-none); }
.fl-result { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.fl-unlinked { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: #b26b00; white-space: nowrap; }
.fl-run { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.fl-run .progress { flex: 1 1 4rem; height: 5px; }
.fl-err-text { flex: 1 1 0; min-width: 0; font-size: .75rem; color: var(--v-higher); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-err-text .ti { margin-right: .3rem; }
.fl-result .btn { flex: 0 0 auto; gap: .3rem; }
.fl-failed { box-shadow: inset 3px 0 0 var(--v-higher); }
.fl-acts { display: flex; align-items: center; justify-content: flex-end; }
.fl-icon { flex: 0 0 auto; background: none; border: 0; padding: .2rem .35rem; color: var(--v-none); font-size: 1.05rem; line-height: 1; border-radius: .375rem; }
.fl-icon:hover { color: var(--tblr-primary); background: #f3f6f9; }
.fl-warn, .fl-warn:hover { color: #f59f00; cursor: help; }
.fl-del:hover { color: var(--v-higher); }
@media (max-width: 767.98px) {
  .fl-box { max-height: 60vh; }
  .fl-head { display: none; }
  .fl-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: .1rem; column-gap: .625rem; padding: .45rem .75rem;
    grid-template-areas: "main main main acts" "period rows when when" "result result result result";
  }
  .fl-main { grid-area: main; }
  .fl-acts { grid-area: acts; }
  .fl-period { grid-area: period; }
  .fl-rows { grid-area: rows; }
  .fl-when { grid-area: when; }
  .fl-result { grid-area: result; }
  .fl-rows small { display: inline; }
  .fl-period, .fl-rows, .fl-when { font-size: .75rem; color: var(--v-none); }
}

/* Upload popup */
.up { padding: .5rem 1rem 1rem; }
.up-drop {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer;
  border: 2px dashed #b6d4f2; background: #f3f8fd; border-radius: .75rem; padding: 1.4rem .6rem;
  color: var(--tblr-primary); font-weight: 600;
}
.up-drop .ti { font-size: 1.75rem; }
.up-drop.over { background: #e4effb; border-color: var(--tblr-primary); }
.up-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.up-chosen { display: flex; align-items: center; gap: .4rem; margin-top: .625rem; background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .5rem .75rem; font-size: .875rem; }
.up-chosen[hidden] { display: none; }
.up-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Confirm dialog */
.cf { padding: 1rem; }
.cf-head { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; }
.cf-icon { display: inline-flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: .5rem; background: #fbebeb; color: var(--v-higher); flex: 0 0 auto; }
.cf-icon.cf-calm { background: #e7f1fb; color: var(--tblr-primary); }
.cf-title { font-size: .9375rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.cf-detail { color: var(--v-none); margin-bottom: 1rem; }
.cf-actions { display: flex; gap: .5rem; justify-content: flex-end; }

/* Not-linked rows popup */
.rw-tabs { gap: .25rem; margin-bottom: .625rem; font-size: .8125rem; }
.rw-tabs .nav-link { padding: .25rem .65rem; }
.rw { margin-bottom: .5rem; font-size: .8125rem; }
.rw-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rw-place { font-weight: 600; overflow-wrap: anywhere; }
.rw-vals { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .4rem; }
.rw-vals span { display: flex; flex-direction: column; font-weight: 600; }
.rw-vals small { font-size: .625rem; font-weight: 400; color: var(--v-none); }

/* ---- Prices screen -------------------------------------------------------------------------- */
.app-main:has(.pr) { margin-top: 0; }
.app-main > .container-xl:has(> .pr) { max-width: none; padding: 0; }
.pr {
  --pr-line: #f0f2f4; display: grid; font-variant-numeric: tabular-nums;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 52vh auto; grid-template-areas: "map" "list";
}
.pr-map { grid-area: map; position: relative; min-width: 0; min-height: 0; }
#pr-map { position: absolute; inset: 0; z-index: 0; background: #e9eef3; font: inherit; }
.pr-search { grid-area: map; align-self: start; z-index: 1; min-width: 0; padding: .625rem .625rem 0; pointer-events: none; }
.pr-search > * { pointer-events: auto; }
.pr-field {
  display: flex; align-items: center; gap: .5rem; margin: 0; background: #fff; cursor: text;
  border: 1px solid var(--app-border); border-radius: .5rem; padding: 0 .625rem;
}
.pr-field .ti { color: var(--v-none); font-size: 1.05rem; }
.pr-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; padding: .5rem 0; font-size: 1rem; }
.pr-field:focus-within { border-color: #b6d4f2; box-shadow: 0 0 0 .2rem rgba(6, 111, 209, .15); }
.pr-chips { display: flex; gap: .375rem; margin-top: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pr-chips::-webkit-scrollbar { display: none; }
.pr-search .pr-chips { pointer-events: auto; width: max-content; max-width: 100%; }
.pr-chip { position: relative; flex: 0 0 auto; margin: 0; cursor: pointer; }
.pr-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pr-chip > span {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; background: #fff; border: 1px solid var(--app-border);
  border-radius: 999px; padding: .25rem .65rem; font-size: .75rem; line-height: 1.2;
}
.pr-chip input:checked + span { background: #e7f1fb; border-color: #b6d4f2; color: var(--tblr-primary); font-weight: 600; }
.pr-chip input:focus-visible + span { box-shadow: 0 0 0 .2rem rgba(6, 111, 209, .25); }
@media (max-width: 767.98px) {
  .pr-field, .pr-chip > span { box-shadow: 0 2px 10px rgba(29, 39, 59, .15); }
  .pr-chips { padding-bottom: .5rem; }
  .pr .leaflet-control-zoom { display: none; }
}

.chain-logo, .chain-badge {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; vertical-align: middle;
}
.chain-logo { object-fit: contain; background: #fff; }
.chain-badge {
  display: inline-flex; align-items: center; justify-content: center; background: #e9edf2; color: #4a5565;
  font-size: .5625rem; font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: uppercase;
}
.pr-chip .chain-logo, .pr-chip .chain-badge { margin-left: -.25rem; }

/* Station list */
.pr-list { grid-area: list; background: #fff; min-width: 0; }
/* The list's sheet: on a phone it floats over the map's foot — down to its head, low, or high — and its grip moves
   it (addendum al); above md it is the list's column */
.pr-sheet { grid-area: list; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.pr-sheet > .pr-list { flex: 1 1 auto; min-height: 0; }
.pr-sheet-grab { display: none; }
@media (max-width: 767.98px) {
  .page-body.app-main:has(.pr) { padding-bottom: 0; }
  .pr { grid-template-rows: calc(100dvh - var(--pr-nav-h, 3.5625rem) - var(--app-tabs-h) - env(safe-area-inset-bottom)); grid-template-areas: "map"; }
  .pr-sheet {
    position: fixed; left: 0; right: 0; z-index: 1010; bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom));
    height: 25dvh; border-radius: 1rem 1rem 0 0; box-shadow: 0 -6px 20px rgba(29, 39, 59, .15);
    transition: height .25s cubic-bezier(.2, .8, .2, 1);
  }
  .pr-sheet.pr-dragging { transition: none; }
  .pr[data-sheet="high"] .pr-sheet { height: 76dvh; }
  .pr[data-sheet="min"] .pr-sheet { height: 4.75rem; }
  .pr-sheet-grab { display: flex; flex: 0 0 auto; justify-content: center; padding: .85rem 0 .75rem; cursor: grab; touch-action: none; }
  .pr-sheet-grab span { width: 2.6rem; height: .3rem; border-radius: 2px; background: #c9d0d9; }
  .pr-sheet > .pr-list { overflow-y: auto; overscroll-behavior: contain; }
}
.pr-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem;
  border-bottom: 1px solid var(--pr-line); color: var(--tblr-body-color); text-decoration: none;
}
.pr-row:hover { background: #f8fafc; color: var(--tblr-body-color); text-decoration: none; }
.pr-row.on { background: #e7f1fb; }
.pr-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pr-logo { flex: 0 0 28px; display: flex; justify-content: center; margin-right: -.25rem; }  /* names line up whatever the logo */
.pr-row-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta { font-size: .75rem; color: var(--v-none); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-price { flex: 0 0 auto; white-space: nowrap; }
.pr-price s, .pr-now s { color: var(--v-none); font-size: .75rem; margin-right: .35rem; }
.pr-empty { text-align: center; color: var(--v-none); padding: 2rem 0; margin: 0; }

/* Map markers: price labels and clusters */
.pr-pin-box { width: 0; height: 0; }
.pr-pin {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 6px));
  background: #fff; color: #1d273b; border: 1px solid #cfd6df; border-radius: .5rem; padding: .0625rem .375rem;
  font-size: .6875rem; font-weight: 700; line-height: 1.35; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 6px rgba(29, 39, 59, .18);
}
.pr-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: inherit;
  border-right: 1px solid #cfd6df; border-bottom: 1px solid #cfd6df; transform: translateX(-50%) rotate(45deg);
}
.pr-pin { display: inline-flex; align-items: center; gap: .25rem; }
.pr-pin .chain-logo, .pr-pin .chain-badge { width: 16px; height: 16px; border-radius: 3px; margin-left: -.25rem; }
.pr-pin .chain-badge { font-size: .5rem; }
.pr-pin.sel .chain-badge { background: rgba(255, 255, 255, .25); color: #fff; }
.pr-pin.none { color: var(--v-none); }
.pr-pin.broken { background: #f1f3f5; color: #9aa4b1; border-color: #dde1e6; box-shadow: none; }
.pr-pin.broken::after { border-color: #dde1e6; }
.pr-pin.sel { background: var(--tblr-primary); color: #fff; border-color: var(--tblr-primary); }
.pr-pin.sel::after { border-color: var(--tblr-primary); }
/* The map's circle and the cheapest three in it (addendum aj): a ring over the middle of the map, under the
   markers; the cheapest are green, numbered, larger, above every other marker */
.pr-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 450; pointer-events: none;
  border: 2px solid rgba(6, 111, 209, .55); border-radius: 50%; background: rgba(6, 111, 209, .04);
}
.pr-ring-r {
  position: absolute; left: 50%; bottom: -.7rem; transform: translateX(-50%); padding: .05rem .45rem;
  background: #fff; border: 1px solid rgba(6, 111, 209, .55); border-radius: 999px;
  font-size: .6875rem; font-weight: 700; color: var(--tblr-primary); white-space: nowrap;
}
.pr-searching .pr-ring { display: none; }
.pr-route-on .pr-ring { display: none; }  /* no circle on a route (addendum am) */
/* a cluster is its cheapest station's pin, a card behind it for the others (addendum am) */
.pr-pin.clu { box-shadow: 3px -3px 0 -1px #fff, 3px -3px 0 0 #cfd6df, 0 2px 6px rgba(29, 39, 59, .18); }
.pr-pin.clu.top { box-shadow: 3px -3px 0 -1px #fff, 3px -3px 0 0 #2a9d3c, 0 2px 6px rgba(29, 39, 59, .18); }
/* The Smart route (addendum ak): a Route button beside the search, From and To under it, the route's line and
   its cheapest violet — the circle's stay green */
.pr-bar { display: flex; gap: .5rem; align-items: stretch; position: relative; }
.pr-q-sugg { max-height: min(18rem, 45dvh); }
.pr-q-sugg .pr-sugg-item .ti { color: var(--v-none); }
.pr-sugg-text { display: flex; flex-direction: column; min-width: 0; }
.pr-sugg-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sugg-text small { font-size: .6875rem; color: var(--v-none); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-bar .pr-field { flex: 1 1 auto; min-width: 0; }
.pr-route-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .75rem; border-radius: .5rem;
  border: 1px solid #6d28d9; background: #7c3aed; color: #fff; font-weight: 600; font-size: .875rem;
}
.pr-route-btn:hover { background: #6d28d9; }
.pr-route-btn[aria-expanded="true"] { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
.pr-route-btn .ti { font-size: 1.1rem; }
.pr-route {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .5rem; margin-top: .5rem; padding: .5rem;
  background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; box-shadow: 0 2px 10px rgba(29, 39, 59, .12);
}
.pr-route[hidden] { display: none; }
.pr-ends { display: grid; gap: .35rem; min-width: 0; }
.pr-end { position: relative; display: flex; align-items: center; gap: .45rem; padding: 0 .6rem; background: #f6f7f9; border-radius: .5rem; }
.pr-end .ti { color: var(--v-none); font-size: 1rem; }
.pr-end input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; padding: .45rem 0; font-size: .9375rem; }
.pr-end:focus-within { box-shadow: 0 0 0 .15rem rgba(124, 58, 237, .3); }
.pr-sugg {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 1100; max-height: 15rem; overflow-y: auto;
  background: #fff; border: 1px solid var(--app-border); border-radius: .5rem; box-shadow: 0 6px 18px rgba(29, 39, 59, .18);
}
.pr-sugg[hidden] { display: none; }
.pr-sugg-item {
  display: flex; align-items: center; gap: .4rem; width: 100%; padding: .45rem .7rem; border: 0; background: none;
  text-align: left; font-size: .8125rem; color: var(--tblr-body-color);
}
.pr-sugg-item:hover, .pr-sugg-item:focus { background: #f5f3ff; outline: 0; }
.pr-sugg-item .ti { color: #7c3aed; }
.pr-sugg-note { padding: .45rem .7rem; font-size: .75rem; color: var(--v-higher); }
.pr-route-tools { display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
.pr-route-tools button {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0;
  border-radius: .5rem; background: none; color: var(--v-none);
}
.pr-route-tools button:hover { background: #f1f5f9; color: var(--tblr-body-color); }
.pr-route-tools .ti { font-size: 1.1rem; }
.pr-route-state { grid-column: 1 / -1; font-size: .75rem; font-weight: 600; color: #6d28d9; min-height: 0; }
.pr-route-state:empty { display: none; }
.pr-route-state.bad { color: var(--v-higher); }
/* The route in one line in place of the search once both ends are chosen; the line opens From and To again
   (addendum al) */
.pr-route-line, .pr-route-x { display: none; }
.pr-route-on .pr-bar .pr-field, .pr-route-on .pr-route-btn { display: none; }
.pr-route-on .pr-route-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: center; flex: 1 1 auto;
  min-width: 0; padding: .35rem .65rem; background: #fff; border: 1px solid #c4b5fd; border-radius: .5rem;
  text-align: left; color: var(--tblr-body-color);
}
.pr-route-line .ti { grid-row: 1 / 3; color: #7c3aed; font-size: 1.15rem; }
.pr-route-ends { font-weight: 700; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-route-sum { font-size: .75rem; font-weight: 600; color: #6d28d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-route-sum:empty { display: none; }
.pr-route-sum.bad { color: var(--v-higher); white-space: normal; }
.pr-route-on .pr-route-x {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.6rem;
  border: 1px solid var(--app-border); border-radius: .5rem; background: #fff; color: var(--v-none);
}
.pr-route-on .pr-route-x:hover { color: var(--tblr-body-color); background: #f8fafc; }
.pr-route-x .ti { font-size: 1.15rem; }
.pr-route-on .pr-route-state { display: none; }  /* the line says it */
.pr-pin.lifted { transform: translate(-50%, calc(-100% - 6px - var(--lift) * 1.6rem)); }
.pr-pin.lifted::after { display: none; }
.pr-pin.top { background: #2fb344; color: #fff; border-color: #2a9d3c; font-size: .8125rem; padding: .125rem .45rem; }
.pr-pin.top::after { border-color: #2a9d3c; }
.pr-pin.top .chain-badge { background: rgba(255, 255, 255, .25); color: #fff; }
.pr-pin.top.sel { background: var(--tblr-primary); border-color: var(--tblr-primary); }
.pr-pin-rank {
  display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem;
  margin-left: -.2rem; border-radius: 50%; background: #fff; color: #2a9d3c; font-size: .6875rem; font-weight: 800;
}
.pr-pin-rank .ti, .pr-rank .ti { font-size: .8rem; line-height: 1; color: inherit; }
.pr-locate a { display: flex; align-items: center; justify-content: center; color: var(--tblr-body-color); }
.pr-locate .ti { font-size: 1.1rem; }
.pr-near { padding: .5rem .75rem; font-size: .75rem; color: var(--v-none); border-bottom: 1px solid var(--pr-line); }
.pr-near b { color: var(--tblr-body-color); }
.pr-row.pr-top .pr-price b { color: #2a9d3c; }
.pr-rank {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  margin-right: -.25rem; border-radius: 50%; background: #2fb344; color: #fff; font-size: .75rem; font-weight: 800;
}
.leaflet-marker-icon.pr-clu {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(6, 111, 209, .88); color: #fff; font-size: .75rem; font-weight: 700;
  box-shadow: 0 0 0 5px rgba(6, 111, 209, .2);
}

/* Station panel: a bottom sheet over the map on phones, the third column above md */
.pr-panel { display: none; background: #fff; }
.pr.has-station .pr-panel { display: block; }
.pr-grab { width: 2.4rem; height: .25rem; border-radius: 2px; background: #c9d0d9; margin: 0 auto .5rem; }
@media (max-width: 767.98px) {
  .pr-panel {
    position: fixed; left: 0; right: 0; z-index: 1020; bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom));
    max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; padding: .5rem .875rem .875rem;
    border-radius: 1.125rem 1.125rem 0 0; box-shadow: 0 -6px 20px rgba(29, 39, 59, .15);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  .pr-panel.pr-dragging { transition: none; }
  .pr-grab-zone {
    display: flex; justify-content: center; position: sticky; top: 0; z-index: 3; margin: -.5rem -.875rem .25rem;
    padding: .8rem 0 .7rem; background: #fff; touch-action: none; cursor: grab;
  }
  .pr-grab-zone .pr-grab { margin: 0; width: 2.6rem; height: .3rem; }
}
.pr-head { display: flex; align-items: flex-start; gap: .625rem; }
.pr-head > .chain-logo, .pr-head > .chain-badge { margin-top: .125rem; }
.pr-title { flex: 1 1 auto; min-width: 0; }
.pr-title h2 { font-size: .9375rem; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-now { flex: 0 0 auto; white-space: nowrap; }
.pr-now b { font-size: 1.125rem; font-weight: 700; }
.pr-head .btn-close { position: relative; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; margin: -.125rem -.375rem 0 0; }
.pr-seg { display: flex; width: 100%; margin: .625rem 0 .5rem; font-size: .8125rem; --tblr-nav-height: 2rem; }
.pr-seg .nav-link { flex: 1 1 0; justify-content: center; }
.pr-seg .nav-link.active { font-weight: 600; }
.pr-older-row { display: flex; justify-content: flex-end; margin-top: .375rem; }
.pr-older { gap: .3rem; padding: .15rem .5rem; font-size: .75rem; background: #fff; }
.pr-older .ti { font-size: .95rem; margin: 0; }
.pr-dot-fill { background: var(--v-none); }
.pr-chart { position: relative; height: 170px; margin-top: .25rem; }
.pr-nodata { margin: 0; padding: 1rem 0 .5rem; text-align: center; font-size: .8125rem; color: var(--v-none); }
.pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; margin-top: .625rem; text-align: center; }
.pr-stats div { background: var(--app-bg); border-radius: .5rem; padding: .3rem .125rem; }
.pr-stats b { display: block; font-size: .8125rem; }
.pr-stats span { font-size: .625rem; color: var(--v-none); }
.pr-fills-h { font-size: .75rem; color: var(--v-none); margin: .75rem 0 .25rem; }
.pr-fill {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer;
  padding: .375rem .25rem; border-top: 1px solid var(--pr-line); font-size: .8125rem;
}
.pr-fill:hover { background: #f8fafc; }
.pr-fill-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mk { display: inline-block; width: 4px; height: 1rem; border-radius: 2px; vertical-align: middle; margin-right: .45rem; background: var(--v-none); }
.pr-fill[data-v="higher"] .pr-mk { background: var(--v-higher); }
.pr-fill[data-v="lower"] .pr-mk { background: var(--v-lower); }
.pr-fill[data-v="match"] .pr-mk { background: var(--v-match); }

/* Above md: list | map | panel, filling the window under the header */
@media (min-width: 768px) {
  .page:has(.pr) { height: 100vh; height: 100dvh; }
  .page:has(.pr) > .app-nav { flex-shrink: 0; }
  .app-main:has(.pr) { flex: 1 1 auto; display: flex; min-height: 0; margin: 0; padding: 0; }
  .app-main > .container-xl:has(> .pr) { flex: 1 1 auto; display: flex; min-height: 0; }
  .pr {
    flex: 1 1 auto; min-height: 0; grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "search map" "list map";
  }
  .pr.has-station { grid-template-columns: 18rem minmax(0, 1fr) 22rem; grid-template-areas: "search map panel" "list map panel"; }
  .pr-search { grid-area: search; z-index: auto; pointer-events: auto; background: #fff; padding: .625rem .75rem .5rem; border-right: 1px solid var(--app-border); border-bottom: 1px solid var(--pr-line); }
  .pr-chips { flex-wrap: wrap; overflow: visible; }
  .pr-search .pr-chips { width: auto; }
  .pr-list { overflow-y: auto; border-right: 1px solid var(--app-border); }
  .pr-panel { grid-area: panel; overflow-y: auto; padding: .75rem .875rem; border-left: 1px solid var(--app-border); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pr { grid-template-columns: 15rem minmax(0, 1fr); }
  .pr.has-station { grid-template-columns: 15rem minmax(0, 1fr) 19rem; }
}

/* ---- Data screen ---------------------------------------------------------------------------- */
.dt { font-variant-numeric: tabular-nums; }
.dt-bar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.dt-h { font-size: 1.125rem; font-weight: 700; margin: 0; }
.dt-sub { font-size: .75rem; color: var(--v-none); }
.dt-card { display: block; background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .625rem .75rem; margin-bottom: .5rem; color: var(--tblr-body-color); }
.dt-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dt-meta { font-size: .75rem; color: var(--v-none); margin: .125rem 0 .5rem; }
.dt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dt-actions .btn { gap: .35rem; }
.dt-sec { font-size: .8125rem; font-weight: 700; color: var(--v-none); margin: 1rem 0 .5rem; }
.dt-runs { padding: 0; }
.dt-r { padding: .5rem .75rem; border-bottom: 1px solid var(--app-border); }
.dt-r:last-child { border-bottom: 0; }
.dt-r .dt-meta { margin: 0; }
.dt-r-bad { border-left: 4px solid var(--v-higher); }
.dt-err { font-size: .75rem; color: var(--v-higher); overflow-wrap: anywhere; }
.dt-prog { height: 5px; margin: .25rem 0; }
.sync-text { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-msg { display: inline-flex; gap: .3rem; min-width: 0; }
.sync-next { white-space: nowrap; }
@media (max-width: 767.98px) {  /* phones: no hover, so the whole state text is shown, wrapped */
  #sync-status { min-width: 0; }
  .sync-msg { display: block; }
  .sync-text { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .sync-next { display: block; }  /* the next try on a line of its own, under the error */
  .sync-dot { display: none; }
}
.app-pill { gap: .3rem; }
.dt-top + .dt-actions { margin-top: .5rem; }
.dt-job { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.dt-job .progress { flex: 1 1 4rem; height: 5px; }

/* ---- Settings screen and first-run banner ---------------------------------------------------- */
.app-banner { display: flex; align-items: center; gap: .5rem; padding: .4rem 1rem; background: #fff4e5; color: #8a5300; border-bottom: 1px solid #f5d9a8; font-size: .8125rem; font-weight: 600; }
.app-banner:hover { text-decoration: none; background: #ffeed6; }
.st { max-width: 36rem; }
.st-bar { margin-bottom: .75rem; }
.st-h { font-size: 1.125rem; font-weight: 700; margin: 0; }
.st-card { display: block; background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .75rem; margin-bottom: .5rem; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; min-height: 1.75rem; }
.st-status { font-size: .75rem; color: var(--v-none); text-align: right; }
.st-status.st-bad { color: var(--v-higher); }
.st-lb { display: block; font-size: .75rem; color: var(--v-none); margin: .5rem 0 .25rem; }
.st-err { font-size: .75rem; color: var(--v-higher); margin-top: .25rem; }
.st-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.st-actions .btn { gap: .35rem; }
.st-top .btn { gap: .35rem; }
.st-utable td { vertical-align: middle; }
.st-uact .btn { vertical-align: middle; }
@media (max-width: 575.98px) { .st-utable th, .st-utable td { padding-inline: .3rem; } .st-uact .btn { padding-inline: .4rem; } }

/* ---- Prices · Trends ------------------------------------------------------------------------ */

.tr {
  --tr-line: #f0f2f4; --tr-fall: #1f8a34;
  --tr-up1: #fcecec; --tr-up2: #f6c9c9; --tr-up3: #eea0a0;
  --tr-dn1: #e9f6eb; --tr-dn2: #c5e9cb; --tr-dn3: #98d8a3;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; font-variant-numeric: tabular-nums;
}
.tr > *, .tr-pair > * { min-width: 0; }
.tr:has(.htmx-request) > * { opacity: .6; transition: opacity .15s; }
.tr-card { background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .75rem; }
.tr-h { display: flex; align-items: baseline; gap: .4rem; font-size: .875rem; font-weight: 700; margin: 0 0 .5rem; }
.tr-sub { font-size: .75rem; font-weight: 600; color: var(--v-none); margin: 0 0 .25rem; }
.tr-count { font-size: .75rem; font-weight: 600; color: var(--v-none); }
.tr-quiet { color: var(--v-none); font-size: .8125rem; margin: 0; }
.tr-up { color: var(--v-higher); }
.tr-dn { color: var(--tr-fall); }
.tr .r { text-align: right; }

/* Controls */
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.tr-seg { display: inline-flex; gap: 2px; padding: 2px; background: #e9edf2; border-radius: .5rem; }
.tr-seg a { padding: .2rem .65rem; border-radius: .375rem; font-size: .8125rem; color: var(--tblr-body-color); text-decoration: none; white-space: nowrap; }
.tr-seg a.on { background: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(29, 39, 59, .14); }
.tr-since { font-size: .75rem; color: var(--v-none); white-space: nowrap; }
.tr-chips { display: flex; gap: .375rem; margin-top: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tr-chips::-webkit-scrollbar { display: none; }
.tr-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; background: #fff;
  border: 1px solid var(--app-border); border-radius: 999px; padding: .25rem .65rem; font-size: .75rem; line-height: 1.2;
  color: var(--tblr-body-color); text-decoration: none;
}
.tr-chip:hover { text-decoration: none; color: var(--tblr-body-color); border-color: #c9d0d9; }
.tr-chip.on { background: #e7f1fb; border-color: #b6d4f2; color: var(--tblr-primary); font-weight: 600; }
.tr-chip .chain-logo, .tr-chip .chain-badge { margin-left: -.3rem; width: 18px; height: 18px; }
.tr-chip .ti { font-size: .9rem; }
/* "Other": the logos of the rest of the chains in one chip, overlapping (Trends and the map). */
.chain-stack { display: inline-flex; align-items: center; margin: 0 -.15rem; }  /* alone in its chip: no caption */
.chain-stack .chain-logo, .chain-stack .chain-badge { margin-left: 0; box-shadow: 0 0 0 1.5px #fff; }
.chain-stack > :not(:first-child) { margin-left: -9px; }

/* Tiles: 2 x 2 on phones */
.tr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 768px) { .tr-tiles { grid-template-columns: repeat(4, 1fr); gap: .75rem; } }
.tr-tile { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: .55rem .7rem; }
.tr-tile-l { font-size: .75rem; color: var(--v-none); }
.tr-tile-n { font-size: 1.15rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .tr-tile-n { font-size: 1.375rem; } }
.tr-tile-d { display: inline-flex; align-items: center; gap: .15rem; font-size: .8125rem; font-weight: 600; color: var(--v-none); }
.tr-tile-d .ti { font-size: .95rem; }
.tr-tile-b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; }
.tr-tile-from { font-size: .8125rem; color: var(--v-none); white-space: nowrap; }
.tr-wide { grid-column: 1 / -1; background: #fff; border: 1px solid var(--app-border); border-radius: .625rem; padding: 1rem; text-align: center; }

/* Colour of a difference: red dearer / rising, green cheaper / falling (fmt.tone) */
.tr :is(.t-up1, .t-up2, .t-up3) { color: var(--v-higher); }
.tr :is(.t-dn1, .t-dn2, .t-dn3) { color: var(--tr-fall); }
.tr .t-none, .tr .t-0 { color: var(--v-none); }

/* Tables: scroll sideways inside their card, never the page */
.tr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.25rem; padding: 0 .25rem; }
.tr-table { width: 100%; font-size: .8125rem; border-collapse: separate; border-spacing: 0; }
.tr-table th { font-size: .6875rem; font-weight: 600; color: var(--v-none); white-space: nowrap; padding: .35rem .5rem; border-bottom: 1px solid var(--app-border); text-align: left; background: #fff; }
.tr-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--tr-line); white-space: nowrap; }
.tr-table tbody tr:last-child > * { border-bottom: 0; }
.tr-table th.r { text-align: right; }
.tr-table tr.tr-groups th { border-bottom: 0; padding-bottom: 0; }
.tr-table th.tr-g { text-align: center; color: var(--tblr-body-color); box-shadow: inset 0 -1px 0 var(--app-border); }
.tr-table th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.tr-table th[aria-sort] button { color: var(--tblr-body-color); }
.tr-table th[aria-sort="ascending"] button::after { content: " ↑"; }
.tr-table th[aria-sort="descending"] button::after { content: " ↓"; }
.tr-table tr.on td { background: #f3f8fd; }
.tr-table .tr-small, .tr-table .tr-small td, .tr-muted { color: #9aa4b1; }
.tr-table .tr-small b { font-weight: 600; }
.tr-range { color: var(--v-none); margin-right: .75rem; }  /* the two prices a spread is the difference of */
.tr-table tbody th { font-size: .8125rem; font-weight: 400; color: var(--tblr-body-color); border-bottom: 1px solid var(--tr-line); }
.tr-sw { display: inline-block; width: .625rem; height: .625rem; border-radius: 2px; margin-right: .4rem; }
.tr-name { display: inline-flex; align-items: center; gap: .4rem; }
.tr-total td { font-weight: 700; border-top: 1px solid var(--app-border); }

/* Chains by region: the map's squares are .tr-sq (By state's), its lines an ordinary table */

/* Two panes: table and chart, map and table */
.tr-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 992px) { .tr-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.tr-chart { position: relative; height: 220px; }
.tr-legend { display: flex; flex-wrap: wrap; gap: .125rem .5rem; font-size: .75rem; margin-bottom: .25rem; color: var(--tblr-body-color); }
.tr-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.tr-legend button { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: .125rem .25rem; border-radius: .375rem; font: inherit; color: inherit; cursor: pointer; }
.tr-legend button:hover { background: #f3f6f9; }
.tr-legend button[aria-pressed="false"] { color: #9aa4b1; }
.tr-legend button[aria-pressed="false"] .tr-line { opacity: .3; }
.tr-line { display: inline-block; width: .875rem; height: 3px; border-radius: 2px; }
.tr-line-retail { background: #b8c0cc; }
.tr-line-disc { background: #066fd1; }

/* By state: the US as a tile grid; squares stay at least 28 px on a phone */
.tr-map { display: grid; grid-template-columns: repeat(11, minmax(28px, 1fr)); gap: 2px; max-width: 36rem; align-self: start; }
@media (min-width: 576px) { .tr-map { gap: 3px; } }
.tr-sq {
  aspect-ratio: 1; min-height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 4px; background: #f4f6f8; color: var(--tblr-body-color); text-decoration: none; line-height: 1.1; overflow: hidden;
}
.tr-sq:hover { text-decoration: none; color: var(--tblr-body-color); box-shadow: inset 0 0 0 1px #9aa4b1; }
.tr-sq b { font-size: .625rem; font-weight: 700; }
.tr-sq span { font-size: .5625rem; }
@media (min-width: 576px) { .tr-sq b { font-size: .75rem; } .tr-sq span { font-size: .625rem; } }
.tr .tr-sq:is(.t-up1, .t-up2, .t-up3, .t-dn1, .t-dn2, .t-dn3, .t-0) { color: var(--tblr-body-color); }
.tr-sq.t-up1 { background: var(--tr-up1); } .tr-sq.t-up2 { background: var(--tr-up2); } .tr-sq.t-up3 { background: var(--tr-up3); }
.tr-sq.t-dn1 { background: var(--tr-dn1); } .tr-sq.t-dn2 { background: var(--tr-dn2); } .tr-sq.t-dn3 { background: var(--tr-dn3); }
.tr-sq.t-0 { background: #e9edf2; }
.tr-map-side { min-width: 0; align-self: start; }
/* Chains by region: the outlines of the states, a region filled alike (addenda v, w, x). The fill is set on each
   state by the page: green for cheaper than the chain's typical price and red for dearer, light to deep on the
   chain's own scale, nothing between the two and nothing that fades. White is only "no figure": a small sample
   or no station. The figures on the map are ink with a white edge, never the fill's colour. */
.tr-geo-box { min-width: 0; }
.tr-geo { display: block; width: 100%; height: auto; max-width: 46rem; }
.tr-geo .st { stroke: none; }
.tr-geo-inner { fill: none; stroke: #fff; stroke-width: .7; stroke-opacity: .55; pointer-events: none; }
/* between two regions: a white band with a hairline in it, so a region without a colour is still a shape */
.tr-geo-casing { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.tr-geo-line { fill: none; stroke: #6b7686; stroke-width: 1; stroke-linejoin: round; pointer-events: none; }
/* a region under the pointer is ringed in ink; the others keep their colours */
.tr-geo-ring { fill: none; stroke: #1d273b; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; opacity: 0; }
.tr-geo:has(.st[data-r="east"]:hover) .tr-geo-ring[data-r="east"], .tr-geo:has(.st[data-r="midwest"]:hover) .tr-geo-ring[data-r="midwest"], .tr-geo:has(.st[data-r="gulf"]:hover) .tr-geo-ring[data-r="gulf"], .tr-geo:has(.st[data-r="rocky"]:hover) .tr-geo-ring[data-r="rocky"], .tr-geo:has(.st[data-r="west"]:hover) .tr-geo-ring[data-r="west"], .tr-geo:has(.st[data-r="ca"]:hover) .tr-geo-ring[data-r="ca"] { opacity: 1; }
.tr-geo-label { text-anchor: middle; pointer-events: none; fill: #1d273b; paint-order: stroke; stroke: rgba(255, 255, 255, .88); stroke-width: 4px; stroke-linejoin: round; }
.tr-geo-label .n { font-size: 16px; font-weight: 600; }
.tr-geo-label .p { font-size: 25px; font-weight: 700; }
.tr-geo-label.off { fill: #8792a2; }
@media (max-width: 767.98px) {  /* a phone: the sheet is a third as wide, so the letters are larger on it */
  .tr-geo-label .n { font-size: 24px; } .tr-geo-label .p { font-size: 36px; }
  .tr-geo-label { stroke-width: 6px; }
}
/* the strip: the deep green of the chain's cheapest side to its light green, the chain's typical price where the
   colour turns, then at once its light red to the deep */
.tr-geo-key { display: flex; align-items: center; gap: 0; margin-top: .25rem; font-size: .6875rem; color: var(--v-none); white-space: nowrap; }
.tr-geo-key i { width: 4.5rem; height: .6rem; }
.tr-geo-key i.g { margin-left: .4rem; border-radius: 2px; background: linear-gradient(to right, #006d2c, #238b45, #41ab5d, #74c476); }
.tr-geo-key .mid { margin: 0 .35rem; font-weight: 600; }
.tr-geo-key i.r { margin-right: .4rem; border-radius: 2px; background: linear-gradient(to right, #fca5a5, #f87171, #ef4444, #dc2626); }
.tr-total > td { border-top: 1px solid var(--app-border); font-weight: 600; }
@media (min-width: 992px) { .tr-split-geo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1.5rem; align-items: start; } }
.tr .tr-sq.t-none { background: #f6f7f9; color: #b3bac4; }
.tr-sq.on { box-shadow: inset 0 0 0 2px var(--tblr-primary); }
@media (max-width: 575.98px) { #tr-states { padding: .5rem; } }

/* Lists: discount cuts, movers, a sync's changes */
.tr-line-row {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .125rem; border-top: 1px solid var(--tr-line);
  font-size: .8125rem; color: var(--tblr-body-color); text-decoration: none;
}
.tr-line-row:hover { background: #f8fafc; color: var(--tblr-body-color); text-decoration: none; }
.tr-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tr-code { flex: 0 0 auto; font-size: .75rem; color: var(--v-none); }
.tr-fromto { flex: 0 0 auto; white-space: nowrap; color: var(--v-none); }
.tr-diff { flex: 0 0 auto; min-width: 3.25rem; text-align: right; font-weight: 700; white-space: nowrap; }
.tr-big { font-size: 1.05rem; font-weight: 700; margin: 0 0 .25rem; }
.tr-place { font-size: .6875rem; font-weight: 600; color: var(--v-none); margin: .5rem 0 0; }
.tr-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 992px) { .tr-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 576px) { .tr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* What changed (addendum ah): the syncs that moved your price, then those of the retail price alone; on a wide
   screen one grid under a head — the labels of a line are for a phone, where a line is two rows */
.tr-feed { --tr-feed-cols: 6.25rem 4.75rem 12.5rem 12.5rem 1fr; max-width: 45rem; }
.tr-feed-head {
  display: grid; grid-template-columns: var(--tr-feed-cols); column-gap: 1rem; padding: 0 .125rem .3rem;
  font-size: .6875rem; font-weight: 600; color: var(--v-none);
}
.tr-group {
  display: grid; grid-template-columns: var(--tr-feed-cols); column-gap: 1rem; align-items: baseline;
  padding: .7rem .125rem .3rem; font-size: .75rem; font-weight: 700;
}
.tr-group-n { grid-column: 1 / 3; white-space: nowrap; }
/* what the numbers under it are, in the places of a line's numbers: the stations up, down, the average change */
.tr-sub { display: inline-flex; gap: .4rem; font-size: .6875rem; font-weight: 600; color: var(--v-none); white-space: nowrap; }
.tr-sub > :first-child { min-width: 2.25rem; }
.tr-sub > :nth-child(2) { min-width: 3.4rem; }
.tr-sub > :last-child { min-width: 3rem; text-align: right; }
.tr-feed-head + .tr-group { padding-top: .15rem; }
.tr-run summary {
  display: grid; grid-template-columns: var(--tr-feed-cols); column-gap: 1rem; align-items: baseline;
  padding: .45rem .125rem; border-top: 1px solid var(--tr-line); font-size: .8125rem; cursor: pointer; list-style: none;
}
.tr-run summary::-webkit-details-marker { display: none; }
.tr-run summary:hover { background: #f8fafc; }
.tr-when { font-weight: 600; white-space: nowrap; }
.tr-changed { color: var(--v-none); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tr-moves { display: contents; }
.tr-move { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-move-l { color: var(--v-none); font-size: .75rem; }
.tr-move .tr-n { min-width: 2.25rem; }
.tr-move .tr-n + .tr-n { min-width: 3.4rem; }
.tr-move .tr-zero { color: #b3bac4; }
.tr-move .tr-diff { min-width: 3rem; }
.tr-move .tr-quiet { font-size: inherit; }
.tr-caret { justify-self: end; color: var(--v-none); transition: transform .15s; }
.tr-run[open] .tr-caret { transform: rotate(180deg); }
@media (min-width: 768px) {  /* the head names the columns: a line's own labels are left to a screen reader */
  .tr-feed .tr-ph, .tr-run-table .tr-ph {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
}
@media (max-width: 767.98px) {  /* a phone: time, stations and the caret, then the two prices under them */
  .tr-feed-head, .tr-sub { display: none; }
  .tr-group { display: block; }
  .tr-run summary { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .15rem; }
  .tr-changed { text-align: left; }
  .tr-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; grid-row: 2; grid-column: 1 / -1; }
  .tr-caret { grid-row: 1; grid-column: 3; }
  .tr-move { flex-wrap: wrap; gap: 0 .3rem; font-size: .75rem; }  /* a long line breaks inside its own column */
  .tr-move-l { font-size: .6875rem; }
  .tr-move .tr-n, .tr-move .tr-n + .tr-n, .tr-move .tr-diff { min-width: 0; }
}
.tr-run-list { padding: .1rem 0 .6rem .75rem; }
.tr-run-list .tr-quiet { padding: .35rem 0; }
.tr-run-list .pager { justify-content: flex-start; margin: .35rem 0 0 .5rem; }
.tr-run-table { width: auto; }
.tr-run-table td, .tr-run-table th { padding-left: .75rem; padding-right: .75rem; }
.tr-run-table .tr-name { color: var(--tblr-body-color); text-decoration: none; font-weight: 600; }
.tr-run-table .tr-name:hover { text-decoration: underline; }
.tr-run-table .tr-code { font-weight: 400; }
.tr-run-table .tr-pp, .tr-run-table .tr-d { font-variant-numeric: tabular-nums; }
.tr-run-table .tr-d { font-weight: 700; }
.tr-run-table .tr-d .tr-quiet { font-weight: 400; font-size: inherit; padding: 0; }
.tr-run-name { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (max-width: 767.98px) {  /* a phone: your price whole, the retail price by its change alone — no sideways scroll */
  .tr-run-list { padding-left: 0; }
  .tr-run-list .pager { justify-content: flex-end; margin-left: 0; }
  .tr-run-table { width: 100%; }
  .tr-run-table td, .tr-run-table th { padding-left: .3rem; padding-right: .3rem; }
  .tr-run-table .tr-rp { display: none; }
  .tr-run-table .tr-pp { font-size: .75rem; }
  .tr-run-table .tr-name { gap: .3rem; }
  .tr-run-table .tr-run-name { max-width: 6.5rem; }
}
.tr-disc-sub { margin-top: .6rem; }
/* Retail vs Your price: the summary by what the retail price did, and the two lists of stations under it */
.tr-versus { max-width: 40rem; }
#tr-versus .tr-name { color: var(--tblr-body-color); text-decoration: none; font-weight: 600; }
#tr-versus .tr-name:hover { text-decoration: underline; }
.tr-versus-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 2rem; margin-top: .75rem; }
@media (min-width: 992px) { .tr-versus-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 575.98px) {  /* a phone: the three changes stay in sight beside the station */
  #tr-versus .tr-table th { white-space: normal; }
  #tr-versus .tr-table :is(th, td) { padding-left: .3rem; padding-right: .3rem; }
  #tr-versus .tr-run-name { max-width: 7.5rem; }
}
.tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.tr-head-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }  /* a block's switches, when it has two */
.tr-head .tr-h { margin: 0; }
.tr-seg-sm a { padding: .125rem .55rem; font-size: .75rem; }
@media (min-width: 992px) { .tr-split.tr-split-one { grid-template-columns: minmax(0, 1fr); } }

/* By state: the table scrolls inside a box as tall as the map (wide screens) or 320 px (narrower) */
.tr-states-scroll { max-height: 320px; overflow: auto; }
.tr-states-scroll thead th { position: sticky; top: 0; z-index: 2; }
@media (min-width: 992px) {
  .tr-split-states { align-items: stretch; }
  .tr-states-box { position: relative; min-height: 320px; }
  .tr-states-box > .tr-states-scroll { position: absolute; inset: 0; max-height: none; }
}

/* A list's pages (templates/_pager.html): first, previous, the rows shown of how many, next, last */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; margin-top: .4rem; font-size: .75rem; color: var(--v-none); }
.pg { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--app-border); border-radius: .375rem; color: var(--tblr-body-color); background: #fff; text-decoration: none; }
a.pg:hover { background: #f1f5f9; color: var(--tblr-body-color); text-decoration: none; }
.pg.off { color: #c6cdd6; background: none; }
.pg-n { white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 .25rem; }
.cmp > .pager { margin: .6rem 0 0; }
.pr-list > .pager { margin: 0; padding: .6rem .75rem; }
@media (max-width: 575.98px) { .pg { width: 2.25rem; height: 2.25rem; } }  /* a finger, not a pointer */