/* Maintenance's procedure and completion-history dialogs (app.js openMaintProcModal / openMaintHistoryModal:
   .maint-proc-modal, .maint-history-modal), reimagined in the buoy modal's language (buoy_modal.css). Look only: what
   they show and do is app.js's, unchanged. Every rule is scoped by .maint-proc-modal or .maint-history-modal, over the
   base rules in app.css, which stay as they were.

   - Where: centred over the map, dimmed and blurred behind, stacked over the buoy modal (and the history over the
     procedure), as before; each opens with a short rise.
   - Look: the buoy modal's panel (the portal's glass, 18 px corners, its drop shadow; Manrope); an Oxanium title beside
     a chip in the colour of what it is about, as the readings' icon chips; the close a quiet 28 px square keeping its x.
   - The procedure: its chip the Maintenance tab's wrench in its state's colour, its name over its status pill; its
     dates in two tiles (Next due in the state's colour when overdue or due soon; Last done, when there is one, the whole
     tile opening the history); its instructions in a tile set for reading (headings in Oxanium, numbered steps in blue
     chips, a quote as a callout, code and tables in the panel's dark troughs, images rounded), scrolling in place so the
     actions stay at the foot: Mark as completed the brand's blue button, Cancel a quiet trough. The completion form
     takes the instructions' place: its fields troughs, its buttons where the others were.
   - The history: a blue chip (a clock turning back) beside "Completion history" over the procedure's name; the
     completions, newest first, a timeline in a trough: each date in Oxanium beside a dot on a rail (the newest lit),
     its notes, who recorded it, and in its first 24 hours a quiet delete that turns red to confirm.
   State colours (app.css .maint-overdue and its kin): overdue red, due soon amber, up to date green, done the brand
   blue. */

