/* ------------------------------------------------------------
   apps/vm/vm.css

   Read one-handed in a driveway, sometimes in direct sun, often
   with dirty hands. So: light ground rather than dark (sunlight
   readability beats garage-night mood), very high contrast, no
   tap target under 60px, and the odometer number carries the
   page. Everything else stays quiet.
   ------------------------------------------------------------ */

:root {
    --bg:         #eef1f3;
    --surface:    #ffffff;
    --ink:        #14181b;
    --ink-soft:   #5a656c;
    --rule:       #d5dbdf;
    --action:     #0b5fa5;
    --action-ink: #ffffff;
    --open:       #8a4c00;
    --open-bg:    #fdf1dc;
    --danger:     #9b1c1c;

    --pad:        16px;
    --tap:        60px;
    --radius:     6px;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--action); }

:focus-visible {
    outline: 3px solid var(--action);
    outline-offset: 2px;
}


/* ---------- top bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--pad);
    padding-top: calc(14px + env(safe-area-inset-top));
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-title {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -0.01em;
}


/* ---------- layout ---------- */

.wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--pad);
}


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--action);
    color: var(--action-ink);
}

.btn-quiet {
    background: transparent;
    color: var(--action);
    border-color: var(--rule);
}

.btn-block {
    display: flex;
    width: 100%;
    min-height: var(--tap);
    margin-top: 20px;
}


/* ---------- vehicle list ---------- */

.vlist {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.vrow + .vrow {
    border-top: 1px solid var(--rule);
}

/* The left edge is information, not trim: it means there is an
   open service record sitting on this vehicle right now. */
.vrow-open {
    background: var(--open-bg);
    box-shadow: inset 4px 0 0 0 var(--open);
}

.vrow-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--tap);
    padding: 14px var(--pad);
    color: inherit;
    text-decoration: none;
}

.vrow-main {
    flex: 1 1 auto;
    min-width: 0;
}

.vrow-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vrow-meta {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vrow-open-flag {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--open);
}

/* The one loud thing on the page. */
.vrow-odo {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.odo-num {
    display: block;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.odo-unit {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}

.odo-none {
    font-size: 14px;
    color: var(--ink-soft);
}


/* ---------- empty state ---------- */

.empty {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 28px var(--pad);
    text-align: center;
}

.empty-lead {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 600;
}

.empty p {
    color: var(--ink-soft);
    margin: 0 0 20px;
}


/* ---------- PIN gate ---------- */

.vm-gate {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
}

.gate {
    width: 100%;
    max-width: 340px;
    padding: var(--pad);
}

.gate-title {
    margin: 0;
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.gate-sub {
    margin: 6px 0 24px;
    color: var(--ink-soft);
}

.gate-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: #fdecec;
    color: var(--danger);
    font-weight: 600;
}

.gate-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.gate-pin {
    width: 100%;
    height: var(--tap);
    padding: 0 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
    text-align: center;
}

.gate-pin:focus {
    border-color: var(--action);
}


@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css

   Form fields, tag chip, validation errors.
   ------------------------------------------------------------ */


/* ---------- tag code chip ---------- */

.tagchip {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--ink-soft);
}

.tagchip strong {
    font-size: 19px;
    font-weight: 650;
    letter-spacing: 0.12em;
    color: var(--ink);
}

.tagchip-note {
    display: block;
    margin-top: 4px;
}

.tagurl {
    margin: 0 0 20px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    word-break: break-all;
    -webkit-user-select: all;
    user-select: all;
}


/* ---------- validation summary ---------- */

.formerr {
    margin: 0 0 20px;
    padding: 12px 14px 12px 16px;
    border-radius: var(--radius);
    background: #fdecec;
    color: var(--danger);
    box-shadow: inset 4px 0 0 0 var(--danger);
}

.formerr ul {
    margin: 0;
    padding-left: 18px;
}

.formerr li + li {
    margin-top: 4px;
}


/* ---------- form ---------- */

.vform {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 4px var(--pad) 20px;
}

.field {
    padding: 14px 0 0;
}

.field + .field {
    border-top: 1px solid var(--rule);
    margin-top: 14px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
}

.field input[type="text"] {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    /* 17px keeps iOS Safari from zooming the viewport on focus */
    font-size: 17px;
}

.field input[type="text"]:focus {
    border-color: var(--action);
}

/* Numbers read as numbers: mileage, year, VIN, plate */
#modelYear,
#mileage,
#vin,
#plate {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
}

