/*
 * Admin dashboard, built phone first.
 *   Under 1000px: a dark top bar with the logo and a Menu button, the full menu sliding in
 *                 from the right, and a bar of the four most-used pages along the bottom.
 *   1000px and up: the menu is a fixed rail down the left and the two bars go away.
 */

.admin { min-height: 100vh; min-height: 100dvh; }
body.menu-open { overflow: hidden; }          /* the page behind the open menu stays put */

/* ---------- Shell ---------- */

.topbar {
  position: relative; z-index: 32;          /* scrolls away with the page; the bar at the bottom keeps the Menu button in reach */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; padding: calc(6px + env(safe-area-inset-top)) var(--gutter) 6px;
  background: var(--dark); color: #fff; --focus: #fff;
}
.topbar .brand { min-height: 44px; }
.topbar .brand img { height: 30px; }
.topbar__menu {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px;
  font: 600 0.9375rem/1 var(--font); color: #fff; cursor: pointer;
  background: transparent; border: 1px solid #4A5258; border-radius: var(--r-s);
}
.topbar__menu:hover { border-color: #C9CFCF; }

.side {
  position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(320px, 88vw);
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(8px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  background: var(--dark); color: #C9CFCF; overflow-y: auto; overscroll-behavior: contain; --focus: #fff;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.side.is-open { transform: none; visibility: visible; transition: transform 0.2s ease-out; box-shadow: -18px 0 40px rgba(0, 0, 0, 0.3); }
.side__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.side__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -4px; color: #fff; cursor: pointer; background: transparent; border: 0; border-radius: var(--r-s); }
.side__close:hover { background: var(--dark-2); }
.side .brand { padding: 4px 8px; }
.side .brand img { height: 34px; }
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__nav a, .side__foot a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px;
  color: #C9CFCF; text-decoration: none; font-weight: 500; border-radius: var(--r-s);
}
.side__nav a:hover, .side__foot a:hover { background: var(--dark-2); color: #fff; }
.side__nav a[aria-current="page"] { background: var(--dark-2); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.side__nav .side__add { color: #fff; }
.side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid #3A4046; }
.side__foot a { font-weight: 400; font-size: 0.9375rem; }
.ico { flex: none; }

.side-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(36, 40, 41, 0.6); }
.side-scrim[hidden] { display: none; }

.main { padding: 20px var(--gutter) calc(96px + env(safe-area-inset-bottom)); max-width: calc(1216px + 2 * var(--gutter)); margin: 0 auto; }
.main > * + * { margin-top: var(--gap); }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font: 500 0.75rem/1 var(--font); color: var(--ink-2); text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 3px 0 var(--accent); }
.tabbar .tabbar__add { color: var(--ink); font-weight: 600; }
.tabbar .tabbar__add .ico { background: var(--accent); color: var(--ink); border-radius: 50%; padding: 5px; width: 32px; height: 32px; margin-top: -4px; }

@media (min-width: 1000px) {
  .side { inset: 0 auto 0 0; z-index: 40; width: 232px; padding: 20px 14px; gap: 20px; transform: none; visibility: visible; transition: none; box-shadow: none; }
  .side .brand img { height: 36px; }
  .side-scrim, .tabbar, .topbar, .side__close { display: none; }
  .admin { padding-left: 232px; }
  .main { padding: 32px var(--gutter) 64px; }
}
@media (min-width: 1500px) { .side { width: 256px; } .admin { padding-left: 256px; } }

/* ---------- Page furniture ---------- */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.page-head h1 { font: 700 clamp(1.5rem, 5.4vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.page-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.page-head p { max-width: 72ch; }
@media (max-width: 559px) {            /* on a phone the page's buttons run the full width under the title, two to a row */
  .page-head > .btn, .page-head__actions { width: 100%; }
  .page-head__actions > .btn, .page-head__actions > .menu { flex: 1 1 calc(50% - 4px); }
  .page-head__actions > .menu > summary { width: 100%; }
}
.page-head p { margin: 4px 0 0; }
.page-head__actions { display: flex; gap: 8px; }
.crumb { margin: 0 0 6px !important; font-size: 0.9375rem; }
@media (max-width: 999px) { .page-head__cta { display: none; } }

.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.section-head h2 { font: 700 1.1875rem/1.15 var(--font-display); letter-spacing: -0.01em; }
.section-head--solo { margin-bottom: 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 16px; min-width: 0; }
.panel > h2, .panel > legend { font: 600 1.0625rem/1.2 var(--font); margin: 0 0 14px; }
.panel > h3, fieldset.panel h3 { font: 600 0.9375rem/1.2 var(--font); margin: 22px 0 10px; color: var(--ink); }
.panel--flush { padding: 0; overflow: hidden; }
fieldset.panel { margin: 0; min-width: 0; }
fieldset.panel > legend { float: left; width: 100%; padding: 0; }
fieldset.panel > legend + * { clear: both; }
@media (min-width: 720px) { .panel { padding: 22px 24px; } .panel--flush { padding: 0; } }

.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.loading { color: var(--ink-2); margin: 0; }
.empty { text-align: center; padding: 44px 20px; }
.empty h1, .empty h2 { font: 600 1.1rem/1.2 var(--font-display); margin-bottom: 8px; }
.empty p { color: var(--ink-2); margin: 0 0 16px; }
.empty[hidden] { display: none; }

/* ---------- Date range ---------- */

.range { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%; }
.range__chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding: 0 var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent 100%);   /* fades at the edge: more to scroll to */
}
.range__chips::-webkit-scrollbar { display: none; }
.range__chips button {
  flex: none; min-height: 42px; padding: 0 15px; white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  font: 500 0.9375rem/1 var(--font); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
}
.range__chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.range__custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.range__custom[hidden] { display: none; }
.range__custom input { width: auto; min-height: 40px; flex: 1 1 140px; }
@media (min-width: 720px) { .range__chips { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; } }

/* ---------- KPI block: one sheet, ruled cells ---------- */

.kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
}
.kpis:empty { display: none; }
.kpi { background: var(--surface); padding: 14px 14px 13px; min-width: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line); }
.kpi__label { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }
.kpi__value { display: block; margin-top: 6px; font: 700 1.3125rem/1 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.kpi__delta { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--ink-2); min-height: 1.2em; }
.kpi__delta b { font-weight: 600; }
.is-good { color: var(--green) !important; }
.is-bad { color: var(--red) !important; }
.kpi--lead { background: var(--accent-wash); }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi { padding: 18px 20px 16px; } .kpi__value { font-size: 1.75rem; } }
.kpis--compact .kpi__value { font-size: 1.375rem; }

