/* Keystra Digital Portal: the agencies' pages. Tokens, shell and components come from /ui/keystra.css (packages/ui). */
:root {
  /* A little larger than the Factory Admin: the Portal is read by people who are not at a desk all day. */
  --text-base: 15px;
  --content-max: 1120px;
}

/* ── Shell: the website in the sidebar ── */
.site-card { margin: var(--s-4) 0 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: grid; gap: 6px; justify-items: start; }
.site-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.site-switch { font-size: var(--text-sm); }
.site-list { display: grid; gap: var(--s-2); max-width: 720px; }
.site-row { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: var(--s-4) var(--s-5); color: var(--text); text-decoration: none; transition: border-color var(--dur) var(--ease); }
.site-row:hover { border-color: var(--gray-300); color: var(--text); }
.site-row-name { flex: 1; font-weight: 600; }
.site-row .icon { color: var(--text-faint); }
@media (max-width: 959px) { .crumbs > a, .crumbs > .icon { display: none; } }

/* ── Overview ── */
.golive { margin: 0 0 var(--s-5); }
.golive:last-child { margin-bottom: 0; }
.golive-head { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-3); }
.golive-head > .icon { margin-top: 2px; color: var(--text-faint); }
.golive.ready .golive-head > .icon { color: var(--green-600); }
.golive.blocked .golive-head > .icon { color: var(--red-600); }
.golive-head h3 { margin: 0 0 2px; font-size: var(--text-md); }
.golive-head p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.golive-head .badge { margin-inline-start: auto; }
.build-kind { font-weight: 550; margin-inline-end: var(--s-2); }

