/* Carnamcha — design tokens and components from the Claude Design handoff (docs/BRAND.md).
   Mobile-first at 390 px, 640 px max-width centred on desktop. Light and dark share one token set. */

:root {
  --brand: #2a7f86;         /* lockup teal · 4.9:1 on --bg */
  --brand-ink: #fbf4e8;     /* text on brand */
  --accent: #d9662b;        /* icon orange · badges, chips, bars, 18px+ text only */
  --ink: #1c2426;
  --muted: #5d6969;
  --line: #e3ded4;
  --bg: #f7f3ec;            /* cream from the icon's road */
  --card: #ffffff;
  --danger: #b3362c;
  --ok: #2f7d4f;
  --chart-fuel: #2a7f86;
  --chart-service: #d9662b;
  --tint: #eef4f4;
  --acc-tint: #fbeee6;
  --danger-tint: #f9e9e7;
  --ok-tint: #e9f3ec;
  --radius: 12px;
  --tabbar-h: 62px;
  --font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: Newsreader, Georgia, serif;
  --font-urdu: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3d9aa2; --brand-ink: #0e1b1c; --accent: #ea8a52; --ink: #f1ede4; --muted: #a7afae; --line: #2d383a;
    --bg: #121a1b; --card: #1b2426; --danger: #e8736a; --ok: #62c48b; --chart-fuel: #52b7be; --chart-service: #f09b66;
    --tint: #17282a; --acc-tint: #2c2019; --danger-tint: #2e1c1a; --ok-tint: #17281e;
  }
}
:root[data-theme="dark"] {
  --brand: #3d9aa2; --brand-ink: #0e1b1c; --accent: #ea8a52; --ink: #f1ede4; --muted: #a7afae; --line: #2d383a;
  --bg: #121a1b; --card: #1b2426; --danger: #e8736a; --ok: #62c48b; --chart-fuel: #52b7be; --chart-service: #f09b66;
  --tint: #17282a; --acc-tint: #2c2019; --danger-tint: #2e1c1a; --ok-tint: #17281e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 16px/1.45 var(--font-latin); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
body.subpage { padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--brand); }
a:hover { color: var(--accent); }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
h2 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 .4rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
[dir="rtl"], .urdu { font-family: var(--font-urdu); line-height: 1.9; }
[dir="auto"] { unicode-bidi: plaintext; }

