/* /Components/BarcodeScan.razor.rz.scp.css */
/* ============================================================
   THE BARCODE SHEET.

   Full viewport, because a driver is holding the phone up at a
   sticker and nothing else on the screen matters for those few
   seconds. Every colour is a token from wwwroot/css/app.css -
   --ink, --paper, --accent, --danger, --line-hard, --corner,
   --tap, --font-display, --font-mono.
   ============================================================ */

.tb-bc[b-m004pdu1uf] {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--paper);
}

.tb-bc__bar[b-m004pdu1uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    flex: 0 0 auto;
}

.tb-bc__title[b-m004pdu1uf] {
    flex: 1;
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.02em;
}

.tb-bc__x[b-m004pdu1uf] {
    min-width: var(--tap);
    min-height: var(--tap);
    border: 0;
    background: none;
    color: var(--paper);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ── THE CAMERA ───────────────────────────────────────────── */

.tb-bc__stage[b-m004pdu1uf] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.tb-bc__video[b-m004pdu1uf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

/* ⚠️ AN AIMING AID, NOT A CROP. The fast pass reads the whole frame -
   this box does not limit the scan and must not imply that it does.

   2026-11-09: the box IS the centre band js/rk-barcode.js reads hardest -
   the full width and the middle third of the frame (BAND_FRACTION), at
   full resolution with TRY_HARDER - so it is drawn that size: nearly edge
   to edge, a third of the height. A long bank code laid across it gets
   every row read. object-fit: cover crops the frame a little, so the third
   is approximate, and errs wide. */

.tb-bc__reticle[b-m004pdu1uf] {
    position: absolute;
    left: 3%;
    right: 3%;
    top: 50%;
    height: 33%;
    transform: translateY(-50%);
    border: 3px solid var(--accent);
    border-radius: var(--corner);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* A first read is in and waiting for its confirming second ("Hold still"). */
.tb-bc__reticle--held[b-m004pdu1uf] {
    border-color: var(--paper);
}

.tb-bc__hint[b-m004pdu1uf] {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px 4px;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
}

.tb-bc__err[b-m004pdu1uf] {
    color: var(--accent);
    font-family: var(--font-display);
}

.tb-bc__type[b-m004pdu1uf] {
    flex: 0 0 auto;
    margin: 8px 16px calc(16px + env(safe-area-inset-bottom));
    min-height: var(--tap);
    border: 2px solid var(--paper);
    border-radius: var(--corner);
    background: transparent;
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

/* ── TYPING, WHICH IS A PEER AND NOT A PENALTY ────────────── */

.tb-bc__manual[b-m004pdu1uf] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.tb-bc__label[b-m004pdu1uf] {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.04em;
}

/* MONO, AND UPPERCASE ON INPUT. A bag number is read back character by
   character against a sticker, and 0/O and 1/l are the whole problem. */
.tb-bc__input[b-m004pdu1uf] {
    font-family: var(--font-mono);
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: var(--tap);
}

.tb-bc__use[b-m004pdu1uf] {
    min-height: 60px;
    border: 0;
    border-radius: var(--corner);
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.tb-bc__use:disabled[b-m004pdu1uf] {
    opacity: 0.45;
    cursor: default;
}

/* ── THE LIGHT (2026-10-07) ───────────────────────────────── */

/* Over the video, bottom right, out of the reticle's way. Offered only
   when the open camera reports a torch. */
.tb-bc__torch[b-m004pdu1uf] {
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 16px;
    border: 2px solid var(--paper);
    border-radius: var(--corner);
    background: rgba(0, 0, 0, 0.45);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.tb-bc__torch--on[b-m004pdu1uf] {
    background: var(--paper);
    color: var(--ink);
}

/* After a few seconds with nothing read, typing becomes the obvious next
   move rather than the quiet one. */
.tb-bc__type--strong[b-m004pdu1uf] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--ink);
}
/* /Components/InstallNudge.razor.rz.scp.css */
/* THE INSTALL NUDGE - a card, not a banner across the bar: the geo card's shape (tb-geocard in
   wwwroot/css/app.css), in STEEL rather than accent orange, because it is advice and not a fault.
   Tokens from wwwroot/css/app.css only. */

.rk-inst[b-yvnku8h7zv] {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--card);
    border: 2px solid var(--steel);
    border-left-width: 6px;
}

.rk-inst__head[b-yvnku8h7zv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rk-inst__mark[b-yvnku8h7zv] {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: var(--steel);
}

.rk-inst__title[b-yvnku8h7zv] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.rk-inst__body[b-yvnku8h7zv],
.rk-inst__how[b-yvnku8h7zv] {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.rk-inst__how b[b-yvnku8h7zv] {
    color: var(--ink);
}

.rk-inst__foot[b-yvnku8h7zv] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
/* /Components/OutboxChip.razor.rz.scp.css */
/* THE OUTBOX CHIP - the bar's own chip shape (tb-bar__geo), coloured by what it is saying.
   Waiting is calm (a promise the phone is keeping), no-signal is steel (a fact, not an alarm),
   a refusal is red (something a person must look at). Tokens from wwwroot/css/app.css only. */

.rk-ob[b-st9gpuazns] {
    margin-left: 8px;
    padding: 3px 6px;
    border: 2px solid var(--paper);
    background: transparent;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--paper);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rk-ob:active[b-st9gpuazns] {
    transform: translateY(1px);
}

.rk-ob--waiting[b-st9gpuazns] {
    border-color: var(--accent);
    color: var(--paper);
}

.rk-ob--sending[b-st9gpuazns] {
    border-color: var(--ok);
    color: var(--paper);
}

.rk-ob--off[b-st9gpuazns] {
    border-color: var(--steel);
    background: var(--steel);
    color: var(--paper);
}

.rk-ob--check[b-st9gpuazns] {
    border-color: var(--danger);
    background: var(--danger);
    color: var(--paper);
}

.rk-ob__dot[b-st9gpuazns] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--paper);
    opacity: 0.85;
}
/* /Components/PhotoCapture.razor.rz.scp.css */
/* ==========================================================================================
   PHOTO CAPTURE - only the parts the sheet genuinely adds.

   The frame, the doors, the thumbnail, the inputs and the footer are all wwwroot/css/app.css's
   own .tb-up__* set, reused verbatim so this sheet looks like the six that came before it. What
   is new here is only what the old path had no need of:

     .rk-cap__bar     a REAL progress bar. The old sheet shrank the photo to 250 KB and could
                      get away with a spinner. Raw bytes are 3-5 MB and a bar that moves is
                      what makes that cost bearable rather than mysterious.
     .rk-cap__proof   the receipt - what the SERVER measured. Nothing has ever shown this.
     .rk-cap__queue   what is still waiting, because a queue nobody is shown is not a queue.

   Every colour, size, radius and font below comes from app.css's :root tokens - --ink,
   --ink-soft, --paper, --card, --line, --line-hard, --accent, --accent-deep, --accent-soft,
   --ok, --ok-soft, --font-display, --font-mono, --corner, --tap. There is no raw hex in this
   file and no second palette.

   ⚠️ THIS FILE IS SCOPED CSS AND NEEDS ONE LINE IN wwwroot/index.html THAT IS NOT THERE YET:
        <link href="Riproka.Mobile.styles.css" rel="stylesheet" />
   Riproka.Web's index.html carries it at line 45; this app has never had a .razor.css before,
   so it does not. Without it these rules do not load and the sheet still WORKS - every
   interactive element is a .tb-* class from app.css - but the bar, the receipt and the queue
   render unstyled. That line is reported as owed rather than edited here, because index.html
   is not this lane's file.
   ========================================================================================== */

/* -----------------------------------------------------------------------------------------
   THE PROGRESS BAR
   ----------------------------------------------------------------------------------------- */

.rk-cap__bar[b-any0vfdiir] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;

    /* Inside the sheet's 12px gutter, like the buttons under it (lane OF - it ran to the sheet's edge). */
    margin: 12px 12px 4px;
    border: 1px solid var(--line-hard);
    border-radius: 6px;
    background: var(--paper);
    overflow: hidden;
}

.rk-cap__fill[b-any0vfdiir] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent-soft);
    border-right: 2px solid var(--accent);

    /* Slow enough to read, fast enough not to lag the number beside it. */
    transition: width 0.2s linear;
}

.rk-cap__barlabel[b-any0vfdiir] {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;

    /* Ink on warm paper and on the soft accent fill alike - the label sits ABOVE the fill, so
       it must stay legible against both. Never the reverse pairing. */
    color: var(--ink);
}

/* -----------------------------------------------------------------------------------------
   THE RAW-BYTES LINE

   Where the old sheet said "RESIZED FROM 4.2 MB", this says why it did not. Same slot, same
   weight, opposite meaning - so it reads as an explanation rather than an apology.
   ----------------------------------------------------------------------------------------- */

.rk-cap__raw[b-any0vfdiir] {
    display: block;
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--accent-deep);
}

/* -----------------------------------------------------------------------------------------
   THE RECEIPT
   ----------------------------------------------------------------------------------------- */

.rk-cap__proof[b-any0vfdiir] {
    /* In the sheet's 12px gutter (lane OF - the receipt ran to the sheet's edge). */
    margin: 10px 12px 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ok);
    border-radius: var(--corner);
    background: var(--ok-soft);
}

.rk-cap__proofhead[b-any0vfdiir] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.rk-cap__tick[b-any0vfdiir] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ok);

    /* The one place a light glyph sits on a solid fill. --card is the warm off-white, not a
       token that flips - this app has a single theme - so the pair is stable. */
    color: var(--card);
    font-size: 0.8rem;
}

/* HELD ON THE PHONE (lane OF, 2026-11-02): not the green receipt - steel, because nothing has been
   measured by the office yet. The photo is safe and waiting, which is neither a success nor a fault. */
.rk-cap__proof--held[b-any0vfdiir] {
    border-left-color: var(--steel);
    background: var(--paper);
}

.rk-cap__tick--held[b-any0vfdiir] {
    background: var(--steel);
}

/* A two-column ledger: the label a person scans down, the value they read across. */
.rk-cap__facts[b-any0vfdiir] {
    display: grid;
    grid-template-columns: minmax(84px, auto) 1fr;
    gap: 4px 12px;
    margin: 10px 0 0;
}

.rk-cap__facts dt[b-any0vfdiir] {
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    align-self: center;
}

.rk-cap__facts dd[b-any0vfdiir] {
    margin: 0;
    font-size: 0.86rem;
    color: var(--ink);
    align-self: center;
}

/* A hash and a coordinate are read character by character, never as prose. */
.rk-cap__hash[b-any0vfdiir] {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    word-break: break-all;
}

.rk-cap__note[b-any0vfdiir] {
    margin: 10px 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--ink-soft);
}

/* The rest of a pick, named on the receipt (lane OF - OV2-2): inside the sheet's own 12px gutter. */
.rk-cap__note--pick[b-any0vfdiir] {
    margin: 0 12px 12px;
    color: var(--ink);
}

.rk-cap__note--warn[b-any0vfdiir] {
    /* Inside the sheet's own 12px gutter, like .tb-up__err beside it (lane OF - it ran to the sheet's edge). */
    margin: 0 12px 12px;
    padding: 8px 10px;
    border: 1px solid var(--line-hard);
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--ink);
}

/* -----------------------------------------------------------------------------------------
   THE QUEUE
   ----------------------------------------------------------------------------------------- */

.rk-cap__queue[b-any0vfdiir] {
    margin-top: 14px;
}

.rk-cap__q[b-any0vfdiir] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;

    /* --tap is the app's thumb target. A row a driver taps with gloves on in a truck is the
       same size as every other row they tap. */
    min-height: var(--tap);
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.rk-cap__q:active[b-any0vfdiir] {
    background: var(--accent-soft);
    border-color: var(--line-hard);
}

.rk-cap__q:disabled[b-any0vfdiir] {
    opacity: 0.5;
}

.rk-cap__qname[b-any0vfdiir] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

.rk-cap__qsize[b-any0vfdiir] {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-soft);
}

/* TAKEN ELSEWHERE (lane OF, 2026-11-02 - OR-1): where and when is a sentence, not a size - it gets its
   own line under the name rather than squeezing the name to nothing at phone width. */
.rk-cap__q--away[b-any0vfdiir] {
    flex-wrap: wrap;
}

.rk-cap__q--away .rk-cap__qname[b-any0vfdiir] {
    flex: 1 1 60%;
}

.rk-cap__q--away .rk-cap__qsize[b-any0vfdiir] {
    flex: 1 1 100%;
    order: 3;
    white-space: normal;
}

.rk-cap__move[b-any0vfdiir] {
    margin-top: 10px;
}
/* /Components/PoReceiveSheet.razor.rz.scp.css */
/* ============================================================
   RECEIVE PARTS ONTO MY TRUCK - the sheet on a job's PO.

   Rides app.css's .tb-scrim / .tb-confirm shell (the same one the
   equipment sheet uses) and only adds its own insides. Colours,
   radii, fonts and tap size are tokens from wwwroot/css/app.css
   :root - --ink, --ink-soft, --paper, --card, --line, --line-hard,
   --accent, --accent-deep, --accent-soft, --steel, --ok, --ok-soft,
   --danger-ink, --font-display, --font-mono, --tap. No raw hex.
   Small text never wears raw --accent; --accent-deep is the ink.

   ⚠️ A FLEX COLUMN CAPPED BY THE VIEWPORT, like .tb-eqf: the lines
   scroll and RECEIVE stays pinned and reachable at the dock, however
   many lines the order has and whatever the URL bar does.
   ============================================================ */

.tb-rcv[b-gnjpar7rlq] {
    top: 8dvh;
    max-height: 84dvh;
    display: flex;
    flex-direction: column;
}

.tb-rcv__body[b-gnjpar7rlq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px 8px;
}

.tb-rcv .tb-confirm__actions[b-gnjpar7rlq] {
    flex: 0 0 auto;
    padding-top: 10px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 2px dashed var(--line);
}

.tb-rcv__intro[b-gnjpar7rlq] {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--ink);
}

/* ── Where it goes ─────────────────────────────────────────── */

.tb-rcv__truck[b-gnjpar7rlq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: var(--paper);
    border-left: 4px solid var(--steel);
}

.tb-rcv__truck--none[b-gnjpar7rlq] {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}

.tb-rcv__trucklbl[b-gnjpar7rlq] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.tb-rcv__truck--none .tb-rcv__trucklbl[b-gnjpar7rlq],
.tb-rcv__truck--none .tb-rcv__truckname[b-gnjpar7rlq] {
    color: var(--accent-deep);
}

/* A sentence, not a truck code - body type reads better than mono. */
.tb-rcv__truck--none .tb-rcv__truckname[b-gnjpar7rlq] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
}

.tb-rcv__truckname[b-gnjpar7rlq] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

/* ── Done ──────────────────────────────────────────────────── */

.tb-rcv__done[b-gnjpar7rlq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--ok-soft);
    border: 2px solid var(--ok);
}

.tb-rcv__donemark[b-gnjpar7rlq] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--ok);
}

.tb-rcv__donetext[b-gnjpar7rlq] {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
}

.tb-rcv__donetruck[b-gnjpar7rlq] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
}

.tb-rcv__msg[b-gnjpar7rlq] {
    margin: 10px 0 0;
}

/* ── The lines ─────────────────────────────────────────────── */