/* ── Cars ── */
/* One list: photo, name and facts, price and availability, then the switch and the edit button. */
.cars { list-style: none; margin: 0; padding: 0; }
.car { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-areas: "img main price actions"; gap: var(--s-2) var(--s-5); align-items: center; padding: var(--s-3) var(--s-5); }
.car + .car { border-top: 1px solid var(--border); }
.car img, .car .noimg { grid-area: img; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-sunken); }
.car .noimg { display: grid; place-items: center; color: var(--text-secondary); font-size: var(--text-xs); text-align: center; }
.car-main { grid-area: main; min-width: 0; }
.car-name { font-weight: 600; }
.car-facts { color: var(--text-muted); font-size: var(--text-sm); }
.car-tags { margin-top: var(--s-1); display: flex; flex-wrap: wrap; gap: var(--s-1); }
.car-tags .tag { margin: 0; }
.car-price { grid-area: price; display: grid; justify-items: end; gap: var(--s-1); text-align: end; }
.car-price .price { font-weight: 600; white-space: nowrap; }
.car-price .badge { margin: 0; }
.car-actions { grid-area: actions; display: flex; align-items: center; gap: var(--s-4); }
.car-actions .switch { font-size: var(--text-sm); min-height: 36px; }
.car-btns { display: inline-flex; align-items: center; gap: var(--s-2); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.2); margin-inline-end: var(--s-1); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); background: var(--surface-sunken); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); font-size: var(--text-sm); }
.facts dt { color: var(--text-secondary); font-size: var(--text-xs); }
.facts dd { margin: 0; font-weight: 600; }
.facts + .hint { margin: calc(-1 * var(--s-2)) 0 var(--s-4); }
.preview { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-sunken); display: block; }
.results { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 6px; }
.results button { width: 100%; text-align: start; font: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); cursor: pointer; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); color: var(--text); }
.results button:hover { border-color: var(--accent); }
.results img, .results .noimg { width: 72px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-xs); background: var(--surface-sunken); }
.results .result-name { min-width: 0; }
/* The agency's photos to choose from: a tile per photo, chosen one ringed and ticked; the last tile adds one. */
.photo-pick { border: 0; padding: 0; margin: 0 0 var(--s-3); min-width: 0; }
.photo-pick legend { padding: 0; margin-bottom: 6px; font-weight: 550; font-size: var(--text-sm); }
.photo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.photo-tile { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 3 / 2; margin: 0; padding: var(--s-1); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-sunken); overflow: hidden; cursor: pointer; font-size: var(--text-xs); font-weight: 550; color: var(--text-secondary); text-align: center; }
.photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-tile:has(:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.photo-tile:has(:checked)::after { content: "✓"; position: absolute; top: 4px; inset-inline-end: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.photo-tile:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.photo-tile.none, .photo-tile.add { background: var(--surface); }
.photo-tile.add { border-style: dashed; color: var(--accent-text); }
.photo-tile.add .icon { color: var(--accent); }
.dlg-danger { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }

/* ── Business details: opening hours as a small table per line (languages down, days and hours across) ── */
.hours-line + .hours-line { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.hours-line .ml-head { margin-bottom: var(--s-2); }
.hours-line .ml-head .btn { margin-inline-start: auto; }
.hours-grid { display: grid; grid-template-columns: 34px minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-2); align-items: center; }
.hours-grid > .lang-tag { margin: 0; justify-self: start; }
.hours-col { font-size: var(--text-xs); font-weight: 550; color: var(--text-muted); }
.hours-legend { display: none; }
.card-title { margin-bottom: var(--s-3); }
.card-title h2 { margin: 0; }
.add-line { margin: var(--s-4) 0 0; }
.svc-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.svc-add select { flex: 1 1 14rem; min-width: 0; max-width: 24rem; }
.svc-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#svc-list > [data-service]:first-child [data-move-up] { display: none; }
/* Pickup points and delivery areas: a block per line, its languages down. */
.loc-line { display: grid; gap: var(--s-2); }
.loc-line + .loc-line { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.loc-line .ml-head .btn { margin-inline-start: auto; }
.loc-line .field { margin: 0; max-width: 20rem; }
#locations .sub-title:not(:first-of-type) { margin-top: var(--s-5); }
.lang-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.side .card { padding: var(--s-4) var(--s-5); }
.side #languages-form > .side-save { margin-top: var(--s-2); }
/* ── Conditions and questions: a text per row, opening to its languages ── */
.to-complete { margin: 0 0 var(--s-3); }
.ml-pair > .ml-label { margin: var(--s-2) 0 var(--s-1); }
.ml-pair > .ml + .ml-label { margin-top: var(--s-4); }
.ml-item.fixed { padding: var(--s-3) 0; }
.ml-item.fixed p { margin: var(--s-1) 0 0; }
.fixed-q { font-weight: 550; }
/* ── Site photos: a row per place (picture, name, where it appears, its state, the buttons) ── */
.photo-group > h2 { margin-bottom: var(--s-2); }
.photo-slot { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: start; padding: var(--s-4) 0; }
.photo-slot + .photo-slot { border-top: 1px solid var(--border); }
.photo-slot:last-child { padding-bottom: 0; }
.photo-info h3 { margin: 0; font-size: var(--text-md); }
.photo-info .ml-head { margin-bottom: var(--s-1); }
.photo-info .where { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.photo-info .hint { margin-bottom: var(--s-3); }
.photo-frame { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.photo-frame.dark { background: var(--gray-800); }
.photo-frame.dark .hint { color: var(--gray-150); }
.photo-frame img { width: 100%; height: 100%; object-fit: contain; }
fieldset.review { position: relative; }
fieldset.review legend { font-weight: 600; padding: 0 var(--s-1); }
.review-remove { position: absolute; top: var(--s-2); inset-inline-end: var(--s-3); }
.callout.row { align-items: center; }
.forgot { margin: var(--s-3) 0 0; text-align: center; font-size: var(--text-sm); }

@media (max-width: 959px) {
  /* Tablet: the switch and the button go under the price. */
  .car { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "img main price" "img main actions"; }
}
@media (max-width: 639px) {
  /* Phone: name and facts beside the photo, then price and availability, then the switch and the button. */
  .car { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "img main" "img price" "actions actions"; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); }
  .car img, .car .noimg { width: 72px; align-self: start; }
  .car-price { justify-items: start; text-align: start; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
  .car-actions { justify-content: space-between; margin-top: var(--s-2); }
  .car-actions .switch { min-height: 44px; }
  .car-actions .btn { min-height: 44px; }
  .car-actions .btn.icon-only { min-width: 44px; }
  .results button { grid-template-columns: 56px minmax(0, 1fr); }
  .results button > .muted:last-child { grid-column: 2; }
  .results img, .results .noimg { width: 56px; }
  .photo-slot { grid-template-columns: minmax(0, 1fr); }
  /* Opening hours: the hours under the days, for each language (two fields side by side would cut the text). */
  .hours-grid { grid-template-columns: 34px minmax(0, 1fr); row-gap: var(--s-1); }
  .hours-grid > span:not(.lang-tag) { display: none; }
  .hours-grid > input[data-name^="time"] { grid-column: 2; margin-bottom: var(--s-2); }
  .hours-legend { display: block; margin: 0 0 var(--s-2); }
}
.site-search { max-width: 720px; }
/* ── The site's colours ── */
.colour-mode { display: grid; gap: var(--s-2); }
.colour-field .label { display: block; font-weight: 550; font-size: var(--text-sm); margin-bottom: 6px; }
.colour-field .row { gap: var(--s-2); flex-wrap: nowrap; }
.colour-field input[type="color"] { flex: none; }
.colour-preview { margin: var(--s-2) 0 var(--s-4); }
.colour-preview .swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-1); }
.colour-preview .swatches span { display: grid; gap: 4px; font-size: var(--text-xs); color: var(--text-secondary); text-align: center; }
.colour-preview i { display: block; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); }
.side .side-save { display: grid; gap: var(--s-2); justify-items: center; }
.side .side-save > .btn { width: 100%; }
.colour-field .hex { width: 11ch; font-family: var(--font-mono); }
.colour-field .hex:placeholder-shown { font-family: inherit; }

/* A standard condition or question taken off the site: struck through, its texts folded away until it is put back. */
.ml-item [data-removed-badge], .ml-item .removed-note { display: none; }
.ml-item[data-removed] [data-removed-badge] { display: inline-flex; }
.ml-item[data-removed] .removed-note { display: block; }
.ml-item[data-removed] [data-ml-count], .ml-item[data-removed] .item-body { display: none; }
.ml-item[data-removed] summary > span:first-of-type { text-decoration: line-through; color: var(--text-muted); }

/* The save line says where a save is: saving, saved at 15:04, not saved (the reasons are in the form's message box). */
.save-state[data-tone="busy"] { color: var(--text-muted); }
.save-state[data-tone="ok"] { color: var(--green-700); }
.save-state[data-tone="bad"] { color: var(--red-700); font-weight: 550; }
.feed li.bad { color: var(--red-700); }
.feed li.bad .icon { vertical-align: -2px; margin-inline-end: 6px; }

/* ── Overview: the site's state, the steps to launch, quick edits ── */
.status-card .status-main { display: flex; gap: var(--s-3); align-items: flex-start; }
.status-dot { flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--gray-400, #98a2b3); box-shadow: 0 0 0 4px var(--surface-sunken); }
.status-card.live .status-dot { background: var(--green-600); box-shadow: 0 0 0 4px var(--green-50); }
.status-card.demo .status-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.status-card.pending .status-dot { background: var(--amber-600); box-shadow: 0 0 0 4px var(--amber-50); }
.status-card h2 { margin: 0 0 var(--s-1); font-size: var(--text-xl); }
.status-card .status-main p { margin: 2px 0 0; color: var(--text-secondary); }
.status-card .status-main p strong { color: var(--amber-700); font-weight: 600; }
.status-card > .actions { margin-top: var(--s-4); }
.status-card .fail-note { margin: var(--s-4) 0 0; }
.status-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.status-facts div { min-width: 0; }
.status-facts dt { font-size: var(--text-xs); color: var(--text-muted); }
.status-facts dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.status-facts dd small { color: var(--text-muted); font-weight: 500; }
.fail-note p { margin: 0; }
.fail-note p + p { margin-top: 2px; }
.ready-group { margin: var(--s-4) 0 var(--s-2); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.ready-group.bad { color: var(--red-700); }
.ready-group.warn { color: var(--amber-700); }
.ready-done { margin-top: var(--s-4); font-size: var(--text-sm); color: var(--text-secondary); }
.ready-done summary { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 600; color: var(--green-700); }
.ready-done p { margin: var(--s-2) 0 0; }
.launch-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.launch-step { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.launch-step:last-child { border-bottom: 0; }
.launch-step > .icon { flex: none; color: var(--text-faint); }
.launch-step.ok > .icon { color: var(--green-600); }
.launch-step.block > .icon { color: var(--red-600); }
.launch-step a { flex: 1; min-width: 0; font-weight: 550; color: var(--text); text-decoration: none; }
.launch-step a:hover { text-decoration: underline; }
.launch-step.ok a { color: var(--text-secondary); font-weight: 500; }
.steps-done { margin-top: var(--s-3); font-size: var(--text-sm); }
.steps-done summary { cursor: pointer; color: var(--text-secondary); }
.quick { list-style: none; margin: 0; padding: 0; }
.quick a { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 550; }
.quick li:last-child a { border-bottom: 0; }
.quick a > span { flex: 1; }
.quick a > .icon:first-child { color: var(--accent); }
.quick a > .icon:last-child { color: var(--text-faint); }
.quick a:hover span { text-decoration: underline; }

/* ── Preview and publication: saved, preview, online ── */
.pub-steps { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.pub-steps li { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pub-steps .n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: var(--text-sm); font-weight: 650; background: var(--surface-sunken); color: var(--text-secondary); }
.pub-steps li.ok .n { background: var(--green-50); color: var(--green-700); }
.pub-steps li.stale .n, .pub-steps li.working .n { background: var(--amber-50); color: var(--amber-700); }
.pub-steps li.stale { border-color: var(--amber-200); }
.pub-steps p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.pub-steps p strong { color: var(--amber-700); }
.pub-steps .btn { margin-top: var(--s-2); }
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-5); }
.pub-why { flex: 1 1 260px; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.more-versions { margin: var(--s-5) 0 0; }
@media (max-width: 900px) { .pub-steps { grid-template-columns: 1fr; } }

/* ── History: saves grouped by day, the current one marked ── */
.hist-day { margin: var(--s-5) 0 var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.hist-day:first-of-type { margin-top: var(--s-2); }
.hist-day::first-letter { text-transform: uppercase; }
.hist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.hist-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 10px var(--s-4); border-bottom: 1px solid var(--border); }
.hist-row:last-child { border-bottom: 0; }
.hist-row.current { background: var(--green-50); }
.hist-row time { color: var(--text-muted); font-size: var(--text-sm); }
.hist-what { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); align-items: baseline; }

/* ── Appearance: a miniature page in the chosen colours, where each photo goes, drop a photo on its place ── */
.mini-site { margin: var(--s-2) 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.mini-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: rgba(255, 255, 255, 0.7); }
.mini-logo { width: 34px; height: 8px; border-radius: 2px; background: currentColor; opacity: 0.55; }
.mini-btn { display: block; width: 38px; height: 12px; border-radius: 3px; }
.mini-hero { display: grid; gap: 6px; padding: 14px 10px; }
.mini-line { display: block; width: 70%; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); }
.mini-line.short { width: 45%; opacity: 0.6; }
.mini-hero .mini-btn { margin-top: 4px; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.mini-cards span { height: 22px; border-radius: 3px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.06); }
.where-line { display: flex; gap: var(--s-3); align-items: flex-start; }
.where-line > div { min-width: 0; }
.where-line p { margin-top: 0; }
.where-map { flex: none; display: grid; gap: 2px; width: 34px; padding: 3px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.where-map i { display: block; height: 4px; border-radius: 1px; background: var(--surface-sunken); position: relative; }
.where-map .wm-hero { height: 10px; }
.where-map .wm-header b, .where-map .wm-footer b { position: absolute; inset-inline-start: 2px; top: 1px; width: 8px; height: 2px; background: var(--gray-400); }
.where-map.at-hero .wm-hero, .where-map.at-agency .wm-agency, .where-map.at-delivery .wm-delivery, .where-map.at-cta .wm-cta,
.where-map.at-logo .wm-header b, .where-map.at-logo-dark .wm-footer b { background: var(--accent); }
.where-map.at-logo-dark .wm-footer { background: var(--gray-700, #3b4651); }
.photo-frame[data-drop] { transition: outline-color var(--dur) var(--ease); outline: 2px dashed transparent; outline-offset: -6px; }
.photo-frame.drop-on { outline-color: var(--accent); background: var(--accent-soft); }
.photo-slot[aria-busy="true"] .photo-frame { opacity: 0.55; }
.slot-state { font-size: var(--text-sm); color: var(--text-muted); }
.slot-msg:empty { display: none; }
.slot-msg { margin-top: var(--s-2); }

/* ── Cars: search and filters, then column names (what the site shows vs. the availability the agency states) ── */
.cars-head { padding: var(--s-4) var(--s-5) 0; margin-bottom: var(--s-3); }
.cars-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cars-tools .field { margin: 0; }
.cars-tools input[type="search"] { width: 260px; max-width: 100%; }
.cars-cols { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 180px; gap: var(--s-5); padding: var(--s-2) var(--s-5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.cars-cols span:first-child { grid-column: 1 / 3; }
.cars-cols span:last-child { text-align: end; }
.cars-none { padding: var(--s-5); margin: 0; text-align: center; }
@media (max-width: 959px) { .cars-cols { display: none; } .cars-tools, .cars-tools .field, .cars-tools input[type="search"] { width: 100%; } }
.field-error { margin: var(--s-1) 0 0; color: var(--red-700); font-size: var(--text-sm); font-weight: 500; }
.card > [data-ml-scope] + .sub-title, .card > .sub-title { margin-top: var(--s-5); }

/* ── Page content: a sketch of the section's texts as visitors read them ── */
.pv-box { margin: var(--s-3) 0 var(--s-4); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.pv-box figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.pv-box .pv-lang { width: auto; min-height: 30px; padding-block: 2px; font-size: var(--text-xs); }
.pv { font-size: var(--text-sm); }
.pv .std { color: var(--text-muted); }
.pv p { margin: 2px 0 0; }
.pv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.pv-card { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.pv-steps .pv-title, .pv-hero .pv-title { display: block; margin-bottom: var(--s-2); font-size: var(--text-md); }
.pv-hero { padding: var(--s-3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.pv-hero .pv-title { font-size: var(--text-lg); }
.pv-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; counter-reset: pv; }
.pv-steps li { counter-increment: pv; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.pv-steps li > strong::before { content: counter(pv) ". "; color: var(--accent); }
.pv-done { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-top: var(--s-2) !important; }
.pv-done .icon { color: var(--green-600); align-self: center; }
@media (max-width: 959px) { .pv-cards, .pv-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .pv-cards, .pv-steps ol { grid-template-columns: 1fr; } }
#conditions-form > .ml-head h2, #faq-form > .ml-head h2 { margin: 0; }
#conditions-form > .ml-head, #faq-form > .ml-head { margin-bottom: 2px; }

/* ── Reviews: one line each (words, who, where, when), opened to edit; a new one is open ── */
#review-list { display: grid; gap: var(--s-3); }
#review-list > .card { margin: 0; }
.review { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; }
.review > legend { padding: 0; margin-bottom: var(--s-3); font-weight: 600; }
.review-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); cursor: pointer; list-style: none; }
.review-item > summary::-webkit-details-marker { display: none; }
.rv-quote { grid-column: 1; font-weight: 500; }
.rv-meta { grid-column: 1; color: var(--text-muted); font-size: var(--text-sm); }
.rv-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 550; color: var(--accent-text); }
.review-item[open] > summary { margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.review-item[open] .rv-edit { visibility: hidden; }
.feed .count { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The library list: a small heading for each make, A to Z. */
.results .make-head { margin-top: var(--s-3); font-size: var(--text-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.results .make-head:first-child { margin-top: 0; }
#lib-count { margin: var(--s-1) 0 0; }

/* ── A version being prepared: the real step, a bar (a percentage only where the runner counts) ── */
.progress { display: grid; gap: 6px; margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--accent-border); background: var(--accent-soft); border-radius: var(--r-md); }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--text-sm); }
.progress-head .num { color: var(--accent-text); font-weight: 600; }
.progress .hint { margin: 0; }
.progress-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 400ms var(--ease); }
.progress-bar.indeterminate > span { position: absolute; inset-block: 0; width: 35%; animation: progress-slide 1.6s ease-in-out infinite; }
@keyframes progress-slide { from { inset-inline-start: -35%; } to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .progress-bar.indeterminate > span { animation: none; inset-inline-start: 0; width: 100%; opacity: 0.45; } .progress-bar > span { transition: none; } }
.progress-bar .w-0 { width: 0%; } .progress-bar .w-5 { width: 5%; } .progress-bar .w-10 { width: 10%; } .progress-bar .w-15 { width: 15%; } .progress-bar .w-20 { width: 20%; } .progress-bar .w-25 { width: 25%; } .progress-bar .w-30 { width: 30%; } .progress-bar .w-35 { width: 35%; } .progress-bar .w-40 { width: 40%; } .progress-bar .w-45 { width: 45%; } .progress-bar .w-50 { width: 50%; } .progress-bar .w-55 { width: 55%; } .progress-bar .w-60 { width: 60%; } .progress-bar .w-65 { width: 65%; } .progress-bar .w-70 { width: 70%; } .progress-bar .w-75 { width: 75%; } .progress-bar .w-80 { width: 80%; } .progress-bar .w-85 { width: 85%; } .progress-bar .w-90 { width: 90%; } .progress-bar .w-95 { width: 95%; } .progress-bar .w-100 { width: 100%; }
.pub-steps .progress { margin-top: var(--s-2); }

/* ── The site's design: one card per design ── */
.design-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.design-actions .hint { margin: 0; flex: 1 1 260px; }
.designs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.design-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); }
.design-card.current { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
.design-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.design-head h2 { margin: 0; font-size: var(--text-lg); }
.design-text { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.design-card .hint { margin: 0; }
.design-card > .btn { align-self: flex-start; }
.design-card > .btn:last-child { margin-top: auto; }
.design-card .callout { margin: 0; }

/* ── The header's eye: the site, in a new tab ── */
.top .view-site .icon { color: var(--text-secondary); }

/* ── Reservations by email ── */
.email-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); }
.email-form { display: grid; gap: var(--s-3); max-width: 560px; margin-top: var(--s-4); }
.email-form .btn { justify-self: start; }
.email-switch { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.email-switch .hint { margin-top: var(--s-1); }
.email-remove { margin: var(--s-5) 0 0; }
.callout > div > p { margin: 0 0 var(--s-2); }
.callout .row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.email-box + .card, #email-box + .card { margin-top: var(--s-4); }
/* ── Requests ("Demandes"): the list, one request, its status; the count of new ones in the menu ── */
.nav-count { margin-inline-start: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--text-xs); font-weight: 650; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.req-list { list-style: none; margin: 0; padding: 0; }
.req-list li + li { border-top: 1px solid var(--border); }
.req-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto 16px; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-5); color: inherit; text-decoration: none; }
.req-row:hover { background: var(--surface-hover); }
.req-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.req-main { display: grid; min-width: 0; }
.req-car, .req-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-car { font-weight: 550; }
.req-who, .req-dates { color: var(--text-secondary); font-size: var(--text-sm); }
.req-row.is-new .req-car::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.req-side { display: grid; justify-items: end; gap: 4px; }
.req-go { color: var(--text-faint); }
.req-more { margin: 0; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border); }
.back-link { margin: 0 0 var(--s-3); }
.back-link a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.req-facts { margin-top: var(--s-4); }
.req-message { margin: 0 0 var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.stage-choices { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.notify-state { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; font-size: var(--text-sm); }
@media (max-width: 639px) {
  .req-row { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--s-4); }
  .req-dates { grid-column: 1; grid-row: 2; }
  .req-side { grid-row: 1 / span 2; grid-column: 2; }
  .req-go { display: none; }
}
.req-facts { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.req-facts dd { overflow-wrap: anywhere; }
.card-head .seg { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.seg [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.seg .count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* ── Help: the header's menu, the help center and its articles ── */
.help-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: var(--s-4); z-index: 40; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.14)); color: var(--text); font-size: var(--text-base); }
/* A menu takes the focus of a click on its words (it stays open); the keyboard never stops on it. */
.help-menu:focus { outline: none; }
.help-menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.help-menu-head h2 { margin: 0; font-size: var(--text-md); }
.help-menu .field { margin: 0 0 var(--s-2); }
.help-group { margin: var(--s-3) 0 var(--s-1); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.help-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.help-links a { display: flex; align-items: flex-start; gap: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: var(--text-sm); line-height: 1.4; }
.help-links a:hover { background: var(--surface-hover); }
.help-links a .icon { flex: none; margin-top: 2px; color: var(--text-faint); }
.help-all { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--border); }
/* Keystra's support (Phase 5): in the help menu and under the sign-in form. */
.support { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.support .hint { margin: 0 0 var(--s-2); }
.support-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.signin .support { border-top: 0; text-align: center; }
.signin .support-links { justify-content: center; }
.help-search { padding: var(--s-4) var(--s-5); }
.help-search .field { margin: 0; }
.help-search input { font-size: var(--text-md); min-height: 44px; }
.help-search .hint:empty { display: none; }
.help-found { margin-top: var(--s-2); }
.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.help-cat h2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-md); }
.help-cat h2 .icon { color: var(--accent); }
.help-article { max-width: 760px; }
.help-article .eyebrow { margin: 0 0 var(--s-1); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.help-article .card { margin-top: var(--s-4); }
.help-steps { margin: var(--s-2) 0 0; padding-inline-start: 1.4em; display: grid; gap: var(--s-2); line-height: 1.55; }
.help-steps li::marker { color: var(--accent); font-weight: 650; }
.help-notes { margin: var(--s-1) 0 var(--s-3); padding-inline-start: 1.2em; display: grid; gap: var(--s-1); color: var(--text-secondary); }
.need-help { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-size: var(--text-sm); }
.empty .need-help { margin-top: var(--s-3); }
.help-line { margin: var(--s-4) 0 0; }
@media (max-width: 639px) { .help-menu { inset-inline: var(--s-2); width: auto; } }
@media (max-width: 959px) { .top .help-btn, .top .alerts-btn, .top .account-btn { min-width: 44px; min-height: 44px; } }

/* Between 960 and 1,199 px the sidebar takes its room: the header keeps the page's name, the search and its buttons;
   the account's email goes (it is in the menu's foot on a phone) and sign-out keeps its icon, its name read aloud. */
@media (min-width: 960px) and (max-width: 1199px) {
  .top .who-email { display: none; }
  .top .who [data-action=sign-out] .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* The account's email opens "Votre compte" (its password and its sessions; Phase 5). */
a.who-email { color: inherit; text-decoration: none; border-radius: var(--r-sm); }
a.who-email:hover { color: var(--text); text-decoration: underline; }
.top .account-btn { display: none; }
@media (min-width: 640px) and (max-width: 1199px) { .top .account-btn { display: inline-flex; } }
.account-card { margin-bottom: var(--s-4); }
.account-card h2 { margin-top: 0; font-size: var(--text-md); }
/* ── Alerts: the header's bell (its number: what needs the agency now) and its menu (Phase 3, step 9) ── */
.top .alerts-btn { position: relative; }
.alerts-count { position: absolute; top: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red-600); color: #fff; font-size: var(--text-xs); font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alert-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: 'icon label n' '. hint n'; align-items: center; column-gap: var(--s-2); padding: 7px var(--s-2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: var(--text-sm); line-height: 1.4; }
.alert-row:hover { background: var(--surface-hover); }
.alert-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.alert-row > svg { grid-area: icon; color: var(--text-faint); }
.alert-label { grid-area: label; font-weight: 550; }
.alert-hint { grid-area: hint; font-size: var(--text-xs); color: var(--text-muted); }
.alert-n { grid-area: n; min-width: 26px; padding: 0 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--text); font-size: var(--text-xs); font-weight: 650; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.alert-row.bad > svg, .alert-row.bad .alert-hint { color: var(--red-700); }
.alert-row.bad .alert-n { background: var(--red-50); color: var(--red-700); box-shadow: inset 0 0 0 1px var(--red-200); }
.alert-row.warn > svg { color: var(--amber-700); }
.alert-row.warn .alert-n { background: var(--amber-50); color: var(--amber-700); box-shadow: inset 0 0 0 1px var(--amber-200); }
.alert-row.info > svg { color: var(--accent); }
.alert-row.info .alert-n { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
.alerts-none { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; color: var(--text-secondary); font-size: var(--text-sm); }
.alerts-none svg { color: var(--ok); flex: none; }
.alerts-foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); display: grid; gap: var(--s-2); }
.alerts-notify { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.alerts-notify .notify-state { margin: 0; flex: 1 1 180px; align-items: flex-start; }
.alerts-notify .notify-state > span { display: grid; }
.alerts-notify .notify-state svg { margin-top: 2px; flex: none; }
.alerts-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; }
.alerts-links a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
#alerts-menu-title:focus { outline: none; }
#alerts-menu-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 959px) { .alert-row { min-height: 44px; } .alerts-links a { min-height: 44px; } }

/* ── Phones and small tablets (the menu is a drawer below 960px): fingers, not a mouse. Desktop is unchanged. ── */
.drawer-foot { display: none; }
@media (max-width: 959px) {
  /* Every control at least 44 px high (and icon buttons 44 px wide); fields at 16 px, so phones do not zoom in. */
  .btn, .btn.small { min-height: 44px; }
  .btn.icon-only, .btn.small.icon-only { width: 44px; min-width: 44px; }
  .top .menu-btn { width: 44px; min-height: 44px; }
  input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { min-height: 44px; font-size: 16px; }
  .palette-input { font-size: 16px; }
  label.switch { min-height: 44px; align-items: center; }
  .lang-tag { font-size: 12px; }
  .nav a { min-height: 44px; }
  .back-link a, .need-help { min-height: 44px; }
  .help-links a { min-height: 44px; align-items: center; }
  .help-links a .icon { margin-top: 0; }
  .steps-card a, .golive a.btn.quiet { min-height: 44px; display: inline-flex; align-items: center; }
  .dlg-head .btn.icon-only { width: 44px; min-height: 44px; }
  /* The car window's four facts: two by two. */
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-3); }
  .badge { white-space: nowrap; }
  .car-actions .switch, .car-actions .btn { min-height: 44px; }
  .car-actions .btn.icon-only { min-width: 44px; }
  .top .lang-switch, .signin .lang-switch, .pv-box .pv-lang { height: 44px; min-height: 44px; }
  .palette-close { width: 44px; min-width: 44px; }
  .link-btn { min-height: 44px; }
}
@media (max-width: 639px) {
  /* The header keeps the menu, the place, search, help and the site: language and sign-out move to the menu's foot. */
  .top { gap: var(--s-1); padding-inline: var(--s-2); }
  .top .who { gap: 0; }
  .top .who .lang-switch, .top .who [data-action=sign-out] { display: none; }
  .drawer-foot { display: grid; gap: var(--s-2); margin-top: auto; padding: var(--s-4) var(--s-2) var(--s-2); border-top: 1px solid var(--border); }
  .drawer-foot .who-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); line-height: 44px; color: var(--text-muted); }
  .drawer-foot .btn { justify-content: center; }
  .nav { margin-bottom: var(--s-4); }
}

/* ── The agency's physical cars (Phase 2, 20 October 2026): under each car of the site ── */
#vehicles { margin-top: var(--s-5); }
.veh-groups { display: grid; gap: var(--s-4); }
.veh-listing { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.vehs { list-style: none; margin: 0 0 var(--s-2); padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.veh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); border-top: 1px solid var(--border); }
.veh:first-child { border-top: 0; }
.veh-name { min-width: 0; overflow-wrap: anywhere; }
.veh.retired .veh-name { color: var(--text-muted); }
.veh-plate { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .veh { grid-template-columns: minmax(0, 1fr) auto; }
  .veh-plate { grid-column: 1; grid-row: 2; }
}
/* ── Paramètres: booking rules and the team ── */
.unit-input { display: flex; align-items: center; gap: var(--s-2); }
.unit-input input { max-width: 8rem; }
/* A plate is typed as it reads on the car, left to right: its Arabic letter stays between the numbers (12345-أ-6). */
.plate-input { unicode-bidi: bidi-override; }
.label-like { display: block; font-weight: 550; font-size: var(--text-sm); margin-bottom: 6px; }
.static { margin: 0; padding-block: 8px; }
.choices .choice { display: flex; gap: var(--s-2); align-items: flex-start; max-width: 34rem; }
.choice .hint { display: block; margin: 2px 0 0; }
.team { list-style: none; margin: 0 0 var(--s-4); padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.member { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-3); border-top: 1px solid var(--border); }
.member:first-child { border-top: 0; }
.member-who { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.member-actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.roles { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.roles > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); }
.roles dt { font-weight: 600; }
.roles dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 639px) { .roles > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.member-actions select { width: auto; min-width: 9rem; }

/* ── Customers (Phase 2, 20 October 2026) ── */
.list-tools { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.list-tools .field { margin: 0; min-width: 0; }
.list-tools .grow { flex: 1 1 16rem; }
.pad { padding: var(--s-3) var(--s-4); margin: 0; }
.clients { list-style: none; margin: 0; padding: 0; }
.client { border-top: 1px solid var(--border); }
.client:first-child { border-top: 0; }
.client a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); color: inherit; text-decoration: none; }
.client a:hover { background: var(--surface-hover); }
.client a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.client-name { font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.client-reach { color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
@media (max-width: 639px) {
  .client a { grid-template-columns: minmax(0, 1fr) auto; }
  .client-reach { grid-column: 1 / -1; grid-row: 2; }
}
.dlg-dupes .callout ul { margin: var(--s-2) 0 0; padding-inline-start: 18px; }
.choices.stack { flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.feed .end { display: inline-flex; align-items: center; gap: var(--s-2); align-self: start; }
.feed li > .tag { align-self: start; } /* a status stays its own size beside text that wraps */
.col.side .facts { grid-template-columns: minmax(0, 1fr); }
.col.side .facts dd { overflow-wrap: anywhere; }

/* Tarifs (Phase 2, milestone 4): the calculator's quote, its date-and-place groups, a card's second heading. */
.quote { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--s-2); }
.quote th, .quote td { padding: 6px 0; border-bottom: 1px solid var(--border); text-align: start; font-weight: 400; vertical-align: top; }
.quote td.num { text-align: end; white-space: nowrap; padding-inline-start: var(--s-3); font-variant-numeric: tabular-nums; }
.quote tfoot th, .quote tfoot td { font-weight: 600; border-bottom: 0; padding-top: var(--s-2); }
fieldset.when, fieldset.season-rates { border: 0; padding: 0; margin: 0 0 var(--s-3); min-width: 0; }
fieldset.when legend, fieldset.season-rates legend { font-weight: 550; font-size: var(--text-sm); padding: 0; margin-bottom: 6px; }
.card-head.sub-head { margin: var(--s-5) 0 var(--s-2); }
.card-head.sub-head h3 { margin: 0; }
.price-elsewhere .icon { vertical-align: -2px; margin-inline-end: 4px; } /* a sentence: its link stays inline */

/* Reservations (Phase 2, milestone 5): a reservation's actions wrap; the customer's own words; picks in a window. */
.res-actions { flex-wrap: wrap; justify-content: flex-end; }
.said { white-space: pre-wrap; margin: 0; }
.picks button { width: 100%; justify-content: flex-start; text-align: start; }
.choice.off { color: var(--text-muted); }

/* The dashboard's day: two cards side by side on wide screens; counts of cars. */
.ops { display: grid; gap: var(--s-5); margin-bottom: var(--s-5); }
.ops-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: var(--s-5); }
.ops-grid > .card { margin: 0; }
.ops-list li a, .ops-grid .feed li a { display: grid; gap: 2px; align-content: center; min-height: 44px; color: inherit; text-decoration: none; }
.ops-list li a:hover strong, .ops-grid .feed li a:hover strong { text-decoration: underline; }
.ops-counts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-3); }
.ops-counts strong { font-size: var(--text-lg); margin-inline-end: 4px; }

