/* Bravos Motors, house stylesheet: Instruments, the identity of 0.8.2 (dev/spec/work/B7-bravos-identity.md). No framework.
   This is the whole stylesheet. Every font is served from assets/fonts, so no page asks another host for
   anything. The shared components come first; the rules for one screen come last, each scoped to its view.
   The components and the rules for using them are written up in dev/DESIGN.md. */

/* ---------------------------------------------------------- fonts
   Latin subset, woff2, under the SIL Open Font Licence in fonts/OFL.txt. */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/exo-2-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/exo-2-latin-700-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Figures inside a sentence: only the digits and the thousands comma, in JetBrains Mono, so a mileage reads as
   data in a line whose other letters stay in Source Sans 3 as one run of text. The van file's details line. */
@font-face{font-family:"Van Figures";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0030-0039,U+002C}

/* ---------------------------------------------------------- tokens
   The eleven colours of Instruments, 0.8.2 (dev/spec/work/B7-bravos-identity.md, The system). Bravos Red is the needle, the lit
   lamp, the current sector and the action; Brake Red is the only red for text on light grounds. There is no green. */
:root{
  --cabin:#F4F4F2; --dial:#FFFFFF; --bezel:#C9CCD1; --bezel-hi:#FAFAFB; --instrument:#121214; --red:#E3141C; --brake:#B50F16;
  --steel:#6B7075; --graphite:#2A2B2E; --lightbox:#141416; --tint:#FDECEC;
  /* Two steps on the dark grounds, for secondary text and rules on Instrument Black. */
  --cabin-on-instrument:rgba(244,244,242,.64); --rule-on-instrument:rgba(244,244,242,.24);
  --display:"Exo 2","Avenir Next Condensed","Helvetica Neue","Arial Narrow",sans-serif;
  --body:"Source Sans 3","Helvetica Neue","Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --gutter:32px;
  /* The lamps as images, for places with no markup of their own: flashes, field errors, legends (rule 1). */
  --pin-bad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23E3141C' fill-opacity='.22'/%3E%3Ccircle cx='10' cy='10' r='6' fill='%23E3141C'/%3E%3C/svg%3E");
  --pin-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23E3141C' stroke-width='2.2'/%3E%3C/svg%3E");
  --pin-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23121214'/%3E%3C/svg%3E");
  --pin-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23121214' stroke-width='1.6'/%3E%3C/svg%3E");
  /* The empty bezel cell, for an empty state wherever it sits. */
  --cell-empty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Crect x='1.5' y='1.5' width='37' height='43' rx='2' fill='%23F4F4F2' stroke='%23C9CCD1'/%3E%3Cpath d='M3 3.5 H37' stroke='%23FAFAFB'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:var(--cabin);color:var(--instrument);font-family:var(--body);font-size:15px;line-height:1.5;font-synthesis:style;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;font-style:italic;line-height:1.1;letter-spacing:0}
b,strong{font-weight:600}
th{font-weight:500}
img{max-width:100%}
a{color:var(--brake);font-weight:600;text-decoration:none}
a:hover{color:var(--instrument)}
p a,li a,dd a,.hint a,.flash a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--instrument);outline-offset:2px;box-shadow:0 0 0 8px rgba(201,204,209,.55)}
::selection{background:rgba(227,20,28,.28)}
.mono{font-style:normal;font-family:var(--mono);font-size:.93em;font-weight:500;white-space:nowrap}
.muted{color:var(--steel)}
.right{text-align:right}
.label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.h-hero{font-family:var(--display);font-size:60px;font-weight:700;line-height:.92;letter-spacing:-.01em}
.h-page{font-family:var(--display);font-size:40px;font-weight:700;line-height:1.05}
.h-section{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.15}
.h-card{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:50;padding:10px 14px;border-radius:2px;background:var(--red);color:#FFFFFF}
.skip:focus{top:12px}
.icon{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------- frame */
.app{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto;width:100%;min-width:0;padding:24px var(--gutter) 48px}
footer.appfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:14px var(--gutter) 24px;
  border-top:1px solid var(--bezel);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--steel)}

/* ---------------------------------------------------------- top bar
   Instrument Black, 64px, the lockup image at 40px, then the links for the role, then the person. */
.topbar{background:var(--instrument);color:var(--cabin)}
.topbar :focus-visible{outline-color:var(--bezel-hi)}
.topbar-in{display:flex;align-items:center;gap:44px;height:64px;padding-inline:var(--gutter)}
/* The lockup is an image of the bar lockup (B7 step 4): 40px high in the top bar, its width from the file, and 28px in the
   phone header. On install and the error screens it is the light file at the height the page asks for; on the four sign in
   screens it is the dark file over the film (The Two Films, 0.11.1). */
.lockup{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.lockup-img{display:block;max-width:100%;height:auto}
.topbar .lockup-img{width:auto;height:40px}
.topnav{display:flex;align-items:stretch;align-self:stretch;gap:26px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{display:flex;align-items:center;gap:7px;flex:none;padding-top:3px;border-bottom:3px solid transparent;
  color:var(--cabin);font-size:15px;font-weight:500;white-space:nowrap}
.topnav a:hover{color:var(--cabin);border-bottom-color:var(--rule-on-instrument)}
.topnav a.on{border-bottom-color:var(--red)}
/* The ring is drawn inside the link, so while it has focus the link takes 6px more each side and gives it back in its
   margin: nothing moves, and the ring clears the first and last letters. */
.topnav a:focus-visible{outline-offset:-3px;padding-inline:6px;margin-inline:-6px}
.count{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:2px;background:var(--red);color:#FFFFFF;
  font-family:var(--mono);font-size:12px;font-weight:600;line-height:18px;text-align:center}
.topuser{display:flex;align-items:center;gap:16px;flex:none;margin-left:auto;min-width:0}
.me{display:flex;align-items:center;gap:10px;min-width:0}
.me-initials{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1.5px solid rgba(244,244,242,.5);border-radius:2px;
  font-family:var(--display);font-size:13px;font-weight:700;line-height:1}
.me-text{display:flex;flex-direction:column;min-width:0}
.me-name{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;line-height:17px}
.me-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:15px;color:var(--cabin-on-instrument)}
.signout{margin:0}
.signout button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--rule-on-instrument);border-radius:2px;
  background:transparent;color:var(--cabin);font:500 14px/1 var(--body);white-space:nowrap;cursor:pointer}
.signout button:hover{border-color:var(--cabin)}
/* The driver's bar: My van and Sign out, which become a bar along the foot of a phone. */
.tabbar{display:flex;align-items:stretch;align-self:stretch;gap:24px;flex:none}
.tabbar .signout{display:flex}
.tabbar a,.tabbar .signout button{display:flex;align-items:center;gap:8px;min-height:44px;padding:3px 0 0;border:0;border-bottom:3px solid transparent;
  border-radius:0;background:transparent;color:var(--cabin);font:500 15px/1 var(--body);white-space:nowrap;cursor:pointer}
.tabbar a:hover,.tabbar .signout button:hover{color:var(--cabin);border-bottom-color:var(--rule-on-instrument)}
.tabbar a.on{border-bottom-color:var(--red)}
.tabbar a:focus-visible,.tabbar button:focus-visible{outline-offset:-3px}

/* ---------------------------------------------------------- depot bar
   Only on a screen that already chooses a depot. The pills are the .filters links, which wrap under each other beside
   the label when the bar is narrower than they are, so no depot is ever out of sight. */
.depotbar{display:flex;align-items:flex-start;gap:16px;min-height:52px;padding:9px var(--gutter);border-bottom:1px solid var(--bezel)}
.depotbar .label{display:flex;align-items:center;flex:none;min-height:32px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.depotbar .filters{flex:1 1 0;min-width:0;margin:0}
.depotbar .filters a{max-width:100%;white-space:normal}
.filters a{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid var(--bezel);border-radius:2px;
  background:var(--dial);color:var(--instrument);font-size:14px;font-weight:500;white-space:nowrap}
.filters a:hover{border-color:var(--instrument);color:var(--instrument)}
.filters a.on{background:var(--instrument);border-color:var(--instrument);color:var(--cabin)}
.filters a .n{font-family:var(--mono);font-size:12px;color:var(--steel)}
.filters a.on .n{color:var(--cabin-on-instrument)}
.filters .sep{flex:none;width:1px;margin:4px 6px;background:var(--bezel)}

/* ---------------------------------------------------------- page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--bezel);box-shadow:0 1px 0 var(--bezel-hi)}
.page-head>div{min-width:0}
.page-head .eyebrow{display:block;margin:0 0 4px;font-family:var(--mono);font-size:13px;font-weight:500;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.page-head h1{font-size:40px;line-height:1.05;overflow-wrap:anywhere}
.page-head h1:has(.plate){line-height:1.35}
.page-head h1 .plate{margin-right:.2em;font-size:26px;line-height:26px;padding:7px 12px;border-width:1.5px;border-radius:2px}
.page-head.big h1{font-size:60px;line-height:.92;letter-spacing:-.01em}
.page-head .sub{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--steel)}
.page-head .sub .mono{color:var(--instrument)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
/* The back link has no box, so its chevron lines up with the title when the buttons wrap under it, and its words end
   on the cards' right edge when it is the only button. */
.page-head .actions .btn.quiet:first-child{padding-inline:4px 12px;margin-left:-8px}
.page-head .actions .btn.quiet:last-child{margin-right:-13px}

/* ---------------------------------------------------------- buttons
   Primary is Bravos Red with white words, the one main action. Danger is Instrument Black: nothing here is deleted. Liability is a
   Bravos Red ring with Brake Red words, kept for a charge. Quiet has no box. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--bezel);
  border-radius:2px;background:var(--dial);box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08);color:var(--instrument);font:600 14px/1.2 var(--body);text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--cabin);color:var(--instrument)}
.btn .icon{width:18px;height:18px}
.btn.primary{background:var(--red);border-color:var(--red);color:#FFFFFF;box-shadow:none}
.btn.primary:hover{background:var(--brake);border-color:var(--brake)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--instrument);box-shadow:none}
.btn.quiet:hover{background:rgba(18,18,20,.06)}
.btn.danger{background:var(--instrument);border-color:var(--instrument);color:var(--cabin);box-shadow:none}
.btn.danger:hover{background:var(--graphite);border-color:var(--graphite)}
.btn.liability{background:var(--dial);border:2px solid var(--red);color:var(--brake);box-shadow:none}
.btn.liability:hover{background:var(--tint)}
.btn.block{display:flex;width:100%}
.btn.big{min-height:56px;font:italic 700 19px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.btn[disabled],.btn.off{opacity:.45;cursor:not-allowed}
.btn.off{pointer-events:none}
/* The focus ring's Bezel glow, which each button's own shadow would otherwise replace. */
.btn:focus-visible{box-shadow:0 0 0 8px rgba(201,204,209,.55)}

/* ---------------------------------------------------------- cards, used sparingly */
.card{background:var(--dial);border:1px solid var(--bezel);border-radius:2px;box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08);margin-bottom:20px;min-width:0}
.card-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;padding:14px 20px 12px;border-bottom:1px solid var(--bezel)}
.card-h h2{font-size:18px;line-height:22px}
.card-h .hint{margin:0;font-size:13px;color:var(--steel)}
.card-h a{font-size:13px}
.card-b{padding:16px 20px}
.card-b>:first-child{margin-top:0}
.card-b>:last-child{margin-bottom:0}
.lightbox{background:var(--lightbox);color:var(--cabin);border-radius:2px}

/* ---------------------------------------------------------- tables
   36px rows on Bezel rules, figures right aligned in JetBrains Mono. */
.tbl-scroll{overflow-x:auto}
/* Inside a card, a faint shade at an edge says the table carries on sideways. */
.card .tbl-scroll{background:linear-gradient(to right,var(--dial) 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--dial) 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(18,18,20,.16),rgba(18,18,20,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(18,18,20,.16),rgba(18,18,20,0)) right center/12px 100% no-repeat scroll}
table.t{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
table.t th{height:34px;padding:8px 12px 6px;border-bottom:1px solid var(--bezel);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;text-align:left;vertical-align:bottom;white-space:nowrap;color:var(--steel)}
table.t td{height:36px;padding:7px 12px;border-bottom:1px solid var(--bezel);vertical-align:middle}
table.t th:first-child,table.t td:first-child{padding-left:20px}
table.t th:last-child,table.t td:last-child{padding-right:20px}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--bezel-hi)}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
table.t td.num{font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap}
table.t td.mono{font-size:13px;white-space:nowrap}
table.t a{color:var(--instrument);font-weight:600}
table.t a:hover{color:var(--brake)}
/* A plate chip in a row is 21px tall, the room a 36px row leaves inside its padding and rule, so a row holding a van
   is no taller than the rows beside it. */
table.t .plate{padding-block:2px;line-height:15px;vertical-align:top}

/* ---------------------------------------------------------- plate chip
   White plate, black mono characters, a thin dark keyline. Every registration is shown this way. */
.plate{font-style:normal;display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border:1px solid var(--instrument);border-radius:2px;background:#FFFFFF;
  color:var(--instrument);font-family:var(--mono);font-size:13px;font-weight:600;line-height:16px;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
a:hover .plate{background:var(--cabin)}
/* Inside a sentence, as in a message, a refusal or an import report, the chip sits on the line's baseline, compact
   enough that its line is no taller than the lines around it. */
:is(.flash,.field-err,.hint,.import-list) .plate{padding-block:1px;line-height:15px;vertical-align:baseline}
.plate.lg{font-size:32px;line-height:32px;padding:10px 15px;border-width:1.5px;border-radius:2px}
.plate.xl{font-size:40px;line-height:40px;padding:12px 18px;border-width:1.5px;border-radius:2px}

/* ---------------------------------------------------------- status pins, from pill()
   A tell-tale lamp and a word, never colour alone (rule 1). The capitals are set here; the word is printed as given. */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-size:14px;font-style:italic;font-weight:700;line-height:18px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;color:var(--instrument);vertical-align:middle}
.pill .pin{display:block;flex:none;width:16px;height:16px}
.pill.grey{color:var(--steel)}
.pin-box{display:inline-flex;align-items:center;min-height:28px;padding:0 10px 0 8px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial);vertical-align:middle}
.on-ink .pill{color:var(--cabin)}
.on-ink .pill.ok .lamp{fill:var(--cabin)}
.pin-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:13px}
.pin-legend span{display:inline-flex;align-items:center;gap:7px}
.pin-legend span::before{content:"";width:16px;height:16px;flex:none;background:center/contain no-repeat}
.pin-legend .bad::before{background-image:var(--pin-bad)}
.pin-legend .warn::before{background-image:var(--pin-warn)}
.pin-legend .ok::before{background-image:var(--pin-ok)}
.pin-legend .info::before{background-image:var(--pin-info)}

/* ---------------------------------------------------------- figures */
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:20px;background:var(--dial);border:1px solid var(--bezel);border-radius:2px;box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08);overflow:hidden}
.tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 20px 16px;border-left:1px solid var(--bezel);color:inherit;text-decoration:none}
.tile:first-child{border-left:0}
.tile .k{font-family:var(--display);font-size:14px;font-weight:700;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--instrument)}
.tile .v{margin-top:6px;font-family:var(--display);font-size:48px;font-weight:700;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tile .d{font-size:13px;line-height:18px;color:var(--steel)}
a.tile:hover{background:var(--bezel-hi);color:inherit}
a.tile:hover .k{color:var(--brake)}
a.tile:focus-visible{outline-offset:-3px}
/* Figures are odometers (rule 5 of 0.8.2): each character in a bezel cell of its own, JetBrains Mono 600; a comma, a pound sign
   or a decimal point sits narrow and bare between them. Tables keep plain mono figures. */
.odo{display:inline-flex;align-items:stretch;gap:2px;font-family:var(--mono);font-weight:600;font-style:normal;line-height:1;
  font-variant-numeric:tabular-nums;vertical-align:baseline}
.odo-cell{display:inline-grid;place-items:center;min-width:.74em;padding:.1em .08em;border:1px solid var(--bezel);border-radius:2px;
  background:var(--dial);color:var(--instrument);font-weight:600;box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.06)}
.odo-cell.narrow{min-width:0;padding-inline:0;border-color:transparent;background:none;box-shadow:none}
.tile .v .odo{font-size:.72em}

/* ---------------------------------------------------------- flash messages
   A lamp and a sentence. A refusal gets a heavier keyline, and the field it names a red ring (rule 2 of 0.8.2: red is the lit lamp and the action). */
.flash{position:relative;margin-bottom:16px;padding:11px 14px 11px 42px;border:1px solid var(--bezel);border-radius:2px;background:var(--tint);
  color:var(--instrument);font-size:14.5px;line-height:1.45}
.flash::before{content:"";position:absolute;left:14px;top:13px;width:16px;height:16px;background:var(--pin-info) center/contain no-repeat}
.flash.ok::before{background-image:var(--pin-ok)}
.flash.warn::before,.flash.bad::before{background-image:var(--pin-warn)}
.flash.bad{border:2px solid var(--instrument);padding:10px 13px 10px 41px}
.flash.bad::before{left:13px;top:12px}

/* ---------------------------------------------------------- forms
   Every refusal state stays: .has-err on the field, .field-err under it, aria-invalid on the input. */
form.stack{display:flex;flex-direction:column;gap:16px;max-width:440px}
form.stack.wide{max-width:600px}
label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--instrument)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial);color:var(--instrument);
  font:400 16px/1.3 var(--body)}
select{appearance:none;padding-right:38px;cursor:pointer;
  background:var(--dial) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5 L10 12.5 L15 7.5' fill='none' stroke='%23121214' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center/18px 18px no-repeat}
textarea{min-height:92px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--steel)}
input:focus,select:focus,textarea:focus{outline:2px solid transparent;border-color:var(--instrument);box-shadow:0 0 0 1px var(--instrument),0 0 0 5px rgba(227,20,28,.32)}
input[readonly]{background:var(--cabin);color:var(--steel)}
input[type=file]{display:block;width:100%;font:400 15px/1.3 var(--body);color:var(--instrument)}
input[type=file]::file-selector-button{margin-right:12px;min-height:40px;padding:0 14px;border:1px solid var(--instrument);border-radius:2px;background:var(--dial);
  color:var(--instrument);font:600 14px/1 var(--body);cursor:pointer}
.hint{margin-top:6px;font-size:13px;line-height:1.45;color:var(--steel)}
.field-err{margin-top:6px;font-size:14px;font-weight:600;line-height:1.4;color:var(--brake)}
.field-err::before{content:"";display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-1px;background:var(--pin-warn) center/contain no-repeat}
.has-err input,.has-err select,.has-err textarea,[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.has-err input:focus,.has-err select:focus,.has-err textarea:focus,[aria-invalid="true"]:focus{border-color:var(--instrument);box-shadow:0 0 0 1px var(--instrument),0 0 0 5px rgba(227,20,28,.32)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grp-h{margin-top:8px;padding-bottom:8px;border-bottom:1px solid var(--bezel);font-family:var(--display);font-size:15px;font-weight:700;line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;color:var(--instrument)}
.grp-h:first-of-type{margin-top:0}
.formfoot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:4px}
/* The van form, the driver form, the import and the depot form: one column the width of the form, so the head, its link and
   the cards line up. */
:is([data-screen="vehicle_form"],[data-screen="driver_form"],[data-screen="fleet_import"],[data-screen="depot_form"],[data-screen="job_form"],[data-screen="job_signoff"],[data-screen="jobs_booked"],[data-screen="invoice_show"],[data-screen="invoice_send"],[data-screen="estimate_show"],[data-screen="credit_note_show"]) main{max-width:calc(760px + 2 * var(--gutter))}
:is([data-screen="vehicle_form"],[data-screen="driver_form"],[data-screen="fleet_import"],[data-screen="depot_form"],[data-screen="job_form"],[data-screen="job_signoff"],[data-screen="jobs_booked"],[data-screen="invoice_show"],[data-screen="invoice_send"],[data-screen="estimate_show"],[data-screen="credit_note_show"]) form.stack{max-width:none}

/* ---------------------------------------------------------- lists of facts */
dl.kv{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;font-size:14px;line-height:20px}
dl.kv dt,dl.kv dd{padding:9px 0;border-bottom:1px solid var(--bezel)}
dl.kv dt{padding-right:16px;color:var(--steel)}
dl.kv dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:0}
dl.kv dt:first-of-type,dl.kv dd:first-of-type{padding-top:0}
.two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}

/* ---------------------------------------------------------- timeline
   Lamp markers on a Bezel line: Steel for a period past, a Bravos Red lamp for the period open now, a lit lamp for open liability. */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding:8px 0}