.tb-rcv__sect[b-gnjpar7rlq] {
    margin: 14px 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.tb-rcv__none[b-gnjpar7rlq],
.tb-rcv__hint[b-gnjpar7rlq] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-rcv__line[b-gnjpar7rlq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 2px dashed var(--line);
}

/* All in, or cancelled - still listed, because it is on the paper. */
.tb-rcv__line--quiet .tb-rcv__desc[b-gnjpar7rlq] {
    color: var(--ink-soft);
}

/* Another job's line: greyed, and never sendable from here. */
.tb-rcv__line--other[b-gnjpar7rlq] {
    opacity: 0.62;
}

.tb-rcv__what[b-gnjpar7rlq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-rcv__desc[b-gnjpar7rlq] {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    color: var(--ink);
}

.tb-rcv__ln[b-gnjpar7rlq] {
    display: inline-block;
    min-width: 20px;
    margin-right: 4px;
    padding: 0 4px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    text-align: center;
}

.tb-rcv__part[b-gnjpar7rlq] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
}

.tb-rcv__qty[b-gnjpar7rlq] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--steel);
}

.tb-rcv__other[b-gnjpar7rlq] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.tb-rcv__state[b-gnjpar7rlq] {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--steel);
}

.tb-rcv__qtybox[b-gnjpar7rlq] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tb-rcv__qtylbl[b-gnjpar7rlq] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

/* 16px or iOS Safari zooms the page on focus and never zooms back -
   the rule every input in this app lives under. */
.tb-rcv__in[b-gnjpar7rlq] {
    width: 64px;
    min-height: 44px;
    padding: 6px 8px;
    border: 2px solid var(--line-hard);
    background: var(--card);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    color: var(--ink);
}

.tb-rcv__in:focus[b-gnjpar7rlq] {
    outline: none;
    border-color: var(--accent);
}

.tb-rcv__in--wide[b-gnjpar7rlq] {
    width: 100%;
    text-align: left;
}

.tb-rcv__why[b-gnjpar7rlq] {
    padding: 6px 0 10px;
    border-bottom: 2px dashed var(--line);
}

.tb-rcv__lbl[b-gnjpar7rlq] {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--steel);
}

.tb-rcv__pair[b-gnjpar7rlq] {
    display: flex;
    gap: 10px;
}

.tb-rcv__half[b-gnjpar7rlq] {
    flex: 1 1 0;
    min-width: 0;
}

.tb-rcv__go[b-gnjpar7rlq] {
    font-size: 15px;
}
/* /Components/SignaturePad.razor.rz.scp.css */
/* ── THE SIGNATURE PAD ─────────────────────────────────────
   Moved here from Run.razor.css with the pad itself (2026-10-15) - scoped CSS follows the
   component, so the rules had to travel with the markup or the pad would render unstyled on
   both screens. */

.tb-sig[b-4bp4ihsd9s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 🛑 touch-action: none IS LOAD-BEARING. Without it the phone
   scrolls the page instead of drawing, and the signature pad
   simply does not work on the only device that matters.
   ⚠️ AND IT IS NOT ENOUGH ON ITS OWN (Kirk, 2026-10-13: a large
   iPhone dragged the whole page while signing; other phones held).
   WebKit does not reliably honour touch-action on an <svg>, so the
   pad also carries data-rk-draw and index.html cancels touchstart /
   touchmove there with a NON-PASSIVE listener - the only thing iOS
   is guaranteed to obey. No viewport lock: pinch-zoom stays for the
   rest of the app. The selection / callout lines stop a long press
   on the pad turning into a magnifier instead of ink. */
.tb-sig__pad[b-4bp4ihsd9s] {
    width: 100%;
    height: 200px;
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    border: 2px dashed var(--line-hard);
    border-radius: var(--corner);
    background: var(--card);
}

.tb-sig__ink[b-4bp4ihsd9s] {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tb-sig__row[b-4bp4ihsd9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tb-sig__hint[b-4bp4ihsd9s] {
    font-size: 13px;
    color: var(--ink-soft);
}

.tb-sig__clear[b-4bp4ihsd9s] {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line-hard);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.08em;
}
/* /Components/VehicleSheet.razor.rz.scp.css */
/* ============================================================
   THE VEHICLE SHEET (CUSTODY.md S2) - shaped like WHO TO CALL
   (.tb-contacts): fixed, centred, its own scroll. Tokens only,
   from wwwroot/css/app.css.
   ============================================================ */

.tb-vsheet[b-vt8j71tikr] {
    position: fixed;
    left: 50%;
    top: 8dvh;
    transform: translateX(-50%);
    /* % not vw - vw includes the scrollbar (see .tb-notes) */
    width: min(calc(100% - 32px), 420px);
    max-height: 84dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-color: var(--ink);
    outline: none;
    z-index: 61;
}

.tb-vsheet__head[b-vt8j71tikr] {
    flex-shrink: 0;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
}

.tb-vsheet__headline[b-vt8j71tikr] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.12em;
}

.tb-vsheet__lede[b-vt8j71tikr] {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.35;
    color: var(--ink);
}

.tb-vsheet__msg[b-vt8j71tikr] {
    margin: 10px 14px 0;
}

.tb-vsheet__actions[b-vt8j71tikr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px 12px;
}

.tb-vsheet__scan[b-vt8j71tikr] {
    flex-shrink: 0;
    width: calc(100% - 28px);
    margin: 0 14px 10px;
}

.tb-vsheet__list[b-vt8j71tikr] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 2px dashed var(--line);
}

.tb-vsheet__row .tb-row__title[b-vt8j71tikr] {
    display: block;
}

.tb-vsheet__pad[b-vt8j71tikr] {
    margin: 0;
    padding: 12px 14px;
}

.tb-vsheet__foot[b-vt8j71tikr] {
    flex-shrink: 0;
    padding: 10px 14px;
    border-top: 2px solid var(--line-hard);
}
/* /Layout/PublicToolsOnlyNotice.razor.rz.scp.css */
/* A PUBLIC TOOLS SIGN-IN ON THE HANDSET (lane PT) - one card, one sentence. The field app's own tokens (app.css). */

.pto[b-g4rb6z77hh] {
    margin: 16px;
}

.pto__line[b-g4rb6z77hh] {
    margin: 0 0 12px;
    font-family: var(--font-body);
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.pto__link[b-g4rb6z77hh] {
    color: var(--accent-deep);
    font-weight: 600;
}
/* /Pages/Board.razor.rz.scp.css */
/* ============================================================
   THE DISPATCH BOARD — the team's work, on a phone.

   Every colour, size, radius and font below comes from a token
   declared in wwwroot/css/app.css :root. NO RAW HEX ANYWHERE.
   Verified by grep against that :root, not by memory — every
   var() in this file resolves: --ink, --ink-soft, --paper,
   --card, --line, --line-hard, --accent, --accent-deep,
   --accent-soft, --steel, --danger, --danger-soft,
   --danger-ink, --font-body, --font-display, --font-mono,
   --corner, --tap. (A var() read against an
   undeclared token has been caught by a gate here before, and
   it fails silently in the browser — the property is simply
   dropped and the element inherits something plausible.)

   🛑 THE ONE COLOUR THAT IS NOT A TOKEN IS THE LANE SWATCH, and
   it is DATA rather than design: dbo.Employee.BoardColorHex is
   the colour the office chose for that column, and it arrives
   as an inline style validated to '#' plus hex digits in
   RiprokaBoard.Hex. A token cannot express "whatever Rudy's
   column is painted", and rendering it any other way would mean
   a dispatcher who knows the board by colour losing that on the
   phone. Same rule the job card already follows for the status
   stamp and the priority flag.

   ⚠️ SCOPED CSS. It does nothing without the
   <link href="Riproka.Mobile.styles.css"> in index.html, which
   has been there since 2026-09-20. The card internals below
   deliberately lean on the SHARED tb-job / tb-card / tb-stamp
   rules in app.css so a board card and a job-list card cannot
   drift apart; only the lane chrome is scoped here.
   ============================================================ */

.tb-board[b-a0fes8tnuj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 28px;
}

/* ── The heading ─────────────────────────────────────────── */

.tb-board__head[b-a0fes8tnuj] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.tb-board__headline[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--ink);
}

.tb-board__day[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

/* ── The board strip. Decision 35's unlimited named boards.
      Horizontal here and ONLY here: the strip is the one thing on
      the page that is genuinely a short list of peers, and it
      scrolls sideways the way a phone's own tab bars do. The
      LANES never do — that is the whole argument of this screen. */

.tb-board__strip[b-a0fes8tnuj] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tb-board__strip[b-a0fes8tnuj]::-webkit-scrollbar {
    display: none;
}

.tb-board__tab[b-a0fes8tnuj] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 46px;
    padding: 6px 12px;
    border: 1px solid var(--line-hard);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font-family: var(--font-body);
    cursor: pointer;
}

.tb-board__tab--on[b-a0fes8tnuj] {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: inset 0 -3px 0 0 var(--accent);
}

.tb-board__tabname[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.tb-board__tabsub[b-a0fes8tnuj] {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ── The day ─────────────────────────────────────────────── */

.tb-board__days[b-a0fes8tnuj] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.tb-board__today[b-a0fes8tnuj] {
    flex: 1 1 auto;
    min-height: var(--tap);
    border: 1px solid var(--line-hard);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.tb-board__today--on[b-a0fes8tnuj] {
    background: var(--paper);
    color: var(--ink-soft);
}

/* ── The tally ───────────────────────────────────────────── */

.tb-board__tally[b-a0fes8tnuj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.tb-board__count[b-a0fes8tnuj] {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
}

.tb-board__countlbl[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The inbox count earns the accent: decision 32 makes the unassigned
   column the thing a team actually works from. */
.tb-board__inbox[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-deep);
    border-bottom: 2px solid var(--accent);
}

/* LATE is the one thing on this line that should stop a thumb, so it is the only
   thing wearing --danger. --danger-ink on --danger-soft is the pair app.css
   declares for exactly this (9.0:1, clear of AAA); --danger itself is the fill
   and is never used behind text here. */
.tb-board__late[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger-ink);
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: 3px;
    padding: 1px 7px;
}

.tb-lane__late[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger-ink);
    white-space: nowrap;
}

.tb-board__asof[b-a0fes8tnuj] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
}

/* ── The lane-kind filter ────────────────────────────────── */

.tb-board__kinds[b-a0fes8tnuj] {
    display: flex;
    gap: 8px;
}

.tb-board__kind[b-a0fes8tnuj] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border: 1px solid var(--line-hard);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.tb-board__kind--on[b-a0fes8tnuj] {
    background: var(--ink);
    /* --ink over --paper, WHICH IS THE HOUSE PAIR AND IS THE ONE TO COPY. This
       stylesheet has no prefers-color-scheme block at all, so neither token
       flips and the 1:1 trap CLAUDE.md warns about - the PORTAL kit's
       --rk-ink over --rk-white, which both resolve to #e9e4d8 in dark - cannot
       be sprung here. The pair measures 13.1:1. Reaching for a literal white
       would be the thing that eventually breaks, the day this file does grow a
       dark block. */
    color: var(--paper);
    border-color: var(--ink);
}

.tb-board__kindn[b-a0fes8tnuj] {
    font-family: var(--font-mono);
    font-size: 13px;
    opacity: 0.85;
}

/* ── The off-board divider ───────────────────────────────── */

.tb-board__divider[b-a0fes8tnuj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 4px solid var(--steel);
    background: var(--paper);
    border-radius: 0 10px 10px 0;
}

.tb-board__dividerlbl[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--ink);
}

.tb-board__dividernote[b-a0fes8tnuj] {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ── A lane ──────────────────────────────────────────────── */

.tb-lane[b-a0fes8tnuj] {
    border: 1px solid var(--line);
    border-radius: var(--corner);
    background: var(--card);
    overflow: hidden;
}

.tb-lane--inbox[b-a0fes8tnuj] {
    border-color: var(--accent);
}

.tb-lane--off[b-a0fes8tnuj] {
    border-style: dashed;
    border-color: var(--line-hard);
}

.tb-lane__band[b-a0fes8tnuj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--tap);
    padding: 8px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--ink);
}

.tb-lane__band:active[b-a0fes8tnuj] {
    background: var(--paper);
}

/* The office's own column colour. See the file header for why this one
   is data rather than a token. A lane with no colour set shows the
   neutral rule underneath instead of a swatch of nothing. */
.tb-lane__swatch[b-a0fes8tnuj] {
    flex: 0 0 auto;
    width: 8px;
    align-self: stretch;
    min-height: 40px;
    border-radius: 4px;
    background: var(--line-hard);
}

.tb-lane__id[b-a0fes8tnuj] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tb-lane__name[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-lane__meta[b-a0fes8tnuj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tb-lane__kind[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 1px 6px;
    border: 1px solid var(--line-hard);
    border-radius: 3px;
    color: var(--ink-soft);
    background: var(--paper);
}

.tb-lane--inbox .tb-lane__kind[b-a0fes8tnuj] {
    color: var(--accent-deep);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tb-lane__kind--landing[b-a0fes8tnuj] {
    color: var(--steel);
    border-color: var(--steel);
    background: var(--card);
}

.tb-lane__where[b-a0fes8tnuj] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
}

.tb-lane__n[b-a0fes8tnuj] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.tb-lane__today[b-a0fes8tnuj] {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

.tb-lane__all[b-a0fes8tnuj] {
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.tb-lane__chev[b-a0fes8tnuj] {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--ink-soft);
}

.tb-lane__empty[b-a0fes8tnuj] {
    margin: 0;
    padding: 12px 14px 16px;
    font-size: 13.5px;
    color: var(--ink-soft);
    border-top: 1px dashed var(--line);
}

/* A card inside a lane sheds its own frame — the lane is the frame.
   ::deep is not needed: the cards are rendered by THIS component, so
   they carry this component's scope attribute. */
.tb-job--lane[b-a0fes8tnuj] {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
}

.tb-lane__more[b-a0fes8tnuj] {
    width: calc(100% - 20px);
    margin: 10px;
}

/* ── The foot ────────────────────────────────────────────── */

.tb-board__foot[b-a0fes8tnuj] {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.tb-board__foot > *[b-a0fes8tnuj] {
    flex: 1 1 0;
}

/* ── A wider phone, and a tablet in a van cradle. The lanes stay one
      per row on purpose — the argument of this screen is that a board
      on a handheld is a LIST, and two columns of collapsible bands is
      the worst of both. What extra width buys is bigger type and room
      for the meta row, not a second column. */

@media (min-width: 560px) {
    .tb-board__headline[b-a0fes8tnuj] {
        font-size: 40px;
    }

    .tb-board__count[b-a0fes8tnuj] {
        font-size: 30px;
    }
}
/* /Pages/Callback.razor.rz.scp.css */
/* ============================================================
   CALLBACK - going back to fix a finished job (2026-09-28).

   🛑 EVERY COLOUR, SIZE AND FONT BELOW IS A TOKEN FROM
   wwwroot/css/app.css :root, each checked to exist before use:
   --ink, --ink-soft, --line, --accent, --accent-deep,
   --accent-soft, --danger, --danger-soft, --danger-ink,
   --font-body, --font-display, --font-mono, --tap. No raw hex.

   The structure is app.css's - tb-jobbar, tb-h1, tb-sect,
   tb-card, tb-madlib, tb-input, tb-check, tb-btn, tb-error -
   exactly as FOUND WORK uses it. This file draws only the job
   list the technician picks from and the raised stamp.

   A CALLBACK IS NOT GOOD NEWS, so the list's "already called
   back" flag wears the danger pair; the raised stamp keeps the
   accent, because raising it honestly is the right thing to do.
   ============================================================ */

.tb-cb__gap[b-1nk7lkgy71] {
    margin-bottom: 10px;
}

.tb-cb__hint[b-1nk7lkgy71] {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ── 1 · WHICH JOB ─────────────────────────────────────────── */

.tb-cb__list[b-1nk7lkgy71] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* A whole card is the target - one thumb, a van, gloves. */
.tb-cb__job[b-1nk7lkgy71] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-height: var(--tap);
    padding: 12px 14px;
    border: 2px solid var(--line);
    text-align: left;
    font-family: var(--font-body);
    color: var(--ink);
    cursor: pointer;
}

.tb-cb__job--picked[b-1nk7lkgy71] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tb-cb__jobnum[b-1nk7lkgy71] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
}

.tb-cb__jobwhat[b-1nk7lkgy71] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.tb-cb__jobwhen[b-1nk7lkgy71] {
    font-size: 14px;
    color: var(--ink-soft);
}

.tb-cb__jobflag[b-1nk7lkgy71] {
    padding: 2px 8px;
    border: 2px solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger-ink);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ── 3 · WHO GOES ──────────────────────────────────────────── */

.tb-cb__mine[b-1nk7lkgy71] {
    margin-bottom: 8px;
    color: var(--ink);
}

/* ── RAISED ────────────────────────────────────────────────── */

.tb-cb__ok[b-1nk7lkgy71] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-left: 5px solid var(--accent);
    background: var(--accent-soft);
}

.tb-cb__okmark[b-1nk7lkgy71] {
    font-size: 28px;
    line-height: 1;
    color: var(--accent-deep);
}

.tb-cb__oknum[b-1nk7lkgy71] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--ink);
}