/* The calendar (milestone 6): cars as rows, days as columns; blocks placed by the script (no inline styles). */
.cal { overflow: hidden; }
.cal-head { gap: var(--s-3); }
.cal-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cal-period { margin: 0; margin-inline-start: var(--s-2); font-size: var(--text-md); }
.cal-tools { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; padding: 0 var(--s-5) var(--s-4); }
.cal-tools .field { margin: 0; }
.cal-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.cal-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch.booking, .cal-block.booking { background: var(--green-50); border-color: var(--green-200); color: var(--green-700); }
.swatch.hold, .cal-block.hold { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-700); }
.swatch.waiting, .cal-block.waiting { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.swatch.unavailable, .cal-block.unavailable { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-700); }
.swatch { border: 1px solid; }
.cal-block.waiting.conflict { background: var(--red-50); border-color: var(--red-200); color: var(--red-700); }
.cal-scroll { overflow-x: auto; border-top: 1px solid var(--border); }
.cal-grid { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; font-size: var(--text-sm); }
.cal-grid.dense { min-width: 960px; }
.cal-grid th, .cal-grid td { border-bottom: 1px solid var(--border); padding: 0; }
.cal-grid thead th { font-weight: 500; color: var(--text-muted); padding: 6px 2px; text-align: center; white-space: nowrap; overflow: hidden; }
.cal-grid thead th.today { color: var(--accent-text); font-weight: 650; }
.cal-grid thead .wd, .cal-grid thead .dn { display: block; line-height: 1.25; }
.cal-grid thead .wd { font-size: var(--text-xs); }
.res-reach { margin-top: var(--s-3); gap: var(--s-2); }
.cal-corner, .cal-grid tbody th { width: 168px; }
.cal-grid tbody th { text-align: start; font-weight: 500; padding: 6px var(--s-3); vertical-align: top; background: var(--surface); }
.cal-grid tr.cal-wait th { background: var(--surface-sunken); }
.cal-track { position: relative; cursor: default; }
.cal-track[data-track] { cursor: copy; }
.cal-lane { position: relative; min-height: 32px; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: calc(100% / var(--cols, 7)) 100%; }
[dir=rtl] .cal-lane { background-image: linear-gradient(to left, var(--border) 1px, transparent 1px); }
.cal-block { position: absolute; top: 3px; height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid; border-radius: var(--r-xs); overflow: hidden; white-space: nowrap; text-decoration: none; font-size: var(--text-xs); line-height: 1; box-sizing: border-box; }
.cal-block span { overflow: hidden; text-overflow: ellipsis; }
.cal-block:hover, .cal-block:focus-visible { z-index: 2; box-shadow: var(--shadow-sm); }
.cal-agenda { padding: 0 var(--s-5) var(--s-4); }
.cal-day h3 { margin: var(--s-4) 0 var(--s-1); font-size: var(--text-base); }
.cal-day .ev { grid-template-columns: 56px minmax(0, 1fr); }
.cal-day .ev a { color: inherit; text-decoration: none; display: block; min-height: 44px; }
.cal-day .ev.unavailable a { color: var(--text-muted); }
@media (max-width: 640px) { .cal-tools { padding: 0 var(--s-4) var(--s-3); } .cal-agenda { padding: 0 var(--s-4) var(--s-3); } }
/* Touch screens: blocks a finger can take (the script spaces the lanes to match), view buttons at least 44 px wide. */
@media (max-width: 959px) { .cal-block { height: 44px; } .cal-lane { min-height: 52px; } .seg .btn { min-width: 44px; justify-content: center; } }
/* Messages to customers (Phase 2, milestone 8): the texts in Paramètres, a reservation's messages. */
.msg-editor { display: grid; grid-template-columns: minmax(0, 1fr); }
.msg-editor .msg-lang { max-width: 18rem; }
.msg-editor textarea { min-height: 14rem; }
.msg-kinds { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--border); }
.msg-kinds li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.msg-kinds li > span { min-width: 0; }
.msg-kinds .hint { display: block; margin: 2px 0 0; }
.msg-kinds .btn { flex: none; }
.msg-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 0; }
.msg-vars > div { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.msg-vars dt { flex: none; }
.msg-vars dd { margin: 0; font-size: var(--text-sm); color: var(--text-muted); min-width: 0; }
.msg-vars .btn { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-xs); }
.msg-preview { white-space: pre-wrap; margin: var(--s-3) 0; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-sunken); font-size: var(--text-sm); max-height: 16rem; overflow: auto; overflow-wrap: anywhere; }
.small-head { font-size: var(--text-sm); margin: var(--s-4) 0 var(--s-1); }
#res-messages .row { gap: var(--s-2); }
@media (max-width: 959px) { .msg-vars .btn { min-height: 44px; } }

