/* Hallmark · shape: app screen · genre: modern-minimal · theme: Dose (deal 1/3, seed trackserv-admin-portal-vehicle-e52d·be9589ce·2026-11-13·r0)
 * nav: bottom tab bar, five destinations · signature: the vehicle card with its due pill and odometer · states: loading, empty, error, offline, full · dose: radius 6/8, hairline borders
 * axes: light/grotesk-sans/chromatic-green · posture: committed · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, kept the green to the primary action and current tab so due states read first */
/* answered: F4, .btn is the outline recipe (surface fill, hairline border); .btn-primary is the only filled one */
/* answered: F radius, user rule asks rounded-md/lg and 1px borders, theme radius 14px reduced to 8px */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --radius-card: 8px;
  --radius-input: 6px;
  --control-h: 44px;
  --tabbar-h: 64px;
  --screen-max: 720px;
  --gutter: 16px;
  --color-surface: oklch(99.2% 0.006 88);
  --color-warn-soft: oklch(93% 0.06 85);
  --color-warn-ink: oklch(42% 0.1 70);
  --color-error-soft: oklch(94% 0.04 27);
  --color-success-soft: oklch(93% 0.05 150);
  --color-info-soft: oklch(94% 0.03 230);
  --color-info: oklch(47% 0.1 240);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body { min-height: 100%; }
body { -webkit-tap-highlight-color: transparent; }
#app { min-height: 100vh; }

/* ConfirmButton armed: the second tap deletes, so make that state unmistakable. */
.btn.armed, .btn.armed:hover { background: var(--color-error); border-color: var(--color-error); color: var(--color-paper); }

/* ---------- Shell ---------- */
/* FocusOnNavigate moves focus to each page's h1 (tabindex -1) so screen readers announce it.
   The heading is not a control, so it gets no focus ring; real controls keep theirs. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus, h2[tabindex="-1"]:focus-visible { outline: none; }
.app { min-height: 100vh; padding-top: var(--safe-top); }
.app.with-tabs { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
.screen { width: 100%; max-width: var(--screen-max); margin-inline: auto; padding: var(--space-md) var(--gutter) var(--space-xl); }
.screen.center { min-height: 100vh; display: grid; place-items: center; }
.boot { padding: var(--space-xl) var(--gutter); }

.tabbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky-nav); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--color-surface); border-top: var(--rule-hair) solid var(--color-rule);
  /* The bar spans the window; the tabs line up with the page column on wide screens. */
  padding-inline: max(0px, calc((100% - var(--screen-max)) / 2)); }
.tab { display: grid; justify-items: center; align-content: center; gap: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.tab:hover { color: var(--color-ink); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; transition: none; }
.tab:active { color: var(--color-accent-deep); }
.tab.active { color: var(--color-accent-deep); font-weight: 600; }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--gutter); font-size: var(--text-sm); background: var(--color-paper-3); color: var(--color-ink-2); }
.banner-info { background: var(--color-info-soft); color: var(--color-info); }
.banner-error { background: var(--color-error-soft); color: var(--color-error); }

