/* ═══════════════════════════════════════════════════════════════════
   meckly-portal.css — the customer portal's own layer
   MECKLY_ONE_PORTAL_ONE_LOOK_V1 — 23 Sep 2026
   ═══════════════════════════════════════════════════════════════════

   Her report, on My Cars:

     "i don't like what this page looks like, the car cards are too big
      and even the statistics at the top i don't think that is the
      first thing i want to see. let's redesign all the pages of this
      customer portal to make it a 10/10 as far as UI/UX goes, for
      people that are not tech savvy and for people that want to
      simplify multi-vehicle management for families and small
      businesses."

   ── WHAT WAS WRONG ──────────────────────────────────────────────────
   One car filled a whole screen, and 60% of it was a photograph. A
   family with four cars scrolled four screens to learn nothing: the
   card said White, Petrol, Auto, hatchback — four facts the owner
   already knows — and not one word about what is HAPPENING to the car.
   That fact existed the whole time: every vehicle row carries its own
   next_due_date, and the page averaged them all into one tile at the
   top instead of putting each car's own date on its own line.

   ── THE RULE THIS LAYER ENFORCES ────────────────────────────────────
   A list answers "what needs me?". A detail view answers "tell me
   everything". A card that tries to do both does neither, and gets
   too big. So: rows carry a status and ONE action; everything else
   lives one tap deeper.

   ── AND WHO IS READING ──────────────────────────────────────────────
   Somebody who does not use apps much, on a phone, possibly in a car
   park. So: 16px body text, 44px minimum on anything tappable, a word
   beside every icon, colour never carrying meaning on its own, and no
   hidden gestures — nothing swipes, nothing long-presses.

   Built on meckly-v1.css's tokens. It defines no colours of its own
   beyond the semantic pairs already there, so a shop's brand still
   flows through everything.                                          */

/* ── THE PAGE ────────────────────────────────────────────────────── */
/* MECKLY_ONE_NAV_NOT_TWO_V1 — nowrap. Wrapping put "Add a car" alone
   on a second line where it stretched the full width of a phone, which
   is a lot of screen for the thing you do least. The title shrinks
   instead. */
.pv-head{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin:0 0 14px}
.pv-head-b{flex:1;min-width:0}
.pv-h1{font-size:23px;font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
/* One line of context, never a paragraph. */
.pv-h1-sub{font-size:13.5px;color:var(--muted-l);margin-top:4px;line-height:1.45}

/* The summary the stat tiles became. It is a sentence, not a
   dashboard, and it sits UNDER the title because it answers "how is
   the fleet" — which is never the first question. */
.pv-sum{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted-l);margin-top:5px}
/* Each fact stays whole. Without this the line broke between the
   number and its words — "… · 2" then "need you" on the next line. */
.pv-sum>span:not(.sep),.pv-sum b{white-space:nowrap}
.pv-sum b{color:var(--ink);font-weight:800}
.pv-sum .sep{opacity:.4}

/* ── THE LIST ────────────────────────────────────────────────────── */
.pv-list{display:flex;flex-direction:column;gap:10px}

.pv-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:100%;text-align:left;padding:13px 14px;background:var(--surface);
  border:1.5px solid var(--light-bd);border-radius:var(--r);
  font-family:var(--font-sans);color:inherit;text-decoration:none;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.pv-row:hover{border-color:color-mix(in srgb,var(--brand) 38%,transparent);
  box-shadow:0 3px 14px rgba(0,0,0,.06)}
.pv-row:focus-visible{outline:3px solid var(--brand-b);outline-offset:2px}
/* The one that needs something gets an edge. Never the only signal —
   the status line below says it in words too. */
.pv-row.needs{border-left:5px solid var(--red);padding-left:11px}
.pv-row.soon {border-left:5px solid var(--amber);padding-left:11px}

.pv-thumb{width:68px;height:52px;border-radius:9px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,#e8edf2,#d4dde6);position:relative;
  display:flex;align-items:center;justify-content:center;font-size:24px}