.tb-cb__oksub[b-1nk7lkgy71] {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-cb__acts[b-1nk7lkgy71] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Pages/Catch.razor.rz.scp.css */
/* ============================================================
   GOOD CATCH - "report it in under two minutes" (2026-09-28).

   🛑 EVERY COLOUR, SIZE AND FONT BELOW IS A TOKEN FROM
   wwwroot/css/app.css :root, each checked to exist before use:
   --ink, --ink-soft, --line, --card, --accent, --accent-deep,
   --accent-soft, --ok, --ok-soft, --steel, --danger-ink,
   --font-body, --font-display, --font-mono, --tap. No raw hex.

   The structure is app.css's - tb-jobbar, tb-h1, tb-sect,
   tb-card, tb-input, tb-check, tb-btn, tb-error - exactly as
   FOUND WORK and CALLBACK use it. This file draws the pickers,
   the notice, the stamp and the month's board.

   A CATCH IS GOOD NEWS, ALWAYS. Nothing here wears the danger
   pair: a defect REPORTED is a catch made. The notice wears the
   ok pair - something changed because somebody spoke up.
   ============================================================ */

.tb-gc__gap[b-7fuveki0b9] {
    margin-bottom: 10px;
}

.tb-gc__hint[b-7fuveki0b9] {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-gc__hint--warn[b-7fuveki0b9] {
    margin: 8px 0 0;
    color: var(--danger-ink);
}

.tb-gc__sectgap[b-7fuveki0b9] {
    margin-top: 22px;
}

/* ── 0 · THE NOTICE ─────────────────────────────────────────── */

.tb-gc__notice[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    border-left: 5px solid var(--ok);
    background: var(--ok-soft);
}

/* A CATCH LANDED ON YOUR SOP (lane U) - news for the procedure's owner, not
   good news for them yet: the accent pair, where the reporter's is the ok pair. */
.tb-gc__notice--sop[b-7fuveki0b9] {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

.tb-gc__notice--sop .tb-gc__noticenote[b-7fuveki0b9] {
    border-left-color: var(--accent);
}

.tb-gc__noticehead[b-7fuveki0b9] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.tb-gc__noticewhat[b-7fuveki0b9] {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-gc__noticebody[b-7fuveki0b9] {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
}

.tb-gc__noticenote[b-7fuveki0b9] {
    padding: 8px 10px;
    border-left: 3px solid var(--ok);
    background: var(--card);
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
}

.tb-gc__got[b-7fuveki0b9] {
    margin-top: 4px;
}

/* ── 1 · WHAT SORT - three whole-card targets ──────────────── */

.tb-gc__kinds[b-7fuveki0b9],
.tb-gc__spokes[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.tb-gc__kind[b-7fuveki0b9],
.tb-gc__spoke[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    min-height: var(--tap);
    padding: 10px 14px;
    border: 2px solid var(--line);
    text-align: left;
    font-family: var(--font-body);
    color: var(--ink);
    cursor: pointer;
}

.tb-gc__kind--picked[b-7fuveki0b9],
.tb-gc__spoke--picked[b-7fuveki0b9] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tb-gc__kindname[b-7fuveki0b9],
.tb-gc__spokename[b-7fuveki0b9] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.tb-gc__kindwhat[b-7fuveki0b9],
.tb-gc__spokewhat[b-7fuveki0b9] {
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink-soft);
}

/* ── 2 · WHAT HAPPENED ─────────────────────────────────────── */

.tb-gc__more[b-7fuveki0b9] {
    margin-top: 8px;
}

.tb-gc__ctx[b-7fuveki0b9] {
    margin-top: 10px;
}

/* ── 3 / 4 · CHIPS - pillar, how often ─────────────────────── */

.tb-gc__chips[b-7fuveki0b9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tb-gc__chip[b-7fuveki0b9] {
    min-height: 44px;
    padding: 6px 14px;
    border: 2px solid var(--line);
    border-radius: var(--corner);
    background: var(--card);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--ink);
    cursor: pointer;
}

.tb-gc__chip--on[b-7fuveki0b9] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* ── 5 · WHAT IT COST ──────────────────────────────────────── */

.tb-gc__cost[b-7fuveki0b9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-gc__costword[b-7fuveki0b9] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
    white-space: nowrap;
}

.tb-gc__costbox[b-7fuveki0b9] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
}

/* ── FILED ─────────────────────────────────────────────────── */

.tb-gc__ok[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-left: 5px solid var(--accent);
    background: var(--accent-soft);
}

.tb-gc__okmark[b-7fuveki0b9] {
    font-size: 28px;
    line-height: 1;
    color: var(--accent-deep);
}

.tb-gc__oknum[b-7fuveki0b9] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.tb-gc__oksub[b-7fuveki0b9] {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-gc__stamp[b-7fuveki0b9] {
    padding: 4px 10px;
    border: 2px solid var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.tb-gc__acts[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* ── MY CATCHES ────────────────────────────────────────────── */

.tb-gc__mine[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-gc__row[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
}

.tb-gc__rowtop[b-7fuveki0b9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tb-gc__rownum[b-7fuveki0b9] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.tb-gc__rowkind[b-7fuveki0b9] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--steel);
}

.tb-gc__rowstamp[b-7fuveki0b9] {
    margin-left: auto;
    padding: 2px 8px;
    border: 2px solid var(--line);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.tb-gc__rowstamp--ok[b-7fuveki0b9] {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
}

.tb-gc__rowstamp--accent[b-7fuveki0b9] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.tb-gc__rowwhat[b-7fuveki0b9] {
    font-size: 15px;
    line-height: 1.35;
    color: var(--ink);
}

.tb-gc__rowline[b-7fuveki0b9] {
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink-soft);
}

/* ── THIS MONTH - the board, catches made ──────────────────── */

.tb-gc__board[b-7fuveki0b9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-gc__boardbig[b-7fuveki0b9] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tb-gc__boardnum[b-7fuveki0b9] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: var(--accent-deep);
}

.tb-gc__boardword[b-7fuveki0b9] {
    font-size: 15px;
    line-height: 1.3;
    color: var(--ink);
}

.tb-gc__boardyou[b-7fuveki0b9] {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ok);
    font-weight: 600;
}

.tb-gc__boardzone[b-7fuveki0b9] {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.03em;
    color: var(--ink);
}

.tb-gc__boardzonenum[b-7fuveki0b9] {
    font-family: var(--font-mono);
}
/* /Pages/Day.razor.rz.scp.css */
/* ============================================================
   THE DAY PLAN — the driving order, on a phone, in a truck.

   Every colour, size, radius and font below comes from a token
   defined in wwwroot/css/app.css :root. No raw hex, anywhere.
   Verified present before use: --ink, --ink-soft, --paper,
   --card, --line, --line-hard, --accent, --accent-deep,
   --accent-soft, --steel, --ok, --ok-soft, --danger-soft,
   --danger-ink, --font-body, --font-display, --font-mono,
   --corner, --tap.

   ⚠️ THIS FILE IS SCOPED CSS AND NEEDS ONE LINE IN index.html
   TO DO ANYTHING — <link rel="stylesheet"
   href="Riproka.Mobile.styles.css" />. That link is absent
   today (index.html loads css/app.css only), and
   Components/PhotoCapture.razor.css is in exactly the same
   position. index.html is not this lane's file; the missing
   line is reported rather than added. Until it lands the page
   still renders — it leans on tb-card / tb-sect / tb-note /
   tb-error / tb-loading / tb-btn / tb-hop from app.css for its
   structure — but it renders plainly.

   ⚠️ ONE-HANDED IN A MOVING VEHICLE IS THE DESIGN BRIEF. Every
   tappable thing is at least --tap tall, the directions link is
   never behind a fold, and the stop number is big enough to
   find without reading.
   ============================================================ */

.tb-day[b-ogkxiv6fva] {
    padding: 0 14px 28px;
}

/* ── The heading ───────────────────────────────────────────── */

.tb-day__head[b-ogkxiv6fva] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 2px 10px;
    border-bottom: 2px solid var(--ink);
}

.tb-day__headline[b-ogkxiv6fva] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.tb-day__date[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--steel);
    text-align: right;
}

/* ── The blocked / empty panels ────────────────────────────── */

.tb-day__blocked[b-ogkxiv6fva] {
    margin-top: 12px;
}

/* ── The plan card ─────────────────────────────────────────── */

.tb-day__plan[b-ogkxiv6fva] {
    margin-top: 12px;
}

.tb-day__name[b-ogkxiv6fva] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    color: var(--ink);
}

.tb-day__facts[b-ogkxiv6fva] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tb-day__fact[b-ogkxiv6fva] {
    padding: 3px 8px;
    border: 1px solid var(--line-hard);
    border-radius: 4px;
    background: var(--paper);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* Not released yet: the plan can still move under the driver.
   Warm, not alarming — this is information, not a fault. */
.tb-day__fact--warn[b-ogkxiv6fva] {
    border-color: var(--accent-deep);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.tb-day__progress[b-ogkxiv6fva] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.tb-day__bar[b-ogkxiv6fva] {
    flex: 1;
    height: 8px;
    border: 1px solid var(--line-hard);
    border-radius: 4px;
    background: var(--paper);
    overflow: hidden;
}

.tb-day__bar > span[b-ogkxiv6fva] {
    display: block;
    height: 100%;
    background: var(--ok);
}

.tb-day__tally[b-ogkxiv6fva] {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* ── The share row ─────────────────────────────────────────── */

.tb-day__share[b-ogkxiv6fva] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* The whole-run link. Orange because it is the one thing on this
   screen that starts a drive. */
.tb-day__maps[b-ogkxiv6fva] {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 10px 14px;
    background: var(--accent);
    color: var(--card);
    border-bottom: 4px solid var(--accent-deep);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    touch-action: manipulation;
}

.tb-day__maps:active[b-ogkxiv6fva] {
    opacity: 0.92;
}

.tb-day__send[b-ogkxiv6fva] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-hard);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    touch-action: manipulation;
}

.tb-day__send:active[b-ogkxiv6fva] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ── One stop ──────────────────────────────────────────────── */

/* The planned drive INTO this stop, sitting in the gap above it
   so the list reads as a sequence rather than a set. */
.tb-day__leg[b-ogkxiv6fva] {
    padding: 6px 4px 2px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--steel);
}

.tb-day__stop[b-ogkxiv6fva] {
    margin-top: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 5px solid var(--accent);
    border-radius: var(--corner);
    overflow: hidden;
}

/* Finished with. Drained rather than hidden — a driver checking
   the order still needs to see what is behind them. */
.tb-day__stop--done[b-ogkxiv6fva] {
    border-left-color: var(--ok);
    background: var(--ok-soft);
}

.tb-day__stop--done .tb-day__where[b-ogkxiv6fva] {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--ink-soft);
}

.tb-day__row[b-ogkxiv6fva] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: var(--tap);
    padding: 12px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

/* The stop number, big enough to find at a glance without
   reading anything else on the card. */
.tb-day__num[b-ogkxiv6fva] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
}

.tb-day__stop--done .tb-day__num[b-ogkxiv6fva] {
    background: var(--ok);
}

.tb-day__body[b-ogkxiv6fva] {
    flex: 1;
    min-width: 0;
}

.tb-day__where[b-ogkxiv6fva] {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    color: var(--ink);
}

.tb-day__addr[b-ogkxiv6fva] {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink-soft);
}

.tb-day__meta[b-ogkxiv6fva] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.tb-day__state[b-ogkxiv6fva] {
    padding: 2px 7px;
    border: 1px solid var(--line-hard);
    border-radius: 3px;
    background: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.tb-day__when[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--accent-deep);
}

.tb-day__pin[b-ogkxiv6fva] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--steel);
}

.tb-day__chev[b-ogkxiv6fva] {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--steel);
}

/* THE DIRECTIONS LINK — full width, always visible, never behind
   the fold. It is the one control a driver reaches for at speed,
   and a button you have to expand to find is a button you pull
   over to press. */
.tb-day__go[b-ogkxiv6fva] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 12px 12px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    touch-action: manipulation;
}

.tb-day__go:active[b-ogkxiv6fva] {
    background: var(--accent-deep);
}

/* No honest target. Stated, not disabled: MapLinks emits nothing
   for a city with no street line because a pin on a town center
   is read as "this is where it is" and sends somebody driving. */
.tb-day__nogo[b-ogkxiv6fva] {
    margin: 0 12px 12px;
    padding: 10px 12px;
    border: 1px dashed var(--line-hard);
    border-radius: var(--corner);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-soft);
    text-align: center;
}

/* ── The opened stop ───────────────────────────────────────── */

.tb-day__detail[b-ogkxiv6fva] {
    padding: 0 12px 12px;
    border-top: 1px dashed var(--line);
}

.tb-day__pair[b-ogkxiv6fva] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.tb-day__pair > span:first-child[b-ogkxiv6fva] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.tb-day__pair > span:last-child[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    text-align: right;
}

/* A gate code is read off the screen while holding a keypad, so
   it gets the largest mono on the card. */
.tb-day__gate[b-ogkxiv6fva] {
    font-size: 18px !important;
    letter-spacing: 0.1em;
}

.tb-day__job[b-ogkxiv6fva] {
    width: 100%;
    margin-top: 12px;
}

/* ── The footers ───────────────────────────────────────────── */

.tb-day__again[b-ogkxiv6fva] {
    width: 100%;
    margin-top: 14px;
}

.tb-day__onward[b-ogkxiv6fva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: var(--tap);
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-bottom: 4px solid var(--accent);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-day__onward:active[b-ogkxiv6fva] {
    opacity: 0.92;
}

.tb-day__onward:focus-visible[b-ogkxiv6fva] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.tb-day__onward-sub[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--line);
}

/* ── The next stop (2026-10-07) ────────────────────────────── */

