/* Plain and calm, in Escape Velocity's brand (18 October 2026). Workshop first: big targets,
   high contrast, readable at arm's length. Body text 17px, nothing under 15px. Sentence case, no
   letter-spacing. Targets at least 56px. One accent element per screen at rest: the current
   screen's underline.

   Two kinds of variable. The --ev-* ones are the brand's own tokens and never change: they draw
   the "Powered by Escape Velocity" line, the sign-in screen and the brand's own pieces. The
   working ones below them draw the screens, and a garage's own colours replace four of them
   (/look.css, from core/look.js): --main, --main-ink, --main-hover and --accent. The status and
   message colours (ok, danger, alert) are working colours and stay. */

:root {
  --ev-ink: #020612;
  --ev-slate: #4B5068;
  --ev-mist: #D5D9E6;
  --ev-haze: #ECEEF6;
  --ev-paper: #F6F7FB;
  --ev-violet: #772DF6;
  --ev-blue: #2C6DFC;
  --ev-silver: #E8E8EA;
  --ev-font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ink: #020612;
  --ink-soft: #4B5068;
  --paper: #F6F7FB;
  --card: #ffffff;
  --wash: #ECEEF6;
  --line: #D5D9E6;
  --line-strong: #5b6370;
  --main: #020612;
  --main-ink: #F6F7FB;
  --main-hover: #2A2E38;
  --accent: #772DF6;
  --danger: #a3191c;
  --ok-wash: #e2f1e5;
  --ok-ink: #12512b;
  --alert-wash: #fbe6e6;
  --alert-ink: #7a1113;
  --focus: var(--accent);
  --target: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2 { font-family: var(--ev-font-display); font-weight: 600; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.h-big { font-size: 34px; }
p { margin: 0 0 16px; }
a { color: var(--main); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
strong { font-weight: 700; }

:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

[hidden] { display: none !important; }

.quiet, .hint { color: var(--ink-soft); font-size: 16px; }
.hint { margin: 0 0 8px; }
.lead { font-size: 20px; }

/* ---- The bar at the top: the garage, who is working, and Powered by Escape Velocity ---- */

.bar { background: var(--ev-ink); color: var(--ev-silver); }
.bar-light { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.bar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  min-height: 72px; max-width: 1100px; margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  padding-top: max(8px, env(safe-area-inset-top));
}
.bar-brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--target); min-width: 0; color: inherit; text-decoration: none; }
/* The logo and name are the way home. On hover, and on keyboard focus, a ring in the highlight
   colour draws round the logo, with a little room, rounded corners and a faint backdrop (a round
   logo gets a round ring); a name in words is underlined. The ring is a shadow, so nothing moves
   when it shows. The Your look preview shows the same. */
a.bar-brand:hover { color: inherit; text-decoration: none; }
a.bar-brand:hover .bar-name, a.bar-brand:focus-visible .bar-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bar-brand .bar-logo, .look-logo-box .bar-logo { box-sizing: content-box; padding: 5px; margin: -5px; border-radius: 12px; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
a.bar-brand:hover .bar-logo, a.bar-brand:focus-visible .bar-logo, .look-logo-box:hover .bar-logo { box-shadow: 0 0 0 2px var(--accent); background-color: rgba(255, 255, 255, 0.08); }
.bar-light a.bar-brand:hover .bar-logo, .bar-light a.bar-brand:focus-visible .bar-logo, .look-logo-box.on-light:hover .bar-logo { background-color: var(--wash); }
.bar-name { font-size: 19px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
/* A logo is drawn at the size its own shape gives it (core/look.js logoBox(), the width and height on
   the picture), shrinking with the screen on a phone; one whose size is not known is 36 tall. */
.bar-logo { display: block; height: auto; max-width: min(60vw, 280px); object-fit: contain; }
.bar-logo:not([width]) { height: 36px; width: auto; }
.bar-lockup { max-width: min(70vw, 280px); }
.bar-who { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
.bar-who form { margin: 0; }
.bar-person { display: inline-flex; align-items: center; min-height: var(--target); font-size: 19px; font-weight: 700; line-height: 1.2; text-align: right; overflow-wrap: anywhere; color: inherit; text-decoration: none; }
a.bar-person:hover { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }
/* Powered by Escape Velocity: the brand's own mark and colours, whatever the garage's scheme.
   The words are at the 15px floor, light, and bottom-justified so their baseline rests on the
   mark's bottom edge; the mark sits to the right of them. The words keep their place and the mark
   reaches into the space right of the bar's content, as far as the screen allows: where it would
   not fit, the group moves left by the least that fits it (the min() below). On a phone the line
   has its own row, at the right. */
.powered { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex: 1 1 100%; min-height: 32px; padding-bottom: 2px; margin-right: calc(-1 * min(42px, 10px + max(0px, (100vw - 1100px) / 2))); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--ev-mist); white-space: nowrap; }
.bar-light .powered { color: var(--ev-slate); }
.powered img { display: block; height: 24px; width: auto; }

/* Inside a demo garage opened from the operator's Garages: a line above the bar saying so, with
   the way back. Warm, like a warning tag, so the demo is never taken for a real garage. */
.visit-line { background: #fff3d6; color: #4a3300; border-bottom: 2px solid #e0b24a; }
.visit-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  max-width: 1100px; margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
}
.visit-in p { margin: 0; font-weight: 700; }
.visit-in form { margin: 0; }
.btn-visit { background: #fff; border-color: #6b4a00; color: #4a3300; }
.btn-visit:hover { background: #4a3300; border-color: #4a3300; color: #fff; }
@media (max-width: 699px) { .visit-name { display: none; } }

.nav { border-bottom: 2px solid var(--line); background: var(--paper); }
/* One row. Where the screens do not fit (a phone) the row scrolls sideways, with the current
   screen's underline scrolled into view (app.js); Switch, on the workshop tablet, stays at its
   right end and never scrolls away. */
.nav-in {
  display: flex; align-items: center; max-width: 1100px; margin: 0 auto;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
}
.nav-links { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
/* Where the row slides, the edge with more off screen fades softly into the row's own colour
   (app.js sets more-left and more-right as it is slid). */
.nav-links.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.nav-links.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
.nav-links.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.nav a {
  display: flex; align-items: center; flex: none; min-height: var(--target); padding: 0 12px; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 4px solid transparent;
}
.nav a:hover { background: var(--wash); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.nav-switch { flex: none; margin: 4px 0 4px 8px; padding-left: 8px; border-left: 2px solid var(--line); }
.btn-switch { min-width: 7em; }
/* The bar and the menu row stay at the top while the page scrolls (T, 2026-10-18). On a phone, or
   a screen too short to spare the room, only the menu row stays; the bar scrolls away with the
   page. --top-h (set by app.js) is how much stays, so a field reached by Tab is never hidden
   under it. */
.top { position: sticky; top: 0; z-index: 30; box-shadow: 0 8px 14px -12px rgba(2, 6, 18, 0.45); }
html { scroll-padding-top: calc(var(--top-h, 0px) + 12px); scroll-padding-bottom: var(--bar-h, 0px); }
@media (max-width: 699px), (max-height: 560px) {
  .top { display: contents; }
  .nav { position: sticky; top: 0; z-index: 30; box-shadow: 0 8px 14px -12px rgba(2, 6, 18, 0.45); }
}

/* The page lines up with the bar above it; text keeps to a readable width. */
.page {
  max-width: 1100px; margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.page:not(.page-wide) > * { max-width: 760px; }
.page > .narrow { max-width: 560px; }
.back { margin-bottom: 8px; }
.back a, .link-big { display: inline-flex; align-items: center; min-height: var(--target); }
.aside { margin-top: 24px; }
.aside .link-big { display: flex; }

.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.title-row h1 { margin: 0; }

/* ---- Buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: 8px 20px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: var(--wash); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-main { background: var(--main); border-color: var(--main); color: var(--main-ink); }
.btn-main:hover { background: var(--main-hover); border-color: var(--main-hover); color: var(--main-ink); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--alert-wash); color: var(--danger); }
/* "Delete this ..." at the foot of a record's page, under its history: small, out of the way, still a full target. */
.delete-link { margin: 32px 0 0; }
.delete-link a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--danger); font-size: 16px; }
.advisory .delete-link { margin: 4px 0 8px; }
/* Your look: the pictures kept. */
.pictures { list-style: none; margin: 0; padding: 0; }
.pictures > li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pictures img { width: 72px; height: 72px; object-fit: contain; background: var(--wash); border-radius: 8px; }
.pictures .picture-text { flex: 1 1 200px; }
.pictures .delete-link, .row-static .delete-link { margin: 0; }
.btn-bar { background: transparent; border-color: currentColor; color: inherit; white-space: nowrap; }
.bar .btn-bar:hover { background: var(--ev-paper); border-color: var(--ev-paper); color: var(--ev-ink); }
.bar-light .btn-bar:hover { background: var(--wash); border-color: var(--ink); color: var(--ink); }
.btn-quiet { border-color: var(--line-strong); font-weight: 600; }
.btn[disabled], .key[disabled] { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Forms ---- */

.form { display: block; }
.form label, .filter label, .pin-form label { display: block; font-weight: 700; margin: 16px 0 6px; }
.form > label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], input[type="file"], select, textarea {
  display: block; width: 100%; min-height: var(--target); padding: 8px 14px;
  border: 2px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 19px;
}
select { appearance: auto; }
textarea { resize: vertical; line-height: 1.4; }
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="file"] { padding: 12px 14px; }
input[type="file"]::file-selector-button {
  min-height: 40px; margin-right: 12px; padding: 0 14px;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
/* Show password: a button at the right end of every password box (app.js; the tap-in keypad's PIN has
   none). It fills the box's height, 56 pixels, inside the box's border: its own border is clear, so the
   box's border shows through it and a hover or a focus ring stays inside the box. A thin divider on its
   left. Edge's own eye is hidden, so there is one button, not two. */
.pw { position: relative; display: block; }
.pw input { padding-right: 96px; }
.pw input::-ms-reveal { display: none; }
.pw-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; min-width: 80px; min-height: var(--target); padding: 0 16px;
  border: 2px solid transparent; border-left: 0; border-radius: 0 8px 8px 0; background-clip: padding-box;
  background-color: transparent; background-image: linear-gradient(var(--line-strong), var(--line-strong));
  background-position: left center; background-size: 1px 60%; background-repeat: no-repeat;
  color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle:hover { background-color: var(--wash); }
.pw-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.input-short { max-width: 9em; }
.input-medium { max-width: 16em; }
.input-year { max-width: 7em; }
.input-date { max-width: 14em; }
input[type="date"] { -webkit-appearance: none; appearance: none; }
.form-narrow { max-width: 560px; }
.block-first { margin-top: 24px; padding-top: 0; border-top: 0; }
.input-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 26px; text-transform: uppercase; }
.input-code::placeholder { color: #8a909b; }
.form .btn-main, .form-inline .btn { margin-top: 20px; }
/* Save and Cancel float at the bottom of a form taller than the screen, until the form's own end
   comes into view (app.js gathers the buttons into the bar and adds Cancel). */
.form-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 2px solid var(--line); box-shadow: 0 -8px 12px -8px rgba(2, 6, 18, 0.12); }
.form .form-bar .btn, .form .form-bar .btn-main { margin-top: 0; }
.form-bar .btn-wide { width: auto; flex: 1 1 12em; }

fieldset.choices { border: 0; padding: 0; margin: 20px 0 4px; }
fieldset.choices legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.choice {
  display: flex !important; align-items: flex-start; gap: 14px;
  min-height: var(--target); padding: 12px 14px; margin: 0 0 8px !important;
  border: 2px solid var(--line-strong); border-radius: 8px; background: var(--card); font-weight: 400 !important; cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--main); background: var(--wash); box-shadow: inset 0 0 0 1px var(--main); }
.choice input { width: 26px; height: 26px; margin: 2px 0 0; flex: none; accent-color: var(--main); }
.form label.choice-check { margin-top: 20px; }
.choice-small { min-height: var(--target); padding: 10px 14px; margin-bottom: 6px !important; align-items: center; }
.form label.choice-small { margin-top: 0; }

/* ---- Find: one box, big enough for the tablet ---- */

.find-box { margin: 0 0 24px; }
.find-box label { display: block; font-weight: 700; margin: 0 0 6px; }
.find-row { display: flex; gap: 10px; }
.find-row input { flex: 1 1 auto; min-width: 0; }
.find-row .btn { flex: none; }
.find-big { max-width: 760px; }
.find-big input { min-height: 64px; font-size: 22px; }
.find-big .btn { min-height: 64px; padding: 8px 28px; font-size: 19px; }
.find-group { margin-top: 24px; }
.count { font-weight: 400; color: var(--ink-soft); font-size: 17px; }
.tag {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 6px; vertical-align: 2px;
  background: var(--wash); border: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; font-weight: 600; line-height: 1.5;
}
.tag-warn { background: #fff3d6; border-color: #e0b24a; color: #6b4a00; }

/* ---- Facts, cards and tables ---- */

.facts { margin: 0 0 16px; }
.facts div { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 9em; color: var(--ink-soft); }
.facts dd { flex: 1 1 12em; margin: 0; overflow-wrap: anywhere; }
.facts-list { padding-left: 1.2em; margin: 0 0 20px; }
.facts-list > li { margin-bottom: 8px; }
.plain { list-style: none; padding: 0; margin: 6px 0 0; color: var(--ink-soft); }
.plain li { padding: 2px 0; }
.cols { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 16px; }
.col { padding: 16px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.col h2 { overflow-wrap: anywhere; }
.col form { margin: 0; }
.cards { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.card { padding: 20px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.card p { margin-bottom: 16px; }
.table-scroll { overflow-x: auto; margin: 0 0 20px; border: 2px solid var(--line); border-radius: 8px; max-width: 100%; background: var(--card); }
.table { border-collapse: collapse; min-width: 100%; font-size: 16px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
.table th { background: var(--wash); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.col-number { display: inline-block; min-width: 1.6em; color: var(--ink-soft); font-weight: 400; }
/* A tick row is one target: the box beside the name. Named with the form too, so the form's own
   label rule (a block, bold, with a margin) never wins over it. */
.row-tick, .form label.row-tick { display: flex; align-items: center; gap: 14px; padding: 10px 8px; margin: 0; min-height: 64px; font-weight: 400; }
.row-tick input { width: 28px; height: 28px; flex: none; accent-color: var(--main); }
.row-tick .row-text { flex: 1 1 auto; }
.vehicle-tiles { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tile {
  display: block; padding: 12px 14px; min-height: 72px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none;
}
.tile:hover { background: var(--wash); color: var(--ink); }
.tile .reg { display: block; font-size: 22px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tile .row-sub { display: block; }
.reg-big { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.filter label { margin: 0 0 6px; flex-basis: 100%; }
.filter select { flex: 1 1 220px; width: auto; max-width: 360px; }

/* ---- Messages ---- */

.alert, .notice { padding: 14px 16px; border-radius: 8px; border-left: 8px solid; font-weight: 600; }
.alert { background: var(--alert-wash); border-color: var(--danger); color: var(--alert-ink); }
.notice { background: var(--ok-wash); border-color: var(--ok-ink); color: var(--ok-ink); }
/* After a save that comes back to the same spot, the green line shows at the bottom of the screen
   for a few seconds (app.js), just above the Save bar when one shows there (--toast-at). An error
   is never a toast: it opens at the top, in red. */
.toast { position: fixed; left: 50%; bottom: var(--toast-at, 20px); z-index: 50; width: max-content; max-width: calc(100% - 32px); margin: 0; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(2, 6, 18, 0.18); }

/* ---- Lists ---- */

.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.rows > li { border-bottom: 2px solid var(--line); }
.row { display: block; padding: 14px 8px; min-height: 64px; color: var(--ink); text-decoration: none; }
a.row:hover { background: var(--wash); color: var(--ink); }
.row-static { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.row-text { display: block; min-width: 0; flex: 1 1 260px; }
.row-main { display: block; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.row-sub { display: block; color: var(--ink-soft); font-size: 16px; overflow-wrap: anywhere; }
.row-off .row-main { font-weight: 400; color: var(--ink-soft); }
/* Settings lists (Locations, Where parts go): a row each, its buttons beside it, Rename folded under it. */
.row-static .actions form { margin: 0; }
.settings-row .fold-row { flex-basis: 100%; margin: 0; }
.settings-row .fold-row summary { min-height: 44px; font-weight: 400; color: var(--ink-soft); }
.rename-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 8px; }
.rename-form input[type="text"] { flex: 1 1 220px; width: auto; margin: 0; }

.block { margin-top: 32px; padding-top: 24px; border-top: 2px solid var(--line); }

.log { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.log li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.log-who { display: block; font-weight: 700; }
.log-what { display: block; overflow-wrap: anywhere; }
.log-meta { display: block; color: var(--ink-soft); font-size: 16px; }

.steps { padding-left: 1.4em; margin: 0 0 16px; }
.steps li { margin-bottom: 6px; overflow-wrap: anywhere; }
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 44px; font-weight: 700; line-height: 1.2;
  padding: 20px 16px; margin: 0 0 20px; text-align: center;
  border: 3px solid var(--ink); border-radius: 8px; background: var(--wash);
}

/* ---- Who's working? ---- */

.names { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.name-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 112px; padding: 12px 16px;
  border: 3px solid var(--ink); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font-size: 26px; font-weight: 700; line-height: 1.2; text-decoration: none; overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.name-btn:hover { background: var(--wash); color: var(--ink); }
.name-btn:active { background: var(--ink); color: #fff; }

/* ---- The PIN keypad ---- */

.page > .keypad-screen { max-width: 360px; margin: 0 auto; text-align: center; }
.keypad-screen .alert { text-align: left; }
.pin-form label { font-size: 20px; margin-top: 0; }
.input-pin { max-width: 9em; margin: 0 auto; text-align: center; font-size: 28px !important; }
.dots { display: flex; justify-content: center; gap: 18px; margin: 12px 0 20px; }
.dots span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); background: var(--card); }
.dots span.on { background: var(--ink); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.key {
  min-height: 84px; border: 3px solid var(--ink); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 34px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.key:hover { background: var(--wash); }
.key:active { background: var(--ink); color: #fff; }
.key-word { font-size: 20px; }
.pin-form .btn-main { margin-top: 20px; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Jobs: booking in, the board, the job page ---- */

.btn-wide { width: 100%; }
.actions form { margin: 0; }
.aside-small { margin-top: 16px; }
.link-danger { color: var(--danger); }
.prose { white-space: pre-line; }
.job-title .reg-big { display: inline-block; margin-left: 8px; }

/* One tap per name: the mechanic row on the form and on the job page. */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: var(--target); padding: 8px 18px;
  border: 2px solid var(--line-strong); border-radius: 28px; margin: 0 !important; font-weight: 600 !important; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip:has(input:checked) { border-color: var(--main); background: var(--main); color: var(--main-ink); }
.chip:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 2px; }

/* Folded-away notes. */
.fold { margin-top: 20px; }
.fold summary { display: flex; align-items: center; min-height: var(--target); font-weight: 700; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "▸"; margin-right: 10px; color: var(--ink-soft); }
.fold[open] summary::before { content: "▾"; }
.fold textarea { margin-top: 6px; }

/* Booking in: the one box (a reg or a name), what it found, the matches under it, and the
   new-car fields that open when the car is not here yet. */
.input-big { font-size: 22px; }
.car-known { margin: 8px 0 0; min-height: 1.5em; }
.car-known .car-reg { display: block; font-size: 26px; font-weight: 700; }
.car-choices .match { margin-bottom: 10px; }
.car-choices .choice-car { margin-left: 32px !important; }
.for-customer { margin: 16px 0 8px; font-weight: 700; }
/* A car with no reg yet: its word where the reg goes, and a quiet mark. */
h1 .tag, .car-reg .tag, .row-main .tag { vertical-align: middle; }
.board-row .cell-reg .tag { display: block; width: max-content; margin: 2px 0 0; font-size: 15px; }
.add-reg { margin-top: 0; }
.add-reg .input-code { max-width: 12em; }
fieldset.new-car { margin: 20px 0 0; padding: 16px 16px 4px; border: 2px solid var(--line); border-radius: 12px; }
fieldset.new-car legend { font-weight: 700; padding: 0 6px; }
fieldset.new-car > label:first-of-type { margin-top: 0; }
.choices-list { margin-top: 8px; }
.new-customer { padding: 4px 0 8px 12px; border-left: 4px solid var(--line); margin: 0 0 8px; }
.open-job { margin-top: 20px; padding: 12px 16px; border-radius: 8px; background: #fff3d6; border-left: 8px solid #e0b24a; }
.open-job .hint { color: var(--ink); }
.open-job .choice { background: var(--card); }

/* Find's vehicle rows carry "Book in" for the office. */
.row-with-action { display: flex; align-items: center; gap: 12px; }
.row-with-action .row { flex: 1 1 auto; min-width: 0; }
.row-with-action .btn { flex: none; margin-right: 8px; }

/* The board's filter row. */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid var(--line); }
.tabs a {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 14px; margin-bottom: -2px;
  color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 4px solid transparent;
}
.tabs a .count { margin-left: 6px; }
.tabs a:hover { background: var(--wash); }
.tabs a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }
/* The board's location taps (one per location working, and All): pills, so they read apart from the tabs under them. */
.tabs-where { border-bottom: 0; gap: 8px; margin-bottom: 10px; }
.tabs-where a { margin-bottom: 0; padding: 0 16px; border: 2px solid var(--line-strong); border-radius: 999px; }
.tabs-where a[aria-current="page"] { border-color: var(--ink); background: var(--wash); }

/* Statuses: a quiet tint each, never a red. */
.status-tag { display: inline-block; padding: 0 8px; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.6; border: 1px solid var(--line); background: var(--wash); color: var(--ink-soft); vertical-align: 1px; }
.status-waiting_for_parts { background: #fff3d6; border-color: #e0b24a; color: #6b4a00; }
.status-ready_to_start, .status-done { background: var(--ok-wash); border-color: #7fb98f; color: var(--ok-ink); }
.status-in_progress, .status-diagnosed { background: #e5eef9; border-color: #8fb0dc; color: #083a70; }
.status-invoiced, .status-cancelled, .status-booked_in { background: var(--wash); border-color: var(--line); color: var(--ink-soft); }
h2 .status-now { padding: 2px 12px; border-radius: 8px; border: 1px solid var(--line); }
.board-group { margin-top: 24px; }
.board-group h3 { display: inline-block; margin: 0 0 10px; padding: 2px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 19px; }

/* The board: cards on a phone or a tablet, one big tap each; a table on a wide screen. */
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.board-head { display: none; }
.board-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; min-height: 72px;
  border: 2px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none;
}
a.board-row:hover { background: var(--wash); color: var(--ink); }
.board-row .cell-number { font-weight: 700; }
.board-row .cell-reg { font-size: 22px; font-weight: 700; grid-column: 1; }
.board-row .cell-days { grid-column: 2; grid-row: 1; text-align: right; color: var(--ink-soft); font-size: 16px; white-space: nowrap; }
.board-row .cell-car, .board-row .cell-customer { grid-column: 1 / -1; color: var(--ink-soft); font-size: 16px; }
.board-row .cell-complaint { grid-column: 1 / -1; margin-top: 4px; overflow-wrap: anywhere; }
/* Where the job is, under what's wrong: only when the board shows jobs from two locations. */
.board-row .cell-where { display: block; color: var(--ink-soft); font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.board-row .cell-mechanic, .board-row .cell-waiting { grid-column: 1 / -1; font-size: 16px; }
/* On a card, an empty mechanic or waiting-on line says nothing: leave it out. */
.board-row .cell-mechanic.empty, .board-row .cell-waiting.empty { display: none; }
.board-row .cell-mechanic::before { content: "Mechanic: "; color: var(--ink-soft); }
.board-row .cell-waiting::before { content: "Waiting on: "; color: var(--ink-soft); }
.board-row .cell-car::before { content: ""; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #e0a420; vertical-align: -1px; }
.marked .cell-days { color: #6b4a00; font-weight: 600; }

/* The status row on the job page: the next step first and biggest. */
.moves { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.moves form { margin: 0; }
.moves .btn-next { min-height: 72px; padding: 8px 28px; font-size: 20px; flex-basis: 100%; }
.give-to { margin-top: 20px; }
.give-to fieldset.choices { margin-top: 0; }

/* ---- Parts: the lines on a job, the add form, the line page, Parts in, the board's count ---- */

/* The parts count on a card sits with "waiting on"; past due gets the same quiet amber mark. */
.board-row .cell-parts { grid-column: 1 / -1; font-size: 16px; }
.board-row .cell-parts.empty { display: none; }
.board-row .cell-parts::before { content: "Parts: "; color: var(--ink-soft); }
.board-row .cell-parts.overdue { color: #6b4a00; font-weight: 600; }
.board-row .cell-parts .overdue-word { font-weight: 400; }
/* The job book's page: a heading per day inside "booked in". */
.day-heading { margin: 14px 0 8px; font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.day-heading + .board-list { margin-bottom: 4px; }

/* A line as a row: the part, its number small under it, the supplier and where it is. */
.parts-rows .row-main { font-weight: 600; }
.parts-rows .struck, .part-title.struck { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.parts-rows .row-off .row-sub { color: var(--ink-soft); }
.part-number { display: inline-block; margin-left: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.part-status-ordered, .part-status-needed { background: #fff3d6; border-color: #e0b24a; color: #6b4a00; }
.part-status-received, .part-status-fitted { background: var(--ok-wash); border-color: #7fb98f; color: var(--ok-ink); }
.part-status-not_needed { background: var(--wash); border-color: var(--line); color: var(--ink-soft); }
.parts-row { display: flex; align-items: center; gap: 12px; }
.parts-row .row { flex: 1 1 auto; min-width: 0; }
/* On a phone or the tablet a row is one tap into the line; the button shows on a wide screen. */
.parts-row-action { display: none; flex: none; margin: 0 8px 0 0; }
.add-part { margin-top: 16px; }
.unfitted-note { margin-top: 8px; }
/* The lines not come yet beside "Done": each named, with It came and Not needed. */
.not-come { margin-top: 8px; }
.not-come .rows { margin-bottom: 8px; }
.not-come .row-static { padding: 8px; }
.not-come .row-sub { display: block; }
.not-come .actions { margin: 0; }
.not-come .actions form { margin: 0; }
.where-now { margin: 0; }
.to-go-back .go-back-supplier { margin: 16px 0 6px; font-size: 19px; }
.car-reg-inline { font-size: 26px; }

/* How many: minus, the number, plus. */
.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper input { max-width: 6em; text-align: center; margin: 0; }
.stepper .stepper-btn { min-width: var(--target); padding: 0 16px; font-size: 26px; }
.chip-stock:has(input:checked) { background: var(--ok-ink); border-color: var(--ok-ink); }
.new-supplier { margin-top: 8px; }
.actions-save { margin-top: 24px; }
.actions-save .btn-main { margin-top: 0; min-width: 10em; }
.move-form .place-choice { margin: 0 0 8px; }
.move-form .chips { margin-bottom: 8px; }
.move-form input[type="text"] { margin-bottom: 12px; }
.moves .move-form { flex-basis: 100%; }

/* Parts in: tick what arrived. */
.tick-list .rows { border-top: 0; }
.tick-list legend { margin-bottom: 4px; }
.tick-list .row-tick { padding: 10px 8px; }
.tick-list .row-tick .row-main { font-weight: 600; }
.tick-list .tick-all { border-bottom: 2px solid var(--line); }
/* How many came, for a line of 2 or more: under the name, in line with it. */
.came { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px 50px; }
.came input { max-width: 4em; text-align: center; margin: 0; }
.came .stepper-btn { min-width: var(--target); min-height: var(--target); padding: 0 14px; font-size: 26px; }
.came-of { color: var(--ink-soft); }
.move-form .came { margin: 0 0 12px; }
.move-form .came input[type="text"] { margin: 0; }
.fold-small { margin: 0 0 6px 50px; }
.fold-small summary { min-height: 44px; font-weight: 400; color: var(--ink-soft); }
.fold-small input { margin-top: 4px; }

/* Advisories: the words big, how it stands under them, the buttons under that. */
.advisories-block h3 { margin: 18px 0 8px; font-size: 19px; }
.advisories > li { padding: 14px 8px; }
.advisory-words { margin: 0; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.advisory-closed .advisory-words { font-weight: 400; }
.advisory .row-sub { margin: 0 0 10px; }
.advisory .advisory-actions { margin: 0; }
.advisory .advisory-more { margin: 8px 0 0; }
.advisory .advisory-more form { margin: 4px 0 12px; }
.advisory .advisory-more .btn { margin-top: 8px; }
.advisory-done { background: var(--ok-wash); border-color: #7fb98f; color: var(--ok-ink); vertical-align: middle; }
.advisory-raise { margin-top: 20px; }
.advisory-raise .actions-save { margin-top: 12px; }
.advisories-closed { margin-top: 24px; }
.advisory-not-done { margin-top: 8px; }
.advisory-not-done .rows { margin-bottom: 8px; }
.advisory-not-done .row-static { padding: 8px; }
.advisories-offer { margin: 20px 0 12px; }

/* ---- Your look (the office screens) ---- */

.two { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.look-sample { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; margin: 8px 0 20px; background: var(--card); }
.look-sample .bar-in { min-height: 64px; padding: 6px 16px; }
.look-sample .powered { margin-right: 0; }
.look-sample-body { padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.look-sample-body .btn { margin: 0; }
/* The sample's link is only a picture of one (a real link here would be a target under 56px). */
.sample-link { color: var(--main); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.look-sample-body .sample-current { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 12px; font-weight: 600; border-bottom: 4px solid var(--accent); }
.look-logo-box { display: flex; align-items: center; min-height: 72px; padding: 16px; border-radius: 8px; margin: 0 0 8px; }
.look-logo-box.on-dark { background: var(--ev-ink); }
.look-logo-box.on-light { background: var(--paper); border: 1px solid var(--line); }
.look-logo-box img { max-width: 100%; }
.look-logo-box.on-dark .bar-name { color: var(--ev-silver); }
.look-logo-box.on-light .bar-name { color: var(--ink); }
/* A round logo stays round, and its hover ring is round too. */
.bar-brand .bar-logo.bar-logo-round, .look-logo-box .bar-logo.bar-logo-round, .bar-logo.bar-logo-round { border-radius: 50%; }
/* The logo's framing: drag in the frame, zoom with the slider; the frame is the logo's own shape, a square or a circle. */
.logo-framing { margin: 20px 0 8px; }
.logo-framing h3 { margin: 0 0 12px; font-size: 19px; }
.logo-framing-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; margin: 0 0 8px; }
.logo-frame { --ratio: 1; position: relative; flex: none; width: min(100%, 360px, calc(220px * var(--ratio))); aspect-ratio: var(--ratio); overflow: hidden; border-radius: 8px; cursor: grab; touch-action: none; }
.logo-frame:active { cursor: grabbing; }
.logo-frame.on-dark { background: var(--ev-ink); }
.logo-frame.on-light { background: var(--paper); outline: 1px solid var(--line-strong); }
.logo-frame:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.logo-frame[data-shape="circle"] { border-radius: 50%; }
.logo-frame img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.logo-framing-controls { flex: 1; min-width: 240px; }
.logo-framing-controls input[type="range"] { display: block; width: 100%; max-width: 320px; min-height: var(--target); margin: 0 0 12px; padding: 0; border: 0; background: none; accent-color: var(--accent); }
fieldset.choices-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
fieldset.choices-inline legend { width: 100%; }
fieldset.choices-inline .choice { margin: 0 !important; align-items: center; }
.file-drop { padding: 8px 12px 12px; margin: 0 -12px; border: 2px dashed transparent; border-radius: 12px; }
.file-drop.over { border-color: var(--accent); background: var(--wash); }
/* A file dragged over a page with nowhere to put it: the page says so, and the drop is ignored. */
.drop-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 18, 0.55); pointer-events: none; }
.drop-overlay[hidden] { display: none !important; }
.drop-overlay p { max-width: 28em; padding: 24px 28px; margin: 0; border: 3px dashed var(--accent); border-radius: 16px; background: var(--card); color: var(--ink); font-size: 20px; font-weight: 700; text-align: center; }
.photo { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.photo-small { max-width: 320px; max-height: 120px; }
.colour-row { display: flex; gap: 10px; align-items: stretch; }
.colour-row input[type="text"] { max-width: 10em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.colour-row input[type="color"] { width: 72px; min-height: var(--target); padding: 4px; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--card); cursor: pointer; }
.contrast { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.contrast strong { color: var(--ink); }
.contrast-bad, .contrast-bad strong { color: var(--danger); }
.two + .hint { margin-top: 16px; }
.form-inline { margin-top: 8px; }

/* ---- Dark pages: sign in and set up, before any garage is known ---- */

.page-dark { background: var(--ev-ink); color: var(--ev-silver); }
.page-dark .bar { border-bottom: 0; }
.page-dark .page { min-height: calc(100vh - 72px); }
.page-dark .page > .narrow { margin: 20px auto 0; max-width: 460px; }
.page-dark h1, .page-dark h2 { color: var(--ev-paper); }
/* "Workshop by Escape Velocity" above the heading on Sign in, Set up and the invite page. */
.product-line { margin: 0 0 8px; font-family: var(--ev-font-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ev-mist); }
.page-dark .form label { color: var(--ev-paper); }
.page-dark .quiet, .page-dark .hint { color: var(--ev-mist); }
.page-dark a { color: var(--ev-silver); text-decoration-color: var(--ev-blue); }
.page-dark a:hover { color: var(--ev-paper); text-decoration-color: var(--ev-paper); }
.page-dark input[type="text"], .page-dark input[type="email"], .page-dark input[type="password"] { background: #fff; border-color: var(--ev-mist); color: var(--ev-ink); }
.page-dark :focus-visible { outline-color: var(--ev-blue); }
/* Show on a dark page: the box is white there, so the button keeps the brand's ink on white. */
.page-dark .pw-toggle { color: var(--ev-ink); background-image: linear-gradient(var(--ev-slate), var(--ev-slate)); }
.page-dark .pw-toggle:hover { background-color: var(--ev-haze); }
.page-dark .pw-toggle:focus-visible { outline-color: var(--ev-blue); }
.page-dark .btn-main { background: var(--ev-paper); border-color: var(--ev-paper); color: var(--ev-ink); }
.page-dark .btn-main:hover { background: #fff; border-color: #fff; color: var(--ev-ink); }

/* ---- Wider screens ---- */

@media (min-width: 700px) {
  .two { grid-template-columns: 1fr 1fr; }
  .moves .btn-next { flex-basis: auto; min-width: 16em; }
  .moves .move-form { flex-basis: auto; }
  .board-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .powered { flex: 0 0 auto; margin-left: 20px; margin-right: calc(-1 * min(50px, 10px + max(0px, (100vw - 1100px) / 2))); padding-bottom: 0; }
}

@media (min-width: 1000px) {
  .board-list { display: block; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
  .board-list > li { border-bottom: 1px solid var(--line); }
  .board-list > li:last-child { border-bottom: 0; }
  /* Nine columns that fit the box from 1000px up (the box is 988px wide at 1024, 1064 at 1280):
     the fixed ones add up to 53em plus the gaps, so nothing is ever hidden. "Parts", "How long"
     and the reg keep their room; the car, the customer, what's wrong and "waiting on" give way
     and are cut with an ellipsis. */
  .board-head, .board-row {
    display: grid; grid-template-columns: 4em 7em minmax(5em, 1fr) minmax(6em, 1fr) minmax(8em, 2fr) minmax(5em, 1fr) 6em minmax(6em, 1fr) 6em;
    gap: 0 10px; align-items: center;
    padding: 8px 12px; min-height: 64px; border: 0; border-radius: 0; font-size: 16px;
  }
  .board-head { background: var(--wash); font-weight: 700; min-height: 48px; }
  .board-row .cell-number, .board-row .cell-reg, .board-row .cell-car, .board-row .cell-customer, .board-row .cell-complaint,
  .board-row .cell-mechanic, .board-row .cell-parts, .board-row .cell-waiting, .board-row .cell-days, .board-row .cell-mechanic.empty,
  .board-row .cell-parts.empty, .board-row .cell-waiting.empty {
    display: block; grid-column: auto; grid-row: auto; margin: 0; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 16px;
  }
  .board-row .cell-reg { font-size: 16px; white-space: normal; }
  .board-row .cell-reg .tag { font-size: 15px; }
  .board-row .cell-days { color: var(--ink-soft); }
  .board-row .cell-car, .board-row .cell-customer { color: var(--ink); }
  .board-row .cell-mechanic::before, .board-row .cell-waiting::before, .board-row .cell-parts::before { content: ""; }
  .board-row .cell-parts.overdue { color: #6b4a00; }
  .board-row .cell-parts .overdue-word { display: none; }
  .marked .cell-days { color: #6b4a00; }
  .parts-row-action { display: block; }
}

@media (min-width: 700px) {
  h1 { font-size: 32px; }
  .h-big { font-size: 40px; }
  .page { padding-top: 32px; }
  .log-wide li { display: grid; grid-template-columns: 11em 1fr; column-gap: 20px; }
  .log-wide .log-who { grid-row: span 2; }
  .cols { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .page > .keypad-screen { max-width: 400px; }
  .key { min-height: 92px; }
}

/* A tablet on its side is short: keep the whole keypad on screen. */
@media (min-width: 700px) and (max-height: 860px) {
  .keypad-screen .h-big { font-size: 32px; margin-bottom: 8px; }
  .dots { margin: 8px 0 14px; }
  .key { min-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .bar-logo { transition: none; }
}

@media print {
  .top { position: static; box-shadow: none; }
  .nav, .form-bar, .toast { display: none !important; }
}

/* ---- Garages (the operator's screen) ---- */

/* A card per garage: two side by side on a wide screen. */
.garage-cards { margin-top: 24px; }
@media (min-width: 900px) { .garage-cards { grid-template-columns: 1fr 1fr; } }
.garage-name { margin-bottom: 12px; overflow-wrap: anywhere; }
.garage-name .tag { margin-left: 4px; }
.garage-card .actions { margin-top: 4px; }
.garage-card .actions form { margin: 0; }
.garage-card .actions .btn { margin: 0; }
.garage-ended { background: var(--wash); }
.tag-demo { background: #fff3d6; border-color: #e0b24a; color: #4a3300; }
.card-made { margin: 24px 0; border-color: var(--ok-ink); }
/* An invite link: long, so smaller than a set-up code, and broken anywhere rather than overflowing. */
.code-link { font-size: 17px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; word-break: break-all; padding: 14px 16px; }
.narrow-form { max-width: 40em; }


/* ---- Parts in from a photo of the docket ---- */

/* The photo button on Parts in: the file field sits inside its label, out of sight, so the whole
   button opens the camera (a phone or the tablet) or the file picker (a computer). */
.docket-take { margin: 0 0 24px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--card); }
.docket-take form { margin: 0; }
.btn-photo { min-height: 72px; font-size: 20px; }
/* The field itself out of sight inside its label: as small as .sr-only, which the general rule for
   file fields (full width) would otherwise beat, so it never pushes the page wider. */
.btn-photo, .link-file { position: relative; }
.docket-take input[type="file"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.btn-photo:has(input:focus-visible), .link-file:has(input:focus-visible) { outline: 4px solid var(--focus); outline-offset: 2px; }
.link-file { cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.docket-take.is-sending { opacity: 0.6; }
.docket-sending { margin: 8px 0 0; }
/* What the reader was not sure of: a person checks it. */
.tag-check { background: #fff3d6; border-color: #e0b24a; color: #6b4a00; }
.check-why { color: #6b4a00; }
/* The photo, small: tap to see it whole. */
.docket-thumb { float: right; margin: 0 0 12px 16px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.docket-thumb img { display: block; width: 112px; height: auto; }
.docket-pdf { float: right; margin: 0 0 12px 16px; }
.docket-page .block, .docket-page form.form, .docket-page .rows { clear: both; }
.docket-said .tag { margin-left: 2px; }
.docket-rows .row-tick .row-sub { font-weight: 400; }
.docket-row-info { min-height: 0; padding: 12px 8px; }
.docket-left_out .row-main, .docket-in .row-main { color: var(--ink-soft); }
.docket-line-actions { margin: 0 0 12px 8px; }
.docket-match { margin: 6px 0 12px; }
.docket-match .chips { margin-bottom: 10px; }
.row-form { margin: 0; }
.row-button { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.row-button:hover { background: var(--wash); }
.dockets-title { font-size: 18px; margin: 20px 0 6px; }
/* The costs page: the photo beside the lines on a wide screen, above them on a phone. */
.docket-costs { display: grid; gap: 24px; }
.docket-photo img { display: block; width: 100%; height: auto; border: 2px solid var(--line); border-radius: 8px; background: var(--card); }
.docket-photo-link { display: block; }
.docket-facts { margin-top: 12px; }
.docket-cost-lines { margin: 16px 0; }
.docket-cost-line { padding: 14px 8px; }
.docket-cost-line .row-main { margin: 0 0 2px; }
.docket-cover { margin: 12px 0 0; padding: 12px; border-left: 4px solid var(--line); background: var(--paper); }
.docket-cover-name { margin: 0 0 6px; font-weight: 600; }
.docket-cover-name a { display: inline-flex; align-items: center; min-height: var(--target); }
/* A part still to come that this docket does not charge for: named, with no box. */
.docket-not-charged { margin: 12px 0 0; padding: 0 12px; border-left: 4px solid var(--line); }
.docket-not-charged a { display: inline-flex; align-items: center; min-height: var(--target); }
@media (min-width: 900px) {
  .docket-costs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .docket-photo { position: sticky; top: calc(var(--top-h, 0px) + 12px); }
}