/* Bravo Motors, house stylesheet: Casa de Marimbondo, the identity he chose on 13-09-2026. 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:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-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:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-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:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-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:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-semi-condensed-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:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-semi-condensed-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:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-semi-condensed-latin-700-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:"Red Hat Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/red-hat-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:"Red Hat Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/red-hat-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 Red Hat Mono, so a mileage reads as
   data in a line whose other letters stay in Barlow 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/red-hat-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0030-0039,U+002C}

/* ---------------------------------------------------------- tokens
   The nine colours of the palette. Sting Red marks open liability and nothing else. There is no green. */
:root{
  --orange:#FF671F; --ink:#15120F; --sting:#C8102E; --kiln:#B8400B; --paper:#F4F2EE; --card:#FFFFFF;
  --comb:#E2DCD1; --smoke:#5E5A54; --lightbox:#1E1E1E;
  /* Steps between them, for field keylines, row hover and text on Nest Black. */
  --keyline:#CFC7BA; --paper-hover:#FBFAF7; --paper-on-ink:rgba(244,242,238,.64); --rule-on-ink:rgba(244,242,238,.24);
  --display:"Barlow Semi Condensed","Avenir Next Condensed","Helvetica Neue","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue","Segoe UI",sans-serif;
  --mono:"Red Hat Mono","SF Mono",Menlo,Consolas,monospace;
  --gutter:32px;
  /* The pins as images, for places with no markup of their own: flashes, field errors, legends. */
  --pin-bad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2 L17 6 L17 14 L10 18 L3 14 L3 6 Z' fill='%23FFFFFF' stroke='%2315120F' stroke-width='2'/%3E%3Cpath d='M5 10.6 L15 10.6 L10 20.2 Z' fill='%23C8102E'/%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%3Cpath d='M10 2.4 L16.6 6.2 L16.6 13.8 L10 17.6 L3.4 13.8 L3.4 6.2 Z' fill='%23FFFFFF' stroke='%23FF671F' stroke-width='2.8'/%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%3Cpath d='M10 1 L17.8 5.5 L17.8 14.5 L10 19 L2.2 14.5 L2.2 5.5 Z' fill='%2315120F'/%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%3Cpath d='M10 1.8 L17.1 5.9 L17.1 14.1 L10 18.2 L2.9 14.1 L2.9 5.9 Z' fill='%23FFFFFF' stroke='%2315120F' stroke-width='1.6'/%3E%3C/svg%3E");
  /* The empty Comb 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%3Cpath d='M20 2 L38 12.5 L38 33.5 L20 44 L2 33.5 L2 12.5 Z' fill='%23F4F2EE' stroke='%23E2DCD1' stroke-width='2'/%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(--paper);color:var(--ink);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;line-height:1.1;letter-spacing:0}
b,strong{font-weight:600}
th{font-weight:500}
img{max-width:100%}
a{color:var(--kiln);font-weight:600;text-decoration:none}
a:hover{color:var(--ink)}
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(--kiln);outline-offset:2px}
::selection{background:rgba(255,103,31,.28)}
.mono{font-family:var(--mono);font-size:.93em;font-weight:500;white-space:nowrap}
.muted{color:var(--smoke)}
.right{text-align:right}
.label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.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:3px;background:var(--orange);color:var(--ink)}
.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(--comb);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--smoke)}

/* ---------------------------------------------------------- top bar
   Nest Black, 64px, the cell at 34px with the lockup, then the links for the role, then the person. */
.topbar{background:var(--ink);color:var(--paper)}
.topbar :focus-visible{outline-color:var(--orange)}
.topbar-in{display:flex;align-items:center;gap:44px;height:64px;padding-inline:var(--gutter)}
/* The lockup as the identity board draws it, every size a share of the cell's height --lh: the cell's own edge on the
   margin, then the type block spanning the cell's vertical walls, from .2453 to .6981 of its height, so the block rises
   by its bottom margin from the centre. Stacked, BRAVO over MOTORS letter spaced to the same width, as on the sign in
   pages; under 64px, in the top bar, one line with the capitals on the walls. */
.lockup{--lh:34px;display:inline-flex;align-items:center;gap:calc(var(--lh) * .1158);flex:none;color:var(--paper);text-decoration:none}
.lockup:hover{color:var(--paper)}
.lockup.ink,.lockup.ink:hover{color:var(--ink)}
.lockup .mark{display:block;flex:none;width:calc(var(--lh) * .9434);height:var(--lh);margin-left:calc(var(--lh) * -.0755)}
.lockup-name{display:flex;flex-direction:column;row-gap:calc(var(--lh) * .0327);margin-bottom:calc(var(--lh) * .0566);font-family:var(--display);
  text-transform:uppercase;white-space:nowrap}
.lockup-name :is(b,i){transform:translateY(-.05em)}
.lockup-name b{font-size:calc(var(--lh) * .3896);line-height:calc(var(--lh) * .2727);font-weight:700}
.lockup-name i{display:flex;justify-content:space-between;margin-inline:calc(var(--lh) * .0057) calc(var(--lh) * .0071);font-style:normal;font-size:calc(var(--lh) * .2105);
  line-height:calc(var(--lh) * .1474);font-weight:500}
.topbar .lockup{gap:calc(var(--lh) * .243)}
.topbar .lockup-name{flex-direction:row;column-gap:calc(var(--lh) * .147);height:calc(var(--lh) * .4528);font-size:calc(var(--lh) * .647);line-height:calc(var(--lh) * .4528)}
.topbar .lockup-name :is(b,i){font-size:inherit;line-height:inherit}
.topbar .lockup-name i{display:block;margin-inline:0}
.topbar .lockup-name i>span{display:inline}
.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(--paper);font-size:15px;font-weight:500;white-space:nowrap}
.topnav a:hover{color:var(--paper);border-bottom-color:var(--rule-on-ink)}
.topnav a.on{border-bottom-color:var(--orange)}
/* 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:3px;background:var(--sting);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,242,238,.5);border-radius:3px;
  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(--paper-on-ink)}
.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-ink);border-radius:3px;
  background:transparent;color:var(--paper);font:500 14px/1 var(--body);white-space:nowrap;cursor:pointer}
.signout button:hover{border-color:var(--paper)}
/* 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(--paper);font:500 15px/1 var(--body);white-space:nowrap;cursor:pointer}
.tabbar a:hover,.tabbar .signout button:hover{color:var(--paper);border-bottom-color:var(--rule-on-ink)}
.tabbar a.on{border-bottom-color:var(--orange)}
.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(--comb)}
.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(--comb);border-radius:3px;
  background:var(--card);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap}
.filters a:hover{border-color:var(--ink);color:var(--ink)}
.filters a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters a .n{font-family:var(--mono);font-size:12px;color:var(--smoke)}
.filters a.on .n{color:var(--paper-on-ink)}
.filters .sep{flex:none;width:1px;margin:4px 6px;background:var(--comb)}

/* ---------------------------------------------------------- page head */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-bottom:20px}
.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;color:var(--smoke)}
.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:4px}
.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(--smoke)}
.page-head .sub .mono{color:var(--ink)}
.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 orange with black text. Danger is Nest Black: nothing here is deleted. Liability is the
   only red button, 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(--ink);
  border-radius:3px;background:var(--card);color:var(--ink);font:600 14px/1.2 var(--body);text-align:center;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn .icon{width:18px;height:18px}
