/* ===========================================================================
   Facility listings — the public page for a mill or silo, and the flow that
   makes one. Loaded after /site.css and built only from its tokens: black
   ground, the alpha ladder, hairline cards, 6px ceiling, Lucide stroked.

   Three icon colours carry the meaning of the page, so they are set once
   here and nowhere else:

     .tone-green   what the site offers            --green
     .tone-amber   what to know before you arrive  --amber (the transporter
                                                    colour: these lines are
                                                    written to the driver)
     .tone-white   the fixed facts                 --fg
   =========================================================================== */

/* ── THE GROUND ────────────────────────────────────────────────────────────
   These pages are read outdoors, on a phone, in a truck cab. So unlike the
   marketing site they sit on white: the same tokens site.css defines, turned
   over. --black is "the ground" and --white is "the ink" everywhere in
   site.css, which is why redefining those two carries the whole system
   across. Green and amber are deepened a step so a stroked icon still reads
   against white. */
:root {
  --black:#FFFFFF;                     /* manifest:ok A6 token definition */
  --white:#11151A;                     /* manifest:ok A6 token definition */
  --fg:#11151A;                        /* manifest:ok A6 token definition */
  --body:rgba(17,21,26,.82); --strong:rgba(17,21,26,.9); --dim:rgba(17,21,26,.62);
  --faint:rgba(17,21,26,.32); --hair:rgba(17,21,26,.13);
  --surface:rgba(17,21,26,.025); --surface-2:rgba(17,21,26,.045); --surface-3:rgba(17,21,26,.08);
  --green:#1F9D4D;                     /* manifest:ok A6 token definition */
  --green-deep:#18823F;                /* manifest:ok A6 token definition */
  --green-glow:rgba(31,157,77,.18);
  --amber:#C77B00;                     /* manifest:ok A6 token definition */
  --red:#D92C35;                       /* manifest:ok A6 token definition */
  /* No mono on these pages: figures are set in the body face with lining,
     tabular numerals, so a column of heights still lines up. */
  --font-mono:var(--font-body);
  --cyan:#1A8FA4;                      /* manifest:ok A6 token definition */
  /* The three measures of a truck, one colour each, kept wherever they show. */
  --m-off:var(--green); --m-load:var(--cyan); --m-drive:var(--red); --m-len:var(--amber);
  --edge:rgba(17,21,26,.14); --line-2:rgba(17,21,26,.22); --line-3:rgba(17,21,26,.32); --line-4:rgba(17,21,26,.5);
  --panel:#F6F7F9;                     /* manifest:ok A6 token definition */
  --veil:rgba(255,255,255,.92);
  --elev-2:0 0 0 1px rgba(17,21,26,.14);
  --elev-3:0 0 0 1px rgba(17,21,26,.16), 0 8px 24px rgba(17,21,26,.12);
  --elev-4:0 0 0 1px rgba(17,21,26,.16), 0 18px 46px 6px rgba(17,21,26,.18);
}
body { font-variant-numeric:lining-nums tabular-nums; }
.atmos { opacity:.45; }
.btn-primary { color:var(--black); }
.btn-outline-light { border-color:var(--line-3); }
.btn-outline-light:hover { border-color:var(--line-4); }
.tag-muted { color:var(--dim); }
::selection { color:var(--fg); }

.i { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tone-green .i, .i.green { stroke:var(--green); }
.tone-amber .i, .i.amber { stroke:var(--amber); }
.tone-white .i, .i.white { stroke:var(--fg); }

.fk-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-5); }
/* site.css makes every .btn-md full-width on a phone; here that let the
   button take the whole row and flexbox squashed the logo, so both hold
   their own size */
.fk-top > a:first-child { flex:none; }
.fk-top img { height:24px; width:auto; }
.fk-top .btn { flex:none; width:auto; }
.fk-top .btn .i { width:16px; height:16px; }

/* ── LISTING ───────────────────────────────────────────────────────────────
   The header is a globe and a name. The globe takes the left third and says
   where in the country this is; the name, one generated sentence and the way
   there take the rest. */
.fl-missing { padding-block:var(--space-12); display:grid; gap:var(--space-5); }

.fl-owner { display:flex; align-items:center; gap:var(--space-3); margin-block:var(--space-2) var(--space-5); padding:var(--space-3) var(--space-4); border-radius:var(--r-lg); border:1px solid rgba(31,157,77,.45); color:var(--strong); font-size:.9375rem; text-decoration:none; }
.fl-owner span { flex:1; }
.fl-owner b { color:var(--fg); }
.fl-owner .i { width:18px; height:18px; stroke:var(--green); }

.fl-hero { display:grid; gap:var(--space-5); grid-template-columns:minmax(0,1fr); align-items:center; padding-block:var(--space-2) var(--space-8); }
@media (min-width:820px) { .fl-hero { grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(24px,5vw,72px); } }
.fl-globe { position:relative; aspect-ratio:1 / 1; max-height:420px; width:100%; justify-self:center; }
/* the ball runs off the sides of its box; the mask lets it fall away instead of ending in a rectangle */
.fl-globe canvas { position:absolute; inset:0; width:100%; height:100%; -webkit-mask-image:radial-gradient(ellipse closest-side, black 72%, transparent 100%); mask-image:radial-gradient(ellipse closest-side, black 72%, transparent 100%); }
@media (max-width:819px) { .fl-globe { aspect-ratio:16 / 10; max-height:300px; } }
.fl-title h1 { font-weight:800; font-size:clamp(2.25rem,6.4vw,4rem); line-height:1.02; letter-spacing:-.03em; }
.fl-name { display:flex; align-items:center; gap:var(--space-5); }
/* A mill's own logo sits beside its name: drivers recognise the board at
   the gate before they read it. Contained, never cropped, on a white tile. */
.fl-logo { flex:none; width:clamp(56px,7vw,84px); height:clamp(56px,7vw,84px); object-fit:contain; border-radius:var(--r-lg); background:var(--black); border:1px solid var(--edge); padding:4px; }
.fl-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); margin-top:var(--space-4); color:var(--dim); font-size:1.0625rem; max-width:none; }
.fl-meta > .i { width:18px; height:18px; stroke:var(--green); margin-right:calc(var(--space-1) * -1); }
.fl-meta .sep { width:1px; height:1.1em; background:var(--line-3); }
.fl-coords { display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0; background:none; border:0; color:var(--dim); font:inherit; font-size:inherit; cursor:pointer; }
.fl-coords .i { width:15px; height:15px; stroke:currentColor; }
.fl-coords:hover { color:var(--fg); }
@media (max-width:560px) { .fl-meta .sep { display:none; } .fl-meta .fl-coords { flex-basis:100%; min-height:32px; } }

/* ── the week ──────────────────────────────────────────────────────────────
   Eight tracks on one time axis. A bar is the open stretch, the faint
   uprights are the three-hour marks, and the green upright is this minute;
   it thickens into a marker on today's row. */
.fl-week-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--space-2) var(--space-5); }
.fl-status { display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-head); font-weight:800; font-size:1.125rem; letter-spacing:-.01em; color:var(--fg); }
.fl-status i { width:9px; height:9px; border-radius:var(--r-sm); background:var(--green); }
.fl-status.shut i { background:var(--faint); }
.fl-status small { font-family:var(--font-body); font-weight:400; font-size:.9375rem; letter-spacing:0; color:var(--dim); }
.wk { margin-top:var(--space-6); display:grid; gap:var(--space-2); }
.wk-row { display:grid; grid-template-columns:7.2em minmax(0,1fr) 7.6em; gap:var(--space-4); align-items:center; min-height:38px; }
.wk-row .d { display:grid; font-size:.9375rem; color:var(--dim); line-height:1.25; }
.wk-row .d em { font-style:normal; font-size:.75rem; font-weight:700; letter-spacing:.02em; color:var(--green); }
.wk-row.today .d { color:var(--fg); font-weight:600; }
.wk-row .t { font-size:.9375rem; color:var(--fg); text-align:right; white-space:nowrap; }
.wk-row.today .t { font-weight:600; }
.wk-row.closed .t { color:var(--faint); }
.wk-row .track { position:relative; height:22px; border-radius:var(--r-sm); background:var(--surface-3); overflow:hidden; }
.wk-row .track .bar { position:absolute; top:0; bottom:0; border-radius:var(--r-sm); overflow:hidden; }
.wk-row .track .bar i { position:absolute; top:0; bottom:0; left:0; }
.wk-row.today .track i { background:var(--green); }
.wk-row .track u { position:absolute; top:0; bottom:0; width:1px; background:var(--black); opacity:.7; }
/* the cut-off: the bar's own colour, in stripes that alternate full and 75% strength,
   ending on the bar's own rounded corner */
.wk-row .track { --bar:var(--line-3); }
.wk-row.today .track { --bar:var(--green); }
.wk-row .track i { background:var(--bar); }
.wk-row .track .cut, .wk-key .cut { position:absolute; top:0; bottom:0; right:0; background:repeating-linear-gradient(-45deg, var(--bar) 0 4px, color-mix(in srgb, var(--bar) 75%, transparent) 4px 8px);}
.wk-key { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5); font-size:.875rem; color:var(--dim); max-width:none; }
.wk-key .cut { --bar:var(--line-4); position:relative; flex:none; width:28px; height:14px; border-radius:var(--r-sm); }
/* the present minute: only on today's bar */
.wk-row .track s { position:absolute; top:0; bottom:0; left:var(--now); width:3px; margin-left:-1.5px; background:var(--fg); outline:2px solid var(--black); }
.wk-row.hol { margin-top:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--edge); }
.wk-scale { min-height:0; }
.wk-scale .track { height:16px; background:none; overflow:visible; }
.wk-scale em { position:absolute; bottom:0; transform:translateX(-50%); font-style:normal; font-size:.6875rem; color:var(--dim); }
.wk-row .d .sm { display:none; }
/* on a phone each row is two lines: the days and the hours, then the bar
   underneath at full width, so the bars stay long enough to compare */
@media (max-width:560px) {
  .wk { gap:var(--space-4); }
  .wk-row { grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2) var(--space-3); min-height:0; }
  .wk-row .d { grid-column:1; grid-row:1; display:flex; align-items:baseline; gap:var(--space-2); }
  .wk-row .t { grid-column:2; grid-row:1; }
  .wk-row .track { grid-column:1 / -1; grid-row:2; }
  .wk-scale > span { display:none; }
  .wk-scale .track { grid-row:1; }
  .wk-row .d .lg { display:inline; } .wk-row .d .sm { display:none; }
}