.tl li::before{content:"";position:absolute;left:6.5px;top:0;bottom:0;width:1px;background:var(--bezel)}
.tl li:first-child::before{top:20px}
.tl li:last-child::before{bottom:auto;height:20px}
.tl li:only-child::before{display:none}
.tl .dot{position:relative;z-index:1;width:14px;height:16px;margin-top:4px;background:center/contain no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Ccircle cx='7' cy='8' r='5' fill='%236B7075' stroke='%23FFFFFF' stroke-width='3' paint-order='stroke'/%3E%3C/svg%3E")}
.tl .dot.now{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Ccircle cx='7' cy='8' r='5' fill='%23E3141C' stroke='%23FFFFFF' stroke-width='3' paint-order='stroke'/%3E%3C/svg%3E")}
.tl .dot.bad{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Ccircle cx='7' cy='8' r='6.5' fill='%23E3141C' fill-opacity='.22'/%3E%3Ccircle cx='7' cy='8' r='4.5' fill='%23E3141C'/%3E%3C/svg%3E")}
.tl .who{font-size:15px;font-weight:600;line-height:20px}
.tl .when{font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:18px;color:var(--steel)}

/* ---------------------------------------------------------- empty states: one honest line, under an empty cell */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px;text-align:center}
.empty::before{content:"";width:40px;height:46px;background:var(--cell-empty) center/contain no-repeat}
.empty :is(h2,h3){font-size:20px;line-height:1.2}
.empty p{margin:0;max-width:52ch;font-size:14px;line-height:1.5;color:var(--steel)}

/* ---------------------------------------------------------- sign in code, shown once */
.code-out{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.code-out .big{padding:14px 20px;border:1px dashed var(--steel);border-radius:2px;background:var(--cabin);font-family:var(--mono);font-size:40px;font-weight:600;
  line-height:1;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.code-out p{margin:0;max-width:56ch;font-size:14px;color:var(--steel)}
.code-out form{margin:0}

/* ---------------------------------------------------------- the cluster (B7 step 5, 0.8.2)
   The fleet at a glance. Per depot a gauge of the vans needing attention (rule 6: both figures are the depot's), its count and the
   three figures with their lamps, then one plate chip per van with its lamp. The state class is the lamp's kind; the chip's word is
   read aloud with the rest of its label, and the plate and the initials are shown. */
.nest{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px 32px}
.nest-group{min-width:0;max-width:100%}
.nest-label{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;font-family:var(--display);font-size:15px;font-weight:700;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase}
.nest-label small{font-family:var(--body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--steel)}
.nest-gauge{display:grid;justify-items:start;gap:4px;margin:4px 0 12px}
.gauge{display:block;flex:none}
.gauge-face{fill:var(--instrument);stroke:var(--bezel);stroke-width:1.5}
.gauge-ticks line{stroke:var(--bezel-hi);stroke-width:1.5}
.gauge-needle{stroke:var(--red);stroke-width:3;stroke-linecap:round}
.gauge-hub{fill:var(--red)}
.nest-gauge-count{margin:0;font-size:14px;line-height:1.3;color:var(--steel)}
.nest-gauge-count b{font-family:var(--display);font-size:22px;font-style:italic;font-weight:700;color:var(--instrument)}
.nest-gauge-figures{margin:0}
.nest-cells{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cell{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 10px;border:1px solid var(--bezel);
  border-radius:2px;background:var(--dial);box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08);color:var(--instrument);text-decoration:none}
.cell::before{content:"";flex:none;width:16px;height:16px;background:var(--pin-info) center/contain no-repeat}
.cell.bad::before{background-image:var(--pin-bad)}
.cell.warn::before{background-image:var(--pin-warn)}
.cell.ok::before{background-image:var(--pin-ok)}
.cell:hover{background:var(--bezel-hi);color:var(--instrument)}
.cell b{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.04em;line-height:1}
.cell .plate{font-size:13px}
.cell-word{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------- custody bands
   A van's recorded history as bands in proportion to time: drivers alternate Graphite and Bravos Red, the
   workshop is hatched, a period with no keeper is a Bezel band. A strip of more than one band is at least 640px
   wide and opens at its right-hand end, today, when it is wider than the screen, then scrolls back through the
   history. A strip of one band has nothing to scroll back to, so it is the width of the screen. */
.bands-scroll{overflow-x:auto;padding-top:14px;direction:rtl}
.bands-scroll:has(.band-mark){padding-top:30px;padding-right:10px}
.bands-scroll>.bands-wrap{min-width:640px;direction:ltr}
.bands-scroll>.bands-wrap:has(>.bands>li:only-child){min-width:0}
.bands-wrap{position:relative;min-width:0;container:van-bands/inline-size}
.bands{display:flex;height:48px;margin:0;padding:0;list-style:none;border-radius:2px;overflow:hidden}
/* A band's side space is margin on its contents, not padding, which cannot shrink: padding would hold a short period
   at 28px or more and throw every width out of proportion. The container sizes below are the whole band. */
.band{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:3px;padding:0;overflow:hidden;white-space:nowrap;
  background:var(--graphite);color:var(--cabin);container-type:inline-size}
.band.alt{background:var(--red);color:#FFFFFF}
.band.workshop{background:repeating-linear-gradient(135deg,rgba(107,112,117,.55) 0 1.5px,var(--bezel) 1.5px 5px);color:var(--instrument)}
.band.none{background:var(--bezel);color:var(--instrument)}
.band>:first-child{margin-left:14px}
.band>span{min-width:0;margin-right:14px}
.band>span+span{margin-left:-14px}
.band b{flex:none;font-family:var(--display);font-size:22px;font-weight:700;line-height:1}
.band span{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600}
/* The day count in the band's own text colour, and quieter on Graphite, so it is clear on every band. */
.band .mono{flex:none;font-size:13px}
.band:not(.alt,.workshop,.none) .mono{color:var(--cabin-on-instrument)}
@container (max-width:50px){.band b{display:none}}
@container (max-width:118px){.band span{display:none}}
@container (max-width:180px){.band .mono{display:none}}
/* Each date under a join is placed by the view twice, n- for the narrowest strip and w- for a strip of 1000px or
   more: l starts at the join, c centres on it, r ends at it, and x leaves it out. Today, the last, is in Instrument Black. */
.band-dates{position:relative;height:18px;margin-top:6px;font-family:var(--mono);font-size:12px;font-weight:500;line-height:18px;color:var(--steel)}
.band-dates span{display:none;position:absolute;top:0;white-space:nowrap}
.band-dates span:is(.n-l,.n-c,.n-r){display:block}
.band-dates .n-l{transform:none}
.band-dates .n-c{transform:translateX(-50%)}
.band-dates .n-r{transform:translateX(-100%)}
.band-dates span:last-child{color:var(--instrument);font-weight:600}
@container van-bands (min-width:1000px){
  .band-dates span.w-x{display:none}
  .band-dates span:is(.w-l,.w-c,.w-r){display:block}
  .band-dates .w-l{transform:none}
  .band-dates .w-c{transform:translateX(-50%)}
  .band-dates .w-r{transform:translateX(-100%)}
}
/* An open damage case on the date it was raised: the only red on the strip. */
.band-mark{position:absolute;top:-6px;height:54px;width:2px;margin-left:-1px;background:var(--red)}
.band-mark::before{content:"";position:absolute;left:-8px;top:-18px;width:18px;height:18px;background:var(--pin-bad) center/contain no-repeat}

/* ---------------------------------------------------------- photographs, 0.7.0
   A photograph sits on Lightbox, the one place that colour is used, whole: the caption strip the server stamped under
   it stays in sight. The thumbnail opens the photograph itself, through its one authorised address. In the photograph
   field, the photo kept from a refusal and the photo chosen before it is sent are shown large enough to read what they
   show, since a refusal can ask for the figure a photo shows. */
.photo-thumb{display:block;width:100%;max-width:240px;padding:4px;border-radius:2px;background:var(--lightbox);line-height:0}
.photo-thumb img{display:block;width:100%;height:auto;border-radius:2px}
.photo-thumb:hover{background:var(--instrument)}
.photo-kept,.photo-preview{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;gap:8px}
.photo-kept{margin-bottom:10px}
.photo-preview{margin-top:10px}
.photo-preview[hidden]{display:none}
:is(.photo-kept,.photo-preview) .photo-thumb{flex:none;max-width:480px}
:is(.photo-kept,.photo-preview) .hint{flex:none;margin:0}
.photo-field input[type=file]{min-height:58px;padding:8px;border:1px dashed var(--bezel);border-radius:2px;background:var(--cabin)}
.photo-field input[type=file]:hover{border-color:var(--steel)}
/* A replaced odometer is a kind of reading, not a state: words beside the reading's own pin, never a pin. */
.reading-kind{font-size:14px;font-weight:600;line-height:18px;color:var(--instrument)}

/* ==========================================================================================================
   The signed handover, 0.8.0: the pieces more than one of its screens use.
   ========================================================================================================== */

/* ---------------------------------------------------------- the step header of a handover, 0.8.0
   The page head of 6.1 with the step's title after the plate, which wraps under the plate as a whole, then the seven steps as the brief's
   stepper, drawn since 0.8.2 as a run of sectors (rule 7, below): each sector carries its number and its name under it, and on a phone, where
   seven names do not fit, they are read aloud only, since the title names the step now. */
.handover-head .handover-title{display:inline-block}
/* A process is a run of sectors (rule 7 of 0.8.2): a thin bar split into sectors, Instrument Black for those done, Bravos Red for the
   one in progress and Bezel for those to come, the words under the bar with the current one in Brake Red. */
.sectors{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;margin:0;padding:0;list-style:none}
.sector{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:500;line-height:16px;color:var(--steel)}
.sector-bar{display:block;height:6px;border-radius:2px;background:var(--bezel)}
.sector.done .sector-bar{background:var(--instrument)}
.sector.now .sector-bar{background:var(--red)}
.sector-n{font-family:var(--mono);font-size:12px;font-weight:600;line-height:1}
.sector.done{color:var(--instrument)}
.sector.now{color:var(--brake);font-weight:600}
.sector-name{overflow-wrap:anywhere}
.handover-steps{margin:0 0 22px}

/* ---------------------------------------------------------- a small form that opens in place, 0.8.0
   Stop this handover on the manager's steps and on the record, Report the van stolen and M&S ended the hire on the van file, and Add a
   correction on the record: each closed until it is opened, so it is never sent by mistake, its summary a line with a chevron. */
:is(.handover-stop,.handover-record-stop,.van-stolen,.van-hire-ended,.handover-correction,.job-form)>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  cursor:pointer;font-size:14px;font-weight:600;color:var(--instrument);list-style:none}
:is(.handover-stop,.handover-record-stop,.van-stolen,.van-hire-ended,.handover-correction,.job-form)>summary::-webkit-details-marker{display:none}
:is(.handover-stop,.handover-record-stop,.van-stolen,.van-hire-ended,.handover-correction,.job-form)>summary::before{content:"";width:8px;height:8px;margin:0 4px 0 2px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(-45deg)}
:is(.handover-stop,.handover-record-stop,.van-stolen,.van-hire-ended,.handover-correction,.job-form)[open]>summary::before{transform:rotate(45deg);margin-top:-4px}
:is(.handover-stop,.handover-record-stop,.van-stolen,.van-hire-ended,.handover-correction,.job-form)>summary:hover{color:var(--brake)}
/* Stopping a handover sits at the foot of the page, and open it is a card of its own with the reason. */
:is(.handover-stop,.handover-record-stop){margin-top:28px;border-top:1px solid var(--bezel);padding-top:8px}
:is(.handover-stop,.handover-record-stop) form.stack{max-width:none;margin-top:10px;padding:16px 20px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial)}
/* The van file's two forms and the correction open under their summary, as wide as a form is, with a short note above their fields. */
:is(.van-stolen,.van-hire-ended,.handover-correction,.job-form) form.stack{padding:6px 0 18px 22px}
.van-form-note{margin:0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}

/* ---------------------------------------------------------- the signature pad, 0.8.0, on the countersignature and the driver's signing page
   A white box the width of its form with a faint line to sign on, the name over it and Clear beside the name; the typed name only where the box
   cannot work.
   The box takes no scroll or zoom from a finger inside it, so a stroke is never read as a turn of the page. */
.signature-pad [hidden]{display:none!important}
.signature-pad .sig-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.signature-pad .sig-head label{margin:0;font-size:15px}
.signature-pad .sig-clear{flex:none;min-height:36px;padding:4px 10px;margin-right:-10px}
.signature-pad canvas.sig{display:block;width:100%;height:180px;border:1px solid var(--bezel);border-radius:2px;touch-action:none;cursor:crosshair;
  background:linear-gradient(var(--bezel),var(--bezel)) 20px calc(100% - 40px)/calc(100% - 40px) 1px no-repeat,var(--dial)}
.signature-pad.has-err canvas.sig{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.signature-pad .sig-typed .hint{margin-top:6px}
.signature-pad .field-err{margin-top:8px}

/* ---------------------------------------------------------- the agreement block, 0.8.0
   The version's own markup (13.12), set as the draft of the agreement sets it, on a white sheet under its version line: filled fields in a
   dashed mono box, brackets settled once on a Bezel wash with an Instrument Black rule under, numbered clauses on a hanging column. Rules are scoped to
   .agreement, since the version's class names, kv among them, are also the names of shared components. */
.agreement-block{margin-bottom:20px;min-width:0;background:var(--dial);border:1px solid var(--bezel);border-radius:2px}
.agreement-version{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding:12px 20px;border-bottom:1px solid var(--bezel)}
.agreement-version .mono{font-size:14px}
.agreement{padding:4px 28px 28px;font-size:16px;line-height:1.55;color:var(--instrument);overflow-wrap:break-word}
.agreement :is(p,dl,dd,ol,ul,h3){margin:0}
.agreement h3{font-family:var(--display);font-weight:700;text-wrap:balance}
.agreement p{text-wrap:pretty}
/* A field runs on inside its sentence, each line of it in its own dashed box, so a long field, such as the driver's contract, never leaves the
   words after it stranded on a line of their own; a photograph in a field is a box of its own. */
.agreement .f{padding:.04em .38em;border:1px dashed var(--steel);border-radius:2px;background:var(--cabin);font-family:var(--mono);font-size:max(13px,.84em);
  font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--instrument);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.agreement .f:empty{display:none}
.agreement .nowrap{white-space:nowrap}
.agreement .f:has(>.photo-thumb){display:inline-block;max-width:100%;padding:3px;vertical-align:bottom}
.agreement .ph{padding:0 .22em;border-bottom:2px solid var(--instrument);background:var(--bezel);font-family:var(--display);font-size:.95em;font-weight:600;letter-spacing:.02em;
  color:var(--instrument);-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:anywhere}
.agreement .f>.photo-thumb{width:120px;max-width:100%;text-decoration:none}
.agreement .ag-head{display:grid;gap:6px;margin-top:22px}
.agreement .ag-title{font-family:var(--display);font-size:36px;font-weight:700;line-height:1.02}
.agreement .ag-sub{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.2;color:var(--steel)}
.agreement .ag-ref{font-size:15px;color:var(--steel)}
.agreement .parties{display:grid;grid-template-columns:10.5rem minmax(0,1fr);margin-top:18px;border-top:1px solid var(--instrument)}
.agreement .parties :is(dt,dd){padding:11px 0;border-bottom:1px solid var(--bezel)}
.agreement .parties dt{padding:14px 16px 11px 0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.agreement .points{margin-top:26px;padding:16px 20px 14px;border:1.5px solid var(--instrument)}
.agreement .points h3{font-size:20px;line-height:1.15}
.agreement .points ul{display:grid;margin-top:6px;padding:0;list-style:none}
.agreement .points li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--bezel)}
.agreement .points li:last-child{border-bottom:0}
.agreement .points .cl{font-family:var(--mono);font-size:13px;color:var(--steel);white-space:nowrap}
.agreement .points .aside{margin-top:4px;padding-top:8px;border-top:1px solid var(--bezel);font-size:14px;color:var(--steel)}
.agreement .clause{margin-top:34px}
.agreement .clause>h3{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:baseline;margin-bottom:10px;font-size:23px;line-height:1.15}
.agreement .clause>h3 .n{font-family:var(--mono);font-size:17px;font-weight:600}
.agreement .subs{display:grid;gap:10px;padding:0;list-style:none}
.agreement .subs>li{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:baseline}
.agreement .sn{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--steel);font-variant-numeric:tabular-nums}
.agreement .subs>li>div{display:grid;gap:8px;min-width:0}
.agreement .subs p{max-width:64ch}
.agreement .items{display:grid;gap:4px;padding:0;list-style:none}
.agreement .items li{display:grid;grid-template-columns:2.1rem minmax(0,1fr);align-items:baseline;max-width:64ch}
.agreement .items .il{font-family:var(--mono);font-size:13.5px;color:var(--steel)}
/* The facts of 2.1 and of each damage: the version's kv, left aligned with every row ruled, not the right aligned facts of 6.10. */
.agreement dl.kv{grid-template-columns:10.5rem minmax(0,1fr);border-top:1px solid var(--bezel);font-size:inherit;line-height:inherit}
.agreement dl.kv :is(dt,dd){padding:8px 0;border-bottom:1px solid var(--bezel)}
.agreement dl.kv dt{padding-right:12px;font-size:14.5px;color:var(--steel)}
.agreement dl.kv dd{font-weight:400;text-align:left}
.agreement .damage{padding:12px 16px 14px;border:1px dashed var(--steel);background:var(--cabin)}
.agreement .damage .f{background:var(--dial)}
.agreement .damage .dh{margin-bottom:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.agreement .quote{max-width:64ch;margin:0;padding:8px 14px;border-left:3px solid var(--instrument);background:var(--cabin)}
.agreement .lab{display:block;margin-bottom:3px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.agreement .signs{margin-top:40px;padding-top:20px;border-top:2px solid var(--instrument)}
.agreement .signs>h3{font-size:23px}
.agreement .sign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:14px}
.agreement .sign{display:grid;align-content:start;gap:10px;min-width:0;padding:16px 18px 10px;border:1px solid var(--bezel)}
.agreement .sign-k{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.25}
.agreement .stmt{font-size:15px}
.agreement .sigline{display:flex;align-items:flex-end;min-height:58px;padding-bottom:6px;border-bottom:1.5px solid var(--instrument)}
.agreement .sign dl{display:grid;grid-template-columns:minmax(0,1fr)}
.agreement .sign dt{padding:8px 0 0;border-top:1px solid var(--bezel);font-size:13px;color:var(--steel)}
.agreement .sign dd{padding:3px 0 8px;font-size:14.5px}
.agreement .opt{display:block;margin-top:4px;font-size:13.5px;color:var(--steel)}
.agreement .copy-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:28px;padding-top:10px;border-top:1px solid var(--instrument);
  font-family:var(--mono);font-size:12.5px;color:var(--steel)}
/* The words of 6.5 alone, for the driver whose time with the van ends. */
.agreement.agreement-clause{padding-top:16px}
.agreement.agreement-clause .ag-sub{margin-bottom:10px}

/* ---------------------------------------------------------- the signing PIN, 0.8.0
   A group of its own, as the brief's PIN card is: its label as the title, the words for a first signature before the boxes, and four
   digits set wide in JetBrains Mono. */
.pin-field{display:flex;flex-direction:column;align-items:stretch;padding:16px 16px 14px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial)}
.pin-field>label{margin:0 0 4px;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.2}
.pin-field>label[for="pin_again"]{margin:16px 0 6px;font-family:var(--body);font-size:14px;font-weight:600}
.pin-field>.hint{margin:0 0 12px;font-size:14px}
.pin-field input[type=password]{width:100%;max-width:11rem;min-height:52px;padding:8px 14px;font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.45em}
.pin-field.has-err{border-color:var(--red)}

/* ---------------------------------------------------------- the damage list of a handover, 0.8.0
   partials/damage_list.php, on the walk round, the signing page and the record. What every list shares: each item a grid of its words and its
   photographs, the number and how it was recorded quieter than where it is. Each of the three screens sets out the items in its own group. */
.damage-list{margin:0;padding:0;list-style:none}
.damage-item{display:grid}
.damage-what{min-width:0}
.damage-what p{margin:0}
.damage-n{font-size:13px;color:var(--steel)}
.damage-place{font-weight:600;line-height:1.35}
.damage-recorded{display:flex;flex-wrap:wrap;align-items:center;color:var(--steel)}

/* ---------------------------------------------------------- the photo van, 0.12.7 (B15)
   partials/van3d.php and assets/van3d.js, on the walk rounds and the damage reports, and read only on the damage case's page: six photographs
   of one plain white long wheelbase, high roof van, in assets/van/, in the place of the 3D van of 0.8.0, his decision of 02-10-2026
   (dev/DESIGN.md section 24). Over the photograph lies the marks' layer, in the photograph's own pixels: the registration on the plate, the
   pins, the crosshair and the part under the pointer; van3d.js zooms and moves the two together. */

.van3d [hidden]{display:none!important}
.van3d-live{display:grid;gap:12px}

/* ---------------------------------------------------------- the stage
   The photograph keeps its proportions at every width: the stage takes the shape of the view it shows, from its data-view. A finger moving
   up or down the photograph scrolls the page until the van is zoomed in. The stage, the photograph and its marks move only as van3d.js moves
   them, never by a transition, so what the script measures is what is shown. The zoom level, the part under the pointer and the zoom buttons
   are in a bar under the photograph, never over it. */
.van3d-frame{border:1px solid var(--bezel);border-radius:2px;overflow:hidden}
.van3d-stage{position:relative;overflow:hidden;aspect-ratio:1600/905;background:#FFFFFF;touch-action:pan-y;cursor:crosshair;transition:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.van3d-stage:is([data-view="ns"],[data-view="os"],[data-view="roof"]){aspect-ratio:1600/686}
.van3d-stage:is([data-view="rear"],[data-view="front"]){aspect-ratio:1600/1195}
.van3d-stage.zoomed{touch-action:none}
.van3d-photo,.van3d-marks{position:absolute;left:0;top:0;width:100%;height:100%;display:block;transform-origin:0 0;pointer-events:none;transition:none}
.van3d-marks{overflow:visible}
.van3d-hov{fill:rgba(227,20,28,.12);stroke:rgba(18,18,20,.26);stroke-width:1px;vector-effect:non-scaling-stroke}
.van3d-plate{font-family:var(--mono);font-weight:600;fill:var(--instrument);text-anchor:middle;dominant-baseline:central}
/* A pin's number, drawn in the marks' layer at the size it is seen, at every zoom. */
.van3d-n{font:600 10.5px/1 var(--mono);fill:var(--instrument);text-anchor:middle}
.van3d-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 8px;border-top:1px solid var(--bezel);background:var(--cabin)}
.van3d-hint{font-family:var(--mono);font-size:12px;color:var(--steel)}
.van3d-stage.zoomed+.van3d-bar .van3d-hint{display:none}
.van3d-zoomlvl{font:600 12px/1 var(--mono);color:var(--steel)}
.van3d-zname{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--instrument)}
.van3d-zoomctl{display:flex;gap:6px;margin-left:auto}
.van3d-zoomctl button{width:44px;height:44px;border:1px solid var(--bezel);border-radius:2px;background:#FFFFFF;color:var(--instrument);
  font:600 20px/1 var(--mono);cursor:pointer;display:grid;place-items:center;padding:0}
.van3d-zoomctl button.van3d-fit{width:auto;padding:0 10px;font:600 13px/1 var(--body)}
.van3d-zoomctl button:hover{border-color:var(--instrument)}
/* The damage case's van (B14's page): read only, with nothing to tap; with scripts on, the chips show the other sides. */
.van3d.readonly{display:grid;gap:12px}
.van3d.readonly .van3d-stage{cursor:default}
.van3d-inside-note{margin:0;font-size:14px;line-height:1.45;color:var(--steel)}
.van3d-inside-note b{color:var(--instrument)}

/* ---------------------------------------------------------- the spot, the sides and inside the van */
.van3d-aimbar{display:grid;gap:8px;background:var(--dial);border:2px solid var(--instrument);border-radius:2px;padding:10px 12px}
.van3d-where{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.15}
.van3d-detail,.van3d-note{font-size:13.5px;color:var(--steel);line-height:1.45}
.van3d-aimacts{display:flex;flex-wrap:wrap;gap:8px}
.van3d-views,.van3d-inside{display:flex;flex-wrap:wrap;gap:6px}
.van3d-inside .van3d-note{flex-basis:100%}
.van3d-chip{min-height:36px;padding:0 10px;border:1px solid var(--bezel);border-radius:2px;background:#FFFFFF;
  font:500 14px/1 var(--body);color:var(--instrument);cursor:pointer}
.van3d-chip:hover{border-color:var(--instrument)}
.van3d-chip.on{background:var(--instrument);color:var(--cabin);border-color:var(--instrument)}

/* ---------------------------------------------------------- the list, for scripts off and anyone who cannot tap the van */
.van3d-list{margin-top:12px}
.van3d-list summary{cursor:pointer;font-weight:600;color:var(--brake);min-height:24px}
.van3d-list[open] summary{margin-bottom:8px}
.van3d-list .fld{margin-bottom:10px}

/* ---------------------------------------------------------- pages before sign in
   Every page before sign in is a column: the layout prints any message first. On install and the error screens each page
   moves its own header above the message with order; the four sign in screens place theirs over the film (The Two Films, 0.11.1). */
body.entry main{display:flex;flex-direction:column;padding:0 16px 48px}
body.entry main>.centre{width:100%;margin:0 auto}
.centre{max-width:440px;margin:9vh auto 0}
/* ---------------------------------------------------------- the search box of the top bar, 0.9.0
   A registration: a van on the fleet opens its file, anything else is searched in the vehicle list. Cabin words on a faint Cabin ground,
   radius 2px, its focus ring the bar's own; 36px tall between the links and the person where all three fit one row, from 1513px (measured
   22-09-2026: at 1512px and below the links would be pushed out of sight), and on a row of its own under the bar below that, its field
   44px tall at 880 and below. Hidden while a driver holds the manager's phone to sign. */
.topsearch{display:flex;align-items:center;flex:0 1 260px;min-width:0;height:36px;margin:0;border:1px solid rgba(244,244,242,.24);border-radius:2px;
  background:rgba(244,244,242,.1)}
.topsearch:hover{border-color:rgba(244,244,242,.5)}
.topsearch:focus-within{outline:3px solid var(--bezel-hi);outline-offset:2px}
.topsearch input{flex:1 1 auto;min-width:0;height:100%;padding:0 10px 0 0;border:0;border-radius:0;background:transparent;color:var(--cabin);
  font:400 15px/1 var(--body);-webkit-appearance:none;appearance:none}
.topsearch input::placeholder{color:var(--cabin-on-instrument);opacity:1}
.topsearch input:focus{outline:0;border:0;box-shadow:none}
.topsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.topsearch button{order:-1;display:grid;place-items:center;flex:none;width:38px;height:100%;padding:0;border:0;background:transparent;color:var(--cabin);cursor:pointer}
.topsearch button:focus-visible{outline:0;box-shadow:none}
.topsearch .icon{width:17px;height:17px}
body.staff:is([data-screen="handover_sign"],[data-screen="handover_proxy"]) .topsearch{display:none}
@media (min-width:1241px) and (max-width:1512px){
  /* The lockup, the links and the person keep their row of 64px, as at any width above 1240, and the search box takes the row under it. */
  .staff .topbar-in{flex-wrap:wrap;height:auto;row-gap:0}
  .staff .topbar-in>.lockup,.staff .topnav,.staff .topuser{height:64px}
  .staff .topsearch{order:4;flex:0 0 100%;margin:4px 0 12px}
}
@media (max-width:1240px){
  .staff .topsearch{order:4;flex:0 0 100%;margin:8px 0 12px}
}
@media (max-width:880px){
  /* 46px with its border, so the field and the button inside are each 44px tall. */
  .topsearch{height:46px}
  .topsearch input{font-size:16px}
  .topsearch button{width:44px}
}

.centre .card-b{padding:24px}

/* ---------------------------------------------------------- narrower screens
   Nothing is wider than the screen at 420px: tables, the nest and the bands scroll inside their own box. */
@media (min-width:1241px){
  /* Room for the first link's focus ring, which reaches 6px past the links' own box. */
  .topnav{padding-inline:6px;margin-inline:-6px}
}
@media (min-width:881px){
  .tabbar a:focus-visible,.tabbar .signout button:focus-visible{padding-inline:6px;margin-inline:-6px}
}
@media (max-width:1100px){
  :root{--gutter:24px}
  .topbar-in{gap:28px}
  .topnav{gap:20px}
  .staff .me-initials{display:none}
  .tiles{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{border-left:0;border-top:1px solid var(--bezel)}
  .tile:nth-child(3n+2),.tile:nth-child(3n+3){border-left:1px solid var(--bezel)}
  .tile:nth-child(-n+3){border-top:0}
}
/* From 1240px down a member of staff's links take a row of their own under the lockup and the person, so every
   link stays in sight; a driver's bar stays one row until 880px. */
@media (max-width:1240px){
  .staff .topbar-in{flex-wrap:wrap;gap:0 14px;height:auto}
  .staff .topbar .lockup{min-height:56px}
  /* The person and Sign out share the lockup's row at any width: the name and role give up room first, with an ellipsis. */
  .staff .topuser{flex:1 1 0;justify-content:flex-end;min-height:56px;gap:10px}
  .topnav{order:3;flex:0 0 calc(100% + 2 * var(--gutter));height:46px;gap:22px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
    border-top:1px solid rgba(244,244,242,.12)}
  .topnav a{min-height:44px}
}
@media (max-width:880px){
  :root{--gutter:16px}
  main{padding:18px var(--gutter) 36px}
  .topbar-in{flex-wrap:wrap;gap:0 14px;height:auto}
  .topbar .lockup{min-height:56px}
  .topuser{min-height:56px;gap:10px}
  .me-name{max-width:40vw}
  .signout button{min-height:44px}
  /* Phone text is never under 13px. */
  table.t th,.me-role,.depotbar .label,footer.appfoot{font-size:13px}
  .me-role{line-height:16px}
  .count{font-size:13px;height:20px;line-height:20px;min-width:20px}
  .driver .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;height:64px;background:var(--graphite)}
  .driver .tabbar .signout{display:block}
  .driver .tabbar a,.driver .tabbar .signout button{flex-direction:column;justify-content:center;gap:4px;width:100%;height:100%;padding:0;
    border-bottom:0;border-top:3px solid transparent;font-size:13px}
  .driver .tabbar a.on{border-top-color:var(--red);color:var(--cabin);font-weight:600}
  .driver .tabbar :focus-visible{outline-color:var(--bezel-hi)}
  .driver .tabbar .icon{width:24px;height:24px}
  body.driver .app{padding-bottom:64px}
  .page-head h1{font-size:32px}
  .page-head.big h1{font-size:44px}
  .page-head h1 .plate{font-size:22px;line-height:22px;padding:6px 10px}
  .band-dates{font-size:13px}
  .h-hero{font-size:44px}
  .h-page{font-size:32px}
  .two{grid-template-columns:minmax(0,1fr)}
  .btn{min-height:44px}
  .filters a,.depotbar .label{min-height:44px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile,.tile:nth-child(3n+2),.tile:nth-child(3n+3){border-left:0;border-top:1px solid var(--bezel)}
  .tile:nth-child(even){border-left:1px solid var(--bezel)}
  .tile:nth-child(-n+3){border-top:1px solid var(--bezel)}
  .tile:nth-child(-n+2){border-top:0}
  .tile .v{font-size:40px}
}
@media (max-width:640px){
  .row2{grid-template-columns:minmax(0,1fr)}
  /* The links wrap onto a second row rather than past the edge; the lockup is 28px high in the phone header. */
  .topnav{flex-wrap:wrap;height:auto;row-gap:0;column-gap:20px;overflow:visible}
  .topbar .lockup-img{height:28px}
  .driver .me-name{max-width:30vw}
  /* A strip that scrolls opens at today. A latest band wider than the screen starts its words 14px inside the screen,
     not out of sight: 100cqw is the band's own width, so the margin is the part of the band off the screen plus 14px.
     A band that fits keeps its 14px, and the words stay clear of a damage raised in recent days at the right-hand end. */
  .bands>li:last-child:not(:only-child)>:first-child{margin-left:max(14px,calc(100cqw - 100vw + 2 * var(--gutter) + 14px))}
  .card-h{padding:12px 16px 10px}
  .card-b{padding:14px 16px}
  table.t th:first-child,table.t td:first-child{padding-left:16px}
  table.t th:last-child,table.t td:last-child{padding-right:16px}
  table.t td{white-space:nowrap}
  .code-out .big{font-size:34px;padding:12px 16px}
  .plate.lg{font-size:26px;line-height:26px;padding:8px 12px}
  .plate.xl{font-size:34px;line-height:34px;padding:10px 14px}
  .centre{margin-top:5vh}
}

/* The signed handover's shared pieces on narrower screens, 0.8.0. */
@media (max-width:880px){
  .handover-steps .sector-n{font-size:13px}
  :is(.handover-stop,.handover-record-stop,.van-stolen,.van-hire-ended,.handover-correction,.job-form)>summary{min-height:44px}
  .handover-stop>summary{font-size:15px}
  .signature-pad .sig-clear{min-height:44px}
  .agreement :is(.parties dt,.damage .dh,.lab,.copy-foot){font-size:13px}
  /* phone text never below 13px, and 44px targets, as every screen */
  .van3d-hint{font-size:13px}
  .van3d-zname,.van3d-zoomlvl{font-size:13px}
  .van3d-aimbar .label{font-size:13px}
  .van3d-chip{min-height:44px}
  .van3d-list summary{display:flex;align-items:center;min-height:44px}
}
@media (max-width:720px){
  .agreement .sign-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* Seven names do not fit a phone: the sectors keep their numbers, and the names are read aloud only. */
  .handover-steps{margin-bottom:18px}
  .handover-steps .sector-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  :is(.handover-stop,.handover-record-stop) form.stack{padding:14px 16px}
  :is(.van-stolen,.van-hire-ended,.handover-correction,.job-form) form.stack{padding-left:0}
  .signature-pad canvas.sig{height:150px}
  .agreement-version{padding:10px 16px}
  .agreement{padding:2px 16px 22px}
  .agreement .ag-title{font-size:28px}
  .agreement .ag-sub{font-size:17px}
  .agreement :is(.parties,dl.kv){grid-template-columns:minmax(0,1fr)}
  .agreement :is(.parties,dl.kv) dt{padding-bottom:0;border-bottom:0}
  .agreement :is(.parties,dl.kv) dd{padding-top:2px}
  .agreement :is(.clause>h3,.subs>li){grid-template-columns:2.6rem minmax(0,1fr)}
  .agreement .clause>h3{font-size:21px}
  .agreement .points{padding:14px 14px 12px}
  .agreement .points li{grid-template-columns:minmax(0,1fr);gap:2px}
  .agreement .damage{padding:10px 12px 12px}
  .agreement .sign{padding:14px 14px 8px}
}

/* ==========================================================================================================
   SCREENS. Rules for one screen only, each scoped with the view name the layout puts on <body> as data-screen,
   so none can reach another screen. They come after every shared rule above, which they refine, and each group
   ends with its own rules for narrower screens.
   ========================================================================================================== */

/* ========================================================== dashboard, vehicle list, inspections and damages
   dashboard.php, fleet_index.php, inspections_index.php, damages_index.php */

/* ---------------------------------------------------------- dashboard
   The figures lead, with a pin on the three that can be open liability or waiting, then the nest, then the list. Open
   damage takes the due pin, his decision of 13-09-2026: an open case is waiting on approval, not open liability. */
[data-screen="dashboard"] .dash-tiles .k{display:flex;align-items:flex-start;align-self:start;gap:8px}
[data-screen="dashboard"] .dash-tiles .k.dash-bad::before,
[data-screen="dashboard"] .dash-tiles .k.dash-warn::before,
[data-screen="dashboard"] .dash-tiles .k.dash-ok::before{content:"";width:16px;height:16px;margin-top:1px;flex:none;background:center/contain no-repeat}
[data-screen="dashboard"] .dash-tiles .k.dash-bad::before{background-image:var(--pin-bad)}
[data-screen="dashboard"] .dash-tiles .k.dash-warn::before{background-image:var(--pin-warn)}
[data-screen="dashboard"] .dash-tiles .k.dash-ok::before{background-image:var(--pin-ok)}

[data-screen="dashboard"] .dash-lead .v{font-size:60px}
/* Each tile takes three rows of the strip's grid, so the labels, the figures and the descriptions of a row of tiles
   share their lines however any of them wraps on a narrow screen. */
[data-screen="dashboard"] .dash-tiles .tile{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
[data-screen="dashboard"] .dash-tiles .v{margin-top:8px}
[data-screen="dashboard"] .dash-tiles .d{padding-top:6px}
[data-screen="dashboard"] .card-h h2{font-size:26px;line-height:30px}
:is([data-screen="dashboard"],[data-screen="cluster"]) .dash-nest .card-h{justify-content:flex-start}
:is([data-screen="dashboard"],[data-screen="cluster"]) .dash-nest .card-b{padding-top:18px}
:is([data-screen="dashboard"],[data-screen="cluster"]) .nest-label{flex-wrap:wrap;row-gap:2px}
/* A keeper that is not a driver is named in words where the initials would be. */
:is([data-screen="dashboard"],[data-screen="cluster"]) .cell b.dash-keeper{font-size:13px;letter-spacing:.04em;text-transform:uppercase}
:is([data-screen="dashboard"],[data-screen="cluster"]) .dash-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:18px;
  padding-top:12px;border-top:1px solid var(--bezel)}
:is([data-screen="dashboard"],[data-screen="cluster"]) .dash-legend p{margin:0;max-width:64ch;font-size:13px;line-height:1.45;color:var(--steel)}
@media (max-width:880px){
  [data-screen="dashboard"] .dash-lead .v{font-size:40px}
  /* A time in the line under a hire's pin keeps the 13px floor of a phone. */
  [data-screen="dashboard"] .dash-hire-end .mono{font-size:13px}
}
@media (max-width:640px){
  [data-screen="dashboard"] .card-h h2{font-size:22px;line-height:26px}
  :is([data-screen="dashboard"],[data-screen="cluster"]) .nest-label small{font-size:13px}
}

/* ---------------------------------------------------------- vehicle list */
[data-screen="fleet_index"] .fleet-empty-actions{justify-content:center}
/* The mileage that counts and its reading's pin on one line, so the row stays 36px: the figures end on one edge, as a column
   of numbers does, and the pins start on one edge after them. */
[data-screen="fleet_index"] .fleet-miles{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;vertical-align:middle}
[data-screen="fleet_index"] .fleet-miles .mono{min-width:7ch;font-size:13px;text-align:right}

/* ---------------------------------------------------------- the dashboard: Handovers today and Hires ending, 0.8.0
   Each count from handover_dashboard_figures() is a pin and its words, kept together at the end of the card's head as the readings count is; how an
   ended hire ended sits under its pin, a line of its own, so the row still reads across, and so do who stopped a handover, when and why. */
[data-screen="dashboard"] :is(.dash-handovers,.dash-hires) .card-h{align-items:center}
[data-screen="dashboard"] .dash-counts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
[data-screen="dashboard"] .dash-hire-end{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--steel)}
[data-screen="dashboard"] .dash-hire-end .mono{color:var(--instrument)}
[data-screen="dashboard"] .dash-stopped{display:block;min-width:24ch;max-width:44ch;margin-top:2px;font-size:13px;line-height:18px;color:var(--steel);white-space:normal}

/* ---------------------------------------------------------- the vehicle list: the keeper and the end of their hire, 0.8.0
   The hire's pin under the keeper's name, so the column is no wider than its longest pin and the van and depot beside it keep one line. */
[data-screen="fleet_index"] td.fleet-keeper{white-space:nowrap}
[data-screen="fleet_index"] .fleet-hire{display:block;margin-top:2px}
[data-screen="fleet_index"] .fleet-hire .pill{vertical-align:top}

/* ========================================================== the van file, the van form and the vehicle import
   fleet_show.php, vehicle_form.php, fleet_import.php */

/* ---------------------------------------------------------- the van head
   The large plate chip beside the make and model, the state pin in its box, and the details line under the name. */
:is([data-screen="fleet_show"],[data-screen="vehicle_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .page-head.van-head{align-items:center;margin-bottom:24px}
:is([data-screen="fleet_show"],[data-screen="vehicle_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .van-head h1{font-size:36px;line-height:38px}
:is([data-screen="fleet_show"],[data-screen="vehicle_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .page-head.van-head h1 .plate{float:left;margin:0 22px 0 0;padding:10px 15px;font-size:32px;line-height:34px;
  border-width:1.5px;border-radius:2px}
:is([data-screen="fleet_show"],[data-screen="vehicle_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .van-head .sub{display:flow-root;margin-top:3px;line-height:20px}
:is([data-screen="fleet_show"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .van-head .pin-box{margin-left:8px;vertical-align:5px}
[data-screen="fleet_show"] .van-miles{font-family:"Van Figures",var(--body)}

/* ---------------------------------------------------------- custody, across the full width
   The heading, its legend and the damage references over the bands; the bands themselves are the shared component. */
[data-screen="fleet_show"] .van-custody{margin-bottom:24px}
[data-screen="fleet_show"] .van-sec-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
[data-screen="fleet_show"] .van-sec-h h2{font-size:22px;line-height:26px}
[data-screen="fleet_show"] .van-sec-h .hint{margin:0}
[data-screen="fleet_show"] .van-sec-h .hint .mono{color:var(--instrument)}
[data-screen="fleet_show"] .van-legend{margin-left:auto;gap:6px 18px}
[data-screen="fleet_show"] .van-legend .van-hatch::before,[data-screen="fleet_show"] .van-legend .van-none::before{height:10px}
[data-screen="fleet_show"] .van-legend .van-hatch::before{background:repeating-linear-gradient(135deg,rgba(107,112,117,.55) 0 1.5px,var(--bezel) 1.5px 4.5px)}
[data-screen="fleet_show"] .van-legend .van-none::before{background:var(--bezel)}
[data-screen="fleet_show"] .van-mark-ref{position:absolute;top:-18px;right:12px;font-family:var(--mono);font-size:12px;font-weight:600;line-height:18px;
  color:var(--instrument);white-space:nowrap}
[data-screen="fleet_show"] .van-mark-ref.after{right:auto;left:14px}
/* No custody row at all: an empty cell and the reason, where the bands would be. */
[data-screen="fleet_show"] .van-bands-empty{display:flex;align-items:center;gap:14px;min-height:56px;margin-top:10px;padding:10px 16px;
  border:1px solid var(--bezel);border-radius:2px;background:var(--dial)}
[data-screen="fleet_show"] .van-bands-empty::before{content:"";flex:none;width:24px;height:28px;background:var(--cell-empty) center/contain no-repeat}
[data-screen="fleet_show"] .van-bands-empty p{margin:0;font-size:14px;line-height:1.45;color:var(--steel)}

/* ---------------------------------------------------------- the cards */
[data-screen="fleet_show"] .van-damage td:first-child,[data-screen="fleet_show"] .van-inspections td:first-child{font-weight:600}
/* An empty card is one line beside its cell, not a tall block. */
[data-screen="fleet_show"] .card .empty{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 16px;padding:16px 20px;text-align:left}
[data-screen="fleet_show"] .card .empty::before{grid-row:span 2;width:30px;height:34px}
[data-screen="fleet_show"] .card .empty h3{font-size:17px;line-height:22px}
[data-screen="fleet_show"] .card .empty p{max-width:none}
[data-screen="fleet_show"] .van-lower{gap:0 20px;align-items:start}
[data-screen="fleet_show"] .van-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin:0}
[data-screen="fleet_show"] .van-facts>div{min-width:0;padding:8px 0 9px;border-top:1px solid var(--bezel)}
[data-screen="fleet_show"] .van-facts>div:nth-child(-n+2){padding-top:0;border-top:0}
[data-screen="fleet_show"] .van-facts dt{font-size:12px;line-height:16px;color:var(--steel)}
[data-screen="fleet_show"] .van-facts dd{margin:2px 0 0;font-size:14px;line-height:20px;font-weight:500;overflow-wrap:anywhere}
[data-screen="fleet_show"] .van-facts dd.mono{font-size:14px}
[data-screen="fleet_show"] .van-facts dd .plate{margin:1px 0 -1px;padding-block:1px}
[data-screen="fleet_show"] .van-facts .van-notes{grid-column:1/-1}
[data-screen="fleet_show"] .van-notes dd{font-weight:400;white-space:pre-line}
@media (min-width:881px){
  /* With no custody timeline beside it, the details card has the whole width, in four columns. */
  [data-screen="fleet_show"] .van-lower>.card:only-child .van-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-screen="fleet_show"] .van-lower>.card:only-child .van-facts>div:nth-child(-n+4){padding-top:0;border-top:0}
}

/* ---------------------------------------------------------- the readings on the van file, 0.7.0
   The buttons for who may use them in the card head, and under it what stands when that is not the latest reading; then every
   reading, most recent first, as a row: its photo, its figure and pin, then who took it, when, and who checked it or returned it and why. */
[data-screen="fleet_show"] .van-readings .card-h{align-items:center;min-height:49px}
[data-screen="fleet_show"] .van-readings .card-h .actions{gap:8px}
[data-screen="fleet_show"] .van-readings .card-h .btn{font-size:14px}
[data-screen="fleet_show"] .van-reading-bar{margin:0;padding:12px 20px;border-bottom:1px solid var(--bezel);font-size:14px;line-height:1.45}
[data-screen="fleet_show"] .van-reading-list{margin:0;padding:0;list-style:none}
[data-screen="fleet_show"] .van-reading{display:grid;grid-template-columns:112px minmax(0,1fr) minmax(0,2.3fr);column-gap:20px;align-items:start;padding:14px 20px;
  border-top:1px solid var(--bezel)}
[data-screen="fleet_show"] .van-reading:first-child{border-top:0}
[data-screen="fleet_show"] .van-no-photos .van-reading{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr)}
[data-screen="fleet_show"] .van-reading-photo{min-width:0}
[data-screen="fleet_show"] .van-reading-photo>.muted{display:grid;place-items:center;height:64px;border:1px dashed var(--bezel);border-radius:2px;font-size:13px}
[data-screen="fleet_show"] .van-reading-what{min-width:0}
[data-screen="fleet_show"] .van-reading-what p{margin:0}
[data-screen="fleet_show"] .van-reading-what .label{display:block;margin-bottom:2px}
[data-screen="fleet_show"] .van-reading-figure{font-size:14px;line-height:1.2}
[data-screen="fleet_show"] .van-reading-figure .odo{font-size:22px;line-height:28px}
[data-screen="fleet_show"] .van-reading-latest .van-reading-figure .odo{font-size:30px;line-height:36px}
[data-screen="fleet_show"] .van-reading-what .van-reading-state{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
[data-screen="fleet_show"] .van-reading-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 20px;margin:0;padding-top:2px}
[data-screen="fleet_show"] .van-reading-facts>div{min-width:0}
[data-screen="fleet_show"] .van-reading-facts dt{font-size:12px;line-height:16px;color:var(--steel)}
[data-screen="fleet_show"] .van-reading-facts dd{margin:2px 0 0;font-size:14px;line-height:20px;font-weight:500;overflow-wrap:anywhere}
[data-screen="fleet_show"] .van-reading-facts dd .mono{font-size:13px}
[data-screen="fleet_show"] .van-reading-facts .van-reading-when{display:block}
[data-screen="fleet_show"] .van-reading-check{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
[data-screen="fleet_show"] .van-reading-reason{grid-column:1/-1}
[data-screen="fleet_show"] .van-reading-reason dd{font-weight:400}

/* ---------------------------------------------------------- the van form and the import
   The column the width of the form is shared with the driver form, in the forms section above. */
/* Registrations, references, dates and money are typed in JetBrains Mono, as they are shown. */
[data-screen="vehicle_form"] :is(#reg,#vin,#weekly_hire,#mot_due){font-family:var(--mono);font-weight:500}
[data-screen="vehicle_form"] #reg{font-weight:600;letter-spacing:.04em}
[data-screen="vehicle_form"] .van-fleet-note{margin:0 0 14px;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="vehicle_form"] .van-fleet-block{margin-top:10px;padding-left:22px;color:var(--instrument);background:var(--pin-warn) left 1px/15px 15px no-repeat}
[data-screen="vehicle_form"] .van-fleet-stays{font-size:13px;color:var(--steel)}
/* Where the mileage field was, a label and a line saying where a mileage is recorded now, his decision of 13-09-2026. */
[data-screen="vehicle_form"] .van-form-label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--instrument)}
[data-screen="vehicle_form"] .van-form-miles .hint{margin-top:0}
[data-screen="fleet_import"] .import-report .card-h .hint.mono{font-size:13px}
/* The four figures run edge to edge under the card head, not as a second frame inside the card. */
[data-screen="fleet_import"] .import-report>.tiles{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:0;border-radius:0}
[data-screen="fleet_import"] .import-report>.tiles:not(:last-child){border-bottom:1px solid var(--bezel)}
[data-screen="fleet_import"] .import-report>.tiles:last-child{border-radius:0 0 2px 2px}
[data-screen="fleet_import"] .import-report .tile{border-top:0;border-left:1px solid var(--bezel)}
[data-screen="fleet_import"] .import-report .tile:first-child{border-left:0}
[data-screen="fleet_import"] .import-group+.import-group{margin-top:22px}
[data-screen="fleet_import"] .import-group h3{font-size:15px;line-height:20px;letter-spacing:.06em;text-transform:uppercase}
[data-screen="fleet_import"] .import-group p{margin:4px 0 0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="fleet_import"] .import-list{margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--bezel)}
[data-screen="fleet_import"] .import-list li{padding:8px 0;border-bottom:1px solid var(--bezel);font-size:14px;line-height:20px;overflow-wrap:anywhere}
[data-screen="fleet_import"] .import-group .import-more{margin-top:10px}
[data-screen="fleet_import"] .import-file input[type=file]{min-height:58px;padding:8px;border:1px dashed var(--bezel);border-radius:2px;background:var(--cabin)}
[data-screen="fleet_import"] .import-file input[type=file]:hover{border-color:var(--steel)}
[data-screen="fleet_import"] .import-note{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--bezel)}
/* The customer the last import gave its vehicles to, 0.9.0, between the head and the figures. */
[data-screen="fleet_import"] .import-customer{border-bottom:1px solid var(--bezel)}
[data-screen="fleet_import"] .import-customer p{margin:0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="fleet_import"] .import-customer strong{color:var(--instrument)}

/* ---------------------------------------------------------- narrower screens */
@media (max-width:880px){
  :is([data-screen="fleet_show"],[data-screen="vehicle_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .van-head h1{font-size:32px;line-height:36px}
  [data-screen="fleet_show"] .van-mark-ref{font-size:13px}
  [data-screen="fleet_show"] .van-reading{grid-template-columns:96px minmax(0,1fr);column-gap:16px}
  [data-screen="fleet_show"] .van-no-photos .van-reading{grid-template-columns:minmax(0,1fr)}
  [data-screen="fleet_show"] .van-reading-photo{grid-row:span 2}
  [data-screen="fleet_show"] .van-reading-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
  /* The link to check a photo keeps its line, with a 44px target. */
  [data-screen="fleet_show"] .van-reading-check{display:inline-block;padding-block:12px;margin-block:-12px}
}
@media (max-width:640px){
  :is([data-screen="fleet_show"],[data-screen="vehicle_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .page-head.van-head h1 .plate{float:none;display:flex;width:max-content;max-width:100%;margin:0 0 12px;
    padding:8px 12px;font-size:26px;line-height:28px}
  :is([data-screen="fleet_show"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) .van-head .pin-box{margin-left:0}
  [data-screen="fleet_show"] .van-legend{margin-left:0;width:100%}
  [data-screen="fleet_show"] .van-facts{grid-template-columns:minmax(0,1fr)}
  [data-screen="fleet_show"] .van-facts>div:nth-child(2){padding-top:8px;border-top:1px solid var(--bezel)}
  [data-screen="fleet_show"] .van-sec-h .hint .mono{font-size:13px}
  [data-screen="fleet_show"] .van-facts dt{font-size:13px}
  [data-screen="fleet_show"] .tl .when{font-size:13px}
  :is([data-screen="vehicle_form"],[data-screen="fleet_import"]) .hint .mono{font-size:13px}
  [data-screen="fleet_import"] .import-report>.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-screen="fleet_import"] .import-report .tile:nth-child(odd){border-left:0}
  [data-screen="fleet_import"] .import-report .tile:nth-child(n+3){border-top:1px solid var(--bezel)}
  [data-screen="fleet_show"] .van-reading-bar{padding:12px 16px}
  [data-screen="fleet_show"] .van-readings .card-h .actions{width:100%;padding-block:4px 2px}
  [data-screen="fleet_show"] .van-readings .card-h .btn{flex:1 1 auto}
  [data-screen="fleet_show"] .van-reading-what .label{font-size:13px}
  [data-screen="fleet_show"] .van-reading{grid-template-columns:80px minmax(0,1fr);column-gap:14px;padding:14px 16px}
  [data-screen="fleet_show"] .van-reading .pill{white-space:normal}
  [data-screen="fleet_show"] .van-reading-facts{grid-template-columns:minmax(0,1fr);gap:8px}
  [data-screen="fleet_show"] .van-reading-facts dt{font-size:13px}
}

/* ---------------------------------------------------------- the van file: Handovers and hires, 0.8.0
   After the custody bands. Who holds the van now, its hire, a theft report and a handover not finished, each label above its words as
   the van's details are; then the register, oldest first, one row for each handover, hire and theft report, every cell starting on the
   row's first line; then the two small forms. */
[data-screen="fleet_show"] .van-register .card-h{align-items:center;min-height:49px}
[data-screen="fleet_show"] .van-register .card-h .actions{gap:8px}
[data-screen="fleet_show"] .van-register .card-h .btn{font-size:14px}
[data-screen="fleet_show"] .van-register-now{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px 28px;margin:0}
[data-screen="fleet_show"] .van-register-now>div{min-width:0}
[data-screen="fleet_show"] .van-register-now>.van-register-wide{grid-column:1/-1;padding-top:14px;border-top:1px solid var(--bezel)}
[data-screen="fleet_show"] .van-register-now dt{font-size:12px;line-height:16px;color:var(--steel)}
[data-screen="fleet_show"] .van-register-now dd{margin:3px 0 0;font-size:15px;font-weight:600;line-height:22px;overflow-wrap:anywhere}
[data-screen="fleet_show"] .van-register-now dd .pill{margin:2px 0}
[data-screen="fleet_show"] .van-register-sub{display:block;font-size:14px;font-weight:400;line-height:20px;color:var(--steel)}
[data-screen="fleet_show"] .van-register-now .van-register-sub{max-width:92ch}
[data-screen="fleet_show"] .van-register-sub .mono{color:var(--instrument)}
[data-screen="fleet_show"] .van-register>.card-b+:is(.empty,.tbl-scroll){border-top:1px solid var(--bezel)}

[data-screen="fleet_show"] .van-register-rows td{padding-block:8px;vertical-align:top}
[data-screen="fleet_show"] .van-register-rows td:is(:nth-child(4),:nth-child(5),:nth-child(6)){white-space:nowrap}
[data-screen="fleet_show"] .van-register-rows .van-register-when span{display:block}
[data-screen="fleet_show"] .van-register-rows td:nth-child(3){min-width:10ch}
[data-screen="fleet_show"] .van-register-rows td .van-register-sub{white-space:nowrap}
[data-screen="fleet_show"] .van-register-rows td .van-register-note{min-width:24ch;max-width:44ch;white-space:normal}
[data-screen="fleet_show"] .van-register-rows .pill{vertical-align:top;margin-top:1px}
[data-screen="fleet_show"] .van-register-ref{font-weight:600}

/* The two fingerprints: their first 12 characters, dotted as a thing that opens, and in full under them in lines of 32. */
[data-screen="fleet_show"] .van-register-fp{min-width:15ch}
[data-screen="fleet_show"] .van-register-fp summary{position:relative;display:flex;flex-direction:column;width:max-content;padding-right:22px;cursor:pointer;list-style:none}
[data-screen="fleet_show"] .van-register-fp summary::-webkit-details-marker{display:none}
[data-screen="fleet_show"] .van-register-fp summary::after{content:"";position:absolute;top:2px;right:0;width:16px;height:16px;transition:transform .15s ease;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5 L10 12.5 L15 7.5' fill='none' stroke='%236B7075' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
[data-screen="fleet_show"] .van-register-fp details[open] summary::after{transform:rotate(180deg)}
[data-screen="fleet_show"] .van-register-sha{font-size:13px;line-height:20px;white-space:nowrap;color:var(--steel)}
[data-screen="fleet_show"] .van-register-sha .mono{color:var(--instrument);text-decoration:underline dotted var(--bezel);text-underline-offset:3px}
[data-screen="fleet_show"] .van-register-fp summary:hover .mono{text-decoration-color:var(--instrument)}
[data-screen="fleet_show"] .van-register-fp dl{margin:8px 0 2px}
[data-screen="fleet_show"] .van-register-fp dt{font-size:12px;line-height:16px;color:var(--steel)}
[data-screen="fleet_show"] .van-register-fp dd{width:32ch;margin:2px 0 8px;font-size:12.5px;line-height:18px;white-space:normal;word-break:break-all;user-select:all}
[data-screen="fleet_show"] .van-register-fp dd:last-child{margin-bottom:0}

[data-screen="fleet_show"] .van-register-forms{padding-block:6px;border-top:1px solid var(--bezel)}
[data-screen="fleet_show"] .van-register-forms>details+details{border-top:1px solid var(--bezel)}

/* The open damage on the van file, since 0.8.0 with the place and the type: the place wraps, so the other cells stay one line. */
[data-screen="fleet_show"] .van-damage td.van-damage-place{min-width:22ch;max-width:44ch}
/* A time or a reference at the end of a line wraps whole onto the next when there is no room, which WebKit does only for a box of its own. */
[data-screen="fleet_show"] :is(.van-register-sub,.van-form-note) .mono{display:inline-block}

@media (max-width:880px){
  [data-screen="fleet_show"] .van-register-now{grid-template-columns:minmax(0,1fr)}
  [data-screen="fleet_show"] .van-register-now>.van-register-wide{grid-column:auto}
  [data-screen="fleet_show"] .van-register-fp summary{min-height:44px}
  /* A fingerprint, shortened or whole, keeps the 13px floor of a phone. */
  [data-screen="fleet_show"] :is(.van-register-sha .mono,.van-register-fp dd){font-size:13px}
  [data-screen="fleet_show"] .van-register-now dt{font-size:13px}
  [data-screen="fleet_show"] .van-register-fp dt{font-size:13px}
}
@media (max-width:640px){
  [data-screen="fleet_show"] .van-register .card-h .actions{width:100%;padding-block:4px 2px}
  [data-screen="fleet_show"] .van-register .card-h .btn{flex:1 1 auto}
  [data-screen="fleet_show"] .van-register-rows td .van-register-note{min-width:26ch}
  [data-screen="fleet_show"] .van-damage td.van-damage-place{white-space:normal;min-width:26ch}
}

/* ========================================================== mileage: record a mileage, a replaced odometer and readings to check
   mileage_form.php, odometer_form.php, readings_index.php, 0.7.0 */

/* ---------------------------------------------------------- Record a mileage and a replaced odometer
   One column the width of the form, so the head, its back link and the card line up, phone first: the dashboard photo, then
   the figure, typed in JetBrains Mono as it is shown. The photo kept from a refusal and the photo chosen before it is sent are
   the shared photograph field, in the photographs section above. */
:is([data-screen="mileage_form"],[data-screen="odometer_form"]) main{max-width:calc(640px + 2 * var(--gutter))}
:is([data-screen="mileage_form"],[data-screen="odometer_form"]) form.stack{max-width:none}
:is([data-screen="mileage_form"],[data-screen="odometer_form"]) #mileage{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.02em}
/* The title wraps under the plate as a whole, never breaking inside it. */
:is([data-screen="mileage_form"],[data-screen="odometer_form"]) .mile-title{display:inline-block}
:is([data-screen="mileage_form"],[data-screen="odometer_form"]) .mile-lead{margin:0 0 18px;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}
:is([data-screen="mileage_form"],[data-screen="odometer_form"]) .mile-note{margin:-6px 0 0;max-width:62ch;font-size:13px;line-height:1.45;color:var(--steel)}

/* ---------------------------------------------------------- readings to check
   One reading to a card, oldest first: the photo whole on Lightbox, beside the van, the figure in JetBrains Mono at a size to
   compare with it, who took it and when, then the two answers. On a phone the photo takes the card's width. */
[data-screen="readings_index"] .read-list{margin:0;padding:0;list-style:none}
[data-screen="readings_index"] .read-item{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 28px;align-items:start;padding:20px}
[data-screen="readings_index"] .read-photo{min-width:0}
[data-screen="readings_index"] .read-photo .photo-thumb{max-width:none}
[data-screen="readings_index"] .read-full{display:inline-flex;align-items:center;min-height:32px;margin-top:4px;font-size:13px;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
[data-screen="readings_index"] .read-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
[data-screen="readings_index"] .read-body p{margin:0}
[data-screen="readings_index"] .read-figure{font-size:17px;line-height:1.2}
[data-screen="readings_index"] .read-figure .mono{font-size:40px;font-weight:600;line-height:1.05;letter-spacing:.01em}
[data-screen="readings_index"] .read-replaced{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
[data-screen="readings_index"] .read-who{font-size:14px;line-height:1.45;color:var(--steel)}
[data-screen="readings_index"] .read-who .mono{color:var(--instrument)}
[data-screen="readings_index"] .read-answers{display:flex;flex-direction:column;gap:16px;align-self:stretch;margin-top:8px;padding-top:16px;border-top:1px solid var(--bezel)}
[data-screen="readings_index"] .read-answers form{margin:0}
[data-screen="readings_index"] .read-return{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
[data-screen="readings_index"] .read-return .fld{align-self:stretch}
[data-screen="readings_index"] .read-note{margin:-6px 0 0;max-width:72ch;font-size:13px;line-height:1.45;color:var(--steel)}

/* ---------------------------------------------------------- narrower screens */
@media (max-width:880px){
  [data-screen="readings_index"] .read-item{grid-template-columns:minmax(0,1fr)}
  /* The van's plate link takes a 44px target, as a button does, and gives the room back so no line of the card moves. */
  [data-screen="readings_index"] .read-van a{display:inline-block;padding-block:13px;margin-block:-13px}
}
@media (max-width:640px){
  :is([data-screen="mileage_form"],[data-screen="odometer_form"]) .hint .mono{font-size:13px}
  [data-screen="readings_index"] .read-item{padding:14px 16px}
  [data-screen="readings_index"] .read-figure .mono{font-size:34px}
  [data-screen="readings_index"] .read-answers .btn{width:100%}
  [data-screen="readings_index"] .read-full{min-height:44px;margin-top:0}
  [data-screen="readings_index"] .read-sep{display:none}
  [data-screen="readings_index"] .read-who .mono{display:block}
}

/* ========================================================== drivers, a driver's record and form, staff and depots
   people_index.php, driver_show.php, driver_form.php, depots_index.php, depot_form.php */

/* ---------------------------------------------------------- the driver and staff lists, a driver's record
   A plate chip in a list of facts is 21px tall, as in a table row (the tables section), so each rule stays in line. */
[data-screen="driver_show"] dl.kv .plate{padding-block:2px;line-height:15px;vertical-align:top}
[data-screen="driver_show"] dl.kv .plate{margin-block:-.5px}

/* A word in a column of numbers, such as Not held or Never, is set in Source Sans 3 like the words beside it. */
[data-screen="people_index"] td.mono .muted{font-family:var(--body);font-size:14px;font-weight:400}
[data-screen="driver_show"] dd.mono .muted{font-family:var(--body);font-size:14px}

/* In one column the two columns' cards keep the same 20px apart as the cards within each column. */
[data-screen="driver_show"] .two{row-gap:0}

/* When the code just issued stops working: a time, so it is set in JetBrains Mono with the word before it. */
[data-screen="driver_show"] .card-h .people-expiry{font-family:var(--mono);font-weight:500;white-space:nowrap}

/* What taking a driver off the system, or putting them back, does: read before the button. */
[data-screen="driver_show"] .people-note{margin:0;font-size:14px;line-height:1.5}
[data-screen="driver_show"] .people-note:not(:last-child){margin-bottom:12px}

/* ---------------------------------------------------------- the depot list, 0.7.0
   The edit link ends each row of a manager's list, its pencil and word on the line of the row's text. */
[data-screen="depots_index"] .depot-edit{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
[data-screen="depots_index"] .depot-edit .icon{width:16px;height:16px}
/* The words read aloud with each link are placed out of sight; the scroll box holds them, so on a phone they cannot widen the page. */
[data-screen="depots_index"] .tbl-scroll{position:relative}

/* ---------------------------------------------------------- adding and editing a depot, 0.7.0
   The column the width of the form is shared with the van form and the driver form, in the forms section above. A short code
   is a reference, typed in JetBrains Mono and in the capitals it is kept in, as the brief's mock shows it. */
[data-screen="depot_form"] #code{font-family:var(--mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
/* Who is based here: a label beside each group, the vans as plate chips and the drivers by name, each a link. */
[data-screen="depot_form"] .depot-who{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:0;font-size:14px;line-height:20px}
[data-screen="depot_form"] .depot-who dt,[data-screen="depot_form"] .depot-who dd{padding:9px 0;border-bottom:1px solid var(--bezel)}
[data-screen="depot_form"] .depot-who dt{padding-right:24px;color:var(--steel)}
[data-screen="depot_form"] .depot-who dd{margin:0}
[data-screen="depot_form"] .depot-who dt:first-of-type,[data-screen="depot_form"] .depot-who dd:first-of-type{padding-top:0}
[data-screen="depot_form"] .depot-who dt:last-of-type,[data-screen="depot_form"] .depot-who dd:last-of-type{padding-bottom:0;border-bottom:0}
[data-screen="depot_form"] :is(.depot-vans,.depot-drivers){display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
[data-screen="depot_form"] .depot-vans{gap:6px}
[data-screen="depot_form"] .depot-vans .plate{padding-block:2px;line-height:15px}
[data-screen="depot_form"] .depot-drivers{column-gap:8px}
[data-screen="depot_form"] .depot-drivers li:not(:last-child)::after{content:"\00B7";margin-left:8px;color:var(--steel)}
[data-screen="depot_form"] .depot-none{margin:0;font-size:14px;line-height:1.5;color:var(--steel)}
/* Closing, or opening again: what it does, read before the button, and a refusal that reads as one, with its due pin. */
[data-screen="depot_form"] .depot-note{margin:0 0 14px;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="depot_form"] .depot-close form{margin:0}
[data-screen="depot_form"] .depot-block{margin-top:10px;padding-left:22px;color:var(--instrument);background:var(--pin-warn) left 1px/15px 15px no-repeat}

/* ---------------------------------------------------------- narrower screens */
@media (max-width:880px){
  /* A manager's Edit link at the end of a depot's row takes a 44px target, as a button does, and gives the room back so the row keeps its height. */
  [data-screen="depots_index"] .depot-edit{padding-block:12px;margin-block:-12px}
}
@media (max-width:640px){
  /* The label goes above its group, on a phone. */
  [data-screen="depot_form"] .depot-who{grid-template-columns:minmax(0,1fr)}
  [data-screen="depot_form"] .depot-who dt{padding:12px 0 6px;border-bottom:0}
  [data-screen="depot_form"] .depot-who dt:first-of-type{padding-top:0}
  [data-screen="depot_form"] .depot-who dd{padding-top:0}
}

/* ---------------------------------------------------------- a driver's record: Contract and signing, and their handovers, 0.8.0
   Each fact a pin and its word, with what it means under it; the fresh licence check under a rule, its line to tick as wide as the card. */
[data-screen="driver_show"] .driver-handover dl.kv{grid-template-columns:minmax(0,9.5em) minmax(0,1fr)}
[data-screen="driver_show"] .driver-handover dl.kv dd{text-align:left}
[data-screen="driver_show"] .driver-handover dl.kv dd .pill{vertical-align:-3px}
[data-screen="driver_show"] .driver-handover-sub{display:block;margin-top:3px;font-size:13px;font-weight:400;line-height:1.45;color:var(--steel)}
[data-screen="driver_show"] .driver-handover-sub .mono{color:var(--instrument)}
/* A time at the end of a line wraps whole onto the next when there is no room, which WebKit does only for a box of its own. */
[data-screen="driver_show"] .driver-handover-sub .mono{display:inline-block}
[data-screen="driver_show"] form.driver-licence{max-width:none;gap:12px;margin-top:14px;padding-top:16px;border-top:1px solid var(--bezel)}
[data-screen="driver_show"] .driver-licence .check{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer}
[data-screen="driver_show"] .driver-licence .check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--instrument);cursor:pointer}
[data-screen="driver_show"] .driver-licence .hint{margin:0}
[data-screen="driver_show"] .driver-licence .formfoot{padding-top:0}
[data-screen="driver_show"] .driver-handovers td:nth-child(4){white-space:nowrap}

/* ---------------------------------------------------------- the driver form: Contract with M&S, 0.8.0 */
[data-screen="driver_form"] .driver-contract-note{margin:-8px 0 0;max-width:62ch}
[data-screen="driver_form"] #contract_date{font-family:var(--mono);font-weight:500}

@media (max-width:880px){
  [data-screen="driver_show"] .driver-licence .check{min-height:44px;align-items:center}
  [data-screen="driver_show"] .driver-licence .check input{width:24px;height:24px;margin:0}
  /* A time in the line under a fact keeps the 13px floor of a phone. */
  [data-screen="driver_show"] .driver-handover-sub .mono{font-size:13px}
}
@media (max-width:640px){
  /* On a phone each label goes above its facts, as on the record of a handover. */
  [data-screen="driver_show"] .driver-handover dl.kv{grid-template-columns:minmax(0,1fr)}
  [data-screen="driver_show"] .driver-handover dl.kv dt{padding-bottom:0;border-bottom:0;font-size:13px}
  [data-screen="driver_show"] .driver-handover dl.kv dd{padding-top:3px}
  [data-screen="driver_show"] .driver-handover dl.kv dd:first-of-type{padding-top:3px}
}

/* ========================================================== sign in, driver sign in, install, errors and My van
   login.php, driver_login.php, install.php, error.php, my.php */

/* ---------------------------------------------------------- entry pages on Cabin: install and errors before sign in (the four sign
   in screens are The Two Films' since 0.11.1, in their own block below)
   The lockup with the subject on the right and a rule under, then the card, with the lockup moved above any message. */
body.entry:is([data-screen="login"],[data-screen="install"],[data-screen="error"]) main>.centre>.flash{margin-bottom:16px}
:is([data-screen="install"],[data-screen="error"]) .entry-brand{order:-1;display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:8px 16px;width:100%;max-width:440px;margin:9vh auto 24px;padding-bottom:16px;border-bottom:1.5px solid var(--instrument)}
:is([data-screen="install"],[data-screen="error"]) .entry-brand .label{line-height:16px;padding-bottom:3px}
:is([data-screen="login"],[data-screen="install"],[data-screen="error"]) .centre .card{margin-bottom:0}
[data-screen="install"] .card-b h1{font-size:30px;line-height:1.1}
:is([data-screen="login"],[data-screen="install"]) .card-b h1+.hint{margin:6px 0 20px;font-size:14px}
[data-screen="login"] .entry-alt{margin:0;padding:14px 24px 16px;border-top:1px solid var(--bezel);font-size:14px;line-height:1.45;color:var(--steel)}

/* ---------------------------------------------------------- errors, before and after sign in: an empty state with the way back */
[data-screen="error"] .empty{padding:32px 24px 28px}
[data-screen="error"] .empty h1{font-size:26px;line-height:1.15}
[data-screen="error"] .entry-back{margin-top:8px}
body:not(.entry)[data-screen="error"] .entry-error{max-width:560px;margin:9vh auto 0}

/* ---------------------------------------------------------- driver sign in, phone first
   The header holds the dark lockup, which the first page's rules place over the film (The Two Films, 0.11.1); its words are hidden there. */
[data-screen="driver_login"] .phone-top-sub{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500;line-height:18px;color:var(--cabin-on-instrument);white-space:nowrap}
body.entry[data-screen="driver_login"] main>.centre>.flash{margin-bottom:20px}
[data-screen="driver_login"] .centre>h1+.hint{margin:8px 0 22px;font-size:15px}
[data-screen="driver_login"] form.stack{gap:18px}
[data-screen="driver_login"] input[type=tel],[data-screen="driver_login"] input[type=text]{min-height:52px;font-family:var(--mono);font-size:18px;font-weight:500}
[data-screen="driver_login"] input.phone-code{min-height:60px;font-size:26px;font-weight:600;letter-spacing:.4em}
[data-screen="driver_login"] .btn.big{margin-top:4px}
[data-screen="driver_login"] .phone-alt{margin:14px 0 0;font-size:15px}
[data-screen="driver_login"] .phone-alt a{display:inline-flex;align-items:center;min-height:44px}

/* ---------------------------------------------------------- My van, phone first
   As the artboard: "My van" and the day above, the plate as the title, the van, since when, then the van from
   above with its last reading. One column the width of the sign in, so nothing moves after signing in. */
[data-screen="my"] .phone-page{max-width:440px;margin:0 auto}
[data-screen="my"] .phone-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
[data-screen="my"] .phone-head h1{font-size:14px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
[data-screen="my"] .phone-head .mono{font-size:13px;line-height:18px;color:var(--steel)}
[data-screen="my"] .phone-van-id{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}
[data-screen="my"] .phone-van-id .plate.xl{max-width:100%;font-size:min(40px,9.5vw);line-height:40px;padding:12px 18px}
[data-screen="my"] .phone-van-id .h-page{margin:0;font-size:32px;line-height:34px;overflow-wrap:anywhere}
[data-screen="my"] .phone-since{margin:-10px 0 0;font-size:15px;line-height:20px;color:var(--steel)}
[data-screen="my"] .phone-since .mono{color:var(--instrument)}
[data-screen="my"] .phone-van-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 16px 4px}
[data-screen="my"] .phone-van-figure{display:block;flex:none}
[data-screen="my"] .phone-van-card dl.kv{align-self:stretch;padding-top:10px;border-top:1px solid var(--bezel)}

@media (max-width:880px){
  /* The link in the sentence at the foot of the sign in card keeps its line, with a 44px target. */
  [data-screen="login"] .entry-alt a{display:inline-block;padding-block:13px;margin-block:-13px}
}
@media (max-width:640px){
  :is([data-screen="install"],[data-screen="error"]) .entry-brand{margin-top:5vh}
  :is([data-screen="install"],[data-screen="error"]) .entry-brand .label{font-size:13px}
}

/* ---------------------------------------------------------- My van since 0.8.0: the handover cards, the hire, the copies and the records of 7.1 */
[data-screen="my"] main>.flash{max-width:440px;margin-inline:auto}
[data-screen="my"] .phone-handover .card-b{display:grid;gap:8px;padding:16px}
[data-screen="my"] .phone-waiting{border-top:3px solid var(--red)}
[data-screen="my"] .phone-signed{border-top:3px solid var(--instrument)}
[data-screen="my"] .phone-handover-pin{margin:0}
[data-screen="my"] .phone-handover h2{font-size:26px;line-height:1.1}
[data-screen="my"] .phone-handover-van{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:15px;font-weight:500}
[data-screen="my"] .phone-handover-note{margin:0;font-size:14px;line-height:1.45;color:var(--steel)}
[data-screen="my"] .phone-handover-note .mono{color:var(--instrument)}
[data-screen="my"] .phone-handover .btn{margin-top:6px}
[data-screen="my"] .phone-hire-end .pill{margin-right:4px}
[data-screen="my"] .phone-hire-words{align-self:stretch;margin:0 0 14px;padding-top:10px;border-top:1px solid var(--bezel)}
[data-screen="my"] .phone-sealed-list{margin:0;padding:0;list-style:none}
[data-screen="my"] .phone-sealed-item{display:grid;gap:4px;padding:14px 20px 16px;border-top:1px solid var(--bezel)}
[data-screen="my"] .phone-sealed-item:first-child{border-top:0}
[data-screen="my"] .phone-sealed-item p{margin:0;font-size:14px;line-height:1.5}
[data-screen="my"] .phone-sealed-item .plate{margin-right:4px}
[data-screen="my"] .phone-sealed-item .phone-sealed-what{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;font-size:16px}
[data-screen="my"] .phone-sealed-sha{color:var(--steel)}
[data-screen="my"] .phone-sealed-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
[data-screen="my"] .phone-records .card-h .hint{flex-basis:100%}
[data-screen="my"] .phone-record+.phone-record{margin-top:18px;padding-top:16px;border-top:1px solid var(--bezel)}
[data-screen="my"] .phone-record-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--body);font-size:14px;font-weight:500;line-height:1.4;color:var(--steel)}
[data-screen="my"] .phone-record-h .mono{color:var(--instrument)}
[data-screen="my"] .phone-record-list{display:grid;gap:12px;margin:12px 0 0;padding:0;list-style:none}
[data-screen="my"] .phone-record-item p{margin:0;font-size:14px;line-height:1.45}
[data-screen="my"] .phone-record-links{display:flex;flex-wrap:wrap;gap:0 18px}
[data-screen="my"] .phone-record-links a{display:inline-flex;align-items:center;min-height:44px}
[data-screen="my"] .phone-record-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
[data-screen="my"] .phone-record-photos .photo-thumb{max-width:none}

@media (max-width:880px){
  /* Phone text is never under 13px. */
  [data-screen="my"] .label{font-size:13px}
  [data-screen="my"] .mono{font-size:max(13px,.93em)}
}
@media (max-width:640px){
  [data-screen="my"] .phone-sealed-item{padding-inline:16px}
}

/* ========================================================== the signed handover, 0.8.0
   handover_start.php, handover_walk.php, handover_dashboard.php, handover_driver.php, handover_signing.php, handover_proxy.php,
   handover_countersign.php, handover_sign.php and handover_record.php. The step header, the stop form, the signature pad, the agreement, the
   PIN, the damage list and the 3D van are shared pieces, above. */

/* ---------------------------------------------------------- the manager's column
   Steps 2 to 6 are one column the width of the van form, phone first, as the mileage forms are; step 1 keeps the width of the page for its
   van, its form and what happens next side by side. A form that is a card keeps the card's head and body, with its fields a column inside. */
:is([data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_countersign"],[data-screen="damage_report"],[data-screen="damage_report_done"],[data-screen="job_mine"],[data-screen="inspection_photos"],[data-screen="inspection_walk"],[data-screen="inspection_mileage"],[data-screen="inspection_checks"],[data-screen="inspection_finish"]) main{
  max-width:calc(760px + 2 * var(--gutter))}
/* What a script hides stays hidden, whatever display a component gives it. */
:is([data-screen="handover_start"],[data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_proxy"],[data-screen="handover_countersign"],[data-screen="damage_report"],[data-screen="inspection_photos"],[data-screen="inspection_walk"],[data-screen="inspection_mileage"],[data-screen="inspection_checks"],[data-screen="inspection_finish"]) main [hidden]{
  display:none!important}
:is([data-screen="handover_start"],[data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_countersign"],[data-screen="damage_report"],[data-screen="inspection_photos"],[data-screen="inspection_walk"],[data-screen="inspection_mileage"],[data-screen="inspection_checks"],[data-screen="inspection_finish"]) form.card.stack{
  display:block;max-width:none}
:is([data-screen="handover_start"],[data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_countersign"],[data-screen="damage_report"],[data-screen="inspection_photos"],[data-screen="inspection_walk"],[data-screen="inspection_mileage"],[data-screen="inspection_checks"],[data-screen="inspection_finish"]) form.card.stack>.card-b{
  display:flex;flex-direction:column;gap:16px}
:is([data-screen="handover_start"],[data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_countersign"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_photos"],[data-screen="inspection_walk"],[data-screen="inspection_mileage"],[data-screen="inspection_checks"],[data-screen="inspection_finish"]) .formfoot:has(>.btn.big:only-child){
  padding-top:4px}
:is([data-screen="handover_start"],[data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_countersign"],[data-screen="damage_report_done"]) ol.plain{
  display:grid;gap:6px;margin:0;padding-left:20px;font-size:15px;line-height:1.45}

/* ---------------------------------------------------------- step 1, the van and the driver
   The van card and the form on the left, what happens next on the right, and the one main action under the form; on a phone one column in
   the order the brief draws it: the van, the driver, what happens next, then Start the walk round. */
[data-screen="handover_start"] .handover-start-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  grid-template-areas:"van next" "form next" "go next";grid-template-rows:auto auto 1fr;column-gap:20px;align-items:start}
[data-screen="handover_start"] .handover-van{grid-area:van}
[data-screen="handover_start"] :is(.handover-start,.handover-start-block){grid-area:form}
[data-screen="handover_start"] .handover-next{grid-area:next}
[data-screen="handover_start"] .handover-go{grid-area:go;margin-bottom:20px}
[data-screen="handover_start"] .handover-start-block{margin-bottom:20px}
[data-screen="handover_start"] .handover-start-who{margin:0;font-family:var(--display);font-size:21px;font-weight:700;line-height:1.1}
[data-screen="handover_start"] .handover-start-note{margin:0;max-width:62ch;font-size:14px;line-height:1.45;color:var(--steel)}
[data-screen="handover_start"] .handover-start-who+.handover-start-note{margin-top:-10px}
[data-screen="handover_start"] #rental_no{font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:.02em}
[data-screen="handover_start"] .handover-kinds{margin-bottom:20px}

/* ---------------------------------------------------------- step 2, the walk round
   The van first, as the brief's phone has it, then the damage on the record already, then Damage found now with its count, each item one
   line of words beside its two photographs, then the damage sheet and the one way on. The sheet is the damage form: a Bravos Red rule over it,
   Damage at and the part of the van, the five kinds as cards with their words and examples, the close up and the wide photograph side by
   side, the note and Pointed out by the driver. With scripts off it is simply the form, on the page. */
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-van-walk{margin-bottom:22px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-list-open{margin-top:10px;padding-inline:4px 12px;margin-left:-4px;color:var(--brake);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-group{margin-bottom:22px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-group-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;
  padding-bottom:6px;border-bottom:1px solid var(--bezel)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-group-h h2{font-family:var(--mono);font-size:12px;font-weight:600;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-group-h .mono{font-size:14px;font-weight:600;color:var(--instrument)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-group-note{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--steel)}
:is([data-screen="handover_walk"],[data-screen="inspection_walk"]) .handover-recorded .handover-group-note:last-child{margin-bottom:0}
/* Each damage as the brief's list: its number and reference, where it is, its kind and how it was recorded, and its two photographs small
   beside the words, each opening at full size. */
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-list{display:grid;gap:8px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-item{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px 14px;padding:10px 12px;
  border:1px solid var(--bezel);border-radius:2px;background:var(--dial)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-what{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-n{line-height:18px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-n .mono{color:var(--instrument)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-place{font-size:15px;overflow-wrap:anywhere}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type{font-size:14px;line-height:1.4}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-recorded{gap:2px 8px;font-size:13px;line-height:18px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-what .hint{margin:2px 0 0}
:is([data-screen="handover_walk"],[data-screen="inspection_walk"]) .damage-what form{margin:2px 0 0}
:is([data-screen="handover_walk"],[data-screen="inspection_walk"]) .damage-what form .btn.quiet{min-height:36px;padding:4px 8px;margin-left:-8px;color:var(--brake)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-photos{display:flex;align-items:flex-start;gap:6px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-photos .photo-thumb{width:84px;padding:2px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-photos .muted{max-width:84px;font-size:13px;line-height:1.3}
/* The damage sheet. */
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage.is-sheet{border-top:3px solid var(--red)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-h{align-items:center;flex-wrap:nowrap}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-h h2{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:22px;line-height:1.1}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-h h2 .label{font-weight:500;line-height:16px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-where{overflow-wrap:anywhere}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-cancel{flex:none;margin-right:-10px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage fieldset{min-width:0;margin:0;padding:0;border:0}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage legend{float:left;width:100%;margin-bottom:8px;padding:0;font-size:15px;font-weight:600;line-height:1.3}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage legend+*{clear:both}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:2px 10px;margin:0;
  min-height:52px;padding:9px 12px 10px 10px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial);cursor:pointer}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice:last-child:nth-child(odd){grid-column:1 / -1}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice:hover{border-color:var(--instrument)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-icon{grid-row:1 / span 2;width:28px;height:28px;color:var(--instrument)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-name{align-self:center;font-size:15px;font-weight:600;line-height:1.2}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice .hint{grid-column:2;margin:0;line-height:1.4}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice .hint i{color:var(--instrument)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice:has(input:checked){border:2px solid var(--instrument);padding:8px 11px 9px 9px;background:rgba(227,20,28,.09)}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choice:has(input:focus-visible){outline:3px solid var(--instrument);outline-offset:2px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-types.has-err .damage-type-choice{border-color:var(--red)}
/* The close up and the wide photograph side by side, each its name and what to photograph over its field, the two fields level however the
   words wrap; the photograph kept from a refusal and the one chosen before it is sent fill their column. An empty field says nothing beside
   its button, since the words above say what to take; once a photograph is chosen the field names it. */
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair .photo-field{display:flex;flex-direction:column;min-width:0}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair .photo-field>label{order:-2;margin-bottom:0;font-size:15px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair .photo-field>.hint{order:-1;margin:0 0 8px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair input[type=file]{min-height:56px;font-size:13px}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair input[type=file]:invalid{color:transparent}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair .photo-kept~input[type=file].photo-none{color:transparent}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair :is(.photo-kept,.photo-preview) .photo-thumb{max-width:100%}
:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) #note{min-height:72px}
[data-screen="handover_walk"] .handover-damage label.check{margin-top:2px}
:is([data-screen="handover_walk"],[data-screen="inspection_walk"]) .handover-continue{margin-top:4px}
:is([data-screen="handover_walk"],[data-screen="handover_driver"]) label.check{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:8px;margin:0;
  font-size:15px;font-weight:500;line-height:1.4;cursor:pointer}
:is([data-screen="handover_walk"],[data-screen="handover_driver"]) label.check input{width:24px;height:24px;margin:0;accent-color:var(--instrument)}

/* ---------------------------------------------------------- the viewfinder of steps 3 and 4
   The brief's camera view over a photograph field: the thing to photograph drawn in outline on Lightbox, with its name and the shutter. It is a
   label of the field, so a tap opens the camera, as the field's own button does; it goes once a photograph is chosen or kept, when the
   photograph itself takes its place. */
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-viewfinder{position:relative;display:grid;place-items:center;height:276px;margin:0 0 10px;
  padding:34px 16px 104px;border-radius:2px;cursor:pointer;
  background:linear-gradient(var(--lightbox),var(--lightbox)) top/100% calc(100% - 88px) no-repeat}
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-viewfinder svg{display:block;width:min(70%,260px);height:auto;max-height:100%}
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-viewfinder-face svg{width:auto;height:100%}
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-viewfinder-tag{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:13px;font-weight:600;
  line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--cabin)}
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-shutter{position:absolute;left:50%;bottom:8px;width:72px;height:72px;margin-left:-36px;
  border:5px solid var(--red);border-radius:50%;background:var(--instrument)}
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-viewfinder:hover .handover-shutter{background:var(--graphite)}
:is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-shot:has(.photo-kept,.photo-preview:not([hidden])) .handover-viewfinder{display:none}

/* ---------------------------------------------------------- step 3, the dashboard
   As the brief: the viewfinder, the photograph field, then the figure in JetBrains Mono at the size of the mileage form, then the fuel in eighths
   as nine segments, the chosen one filled, and the keys. A reading already saved says so first, with its pin. */
:is([data-screen="handover_dashboard"],[data-screen="inspection_mileage"]) .handover-reading-saved{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0;font-size:16px;font-weight:600}
:is([data-screen="handover_dashboard"],[data-screen="inspection_mileage"]) .handover-reading-saved .mono{font-size:20px;font-weight:600}
:is([data-screen="handover_dashboard"],[data-screen="inspection_mileage"]) .handover-reading-keep{margin:-10px 0 0}
:is([data-screen="handover_dashboard"],[data-screen="inspection_mileage"]) #mileage{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.02em}
[data-screen="handover_dashboard"] fieldset{min-width:0;margin:0;padding:0;border:0}
[data-screen="handover_dashboard"] legend{margin-bottom:8px;padding:0;font-size:14px;font-weight:600;line-height:1.3}
[data-screen="handover_dashboard"] .fuel-levels{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
[data-screen="handover_dashboard"] .fuel-level{position:relative;display:grid;place-items:center;min-height:44px;margin:0;padding:0 2px;border:1px solid var(--bezel);border-radius:2px;
  background:var(--dial);font-family:var(--mono);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer}
[data-screen="handover_dashboard"] .fuel-level:hover{border-color:var(--instrument)}
[data-screen="handover_dashboard"] .fuel-level input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
[data-screen="handover_dashboard"] .fuel-level:has(input:checked){background:var(--instrument);border-color:var(--instrument);color:var(--cabin)}
[data-screen="handover_dashboard"] .fuel-level:has(input:focus-visible){outline:3px solid var(--instrument);outline-offset:2px}
[data-screen="handover_dashboard"] .handover-fuel.has-err .fuel-level{border-color:var(--red)}
[data-screen="handover_dashboard"] #keys{max-width:240px}

/* ---------------------------------------------------------- step 4, the driver
   A card for each driver who signs, holding three things in order as a short timeline: the privacy notice, the photograph of them, and the
   licence check. Each is a numbered lamp (0.8.2): black once done, Bravos Red with a white figure while it is the one to do, a Steel ring
   to come; each done one is a line with its pin. The notice is marked Draft, as Bravo Motors' own notice is still to be written. */
[data-screen="handover_driver"] .handover-party .card-b{display:flex;flex-direction:column;gap:14px}
[data-screen="handover_driver"] .handover-tasks{
  --task-done:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Ccircle cx='10' cy='11' r='9.5' fill='%23121214'/%3E%3C/svg%3E");
  --task-now:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Ccircle cx='10' cy='11' r='9' fill='%23E3141C' stroke='%23121214' stroke-width='1.6'/%3E%3C/svg%3E");
  --task-later:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Ccircle cx='10' cy='11' r='9' fill='%23FFFFFF' stroke='%236B7075' stroke-width='1.5'/%3E%3C/svg%3E");
  margin:0;padding:0;list-style:none}
[data-screen="handover_driver"] .handover-task{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 0 22px 40px}
[data-screen="handover_driver"] .handover-task:last-child{padding-bottom:0}
[data-screen="handover_driver"] .handover-task:not(:last-child)::before{content:"";position:absolute;left:12.5px;top:32px;bottom:4px;width:1.5px;background:var(--bezel)}
[data-screen="handover_driver"] .handover-task.done:not(:last-child)::before{background:var(--instrument)}
[data-screen="handover_driver"] .handover-task-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:28px}
[data-screen="handover_driver"] .handover-task-h .n{position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:28px;padding-bottom:1px;
  background:var(--task-later) center/contain no-repeat;font-family:var(--mono);font-size:13px;font-weight:600;line-height:1;color:var(--steel)}
[data-screen="handover_driver"] .handover-task.done .n{background-image:var(--task-done);color:var(--cabin)}
[data-screen="handover_driver"] .handover-task.now .n{background-image:var(--task-now);color:#FFFFFF}
[data-screen="handover_driver"] .handover-task-h h3{font-size:17px;line-height:1.2}
[data-screen="handover_driver"] .handover-task.later .handover-task-h h3{color:var(--steel)}
[data-screen="handover_driver"] .handover-task>.hint{margin:0}
[data-screen="handover_driver"] .handover-task>*{max-width:100%}
[data-screen="handover_driver"] .handover-task form{margin:0}
[data-screen="handover_driver"] .handover-task form.stack{max-width:none;align-self:stretch}
[data-screen="handover_driver"] .handover-task-form{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
[data-screen="handover_driver"] .handover-task-form .hint{margin:0}
[data-screen="handover_driver"] .handover-notice{align-self:stretch;padding:12px 14px;border:1px solid var(--bezel);border-radius:2px;background:var(--cabin);font-size:14px;line-height:1.5}
[data-screen="handover_driver"] .handover-notice p{margin:0 0 8px;max-width:66ch}
[data-screen="handover_driver"] .handover-notice p:last-child{margin-bottom:0}
[data-screen="handover_driver"] .handover-notice-pin{margin-bottom:6px}
[data-screen="handover_driver"] .handover-driver-shot{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 14px}
[data-screen="handover_driver"] .handover-driver-shot .photo-thumb{width:132px}
[data-screen="handover_driver"] .handover-driver-shot .hint{margin:0}
[data-screen="handover_driver"] .handover-shot{align-self:stretch}
[data-screen="handover_driver"] :is(.handover-retake,.handover-absent){align-self:stretch}
[data-screen="handover_driver"] :is(.handover-retake,.handover-absent)>summary,[data-screen="handover_signing"] .handover-absent>summary{display:inline-flex;align-items:center;
  min-height:36px;cursor:pointer;font-size:14px;font-weight:600;color:var(--brake);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
[data-screen="handover_driver"] :is(.handover-retake,.handover-absent)[open]>summary,[data-screen="handover_signing"] .handover-absent[open]>summary{margin-bottom:10px}
[data-screen="handover_driver"] .handover-absent{padding-top:12px;border-top:1px solid var(--bezel)}
[data-screen="handover_driver"] .handover-party-absent{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0}
[data-screen="handover_driver"] .handover-still{margin:0 0 8px;font-size:14px;line-height:1.45;color:var(--steel)}
:is([data-screen="handover_driver"],[data-screen="handover_signing"]) .handover-go{margin-top:4px}
:is([data-screen="handover_driver"],[data-screen="handover_signing"]) .handover-absent form.stack{max-width:none}

/* ---------------------------------------------------------- step 5, signing
   A card for each driver who signs: the code shown once, as a sign in code is, then the brief's waiting line with its pin, which becomes the
   signed line; signing on this phone instead, and for the driver whose time ends, recording why they do not sign. */
[data-screen="handover_signing"] .handover-signer .card-b{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
[data-screen="handover_signing"] .handover-signer .code-out .label{margin:0}
[data-screen="handover_signing"] .handover-code{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
[data-screen="handover_signing"] .handover-code .hint{margin:0}
[data-screen="handover_signing"] :is(.waiting-card,.signed-card){display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0}
[data-screen="handover_signing"] :is(.waiting-card,.signed-card) b{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.15}
[data-screen="handover_signing"] .signed-card+.hint{margin:-8px 0 0}
[data-screen="handover_signing"] .waiting-block{display:flex;flex-direction:column;gap:8px;align-self:stretch;padding-top:14px;border-top:1px solid var(--bezel)}
[data-screen="handover_signing"] .waiting-block>*{margin:0}
[data-screen="handover_signing"] .code-out+.waiting-block,[data-screen="handover_signing"] .handover-code+.waiting-block{margin-top:2px}
[data-screen="handover_signing"] .handover-proxy-block{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
[data-screen="handover_signing"] .handover-proxy-block .hint{margin:0}
[data-screen="handover_signing"] .handover-absent{align-self:stretch;padding-top:12px;border-top:1px solid var(--bezel)}
[data-screen="handover_signing"] .handover-refresh{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:4px 0 0}
[data-screen="handover_signing"] .handover-refresh .hint{margin:0}

/* ---------------------------------------------------------- signing on the manager's phone
   The phone is in the driver's hands, so the page is set out as their own sign in is: one column the width of the sign in, the instruction
   large, and the code typed large in JetBrains Mono. */
[data-screen="handover_proxy"] .handover-proxy{max-width:440px;margin:0 auto}
[data-screen="handover_proxy"] .phone-head{margin-bottom:16px}
[data-screen="handover_proxy"] .phone-head .eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:8px;font-family:var(--mono);font-size:13px;color:var(--steel)}
[data-screen="handover_proxy"] .phone-head h1{font-size:32px;line-height:1.05}
[data-screen="handover_proxy"] .card-b{display:flex;flex-direction:column;gap:12px}
[data-screen="handover_proxy"] .card-b>p{margin:0}
[data-screen="handover_proxy"] .handover-proxy-say{font-size:17px;line-height:1.4}
[data-screen="handover_proxy"] form.stack{max-width:none;margin-top:6px;gap:18px}
[data-screen="handover_proxy"] #code{min-height:60px;font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.4em}
[data-screen="handover_proxy"] #code::placeholder{font-size:18px;font-weight:500;letter-spacing:.04em}
[data-screen="handover_proxy"] .formfoot{flex-direction:column;align-items:stretch;gap:8px}
[data-screen="handover_proxy"] .formfoot .btn.quiet{align-self:flex-start;margin-left:-8px;padding-inline:4px 12px}

/* ---------------------------------------------------------- step 6, the countersignature
   Confirm it is you, then what is being confirmed, the signature pad and the one button that seals the record. */
[data-screen="handover_countersign"] .handover-confirming{margin:0;max-width:66ch;font-size:15px;line-height:1.5}
[data-screen="handover_countersign"] .handover-reauth+.handover-confirming{margin-top:-6px;font-size:14px;color:var(--steel)}
[data-screen="handover_countersign"] .handover-reauth .hint{margin:0}

@media (max-width:880px){
  [data-screen="handover_start"] .handover-start-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"van" "form" "next" "go";grid-template-rows:auto}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-list-open{min-height:44px}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-group-h h2{font-size:13px}
  :is([data-screen="handover_walk"],[data-screen="inspection_walk"]) .damage-what form .btn.quiet{min-height:44px}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-h h2 .label,:is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) :is(.damage-n,.damage-recorded) .mono{font-size:13px}
  /* A date or a figure inside a hint keeps the 13px floor of a phone. */
  :is([data-screen="handover_start"],[data-screen="handover_walk"],[data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="handover_signing"],[data-screen="handover_proxy"],[data-screen="handover_countersign"],[data-screen="damage_report"],[data-screen="damage_report_done"],[data-screen="inspection_photos"],[data-screen="inspection_walk"],[data-screen="inspection_mileage"],[data-screen="inspection_checks"],[data-screen="inspection_finish"]) :is(.hint,.sub,.handover-group-note) .mono{font-size:13px}
  /* A box to tick is a line of words: the whole line is the target, 44px tall, with the room handed back so nothing moves. */
  :is([data-screen="handover_walk"],[data-screen="handover_driver"]) label.check{padding-block:4px;margin-block:-4px;min-height:44px;align-items:center}
  [data-screen="handover_driver"] :is(.handover-retake,.handover-absent)>summary,[data-screen="handover_signing"] .handover-absent>summary{min-height:44px;font-size:15px}
}
@media (max-width:640px){
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-type-choices{grid-template-columns:minmax(0,1fr)}
  /* The two photographs of a damage stack beside its words, so an item stays one short block. */
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-item{grid-template-columns:minmax(0,1fr) 76px;padding:10px 10px 10px 12px}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-photos{flex-direction:column}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-photos .photo-thumb{width:76px}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-photos .muted{max-width:76px}
  /* A damage recorded before photographs were required has none: its words take the width, and the lines saying so run under them. */
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-item:not(:has(.photo-thumb)){grid-template-columns:minmax(0,1fr)}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-item:not(:has(.photo-thumb)) .damage-photos{flex-direction:row;flex-wrap:wrap;gap:2px 12px}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .damage-item:not(:has(.photo-thumb)) .damage-photos .muted{max-width:none}
  /* The words over each photograph field take two lines in a column this narrow, so the two fields start level. */
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair .photo-field>.hint{min-height:calc(2 * 1.45em)}
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="inspection_walk"]) .handover-damage-h h2{font-size:20px}
  :is([data-screen="handover_dashboard"],[data-screen="handover_driver"],[data-screen="inspection_mileage"]) .handover-viewfinder{height:236px;padding-top:30px;padding-bottom:98px}
  /* Nine segments do not fit a phone in one row: Empty to 4/8 over 5/8 to Full. */
  [data-screen="handover_dashboard"] .fuel-levels{grid-template-columns:repeat(5,minmax(0,1fr))}
  [data-screen="handover_dashboard"] #keys{max-width:none}
  [data-screen="handover_driver"] .handover-task{padding-left:36px}
  [data-screen="handover_proxy"] .phone-head h1{font-size:28px}
  [data-screen="handover_proxy"] #code{font-size:24px;letter-spacing:.3em}
}
@media (max-width:360px){
  :is([data-screen="handover_walk"],[data-screen="damage_report"],[data-screen="job_mine"],[data-screen="inspection_walk"]) .handover-shots-pair{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------------- the signing page, handover_sign.php
   On the driver's own phone, and on the manager's phone after a fresh code. One column, 640px at most, so the agreement keeps its measure at
   any width. The signature pad and the damage list are shared; this page refines both. */
[data-screen="handover_sign"] [hidden]{display:none!important}
[data-screen="handover_sign"] .phone-page{max-width:640px;margin:0 auto}
/* A message the layout prints above the page keeps to the page's column. */
[data-screen="handover_sign"] main>.flash{max-width:640px;margin-inline:auto}
/* On the manager's phone the driver holds a signed in manager's session: the staff links and the person are left off, and the lockup leads nowhere,
   while this page or the proxy page before it is open. */
body.staff:is([data-screen="handover_sign"],[data-screen="handover_proxy"]) :is(.topnav,.topuser){display:none}
[data-screen="handover_sign"] .handover-sign-proxy{margin:0 0 16px;padding:12px 14px;border:2px solid var(--instrument);border-radius:2px;background:var(--dial);font-size:15px;line-height:1.45}
[data-screen="handover_sign"] .handover-sign-back{margin:0 0 20px;font-size:14px}

/* The head: the plate and the date on one row, Van handover agreement or Return of the van, the brief's words, and the handover's line. */
[data-screen="handover_sign"] .handover-sign-head .card-b{display:grid;gap:10px;padding:18px 20px 16px}
[data-screen="handover_sign"] .handover-sign-van{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0}
[data-screen="handover_sign"] .handover-sign-date{font-size:14px;color:var(--steel)}
[data-screen="handover_sign"] .handover-sign-date .mono{color:var(--instrument)}
[data-screen="handover_sign"] .handover-sign-head h1{font-size:34px;line-height:1.05}
[data-screen="handover_sign"] .handover-sign-lead{margin:0;font-size:15px;line-height:1.5;color:var(--steel)}
[data-screen="handover_sign"] .handover-sign-ref{margin:2px 0 0;padding-top:10px;border-top:1px solid var(--bezel);font-size:14px;color:var(--steel)}
[data-screen="handover_sign"] .handover-sign-ref .mono{color:var(--instrument)}
[data-screen="handover_sign"] .handover-sign-refused a{white-space:nowrap}

/* Signed, sealed, and the states with nothing to sign. Signed and sealed carry an Instrument Black rule along the top. */
[data-screen="handover_sign"] .handover-state .card-b{display:grid;gap:12px;padding:18px 20px}
[data-screen="handover_sign"] :is(.handover-signed-state,.handover-sealed-state){border-top:3px solid var(--instrument)}
[data-screen="handover_sign"] .handover-state h2{font-size:28px;line-height:1.1}
[data-screen="handover_sign"] .handover-state h2 .plate{font-size:22px;line-height:24px;padding:3px 8px;vertical-align:3px}
[data-screen="handover_sign"] .handover-state .card-b>p{margin:0;font-size:15px;line-height:1.5}
[data-screen="handover_sign"] .handover-state .signed-card{margin:0}
[data-screen="handover_sign"] .handover-state .empty p .pill{margin-top:2px}
/* A plate chip inside a sentence sits on its line, as it does in a message (6.6). */
[data-screen="handover_sign"] .handover-state .empty p .plate{padding-block:1px;line-height:15px;vertical-align:baseline}
[data-screen="handover_sign"] .handover-state dl.kv{padding-top:10px;border-top:1px solid var(--bezel)}
[data-screen="handover_sign"] .handover-fingerprint{display:grid;gap:10px;padding:12px 14px;border:1px dashed var(--steel);border-radius:2px;background:var(--cabin)}
[data-screen="handover_sign"] .handover-fingerprint p{display:grid;gap:3px;margin:0}
/* A sha256 is 64 characters, wider than a phone: it breaks anywhere, never past the edge. */
[data-screen="handover_sign"] .handover-fingerprint .mono{font-size:13px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;word-break:break-all}
[data-screen="handover_sign"] .handover-hand-back{padding:12px 14px;border:2px solid var(--instrument);border-radius:2px}
[data-screen="handover_sign"] .handover-correction-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
[data-screen="handover_sign"] .handover-correction-list p{margin:0;font-size:15px}
[data-screen="handover_sign"] .handover-correction-list .handover-correction-by{font-size:13px;color:var(--steel)}

/* The van as recorded today: its facts, the dashboard and the photograph of the driver side by side, then the damage list. */
[data-screen="handover_sign"] .handover-today-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
[data-screen="handover_sign"] .handover-shot{display:grid;align-content:start;gap:6px;min-width:0;margin:0}
[data-screen="handover_sign"] .handover-shot .photo-thumb{max-width:none}
[data-screen="handover_sign"] .handover-shot figcaption{font-size:13px;line-height:1.4;color:var(--steel)}
[data-screen="handover_sign"] .handover-today-damage{margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--bezel);font-size:20px}
[data-screen="handover_sign"] .handover-today-look{margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--red);background:var(--cabin);font-size:14px;color:var(--instrument)}

/* The damage list on the signing page: each item's words over its two photographs, each named under it on the lightbox strip. */
[data-screen="handover_sign"] .damage-list{display:grid}
[data-screen="handover_sign"] .damage-item{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px 18px;padding:16px 0;border-top:1px solid var(--bezel)}
[data-screen="handover_sign"] .damage-item:first-child{padding-top:4px;border-top:0}
[data-screen="handover_sign"] .damage-item:last-child{padding-bottom:0}
[data-screen="handover_sign"] .damage-what{display:grid;align-content:start;gap:4px}
[data-screen="handover_sign"] .damage-place{font-size:15px}
[data-screen="handover_sign"] .damage-type{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2}
[data-screen="handover_sign"] .damage-recorded{gap:4px 10px;font-size:14px}
[data-screen="handover_sign"] .damage-recorded .mono{color:var(--instrument)}
[data-screen="handover_sign"] .damage-what .damage-note{margin:2px 0 0;font-size:14px}
[data-screen="handover_sign"] .damage-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px}
[data-screen="handover_sign"] .damage-photos .photo-thumb{max-width:none;text-decoration:none}
/* Each photograph named under it on its own strip, from the partial's data-what, on this page alone. */
[data-screen="handover_sign"] .damage-photos .photo-thumb[data-what]::after{content:attr(data-what);display:block;padding:6px 2px 2px;font-family:var(--mono);font-size:13px;
  font-weight:500;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--cabin)}

/* The form: the box to tick, the PIN, the signature, and the one button, with what is still to do under it. */
[data-screen="handover_sign"] .handover-sign-form{display:grid;gap:14px;margin:30px 0 20px}
[data-screen="handover_sign"] .handover-sign-h{font-size:28px;line-height:1.1}
[data-screen="handover_sign"] label.check{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;margin:0;padding:14px 16px;
  border:1px solid var(--bezel);border-radius:2px;background:var(--dial);font-size:16px;font-weight:600;line-height:1.4;cursor:pointer}
[data-screen="handover_sign"] label.check input{width:24px;height:24px;margin:0;accent-color:var(--instrument)}
[data-screen="handover_sign"] label.check.has-err{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
[data-screen="handover_sign"] label.check+.field-err{margin-top:-6px}
[data-screen="handover_sign"] .signature-pad{display:grid;gap:8px;margin:0;padding:16px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial)}
[data-screen="handover_sign"] .signature-pad.has-err{border-color:var(--red)}
[data-screen="handover_sign"] .sig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
[data-screen="handover_sign"] .sig-head label{margin:0;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.2}
[data-screen="handover_sign"] .sig-head .sig-clear{min-width:88px;margin-right:0;border-color:var(--bezel)}
[data-screen="handover_sign"] .signature-pad canvas.sig{height:200px}
[data-screen="handover_sign"] .handover-sign-foot{display:grid;gap:8px;padding-top:6px}
[data-screen="handover_sign"] .handover-sign-todo{margin:0;font-size:14px;text-align:center}

/* A photograph opened over the page, on Lightbox. */
[data-screen="handover_sign"] .handover-lightbox{width:min(96vw,1100px);max-width:none;max-height:94vh;padding:10px 10px 12px;border:0;border-radius:2px;
  background:var(--lightbox);color:var(--cabin)}
[data-screen="handover_sign"] .handover-lightbox::backdrop{background:rgba(18,18,20,.78)}
[data-screen="handover_sign"] .handover-lightbox form{display:flex;justify-content:flex-end;margin:0 0 8px}
[data-screen="handover_sign"] .handover-lightbox img{display:block;width:100%;height:auto;max-height:calc(94vh - 110px);object-fit:contain}
[data-screen="handover_sign"] .handover-lightbox-words{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--cabin-on-instrument)}

/* Waiting: the words that say the page updates by itself, or Refresh when scripts are off. */
[data-screen="handover_sign"] .handover-poll{margin:-4px 0 20px}
[data-screen="handover_sign"] .handover-poll p{margin:0}
[data-screen="handover_sign"] .handover-poll-off{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}

@media (max-width:880px){
  /* Phone text is never under 13px. */
  [data-screen="handover_sign"] .label{font-size:13px}
  [data-screen="handover_sign"] .mono{font-size:max(13px,.93em)}
}
@media (max-width:640px){
  [data-screen="handover_sign"] .handover-sign-head .card-b{padding:16px}
  [data-screen="handover_sign"] .handover-sign-head h1{font-size:30px}
  [data-screen="handover_sign"] .handover-state .card-b{padding:16px}
  [data-screen="handover_sign"] .handover-state h2{font-size:24px}
  [data-screen="handover_sign"] .damage-item{grid-template-columns:minmax(0,1fr)}
  [data-screen="handover_sign"] .handover-shot figcaption{font-size:13px}
  [data-screen="handover_sign"] .signature-pad{padding:14px}
}

/* ---------------------------------------------------------- the record of a handover
   handover_record.php: one column the width of a document, read down the page in the order of the sealed record. Who holds the van now, in the
   words of the brief's step 7; the facts, each label beside its words; the fingerprints, each with its check and, for a copy, Download; the
   damage list with its photographs side by side; the corrections, oldest first; and Stop this handover at the foot, as on the manager's steps. */
[data-screen="handover_record"] main{max-width:calc(960px + 2 * var(--gutter))}
[data-screen="handover_record"] .handover-record-head .pin-box{margin-left:4px;vertical-align:6px}
[data-screen="handover_record"] :is(.handover-done,.handover-state) .card-b{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-block:18px 20px}
[data-screen="handover_record"] :is(.handover-done,.handover-state) .label{margin:0}
[data-screen="handover_record"] :is(.handover-done,.handover-state) h2{font-size:30px;line-height:1.15;overflow-wrap:anywhere}
[data-screen="handover_record"] :is(.handover-done,.handover-state) h2 .plate{font-size:20px;line-height:22px;padding:3px 9px;vertical-align:4px}
[data-screen="handover_record"] :is(.handover-done,.handover-state) .hint{margin:0;max-width:78ch;font-size:15px;line-height:1.5}
[data-screen="handover_record"] :is(.handover-done,.handover-state) .hint .mono{color:var(--instrument)}
[data-screen="handover_record"] .handover-name{white-space:nowrap}
/* A time or a reference at the end of a line wraps whole onto the next when there is no room, which WebKit does only for a box of its own. */
[data-screen="handover_record"] :is(.handover-record-head .sub,.handover-done .hint,.handover-state .hint,.handover-sub,.correction-who,.van-form-note) .mono{display:inline-block}

[data-screen="handover_record"] .handover-sealed .card-h{align-items:baseline}
[data-screen="handover_record"] dl.handover-facts{grid-template-columns:minmax(10em,15em) minmax(0,1fr)}
[data-screen="handover_record"] dl.handover-facts dd{text-align:left}
[data-screen="handover_record"] dl.handover-facts dd .pill{vertical-align:-3px}
[data-screen="handover_record"] .handover-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;line-height:1.45;color:var(--steel)}
[data-screen="handover_record"] .handover-sub .mono{color:var(--instrument)}
[data-screen="handover_record"] .handover-sub .pill{margin-top:2px}

[data-screen="handover_record"] .handover-fp-h{margin:24px 0 0;font-size:15px;line-height:20px;letter-spacing:.06em;text-transform:uppercase}
[data-screen="handover_record"] .handover-fp-note{margin:2px 0 8px;max-width:78ch}
[data-screen="handover_record"] .handover-fingerprints{margin:0;padding:0;list-style:none;border-top:1px solid var(--bezel)}
[data-screen="handover_record"] .handover-fingerprints li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label pin" "sha link" "found found";
  align-items:center;gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--bezel)}
[data-screen="handover_record"] .handover-fingerprints li:last-child{padding-bottom:0;border-bottom:0}
[data-screen="handover_record"] .fp-label{grid-area:label;font-size:14px;font-weight:600;line-height:20px}
[data-screen="handover_record"] .handover-fingerprints .pill{grid-area:pin;justify-self:end}
[data-screen="handover_record"] .fp-sha{grid-area:sha;font-size:12.5px;line-height:18px;white-space:normal;word-break:break-all;color:var(--steel)}
[data-screen="handover_record"] .handover-fingerprints a{grid-area:link;justify-self:end;font-size:14px;line-height:18px}
[data-screen="handover_record"] .fp-found{grid-area:found;margin-top:4px;font-size:13px;line-height:1.45}
[data-screen="handover_record"] .fp-found .mono{white-space:normal;word-break:break-all}

[data-screen="handover_record"] .damage-item{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px 24px;padding:16px 0;border-top:1px solid var(--bezel)}
[data-screen="handover_record"] .damage-item:first-child{padding-top:0;border-top:0}
[data-screen="handover_record"] .damage-item:last-child{padding-bottom:0}
[data-screen="handover_record"] .damage-what{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
[data-screen="handover_record"] .damage-n{line-height:18px}
[data-screen="handover_record"] .damage-n .mono{color:var(--instrument)}
[data-screen="handover_record"] .damage-place{font-size:16px;overflow-wrap:anywhere}
[data-screen="handover_record"] .damage-type{font-size:15px;line-height:1.4}
[data-screen="handover_record"] .damage-recorded{gap:4px 10px;font-size:14px;line-height:20px}
[data-screen="handover_record"] .damage-what .hint{margin:2px 0 0;font-size:14px}
[data-screen="handover_record"] .damage-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;min-width:0}
[data-screen="handover_record"] .damage-photos .photo-thumb{max-width:none}
[data-screen="handover_record"] .damage-photos>.muted{display:grid;place-items:center;min-height:96px;padding:8px;border:1px dashed var(--bezel);border-radius:2px;
  font-size:13px;line-height:1.35;text-align:center}

[data-screen="handover_record"] .correction{padding:12px 0;border-bottom:1px solid var(--bezel)}
[data-screen="handover_record"] .correction:first-child{padding-top:0}
[data-screen="handover_record"] .correction-who{margin:0;font-size:13px;line-height:18px;color:var(--steel)}
[data-screen="handover_record"] .correction-who b{font-weight:600;color:var(--instrument)}
[data-screen="handover_record"] .correction-who .mono{color:var(--instrument)}
[data-screen="handover_record"] .correction-body{margin:4px 0 0;max-width:78ch;font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
[data-screen="handover_record"] .handover-none{margin:0;font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="handover_record"] .handover-correction{margin-top:8px}
[data-screen="handover_record"] .handover-correction form.stack{max-width:600px}


@media (max-width:880px){
  /* A fingerprint, a time or a reference in a quiet line keeps the 13px floor of a phone. */
  [data-screen="handover_record"] :is(.fp-sha,.handover-sub .mono,.hint .mono,.damage-n .mono,.damage-recorded .mono,.correction-who .mono,.fp-found .mono){font-size:13px}
  [data-screen="handover_record"] .handover-fingerprints a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:640px){
  /* The plate takes a line of its own, as on the van file, so the kind of handover is never split by it. */
  [data-screen="handover_record"] .handover-record-head h1 .plate{display:flex;width:max-content;max-width:100%;margin:0 0 10px}
  [data-screen="handover_record"] .handover-record-head .pin-box{margin-left:0}
  [data-screen="handover_record"] :is(.handover-done,.handover-state) h2{font-size:24px}
  [data-screen="handover_record"] :is(.handover-done,.handover-state) h2 .plate{font-size:17px;line-height:19px;vertical-align:3px}
  [data-screen="handover_record"] dl.handover-facts{grid-template-columns:minmax(0,1fr)}
  [data-screen="handover_record"] dl.handover-facts dt{padding-bottom:0;border-bottom:0;font-size:13px}
  [data-screen="handover_record"] dl.handover-facts dd{padding-top:2px}
  [data-screen="handover_record"] dl.handover-facts dd:first-of-type{padding-top:2px}
  [data-screen="handover_record"] .handover-fingerprints li{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "pin" "sha" "found" "link"}
  [data-screen="handover_record"] .handover-fingerprints .pill{justify-self:start;margin:2px 0}
  [data-screen="handover_record"] .fp-sha{max-width:40ch}
  [data-screen="handover_record"] .handover-fingerprints a{justify-self:start}
  [data-screen="handover_record"] .damage-item{grid-template-columns:minmax(0,1fr)}
}

/* ========================================================== damage reported during a hire, 0.8.0
   damage_report.php and damage_report_done.php, and the report on the van file, the damages list, the dashboard and My van. The page takes the
   walk round's column, its van, its list of damage on the record already and its damage sheet, whose rules above are the report's too; this adds
   the page's own head, the line of words under it and the way back, the fields the report adds, and the page a report goes to once saved: what
   happens next, the report as facts and its two photographs. */
:is([data-screen="damage_report"],[data-screen="damage_report_done"]) .damage-report-head{margin-bottom:14px}
:is([data-screen="damage_report"],[data-screen="damage_report_done"]) .damage-report-head .sub .mono{color:var(--instrument)}
[data-screen="damage_report"] .damage-report-note{margin:0 0 20px;max-width:66ch;font-size:15px;line-height:1.5;color:var(--steel)}
[data-screen="damage_report"] .damage-report-refused .card-b{display:grid;justify-items:start;gap:14px}
[data-screen="damage_report"] .damage-report-refused .damage-report-note{margin:0;color:var(--instrument)}
[data-screen="damage_report"] :is(#noticed_at,#crime_ref){max-width:22ch;font-family:var(--mono);font-size:16px;font-weight:500}
[data-screen="damage_report"] .damage-report-back{margin:16px 0 0;font-size:15px}
[data-screen="damage_report"] .damage-report-back a{display:inline-flex;align-items:center;min-height:44px}
[data-screen="damage_report_done"] .damage-report-next{border-top:3px solid var(--red)}
/* The report as facts reads as a record: the labels in a column of their own and each value from the left, what happened being a sentence or two,
   as a driver's contract and signing facts are set out on their record. */
[data-screen="damage_report_done"] .damage-report-facts dl.kv{grid-template-columns:minmax(0,11.5em) minmax(0,1fr)}
[data-screen="damage_report_done"] .damage-report-facts dl.kv dd{text-align:left}
[data-screen="damage_report_done"] .damage-report-facts .mono{color:var(--instrument)}
[data-screen="damage_report_done"] .damage-report-photos{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px;margin-top:16px}
[data-screen="damage_report_done"] .damage-report-photos .photo-thumb{max-width:none}
[data-screen="damage_report_done"] .damage-report-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
/* On the van file, the damages list and My van, a report says who reported it and when it was noticed in a quieter line of its own. */
[data-screen="fleet_show"] .van-damage .card-h{align-items:center;min-height:49px}
[data-screen="fleet_show"] .van-damage .card-h .actions{gap:8px 14px}
[data-screen="fleet_show"] .van-damage .card-h .btn{font-size:14px}
[data-screen="fleet_show"] .van-damage-report,[data-screen="damages_index"] .damages-report{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--steel);white-space:normal}
[data-screen="fleet_show"] .van-damage-report .mono,[data-screen="damages_index"] .damages-report .mono{display:inline-block;color:var(--instrument)}
[data-screen="damages_index"] td:has(>.damages-report){min-width:26ch;max-width:48ch}
[data-screen="dashboard"] .dash-reports td:nth-child(3){min-width:22ch;white-space:normal}
[data-screen="dashboard"] .dash-reports td:is(:nth-child(4),:nth-child(5)){white-space:nowrap}
[data-screen="my"] .phone-report{display:grid;gap:6px;margin:-4px 0 20px}
[data-screen="my"] .phone-report .hint{margin:0}
[data-screen="my"] .phone-record-report{color:var(--steel)}
[data-screen="my"] .phone-record-report .mono{color:var(--instrument)}
[data-screen="my"] .phone-record-report a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;padding-inline:4px}

@media (max-width:880px){
  [data-screen="fleet_show"] .van-damage-report .mono,[data-screen="damages_index"] .damages-report .mono{font-size:13px}
  [data-screen="damage_report_done"] .damage-report-head .sub .mono{font-size:13px}
  [data-screen="fleet_show"] .van-damage-report a,[data-screen="damages_index"] .damages-report a,[data-screen="dashboard"] .dash-reports a.mono{display:inline-block;padding-block:14px;margin-block:-14px}
}
@media (max-width:640px){
  [data-screen="fleet_show"] .van-damage .card-h .actions{width:100%;justify-content:space-between;padding-block:4px 2px}
  [data-screen="damage_report_done"] .damage-report-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-screen="damage_report_done"] .damage-report-facts dl.kv{grid-template-columns:minmax(0,1fr)}
  [data-screen="damage_report_done"] .damage-report-facts dl.kv dt{padding-bottom:0;border-bottom:0;font-size:13px}
  [data-screen="damage_report_done"] .damage-report-facts dl.kv dd{padding-top:3px}
  [data-screen="damage_report_done"] .damage-report-facts dl.kv dd:first-of-type{padding-top:3px}
  [data-screen="damage_report_done"] .damage-report-actions .btn{flex:1 1 auto}
}

/* ---------------------------------------------------------- staff accounts and the director, 0.8.1
   The staff list gains a last column and a third state; the form asks the role as four choices with a line under each,
   his choice of 19-09-2026; the two sign in pages wear the sign in card's own shell, so nothing moves between them. */
[data-screen="staff_form"] .label-as-legend{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--instrument)}
[data-screen="staff_form"] .staff-role-list{display:grid;gap:8px}
[data-screen="staff_form"] .staff-role{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;margin:0;padding:12px 14px;
  border:1px solid var(--bezel);border-radius:2px;font-size:15px;font-weight:500;cursor:pointer}
[data-screen="staff_form"] .staff-role input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--instrument);cursor:pointer}
[data-screen="staff_form"] .staff-role .hint{display:block;margin-top:3px;font-weight:400}
[data-screen="staff_form"] .staff-role:has(input:checked){border-color:var(--instrument);box-shadow:inset 0 0 0 1px var(--instrument)}
[data-screen="staff_show"] .people-note{max-width:60ch}
/* An email address is the one thing on this record that has no spaces to break at: .mono never wraps, so here it may,
   or a long address at a garage's own domain makes the page wider than a phone. */
[data-screen="staff_show"] dl.kv dd.mono{white-space:normal;overflow-wrap:anywhere}

/* The first sign in and the forgotten password, on the sign in card's shell. */
body.entry:is([data-screen="login_code"],[data-screen="login_password"]) main>.centre>.flash{margin-bottom:16px}
:is([data-screen="login_code"],[data-screen="login_password"]) .centre .card{margin-bottom:0}
:is([data-screen="login_code"],[data-screen="login_password"]) .card-b h1+.hint{margin:6px 0 20px;font-size:14px}
:is([data-screen="login_code"],[data-screen="login_password"]) input[type=email],
:is([data-screen="login_code"],[data-screen="login_password"]) input[type=password]{min-height:48px}
[data-screen="login_code"] .entry-alt{margin:0;padding:14px 24px 16px;border-top:1px solid var(--bezel);font-size:14px;line-height:1.45;color:var(--steel)}
[data-screen="login_code"] input.phone-code{min-height:60px;font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.4em;text-align:center}
@media (max-width:880px){
  [data-screen="login_code"] .entry-alt a{display:inline-block;padding-block:13px;margin-block:-13px}
  /* The staff list's Open link is a finger's target at 44px, as the report links of 0.8.0 are, with the row's height unchanged. */
  [data-screen="people_index"] .staff-open{display:inline-block;padding-block:14px;margin-block:-14px}
}
@media (max-width:420px){
  [data-screen="staff_form"] .staff-role{min-height:44px;align-items:center}
  [data-screen="staff_form"] .staff-role input{width:24px;height:24px;margin:0}
}

/* ---------------------------------------------------------- customers, 0.9.0
   The register of customers, a customer's form and its record, in the identity of 0.8.2: bezels, lamps, the dial label's small mono
   capitals for the word Fleet (a word, never a pin, his choice of 19-09-2026), plain mono figures in the tables (rule 5). The pager is
   shared, as every list takes it (B5a step 7), and so is a filter pill's count at the size of a phone. */
.pager{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:12px 20px;border-top:1px solid var(--bezel)}
.pager-rows{margin:0;margin-right:auto;font-size:14px;color:var(--steel)}
.pager-pages{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pager-pages a,.pager-pages .on{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 10px;
  border:1px solid var(--bezel);border-radius:2px;background:var(--dial);font:500 14px/1 var(--mono);color:var(--instrument);text-decoration:none}
.pager-pages a:hover{border-color:var(--instrument)}
.pager-pages .on{background:var(--instrument);border-color:var(--instrument);color:var(--cabin)}
.pager-gap{display:inline-flex;align-items:center;min-height:36px;padding:0 2px;color:var(--steel)}
.pager-next{display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:14px;font-weight:600;color:var(--instrument);text-decoration:none}
.pager-next:hover{color:var(--brake)}
.pager-next .icon{width:16px;height:16px}
.cust-fleet{margin-left:6px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.page-head .cust-fleet{margin-left:0}
[data-screen="customers_index"] .cust-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:16px}
[data-screen="customers_index"] .cust-bar .filters{margin:0}
[data-screen="customers_index"] .cust-search{flex:1 1 320px;flex-wrap:nowrap;align-items:center;gap:8px;max-width:460px}
[data-screen="customers_index"] .cust-search input[type=search]{flex:1 1 auto;min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--bezel);border-radius:2px;
  background:var(--dial);color:var(--instrument);font:400 15px/1.3 var(--body)}
[data-screen="customers_index"] .cust-search input[type=search]:hover{border-color:var(--steel)}
[data-screen="customers_index"] .cust-search input[type=search]:focus{outline:2px solid transparent;border-color:var(--instrument);box-shadow:0 0 0 1px var(--instrument),0 0 0 5px rgba(227,20,28,.32)}
[data-screen="customers_index"] .cust-list td:first-child{white-space:nowrap}
[data-screen="customer_form"] main{max-width:calc(760px + 2 * var(--gutter))}
[data-screen="customer_form"] form.stack{max-width:none}
[data-screen="customer_form"] .cust-legend{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--instrument)}
[data-screen="customer_form"] .cust-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
[data-screen="customer_form"] .cust-choice{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;margin:0;padding:12px 14px;
  border:1px solid var(--bezel);border-radius:2px;background:var(--dial);font-size:15px;font-weight:500;cursor:pointer}
[data-screen="customer_form"] .cust-choice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--instrument);cursor:pointer}
[data-screen="customer_form"] .cust-choice .hint{display:block;margin-top:3px;font-weight:400}
[data-screen="customer_form"] .cust-choice:has(input:checked){border-color:var(--instrument);box-shadow:inset 0 0 0 1px var(--instrument)}
[data-screen="customer_form"] .cust-group{display:flex;flex-direction:column;gap:16px}
[data-screen="customer_form"] .cust-group[hidden]{display:none}
[data-screen="customer_form"] .cust-check{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;margin:0;cursor:pointer}
[data-screen="customer_form"] .cust-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--instrument);cursor:pointer}
[data-screen="customer_form"] .cust-check .hint{display:block;margin-top:3px;font-weight:400}
[data-screen="customer_form"] :is(.cust-postcode,.cust-terms,.cust-hire) input{max-width:200px}
[data-screen="customer_show"] dl.kv dd.cust-email{overflow-wrap:anywhere}
[data-screen="customer_show"] .cust-note{margin:0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="customer_show"] .cust-note a{color:var(--instrument);font-weight:600}
[data-screen="customer_show"] .cust-plates{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
[data-screen="customer_show"] .cust-plates a{display:inline-flex;text-decoration:none}
[data-screen="customer_show"] .cust-in-use{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 10px}
[data-screen="customer_show"] .cust-assign{display:grid;gap:10px;margin:0 0 12px;padding:0;list-style:none}
[data-screen="customer_show"] .cust-assign li{display:grid;justify-items:start;gap:8px;padding:10px 12px;border:1px solid var(--bezel);border-radius:2px;
  background:var(--dial)}
[data-screen="customer_show"] .cust-assign form{margin:0}
[data-screen="customer_show"] .cust-details{margin-top:14px}
[data-screen="customer_show"] .cust-state{margin-top:4px;padding-top:8px;border-top:1px solid var(--bezel)}
[data-screen="customer_show"] .cust-details>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;font-size:14px;font-weight:600;
  color:var(--instrument);list-style:none}
[data-screen="customer_show"] .cust-details>summary::-webkit-details-marker{display:none}
[data-screen="customer_show"] .cust-details>summary::before{content:"";width:8px;height:8px;margin:0 4px 0 2px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(-45deg)}
[data-screen="customer_show"] .cust-details[open]>summary::before{transform:rotate(45deg);margin-top:-4px}
[data-screen="customer_show"] .cust-details>summary:hover{color:var(--brake)}
[data-screen="customer_show"] .cust-details>:not(summary){margin-top:10px}
[data-screen="customer_show"] .cust-details .hint{max-width:62ch}
@media (max-width:880px){
  /* 44px for every control of these screens, as every phone screen has them (a button and a filter pill have it from the shared rules). */
  .pager-pages a,.pager-pages .on,.pager-gap,.pager-next{min-height:44px}
  .pager-pages a,.pager-pages .on{min-width:44px}
  [data-screen="customers_index"] .cust-search input[type=search]{min-height:44px;font-size:16px}
  [data-screen="customer_show"] .cust-details>summary{min-height:44px}
  [data-screen="customer_show"] .cust-note a{display:inline-block;padding-block:12px;margin-block:-12px}
  /* Phone text is never under 13px: a filter pill's count on every list, the word Fleet, and the dial label on a record. */
  .filters a .n{font-size:13px}
  .cust-fleet,[data-screen="customer_show"] .label{font-size:13px}
  /* A plate that opens its van takes a 44px target, as a button does; the rows of plates touch, so no target covers another. */
  [data-screen="customer_show"] .cust-plates{gap:0 8px}
  [data-screen="customer_show"] .cust-plates a{min-height:44px;align-items:center}
}
@media (max-width:640px){
  .pager{padding:12px 16px}
  [data-screen="customers_index"] .cust-search{max-width:none}
  [data-screen="customer_form"] .cust-choices{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  [data-screen="customer_form"] .cust-choice{min-height:44px;align-items:center}
  [data-screen="customer_form"] :is(.cust-choice,.cust-check) input{width:24px;height:24px;margin:0}
}

/* ---------------------------------------------------------- the lists in pages and the dashboard's customers, 0.9.0 (B5a step 7)
   The vehicle list's bar has a customer row above its depot row, their labels one width so the pills line up; the damages, inspections and
   drivers lists have a customer row of pills over their card. On the cluster's page (the dashboard until 0.12.5) a depot of more than 60 vans
   shows its gauge alone with a line of two links; the vans with no customer are a row of Today since 0.12.5, their card's rules gone
   (B12 step 9b). */
.depotbar .label{min-width:80px}
:is([data-screen="dashboard"],[data-screen="cluster"]) .nest-more{margin:0;font-size:14px;line-height:1.5;color:var(--steel)}
:is([data-screen="dashboard"],[data-screen="cluster"]) .nest-more a{color:var(--instrument);font-weight:600}
/* The vehicle list's customer: its own column where every column fits one line, and a line under the vehicle at 1440px and below, measured
   on 22-09-2026 with the seed's longest names, where the column would push the Status column out of the card at 1280. Above the phone
   layout the list's cells keep 8px either side between columns instead of 12px, its outer edges still 20px, so those names keep one line
   each from 1230px up; below about 1184px the list scrolls sideways inside its card, as it did below 1176px before 0.9.0. */
[data-screen="fleet_index"] .fleet-customer-sub{display:none}
@media (min-width:881px){
  [data-screen="fleet_index"] table.t :is(th,td):not(:first-child){padding-left:8px}
  [data-screen="fleet_index"] table.t :is(th,td):not(:last-child){padding-right:8px}
}
@media (max-width:1440px){
  [data-screen="fleet_index"] .fleet-customer-col{display:none}
  [data-screen="fleet_index"] .fleet-customer-sub{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--steel)}
  [data-screen="fleet_index"] .fleet-customer-sub .pill{font-size:13px}
}
@media (max-width:880px){
  /* The links of a line take a 44px target, as a button does, and give the room back so no line moves. */
  :is([data-screen="dashboard"],[data-screen="cluster"]) .nest-more a{display:inline-block;padding-block:12px;margin-block:-12px}
}

/* ---------------------------------------------------------- the workshop, 0.10.0 (B5b)
   The board, Booked, New job, a job's page, the mechanic's page and the sign off, with the Jobs cards of the van file and the customer's
   page and the dashboard's Workshop today: the pieces drawn at step 0 for his choice, lifted from the preview's builder with the prefix
   job-. The columns, the van head, the big button and the small forms join the lists they share with the screens before them, above. */
.job-mark{width:18px;height:18px;flex:none}
.job-mark.lg{width:28px;height:28px}
.job-kinds a .job-mark{color:var(--steel)}
.job-kinds a.on .job-mark{color:var(--cabin)}
/* The kind in a table: the mark centred beside the word, and the pair on the row's baseline by the word. */
.job-kind-word{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.job-kind-word .job-mark{align-self:center;color:var(--instrument)}
.job-lane-switch{display:none}
/* The mechanic's running clock, a line under the board's head. */
.job-running{margin:-6px 0 16px;font-size:14px;line-height:1.5;color:var(--steel)}
.job-booked{display:flex;align-items:stretch;margin-bottom:20px;background:var(--dial);border:1px solid var(--bezel);border-radius:2px;box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08);overflow:hidden}
.job-booked-label{display:flex;flex-direction:column;justify-content:center;flex:none;padding:10px 16px;font-family:var(--display);font-size:14px;font-weight:700;font-style:italic;line-height:18px;letter-spacing:.05em;text-transform:uppercase}
.job-booked-label .mono{font-size:12px;font-weight:500;color:var(--steel);text-transform:none;letter-spacing:0}
.job-booked-item{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:6px 12px;flex:1 1 0;min-width:0;padding:10px 16px;border-left:1px solid var(--bezel);font-size:14px;line-height:18px;color:inherit;text-decoration:none}
.job-booked-item .muted{grid-column:1 / -1;font-size:13px;line-height:16px}
.job-booked-item:hover{background:var(--cabin)}
.job-lanes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:start}
.job-lane{min-width:0}
.job-lane-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--display);font-size:14px;font-weight:700;font-style:italic;line-height:18px;letter-spacing:.05em;text-transform:uppercase}
.job-lane-h .odo{font-size:15px;font-style:normal;letter-spacing:0}
.job-lane-list{display:grid;gap:8px}
.job-card{display:grid;gap:5px;min-width:0;padding:10px 12px;background:var(--dial);border:1px solid var(--bezel);border-radius:2px;box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08);color:inherit;text-decoration:none}
a.job-card:hover{border-color:var(--instrument)}
.job-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.job-card-top .job-mark{color:var(--instrument)}
.job-title{font-size:14px;font-weight:600;line-height:18px;overflow-wrap:anywhere}
.job-title .mono{font-weight:600}
.job-line{font-size:13px;line-height:17px;color:var(--steel);overflow-wrap:anywhere}
.job-line .mono{color:var(--instrument)}
.job-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;font-size:13px;line-height:16px;color:var(--steel)}
.job-foot .mono{font-size:12px}
.job-who{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;color:var(--instrument)}
.job-who.none{color:var(--steel)}
.job-ini{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--instrument);border-radius:2px;font-family:var(--mono);font-size:11px;font-weight:600;font-style:normal;line-height:1}
.job-lane-empty{display:flex;align-items:center;gap:10px;margin:0;padding:4px 0;font-size:13px;line-height:17px;color:var(--steel)}
.job-lane-empty::before{content:"";flex:none;width:28px;height:32px;background:var(--cell-empty) center/contain no-repeat}
/* Booked: the day to start from, a line above the list. */
.job-days{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 20px}
.job-days label{margin:0}
.job-days input[type=text]{width:9.5em}
/* New job: the registration and its Find button on one line, above the job's own form. */
.job-find{margin-bottom:28px}
.job-find-row{display:flex;gap:8px}
.job-find-row input{flex:1 1 auto;min-width:0}
.job-find-row .btn{flex:none;min-height:44px}
.job-kind-legend{display:block;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.3;color:var(--instrument)}
.job-kind-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.job-kind{display:grid;grid-template-columns:20px 28px minmax(0,1fr);align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial);font-size:15px;line-height:1.3;cursor:pointer}
.job-outcomes .job-kind{grid-template-columns:20px minmax(0,1fr)}
.job-kind input{width:20px;height:20px;margin:0;accent-color:var(--instrument);cursor:pointer}
.job-kind .job-mark{color:var(--instrument)}
.job-kind .hint{display:block;margin-top:2px;font-weight:400}
.job-kind:has(input:checked){border-color:var(--instrument);box-shadow:inset 0 0 0 1px var(--instrument)}
.job-kind:hover{border-color:var(--instrument)}
/* A job's page: its steps, the held van, what happens next, the details, the parts and the photographs. */
.job-sectors{margin:-4px 0 20px}
.job-held{margin:0;font-size:15px;line-height:1.5}
.job-held+.job-form{margin-top:8px}
.job-hint{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--steel)}
.job-hint:last-child{margin-bottom:0}
.job-sub{display:block;margin-top:2px;font-size:13px;font-weight:400;line-height:1.45;color:var(--steel)}
.job-note-body{white-space:pre-line}
.job-note{display:block}
.job-note+.job-note{margin-top:6px}
.job-moves .card-b{padding-block:6px}
.job-moves .job-form+.job-form{border-top:1px solid var(--bezel)}
.job-shots{display:flex;flex-wrap:wrap;gap:12px}
.job-shot{display:grid;gap:4px;width:120px;margin:0}
.job-shot .photo-thumb{padding:2px}
.job-shot img{aspect-ratio:4/3;object-fit:cover}
.job-shot figcaption{font-size:12px;line-height:1.4;color:var(--steel)}
.job-shot.none{place-items:center;height:90px;padding:4px;border:1px dashed var(--steel);border-radius:2px;color:var(--steel);font-family:var(--mono);font-size:12px;line-height:1.4;text-align:center}
/* The mechanic's page: the clock as an odometer, and each move a button; one that asks for words opens its form under the row. */
.job-clock{display:grid;gap:6px;justify-items:start;margin-bottom:14px}
.job-clock .odo{font-size:44px}
.job-clock-words{font-size:14px;line-height:1.45;color:var(--steel)}
.job-clock-btns{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.tl+.job-clock-btns{margin-top:12px}
.job-act>summary{list-style:none}
.job-act>summary::-webkit-details-marker{display:none}
.job-act[open]{flex-basis:100%}
.job-act[open]>summary{border-color:var(--instrument);box-shadow:inset 0 0 0 1px var(--instrument)}
.job-act form.stack{max-width:none;margin-top:10px;padding:14px 16px;border:1px solid var(--bezel);border-radius:2px;background:var(--dial)}
[data-screen="job_mine"] form.stack{max-width:none}
[data-screen="job_mine"] .formfoot{margin-top:4px}
[data-screen="job_mine"] label.check,[data-screen="job_signoff"] label.check{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:8px;margin:0;font-size:15px;font-weight:500;line-height:1.4;cursor:pointer}
[data-screen="job_mine"] label.check input,[data-screen="job_signoff"] label.check input{width:24px;height:24px;margin:0;accent-color:var(--instrument)}
/* The sign off's form is a card, its fields a column inside. */
[data-screen="job_signoff"] form.card.stack>.card-b{display:flex;flex-direction:column;gap:16px}
[data-screen="dashboard"] .dash-workshop .job-kind-word{font-size:14px}
@media (max-width:1100px){
  .job-lanes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .job-booked{flex-wrap:wrap}
  .job-booked-item{flex-basis:calc(50% - 1px)}
}
@media (max-width:880px){
  /* One lane at a time behind the lane switcher; the bookings have their own page. */
  .job-lane-switch{display:flex}
  .job-lanes{grid-template-columns:minmax(0,1fr)}
  .job-lanes .job-lane:not(.on){display:none}
  .job-booked{display:none}
  /* Phone text is never under 13px, and every target is 44px. */
  .job-foot .mono,.job-shot figcaption,.job-shot.none,.job-booked-label .mono{font-size:13px}
  .job-ini{width:26px;height:26px;font-size:13px}
  .job-sectors .sector-n{font-size:13px}
  :is([data-screen="workshop_index"],[data-screen="jobs_booked"],[data-screen="job_form"],[data-screen="job_show"],[data-screen="job_mine"],[data-screen="job_signoff"]) :is(.hint,.job-line,.job-sub,.van-form-note,.job-clock-words,.job-shot figcaption) .mono{font-size:13px}
  :is([data-screen="job_show"],[data-screen="job_mine"]) .tl .when,[data-screen="job_mine"] .job-clock .label{font-size:13px}
  .job-clock-btns>*{flex:1 1 auto}
  .job-clock-btns>form .btn,.job-clock-btns>.job-act>summary.btn{width:100%}
  :is([data-screen="job_mine"],[data-screen="job_signoff"]) label.check{padding-block:4px;margin-block:-4px;min-height:44px;align-items:center}
  .job-days .btn{min-height:44px}
  /* The links inside lines of words, lifted to 44px by the house's one rule, which gives the room back so no line moves (the review of
     step 8, F13, his choice of 24-09-2026): a photograph's line of the timeline and the running clock; the sign off's mileage in, on its
     13px line, by the rule's 14px variant, as the damage report links have it (his choice of 24-09-2026, 21:39). */
  :is([data-screen="job_show"],[data-screen="job_mine"]) .tl .who a,.job-running a{display:inline-block;padding-block:12px;margin-block:-12px}
  [data-screen="job_signoff"] .job-sub a{display:inline-block;padding-block:14px;margin-block:-14px}
}
@media (max-width:640px){
  .job-kind-list{grid-template-columns:minmax(0,1fr)}
  /* Seven names do not fit a phone: the sectors keep their numbers, the current one alone its name, and the rest are read aloud only. */
  .job-sectors .sector:not(.now) .sector-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .job-sectors .sector.now .sector-name{white-space:nowrap;overflow-wrap:normal}
  .job-sectors .sector{overflow:visible}
  .job-sectors .sector.now:last-child .sector-name{align-self:flex-end}
  .job-find-row{flex-wrap:wrap}
}

/* ---------------------------------------------------------- the first page, The Two Films (0.11.1, B7f) */
:root{--fp-col:clamp(470px,34vw,560px)}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]){background:#050507}
/* The still: the film box's own background, the drawn film's first frame. The Full House is the default; the Open
   Door's rules override it where the box says data-film="open-door". Each film keeps one anchor for its still and its
   film: The Full House centred (its action runs across the whole frame), The Open Door from the left (its action is on
   the left and the right runs under the card's column). */
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:#050507 url(first-page/film/full-house/film-poster-1600.jpg) 50% 50% / cover no-repeat;
  background-image:image-set(url(first-page/film/full-house/film-poster-1600.webp) type("image/webp"),url(first-page/film/full-house/film-poster-1600.jpg) type("image/jpeg"))}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film[data-film="open-door"]{background-position:0% 50%;background-image:url(first-page/film/open-door/film-poster-1600.jpg);
  background-image:image-set(url(first-page/film/open-door/film-poster-1600.webp) type("image/webp"),url(first-page/film/open-door/film-poster-1600.jpg) type("image/jpeg"))}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .4s ease}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film[data-film="open-door"] .first-film-video{object-position:0% 50%}
html.first-film-live body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-video{opacity:1}
/* The shade: dark at the top for the lockup, towards the card's column on the right, and at the foot for the control. */
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(5,5,7,.55) 0%,rgba(5,5,7,0) 20%),
  linear-gradient(90deg,rgba(5,5,7,0) 46%,rgba(5,5,7,.42) 66%,rgba(5,5,7,.72) 100%),
  linear-gradient(0deg,rgba(5,5,7,.45) 0%,rgba(5,5,7,0) 18%)}
/* The film's control, so anyone can stop the motion (WCAG 2.2.2). Only the script shows it, once a film can play. */
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle{position:fixed;left:28px;bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:0 12px;
  border:0;border-radius:2px;background:rgba(5,5,7,.6);cursor:pointer;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bezel)}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle[hidden]{display:none}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--red)}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle[data-paused] i{background:var(--steel)}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle:hover{color:var(--cabin)}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle:focus-visible{outline:2px solid var(--bezel);outline-offset:2px}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) main{position:relative;z-index:1;width:var(--fp-col);min-height:100vh;margin-left:auto;padding:96px 0;justify-content:center}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) main>.centre{max-width:400px;margin:0 auto;position:relative;left:-8px}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) main>.centre>.flash{margin-bottom:16px}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .centre .card,body.entry[data-screen="driver_login"] main>.centre.card{box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 var(--bezel),0 30px 80px rgba(0,0,0,.65);margin-bottom:0}
