/*
    Garagex — what the design system does not cover.

    servicedesk-design-system.css is the owner's approved file and is never edited, so that a newer
    version can replace it wholesale. Everything Garagex needs on top of it lives here, expressed in
    the same tokens.
*/

/* ---------- Daylight: the whole screen light, rail included ----------

    The product has only ever been drawn one way — a near-black rail down the side of a pale page —
    and a workshop with the shutter up and the sun on the counter reads that rail as a black bar.
    This is the same product with the light turned on: the rail becomes paper, its type becomes ink,
    and the accent stays exactly where it was so nothing has to be relearned.

    Written here rather than in the design system, which is the owner's file and is replaced
    wholesale. Same token contract, so every component follows without being touched.
*/
body[data-theme="daylight"] {
    --paper: #F7F8FA;
    --card: #FFFFFF;
    --card-2: #FBFCFD;
    --line: #E4E8ED;
    --line-2: #EFF2F5;
    --ink: #14181F;
    --slate: #5F6B7A;
    --slate-2: #8A94A2;

    /* The rail. Three greys where the dark theme has three blacks, and a border rather than a
       shadow to separate it from the page — on a light rail there is no edge without one. */
    --carbon: #FFFFFF;
    --carbon-2: #F1F4F7;
    --carbon-3: #E4E8ED;
    --rail-tx: #4A5666;
    --rail-strong: #14181F;
    --rail-bd: #E4E8ED;

    --orange: #F04E23;
    --orange-d: #C93C14;
    --orange-w: #FFF1EC;
    --on-acc: #FFFFFF;
    --teal: #0E7C86;
    --teal-w: #E4F4F5;
    --amber: #A96D08;
    --amber-w: #FCF2DF;
    --green: #12784F;
    --green-w: #E3F4EC;
    --violet: #5645B8;
    --violet-w: #EDEBFA;
    --red: #C4321F;
    --lane: #EEF1F5;

    --r: 12px;
    --r2: 9px;
    --r3: 8px;
    --pill: 20px;
    --sh: 0 1px 2px rgba(20, 24, 31, .04), 0 1px 3px rgba(20, 24, 31, .03);
    --sh-2: 0 6px 20px rgba(20, 24, 31, .07);

    /* The orange tab down the left of the open entry. It reads as a marker against a black rail
       and as a scratch against a white one, so the active entry is filled instead — see below. */
    --navmark: 0;
}

/*
    The open entry, on a rail that is now the same colour as the card behind it. The dark themes
    lift it with a lighter grey; here that would be invisible, so it takes the accent's own tint —
    the same treatment the design system gives its other light rails.
*/
body[data-theme="daylight"] .nav a.on,
body[data-theme="daylight"] .nav button.on {
    background: var(--orange-w);
    color: var(--orange-d);
}

/*
    The three dots beside the picker are the palette shown as itself: accent, second colour, canvas.
    On a light theme the canvas one is white, and a white circle on a white bar is nothing at all —
    so the two that follow the accent get a hairline of their own. The first keeps its halo.
*/
.appbar-dots i + i {
    box-shadow: inset 0 0 0 1px rgba(105, 117, 133, .35);
}

/* The rail has no shadow to sit under, so it needs the one line the dark rail never did. */
body[data-theme="daylight"] .rail {
    border-right: 1px solid var(--rail-bd);
}

/*
    The brand square and the branch picker are drawn on --carbon-2, which is now near-white. Their
    text is --rail-strong, so both follow; what does not follow is the count pill, which is grey on
    grey at this weight.
*/
body[data-theme="daylight"] .nav .cnt {
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--slate);
}

/*
    The rail's menu scrolls when a screen is shorter than the list, and on Windows that drew the
    operating system's full scrollbar as a grey column between the rail and the page. The bar goes;
    the scrolling stays — wheel, touch and keyboard all still move the list, which is how the
    design system already treats its own scrolling tab strip.
*/
.nav {
    scrollbar-width: none;
}

.nav::-webkit-scrollbar {
    display: none;
}