/* The glanceable card: where now, one tap to the job. Dark so it
   reads as the head of the page, not as one more stop. */
.tb-day__next[b-ogkxiv6fva] {
    margin-top: 12px;
    padding: 14px;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--corner);
    border-bottom: 4px solid var(--accent);
}

.tb-day__next--done[b-ogkxiv6fva] {
    border-bottom-color: var(--ok);
}

.tb-day__nexthead[b-ogkxiv6fva] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--accent-soft);
}

.tb-day__nextof[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.tb-day__nextwhere[b-ogkxiv6fva] {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.1;
    color: var(--paper);
}

.tb-day__nextaddr[b-ogkxiv6fva] {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    color: var(--paper);
    opacity: 0.85;
}

.tb-day__nextgate[b-ogkxiv6fva] {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--accent-soft);
}

.tb-day__nextgate > span[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-size: 20px;
    letter-spacing: 0.1em;
    color: var(--paper);
}

.tb-day__nextacts[b-ogkxiv6fva] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.tb-day__nextgo[b-ogkxiv6fva] {
    flex: 2 1 0;
    min-height: var(--tap);
    border: none;
    border-bottom: 4px solid var(--accent-deep);
    border-radius: var(--corner);
    background: var(--accent);
    color: var(--card);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1em;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-day__nextmap[b-ogkxiv6fva] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    border: 2px solid var(--paper);
    border-radius: var(--corner);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-decoration: none;
    touch-action: manipulation;
}

/* The legs, as chips. Thirteen of them wrap to two rows instead of
   thirteen full-width bars. */
.tb-day__legs[b-ogkxiv6fva] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tb-day__legslabel[b-ogkxiv6fva] {
    flex: 1 1 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.tb-day__legchip[b-ogkxiv6fva] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: var(--accent);
    color: var(--card);
    border-bottom: 3px solid var(--accent-deep);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    touch-action: manipulation;
}

/* CANCEL left, SKIP FOR NOW right, one row (2026-10-14). */
.tb-day__nextlinks[b-ogkxiv6fva] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.tb-day__nextlinks .tb-day__nextskip[b-ogkxiv6fva] {
    margin-top: 0;
}

.tb-day__nextcancel[b-ogkxiv6fva] {
    text-align: left;
}

.tb-day__nextskip[b-ogkxiv6fva] {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border: none;
    background: transparent;
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-align: right;
    cursor: pointer;
    touch-action: manipulation;
    opacity: 0.85;
}

/* ── LANE AF, 2026-10-07: THE PLAN ON THE CARD, ON MY WAY, THE END OF THE RUN ──────────────
   Every colour is a token from wwwroot/css/app.css. The card is ink on paper-reversed, so the
   chips on it use the paper and accent-soft tokens the card already uses. */

.tb-day__fact--bag[b-ogkxiv6fva] {
    border-color: var(--steel);
    color: var(--steel);
    font-weight: 600;
    /* A button since CUSTODY.md S2 - one tap to Your vehicle and bags. */
    cursor: pointer;
    touch-action: manipulation;
}

.tb-day__nextplan[b-ogkxiv6fva] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}

.tb-day__nextwhen[b-ogkxiv6fva] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--paper);
}

.tb-day__standing[b-ogkxiv6fva] {
    padding: 2px 7px;
    border: 1px solid var(--line-hard);
    border-radius: 3px;
    background: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--steel);
}

.tb-day__standing--late[b-ogkxiv6fva] {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger-ink);
}

/* CARRIED (lane CF repair, 2026-10-26) - the warn voice MY JOBS and the board's chip already use,
   NOT the LATE chip's danger red. Seen at 390 px: in red it sat directly under "14 HR 20 MIN LATE"
   and read as a second copy of it, so a driver could not tell "late" from "owed since Sunday".
   --accent-deep on --accent-soft measures 5.2:1. */
.tb-day__carried[b-ogkxiv6fva] {
    padding: 2px 7px;
    border: 1px solid var(--accent-deep);
    border-radius: 3px;
    background: var(--accent-soft);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent-deep);
}

/* NEW (2026-10-30) - a stop that arrived while the run was open, until the driver says OK on the
   arrivals line. The OK voice, not the warn or the late: new work is good news, never a fault.
   --ok-deep on --ok-soft. */
.tb-day__new[b-ogkxiv6fva] {
    padding: 2px 7px;
    border: 1px solid var(--ok-deep);
    border-radius: 3px;
    background: var(--ok-soft);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ok-deep);
}

.tb-day__ends[b-ogkxiv6fva] {
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--accent-soft);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent-deep);
}

.tb-day__nextnote[b-ogkxiv6fva] {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.35;
    color: var(--accent-soft);
}

/* ON MY WAY IS THE MOST IMPORTANT BUTTON ON THE CARD WHEN IT SHOWS (Kirk, 2026-10-14) - solid
   green, the pressed edge underneath like OPEN THE JOB's orange one. */
.tb-day__onmyway[b-ogkxiv6fva] {
    display: block;
    width: 100%;
    min-height: var(--tap);
    margin-top: 12px;
    border: none;
    border-bottom: 4px solid var(--ok-deep);
    border-radius: var(--corner);
    background: var(--ok);
    color: var(--card);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.12em;
    cursor: pointer;
    touch-action: manipulation;
}

/* While ON MY WAY is offered, OPEN THE JOB reads as a second choice - the DIRECTIONS outline. */
.tb-day__nextgo--second[b-ogkxiv6fva] {
    border: 2px solid var(--paper);
    background: transparent;
    color: var(--paper);
    font-size: 15px;
    letter-spacing: 0.12em;
}

.tb-day__onmyway:disabled[b-ogkxiv6fva] {
    opacity: 0.6;
    cursor: default;
}


/* THE PLACE'S OWN NOTES under the address (2026-10-26, lane NT) - one line each, the
   Getting in line's voice with a rule down the side so a standing note reads as the site's. */
.tb-day__sitenote[b-ogkxiv6fva] {
    padding-left: 8px;
    border-left: 3px solid var(--accent);
}

.tb-day__sitemore[b-ogkxiv6fva] {
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* NEVER SILENT FOR LONG (2026-11-09, Jeff Taft / Way) - "Run last updated 9:17 AM." on the calm note,
   with a thumb-sized REFRESH beside it, the arrivals line's shape in the note's own colours. */
.tb-day__stale[b-ogkxiv6fva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tb-day__stalego[b-ogkxiv6fva] {
    flex-shrink: 0;
    min-width: 56px;
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid var(--accent);
    border-radius: 3px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.tb-day__stalego:disabled[b-ogkxiv6fva] {
    opacity: 0.6;
    cursor: default;
}
/* /Pages/Dispatches.razor.rz.scp.css */
/* ============================================================
   THE QUOTE TAB'S OWN PIECES (2026-10-15) - NEW ESTIMATE and
   READY TO PRESENT. Everything else on this page is app.css's
   (tb-ticket, tb-sect, tb-btn). Tokens only, from app.css :root:
   --ink-soft, --accent, --font-body.
   ============================================================ */

.tb-quote__new[b-fz9sq27t8h] {
    margin: 4px 0 14px;
}

/* A released quote is the one thing on this list a CUSTOMER will see
   next, so its card carries the accent edge. */
.tb-quote__ready[b-fz9sq27t8h] {
    border-left: 4px solid var(--accent);
}

.tb-quote__said[b-fz9sq27t8h] {
    margin: 8px 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}
/* /Pages/FoundWork.razor.rz.scp.css */
/* ============================================================
   FOUND WORK - "FIND SOMETHING!", raised from the roof.

   🛑 EVERY COLOUR, SIZE AND FONT BELOW IS A TOKEN FROM
   wwwroot/css/app.css :root, each checked to exist before use:
   --ink, --ink-soft, --accent, --accent-deep, --accent-soft,
   --ok, --ok-soft, --danger-ink, --font-body, --font-display,
   --font-mono. There is no raw hex in this file.

   The structure leans on app.css - tb-jobbar, tb-h1, tb-sect,
   tb-card, tb-madlib, tb-input, tb-btn, tb-error - exactly as
   the job page and the invoice do. This file only draws what
   is particular to a find: the story card, and the stamp that
   says the job exists.

   ONE-HANDED ON A ROOF IS THE BRIEF. Every button is a full-
   width tb-btn (--tap tall), and the new job's number is the
   biggest thing on the confirmation because it is what gets
   said out loud to the office.
   ============================================================ */

/* Air between a TRY AGAIN and the ghost button under it. */
.tb-found__gap[b-54j12yrnxi] {
    margin-bottom: 10px;
}

/* ── 1 · THE STORY ─────────────────────────────────────────── */

.tb-found__story[b-54j12yrnxi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-found__storyname[b-54j12yrnxi] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--ink);
}

.tb-found__hint[b-54j12yrnxi] {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* Said in the danger ink because it is news the technician should
   read - the story will not ride along - but not boxed in red: the
   find can still be raised, so nothing here has failed. */
.tb-found__hint--warn[b-54j12yrnxi] {
    color: var(--danger-ink);
}

/* THE STORY IS ON THE RECORD. A stamp, the ticket's own mark for
   "done" - green because it is finished, mono because it carries a
   run number somebody may read back to the office. */
.tb-found__stamp[b-54j12yrnxi] {
    align-self: flex-start;
    padding: 4px 10px;
    border: 2px solid var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ── RAISED ────────────────────────────────────────────────── */

.tb-found__ok[b-54j12yrnxi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-left: 5px solid var(--accent);
    background: var(--accent-soft);
}

.tb-found__okmark[b-54j12yrnxi] {
    font-size: 28px;
    line-height: 1;
    color: var(--accent-deep);
}

/* THE NUMBER, BIGGEST. It is the handle the estimator files it
   under and the one a technician reads down the phone. */
.tb-found__oknum[b-54j12yrnxi] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--ink);
}

.tb-found__oksub[b-54j12yrnxi] {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* PRICE IT NOW over BACK TO MY JOB - the primary under the thumb
   first, the way out beneath it. */
.tb-found__acts[b-54j12yrnxi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Pages/Help.razor.rz.scp.css */
/* THE FIELD APP'S HELP PAGES - cards in the app's job-ticket look; the manual's words wear the
   global .tb-help-prose (wwwroot/css/help.css). */

.rk-help__back[b-2wgdid3vu5] {
    display: inline-block;
    margin: 4px 0 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--accent-deep);
    text-decoration: none;
}

.rk-help__kicker[b-2wgdid3vu5] {
    margin: 10px 0 2px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--steel);
}

.rk-help__toc[b-2wgdid3vu5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rk-help__toc-title[b-2wgdid3vu5] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--steel);
    margin-bottom: 4px;
}

.rk-help__toc-link[b-2wgdid3vu5] {
    padding: 6px 0;
    text-align: left;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--accent-deep);
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.rk-help__words[b-2wgdid3vu5] {
    margin: 6px 0 18px;
}

.rk-help__steps[b-2wgdid3vu5] {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.rk-help__steps .tb-btn[b-2wgdid3vu5] {
    text-decoration: none;
    font-size: 14px;
}

.rk-help__search[b-2wgdid3vu5] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 14px;
}

.rk-help__input[b-2wgdid3vu5] {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
}

.rk-help__go[b-2wgdid3vu5] {
    flex: 0 0 auto;
    width: auto;
}

.rk-help__chapter[b-2wgdid3vu5],
.rk-help__hit[b-2wgdid3vu5] {
    display: flex;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
}

.rk-help__hit[b-2wgdid3vu5] {
    flex-direction: column;
    gap: 4px;
}

.rk-help__num[b-2wgdid3vu5] {
    flex: 0 0 auto;
    min-width: 34px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    color: var(--accent);
}

.rk-help__chapter-text[b-2wgdid3vu5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rk-help__chapter-title[b-2wgdid3vu5],
.rk-help__hit-title[b-2wgdid3vu5] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.15;
}

.rk-help__chapter-sum[b-2wgdid3vu5] {
    font-size: 14px;
    color: var(--ink-soft);
}

.rk-help__hit-where[b-2wgdid3vu5] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.rk-help__hit-snippet[b-2wgdid3vu5] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.rk-help__save-text[b-2wgdid3vu5] {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--ink-soft);
}
/* /Pages/Home.razor.rz.scp.css */
/* ============================================================
   HOME - the rows this file owns: the two-up rows (PAYCARD and
   MY NUMBERS, TEAM DIRECTORY and ON-CALL) and the utility row
   that is one, two or three wide. Everything else on Home is
   styled in wwwroot/css/app.css (.tb-home*, and .tb-act* for the
   day's checklists), and stays there.

   ⚠️ THE NO-SCROLL RULE IS RETIRED (Kirk, 2026-10-26: "Let's
   combine. Scroll is fine. We make it brilliant."). Home now
   carries the day's checklists too, so it scrolls - but the big
   button and the checklists come first, and the two-up rows keep
   the rest short.

   Tokens only for colour. Sizes are px, as they are in every
   stylesheet in this app.
   ============================================================ */

/* THE DAY'S CHECKLISTS sit between the big button and the work, with
   a little more air below them than the 8px between tiles - the deck
   ends in its own fold or note, and PAYCARD must not read as part of it. */
.tb-home__deck[b-evyc5vk318] {
    margin: 4px 0 12px;
}

.tb-home__duo[b-evyc5vk318] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Half width, so each sub line wraps to two and the name has to
   sit tighter to keep the row shorter than one full tile. 52px
   is still well over a gloved thumb's 44. */
.tb-home__billing--half[b-evyc5vk318] {
    min-height: 52px;
    padding: 2px 8px;
}

.tb-home__billing--half .tb-home__billing-name[b-evyc5vk318] {
    font-size: 19px;
}

.tb-home__billing--half .tb-home__billing-sub[b-evyc5vk318] {
    font-size: 10px;
    line-height: 1.25;
}

/* TEAM DIRECTORY and ON-CALL side by side: ~167px each at 375
   wide, so the words lose a little tracking and the glyph sits
   closer to keep TEAM DIRECTORY on one line. */