.btn.primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn.primary:hover{background:#FF7A3A;border-color:#FF7A3A}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink)}
.btn.quiet:hover{background:rgba(21,18,15,.06)}
.btn.danger{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.danger:hover{background:#2E2924;border-color:#2E2924}
.btn.liability{background:var(--sting);border-color:var(--sting);color:#FFFFFF}
.btn.block{display:flex;width:100%}
.btn.big{min-height:56px;font: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}

/* ---------------------------------------------------------- cards, used sparingly */
.card{background:var(--card);border:1px solid var(--comb);border-radius:4px;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(--comb)}
.card-h h2{font-size:18px;line-height:22px}
.card-h .hint{margin:0;font-size:13px;color:var(--smoke)}
.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(--paper);border-radius:3px}

/* ---------------------------------------------------------- tables
   36px rows on Comb rules, figures right aligned in Red Hat 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(--card) 30%,rgba(255,255,255,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--card) 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(21,18,15,.16),rgba(21,18,15,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(21,18,15,.16),rgba(21,18,15,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(--comb);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(--smoke)}
table.t td{height:36px;padding:7px 12px;border-bottom:1px solid var(--comb);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(--paper-hover)}
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(--ink);font-weight:600}
table.t a:hover{color:var(--kiln)}
/* 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{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border:1px solid var(--ink);border-radius:3px;background:#FFFFFF;
  color:var(--ink);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(--paper)}
/* 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:4px}
.plate.xl{font-size:40px;line-height:40px;padding:12px 18px;border-width:1.5px;border-radius:4px}

/* ---------------------------------------------------------- status pins, from pill()
   A hexagon and a word, never colour alone. 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-weight:700;line-height:18px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink);vertical-align:middle}
.pill .pin{display:block;flex:none;width:16px;height:16px}
.pill.grey{color:var(--smoke)}
.pin-box{display:inline-flex;align-items:center;min-height:28px;padding:0 10px 0 8px;border:1px solid var(--comb);border-radius:3px;background:var(--card);vertical-align:middle}
.on-ink .pill{color:var(--paper)}
.on-ink .pill.ok .hex{fill:var(--paper)}
.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(--card);border:1px solid var(--comb);border-radius:4px;overflow:hidden}
.tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 20px 16px;border-left:1px solid var(--comb);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(--ink)}
.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(--smoke)}
a.tile:hover{background:var(--paper-hover);color:inherit}
a.tile:hover .k{color:var(--kiln)}
a.tile:focus-visible{outline-offset:-3px}

/* ---------------------------------------------------------- flash messages
   A pin and a sentence. A refusal gets a heavier keyline, not red: red is for liability only. */
.flash{position:relative;margin-bottom:16px;padding:11px 14px 11px 42px;border:1px solid var(--comb);border-radius:3px;background:var(--card);
  color:var(--ink);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(--ink);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(--ink)}
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(--keyline);border-radius:3px;background:var(--card);color:var(--ink);
  font:400 16px/1.3 var(--body)}
select{appearance:none;padding-right:38px;cursor:pointer;
  background:var(--card) 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='%2315120F' 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(--smoke)}
input:focus,select:focus,textarea:focus{outline:2px solid transparent;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 5px rgba(255,103,31,.32)}
input[readonly]{background:var(--paper);color:var(--smoke)}
input[type=file]{display:block;width:100%;font:400 15px/1.3 var(--body);color:var(--ink)}
input[type=file]::file-selector-button{margin-right:12px;min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:3px;background:var(--card);
  color:var(--ink);font:600 14px/1 var(--body);cursor:pointer}
.hint{margin-top:6px;font-size:13px;line-height:1.45;color:var(--smoke)}
.field-err{margin-top:6px;font-size:14px;font-weight:600;line-height:1.4;color:var(--kiln)}
.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(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.has-err input:focus,.has-err select:focus,.has-err textarea:focus,[aria-invalid="true"]:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 5px rgba(255,103,31,.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(--comb);font-family:var(--display);font-size:15px;font-weight:700;line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.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"]) 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"]) 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(--comb)}
dl.kv dt{padding-right:16px;color:var(--smoke)}
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
   Hexagon markers on a Comb line. Orange is the period open now; the red notch is liability only. */
.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(--comb)}
.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%3Cpath d='M7 1.6 L12.5 4.8 L12.5 11.2 L7 14.4 L1.5 11.2 L1.5 4.8 Z' fill='%235E5A54' 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%3Cpath d='M7 1.6 L12.5 4.8 L12.5 11.2 L7 14.4 L1.5 11.2 L1.5 4.8 Z' fill='%23FF671F' 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%3Cpath d='M7 1.8 L12.3 4.9 L12.3 11.1 L7 14.2 L1.7 11.1 L1.7 4.9 Z' fill='%23FFFFFF' stroke='%2315120F' stroke-width='1.6'/%3E%3Cpath d='M3.6 8.6 L10.4 8.6 L7 15.6 Z' fill='%23C8102E'/%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(--smoke)}