/* ── the rig ───────────────────────────────────────────────────────────────
   A solid silhouette, and everything around it drawn fine: ink for the roof
   lines and the ends of each measure, the measure itself in its own colour,
   the etching faint. The truck is the only heavy thing in the drawing. */
.m-off { --m:var(--m-off); } .m-load { --m:var(--m-load); } .m-drive { --m:var(--m-drive); } .m-len { --m:var(--m-len); }
.fl-rig { display:block; width:100%; height:auto; margin-top:var(--space-8); overflow:visible; }
.fl-rig .truck { fill:var(--fg); }
.fl-rig .ground { fill:none; stroke:var(--line-2); stroke-width:1.25; }
.fl-rig .roof, .fl-rig .tick { fill:none; stroke:var(--fg); stroke-width:2; stroke-linecap:round; }
.fl-rig .hatch { fill:none; stroke:var(--line-3); stroke-width:1.25; stroke-linecap:round; }
.fl-rig .dim path { fill:none; stroke:var(--m); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.fl-rig .gl { fill:none; stroke:var(--m); stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.fl-rig text { font-family:var(--font-body); font-weight:600; fill:var(--fg); }
.fl-rig .val { font-size:28px; }
/* on a phone the figures would be too small to read in the drawing; the
   coloured arrows stay, and the key directly underneath carries the numbers */
@media (max-width:640px) { .fl-rig .fig { display:none; } }

/* The key: one row per measure, the same shape as every other row here. */
.fl-key { list-style:none; margin-top:var(--space-6); display:grid; }
.fl-key li { display:flex; align-items:center; gap:var(--space-4); min-height:52px; border-top:1px solid var(--edge); }
.fl-key li:last-child { border-bottom:1px solid var(--edge); }
.fl-key .i { width:24px; height:24px; stroke:var(--m, var(--fg)); stroke-width:2; }
.fl-key span { flex:1; color:var(--strong); font-size:1rem; }
.fl-key b { font-weight:600; font-size:1.0625rem; color:var(--fg); white-space:nowrap; }
.fl-block .fl-key + .fl-lead { margin-top:var(--space-6); }

/* Photos are reference, not the hero: small named thumbnails, opened one
   at a time when a driver is looking for something specific. */
.fl-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:var(--space-3); margin-top:var(--space-5); }
.fl-thumb { display:grid; gap:var(--space-2); padding:0; background:none; border:0; color:var(--strong); font:inherit; font-size:.8125rem; text-align:left; cursor:pointer; }
.fl-thumb .pic { display:grid; place-items:center; aspect-ratio:4 / 3; border-radius:var(--r-md); border:1px solid var(--edge); background:var(--surface-3); overflow:hidden; transition:border-color 140ms var(--e); }
.fl-thumb .pic img { width:100%; height:100%; object-fit:cover; }
.fl-thumb .pic .i { width:22px; height:22px; stroke:var(--faint); }
.fl-thumb:hover:not(:disabled) .pic { border-color:var(--line-4); }
.fl-thumb:disabled { cursor:default; color:var(--dim); }
.fk-photo { display:block; width:100%; max-height:calc(min(86vh,860px) - 68px); object-fit:contain; }

.fl-body { display:grid; gap:var(--space-10); grid-template-columns:minmax(0,1fr); padding-block:var(--space-6) var(--space-12); }
@media (min-width:980px) { .fl-body { grid-template-columns:minmax(0,1fr) 340px; gap:clamp(48px,7vw,96px); } }

/* Each list sits on its own panel: a lifted ground tinted with its tone,
   and one 1px border in the same tone. Every bordered thing on the page
   (facts, panels, the side card, thumbnails) uses the same edge weight. */
.fl-block { margin-top:var(--space-4); padding:var(--space-8) var(--space-6); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
@media (min-width:640px) { .fl-block { padding:var(--space-8); } }
.fl-block.tone-green { --edge:rgba(31,157,77,.36); background:linear-gradient(180deg, rgba(31,157,77,.13), rgba(31,157,77,.05)); }
.fl-block.tone-amber { --edge:rgba(199,123,0,.4); background:linear-gradient(180deg, rgba(240,160,20,.17), rgba(240,160,20,.07)); }
.fl-block .fl-fold { border-top-color:var(--edge); }
.fl-block .fl-stack i { border-color:var(--edge); }
.fl-block:first-child { margin-top:0; }
.fl-block h2 { font-weight:800; font-size:clamp(1.375rem,3.2vw,1.625rem); letter-spacing:-.02em; line-height:1.15; }
.fl-intro p { font-size:clamp(1.0625rem,2.2vw,1.25rem); line-height:1.5; color:var(--fg); max-width:34em; }
.fl-quiet { margin-top:var(--space-4); color:var(--dim); }

/* The lead rows: the three that matter, set large. Icon, one line, and at
   most one quieter line under it. This is the component the page is for. */
.fl-lead { list-style:none; margin-top:var(--space-6); display:grid; gap:var(--space-6); }
.fl-lead li { display:flex; gap:var(--space-5); align-items:flex-start; }
.fl-lead .i { width:28px; height:28px; margin-top:1px; stroke-width:1.7; }
.fl-lead b { display:block; font-weight:600; font-size:1.0625rem; color:var(--fg); line-height:1.35; }
.fl-lead b.num { font-family:var(--font-mono); font-weight:400; font-size:1.125rem; }
.fl-lead b.none { font-weight:400; color:var(--faint); }
.fl-lead b em { font-style:normal; font-family:var(--font-mono); font-weight:400; font-size:.875rem; color:var(--dim); margin-left:var(--space-2); white-space:nowrap; }
.fl-lead small { display:block; margin-top:2px; font-size:.9063rem; color:var(--dim); line-height:1.45; }
.fl-lead small:first-child { margin:0 0 2px; }

/* The fold. An arrow, the count, what is being counted, and the next four
   icons stacked over one another. It reads as "there is more, and here is a
   glimpse of it", which a bare "Show all" never does. */
.fl-fold { display:flex; align-items:center; gap:var(--space-3); width:100%; margin-top:var(--space-8); padding:var(--space-3) 0; min-height:56px; background:none; border:0; border-top:1px solid var(--hair); color:var(--dim); font:inherit; font-size:.9688rem; text-align:left; cursor:pointer; transition:color 140ms var(--e); }
.fl-fold > .i { width:20px; height:20px; stroke:var(--fg); transition:transform 220ms var(--e); }
.fl-fold b { font-family:var(--font-head); font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:var(--fg); }
.fl-fold:hover { color:var(--fg); }
.fl-fold:hover > .i { transform:translateY(3px); }
/* The stack recedes: each tile behind is a step smaller and its icon a step
   fainter, so it reads as depth, not as a row. Tiles are solid and the first
   is on top; opacity on a tile would let the one beneath show through, so
   the fade is on the icon alone. Each icon fills its tile's visible part. */
.fl-stack { display:flex; align-items:center; margin-left:auto; padding-left:var(--space-3); }
.fl-stack i { position:relative; display:grid; place-items:center; flex:none; width:44px; height:44px; margin-left:-10px; border-radius:var(--r-lg); background:var(--black); border:1px solid var(--line-2); transition:transform 220ms var(--e); }
.fl-stack i:nth-child(1) { z-index:4; margin-left:0; }
.fl-stack i:nth-child(2) { z-index:3; width:40px; height:40px; padding-left:10px; }
.fl-stack i:nth-child(3) { z-index:2; width:36px; height:36px; padding-left:10px; }
.fl-stack i:nth-child(4) { z-index:1; width:32px; height:32px; padding-left:10px; }
.fl-stack .i { width:27px; height:27px; stroke-width:1.8; }
.fl-stack i:nth-child(2) .i { width:23px; height:23px; opacity:.8; }
.fl-stack i:nth-child(3) .i { width:20px; height:20px; opacity:.6; }
.fl-stack i:nth-child(4) .i { width:17px; height:17px; opacity:.42; }
.fl-fold:hover .fl-stack i:nth-child(n+2) { transform:translateX(5px); }
.fl-fold:hover .fl-stack i:nth-child(n+3) { transform:translateX(10px); }
.fl-fold:hover .fl-stack i:nth-child(n+4) { transform:translateX(15px); }

.fl-gps { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-6); }
.fl-gps code { font-family:var(--font-mono); font-size:.9375rem; color:var(--fg); }
.fl-gps button { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-inline:var(--space-2); background:none; border:0; color:var(--dim); font:inherit; font-size:.875rem; cursor:pointer; }
.fl-gps button:hover { color:var(--fg); }
.fl-gps button .i { width:16px; height:16px; }

/* The one card. Everything a driver does with this page: check it is open,
   message the desk, navigate. Sticky on desktop, a bottom bar on a phone. */
.fl-side { position:sticky; top:var(--space-6); align-self:start; padding:var(--space-6); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
.fl-book { display:flex; gap:var(--space-3); align-items:center; margin-top:var(--space-4); color:var(--strong); font-size:.9375rem; }
.fl-book .i { width:20px; height:20px; stroke:var(--amber); }
.fl-book b { color:var(--fg); }
.fl-actions { display:grid; gap:var(--space-2); margin-top:var(--space-5); }
.fl-actions .btn { min-height:48px; width:100%; }
.fl-actions .btn .i { width:18px; height:18px; }
.fl-actions .btn-primary .i { stroke:currentColor; }
.fl-actions .pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.fl-actions .pair > :only-child { grid-column:1 / -1; }
.fl-actions .pair:empty { display:none; }
.fl-send { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%; min-height:44px; margin-top:var(--space-3); background:none; border:0; color:var(--dim); font:inherit; font-size:.9063rem; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.fl-send:hover { color:var(--fg); }
.fl-send .i { width:16px; height:16px; }

.fl-bar { display:none; }
@media (max-width:979px) {
  .fl-side { position:static; }
  .fl-bar { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); position:fixed; left:0; right:0; bottom:0; z-index:50; padding:var(--space-3) var(--pad) calc(var(--space-3) + env(safe-area-inset-bottom)); background:var(--veil); border-top:1px solid var(--hair); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .fl-bar .btn { min-height:46px; }
  .fl-bar .btn .i { width:18px; height:18px; }
  .fl-bar .btn-primary .i { stroke:currentColor; }
  body.has-bar footer { padding-bottom:110px; }
}

.fl-cta { display:grid; gap:var(--space-3); justify-items:start; padding-block:var(--space-12); border-top:1px solid var(--hair); }
.fl-cta h2 { font-weight:800; font-size:clamp(1.5rem,4vw,2.25rem); letter-spacing:-.025em; line-height:1.1; }
.fl-cta p { color:var(--dim); margin-bottom:var(--space-3); }

.fk-foot { border-top:1px solid var(--hair); padding-block:var(--space-8); color:var(--dim); font-size:.875rem; }

/* The sheet: the full list, grouped. Close sits on the left, where the thumb
   that opened it already is. */
/* site.css lifts every child of <body> with position:relative, which beats
   the browser's own position:fixed for an open dialog; the dialog was then
   laid out at the top of the document, and focusing its close button
   scrolled the page up to it. Pinned back to the viewport here. */
dialog.fk-dialog { position:fixed; inset:0; margin:auto; width:min(640px, calc(100vw - 32px)); max-height:min(86vh,860px); padding:0; border:0; border-radius:var(--r-lg); background:var(--black); color:var(--body); box-shadow:var(--elev-4); overflow:hidden; }
dialog.fk-dialog:focus { outline:none; }
/* a notice: one message, one button */
dialog.fw-notice { width:min(420px, calc(100vw - 32px)); height:max-content; }
.fw-notice-in { display:grid; justify-items:center; gap:var(--space-3); padding:var(--space-8) var(--space-6) var(--space-6); text-align:center; }
.fw-notice-in > .i { width:32px; height:32px; stroke:var(--green); stroke-width:1.8; }
.fw-notice-in h2 { font-weight:800; font-size:1.375rem; letter-spacing:-.02em; color:var(--fg); }
.fw-notice-in p { color:var(--body); line-height:1.5; }
.fw-notice-in b { color:var(--fg); }
.fw-notice-in .btn { width:100%; margin-top:var(--space-3); min-height:48px; }
/* while a sheet is open the page behind stays exactly where it was */
html:has(dialog.fk-dialog[open]) { overflow:hidden; }
/* rows arrive in turn, the way the page itself does */
@media (prefers-reduced-motion:no-preference) {
  dialog.fk-dialog[open] [style*="--k"] { animation:fwRise 460ms var(--e) backwards; animation-delay:calc(90ms + var(--k) * 45ms); }
  dialog.fk-dialog[open] .fk-photo { animation:fkPhotoIn 420ms var(--e) backwards; animation-delay:80ms; }
  @keyframes fkPhotoIn { from { opacity:0; transform:scale(.98); } }
}
dialog.fk-dialog::backdrop { background:rgba(0,0,0,.76); }
@media (prefers-reduced-motion:no-preference) { dialog.fk-dialog[open] { animation:fkSheet 300ms var(--e); } @keyframes fkSheet { from { opacity:0; transform:translateY(24px); } } }
.fk-dialog header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-4) var(--space-3) var(--space-6); }
.fk-dialog header h2 { font-weight:800; font-size:1.25rem; letter-spacing:-.02em; }
/* close: a square in the top-right corner with a soft grey edge; never the green ring */
.fk-dialog header button { flex:none; width:44px; height:44px; display:grid; place-items:center; background:var(--black); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--fg); cursor:pointer; transition:background 120ms var(--e), border-color 120ms var(--e); }
.fk-dialog header button .i { width:20px; height:20px; }
.fk-dialog header button:hover { background:var(--surface-3); border-color:var(--line-3); }
.fk-dialog header button:focus { outline:none; }
.fk-dialog header button:focus-visible { outline:none; border-color:var(--line-4); background:var(--surface-3); }
.fk-dialog .scroll { overflow:auto; max-height:calc(min(86vh,860px) - 68px); padding:0 var(--space-6) var(--space-8); }
.fk-dialog h3 { margin-top:var(--space-8); font-weight:600; font-size:1.0625rem; color:var(--fg); }
.fk-dialog .fl-lead { margin-top:var(--space-2); gap:0; }
.fk-dialog .fl-lead li { padding-block:var(--space-4); border-bottom:1px solid var(--hair); }
.fk-dialog .fl-lead b { font-weight:400; }