body.entry[data-screen="driver_login"] main>.centre.card{padding:24px}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .entry-eyebrow{margin:0 0 6px}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) h1{font:italic 700 40px/1.05 var(--display);margin:0;padding-bottom:12px;border-bottom:1px solid var(--bezel);box-shadow:0 1px 0 var(--bezel-hi)}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) h1+.hint{margin:12px 0 20px}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .entry-brand,body.entry[data-screen="driver_login"] .phone-top{position:fixed;left:40px;top:32px;z-index:2;margin:0;padding:0;border:0;background:none;width:auto;max-width:none;display:block}
body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .entry-brand .lockup-img,body.entry[data-screen="driver_login"] .phone-top .lockup-img{width:auto;height:48px}
body.entry[data-screen="driver_login"] .phone-top .topbar-in{padding:0;height:auto}
body.entry[data-screen="driver_login"] .phone-top .lockup{min-height:0}
body.entry[data-screen="driver_login"] .phone-top-sub{display:none}
@media (max-width:880px){
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .entry-eyebrow{font-size:13px}
}
@media (max-width:759px){
  /* Portrait: the phone film's square, 58px down under the lockup, the window's width and 102vw tall, so 1vw of the
     picture is cut inside the box at each side and the page is never wider than the window. Both phone films are already
     cropped to their own action, so both are centred. */
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film{position:absolute;left:0;top:58px;right:0;bottom:auto;width:auto;height:102vw;background-position:50% 50%;
    background-image:url(first-page/film/full-house/film-poster-phone.jpg);
    background-image:image-set(url(first-page/film/full-house/film-poster-phone.webp) type("image/webp"),url(first-page/film/full-house/film-poster-phone.jpg) type("image/jpeg"))}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film[data-film="open-door"]{background-position:50% 50%;background-image:url(first-page/film/open-door/film-poster-phone.jpg);
    background-image:image-set(url(first-page/film/open-door/film-poster-phone.webp) type("image/webp"),url(first-page/film/open-door/film-poster-phone.jpg) type("image/jpeg"))}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-video,body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film[data-film="open-door"] .first-film-video{object-position:50% 50%}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film::after{background:linear-gradient(180deg,#050507 0%,rgba(5,5,7,0) 12%),linear-gradient(0deg,#050507 0%,rgba(5,5,7,0) 30%)}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-toggle{position:absolute;left:4px;top:62px;bottom:auto;font-size:11px;gap:10px}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) main{width:100%;margin:0;padding:calc(102vw - 6px) 16px 48px;justify-content:flex-start}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) main>.centre{max-width:none;left:0}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .entry-brand,body.entry[data-screen="driver_login"] .phone-top{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:center}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .entry-brand .lockup-img,body.entry[data-screen="driver_login"] .phone-top .lockup-img{height:36px}
  body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){body.entry:is([data-screen="login"],[data-screen="driver_login"],[data-screen="login_code"],[data-screen="login_password"]) .first-film-video{transition:none}}

/* ========================================================== the weekly inspection, 0.11.0
   inspection_photos.php, inspection_walk.php, inspection_mileage.php, inspection_checks.php, inspection_finish.php and inspection_show.php, with
   the van file's Inspection history card and the dashboard's Inspections this week. The five steps share the handover's column, step head, walk
   round and viewfinder by their names in those lists above; what is the inspection's own carries the insp- prefix, lifted from the drawing he
   chose on 25-09-2026 (B2 step 0). */

/* ---------------------------------------------------------- step 1, the photographs
   The count line and the one form's class. Since 0.12.4 (B11) the step is one angle a screen, its card and its list in a block of their
   own before reduced motion; the seven tiles of 0.11.0, two a row, and their Take it again left this block at B11 step 8. */
.insp-count{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--steel)}
.insp-count .mono{color:var(--instrument);font-weight:600}
/* A photograph's stamp makes it a little taller than the camera's 4:3, and by more when its words wrap, so every thumbnail of an angle is a 4:3
   frame with the whole photograph inside it, and a row of them, and their words, stay level. */
:is(.insp-strip,.insp-shots) a.photo-thumb{display:flex;aspect-ratio:4 / 3}
:is(.insp-strip,.insp-shots) a.photo-thumb img{width:100%;height:100%;object-fit:contain}
.insp-tile-form{display:grid;gap:8px;min-width:0}
.insp-tile-form .btn{justify-self:start}

/* ---------------------------------------------------------- steps 3 and 4, the AdBlue level and the checks
   The tread depths two a row in the figures' face, the reading of step 3 shown and never asked twice, then each check a row of three 44 pixel
   choices, OK, Caution or Fail, the one chosen outlined, with its note under it. In the form's column the gap between its parts is the
   column's own. */
[data-screen="inspection_mileage"] #adblue{max-width:8rem;font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.02em}
.insp-tyre-set{min-width:0;margin:0;padding:0;border:0}
.insp-tyre-set>legend{float:left;width:100%;margin:0 0 12px}
.insp-tyre-set>legend+*{clear:both}
.insp-tyres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.insp-tyres .fld{margin:0}
.insp-tyres input{font-family:var(--mono);font-size:18px;font-weight:500;letter-spacing:.02em}
.insp-hint{margin:8px 0 0}
.insp-checks .card-b>.insp-lead{margin:0}
.insp-from{margin:0}
.insp-state{margin:0;padding:0;border:0;min-width:0}
.insp-state legend{padding:0;margin-bottom:6px;font-size:15px;font-weight:600;line-height:1.3}
.insp-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.insp-states label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 10px;border:1px solid var(--bezel);border-radius:2px;
  background:var(--dial);font-size:15px;font-weight:500;cursor:pointer}
