:root {
  --bg: oklch(0.97 0.003 90);
  --card: #ffffff;
  --border: oklch(0.89 0.004 90);
  --text: oklch(0.18 0.01 90);
  --muted: oklch(0.5 0.01 90);
  /* Brand amber — now the app-wide primary action color (Sign in, Log It default,
     "Use current location", etc). Old token names kept and repointed at amber
     rather than renamed everywhere, so this is a small diff instead of a churny one. */
  --brand-amber-700: oklch(0.48 0.15 45);
  --brand-amber-500: oklch(0.68 0.17 50);
  --brand-amber-300: oklch(0.83 0.12 60);
  --brand-amber-100: oklch(0.94 0.05 65);
  --brand-ink-soft: oklch(0.40 0.02 50);
  --ink: oklch(0.22 0.025 45);

  --accent: var(--brand-amber-500);
  --accent-soft: var(--brand-amber-100);
  --green: var(--brand-amber-500);
  --green-soft: var(--brand-amber-100);
  --danger: #b3261e;
  --live: oklch(0.62 0.15 145);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* Screen-to-screen navigation (Landing/Visit/Overview/Settings) plays a quick
   swipe-in on the incoming content — approximates the same "comes in from the
   right" push feel as the Logging/Logged overlay, without a full two-layer
   retrofit of the content-replacement rendering this app already uses. */
@keyframes contentSwipeIn { from { transform: translateX(36px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
#content.swipe-in { animation: contentSwipeIn 0.26s cubic-bezier(0.22,1,0.36,1); }

.hidden { display: none !important; }
.screen { min-height: 100vh; min-height: 100dvh; }
#app-screen { position: relative; }

/* ---- Login ---- */
#login-screen {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--brand-amber-500); text-align: center;
  position: relative; overflow: hidden;
}
/* F001 (2026-07-25): signup mode flips the whole screen to the app's neutral
   paper background, with the signup form itself becoming the amber surface —
   ported 1:1 from GNT Design Board.html#F001's Option A (chosen over keeping
   the amber page + patching the button color one more time). Toggled via JS
   adding/removing this class on #login-screen (see show-signup/show-login
   handlers in app.js), not a CSS-only :has() selector, for iOS Safari safety. */
#login-screen.signup-mode { background: var(--bg); }
#login-screen.signup-mode .brand-wordmark .got { color: var(--ink); }
#login-screen.signup-mode .brand-wordmark .notime { color: var(--brand-amber-700); }
#login-screen.signup-mode .login-subtitle { color: var(--muted); }
#login-screen.signup-mode .auth-toggle { color: var(--ink); opacity: 0.7; }
.login-inner { width: 100%; max-width: 300px; margin: 0 auto; position: relative; z-index: 1; }
#login-screen .brand-wordmark { font-size: 66px; letter-spacing: -0.03em; }
#login-screen .brand-wordmark .got { color: #fff; }
#login-screen .brand-wordmark .notime { color: var(--ink); }
#login-screen .login-subtitle { color: rgba(255,255,255,0.82); }
.brand-wordmark { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.brand-wordmark .got { font-weight: 500; color: var(--brand-ink-soft); }
.brand-wordmark .notime { color: var(--brand-amber-500); }
.brand-wordmark-sm { font-size: 24px; }
.login-subtitle {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px; margin-bottom: 14px;
}
.muted { color: var(--muted); font-size: 13px; }
#login-form, #signup-form { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
#login-form input, #signup-form input {
  background: rgba(255,255,255,0.92); border: none; border-radius: 11px;
  padding: 14px 16px; text-align: left; font-size: 15px; color: var(--ink);
}
#login-form input::placeholder, #signup-form input::placeholder { color: oklch(0.5 0.02 60); }
#login-form .primary, #signup-form .primary {
  margin-top: 10px; align-self: center; background: var(--ink); color: #fff;
  border-radius: 999px; padding: 13px 40px; font-size: 15px;
}
#login-form .error { color: #fff; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 6px 10px; }
.auth-toggle { display: block; margin: 14px auto 0; color: rgba(255,255,255,0.85); text-decoration: underline; background: none; border: none; font-size: 13px; cursor: pointer; padding: 6px; font-family: inherit; }

/* F001 round 4 (2026-07-25): Sign in button + Sign Up link side by side on
   one row, per Dave's direct call, instead of a full-width button with the
   toggle link stacked below it. */
.login-actions-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.login-actions-row .primary { margin-top: 0; }
.login-actions-row .auth-toggle { margin: 0; display: inline; }

/* F001 (2026-07-25): the signup form is now its own amber card (Option A),
   not bare inputs floating on the page — see #login-screen.signup-mode above
   for the page-level flip that makes this read as a distinct surface. */
#signup-form {
  background: var(--brand-amber-500); border-radius: 20px; padding: 22px 20px;
  box-shadow: 0 12px 26px oklch(0.45 0.14 50 / 0.35);
}
.signup-card-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; letter-spacing: -0.2px; text-align: left; }
#signup-form .primary.prominent { padding: 15px 42px; font-size: 19px; font-weight: 800; box-shadow: 0 10px 22px oklch(0.22 0.025 45 / 0.35); }