.fk-toast { position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:90; transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:10px 16px; border-radius:var(--r-sm); background:var(--fg); color:var(--black); font-size:.875rem; font-weight:600; transition:opacity 180ms var(--e), transform 180ms var(--e); }
.fk-toast.on { opacity:1; transform:translate(-50%,0); }

/* ── the cover, and the arrival ────────────────────────────────────────────
   The ring draws, holds and redraws until listing.js adds .ready. If the
   script never runs, the cover removes itself after six seconds. */
.fk-intro { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--black); transition:opacity 420ms var(--e), visibility 0s 420ms; animation:fkIntroBail 1ms 6s forwards; }
.fk-intro svg { width:96px; height:96px; color:var(--green); }
.fk-intro path, .fk-intro circle { fill:none; stroke:currentColor; stroke-linecap:round; }
body.ready .fk-intro { opacity:0; visibility:hidden; }
@keyframes fkIntroBail { to { opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:no-preference) {
  .fk-intro path, .fk-intro circle { stroke-dasharray:1; stroke-dashoffset:1; animation:fkIntroDraw 1500ms var(--e) infinite; }
  .fk-intro path:nth-child(2) { animation-delay:130ms; }
  .fk-intro circle { animation-delay:260ms; }
  @keyframes fkIntroDraw { 0% { stroke-dashoffset:1; opacity:1; } 55%, 80% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }

  body:not(.ready) #listing { visibility:hidden; }
  body.ready .fl-title > *, body.ready .fl-globe, body.ready .fl-body > div > *, body.ready .fl-side { animation:fwRise 700ms var(--e) backwards; }
  body.ready .fl-globe { animation-name:fkGlobeIn; animation-duration:1100ms; }
  body.ready .fl-title > :nth-child(1) { animation-delay:120ms; } body.ready .fl-title > :nth-child(2) { animation-delay:200ms; }
  body.ready .fl-title > :nth-child(3) { animation-delay:280ms; } body.ready .fl-title > :nth-child(4) { animation-delay:360ms; }
  body.ready .fl-body > div > :nth-child(1) { animation-delay:460ms; } body.ready .fl-side { animation-delay:560ms; }
  body.ready .fl-body > div > :nth-child(2) { animation-delay:640ms; } body.ready .fl-body > div > :nth-child(n+3) { animation-delay:760ms; }
  /* one sweep per bar, left to right; a clip, not a stretch, so the stripes never squash */
  body.ready .wk-row .track .bar { animation:wkReveal 900ms var(--e) backwards; animation-delay:calc(700ms + var(--n) * 70ms); }
  body.ready .wk-row .track s { animation:fwRise 500ms var(--e) backwards; animation-delay:1400ms; }
  @keyframes fkGlobeIn { from { opacity:0; transform:scale(.86); } to { opacity:1; transform:none; } }
  @keyframes wkReveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
}

.still *, .still *::before, .still *::after { animation:none !important; transition:none !important; }
.still .fk-intro { display:none; }

/* ===========================================================================
   THE FLOW

   One question to a screen, a bar along the bottom, a live card on the right.
   The screen never scrolls as a page: the question scrolls inside its own
   column, and Back / Next never move.
   =========================================================================== */
body.flow { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
.fw-top { flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--pad); }
.fw-top img { height:22px; width:auto; }
.fw-saved { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--dim); opacity:0; transition:opacity 240ms var(--e); }
.fw-saved.on { opacity:1; }
.fw-saved .i { width:15px; height:15px; stroke:var(--green); }

.fw-main { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:1080px) { .fw-main.with-preview { grid-template-columns:minmax(0,1fr) 400px; } }
.fw-stage { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--space-6) var(--pad) var(--space-10); }
.fw-step { width:100%; max-width:680px; margin-inline:auto; min-height:100%; display:flex; flex-direction:column; justify-content:center; }
.fw-step.top { justify-content:flex-start; }
.fw-step h1 { font-weight:800; font-size:clamp(1.75rem,5vw,2.6rem); line-height:1.06; letter-spacing:-.028em; }
.fw-step h1 em { font-style:normal; color:var(--green); }
.fw-step .lead { margin-top:var(--space-3); }

@media (prefers-reduced-motion:no-preference) {
  .fw-step { animation:fwIn 380ms var(--e) both; }
  .fw-step.back { animation-name:fwInBack; }
  .fw-step > * { animation:fwRise 420ms var(--e) both; }
  .fw-step > *:nth-child(2) { animation-delay:50ms; }
  .fw-step > *:nth-child(3) { animation-delay:100ms; }
  .fw-step > *:nth-child(4) { animation-delay:150ms; }
  .fw-step > *:nth-child(n+5) { animation-delay:190ms; }
  @keyframes fwIn     { from { opacity:0; transform:translateX(26px); }  to { opacity:1; transform:none; } }
  @keyframes fwInBack { from { opacity:0; transform:translateX(-26px); } to { opacity:1; transform:none; } }
  @keyframes fwRise   { from { opacity:0; transform:translateY(10px); }  to { opacity:1; transform:none; } }
}

/* Welcome: the three chapters, so the whole job is visible before it starts. */
.fw-chapters { list-style:none; margin-top:var(--space-8); display:grid; gap:0; }
.fw-chapters li { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; padding-block:var(--space-5); border-top:1px solid var(--hair); }
.fw-chapters li:last-child { border-bottom:1px solid var(--hair); }
.fw-chapters .n { font-family:var(--font-head); font-weight:800; font-size:1.375rem; color:var(--fg); width:1.4em; }
.fw-chapters b { display:block; font-family:var(--font-head); font-weight:600; font-size:1.125rem; color:var(--fg); }
.fw-chapters small { display:block; margin-top:2px; font-size:.9063rem; color:var(--dim); line-height:1.45; }
.fw-chapters .i { width:30px; height:30px; stroke:var(--green); stroke-width:1.6; }
.fw-resume { margin-top:var(--space-6); display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; padding:var(--space-4); border:1px solid rgba(31,157,77,.45); border-radius:var(--r-lg); }
.fw-resume p { flex:1 1 220px; color:var(--strong); font-size:.9375rem; }