/* Paramètres → the team: the owner adds a person, then sends the link to choose a password (21 October 2026). */
.team-add { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.team-add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.team-add-row .field { flex: 1 1 14rem; min-width: 0; margin: 0; }
.link-box { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); }
.link-box code { overflow-wrap: anywhere; font-size: var(--text-sm); }
.link-box .row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Rentals (Phase 3, step 2): starting one from its reservation; what it costs, a reversed charge struck through. */
.callout.start-rental { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.callout.start-rental > span { flex: 1 1 16rem; }
.feed.money li { display: flex; justify-content: space-between; gap: var(--s-3); }
.feed.money li.struck > span:first-child, .feed.money li.struck .num { text-decoration: line-through; color: var(--text-muted); }
.card .total { display: flex; justify-content: space-between; gap: var(--s-3); margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
/* Rentals' money (Phase 3, step 3): the money card, the proposals, the receipts and statement as they print. */
.money-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.money-head h2 { margin-bottom: var(--s-3); }
.facts dd .btn { margin-inline-start: var(--s-1); vertical-align: middle; }
.money-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.ledger-head { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--s-4) 0 0; }
.feed.money li.entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.feed.money li.entry .what { display: grid; gap: 2px; min-width: 0; }
.feed.money li.entry .num { white-space: nowrap; font-weight: 600; }
.feed.money li.entry .entry-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.feed.money li.entry.struck .what > span:first-child strong, .feed.money li.entry.struck .num { text-decoration: line-through; color: var(--text-muted); }
.money-foot { margin: var(--s-4) 0 0; }
.callout.proposals ul { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-3); }
.callout.proposals li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.callout.proposals .row { margin-top: 0; }
.callout ul .btn { margin-inline-start: var(--s-1); }
fieldset.rules-group { border: 0; padding: 0; margin: var(--s-5) 0 var(--s-4); min-width: 0; }
fieldset.rules-group legend { font-weight: 600; padding: 0; margin-bottom: var(--s-1); }