.tb-home__duo .tb-home__util--wide[b-evyc5vk318] {
    gap: 6px;
    padding: 0 6px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* THE UTILITY ROW - LOOKUP, VEHICLE & BAGS, GOOD CATCH, as many as
   the roles leave. Three: ~109px a tile at 375 wide, so the words
   step down to 12px with half the tracking. One: GOOD CATCH alone,
   full width. */
.tb-home__pair--trio[b-evyc5vk318] {
    grid-template-columns: 1fr 1fr 1fr;
}

.tb-home__pair--trio .tb-home__util[b-evyc5vk318] {
    gap: 5px;
    padding: 0 4px;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.tb-home__pair--one[b-evyc5vk318] {
    grid-template-columns: 1fr;
}

/* GOOD CATCH is a door, not a chore - solid like the directory, in the
   accent's soft ground, so it reads as the one to press. */
.tb-home__util--catch[b-evyc5vk318] {
    position: relative;
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* A NOTICE IS WAITING - one of your catches changed how we work. The ok
   pair, because it is good news, and a badge on the corner so the row
   keeps its height. */
.tb-home__util--news[b-evyc5vk318] {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ink);
}

.tb-home__catchbadge[b-evyc5vk318] {
    position: absolute;
    top: -8px;
    right: -4px;
    padding: 1px 6px;
    border-radius: var(--corner);
    background: var(--ok);
    color: var(--card);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* THE WORK HALF OF HOME - a wrapper only so it can sit inside the
   no-Read branch; display: contents leaves the page laid out exactly
   as before (lane HF, 2026-10-26). */
.tb-home__work[b-evyc5vk318] {
    display: contents;
}

/* THE BIG BUTTON, NOT YET KNOWN - a first sign-in learns the crew's
   courier switch a moment after Home paints, and the switch picks
   TODAY'S RUN or MY JOBS. The space is held at the button's own
   height, blank and quiet, so nothing jumps and nothing flips. */
.tb-home__hero--pending[b-evyc5vk318] {
    background: var(--paper);
    border: 1px dashed var(--line);
    border-bottom: 4px solid var(--line);
    cursor: default;
}

/* No Read role - the one sentence, given the room the big button had. */
.tb-home__noread[b-evyc5vk318] {
    margin: 8px 0 12px;
    text-align: center;
    font-size: 13px;
}
/* /Pages/Job.razor.rz.scp.css */
/* ============================================================
   JOB PAGE - scoped rules. Almost everything on this page is
   styled in wwwroot/css/app.css; this file holds only what was
   added after the page's own rules settled there.

   Tokens only (app.css :root): --ink, --paper, --card, --steel,
   --tap. Small text never wears raw --accent.
   ============================================================ */

/* RECEIVE PARTS on a purchase-order row. A real button inside the
   row's text column, under the vendor and the date, so the PHOTO
   THE RECEIPT badge on the right keeps its place. Ink-outlined
   rather than orange: the clock is still the loudest thing on the
   job, and this is a dock-side action, not the next step. */
.tb-pos__receive[b-n34pr31iei] {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    min-height: 44px;
    padding: 6px 12px;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-pos__receive:active[b-n34pr31iei] {
    background: var(--ink);
    color: var(--paper);
}

.tb-pos__receive:focus-visible[b-n34pr31iei] {
    outline: 3px solid var(--steel);
    outline-offset: 2px;
}

/* ── The stop's own checklist leads (2026-10-07, lane AE) ─────────
   A work code may name its checklist (BANKPU the pickup, BANKDROP the
   drop). That one is drawn first with a heavier edge and says so; a
   checklist another work code names folds under OTHER CHECKLISTS -
   one tap, never hidden. */
.tb-wf--lead[b-n34pr31iei] {
    border-left-width: 6px;
    border-left-color: var(--accent-deep);
}

.tb-wf__sub--lead[b-n34pr31iei] {
    color: var(--accent-deep);
    font-weight: 700;
}

.tb-wf__more[b-n34pr31iei] {
    display: block;
    width: 100%;
    min-height: var(--tap);
    margin: 0 0 8px;
    background: var(--paper);
    border: 1px dashed var(--line-hard);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--steel);
    cursor: pointer;
}


/* VISITS, FOLDED PER PERSON (2026-11-02) - supersedes the eight-at-a-time arrows of 2026-10-14.
   A folded row with earlier visits is a tap target; its last line says how many, and the card
   ends in ALL n VISITS when there is more than it shows. */
.tb-visit--opens[b-n34pr31iei] {
    cursor: pointer;
    touch-action: manipulation;
}

.tb-visit--opens:active[b-n34pr31iei] {
    background: var(--accent-soft);
}

.tb-visit__more[b-n34pr31iei] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--steel);
}

.tb-visit__go[b-n34pr31iei] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--steel);
}

.tb-visit__all[b-n34pr31iei] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap);
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-visit__all:active[b-n34pr31iei] {
    background: var(--accent-soft);
}

/* The sheet: the person chips, then every visit. The rows wear .tb-visit, so the list carries
   the card's edge the page's own list sits inside. */
/* ONE ROW THAT SCROLLS SIDEWAYS, not a wrapped block: an HVAC job with 21 different people
   (measured on prod ACME) wrapped its chips into ten lines and pushed every visit below the fold. */
.tb-visitsheet__people[b-n34pr31iei] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin-bottom: 12px;
    padding-bottom: 4px;
}

.tb-visitsheet__people .tb-docfilter__opt[b-n34pr31iei] {
    flex-shrink: 0;
    white-space: nowrap;
}

.tb-visitsheet__list[b-n34pr31iei] {
    border: 1px solid var(--line);
    border-radius: var(--corner);
    background: var(--card);
}

/* A SECOND CHECKLIST ON A FINISHED STOP (2026-11-09, Jeff Taft / Way) - the calm note naming the stop as
   finished, START AGAIN (the deliberate way on, in the checklist button's own look) and NOT NOW. */
.tb-wf__again[b-n34pr31iei] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-wf__againsay[b-n34pr31iei] {
    font-weight: 600;
}

.tb-wf__againacts[b-n34pr31iei] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-wf__againgo[b-n34pr31iei],
.tb-wf__againno[b-n34pr31iei] {
    min-height: var(--tap);
    padding: 0 14px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    cursor: pointer;
}

.tb-wf__againgo[b-n34pr31iei] {
    background: var(--accent);
    color: var(--paper);
    border: none;
}

.tb-wf__againgo:disabled[b-n34pr31iei] {
    opacity: 0.55;
    cursor: default;
}

.tb-wf__againno[b-n34pr31iei] {
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--line-hard);
}

/* ── The review list and the ADD A CHECKLIST panel (Kirk 2026-11-11) ─────────
   Done runs sit quieter than live cards; REVIEW opens the record screen. The
   catalogue of startable checklists lives behind one dashed button, in a panel
   that closes from the bottom - the section reads "what I'm doing and what I
   did" first. */
.tb-wf--done[b-n34pr31iei] {
    border-left-color: var(--line-hard);
    opacity: 0.92;
}

.tb-wf__sub--done[b-n34pr31iei] {
    color: var(--steel);
}

.tb-wf__go--review[b-n34pr31iei] {
    background: var(--paper);
    color: var(--ink);
}

.tb-wf__panel[b-n34pr31iei] {
    margin: 0 0 8px;
    padding: 8px;
    border: 1px dashed var(--line-hard);
    border-radius: var(--corner);
    background: var(--paper);
}

.tb-wf__close[b-n34pr31iei] {
    display: block;
    width: 100%;
    min-height: var(--tap);
    margin-top: 4px;
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
}

.tb-wf__close:active[b-n34pr31iei] {
    background: var(--ink);
    color: var(--paper);
}

/* ── Getting in & facts (Kirk 2026-11-11) - the site's and customer's answered
   custom fields plus the site record's gate code, read on the way in. */
.tb-facts[b-n34pr31iei] {
    padding: 10px 12px;
}

.tb-facts__row[b-n34pr31iei] {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.tb-facts__row:last-child[b-n34pr31iei] {
    border-bottom: 0;
}

.tb-facts__row--cust .tb-facts__label[b-n34pr31iei] {
    color: var(--accent-deep);
}

.tb-facts__label[b-n34pr31iei] {
    flex: 0 0 38%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
}

.tb-facts__value[b-n34pr31iei] {
    min-width: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.tb-facts__value--num[b-n34pr31iei] {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    letter-spacing: 0.06em;
}
/* /Pages/NewEstimate.razor.rz.scp.css */
/* ============================================================
   NEW ESTIMATE - NO JOB YET (2026-10-15).

   🛑 TOKENS ONLY, each checked in wwwroot/css/app.css :root:
   --ink, --ink-soft, --ok, --ok-soft, --ok-deep, --accent,
   --accent-soft, --font-display, --font-mono. The sentence, the
   sheets and the inputs are app.css's own (tb-madlib, tb-sheet,
   tb-wpick, tb-input) - the "+" page's house style; this file
   only draws the confirmation and the create row.
   ============================================================ */

.tb-newest__ok[b-3c5irb5iyo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    border: 2px solid var(--ok);
    background: var(--ok-soft);
}

.tb-newest__okmark[b-3c5irb5iyo] {
    font-size: 28px;
    line-height: 1;
    color: var(--ok-deep);
}

.tb-newest__oknum[b-3c5irb5iyo] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: var(--ink);
}

.tb-newest__oksub[b-3c5irb5iyo] {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-newest__acts[b-3c5irb5iyo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* THE CREATE ROW leads the list and wears the accent, so "not on file" is
   one tap whether or not the search found anybody. */
.tb-newest__create[b-3c5irb5iyo] {
    border-color: var(--accent);
    background: var(--accent-soft);
}
/* /Pages/NumberFinds.razor.rz.scp.css */
/* ============================================================
   THE FINDS BEHIND A COUNT — one row per find, the proof of a
   Found on PM number.

   Tokens from wwwroot/css/app.css :root only, verified present:
   --ink, --ink-soft, --paper, --card, --line, --accent,
   --accent-deep, --accent-soft, --steel, --ok, --font-display,
   --font-mono, --tap. No raw hex; sizes in px as elsewhere here.
   ============================================================ */

.tb-finds[b-rmw6ltyx9e] {
    padding: 0 2px 28px;
}

.tb-finds__offline[b-rmw6ltyx9e] {
    margin: 0 0 12px;
}

/* MINE | EVERYONE'S - the global .tb-tabs pair, tucked under the job bar. */
.tb-finds__who[b-rmw6ltyx9e] {
    margin: 12px 0 14px;
}

/* Everyone's is read-only, and says so before the first tap. */
.tb-finds__everyone[b-rmw6ltyx9e] {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* WHO FOUND IT - a name, never a count. The caller's own rows say YOU, in the accent. */
.tb-finds__who-found[b-rmw6ltyx9e] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--steel);
}

.tb-finds__who-found--me[b-rmw6ltyx9e] {
    color: var(--accent-deep);
}

.tb-finds__list[b-rmw6ltyx9e] {
    padding: 0;
}

.tb-finds__row[b-rmw6ltyx9e] {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 12px;
    align-items: start;
    gap: 10px;
    width: 100%;
    min-height: var(--tap);
    padding: 12px 12px 12px 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-finds__row + .tb-finds__row[b-rmw6ltyx9e] {
    border-top: 2px dashed var(--line);
}

.tb-finds__row:active:not(:disabled)[b-rmw6ltyx9e] {
    background: var(--accent-soft);
}

.tb-finds__row:focus-visible[b-rmw6ltyx9e] {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.tb-finds__row:disabled[b-rmw6ltyx9e] {
    cursor: default;
}

.tb-finds__day[b-rmw6ltyx9e] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: 0.06em;
    color: var(--steel);
}

.tb-finds__body[b-rmw6ltyx9e] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* What they typed - the thing a technician recognises a find by. */
.tb-finds__what[b-rmw6ltyx9e] {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ink);
}

.tb-finds__site[b-rmw6ltyx9e] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    color: var(--ink-soft);
}

.tb-finds__refs[b-rmw6ltyx9e] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-soft);
}

.tb-finds__stage[b-rmw6ltyx9e] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 2px;
}

.tb-finds__stamp[b-rmw6ltyx9e] {
    padding: 1px 6px;
    border: 2px solid var(--steel);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--steel);
}

.tb-finds__detail[b-rmw6ltyx9e] {
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink-soft);
}

/* The customer's no - said plainly, and not the finder's fault. */
.tb-finds__row--declined .tb-finds__stamp[b-rmw6ltyx9e] {
    border-color: var(--ink-soft);
    color: var(--ink-soft);
}

.tb-finds__chev[b-rmw6ltyx9e] {
    align-self: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--accent-deep);
}

.tb-finds__foot[b-rmw6ltyx9e] {
    margin: 4px 2px 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.tb-finds__checked[b-rmw6ltyx9e] {
    margin: 0 2px 8px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--steel);
}
/* /Pages/Numbers.razor.rz.scp.css */
/* ============================================================
   MY NUMBERS — the technician's own baselines, on a phone.

   Every colour, radius and font below is a token from
   wwwroot/css/app.css :root, verified present before use:
   --ink, --ink-soft, --paper, --card, --line, --line-hard,
   --accent, --accent-deep, --accent-soft, --steel, --ok,
   --ok-soft, --font-display, --font-mono, --corner, --tap.
   No raw hex. Font sizes are px, as in every stylesheet in
   this app (its token set has no type scale).

   🛑 THE TONES ARE ABOUT THE NUMBER, NEVER THE PERSON.
     in     inside the band - the go colour, quietly
     under  under the band - STEEL, never red: a short week is
            information, not an alarm
     above  above the band - warm, never a trophy
     none   nothing yet / not judged - paper and line
   ⚠️ Small text never wears raw --accent (--accent-deep is the
   readable warm ink); --accent is only ever a rule or border.

   ⚠️ READ AT ARM'S LENGTH. The live number is the biggest thing
   on each card and every proof row is one thumb-sized target.
   ============================================================ */

.tb-num[b-mc42bwyrlu] {
    padding: 0 2px 28px;
}

.tb-num__head[b-mc42bwyrlu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 10px;
    border-bottom: 2px solid var(--ink);
}

.tb-num__headline[b-mc42bwyrlu] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    color: var(--ink);
}

.tb-num__who[b-mc42bwyrlu] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--steel);
    text-align: right;
}

.tb-num__lede[b-mc42bwyrlu] {
    margin: 10px 2px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-num__offline[b-mc42bwyrlu],
.tb-num__error[b-mc42bwyrlu] {
    margin: 0 0 12px;
}

/* ── One metric ────────────────────────────────────────────── */

.tb-num__metric[b-mc42bwyrlu] {
    padding: 16px 14px 14px;
    transition: opacity 0.15s ease;
}

/* A read is in flight over the numbers on screen - dim, never blank. */
.tb-num__metric--busy[b-mc42bwyrlu] {
    opacity: 0.6;
}

.tb-num__top[b-mc42bwyrlu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tb-num__name[b-mc42bwyrlu] {
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

/* LIVE: still moving, the go colour - rides on .tb-stamp. */
.tb-num__stamp--live[b-mc42bwyrlu] {
    color: var(--ok);
    border-color: var(--ok);
}

.tb-num__when[b-mc42bwyrlu] {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--steel);
}

.tb-num__now[b-mc42bwyrlu] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
}

.tb-num__value[b-mc42bwyrlu] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.tb-num__against[b-mc42bwyrlu] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.tb-num__verdict[b-mc42bwyrlu] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
}

.tb-num__sentence[b-mc42bwyrlu] {
    flex: 1 1 180px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ink);
}

.tb-num__band[b-mc42bwyrlu] {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-soft);
}

/* The honest-reporting line - an aside, warm, never a banner. */
.tb-num__honest[b-mc42bwyrlu] {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    font-size: 13px;
    line-height: 1.4;
    color: var(--accent-deep);
}

/* Said once in full on the page; after that, one line. */
.tb-num__honest--short[b-mc42bwyrlu] {
    padding: 4px 10px;
    font-size: 12px;
}

/* THE CELEBRATION - new work past the baseline (Kirk, 2026-09-27 late: "Sales is ... one place
   were going ABOVE BASELINE will be celebrated"). The honest line's shape in the job ticket's
   "done" green: warm, said once, never a banner and never a trophy. */
.tb-num__cheer[b-mc42bwyrlu] {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--ok);
    background: var(--ok-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ok);
}

.tb-num__cheer--short[b-mc42bwyrlu] {
    padding: 4px 10px;
    font-size: 12px;
}

