:root{
  --bg:#1a1715; --surface:#262220; --surface-2:#2f2a27;
  --text:#f4f1ee; --muted:#9b938c; --accent:#f59e0b; --accent-2:#b45309;
  --up:#4ade80; --down:#f87171; --radius:16px; --field-h:48px;
  --app-w:560px; /* content column width; widens on iPad / Mac (see bottom) */
}
*{box-sizing:border-box}
/* Dark native form controls (date popup renders dark) + amber selection accents */
:root{color-scheme:dark;accent-color:var(--accent)}
html{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 -apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}

/* Money input: $ prefix */
.money{position:relative}
.money::before{content:"$";position:absolute;left:14px;top:calc(50% + 2px);transform:translateY(-50%);color:var(--muted);pointer-events:none}
.money input{padding-left:26px}
#app{max-width:var(--app-w);margin:0 auto;min-height:100vh;padding-top:env(safe-area-inset-top);padding-bottom:calc(104px + env(safe-area-inset-bottom))}

/* App header: wordmark always centered, optional back (left) + action (right) */
.apphdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 14px 6px}
.apphdr .back{background:none;border:0;color:var(--accent);padding:11px 12px;margin:-9px -6px;cursor:pointer;justify-self:start;display:flex;align-items:center}
.apphdr .logo{height:24px;cursor:pointer;justify-self:center}
.apphdr .hdr-action{justify-self:end}
.hdr-edit{background:none;border:0;color:var(--accent);padding:11px 12px;margin:-9px -8px;cursor:pointer;display:flex;align-items:center;min-width:44px;min-height:44px;justify-content:center}
.apphdr-title{text-align:center;font-weight:700;font-size:16px;color:var(--text);padding:2px 0 8px}