/* Paper: a receipt or the statement, the same in its window and on paper (printed alone: body.printing). */
.paper { color: #111; background: #fff; font-size: 14px; line-height: 1.45; max-width: 46rem; margin: 0 auto; position: relative; }
.paper-preview { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-5); background: #fff; }
.paper-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid #111; }
.paper-agency { display: grid; gap: 2px; }
.paper-agency strong { font-size: 18px; }
.paper-title { text-align: end; display: grid; gap: 2px; }
.paper-title h3 { margin: 0; font-size: 18px; letter-spacing: 0.02em; }
.paper-facts { display: grid; gap: var(--s-2); margin: var(--s-4) 0; }
.paper-facts div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-3); }
.paper-facts dt { color: #555; }
.paper-facts dd { margin: 0; }
.paper-amount { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border: 1px solid #111; padding: var(--s-3) var(--s-4); margin: var(--s-4) 0; }
.paper-amount strong { font-size: 22px; }
.paper-table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0; }
.paper-table th, .paper-table td { text-align: start; padding: 6px 8px; border-bottom: 1px solid #ccc; vertical-align: top; }
.paper-table .num { text-align: end; white-space: nowrap; }
.paper-table tr.struck td { text-decoration: line-through; color: #595959; }
.paper-totals { display: grid; gap: 4px; margin: var(--s-3) 0 0; margin-inline-start: auto; max-width: 22rem; }
.paper-totals div { display: flex; justify-content: space-between; gap: var(--s-4); }
.paper-totals dt { color: #555; }
.paper-totals dd { margin: 0; font-weight: 600; }
.paper-foot { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }
.paper-sign { min-width: 14rem; padding-top: var(--s-6); border-top: 1px solid #111; text-align: center; color: #555; }
.paper-note { margin: var(--s-4) 0 0; color: #555; font-size: 12px; }
.paper-void { position: absolute; inset-inline-end: 0; top: 40%; margin: 0; padding: 4px 16px; border: 3px solid #b42318; color: #b42318; font-size: 28px; font-weight: 700; transform: rotate(-12deg); opacity: 0.8; }
#print-root { display: none; }
@media (max-width: 640px) {
  .paper-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .paper-title { text-align: start; }
  .paper-preview { padding: var(--s-3); }
  .paper-sign { min-width: 10rem; }
}
@media print {
  body.printing > :not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  body.printing { background: #fff; overflow: visible; height: auto; }
  @page { margin: 14mm; }
}

/* Inspections (Phase 3, step 4): built for a phone first — photo tiles, the car's outline, the list, the finish bar. */
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--s-3); }
.shot { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.shot-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); min-width: 0; }
.shot-head strong { font-size: var(--text-sm); }
.shot-imgs { display: flex; gap: var(--s-2); }
.shot-imgs > img, .shot-imgs figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xs); background: var(--surface-sunken); display: block; }
.shot-imgs > img { flex: 2 1 0; min-width: 0; }
.shot-imgs figure { flex: 1 1 0; min-width: 0; margin: 0; display: grid; gap: 2px; }
.shot-none { flex: 1; display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--border-strong); border-radius: var(--r-xs); color: var(--text-muted); }
.shot .file-pick { justify-self: start; }
.damage-map { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.car-outline { width: 100%; height: auto; max-height: 26rem; }
.car-outline .body { fill: var(--surface-sunken); stroke: var(--border-strong); stroke-width: 1.5; }
.car-outline .zone { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; cursor: pointer; }
.car-outline .zone:hover { fill: var(--accent-soft); }
.car-outline .zone.was { fill: var(--surface-sunken); stroke-dasharray: 3 2; }
.car-outline .zone.hit { fill: var(--red-50); stroke: var(--red-600); }
.car-outline .mark circle { fill: var(--text); }
.car-outline .mark.new circle { fill: var(--red-600); }
.car-outline .mark text { fill: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.feed.damages li { align-items: start; }
.feed.inspections li { align-items: center; }
.checks { display: grid; gap: var(--s-2); }
.check-row { border: 0; margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-width: 0; }
.check-row legend { float: left; padding: 0; font-size: var(--text-sm); font-weight: 550; }
.check-row:last-child { border-bottom: 0; }
.check-row .warn-text { flex-basis: 100%; margin: 0; }
.seg-choice { display: flex; gap: var(--s-2); }
.seg-choice .choice { display: inline-flex; align-items: center; gap: var(--s-1); padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; }
.seg-choice .choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.warn-text { color: var(--amber-600); }
/* What is tapped is scrolled clear of the finish bar that stays at the foot of the screen. */
.shot, .check-row, .card .field, .damage-list li { scroll-margin-bottom: 9rem; }
.finish-bar { position: sticky; bottom: var(--s-3); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); box-shadow: var(--shadow-lg); }
.finish-bar p { margin: 0; }
.finish-bar .btn[aria-disabled="true"] { opacity: 0.55; }
@media (max-width: 640px) {
  .damage-map { grid-template-columns: minmax(0, 1fr); }
  .car-outline { max-width: 13rem; margin: 0 auto; display: block; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .shot { padding: var(--s-2); }
  .shot .file-pick { justify-self: stretch; justify-content: center; }
  .shot-imgs { flex-direction: column; } /* the departure's photo under the new one */
  .finish-bar .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 959px) { .seg-choice .choice { min-height: 44px; min-width: 44px; } .feed.inspections .btn { min-width: 48px; justify-content: center; } }

/* Contracts (Phase 3, step 5): a version or a preview in its frame (printed from it), the signed copy's pages. */
@media (min-width: 640px) { dialog.contract-view { width: min(980px, calc(100vw - 32px)); } }
dialog.contract-view .dlg-body { display: flex; flex-direction: column; max-height: none; padding: 0; }
.contract-frame { display: block; width: 100%; height: min(72vh, 1100px); border: 0; background: #eceef1; }
.ct-version .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0 var(--s-2); }
.ct-version .mono { margin: 0; }
.ct-scans { margin-top: var(--s-3); }
.ct-pages { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--s-3); }
.ct-pages li { display: grid; gap: var(--s-1); justify-items: start; }
.ct-pages img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2, #f4f5f7); }
#tpl-form .finish-bar .actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#tpl-form textarea { min-height: 14rem; font-size: var(--text-sm); line-height: 1.55; }
dialog.contract-view .dlg-foot .ct-tab { margin-inline-end: auto; }
@media (max-width: 639px) {
  dialog.contract-view .dlg-body { padding: 0; }
  .contract-frame { flex: 1; height: auto; min-height: 0; }
  .ct-version .actions .btn, #tpl-form .finish-bar .btn { flex: 1 1 100%; justify-content: center; }
  /* Five buttons would cover half a phone's screen over the conditions: here the bar stays at the end of the form. */
  #tpl-form .finish-bar { position: static; }
}
@media (max-width: 959px) { .feed.contract .btn, .ct-pages .btn { min-width: 48px; min-height: 44px; justify-content: center; } .ct-make .choice { min-height: 44px; align-items: center; } }

/* Maintenance (Phase 3, step 6): what is due, the visits at the garage, a car's reminders and history. */
.mt-list { list-style: none; margin: 0; padding: 0; }
.mt-list li + li { border-top: 1px solid var(--border); }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) 0; }
.mt-row > .tag { align-self: center; }
.mt-main { display: grid; gap: 2px; min-width: 0; }
.mt-main .small { overflow-wrap: anywhere; }
.mt-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.card > h2 > .icon, .card-head > h2 > .icon { vertical-align: -3px; color: var(--text-secondary); }
.mt-car .req-dates { overflow-wrap: anywhere; }
/* A window's first line: which visit, which car. */
.dlg-about { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-sunken); }
@media (max-width: 639px) {
  .mt-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mt-acts { grid-column: 1 / -1; justify-content: stretch; }
  .mt-acts .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 959px) { .mt-acts .btn { min-height: 44px; } }

