/*
 * The escort's own pages: the list of trips waiting to be sent, and the sheet
 * where a driver checks what the punches produced before it goes to billing.
 *
 * Phone first, and not by habit: escorts do this in a truck at the end of a
 * day, on a phone, often on one bar of signal. Everything here is sized for a
 * thumb, every number a driver has to verify is readable without zooming, and
 * nothing needs a horizontal scroll. A wide screen gets the same rows packed
 * onto one line -- one layout, so the two cannot drift apart.
 *
 * Colours are the board's tokens so the whole app looks like one app. They are
 * repeated here because a driver page does not load board.css; the values must
 * stay in step with the block at the top of that file.
 */

:root {
    --dv-radius: 12px;
    --board-line: #d4d4d8;
    --board-line-strong: #a1a1aa;
    --board-bg: #ffffff;
    --board-bg-alt: #fafafa;
    --board-header-bg: #f4f4f5;
    --board-text: #18181b;
    --board-muted: #71717a;
    --board-today: #2563eb;
}

body.dark-mode {
    --board-line: #3f3f46;
    --board-line-strong: #52525b;
    --board-bg: #18181b;
    --board-bg-alt: #1f1f23;
    --board-header-bg: #27272a;
    --board-text: #e4e4e7;
    --board-muted: #a1a1aa;
    --board-today: #60a5fa;
}

.dv-page, .dv-page *, .dv-page *::before, .dv-page *::after,
.dv-sheet, .dv-sheet *, .dv-sheet *::before, .dv-sheet *::after {
    box-sizing: border-box;
}

.dv-page {
    max-width: 980px;
    margin: 0 auto;
    /* The bottom padding clears the sticky action bar, which would otherwise
       cover the last row on a phone. */
    padding: 14px 14px calc(120px + env(safe-area-inset-bottom, 0px));
    color: var(--board-text);
    font-size: 15px;
}

/* ------------------------------------------------------------------ header */

.dv-card {
    background: var(--board-bg);
    border: 1px solid var(--board-line);
    border-radius: var(--dv-radius);
    padding: 14px;
}

.dv-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-size: 1.15em;
    font-weight: 700;
}

.dv-kind {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--board-header-bg);
    border: 1px solid var(--board-line);
    color: var(--board-muted);
}

.dv-sub {
    color: var(--board-muted);
    margin: 0;
}

/* The route line: where the load is picked up and where it goes. Its own line
   because an address wraps and must not push the times out of shape. */
.dv-route {
    margin: 10px 0 0;
    line-height: 1.45;
}

.dv-route b { font-weight: 600; }

.dv-arrow { color: var(--board-muted); padding: 0 4px; }

/* Everything a driver rarely needs: folded away rather than deleted, because
   the customer's driver and truck number matter on the two days a year the
   paperwork is questioned. */
.dv-more {
    margin-top: 10px;
    border-top: 1px solid var(--board-line);
    padding-top: 8px;
}

.dv-more summary {
    cursor: pointer;
    color: var(--board-today);
    font-weight: 600;
    list-style: none;
    padding: 4px 0;
    min-height: 32px;
}

.dv-more summary::-webkit-details-marker { display: none; }
.dv-more summary::after { content: ' ▾'; }
.dv-more[open] summary::after { content: ' ▴'; }

.dv-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 6px 0 0;
    font-size: 0.95em;
}

.dv-facts dt { color: var(--board-muted); }
.dv-facts dd { margin: 0; word-break: break-word; }

.dv-facts a { color: var(--board-today); }

/* What this submission will actually send. The old page left a driver to work
   that out from a button label. */
.dv-will {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--board-today) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--board-today) 35%, transparent);
    line-height: 1.4;
}

/* color-mix is recent; older phones fall back to these flat values. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .dv-will { background: #eff6ff; border-color: #bfdbfe; }
    body.dark-mode .dv-will { background: #1e293b; border-color: #334155; }
}

.dv-will svg { flex: 0 0 auto; margin-top: 1px; }

.dv-locked {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--board-header-bg);
    border: 1px solid var(--board-line);
    color: var(--board-muted);
}

/* ---------------------------------------------------------------- sections */

.dv-section { margin-top: 22px; }

.dv-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.dv-section-head h2 {
    margin: 0;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: .01em;
}