/* ---------- Header ---------- */
.page-head { margin-bottom: var(--space-lg); }
.page-head .back { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-h); margin-left: calc(var(--space-xs) * -1); font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; }
.page-head .back:hover { color: var(--color-ink); }
.page-head-row { display: flex; align-items: flex-end; gap: var(--space-sm); }
.page-head-text { flex: 1; min-width: 0; }
.page-head h1 { font-size: var(--text-2xl); max-width: none; }
.page-head .sub { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.page-head .actions { display: flex; gap: var(--space-xs); }

/* ---------- Buttons (8 states) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); border-color: var(--color-muted); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-accent-ink); border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn-danger { color: var(--color-error); }
.btn-danger:hover { background: var(--color-error-soft); border-color: var(--color-error); }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover { background: var(--color-paper-3); border-color: transparent; }
.btn-sm { min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-xs); }
.btn-block { width: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
.stack-actions { display: grid; gap: var(--space-sm); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0; }
.cta-row .btn { flex: 1 1 140px; }
.link-center { display: block; text-align: center; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-md); }
.inline-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.inline-form .notice { grid-column: 1 / -1; }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field > label, fieldset legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.field .hint { font-size: var(--text-xs); color: var(--color-muted); }
.field .error { font-size: var(--text-xs); color: var(--color-error); }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); align-items: start; }
.input, .select, .textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-md); transition: border-color var(--dur-micro) var(--ease-out); }
.textarea { padding: var(--space-xs) var(--space-sm); min-height: 88px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); transition: none; }
.input:disabled, .select:disabled { background: var(--color-paper-2); color: var(--color-muted); }
.input::placeholder, .textarea::placeholder { color: var(--color-muted); }
.select-sm { min-height: 44px; width: auto; font-size: var(--text-sm); }
.upper { text-transform: uppercase; }
.mono { font-family: var(--font-outlier); }
.num { font-variant-numeric: tabular-nums; }
.check { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-h); font-size: var(--text-sm); }
.check input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: var(--space-xs); }

.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-xs); }
.segmented legend { grid-column: 1 / -1; }
.seg { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-surface); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg:hover { border-color: var(--color-muted); }
.seg:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg.on { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-deep); font-weight: 600; }

.checks { display: grid; gap: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-xs) var(--space-sm); }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.check-row:last-child { border-bottom: 0; }
.check-row.on .check { font-weight: 600; }
.cost { display: flex; align-items: center; gap: var(--space-2xs); width: 130px; }
.cost .input { min-height: 44px; text-align: right; }
.total { display: flex; justify-content: space-between; font-weight: 600; }

/* ---------- Feedback ---------- */
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-warn-soft); color: var(--color-warn-ink); font-size: var(--text-sm); margin-bottom: var(--space-md); text-decoration: none; }
.notice-error { background: var(--color-error-soft); color: var(--color-error); border-color: var(--color-error); }
.empty { display: grid; justify-items: center; gap: var(--space-sm); text-align: center; padding: var(--space-xl) var(--space-md); color: var(--color-muted); border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-card); }
.empty strong { color: var(--color-ink); font-size: var(--text-lg); font-family: var(--font-display); }
.error-state { border-style: solid; border-color: var(--color-error-soft); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-sm)); transform: translateX(-50%); z-index: var(--z-toast); max-width: calc(100% - 32px); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); animation: toast-in var(--dur-short) var(--ease-out); }
.toast-error { background: var(--color-error); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.skeleton { display: grid; gap: var(--space-sm); }
.skeleton-row { display: grid; gap: var(--space-xs); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.sk { display: block; height: 12px; border-radius: 4px; background: var(--color-paper-3); animation: pulse 1.4s var(--ease-in-out) infinite; }
.sk-a { width: 40%; height: 16px; }
.sk-b { width: 70%; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-xs); border-radius: var(--radius-input); font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-3); color: var(--color-ink-2); white-space: nowrap; }
.pill-ok { background: var(--color-success-soft); color: var(--color-success); }
.pill-warn { background: var(--color-warn-soft); color: var(--color-warn-ink); }
.pill-error { background: var(--color-error-soft); color: var(--color-error); }
.pill-info { background: var(--color-info-soft); color: var(--color-info); }
.pill-accent { background: var(--color-accent-soft); color: var(--color-accent-deep); }

/* ---------- Vehicle cards (signature) ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.vcard { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: inherit; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.vcard:hover { border-color: var(--color-muted); }
.vcard:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.vcard:active { transform: scale(0.99); }
.vcard-photo { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-accent-deep); overflow: hidden; }
.vcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.vcard-body { min-width: 0; }
.vcard-reg { font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-lg); letter-spacing: 0.02em; }
.vcard-model { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard-meta { font-size: var(--text-xs); color: var(--color-muted); }
.vcard-status { display: grid; justify-items: end; gap: var(--space-2xs); }
.vcard-next { font-size: var(--text-xs); color: var(--color-muted); }

.hero-card { display: grid; gap: var(--space-md); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.hero-photo { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-accent-deep); overflow: hidden; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-btn { position: absolute; right: var(--space-xs); bottom: var(--space-xs); z-index: var(--z-raised); }
/* The real control is a visually hidden file input; show its keyboard focus on the visible label. */
.photo-btn:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.hero-facts > div { display: grid; gap: var(--space-2xs); align-content: start; }
.hero-facts .label { font-size: var(--text-xs); color: var(--color-muted); }
/* Body face: the display face sets a full-width comma with tabular figures ("31 , 100"). */
.hero-facts .big { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); }
.mileage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: end; }
@media (max-width: 26rem) { .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Lists ---------- */
.section { margin-top: var(--space-xl); }
.section h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.small-head { font-size: var(--text-sm); margin: var(--space-lg) 0 var(--space-xs); }
.list { list-style: none; margin: 0; padding: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.list > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.list > li:last-child { border-bottom: 0; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 56px; padding: var(--space-sm) var(--space-md); color: inherit; text-decoration: none; }
a.list-row:hover { background: var(--color-paper); }
a.list-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.list-row > div:first-child { min-width: 0; }
.list-title { font-weight: 600; overflow-wrap: anywhere; }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
.row-actions { display: flex; align-items: center; gap: var(--space-xs); }

.search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); margin-bottom: var(--space-md); }
.ws { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); padding: var(--space-md); }
.ws-km { font-size: var(--text-sm); color: var(--color-muted); }
.ws-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sheet { padding: var(--space-md); margin-bottom: var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-surface); }
.sheet h2 { font-size: var(--text-lg); margin-bottom: var(--space-md); }