/* Big choice cards (mill or silo; load, offload). */
.fw-cards { margin-top:var(--space-8); display:grid; gap:var(--space-3); grid-template-columns:minmax(0,1fr); }
@media (min-width:600px) { .fw-cards.two { grid-template-columns:1fr 1fr; } }
.fw-card { position:relative; display:grid; gap:var(--space-3); text-align:left; padding:var(--space-6); border-radius:var(--r-lg); border:1px solid var(--hair); background:var(--surface); color:var(--body); font:inherit; cursor:pointer; transition:border-color 140ms var(--e), background 140ms var(--e), transform 140ms var(--e); }
.fw-card:hover { border-color:var(--line-3); background:var(--surface-2); }
.fw-card:active { transform:scale(.985); }
.fw-card .i { width:34px; height:34px; stroke:var(--fg); stroke-width:1.6; }
.fw-card b { font-family:var(--font-head); font-weight:800; font-size:1.375rem; letter-spacing:-.02em; color:var(--fg); }
.fw-card span { font-size:.9375rem; color:var(--dim); line-height:1.5; }
.fw-card[aria-pressed="true"] { border-color:var(--green); background:rgba(31,157,77,.07); outline:1px solid var(--green); }
.fw-card[aria-pressed="true"] > .i { stroke:var(--green); }
.fw-card .tick { position:absolute; top:var(--space-4); right:var(--space-4); width:24px; height:24px; border-radius:var(--r-sm); background:var(--green); display:grid; place-items:center; transform:scale(0); transition:transform 240ms cubic-bezier(.3,1.6,.5,1); }
.fw-card .tick .i { width:15px; height:15px; stroke:var(--black); stroke-width:3; }
.fw-card[aria-pressed="true"] .tick { transform:scale(1); }

/* Fields. site.css has no form rules, so these are the vocabulary: surface
   fill, hairline, 3px, 48px tall, green focus ring. */
.fw-field { margin-top:var(--space-6); display:grid; gap:var(--space-2); }
.fw-field label, .fw-label { font-size:.875rem; font-weight:600; color:var(--strong); }
.fw-input, .fw-select, .fw-text { width:100%; min-height:52px; padding:0 var(--space-4); border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface-2); color:var(--fg); font:inherit; font-size:1.0625rem; transition:border-color 120ms var(--e); }
.fw-input.big { min-height:64px; font-family:var(--font-head); font-weight:600; font-size:clamp(1.25rem,3.6vw,1.6rem); letter-spacing:-.015em; }
.fw-text { padding-block:var(--space-3); min-height:110px; resize:vertical; line-height:1.5; }
.fw-input::placeholder, .fw-text::placeholder { color:var(--faint); }
.fw-input:focus, .fw-select:focus, .fw-text:focus { outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.fw-select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size:6px 6px; background-repeat:no-repeat; }
.fw-select option { background:var(--black); color:var(--white); }
.fw-row { display:grid; gap:var(--space-4); grid-template-columns:minmax(0,1fr); }
@media (min-width:560px) { .fw-row { grid-template-columns:1fr 1fr; } }
.fw-url { margin-top:var(--space-5); display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; font-family:var(--font-mono); font-size:.875rem; color:var(--dim); word-break:break-all; }
.fw-url b { font-weight:400; color:var(--green); }
.fw-url .i { width:16px; height:16px; stroke:var(--dim); }

/* Selectable chips: commodities, trailer types. */
.fw-chips { margin-top:var(--space-6); display:flex; flex-wrap:wrap; gap:var(--space-2); }
.fw-chip { display:inline-flex; align-items:center; gap:var(--space-2); min-height:46px; padding:0 var(--space-4); border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface); color:var(--strong); font:inherit; font-size:.9688rem; cursor:pointer; transition:border-color 120ms var(--e), background 120ms var(--e), transform 120ms var(--e); }
.fw-chip:hover { border-color:var(--line-4); }
.fw-chip:active { transform:scale(.96); }
.fw-chip .i { width:0; height:16px; stroke:var(--green); stroke-width:3; opacity:0; transition:width 200ms var(--e), opacity 200ms var(--e); }
.fw-chip[aria-pressed="true"] { border-color:var(--green); background:rgba(31,157,77,.1); color:var(--fg); }
.fw-chip[aria-pressed="true"] .i { width:16px; opacity:1; }
/* Logo drop. Square, like the tile it will sit in on the page. */
.fw-logo { position:relative; display:grid; place-items:center; align-content:center; gap:var(--space-2); width:min(240px,100%); aspect-ratio:1 / 1; margin-top:var(--space-6); padding:var(--space-5); border:1px dashed var(--line-3); border-radius:var(--r-lg); background:var(--surface); text-align:center; cursor:pointer; transition:border-color 140ms var(--e), background 140ms var(--e); }
.fw-logo:hover { border-color:var(--green); background:rgba(31,157,77,.05); }
.fw-logo input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.fw-logo .i { width:32px; height:32px; stroke:var(--dim); stroke-width:1.6; }
.fw-logo b { font-weight:600; color:var(--fg); }
.fw-logo small { font-size:.8125rem; color:var(--dim); line-height:1.4; }
.fw-logo.has { border-style:solid; border-color:var(--edge); background:var(--black); }
.fw-logo.has img { width:100%; height:100%; object-fit:contain; }
.fw-logo-actions { display:flex; gap:var(--space-5); margin-top:var(--space-3); }
.fw-logo-actions .fw-back { min-height:44px; padding-inline:0; font-size:.9375rem; }
.fw-pcard .pname { display:flex; align-items:center; gap:var(--space-3); }
.fw-pcard .plogo { flex:none; width:40px; height:40px; object-fit:contain; border-radius:var(--r-md); border:1px solid var(--edge); background:var(--black); padding:2px; }

/* One-of chips: country, province. */
.fw-chips.one .fw-chip small { margin-left:var(--space-2); font-size:.75rem; color:var(--dim); }
.fw-chip:disabled { opacity:.5; cursor:default; }
.fw-here { margin-top:var(--space-4); min-height:46px; align-self:flex-start; }
.fw-here .i { width:17px; height:17px; }
.fw-help.good { color:var(--green); font-family:var(--font-mono); }
.fw-help.bad { color:var(--red); }
.fw-how { list-style:none; margin-top:var(--space-6); display:grid; gap:var(--space-3); }
.fw-how li { display:flex; gap:var(--space-3); align-items:flex-start; font-size:.9063rem; color:var(--dim); line-height:1.45; }
.fw-how .i { width:18px; height:18px; margin-top:2px; stroke:var(--dim); }
.fw-how b { font-weight:600; color:var(--strong); }
.fw-how code { font-family:var(--font-mono); font-size:.8125rem; color:var(--fg); }
.fw-split { margin-top:var(--space-4); font-size:.875rem; }

/* Yes-or-no chips: red cross until tapped, green tick after. */
.fw-chips.yn .fw-chip { border-color:rgba(217,44,53,.5); background:rgba(217,44,53,.08); color:var(--strong); }
.fw-chips.yn .fw-chip:hover { border-color:var(--red); }
.fw-chips.yn .fw-chip .i { width:16px; opacity:1; }
.fw-chips.yn .fw-chip .i.no { stroke:var(--red); }
.fw-chips.yn .fw-chip .i.yes { display:none; }
.fw-chips.yn .fw-chip[aria-pressed="true"] { border-color:var(--green); background:rgba(31,157,77,.12); color:var(--fg); }
.fw-chips.yn .fw-chip[aria-pressed="true"] .i.no { display:none; }
.fw-chips.yn .fw-chip[aria-pressed="true"] .i.yes { display:block; }
@media (prefers-reduced-motion:no-preference) { .fw-chips.yn .fw-chip[aria-pressed="true"] .i.yes { animation:fwBump 260ms var(--e); } }
.fw-group { margin-top:var(--space-8); }
.fw-group:first-of-type { margin-top:var(--space-6); }
.fw-group h2 { font-family:var(--font-head); font-weight:600; font-size:1.0625rem; color:var(--fg); }

/* Property tiles: the green and amber pickers. A tile is the listing's own
   row, so choosing one already looks like the finished page. */
.fw-tiles { margin-top:var(--space-3); display:grid; gap:var(--space-2); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:600px) { .fw-tiles { grid-template-columns:1fr 1fr; } }
.fw-tile { --tone:var(--green); --tint:rgba(31,157,77,.08); position:relative; border-radius:var(--r-lg); border:1px solid var(--hair); background:var(--surface); transition:border-color 140ms var(--e), background 140ms var(--e); }
.tone-amber .fw-tile { --tone:var(--amber); --tint:rgba(253,171,17,.08); }
.fw-tile > button { display:flex; gap:var(--space-3); align-items:flex-start; width:100%; min-height:64px; padding:var(--space-4); padding-right:44px; text-align:left; background:none; border:0; color:var(--strong); font:inherit; font-size:.9375rem; line-height:1.35; cursor:pointer; border-radius:var(--r-lg); }
.fw-tile > button .i { width:24px; height:24px; stroke:var(--dim); transition:stroke 140ms var(--e), transform 300ms cubic-bezier(.3,1.6,.5,1); }
.fw-tile small { display:block; margin-top:2px; font-size:.8125rem; color:var(--dim); }
.fw-tile:hover { border-color:var(--line-3); }
.fw-tile .tick { position:absolute; top:var(--space-4); right:var(--space-4); width:20px; height:20px; border-radius:var(--r-sm); border:1px solid var(--line-3); display:grid; place-items:center; pointer-events:none; transition:background 140ms var(--e), border-color 140ms var(--e); }
.fw-tile .tick .i { width:12px; height:12px; stroke:var(--black); stroke-width:3.4; opacity:0; }
.fw-tile.on { border-color:var(--tone); background:var(--tint); }
.fw-tile.on > button { color:var(--fg); }
.fw-tile.on > button .i { stroke:var(--tone); transform:scale(1.08); }
.fw-tile.on .tick { background:var(--tone); border-color:var(--tone); }
.fw-tile.on .tick .i { opacity:1; }
.fw-tile .opts { display:none; flex-wrap:wrap; gap:6px; padding:0 var(--space-4) var(--space-4) calc(var(--space-4) + 24px + var(--space-3)); }
.fw-tile.on .opts { display:flex; }
.fw-tile .opts button { min-height:34px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:transparent; color:var(--strong); font-family:var(--font-mono); font-size:.8125rem; cursor:pointer; }
.fw-tile .opts button[aria-pressed="true"] { border-color:var(--tone); color:var(--black); background:var(--tone); }

