/* cars.css - Phan Home Cars tab. Everything namespaced .car-. Contrast rule r349: each area its own
   tint + 2px darker border; tiles white, 1.5px border, 6px left bar, alternate tiles faintly tinted. */
.car-wrap {
  --car-text: #2a1a17; --car-muted: #5f4b42; --car-tile: #ffffff; --car-line: #cbbfb8; --car-btnfill: #f1ebe7;
  --car-red: #c62828; --car-yellow: #f2c200; --car-orange: #e8710a; --car-green: #2e7d32; --car-unknown: #8a8a8a;
  --car-accent: #a8243c;
  color: var(--car-text); display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px;
}
.car-t-blue   { --car-bg: #e6f0fb; --car-bd: #3b6fb0; --car-alt: #f3f8fd; }
.car-t-gold   { --car-bg: #fbf1d6; --car-bd: #a07a12; --car-alt: #fdf8ea; }
.car-t-green  { --car-bg: #e5f3e6; --car-bd: #3d7f45; --car-alt: #f2f9f2; }
.car-t-rose   { --car-bg: #fbe6ea; --car-bd: #b0445c; --car-alt: #fdf2f4; }
.car-t-violet { --car-bg: #eee7f8; --car-bd: #6a4ba3; --car-alt: #f7f3fc; }
.car-t-teal   { --car-bg: #e0f3f1; --car-bd: #2b7f78; --car-alt: #f0f9f8; }
.car-t-orange { --car-bg: #fdeadb; --car-bd: #b85d14; --car-alt: #fef5ee; }
.car-t-slate  { --car-bg: #e8ecf0; --car-bd: #56667a; --car-alt: #f4f6f8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .car-wrap { --car-text: #f3ebe7; --car-muted: #c9bab2; --car-tile: #1f1a19; --car-line: #4a403c; --car-btnfill: #352d2a; }
  :root:not([data-theme="light"]) .car-t-blue   { --car-bg: #16273d; --car-bd: #6d9be0; --car-alt: #1b2d44; }
  :root:not([data-theme="light"]) .car-t-gold   { --car-bg: #352a10; --car-bd: #d4aa3a; --car-alt: #3a2f16; }
  :root:not([data-theme="light"]) .car-t-green  { --car-bg: #16301a; --car-bd: #6bb875; --car-alt: #1b361f; }
  :root:not([data-theme="light"]) .car-t-rose   { --car-bg: #3a1820; --car-bd: #e07890; --car-alt: #411d26; }
  :root:not([data-theme="light"]) .car-t-violet { --car-bg: #261c3a; --car-bd: #a58ae0; --car-alt: #2c2242; }
  :root:not([data-theme="light"]) .car-t-teal   { --car-bg: #12302d; --car-bd: #5dbdb3; --car-alt: #173633; }
  :root:not([data-theme="light"]) .car-t-orange { --car-bg: #3a2312; --car-bd: #e89a55; --car-alt: #412816; }
  :root:not([data-theme="light"]) .car-t-slate  { --car-bg: #222a33; --car-bd: #95a6ba; --car-alt: #28313b; }
  :root:not([data-theme="light"]) .car-wrap .car-btn-done, :root:not([data-theme="light"]) .car-wrap .car-btn-fixed { border-color: #6bb875; } /* r367: edge must show on the dark tile */
  :root:not([data-theme="light"]) .car-wrap .car-btn-primary, :root:not([data-theme="light"]) .car-wrap .car-btn-danger, :root:not([data-theme="light"]) .car-wrap .car-btn-video { border-color: #f0a0b0; } /* scoped to .car-wrap: sheets stay light */
  :root:not([data-theme="light"]) .car-wrap { background: #171312; border-radius: 16px; padding: 12px 10px 24px; } /* r349: dark panel so text outside tiles (car name, make line) is never light-on-light */
}
:root[data-theme="dark"] .car-wrap { --car-text: #f3ebe7; --car-muted: #c9bab2; --car-tile: #1f1a19; --car-line: #4a403c; --car-btnfill: #352d2a; }
:root[data-theme="dark"] .car-t-blue   { --car-bg: #16273d; --car-bd: #6d9be0; --car-alt: #1b2d44; }
:root[data-theme="dark"] .car-t-gold   { --car-bg: #352a10; --car-bd: #d4aa3a; --car-alt: #3a2f16; }
:root[data-theme="dark"] .car-t-green  { --car-bg: #16301a; --car-bd: #6bb875; --car-alt: #1b361f; }
:root[data-theme="dark"] .car-t-rose   { --car-bg: #3a1820; --car-bd: #e07890; --car-alt: #411d26; }
:root[data-theme="dark"] .car-t-violet { --car-bg: #261c3a; --car-bd: #a58ae0; --car-alt: #2c2242; }
:root[data-theme="dark"] .car-t-teal   { --car-bg: #12302d; --car-bd: #5dbdb3; --car-alt: #173633; }
:root[data-theme="dark"] .car-t-orange { --car-bg: #3a2312; --car-bd: #e89a55; --car-alt: #412816; }
:root[data-theme="dark"] .car-t-slate  { --car-bg: #222a33; --car-bd: #95a6ba; --car-alt: #28313b; }
:root[data-theme="dark"] .car-wrap .car-btn-done, :root[data-theme="dark"] .car-wrap .car-btn-fixed { border-color: #6bb875; }
:root[data-theme="dark"] .car-wrap .car-btn-primary, :root[data-theme="dark"] .car-wrap .car-btn-danger, :root[data-theme="dark"] .car-wrap .car-btn-video { border-color: #f0a0b0; }
:root[data-theme="dark"] .car-wrap { background: #171312; border-radius: 16px; padding: 12px 10px 24px; }

/* ---- status colours ---- */
.car-s-red { background: var(--car-red); animation: car-pulse 1.4s ease-in-out infinite; }
.car-s-yellow { background: var(--car-yellow); }
.car-s-orange { background: var(--car-orange); }
.car-s-green { background: var(--car-green); }
.car-s-unknown { background: var(--car-unknown); }
.car-st-red { background: var(--car-red); color: #fff; animation: car-pulse 1.4s ease-in-out infinite; }
.car-st-yellow { background: var(--car-yellow); color: #2a1a00; }
.car-st-orange { background: var(--car-orange); color: #1f0d00; }
.car-st-green { background: var(--car-green); color: #fff; }
.car-st-unknown { background: #6b6b6b; color: #fff; }
@keyframes car-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .car-s-red, .car-st-red { animation: none; } }

/* ---- buttons (44px+ targets) ---- */
.car-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 48px;
  padding: 8px 16px; border-radius: 12px; border: 2px solid var(--car-bd, #6f5a50); background: var(--car-btnfill, #f1ebe7); /* r367: fill differs from the tile and every tint (light + dark) */
  color: var(--car-text); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.car-btn:active { transform: translateY(1px); }
.car-btn:focus-visible, .car-icon:focus-visible, .car-pick:focus-visible { outline: 3px solid var(--car-accent); outline-offset: 2px; }
.car-btn-block { display: flex; width: 100%; margin-top: 8px; }
/* r367: quiet / remove block buttons are escape buttons: uniform 260px, centered (the filled primary stays full width) */
.car-btn-block.car-btn-quiet, .car-btn-block.car-btn-danger-quiet { width: min(100%, 260px); margin-left: auto; margin-right: auto; }
.car-btn-small { min-height: 44px; min-width: 44px; padding: 6px 12px; font-size: .95em; }
.car-btn-primary { background: var(--car-accent); border-color: #7d1a2c; color: #fff; }
.car-btn-quiet { background: var(--car-btnfill, #f1ebe7); }
.car-btn-done { background: var(--car-green); border-color: #1d5320; color: #fff; min-width: 76px; }
.car-btn-order { background: #ff9900; border-color: #b36b00; color: #1a1000; }
.car-btn-video { background: #c4302b; border-color: #8a1f1b; color: #fff; }
.car-btn-danger { background: var(--car-red); border-color: #8e1b1b; color: #fff; }
.car-btn-danger-quiet { border-color: var(--car-red); color: var(--car-red); background: #fdecea; }
.car-btn-open { border-color: var(--car-orange); }
.car-btn-fixed { background: var(--car-green); border-color: #1d5320; color: #fff; }
.car-armed { background: var(--car-red); color: #fff; }
.car-icon {
  min-width: 44px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--car-line); background: var(--car-tile);
  color: var(--car-text); font-size: 14px; cursor: pointer; padding: 0;
}

/* ---- picker ---- */
.car-picker { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .car-picker { grid-template-columns: 1fr 1fr; } }
.car-pick {
  position: relative; display: flex; text-align: left; width: 100%; min-height: 120px; padding: 0; overflow: hidden;
  background: var(--car-bg); border: 2px solid var(--car-bd); border-radius: 16px; color: var(--car-text); font: inherit; cursor: pointer;
}
.car-pick-on { box-shadow: 0 0 0 3px var(--car-bd); }
.car-pick > .car-bar { width: 10px; flex: 0 0 10px; }
.car-pick-main { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; flex: 1; min-width: 0; }
.car-pick-name { font-weight: 800; font-size: 1.1em; overflow-wrap: anywhere; }
.car-pick-check { color: var(--car-bd); }
.car-pick-ymm, .car-pick-odo { color: var(--car-muted); }
.car-pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.car-chip { border: 1.5px solid var(--car-bd); border-radius: 8px; padding: 1px 8px; background: var(--car-tile); font-weight: 700; }
.car-badge-verify { display: inline-block; border-radius: 8px; padding: 1px 8px; background: #fff3c4; color: #5a4300; border: 1.5px solid #b38f00; font-weight: 800; text-transform: uppercase; font-size: .8em; letter-spacing: .04em; }
.car-pick-status, .car-pill { align-self: flex-start; border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .85em; }
.car-pill { display: inline-block; vertical-align: middle; margin-left: 4px; }

/* ---- detail + sections ---- */
.car-detail { display: flex; flex-direction: column; gap: 12px; }
.car-detail-head h2 { margin: 6px 0 0; font-size: 1.3em; overflow-wrap: anywhere; } /* a long one-word name wraps inside the panel */
.car-sec { background: var(--car-bg); border: 2px solid var(--car-bd); border-radius: 16px; overflow: hidden; }
.car-sec-head {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 6px 16px;
  font-weight: 800; font-size: 1.08em; cursor: pointer; list-style: none; color: var(--car-text);
}
.car-sec-head::-webkit-details-marker { display: none; }
.car-sec-head::after { content: '\25BE'; margin-left: 8px; transition: transform .15s; }
.car-sec:not([open]) > .car-sec-head::after { transform: rotate(-90deg); }
.car-count { margin-left: auto; margin-right: 6px; min-width: 28px; text-align: center; border-radius: 999px; padding: 1px 8px; background: var(--car-tile); border: 1.5px solid var(--car-bd); font-size: .85em; }
.car-sec-body { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 8px; }

/* ---- tiles ---- */
.car-tile { display: flex; background: var(--car-tile); border: 1.5px solid var(--car-line); border-radius: 12px; overflow: hidden; }
.car-tile-alt { background: var(--car-alt); }
.car-tile > .car-bar, .car-spec > .car-bar { width: 6px; flex: 0 0 6px; background: var(--car-bd); }
.car-tile > .car-bar[data-status] { background: none; }
.car-tile > .car-bar.car-s-red { background: var(--car-red); }
.car-tile > .car-bar.car-s-yellow { background: var(--car-yellow); }
.car-tile > .car-bar.car-s-orange { background: var(--car-orange); }
.car-tile > .car-bar.car-s-green { background: var(--car-green); }
.car-tile > .car-bar.car-s-unknown { background: var(--car-unknown); }
.car-tile-main { flex: 1; min-width: 0; padding: 10px 12px; }
.car-row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.car-row-text { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.car-row-name { font-weight: 800; }
.car-row-due { font-weight: 700; margin-top: 2px; }
.car-row-sub { color: var(--car-muted); margin-top: 2px; font-size: .95em; }
.car-row-note { margin-top: 4px; white-space: pre-wrap; }
.car-row-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.car-ud { display: inline-flex; gap: 4px; }
.car-flag { margin-top: 6px; display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--car-yellow); color: #2a1a00; font-weight: 800; }
.car-fixed { text-decoration: line-through; color: var(--car-muted); }
.car-empty { color: var(--car-muted); margin: 4px 2px; }
.car-muted { color: var(--car-muted); }

/* specs + info: label/value */
.car-specs, .car-info { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.car-spec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--car-tile); border: 1.5px solid var(--car-line); border-radius: 12px; overflow: hidden; padding-right: 8px; }
.car-spec.car-tile-alt { background: var(--car-alt); }
.car-spec > .car-bar { align-self: stretch; }
.car-spec dt { font-weight: 800; flex: 1 1 120px; padding: 8px 0; }
.car-spec dd { margin: 0; flex: 2 1 140px; overflow-wrap: anywhere; padding: 8px 0; }
.car-spec-acts { display: flex; gap: 6px; padding: 4px 0; margin-left: auto; }
.car-info-row { display: flex; gap: 10px; padding: 8px 12px; background: var(--car-tile); border: 1.5px solid var(--car-line); border-left: 6px solid var(--car-bd); border-radius: 10px; }
.car-info-row:nth-child(even) { background: var(--car-alt); }
.car-info dt { font-weight: 800; min-width: 92px; }
.car-info dd { margin: 0; overflow-wrap: anywhere; }

/* mileage */
.car-miles { display: flex; flex-direction: column; gap: 6px; }

/* rotation diagram */
.car-rot-figs { display: flex; flex-wrap: wrap; gap: 10px; }
.car-rot-fig { margin: 0; flex: 1 1 160px; background: var(--car-tile); border: 1.5px solid var(--car-line); border-left: 6px solid var(--car-bd); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.car-rot-fig figcaption { font-size: .95em; }
.car-rot-svg { max-width: 100%; height: auto; }
.car-body-shape { fill: none; stroke: var(--car-muted); stroke-width: 2; stroke-dasharray: 4 3; }
.car-tyre { fill: #2b2b2b; stroke: #000; stroke-width: 1; }
.car-tyre-t { fill: #fff; font: 700 11px sans-serif; }
.car-front-t { fill: var(--car-muted); font: 700 9px sans-serif; letter-spacing: .08em; }
.car-arrow { stroke: var(--car-accent); stroke-width: 3; }
.car-arrow-head { fill: var(--car-accent); }
.car-rot-ss { margin-top: 8px; }
.car-rot-ss > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.car-rot-ss > summary::-webkit-details-marker { display: none; }
.car-rot-ss > summary::before { content: "\25B8"; display: inline-block; width: 1.2em; transition: transform .15s; }
.car-rot-ss[open] > summary::before { transform: rotate(90deg); }
.car-rot-ss > summary { list-style: none; color: var(--car-link, inherit); text-decoration: underline; text-underline-offset: 3px; }

/* how-to */
.car-howto > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.car-howto-body { white-space: pre-wrap; margin: 6px 0; line-height: 1.45; }
.car-howto-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* photos */
.car-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.car-photo img, .car-photo-e img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--car-line); display: block; background: #eee; }
.car-photo-e { position: relative; display: inline-block; }
.car-photo-e .car-icon { position: absolute; top: -6px; right: -6px; min-width: 32px; min-height: 32px; border-radius: 999px; }
.car-upload { cursor: pointer; }

/* forms (inside ctx.sheet) */
.car-form { display: flex; flex-direction: column; gap: 12px; color: var(--car-text, inherit); }
.car-f { display: flex; flex-direction: column; gap: 4px; }
.car-f-lab { font-weight: 700; }
.car-f-hint { color: #6f5a50; font-size: .9em; }
.car-f input:not([type="checkbox"]):not([type="file"]), .car-f select, .car-f textarea, .car-miles input {
  font: inherit; font-size: 17px; min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 2px solid #b9aaa2;
  background: #fff; color: #2a1a17; box-sizing: border-box; width: 100%;
}
.car-f textarea { min-height: 72px; resize: vertical; }
.car-f-check { flex-direction: row; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; }
.car-f-check input { width: 26px; height: 26px; }
.car-err { color: #c62828; font-weight: 700; margin: 0; }
.car-acts { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; position: sticky; bottom: 0; padding-top: 6px; }
.car-acts .car-btn-primary, .car-acts .car-btn-danger { flex: 1; }
/* sheets render outside .car-wrap: give the form its own tokens */
.car-form { --car-text: #2a1a17; --car-muted: #5f4b42; --car-tile: #ffffff; --car-line: #cbbfb8; --car-red: #c62828; --car-green: #2e7d32; --car-accent: #a8243c; --car-bd: #6f5a50; }

/* r367 (Kevin approval 5, 10/27/2026): a fold-open heading is tapped like a button, so it gets the
   same 2px edge and button fill as .car-btn (light + dark through the theme variables). */
.car-fold { border: 2px solid var(--car-bd, #6f5a50); background: var(--car-btnfill, #f1ebe7); border-radius: 12px; padding: 6px 12px; text-decoration: none; }
.car-sec-head.car-fold { margin: 6px; padding: 6px 14px; }
.car-rot-ss > summary.car-fold { text-decoration: none; }