/* ---------------------------------------------------------- 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(--smoke)}

/* ---------------------------------------------------------- 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(--smoke);border-radius:4px;background:var(--paper);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(--smoke)}
.code-out form{margin:0}

/* ---------------------------------------------------------- the nest
   One hexagon cell per van, grouped by depot, in a zig-zag strip. The state class is the pin's kind. */
.nest{display:flex;flex-wrap:wrap;gap:20px 40px}
.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(--smoke)}
.nest-cells{--w:140px;--g:8px;display:flex;align-items:flex-start;margin:0;padding:0;list-style:none;overflow-x:auto}
.nest-cells>li{flex:none;width:var(--w);height:calc(var(--w) * 1.1547)}
.nest-cells>li+li{margin-left:calc((var(--g) - var(--w)) / 2)}
.nest-cells>li:nth-child(even){margin-top:calc((var(--w) + var(--g)) * .866)}
/* Cells overlap in the zig-zag, so each is clipped to its hexagon, 1px outside the drawn edge: a tap inside one cell
   can never open its neighbour. The clip would cut an outline, so focus is a Kiln hexagon ring drawn over the cell. */
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;padding:0 14px;
  clip-path:polygon(50% -1px,calc(100% + 1px) calc(25% - .6px),calc(100% + 1px) calc(75% + .6px),50% calc(100% + 1px),-1px calc(75% + .6px),-1px calc(25% - .6px));
  color:var(--ink);text-align:center;text-decoration:none;background:center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 161.66'%3E%3Cpath d='M70 0.87 L139.25 40.84 L139.25 120.81 L70 160.79 L0.75 120.81 L0.75 40.84 Z' fill='%23F4F2EE' stroke='%23E2DCD1' stroke-width='1.5'/%3E%3C/svg%3E")}