/* Steppers: a height is nudged, not typed. */
.fw-steppers { margin-top:var(--space-6); display:grid; gap:var(--space-3); }
.fw-stepper { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; padding:var(--space-4); border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); }
.fw-stepper > .i { stroke:var(--fg); width:24px; height:24px; }
.fw-stepper .what b { display:block; font-weight:400; color:var(--fg); line-height:1.3; }
.fw-stepper .what small { display:block; margin-top:2px; font-size:.8125rem; color:var(--dim); }
.fw-stepper .ctl { display:flex; align-items:center; gap:var(--space-2); }
.fw-stepper .ctl button { width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line-3); background:transparent; color:var(--fg); cursor:pointer; display:grid; place-items:center; transition:border-color 120ms var(--e), background 120ms var(--e), transform 120ms var(--e); }
.fw-stepper .ctl button:hover { border-color:var(--fg); background:var(--surface-3); }
.fw-stepper .ctl button:active { transform:scale(.9); }
.fw-stepper .ctl button .i { width:18px; height:18px; }
.fw-stepper output { min-width:5.6ch; text-align:center; font-family:var(--font-mono); font-size:1.125rem; color:var(--fg); }
.fw-stepper output.unset { color:var(--faint); }
.fw-stepper output.bump { animation:fwBump 220ms var(--e); }
@keyframes fwBump { 40% { transform:scale(1.16); color:var(--green); } }
@media (max-width:520px) { .fw-stepper { grid-template-columns:auto 1fr; } .fw-stepper .ctl { grid-column:1 / -1; justify-content:space-between; } }

.fw-hours { margin-top:var(--space-6); display:grid; gap:var(--space-3); }
.fw-day { display:grid; grid-template-columns:1fr auto; gap:var(--space-3) var(--space-4); align-items:center; padding:var(--space-4); border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); }
.fw-day b { font-weight:400; color:var(--fg); }
.fw-day .times { grid-column:1 / -1; display:none; grid-template-columns:1fr auto 1fr; gap:var(--space-3); align-items:center; color:var(--dim); }
.fw-day.open .times { display:grid; }
.fw-day input[type=time] { min-height:48px; padding:0 var(--space-3); border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--surface-2); color:var(--fg); font-family:var(--font-mono); font-size:1rem; color-scheme:light; width:100%; }
.fw-switch { position:relative; width:52px; height:30px; border-radius:var(--r-lg); border:1px solid var(--line-3); background:transparent; cursor:pointer; transition:background 160ms var(--e), border-color 160ms var(--e); }
.fw-switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:var(--r-sm); background:var(--dim); transition:transform 220ms cubic-bezier(.3,1.4,.5,1), background 160ms var(--e); }
.fw-switch[aria-checked="true"] { background:var(--green); border-color:var(--green); }
.fw-switch[aria-checked="true"]::after { transform:translateX(22px); background:var(--black); }

/* Photo slots. */
.fw-shots { margin-top:var(--space-6); display:grid; gap:var(--space-3); grid-template-columns:1fr 1fr; }
.fw-shot { position:relative; aspect-ratio:4 / 3; border-radius:var(--r-lg); border:1px dashed var(--line-3); background:var(--surface); overflow:hidden; cursor:pointer; display:grid; place-items:center; text-align:center; padding:var(--space-3); transition:border-color 140ms var(--e), background 140ms var(--e); }
.fw-shot:hover, .fw-shot.drag { border-color:var(--green); background:rgba(31,157,77,.06); }
.fw-shot input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.fw-shot .i { width:30px; height:30px; stroke:var(--dim); stroke-width:1.6; margin-inline:auto; }
.fw-shot b { display:block; margin-top:var(--space-2); font-weight:600; color:var(--fg); font-size:.9375rem; }
.fw-shot small { display:block; margin-top:2px; font-size:.78rem; color:var(--dim); line-height:1.35; }
.fw-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fw-shot.has { border-style:solid; border-color:var(--green); }
/* on the dark overlay the ink is the ground colour (white on these pages) */
.fw-shot.has .cap { position:absolute; left:var(--space-2); bottom:var(--space-2); display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--r-sm); background:rgba(0,0,0,.75); color:var(--black); font-size:.75rem; font-weight:600; }
.fw-shot.has .cap .i { width:13px; height:13px; stroke:var(--green); stroke-width:3; margin:0; }
.fw-shot .rm { position:absolute; top:var(--space-2); right:var(--space-2); z-index:2; width:44px; height:44px; border-radius:var(--r-sm); border:0; background:rgba(0,0,0,.75); color:var(--black); cursor:pointer; display:grid; place-items:center; }
.fw-shot .rm .i { width:16px; height:16px; stroke:var(--black); margin:0; }
@media (prefers-reduced-motion:no-preference) { .fw-shot.has img { animation:fwShot 420ms var(--e); } @keyframes fwShot { from { opacity:0; transform:scale(1.06); } } }

/* After submitting: the walk-around jobs. Rows, not cards. */
.fw-tasks { list-style:none; margin-top:var(--space-8); border-top:1px solid var(--hair); }
.fw-tasks button { display:flex; align-items:center; gap:var(--space-4); width:100%; min-height:64px; background:none; border:0; border-bottom:1px solid var(--hair); color:var(--fg); font:inherit; font-size:1.0625rem; text-align:left; cursor:pointer; }
.fw-tasks button span { flex:1; }
.fw-tasks button .i:first-child { width:24px; height:24px; stroke:var(--fg); }
.fw-tasks button .i:last-child { width:18px; height:18px; stroke:var(--dim); transition:transform 160ms var(--e); }
.fw-tasks button:hover .i:last-child { transform:translateX(3px); }
.fw-tasks button.ok { color:var(--dim); }
.fw-tasks button.ok .i:first-child { stroke:var(--green); stroke-width:2.6; }
.fw-step .fl-actions { max-width:420px; margin-top:var(--space-8); }

/* The bottom bar: Back, the three-chapter progress, Next. */
.fw-bar { flex:none; border-top:1px solid var(--hair); background:var(--black); padding:0 var(--pad) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.fw-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; transform:translateY(-1px); }
.fw-progress span { height:4px; background:var(--surface-3); overflow:hidden; }
.fw-progress i { display:block; height:100%; width:0; background:var(--green); transition:width 520ms var(--e); }
.fw-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-top:var(--space-3); }
.fw-nav .where { flex:1; text-align:right; font-size:.8125rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fw-nav .btn { min-height:48px; min-width:112px; }
.fw-nav .btn .i { width:17px; height:17px; }
.fw-nav .btn-primary .i { stroke:currentColor; }
.fw-nav .btn[disabled] { opacity:.35; cursor:not-allowed; }
.fw-back { background:none; border:0; color:var(--fg); font:inherit; font-weight:700; font-size:.9375rem; text-decoration:underline; text-underline-offset:4px; cursor:pointer; min-height:48px; padding-inline:var(--space-2); }
.fw-back[hidden] { display:block; visibility:hidden; }
@media (max-width:520px) { .fw-nav .where { display:none; } }

/* The small ring. It sits beside Next and draws itself once for every step
   completed: the same mark, the same motion, as the large one at the end. */
.fw-pip { flex:none; width:30px; height:30px; color:var(--green); opacity:0; }
.fw-pip path, .fw-pip circle { fill:none; stroke:currentColor; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
@media (prefers-reduced-motion:no-preference) {
  .fw-pip.go { animation:fwPip 1500ms var(--e) both; }
  .fw-pip.go path, .fw-pip.go circle { animation:fwDraw 620ms var(--e) forwards; }
  .fw-pip.go path:nth-child(2) { animation-delay:110ms; }
  .fw-pip.go circle { animation-delay:220ms; }
  @keyframes fwPip { 0% { opacity:0; transform:scale(.7); } 18% { opacity:1; transform:scale(1.12); } 34% { transform:scale(1); } 78% { opacity:1; } 100% { opacity:0; } }
}
.fw-help { font-size:.8125rem; color:var(--dim); line-height:1.4; }
.fw-tiles.first { margin-top:var(--space-6); }
/* inside an open tile: the lister's own figure, an amount, a list of lines */
.fw-tile .opts { align-items:center; }
.own { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--black); color:var(--dim); font-size:.875rem; cursor:text; transition:border-color 120ms var(--e); }
.own input { width:6.5ch; min-width:0; padding:0; border:0; background:none; color:var(--fg); font:inherit; font-size:.9375rem; outline:none; }
.own:focus-within { border-color:var(--tone, var(--green)); }
.own.set { border-color:var(--tone, var(--green)); color:var(--fg); }
.own.bad { border-color:var(--red); }
.fw-tile .lst { display:grid; gap:6px; width:100%; }
.fw-tile .li { display:flex; gap:6px; }
.fw-tile .li input { flex:1; min-width:0; min-height:40px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--black); color:var(--fg); font:inherit; font-size:.9375rem; }
.fw-tile .li input:focus { outline:none; border-color:var(--tone); }
.fw-tile .li button, .fw-tile .li-add { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--black); color:var(--dim); font:inherit; font-size:.875rem; cursor:pointer; }
.fw-tile .li button { width:40px; flex:none; }
.fw-tile .li-add { justify-self:start; padding:0 12px; color:var(--fg); }
.fw-tile .li button .i, .fw-tile .li-add .i { width:16px; height:16px; }
.fw-tile .li button:hover, .fw-tile .li-add:hover { border-color:var(--line-3); color:var(--fg); }
.fw-stepper.dur { grid-template-columns:auto 1fr auto; }
.fw-stepper.dur .own { --tone:var(--green); min-height:44px; }
.fw-stepper.dur .own input { width:6ch; font-size:1.0625rem; text-align:center; }
.fw-step .fl-fold { margin-top:var(--space-5); border-bottom:1px solid var(--hair); }
.fw-step.still, .fw-step.still > * { animation:none !important; }

/* The province globe: fills the preview card's cover on desktop, and sits
   under the province select where there is no card. */
/* Zoomed in, the sphere is far larger than the canvas and would end in a
   hard rectangle. The mask lets it fall away into the ground instead. */