.tb-num__quiet[b-mc42bwyrlu] {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ── The verdict chip ──────────────────────────────────────── */

.tb-num__chip[b-mc42bwyrlu] {
    display: inline-block;
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 2px solid var(--line-hard);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: var(--ink-soft);
    background: var(--card);
}

.tb-num__chip--in[b-mc42bwyrlu] {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
}

.tb-num__chip--under[b-mc42bwyrlu] {
    border-color: var(--steel);
    color: var(--steel);
}

.tb-num__chip--above[b-mc42bwyrlu] {
    border-color: var(--accent-deep);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

/* ABOVE THE BASELINE ON NEW WORK - the one filled stamp on the page: green fill, paper text, the
   job ticket's chosen-and-done treatment. Only a celebrated beyond wears it; a plain "better than
   the baseline" is --in. */
.tb-num__chip--beyond[b-mc42bwyrlu] {
    border-color: var(--ok);
    background: var(--ok);
    color: var(--paper);
}

/* ── The door to the finds ─────────────────────────────────── */

.tb-num__finds[b-mc42bwyrlu] {
    margin: 12px 0 0;
    box-shadow: none;
}

/* ── The cards and their weights ───────────────────────────── */

.tb-num__cards[b-mc42bwyrlu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px dashed var(--line);
}

.tb-num__cards-label[b-mc42bwyrlu] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

.tb-num__cards-list[b-mc42bwyrlu] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
}

/* ── The proof ─────────────────────────────────────────────── */

.tb-num__pasthead[b-mc42bwyrlu] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px -14px 0;
    padding: 3px 14px;
    background: var(--steel);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
}

.tb-num__pastnote[b-mc42bwyrlu] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.tb-num__past[b-mc42bwyrlu] {
    display: flex;
    flex-direction: column;
}

.tb-num__row[b-mc42bwyrlu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 12px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--tap);
    padding: 8px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-num__row + .tb-num__row[b-mc42bwyrlu] {
    border-top: 2px dashed var(--line);
}

.tb-num__row:active:not(:disabled)[b-mc42bwyrlu] {
    background: var(--accent-soft);
}

.tb-num__row:focus-visible[b-mc42bwyrlu] {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.tb-num__row:disabled[b-mc42bwyrlu] {
    cursor: default;
}

.tb-num__rowdays[b-mc42bwyrlu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.tb-num__rowlabel[b-mc42bwyrlu] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--steel);
}

.tb-num__rowvalue[b-mc42bwyrlu] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    text-align: right;
}

.tb-num__rowverdict[b-mc42bwyrlu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.tb-num__rowhint[b-mc42bwyrlu] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    color: var(--accent-deep);
}

.tb-num__rowhint--cheer[b-mc42bwyrlu] {
    font-weight: 700;
    color: var(--ok);
}

.tb-num__chev[b-mc42bwyrlu] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--accent-deep);
}

/* A period with no number - drawn so it is never silently missing. */
.tb-num__row--gap[b-mc42bwyrlu] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    cursor: default;
}

.tb-num__row--gap .tb-num__rowdays[b-mc42bwyrlu] {
    color: var(--ink-soft);
}

.tb-num__gaptext[b-mc42bwyrlu] {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ink-soft);
}

.tb-num__more[b-mc42bwyrlu] {
    margin-top: 6px;
    min-height: 44px;
}

.tb-num__what[b-mc42bwyrlu] {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-num__what summary[b-mc42bwyrlu] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

/* A flex summary drops the browser's disclosure triangle, so the fold says so itself. */
.tb-num__what summary[b-mc42bwyrlu]::before {
    content: "+";
    font-family: var(--font-mono);
    font-size: 14px;
}

.tb-num__what[open] summary[b-mc42bwyrlu]::before {
    content: "–";
}

.tb-num__what p[b-mc42bwyrlu] {
    margin: 4px 0 0;
}

.tb-num__checked[b-mc42bwyrlu] {
    margin: 4px 2px 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--steel);
}

.tb-num__foot[b-mc42bwyrlu] {
    margin: 12px 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
}

.tb-num__again[b-mc42bwyrlu] {
    margin-top: 4px;
}

/* A CARD'S OWN TARGET (2026-09-28) - the card line opens into its own small block: what the card
   asks, its live verdict on the same count, and the weeks it scored against its number. A rail
   rather than a panel colour: it is a second verdict on the same number, not a louder one. */
.tb-num__owncard[b-mc42bwyrlu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 8px;
    padding-left: 10px;
    border-left: 3px solid var(--line-hard);
}

.tb-num__owntarget[b-mc42bwyrlu] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.45;
    color: var(--accent-deep);
}

.tb-num__ownrow[b-mc42bwyrlu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.tb-num__ownrow + .tb-num__ownrow[b-mc42bwyrlu] {
    border-top: 2px dashed var(--line);
}

.tb-num__ownrow .tb-num__rowdays[b-mc42bwyrlu] {
    font-size: 13px;
}

.tb-num__ownrow .tb-num__rowvalue[b-mc42bwyrlu] {
    font-size: 16px;
}
/* /Pages/OutboxPage.razor.rz.scp.css */
/* THE OUTBOX SCREEN - the job-ticket look, tokens from wwwroot/css/app.css only. */

.rk-obx__status[b-eaykjdyuo5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rk-obx__line[b-eaykjdyuo5] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 4px;
}

.rk-obx__key[b-eaykjdyuo5] {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.rk-obx__val[b-eaykjdyuo5] {
    font-family: var(--font-mono);
    text-align: right;
    color: var(--ink);
}

/* TAKEN, NOT SENT - one place a line, each with its OPEN (lane OF - OR-1). */
.rk-obx__places[b-eaykjdyuo5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rk-obx__open[b-eaykjdyuo5] {
    margin-left: 6px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink);
    white-space: nowrap;
}

.rk-obx__val--ok[b-eaykjdyuo5] {
    color: var(--ok);
    font-weight: 600;
}

.rk-obx__val--off[b-eaykjdyuo5] {
    color: var(--danger);
    font-weight: 600;
}

.rk-obx__h2[b-eaykjdyuo5] {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    margin: 18px 0 4px;
    color: var(--ink);
}

.rk-obx__h2--check[b-eaykjdyuo5] {
    color: var(--danger-ink);
}

.rk-obx__hint[b-eaykjdyuo5] {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 8px;
}

.rk-obx__row[b-eaykjdyuo5] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.rk-obx__row--check[b-eaykjdyuo5] {
    flex-direction: column;
    background: var(--danger-soft);
    border-color: var(--danger);
}

.rk-obx__body[b-eaykjdyuo5] {
    flex: 1;
    min-width: 0;
}

.rk-obx__what[b-eaykjdyuo5] {
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.rk-obx__meta[b-eaykjdyuo5] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

/* The transport's diagnosis, folded away (lane OF - OD-8). */
.rk-obx__detail[b-eaykjdyuo5] {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--ink-soft);
    word-break: break-word;
}

.rk-obx__detail summary[b-eaykjdyuo5] {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    cursor: pointer;
}

.rk-obx__why[b-eaykjdyuo5] {
    color: var(--danger-ink);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.rk-obx__thumb[b-eaykjdyuo5] {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 1px solid var(--line-hard);
    flex: none;
}

.rk-obx__bar[b-eaykjdyuo5] {
    height: 6px;
    background: var(--line);
    margin-top: 6px;
}

.rk-obx__bar span[b-eaykjdyuo5] {
    display: block;
    height: 100%;
    background: var(--ok);
}
/* /Pages/Paycard.razor.rz.scp.css */
/* ============================================================
   THE PAYCARD — a technician's own hours and pay, on a phone.

   Every colour, radius and font below is a token from
   wwwroot/css/app.css :root, verified present before use:
   --ink, --ink-soft, --paper, --card, --line, --line-hard,
   --accent, --accent-deep, --accent-soft, --steel, --ok,
   --danger-ink, --font-display, --font-mono, --corner, --tap.
   No raw hex.
   Font sizes are px, as they are in every stylesheet in this
   app — its token set has no type scale (Day.razor.css is the
   same).

   ⚠️ SMALL TEXT NEVER WEARS RAW --accent. --accent-deep is the
   readable warm ink here; --accent is only ever a rule or a
   border. And the ink/paper pair is the house pair: this app
   has no prefers-color-scheme block, so neither flips.

   ⚠️ READ AT ARM'S LENGTH IN A TRUCK. The gross is the biggest
   thing on the screen, the steppers are --tap tall, and every
   visit row is one thumb-sized target.
   ============================================================ */

.tb-pay[b-6u8ogxfr0v] {
    padding: 0 2px 28px;
}

/* ── The heading ───────────────────────────────────────────── */

.tb-pay__head[b-6u8ogxfr0v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 10px;
    border-bottom: 2px solid var(--ink);
}

.tb-pay__headline[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.tb-pay__who[b-6u8ogxfr0v] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--steel);
    text-align: right;
}

.tb-pay__offline[b-6u8ogxfr0v],
.tb-pay__error[b-6u8ogxfr0v] {
    margin: 12px 0 0;
}

.tb-pay__blocked[b-6u8ogxfr0v] {
    margin-top: 12px;
}

/* ── The period stepper ────────────────────────────────────── */

.tb-pay__steps[b-6u8ogxfr0v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.tb-pay__step[b-6u8ogxfr0v] {
    flex: 0 0 auto;
    min-width: 76px;
    min-height: var(--tap);
    padding: 0 10px;
    background: var(--card);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: var(--corner);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-pay__step:active:not(:disabled)[b-6u8ogxfr0v] {
    background: var(--ink);
    color: var(--paper);
}

.tb-pay__step:focus-visible[b-6u8ogxfr0v] {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.tb-pay__step:disabled[b-6u8ogxfr0v] {
    border-color: var(--line-hard);
    color: var(--line-hard);
    cursor: default;
}

.tb-pay__period[b-6u8ogxfr0v] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tb-pay__dates[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.tb-pay__caption[b-6u8ogxfr0v] {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
}

/* ── The card ──────────────────────────────────────────────── */

.tb-pay__card[b-6u8ogxfr0v] {
    transition: opacity 0.15s ease;
}

/* A read is in flight over the card on screen - dim it rather
   than blank it, so the numbers never flash away. */
.tb-pay__card--busy[b-6u8ogxfr0v] {
    opacity: 0.55;
}

.tb-pay__top[b-6u8ogxfr0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tb-pay__label[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}

/* LIVE: still moving, so the go colour. Rides on app.css's
   .tb-stamp and only swaps the ink. */
.tb-pay__stamp--live[b-6u8ogxfr0v] {
    color: var(--ok);
    border-color: var(--ok);
}

.tb-pay__gross[b-6u8ogxfr0v] {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.tb-pay__status[b-6u8ogxfr0v] {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* The breakdown: three columns that line up down the card. */
.tb-pay__table[b-6u8ogxfr0v] {
    margin-top: 14px;
    border-top: 2px dashed var(--line);
    padding-top: 8px;
}

.tb-pay__line[b-6u8ogxfr0v] {
    display: grid;
    grid-template-columns: 1fr 72px 104px;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
}

.tb-pay__line > span:first-child[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--ink);
}

.tb-pay__line > span:not(:first-child)[b-6u8ogxfr0v] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    text-align: right;
    color: var(--ink);
}

.tb-pay__line--head[b-6u8ogxfr0v] {
    padding-top: 0;
    padding-bottom: 0;
}

.tb-pay__line--head > span:not(:first-child)[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--steel);
}

/* Overtime in the period: marked, warm, and never raw accent
   under text. */
.tb-pay__line--ot[b-6u8ogxfr0v] {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    padding-left: 4px;
}

.tb-pay__line--ot > span:first-child[b-6u8ogxfr0v],
.tb-pay__line--ot > span:not(:first-child)[b-6u8ogxfr0v] {
    color: var(--accent-deep);
}

.tb-pay__otnote[b-6u8ogxfr0v] {
    padding: 0 8px 4px;
    font-size: 12px;
    color: var(--ink-soft);
}

.tb-pay__rates[b-6u8ogxfr0v] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px dashed var(--line);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
}

.tb-pay__checked[b-6u8ogxfr0v] {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--steel);
}

.tb-pay__notice[b-6u8ogxfr0v] {
    margin-top: 0;
}

/* ── The visits behind it ──────────────────────────────────── */

.tb-pay__visits[b-6u8ogxfr0v] {
    padding: 0;
}

.tb-pay__visit[b-6u8ogxfr0v] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--tap);
    padding: 12px 12px 12px 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-pay__visit + .tb-pay__visit[b-6u8ogxfr0v] {
    border-top: 2px dashed var(--line);
}

.tb-pay__visit:active:not(:disabled)[b-6u8ogxfr0v] {
    background: var(--accent-soft);
}

.tb-pay__visit:focus-visible[b-6u8ogxfr0v] {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

.tb-pay__visit:disabled[b-6u8ogxfr0v] {
    cursor: default;
}

/* The visit that carried overtime wears the same left rule as
   the overtime line in the card, so the two read as one fact. */
.tb-pay__visit--ot[b-6u8ogxfr0v] {
    box-shadow: inset 4px 0 0 var(--accent);
}

.tb-pay__day[b-6u8ogxfr0v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tb-pay__dow[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--steel);
}

.tb-pay__dom[b-6u8ogxfr0v] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    color: var(--ink-soft);
    white-space: nowrap;
}

.tb-pay__body[b-6u8ogxfr0v] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tb-pay__no[b-6u8ogxfr0v] {
    align-self: flex-start;
    padding: 1px 6px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
}

/* Two lines, then an ellipsis - a site name is what a technician
   recognises the visit by, so it gets room before it gets cut. */
.tb-pay__site[b-6u8ogxfr0v] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    color: var(--ink);
}

.tb-pay__when[b-6u8ogxfr0v] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-soft);
}

.tb-pay__ot[b-6u8ogxfr0v] {
    align-self: flex-start;
    padding: 1px 6px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-deep);
    color: var(--accent-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.tb-pay__amt[b-6u8ogxfr0v] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.tb-pay__hrs[b-6u8ogxfr0v] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.tb-pay__cash[b-6u8ogxfr0v] {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-soft);
}

.tb-pay__chev[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--accent-deep);
}

/* ── Commission ────────────────────────────────────────────── */

/* The breakdown's commission line: inside the gross, so it reads as
   one more line of it - a rule above to set it apart from time. */
.tb-pay__line--comm[b-6u8ogxfr0v] {
    margin-top: 4px;
    border-top: 1px solid var(--line);
    padding-top: 8px;
}

.tb-pay__role[b-6u8ogxfr0v] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* Said once above the list: earned in an earlier period and still owed,
   so it rides on this check. Warm aside, not a warning. */
.tb-pay__carry[b-6u8ogxfr0v] {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    font-size: 13px;
    line-height: 1.35;
    color: var(--accent-deep);
}

/* Why a reversal happened - a bounced payment, a credit. */
.tb-pay__reason[b-6u8ogxfr0v] {
    font-size: 12px;
    line-height: 1.3;
    color: var(--danger-ink);
}

.tb-pay__comm--rev .tb-pay__hrs[b-6u8ogxfr0v] {
    color: var(--danger-ink);
}

/* ── Onward ────────────────────────────────────────────────── */

.tb-pay__now[b-6u8ogxfr0v] {
    margin-top: 4px;
}

.tb-pay__again[b-6u8ogxfr0v] {
    margin-top: 4px;
}
/* /Pages/Present.razor.rz.scp.css */
/* ============================================================
   PRESENT - the quote in front of the customer, and their
   signed approve or decline (2026-10-15).

   🛑 EVERY COLOUR, SIZE AND FONT BELOW IS A TOKEN FROM
   wwwroot/css/app.css :root, each checked to exist before use:
   --ink, --ink-soft, --line, --line-hard, --card, --accent,
   --accent-soft, --ok, --ok-soft, --ok-deep, --danger-ink,
   --danger-soft, --font-display, --font-mono, --corner. No raw
   hex. The structure leans on app.css (tb-card, tb-sect, tb-btn,
   tb-input) exactly as the invoice and FOUND WORK do.

   THE CUSTOMER READS THIS ONE. Bigger money, plain words, and the
   option they picked is unmistakable from arm's length.
   ============================================================ */

