/* =========================================================================
BC Automotive — booking platform prototype
Structure & app-shell patterns mirror the FCC LeadCourt prototype.
Palette recoloured to the BC Automotive brand: charcoal + yellow + white.
========================================================================= */
:root{
/* brand — sampled directly from the BC Automotive logo */
--char:#353535; --char2:#454545; /* charcoal chrome (matches logo bg) */
--brand:#fcd007; --brand-d:#d9b000; --brand-soft:#fef6d2; /* signature yellow */
--ink-on-brand:#2a2300; /* dark text used on yellow */
--green:#2f9e5b; --red:#d2443c; --amber:#e8a13c; --blue:#2f6bd8; --violet:#7048c9;
--bg:#f4f5f7; --card:#ffffff; --line:#e3e6ea; --txt:#1c2733; --mut:#677181;
/* Craig Creative's logomark, at the foot of every page. Not BC's palette and
deliberately not derived from it — it is somebody else's mark, and these
are that mark's own two colours, the light-ground pair its site uses. On
this page: slate 9.19:1, sage 3.04:1. The sage is the tightest of the
three grounds the mark stands on across the three apps that draw it, so it
is the value to check first if any of them moves.
THE SLATE MOVED ON 11 SEP 2026, from #2f4257 to #204755 — same mark, new
paint. Craig Creative took its outer C off the pure-blue axis (OKLCH hue
252) and a third of the way toward the inner C's green (to 224), because
at 252 the two Cs read as two unrelated marks bolted together rather than
one drawn object. Its own note for this: the pair must stay at least 3:1
apart in LUMINANCE or the rings merge at favicon size, so the colour could
be re-hued but not lightened. Nothing here needs to change but the value —
9.19:1 is still far clear of the 3:1 this fill needs. */
--cc-slate:#204755; --cc-sage:#7a9478;
/* …and the outer C's light-ground twin, for the one surface in this app that
is charcoal: the staff rail, where the credit now lives. The sage is
unchanged — it is the colour that stands on both, and at 3.70:1 on --char
it is comfortably clear of the 3:1 a graphical object needs, where on the
light page it is 3.04:1 and is the value to check first if either ground
moves. Both pairings are in tests/ui-contrast.test.js. */
--cc-cream:#fdfcf8;
/* The staff rail's two widths, and the difference between them is a column of
the diary on a 13" laptop.
72px, WHERE THE FCC TWIN COLLAPSES TO 64, and the logo is the whole reason.
LeadCourt's mark is a compact badge that centres happily in 40px of content;
`icons/bc-logo.png` is a wide lockup at 2.1:1 — "BC", the car, and
"automotive" under them — and at 40px across the second line is a smear.
72px leaves 56px of content once the collapsed padding is off, which is
where that lockup still reads as itself. Copying the twin's 64 exactly
would have been consistency with the wrong thing: the number is a
consequence of the artwork, and the artwork is not the same.
See the `.sidenav` block for why the collapse is a width on the rail and an
overlay on what is drawn inside it. */
--rail-w:216px; --rail-c:72px;
/* WCAG 1.4.3 — the brand fills above are correct as BACKGROUNDS but fail 4.5:1
as text. These -ink tokens are the text-safe equivalents; the fill colours are
deliberately left untouched so buttons, dots and accents look exactly the same.
EVERY RATIO IN THIS COMMENT USED TO BE AGAINST WHITE, AND THAT WAS NOT SAID.
One colour, checked against one surface, painted on five: --red is 4.53 on
--card and fails on all four of the others it is used on — worst of all
3.93 on the pink #fcebea, which is where it renders "MOT expired" on the
customer's free health check, the headline result of that screen. Likewise
--green-ink (4.18) and --amber-ink (4.21) were below 4.5 on --bg, having
been chosen against white.
The ratios are no longer written down here at all, because a number in a
comment goes stale silently. tests/ui-contrast.test.js reads these tokens
out of this file and asserts each one against every surface it is actually
painted on; change a token or paint it somewhere new and that test is the
thing that answers. */
--brand-ink:#876d00; --amber-ink:#8f6224; --green-ink:#237a45; --red-ink:#b3352e;
--r:14px; --shadow:0 1px 3px rgba(16,24,40,.08),0 4px 14px rgba(16,24,40,.06);
--safe-b:env(safe-area-inset-bottom,0px);
/* ===== TYPE, WEIGHT AND RADIUS SCALES (bc-design-system) =====
THE COLOUR HALF OF THIS WAS DONE ON 2026-09-02 and the rest was owed for
six weeks. `.review/scan.sh` counted what the rest looked like: 28 distinct
font sizes, NINE OF THEM FRACTIONAL (8.5, 9.5, 10.5, 11.5, 12.5, 13.5,
14.5, 15.5, 16.5), six weights and fifteen radii.
A fractional size is the signature: nobody designs a 12.5px step, they
nudge one component until it looks right and leave the nudge behind. Half a
pixel does not survive the browser's own rounding at most zoom levels
anyway, so most of the nudges were decoration on the stylesheet rather than
on the page — which is why snapping them moved so little.
WHAT THE SCALE IS. Twelve steps, each a size already in use, with every
value within ~2px of what it replaced:
10 <- 8.5 9 9.5 10 13 <- 12.5 13 22 <- 20 21 22 23
11 <- 10.5 11 14 <- 13.5 14 26 <- 24 25 26
12 <- 11.5 12 15 <- 14.5 15 15.5 30 <- 30
16 <- 16 16.5 38 <- 38
18 <- 17 18
The two display sizes keep their own steps because they are used once each
and a headline is where a 25% jump is visible.
VERIFIED BY SCREENSHOT, NOT BY REASONING — this repo's own rule, from the
`.editchev` note below. All eleven routes at 375px and 1280px, before and
after: no horizontal overflow anywhere, every page within 2.7% of its old
height, and 470 text elements checked for wrapping with none wrapping that
did not wrap before. */
--fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px;
--fs-lg:14px; --fs-xl:15px; --fs-2xl:16px; --fs-3xl:18px;
--fs-4xl:22px; --fs-5xl:26px; --fs-6xl:30px; --fs-7xl:38px;
/* Six weights for a four-weight vocabulary. 650 and 750 are the same nudge
habit as the half-pixels, and 850 is 800 with the system font's own
rounding on top — most stacks have no 850 face and synthesise it from 800. */
--fw-med:600; --fw-semi:700; --fw-bold:800;
/* Fifteen radii for five. 3/4/5 are one corner, 9/10/11/12/13 are another
seen at different sizes, and 99/999 are both "a pill" — the second is the
idiom for "however tall this gets", so it is the one that survives. */
--r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
/* ===== icons =====
One stroke set replacing ~37 emoji (see ICON_PATHS in app.js). Sized in em so
an icon always matches the text it sits beside, and drawn in currentColor so
it inherits state — something colour emoji could never do. */
.ic-svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.19em;flex:none;
fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:1.7em;height:1.7em;vertical-align:-.35em}
.ic-xl{width:34px;height:34px;stroke-width:1.5}
.ic-ok{color:var(--green)}
/* an icon key the owner typed by hand still renders as whatever they typed */
.ic-raw{display:inline-block;font-style:normal}
html,body{height:100%}
/* never allow sideways panning — on iOS a single overflowing element otherwise
lets the page scroll past the header's right edge */
html,body{overflow-x:hidden;overflow-x:clip}
body{background:var(--bg);color:var(--txt)}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit}
/* ===== app shell ===== */
#app{min-height:100%;display:flex;flex-direction:column}
.shell{display:flex;min-height:100vh}
.sidenav{display:none}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
/* min-width:0 — as flex items these must never be widened by a child's
intrinsic width (e.g. the reg-plate input), which broke iOS layouts */
.main{flex:1;min-width:0;padding:16px 16px calc(86px + var(--safe-b));max-width:1100px;width:100%;margin:0 auto}
.appbar{position:relative;z-index:30;background:var(--char);color:#fff;padding:11px 16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-bold);font-size:var(--fs-xl);color:#fff}
.blogo{height:30px;width:auto;display:block;flex-shrink:0}
.brand .lc{color:#fff;font-weight:var(--fw-bold);line-height:1.05}
.brand .lc small{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-semi);letter-spacing:.8px;color:var(--brand);opacity:.95;margin-top:2px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-on-brand);border:none}
/* Five destinations, each a 44px-tall target — the bar carried seven at 39px,
below the minimum, for hands straight off a car. */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:#fff;border-top:1px solid var(--line);padding:4px 0 calc(6px + var(--safe-b))}
.tab{position:relative;flex:1;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
text-align:center;font-size:var(--fs-xs);color:var(--mut);font-weight:var(--fw-med);border-radius:var(--r-md)}
.tab .ic{display:flex;line-height:0}
.tab .ic .ic-svg{width:21px;height:21px;vertical-align:0}
.tab.on{color:var(--char);font-weight:var(--fw-bold)}
.tab.on .ic{color:var(--brand-ink)}
.tabdot{position:absolute;top:2px;right:calc(50% - 22px);min-width:16px;height:16px;border-radius:var(--r-sm);background:var(--brand);
color:var(--ink-on-brand);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:16px;padding:0 4px}
/* the overflow tabs are listed in the account menu, but only on a phone */
.menu-phone{display:block}
.menu-sep{height:1px;background:var(--line);margin:6px 4px}
@media(min-width:900px){.menu-phone{display:none}}
@media(min-width:900px){
.appbar,.tabbar{display:none}
/* THE RAIL IS THE LAYOUT; `.railinner` IS THE PAINT.
`.sidenav` holds only the width the row gives up — 216px open, 72px
collapsed — and nothing is drawn in it. Everything visible lives in
`.railinner`, which is absolutely positioned against it and is therefore
free to be wider than the space the rail occupies.
That is the whole trick behind the hover peek: a collapsed rail opens back
OVER the page instead of shoving the diary, the catalogue table and the
reports grid 144px sideways every time the pointer crosses it. A width
change on `.sidenav` itself would reflow the page, which is exactly the
cost this feature exists to remove. Copied, deliberately, from the FCC
LeadCourt twin's rail — the two consoles are the same shell and a staff
member who learns one should not have to learn the other. */
.sidenav{display:block;width:var(--rail-w);background:var(--char);flex-shrink:0;
position:sticky;top:0;height:100vh;z-index:31;transition:width .16s ease}
.railinner{position:absolute;top:0;bottom:0;left:0;width:var(--rail-w);
display:flex;flex-direction:column;background:var(--char);color:#9fb0c5;
padding:18px 12px;overflow:hidden;transition:width .16s ease}
.sidenav .brand{margin-bottom:24px;padding:2px 6px}
/* The lockup and the toggle share a row so the toggle has somewhere to be
that is not over a nav item. `position:relative` is for the collapsed
state, where the toggle is taken out of the flow against this box. */
.railtop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}
.railtoggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:var(--r-sm);color:#9fb0c5;transition:background .12s,color .12s}
.railtoggle:hover{background:rgba(255,255,255,.10);color:#fff}
.railtoggle .ic{display:flex;line-height:0}
.railtoggle .ic .ic-svg{width:16px;height:16px;vertical-align:0}
/* ---- collapsed, and the hover peek ----
The rail gives back 144px; `.railinner` keeps the open width the moment a
pointer is over it or anything inside it has focus. `:focus-within` is not
a nicety — the toggle is the first thing Tab reaches inside the rail, so
without it a keyboard user would be operating a control they cannot see. */
.sidenav.collapsed{width:var(--rail-c)}
.sidenav.collapsed .railinner{width:var(--rail-c)}
.sidenav.collapsed:hover .railinner,
.sidenav.collapsed:focus-within .railinner{width:var(--rail-w);
box-shadow:10px 0 30px rgba(16,24,40,.28)}
/* WHAT THE COLLAPSED RAIL DROPS. Opacity, not `display:none`: every one of
these is still in the DOM and still read, so a collapsed rail's Bookings
button is still announced as "Bookings" rather than as an unnamed button.
The toggle goes with them — at 72px it would otherwise show as a sliver of
a chevron — and takes `pointer-events` with it so the sliver is not
clickable either. Hovering the rail is what brings it back. */
.sidenav.collapsed:not(:hover):not(:focus-within) :is(.nvl,.ftxt,.who,.cctxt,.railtoggle){
opacity:0;pointer-events:none;transition:opacity .1s ease}
/* …and the toggle leaves the ROW as well as the paint, so the logo can centre
itself in 72px. Out of flow rather than `display:none`, because a display
of none is not focusable — and the toggle is the one thing Tab has to be
able to reach to open a rail without a mouse. */
.sidenav.collapsed:not(:hover):not(:focus-within) .railtoggle{position:absolute;right:0;top:0}
.sidenav.collapsed:not(:hover):not(:focus-within) .railtop{justify-content:center}
.sidenav.collapsed:not(:hover):not(:focus-within) .brand{padding:0}
/* The padding comes off so the lockup gets the rail's full 72px less 16, and
the lockup is sized by WIDTH rather than height here — the open rail sets
`height:40px` inline, which at 2.1:1 is 84px across and half of it would be
outside the rail. `!important` because that height is an inline style and
nothing else can reach it; the alternative is a second copy of the
for a state that differs only in its size. */
.sidenav.collapsed:not(:hover):not(:focus-within) .railinner{padding:18px 8px}
.sidenav.collapsed:not(:hover):not(:focus-within) .blogo{width:100%;height:auto!important}
/* Centred, and the padding goes with it: an 18px icon left-aligned in 56px of
column sits visibly off to one side of a rail whose only remaining content
is icons.
THE LABEL HAS TO LEAVE THE FLOW FOR THAT TO MEAN ANYTHING — fifth time, and
the same bargain as `.who`, `.ftxt` and `.cctxt`. A label at `opacity:0` is
still a flex item claiming ~90px, so `justify-content:center` centres the
icon against the icon PLUS the invisible word and puts it hard against the
left edge. Measured, not guessed: that is exactly what the first cut of
this rule did. */
.sidenav.collapsed:not(:hover):not(:focus-within) .nav-it{justify-content:center;padding:10px 0}
.sidenav.collapsed:not(:hover):not(:focus-within) .nvl{position:absolute;left:45px;top:10px}
/* The name and email go out of flow for the same reason, and it is the same
bargain: `display:none` would leave the account button with no accessible
name at all, and leaving them in flow squeezes the avatar into an ellipse
— 24px of circle against 56px of column, with the words still claiming
their width behind an opacity of nought. */
.sidenav.collapsed:not(:hover):not(:focus-within) .who{position:absolute;left:45px;top:10px}
.sidenav.collapsed:not(:hover):not(:focus-within) .sideuser{justify-content:center;padding:10px 0}
/* Out of flow, third time, same bargain: "Prototype · sample data / Staff
console" is wider than 56px, and a row centred on words nobody can see
leaves nothing on screen but its own empty height. */
.sidenav.collapsed:not(:hover):not(:focus-within) .ftxt{position:absolute;left:0;top:10px}
.sidenav.collapsed:not(:hover):not(:focus-within) .sidefoot{padding:10px 0}
/* Out of flow, FOURTH time, and the same bargain again: "Built & maintained
by craig-creative.ai" is wider than 56px, and a row centred on words nobody
can see puts the one thing left on screen — the mark — off centre. (This
quoted the pre-9-Sep copy, "Tailor Made by Craig Creative…", until a grep
for the replaced string found it; the rule holds either way.) The link is
named by its own `aria-label`, so a collapsed rail still announces where it
goes rather than reading out an href. `.ccredit` is `position:relative`
(below) so this lands inside it: absolute against `.railinner` would park
the words behind the lockup at the top of the rail. */
.sidenav.collapsed:not(:hover):not(:focus-within) .cctxt{position:absolute;left:0;top:0}
.sidenav.collapsed:not(:hover):not(:focus-within) .ccdark{justify-content:center;padding:12px 0}
/* The count of new jobs, as a dot on the corner of the Today icon. The number
cannot fit at 72px and is still in the DOM for a screen reader. */
.sidenav.collapsed:not(:hover):not(:focus-within) .newdot{
position:absolute;top:5px;left:calc(50% + 6px);min-width:9px;width:9px;height:9px;
padding:0;margin:0;border-radius:50%;font-size:0;line-height:0;overflow:hidden}
.main{padding:24px 28px 40px}
}
/* AN IPAD IS NOT A DESKTOP WITH A MOUSE, and 900px does not tell them apart.
Above the breakpoint is an iPad in landscape too, and there the hover peek
never fires: `:hover` does not exist on the device, and the toggle the
collapsed rail hides is `pointer-events:none`, so a tap where it sits lands
on the logo behind it — leaving the rail collapsed with no way back. That is
the tablet propped by the ramp, which is the device the 144px matters most
on.
So where there is no hover, the collapsed rail does not rely on one. The
toggle comes back into the flow under the logo: visible, 36px, and the only
thing in the header that is not the lockup.
AND THE SELECTOR DROPS `:not(:hover)`, WHICH IS THE WHOLE FIX rather than a
tidy-up — the first cut of this block repeated the one above verbatim and did
not work, on the device it was written for. Chromium applies `:hover` to what
a finger is touching, and it applies `:focus-within` on the press rather than
the release. So a tap on the toggle turns BOTH of those on before the click
is dispatched, the rules above stop matching mid-tap, the toggle returns to
`position:absolute` at the top-right of a rail that has just widened to
216px, and the click lands on the logo it left behind. Measured with touch
emulation at 1180px: the tap produced no click on the button at all, and the
rail could not be re-opened.
A control has to be in the same place at press and at release, so on a device
with no hover the toggle's box may not depend on a hover or focus state at
all. `!important` is how that is said against selectors upstream that carry
two `:not()`s of specificity each; the alternative is duplicating the whole
collapse list twice under `@media (hover:hover)`, which is more surface for
the next person to get half-right. */
@media(min-width:900px) and (hover:none){
/* NO PEEK EITHER, and that is the second half of the same fix. Leaving it in
was not enough on its own: with the toggle pinned but the rail still
widening to 216px under the press, a centred toggle slides 24px right
between press and release and the tap misses by six pixels. Measured, both
times. A `:hover` a finger left behind is not an intention anyway — the
rail's width is the toggle's business alone on a device with no pointer.
Same specificity as the peek above, later in source, so it wins. */
.sidenav.collapsed:hover .railinner,
.sidenav.collapsed:focus-within .railinner{width:var(--rail-c);box-shadow:none}
/* …and the two rules that would otherwise flicker back mid-tap, restated
without the `:not()`s so the rail's geometry is the same at press and at
release. Same values as above; only their condition changes. */
.sidenav.collapsed .railinner{padding:18px 8px}
.sidenav.collapsed .blogo{width:100%;height:auto!important}
.sidenav.collapsed .railtop{flex-direction:column;justify-content:center;gap:8px}
.sidenav.collapsed .railtoggle{
position:static!important;opacity:1!important;pointer-events:auto!important;
background:rgba(255,255,255,.08)}
/* 44px, WHICH IS THE POINT OF THE WHOLE BLOCK AND WAS 36 UNTIL 9 Sep 2026.
`.qa/checklists/07-ui-quality.md` puts the floor at 44 — "a garage counter
is not a precise environment" — and this is the one control in the sheet
that exists purely because a finger is going to press it. A fallback that
makes a control reachable and leaves it under the floor has done half its
job, which is the second time that sentence applies to this block: the
first was a tap that missed by six pixels because the toggle moved, and
this is six more pixels of margin for a finger that lands slightly off
centre rather than off control. Raised by the QA review of this branch.
BOTH RAIL STATES, not just the collapsed one: on a tablet the expanded
rail's toggle is the same finger and the same 28px. `min-*` rather than
`width`, so it raises the base rule without having to out-specify it.
The 72px rail leaves 56px of content, so 44 fits with room either side.
The FCC twin carries the identical rule for the identical reason. */
.railtoggle{min-width:44px;min-height:44px}
}
.nav-it{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:var(--fs-lg);font-weight:var(--fw-med);margin-bottom:3px;color:#aab6c4;width:100%;text-align:left}
.nav-it.on{background:rgba(245,197,24,.16);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
.nav-it .ic{width:18px;display:flex;justify-content:center;line-height:0}
.nav-it .ic .ic-svg{width:18px;height:18px;vertical-align:0}
.sidefoot{margin-top:auto;padding:10px 6px;font-size:var(--fs-xs);color:#8f9fb2;line-height:1.5}
.sideuser{display:flex;align-items:center;gap:9px;padding:10px 6px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px;width:100%;text-align:left}
.sideuser .nm{font-size:var(--fs-md);font-weight:var(--fw-semi);color:#dfe6ee}
.sideuser .em{font-size:var(--fs-xs);color:#6b7785}
/* ===== shared bits ===== */
.h2{font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--char)}
.sub{font-size:var(--fs-md);color:var(--mut);margin-top:3px;line-height:1.5}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.tgl{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:7px 16px;font-size:var(--fs-md);font-weight:var(--fw-semi);color:var(--char)}
.tgl.on{background:var(--brand);color:var(--ink-on-brand);border-color:var(--brand)}
.chiprow{display:flex;gap:7px;overflow-x:auto;padding:12px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chiprow::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-md);font-weight:var(--fw-med);color:var(--mut)}
.chip.on{background:var(--char);border-color:var(--char);color:#fff}
.datechip{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mut);margin:16px 2px 8px;text-transform:uppercase;letter-spacing:.6px}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--mut);font-size:var(--fs-md);margin-top:10px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);padding:12px 18px;font-size:var(--fs-xl);font-weight:var(--fw-bold);transition:.14s}
.btn-pri{background:var(--brand);color:var(--ink-on-brand)}
.btn-pri:hover{background:var(--brand-d)}
.btn-dark{background:var(--char);color:#fff}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--char)}
.btn-ghost:hover{border-color:var(--char)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* ===== CUSTOMER booking flow ===== */
/* width:100% is load-bearing: with margin:0 auto inside a column flexbox the
auto margins disable stretch, so without it the page sizes to its content
and can grow wider than the phone's viewport */
.cwrap{max-width:560px;width:100%;min-width:0;margin:0 auto;padding:16px 16px calc(96px + var(--safe-b))}
.steps{display:flex;gap:6px;margin:4px 0 16px}
.steps .s{flex:1;height:5px;border-radius:var(--r-pill);background:var(--line)}
.steps .s.on{background:var(--brand)}
.ch{font-size:var(--fs-4xl);font-weight:var(--fw-bold);letter-spacing:-.4px;color:var(--char)}
.csub{color:var(--mut);font-size:var(--fs-lg);margin:5px 0 16px;line-height:1.5}
.svc{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
border-radius:var(--r);padding:14px;margin-bottom:11px;box-shadow:var(--shadow);width:100%;text-align:left;transition:.14s}
.svc:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(47,52,57,.10)}
.svc .ic{width:48px;height:48px;border-radius:var(--r-md);background:var(--brand-soft);display:grid;place-items:center;font-size:var(--fs-4xl);flex:none}
.svc .bd{flex:1;min-width:0}
.svc .bd b{font-size:var(--fs-xl);color:var(--char)}
.svc .bd p{margin:2px 0 0;font-size:var(--fs-md);color:var(--mut)}
.svc .pr{text-align:right;flex:none}
.svc .pr b{font-size:var(--fs-xl);color:var(--char)}
.svc .pr span{display:block;font-size:var(--fs-xs);color:var(--mut)}
/* customer service-menu tiles */
.svctiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
@media(max-width:560px){.svctiles{grid-template-columns:1fr}}
.svctile{position:relative;align-self:start;min-width:0;min-height:172px;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-lg);box-shadow:var(--shadow);
padding:15px;text-align:left;width:100%;cursor:pointer;transition:box-shadow .18s,transform .18s,border-color .18s}
.svctile:hover{box-shadow:0 8px 24px rgba(47,52,57,.12)}
.svctile.single:hover{transform:translateY(-2px)}
.svctile-top{display:flex;align-items:center;gap:11px}
.svctile-ic{width:44px;height:44px;flex:none;border-radius:var(--r-md);background:var(--brand-soft);display:grid;place-items:center;font-size:var(--fs-4xl)}
.svctile-body{margin-top:12px}
/* footer pinned to the bottom so the price + Book → line up across every tile */
.svctile-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.svctile-price{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--char)}
.svctile-go{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--brand-ink);white-space:nowrap}
/* single-service tile (direct book) */
.svctile-kick{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.5px;text-transform:uppercase;color:var(--mut)}
.svctile-name{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--char);margin:0 0 3px;line-height:1.25}
.svctile-desc{font-size:var(--fs-md);color:var(--mut);line-height:1.45;margin:0}
/* multi-service tile (summary → expands) */
.svctile-head{flex:1;min-width:0}
.svctile-cat{display:block;font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--char)}
.svctile-cat i{font-style:normal;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--mut);margin-left:7px;
background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 8px;vertical-align:middle}
.svctile-sum{font-size:var(--fs-md);color:var(--mut);margin:0;line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svctile-chev{flex:none;align-self:flex-start;font-size:var(--fs-3xl);line-height:1;color:var(--mut);transition:transform .25s ease}
/* smooth expand; once open the summary + parent footer give way to the child rows */
.svctile-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.svctile-sub-in{overflow:hidden;min-height:0}
.svctile.multi:hover .svctile-sub,.svctile.multi.open .svctile-sub{grid-template-rows:1fr}
.svctile.multi:hover .svctile-chev,.svctile.multi.open .svctile-chev{transform:rotate(180deg)}
.svctile.multi:hover .svctile-body,.svctile.multi.open .svctile-body,
.svctile.multi:hover .svctile-foot,.svctile.multi.open .svctile-foot{display:none}
/* child rows — mirror the tile: yellow margin, full details, price + Book → */
.subrow{display:flex;flex-direction:column;width:100%;text-align:left;cursor:pointer;
background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-md);
padding:11px 13px;margin-top:10px;transition:box-shadow .14s,background .14s}
.subrow:first-child{margin-top:14px}
.subrow:hover{background:#fffdf3;box-shadow:0 4px 14px rgba(47,52,57,.10)}
.subrow-top{display:flex;align-items:center;gap:10px}
.subrow-ic{width:32px;height:32px;flex:none;border-radius:var(--r-sm);background:var(--brand-soft);display:grid;place-items:center;font-size:var(--fs-2xl)}
.subrow-nm{flex:1;min-width:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--char);line-height:1.25}
.subrow-desc{font-size:var(--fs-sm);color:var(--mut);line-height:1.5;margin:8px 0 0}
.subrow-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:9px}
.subrow-pr{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--char)}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.fld{margin-bottom:13px}
.fld:last-child{margin-bottom:0}
.fld label{display:block;font-size:var(--fs-md);font-weight:var(--fw-semi);margin-bottom:6px;color:var(--char)}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.14s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(245,197,24,.22)}
.reg{display:flex;gap:10px}
.plate,.fld input.plate{font-weight:var(--fw-bold);background:#ffd400;border:2px solid #111;border-radius:var(--r-sm);padding:11px 14px;font-size:var(--fs-4xl);letter-spacing:1.5px;text-transform:uppercase;width:100%;min-width:0;text-align:center}
/* inputs in flex rows must be allowed to shrink below their intrinsic width */
.reg .plate,.checkhero-in .plate,.remind-in input,.keyrow input{min-width:0;flex:1}
.found{margin-top:11px;padding:13px;border:1.5px solid #bfe3cb;background:#f1faf3;border-radius:var(--r-md)}
.found .pill{background:var(--green-ink);color:#fff;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.daystrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.daystrip::-webkit-scrollbar{display:none}
.day{flex:none;width:60px;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;padding:10px 0;text-align:center;transition:.12s}
.day small{display:block;font-size:var(--fs-xs);color:var(--mut);text-transform:uppercase;font-weight:var(--fw-semi)}
.day b{display:block;font-size:var(--fs-3xl);margin-top:2px;color:var(--char)}
.day.sel{background:var(--char);border-color:var(--char)}
.day.sel small{color:var(--brand)}.day.sel b{color:#fff}
.day:disabled{opacity:.35}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:8px}
.slot{padding:12px 0;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;font-weight:var(--fw-semi);font-size:var(--fs-xl);color:var(--char);transition:.12s}
.slot:hover:not(:disabled){border-color:var(--brand)}
.slot.sel{background:var(--brand);border-color:var(--brand);color:var(--ink-on-brand)}
.slot:disabled{opacity:.3;text-decoration:line-through}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-lg)}
.row:last-child{border:none}
.row .k{color:var(--mut)}.row .v{font-weight:var(--fw-semi);text-align:right;color:var(--char);min-width:0;overflow-wrap:anywhere}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:12px;border-top:2px solid var(--char)}
.total b{font-size:var(--fs-4xl);color:var(--char)}
.cardbox{border:1.5px solid var(--line);border-radius:var(--r-md);padding:14px;background:#fbfbfc}
.incl{display:flex;gap:9px;padding:7px 0;font-size:var(--fs-lg);align-items:flex-start}
.incl span:last-child{min-width:0;overflow-wrap:anywhere}
/* list glyphs: plain icon, no background, fixed column so rows line up */
.incl .tk{color:var(--green-ink);font-weight:var(--fw-bold);flex:none;width:20px;text-align:center;line-height:1.4}
.incl .tk.warn{color:var(--amber-ink)}
.incl .tk.rep{color:var(--violet);font-size:var(--fs-2xl)}
.cta{position:fixed;bottom:0;left:0;right:0;z-index:40;background:linear-gradient(180deg,rgba(244,245,247,0),var(--bg) 30%);
padding:14px 16px calc(14px + var(--safe-b));display:flex;justify-content:center}
.cta .in{width:100%;max-width:528px}
.tick{width:74px;height:74px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:6px auto 12px;color:#fff;font-size:var(--fs-7xl);box-shadow:0 10px 30px rgba(47,158,91,.34);animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* ===== STAFF: KPIs, diary, cards ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 12px}
.kpi{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:15px;border-top:3px solid var(--brand)}
/* THE STEP BELOW, NOT THE NEAREST, and this is the one place the scale needed
an argument rather than arithmetic. This line was 11.5px — a half-pixel nudge,
and a load-bearing one: the lead tile's sub-line is "EK58 NXP · Full Service"
in a 136px column, and it fitted on one line at 11.5 and wrapped at 12.
Snapping up broke it, which the before/after screenshots showed and no amount
of reading the rule would have.
Restoring 11.5 would have been re-adding the nudge. It takes --fs-xs instead:
on the scale, closer to what it was, and it fits — and it was always tuned to
ONE sample string anyway, since a longer service name wrapped at 11.5 too. */
.kpi b{font-size:var(--fs-5xl);color:var(--char)}.kpi span{display:block;font-size:var(--fs-xs);color:var(--mut);font-weight:var(--fw-med);margin-top:3px}
.kpi .delta{font-size:var(--fs-xs);font-weight:var(--fw-bold);margin-top:6px;display:inline-block;border-radius:var(--r-sm);padding:2px 7px}
.up{background:#e7f5ec;color:var(--green-ink)}.dn{background:#fcebea;color:var(--red-ink)}
.section{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:14px 15px;margin:0 0 12px}
.sectitle{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mut);letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
/* unified job row (diary + bookings) */
.joblist{margin-top:2px}
.daygroup{display:flex;align-items:center;gap:10px;margin:14px 2px 6px}
.daygroup:first-child{margin-top:2px}
.daygroup b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--char);text-transform:uppercase;letter-spacing:.5px}
.daygroup span{flex:1;height:1px;background:var(--line)}
.daygroup em{font-style:normal;font-size:var(--fs-sm);color:var(--mut);font-weight:var(--fw-med)}
.job{display:flex;align-items:center;gap:13px;padding:12px 12px;border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;transition:.12s}
.job + .job{margin-top:2px}
.job:hover{background:#fafbfc;border-color:var(--line)}
.jaccent{width:4px;align-self:stretch;min-height:40px;border-radius:var(--r-xs);flex:none}
.jtime{width:52px;flex:none;text-align:center}
.jtime b{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--char);display:block;letter-spacing:-.3px}
.jtime small{color:var(--mut);font-size:var(--fs-xs);font-weight:var(--fw-semi)}
.jicon{width:40px;height:40px;border-radius:var(--r-md);background:var(--brand-soft);display:grid;place-items:center;font-size:var(--fs-4xl);flex:none}
.jinfo{flex:1;min-width:0}
.jinfo .jveh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jinfo b{font-size:var(--fs-xl);color:var(--char);font-weight:var(--fw-bold)}
.reg{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.5px;background:#ffd400;color:#111;border-radius:var(--r-xs);padding:2px 7px;border:1px solid #e6bf00}
.jinfo p{margin:3px 0 0;font-size:var(--fs-md);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jright{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.due{font-size:var(--fs-sm);color:var(--amber-ink);font-weight:var(--fw-bold)}
.paidtag{font-size:var(--fs-sm);color:var(--green-ink);font-weight:var(--fw-bold)}
@media(max-width:560px){
.jicon{display:none}
.jinfo p{white-space:normal}
}
.st{padding:4px 11px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap;display:inline-block}
.st-booked{background:#eef3fd;color:var(--blue)}
.st-checked_in{background:#fdf3e0;color:#b97f1e}
.st-in_progress{background:#f1ecfb;color:var(--violet)}
.st-ready{background:#e7f5ec;color:var(--green-ink)}
.st-completed{background:#eef0f2;color:var(--mut)}
.st-no_show{background:#fcebea;color:var(--red-ink)}
/* table */
.dt{width:100%;border-collapse:collapse}
.dt th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--mut);padding:10px 12px;border-bottom:1px solid var(--line);font-weight:var(--fw-bold)}
.dt td{padding:12px;border-bottom:1px solid #f1f3f5;font-size:var(--fs-lg)}
.dt tr:last-child td{border:none}
.dt tr.clk:hover{background:#fafbfc;cursor:pointer}
.veh{font-weight:var(--fw-bold);color:var(--char)}
.s2{color:var(--mut);font-size:var(--fs-sm)}
/* ===== the five repeats (bc-design-system) =====
`.review/scan.sh` counts the most-repeated inline `style=` attributes under
the heading "a repeat is a class not yet written", and these were the five:
margin-top:12px at 23 sites, text-align:center at 13, color:var(--red-ink) at
12, margin:6px 0 0 at 11 and margin-top:10px at 10 — 69 attributes saying one
of five things.
Deliberately NOT a utility framework. These are the five the count actually
found, named for what they are rather than for their values, so a sixth does
not arrive by habit; the gate's design-system check fails when the inline
count RISES, which is what keeps the list from growing quietly. Only whole
attributes were replaced — a style that combines two declarations stays
inline, because splitting it would change which rule wins. */
.mt-md{margin-top:12px}
.mt-sm{margin-top:10px}
.stack-xs{margin:6px 0 0}
.centred{text-align:center}
.warn-ink{color:var(--red-ink)}
/* A HEADING THAT MUST NOT LOOK LIKE ONE. The home page's two section labels
were so that
's own margins and size would not disturb the card they
sit in — which left the page with one h1 and zero h2s, while #/check and the
staff screens use real h2s throughout. They are headings now, painted exactly
as the was: verified by screenshotting the page before and after.
NOT `display:contents`, which would have been the tidiest way to make the
wrapper disappear and is the one thing this must not do: several browsers
have dropped elements with it from the accessibility tree, and a heading
nobody can navigate to is the defect this was fixing. A block with no margin
does the same job and stays a heading. */
.h2-plain{margin:0;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit}
/* The confirmation route with no booking to show, and the sign-in card when
Google cannot be reached. Both are small centred states; neither earns a
one-off inline style, and the gate counts those for exactly this reason. */
.nobooking{text-align:center}
.nobooking .ch{margin:0 0 8px}
.nobooking .csub{margin:0 0 12px}
.nobooking .csub+.csub{margin-bottom:16px}
.gsi-note{text-align:center;margin:0}
/* Where a screen's figures came from. The staff console's only provenance note
used to be in `.sidenav`, which is display:none below 900px — so on the phone
the console is built for, the Reports screen carried no indication that its
numbers were not real. This renders at every width. */
.provenance{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
/* job detail */
.dheader{background:var(--char);color:#fff;padding:16px 18px 18px;border-radius:0}
@media(min-width:900px){.dheader{border-radius:var(--r-lg)}}
.dheader .addr{color:#fff;font-size:var(--fs-3xl);font-weight:var(--fw-bold)}
.dheader .meta{color:#b3bdc7;font-size:var(--fs-md);margin-top:3px}
/* used on both and