/* ---------- Today ---------- */

.today__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; margin: 0; }
@media (min-width: 400px) { .today__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.today__grid > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.today__grid dt { color: var(--ink-2); }
.today__grid dd { margin: 0; font-weight: 600; text-align: right; }
.today__net { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-top: 16px; }
.today__net span { font-weight: 600; }
.today__net strong { font: 700 1.875rem/1 var(--font-display); letter-spacing: -0.03em; }
.today__sub { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.today__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.today__empty p { margin: 0; color: var(--ink-2); }
@media (max-width: 479px) { .today__empty .btn { width: 100%; } }
@media (min-width: 720px) { .today__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; } }

/* ---------- Route result ---------- */

.result { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--ink-3); border-radius: var(--r-m); padding: 18px 16px; display: grid; gap: 16px; }
.result--good { border-left-color: var(--green); }
.result--bad { border-left-color: var(--red); }
.result__main { display: flex; flex-direction: column; gap: 2px; }
.result__label { font-weight: 600; }
.result__value { font: 700 2.5rem/1 var(--font-display); letter-spacing: -0.03em; }
.result--good .result__value { color: var(--green); }
.result--bad .result__value { color: var(--red); }
.result__note { color: var(--ink-2); }
.result__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.result__parts dt { color: var(--ink-2); font-size: 0.9375rem; }
.result__parts dd { margin: 0; font: 700 1.1875rem/1.1 var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 860px) { .result { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; padding: 22px 24px; } .result__parts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Figure lists ---------- */

.figures { margin: 0; }
.figures > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.figures dt { min-width: 0; }
.figures dd { flex: none; max-width: 62%; overflow-wrap: anywhere; }
.figures > div:last-child { border-bottom: 0; }
.figures dt { color: var(--ink-2); }
.figures dd { margin: 0; font-weight: 600; text-align: right; }
.figures__total dt, .figures__total dd { color: var(--ink); font-weight: 600; }
.figures__total { border-top: 2px solid var(--ink); }

.plain-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.9375rem; color: var(--ink-2); }
.plain-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Insights ---------- */

.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.insights li { padding: 2px 0 2px 12px; border-left: 3px solid var(--line-2); }
.insights li.tone-good { border-left-color: var(--green); }
.insights li.tone-bad { border-left-color: var(--red); }
.insights b { display: block; font-weight: 600; font-size: 0.875rem; color: var(--ink-2); }
.insights .none { border: 0; padding: 0; color: var(--ink-2); }

/* ---------- Breakdown bars (costs, return reasons) ---------- */

.bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.bars__label { overflow-wrap: anywhere; }
.bars__value { font-weight: 600; }
.bars__track { grid-column: 1 / -1; height: 8px; background: var(--paper); border-radius: 2px; overflow: hidden; }
.bars__fill { display: block; height: 100%; background: var(--series-1); border-radius: 2px; }
.bars__fill--fuel { background: var(--series-1); }
.bars__fill--vehicle { background: var(--series-2); }
.bars__fill--other { background: var(--series-3); }
.bars__fill--return { background: var(--red); }
.bars__fill--collection { background: var(--series-2); }
.bars__fill--missing { background: var(--series-3); }
.bars__fill--extra { background: var(--ink-3); }