/* ── The overlay: the map dimmed and blurred behind; a margin, so a phone's dialog keeps clear of its edges ────── */
.maint-proc-modal,
.maint-history-modal {
    padding: 24px;
    background: rgba(2, 8, 20, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ── The panel: the buoy modal's; a column whose long part (the instructions, the form, the history) scrolls ── */
.maint-proc-modal .maint-proc-dialog,
.maint-history-modal .maint-proc-dialog {
    --tone: 96, 165, 250;   /* the chip's colour: the brand blue unless the procedure's state says otherwise */
    --tone-ink: #60a5fa;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: min(820px, calc(100vh - 48px));
    max-height: min(820px, calc(100dvh - 48px));
    overflow-y: auto;
    padding: 18px;
    border-radius: 18px;
    box-shadow: var(--bc-glass-edge), 0 18px 44px rgba(0, 8, 22, 0.55);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    animation: maint-dialog-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.maint-proc-modal .maint-proc-dialog > *,
.maint-history-modal .maint-proc-dialog > * { flex-shrink: 0; }
@keyframes maint-dialog-rise {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
/* The procedure's state colours its chip (and its Next due, below). */
.maint-proc-modal .maint-proc-dialog:has(.maint-proc-header .maint-overdue)  { --tone: 248, 113, 113; --tone-ink: #f87171; }
.maint-proc-modal .maint-proc-dialog:has(.maint-proc-header .maint-due_soon) { --tone: 251, 191, 36; --tone-ink: #fbbf24; }
.maint-proc-modal .maint-proc-dialog:has(.maint-proc-header .maint-ok)       { --tone: 74, 222, 128; --tone-ink: #4ade80; }

/* Its buttons: none of app.css's global button or blue pill (navy fill, 18 px padding, gradient borders, text shadow).
   Each kind's look follows. */
.maint-proc-modal .maint-proc-dialog .blue-pill-button,
.maint-history-modal .maint-proc-dialog .blue-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    overflow: visible;
    isolation: auto;
    filter: none;
    text-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.maint-proc-modal .maint-proc-dialog .blue-pill-button > .text,
.maint-history-modal .maint-proc-dialog .blue-pill-button > .text { display: inline-flex; align-items: center; gap: 8px; }
.maint-proc-modal .maint-proc-dialog .blue-pill-button > span:empty,
.maint-history-modal .maint-proc-dialog .blue-pill-button > span:empty { display: none; }   /* app.js's second span: nothing to draw here */
.maint-proc-modal .maint-proc-dialog button:focus-visible,
.maint-history-modal .maint-proc-dialog button:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }

/* ── The header: the chip, the title (and the status pill or the procedure's name under it), the close ─────────── */
.maint-proc-modal .maint-proc-header,
.maint-history-modal .maint-proc-header { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.maint-proc-modal .maint-proc-header::before,
.maint-history-modal .maint-proc-header::before {
    content: "\f0ad";   /* the wrench, as the Maintenance tab's */
    content: "\f0ad" / "";
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--tone), 0.14);
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.3);
    color: var(--tone-ink);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
}
.maint-proc-modal .maint-proc-dialog:has(.maint-proc-header .maint-overdue) .maint-proc-header::before {   /* overdue glows */
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.4), 0 0 18px rgba(var(--tone), 0.25);
}
.maint-history-modal .maint-proc-header::before { content: "\f1da"; content: "\f1da" / ""; }   /* a clock turning back */
/* A failed load's header holds only the close: no chip, the close at the right. */
.maint-proc-modal .maint-proc-header:not(:has(.maint-proc-title))::before,
.maint-history-modal .maint-proc-header:not(:has(.maint-proc-title))::before { content: none; }
.maint-proc-modal .maint-proc-header:not(:has(.maint-proc-title)) .maint-proc-close,
.maint-history-modal .maint-proc-header:not(:has(.maint-proc-title)) .maint-proc-close { margin-left: auto; }

.maint-proc-modal .maint-proc-title,
.maint-history-modal .maint-proc-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 5px;
    min-height: 42px;
    justify-content: center;
}
.maint-proc-modal .maint-proc-title .maint-name,
.maint-history-modal .maint-proc-title .maint-name {
    flex: none;
    max-width: 100%;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.25;
    color: #f8fafc;
    overflow-wrap: anywhere;
}
/* The history's subtitle: the procedure's name, as the buoy modal's meta line. */
.maint-history-modal .maint-proc-title .maint-meta {
    margin: 0;
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(203, 213, 225, 0.72);
    overflow-wrap: anywhere;
}
/* The status: a pill as the Maintenance tab's (buoy_modal.css), in sentence case; its colours its own. */
.maint-proc-modal .maint-proc-title .maint-badge {
    flex: none;
    padding: 3px 9px 4px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-transform: lowercase;
}
.maint-proc-modal .maint-proc-title .maint-badge::first-letter { text-transform: uppercase; }

/* The close: the buoy modal's quiet 28 px square, keeping its x. */
.maint-proc-modal .maint-proc-close,
.maint-history-modal .maint-proc-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -2px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: visible;
    isolation: auto;
    background: transparent;
    color: rgba(226, 232, 240, 0.65);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.maint-proc-modal .maint-proc-close:hover,
.maint-history-modal .maint-proc-close:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

/* ── Loading, and a failed load: quiet, centred ──────────────────────────────────────────────────────────── */
.maint-proc-modal .maint-proc-loading,
.maint-history-modal .maint-proc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 0 32px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.72);
}
.maint-proc-modal .maint-proc-loading i,
.maint-history-modal .maint-proc-loading i { font-size: 20px; color: #60a5fa; }
.maint-proc-modal .maint-proc-dialog > .maint-empty,
.maint-history-modal .maint-proc-dialog > .maint-empty { padding: 12px 8px 18px; font-size: 13px; font-weight: 600; color: rgba(203, 213, 225, 0.72); }

/* ── The procedure's dates: two tiles, a label over an Oxanium date ──────────────────────────────────────── */
.maint-proc-modal .maint-proc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.maint-proc-modal .maint-proc-date {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 11px 14px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.maint-proc-modal .maint-proc-date-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: rgba(203, 213, 225, 0.62); }
.maint-proc-modal .maint-proc-date-label::before {   /* a calendar for Next due, a clock turning back for Last done */
    content: "\f133";
    content: "\f133" / "";
    margin-right: 6px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: #60a5fa;
}
.maint-proc-modal .maint-proc-date--last .maint-proc-date-label::before { content: "\f1da"; content: "\f1da" / ""; }
.maint-proc-modal .maint-proc-date-value {
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.2;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}
.maint-proc-modal .maint-proc-date--last:not(:has(.maint-last-done-link)) .maint-proc-date-value { color: rgba(148, 163, 184, 0.55); }   /* never done: app.js's dash, quiet */
/* Overdue or due soon, Next due takes the state's colour: its tile tinted and ringed, its date and icon. */
.maint-proc-modal .maint-proc-dialog:is(:has(.maint-proc-header .maint-overdue), :has(.maint-proc-header .maint-due_soon)) .maint-proc-date--next {
    background: linear-gradient(180deg, rgba(var(--tone), 0.11), rgba(var(--tone), 0.03));
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.3);
}
.maint-proc-modal .maint-proc-dialog:is(:has(.maint-proc-header .maint-overdue), :has(.maint-proc-header .maint-due_soon)) .maint-proc-date--next .maint-proc-date-value,
.maint-proc-modal .maint-proc-dialog:is(:has(.maint-proc-header .maint-overdue), :has(.maint-proc-header .maint-due_soon)) .maint-proc-date--next .maint-proc-date-label::before { color: var(--tone-ink); }
/* Last done, when there is one: the whole tile opens the history (the link's ::before stretched over it), "History"
   and a chevron at its right; hover rings it in blue. */