/* ── Incidents and documents (Phase 3, step 7) ── */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list.padded { padding: 0 var(--s-5); }
.doc-list li + li { border-top: 1px solid var(--border); }
.doc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) 0; }
.doc-row > svg { color: var(--text-secondary); }
.doc-main { display: grid; gap: 2px; min-width: 0; }
.doc-main a { overflow-wrap: anywhere; font-weight: 600; }
.doc-main .small { overflow-wrap: anywhere; }
.drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.drivers li + li { border-top: 1px solid var(--border); padding-top: var(--s-3); }
.facts.compact { margin-top: var(--s-2); }
p.pre { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .doc-list.padded { padding: 0 var(--s-4); }
  .doc-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .doc-row > .tag { grid-column: 2; justify-self: start; }
}
/* A field whose visible label is not a <label> (the file picker's button is one). */
.field > .label { display: block; font-weight: 550; font-size: var(--text-sm); color: var(--text); margin-bottom: 6px; }
.list-count { margin: 0; padding: var(--s-2) var(--s-5) 0; }
@media (max-width: 640px) { .list-count { padding-inline: var(--s-4); } }
@media (max-width: 959px) { .doc-main > a, .doc-facts a, .inc-feed a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } }

/* ── The "Aujourd'hui" board (Phase 3, step 8): a tile per list, its count first; a tile with something to see takes
   its tone (its words say what it is, the colour only adds to them) ── */