.event-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 18px; }
.event-totals dt { color: var(--ink-2); font-size: 0.9375rem; }
.event-totals dd { margin: 0; font: 700 1.3rem/1.1 var(--font-display); letter-spacing: -0.02em; }
@media (min-width: 520px) { .event-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.event-group + .event-group { margin-top: 18px; }
.event-group h3 { font: 600 0.9375rem/1.2 var(--font); margin: 0 0 8px; }

.best { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.best li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.best a { padding: 9px 0; }
.best li:last-child { border-bottom: 0; }
.best__what { color: var(--ink-2); font-size: 0.9375rem; grid-column: 1 / -1; }
.best__value { font-weight: 600; }

/* ---------- Charts ---------- */

.chart { position: relative; height: 260px; }
.grid > .panel:has(> .chart) { display: flex; flex-direction: column; }
.grid > .panel > .chart { flex: 1 1 auto; min-height: 260px; }
.chart__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); text-align: center; padding: 0 20px; }
@media (min-width: 720px) { .chart { height: 300px; } }

/* ---------- Tables ---------- */

.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* relative: keeps anything positioned inside from widening the page */
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-weight: 600; color: var(--ink-2); background: var(--paper); font-size: 0.875rem; }
.table th button { all: unset; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: -8px 0; }
.table th button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.table th[aria-sort="ascending"] button::after { content: "▲"; font-size: 0.6em; }
.table th[aria-sort="descending"] button::after { content: "▼"; font-size: 0.6em; }
.table .num { text-align: right; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr[data-href]:hover td { background: var(--accent-wash); }
.table tfoot td { font-weight: 600; background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 0; }
.table td.wrap-cell { white-space: normal; min-width: 180px; }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.table a.row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.table a.row-link:hover { color: var(--accent-deep); text-decoration: underline; }

/* On phones and upright tablets each row becomes a small block instead of a wide scrolling table:
   one column of figures on the narrowest phones, two on most, three on a tablet. */
@media (max-width: 859px) {
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--cards, .table--cards tbody, .table--cards tfoot { display: block; }
  .table--cards tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; padding: 16px var(--gutter); border-bottom: 1px solid var(--line); }
  .table.table--cards td.cell-area { max-width: none; min-width: 0; }
  .table--cards td { flex-wrap: wrap; }
  .table--cards tfoot tr { gap: 8px 24px; }
  .table--cards td a:not(.btn) { padding: 7px 0; margin: -7px 0; }
  .table--cards .actions { flex-wrap: wrap; gap: 8px; padding-top: 4px; }
  .table--cards td { display: flex; justify-content: space-between; gap: 8px; padding: 0; border: 0; white-space: normal; text-align: right; background: none !important; min-width: 0; }
  .table--cards td::before { content: attr(data-label); color: var(--ink-2); text-align: left; flex: none; }
  .table--cards td.cell-title { grid-column: 1 / -1; font-weight: 600; font-size: 1.0625rem; text-align: left; justify-content: flex-start; }
  .table--cards td.cell-title::before, .table--cards td.cell-wide::before { content: none; }
  .table--cards td.cell-wide { grid-column: 1 / -1; text-align: left; justify-content: flex-start; }
  .table--cards td.cell-full { grid-column: 1 / -1; }
  .table--cards tfoot td { border: 0; }
  .table--cards td.cell-hide-empty:empty, .table--cards td[data-empty] { display: none; }
  .table--cards tfoot tr { background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 0; }
  .table--cards .actions { justify-content: flex-start; }
}
@media (min-width: 340px) and (max-width: 859px) { .table--cards tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .table--cards tr { column-gap: 16px; } .table--cards tfoot tr { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 640px) and (max-width: 859px) {
  .table--cards tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; }
  .table--cards td.cell-full:not(.wrap-cell) { grid-column: auto; }
}