.pv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* MECKLY_A_CAR_NOT_AN_EMOJI_V1 — the drawing, when a row shows one.
   Sized to the thumb rather than the card's bigger .pv-art. */
.pv-thumb .pv-art{width:88%;height:auto;color:var(--brand)}
@media(min-width:760px){.pv-thumb{width:92px;height:68px}}

.pv-b{min-width:0}
.pv-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pv-title{font-size:16px;font-weight:800;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The plate. It is how people identify their own car, so it looks
   like a plate and it can be read at arm's length. */
.pv-plate{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:#5b4a00;background:#fff8dc;border:1.5px solid #e6d08a;border-radius:5px;
  padding:2px 7px;white-space:nowrap;flex-shrink:0}
.pv-plate.none{color:var(--muted-l);background:var(--off);border-color:var(--light-bd)}

/* ── THE ONE FACT THAT MATTERS ───────────────────────────────────── */
.pv-state{display:flex;align-items:center;gap:7px;margin-top:5px;
  font-size:13.5px;line-height:1.35;font-weight:600;color:var(--muted-l)}
.pv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted-xs)}
.pv-state.ok   {color:var(--green)}  .pv-state.ok   .pv-dot{background:var(--green)}
.pv-state.soon {color:var(--amber)}  .pv-state.soon .pv-dot{background:var(--amber)}
.pv-state.late {color:var(--red)}    .pv-state.late .pv-dot{background:var(--red)}
.pv-state.busy {color:var(--brand)}  .pv-state.busy .pv-dot{background:var(--brand)}
.pv-state.act  {color:var(--red)}    .pv-state.act  .pv-dot{background:var(--red)}
/* A second line, for the rare car that has two things going on. */
.pv-state2{margin-top:3px}

/* ── THE ACTION ──────────────────────────────────────────────────── */
/* One per row. A row with three buttons is a row nobody taps. */
.pv-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 17px;border-radius:10px;border:none;flex-shrink:0;
  background:var(--g-brand);color:var(--btn-text);
  font-family:var(--font-sans);font-size:14px;font-weight:800;cursor:pointer;
  white-space:nowrap;text-decoration:none}
.pv-go.quiet{background:var(--off);color:var(--ink);border:1.5px solid var(--light-bd)}
.pv-go.urgent{background:var(--red);color:#fff}
.pv-go:focus-visible{outline:3px solid var(--brand-b);outline-offset:2px}
/* A row that needs nothing shows a chevron instead of a button. The
   first version hid the button below 430px, which is most phones and
   therefore most customers - so the one-tap action was missing exactly
   where it was needed. Need decides, not width. */
.pv-chev{font-size:22px;color:var(--muted-xs);flex-shrink:0;width:26px;text-align:center;
  line-height:1}
/* ── SQUEEZED, NOT STACKED ───────────────────────────────────────── */
/* Her instruction: "the menu needs to fit on mobile, like it was. we
   may need to squeeze buttons."
   The first version dropped the action onto its own full-width line
   below 380px, which made every urgent row half as tall again — the
   exact complaint that started this redesign. Everything shrinks
   instead, and the car's name is allowed to wrap onto a second line
   rather than being truncated to "2020 MAZDA C…". */
/* A header button carries two labels and shows whichever fits. At
   390px "＋ Book a service" left the summary line too little room and
   "2 need you" wrapped onto a line of its own. */
.pv-go .short{display:none}
@media(max-width:560px){
  .pv-go .long{display:none}
  .pv-go .short{display:inline}
}
@media(max-width:480px){
  .pv-row{gap:10px;padding:11px 12px}
  .pv-row.needs,.pv-row.soon{padding-left:9px}
  .pv-thumb{width:54px;height:42px;font-size:20px}
  .pv-go{padding:0 13px;font-size:13.5px;min-height:42px}
  .pv-title{white-space:normal}
  .pv-chev{width:20px}
  .pv-h1{font-size:21px}
}

/* ── NOTHING HERE YET ────────────────────────────────────────────── */
.pv-empty{text-align:center;padding:40px 22px;background:var(--surface);
  border:1.5px dashed var(--light-bd);border-radius:var(--r)}
.pv-empty-ico{font-size:40px;opacity:.45;margin-bottom:10px}
.pv-empty-t{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:5px}
.pv-empty-s{font-size:14px;color:var(--muted-l);line-height:1.5;max-width:34ch;margin:0 auto 16px}

/* ── A SHEET, FOR EVERYTHING ELSE ────────────────────────────────── */
/* The detail half of the rule at the top. Tapping a row opens this;
   it holds the big photo and every action the row deliberately does
   not carry. Bottom sheet on a phone, centred card on a desktop —
   both are shapes people already know. */
.pv-scrim{position:fixed;inset:0;z-index:1200;background:rgba(7,19,36,.55);
  display:none;align-items:flex-end;justify-content:center;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pv-scrim.open{display:flex}
.pv-sheet{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--surface);border-radius:18px 18px 0 0;
  padding:0 0 calc(18px + env(safe-area-inset-bottom));
  animation:pv-up .18s ease-out}
@keyframes pv-up{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:620px){
  .pv-scrim{align-items:center}
  .pv-sheet{border-radius:16px;max-height:86vh}
  @keyframes pv-up{from{transform:scale(.985);opacity:.6}to{transform:none;opacity:1}}
}
@media(prefers-reduced-motion:reduce){.pv-sheet{animation:none}}
/* A real handle and a real close button: a scrim you can only dismiss
   by tapping outside is a trap for somebody who does not know that. */
.pv-sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--light-bd);
  margin:10px auto 0}