.today-board { margin-bottom: var(--s-5); }
.today-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.today-tiles .tile { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'icon n' 'label label' 'hint hint'; align-items: center; gap: 2px var(--s-2); min-height: 88px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-muted); text-decoration: none; }
.today-tiles .tile:hover { background: var(--surface-hover); }
.today-tiles .tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.today-tiles .tile > svg { grid-area: icon; }
.tile-n { grid-area: n; font-size: var(--text-xl); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tile-label { grid-area: label; font-size: var(--text-sm); font-weight: 550; color: var(--text); }
.tile-hint { grid-area: hint; font-size: var(--text-sm); }
.today-tiles .tile.bad { border-color: var(--red-200); background: var(--red-50); }
.today-tiles .tile.bad > svg, .today-tiles .tile.bad .tile-hint { color: var(--red-700); }
.today-tiles .tile.warn { border-color: var(--amber-200); background: var(--amber-50); }
.today-tiles .tile.warn > svg, .today-tiles .tile.warn .tile-hint { color: var(--amber-700); }
.today-tiles .tile.info > svg { color: var(--accent); }
.today-tiles .tile.bad:hover { border-color: var(--red-600); }
.today-tiles .tile.warn:hover { border-color: var(--amber-600); }
/* On a phone a list row's title wraps: a car's name and its plate stay whole. */
@media (max-width: 640px) { .req-car { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 640px) { .today-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); } .today-tiles .tile { min-height: 80px; padding: var(--s-3); } }

/* ── Reports (Phase 4, stage 2): the period, the figures with their rule, a column chart, today, the tables, paper ── */
.rep-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-5); }
.rep-tools .seg { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.rep-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); }
.rep-dates .field { margin: 0; }
.rep-when { flex-basis: 100%; margin: 0; color: var(--text-secondary); }
.rep-when strong { color: var(--text); font-weight: 600; }
.rep-busy { opacity: 0.55; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.rep-group { margin-bottom: var(--s-5); }
.rep-group-title { margin: 0 0 var(--s-2); font-size: var(--text-sm); font-weight: 550; color: var(--text-secondary); letter-spacing: 0; }
.rep-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); overflow: hidden; }
.rep-tile { min-width: 0; padding: var(--s-4) var(--s-5); border-inline-start: 1px solid var(--border); }
.rep-tile:first-child { border-inline-start: 0; }
.rep-name { display: flex; align-items: center; gap: var(--s-1); min-height: 28px; font-size: var(--text-sm); color: var(--text-secondary); }
.rep-name .rep-tip-btn { margin-inline-start: auto; color: var(--text-muted); }
.rep-value { margin: 2px 0 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.rep-sub { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.rep-move { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); min-height: 20px; margin: var(--s-2) 0 0; font-size: var(--text-sm); }
.rep-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 550; color: var(--text-secondary); }
.rep-delta.ok { color: var(--green-600); }
.rep-delta.bad { color: var(--red-600); }
.rep-tip { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-sunken); font-size: var(--text-sm); color: var(--text-secondary); }
.card-head + .rep-tip { margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
.rep-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
.rep-facts { display: grid; gap: var(--s-2); margin: 0; }
.rep-facts div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); }
.rep-facts div:last-child { padding-bottom: 0; border-bottom: 0; }
.rep-facts dt { color: var(--text-secondary); }
.rep-facts dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-table :is(td, th).num { text-align: end; white-space: nowrap; }
/* Headings wrap (two words a line), so that every column fits beside the car's name. */
.rep-table th { white-space: normal; vertical-align: bottom; }
.rep-table th.num { white-space: normal; min-width: 6.5rem; }
@media (min-width: 640px) { .rep-table td:first-child { min-width: 10rem; } }
.rep-panel.is-off { display: none; }
/* Words kept for screen readers ("no figure") stay inside the table's own scrolling. */
.rep-panel .table-wrap { position: relative; }
.rep-plate { display: block; white-space: nowrap; }
.rep-table td:first-child a { overflow-wrap: anywhere; }
.rep-chart-title { margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
.rep-none { margin: 0; padding: var(--s-4) var(--s-5); }
.rep-print-only { display: none; }
/* The chart: columns from one baseline, 24 px wide at most and rounded at their end, hairline grid, one tooltip. */
.rep-chart { margin: 0; }
.rep-plot { position: relative; height: 200px; margin-inline-start: 52px; }
.rep-grid { position: absolute; inset: 0; pointer-events: none; }
.rep-grid > span { position: absolute; inset-inline: 0; bottom: var(--at); border-top: 1px solid var(--border); }
.rep-grid bdi { position: absolute; inset-inline-end: calc(100% + var(--s-2)); top: -0.75em; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-bars { position: absolute; inset: 0; display: flex; margin: 0; padding: 0; list-style: none; }
.rep-slot { position: relative; flex: 1 1 0; min-width: 0; outline: none; }
.rep-slot:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-xs); }
.rep-bar { position: absolute; inset-inline: 0; bottom: var(--zero); width: min(24px, calc(100% - 2px)); height: var(--h); margin-inline: auto; border-radius: 4px 4px 0 0; background: var(--accent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.rep-bar.neg { top: calc(100% - var(--zero)); bottom: auto; border-radius: 0 0 4px 4px; }
.rep-slot:hover .rep-bar, .rep-slot.on .rep-bar { background: var(--blue-800); }
.rep-tooltip { position: absolute; z-index: 2; display: grid; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-sm); white-space: nowrap; pointer-events: none; }
.rep-tooltip strong { font-size: var(--text-base); color: var(--text); }
.rep-tooltip span { font-size: var(--text-xs); color: var(--text-muted); }
.rep-axis { position: relative; height: 26px; margin-inline-start: 52px; border-top: 1px solid var(--border-strong); }
.rep-axis span { position: absolute; top: 6px; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.rep-axis .start { inset-inline-start: calc(var(--i) / var(--n) * 100%); }
.rep-axis .mid { inset-inline-start: calc((var(--i) + 0.5) / var(--n) * 100%); translate: -50% 0; }
[dir="rtl"] .rep-axis .mid { translate: 50% 0; }
.rep-axis .end { inset-inline-end: calc((var(--n) - var(--i) - 1) / var(--n) * 100%); }
.rep-chart figcaption { margin-top: var(--s-2); }
@media (max-width: 959px) {
  /* A finger's target: the links of the tables and of today's counts, 44 px. */
  .rep-table td:first-child a, .rep-facts dd a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .rep-facts dd a { justify-content: flex-end; }
  .rep-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-tile:nth-child(odd) { border-inline-start: 0; }
  .rep-tile:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .rep-pair { grid-template-columns: minmax(0, 1fr); }
  .rep-tools .seg .btn { min-height: 44px; }
}
@media (max-width: 639px) {
  /* A table's row as a small card: its name, then its figures two by two, each named above its value. */
  table.list.stack.rep-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); }
  table.list.stack.rep-table td { text-align: start; white-space: normal; }
  table.list.stack.rep-table td:first-child { grid-column: 1 / -1; font-weight: 550; }
  table.list.stack.rep-table td:nth-child(3) { grid-column: auto; }
  table.list.stack.rep-table td[data-label]::before { display: block; margin: 0; }
  .rep-tile { padding: var(--s-3) var(--s-4); }
  .rep-value { font-size: var(--text-lg); }
  .rep-plot { height: 168px; margin-inline-start: 44px; }
  .rep-axis { margin-inline-start: 44px; }
}
/* On paper: the figures, the chart and every table; no menu, buttons or choices. */
@media print {
  body:has(.rep-figures) :is(.sidebar, .top, .banner, .skip, .rep-actions, .rep-tools, .rep-tip-btn, .card-head .seg, [data-rep-csv], .rep-tooltip) { display: none !important; }
  body:has(.rep-figures) .app { display: block; background: none; }
  body:has(.rep-figures) main { max-width: none; padding: 0; }
  body:has(.rep-figures) .rep-print-only { display: block; margin: 0 0 var(--s-4); }
  body:has(.rep-figures) h3.rep-print-only { margin: var(--s-4) var(--s-5) var(--s-2); }
  body:has(.rep-figures) .rep-panel.is-off { display: block; }
  /* Every column on the page's width: the tables neither scroll nor keep their headings on one line. */
  body:has(.rep-figures) .rep-panel .table-wrap { overflow: visible; }
  body:has(.rep-figures) .rep-table :is(th, td) { white-space: normal; padding: 4px 6px; font-size: 11px; }
  body:has(.rep-figures) .rep-table td:first-child { min-width: 0; }
  body:has(.rep-figures) :is(.card, .rep-tiles) { box-shadow: none; break-inside: avoid; }
  body:has(.rep-figures) .rep-busy { opacity: 1; }
  body:has(.rep-figures) .page-head .lead a { display: none; }
}