#modelYear,
#mileage {
    max-width: 200px;
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 2)

   Vehicle header, service history, checkbox grid, tag box.
   ------------------------------------------------------------ */


/* ---------- shared bits ---------- */

.sechead {
    margin: 28px 0 10px;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink-soft);
}

.quiet {
    color: var(--ink-soft);
}

.quiet-center {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}

.topbar-title-center {
    flex: 1 1 auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Balances the back button so the title sits truly centred */
.topbar-spacer {
    flex: 0 0 72px;
}


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

.vhead {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 22px var(--pad);
    text-align: center;
}

.vhead-num {
    font-size: 46px;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.vhead-unit {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.vhead-none {
    font-size: 19px;
    color: var(--ink-soft);
}

.vhead-id {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-soft);
}

.vhead-sub {
    display: block;
}

.vhead-vin {
    display: block;
    margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.03em;
}


/* ---------- open service banner ---------- */

.openbar {
    display: block;
    margin-top: 16px;
    padding: 16px var(--pad);
    background: var(--open-bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: inset 4px 0 0 0 var(--open);
    color: inherit;
    text-decoration: none;
}

.openbar-label {
    display: block;
    font-size: 17px;
    font-weight: 650;
    color: var(--open);
}

.openbar-detail {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--ink-soft);
}

.openbar-go {
    display: block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--action);
}

.btn-start {
    margin-top: 16px;
}


/* ---------- service history ---------- */

.slist {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.srow + .srow {
    border-top: 1px solid var(--rule);
}

.srow-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: var(--tap);
    padding: 14px var(--pad);
    color: inherit;
    text-decoration: none;
}

.srow-date {
    flex: 0 0 92px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    padding-top: 1px;
}

.srow-body {
    flex: 1 1 auto;
    min-width: 0;
}

.srow-items {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}

.srow-meta {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--ink-soft);
}

.srow-odo {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    padding-top: 1px;
}


/* ---------- checkbox grid ----------

   No JavaScript here on purpose. The detail field is a sibling
   of the checkbox, so :checked ~ .chk-detail reveals it. Fewer
   moving parts, and it works before scripts settle.
   ------------------------------------------------------------ */

.chkgrid {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0 var(--pad);
}

.chkrow {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 4px 0;
}

.chkrow + .chkrow {
    border-top: 1px solid var(--rule);
}

.chk-box {
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: var(--action);
    flex: none;
}

.chk-face {
    display: block;
    min-height: 52px;
    padding: 14px 0;
    cursor: pointer;
}

.chk-name {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

.chk-int {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.chk-detail {
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    height: 46px;
    margin: 0 0 14px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-size: 17px;
}

.chk-box:checked ~ .chk-detail {
    display: block;
}

.chk-box:checked ~ .chk-face .chk-name {
    color: var(--action);
}

.chk-box:disabled ~ .chk-face {
    cursor: default;
    opacity: 0.75;
}


/* ---------- misc form extras ---------- */

.minicheck {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 15px;
    color: var(--ink-soft);
    min-height: 44px;
}

.minicheck input {
    width: 22px;
    height: 22px;
    accent-color: var(--action);
}

.vform-notes {
    margin-top: 16px;
}

.vform textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    resize: vertical;
}

.vform input[type="date"] {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 17px;
}

.vform input:disabled,
.vform textarea:disabled {
    background: var(--bg);
    color: var(--ink-soft);
}

.closedbar {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 15px;
}

.savedbar {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: #e8f3e8;
    color: #1f5d2b;
    font-weight: 600;
}


/* ---------- tag box ---------- */

.tagbox {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 18px var(--pad);
}

.tagbox-code {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-align: center;
}

.tagbox-note {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 3)

   Photos, upload control, odometer suggestion.
   ------------------------------------------------------------ */


/* ---------- odometer suggestion ----------

   Deliberately loud and deliberately not automatic. Two
   buttons, no default action, because a wrong odometer that
   nobody noticed corrupts every interval from here on.
   ------------------------------------------------------------ */

.ocrbar {
    margin: 0 0 18px;
    padding: 16px var(--pad);
    background: var(--open-bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: inset 4px 0 0 0 var(--open);
}

.ocrbar-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--open);
}