/*
    Out of sight, still there for a screen reader — and still usable by a script, which is what the
    photo button relies on: the file input is hidden and the label in front of it opens the picker.

    Written three times so it wins. `.field input { width: 100% }` is more specific than one class,
    so a hidden file input inside a field came out 1440px wide and dragged every screen carrying one
    sideways — the control was invisible and the damage was not. Specificity rather than
    `!important`, so a rule that genuinely needs to override this one still can.
*/
.visually-hidden,
.visually-hidden.visually-hidden.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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

.field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--red);
}
.field-hint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--slate);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.form-error {
    background: var(--orange-w);
    border: 1px solid var(--red);
    border-radius: var(--r3);
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--ink);
}

/*
    A validation summary with nothing to say is not an empty element: the tag helper always emits a
    <ul>, and stamps validation-summary-valid on the wrapper. :empty alone therefore never matched,
    and all thirteen screens carrying a summary drew an empty red box above the form on first load.
    The class is the reliable signal — it is what the tag helper sets, in both directions.
*/
.form-error:empty,
.form-error.validation-summary-valid { display: none; }

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

/*
    A box the server refused, marked where the eye is rather than only under it. Twelve-pixel red
    type below a field that still looks untouched is easy to miss on a form with nine of them, and
    a dialog that says no without showing which box it means reads as a dialog that simply failed.

    aria-invalid rather than a class of our own: it is what a screen reader announces, and the
    dialog has to set something either way.
*/
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); }

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--orange-w); }

/* The tag helpers mark a refused box with their own class rather than aria-invalid — same look. */
.field input.input-validation-error,
.field select.input-validation-error,
.field textarea.input-validation-error { border-color: var(--red); }

.field input.input-validation-error:focus,
.field select.input-validation-error:focus,
.field textarea.input-validation-error:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--orange-w); }

/* ---------- the notices TempData carries between requests ---------- */

.notice {
    border-radius: var(--r3);
    padding: 11px 14px;
    margin-bottom: 16px;
    font-size: 13.5px;
}

.notice-ok { background: var(--green-w); color: var(--green); font-weight: 600; }
.notice-stop { background: var(--orange-w); color: var(--red); font-weight: 600; }

/* ---------- odds and ends the system leaves to the product ---------- */

.stack { display: grid; gap: 13px; }
.muted { color: var(--slate); }
.sp { flex: 1; }

/* A permission list: held ones read as facts, absent ones as absences. */
.permission-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 5px 14px;
}

.permission { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.permission code { font-family: var(--mono); font-size: 12px; }
.permission-mark { width: 14px; text-align: center; font-weight: 700; }
.permission.held .permission-mark { color: var(--green); }
.permission.absent { color: var(--slate-2); }
.permission.absent .permission-mark { color: var(--line); }

/* Tiles on the overview — a card you press rather than read. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.tile {
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh);
    text-decoration: none;
    color: var(--ink);
}

.tile:hover { border-color: var(--orange); }
.tile .ic { font-size: 18px; color: var(--orange); }
.tile .t { font-size: 14.5px; font-weight: 700; }
.tile .n { font-size: 12.5px; color: var(--slate); }

/* Detail pairs — a label and its value, on the item and branch screens. */
.detail-grid { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 8px 20px; margin: 0; }
.detail-grid dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
.detail-grid dd { margin: 0; font-size: 13.5px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: auto; accent-color: var(--orange); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.check-muted { color: var(--slate-2); }

/*
    A box that no longer says what the role says. The two or three an owner actually changed for
    this person are what they come back to the form looking for, and they are otherwise identical
    to the twenty-five they left alone.
*/
.check-changed { font-weight: 600; }
.check-changed .field-hint { margin-left: 4px; font-weight: 400; }
.check code { font-family: var(--mono); font-size: 12px; }

.row-inactive { opacity: .5; }
.row-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.row-actions form { display: flex; gap: 6px; align-items: center; }
.inline-form input { width: 140px; padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--r3); }

/* The vocabulary screen: a key, and the word this garage uses for it. */
.vocab-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    align-items: start;
    padding: 11px 0;
    border-top: 1px solid var(--line-2);
}