.cell:hover{color:var(--ink)}
.cell b{font-family:var(--display);font-size:24px;font-weight:700;line-height:1}
.cell .plate{font-size:13px}
.cell-word{max-width:100%;font-family:var(--display);font-size:13px;font-weight:700;line-height:15px;letter-spacing:.04em;text-transform:uppercase}
.cell.bad{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 161.66'%3E%3Cpath d='M70 1.15 L139 40.99 L139 120.66 L70 160.5 L1 120.66 L1 40.99 Z' fill='%23FFFFFF' stroke='%2315120F' stroke-width='2'/%3E%3Cpath d='M56 134.75 L84 134.75 L70 161.66 Z' fill='%23C8102E'/%3E%3C/svg%3E")}
.cell.warn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 161.66'%3E%3Cpath d='M70 3.46 L137 42.14 L137 119.52 L70 158.2 L3 119.52 L3 42.14 Z' fill='%23FFFFFF' stroke='%23FF671F' stroke-width='6'/%3E%3C/svg%3E")}
.cell.ok{color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 161.66'%3E%3Cpath d='M70 0 L140 40.41 L140 121.24 L70 161.66 L0 121.24 L0 40.41 Z' fill='%2315120F'/%3E%3C/svg%3E")}
.cell.ok:hover{color:var(--paper)}
.cell.info,.cell.grey{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 161.66'%3E%3Cpath d='M70 1.15 L139 40.99 L139 120.66 L70 160.5 L1 120.66 L1 40.99 Z' fill='%23FFFFFF' stroke='%235E5A54' stroke-width='1.5'/%3E%3C/svg%3E")}
a.cell:focus-visible{outline:0}
a.cell:focus-visible::after{content:"";position:absolute;inset:0;pointer-events:none;background:center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 161.66'%3E%3Cpath d='M70 12 L129 46.1 L129 115.6 L70 149.7 L11 115.6 L11 46.1 Z' fill='none' stroke='%23FFFFFF' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath d='M70 12 L129 46.1 L129 115.6 L70 149.7 L11 115.6 L11 46.1 Z' fill='none' stroke='%23B8400B' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------- custody bands
   A van's recorded history as bands in proportion to time: drivers alternate Nest Black and orange, the
   workshop is hatched, a period with no keeper is a Comb 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}
.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:3px;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(--ink);color:var(--paper);container-type:inline-size}
.band.alt{background:var(--orange);color:var(--ink)}
.band.workshop{background:repeating-linear-gradient(135deg,rgba(94,90,84,.55) 0 1.5px,var(--comb) 1.5px 5px);color:var(--ink)}
.band.none{background:var(--comb);color:var(--smoke)}
.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 Nest Black as on the van file artboard, so it is clear on every band. */
.band .mono{flex:none;font-size:13px}
.band:not(.alt,.workshop,.none) .mono{color:var(--paper-on-ink)}
@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 Nest 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(--smoke)}
.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(--ink);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(--sting)}
.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:3px;background:var(--lightbox);line-height:0}
.photo-thumb img{display:block;width:100%;height:auto;border-radius:2px}
.photo-thumb:hover{background:var(--ink)}
.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(--keyline);border-radius:3px;background:var(--paper)}
.photo-field input[type=file]:hover{border-color:var(--smoke)}
/* 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(--ink)}

/* ---------------------------------------------------------- sign in pages
   Every page before sign in is a column: the layout prints any message first, and each page moves its own
   header above the message with order. */
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}
.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(--comb)}
  .tile:nth-child(3n+2),.tile:nth-child(3n+3){border-left:1px solid var(--comb)}
  .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,242,238,.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(--ink)}
  .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(--orange);color:var(--orange);font-weight:600}
  .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(--comb)}
  .tile:nth-child(even){border-left:1px solid var(--comb)}
  .tile:nth-child(-n+3){border-top:1px solid var(--comb)}
  .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 takes the phone header's 28px cell. */
  .topnav{flex-wrap:wrap;height:auto;row-gap:0;column-gap:20px;overflow:visible}
  .topbar .lockup{--lh: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}
}