.ocrbar-num {
    display: block;
    margin-top: 4px;
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.ocrbar-conf {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--ink-soft);
}

.ocrbar-acts {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ocrbar-acts .btn {
    flex: 1 1 0;
    min-height: 52px;
    padding: 0 10px;
    text-align: center;
}

.ocrbar-acts .btn-quiet {
    background: var(--surface);
}


/* ---------- upload control ----------

   The native file input is unstyleable and tiny, so it is
   hidden and the label does the work. Keyboard focus is
   forwarded from the input to the label.
   ------------------------------------------------------------ */

.uploadbox {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 16px var(--pad);
}

.uploadinput {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.uploadbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    border: 1px dashed var(--action);
    border-radius: var(--radius);
    color: var(--action);
    font-weight: 600;
    cursor: pointer;
}

.uploadinput:focus-visible + .uploadbtn,
.uploadbtn:hover {
    background: var(--bg);
}

.uploadinput:focus-visible + .uploadbtn {
    outline: 3px solid var(--action);
    outline-offset: 2px;
}

.uploadnote {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
}


/* ---------- photo grid ---------- */

.pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.pcell {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.pthumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg);
}

.pcap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    min-height: 44px;
}

.pbadge {
    font-size: 13px;
    font-weight: 650;
    color: var(--open);
    font-variant-numeric: tabular-nums;
}

.pbadge-warn {
    font-weight: 600;
    color: var(--ink-soft);
}

/* A submit button that reads as a link */
.plink {
    margin-left: auto;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--action);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.plink:hover {
    text-decoration: underline;
}
/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 4)

   Photo descriptions and the reopen bar. Also REPLACES the
   .closedbar rule from round 2, which was a plain paragraph and
   now has to hold a button.
   ------------------------------------------------------------ */


/* ---------- closed record bar, now with a way out ---------- */

.closedbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
    padding: 12px 12px 12px 16px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--rule);
}

.closedbar-text {
    flex: 1 1 160px;
    color: var(--ink-soft);
    font-size: 15px;
}

.closedbar .btn {
    flex: 0 0 auto;
    min-height: 48px;
}


/* ---------- photo descriptions ----------

   Sized to hold a couple of sentences without scrolling, since
   the model tends to fill it and a two-line box that hides its
   own content is worse than no box.
   ------------------------------------------------------------ */

.pdesc {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
}

.pdesc:focus {
    background: var(--bg);
    outline-offset: -3px;
}

.pdesc::placeholder {
    color: var(--ink-soft);
}

.pdesc-ro {
    margin: 0;
    padding: 10px;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* Descriptions make the cells tall, so give them more room */
.pgrid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 5)

   Two upload buttons, and the padding the top bar needs once
   there is no browser chrome above it.
   ------------------------------------------------------------ */


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

.uploadbtn + .uploadinput + .uploadbtn,
.uploadbtn-cam + .uploadinput + .uploadbtn {
    margin-top: 10px;
}

/* Camera is the common case in a garage, so it leads and it is
   the solid one. Gallery stays available but quieter. */
.uploadbtn-cam {
    background: var(--action);
    border: 1px solid var(--action);
    border-style: solid;
    color: var(--action-ink);
}

.uploadinput:focus-visible + .uploadbtn-cam,
.uploadbtn-cam:hover {
    background: #0a558f;
}

/* Set by vm-app.js once files are picked, since photos do not
   upload until save and silence there is confusing. */
.uploadbtn-armed {
    border-style: solid;
    background: var(--open-bg);
    border-color: var(--open);
    color: var(--open);
}

.uploadbtn-cam.uploadbtn-armed {
    background: var(--open-bg);
    color: var(--open);
}


/* ---------- installed to the home screen ----------

   With no browser chrome the sticky top bar sits directly under
   the status bar and the clock overlaps the title, so pick up
   the safe area inset only in standalone mode.
   ------------------------------------------------------------ */

@media all and (display-mode: standalone) {
    .topbar {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }

    /* No browser back button in standalone, so the in-page one
       has to be comfortably reachable. */
    .topbar .btn-quiet {
        min-height: 44px;
    }
}
/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 6)

   VIN and invoice suggestion bars, and the cost mismatch hint.
   ------------------------------------------------------------ */


/* The VIN bar is blue rather than amber, because unlike the
   odometer this one has been arithmetically verified. Amber is
   reserved for "check this yourself". */
