/* PMR Desk (the private CRM at /desk/). Mobile first: the base rules are the 375px layout, the
   media query at the bottom widens it. No framework, no build step. Loaded from a file because the
   site's CSP forbids inline styles. */

:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1c2330; --muted: #5d6675; --line: #dfe3ea;
  --brand: #c2410c; --brand-ink: #fff; --ok: #166534; --ok-bg: #dcfce7; --err: #991b1b; --err-bg: #fee2e2;
  --warn: #92400e; --warn-bg: #fef3c7; --focus: #1d4ed8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: #9a3412; }
h1 { font-size: 1.4rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* top bar */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; background: #1c2330; color: #fff; padding: .5rem 16px; }
.bar a { color: #fff; text-decoration: none; padding: .55rem .25rem; min-height: 44px; display: inline-flex; align-items: center; }
.bar .brand { font-weight: 700; }
.bar nav { display: flex; gap: .5rem; flex: 1; }
.bar nav a[aria-current="page"] { border-bottom: 3px solid var(--brand); }
/* business switcher (only shown to people with more than one business) and the active store's name */
.bar nav.switcher { flex: 0 0 auto; gap: .25rem; }
.bar nav.switcher a { padding: .55rem .5rem; border-radius: 6px; background: rgba(255,255,255,.08); }
.bar nav.switcher a[aria-current="true"] { background: rgba(255,255,255,.25); font-weight: 700; }
.bar .store-name { font-weight: 700; }
.bar .grow { flex: 1; }
.signout { display: flex; align-items: center; gap: .5rem; margin: 0; }
.who { font-size: .85rem; opacity: .8; }
.link { background: none; border: 0; color: #fff; text-decoration: underline; font: inherit; min-height: 44px; padding: 0 .25rem; cursor: pointer; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 12px 16px 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 0 0 14px; }
.narrow { max-width: 440px; margin: 24px auto; }
.crumb { margin: .2rem 0; }
.empty { color: var(--muted); margin: .2rem 0; }
.count { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; border-radius: 99px; background: #e8ebf1; color: var(--muted); font-size: .8rem; text-align: center; }

/* forms and buttons: 44px tap targets */
label { display: block; font-weight: 600; margin: .7rem 0 .2rem; }
.check { font-weight: 400; display: flex; gap: .5rem; align-items: center; min-height: 44px; }
input[type=text], input[type=password], input[type=search], input[type=datetime-local], select, textarea {
  width: 100%; min-height: 44px; padding: .5rem .6rem; font: inherit; border: 1px solid #b7bfcc; border-radius: 8px; background: #fff; color: var(--ink);
}
textarea { resize: vertical; }
input[type=checkbox] { width: 22px; height: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border: 1px solid #b7bfcc; border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.small { min-height: 44px; padding: 0 .7rem; font-size: .9rem; }
form .btn { margin-top: .8rem; }
.inline { display: block; }
.inline .btn { margin-top: .4rem; }

.flash { padding: .6rem .8rem; border-radius: 8px; margin: 0 0 12px; font-weight: 600; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-err { background: var(--err-bg); color: var(--err); }

.chip { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-size: .8rem; font-weight: 700; background: #e8ebf1; color: #334155; white-space: nowrap; }
.chip-new { background: #dbeafe; color: #1e40af; }
.chip-contacted, .chip-quoted { background: #e0e7ff; color: #3730a3; }
.chip-waiting_us { background: var(--warn-bg); color: var(--warn); }
.chip-waiting_customer { background: #f1f5f9; color: #475569; }
.chip-sold { background: var(--ok-bg); color: var(--ok); }
.chip-lost { background: #e5e7eb; color: #4b5563; }
.chip-warn { background: var(--warn-bg); color: var(--warn); }

/* Today rows: one line of info, one button */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; flex-direction: column; gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.row-main .what { color: var(--ink); overflow-wrap: anywhere; }
.row-main .when { color: var(--muted); font-size: .85rem; }
.row-act { margin: 0; }
.row-act .btn, .row-act.btn { width: 100%; margin-top: 0; }
.contact-link { font-weight: 700; }
.scope { margin: 0 0 12px; max-width: 220px; }

/* contacts filters */
.filters { display: grid; gap: .5rem; margin-bottom: .5rem; }
.filters .btn { margin-top: 0; }

/* contact header */
.head-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.head-top h1 { margin: 0; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: .6rem 0 .2rem; }   /* two columns on a phone: the Email button stays on the first screen */
.facts div { min-width: 0; }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.head-forms { display: grid; gap: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; }

/* the four add-action buttons */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 14px; align-items: start; }
.act { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.act > summary { width: 100%; border: 0; }
.act[open] { grid-column: 1 / -1; padding-bottom: 12px; }
.act[open] > summary { background: var(--bg); color: var(--ink); border-radius: 10px 10px 0 0; }
.act > form, .act > p { padding: 0 12px; }
.act summary::-webkit-details-marker { display: none; }

/* tables: stacked rows on a phone, a real table from 768px */
.grid { width: 100%; border-collapse: collapse; }
.grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grid.stack tr { display: block; padding: .6rem 0; border-top: 1px solid var(--line); }
.grid.stack td { display: flex; gap: .6rem; padding: .15rem 0; }
.grid.stack td::before { content: attr(data-label); flex: 0 0 6.5rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; padding-top: .15rem; }
.grid.stack td > * { min-width: 0; }
.grid td { overflow-wrap: anywhere; }
.act-tag { font-weight: 700; }
.act-received-email, .act-received-text, .act-chat, .act-form { color: #1e40af; }
.act-email, .act-text { color: #9a3412; }
.workplan tbody tr { cursor: pointer; }
.wp-details summary { color: var(--focus); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.wp-body { margin-top: .4rem; padding: .6rem; background: var(--bg); border-radius: 8px; max-height: 24rem; overflow: auto; overflow-wrap: anywhere; }
.wp-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.wp-actions .btn { margin-top: 0; }

.steps { padding-left: 1.2rem; }
.steps li { margin: .5rem 0; }
.key { font-size: 1.1rem; letter-spacing: .05em; word-break: break-all; background: var(--bg); padding: .1rem .4rem; border-radius: 6px; }
.codes { list-style: none; padding: 0; columns: 2; font-size: 1.05rem; }
.codes li { margin: .3rem 0; }
.plain summary { cursor: pointer; margin-top: 1rem; color: var(--muted); }

/* contacts: list/board switch, wider filter set, the board */
.viewtoggle { display: flex; gap: .5rem; margin: 0 0 .6rem; }
.viewtoggle .btn { margin-top: 0; }
.grid th a { color: inherit; text-decoration: none; }
.grid th a:hover { text-decoration: underline; }
.board { display: grid; gap: 12px; }
.bcol { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.bcol h2 { display: flex; align-items: center; gap: .4rem; }
.bcol summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.bcol summary h2 { margin: 0; }
.blist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bcard { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow-wrap: anywhere; }
.bcard .what { color: var(--ink); font-size: .9rem; }
.bcard .when { color: var(--muted); font-size: .8rem; }
.row-btns { display: grid; gap: .4rem; }
.audit-filters { margin-bottom: .6rem; }

@media (min-width: 768px) {
  .filters-wide { grid-template-columns: repeat(4, 1fr); }
  .filters-wide #q { grid-column: 1 / -1; }
  .audit-filters { grid-template-columns: repeat(3, 1fr); }
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .row-btns { display: flex; }
  .row { flex-direction: row; align-items: center; justify-content: space-between; }
  .row-main { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
  .row-act, .row-act .btn, .row-act.btn { width: auto; }
  .filters { grid-template-columns: 1fr 11rem 11rem auto; align-items: center; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .head-forms { grid-template-columns: 1fr 1fr; }
  .actions { grid-template-columns: repeat(5, auto); justify-content: start; }
  .act[open] { grid-column: 1 / -1; }
  .grid thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .grid th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .4rem .5rem; border-bottom: 2px solid var(--line); }
  .grid.stack tr { display: table-row; padding: 0; border-top: 0; }
  .grid.stack td { display: table-cell; padding: .55rem .5rem; border-top: 1px solid var(--line); vertical-align: top; }
  .grid.stack td::before { content: none; }
  .scope { max-width: 220px; }
}

/* batch C1: Inbox, vehicles, suggested reply, consent chips, compose helpers */
.badge { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 99px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
.inbox-line { margin: 0 0 14px; }
.inbox-line a { display: inline-flex; align-items: center; min-height: 44px; }
.inbox-item .snippet { margin: .4rem 0; color: var(--muted); overflow-wrap: anywhere; }
.btnrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.btnrow form { margin: 0; }
.btnrow .btn { margin-top: 0; }
.btnrow .act[open] { flex: 1 1 100%; }
.searchrow { display: grid; gap: .5rem; padding: 0 12px; }
.searchrow .btn { margin-top: 0; }
.notice { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: .5rem .7rem; margin: .6rem 0; }
.notice ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.notice-err { background: var(--err-bg); color: var(--err); }
.draft-card { border-color: var(--brand); border-width: 2px; }
.tplpick { padding: 0 12px; }
.counter { margin: .2rem 0 0; font-size: .85rem; }
.chip-consent-express, .chip-consent-implied_inquiry, .chip-consent-implied_purchase { background: var(--ok-bg); color: var(--ok); }
.chip-consent-withdrawn { background: var(--err-bg); color: var(--err); }
.chip-consent-expired, .chip-consent-none { background: #e5e7eb; color: #4b5563; }
@media (min-width: 768px) {
  .searchrow { grid-template-columns: 1fr auto; }
}

/* batch C2: follow-ups to approve, duplicate hints, the merge screen, the follow-up settings */
.row-approve { flex-wrap: wrap; }
.row-approve .preview { flex: 1 1 100%; order: 3; }
.row-approve .row-btns { order: 2; }
.preview summary { color: var(--focus); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.notice-card { border-color: var(--warn); }
.mergegrid { width: 100%; border-collapse: collapse; }
.mergegrid th, .mergegrid td { text-align: left; padding: .5rem .4rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.mergegrid thead th { border-top: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mergegrid label { display: flex; gap: .5rem; align-items: flex-start; min-height: 44px; font-weight: 400; }
.mergegrid input[type=radio] { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; margin-top: .1rem; }
.mergegrid .field { font-weight: 700; white-space: nowrap; }
.keepchoice { display: grid; gap: .5rem; }
.keepchoice label { display: flex; gap: .6rem; align-items: center; min-height: 44px; }
.seqstat { display: grid; gap: .3rem; margin: .5rem 0; }
@media (max-width: 767px) {
  .mergegrid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mergegrid tr, .mergegrid td, .mergegrid th { display: block; }
  .mergegrid tr { border-top: 1px solid var(--line); padding: .5rem 0; }
  .mergegrid td, .mergegrid th { border-top: 0; padding: .15rem 0; }
}
/* a long unbroken name (a typo, a pasted string) must wrap inside its card, not widen the page */
.row, .row-main, .row-main > * { min-width: 0; overflow-wrap: anywhere; }

/* Phase 4 defect loop: every tap target is at least 44px high (D13), the pager (D6), the reminder row's two forms (D14), the device list (D2) */
.crumb a, .facts dd a, .contact-link, .grid th a, .plain summary, .notice a, .board-more { display: inline-flex; align-items: center; min-height: 44px; }
.check input[type=checkbox] { width: 44px; height: 44px; flex: 0 0 auto; margin: 0; }
.mergegrid input[type=radio] { width: 1.6rem; height: 1.6rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .8rem 0; }
.pager .btn { margin-top: 0; }
.row-snooze { display: flex; flex-wrap: wrap; gap: .4rem; }
.row-snooze .btn { margin-top: 0; }
.row-btns form .btn { margin-top: 0; }
.edit-sale form { padding: 0 0 .6rem; }
.anon-chat { flex-wrap: wrap; }
.anon-chat .plain { flex: 1 1 100%; }
/* The Details cell of a Workplan row: on a phone the Open toggle and the row's buttons stack instead of squeezing "Open" into a column of letters, and Open is a 44px target */
.wp-details summary { min-width: 44px; padding: 0 .5rem 0 0; }
@media (max-width: 767px) {
  .grid.stack td[data-label="Details"] { flex-direction: column; gap: .2rem; }
  /* #108: the column-direction flex-basis of the label (6.5rem across a row) became 6.5rem of blank HEIGHT above Open */
  .grid.stack td[data-label="Details"]::before { flex: 0 0 auto; padding-top: 0; }
}
.row-main .chip { align-self: flex-start; }

/* Defect loop 2, L8: the contact page on a phone. Stage and assignment fold away; a reminder's two snooze choices sit inside one Snooze control. */
.more { padding: 0 14px; }
.more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] { padding-bottom: 12px; }
.snooze > summary { list-style: none; }
.snooze > summary::-webkit-details-marker { display: none; }
.snooze[open] > summary { background: var(--bg); }
.snooze form { margin: .4rem 0 0; }
.snooze .btn { margin-top: .3rem; }
.row-btns .snooze { margin: 0; }
.ready { font-weight: 400; }
.act > .ready, .act > .notice { margin-left: 12px; margin-right: 12px; }
.facts .wide { grid-column: 1 / -1; }

/* Recommended message: the one-line next touch above the action bar */
.act > .nexttouch { margin-left: 12px; margin-right: 12px; }
.nexttouch { margin: .6rem 0; padding: .5rem .7rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; overflow-wrap: anywhere; }
.act > .recpeek { margin: .4rem 12px; }
.recpeek summary { cursor: pointer; }
.recbody { white-space: pre-wrap; overflow-wrap: anywhere; margin: .4rem 0; padding: .5rem .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font: inherit; }

/* Stage tick boxes (Contacts list and board): a folded control so it stays small on a phone */
.stagepick { grid-column: 1 / -1; border: 1px solid #b7bfcc; border-radius: 8px; background: #fff; padding: 0 .6rem; }
.stagepick > summary { cursor: pointer; border: 0; justify-content: flex-start; padding: 0; }
.stagepick[open] { padding-bottom: .6rem; }
.stagepick .opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 .6rem; }
.stagepick .check { margin: 0; }
.stagepick .shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0 0; }
@media (min-width: 768px) {
  .stagepick .opts { grid-template-columns: repeat(4, 1fr); }
}

/* Users screen: one tick per business with the store's S-ID beside it */
.tickrow { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-height: 44px; }
.tickrow input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }

/* #110 store desk: the store home, the quote form, the saved quote, the customer page */
.store-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.store-head h1 { margin-bottom: 0; }
.store-tag { font-size: .9rem; font-weight: 400; }
.btn.big { min-height: 52px; font-size: 1.1rem; padding: 0 1.4rem; }
.btn.disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.searchbar { display: grid; gap: .5rem; }
.searchbar .btn { margin-top: 0; }
.empty-state { padding: .4rem 0; max-width: 46rem; }
.chip-q-open { background: #dbeafe; color: #1e40af; }
.chip-q-expired { background: var(--err-bg); color: var(--err); }
.chip-q-sold { background: var(--ok-bg); color: var(--ok); }
.chip-q-void { background: #e5e7eb; color: #4b5563; }
.quoteform .card h2 { margin-bottom: .3rem; }
.fgrid { display: grid; gap: 0 .8rem; grid-template-columns: 1fr; }
.fld { min-width: 0; }
.fld-bad input, .fld-bad select { border-color: var(--err); border-width: 2px; }
.fielderr { color: var(--err); font-weight: 600; margin: .25rem 0 0; font-size: .9rem; }
.fielderr[hidden] { display: none; }
.inputrow { display: flex; gap: .5rem; }
.inputrow .btn { margin-top: 0; }
.quoteform input[type=date], .quoteform input[type=email] { width: 100%; min-height: 44px; padding: .5rem .6rem; font: inherit; border: 1px solid #b7bfcc; border-radius: 8px; background: #fff; color: var(--ink); }
.quoteform input[type=text] { min-width: 0; }
.money { display: flex; align-items: center; gap: .3rem; }
.money input { text-align: right; min-width: 6rem; }
.num { text-align: right; }
.famhead { margin: 1rem 0 .3rem; font-size: 1rem; }
.famreason { margin: 0 0 .4rem; }
.plantable .subrow td { border-top: 0; padding-top: 0; font-size: .85rem; }
.plantable tr.picked { background: #f0fdf4; }
.pick { min-height: 44px; }
.totals { width: 100%; max-width: 28rem; border-collapse: collapse; margin: .8rem 0; }
.totals th { text-align: left; font-weight: 400; padding: .3rem 0; }
.totals td { text-align: right; padding: .3rem 0; font-variant-numeric: tabular-nums; }
.totals .grand th, .totals .grand td { font-weight: 700; font-size: 1.15rem; border-top: 2px solid var(--line); }
.msgs { list-style: none; margin: .6rem 0; padding: 0; }
.msgs li { padding: .45rem .7rem; border-radius: 8px; margin: .3rem 0; }
.msgs .err { background: var(--err-bg); color: var(--err); font-weight: 600; }
.msgs .warn { background: var(--warn-bg); color: var(--warn); }
.savebar { margin-top: .8rem; align-items: center; }
.savebar .btn { margin-top: 0; }
@media (min-width: 768px) {
  .searchbar { grid-template-columns: 1fr auto; }
  .fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fgrid .fld-vin { grid-column: span 2; }
}
@media (max-width: 767px) {
  .grid.stack td.num { text-align: left; }
  .money input { min-width: 0; flex: 1; text-align: left; }
}

/* #110 store desk: a warning beside a field (a VIN that fails its check digit) that does not stop the save */
.fieldwarn { color: var(--warn); background: var(--warn-bg); border-radius: 6px; font-weight: 600; margin: .25rem 0 0; padding: .3rem .5rem; font-size: .9rem; }

/* #110 store desk, contracts and the customer quote sheet */
.chip-c-sold { background: var(--ok-bg); color: var(--ok); }
.chip-c-registered { background: #dbeafe; color: #1e40af; }
.chip-c-void { background: #374151; color: #fff; letter-spacing: .06em; }
tr.is-void td { color: var(--muted); text-decoration: line-through; }
tr.is-void td:nth-child(2), tr.is-void td:nth-child(7) { text-decoration: none; }
.sumrow th, .sumrow td { border-top: 2px solid var(--line); padding-top: .5rem; }
.hint { margin: .2rem 0 0; font-size: .85rem; }
.filters { grid-template-columns: 1fr; align-items: end; }
.filters select, .filters input[type=date] { width: 100%; min-height: 44px; padding: .5rem .6rem; font: inherit; border: 1px solid #b7bfcc; border-radius: 8px; background: #fff; color: var(--ink); }
.plain.card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
@media (min-width: 768px) {
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}
/* The quote sheet: a clean page for the customer, A4 or Letter. */
.sheet-page { background: #fff; }
.qsheet { max-width: 46rem; margin: 0 auto; padding: 1rem 16px 2rem; color: #111; }
.sheetbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.sheetbar .btn { margin-top: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #111; padding-bottom: .6rem; }
.sheet-logo { max-height: 64px; max-width: 14rem; width: auto; height: auto; }
.sheet-store { text-align: right; }
.qsheet h1 { margin: 1rem 0 .5rem; }
.sheet-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.2rem; margin: 0 0 1rem; }
.sheet-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.sheet-facts dd { margin: 0; overflow-wrap: anywhere; }
.sheet-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.sheet-table th, .sheet-table td { padding: .45rem .4rem; border-bottom: 1px solid #ccc; text-align: left; vertical-align: top; }
.sheet-table th.num, .sheet-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-table tfoot td { border-bottom: 0; }
.sheet-table .sheet-total td { font-weight: 700; font-size: 1.15rem; border-top: 2px solid #111; }
.sheet-code { color: #555; font-size: .85rem; }
.sheet-valid { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.sheet-fine { color: #333; font-size: .9rem; }
@media print {
  @page { margin: 14mm; }
  .noprint { display: none !important; }
  body.sheet-page { background: #fff; }
  .qsheet { max-width: none; padding: 0; }
}

/* #110 store desk, other makes (QPOV): the page 51 class guide and the note on the quote sheet */
.othermake-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.btn.linkish { background: none; border: 0; padding: .4rem 0; min-height: 44px; color: inherit; text-decoration: underline; text-align: left; }
.classguide { margin-top: .8rem; }
.classguide summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.guidegrid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.guidegrid h3 { margin: 0 0 .3rem; font-size: 1rem; }
.guidegrid ul { margin: 0; padding-left: 1.1rem; }
@media (min-width: 768px) { .guidegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sheet-note { margin: .8rem 0 0; border: 1px solid #111; padding: .5rem .7rem; font-size: .95rem; }

/* #110 F2b store desk: long plan list kept short, not-available list, quotes list, inspection note, sheet mode choice */
.moreplans { margin: .3rem 0 .6rem; }
.moreplans > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.notavail { margin: 1rem 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.tabs .btn { margin-top: 0; }
.inspection-note .btnrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.sheet-mode { display: grid; gap: .3rem; margin: .4rem 0 1rem; }
.sheet-mode .btn { justify-self: start; }
.sheet-option { margin-bottom: 1rem; }
@media (min-width: 768px) { .searchbar:has(select) { grid-template-columns: 1fr auto auto; } }

/* #110 cycle 2 store desk (C2-13, C2-15): stale totals greyed and marked, the "More details" fold on the customer boxes */
.totals.is-stale td, .totals.is-stale th { opacity: .4; }
.totals caption.stale-tag { caption-side: top; text-align: left; font-weight: 700; color: var(--err); padding: .2rem 0; }
.moredetails { margin: .4rem 0 .6rem; }
.moredetails > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }

/* #110 cycle 2 (C2-12): the customer quote sheet fits a 390 px screen (the 5 column table was 447 px wide) */
@media (max-width: 480px) {
  .sheet-table { table-layout: fixed; }
  .sheet-table th, .sheet-table td { padding: .35rem .2rem; font-size: .8rem; overflow-wrap: anywhere; }
  .sheet-table th:nth-child(1) { width: 28%; }
  .sheet-table th:nth-child(2) { width: 20%; }
  .sheet-table th:nth-child(3) { width: 20%; }
  .sheet-table th:nth-child(4) { width: 14%; }
  .sheet-table th:nth-child(5) { width: 18%; }
  .sheet-table .sheet-total td { font-size: 1rem; }
}

/* #110 cycle 3 (C3-13): the chosen-plans bar at the bottom of the screen, folded plan families, the province line, tighter plan rows on a phone */
.stickybar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  background: var(--card); border-top: 2px solid var(--line); box-shadow: 0 -2px 8px rgba(0, 0, 0, .12); padding: .5rem 16px; margin: 0 -16px; }
.stickybar[hidden] { display: none; }
.stickybar .btn { margin-top: 0; }
.stickybar .barsum { font-size: 1.05rem; }
.famfold { margin: .8rem 0 .3rem; }
.famfold > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.famfold > summary.famhead { margin: 0; font-size: 1rem; font-weight: 700; }
.provline { align-self: end; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .2rem; }
.picked-box { display: inline-flex; align-items: center; gap: .4rem; }
/* #110 cycle 4 (H2): [hidden] always wins (".btnrow { display: flex }" used to keep "Add ticked plans" on screen with the script running, C4-14);
   the plan ticks are at least 40 px (C4-15); option, tag and notice styles (C4-7, C4-8, C4-9, C4-10) */
[hidden] { display: none !important; }
.plantable input[type="checkbox"] { width: 2.5rem; height: 2.5rem; margin: 0; }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-option { background: #e0e7ff; color: #3730a3; }
.vin-tag { font-size: .8rem; }
.dm-pick { gap: .4rem; }
.notice .fld { margin-top: .6rem; }
.optiontotal caption { text-align: left; padding: .3rem 0; }
.optiontotals { display: grid; gap: 1rem; }
@media (min-width: 768px) { .optiontotals { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } }
.optionpick { align-items: flex-start; min-height: 44px; }
.baropt { white-space: nowrap; }
dl.facts.compact > div { padding-top: .15rem; padding-bottom: .15rem; }
/* a plan row on a phone is a two-column card (label over value), about half the height of the one-column stack */
@media (max-width: 767px) {
  .plantable.grid.stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .6rem; padding: .35rem 0; }
  .plantable.grid.stack td { display: block; padding: .05rem 0; line-height: 1.25; font-size: .85rem; }
  .plantable.grid.stack td::before { display: block; flex: none; padding: 0; font-size: .62rem; line-height: 1.1; }
  .plantable.grid.stack td .muted { font-size: .72rem; }
  /* row 1: the tick box and the plan code; row 2: term, coverage, deductible; row 3: cost, margin, price */
  .plantable.grid.stack td[data-label="Add"] { display: flex; align-items: center; }
  .plantable.grid.stack td[data-label="Add"]::before { display: none; }
  .plantable.grid.stack td[data-label="Plan"] { grid-column: span 2; align-self: center; font-size: 1rem; }
  .plantable.grid.stack td[data-label="Plan"]::before { display: none; }
  .plantable .pick { min-height: 44px; min-width: 44px; align-items: center; }   /* the label keeps the 44 px touch target; the box itself is smaller */
  .plantable input[type="checkbox"] { width: 2.5rem; height: 2.5rem; margin: 0; }
  .plantable.grid.stack tr.subrow td { grid-column: 1 / -1; }
  /* I1-7: the bar wraps instead of pushing the page sideways (three options used to overflow 390 px) */
  .stickybar { flex-wrap: wrap; gap: .3rem .5rem; padding: .4rem 12px; margin: 0 -16px; max-width: calc(100% + 32px); box-sizing: border-box; }
  .stickybar .barsum { font-size: .95rem; white-space: normal; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .stickybar .btn { padding: 0 .7rem; min-height: 44px; }
}

/* final verification N4: the owner's three-store switcher wraps on a phone instead of scrolling the page sideways */
@media (max-width: 767px) { .bar nav.switcher { flex-wrap: wrap; } }