.maint-proc-modal .maint-proc-date .maint-last-done-link {
    color: inherit;
    text-decoration: none;
}
.maint-proc-modal .maint-proc-date .maint-last-done-link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link) { cursor: pointer; padding-right: 84px; border-radius: 14px; }
.maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link)::after {
    content: "History \203A";
    content: "History \203A" / "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #93c5fd;
    pointer-events: none;
    transition: color 0.15s ease;
}
.maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link):hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); }
.maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link):hover::after { color: #ffffff; }
.maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link):hover .maint-last-done-link { color: #ffffff; }

/* ── The instructions: a tile set for reading, scrolling in place ───────────────────────────────────────── */
.maint-proc-modal .maint-instructions {
    flex-shrink: 1;
    min-height: 96px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 18px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    font-size: 13px;
    line-height: 1.65;
    color: rgba(226, 232, 240, 0.9);
    overflow-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.maint-proc-modal .maint-instructions::-webkit-scrollbar { width: 4px; }
.maint-proc-modal .maint-instructions::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
.maint-proc-modal .maint-instructions > :first-child { margin-top: 0; }
.maint-proc-modal .maint-instructions > :last-child { margin-bottom: 0; }
.maint-proc-modal .maint-instructions p { margin: 0 0 10px; }
/* Headings: the panel's Oxanium, white; a third level in the device type's blue (buoy_modal.css .buoy-device-type). */
.maint-proc-modal .maint-instructions :is(h1, h2, h3) {
    margin: 18px 0 8px;
    font-family: Oxanium, Manrope, sans-serif;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.3;
    color: #f8fafc;
}
.maint-proc-modal .maint-instructions h1 { font-size: 17px; }
.maint-proc-modal .maint-instructions h2 { font-size: 15.5px; }
.maint-proc-modal .maint-instructions h3 { margin-top: 16px; font-size: 13.5px; color: #93c5fd; }
.maint-proc-modal .maint-instructions :is(h4, h5, h6) { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: rgba(226, 232, 240, 0.85); }
.maint-proc-modal .maint-instructions strong { font-weight: 700; color: #f8fafc; }
.maint-proc-modal .maint-instructions a { color: #93c5fd; text-decoration: underline; text-decoration-color: rgba(147, 197, 253, 0.4); text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; }
.maint-proc-modal .maint-instructions a:hover { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.7); }
.maint-proc-modal .maint-instructions a:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; border-radius: 3px; }
/* Lists: numbered steps in blue chips (as the profile switch's pick), bullets as small blue dots. */
.maint-proc-modal .maint-instructions :is(ol, ul) { margin: 0 0 12px; padding: 0; list-style: none; }
.maint-proc-modal .maint-instructions li { position: relative; margin: 0 0 5px; }
.maint-proc-modal .maint-instructions li > :is(ol, ul) { margin: 6px 0 0; }
.maint-proc-modal .maint-instructions ol { counter-reset: maint-step; }
.maint-proc-modal .maint-instructions ol > li { padding-left: 32px; counter-increment: maint-step; }
.maint-proc-modal .maint-instructions ol > li::before {
    content: counter(maint-step);
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 999px;
    background: rgba(46, 142, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4);
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #dbeafe;
    font-variant-numeric: tabular-nums;
}
.maint-proc-modal .maint-instructions ul > li { padding-left: 18px; }
.maint-proc-modal .maint-instructions ul > li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #60a5fa;
}
/* A quote: a callout, tinted in the brand blue with a lit left edge. */
.maint-proc-modal .maint-instructions blockquote {
    margin: 12px 0;
    padding: 10px 14px 10px 16px;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.08);
    box-shadow: inset 3px 0 0 #2e8eff, inset 0 0 0 1px rgba(96, 165, 250, 0.18);
    color: #e2e8f0;
}
.maint-proc-modal .maint-instructions blockquote > :last-child { margin-bottom: 0; }
/* Code: the panel's trough, in small. */
.maint-proc-modal .maint-instructions code {
    padding: 1px 5px 2px;
    border-radius: 6px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;   /* broken over two lines, each piece a whole chip */
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: #bfdbfe;
}
.maint-proc-modal .maint-instructions pre {
    margin: 0 0 12px;
    padding: 10px 12px;
    overflow-x: auto;
    border-radius: 10px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
.maint-proc-modal .maint-instructions pre code { padding: 0; background: none; box-shadow: none; }
/* A table: a quiet list in a trough, as the Transmissions tab's (buoy_modal.css .comms-list). */
.maint-proc-modal .maint-instructions table {
    width: 100%;
    margin: 0 0 12px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(2, 10, 24, 0.45);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    font-size: 12px;
    line-height: 1.45;
}
.maint-proc-modal .maint-instructions :is(th, td) { padding: 7px 12px; text-align: left; vertical-align: top; }
.maint-proc-modal .maint-instructions th { padding-top: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: rgba(203, 213, 225, 0.62); }
.maint-proc-modal .maint-instructions td { border-top: 1px solid rgba(148, 163, 184, 0.1); color: #e2e8f0; font-variant-numeric: tabular-nums; }
.maint-proc-modal .maint-instructions hr { height: 1px; margin: 16px 0; border: 0; background: rgba(148, 163, 184, 0.16); }
/* Images, in the text and after it: full width, rounded, hairlined. */
.maint-proc-modal .maint-instructions img,
.maint-proc-modal .maint-proc-dialog img.maint-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 12px;
    outline: 1px solid rgba(148, 163, 184, 0.16);
    outline-offset: -1px;
    background: rgba(2, 10, 24, 0.5);
}
.maint-proc-modal .maint-instructions .maint-images { display: grid; gap: 10px; margin-top: 14px; }
.maint-proc-modal .maint-proc-dialog .maint-images img.maint-img { width: 100%; margin: 0; }
.maint-proc-modal .maint-instr-empty { padding: 18px 0; text-align: center; font-size: 13px; font-weight: 600; color: rgba(203, 213, 225, 0.6); }

/* ── The actions: Mark as completed, the brand's blue button; Cancel, a quiet trough ───────────────────────── */
.maint-proc-modal .maint-action-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; margin-top: 14px; }
.maint-proc-modal .maint-proc-dialog .maint-action-row .blue-pill-button { flex: 1 1 auto; min-width: 0; }
.maint-proc-modal .maint-proc-dialog .blue-pill-button:is(.maint-reveal-completion, .maint-complete-btn, .maint-confirm-complete-btn) {
    background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(46, 142, 255, 0.3);
    color: #ffffff;
}
.maint-proc-modal .maint-proc-dialog .blue-pill-button:is(.maint-reveal-completion, .maint-complete-btn, .maint-confirm-complete-btn):hover:not(:disabled) {
    background: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff);
}
/* Are you sure?: the same, ringed, so the second step reads as one. Saving: dimmed. */
.maint-proc-modal .maint-proc-dialog .blue-pill-button.maint-confirm-complete-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(46, 142, 255, 0.3), 0 6px 18px rgba(46, 142, 255, 0.35);
}
.maint-proc-modal .maint-proc-dialog .blue-pill-button:disabled { opacity: 0.7; cursor: progress; }
.maint-proc-modal .maint-proc-dialog .blue-pill-button:is(.maint-cancel-close, .maint-cancel-complete) {
    flex: 0 0 auto;
    min-width: 108px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.85);
}
.maint-proc-modal .maint-proc-dialog .blue-pill-button:is(.maint-cancel-close, .maint-cancel-complete):hover {
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4);
    color: #ffffff;
}