/* ==========================================================================================================
   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}
[data-screen="dashboard"] .dash-nest .card-h{justify-content:flex-start}
[data-screen="dashboard"] .dash-nest .card-b{padding-top:18px}
[data-screen="dashboard"] .nest-label{flex-wrap:wrap;row-gap:2px}
/* A keeper that is not a driver is named in words where the initials would be. */
[data-screen="dashboard"] .cell b{line-height:24px}
[data-screen="dashboard"] .cell b.dash-keeper{font-size:16px;letter-spacing:.04em;text-transform:uppercase}
[data-screen="dashboard"] .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(--comb)}
[data-screen="dashboard"] .dash-legend p{margin:0;max-width:64ch;font-size:13px;line-height:1.45;color:var(--smoke)}
/* A checker's readings waiting, and the readings returned to the person who took them, each a card of its own under the figures. */
[data-screen="dashboard"] .dash-readings .card-h{align-items:center}
[data-screen="dashboard"] .dash-readings .card-b{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
[data-screen="dashboard"] .dash-readings-note{flex:1 1 280px;margin:0;font-size:14px;line-height:1.45;color:var(--smoke)}
[data-screen="dashboard"] .dash-returned td:nth-child(4){min-width:16em;white-space:normal}
/* Above phone widths a depot with more vans than one line holds wraps into a honeycomb instead of scrolling
   sideways, so no van is out of sight. Each van takes a half step, alternately up and down; a line holds whole
   pairs so the next line interlocks with it, and a lone last van keeps its line. Phones keep the sideways strip. */
@supports (width:round(down,100%,1px)){
  @media (min-width:641px){
    [data-screen="dashboard"] .nest-cells{--step:calc((var(--w) + var(--g)) / 2);--rise:calc((var(--w) + var(--g)) * .866);flex-wrap:wrap;overflow:visible;
      width:calc(round(down, 100% - var(--w) + var(--step), var(--step) * 2) + var(--w) - var(--step));
      padding:0 calc(var(--w) - var(--step)) calc(var(--w) * 1.1547 - var(--rise)) 0}
    [data-screen="dashboard"] .nest-cells>li{position:relative;width:var(--step);height:calc(var(--rise) * 2);pointer-events:none}
    [data-screen="dashboard"] .nest-cells>li+li,[data-screen="dashboard"] .nest-cells>li:nth-child(even){margin:0}
    [data-screen="dashboard"] .nest-cells>li>.cell{position:absolute;left:0;top:0;height:calc(var(--w) * 1.1547);width:var(--w);pointer-events:auto}
    [data-screen="dashboard"] .nest-cells>li:nth-child(even)>.cell{top:var(--rise)}
    [data-screen="dashboard"] .nest-cells:has(>li:last-child:nth-child(odd):not(:only-child))::after{content:"";flex:none;width:var(--step)}
    [data-screen="dashboard"] .nest-cells:has(>li:only-child){width:auto;padding:0}
    [data-screen="dashboard"] .nest-cells>li:last-child:nth-child(odd){height:calc(var(--w) * 1.1547)}
    [data-screen="dashboard"] .nest-cells>li:only-child{width:var(--w)}
  }
}
@media (max-width:880px){
  [data-screen="dashboard"] .dash-lead .v{font-size:40px}
}
@media (max-width:640px){
  [data-screen="dashboard"] .card-h h2{font-size:22px;line-height:26px}
  [data-screen="dashboard"] .nest-label small{font-size:13px}
  [data-screen="dashboard"] .dash-readings .btn{flex:1 1 auto}
}

/* ---------------------------------------------------------- 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 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"]) .page-head.van-head{align-items:center;margin-bottom:24px}
:is([data-screen="fleet_show"],[data-screen="vehicle_form"]) .van-head h1{font-size:36px;line-height:38px}
:is([data-screen="fleet_show"],[data-screen="vehicle_form"]) .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:4px}
:is([data-screen="fleet_show"],[data-screen="vehicle_form"]) .van-head .sub{display:flow-root;margin-top:3px;line-height:20px}
[data-screen="fleet_show"] .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(--ink)}
[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(94,90,84,.55) 0 1.5px,var(--comb) 1.5px 4.5px)}
[data-screen="fleet_show"] .van-legend .van-none::before{background:var(--comb)}
[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(--ink);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(--comb);border-radius:3px;background:var(--card)}
[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(--smoke)}

/* ---------------------------------------------------------- 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(--comb)}
[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(--smoke)}
[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(--comb);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(--comb)}
[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(--keyline);border-radius:3px;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 .mono{font-size:22px;font-weight:600;line-height:28px}
[data-screen="fleet_show"] .van-reading-latest .van-reading-figure .mono{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(--smoke)}
[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 Red Hat 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(--smoke)}
[data-screen="vehicle_form"] .van-fleet-block{margin-top:10px;padding-left:22px;color:var(--ink);background:var(--pin-warn) left 1px/15px 15px no-repeat}
[data-screen="vehicle_form"] .van-fleet-stays{font-size:13px;color:var(--smoke)}
/* 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(--ink)}
[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(--comb)}
[data-screen="fleet_import"] .import-report>.tiles:last-child{border-radius:0 0 3px 3px}
[data-screen="fleet_import"] .import-report .tile{border-top:0;border-left:1px solid var(--comb)}
[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(--smoke)}
[data-screen="fleet_import"] .import-list{margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--comb)}
[data-screen="fleet_import"] .import-list li{padding:8px 0;border-bottom:1px solid var(--comb);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(--keyline);border-radius:3px;background:var(--paper)}
[data-screen="fleet_import"] .import-file input[type=file]:hover{border-color:var(--smoke)}
[data-screen="fleet_import"] .import-note{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--comb)}

/* ---------------------------------------------------------- narrower screens */
@media (max-width:880px){
  :is([data-screen="fleet_show"],[data-screen="vehicle_form"]) .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"]) .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="fleet_show"] .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(--comb)}
  [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(--comb)}
  [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}
}

/* ========================================================== 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 Red Hat 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(--smoke)}
: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(--smoke)}

/* ---------------------------------------------------------- readings to check
   One reading to a card, oldest first: the photo whole on Lightbox, beside the van, the figure in Red Hat 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(--smoke)}
[data-screen="readings_index"] .read-who .mono{color:var(--ink)}
[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(--comb)}
[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(--smoke)}

/* ---------------------------------------------------------- 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 Barlow 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 Red Hat 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 Red Hat 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(--comb)}
[data-screen="depot_form"] .depot-who dt{padding-right:24px;color:var(--smoke)}
[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(--smoke)}
[data-screen="depot_form"] .depot-none{margin:0;font-size:14px;line-height:1.5;color:var(--smoke)}
/* 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(--smoke)}
[data-screen="depot_form"] .depot-close form{margin:0}
[data-screen="depot_form"] .depot-block{margin-top:10px;padding-left:22px;color:var(--ink);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}
}

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

/* ---------------------------------------------------------- entry pages on Paper: sign in, install, errors before sign in
   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="login"],[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(--ink)}
:is([data-screen="login"],[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}
:is([data-screen="login"],[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(--comb);font-size:14px;line-height:1.45;color:var(--smoke)}

/* ---------------------------------------------------------- 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 is the driver's own top bar without its links, so nothing moves once the driver is signed in. */
[data-screen="driver_login"] .phone-top{order:-1;margin:0 -16px 7vh}
[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(--paper-on-ink);white-space:nowrap}
body.entry[data-screen="driver_login"] main>.centre>.flash{margin-bottom:20px}
[data-screen="driver_login"] .centre>h1{font-size:32px;line-height:1.05}
[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(--smoke)}
[data-screen="my"] .phone-head .mono{font-size:13px;line-height:18px;color:var(--smoke)}
[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(--smoke)}
[data-screen="my"] .phone-since .mono{color:var(--ink)}
[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(--comb)}

@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="login"],[data-screen="install"],[data-screen="error"]) .entry-brand{margin-top:5vh}
  :is([data-screen="login"],[data-screen="install"],[data-screen="error"]) .entry-brand .label{font-size:13px}
  [data-screen="driver_login"] .phone-top{margin-bottom:28px}
}

/* ---------------------------------------------------------- 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}
}