.vocab-row:first-child { border-top: none; }
.vocab-key { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.vocab-key code { font-family: var(--mono); font-size: 11.5px; color: var(--slate); }

.branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.photo-grid {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.photo { display: grid; gap: 6px; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r3); border: 1px solid var(--line); }
.photo-upload { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

.item-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

.item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 11px;
    background: var(--card-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r3);
}

.item-desc { flex: 1; font-size: 13px; color: var(--slate); }

@media (max-width: 720px) {
    .vocab-row { grid-template-columns: 1fr; gap: 6px; }
    .row-actions { justify-content: flex-start; }
}

/* =========================================================================   The page and form family.

   These class names were used across ten screens — branch settings, the vocabulary
   editor, the staff forms — and were never given rules anywhere. Those pages have
   been rendering as bare HTML: browser-default heading sizes, sections running
   together with no card around them, and submit buttons in system grey. Nothing was
   broken enough to fail a test, which is exactly why it survived; it only shows up
   by looking at the screen.

   Written in the design system's own tokens, so a newer version of that file still
   drives these.
   ================================================================================ */

/* The back link out of a sub-screen moved to servicedesk-design-system.css. It is drawn by the
   shared shell on every screen that has a parent, and the platform panel's shell does not load
   this file — so under the panel it was rendering as a bare underlined anchor. A component every
   shell renders belongs in the stylesheet every shell loads. */

.page-title {
    font-family: var(--disp);
    font-size: 23px;
    font-weight: var(--hweight);
    letter-spacing: var(--htrack);
    color: var(--ink);
    margin: 0 0 4px;
}

.page-lede {
    max-width: 68ch;
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--slate);
}

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.panel-title {
    font-family: var(--disp);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: var(--htrack);
    color: var(--ink);
    margin: 0 0 4px;
}

/* A panel title with one control sitting against it. Baseline rather than centre, so the small
   action sits on the same line the heading is written on. */
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.panel-head .panel-title { margin-bottom: 0; }

/* Quieter than a button and louder than a hint: it belongs to the panel, not to the form. */
.panel-action {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--orange);
    cursor: pointer;
}

.panel-action:hover { text-decoration: underline; }

.panel-note {
    max-width: 64ch;
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--slate);
}

.panel-title + .form-panel,
.panel-title + .field,
.panel-title + .field-row { margin-top: 13px; }

.form-panel { display: grid; gap: 2px; }

/* Two or three boxes that belong on one line, and stack rather than shrink. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }

/* .field is styled by the design system; only the label span it does not know about. */
.field-label {
    display: block;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--slate);
    font-weight: 700;
    margin-bottom: 6px;
}

.field.narrow input, input.narrow { max-width: 110px; }

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 22px;
}

/* One note's own two verbs, quiet until the row is under the pointer. */
.notes-act {
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
}

.notes-act:hover { color: var(--ink); text-decoration: underline; }

.notes-act.danger:hover { color: var(--red); }

.notes-trail-do { margin-left: auto; display: inline-flex; gap: 10px; }

.notes-trail-one .notes-trail-who { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

/* What a correction leaves behind, and what a withdrawal leaves behind. */
.notes-trail-edited { font-style: italic; color: var(--slate-2); }

.notes-trail-one.withdrawn .notes-trail-gone { font-style: italic; color: var(--slate-2); }

/* ---------- a record beside its conversation ----------
   The lead screen is a form and a list of notes. The form alone left half a wide monitor empty,
   and stretching it put a 600 px box around a ten-digit phone number. So the form keeps the width
   two boxes side by side actually want, and the notes take whatever the screen has left.

   Only the form column is named: the other is an ordinary `.col`, which already fills the rest.
   Below 1024 px garagex-mobile.css lays `.grid-3` out as blocks and this stops applying. */
.grid-3 > .col-form { flex: 0 0 760px; width: 760px; }

/* The shared notes block, wherever it is dropped — a little air above the trail, nothing more.
   The trail and its rows are styled by the notes-trail rules the lead dialog already brought. */
.notes-block { display: grid; gap: 10px; }

/* ---------- the page heading, on one line ----------
   A record's heading was a tower — eyebrow, name, phone, address, each on its own line — with the
   buttons floating beside an empty corner. The facts under the name now flow on one line after it,
   and the buttons stand level with the name, so the heading spends its height on the record rather
   than on air. Applies to every screen, because every screen draws the same .phead. */
.phead { align-items: center; margin-bottom: 16px; }

.phead > div:first-child {
    display: flex;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 3px;
    flex-wrap: wrap;
}

/* The little section word keeps its own small line above the name. */
.phead > div:first-child > .eyebrow { flex-basis: 100%; margin-bottom: 0; }

.phead > div:first-child > p,
.phead > div:first-child > .sub,
.phead > div:first-child > .field-hint { margin: 0; }

/* The way back lives in the top bar beside the breadcrumb, so it costs the page no height at
   all. Below the crumb's own cut-off the pill keeps its text; on a phone, where the search box
   takes the row, it closes down to the arrow alone. */
.appbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }

.appbar .page-back { margin: 0; flex: none; }

@media screen and (max-width: 767.98px) {
    .appbar .page-back { padding: 5px; }
    .appbar .page-back-text { display: none; }
}

/* ---------- folding cards on a long screen (fold.js) ----------
   The chevron fold.js puts before a card's heading. Everything below the heading disappears when
   the card is closed; the heading row stays, so the screen becomes its own table of contents. */
.fold {
    border: 0;
    background: none;
    padding: 0;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--slate);
    font-size: 12px;
    line-height: 1;
    transition: transform .15s ease;
}

.fold:hover { color: var(--ink); background: var(--card-2); }

.card.folded > .hd .fold { transform: rotate(-90deg); }

/* The whole header bar is the switch a finger actually hits — not just the 20px chevron.
   Buttons and pickers on the bar keep their own cursor and their own meaning. */
.card.foldable > .hd { cursor: pointer; }
.card.foldable > .hd h3 { user-select: none; }

.card.folded > :not(.hd) { display: none; }

/* Closed, the divider under the heading would underline nothing. */
.card.folded > .hd { border-bottom: 0; }

/* A closed card is its heading and nothing more — even beside an open neighbour. A grid or flex
   row stretches its items to the tallest by default, which left a folded card holding an empty
   box the height of the card next to it. */
.card.folded { align-self: start; height: auto; width: 100%; }

/* ---------- the head of every printed document (_BillHead.cshtml) ----------
   The logo beside the name the branch bills under. Sized so a wide mark and a square one both
   sit inside the head without pushing the number and date off the right. */
.bill .bid { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bill .blogo { height: 56px; max-width: 150px; object-fit: contain; flex: none; }

@media print {
    .bill .blogo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- buttons ----------
   The design system spells these .btn.pri / .btn.quiet / .btn.danger. The views were
   written with hyphenated names, so both spellings resolve to the same button rather
   than rewriting every view around a naming preference. */

.btn-primary,
.btn-quiet,
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    padding: 8px 13px;
    border-radius: var(--r3);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--sh);
}

.btn-primary { background: var(--orange); border-color: var(--orange-d); color: var(--on-acc); }
.btn-primary:hover { background: var(--orange-d); color: var(--on-acc); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--slate); box-shadow: none; }
.btn-quiet:hover { background: var(--line-2); color: var(--ink); }

.btn-danger { background: transparent; border-color: var(--red); color: var(--red); box-shadow: none; }
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-primary:disabled, .btn-quiet:disabled, .btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* The one notice kind the set was missing: refused, but nothing was lost. */
.notice-warn { background: var(--amber-w); color: var(--amber); font-weight: 600; }

/* =========================================================================   The rest of what the views ask for.

   A census of every class name used in a .cshtml against every class name any
   stylesheet defines turned up twenty-two more with no rules at all. They are listed
   here in the order that census found them, so the same census run again comes back
   empty.
   ================================================================================ */

/* A title with its actions on the same line, dropping under it when there is no room. */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.page-head .page-title, .page-head .page-lede { margin-bottom: 0; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Deleting a customer is not an action to put beside Save. It sits at the foot of the
   page, in its own bordered box, and says what it will take with it. */
.danger-zone {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: var(--r3);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.danger-zone p { margin: 0; font-size: 12.5px; color: var(--slate); max-width: 60ch; }

/* "yours" — a word this garage has changed from the preset. */
.vocab-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--pill);
    background: var(--violet-w);
    color: var(--violet);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge-stop { background: var(--orange-w); color: var(--red); }

/* A checkbox that reads as a setting rather than as a list item. */
.switch { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.switch input { width: auto; accent-color: var(--orange); }

/* Presets, and the roles on the staff form: a radio drawn as a card. */
.preset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }

.preset {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3px 10px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r3);
    background: var(--card);
    cursor: pointer;
}