/* F001 round 8 (2026-07-25): billing/signup-error banners are drop-downs
   anchored to the very top of the screen, floating over the content instead
   of pushing the form down and partially covering it (the old .billing-banner
   inline-above-form treatment). Distinct from the generic bottom .toast
   snackbar elsewhere in the app — this is a persistent state banner tied to
   URL params / a form error, not an auto-dismissing notice. */
.login-banner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px; text-align: left;
}
.login-banner-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.login-banner-title { font-size: 14px; font-weight: 700; }
.login-banner-sub { font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.login-banner.success { background: var(--brand-amber-100); border-bottom: 2px solid var(--brand-amber-300); color: var(--ink); }
.login-banner.success .login-banner-icon { background: var(--brand-amber-500); }
.login-banner.cancel { background: rgba(255,255,255,0.96); color: var(--ink); border-bottom: 1px solid var(--border); }
.login-banner.cancel .login-banner-icon { background: var(--border); }
.login-banner.error { background: var(--ink); color: #fff; }
.login-banner.error .login-banner-icon { background: rgba(255,255,255,0.14); }
.login-banner.error .login-banner-sub { color: rgba(255,255,255,0.6); }
.login-banner-detail-toggle {
  display: block; background: none; border: none; padding: 0; margin-top: 6px;
  color: rgba(255,255,255,0.4); font-weight: 600; font-size: 12px; cursor: pointer; font-family: inherit;
}
.login-banner-detail {
  font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; line-height: 1.5;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

input, select, textarea {
  font-size: 16px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}
button { font-family: inherit; }
button.primary {
  background: var(--green); color: #fff; border: none;
  padding: 12px 16px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 4px;
}
button.primary:active { opacity: 0.85; }
.link-btn { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 6px; }
.error { color: var(--danger); font-size: 13px; margin-top: 4px; }

/* ---- App shell ---- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(env(safe-area-inset-top), 16px) 14px 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border); color: var(--text);
  font-size: 18px; cursor: pointer;
}

/* Amber-branded screens (Landing) float a transparent topbar with translucent
   white icon pills over the full-bleed amber content, instead of a solid
   paper header pushing content down. */
body.amber-topbar #app-screen { background: var(--brand-amber-500); }
body.amber-topbar .topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  background: transparent; border-bottom: none;
}
body.amber-topbar .icon-btn {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.16); border: none; color: #fff;
}
body.amber-topbar #content { padding: 0; max-width: none; min-height: 100dvh; }

#content { padding: 16px 16px 110px 16px; max-width: 520px; margin: 0 auto; }

/* ---- Cards ---- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.label-caps { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; }
.big-value { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.big-value .unit { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* Purpose chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--text);
  white-space: nowrap;
}
.chip.selected { color: #fff; }
.purpose-input {
  border: none; background: transparent; width: 100%; resize: none;
  padding: 0; font-size: 16px; color: var(--text); border-radius: 0; min-height: 44px;
  font-family: inherit;
}
.purpose-input:focus { outline: none; }
.tint-card { transition: background 0.2s, border 0.2s; }

/* Mileage rows */
.loc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.loc-dot.live { background: var(--live); }
.loc-name { font-size: 11.5px; font-weight: 700; color: var(--ink); flex: 1; }
@keyframes liveThrob { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes gpsPulse { 0% { transform: scale(0.6); opacity: 0.7; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes gpsSpin { to { transform: rotate(360deg); } }
/* Small enough that the row never crosses into its sibling's space —
   a full row-height offset here caused visible clipping/overlap in one
   swap direction but not the other, since the rows are normal-flow
   siblings (not absolutely positioned), so paint order made the two
   directions look inconsistent. */
@keyframes swapFromBelow { from { transform: translateY(10px); opacity: 0.25; } to { transform: translateY(0); opacity: 1; } }
@keyframes swapFromAbove { from { transform: translateY(-10px); opacity: 0.25; } to { transform: translateY(0); opacity: 1; } }

.loc-container { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.loc-container-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #fff; position: relative;
}
.loc-divider { height: 1px; background: var(--border); margin-left: 29px; }
.loc-dot-col { display: flex; align-items: center; justify-content: center; width: 8px; flex-shrink: 0; }
.loc-picker-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.loc-picker-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.loc-dropdown {
  position: absolute; left: 0; right: -50px; z-index: 20; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); overflow: hidden;
}
.loc-dropdown.below { top: calc(100% + 6px); }
.loc-dropdown.above { bottom: calc(100% + 6px); }
.loc-dropdown-item { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; border-bottom: 1px solid oklch(0.94 0.004 90); }
.loc-dropdown-item:last-child { border-bottom: none; }
.loc-swap-btn {
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  padding: 4px; border: none; background: none;
}
.refresh-btn {
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  width: 44px; height: 44px; border: none; background: none;
}

.toggle-row { display: flex; align-items: center; gap: 10px; }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch.switch-sm { width: 34px; height: 20px; }
.slider {
  position: absolute; inset: 0; background: oklch(0.88 0.004 90); border-radius: 999px; cursor: pointer; transition: 0.15s;
}
.slider::before {
  content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch-sm .slider::before { width: 16px; height: 16px; left: 2px; top: 2px; }
input:checked + .slider::before { transform: translateX(20px); }
.switch-sm input:checked + .slider::before { transform: translateX(14px); }
.toggle-label { font-size: 11px; color: var(--muted); }

/* Branded checkbox — same hidden-native-input + styled-sibling technique as
   .switch above, just square instead of a pill, for actions read as a
   discrete confirmation (Confirm mileage) rather than an on/off preference
   (Round trip). */
.checkbox-branded { position: relative; display: inline-flex; width: 26px; height: 26px; flex-shrink: 0; cursor: pointer; }
.checkbox-branded input { opacity: 0; width: 0; height: 0; position: absolute; }
.checkbox-box {
  position: absolute; inset: 0; border-radius: 7px;
  border: 1.5px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

/* Hours chips */
.hours-grid { display: flex; gap: 6px; margin-bottom: 8px; }
.hours-grid.minutes-row { margin-bottom: 0; }
.hchip {
  flex: 1; padding: 8px 2px; border-radius: 9px; border: 1px solid var(--border);
  background: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--text); text-align: center;
}
.hchip.selected { color: #fff; border: none; }
.hchip.manual-edit { font-size: 11px; color: var(--muted); }

/* Drum time picker */
.drum-wrap {
  position: relative; border-radius: 14px; overflow: hidden; height: 132px;
  background: #fff; border: 1px solid var(--border); margin-bottom: 8px;
}
.drum-inner { display: flex; height: 100%; }
.drum-col {
  flex: 1; overflow-y: scroll; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 44px 0;
}
.drum-col::-webkit-scrollbar { display: none; }
.drum-item {
  height: 44px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
.drum-colon { display: flex; align-items: center; justify-content: center; width: 22px; font-size: 26px; font-weight: 700; color: var(--muted); }
.drum-highlight { position: absolute; top: 44px; left: 0; right: 0; height: 44px; pointer-events: none; opacity: 0.6; }
.drum-fade-top { position: absolute; top: 0; left: 0; right: 0; height: 52px; background: linear-gradient(to bottom, rgba(255,255,255,0.92), transparent); pointer-events: none; }
.drum-fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 52px; background: linear-gradient(to top, rgba(255,255,255,0.92), transparent); pointer-events: none; }
.drum-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.drum-actions button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--border);
  background: #fff; color: var(--muted); font-family: inherit;
}
.drum-actions button.set-time { border: none; color: #fff; }

/* Photo drop zones */
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-zone {
  border: 1.5px dashed var(--border); border-radius: 13px; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; text-align: center;
}
.photo-zone.filled { border-style: solid; }
.photo-zone .title { font-size: 11px; font-weight: 700; color: var(--ink); }
.photo-zone .sub { font-size: 10px; color: var(--muted); margin-top: 2px; }
.photo-zone input[type=file] { display: none; }

/* Master save */
.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom)) 14px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}
.save-hint { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.save-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 28px; background: oklch(0.82 0.004 90); color: #fff; border: none;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.save-btn:active { opacity: 0.85; }

/* Settings screen */
.settings-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.back-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px; color: var(--text); }
.field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field-row label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.map-hint { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--muted); }
.loc-map {
  height: 180px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: oklch(0.94 0.004 90);
}
.map-sync-hint { margin-top: 8px; }
.map-sync-hint button {
  background: var(--accent-soft); color: var(--accent); border: none; border-radius: 10px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entry-list { display: flex; flex-direction: column; gap: 8px; }
.entry-item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
}
.overview-item-text { flex: 1; min-width: 0; }
.entry-main { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-title { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 10px 2px; }
.empty-state { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.icon-danger { background: none; border: none; color: var(--danger); font-size: 16px; cursor: pointer; padding: 4px 8px; }

/* Expandable settings accordion */
.acc-item {
  background: #fff; border-radius: 14px; margin-bottom: 8px; border: 1px solid var(--border); overflow: hidden;
}
.acc-header {
  display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer;
}
.acc-title { font-size: 15px; font-weight: 600; color: var(--text); }
.acc-chevron { display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s; }
.acc-chevron.open { transform: rotate(180deg); }
.acc-body { padding: 0 14px 14px 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.acc-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn-save, .btn-delete {
  flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; border: none;
}
.btn-save { background: var(--text); color: #fff; }
.btn-delete { background: #fff; color: var(--danger); border: 1px solid oklch(0.85 0.05 25); }
.acc-add-item { border-style: dashed; }

.section-acc { margin-bottom: 14px; }
.section-acc > .acc-header { padding: 16px 14px; }
/* Compound selector (not just .label-caps) so it beats .acc-title's font-size/weight/color
   on specificity rather than relying on which rule happens to come later in the file. */
.acc-title.label-caps { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.section-acc > .acc-body { background: var(--bg); }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: #1f2328; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13px; z-index: 30; max-width: 90vw; text-align: center;
}


/* ---- Log confirmation (Logging / Logged, two-state swipe) ---- */
@keyframes pushInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pushOutToLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }

#log-confirm-screen { position: fixed; inset: 0; z-index: 90; overflow: hidden; }
.log-state {
  position: absolute; inset: 0; background: var(--brand-amber-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 0 22px; box-sizing: border-box;
}
.log-state.enter-right { animation: pushInFromRight 0.34s cubic-bezier(0.22,1,0.36,1) both; z-index: 2; }
.log-state.exit-left { animation: pushOutToLeft 0.34s cubic-bezier(0.22,1,0.36,1) both; z-index: 1; }

.log-check {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}
.log-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff;
  animation: gpsSpin 0.8s linear infinite;
}
.log-title { font-size: 20px; font-weight: 800; color: #fff; }
.log-card {
  width: 100%; background: var(--ink); border-radius: 16px; padding: 16px 18px;
  text-align: left; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 12px 26px rgba(60,20,0,0.4); box-sizing: border-box;
}
.log-card-purpose { font-size: 15px; font-weight: 700; color: #fff; }
.log-card-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.log-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.log-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: rgba(255,255,255,0.92);
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12);
}
.log-row:first-child { border-top: none; padding-top: 0; }
.log-row-label { color: rgba(255,255,255,0.55); }
.log-row.pending .log-row-value { color: rgba(255,255,255,0.4); }

/* ---- Overview screen ---- */
.overview-header { margin-bottom: 14px; }

/* Swipe-to-delete: .overview-row clips and positions the red delete button;
   .overview-item is the actual card, translated left over it by JS via
   touch handlers (see setupSwipeRows in app.js). */
.overview-row {
  position: relative; overflow: hidden;
  border-radius: 12px; margin-bottom: 8px;
}
.overview-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer; position: relative; z-index: 1;
  transition: transform 0.2s ease;
  touch-action: pan-y; /* let vertical scroll pass through; we handle horizontal drag ourselves */
}
.overview-delete-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 84px;
  border: none; background: oklch(0.5 0.18 25); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
/* Three fixed slots (Mileage/Hours/Receipt) per visit row — present types
   keep the brand amber tint, absent ones wash out to a neutral grey so it
   reads at a glance which of the three were logged together. */
.overview-type-icons { display: flex; gap: 4px; flex-shrink: 0; }
.overview-type-icon {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  background: var(--brand-amber-100); border: 1px solid var(--brand-amber-300);
  display: flex; align-items: center; justify-content: center;
}
.overview-type-icon:not(.present) {
  background: var(--bg); border-color: var(--border);
  filter: grayscale(1); opacity: 0.45;
}

/* ---------------- Delete confirmation modal ----------------
   Centered alert-style dialog (not a bottom sheet) — this is a one-decision
   interrupt, not a detail view, so it reads more like a native confirm.
   Chrome stays neutral/paper; the destructive action itself carries the red
   (brand rule: red is reserved for errors/destructive actions, never amber). */
.confirm-modal-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-modal {
  background: var(--card); border-radius: 20px;
  width: 100%; max-width: 340px;
  padding: 22px 20px; text-align: center;
  box-shadow: 0 20px 44px rgba(0,0,0,0.3);
}
.confirm-modal-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.confirm-modal-body { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }
.confirm-modal-actions { display: flex; gap: 10px; }
.confirm-modal-cancel, .confirm-modal-delete {
  flex: 1; padding: 11px 0; border-radius: 999px; border: none;
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.confirm-modal-cancel { background: var(--bg); color: var(--ink); border: 1px solid var(--border); }
.confirm-modal-delete { background: oklch(0.5 0.18 25); color: #fff; }

/* ---------------- Record detail modal ---------------- */
.record-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.record-modal {
  background: var(--card); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
  padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom));
  position: relative;
}
.record-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--bg); color: var(--muted); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.record-modal-thumb {
  width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
  margin-top: 14px; display: block;
}
.record-modal-thumb.loading { min-height: 120px; }

/* Dark ink "Style A" card — the same treatment gotnotime-flow-mockup.html
   uses for the post-log Logged confirmation (chosen there over the
   light-header "Style B" alternative). Reused here so opening a past
   record reads as a continuation of the same brand moment rather than a
   differently-styled screen bolted on afterward. */
.record-modal-card {
  background: var(--ink); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 12px 26px rgba(36,23,17,0.35);
}
.record-modal-card-purpose { font-size: 15px; font-weight: 700; color: #fff; padding-right: 28px; }
.record-modal-card-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.record-modal-amount { font-size: 20px; font-weight: 800; color: #fff; margin-top: 10px; }
.record-modal-detail-rows { display: flex; flex-direction: column; margin-top: 10px; }
.record-modal-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: rgba(255,255,255,0.92);
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.record-modal-detail-row:first-child { border-top: none; padding-top: 0; }
.record-modal-detail-label { color: rgba(255,255,255,0.55); flex-shrink: 0; }
.record-modal-detail-value { text-align: right; }

/* ---------------- Status chip — shared by the Overview list and the modal ----------------
   Self-contained pill (own background/border/text) so the same markup reads
   correctly whether it's sitting on a paper list row or the modal's dark ink
   card. Brand rule (GotNoTime-brand-book.pdf): amber is never used for
   errors. needs_review is a caution, not an error, so it shares the amber
   treatment with "Processing" (distinct label keeps them from being
   confused); failed gets red. */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  flex-shrink: 0; border: 1px solid transparent;
}
.chip-pending { background: var(--bg); border-color: var(--border); color: var(--muted); }
.chip-processing { background: var(--brand-amber-100); border-color: var(--brand-amber-300); color: var(--brand-amber-700); }
.chip-processed { background: oklch(0.9 0.06 145); border-color: oklch(0.75 0.1 145); color: oklch(0.38 0.12 145); }
.chip-needs-review { background: var(--brand-amber-100); border-color: var(--brand-amber-300); color: var(--brand-amber-700); }
.chip-failed { background: oklch(0.94 0.03 25); border-color: oklch(0.82 0.08 25); color: oklch(0.4 0.16 25); }

.chip-spinner {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  opacity: 0.75; animation: chip-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes chip-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chip-spinner { animation: none; } }
.fab-btn {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(80,40,10,0.35); cursor: pointer; z-index: 5;
}
.fab-btn:active { opacity: 0.85; }

/* ---- Landing screen (true home) ---- */
/* Values below are 1:1 with gotnotime-flow-mockup.html — the mockup's phone
   screens are laid out at the real 414px viewport and scaled to fit its
   board, so any size approved there is copied here verbatim. Never scale
   between the two files. */
.landing-wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; box-sizing: border-box;
  /* Bottom padding reserves the FAB's zone so the vertically-centered
     block sits clear of it — the taller KPI card was crowding the tagline
     toward the FAB when centered across the full height. */
  padding: 0 39px calc(120px + env(safe-area-inset-bottom));
}
.landing-wordmark { font-size: 78px; letter-spacing: -0.03em; }
.landing-wrap .brand-wordmark .got { color: #fff; }
.landing-wrap .brand-wordmark .notime { color: var(--ink); }
.landing-subtitle {
  font-size: 20px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); margin-top: 15px;
}
.landing-divider { width: 90px; height: 4px; background: rgba(255,255,255,0.55); margin: 26px 0; }
.landing-tagline {
  font-size: 24px; font-style: italic; color: rgba(255,255,255,0.78); line-height: 1.45; max-width: 420px;
}
.landing-see-all {
  background: none; border: none; padding: 0; margin-top: 6px; align-self: flex-end;
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: 0.02em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.landing-see-all:active { opacity: 0.55; }

/* ---- Home KPIs — rows in one dark-ink card ----
   Rows, not columns: every stat owns the full width (label left, value
   right) so content width can never push the layout around; tabular
   figures stop digits jiggling as totals tick up. The card is a miniature
   of the KPI detail sheet a tap opens; each row carries a disclosure
   chevron plus a press-down state to signal tappability. */
.kpi-rows {
  width: 100%; max-width: 360px; margin: 10px 0 16px; text-align: left;
  background: var(--ink); border-radius: 20px; padding: 5px 18px;
  box-shadow: 0 12px 26px rgba(36,23,17,0.35);
}
.kpi-rows-loading { font-size: 14px; color: rgba(255,255,255,0.7); padding: 16px 3px; }
.kpi-row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 3px; cursor: pointer; transition: opacity 0.15s; }
.kpi-row-item:active { opacity: 0.6; }
.kpi-row-item + .kpi-row-item { border-top: 1px solid rgba(255,255,255,0.12); }
.kpi-row-label { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-amber-300); white-space: nowrap; }
.kpi-row-values { display: flex; flex-direction: column; align-items: flex-end; }
.kpi-row-value { font-size: 24px; font-weight: 800; color: #fff; white-space: nowrap; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.kpi-row-sub { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.75); letter-spacing: 0; margin-top: 2px; }

/* ---- KPI modal sheet — full-bleed ink, no light outer border (unlike the
   shared .record-modal, which wraps .record-modal-card in a light-card
   frame). Rises up from the bottom edge to edge. ---- */
.kpi-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  transition: background 0.25s ease;
}
.kpi-modal-backdrop.kpi-entering { background: transparent; }
.kpi-modal-sheet {
  background: var(--ink); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
  padding: 22px 20px; padding-bottom: calc(22px + env(safe-area-inset-bottom));
  position: relative;
  box-shadow: 0 -12px 26px rgba(0,0,0,0.35);
}
.kpi-modal-backdrop.closing { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .kpi-modal-backdrop { transition: none; }
}

/* ---- KPI modal extras (layered on top of the shared .record-modal-card look) ---- */
/* The KPI sheet uses the record-modal type classes but at the mockup's
   full-size values — scoped here so the receipt/visit detail modal keeps
   its own (denser) sizing. */
.kpi-modal-sheet .record-modal-card-purpose { font-size: 21px; }
.kpi-modal-sheet .record-modal-amount { font-size: 39px; margin-top: 15px; letter-spacing: -0.4px; }
.kpi-modal-sheet .record-modal-detail-row { font-size: 18px; padding: 14px 0; }
.kpi-modal-footnote { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.7); margin-top: 18px; }
.kpi-modal-link { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--brand-amber-300); text-decoration: underline; font-weight: 700; }
.kpi-modal-disclaimer { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 18px; line-height: 1.4; }
.kpi-progress-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.16); margin: 10px 0 6px; overflow: hidden; }
.kpi-progress-fill { height: 100%; background: var(--brand-amber-500); border-radius: 999px; }
.kpi-threshold-label { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 21px; }
.kpi-threshold-picker { display: flex; gap: 9px; margin-top: 9px; }
.kpi-threshold-btn { flex: 1; padding: 12px 0; border-radius: 14px; text-align: center; font-size: 16px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); }
.kpi-threshold-btn.active { background: var(--brand-amber-500); color: #fff; border-color: var(--brand-amber-500); }
/* Light variant — used on paper screens (Settings) instead of the dark KPI modal */
.kpi-threshold-picker.light .kpi-threshold-btn { background: var(--bg); color: var(--ink); border-color: var(--border); }
.kpi-threshold-picker.light .kpi-threshold-btn.active { background: var(--brand-amber-500); color: #fff; border-color: var(--brand-amber-500); }
.settings-str-row { padding: 4px 2px 10px; }
/* ---- Settings footer ---- */
.settings-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.settings-footer .toggle-row { margin-bottom: 16px; }
.settings-footer-tagline {
  font-size: 12.5px; font-style: italic; color: var(--muted); text-align: center;
}