.dv-section-head .dv-en {
    font-weight: 400;
    color: var(--board-muted);
}

.dv-total {
    margin-left: auto;
    color: var(--board-muted);
    font-variant-numeric: tabular-nums;
}

.dv-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* One punch line. A button, not a div with a click handler: a driver wearing
   gloves gets the whole card as a target, and a keyboard gets it for free. */
.dv-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "when  km    go"
        "times km    go"
        "pos   km    go"
        "where where where";
    gap: 2px 10px;
    align-items: center;
    width: 100%;
    min-height: 68px;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--board-bg);
    border: 1px solid var(--board-line);
    border-left: 4px solid var(--board-line-strong);
    border-radius: var(--dv-radius);
    cursor: pointer;
}

.dv-row:hover { background: var(--board-bg-alt); }
.dv-row:focus-visible { outline: 2px solid var(--board-today); outline-offset: 2px; }

.dv-when {
    grid-area: when;
    color: var(--board-muted);
    font-size: 0.88em;
}

/* 'sam. 13 sept.' -> 'Sam. 13 sept.': French keeps its months lowercase, so
   only the first letter is raised, not every word. */
.dv-when::first-letter { text-transform: uppercase; }

.dv-times {
    grid-area: times;
    font-weight: 700;
    font-size: 1.05em;
    font-variant-numeric: tabular-nums;
}

.dv-span {
    font-weight: 400;
    font-size: 0.85em;
    color: var(--board-muted);
    padding-left: 6px;
}

/* Where from and where to, one line each, across the card's width. */
.dv-where {
    grid-area: where;
    display: grid;
    gap: 2px;
    margin-top: 4px;
    font-size: 0.95em;
}

.dv-km {
    grid-area: km;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dv-km small { font-weight: 400; color: var(--board-muted); }

.dv-go {
    grid-area: go;
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--board-today);
    font-size: 0.85em;
    font-weight: 700;
}

/* A line the server cannot save: a missing date or time makes its strptime
   throw, and the old page only found out at submit time, as a 500. */
.dv-row.is-incomplete { background: color-mix(in srgb, #f59e0b 9%, var(--board-bg)); }

.dv-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
}

body.dark-mode .dv-flag { background: #45320c; color: #fcd34d; }

/* What Samsara could not measure on the line (samsara_flag): the reason, in
   the flag's amber rather than a note's grey. */
.dv-note-line.is-check { color: #92400e; font-style: normal; }
body.dark-mode .dv-note-line.is-check { color: #fcd34d; }

.dv-note-line {
    grid-column: 1 / -1;
    color: var(--board-muted);
    font-size: 0.9em;
    font-style: italic;
    padding-top: 2px;
}

.dv-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--board-muted);
    border: 1px dashed var(--board-line-strong);
    border-radius: var(--dv-radius);
}

/* ----------------------------------------------------------------- buttons */

.dv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--board-line-strong);
    background: var(--board-bg);
    color: var(--board-text);
    cursor: pointer;
    /* A link made to look like a button too: Bootstrap underlines links. */
    text-decoration: none;
}

.dv-btn:hover { background: var(--board-bg-alt); text-decoration: none; }
.dv-btn:focus-visible { outline: 2px solid var(--board-today); outline-offset: 2px; }
.dv-btn:disabled { opacity: .5; cursor: not-allowed; }

.dv-btn.is-primary {
    background: var(--board-today);
    border-color: var(--board-today);
    color: #fff;
}

.dv-btn.is-primary:hover { filter: brightness(1.06); background: var(--board-today); }

.dv-btn.is-danger { border-color: #dc2626; color: #dc2626; }
.dv-btn.is-danger:hover { background: #fee2e2; }
body.dark-mode .dv-btn.is-danger:hover { background: #45191b; }

.dv-btn.is-quiet { border-color: transparent; color: var(--board-muted); }

.dv-btn-add { min-height: 40px; padding: 8px 14px; }

/* The action bar follows the driver down the page: with three sections open,
   the buttons were a long scroll away from the line just corrected. */
.dv-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--board-bg);
    border-top: 1px solid var(--board-line);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
}

.dv-actions-inner {
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dv-actions .dv-btn { width: 100%; white-space: nowrap; }
.dv-actions-row { display: flex; gap: 8px; }
.dv-actions-row .dv-btn { flex: 1; }

/* ------------------------------------------------------------------- sheet */

.dv-sheet-back {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, .45);
}

.dv-sheet {
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--board-bg);
    color: var(--board-text);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--board-line);
    overflow: hidden;
}