.tb-pres__gap[b-u3swjxi51x] {
    margin-bottom: 10px;
}

.tb-pres__head[b-u3swjxi51x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-pres__cust[b-u3swjxi51x] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
}

.tb-pres__site[b-u3swjxi51x] {
    font-size: 15px;
    line-height: 1.35;
    color: var(--ink-soft);
}

.tb-pres__meta[b-u3swjxi51x] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-soft);
}

/* ── A LINE: what, how many, how much ───────────────────────── */

.tb-pres__line[b-u3swjxi51x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 10px;
    align-items: baseline;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.tb-pres__line:last-child[b-u3swjxi51x] {
    border-bottom: 0;
}

.tb-pres__line--sum[b-u3swjxi51x] {
    font-weight: 700;
}

.tb-pres__desc[b-u3swjxi51x] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    color: var(--ink);
}

.tb-pres__qty[b-u3swjxi51x] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
}

.tb-pres__amt[b-u3swjxi51x] {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--ink);
}

/* ── GOOD / BETTER / BEST - a card the customer taps ───────── */

.tb-pres__opt[b-u3swjxi51x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin-bottom: 10px;
    border: 2px solid var(--line-hard);
    text-align: left;
    color: var(--ink);
    font: inherit;
}

.tb-pres__opt--on[b-u3swjxi51x] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tb-pres__opthead[b-u3swjxi51x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.tb-pres__optname[b-u3swjxi51x] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
}

.tb-pres__optamt[b-u3swjxi51x] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
}

/* The option's before-tax amount and its tax, under the total-with-tax the customer signs. */
.tb-pres__opttax[b-u3swjxi51x] {
    display: block;
    width: 100%;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
}

.tb-pres__total[b-u3swjxi51x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.tb-pres__totalamt[b-u3swjxi51x] {
    font-family: var(--font-mono);
    font-size: 24px;
}

/* ── WHO SIGNS ─────────────────────────────────────────────── */

.tb-pres__chips[b-u3swjxi51x] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}

.tb-pres__chip[b-u3swjxi51x] {
    min-height: 36px;
    cursor: pointer;
}

.tb-pres__reason--on[b-u3swjxi51x] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.tb-pres__acts[b-u3swjxi51x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* ── RECORDED ──────────────────────────────────────────────── */

.tb-pres__ok[b-u3swjxi51x],
.tb-pres__no[b-u3swjxi51x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.tb-pres__ok[b-u3swjxi51x] {
    border: 2px solid var(--ok);
    background: var(--ok-soft);
}

.tb-pres__no[b-u3swjxi51x] {
    border: 2px solid var(--line-hard);
    background: var(--danger-soft);
}

.tb-pres__okmark[b-u3swjxi51x] {
    font-size: 28px;
    line-height: 1;
    color: var(--ok-deep);
}

.tb-pres__no .tb-pres__okmark[b-u3swjxi51x] {
    color: var(--danger-ink);
}

.tb-pres__oklead[b-u3swjxi51x] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
}

.tb-pres__oksub[b-u3swjxi51x] {
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink-soft);
}
/* /Pages/Run.razor.rz.scp.css */
/* ============================================================
   THE RUNNER - one step at a time, one thumb, one hand.

   🛑 EVERY COLOUR, SIZE AND RADIUS BELOW IS A TOKEN FROM
   wwwroot/css/app.css. Each one was checked to exist before it
   was used here: --ink, --ink-soft, --paper, --card, --line,
   --line-hard, --accent, --accent-deep, --accent-soft, --steel,
   --ok, --ok-soft, --danger, --danger-soft, --danger-ink,
   --font-body, --font-display, --font-mono, --corner, --tap.
   There is no raw hex in this file.

   ⚠️ THIS APP HAS ONE THEME - warm paper - and no dark flip, so
   the "dark background + near-white text that also resolves
   dark" trap cannot fire here. The dark chrome below pairs
   --ink with --paper, which are 14.8:1 apart and defined once.

   THE SIZING RULE IS A PERSON IN A TRUCK. Nothing tappable is
   under --tap (56px), the single forward button is 64, and the
   ask is 25px because it is read at arm's length in sunlight.
   ============================================================ */

.tb-run[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 40px;
}

/* ── THE RAIL ─────────────────────────────────────────────── */

.tb-run__rail[b-t2fq5u1tfp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}

.tb-run__leave[b-t2fq5u1tfp] {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-hard);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.06em;
}