/* ── The completion form, in the instructions' place: a heading, its fields as troughs, its buttons at the foot ── */
.maint-proc-modal .maint-perform-form { margin: 0; padding: 4px 0 0; border: 0; }
.maint-proc-modal .maint-perform-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #f8fafc;
}
.maint-proc-modal .maint-perform-heading::before {   /* the clipboard of Mark as completed, in a blue chip */
    content: "\f46c";
    content: "\f46c" / "";
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: #60a5fa;
}
.maint-proc-modal .maint-field { margin: 0 0 14px; }
.maint-proc-modal .maint-field label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: rgba(203, 213, 225, 0.72); }
.maint-proc-modal .maint-field-optional { font-weight: 600; color: rgba(148, 163, 184, 0.62); opacity: 1; }
.maint-proc-modal .maint-field input[type="date"],
.maint-proc-modal .maint-field textarea {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    color: #f8fafc;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: box-shadow 0.15s ease;
}
.maint-proc-modal .maint-field input[type="date"] {
    width: 200px;
    max-width: 100%;
    height: 40px;
    padding: 0 10px 0 12px;
    color-scheme: dark;
    font-variant-numeric: tabular-nums;
}
.maint-proc-modal .maint-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
.maint-proc-modal .maint-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.maint-proc-modal .maint-field textarea { min-height: 96px; padding: 10px 12px; font-weight: 500; line-height: 1.5; resize: vertical; }
.maint-proc-modal .maint-field textarea::placeholder { color: rgba(148, 163, 184, 0.6); }
.maint-proc-modal .maint-field input[type="date"]:hover,
.maint-proc-modal .maint-field textarea:hover { box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.24); }
.maint-proc-modal .maint-field input[type="date"]:focus,
.maint-proc-modal .maint-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5), 0 0 0 3px rgba(46, 142, 255, 0.16); }
.maint-proc-modal .maint-perform-form .maint-action-row { margin-top: 18px; }