.insp-states input{width:20px;height:20px;margin:0;accent-color:var(--instrument);cursor:pointer}
.insp-states label:has(input:checked){border-color:var(--instrument);box-shadow:inset 0 0 0 1px var(--instrument)}
.insp-state.has-err .insp-states label{border-color:var(--red)}
.insp-state .fld{margin:0}

/* ---------------------------------------------------------- step 5 and the record, the photographs
   The eight as a strip of four a row before Complete the inspection, and on the record four a row with the angle's word and when each arrived,
   the earlier takes after them. An angle with no photograph is an empty frame of the same shape that says so. */
.insp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.insp-strip figure,.insp-shots figure{margin:0;min-width:0}
.insp-strip .photo-thumb{max-width:none;padding:3px}
.insp-strip figcaption{margin-top:4px;font-size:13px;line-height:1.3;color:var(--steel)}
.insp-facts{margin:0}
.insp-named{display:block}
.insp-shot-none{display:grid;place-items:center;aspect-ratio:4 / 3;padding:6px;border:1px dashed var(--bezel);border-radius:2px;font-family:var(--mono);font-size:13px;
  line-height:1.3;color:var(--steel);text-align:center}
.insp-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.insp-shots .photo-thumb{max-width:none}
.insp-shots figcaption{margin-top:6px;font-size:13px;line-height:1.4;color:var(--steel)}
.insp-shots figcaption .mono{color:var(--instrument)}