/* ── Expenses (Phase 4, stage 3): a period's expenses and garage costs; a car's and an incident's cards ── */
.rep-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rep-facts.compact { gap: var(--s-1); }
.rep-facts .xp-total dt, .rep-facts .xp-total dd { font-weight: 600; color: var(--text); }
.xp-filter { margin: 0; min-width: 12rem; }
.xp-list { list-style: none; margin: 0; padding: 0; }
.card.flush .xp-list { padding: 0 var(--s-5); }
.xp-list li + li { border-top: 1px solid var(--border); }
.xp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) 0; }
.xp-main { display: grid; gap: 2px; min-width: 0; }
.xp-main .small { overflow-wrap: anywhere; }
.xp-amount { font-weight: 600; white-space: nowrap; text-align: end; }
.xp-row.struck .xp-main strong, .xp-row.struck .xp-amount { text-decoration: line-through; color: var(--text-muted); }
.xp-row.garage .xp-main strong { font-weight: 550; color: var(--text-secondary); }
.xp-row.garage .xp-main strong .icon { color: var(--text-muted); }
.xp-sub { margin: var(--s-4) 0 var(--s-2); }
.xp-sub .sub-title { margin: 0; }
.xp-more { padding: 0 var(--s-5) var(--s-3); margin: 0; }
@media (max-width: 639px) {
  .xp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .xp-row > .btn { grid-column: 1 / -1; justify-self: start; }
  .card.flush .xp-list { padding: 0 var(--s-4); }
  .rep-tiles.two { grid-template-columns: minmax(0, 1fr); }
  .rep-tiles.two .rep-tile + .rep-tile { border-inline-start: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 959px) and (min-width: 640px) { .rep-tiles.two .rep-tile:nth-child(2) { border-inline-start: 1px solid var(--border); border-top: 0; } }

/* « Donner mon avis », « Vos avis », the guided tour (27 October 2026) */
.feedback-foot { margin-top: auto; padding: var(--s-4) 0 var(--s-1); }
.feedback-foot .btn { width: 100%; justify-content: flex-start; color: var(--text-secondary); }
.feedback-foot + .drawer-foot { margin-top: 0; }
.top .help-btn { position: relative; }
.help-count { background: var(--accent); }
.help-more { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); }
.fb-lead { margin: 0 0 var(--s-4); }
.help-more .nav-count { margin-inline-start: 4px; }
.fb-kinds { border: 0; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.fb-kinds legend { padding: 0; margin-bottom: 6px; font-weight: 550; font-size: var(--text-sm); }
.fb-kind { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s-2); align-items: start; padding: var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; }
.fb-kind input { grid-row: 1; margin-top: 2px; }
.fb-kind .icon { display: none; }
.fb-kind > span { display: grid; gap: 2px; }
.fb-kind .hint { margin: 0; }
.fb-kind:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.fb-kind:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.fb-kind input:focus-visible { outline: 0; }
.fb-shot-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0; }
.fb-shot-preview img { max-width: 180px; max-height: 120px; border: 1px solid var(--border); border-radius: var(--r-xs); object-fit: contain; background: var(--surface-sunken); }
.fb-from { display: flex; align-items: center; gap: 6px; }
.fb-list { list-style: none; margin: 0; padding: 0; }
.fb-item { display: grid; gap: var(--s-2); padding: var(--s-4); border-top: 1px solid var(--border); }
.fb-item:first-child { border-top: 0; }
.fb-item p { margin: 0; }
.fb-item .said { overflow-wrap: anywhere; }
.fb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fb-item-head time { margin-inline-start: auto; }
.fb-reply { display: grid; gap: var(--s-1); padding: var(--s-3); border-inline-start: 3px solid var(--border-strong); border-radius: var(--r-xs); background: var(--surface-sunken); }
.fb-reply.unread { border-inline-start-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 639px) { .fb-kinds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 959px) { .fb-kind { min-height: 44px; } }

.tour-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); border-color: var(--accent-border); background: var(--accent-soft); }
.tour-offer-text { display: flex; gap: var(--s-3); align-items: flex-start; flex: 1 1 22rem; min-width: 0; }
.tour-offer-text > .icon { flex: none; color: var(--accent); margin-top: 2px; }
.tour-offer h2 { margin: 0 0 4px; font-size: var(--text-md); }
.tour-offer p { margin: 0; }
.tour-offer-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-inline-start: auto; }
@media (max-width: 639px) { .tour-offer-actions { flex: 1 1 100%; } .tour-offer-actions .btn { flex: 1 1 0; justify-content: center; } }
dialog.tour { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
dialog.tour::backdrop { background: transparent; }
dialog.tour.centred { background: rgba(15, 23, 42, 0.55); }
.tour-ring { position: absolute; border-radius: var(--r-md); box-shadow: 0 0 0 200vmax rgba(15, 23, 42, 0.55); outline: 2px solid var(--accent); outline-offset: 0; pointer-events: none; transition: left 160ms var(--ease), top 160ms var(--ease), width 160ms var(--ease), height 160ms var(--ease); }
.tour-bubble { position: absolute; margin: 0; display: grid; gap: var(--s-2); padding: var(--s-4); box-shadow: var(--shadow-lg); max-height: calc(100dvh - 2 * var(--s-4)); overflow: auto; }
/* The page behind stays still while the tour points at it. */
html:has(dialog.tour[open]) { overflow: hidden; }
.tour-bubble h2 { margin: 0; font-size: var(--text-md); }
.tour-bubble p { margin: 0; }
.tour-count:empty { display: none; }
.tour-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.tour-move { display: flex; gap: var(--s-2); margin-inline-start: auto; }
@media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } }
@media (max-width: 959px) { .tour-actions .btn { min-height: 44px; } }