.preset:hover { border-color: var(--slate-2); }
.preset:has(input:checked) { border-color: var(--orange); background: var(--orange-w); }
.preset input { width: auto; grid-row: span 2; accent-color: var(--orange); }
.preset-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.preset-example { grid-column: 2; font-size: 11.5px; color: var(--slate); }

.text-danger { color: var(--red); }
.photo-remove { padding: 3px 8px; font-size: 12px; }

.vocab-form { display: block; }
.vocab-grid { display: block; }

/* The vocabulary boxes sit outside .field, so the design system's control styling —
   which is written as .field input — never reached them and they rendered as raw
   browser inputs on the one screen whose entire job is typing words into boxes. */
.vocab-input input,
.vocab-input select,
.inline-form input,
.logo-actions input[type="text"] {
    width: 100%;
    max-width: 320px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r3);
    background: var(--card);
    font-family: var(--body);
    font-size: 13.5px;
    color: var(--ink);
}

.vocab-input input:focus,
.vocab-input select:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-w);
}

.vocab-input input[readonly] { background: var(--card-2); color: var(--slate); }
.vocab-row.changed .vocab-input input { border-color: var(--violet); }

.vocab-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* What the vocabulary screen promises, as a list of consequences rather than prose. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--slate); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* A table too wide for a phone scrolls inside its own box rather than the page. */
/*
    A table that is wider than the screen scrolls inside its own box.

    `contain: paint` is the half that is easy to leave out, and without it the box scrolls *and* the
    page grows anyway: the browser still counts the columns past the right edge as part of the
    document, so the whole screen slides sideways under a table that was supposed to be handling
    itself. Saying "nothing here paints outside me" is what makes the promise true. Applied to the
    design system's own wrapper as well, so one rule covers every table in the product.
*/
.tablewrap,
.tblwrap { contain: paint; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { min-width: 640px; }

/*
    A plate is a plate: it never wraps. In a narrow table cell the number was breaking after the
    series and the second line rendered outside the border, so every reminder card showed what
    looked like a damaged number plate. The cell scrolls or the column widens; the plate stays one
    line, because that is the thing being read off the car.
*/
.plate .no { white-space: nowrap; }

/*
    A grid track's implicit minimum is its content, so a cell holding something that will not wrap —
    a number plate — grows the track past the card instead of the track clipping the cell. That is
    what pushed the Remind buttons off the right edge of the reminder cards. Every column may shrink;
    .clip inside them already says what to do when there is not enough room.
*/
.rows .rh > *, .rows .rr > * { min-width: 0; }
/* Plates on a list row: they wrap rather than stretch the column. */
.plate-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.plate-more { font-size: 11px; font-weight: 700; color: var(--slate); }

/*
    A full add/edit screen lifted into the dialog.

    The screen draws its form on cards, because on a screen of its own a card is what separates the
    form from the page around it. Inside a dialog the dialog is already that separation, so a card
    there is a second border drawn a few pixels inside the first. The markup stays exactly as the
    screen wrote it — one place decides how it reads in a dialog, and it is here.
*/
#modalWrap .mb > .card,
#modalWrap .mb .card { background: none; border: 0; box-shadow: none; margin: 0 0 4px; }
#modalWrap .mb .card > .bd { padding: 0; }
#modalWrap .mb .card > .hd { padding: 0 0 8px; border: 0; background: none; }
#modalWrap .mb .card > .hd h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
/* The screen sized its form for a screen; the dialog decides its own width. */
#modalWrap .mb > form, #modalWrap form > .mb { max-width: none; }
#modalWrap .mb > .phead { display: none; }

/* ---------------------------------------------------------------- the product's own logo
   Only on the screens that speak for Garagex: the sign-in halves and the platform panel. A
   garage's own screens carry that garage's name, and their bills carry their own head. */

/* Sized by width, not by height, and told to sit at the start of its column.
   `.left` is a flex column, whose default `align-items:stretch` pulls a replaced element out to
   the full column — so `height:74px;width:auto` was not 74px of logo, it was 74px of logo stretched
   across 700px of panel with the wordmark pulled flat. Width plus `height:auto` takes the artwork's
   own 1060x235, and `align-self` stops the stretch at its source. */
#login .lg-img{width:296px;max-width:100%;height:auto;align-self:flex-start;display:block;margin-bottom:26px}

/* The dark half of the sign-in screen. The artwork is drawn for paper — navy wordmark, white
   ground — so it is given the white ground it expects rather than being inverted into something
   the brand does not have. */
#login .left .lg-img.on-dark{/* the plate is .brandplate, in the design system */}

/* The platform panel's own rules live in garagex-platform.css, which is the stylesheet those
   two pages actually load. Written here they styled nothing, and the logo came out at its
   natural 1060 pixels — straight through the side of the sign-in card. */


/* ------------------------------------------------------------ a platform support visit
   Somebody from the platform is inside a live business that is not theirs. It is a band across the
   whole width rather than a chip in a corner, because the failure this prevents is somebody
   forgetting where they are — and a colour the product uses nowhere else, so it can never be
   mistaken for one of the garage's own notices. */

.visitband{background:#5645B8;color:#fff;position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(0,0,0,.15)}
.visitband-in{max-width:1400px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;
  gap:12px;font-size:13.5px;line-height:1.4}
.visitband-in > b{flex:none;background:rgba(255,255,255,.16);padding:3px 10px;border-radius:20px;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.visitband-in > span{min-width:0}
.visitband-in form{margin:0 0 0 auto;flex:none}
.visitband-out{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  padding:6px 14px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.visitband-out:hover{background:#fff;color:#5645B8;border-color:#fff}

@media (max-width:720px){
  .visitband-in{flex-wrap:wrap;gap:8px;padding:8px 14px;font-size:12.5px}
  .visitband-in form{margin-left:0;width:100%}
  .visitband-out{width:100%}
}

/* =========================================================================   Getting started.

   The card on the overview that a garage sees in its first week and never again — see
   Views/Shared/_FirstRun.cshtml for why it exists and how it ends.

   Written in the design system's tokens like everything else here, so it follows the palette the
   garage picked rather than being the one panel that stays orange under all eleven.
   ================================================================================ */

.firstrun { margin-bottom: 16px; }

/* The count, and the same thing again as a bar. One is read at a glance, the other when somebody
   wants the number. */
.firstrun-count {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--slate);
    white-space: nowrap;
}

.firstrun-bar {
    display: block;
    width: 88px;
    height: 5px;
    border-radius: 20px;
    background: var(--line);
    overflow: hidden;
    flex-shrink: 0;
}

.firstrun-bar i {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: var(--green);
    transition: width .3s ease;
}

.firstrun-hide { margin: 0; }

.firstrun-steps { list-style: none; margin: 0; padding: 0; }

.firstrun-steps > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-top: 1px solid var(--line-2);
}

/* The step numbers. A tick once it is done, and the number until then — so the list reads as a
   sequence rather than as five things that all want doing at once. */
.firstrun-steps .tick {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    background: var(--card-2);
    border: 1px solid var(--line);
    color: var(--slate);
    margin-top: 1px;
}

.firstrun-steps > li.on .tick { background: var(--green-w); border-color: var(--green); color: var(--green); }

/* The next thing to do. Not a nag and not an expanded panel — the eye simply lands on it. */
.firstrun-steps > li.now .tick { background: var(--orange); border-color: var(--orange-d); color: var(--on-acc); }
.firstrun-steps > li.now { background: var(--orange-w); }

.firstrun-steps .tx { flex: 1; min-width: 0; }
.firstrun-steps .tx b { display: block; font-size: 13.5px; color: var(--ink); }
.firstrun-steps .tx .d { display: block; font-size: 12.5px; color: var(--slate); line-height: 1.5; margin-top: 2px; }

/* A step already taken says so quietly. It is there for the sense of progress, not to be read. */
.firstrun-steps > li.on .tx b { color: var(--slate); }

.firstrun-did {
    flex: 0 0 auto;
    align-self: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green);
}

.firstrun-foot {
    border-top: 1px solid var(--line-2);
    background: var(--card-2);
    font-size: 12.5px;
    color: var(--slate);
    line-height: 1.6;
    border-radius: 0 0 var(--r) var(--r);
}

.firstrun-foot a { color: var(--orange-d); font-weight: 600; }

/* On a phone the button goes under the words rather than beside them: a 44px target and a sentence
   cannot share 360px, and the sentence is what makes the button worth pressing. */
@media screen and (max-width: 767.98px) {
    .firstrun-steps > li { flex-wrap: wrap; }
    .firstrun-steps .tx { flex: 1 1 calc(100% - 36px); }
    .firstrun-steps > li > .btn,
    .firstrun-steps .firstrun-did { flex: 1 1 100%; margin-left: 36px; text-align: center; }
    .firstrun-bar { display: none; }
}

/* The branch a counter sale comes off.

   Its own name rather than .branchpick, which the design system already owns: that one is the
   rail's picker, drawn on carbon in white type, and this one sits in a white .empty in the middle
   of the page. Two pickers, two jobs, two classes. */
.sellbranch {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}

.sellbranch select {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r3);
    background: var(--card);
    color: var(--ink);
    font: 600 13.5px/1 var(--body);
    cursor: pointer;
}

.sellbranch select:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-w); }