/* ---------------------------------------------------------- the record
   The van file's head, the large plate beside Inspection and its reference and the state's pin; the five steps under it; the words of a stop
   or of a day that ended; then the cards. The damage found reads as the handover record's does, its photographs two a row under its words,
   since the card is the narrower column. */
[data-screen="inspection_show"] .page-head.van-head{align-items:center;margin-bottom:24px}
[data-screen="inspection_show"] .van-head h1{font-size:36px;line-height:38px}
[data-screen="inspection_show"] .page-head.van-head h1 .plate{float:left;margin:0 22px 0 0;padding:10px 15px;font-size:32px;line-height:34px;border-width:1.5px;border-radius:2px}
[data-screen="inspection_show"] .van-head .sub{display:flow-root;margin-top:3px;line-height:20px}
[data-screen="inspection_show"] .van-head .pin-box{margin-left:8px;vertical-align:5px}
[data-screen="inspection_show"] .handover-steps{margin:-4px 0 20px}
[data-screen="inspection_show"] .insp-closed .card-b p{margin:0;font-size:15px;line-height:1.5}
[data-screen="inspection_show"] .insp-closed .mono{color:var(--instrument)}
[data-screen="inspection_show"] .damage-item{gap:10px;padding:16px 0;border-top:1px solid var(--bezel)}
[data-screen="inspection_show"] .damage-item:first-child{padding-top:0;border-top:0}
[data-screen="inspection_show"] .damage-item:last-child{padding-bottom:0}
[data-screen="inspection_show"] .damage-what{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
[data-screen="inspection_show"] .damage-n{line-height:18px}
[data-screen="inspection_show"] .damage-n .mono{color:var(--instrument)}
[data-screen="inspection_show"] .damage-place{font-size:16px;overflow-wrap:anywhere}
[data-screen="inspection_show"] .damage-type{font-size:15px;line-height:1.4}
[data-screen="inspection_show"] .damage-recorded{gap:4px 10px;font-size:14px;line-height:20px}
[data-screen="inspection_show"] .damage-what .hint{margin:2px 0 0;font-size:14px}
[data-screen="inspection_show"] .damage-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;min-width:0}
[data-screen="inspection_show"] .damage-photos .photo-thumb{max-width:none}
[data-screen="inspection_show"] .damage-photos>.muted{display:grid;place-items:center;min-height:96px;padding:8px;border:1px dashed var(--bezel);border-radius:2px;
  font-size:13px;line-height:1.35;text-align:center}