.pv-sheet-hd{display:flex;align-items:center;gap:12px;padding:14px 18px 12px;
  border-bottom:1px solid var(--light-bd);position:sticky;top:0;background:var(--surface);z-index:1}
.pv-sheet-t{flex:1;min-width:0;font-size:17px;font-weight:900;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-x{width:44px;height:44px;border-radius:50%;border:none;background:var(--off);
  font-size:17px;color:var(--ink);cursor:pointer;flex-shrink:0;line-height:1}
.pv-x:focus-visible{outline:3px solid var(--brand-b);outline-offset:2px}
.pv-sheet-bd{padding:16px 18px 6px}

/* The hero the list no longer carries. */
.pv-hero{aspect-ratio:16/10;width:100%;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#e8edf2,#d4dde6);display:flex;
  align-items:center;justify-content:center;font-size:56px;cursor:pointer}
.pv-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pv-hero-cam{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;
  gap:6px;height:38px;padding:0 13px;border-radius:99px;background:rgba(0,0,0,.55);
  color:#fff;font-size:12.5px;font-weight:700;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Facts, as a list you read down, not chips you decode. */
.pv-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:14px;
  background:var(--light-bd);border:1px solid var(--light-bd);border-radius:10px;overflow:hidden}
.pv-fact{background:var(--surface);padding:10px 12px;min-width:0}
.pv-fact-k{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-xs)}
.pv-fact-v{font-size:14.5px;font-weight:700;color:var(--ink);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Every action, spelled out. No icon on its own, nothing behind a
   long-press. Destructive last, and it looks it. */
.pv-acts{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pv-act{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 14px;
  border-radius:11px;border:1.5px solid var(--light-bd);background:var(--surface);
  font-family:var(--font-sans);font-size:15px;font-weight:700;color:var(--ink);
  cursor:pointer;text-align:left;text-decoration:none}
.pv-act:hover{border-color:color-mix(in srgb,var(--brand) 38%,transparent);background:var(--off)}
.pv-act:focus-visible{outline:3px solid var(--brand-b);outline-offset:2px}
.pv-act-ico{font-size:19px;width:24px;text-align:center;flex-shrink:0}
.pv-act.primary{background:var(--g-brand);color:var(--btn-text);border-color:transparent;
  font-size:16px;font-weight:800;min-height:54px}
.pv-act.primary:hover{background:var(--g-brand);filter:brightness(1.05)}
.pv-act.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.pv-act.danger:hover{background:var(--red-l);border-color:var(--red)}
.pv-act-sub{display:block;font-size:12.5px;font-weight:600;opacity:.75;margin-top:1px}
/* MECKLY_ONE_PORTAL_ONE_LOOK_V1 — display:flex out-specifies the
   browser's own [hidden]{display:none}, so "Add to Meckly Fleet" was
   offered on a car that is already ON Fleet. Caught by opening the
   sheet and looking at it. Every flex element in this file that can
   be hidden needs its own rule. */
.pv-act[hidden],.pv-find[hidden],.pv-row[hidden],.pv-state[hidden]{display:none}

/* An odd number of facts leaves a dead half-row. The last one takes
   the whole width instead. */
.pv-fact:last-child:nth-child(odd){grid-column:1 / -1}

/* ── SEARCH ──────────────────────────────────────────────────────── */
/* Only worth showing to somebody with enough cars to need it. */
.pv-find{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1.5px solid var(--light-bd);border-radius:11px;padding:0 13px;height:48px;margin:0 0 14px}
.pv-find input{flex:1;border:none;background:none;outline:none;height:100%;
  font-family:var(--font-sans);font-size:15px;color:var(--ink)}
.pv-find input::placeholder{color:var(--muted-xs)}

/* ── A SEGMENTED CONTROL ─────────────────────────────────────────── */
/* Three states of the same thing. Tabs, but they look like one object
   rather than three buttons, so it is obvious only one can be on. */
.pv-seg{display:flex;gap:4px;padding:4px;margin:0 0 14px;
  background:var(--off);border:1.5px solid var(--light-bd);border-radius:12px}
.pv-seg-b{flex:1;min-height:42px;padding:0 8px;border:none;border-radius:9px;background:none;
  font-family:var(--font-sans);font-size:14px;font-weight:700;color:var(--muted-l);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-seg-b.on{background:var(--surface);color:var(--ink);font-weight:800;
  box-shadow:0 1px 4px rgba(0,0,0,.08)}
.pv-seg-b:focus-visible{outline:3px solid var(--brand-b);outline-offset:-2px}
/* A count is not an alarm. "Quotes 2" on Records is neutral; the one
   that means something needs you asks for .hot. Painting every badge
   red made a page of ordinary records look like three emergencies. */
.pv-seg-n{background:var(--off);color:var(--muted-l);border:1px solid var(--light-bd);
  border-radius:999px;font-size:11px;font-weight:900;padding:1px 6px;min-width:18px}
.pv-seg-b.on .pv-seg-n{background:var(--brand-l);color:var(--brand);border-color:transparent}
.pv-seg-n.hot,.pv-seg-b.on .pv-seg-n.hot{background:var(--red);color:#fff;border-color:transparent}
.pv-seg-n[hidden]{display:none}
@media(max-width:480px){.pv-seg-b{font-size:13px;padding:0 4px;gap:5px}}

/* ── A ROW'S SECOND LINE ─────────────────────────────────────────── */
/* When a booking needs both "what is happening" and "when". */
.pv-when{display:flex;align-items:center;gap:6px;margin-top:4px;
  font-size:12.5px;color:var(--muted-l);font-weight:600}

/* ── PLAIN THINGS INSIDE A SHEET ─────────────────────────────────── */
.pv-note{font-size:14px;line-height:1.5;color:var(--ink-2);background:var(--off);
  border-radius:10px;padding:11px 13px;margin-top:12px}
.pv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pv-tag{font-size:12px;font-weight:700;color:var(--ink-2);background:var(--off);
  border:1px solid var(--light-bd);border-radius:999px;padding:4px 10px}
.pv-steps{margin-top:14px;border-top:1px solid var(--light-bd);padding-top:12px}
.pv-steps-h{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-xs);margin-bottom:9px}
.pv-step{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);line-height:1.45;
  padding:5px 0}
.pv-step-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);
  flex-shrink:0;margin-top:6px}