/* Full-width social sign-in buttons matched to .btn (Log In / Create Account) */
.btn-social{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:var(--field-h);border-radius:12px;background:#000;color:#fff;border:0;font:600 16px -apple-system,system-ui,sans-serif;cursor:pointer}
.btn-social svg{flex:0 0 auto}

/* New Vehicle tile (dashed add-card under the garage) */
.newcar{display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed #3a3431;border-radius:var(--radius);margin:12px;padding:24px;color:var(--accent);font-weight:700;cursor:pointer;background:transparent}

/* "More details" disclosure on the fill-up quick-add */
.more-toggle{background:none;border:0;color:var(--accent);font:600 14px -apple-system,system-ui,sans-serif;padding:12px 2px 2px;cursor:pointer;width:auto;display:block}

/* Vehicle action buttons: 2-up grid so all four stay above the fold */
.vact{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.vact .btn{font-size:15px}

/* Add Service grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.svc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:var(--surface-2);border:1px solid #3a3431;border-radius:12px;padding:14px 6px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;text-align:center}
.svc-ic{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.svc-ic svg{width:26px;height:26px;display:block}

/* Reminder due/soon/ok badges */
.rem-badge{font-size:11px;font-weight:800;letter-spacing:.5px;border-radius:999px;padding:3px 10px}
.rem-badge.due{background:var(--down);color:#1a1715}
.rem-badge.soon{background:var(--accent);color:#1a1715}
.rem-badge.ok{background:#3a3431;color:#b5ada5}

/* Pro lock badge (on locked buttons/tiles). The padlock is a line-art SVG
   injected in markup (ui.js lockIcon), not an emoji. */
.lock{display:inline-flex;align-items:center;gap:6px}
.lock svg{flex:0 0 auto}
.pro-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--bg);background:var(--accent);border-radius:999px;padding:2px 8px;vertical-align:middle}

/* Themed dialog (replaces native confirm/alert) */
.dlg-overlay{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px}
.dlg-overlay.hide{display:none}
.dlg{width:100%;max-width:360px;background:var(--surface);border:1px solid #3a3431;border-radius:18px;padding:20px;animation:pwup .18s ease}
.dlg-title{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--text)}
.dlg-msg{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.45}
.dlg-actions{display:flex;gap:10px}
.dlg-actions .btn{flex:1}
.btn.dlg-danger{background:var(--down);color:#1a1715}

/* Paywall bottom sheet */
.paywall-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.paywall-overlay.hide{display:none}
.paywall-sheet{width:100%;max-width:var(--app-w);background:var(--surface);border-radius:20px 20px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));animation:pwup .22s ease}
@keyframes pwup{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}
.paywall-grip{width:40px;height:4px;border-radius:2px;background:#4a443f;margin:4px auto 12px}
.paywall-list{list-style:none;padding:0;margin:10px 0}
.paywall-list li{padding:7px 0 7px 26px;position:relative;color:var(--text)}
.paywall-list li::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:800}
.paywall-price{text-align:center;color:var(--muted);margin:8px 0 12px;font-size:15px}
.paywall-price strong{color:var(--text)}

/* Bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;
  max-width:var(--app-w);margin:0 auto;background:rgba(26,23,21,.96);backdrop-filter:blur(8px);
  border-top:1px solid #322c28;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.tabbar .tab{flex:1;text-align:center;color:var(--muted);text-decoration:none;font:600 11px -apple-system,system-ui,sans-serif;border:0;background:none;cursor:pointer;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar .tab .ic{font-size:20px;line-height:1}
.tabbar .tab .ic svg{width:24px;height:24px;display:block}
.tabbar .tab .ic .avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block;border:1.5px solid currentColor}
.tabbar .tab.active{color:var(--accent)}
.tabbar .tab.add .ic{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;margin-top:-2px}
.tabbar .tab.add .ic svg{width:22px;height:22px}

/* On-brand checkbox */
input[type=checkbox]{appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:0 0 auto;width:24px;height:24px;min-width:24px;padding:0;border:2px solid #5a514b;border-radius:7px;background:var(--surface-2);position:relative;cursor:pointer;margin:0}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:50%;top:48%;width:5px;height:10px;border:solid var(--bg);border-width:0 2.5px 2.5px 0;transform:translate(-50%,-55%) rotate(45deg)}

/* Account avatar */
.avatar-lg{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.avatar-ph{display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:2px solid #3a3431}
.avatar-ph svg{width:48px;height:48px}

/* Vehicle photo + placeholder */
.vphoto{width:100%;object-fit:cover;background:linear-gradient(135deg,#2f2a27,#1f1b19)}
.vphoto-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2f2a27,#1f1b19)}
.vphoto-ph svg{width:64px;height:64px;opacity:.5}
.chart-title{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 4px 4px}
.card{background:var(--surface);border-radius:var(--radius);padding:16px;margin:12px}
.field, input, select, .btn{height:var(--field-h);border-radius:12px;font-size:16px}
input,select{width:100%;background:var(--surface-2);border:1px solid #4a443f;color:var(--text);padding:0 14px;margin-top:4px}
textarea{width:100%;background:var(--surface-2);border:1px solid #4a443f;color:var(--text);border-radius:12px;padding:12px;margin-top:4px;font:16px/1.45 -apple-system,system-ui,sans-serif}
/* Readable placeholder hints (>=4.5:1 on the input surface) */
input::placeholder,textarea::placeholder{color:#a8a19a;opacity:1}
label{font-size:13px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#1a1715;border:0;font-weight:700;width:100%;cursor:pointer}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.stat{font-size:34px;font-weight:800;letter-spacing:-0.5px}
.trend-up{color:var(--up)} .trend-down{color:var(--down)}
.muted{color:var(--muted)}
img{display:block}
a{color:var(--accent)}

/* ── Garage grid: 1 col on phone, multi-col on iPad / Mac ──────────────── */
.garage-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px}
.garage-grid>.card,.garage-grid>.newcar{margin:0}
.garage-grid>.newcar{padding:0;min-height:120px} /* dashed add-tile fills its grid cell */

/* ── iPad / Mac: sidebar + detail split view ──────────────────────────────
   Above the fleet's 768px breakpoint the app stops being a phone column
   centred in a void and becomes a proper two-pane layout: the garage list is
   permanently on the left, the current screen fills the right. Each pane
   scrolls independently, which is the behaviour that makes an iPad app feel
   native rather than blown-up. The phone layout below 768px is untouched.
   The structural switch is in js/pad.js + js/sidebar.js. */
@media (min-width:768px){
  #app.split{
    max-width:none;width:100%;display:flex;gap:0;
    height:100dvh;min-height:0;padding:0;overflow:hidden;
  }
  /* Master pane */
  #app.split > .sb{
    flex:0 0 300px;display:flex;flex-direction:column;min-height:0;
    border-right:1px solid #2b2622;background:#201c1a;
    padding:calc(14px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
  }
  /* Detail pane: the column stays readable, it does not stretch to 1600px */
  #app.split > .detail{
    flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;
    padding:0 0 40px;
  }
  #app.split > .detail > *{max-width:720px;margin-inline:auto}
  /* The sidebar carries the wordmark, so the detail header does not repeat it */
  #app.split .apphdr .logo{display:none}
  #app.split .apphdr{padding-top:calc(14px + env(safe-area-inset-top))}
  /* Sheets stay centred rather than tracking the old phone column width */
  .paywall-overlay{align-items:center}
  .paywall-sheet{max-width:520px;border-radius:20px}

  .garage-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:14px}
}
@media (min-width:1180px){
  #app.split > .sb{flex-basis:340px}
  .garage-grid{grid-template-columns:repeat(3,1fr)}
}

/* Sidebar internals */
.sb-logo{height:22px;align-self:center;margin:2px 0 14px;cursor:pointer}
.sb-sec{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);padding:0 10px 6px}
.sb-list{display:flex;flex-direction:column;gap:2px;min-height:0}
.sb-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:var(--text);border-radius:12px;padding:8px 10px;
  cursor:pointer;font:inherit}
.sb-item:hover{background:#2a2522}
.sb-item.active{background:#332c26}
.sb-item.active .sb-name{color:var(--accent)}
.sb-thumb{flex:0 0 auto;width:38px;height:38px;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2f2a27,#1f1b19);color:var(--muted)}
.sb-thumb img{width:100%;height:100%;object-fit:cover}
.sb-thumb svg{width:22px;height:22px;opacity:.6}
.sb-acct svg{width:20px;height:20px;opacity:.8}
.sb-txt{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sb-name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-plus{flex:0 0 auto;width:38px;height:38px;border-radius:9px;border:2px dashed #3a3431;
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:20px}
.sb-new .sb-name{color:var(--accent)}
.sb-foot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid #2b2622}
.sb-foot .btn{height:44px}

/* Pointer devices (Mac trackpad / mouse): gentle hover lift on tappable cards */
@media (hover:hover) and (pointer:fine){
  .card[data-id],.newcar{transition:transform .12s ease,box-shadow .12s ease}
  .card[data-id]:hover,.newcar:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
}

/* Visible keyboard/switch focus on every interactive control (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.svc-tile:focus-visible,.card[data-id]:focus-visible,
.newcar:focus-visible,.logrow:focus-visible,[role="tab"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:10px
}

/* Honour Reduce Motion: drop sheet/card animations + hover transitions */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
}

/* Loading spinner. Two forms of the same ring: inline in a busy button, and
   centred over a photo preview while it uploads or is read by OCR. */
@keyframes gspin{to{transform:rotate(360deg)}}
/* flex:0 0 auto because both hosts (.btn and .busy-veil) are flex containers
   and would otherwise shrink a spinner that has no content down to nothing.
   They also supply their own gap, so this needs no margin. */
.ldr{display:inline-block;flex:0 0 auto;width:18px;height:18px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:gspin .7s linear infinite}
.busy-host{position:relative}
.busy-veil{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,17,.5);border-radius:inherit;color:#fff}
.busy-veil .ldr{width:30px;height:30px;border-width:3px;margin:0}
/* Respect the OS setting: still moving, so it still reads as "working", just calmly. */
@media (prefers-reduced-motion:reduce){.ldr{animation-duration:2.4s}}

/* Maintenance screen: which vehicle you're in, plus the prominent Snap action. */
.svc-veh{display:flex;align-items:center;gap:12px;padding:2px 12px 12px}
.svc-veh-thumb{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2f2a27,#1f1b19)}
.svc-veh-thumb img{width:100%;height:100%;object-fit:cover}
.svc-veh-thumb svg{width:30px;height:30px;opacity:.55}
.svc-veh-name{font-weight:700;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Wide, tall primary photo action above the service tiles. */
.btn-snap{padding:15px;font-size:17px}
.btn-snap svg{width:22px;height:22px}

/* Native date inputs center their value on iOS; left-align to match every
   other field. */
input[type=date]{text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Notes textarea that grows to fit its content (see autoGrow in ui.js). */
textarea.autosize{resize:none;overflow:hidden;min-height:84px;line-height:1.45}
/* Stacked edit-screen actions so the primary and destructive buttons are the
   same width instead of inheriting different container paddings. */
.edit-actions{display:flex;flex-direction:column;gap:10px;padding:12px}

/* Vehicle detail: subtitle under the photo */
.veh-sub{color:var(--muted);font-size:13px;padding:10px 14px 12px}
/* Add row: large Snap (grows) + smaller Add Manually on the same line */
.add-row{display:flex;gap:10px;padding:14px 12px}
.add-row #snap{flex:1}
.add-row #addman{flex:0 0 auto;width:auto;padding:0 18px}
/* Unified log rows: icon, title + subline, right-hand value */
.logline{display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:12px 14px;cursor:pointer}
.logline .ll-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;color:var(--accent)}
.logline .ll-ic svg{width:20px;height:20px}
.logline .ll-main{flex:1;min-width:0}
.logline .ll-title{font-weight:600}
.logline .ll-sub{font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logline .ll-right{flex:0 0 auto;font-weight:700;text-align:right}

/* Stored receipt / odometer photos on the edit screens, tap to enlarge. */
.photo-row{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.photo-thumb{flex:0 0 auto;width:88px;height:88px;border-radius:12px;overflow:hidden;
  border:1px solid #4a443f;background:var(--surface-2);cursor:zoom-in;padding:0}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cap{font-size:11px;color:var(--muted);margin-top:3px;text-align:center}
/* Full-screen image viewer */
.img-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.img-overlay img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.img-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:1;
  width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.img-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* Snap progress: shown over whatever screen you were on while the photo is
   read, so the tap always visibly does something. Sits BELOW the dialog and
   paywall layers so the "what did you snap?" prompt appears on top of it. */
.snap-busy{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:20px}
.snap-card{width:100%;max-width:360px;text-align:center}
.snap-card img{width:100%;max-height:46vh;object-fit:contain;border-radius:12px;margin-bottom:14px}
.snap-status{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0;color:var(--text);font-weight:600}
.snap-card .btn{margin-top:14px}