/* ---------------------------------------------------------- the van file's Inspection history card
   Start an inspection, or the one in progress with who started it and when and Carry on for them, level with the card's name. */
[data-screen="fleet_show"] .van-inspections .card-h{align-items:center;min-height:49px}
[data-screen="fleet_show"] .van-inspections .card-h .actions{margin-left:auto;gap:8px 14px}
[data-screen="fleet_show"] .van-insp-open{font-size:14px;line-height:20px;color:var(--steel)}
[data-screen="fleet_show"] .van-insp-open .mono{color:var(--instrument)}

@media (max-width:880px){
  [data-screen="inspection_show"] .van-head h1{font-size:32px;line-height:36px}
  /* The record's times, references and counts in JetBrains Mono inside its quieter lines keep the floor, as the handover's record does. */
  [data-screen="inspection_show"] :is(.hint .mono,.damage-n .mono,.damage-recorded .mono,.insp-shots figcaption .mono){font-size:13px}
  /* The links inside lines of words, lifted to 44px by the house's one rule, which gives the room back so no line moves. */
  [data-screen="fleet_show"] .van-insp-open a,[data-screen="dashboard"] .dash-inspections a.mono{display:inline-block;padding-block:12px;margin-block:-12px}
}
@media (max-width:640px){
  .insp-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .insp-states label{padding:0 6px;font-size:14px}
  /* The plate takes a line of its own, as on the van file. */
  [data-screen="inspection_show"] .page-head.van-head h1 .plate{float:none;display:flex;width:max-content;max-width:100%;margin:0 0 12px;padding:8px 12px;font-size:26px;line-height:28px}
  [data-screen="inspection_show"] .van-head .pin-box{margin-left:0}
  [data-screen="fleet_show"] .van-inspections .card-h .actions{width:100%;justify-content:space-between;padding-block:4px 2px}
}