/* The folded half of the sign-up form.

   Two fields that are not decisions — the branch is already named and the city is optional — kept
   out of the way of the four that are. Drawn as a quiet line rather than as a panel, so it reads as
   "there is more if you want it" and not as a section somebody has to deal with. */

.signup-more { margin-bottom: 13px; }

.signup-more > summary {
    cursor: pointer;
    list-style: none;
    padding: 9px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 7px;
}

.signup-more > summary::-webkit-details-marker { display: none; }

/* The chevron, drawn rather than relying on the browser's own marker — which is a different shape,
   a different size and a different colour in each of them. */
.signup-more > summary::before {
    content: '▸';
    font-size: 10px;
    color: var(--slate-2);
    transition: transform .15s ease;
}

.signup-more[open] > summary::before { transform: rotate(90deg); }
.signup-more > summary:hover { color: var(--ink); }
.signup-more[open] > summary { color: var(--ink); }

/* The trail of notes on a lead — what has been said to a buyer, newest first.

   Scrolled rather than allowed to grow, because the dialog it sits in already scrolls and a lead
   with forty notes on it would push the Save button off the bottom of a laptop screen. */
.notes-trail {
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r3);
    background: var(--card-2);
}

.notes-trail-one {
    padding: 9px 11px;
    border-bottom: 1px solid var(--line-2);
}