.pv-step-t{margin-left:auto;font-size:11.5px;color:var(--muted-xs);flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════
   CARDS — MECKLY_A_CAR_NOT_AN_EMOJI_V1, 24 Sep 2026
   ═══════════════════════════════════════════════════════════════════

   Her call: "instead of rows I'd much rather cards, maybe 4 on desktop
   and 2 on mobile."

   Worth saying why this is not the poster wall coming back. The card
   she asked me to kill was ONE per row at full width, 60% photograph,
   six controls, and it took a whole phone screen per car. This is two
   per row: the picture is 130px tall on a phone instead of 270, the
   status still reads at a glance, and four cars fit where one used to.
   The photo earns its place at this size; it did not at that one.     */
.pv-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.pv-cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.pv-cards{grid-template-columns:repeat(4,1fr);gap:14px}}

.pv-card{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  background:var(--surface);border:1.5px solid var(--light-bd);border-radius:var(--r);
  font-family:var(--font-sans);color:inherit;text-decoration:none;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.pv-card:hover{border-color:color-mix(in srgb,var(--brand) 38%,transparent);
  box-shadow:0 4px 18px rgba(0,0,0,.08)}
.pv-card:focus-visible{outline:3px solid var(--brand-b);outline-offset:2px}
/* The one that needs something wears it along the top, where the eye
   lands first on a grid. Never the only signal — the line below says
   it in words. */
.pv-card.needs{border-color:var(--red);box-shadow:inset 0 4px 0 var(--red)}
.pv-card.soon {border-color:var(--amber);box-shadow:inset 0 4px 0 var(--amber)}

.pv-shot{aspect-ratio:4/3;width:100%;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--brand-l),color-mix(in srgb,var(--brand) 18%,white));
  display:flex;align-items:center;justify-content:center}