/* ---------------------------------------------------------- estimates, invoices and payments, 0.12.0 (B5c)
   money_index.php, invoice_show.php, estimate_show.php, credit_note_show.php, settings_index.php, and the money pieces of the job's page, the
   sign off, the customer's page and the dashboard, as the preview of step 0 draws them, in the identity's vocabulary: the prefix money-. */
.money-lines tfoot td{padding:7px 12px;border-bottom:0;border-top:1px solid var(--bezel);font-size:14px}
.money-lines tfoot td:first-child{padding-left:20px}
.money-lines tfoot td:last-child{padding-right:20px}
.money-tot td{color:var(--steel)}
.money-tot td.num{color:var(--instrument);font-family:var(--mono);font-size:13px;font-weight:500}
.money-grand td{font-family:var(--display);font-style:italic;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.money-grand td.num{font-family:var(--mono);font-style:normal;font-size:15px;font-weight:600;letter-spacing:0}
.money-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;padding:10px 0;border-bottom:1px solid var(--bezel);font-size:14px;line-height:1.5}
.money-line:last-of-type{border-bottom:0}
.money-line-k{flex:none;min-width:70px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.money-line form{margin:0;margin-left:auto}
.money-line .pill{font-size:13px}
.money-line .job-sub{flex-basis:100%}
.money-forms{display:grid;gap:4px;margin-top:8px;padding-top:4px;border-top:1px solid var(--bezel)}
.money-forms .job-form+.job-form{border-top:1px solid var(--bezel)}
.money-actions{margin-top:12px}
.money-how{margin:0 0 4px;padding:0;border:0;min-width:0}
.money-how legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:600;line-height:1.3}
.money-how-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.money-how-list .job-kind{grid-template-columns:20px minmax(0,1fr)}
.money-fp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;font-size:14px}
.money-fp .fp-label{font-weight:600}
.money-fp .fp-sha{min-width:0;font-size:12px;color:var(--steel);white-space:normal;overflow-wrap:anywhere;word-break:break-all}
.money-gates{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.money-gates li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 10px;font-size:14px;line-height:1.5}
.money-gates .pill{flex:none;font-size:13px}
.money-keep{white-space:nowrap}
.money-issue{margin:12px 0 0}
.money-refund{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;font-size:14px;line-height:1.5}
.money-states a .n,.customer-filter a .n{font-family:var(--mono);font-size:12px;color:var(--steel)}
.money-list td:first-child{white-space:nowrap}
.money-monthly-figure{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-size:22px}
.money-monthly-words{font-size:15px;line-height:1.4}
.money-monthly-words b{font-weight:600}
.money-monthly-list{margin:0 0 16px;padding:0;list-style:none;font-size:14px;line-height:1.5}
.money-monthly-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 0;border-top:1px solid var(--bezel)}
.money-monthly-list li:last-child{border-bottom:1px solid var(--bezel)}
.money-monthly-list .pill{font-size:12px}
.money-monthly form.stack{max-width:none}
.money-inline>summary{min-height:32px;font-size:13px}
.money-inline form.stack{padding:6px 0 10px 22px}
.money-inline .row2{max-width:420px}
.money-rates td:last-child,.money-company td:last-child{min-width:12em}
.money-empty{border-bottom:1px solid var(--bezel)}
.money-empty .job-hint{margin:0;max-width:76ch}
.money-empty b{color:var(--instrument)}
.money-company td .job-form[open]{width:100%}
@media (max-width:880px){
  .money-line-k,.money-fp .fp-sha,.money-states a .n,.customer-filter a .n,.money-monthly-list .pill,.money-inline>summary,.money-lines tfoot td.num{font-size:13px}
  .money-line form{margin-left:0;width:100%}
  .money-line form .btn{width:100%}
  .money-inline>summary{min-height:44px}
  .money-prices .row2{grid-template-columns:minmax(0,1fr)}
  .money-line a,.money-monthly-list a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:640px){
  .money-how-list{grid-template-columns:minmax(0,1fr)}
  /* On a phone the priced lines keep their figures in view: the cost column goes (it is in the form), and the item's words wrap. */
  .money-lines .money-cost{display:none}
  .money-lines td:first-child,.money-lines .job-sub{white-space:normal}
  .money-lines tfoot td{padding-inline:8px}
  /* The cells come closer and a heading of two words takes two lines, so four or five columns fit a phone's width with their figures. */
  table.money-lines th,table.money-lines td{padding-inline:8px}
  table.money-lines th:first-child,table.money-lines td:first-child{padding-left:16px}
  table.money-lines th:last-child,table.money-lines td:last-child{padding-right:16px}
  table.money-lines th{white-space:normal}
  /* A line not priced says so once, in its pin under Net; its price each is left empty. */
  .money-lines .money-said{display:none}
}
@media (max-width:440px){
  /* On a phone held upright an invoice's lines leave out their rate of VAT, one rate for every line, which its VAT line under them states. */
  .money-lines .money-vat{display:none}
}