.notes-trail-one:last-child { border-bottom: 0; }

/* Kept as typed: a counter who laid a note out in three lines meant three lines. */
.notes-trail-said {
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.notes-trail-who {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--slate-2);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* A note written as the lead was moved carries the stage it moved to. */
.notes-trail-stage {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    font-weight: 600;
    color: var(--slate);
}

/* The dealer's "Cars / Bikes" pick: two buttons under the Buy & sell card, lined up with its text.
   Hidden while another card is chosen; a browser without :has simply keeps them showing. */
.bizdeals { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -1px 0 9px 44px; }
.field:has(#bizDealer:not(:checked)) .bizdeals { display: none; }
.bizdeals-lb { font-size: 12px; color: var(--slate); }

.bizdeal,
.field label.bizdeal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--card);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
}
.bizdeal input[type=radio],
.field .bizdeal input[type=radio] { width: auto; margin: 0; accent-color: var(--orange); }
.bizdeal:hover { border-color: var(--orange); }
.bizdeal:has(input:checked) { border-color: var(--orange); background: var(--orange-w); color: var(--orange-d); }
.bizdeal:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--orange-w); }

/* ---------- sign-up in two steps (signup-steps.js) ----------
   Without the script both steps show one under the other, so the second keeps a gap above it.
   With it only one shows at a time and the gap goes. */
.signup-step + .signup-step { margin-top: 22px; }
form.stepped .signup-step + .signup-step { margin-top: 0; }

.signup-stepno {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate);
}
.signup-stepno .sp { flex: 1; }
.signup-stepno .btn { letter-spacing: normal; text-transform: none; }

.signup-q { margin: 0 0 2px; font-size: 17px; }
.signup-q-hint { margin: 0 0 12px; }