.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.tag--return { background: var(--red-wash); color: #8C261D; }
.tag--collection { background: #E6EFF8; color: #1F5387; }
.tag--missing { background: #F5EFD8; color: #5F4C07; }
.tag--extra { background: #E9ECEC; color: var(--ink); }
.tag--repeat { background: var(--accent-wash); color: var(--accent-deep); }

/* Ex VAT / VAT / Inc VAT tables: stay as a table on phones, three narrow number columns. */
.table--vat th[scope="row"] { background: none; color: var(--ink); font-weight: 400; font-size: inherit; white-space: normal; }
.table--vat tfoot th[scope="row"] { font-weight: 600; background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 0; }
.table--vat th, .table--vat td { padding-left: 8px; padding-right: 8px; }
.table--vat th:first-child { padding-left: 0; }
.table--vat td:last-child, .table--vat thead th:last-child { padding-right: 0; }
.table--vat thead th { background: none; border-bottom: 2px solid var(--ink); }
.table--vat tfoot td { background: none; }
.table--vat tfoot th[scope="row"] { background: none; }
@media (max-width: 479px) {            /* three number columns on a phone: smaller type, tighter cells, headings may wrap */
  .table--vat { font-size: 0.8125rem; }
  .table--vat th, .table--vat td { padding-left: 4px; padding-right: 4px; }
  .table--vat thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
}
.figures--after { margin-top: 14px; }
.figures--after + p { margin: 12px 0 0; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar--end { justify-content: flex-end; }
.toolbar .field--inline { flex: 1 1 200px; }
.field--inline { flex-direction: row; align-items: center; gap: 10px; }
.field--inline select, .field--inline input { min-width: 0; }

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: 16px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: start; }
.field--wide { grid-column: 1 / -1; }
.field--span2 { grid-column: span 2; }
.field[hidden] { display: none; }
.field--money { position: relative; }
.field--money > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field--money input { padding-left: 26px; }
.field--money > span::after { content: "£"; position: absolute; left: 11px; top: 37px; color: var(--ink-2); font-weight: 400; font-size: 1rem; pointer-events: none; }
@media (min-width: 600px) { .fields { gap: 16px; } }
@media (min-width: 720px) { .fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {            /* four across only when each box is wide enough to show its whole value */
  .fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) and (max-width: 1159px) {   /* the side menu has just appeared, so the page is narrow again */
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.form__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.form > .form__actions { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.rows { display: flex; flex-direction: column; gap: 10px; }
.rows:empty { display: none; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); position: relative; }
.row__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin: -4px -6px -4px 0; }
.row__remove { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); font-size: 0.875rem; font-weight: 500; padding: 0 6px; text-decoration: underline; text-underline-offset: 0.15em; }
.row__remove:hover { color: var(--red); }
.row__remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.row .field--grow { grid-column: 1 / -1; }
.row .field > span { font-size: 0.875rem; }
@media (min-width: 720px) {
  .row--event { grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 1.5fr); }
  .row--event .field--grow { grid-column: auto; }
  .row--fuel { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr) minmax(0, 1.2fr); }
  .row--fuel .field--grow { grid-column: auto; }
  .row--expense { grid-template-columns: 170px 130px 190px minmax(0, 1fr); }
  .row--expense .field--grow { grid-column: auto; }
}
.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rows:empty + .add-row { margin-top: 0; }

.recon { margin: 14px 0 0; padding: 10px 12px; background: var(--accent-wash); border-left: 4px solid var(--accent); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 0.9375rem; }
.recon[hidden] { display: none; }

.savebar {
  position: sticky; bottom: calc(59px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
  background: var(--surface); border-top: 1px solid var(--line-2);
}
.savebar__sum { display: flex; gap: 18px; margin: 0; min-width: 0; }
.savebar__sum dt { font-size: 0.75rem; color: var(--ink-2); font-weight: 500; }
.savebar__sum dd { margin: 0; font: 700 1.0625rem/1.1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.savebar__extra { display: none; }
@media (min-width: 1000px) {
  .savebar { bottom: 0; margin: 0; padding: 14px 24px; border: 1px solid var(--line-2); border-radius: var(--r-m) var(--r-m) 0 0; }
  .savebar__extra { display: block; }
  .savebar__sum { gap: 36px; }
}

/* ---------- Dialog / bottom sheet ---------- */

.sheet { border: 0; padding: 0; width: min(560px, 100%); max-width: 100%; max-height: 92vh; border-radius: var(--r-m); background: var(--surface); color: var(--ink); }
.sheet::backdrop { background: rgba(36, 40, 41, 0.6); }
.sheet form { display: flex; flex-direction: column; max-height: 92vh; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sheet__head h2 { font: 600 1.1rem/1.1 var(--font-display); }
.sheet__close { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.75rem; line-height: 1; color: var(--ink-2); border-radius: var(--r-s); }
.sheet__close:focus-visible { outline: 3px solid var(--focus); }
.sheet__body { padding: 18px 20px; overflow-y: auto; }
.sheet__body .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet__body p { margin: 0 0 12px; }
.sheet__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
@media (max-width: 719px) {
  .sheet { margin: auto 0 0; width: 100%; border-radius: 12px 12px 0 0; }
  .sheet__foot .btn { flex: 1; }
}

/* ---------- Toasts ---------- */

.toasts { position: fixed; z-index: 70; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r-s); font-weight: 500; border-left: 5px solid var(--green); }
.toast--bad { border-left-color: var(--red); }
@media (min-width: 1000px) { .toasts { left: auto; right: 28px; bottom: 28px; transform: none; } }

/* ---------- Sign in ---------- */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--paper); }
.auth__card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: var(--r-m); padding: 28px 24px; }
.auth__card h1 { font: 700 1.375rem/1.15 var(--font-display); letter-spacing: -0.02em; margin: 24px 0 8px; }
.auth__card .brand img { height: 46px; }
.auth__card .stack { margin-top: 18px; }

/* ---------- Monthly report ---------- */

.report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px 16px; }
.report[hidden] { display: none; }
.report > * + * { margin-top: 22px; }
.report__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding-bottom: 16px; border-bottom: 3px solid var(--ink); }
.report__company { margin: 0 0 4px; font-weight: 600; color: var(--accent-deep); }
.report__head h2 { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.report__logo { display: block; height: 44px; width: auto; margin-bottom: 14px; }
.report__period { margin: 4px 0 0; font-size: 1.125rem; color: var(--ink-2); }
.report__ids { margin: 6px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.report h3 { font: 600 1.0625rem/1.2 var(--font); margin: 0 0 10px; }
.report__foot { padding-top: 14px; border-top: 1px solid var(--line); }
#ledger-table th, #ledger-table td, #routes-table th, #routes-table td { padding-left: 9px; padding-right: 9px; }
#ledger-table th:first-child, #ledger-table td:first-child, #routes-table th:first-child, #routes-table td:first-child { padding-left: 16px; }
#routes-table th:last-child, #routes-table td:last-child { padding-right: 16px; }
.table td.cell-area { white-space: normal; min-width: 96px; max-width: 170px; }
#year-table tbody tr { cursor: pointer; }
#year-table tbody tr:hover td { background: var(--accent-wash); }
#year-table tbody tr[aria-selected="true"] td { background: var(--accent-wash); box-shadow: inset 0 -2px 0 var(--accent); }
#year-table tbody tr.is-blank td { color: var(--ink-3); }
@media (min-width: 720px) { .report { padding: 28px 32px; } }

@media print {
  @page { margin: 14mm; }
  body, .admin { background: #fff; padding: 0; }
  .side, .tabbar, .topbar, .toasts, .side-scrim, .no-print, .skip { display: none !important; }
  .main { padding: 0; max-width: none; }
  .report { border: 0; padding: 0; }
  .report__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi__value { font-size: 1.5rem; }
  .chart { height: 220px; }
  section, .kpis { break-inside: avoid; }
}

/* =====================================================================
   Invoices, customers and email
   ===================================================================== */

.side__nav .side__group { margin-top: 10px; position: relative; }
.side__nav .side__group::before { content: ""; position: absolute; left: 10px; right: 10px; top: -6px; border-top: 1px solid #3A4046; }

.alert--note { background: var(--accent-wash); border-color: #F6CDA8; color: var(--ink); font-weight: 400; }
.check[hidden] { display: none; }
.panel__title { font: 600 1.0625rem/1.2 var(--font); margin: 0; padding: 18px 16px 14px; }
.chips--kinds { margin: 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
.is-archived td { color: var(--ink-3); }
.log-error { display: block; color: var(--ink-2); white-space: normal; max-width: 260px; margin-top: 4px; }
.page-head h1 .tag { vertical-align: middle; margin-left: 6px; letter-spacing: 0; }

.tag--inv-draft { background: #E9ECEC; color: var(--ink); }
.tag--inv-sent { background: #E6EFF8; color: #1F5387; }
.tag--inv-overdue { background: var(--red-wash); color: #8C261D; }
.tag--inv-paid { background: var(--green-wash); color: #0E5A3A; }
.tag--inv-void { background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: line-through; }

/* "More" menu */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--ink); }
.menu__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 210px; max-width: calc(100vw - 2 * var(--gutter));
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m);
  box-shadow: 0 10px 28px rgba(36, 40, 41, 0.16);
}
.menu__list a, .menu__list button {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%;
  padding: 10px 12px; border-radius: var(--r-s); font: 500 0.9375rem/1.2 var(--font); color: var(--ink);
}
.menu__list a:hover, .menu__list button:hover { background: var(--paper); }
.menu__list a:focus-visible, .menu__list button:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.page-head__actions { flex-wrap: wrap; align-items: center; }
@media (max-width: 559px) {            /* on a phone the "More" list opens across the full row, not off the side of the screen */
  .page-head__actions { position: relative; }
  .page-head__actions > .menu { position: static; }
  .menu__list { left: 0; right: 0; }
  .menu__list a, .menu__list button { padding: 13px 12px; }
}

/* The invoice as a sheet of paper */
.paper {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 22px 18px; max-width: 880px; font-size: 0.9375rem;
}
.paper--void { opacity: 0.6; }
.paper__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 3px solid var(--accent); }
.paper__head img { display: block; height: 48px; width: auto; }
.paper__title { text-align: right; margin-left: auto; }
.paper__title strong { display: block; font: 700 1.75rem/1 var(--font); letter-spacing: -0.02em; }
.paper__title span { display: block; margin-top: 6px; font-weight: 600; color: var(--ink-2); }
.paper h2 { font: 600 0.8125rem/1.2 var(--font); color: var(--ink-3); margin: 0 0 6px; }
.paper p { margin: 0 0 14px; line-height: 1.6; overflow-wrap: anywhere; }
.paper__parties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 0; }
.paper__dates { margin: 0; display: grid; gap: 10px; align-content: start; }
.paper__dates dt { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.paper__dates dd { margin: 0; font-weight: 600; }
.paper__lines { width: 100%; border-collapse: collapse; }
.paper__lines th { background: var(--dark); color: #fff; font-weight: 600; font-size: 0.8125rem; text-align: left; padding: 9px 12px; white-space: nowrap; }
.paper__lines td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.paper__lines .num { text-align: right; white-space: nowrap; }
.paper__lines td:first-child { min-width: 180px; }
.paper__route { display: inline-block; margin-left: 8px; padding: 8px 0; font-size: 0.8125rem; color: var(--ink-2); }
.paper__calc { display: none; color: var(--ink-2); font-size: 0.8125rem; }
.paper__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 22px; }
.paper__totals { margin: 0; }
.paper__totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.paper__totals dt { color: var(--ink-2); }
.paper__totals dd { margin: 0; white-space: nowrap; }
.paper__totals .paper__total { margin-top: 8px; padding: 14px 16px; background: var(--dark); border-radius: var(--r-s); align-items: baseline; }
.paper__total dt { color: #fff; font-weight: 600; }
.paper__total dd { color: var(--accent); font: 700 1.375rem/1 var(--font); letter-spacing: -0.02em; }
.paper__paid { margin: 10px 0 0 !important; text-align: right; font-weight: 600; color: var(--green); }
.paper__small { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-3); white-space: pre-wrap; }
@media (min-width: 720px) {
  .paper { padding: 36px 40px; }
  .paper__parties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 32px; }
  .paper__dates { text-align: right; }
  .paper__foot { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr); gap: 40px; }
}

/* Invoice line editor */
.row--line { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.row--line .field--grow { grid-column: 1 / -1; }
.row--line .row__remove { justify-self: end; }
.row__total { justify-content: flex-end; }
.row__amount { display: flex; align-items: center; min-height: var(--tap); font-weight: 700; }
@media (min-width: 860px) {
  .row--line { grid-template-columns: minmax(0, 1fr) 72px 124px 104px 104px auto; }
  .row--line-novat { grid-template-columns: minmax(0, 1fr) 72px 124px 104px auto; }
  .row--line .field--grow { grid-column: auto; }
  .row--line .row__remove { margin-bottom: 8px; }
  .row__amount { justify-content: flex-end; }
  .row__total > span { text-align: right; }
}

/* Routes to add to an invoice */
.picklist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-s); max-height: 46vh; overflow-y: auto; }
.picklist:empty { display: none; }
.picklist__item { padding: 11px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.picklist__item:last-child { border-bottom: 0; }
.picklist__item span { display: flex; flex-direction: column; min-width: 0; }
.picklist__item small { color: var(--ink-2); font-size: 0.8125rem; }
.picklist__item.is-taken { color: var(--ink-3); cursor: default; }

/* Send-email dialog */
.sheet--wide { width: min(1040px, 100%); }
.mail-compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mail-preview p { margin: 0 0 6px; }
.mail-preview__frame { display: block; width: 100%; height: 440px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #fff; }
@media (min-width: 900px) {
  .mail-compose { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .mail-preview__frame { height: 600px; }
}

/* Email style gallery: each preview is a 640px-wide email shrunk to fit its card */
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.style-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; }
.style-card.is-default { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.style-card__frame { position: relative; height: 420px; overflow: hidden; background: var(--paper); border-bottom: 1px solid var(--line); }
.style-card__frame iframe { position: absolute; left: 0; top: 0; width: 640px; height: 1000px; border: 0; transform-origin: 0 0; transform: scale(0.5); pointer-events: none; }
.style-card__body { padding: 16px; }
.style-card__body h2 { font: 700 1.0625rem/1.2 var(--font); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.style-card__body p { margin: 0 0 4px; }

@media print {
  .paper { border: 0; padding: 0; max-width: none; }
  .paper__lines th, .paper__total { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Dashboard: money owed to you */
.owed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.owed__grid dt { color: var(--ink-2); font-size: 0.875rem; font-weight: 500; }
.owed__grid dd { margin: 4px 0 2px; font: 700 1.375rem/1.1 var(--font); letter-spacing: -0.02em; }
.owed__grid p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 720px) { .owed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 719px) {
  .paper__lines th, .paper__lines td { padding: 10px 8px; }
  .paper__lines td:first-child { min-width: 0; }
  .paper__lines .col-calc { display: none; }                /* quantity and unit price are shown under the description instead */
  .paper__calc { display: block; margin-top: 2px; }
  .paper__route { display: block; margin: 0; }
  .paper__title { text-align: left; margin-left: 0; width: 100%; }
}

/* Load-out on the route form */
.rows--after { margin-top: 12px; }
.row--cart { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.row--addition { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) {
  .row--cart { grid-template-columns: minmax(0, 1.4fr) 140px 180px; }
  .row--addition { grid-template-columns: minmax(0, 1.2fr) 110px 110px minmax(0, 1.5fr); }
  .row--addition .field--grow { grid-column: auto; }
}
.tally { margin: 14px 0 0; padding: 10px 12px; background: var(--paper); border-left: 4px solid var(--ink); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 0.9375rem; font-weight: 500; }
.grid--inner { gap: 16px 40px; align-items: start; }
.figures__none { color: var(--ink-2); }
@media (min-width: 860px) { .figures--cols { columns: 2; column-gap: 48px; } .figures--cols > div { break-inside: avoid; } .figures--cols > div:last-child { border-bottom: 1px solid var(--line); } }

/* Areas page: map, pins, map settings */
.cover-set { display: grid; gap: 18px 32px; align-items: start; }
.cover-set .check small { display: block; color: var(--ink-2); font-weight: 400; margin-top: 2px; }
.cover-depot p { margin: 0 0 8px; }
.cover-depot .actions { display: flex; gap: 6px; margin-bottom: 10px; }
@media (min-width: 900px) { .cover-set { grid-template-columns: minmax(0, 1.4fr) minmax(230px, 0.8fr) minmax(0, 1fr); } }
.tag--live { background: var(--green-wash); color: #0E5A3A; }
.panel > h2 .tag { vertical-align: middle; margin-left: 6px; }

.map-panel #areas-map { height: clamp(360px, 62vh, 640px); }
.map-panel .cov-label span { --gap: 15px; --diag: 11px; }
.mapbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; }
.mapbar--active { background: var(--accent-wash); color: var(--ink); font-weight: 600; }
.is-placing, .is-placing .leaflet-interactive, .is-placing .leaflet-grab { cursor: crosshair !important; }
.mapkey { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 12px 16px; list-style: none; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-2); }
.mapkey li { display: inline-flex; align-items: center; gap: 8px; }
.pin-key { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--series-1); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line-2); }
.pin-key--hidden { background: #8B9498; }
.pin-key--depot { width: 11px; height: 11px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.line-key { flex: none; width: 26px; height: 3px; border-radius: 2px; background: var(--series-1); }

.pin { cursor: grab; }
.pin:active { cursor: grabbing; }
.pin::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--series-1); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(36, 40, 41, 0.5); }
.pin--hidden::after { background: #8B9498; }
.pin--depot::after { inset: 5px; border-radius: 3px; background: var(--ink); transform: rotate(45deg); }
.pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-radius: 50%; }
.check--tight { align-items: center; gap: 8px; }
.check--tight input { margin: 0; }

/* Route form: times, tank level */
.fields--times { grid-template-columns: minmax(0, 1fr); }      /* one per line on a phone: the time and its Now button need the width */
@media (min-width: 560px) { .fields--times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fields--times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.timebox { display: flex; gap: 6px; align-items: stretch; }
.timebox input { flex: 1 1 auto; min-width: 0; }
.timebox .btn { flex: none; min-height: var(--tap); padding: 0 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); font-weight: 500; }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice--none span { color: var(--ink-2); border-style: dashed; }
.choices + .small { margin: 10px 0 0; }
.tally--warn { background: var(--red-wash); border-left-color: var(--red); color: #8C261D; }
.tally--plain { margin: 0 0 10px; }

/* Route page: the day as a strip of stretches */
.daybar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 4px 0 14px; background: var(--paper); }
.daybar i { display: block; min-width: 2px; border-right: 2px solid var(--surface); }
.daybar i:last-child { border-right: 0; }
.figures dt .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.note-line { margin: 12px 0 0; font-size: 0.875rem; color: var(--ink-2); }

/* ---------- Small-screen finishing ---------- */

/* A date needs room for all ten characters and its calendar button: on a narrow phone it gets the full row. */
@media (max-width: 419px) {
  .fields > .field:has(> input[type="date"]) { grid-column: 1 / -1; }
  .fields--3 > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Search, filter and export on the Routes page: one per line on a phone, in a row from a tablet up. */
@media (max-width: 599px) { .toolbar > .field--inline, .toolbar > .btn { flex: 1 1 100%; } }
/* Checkbox rows are easier to hit */
.check { min-height: 32px; }
.check--tight { min-height: 40px; }
/* Landscape phones: little height to spare, so the bottom bar and its labels tighten up. */
@media (max-height: 460px) and (max-width: 999px) {
  .tabbar a, .tabbar button { min-height: 46px; flex-direction: row; gap: 6px; font-size: 0.8125rem; }
  .tabbar .tabbar__add .ico { width: 26px; height: 26px; margin-top: 0; padding: 4px; }
  .savebar { bottom: calc(47px + env(safe-area-inset-bottom)); }
}

/* A card table sitting inside a padded panel: its rows line up with the panel's own padding. */
@media (max-width: 859px) {
  .table--inset.table--cards tr { padding-left: 0; padding-right: 0; }
  .table--cards td.wrap-cell { min-width: 0; }
}
.panel > .table-wrap > .table--cards td.cell-title { font-size: 1rem; }

#year-table .m-short { display: none; }
/* The year table on a phone: month, revenue, expenses and profit. The rest is in the monthly report below it. */
@media screen and (max-width: 639px) {
  #year-table .col-extra, #year-table .m-full { display: none; }
  #year-table .m-short { display: inline; }
  #year-table th, #year-table td { padding-left: 5px; padding-right: 5px; }
  #year-table th:first-child, #year-table td:first-child { padding-left: 12px; }
  #year-table td:nth-child(4), #year-table th:nth-child(4) { padding-right: 12px; }
  #year-table td strong { font-weight: 600; }
}
@media screen and (max-width: 359px) { #year-table { font-size: 0.8125rem; } #year-table th { font-size: 0.75rem; } }

/* Card tables: the Fuel, Vehicle rental, Expenses and Routes tables set their own cell padding as tables. As cards they have none. */
@media (max-width: 859px) {
  #ledger-table.table--cards th, #ledger-table.table--cards td,
  #routes-table.table--cards th, #routes-table.table--cards td { padding: 0; }
}

/* Settings: saved route rates */
.row--rate { align-items: end; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.row--rate__default { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 500; }
.row--rate .row__remove { justify-self: end; }
@media (min-width: 720px) {
  .row--rate { grid-template-columns: minmax(0, 1fr) 130px 170px auto auto; }
  .row--rate .field--grow { grid-column: auto; }
}

/* Route form: one-tap route payment */
.rate-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rate-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface);
  font: 600 0.9375rem/1.2 var(--font); color: var(--ink); cursor: pointer;
}
.rate-chip b { font-variant-numeric: tabular-nums; }
.rate-chip:hover { border-color: var(--ink); }
.rate-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rate-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field--money .rate-manage { font-size: 0.8125rem; }
.rate-pick { margin-bottom: 14px; }
.rate-pick__label { margin: 0; font-weight: 600; }
.rate-pick .rate-chips + p { margin: 8px 0 0; }

/* Route form: the five figures from the app's Itinerary summary sit on one line on a wide screen */
@media (min-width: 720px) and (max-width: 999px), (min-width: 1160px) and (max-width: 1399px) {
  .fields--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) { .fields--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Problems on the route form: one line per problem, its colour says where it stands */
.row--event .field--reason { grid-column: 1 / -1; }
.row--problem { border-left: 4px solid var(--accent); }
.row--problem[data-outcome="delivered"] { border-left-color: var(--green); }
.row--problem[data-outcome="returned"], .row--problem[data-outcome="returned_reattempted"] { border-left-color: var(--red); }
.row--problem .field--outcome { grid-column: 1 / -1; }
.row--problem[data-outcome="pending"] .outcome { border-color: var(--accent); background: var(--accent-wash); }
.row--problem[data-outcome="delivered"] .outcome { border-color: var(--green); background: var(--green-wash); }
.row--problem[data-outcome^="returned"] .outcome { border-color: var(--red); background: var(--red-wash); }
@media (min-width: 720px) {
  .row--event { grid-template-columns: minmax(0, 1.4fr) 100px minmax(0, 1.4fr); }
  .row--event .field--reason { grid-column: auto; }
  .row--problem { grid-template-columns: minmax(0, 1.5fr) 84px 84px minmax(0, 1.4fr); }
  .row--problem .field--outcome { grid-column: auto; }
  .row--problem .field--grow { grid-column: 1 / -1; }
}
.btn--strong { border-color: var(--ink); font-weight: 700; }

/* A short line of notes under a group of fields, instead of hints of different lengths under each box
   (those pushed the boxes in a row out of line with each other) */
.field-notes { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.field-notes span:empty { display: none; }
.field-notes span { color: var(--ink); font-weight: 500; }

/* Running figures under a section: label, number, and a short line of how it is made up */
.tally--figs { padding: 12px 14px; font-weight: 400; }
.minifigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.minifigs > div { min-width: 0; }
.minifigs dt { font-size: 0.8125rem; color: var(--ink-2); font-weight: 500; }
.minifigs dd { margin: 2px 0 0; font: 700 1.25rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.minifigs span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
@media (min-width: 900px) { .minifigs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tally--figs + .tally--warn { margin-top: 8px; }

/* Notes under a group of fields; the ones with something to act on stand out */
.field-notes--act { color: var(--ink); font-weight: 500; }
.field-notes--act:empty { display: none; }
.field-notes .row__remove { min-height: 0; padding: 0 2px; font-size: inherit; }
.field-notes + .field-notes { margin-top: 4px; }

/* Three short number boxes stay on one line even on a phone */
.fields--nums { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.fields--nums > .field:last-child:nth-child(odd) { grid-column: auto !important; }

/* An empty list of rows still leaves a gap before its Add button when it follows other fields */
.rows--after:empty + .add-row { margin-top: 12px; }

.row__head .row__note { margin-left: auto; }
.row__head .row__note + .row__remove { margin-left: 8px; }
@media (min-width: 720px) {
  .row--problem { grid-template-columns: minmax(0, 1.5fr) 80px 80px minmax(0, 1.3fr); }
  .row--event .field--note { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .add-row--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .add-row--grid .btn { width: 100%; }
}