.fw-globe { display:block; width:100%; height:100%; -webkit-mask-image:radial-gradient(ellipse closest-side, black 55%, transparent 100%); mask-image:radial-gradient(ellipse closest-side, black 55%, transparent 100%); }
.fw-pcard .cover .fw-globe { position:absolute; inset:0; }
.fw-globe.inline { flex:none; height:clamp(170px,30vh,250px); margin-bottom:var(--space-5); animation:none; }
.fw-globe[hidden] { display:none; }
@media (min-width:1080px) { .fw-globe.inline { display:none; } }

/* The live card: the listing assembling itself as you answer. */
.fw-preview { display:none; }
@media (min-width:1080px) {
  .fw-main.with-preview .fw-preview { display:flex; flex-direction:column; justify-content:center; min-height:0; overflow-y:auto; padding:var(--space-6) var(--pad) var(--space-6) 0; }
}
.fw-pcard { border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--elev-2); overflow:hidden; }
.fw-pcard .cover { position:relative; aspect-ratio:4 / 3; background:var(--surface-2); display:grid; place-items:center; border-bottom:1px solid var(--hair); }
.fw-pcard .cover .i { width:40px; height:40px; stroke:var(--faint); stroke-width:1.4; }
.fw-pcard .cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fw-pcard .in { padding:var(--space-5); }
.fw-pcard h3 { font-weight:800; font-size:1.375rem; letter-spacing:-.02em; line-height:1.15; color:var(--fg); }
.fw-pcard h3.empty { color:var(--faint); }
.fw-pcard .where { margin-top:4px; font-size:.875rem; color:var(--dim); min-height:1.4em; }
.fw-pcard .latest { list-style:none; margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--hair); display:grid; gap:var(--space-3); min-height:96px; }
.fw-pcard .latest li { display:flex; align-items:center; gap:var(--space-3); font-size:.9063rem; color:var(--strong); }
.fw-pcard .latest li.more { padding-left:calc(18px + var(--space-3)); font-family:var(--font-mono); font-size:.8125rem; color:var(--dim); margin-top:calc(var(--space-2) * -1); }
.fw-pcard .latest .i { width:18px; height:18px; }
.fw-pnote { margin-top:var(--space-3); font-size:.8125rem; color:var(--dim); text-align:center; }

/* Published: the ring draws itself, once. The peak of the flow is the end. */
.fw-done { text-align:center; align-items:center; }
.fw-done .ringdraw { width:112px; height:112px; color:var(--green); }
.fw-done .ringdraw path, .fw-done .ringdraw circle { fill:none; stroke:currentColor; stroke-linecap:round; }
@media (prefers-reduced-motion:no-preference) {
  .fw-done .ringdraw path, .fw-done .ringdraw circle { stroke-dasharray:1; stroke-dashoffset:1; animation:fwDraw 900ms var(--e) forwards; }
  .fw-done .ringdraw path:nth-child(2) { animation-delay:160ms; }
  .fw-done .ringdraw circle { animation-delay:320ms; }
  @keyframes fwDraw { to { stroke-dashoffset:0; } }
}
.fw-done h1 { margin-top:var(--space-6); }
.fw-done .lead { margin-inline:auto; }
.fw-link { margin-top:var(--space-6); display:flex; align-items:center; gap:var(--space-2); width:100%; max-width:520px; padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4); border:1px solid rgba(31,157,77,.5); border-radius:var(--r-lg); background:rgba(31,157,77,.06); }
.fw-link code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-family:var(--font-mono); font-size:.875rem; color:var(--fg); }
.fw-done .fl-actions { width:100%; max-width:520px; }
.fw-fine { margin-top:var(--space-5); font-size:.8125rem; color:var(--dim); }

/* ===========================================================================
   THE PAY COVER
   Between a Pay button and Yoco (public/facility/cover.js): the ring draws
   and fades as on the arrival cover above, then the lock draws at the ring's
   stroke weight and fades as one piece; the pair loops until Yoco's page
   replaces this one.
   =========================================================================== */
.fk-pay { position:fixed; inset:0; z-index:300; display:grid; place-items:center; background:var(--black); color:var(--green); }
html.fk-paying { overflow:hidden; }
.fk-pay svg { width:96px; height:96px; overflow:visible; }
.fk-pay .mk path, .fk-pay .mk circle, .fk-pay .mk rect { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.fk-pay-note { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:no-preference) {
  .fk-pay .mk.draw path, .fk-pay .mk.draw circle, .fk-pay .mk.draw rect { stroke-dasharray:1; stroke-dashoffset:1; animation:fkPayDraw 1500ms var(--e) forwards; }
  .fk-pay .mk.draw > :nth-child(2) { animation-delay:130ms; }
  .fk-pay .mk.draw > :nth-child(3) { animation-delay:260ms; }
  @keyframes fkPayDraw { 0% { stroke-dashoffset:1; opacity:1; } 55%, 80% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
  /* the lock's strokes only draw and hold; the whole icon fades once they are in */
  .fk-pay .mk.draw.lock path, .fk-pay .mk.draw.lock rect { animation-name:fkPayDrawIn; }
  .fk-pay .mk.draw.lock { animation:fkPayFade 300ms var(--e) 1330ms forwards; }
  @keyframes fkPayDrawIn { 0% { stroke-dashoffset:1; } 55%, 100% { stroke-dashoffset:0; } }
  @keyframes fkPayFade { to { opacity:0; } }
}

/* ===========================================================================
   THE ACCOUNT (connect.reidar.co.za/home)
   The same ground, panels, fields and buttons as the listing and the flow:
   a lister moves from /list to /home without the page changing voice.
   =========================================================================== */
body.acct { min-height:100dvh; display:flex; flex-direction:column; }
body.acct main { flex:1; width:100%; padding-bottom:var(--space-12); }
.fk-top .ac-who { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.fk-top .ac-who span { font-size:.875rem; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:28ch; }
@media (max-width:640px) { .fk-top .ac-who span { display:none; } }
.ac-link { background:none; border:0; padding:0; min-height:44px; color:var(--fg); font:inherit; font-weight:700; font-size:.9375rem; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.ac-link:hover { color:var(--green-deep); }

/* Signed out: one card, in the middle. */
.ac-gate { max-width:460px; margin:var(--space-8) auto 0; }
.ac-gate h1 { font-weight:800; font-size:clamp(1.75rem,5vw,2.4rem); line-height:1.06; letter-spacing:-.028em; }
.ac-gate h1 em { font-style:normal; color:var(--green); }
.ac-gate .lead { margin-top:var(--space-3); }
.ac-gate form { margin-top:var(--space-2); }
.ac-gate .fl-actions { margin-top:var(--space-6); }
.ac-gate .ac-alt { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--hair); display:grid; gap:var(--space-2); font-size:.9375rem; color:var(--dim); }
.ac-gate .ringdraw { display:block; width:88px; height:88px; margin-bottom:var(--space-6); color:var(--green); }
.ac-gate .ringdraw path, .ac-gate .ringdraw circle { fill:none; stroke:currentColor; stroke-linecap:round; }
@media (prefers-reduced-motion:no-preference) {
  .ac-gate .ringdraw path, .ac-gate .ringdraw circle { stroke-dasharray:1; stroke-dashoffset:1; animation:fwDraw 900ms var(--e) forwards; }
  .ac-gate .ringdraw path:nth-child(2) { animation-delay:160ms; }
  .ac-gate .ringdraw circle { animation-delay:320ms; }
}
.ac-err { margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--r-lg); border:1px solid rgba(217,44,53,.45); background:rgba(217,44,53,.06); color:var(--strong); font-size:.9375rem; line-height:1.45; }
.ac-err[hidden] { display:none; }
.ac-ok { margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--r-lg); border:1px solid rgba(31,157,77,.45); background:rgba(31,157,77,.06); color:var(--strong); font-size:.9375rem; line-height:1.45; }

/* Signed in. */
.ac-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-4) var(--space-6); }
.ac-head h1 { font-weight:800; font-size:clamp(2rem,5.2vw,3rem); line-height:1.04; letter-spacing:-.03em; }
.ac-head p { margin-top:var(--space-2); color:var(--dim); font-size:1rem; }
.ac-tabs { display:flex; gap:var(--space-2); overflow-x:auto; padding-bottom:var(--space-1); margin-bottom:var(--space-6); border-bottom:1px solid var(--hair); scrollbar-width:none; }
.ac-tabs::-webkit-scrollbar { display:none; }
.ac-tabs button { flex:none; min-height:44px; padding:0 var(--space-4); background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--dim); font:inherit; font-weight:700; font-size:.9375rem; cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-2); }
.ac-tabs button .i { width:17px; height:17px; }
.ac-tabs button[aria-selected="true"] { color:var(--fg); border-bottom-color:var(--green); }
.ac-tabs button[aria-selected="true"] .i { stroke:var(--green); }
.ac-tabs .n { min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-sm); background:var(--red); color:var(--black); font-size:.75rem; display:inline-grid; place-items:center; }
/* On a phone all four tabs share the row: no icons, tighter sides. */
@media (max-width:480px) {
  .ac-tabs { gap:0; }
  .ac-tabs button { flex:1 1 auto; justify-content:center; padding:0 var(--space-2); }
  .ac-tabs button .i { display:none; }
}

/* Things to do, most urgent first. A line each, with the one button that does it. */
.ac-todo { list-style:none; display:grid; gap:var(--space-2); margin-bottom:var(--space-6); }
.ac-todo li { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--r-lg); border:1px solid rgba(31,157,77,.45); background:rgba(31,157,77,.05); }
.ac-todo li.amber { border-color:rgba(199,123,0,.45); background:rgba(240,160,20,.07); }
.ac-todo li.red { border-color:rgba(217,44,53,.45); background:rgba(217,44,53,.05); }
.ac-todo li > .i { width:20px; height:20px; stroke:var(--green); }
.ac-todo li.amber > .i { stroke:var(--amber); }
.ac-todo li.red > .i { stroke:var(--red); }
.ac-todo li span { flex:1 1 240px; color:var(--strong); font-size:.9375rem; line-height:1.45; }
.ac-todo li b { color:var(--fg); }
.ac-todo .btn { flex:none; }

.ac-section h2 { font-weight:800; font-size:clamp(1.375rem,3.2vw,1.625rem); letter-spacing:-.02em; line-height:1.15; }
.ac-section > p.lead { margin-top:var(--space-2); font-size:1rem; }
.ac-section + .ac-section { margin-top:var(--space-10); }
.ac-empty { padding:var(--space-8) var(--space-6); border-radius:var(--r-lg); border:1px dashed var(--line-3); text-align:center; display:grid; gap:var(--space-4); justify-items:center; }
.ac-empty p { color:var(--dim); max-width:46ch; }