.pv-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The drawing, in the shop's own colour. */
.pv-art{width:82%;height:auto;color:var(--brand);display:block}
.pv-shot-tag{position:absolute;top:7px;left:7px;font-size:9.5px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:99px;
  background:var(--purple);color:#fff}

.pv-card-b{padding:10px 11px 11px;display:flex;flex-direction:column;gap:5px;flex:1}
.pv-card-t{font-size:14px;font-weight:800;color:var(--ink);line-height:1.25}
.pv-card-plate{align-self:flex-start;font-family:var(--font-mono);font-size:10.5px;
  font-weight:700;letter-spacing:.03em;color:#5b4a00;background:#fff8dc;
  border:1.5px solid #e6d08a;border-radius:5px;padding:1px 6px}
.pv-card-plate.none{color:var(--muted-l);background:var(--off);border-color:var(--light-bd)}
.pv-card-state{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.35;
  font-weight:600;color:var(--muted-l);margin-top:auto}
.pv-card-state .pv-dot{margin-top:5px}
.pv-card-state.ok{color:var(--green)}   .pv-card-state.ok   .pv-dot{background:var(--green)}
.pv-card-state.soon{color:var(--amber)} .pv-card-state.soon .pv-dot{background:var(--amber)}
.pv-card-state.late{color:var(--red)}   .pv-card-state.late .pv-dot{background:var(--red)}
.pv-card-state.busy{color:var(--brand)} .pv-card-state.busy .pv-dot{background:var(--brand)}
.pv-card-state.act{color:var(--red)}    .pv-card-state.act  .pv-dot{background:var(--red)}
/* Full width, because half a button on a half-width card is a button
   nobody's thumb finds. */
.pv-card-go{margin-top:9px;width:100%;min-height:40px;border-radius:9px;border:none;
  background:var(--g-brand);color:var(--btn-text);font-family:var(--font-sans);
  font-size:13.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.pv-card-go.urgent{background:var(--red);color:#fff}
@media(min-width:1000px){
  .pv-card-t{font-size:15px}
  .pv-card-state{font-size:13px}
  .pv-card-go{min-height:44px;font-size:14px}
}