.ocrbar-vin {
    background: #e8f0f7;
    box-shadow: inset 4px 0 0 0 var(--action);
}

.ocrbar-vin .ocrbar-label {
    color: var(--action);
}

.ocrbar-vin .btn-quiet {
    background: var(--surface);
}

.ocrbar-vin-code,
.ocrbar-vin .ocrbar-vin {
    display: block;
}

/* VINs are 17 characters and get read back character by
   character against a plate, so monospace with generous
   tracking, and allowed to wrap rather than overflow. */
.ocrbar-vin span.ocrbar-vin,
.ocrbar .ocrbar-vin {
    display: block;
    margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.25;
    word-break: break-all;
}

.ocrbar-inv .ocrbar-num {
    font-size: 30px;
}

.field-hint-warn {
    color: var(--open);
    font-weight: 600;
}
/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 7)

   Edit page: delete zone and inline action buttons.
   ------------------------------------------------------------ */


/* A secondary action that belongs to the field above it, like
   the VIN lookup, rather than to the form as a whole. */
.btn-inline {
    display: inline-flex;
    margin-top: 10px;
    min-height: 44px;
    font-size: 15px;
}


/* ---------- delete ----------

   The entry point is quiet and lives at the bottom, well past
   Save, so it is never adjacent to anything routine. The
   confirmation panel is where it gets loud, and only there.
   ------------------------------------------------------------ */

.danger {
    margin-top: 36px;
    padding: 18px var(--pad);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: #fdecec;
}

.danger-quiet {
    border-color: var(--rule);
    background: var(--surface);
}

.danger-lead {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 650;
    color: var(--danger);
}

.danger p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

.danger-alt {
    color: var(--ink-soft);
}

.danger-note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
    text-align: center;
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

/* The unconfirmed one reads as text, not as a button waiting to
   be hit. It only becomes a real button on the confirm panel. */
.btn-danger-quiet {
    background: transparent;
    border-color: var(--rule);
    color: var(--danger);
}

.danger .btn-block + .btn-block {
    margin-top: 10px;
}
/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 8)

   Camera scanner overlay.
   ------------------------------------------------------------ */

.scan-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #0b0e10;
    flex-direction: column;
}

.scan-overlay.scan-open {
    display: flex;
}

/* Stop the page behind scrolling under the overlay */
body.scan-locked {
    overflow: hidden;
}

.scan-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* contain, not cover. Letterboxing costs a little preview size
   and buys a straightforward mapping from the guide box back to
   source pixels - see cropRect() in vm-scan.js. */
.scan-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0b0e10;
}

.scan-guide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* The dark surround is one big box shadow rather than four
   panels, so the cutout stays exact at any aspect ratio. */
.scan-guide-box {
    display: block;
    width: 88%;
    max-width: 640px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}

.scan-bar {
    flex: 0 0 auto;
    padding: 16px var(--pad);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: #14181b;
}

.scan-hint {
    margin: 0 0 14px;
    color: #e8ecee;
    font-size: 15px;
    text-align: center;
    min-height: 22px;
}

.scan-hint-error {
    color: #ffb4b4;
}

.scan-acts {
    display: flex;
    gap: 10px;
}

.scan-acts .btn {
    flex: 1 1 0;
    min-height: var(--tap);
}

.scan-acts .btn-quiet {
    background: transparent;
    border-color: #47535a;
    color: #e8ecee;
}

.scan-shoot:disabled {
    opacity: 0.6;
}

/* Brief highlight so it is obvious which fields the scan
   touched, since it can fill four at once. */
.field-filled {
    border-color: var(--action) !important;
    background: #eef4fa !important;
}
/* ------------------------------------------------------------
   Append to the end of /var/www/html/vm/vm.css   (round 9)

   NFC write button status.
   ------------------------------------------------------------ */

.tagbox .nfcbtn {
    margin-bottom: 10px;
}

.nfcstatus {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    min-height: 0;
}

.nfcstatus:empty {
    display: none;
}

.nfcstatus-busy {
    color: var(--open);
    font-weight: 600;
}

.nfcstatus-ok {
    color: #1f5d2b;
    font-weight: 600;
}

.nfcstatus-error {
    color: var(--danger);
}

/* Where the button works, the manual NFC Tools instructions are
   a footnote rather than the main route. */
.nfc-manual-note-secondary {
    font-size: 13px;
    opacity: 0.85;
}