/* A site: its mark, its name and state, what it has earned, and its controls. */
.ac-sites { display:grid; gap:var(--space-4); margin-top:var(--space-5); }
.ac-site { display:grid; gap:var(--space-5); padding:var(--space-6); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
.ac-site-top { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-4); align-items:center; }
.ac-site-mark { width:56px; height:56px; border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--black); display:grid; place-items:center; overflow:hidden; }
.ac-site-mark img { width:100%; height:100%; object-fit:contain; padding:3px; }
.ac-site-mark .i { width:26px; height:26px; stroke:var(--dim); stroke-width:1.6; }
.ac-site h3 { font-weight:800; font-size:1.375rem; letter-spacing:-.02em; line-height:1.15; color:var(--fg); overflow-wrap:anywhere; }
.ac-site .where { margin-top:2px; color:var(--dim); font-size:.9375rem; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); }
.ac-site .why { color:var(--strong); font-size:.9375rem; line-height:1.5; }
.ac-figs { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-2); }
.ac-fig { padding:var(--space-3) var(--space-4); border-radius:var(--r-lg); background:var(--black); border:1px solid var(--hair); }
.ac-fig small { display:block; font-size:.8125rem; color:var(--dim); }
.ac-fig b { display:block; margin-top:2px; font-family:var(--font-head); font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:var(--fg); }
.ac-fig b.sm { font-family:var(--font-body); font-weight:600; font-size:.9375rem; letter-spacing:0; line-height:1.35; }
.ac-owing { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ac-owing li { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-sm); border:1px solid rgba(199,123,0,.45); background:rgba(240,160,20,.08); color:var(--strong); font-size:.8125rem; }
.ac-owing li .i { width:14px; height:14px; stroke:var(--amber); }
.ac-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ac-actions .btn { min-height:44px; }
.ac-actions .btn .i { width:16px; height:16px; }
.ac-actions .push { margin-left:auto; }
.btn.ac-danger { background:transparent; color:var(--red); border-color:rgba(217,44,53,.45); }
.btn.ac-danger:hover { background:rgba(217,44,53,.07); border-color:var(--red); }
@media (max-width:560px) { .ac-actions .btn { flex:1 1 calc(50% - var(--space-2)); } .ac-actions .push { margin-left:0; } }

/* Monthly or yearly: a two-way switch, the cheaper one said plainly. */
.ac-plan { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.ac-plan button { min-height:56px; padding:var(--space-2) var(--space-4); text-align:left; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--black); color:var(--strong); font:inherit; cursor:pointer; display:grid; gap:2px; transition:border-color 120ms var(--e), background 120ms var(--e); }
.ac-plan button b { font-weight:700; color:var(--fg); }
.ac-plan button small { font-size:.8125rem; color:var(--dim); }
.ac-plan button[aria-pressed="true"] { border-color:var(--green); background:rgba(31,157,77,.07); outline:1px solid var(--green); }
.ac-plan button:disabled { opacity:.55; cursor:default; }

/* Invoices, a month at a time. */
.ac-month { margin-top:var(--space-6); }
.ac-month h3 { font-weight:600; font-size:1.0625rem; color:var(--fg); padding-bottom:var(--space-2); border-bottom:1px solid var(--hair); }
.ac-inv { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2) var(--space-4); align-items:center; padding-block:var(--space-4); border-bottom:1px solid var(--hair); }
.ac-inv .what b { display:block; font-weight:600; color:var(--fg); overflow-wrap:anywhere; }
.ac-inv .what small { display:block; margin-top:2px; color:var(--dim); font-size:.875rem; }
.ac-inv .amt { text-align:right; }
.ac-inv .amt b { display:block; font-family:var(--font-head); font-weight:800; font-size:1.125rem; color:var(--fg); }
.ac-inv .amt .tag { margin-top:4px; }
.ac-inv .ac-actions { grid-column:1 / -1; }
@media (min-width:760px) { .ac-inv { grid-template-columns:minmax(0,1fr) auto auto; } .ac-inv .ac-actions { grid-column:auto; justify-content:flex-end; } }
.ac-fine { margin-top:var(--space-4); font-size:.875rem; color:var(--dim); line-height:1.5; }

/* Company and account forms. */
.ac-form { max-width:720px; margin-top:var(--space-2); }
.ac-form .fw-field { margin-top:var(--space-5); }
.ac-form .fl-actions { max-width:280px; }
.ac-form fieldset { border:0; padding:0; margin:0; min-width:0; }
.ac-form fieldset:disabled .fw-input, .ac-form fieldset:disabled .fw-select { opacity:.7; }
.ac-kv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-2) var(--space-5); margin-top:var(--space-5); font-size:.9375rem; }
.ac-kv dt { color:var(--dim); }
.ac-kv dd { color:var(--fg); overflow-wrap:anywhere; display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }

/* The confirm sheet for show, delete and payment choices. */
.fk-dialog.ac-dlg { max-width:520px; }
.ac-dlg .body { padding:0 var(--space-6) var(--space-6); display:grid; gap:var(--space-4); }
.ac-dlg .body p { color:var(--strong); line-height:1.55; }
.ac-dlg .fl-actions { margin-top:var(--space-2); }
/* The welcome after the email link: a banner on the page's own left edge,
   not a centred card (it sits above the left-aligned account). */
.ac-gate.ac-hello { max-width:none; margin:var(--space-6) 0 var(--space-8); display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:var(--space-5); align-items:center; }
.ac-gate.ac-hello .ringdraw { grid-row:1 / span 2; width:64px; height:64px; margin:0; }
.ac-gate.ac-hello h1 { align-self:end; }
.ac-gate.ac-hello .lead { margin-top:var(--space-1); align-self:start; max-width:60ch; }
@media (max-width:560px) { .ac-gate.ac-hello .ringdraw { width:48px; height:48px; } }
.ac-subhead { padding-top:0; }
.why.ac-label { margin-bottom:var(--space-2); }
.ac-gap { margin-top:var(--space-6); }
.btn[aria-busy="true"] { opacity:.7; cursor:progress; }

/* The flow's account steps. */
.fw-trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fw-terms { margin-top:var(--space-6); display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
.fw-terms .i { width:20px; height:20px; margin-top:2px; stroke:var(--green); }
.fw-terms p { color:var(--strong); font-size:.9375rem; line-height:1.5; }
.fw-step .fw-fine a { color:var(--fg); }
.fw-sub { margin-top:var(--space-8); font-family:var(--font-head); font-weight:600; font-size:1.0625rem; color:var(--fg); }
.fw-shot.busy { pointer-events:none; border-style:solid; border-color:var(--green); }
@media (prefers-reduced-motion:no-preference) { .fw-shot.busy { animation:fwUploading 900ms var(--e) infinite alternate; } }
@keyframes fwUploading { from { opacity:1; } to { opacity:.45; } }
.fw-skip[hidden] { display:none; }

/* A site's note: what happens next, and the one thing to press. Tinted
   whole, like the to-do rows; the tone is also said in words and an icon. */
.ac-note { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); padding:var(--space-4); border-radius:var(--r-lg); border:1px solid rgba(31,157,77,.45); background:rgba(31,157,77,.05); }
.ac-note.amber { border-color:rgba(199,123,0,.45); background:rgba(240,160,20,.08); }
.ac-note.red { border-color:rgba(217,44,53,.45); background:rgba(217,44,53,.05); }
.ac-note > .i { width:20px; height:20px; stroke:var(--green); }
.ac-note.amber > .i { stroke:var(--amber); }
.ac-note.red > .i { stroke:var(--red); }
.ac-note p { flex:1 1 260px; color:var(--strong); font-size:.9375rem; line-height:1.5; }
.ac-note p b { color:var(--fg); }
.ac-note .btn { flex:none; min-height:44px; }
.ac-note .btn .i { width:16px; height:16px; stroke:currentColor; }
@media (max-width:560px) { .ac-note .btn { flex:1 1 100%; } }