/* ── The history: a timeline in a trough, newest first ──────────────────────────────────────────────────────
   Each completion a row: its date (Oxanium) at the left, a dot on the rail beside it (the newest lit in the brand
   blue), its notes and who recorded it, and its delete (its first 24 hours) at the right. The column titles stay for
   a screen reader only. */
.maint-history-modal .maint-history {
    position: relative;
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px;
    background: rgba(2, 10, 24, 0.45);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    font-size: 13px;
    color: #e2e8f0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.maint-history-modal .maint-history-table { display: block; width: 100%; font-size: 13px; }
.maint-history-modal .maint-history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.maint-history-modal .maint-history-table tbody { display: block; padding: 6px 0; }
.maint-history-modal .maint-history-table tr {
    --date-w: 92px;
    --rail-x: calc(14px + var(--date-w) + 14px);   /* the rail: the middle of the gap after the date */
    position: relative;
    display: grid;
    grid-template-columns: var(--date-w) minmax(0, 1fr) auto;
    column-gap: 28px;
    row-gap: 2px;
    padding: 10px 12px 10px 14px;
}
.maint-history-modal .maint-history-table tr::after {   /* the rail, from the first dot to the last */
    content: "";
    position: absolute;
    left: calc(var(--rail-x) - 0.5px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(148, 163, 184, 0.22);
}
.maint-history-modal .maint-history-table tr:first-child::after { top: 20px; }
.maint-history-modal .maint-history-table tr:last-child::after { bottom: calc(100% - 20px); }
.maint-history-modal .maint-history-table tr::before {   /* the dot */
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(var(--rail-x) - 4.5px);
    top: 15.5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0e1116;
    box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, 0.6);
}
.maint-history-modal .maint-history-table tr:first-child::before {
    background: #2e8eff;
    box-shadow: 0 0 0 3px rgba(46, 142, 255, 0.2), 0 0 10px rgba(46, 142, 255, 0.55);
}
.maint-history-modal .maint-history-table td { display: block; min-width: 0; padding: 0; border: 0; color: inherit; }
.maint-history-modal .maint-hist-date {
    grid-column: 1;
    grid-row: 1 / 3;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.82);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.maint-history-modal .maint-history-table tr:first-child .maint-hist-date { color: #f8fafc; }
.maint-history-modal .maint-hist-notes { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 500; line-height: 1.5; color: #e2e8f0; overflow-wrap: anywhere; }
.maint-history-modal .maint-hist-who {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(203, 213, 225, 0.6);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maint-history-modal .maint-hist-who::before {   /* a person, before who recorded it */
    content: "\f007";
    content: "\f007" / "";
    margin-right: 6px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    color: rgba(148, 163, 184, 0.6);
}
.maint-history-modal .maint-hist-who:has(.maint-hist-none) { display: none; }   /* nobody recorded: no line */
/* No notes: said, quietly, in place of app.js's dash. */
.maint-history-modal .maint-hist-notes .maint-hist-none { font-size: 0; }
.maint-history-modal .maint-hist-notes .maint-hist-none::after { content: "No notes"; font-size: 12.5px; font-style: italic; font-weight: 500; color: rgba(148, 163, 184, 0.62); }
.maint-history-modal .maint-hist-del { grid-column: 3; grid-row: 1 / 3; width: auto; align-self: start; margin-top: -4px; text-align: right; white-space: nowrap; }
.maint-history-modal .maint-hist-del:empty { display: none; }
/* The delete: a quiet 28 px square with its bin; hover tints it red; armed ("Sure?"), the critical pill's red. */
.maint-history-modal .maint-proc-dialog .blue-pill-button.maint-del-completion-modal {
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: rgba(226, 232, 240, 0.5);
    font-size: 12px;
}
.maint-history-modal .maint-proc-dialog .blue-pill-button.maint-del-completion-modal:hover { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.maint-history-modal .maint-proc-dialog .blue-pill-button.maint-del-completion-modal.maint-del-confirm {
    padding: 0 10px;
    background: #b91c1c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(185, 28, 28, 0.35);
    color: #ffffff;
}
.maint-history-modal .maint-proc-dialog .blue-pill-button.maint-del-completion-modal.maint-del-confirm:hover { background: #c62828; }
.maint-history-modal .maint-del-completion-modal .adc-confirm-label { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.maint-history-modal .maint-proc-dialog .blue-pill-button.maint-del-completion-modal:disabled { opacity: 0.6; cursor: progress; }

/* No completions: said in the trough, under a quiet chip. */
.maint-history-modal .maint-history > .maint-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 16px 26px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.72);
}
.maint-history-modal .maint-history > .maint-empty::before {
    content: "\f46d";   /* a clipboard, its list empty */
    content: "\f46d" / "";
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
    color: rgba(203, 213, 225, 0.6);
}

/* ── A phone: the dialogs nearer the edges, the dates' "History" down to its chevron ───────────────────────── */
@media (max-width: 600px) {
    .maint-proc-modal,
    .maint-history-modal { padding: 10px; }
    .maint-proc-modal .maint-proc-dialog,
    .maint-history-modal .maint-proc-dialog {
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        padding: 14px;
        border-radius: 16px;
    }
    .maint-proc-modal .maint-proc-date { padding: 10px 12px 11px; }
    .maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link) { padding-right: 30px; }
    .maint-proc-modal .maint-proc-date--last:has(.maint-last-done-link)::after { content: "\203A"; content: "\203A" / ""; right: 12px; font-size: 16px; }
    .maint-proc-modal .maint-instructions { padding: 12px 14px 14px; }
    .maint-history-modal .maint-history-table tr { --date-w: 82px; --rail-x: calc(14px + var(--date-w) + 12px); column-gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .maint-proc-modal .maint-proc-dialog,
    .maint-history-modal .maint-proc-dialog { animation: none; }
    .maint-proc-modal .maint-proc-close, .maint-history-modal .maint-proc-close,
    .maint-proc-modal .maint-proc-dialog .blue-pill-button, .maint-history-modal .maint-proc-dialog .blue-pill-button,
    .maint-proc-modal .maint-proc-date, .maint-proc-modal .maint-proc-date--last::after,
    .maint-proc-modal .maint-instructions a, .maint-proc-modal .maint-field input[type="date"], .maint-proc-modal .maint-field textarea,
    .maint-history-modal .maint-del-completion-modal .adc-icon-default, .maint-history-modal .maint-del-completion-modal .adc-confirm-label { transition: none; }
}