.tb-run__id[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

/* WAITING IS NOT AN ERROR, so it is steel and not red. The
   answer is safe on the phone; only the sending is late. */
.tb-run__owed[b-t2fq5u1tfp] {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--steel);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* ── WHAT THIS RUN IS, AND HOW FAR ────────────────────────── */

.tb-run__head[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-run__what[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tb-run__where[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
}

.tb-run__togo[b-t2fq5u1tfp] {
    color: var(--accent-deep);
}

.tb-run__bar[b-t2fq5u1tfp] {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.tb-run__bar-fill[b-t2fq5u1tfp] {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 160ms ease-out;
}

/* ── THE STEP CARD ────────────────────────────────────────── */

.tb-run__step[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* THE ASK IS THE BIGGEST THING ON THE SCREEN, on purpose. A
   technician reads one question at arm's length and answers it;
   anything competing with it is a step toward a form. */
.tb-run__ask[b-t2fq5u1tfp] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

/* pre-line: the line breaks an author types stay ("****** STOP! ******" on its own line, 2026-11-10). */
.tb-run__prompt[b-t2fq5u1tfp] {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink-soft);
    white-space: pre-line;
}

.tb-run__desc[b-t2fq5u1tfp] {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
    white-space: pre-line;
}

.tb-run__readonly[b-t2fq5u1tfp] {
    font-size: 14px;
    color: var(--ink-soft);
    font-style: italic;
}

/* NEVER REACHES THE CUSTOMER'S COPY. Said on the step, because
   whether an answer is internal changes what somebody writes. */
.tb-run__internal[b-t2fq5u1tfp] {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--steel);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* ── OPTIONS - the answer and the next move in one tap ────── */

.tb-run__opts[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-run__opt[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: var(--tap);
    padding: 14px 16px;
    text-align: left;
    border: 2px solid var(--line-hard);
    border-radius: var(--corner);
    background: var(--card);
    color: var(--ink);
}

.tb-run__opt:active[b-t2fq5u1tfp] {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.tb-run__opt--on[b-t2fq5u1tfp] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* The sign-off step's "Signed" leg: PRESENT's confirmed result answers it, never a tap. */
.tb-run__opt--locked[b-t2fq5u1tfp] {
    border-style: dashed;
    color: var(--ink-soft);
}

.tb-run__opt-name[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.tb-run__opt-sub[b-t2fq5u1tfp] {
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink-soft);
}

/* ── TYPED ANSWERS ────────────────────────────────────────── */

.tb-run__in[b-t2fq5u1tfp],
.tb-run__area[b-t2fq5u1tfp] {
    width: 100%;
    min-height: var(--tap);
    font-size: 18px;
}

.tb-run__area[b-t2fq5u1tfp] {
    min-height: 120px;
    line-height: 1.45;
}

/* ── THE SIGNATURE ─────────────────────────────────────────
   The pad and its rules live in Components/SignaturePad.razor(.css) since 2026-10-15 -
   shared with the PRESENT screen, so scoped CSS had to travel with the markup. */

/* ── LOCATION ─────────────────────────────────────────────── */

.tb-run__geo[b-t2fq5u1tfp] {
    min-height: var(--tap);
    border: 2px solid var(--steel);
    border-radius: var(--corner);
    background: var(--card);
    color: var(--steel);
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.08em;
}

.tb-run__fix[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--corner);
    background: var(--ok-soft);
    border: 1px solid var(--ok);
}

.tb-run__fix-val[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--ink);
}

.tb-run__fix-sub[b-t2fq5u1tfp] {
    font-size: 12px;
    color: var(--ink-soft);
}

/* ── FILES - the named shot list ──────────────────────────── */

.tb-run__slots[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-run__slot[b-t2fq5u1tfp] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 12px 14px;
    text-align: left;
    border: 2px solid var(--line-hard);
    border-radius: var(--corner);
    background: var(--card);
    color: var(--ink);
}

.tb-run__slot--done[b-t2fq5u1tfp] {
    border-color: var(--ok);
    background: var(--ok-soft);
}

.tb-run__slot-glyph[b-t2fq5u1tfp] {
    font-size: 22px;
    line-height: 1;
    color: var(--steel);
}

/*
    THE SHOT IN THE SLOT. Square and fixed so the row does not jump as each photograph
    arrives, and cover rather than contain because a thumbnail of a data plate wants the
    middle of the frame, not letterboxing. It sits exactly where the glyph did, so a filled
    slot and an empty one are the same shape.
*/
.tb-run__slot-shot[b-t2fq5u1tfp] {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    background: var(--ink);
    border: 1px solid var(--ok);
}

.tb-run__slot--done .tb-run__slot-glyph[b-t2fq5u1tfp] {
    color: var(--ok);
}

.tb-run__slot-body[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tb-run__slot-name[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

.tb-run__slot-sub[b-t2fq5u1tfp] {
    font-size: 12px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

.tb-run__add[b-t2fq5u1tfp] {
    min-height: var(--tap);
    border: 2px dashed var(--line-hard);
    border-radius: var(--corner);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.08em;
}

.tb-run__filecount[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
}

/* ── THE RIDE-ALONG ───────────────────────────────────────── */

.tb-run__ridelabel[b-t2fq5u1tfp] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.tb-run__must[b-t2fq5u1tfp] {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.1em;
}

.tb-run__ridenote[b-t2fq5u1tfp] {
    width: 100%;
    min-height: 84px;
    font-size: 16px;
    line-height: 1.45;
}

.tb-run__ridephoto[b-t2fq5u1tfp] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap);
    padding: 12px 14px;
    border: 2px dashed var(--line-hard);
    border-radius: var(--corner);
    background: transparent;
    color: var(--ink);
}

.tb-run__ridephoto-glyph[b-t2fq5u1tfp] {
    font-size: 20px;
    line-height: 1;
    color: var(--steel);
}

.tb-run__ridephoto-name[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.02em;
}

/* ── WHAT THE STEP STILL WANTS, AND WHAT STOPPED IT ───────── */

.tb-run__needs[b-t2fq5u1tfp] {
    padding: 10px 14px;
    border-radius: var(--corner);
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    color: var(--accent-deep);
    font-size: 14px;
    line-height: 1.4;
}

/* THE BLOCK PANEL SAYS THE ANSWER IS SAVED, and that sentence
   is the whole of decision 43 on a screen: the run stopped, the
   capture did not. */
.tb-run__blocked[b-t2fq5u1tfp] {
    padding: 12px 14px;
    border-radius: var(--corner);
    background: var(--danger-soft);
    border-left: 4px solid var(--danger);
    color: var(--danger-ink);
    font-size: 14px;
    line-height: 1.45;
}

.tb-run__cant[b-t2fq5u1tfp] {
    padding: 10px 14px;
    border-radius: var(--corner);
    background: var(--paper);
    border: 1px dashed var(--line-hard);
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.45;
}

/* AN OFFICE STEP, SEEN FROM THE FIELD. A Choice carrying a capability is
   done on a portal page; the phone says so above the options. Plain on
   purpose - steel edge, paper ground - because it is a fact about where
   the work happens, not a fault and not a warning. Its OWN class rather
   than .tb-run__cant, which means "this app cannot draw that", and the
   two must be free to change apart. */
.tb-run__portal[b-t2fq5u1tfp] {
    padding: 10px 14px;
    border-radius: var(--corner);
    background: var(--paper);
    border-left: 4px solid var(--steel);
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.45;
}

/* ── ONWARD ───────────────────────────────────────────────── */

.tb-run__next[b-t2fq5u1tfp] {
    min-height: 64px;
    border: none;
    border-radius: var(--corner);
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tb-run__next:active[b-t2fq5u1tfp] {
    background: var(--accent-deep);
}

.tb-run__next:disabled[b-t2fq5u1tfp] {
    background: var(--line-hard);
    color: var(--paper);
}

.tb-run__finish[b-t2fq5u1tfp] {
    min-height: 68px;
    border: none;
    border-radius: var(--corner);
    background: var(--ok);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.tb-run__back[b-t2fq5u1tfp],
.tb-run__stop[b-t2fq5u1tfp] {
    min-height: 48px;
    border: 1px solid var(--line-hard);
    border-radius: var(--corner);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
}

/* STOP IS FINDABLE AND NOT INVITING. It is a real need - the
   wrong run gets started at 6am - and it is destructive, so it
   sits at the bottom, in words, behind a second tap. */
.tb-run__stop[b-t2fq5u1tfp] {
    margin-top: 18px;
    color: var(--danger-ink);
    border-color: var(--danger-soft);
}

.tb-run__wide[b-t2fq5u1tfp] {
    width: 100%;
    min-height: var(--tap);
}

/* ── THE REVIEW ───────────────────────────────────────────── */

.tb-run__ans[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tb-run__ansq[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

.tb-run__ansv[b-t2fq5u1tfp] {
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
    word-break: break-word;
}

/*
    THE PICTURES ON THE REVIEW. They wrap rather than scroll: a courier with six bag shots
    has to be able to see all six at once to know which one is missing.
*/
.tb-run__shots[b-t2fq5u1tfp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
}

.tb-run__shot[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 96px;
    margin: 0;
}

.tb-run__shot-img[b-t2fq5u1tfp] {
    display: block;
    width: 96px;
    height: 72px;
    object-fit: cover;
    background: var(--ink);
    border: 1px solid var(--line-hard);
}

/* A frame with no link is NOT a missing photograph and must not look like one. */
.tb-run__shot-none[b-t2fq5u1tfp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 72px;
    padding: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-align: center;
    color: var(--steel);
    background: var(--card);
    border: 1px dashed var(--line-hard);
}

.tb-run__shot-cap[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

/* ── DONE ─────────────────────────────────────────────────── */

.tb-run__done[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 28px 18px;
}

.tb-run__done-mark[b-t2fq5u1tfp] {
    font-size: 44px;
    line-height: 1;
    color: var(--ok);
}

.tb-run__done-head[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.tb-run__done-sub[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
}

/* ── A THUMBNAIL IS A BUTTON NOW ────────────────────────────

   The strip keeps the 96x72 tile the review already used, which is what makes
   "a bunch" work: .tb-run__shots is flex-wrap, so twenty captures become four
   rows of ~96px rather than one row that scrolls sideways off a phone, and
   NEXT stays where the thumb expects it.

   ⚠️ The tile is the tap target, deliberately. A 96x72 button clears the 44px
   minimum on both axes, so this needs no --tap padding and gains no dead
   margin - which matters because the strip sits directly above NEXT and any
   slop here is a mis-tap on the primary action. */

.tb-run__shot-tap[b-t2fq5u1tfp] {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.tb-run__ridephoto-img[b-t2fq5u1tfp] {
    display: block;
    width: 56px;
    height: 42px;
    object-fit: cover;
    background: var(--ink);
    border: 1px solid var(--line-hard);
    flex: 0 0 auto;
}

/* ── THE EXPAND ──────────────────────────────────────

   Anywhere on the sheet closes it. A tech in a glove should not have to find
   an X, and there is nothing on this layer to hit by accident.

   ⚠️ contain, not cover: this is the one place somebody is trying to READ a
   serial plate, and cropping to fill would cut off the edge they zoomed in for. */

.tb-run__zoom[b-t2fq5u1tfp] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.92);
}

.tb-run__zoom-img[b-t2fq5u1tfp] {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
}

.tb-run__zoom-x[b-t2fq5u1tfp] {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: var(--tap);
    min-height: var(--tap);
    border: 0;
    background: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.tb-run__zoom-cap[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: center;
    color: #fff;
}

/* ── WHAT THE SERVER REFUSED ───────────────────────────

   Wears .tb-error, because it IS an error - the distinction it is drawing
   is against the calm .tb-note beside it, which means "safe, sending is
   late". Those two states read identically before today and that is how a
   permanently jammed queue looked like a patient one. */

.tb-run__refused[b-t2fq5u1tfp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-run__refused-head[b-t2fq5u1tfp] {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

.tb-run__refused-why[b-t2fq5u1tfp] {
    font-size: 14px;
    line-height: 1.4;
}

.tb-run__refused-acts[b-t2fq5u1tfp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

/* ── SCAN OR TYPE ──────────────────────────────────────

   The box and the button sit on one row because they are two ways to fill
   the SAME field, not a field and an action. Mono and uppercase for the
   same reason the scanner sheet uses them: a bag number is read back
   character by character against a sticker and 0/O is the whole problem. */

.tb-run__scanrow[b-t2fq5u1tfp] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.tb-run__scanval[b-t2fq5u1tfp] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* CLEAR, AS A SMALL WORD ON THE NOTE LINE (Kirk 2026-11-11: the ✕ in the row "is terrible").
   It empties the box; the row above keeps its width for the number and SCAN. */
.tb-run__clearlink[b-t2fq5u1tfp] {
    background: none;
    border: none;
    padding: 0;
    margin-right: 10px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.tb-run__scanbtn[b-t2fq5u1tfp] {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: var(--tap);
    border: 0;
    border-radius: var(--corner);
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.tb-run__scanbtn:disabled[b-t2fq5u1tfp] {
    opacity: 0.5;
    cursor: default;
}

.tb-run__scannote[b-t2fq5u1tfp] {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--steel);
}

/* ── The bag, checked (2026-10-07) ─────────────────────────── */

/* Under the scanned number: whether it is the bag on the driver's
   chip, and who else holds it. Calm when it is theirs, loud when it
   is not - never a block (decision 43). */
.tb-run__bag[b-t2fq5u1tfp] {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--corner);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.35;
}

.tb-run__bag--ok[b-t2fq5u1tfp] {
    background: var(--ok-soft);
    border: 1px solid var(--ok);
    color: var(--ink);
}

.tb-run__bag--warn[b-t2fq5u1tfp] {
    background: var(--danger-soft);
    border: 2px solid var(--danger);
    color: var(--danger-ink);
    font-weight: 600;
}

/* What the host said about the stop when the run finished - "The visit
   moved to Complete." Read at a glance, so the driver need not open the job. */
.tb-run__done-note[b-t2fq5u1tfp] {
    display: block;
    margin-top: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--ok);
}

/* VOIDED BY THE OFFICE (2026-11-09, lane VOIDSHOW) - never the green of a counted finish. The sentence reads
   as prose: who, when, why, and that the answers below are kept. */
.tb-run__done--void .tb-run__done-mark[b-t2fq5u1tfp] {
    color: var(--ink-soft);
}

.tb-run__done-void[b-t2fq5u1tfp] {
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--ink);
}

/* ── The two-level bags (2026-10-07, lane AE) ─────────────────
   The bank bags on a stop so far, OUR bag's manifest at the bank and
   the end-of-day check. A list a driver reads at arm's length: the
   code big and mono, where it came from small, its state on the right.
   Calm when everything is where it should be, loud when it is not -
   and never a block (decision 43). */
.tb-run__custody[b-t2fq5u1tfp] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--corner);
    background: var(--paper);
    border: 1px solid var(--line-hard);
}

.tb-run__custody-head[b-t2fq5u1tfp] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--steel);
    margin-bottom: 6px;
}

.tb-run__custody-bag[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    color: var(--ink);
}

.tb-run__custody-codes[b-t2fq5u1tfp] {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    word-break: break-word;
}

.tb-run__custody-note[b-t2fq5u1tfp] {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.tb-run__custody-ok[b-t2fq5u1tfp] {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: var(--corner);
    background: var(--ok-soft);
    border: 1px solid var(--ok);
    color: var(--ink);
    font-size: 15px;
}

.tb-run__custody-warn[b-t2fq5u1tfp] {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--corner);
    background: var(--danger-soft);
    border: 2px solid var(--danger);
    color: var(--danger-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tb-run__mline[b-t2fq5u1tfp] {
    display: grid;
    grid-template-columns: fit-content(60%) minmax(0, 1fr);
    grid-template-areas:
        "code state"
        "from from";
    column-gap: 8px;
    padding: 7px 0;
    border-top: 1px solid var(--line);
}

.tb-run__mline:first-of-type[b-t2fq5u1tfp] {
    border-top: 0;
}

.tb-run__mcode[b-t2fq5u1tfp] {
    grid-area: code;
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--ink);
    word-break: break-all;
}

.tb-run__mfrom[b-t2fq5u1tfp] {
    grid-area: from;
    font-size: 13px;
    color: var(--ink-soft);
}

.tb-run__mstate[b-t2fq5u1tfp] {
    grid-area: state;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--steel);
    align-self: center;
    text-align: right;
}

.tb-run__mline--out .tb-run__mstate[b-t2fq5u1tfp] {
    color: var(--ok);
    font-weight: 700;
}

.tb-run__mline--out .tb-run__mcode[b-t2fq5u1tfp] {
    color: var(--ink-soft);
}

.tb-run__mline--missing .tb-run__mcode[b-t2fq5u1tfp],
.tb-run__mline--missing .tb-run__mstate[b-t2fq5u1tfp] {
    color: var(--danger-ink);
    font-weight: 700;
}
/* /Pages/Site.razor.rz.scp.css */
/* SITE HISTORY, THE NEWEST TEN (2026-11-02) - the card ends in ALL n JOBS, which opens the
   sheet; the sheet ends in OLDER JOBS when the site holds more than this phone has read. */
.tb-hist__all[b-hta46zoblz] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap);
    padding: 8px 14px;
    background: transparent;
    border: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-hist__all .tb-row__chev[b-hta46zoblz] {
    margin-left: auto;
}

.tb-hist__all:active[b-hta46zoblz] {
    background: var(--accent-soft);
}

.tb-hist__more[b-hta46zoblz] {
    width: 100%;
    margin-top: 12px;
}
/* ── WORK DONE HERE - the runs at this site, expandable to their pictures ── */

.tb-workrun + .tb-workrun[b-hta46zoblz] {
    border-top: 1px solid var(--line);
}

.tb-workrun__row[b-hta46zoblz] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 2px;
    background: none;
    border: 0;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.tb-workrun__row:active[b-hta46zoblz] {
    background: var(--accent-soft);
}

.tb-workrun__body[b-hta46zoblz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tb-workrun__name[b-hta46zoblz] {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tb-workrun__meta[b-hta46zoblz] {
    font-size: 13px;
    color: var(--ink-dim);
}

.tb-workrun__go[b-hta46zoblz] {
    margin-left: auto;
    color: var(--ink-dim);
    font-size: 18px;
}

.tb-workrun__none[b-hta46zoblz] {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ink-dim);
}

.tb-album--inrun[b-hta46zoblz] {
    padding: 0 0 12px;
}
/* /Pages/Truck.razor.rz.scp.css */
/* ============================================================
   YOUR VEHICLE AND BAGS (CUSTODY.md S2, 2026-10-14).

   SCAN is first because it is one tap where the list is two;
   then the VEHICLE list with OFFICE at its head, then the BAGS.
   Tokens only, from wwwroot/css/app.css.
   ============================================================ */

.tb-truck__scan[b-z006zx5ppk] {
    width: 100%;
    margin-bottom: 14px;
}

.tb-truck__list[b-z006zx5ppk] {
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
}

.tb-truck__head[b-z006zx5ppk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--paper);
}

.tb-truck__headline[b-z006zx5ppk] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
}

.tb-truck__now[b-z006zx5ppk] {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-truck__row--on[b-z006zx5ppk] {
    background: var(--ok-soft);
}

.tb-truck__tick[b-z006zx5ppk] {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ok-deep);
}

.tb-truck__back[b-z006zx5ppk] {
    width: auto;
    flex-shrink: 0;
}

/* The row's title and meta stack - they are spans inside a button. */
.tb-truck__row .tb-row__title[b-z006zx5ppk],
.tb-truck__row .tb-row__meta[b-z006zx5ppk] {
    display: block;
}

.tb-truck__sub[b-z006zx5ppk] {
    padding: 10px 14px 4px;
    border-top: 2px solid var(--line-hard);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.tb-truck__pad[b-z006zx5ppk] {
    margin: 0;
    padding: 12px 14px;
}

.tb-truck__confirm[b-z006zx5ppk] {
    border: 2px solid var(--danger);
}

.tb-truck__confirm-lead[b-z006zx5ppk] {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--danger-ink);
}

.tb-truck__handedback[b-z006zx5ppk] {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--ok);
    border-radius: var(--corner);
    background: var(--ok-soft);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}

.tb-truck__handback[b-z006zx5ppk] {
    width: 100%;
    margin-bottom: 10px;
}
/* /Pages/VanCount.razor.rz.scp.css */
/* VAN INVENTORY - the turbo counter. Tokens only; the keypad is the one new idiom. */

.vc__sheet[b-zmhhd2w846] {
    text-align: center;
}

.vc__partno[b-zmhhd2w846] {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.vc__desc[b-zmhhd2w846] {
    color: var(--steel);
    font-size: 13px;
    margin: 2px 0 6px;
}

.vc__system[b-zmhhd2w846] {
    font-size: 13px;
    margin-bottom: 10px;
}

.vc__display[b-zmhhd2w846] {
    font-family: var(--font-mono);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    padding: 6px 0 10px;
    font-variant-numeric: tabular-nums;
}

.vc__display--empty[b-zmhhd2w846] {
    color: var(--steel);
}

.vc__pad[b-zmhhd2w846] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 290px;
    margin: 0 auto 12px;
}

.vc__key[b-zmhhd2w846] {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    padding: 12px 0;
    min-height: var(--tap);
    background: var(--paper);
    border: 1.5px solid var(--line-hard);
    color: var(--ink);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.vc__key:active[b-zmhhd2w846] {
    background: var(--accent);
    color: var(--paper);
}

.vc__key--back[b-zmhhd2w846] {
    font-size: 18px;
}

.vc__note[b-zmhhd2w846] {
    margin-bottom: 10px;
}

.vc__actions[b-zmhhd2w846] {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.vc__savescan[b-zmhhd2w846] {
    background: var(--accent);
}

/* ── THE START CARD - the session's ticket stub: the van, the day, one button. ── */

.vc__start[b-zmhhd2w846] {
    text-align: center;
    padding-block: 26px 22px;
}

.vc__start-eyebrow[b-zmhhd2w846] {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--steel);
}

.vc__start-truck[b-zmhhd2w846] {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin-top: 6px;
}

.vc__start-name[b-zmhhd2w846] {
    font-size: 14px;
    color: var(--ink-soft, var(--steel));
}

.vc__start-when[b-zmhhd2w846] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--steel);
    margin-top: 2px;
}

.vc__start-say[b-zmhhd2w846] {
    font-size: 13.5px;
    color: var(--steel);
    max-width: 34ch;
    margin: 12px auto 16px;
}

.vc__start-go[b-zmhhd2w846] {
    width: 100%;
    max-width: 320px;
    background: var(--accent);
    font-size: 16px;
    padding: 14px 0;
}

.vc__burndown[b-zmhhd2w846] {
    margin: 8px 0 10px;
}

.vc__bar[b-zmhhd2w846] {
    height: 6px;
    background: var(--card);
    border: 1px solid var(--line-hard);
    overflow: hidden;
}

.vc__fill[b-zmhhd2w846] {
    height: 100%;
    background: var(--accent);
}

.vc__burnwords[b-zmhhd2w846] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--steel);
    margin-top: 4px;
}

.vc__reset[b-zmhhd2w846] {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px;
}

.vc__row[b-zmhhd2w846] {
    width: 100%;
}

.vc__row--ok[b-zmhhd2w846] {
    opacity: 0.62;
}

.vc__row--off[b-zmhhd2w846] {
    box-shadow: inset 3px 0 0 var(--accent);
}

.vc__nums[b-zmhhd2w846] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
}

.vc__sys[b-zmhhd2w846] {
    color: var(--steel);
}

.vc__cnt[b-zmhhd2w846] {
    font-weight: 700;
}

.vc__delta--ok[b-zmhhd2w846] {
    color: var(--steel);
}

.vc__delta--off[b-zmhhd2w846] {
    color: var(--accent);
    font-weight: 700;
}

.vc__todo[b-zmhhd2w846] {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ── PHASE 2 - the office's count on the stub, the walk's notices, and FINISH. ── */

.vc__sent[b-zmhhd2w846] {
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--line-hard);
    background: var(--card);
    padding: 8px 10px;
    margin-bottom: 12px;
}

.vc__office[b-zmhhd2w846] {
    border: 1.5px solid var(--line-hard);
    background: var(--card);
    padding: 10px 12px;
    margin: 12px auto 0;
    max-width: 320px;
    text-align: left;
}

.vc__office-head[b-zmhhd2w846] {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--accent);
}

/* PRACTICE, SAID OUT LOUD (2026-11-12): the unarmed stub read like an office request - Kirk went
   hunting the portal for a count that never existed. Same box as the office card but DASHED and
   in soft ink, never accent, so armed and practice cannot be confused at a glance. */
.vc__practice[b-zmhhd2w846] {
    border: 1.5px dashed var(--line-hard);
    background: var(--card);
    padding: 10px 12px;
    margin: 12px auto 0;
    max-width: 320px;
    text-align: left;
}

.vc__practice-head[b-zmhhd2w846] {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--ink-soft);
}

.vc__practice-what[b-zmhhd2w846] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.vc__office-what[b-zmhhd2w846] {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

.vc__office-words[b-zmhhd2w846] {
    font-size: 12.5px;
    color: var(--steel);
    margin-top: 4px;
}

.vc__notice[b-zmhhd2w846] {
    font-size: 12.5px;
    color: var(--steel);
    border: 1px solid var(--line-hard);
    background: var(--card);
    padding: 8px 10px;
    margin: 8px 0;
}

.vc__notice--warn[b-zmhhd2w846] {
    color: var(--ink);
    box-shadow: inset 3px 0 0 var(--accent);
}

.vc__done[b-zmhhd2w846] {
    text-align: center;
    margin-top: 10px;
}

.vc__done-say[b-zmhhd2w846] {
    font-size: 13px;
    color: var(--steel);
    max-width: 38ch;
    margin: 0 auto 12px;
}

.vc__done-go[b-zmhhd2w846] {
    width: 100%;
    max-width: 320px;
    background: var(--accent);
    font-size: 15px;
    padding: 13px 0;
}

.vc__done-go--armed[b-zmhhd2w846] {
    background: var(--ink);
    color: var(--paper);
}