/* Publish and pay: the plan, then the checkout. */
.ac-pay { max-width:640px; margin:var(--space-6) auto 0; }
.ac-pay h1 { font-weight:800; font-size:clamp(1.75rem,5vw,2.4rem); line-height:1.08; letter-spacing:-.028em; margin-top:var(--space-5); overflow-wrap:anywhere; }
.ac-pay h1 em { font-style:normal; color:var(--green); }
.ac-pay .lead { margin-top:var(--space-3); }
.ac-backlink { display:inline-flex; align-items:center; gap:var(--space-2); text-decoration:none; }
.ac-backlink .i { width:18px; height:18px; }
.ac-steps { list-style:none; display:flex; gap:var(--space-5); margin-top:var(--space-4); color:var(--dim); font-size:.875rem; font-weight:700; }
.ac-steps li { display:inline-flex; align-items:center; gap:var(--space-2); }
.ac-steps span { width:24px; height:24px; border-radius:var(--r-sm); border:1px solid var(--line-2); display:inline-grid; place-items:center; font-size:.8125rem; }
.ac-steps [aria-current="step"] { color:var(--fg); }
.ac-steps [aria-current="step"] span { border-color:var(--green); background:var(--green); color:var(--black); }
.ac-plans { display:grid; gap:var(--space-3); margin-top:var(--space-6); }
@media (min-width:600px) { .ac-plans { grid-template-columns:1fr 1fr; } }
.ac-plancard { position:relative; display:grid; gap:var(--space-2); align-content:start; text-align:left; padding:var(--space-5); min-height:200px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--black); color:var(--strong); font:inherit; cursor:pointer; transition:border-color 120ms var(--e), background 120ms var(--e); }
.ac-plancard:hover { border-color:var(--line-4); }
.ac-plancard:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.ac-plancard[aria-checked="true"] { border-color:var(--green); outline:1px solid var(--green); background:rgba(31,157,77,.05); }
.ac-plancard .top { display:flex; align-items:center; gap:var(--space-2); }
.ac-plancard .top b { font-weight:800; font-size:1.125rem; color:var(--fg); }
.ac-plancard .tick { margin-left:auto; width:24px; height:24px; border-radius:var(--r-sm); border:1px solid var(--line-3); display:grid; place-items:center; }
.ac-plancard .tick .i { width:16px; height:16px; stroke:var(--black); opacity:0; }
.ac-plancard[aria-checked="true"] .tick { background:var(--green); border-color:var(--green); }
.ac-plancard[aria-checked="true"] .tick .i { opacity:1; }
.ac-plancard .price { font-family:var(--font-head); font-weight:800; font-size:2rem; letter-spacing:-.02em; color:var(--fg); line-height:1.1; }
.ac-plancard .price small { font-family:var(--font-body); font-weight:600; font-size:.9375rem; letter-spacing:0; color:var(--dim); margin-left:var(--space-1); }
.ac-plancard .blurb { font-size:.9375rem; line-height:1.45; }
.ac-plancard .dates { display:inline-flex; align-items:center; gap:var(--space-2); font-size:.8125rem; color:var(--dim); }
.ac-plancard .dates .i { width:14px; height:14px; }
.ac-summary { margin-top:var(--space-6); display:grid; gap:var(--space-5); padding:var(--space-6); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
.ac-summary h3 { font-weight:800; font-size:1.25rem; letter-spacing:-.02em; color:var(--fg); overflow-wrap:anywhere; }
.ac-summary .where { margin-top:2px; color:var(--dim); font-size:.9375rem; }
.ac-summary .ac-kv { margin-top:0; }
.ac-kv dd.stack { display:block; }
.ac-kv dd small { color:var(--dim); font-size:.8125rem; }
.ac-kv dd .ac-link { min-height:0; font-size:.875rem; }
.ac-total { display:grid; gap:var(--space-2); padding-top:var(--space-4); border-top:1px solid var(--hair); }
.ac-total div { display:flex; justify-content:space-between; gap:var(--space-4); color:var(--strong); font-size:.9375rem; }
.ac-total .grand { padding-top:var(--space-2); color:var(--fg); font-weight:700; }
.ac-total .grand b { font-family:var(--font-head); font-weight:800; font-size:1.5rem; }
.ac-total .off { color:var(--green-deep); }
.ac-total div b { flex:none; white-space:nowrap; }
/* the promo code, under the checkout summary */
.ac-promo-ask { margin:var(--space-2) 0 0; }
.ac-promo .fw-field { margin-top:var(--space-4); }
.ac-promo-row { display:flex; gap:var(--space-2); }
.ac-promo-row .fw-input { flex:1 1 auto; min-width:0; }
.ac-promo-on { display:flex; align-items:center; gap:var(--space-2); margin:var(--space-4) 0 0; color:var(--strong); }
.ac-promo-on svg { color:var(--green-deep); flex:none; }
.ac-promo-on span { flex:1 1 0; min-width:0; }
.ac-promo-on .ac-link { flex:none; }
.ac-pay .fl-actions { max-width:360px; }
/* Plan and checkout keep their button in one place, above the phone's thumb. */
@media (max-width:760px) {
  .ac-pay .fl-actions { position:sticky; bottom:0; max-width:none; margin-inline:calc(-1 * var(--space-4)); padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background:var(--black); border-top:1px solid var(--hair); }
}

/* ── Today at the site (public page) ───────────────────────────────────────
   Colour, icon and words together: green operational, amber delays, red
   not operating. */
.fl-today { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--hair); }
.fl-today h2 { font-family:var(--font-body); font-weight:700; font-size:.9375rem; color:var(--fg); }
.fl-today ul { list-style:none; display:grid; gap:var(--space-3); margin-top:var(--space-3); }
.fl-today li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:start; }
.fl-today li > .i { width:20px; height:20px; margin-top:1px; stroke:var(--green); }
.fl-today li.delays > .i { stroke:var(--amber); }
.fl-today li.down > .i { stroke:var(--red); }
/* outside the day's hours, or past the last truck: neither good nor a fault */
.fl-today li.closed > .i { stroke:var(--dim); }
.fl-today b { display:block; font-weight:700; color:var(--fg); font-size:.9375rem; }
.fl-today span { display:block; color:var(--strong); font-size:.9375rem; }
.fl-today small { display:block; color:var(--dim); font-size:.8125rem; }
.fl-updated { margin-top:var(--space-3); color:var(--dim); font-size:.8125rem; }
/* One copy leads the page on a phone, the other sits in the side panel on a wide screen. */
.fl-today.fl-today-top { margin-top:0; padding:var(--space-5); border-top:0; }
@media (min-width:980px) { .fl-today.fl-today-top { display:none; } }
@media (max-width:979px) { .fl-today.fl-today-side { display:none; } }
.fl-special { list-style:none; display:grid; gap:var(--space-2); margin-top:var(--space-4); }
.fl-special li { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--r-lg); border:1px solid rgba(199,123,0,.45); background:rgba(240,160,20,.08); font-size:.9375rem; color:var(--strong); }
.fl-special li .i { width:18px; height:18px; stroke:var(--amber); }
.fl-special li span { flex:1; }
.fl-special li b { color:var(--fg); }
.fl-special li em { font-style:normal; font-weight:700; color:var(--fg); }

/* ── Today at the site (/home) ────────────────────────────────────────────── */
.ac-ops .ac-section { margin-top:var(--space-8); }
.ac-h2-gap { margin-top:var(--space-8); }
.ac-areas { display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.ac-area { display:grid; gap:var(--space-4); padding:var(--space-5); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
.ac-area.delays { border-color:rgba(199,123,0,.45); }
.ac-area.down { border-color:rgba(217,44,53,.45); }
.ac-shut { display:flex; gap:var(--space-2); align-items:flex-start; margin:0; padding:var(--space-3); border-radius:var(--r-sm); background:var(--surface-3); color:var(--strong); font-size:.875rem; }
.ac-shut .i { width:18px; height:18px; flex:none; margin-top:1px; stroke:var(--dim); }
.ac-area-head { display:flex; align-items:center; gap:var(--space-3); }
.ac-area-head .i { width:22px; height:22px; stroke:var(--fg); }
.ac-area-head h3 { font-weight:800; font-size:1.125rem; letter-spacing:-.01em; color:var(--fg); }
.ac-seg { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; }
.ac-seg.two { grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:var(--space-5); }
.ac-seg button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:0 var(--space-3); background:var(--black); border:0; border-right:1px solid var(--line-2); color:var(--strong); font:inherit; font-weight:700; font-size:.9375rem; cursor:pointer; }
.ac-seg button:last-child { border-right:0; }
.ac-seg button .i { width:18px; height:18px; stroke:var(--dim); }
.ac-seg button:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.ac-seg button[aria-checked="true"] { color:var(--fg); background:rgba(31,157,77,.09); }
.ac-seg button[aria-checked="true"] .i { stroke:var(--green); }
.ac-seg button.delays[aria-checked="true"] { background:rgba(240,160,20,.12); }
.ac-seg button.delays[aria-checked="true"] .i { stroke:var(--amber); }
.ac-seg button.down[aria-checked="true"] { background:rgba(217,44,53,.08); }
.ac-seg button.down[aria-checked="true"] .i { stroke:var(--red); }
@media (max-width:460px) { .ac-seg:not(.two) { grid-template-columns:minmax(0,1fr); } .ac-seg:not(.two) button { border-right:0; border-bottom:1px solid var(--line-2); } .ac-seg:not(.two) button:last-child { border-bottom:0; } }
.ac-reasons .fw-chips { margin-top:0; }
.ac-custom { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.ac-custom .fw-input { flex:1 1 240px; }
.ac-custom .btn { min-height:52px; }
.ac-confirm { max-width:360px; }

.ac-cal { margin-top:var(--space-5); padding:var(--space-5); border-radius:var(--r-lg); border:1px solid var(--edge); background:var(--panel); }
.ac-cal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.ac-cal-head h3 { font-weight:800; font-size:1.125rem; color:var(--fg); }
.ac-cal-nav { width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--black); color:var(--fg); cursor:pointer; }
.ac-cal-nav .i { width:18px; height:18px; }
.ac-cal-nav:disabled { opacity:.4; cursor:default; }
.ac-cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:var(--space-1); margin-top:var(--space-4); }
.ac-cal-wd { text-align:center; font-size:.8125rem; font-weight:700; color:var(--dim); padding-bottom:var(--space-1); }
.ac-cal-day { position:relative; min-height:56px; display:grid; align-content:start; justify-items:center; gap:2px; padding:var(--space-2) 2px; border-radius:var(--r-sm); border:1px solid var(--hair); background:var(--black); color:var(--fg); font:inherit; cursor:pointer; }
.ac-cal-day b { font-weight:700; font-size:.9375rem; }
.ac-cal-day small { font-size:.8125rem; line-height:1.2; color:var(--dim); text-align:center; }
.ac-cal-day:hover:not(:disabled) { border-color:var(--line-4); }
.ac-cal-day:focus-visible { outline:2px solid var(--green); outline-offset:1px; }
.ac-cal-day:disabled { opacity:.38; cursor:default; }
.ac-cal-day.today { border-color:var(--fg); }
.ac-cal-day.hol { background:rgba(26,143,164,.08); border-color:rgba(26,143,164,.4); }
.ac-cal-day.hol::after { content:""; position:absolute; left:25%; right:25%; bottom:5px; height:3px; border-radius:var(--r-sm); background:var(--cyan); }
.ac-cal-day.special { background:rgba(240,160,20,.12); border-color:rgba(199,123,0,.5); }
.ac-cal-day.special small { color:var(--fg); font-weight:700; }
.ac-cal-day.on { outline:2px solid var(--green); outline-offset:1px; }
.ac-cal-hols { list-style:none; display:grid; gap:var(--space-2); margin-top:var(--space-4); font-size:.875rem; color:var(--strong); }
.ac-cal-hols li { display:flex; align-items:center; gap:var(--space-2); }
.ac-cal-hols .i { width:16px; height:16px; stroke:var(--cyan); }
.ac-dayedit { margin-top:var(--space-5); padding:var(--space-5); border-radius:var(--r-lg); border:1px solid var(--green); background:var(--black); }
.ac-dayedit > .fw-field:first-child { margin-top:0; }
.ac-dayedit .ac-actions { margin-top:var(--space-5); }
.ac-days { margin-top:var(--space-3); }
.ac-days button span { display:grid; gap:2px; }
.ac-days button small { color:var(--dim); font-size:.875rem; }
.ac-days button:disabled { cursor:default; color:var(--dim); }