/* ---------------------------------------------------------- the home screen app, 0.12.3 (B10) */
[data-screen="driver_login"] .phone-alt.entry-install{font-size:14px;color:var(--steel)}
@media (display-mode:standalone){.entry-install{display:none}}

/* ---------------------------------------------------------- the photo walk, 0.12.4 (B11): one angle a screen, the ten listed under it */
.insp-one .card-b{display:grid;gap:12px}
.insp-one .fld{margin:0}
.insp-one input[type=file]{min-height:56px;font-size:13px}
.insp-one .photo-thumb{max-width:100%}
.insp-walk td:first-child b{font-weight:600}
.insp-walk .pill{font-size:13px}
@media (max-width:880px){
  /* The list's links and the way back from a retake are 44 pixel targets, the height given in padding and handed back in margin, so no row moves;
     the list's box keeps 4px under its last row, so the last link's target stays inside it and the box never scrolls up and down. */
  .insp-walk td:first-child a{display:block;padding-block:12px;margin-block:-12px}
  .insp-walk .tbl-scroll{padding-bottom:4px}
  [data-screen="inspection_photos"] .formfoot>a{display:inline-block;padding-block:11px;margin-block:-11px}
}

/* ---------------------------------------------------------- the quieter dashboard, 0.12.5 (B12): four figures, Today, the day's cards
   The strip's four figures at 32px, 28px on a phone, four a row down to 881px; between 881px and 1100px the house draws three a row, its
   borders written for three, so the strip is set to four there with no top border and a left border on each tile but the first; at 880px
   and below the house's two a row suit four tiles. Today's lamp column narrow and its links to the right; its table's box holds its own
   hidden headings, so on a phone they never widen the page. The day's cards two a row from 1101px, 32px between, one a row below, each
   card's own bottom margin given to the grid, the grid not drawn when it holds no card; on the dashboard each shows its essential columns,
   and the three with a list of their own show five rows, the rest kept in the page. At 880px and below the box of Damage reported during
   hires holds, 7px under its last row, the 44 pixel target its case link has had since 0.8.0, so it never scrolls up and down. */
[data-screen="dashboard"] .dash-tiles .v{font-size:32px}
@media (min-width:881px) and (max-width:1100px){
  [data-screen="dashboard"] .dash-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  [data-screen="dashboard"] .dash-tiles .tile{border-top:0;border-left:1px solid var(--bezel)}
  [data-screen="dashboard"] .dash-tiles .tile:first-child{border-left:0}
}
@media (max-width:880px){
  [data-screen="dashboard"] .dash-tiles .v{font-size:28px}
  [data-screen="dashboard"] .dash-reports .tbl-scroll{padding-bottom:7px}
}
[data-screen="dashboard"] .dash-today .card-h{align-items:center}
[data-screen="dashboard"] .dash-today .tbl-scroll{position:relative}
[data-screen="dashboard"] .dash-today td:first-child{width:1%;white-space:nowrap}
[data-screen="dashboard"] .dash-today td:nth-child(2){min-width:24ch;white-space:normal}
[data-screen="dashboard"] .dash-today td:last-child{text-align:right;white-space:nowrap}
[data-screen="dashboard"] .dash-see-all{font-size:14px;line-height:1.5;color:var(--steel)}
[data-screen="dashboard"] .dash-day{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 32px;align-items:start;margin-bottom:20px}
[data-screen="dashboard"] .dash-day>.card{margin-bottom:0}
[data-screen="dashboard"] .dash-day:not(:has(> .card)){display:none}
@media (min-width:1101px){
  [data-screen="dashboard"] .dash-day{grid-template-columns:repeat(2,minmax(0,1fr))}
}
[data-screen="dashboard"] .dash-handovers :is(th,td):is(:nth-child(4),:nth-child(5),:nth-child(6)){display:none}
[data-screen="dashboard"] .dash-inspections :is(th,td):is(:nth-child(3),:nth-child(4)){display:none}
[data-screen="dashboard"] .dash-workshop :is(th,td):is(:nth-child(3),:nth-child(4),:nth-child(6)){display:none}
[data-screen="dashboard"] .dash-hires :is(th,td):is(:nth-child(3),:nth-child(4)){display:none}
[data-screen="dashboard"] .dash-reports :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(6)){display:none}
[data-screen="dashboard"] :is(.dash-inspections,.dash-workshop,.dash-reports) tbody tr:nth-child(n+6){display:none}
[data-screen="dashboard"] .dash-depots :is(th,td):last-child{text-align:right}

/* ---------------------------------------------------------- the damage case, 0.12.6 (B14): the Damages tab's stages and cards, the case page, Today's new damage
   The stage pins are the list's filter pins, as the money screen's states are. To deal with and In the workshop are cards, three a row from
   1100px, two from 641px and one below: the close up photograph's small copy in a 4:3 box on the lightbox, the New pin over it, then the
   plate, the case and its stage, what and where with how it was found, its type and keeper, and the card's actions in a row at its foot.
   Settled is the list's own table. The case page sets its photographs on the left and What to do and the case on the right from 881px,
   one column below; the story's rows give their time in a column of their own. Printed from the browser, the case page drops the top bar,
   What to do and its foot, and sets the photographs side by side, so it fits one page. In Today a new damage row shows the small copy.
   What to do's forms run the card's width (the review of step 9, F2). At 880px and below Open the case, the card's plate and references
   and the links of the case's facts are 44 pixel targets, their height given in padding and handed back in margin, so nothing moves (F4). */
[data-screen="damages_index"] .damage-stages{margin-bottom:12px}
[data-screen="damages_index"] .dmg-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:20px}
@media (min-width:641px){
  [data-screen="damages_index"] .dmg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  [data-screen="damages_index"] .dmg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
[data-screen="damages_index"] .dmg-card{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--dial);border:1px solid var(--bezel);border-radius:2px;
  box-shadow:inset 0 1px 0 var(--bezel-hi),0 1px 0 rgba(18,18,20,.08)}
[data-screen="damages_index"] .dmg-shot{position:relative;display:block;flex:none;aspect-ratio:4/3;margin-bottom:6px;background:var(--lightbox);border-radius:2px 2px 0 0;line-height:0}
[data-screen="damages_index"] .dmg-shot img{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;border-radius:2px}
[data-screen="damages_index"] .dmg-shot .pill{position:absolute;top:12px;left:12px;padding:2px 8px 2px 6px;background:var(--dial);border-radius:2px}
[data-screen="damages_index"] .dmg-noshot{position:absolute;inset:4px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;line-height:18px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cabin-on-instrument)}
[data-screen="damages_index"] .dmg-card>p{margin:0;padding-inline:16px;line-height:1.4}
[data-screen="damages_index"] .dmg-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
[data-screen="damages_index"] .dmg-top .dmg-open{margin-left:auto;color:var(--instrument)}
[data-screen="damages_index"] .dmg-top .dmg-open:hover{color:var(--brake)}
[data-screen="damages_index"] .dmg-what{font-weight:600}
[data-screen="damages_index"] .dmg-what .damages-report{font-weight:400}
[data-screen="damages_index"] :is(.dmg-type,.dmg-meta,.dmg-job){font-size:14px;color:var(--steel)}
[data-screen="damages_index"] .dmg-meta .mono{color:var(--instrument)}
[data-screen="damages_index"] .dmg-job{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--instrument)}
[data-screen="damages_index"] .dmg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding:14px 16px 16px;border-top:1px solid var(--bezel)}
[data-screen="damages_index"] .dmg-acts .muted{font-size:14px;line-height:1.4}
[data-screen="damage_show"] .dmg-case{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:20px}
@media (min-width:881px){
  [data-screen="damage_show"] .dmg-case{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
}
[data-screen="damage_show"] .dmg-case>.card,[data-screen="damage_show"] .dmg-side>.card{margin-bottom:0}
[data-screen="damage_show"] .dmg-side{display:grid;gap:20px;min-width:0}
[data-screen="damage_show"] .dmg-shots{display:grid;gap:12px}
[data-screen="damage_show"] .dmg-shots .photo-thumb{max-width:none;text-decoration:none}
[data-screen="damage_show"] .dmg-shots .photo-thumb[data-what]::after{content:attr(data-what);display:block;padding:6px 2px 2px;font-family:var(--mono);font-size:13px;
  font-weight:500;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--cabin)}
/* The van on the case page, 0.12.7 (B15): the read only photo van under the photographs (partials/van3d.php), the case's part on its best view
   with its pin. On a wide screen the side column stands beside both, so nothing under the photographs waits for the side column to end. */
@media (min-width:881px){
  [data-screen="damage_show"] .dmg-case{grid-template-rows:auto 1fr}
  [data-screen="damage_show"] .dmg-case>.dmg-side{grid-column:2;grid-row:1 / span 2}
}
[data-screen="damage_show"] .dmg-todo .card-b{display:grid;gap:10px}
[data-screen="damage_show"] .dmg-todo .card-b>.btn,[data-screen="damage_show"] .dmg-approve .btn{width:100%}
[data-screen="damage_show"] .dmg-todo .job-form form.stack{padding:6px 0 4px}
[data-screen="damage_show"] .dmg-todo form.stack{max-width:none}
[data-screen="damage_show"] .dmg-approve form.stack{display:grid;gap:8px}
[data-screen="damage_show"] .dmg-approve .van-form-note{margin:0;font-size:14px;line-height:1.45;color:var(--steel)}
[data-screen="damage_show"] .dmg-story{margin:0;padding:0;list-style:none}
[data-screen="damage_show"] .dmg-story li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--bezel);
  font-size:14px;line-height:1.45}
[data-screen="damage_show"] .dmg-story li:first-child{padding-top:0}
[data-screen="damage_show"] .dmg-story li:last-child{padding-bottom:0;border-bottom:0}
[data-screen="damage_show"] .dmg-when{color:var(--steel)}
[data-screen="damage_show"] .dmg-now .dmg-words{font-weight:600}
[data-screen="damage_show"] .dmg-foot{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
[data-screen="dashboard"] .dash-today .dmg-mini{float:left;width:56px;height:42px;margin:0 12px 0 0;object-fit:cover;border:2px solid var(--lightbox);
  border-radius:2px;background:var(--lightbox)}
[data-screen="dashboard"] .dash-today .dmg-how{display:block;font-size:14px;color:var(--steel)}
@media (max-width:880px){
  [data-screen="damages_index"] .damage-stages a .n{font-size:13px}
  [data-screen="damages_index"] .dmg-top .dmg-open{display:inline-block;padding-block:12px;margin-block:-12px}
  [data-screen="damages_index"] .dmg-top>a:not(.dmg-open),[data-screen="damages_index"] .dmg-job>a{display:inline-block;padding-block:13px;margin-block:-13px}
  [data-screen="damage_show"] .dmg-facts dd a{display:inline-block;padding-block:14px;margin-block:-14px}
  [data-screen="damage_show"] .dmg-story li{grid-template-columns:minmax(0,1fr)}
}
@media print{
  [data-screen="damage_show"] :is(header.topbar,.dmg-todo,.dmg-foot,footer.appfoot){display:none}
  [data-screen="damage_show"] .dmg-case{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  [data-screen="damage_show"] .dmg-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  [data-screen="damage_show"] .dmg-story-card,[data-screen="damage_show"] .dmg-case{break-inside:avoid}
  [data-screen="damage_show"] .dmg-van{display:none}
  [data-screen="damage_show"] main{padding-bottom:0}
  [data-screen="damage_show"] .dmg-story-card{margin-bottom:0}
  [data-screen="damage_show"] main{padding-top:0}
  [data-screen="damage_show"] .page-head{margin-bottom:14px;padding-bottom:10px}
  [data-screen="damage_show"] .page-head h1{font-size:26px}
  [data-screen="damage_show"] .page-head h1 .plate{font-size:18px;line-height:18px;padding:5px 9px}
  [data-screen="damage_show"] .page-head .sub{font-size:13px}
  [data-screen="damage_show"] .dmg-case{margin-bottom:12px}
  [data-screen="damage_show"] :is(.dmg-case,.dmg-story-card) .card-h{padding:10px 16px 8px}
  [data-screen="damage_show"] :is(.dmg-case,.dmg-story-card) .card-h h2{font-size:16px;line-height:20px}
  [data-screen="damage_show"] :is(.dmg-case,.dmg-story-card) .card-b{padding:12px 16px}
  [data-screen="damage_show"] .dmg-facts dl.kv{font-size:13px;line-height:18px}
  [data-screen="damage_show"] .dmg-facts dl.kv :is(dt,dd){padding-top:6px;padding-bottom:6px}
  [data-screen="damage_show"] .dmg-facts dl.kv :is(dt,dd):first-of-type{padding-top:0}
  [data-screen="damage_show"] .dmg-story li{padding:7px 0;font-size:13px;line-height:18px;grid-template-columns:130px minmax(0,1fr)}
}

/* ---------------------------------------------------------- Finance and the invoice written by the office, 0.12.8 (B13): Finance's four
   figures at the tiles' size, two to a row from 1100 pixels and one from 640, so a figure in pounds keeps to its tile */
@media (max-width:1100px){
  [data-screen="finance_index"] .finance-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-screen="finance_index"] .finance-tiles .tile{border-left:0;border-top:1px solid var(--bezel)}
  [data-screen="finance_index"] .finance-tiles .tile:nth-child(even){border-left:1px solid var(--bezel)}
  [data-screen="finance_index"] .finance-tiles .tile:nth-child(-n+2){border-top:0}
}
@media (max-width:640px){
  [data-screen="finance_index"] .finance-tiles{grid-template-columns:minmax(0,1fr)}
  [data-screen="finance_index"] .finance-tiles .tile:nth-child(even){border-left:0}
  [data-screen="finance_index"] .finance-tiles .tile:nth-child(n+2){border-top:1px solid var(--bezel)}
}
/* New invoice and the editor of an invoice written by the office in the forms' 760px column; a new private customer's fields spaced as the
   form's own; the editor's line form in a row at desktop widths and stacked at 640 pixels, the net of the line being typed beside its button;
   each line's Remove beside its net, the words read aloud with it held by the scroll box, so on a phone they cannot widen the page; the note
   under the lines */
:is([data-screen="invoice_new"],[data-screen="invoice_edit"]) main{max-width:calc(760px + 2 * var(--gutter))}
:is([data-screen="invoice_new"],[data-screen="invoice_edit"]) form.stack{max-width:none}
[data-screen="invoice_new"] .money-settles{margin:4px 0 0;font-size:15px;line-height:1.5}
[data-screen="invoice_new"] [data-new-customer]{display:flex;flex-direction:column;gap:16px}
[data-screen="invoice_new"] [data-new-customer][hidden]{display:none}
[data-screen="invoice_edit"] .page-head .money-issue{display:inline-flex}
[data-screen="invoice_edit"] .money-line-fields{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem 9rem;gap:0 12px;align-items:start}
[data-screen="invoice_edit"] .money-line-net{margin-left:12px;font-family:var(--mono);font-size:14px;color:var(--instrument)}
[data-screen="invoice_edit"] .tbl-scroll{position:relative}
[data-screen="invoice_edit"] .money-remove{width:1%;white-space:nowrap;text-align:right}
[data-screen="invoice_edit"] .money-remove form{display:inline}
[data-screen="invoice_edit"] .money-withdraw{margin:0 0 24px}
[data-screen="invoice_show"] .money-note{margin:0 0 12px;font-size:15px;line-height:1.5}
[data-screen="invoice_show"] .money-edit{margin:0 0 12px}
@media (max-width:640px){
  [data-screen="invoice_edit"] .money-line-fields{grid-template-columns:minmax(0,1fr);row-gap:16px}
}

/* ---------------------------------------------------------- the customer's vehicle, 0.12.9 (B16)
   The vehicle form's new private customer, a panel of its own in the cabin's grey, its heading flush with its top; its On the fleet part has no
   box of its own, so its heading and fields keep the form's spacing as the other groups do; a part the form's script hides is gone. The
   list's Show bar is a depot bar as the others are, and a customer's vehicle held by a job names the job under its pin. A customer's
   vehicle's page holds its invoices as a card, and its rows from its time on the fleet in one closed details at its foot, its summary a line
   with a chevron as the page's other details, 44 pixels tall on a phone. The customer's page offers Add a vehicle for NAME under its vehicles.
   Text never below 13px. */
.newcust{display:grid;gap:14px;padding:16px;border:1px solid var(--bezel);border-radius:2px;background:var(--cabin)}
.newcust .grp-h{margin-top:0}
.vehicle-fleet{display:contents}
.vehicle-fleet>.grp-h:first-of-type{margin-top:8px}
:is(.newcust,.vehicle-fleet)[hidden]{display:none}
[data-screen="fleet_index"] .tbl-sub{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--steel)}
[data-screen="fleet_show"] .van-history{margin:4px 0 20px;padding-top:8px;border-top:1px solid var(--bezel)}
[data-screen="fleet_show"] .van-history>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;font-size:14px;font-weight:600;
  color:var(--instrument);list-style:none}
[data-screen="fleet_show"] .van-history>summary::-webkit-details-marker{display:none}
[data-screen="fleet_show"] .van-history>summary::before{content:"";width:8px;height:8px;margin:0 4px 0 2px;border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;transform:rotate(-45deg)}
[data-screen="fleet_show"] .van-history[open]>summary{margin-bottom:12px}
[data-screen="fleet_show"] .van-history[open]>summary::before{transform:rotate(45deg);margin-top:-4px}
[data-screen="fleet_show"] .van-history>summary:hover{color:var(--brake)}
[data-screen="fleet_show"] .van-history .card-b>.hint{margin:10px 0 0}
[data-screen="customer_show"] .cust-add-vehicle{margin:14px 0 0}
@media (max-width:880px){
  [data-screen="fleet_show"] .van-history>summary{min-height:44px}
}

/* ---------------------------------------------------------- the plate lookup, 0.13.1 (B9)
   Look up under the registration on a phone and beside it from 881px; the Save kept off screen, first in the form, so Enter saves; a field
   the answer filled wears a Bezel tint until it is typed in; the answer's words in Steel under the field. */
[data-screen="vehicle_form"] .default-submit{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[data-screen="vehicle_form"] .btn.lookup{margin-top:10px}
[data-screen="vehicle_form"] .lookup-filled{background:var(--bezel-hi);box-shadow:inset 0 0 0 2px var(--bezel)}
[data-screen="vehicle_form"] .lookup-note{margin-top:8px;font-size:13px;line-height:1.45;color:var(--steel)}
[data-screen="vehicle_form"] .lookup-note:empty{display:none}
[data-screen="vehicle_form"] .lookup-note .nowrap{white-space:nowrap}
[data-screen="fleet_show"] .van-lookup .lookup-licence{display:block;margin-top:4px}
@media (min-width:881px){
  [data-screen="vehicle_form"] .fld:has(>.btn.lookup){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
  [data-screen="vehicle_form"] .fld:has(>.btn.lookup)>*{grid-column:1}
  [data-screen="vehicle_form"] .fld:has(>.btn.lookup)>.btn.lookup{grid-column:2;grid-row:2;margin-top:0}
}

/* ---------------------------------------------------------- sending the invoice, 0.13.2 (B19)
   Send the invoice, choice A of his previews of 08-10-2026: one row a channel, its words and its button side by side from 761px and one above
   the other on a phone, the button the full width; the words word for word on Cabin in a Bezel rule; the record's reasons in Steel under the
   pill; the customer's record and the settings screen carry a line in Steel under a value. The portal's tokens alone, no colour of its own. */
.send-ch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 18px;padding:14px 0;border-bottom:1px solid var(--bezel)}
.send-ch:first-child{padding-top:0}
.send-ch:last-of-type{border-bottom:0;padding-bottom:0}
.send-k{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.send-to{display:block;margin-top:3px;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.send-to.mono{font-family:var(--mono);font-size:15px;font-weight:500}
.send-ch .hint{display:block;margin-top:3px}
.send-ch form{margin:0}
.send-words{grid-column:1 / -1;margin:0}
.send-words pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0;padding:12px 14px;border:1px solid var(--bezel);border-radius:2px;background:var(--cabin);font:400 14px/1.5 var(--body)}
.send-words pre b{font-weight:600}
.sent-why{display:block;margin-top:3px;font-size:13px;color:var(--steel)}
.set-sub{display:block;font-size:13px;color:var(--steel)}
@media (max-width:760px){
  .send-ch{grid-template-columns:minmax(0,1fr)}
  .send-ch .btn{width:100%}
}

/* ---------------------------------------------------------- reduced motion, on every screen */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}