.dv-sheet-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--board-line);
    background: var(--board-header-bg);
}

.dv-sheet-bar h3 { margin: 0; font-size: 1.02em; font-weight: 700; }

.dv-sheet-body {
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dv-sheet-foot {
    display: flex;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--board-line);
}

.dv-sheet-foot .dv-btn { flex: 1; }
.dv-sheet-foot .dv-btn.is-icon { flex: 0 0 auto; }

.dv-field { margin-bottom: 12px; }

.dv-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.88em;
    font-weight: 600;
    color: var(--board-muted);
}

.dv-field input, .dv-field textarea {
    width: 100%;
    /* 16px keeps iOS Safari from zooming the page when the field takes focus,
       which on the old page left the driver scrolled somewhere else. */
    font: inherit;
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--board-line-strong);
    background: var(--board-bg);
    color: var(--board-text);
}

.dv-field textarea { min-height: 76px; resize: vertical; }

.dv-field input:focus, .dv-field textarea:focus {
    outline: 2px solid var(--board-today);
    outline-offset: 1px;
    border-color: var(--board-today);
}

.dv-field.is-bad input { border-color: #dc2626; }

.dv-field-msg { margin-top: 4px; color: #dc2626; font-size: 0.88em; }

/* Remplir avec Samsara, under a line's times, and what it found. */
.dv-samsara .dv-btn { width: 100%; }
/* Its own colour, used nowhere else on the page, so it is seen (2026-10-25). */
.dv-samsara {
    padding: 12px;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: #f5f3ff;
}
body.dark-mode .dv-samsara { background: rgba(124, 58, 237, .16); border-color: rgba(167, 139, 250, .4); }
.dv-samsara .dv-samsara-btn {
    min-height: 52px;
    font-size: 1.05em;
    font-weight: 800;
    color: #fff;
    background: #6d28d9;
    border-color: #6d28d9;
}
.dv-samsara .dv-samsara-btn:hover { background: #5b21b6; border-color: #5b21b6; }
.dv-samsara-what { margin: 8px 0 0; font-size: 0.88em; color: var(--board-text); }
/* A field that must be filled: the date and times (fleetsheet.js star). */
.dv-req { color: #dc2626; font-weight: 800; }

/* Dark mode: a date or time field's calendar and clock icons are drawn for the
   page's colour scheme -- black unless told it is dark, and invisible on a
   dark field (Tristan, 2026-10-25). Not under .dv-page: the editing sheet
   hangs off the body. */
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"] { color-scheme: dark; }
.dv-samsara-msg { margin-top: 6px; color: var(--board-muted); font-size: 0.88em; }
.dv-samsara-msg:empty { display: none; }
.dv-samsara-msg.is-bad { color: #dc2626; }

.dv-pair { display: flex; gap: 10px; }
.dv-pair .dv-field { flex: 1; }

/* A typed-in line's type: the punch's own buttons, one pressed. */
.dv-types { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-types .dv-btn { min-height: 44px; padding: 8px 12px; }
.dv-types .dv-btn[aria-pressed="true"] {
    background: var(--board-today);
    border-color: var(--board-today);
    color: #fff;
}
.dv-field.is-bad .dv-types .dv-btn { border-color: #dc2626; }

/* The type on a line's card, quieter than a flag: it is information. */
.dv-type-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 600;
    border: 1px solid var(--board-line);
    color: var(--board-muted);
}

/* ------------------------------------------------------------------ toasts */

.dv-toast {
    position: fixed;
    left: 50%;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1100;
    max-width: min(520px, calc(100vw - 28px));
    padding: 12px 16px;
    border-radius: 10px;
    background: #18181b;
    color: #fafafa;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    line-height: 1.4;
}

.dv-toast.is-bad { background: #b91c1c; }
.dv-toast.is-good { background: #15803d; }

/* A submission talks to four routes in turn; the driver gets told where it is
   rather than watching a dead button. */
.dv-busy {
    position: fixed;
    inset: 0;
    z-index: 1095;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

.dv-spin {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dv-spin 0.9s linear infinite;
}

@keyframes dv-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .dv-spin { animation-duration: 3s; }
}

/* --------------------------------------------------------- the trip list */

.dv-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.dv-trip {
    display: block;
    padding: 14px;
    border: 1px solid var(--board-line);
    border-left: 4px solid var(--board-today);
    border-radius: var(--dv-radius);
    background: var(--board-bg);
    color: inherit;
    text-decoration: none;
}

.dv-trip:hover { background: var(--board-bg-alt); color: inherit; text-decoration: none; }
.dv-trip:focus-visible { outline: 2px solid var(--board-today); outline-offset: 2px; }

.dv-trip-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dv-trip-top b { font-size: 1.05em; }

.dv-todo {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    background: color-mix(in srgb, var(--board-today) 14%, transparent);
    color: var(--board-today);
    border: 1px solid color-mix(in srgb, var(--board-today) 40%, transparent);
    white-space: nowrap;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .dv-todo { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    body.dark-mode .dv-todo { background: #1e293b; border-color: #334155; color: #93c5fd; }
}

/* ----------------------------------------------------------- wider screens */

@media (min-width: 821px) {
    .dv-page { padding-bottom: 110px; }

    /* The same row, packed onto one line: a desk gets the density of the old
       table without a second implementation to keep in step. */
    .dv-row {
        grid-template-columns: 148px 1fr 1.4fr 92px 20px;
        grid-template-areas: "when times where km go";
        align-items: center;
        min-height: 56px;
    }

    .dv-where { -webkit-line-clamp: 1; }
    .dv-km { text-align: right; }
    .dv-note-line { grid-column: 2 / 5; }

    .dv-actions-inner { flex-direction: row; justify-content: flex-end; }
    .dv-actions .dv-btn { width: auto; }
    .dv-actions-row { flex: 0 0 auto; }

    /* A sheet on a phone, a dialog on a desktop -- the board's panels do the
       same thing at the same width. */
    .dv-sheet-back { align-items: center; justify-content: center; padding: 24px; }

    .dv-sheet {
        width: min(560px, 100%);
        max-height: 82vh;
        border-radius: 14px;
        border: 1px solid var(--board-line-strong);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    }
}

/* ------------------------------------------- what each line is, at a glance

   Tristan, 2026-10-25: colour "to help the users navigate and understand how
   to add, delete, modify existing lines, at a glace can understand their from
   and too locations, punched position, km's. Billable kms, downtime, empty".
   Each kind of line has its colour, on its section's heading, its cards and
   its sheet: loaded km green (billed), downtime amber (billed), empty km grey
   (not billed). */
.dv-section.is-fleet, .dv-row.is-fleet, .dv-sheet.is-fleet {
    --dv-kind: #16a34a; --dv-kind-soft: #dcfce7; --dv-kind-ink: #166534;
}
.dv-section.is-downtime, .dv-row.is-downtime, .dv-sheet.is-downtime {
    --dv-kind: #d97706; --dv-kind-soft: #fef3c7; --dv-kind-ink: #92400e;
}
.dv-section.is-emptylog, .dv-row.is-emptylog, .dv-sheet.is-emptylog {
    --dv-kind: #64748b; --dv-kind-soft: #e2e8f0; --dv-kind-ink: #334155;
}
body.dark-mode .dv-section.is-fleet, body.dark-mode .dv-row.is-fleet, body.dark-mode .dv-sheet.is-fleet {
    --dv-kind-soft: rgba(22, 163, 74, .16); --dv-kind-ink: #86efac;
}
body.dark-mode .dv-section.is-downtime, body.dark-mode .dv-row.is-downtime, body.dark-mode .dv-sheet.is-downtime {
    --dv-kind-soft: rgba(217, 119, 6, .18); --dv-kind-ink: #fcd34d;
}
body.dark-mode .dv-section.is-emptylog, body.dark-mode .dv-row.is-emptylog, body.dark-mode .dv-sheet.is-emptylog {
    --dv-kind-soft: rgba(100, 116, 139, .22); --dv-kind-ink: #cbd5e1;
}

/* A section starts at a bar of its colour across the page, its title under it:
   a heading, not a card like its lines, and well clear of the button or card
   above it (72px: 34, then 56, were not enough, Tristan said). */
.dv-section.is-fleet, .dv-section.is-downtime, .dv-section.is-emptylog {
    margin-top: 72px;
    padding-top: 12px;
    border-top: 6px solid var(--dv-kind);
}
/* A title, in its band: bigger than the lines under it. */
.dv-section .dv-section-head h2 { font-size: 1.3em; font-weight: 800; color: var(--dv-kind-ink, inherit); }
.dv-section .dv-section-head h2 .dv-en { font-size: 0.68em; font-weight: 500; }
.dv-chip {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--dv-kind, var(--board-line-strong));
    color: #fff;
}
.dv-section-help { flex-basis: 100%; margin: 0; font-size: 0.9em; color: var(--board-muted); }

.dv-row.is-fleet, .dv-row.is-downtime, .dv-row.is-emptylog { border-left: 6px solid var(--dv-kind); }

/* The position, in a pill. */
.dv-pos { grid-area: pos; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.dv-pos-label {
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--board-muted);
}
.dv-pill {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.88em;
    font-weight: 800;
    background: #dbeafe;
    color: #1e40af;
}
body.dark-mode .dv-pill { background: rgba(96, 165, 250, .18); color: #bfdbfe; }

/* From and to: a green dot sets off, a red square arrives. */
.dv-place { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 6px; align-items: baseline; }
.dv-place b {
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--board-muted);
    white-space: nowrap;
}
.dv-place span { overflow-wrap: anywhere; }
.dv-place.is-from b::before, .dv-place.is-to b::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    vertical-align: 1px;
}
.dv-place.is-from b::before { background: #16a34a; border-radius: 50%; }
.dv-place.is-to b::before { background: #dc2626; border-radius: 2px; }

/* The km: big, in the kind's colour, and what kind they are. */
.dv-km-num { white-space: nowrap; }
.dv-km strong { font-size: 1.35em; color: var(--dv-kind-ink, inherit); }
.dv-km-label {
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dv-kind-ink, var(--board-muted));
}

/* Adding wears its section's colour. */
.dv-btn.is-add {
    border-color: var(--dv-kind, var(--board-line-strong));
    color: var(--dv-kind-ink, var(--board-text));
    background: var(--dv-kind-soft, var(--board-bg));
}

/* The sheet wears its line's colour; deleting has a row of its own. */
.dv-sheet.is-fleet .dv-sheet-bar, .dv-sheet.is-downtime .dv-sheet-bar, .dv-sheet.is-emptylog .dv-sheet-bar {
    background: var(--dv-kind-soft);
    border-top: 5px solid var(--dv-kind);
}
.dv-sheet-foot { flex-wrap: wrap; }
.dv-sheet-foot .dv-btn.dv-del { flex: 1 1 100%; }

/* How the page works, in a window (fleetsheet.js howTo), and its button. */
.dv-howto-open { margin-top: 12px; }
.dv-howto-back {
    position: fixed;
    inset: 0;
    z-index: 1095;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .5);
}
.dv-howto-back[hidden] { display: none; }
.dv-howto {
    width: min(460px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--board-bg);
    color: var(--board-text);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.dv-howto-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dv-howto-bar h2 { margin: 0; font-size: 1.3em; font-weight: 800; }
.dv-howto-x {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--board-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.dv-howto-never { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-weight: 600; cursor: pointer; }
.dv-howto-never input { width: 22px; height: 22px; }
.dv-howto-note { margin: 0 0 14px; font-size: 0.88em; color: var(--board-muted); }
.dv-howto-ok { width: 100%; min-height: 52px; font-size: 1.05em; }
.dv-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dv-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.dv-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    background: #2563eb;
}
.dv-step.is-add, .dv-step.is-send { background: #16a34a; }
.dv-later {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    background: #fef3c7;
    color: #78350f;
}
body.dark-mode .dv-later { background: #45320c; color: #fde68a; border-color: #a16207; }
.dv-later svg { flex: 0 0 auto; margin-top: 1px; }

/* The two buttons say what they do: keep for later, or send once checked. */
.dv-actions .dv-btn { flex-direction: column; gap: 0; line-height: 1.15; }
.dv-btn-sub { font-size: 0.72em; font-weight: 500; opacity: .9; }
.dv-btn.is-keep { border-color: var(--board-today); color: var(--board-today); }
.dv-btn.is-go { background: #16a34a; border-color: #16a34a; color: #fff; }
.dv-btn.is-go:hover { background: #16a34a; filter: brightness(1.06); }