/* ---------- Top bar (56 px) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; background: var(--brand); color: var(--brand-ink);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner { max-width: 640px; margin: 0 auto; height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.brand svg { width: 24px; height: 24px; flex: none; }
.brand-en { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: .3px; }
.brand-ur { font-family: var(--font-urdu); font-size: 14px; line-height: 1; margin-top: -4px; }
.vehicle-switch select {
  font: 500 14px/1 var(--font-latin); height: 36px; padding: 0 28px 0 12px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit; max-width: 46vw;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23fbf4e8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
:root[data-theme="dark"] .vehicle-switch select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%230e1b1c' stroke-width='1.6'/%3E%3C/svg%3E"); }
.vehicle-switch select option { color: var(--ink); background: var(--card); }
.vehicle-switch-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; color: inherit; text-decoration: none; font: 500 14px/1 var(--font-latin); max-width: 46vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* sub-page header: back chevron, title, subtitle */
.subhead { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.subhead .back { color: inherit; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 4px 6px 0; }
.subhead-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.subhead-title { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subhead-sub { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subhead-action { margin-left: auto; color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---------- Page ---------- */
.page { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.page > h2:first-child { margin-top: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.page-head .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.card-title { font-weight: 600; margin-bottom: 4px; }
.card-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.card-list > * { padding: 12px 0; border-bottom: 1px solid var(--line); }
.card-list > *:last-child { border-bottom: 0; }
.row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.row-link { text-decoration: none; color: inherit; }
.rowtitle { font-size: 16px; font-weight: 600; }
.rowtitle.brand { color: var(--brand); }
.rowmeta { font-size: 13px; color: var(--muted); }
.amount { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chev { color: var(--muted); }

/* stat tiles */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-value.mismatch { color: var(--danger); }
.stat-note { font-size: 13px; color: var(--muted); }
.stat-note.mismatch { color: var(--danger); }

/* ---------- Lists ---------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.list-item a.cover { color: inherit; text-decoration: none; font-size: 16px; font-weight: 600; }
.list-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.list-sub { color: var(--muted); font-size: 13px; }
.list-amount { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.list-amount strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.thumb { width: 48px; height: 60px; border-radius: 6px; flex: none; object-fit: cover; background: repeating-linear-gradient(135deg, var(--line) 0 2px, var(--bg) 2px 10px); }

/* ---------- Badges (quality / state) and chips (facts) ---------- */
.badge { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: transparent; vertical-align: middle; white-space: nowrap; }
.badge-displayed, .badge-status-confirmed, .badge-ok { border-color: var(--ok); color: var(--ok); }
.badge-measured { border-color: var(--brand); color: var(--brand); }
.badge-estimated, .badge-partial, .badge-status-pending, .badge-status-processing { border-color: var(--accent); color: var(--accent); }
.badge-status-needs_review, .badge-status-failed { border-color: var(--danger); color: var(--danger); }
.badge-status-draft { color: var(--muted); }
.badge-q { width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-color: var(--accent); color: var(--accent); }
.chip { display: inline-block; font-size: 12px; line-height: 1; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.chip-item { color: var(--brand); background: var(--tint); border-color: var(--brand); font-weight: 500; }
.chip-unmatched { color: var(--accent); background: var(--acc-tint); border: 1px dashed var(--accent); font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- Banners ---------- */
/* A tick belongs next to the words it marks, not at the far end of the row from them. Anything
   that acts — a chevron, a button — is what gets pushed to the right. */
.flash, .banner { display: flex; gap: 10px; align-items: center; border-radius: var(--radius); padding: 12px 14px; font-size: 14px; line-height: 1.4; border: 1px solid; }
.banner > .go, .banner > .btn, .banner > form { margin-left: auto; }
.flash-notice, .banner-info { background: var(--tint); border-color: var(--brand); color: var(--ink); }
.flash-alert, .banner-danger { background: var(--danger-tint); border-color: var(--danger); color: var(--ink); }
.banner-ok { background: var(--ok-tint); border-color: var(--ok); }
.banner-accent, .due { background: var(--acc-tint); border-color: var(--accent); }
.due.flash-alert { background: var(--danger-tint); border-color: var(--danger); }
.banner .glyph { font-weight: 700; flex: none; }
.banner-ok .glyph { color: var(--ok); }
.banner-accent .glyph { color: var(--accent); }
.banner-info .glyph { color: var(--brand); }
.banner .go { font-weight: 600; text-decoration: none; }
.banner-accent .go { color: var(--accent); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--brand); border-top-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.extraction-pending { justify-content: flex-start; }
.errors { background: var(--danger-tint); border: 1px solid var(--danger); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }
.empty { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 16px/1 var(--font-latin); height: 44px; padding: 0 18px; border-radius: var(--radius); border: 0; background: var(--brand); color: var(--brand-ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-secondary { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn-danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.btn-text { background: transparent; color: var(--brand); border: 0; padding: 0 8px; text-decoration: underline; }
.btn-small { height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn-block { display: flex; width: 100%; }
.btn-tall { height: 48px; }
.btn[disabled] { opacity: .45; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions form { display: contents; }
.actions .grow { flex: 1; }
.action-bar { position: sticky; bottom: 0; margin: 8px -16px -16px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); display: flex; gap: 10px; }
.action-bar .btn { height: 48px; }
.action-bar .grow { flex: 1; }
.action-bar form { display: contents; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.form > *, .form-row > *, .form-row-3 > *, .field > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field > .label { font-size: 13px; font-weight: 600; }
.field .hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.field .hint.ok { color: var(--ok); }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%; min-width: 0; height: 44px; font: 16px/1.2 var(--font-latin); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
/* iOS Safari gives date inputs an intrinsic min-width and ignores width:100%, so they spill into
   the next grid column. Drop the native appearance and let the value sit left like other fields. */
input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; line-height: 42px; padding-top: 0; padding-bottom: 0; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=date]::-webkit-datetime-edit { padding: 0; }
input[dir="rtl"], textarea[dir="rtl"] { font-family: var(--font-urdu); text-align: right; }
textarea { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%235d6969' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
input[readonly], .field .derived { background: var(--bg); }
input[type=file] { font-size: 14px; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; min-height: 44px; }
.check input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); border-radius: 6px; flex: none; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.segmented label { text-align: center; padding: 11px 0; font-size: 15px; cursor: pointer; border-left: 1px solid var(--line); min-width: 0; }
.segmented label:first-child { border-left: 0; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label:has(input:checked) { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.radio-list { display: flex; flex-direction: column; }
.radio-list label { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 40px; cursor: pointer; }
.radio-list input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex: none; }
.photo-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.photo-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-slot .slot { flex: 1; min-height: 96px; border: 1.5px dashed var(--brand); border-radius: var(--radius); background: var(--tint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--brand); font-size: 13px; font-weight: 600; padding: 10px; text-align: center; }
.photo-slot .slot.filled { border: 1px solid var(--line); background: var(--card); padding: 6px; }
.photo-slot .slot img { width: 100%; height: auto; border-radius: 8px; }
.photo-slot input[type=file] { font-size: 12px; color: var(--muted); }
.photo-slot .slot { cursor: pointer; }
.photo-slot .hint, .photo-slot .label { font-size: 12px; color: var(--muted); }
.photo-slot .label { font-size: 13px; font-weight: 600; color: var(--ink); }
[hidden] { display: none !important; }
.never-list .never-item:not(.is-last)::after { content: " · "; }
details.more summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; min-height: 40px; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "▶"; font-size: 11px; }
details.more[open] summary::after { content: "▼"; }
.inline-form { background: var(--card); border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 14px; }

/* ---------- Tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar-inner { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 0 10px; }
.tabbar-inner.four { grid-template-columns: repeat(4, 1fr); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; text-decoration: none; }
.tab svg { width: 24px; height: 24px; }
.tab.active { color: var(--brand); font-weight: 600; }
.tab-add { color: var(--brand); font-weight: 600; }
.tab-add .plus { width: 40px; height: 40px; margin-top: -14px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 26px; line-height: 40px; text-align: center; box-shadow: 0 2px 0 var(--line); }

/* ---------- Auth ---------- */
.auth { display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; padding: 24px 24px 32px; max-width: 420px; margin: 0 auto; }
.auth-lockup { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--brand); text-align: center; }
.auth-lockup svg { width: 88px; height: 88px; }
.auth-lockup .en { font-family: var(--font-serif); font-weight: 600; font-size: 34px; line-height: 1; margin-top: 6px; }
.auth-lockup .ur { font-family: var(--font-urdu); font-size: 26px; line-height: 2; }
.auth-lockup .tag { font-size: 14px; color: var(--muted); }

/* ---------- Charts ---------- */
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 150px; align-items: end; }
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 1px; position: relative; }
.bar-value { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-fill { width: 100%; background: var(--chart-fuel); border-radius: 0 0 3px 3px; min-height: 0; }
.bar-fill.bar-maintenance { background: var(--chart-service); border-radius: 3px 3px 0 0; }
.bar-labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; font-size: 12px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 10px; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--chart-fuel); }
.swatch-maintenance { background: var(--chart-service); }
.chart-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px 10px; overflow: hidden; }
/* A plot a month wide per month runs past the screen. The months scroll; the y-axis does not,
   or the numbers on the left would scroll away from the line they label. */
.chart-scroll { display: flex; align-items: flex-start; }
/* Both beat the plain .chart rule's width:100%, which is what the price chart still wants. */
.chart.chart-axis { flex: none; width: auto; height: auto; }
.chart-pan { flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.chart.chart-wide { width: auto; max-width: none; height: auto; }
.chart .grid-month { stroke-dasharray: 2 4; }
.chart .axis-year { font-weight: 600; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 11px; }
.chart .series { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .marker { fill: var(--brand); stroke: var(--card); stroke-width: 2; }
/* Where the odometer is heading, drawn so it cannot be mistaken for something measured. */
.chart .series-forecast { stroke: var(--accent); stroke-dasharray: 5 4; }
.chart .marker-forecast { fill: var(--card); stroke: var(--accent); }
.chart-caption i.dashed { background: repeating-linear-gradient(to right, var(--accent) 0 5px, transparent 5px 9px); }
.chart .marker-hit { fill: transparent; }
.chart .marker-hit:hover + .marker { r: 7; }
.chart .value-label { fill: var(--ink); font-size: 11px; font-weight: 600; }
.chart-caption { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--muted); margin-top: 4px; }
.chart-caption i { width: 14px; height: 2px; background: var(--brand); display: inline-block; flex: none; margin-top: 8px; }
.chart-caption strong { white-space: nowrap; }
/* Mileage figures link to the odometer page. They sit inside headers, stats and the timeline,
   so they keep the colour around them and ask for the tap with an underline instead. */
.km-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.toggle-row { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); font-size: 13px; width: max-content; }
.toggle-row a { white-space: nowrap; padding: 6px 12px; text-decoration: none; color: var(--ink); border-left: 1px solid var(--line); text-align: center; }
.toggle-row a:first-child { border-left: 0; }
.toggle-row a.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); min-height: 40px; text-decoration: none; }
.switch i { width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; flex: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.switch.on i { background: var(--brand); }
.switch.on i::after { left: auto; right: 2px; background: var(--brand-ink); box-shadow: none; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 0; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td + td, table.data th + th { padding-left: 10px; }
.table-wrap { overflow-x: auto; }

/* ---------- Documents & review ---------- */
.doc-image { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--line) 0 2px, var(--card) 2px 12px); position: relative; }
.doc-image img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; background: var(--card); }
.doc-image .open { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 600; color: var(--brand); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; text-decoration: none; }
.doc-image-empty { padding: 28px; color: var(--muted); text-align: center; font-size: 14px; }
.lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.line { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.line-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.line-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.line-raw { font-size: 16px; color: var(--muted); }
.line-raw[dir="rtl"], .line-raw.urdu { text-align: right; }
.line-norm { font-size: 16px; font-weight: 600; }
.line-sub { font-size: 13px; color: var(--muted); }
.line-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.line-amount .amount.passthrough { color: var(--muted); text-decoration: line-through; }
.line-amount a { font-size: 13px; font-weight: 600; }
.line-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.line.passthrough { border-style: dashed; }
.line-actions .btn { height: auto; min-height: 40px; padding: 8px 12px; font-size: 14px; text-align: left; white-space: normal; line-height: 1.3; background: var(--tint); color: var(--brand); border: 1px solid var(--brand); border-radius: 10px; width: 100%; justify-content: flex-start; }
.totals { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.totals .row { font-size: 15px; align-items: center; }
.totals .row strong { font-variant-numeric: tabular-nums; }
.year-buttons { display: flex; gap: 6px; }
.year-buttons .btn { height: 34px; padding: 0 10px; font-size: 14px; border-radius: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.year-buttons form { display: contents; }

/* Dashboard halves: stacked with a gap on phones, side by side from 640 px. */
.two-col { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .stat-value { font-size: 20px; white-space: nowrap; }
  .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
}

/* Install card */
.install .actions .btn { flex: 1; }
.install [hidden] { display: none !important; }
.install .banner .glyph { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

/* Review checklist */
.pinned-receipt { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5; background: var(--bg); padding: 6px 0; margin: -6px 0; }
.pinned-receipt summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.pinned-receipt summary::-webkit-details-marker { display: none; }
.pinned-thumb { width: 56px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--line); flex: none; }
.pinned-receipt[open] summary { border-radius: var(--radius) var(--radius) 0 0; }
.progress-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 4px; }
.progress-bar i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.tick-form { display: contents; }
.tick { margin-left: auto; }
.line.confirmed { opacity: .75; }
.line.confirmed .line-norm { font-weight: 500; }

/* Photo slots with preview */
/* Hidden but still focusable/clickable via its label. !important so element rules such as
   input[type=file] { width: 100% } cannot widen it (a 390 px absolute input pushed the page sideways). */
.visually-hidden { position: absolute !important; top: 0; left: 0; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap; }
.photo-slot .slot { position: relative; }
.photo-slot .slot.tall { min-height: 220px; font-size: 16px; }
.photo-slot .slot img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; }
.photo-slot .slot img[hidden] { display: none; }
.photo-slot .prompt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.photo-slot .prompt[hidden] { display: none; }
.photo-slot .slot.filled { border-style: solid; border-color: var(--ok); background: var(--card); }

/* ---------- Design pass 2 (Sep 2026): month groups, feed, timeline, key-value cards ---------- */
.strong { font-weight: 600; }
h2.flush, .section-head h2 { margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.section-head a { font-size: 14px; font-weight: 600; }
.month { display: flex; flex-direction: column; gap: 4px; }
.month-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); font-weight: 600; }
.month-head .num { font-weight: 400; }
/* one card, rows divided by hairlines (fuel months, documents, "not filed yet") */
.list.grouped { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; gap: 0; }
.list.grouped > .list-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 13px 0; align-items: center; }
.list.grouped > .list-item:last-child { border-bottom: 0; }
.fill-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.fill-row .muted { font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.fill-row .amount { margin-left: auto; font-size: 16px; }
/* dashboard feed */
.feed { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; display: flex; flex-direction: column; }
.feed-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.feed-icon.svc { background: var(--acc-tint); color: var(--accent); }
.feed-icon svg { width: 17px; height: 17px; }
.feed-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feed-title, .feed-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-title { font-size: 16px; font-weight: 600; }
.feed-sub { font-size: 13px; color: var(--muted); }
.feed-amount { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 16px; }
.pair > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pair > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.pair .label { font-size: 13px; color: var(--muted); }
.pair .value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pair .note { font-size: 12px; color: var(--muted); }
/* detail pages: big number card + label/value rows */
.hero { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hero-amount { display: block; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.hero-sub { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; color: var(--muted); }
.kv { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.kv-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv-row:last-child { border-bottom: 0; }
.kv-row > span:first-child { font-size: 15px; color: var(--muted); }
.kv-row > strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; text-align: right; }
.photo-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.photo-pair a { position: relative; display: block; height: 96px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.photo-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-pair span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--muted); }
.item-rows { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.item-row:last-child { border-bottom: 0; }
/* A line that names a catalogue item opens that item's history. */
a.item-row { grid-template-columns: minmax(0, 1fr) auto auto; color: inherit; text-decoration: none; }
a.item-row .chev { color: var(--muted); font-size: 16px; align-self: start; line-height: 1.4; }
/* A paper in the glovebox: a thumbnail of the photo, or a plain mark when it is a PDF. */
.paper-row { gap: 12px; }
.paper-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; background: var(--bg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.paper-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paper-pdf { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.item-main { display: flex; flex-direction: column; min-width: 0; }
.item-name { font-size: 15px; font-weight: 600; }
.item-meta { font-size: 12px; color: var(--muted); }
.item-row .num { font-size: 15px; }
.quiet-links { font-size: 14px; color: var(--muted); text-align: center; }
.quiet-links a { font-weight: 600; }
/* full-width two-way tabs (history) */
.tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.tabs a { text-align: center; padding: 11px 0; font-size: 15px; color: var(--ink); text-decoration: none; }
.tabs a + a { border-left: 1px solid var(--line); }
.tabs a.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
/* visit timeline */
.tl { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 3px; }
.tl-dot.next { background: var(--card); box-shadow: 0 0 0 2.5px var(--accent) inset; }
/* An odometer reading on its own: a smaller, hollow dot, so it reads as a mark on the line
   rather than as another visit. */
.tl-dot.small { width: 8px; height: 8px; margin: 6px 3px 0; background: var(--card); box-shadow: 0 0 0 2px var(--brand) inset; }
/* A reading needs room above and below or it looks wedged between the cards, but less than a
   visit gets: the dot's own margin follows the padding so it stays level with its date. */
.tl-mark .tl-body { padding: 8px 0 10px; }
/* The stub fills the space the dot's offset would otherwise leave as a break in the rail; with
   no stub (first node, or first under a year heading) the dot carries that offset itself. */
.tl-mark .tl-dot.small { margin-top: 0; }
.tl-mark .tl-stub.tl-line { flex: none; height: 14px; margin-top: 0; }
.tl-mark .no-stub .tl-dot.small { margin-top: 14px; }
.tl-mark-note { color: var(--muted); font-weight: 500; }
a.tl-mark-note { color: var(--brand); }
.tl-line { flex: 1; width: 2px; background: var(--line); margin-top: 4px; }
.tl-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 8px; }
.tl-date { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-year { margin: 8px 0 8px; }
.tl-year:first-child { margin-top: 0; }
.visit-head, .visit-sub { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; }
.visit-title { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-head .amount { font-size: 16px; }
.visit-items { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-toggle { font-size: 13px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.visit-toggle::after { content: " ▾"; }
.visit-lines { border-top: 1px solid var(--line); margin-top: 8px; }

/* ---------- Visits: linkable timeline cards, receipt slider ---------- */
.visit { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.visit:has(details[open]) { border: 1.5px solid var(--brand); }
.visit-head { display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: inherit; min-width: 0; }
.visit-head .visit-title { flex: 1; }
.visit-head .chev { font-weight: 600; }
.visit details summary { list-style: none; cursor: pointer; }
.visit details summary::-webkit-details-marker { display: none; }
.visit details[open] .visit-toggle::after { content: " ▴"; }
.slider { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slider::-webkit-scrollbar { display: none; }
.slider.single { grid-auto-columns: 100%; }
.slide { scroll-snap-align: start; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.slide-image { display: flex; align-items: center; justify-content: center; height: min(62vh, 440px); background: repeating-linear-gradient(135deg, var(--line) 0 2px, var(--card) 2px 12px); }
.slide-image img { width: 100%; height: 100%; object-fit: contain; background: var(--card); display: block; }
.slide figcaption { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); }
.slide-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.slide-title a { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Add page links, bulk upload ---------- */
.add-links .row { align-items: center; }
.bulk-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 16px; border: 1.5px dashed var(--brand); border-radius: var(--radius); background: var(--tint); color: var(--brand); cursor: pointer; }
.bulk-drop .muted { color: var(--muted); }
.bulk-drop input[type=file] { margin-top: 6px; color: var(--ink); max-width: 100%; }

/* ---------- Public pages (layouts/public) ---------- */
body.public { padding-bottom: 0; }
.site-inner { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.site-header { background: var(--brand); color: var(--brand-ink); padding-top: env(safe-area-inset-top); }
.site-header .site-inner { min-height: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding-top: 8px; padding-bottom: 8px; }
.site-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav a.on { text-decoration: underline; text-underline-offset: 4px; }
.site-nav .btn { background: var(--brand-ink); color: var(--brand); height: 36px; }
.public main > section { padding: 48px 0; }
.public .band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(34px, 7vw, 54px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 14px; }
.public h2 { font-size: clamp(24px, 4vw, 32px); font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 12px; line-height: 1.15; }
.public h3 { font-size: 18px; margin: 0 0 6px; }
.public p { line-height: 1.6; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.lede { font-size: 18px; color: var(--muted); max-width: 40em; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
.cta-row.center { justify-content: center; }
.hero { padding-top: 40px !important; }
.hero-grid, .feature { display: grid; gap: 32px; align-items: center; }
.phone { margin: 0 auto; width: min(300px, 78vw); border: 8px solid #1c2426; border-radius: 34px; overflow: hidden; background: #1c2426; box-shadow: 0 18px 40px rgba(28, 36, 38, .18); }
.phone img { display: block; width: 100%; height: auto; }
.section-title { text-align: center; margin-bottom: 24px !important; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.step-no { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; align-items: center; justify-content: center; margin-bottom: 10px; }
.steps p, .tile p { margin: 0; color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 12px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.ticks li { padding-left: 26px; position: relative; line-height: 1.5; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.tiles { display: grid; gap: 14px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.closing { text-align: center; }
.closing .lede { margin: 0 auto; }
.page-intro { padding-bottom: 8px !important; }
.narrow { max-width: 720px; }
.prose h2 { margin-top: 28px; }
.prose h2:first-child { margin-top: 0; }
.site-footer { border-top: 1px solid var(--line); padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); color: var(--muted); }
.site-footer .site-inner { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
.site-footer .urdu { font-size: 13px; line-height: 1; }
@media (min-width: 800px) {
  .hero-grid { grid-template-columns: 1.2fr .8fr; }
  .feature { grid-template-columns: .8fr 1.2fr; gap: 56px; }
  .feature.flip .phone { order: 2; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
}
.urdu-inline { font-family: var(--font-urdu); line-height: 1; unicode-bidi: isolate; padding: 0 2px; }

/* Move a receipt or visit to another car */
.move-form { display: flex; gap: 8px; align-items: center; }
.move-form select { flex: 1; height: 38px; }
.move-list .check { font-size: 15px; }

/* Review queue: where you are and the way on */
.queue-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }

/* Catalogue search box (catalogue_picker_controller.js) */
.picker { position: relative; }
.picker-input-row { display: flex; gap: 6px; align-items: center; }
.picker-input-row input { flex: 1; }
.picker-clear { flex: none; height: 44px; width: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 18px; cursor: pointer; }
.picker-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(28, 36, 38, .14); }
.picker-list [role=option] { padding: 10px 14px; cursor: pointer; font-size: 15px; }
.picker-list [role=option][aria-selected=true], .picker-list [role=option]:hover { background: var(--tint); color: var(--brand); }
.picker-list .picker-group { padding: 8px 14px 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.picker-list .picker-empty { padding: 10px 14px; font-size: 14px; color: var(--muted); }

/* Continue with Google */
.google-btn { gap: 10px; color: var(--ink); border-color: var(--line); background: var(--card); }
.or-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* The Save bar sticks to the bottom only when its form ends the page. When more follows (reset,
   delete, "enter by hand"), it sits in place under the last field instead of floating mid-page. */
.page > form:has(> .action-bar):not(:last-child) > .action-bar { position: static; margin: 4px 0 0; padding: 0; border: 0; background: none; }
.picker-list .picker-cat { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* A public invoice: the page a workshop sends to a customer who has no account. */
.invoice { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; max-width: 640px; margin: 0 auto; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.invoice-shop { margin: 0; font-size: 20px; line-height: 1.2; }
.invoice-meta { text-align: right; }
.invoice-lines { width: 100%; border-collapse: collapse; margin: 14px 0; }
.invoice-lines th, .invoice-lines td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.invoice-lines tfoot th { border-bottom: 0; border-top: 2px solid var(--ink); font-size: 17px; }
.invoice-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; text-align: center; }
.share-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-link input { flex: 1; min-width: 0; font-size: 13px; }
@media print {
  .site-header, .site-footer, .invoice-foot, .tabbar { display: none !important; }
  .invoice { border: 0; padding: 0; max-width: none; }
}

/* Writing an invoice: one row per line, amount on the right. */
.line-head { display: grid; grid-template-columns: 1fr 112px; gap: 8px; padding: 0 2px 2px; }
.line-head span:last-child { text-align: right; }
.line-row { display: grid; grid-template-columns: 1fr 112px; gap: 8px; margin-bottom: 8px; }
.line-row input { min-width: 0; }
/* Amounts stay on one line; a wrapped "Rs 6,500" reads as two numbers. */
.invoice-lines td:last-child, .invoice-lines th:last-child { white-space: nowrap; padding-left: 12px; }