.booking { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md); }
.ticket-date { text-align: center; line-height: 1.1; min-width: 48px; padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); font-family: var(--font-outlier); font-size: var(--text-xs); }
.ticket-date b { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.booking-side { display: grid; justify-items: end; gap: var(--space-2xs); }
.staff-note { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-info); }

.danger-zone { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.danger-zone .muted { margin-bottom: var(--space-sm); }
.version { text-align: center; margin-top: var(--space-xl); }
.form-foot { text-align: center; }

/* ---------- AI ---------- */
.ai-scan { display: grid; gap: var(--space-3xs); }
.ai-scan-btn { gap: var(--space-xs); }
.ai-scan-btn:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ai-scan-off { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); }
.ai-inline { justify-self: start; gap: var(--space-3xs); margin-top: var(--space-2xs); }
.chat { display: grid; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.bubble { max-width: 85%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-user { justify-self: end; background: var(--color-accent-soft); color: var(--color-ink); border-color: transparent; }
.bubble-ai { justify-self: start; background: var(--color-surface); color: var(--color-ink); }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }

/* ---------- Costs ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-md); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.stat { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.stat-value { font-size: var(--text-md); font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.stat-value.muted { color: var(--color-muted); }
/* One series (monthly spend): one sequential hue, thin bars, 2px gaps, rounded data ends on the baseline. */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 200px; padding-top: var(--space-lg); }
.bar-col { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; outline: none; }
.bar-col:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bar { display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.bar-fill { fill: var(--color-accent); }
.bar-base { fill: var(--color-rule); }
.bar-col:hover .bar-fill, .bar-col:focus-visible .bar-fill { fill: var(--color-accent-deep); }
.bar-label { padding-top: var(--space-3xs); text-align: center; font-size: var(--text-xs); color: var(--color-muted); }
.bar-tip { position: absolute; bottom: calc(100% - var(--space-md)); left: 50%; transform: translateX(-50%); padding: 2px var(--space-2xs); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none; }
.bar-col:hover .bar-tip, .bar-col:focus-visible .bar-tip { opacity: 1; }
.table-toggle { margin-top: var(--space-sm); }
.table-toggle summary { cursor: pointer; min-height: var(--control-h); display: flex; align-items: center; color: var(--color-ink-2); }
.table-toggle summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data th, .data td { padding: var(--space-2xs) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; }
.data .r { text-align: right; }
.vcard-doc { display: flex; align-items: flex-start; gap: var(--space-3xs); margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-warn-ink); }
.vcard-doc svg { flex: none; margin-top: 0.2em; }
.list-row > .num { white-space: nowrap; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }

/* ---------- Welcome ---------- */
.welcome { min-height: calc(100vh - 64px); display: grid; align-content: center; gap: var(--space-lg); }
.welcome-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-card); background: var(--color-accent-soft); color: var(--color-accent-deep); }
.welcome h1 { font-size: var(--text-3xl); max-width: 12ch; }
.welcome .lead { color: var(--color-muted); }

/* Blazor error UI */
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: var(--z-toast); padding: var(--space-sm) var(--gutter); background: var(--color-error-soft); color: var(--color-error); font-size: var(--text-sm); }
#blazor-error-ui .reload { font-weight: 600; margin-left: var(--space-xs); }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
.hero-photo:not(:has(img)) { aspect-ratio: 4 / 1; }
/* Long-form text (privacy notice) */
.prose { display: grid; gap: var(--space-md); max-width: 65ch; }
.prose h2 { font-size: var(--text-lg); margin-top: var(--space-md); }
.prose ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.prose a { color: var(--color-accent-deep); }

/* Installed-app bars (web build, js/pwa.js): install offer and new-version notice, above the tab bar */
.pwa-bar { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-sm)); z-index: var(--z-modal); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); max-width: calc(var(--screen-max) - 2 * var(--gutter)); margin-inline: auto; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); animation: toast-in var(--dur-short) var(--ease-out); }
.pwa-bar-text { flex: 1 1 14rem; margin: 0; font-size: var(--text-sm); }
.pwa-bar-actions { display: flex; gap: var(--space-xs); }
@media (prefers-reduced-motion: reduce) { .pwa-bar { animation: none; } }