/* SR1 Quote Desk
   Visual language: the dealership's counter. Graphite chrome, one safety-yellow signal color for the action that
   matters, red only for alarms, documents on a warm bench. Roboto Condensed for display type and figures (the face
   SR1's own site and most equipment branding use), Roboto for reading. Square corners, hairline rules, tabular
   numerals. No icons, no gradients, no shadows except where something floats. */
/* Fonts are served from this site (no third-party requests, works on locked-down networks and offline). */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/roboto-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/roboto-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/roboto-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/roboto-condensed-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/roboto-condensed-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #141516; --ink-2: #2d2d2d; --ink-3: #3d3e41; --graphite: #232426;
  --paper: #edebe5; --bench: #e4e1d9; --card: #fff; --line: #d3cfc5; --line-soft: #e6e3dc; --hair: #ebe8e1;
  --muted: #6b6c70; --dim: #8e8f93;
  --yellow: #ffcf1a; --yellow-deep: #e8b800; --yellow-soft: #fff4c2;
  --red: #d11a2a; --red-soft: #fbe6e8;
  --green: #2c6b3a; --green-soft: #e3efe5;
  --amber: #9a5b0c; --amber-soft: #fbefdb;
  --navy: #0b3254; --navy-soft: #e3eaf2;
  --display: "Roboto Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --body: "Roboto", "Segoe UI", Arial, sans-serif;
  --mono: "Consolas", "Roboto Mono", "Courier New", monospace;
  --r: 3px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Panels toggle with the `hidden` attribute; this keeps it authoritative over any display rule below. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); background: var(--paper); color: var(--ink); font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
a { color: inherit; }
b, strong { font-weight: 700; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); }
.warn { color: var(--amber); font-weight: 600; }
.rel { position: relative; }
::selection { background: var(--yellow); color: var(--ink); }

/* ---------- Masthead: one graphite bar, wordmark left, nav center, user + the one yellow action right ---------- */
.masthead { background: var(--ink); color: #fff; border-bottom: 3px solid var(--yellow); }
.masthead-inner { max-width: 1360px; margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; gap: 22px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.brand .mark { font-size: 26px; font-weight: 700; color: var(--yellow); letter-spacing: -.01em; line-height: 1; }
/* The SR1 badge itself, printed white on the graphite bar. Width follows the file's own 1400x638 ratio. */
.brand .badge { display: block; height: 26px; width: auto; }
.brand .word { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .12em; padding-left: 10px; border-left: 1px solid #4a4b4f; line-height: 1.1; }
.brand .word small { display: block; font-size: 10px; letter-spacing: .18em; color: #a3a4a8; font-weight: 400; margin-top: 2px; }
.brand span.sep { display: none; }
.nav { display: flex; align-items: stretch; gap: 0; flex: 1 1 auto; min-width: 0; }
.nav-inner { display: flex; align-items: stretch; gap: 0; }
.nav a { display: inline-flex; align-items: center; padding: 0 14px; color: #c3c4c8; text-decoration: none; font-family: var(--display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; border-bottom: 3px solid transparent; margin-bottom: -3px; white-space: nowrap; transition: color .12s; }
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; border-bottom-color: var(--yellow); }
.masthead .who { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: #b9babe; margin-left: auto; white-space: nowrap; }
.who .me { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.who .me b { color: #fff; font-family: var(--display); font-size: 14px; letter-spacing: .02em; }
.who .me span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #8e8f93; }
.who a { color: #b9babe; text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--display); font-weight: 700; }
.who a:hover { color: #fff; }
.nav a.nav-new, .who .nav-new { display: inline-flex; align-items: center; align-self: center; margin: 0 0 0 4px; padding: 8px 14px; background: var(--yellow); color: var(--ink); border: 0; border-radius: var(--r); font-family: var(--display); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.nav a.nav-new:hover, .who .nav-new:hover { background: var(--yellow-deep); color: var(--ink); }
.wrap { max-width: 1360px; margin: 0 auto; padding: 24px 20px 64px; }
.foot { max-width: 1360px; margin: 0 auto; padding: 0 20px 30px; font-size: 12px; color: var(--dim); font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Page heads, section heads ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1, .qhead h1 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .01em; line-height: 1.05; text-transform: uppercase; }
.page-head .sub, .qhead .sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; max-width: 70ch; }
.page-head .kicker { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
h2 { font-family: var(--display); font-size: 13.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; position: relative; }
h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: var(--yellow); }
h2 .n { color: var(--muted); margin-left: 6px; letter-spacing: 0; text-transform: none; font-family: var(--body); font-weight: 500; }
h3 { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin: 16px 0 8px; }

/* ---------- Cards, forms, buttons ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Today: the quote list earns the wider half; the catalog counts beside it are a short reference. */
.grid-board { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
label { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-family: var(--display); margin-bottom: 10px; }
label input, label select, label textarea, .search { display: block; width: 100%; margin-top: 4px; font: inherit; font-family: var(--body); font-size: 14px; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 38px; }
label select { padding-right: 28px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
label textarea { resize: vertical; min-height: 60px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
input:disabled, textarea:disabled, select:disabled { background: #f6f5f2; color: #777; }
input::placeholder, textarea::placeholder { color: #a5a6aa; }
label.chk, .chk { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 13.5px; }
label.chk input, .chk input[type=checkbox], .chk input[type=radio] { display: inline; width: 16px; height: 16px; margin: 0; min-height: 0; accent-color: var(--ink); }
.chk input.inline { display: inline-block; width: 150px; padding: 4px 7px; font-size: 13px; min-height: 30px; }
.chk-block > span:first-child { display: block; }
.hint { font-weight: 400; color: var(--dim); text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 12px; }
.form .btn { margin-top: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--display); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; line-height: 1.2; white-space: nowrap; min-height: 36px; transition: border-color .12s, background .12s, color .12s; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #000; }
.btn.go, .btn.yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.btn.go:hover, .btn.yellow:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); }
.btn.red { background: var(--red); color: #fff; border-color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 12px; min-height: 28px; }
.btn.wide { width: 100%; }
.btn.danger-link { border-color: transparent; color: var(--red); background: transparent; }
.btn.danger-link:hover { background: var(--red-soft); border-color: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.flash { padding: 10px 14px; border-radius: var(--r); margin-bottom: 14px; background: var(--green-soft); color: var(--green); border: 1px solid #c5dcc8; font-weight: 600; border-left: 4px solid var(--green); }
.flash.err { background: var(--red-soft); color: var(--red); border-color: #f0c4c0; border-left-color: var(--red); }

/* ---------- Chips: square tags with a colored rail, not pastel pills ---------- */
.chip { display: inline-block; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px 2px 9px; border-radius: 2px; background: var(--line-soft); color: var(--ink-2); vertical-align: middle; border-left: 3px solid #b8b5ad; line-height: 1.5; }
.chip.ok, .chip.won { background: var(--green-soft); color: var(--green); border-left-color: var(--green); }
.chip.warn { background: var(--amber-soft); color: var(--amber); border-left-color: var(--amber); }
.chip.bad, .chip.lost { background: var(--red-soft); color: var(--red); border-left-color: var(--red); }
.chip.info, .chip.sent { background: var(--navy-soft); color: var(--navy); border-left-color: var(--navy); }
.chip.loc { background: var(--ink); color: #fff; border-left-color: var(--yellow); }
.chip.draft { background: var(--line-soft); color: var(--muted); border-left-color: #b8b5ad; }

/* ---------- Data tables: graphite header band, generous rows, condensed figures ---------- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; }
table.data th, table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
table.data th { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #d5d6da; background: var(--ink-2); white-space: nowrap; font-weight: 700; padding: 9px 12px; border-bottom: 0; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #faf9f6; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data td.num { font-family: var(--display); font-size: 15px; letter-spacing: .01em; }
table.data td.num b { font-weight: 700; }
table.data .sub { color: var(--muted); font-size: 12px; font-family: var(--body); }
/* An accessory that hangs off a tractor line, on the quote overlay and every list that shows lines. */
table.data td.sub-line { padding-left: 30px; box-shadow: inset 14px 0 0 -13px var(--line); }
table.data a.t { font-weight: 700; text-decoration: none; }
table.data a.t:hover { text-decoration: underline; text-decoration-color: var(--yellow-deep); text-underline-offset: 3px; }
table.data td .btn.sm { margin: 0 2px 2px 0; }
table.data td:last-child { white-space: nowrap; }
form.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; padding: 14px 16px; background: var(--bench); border-radius: var(--r); }
form.filters label { margin: 0; min-width: 120px; }
form.filters input[type=search] { min-width: 280px; }
form.filters .btn { min-height: 38px; }
.count { color: var(--muted); font-size: 12px; margin-bottom: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; }
.pager { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.pager-gap { color: var(--dim); padding: 0 2px; }
/* Section jump-links for a page that holds four catalogs at once. */
.secnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.secnav a { font-family: var(--display); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; text-decoration: none; color: var(--muted); padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r); }
.secnav a:hover { color: var(--ink); border-color: var(--line); background: #fff; }
.secnav a span { font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); margin-left: 5px; }

/* ---------- Dashboard ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; border-top: 3px solid var(--ink-2); }
.tile b { display: block; font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -.01em; line-height: 1; margin-bottom: 8px; }
.tile span { font-family: var(--display); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; line-height: 1.3; display: block; }
.tile small { display: block; font-size: 12px; color: var(--dim); margin-top: 5px; line-height: 1.3; }
.tile.hot { border-top-color: var(--red); }
.tile.hot b { color: var(--red); }
.head-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rep-filter label { margin: 0; }
.rep-filter select { min-width: 160px; }
/* Start from a package: the ten TYM configurations this shop actually quotes, as a single row of tickets. */
.packstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pack { display: block; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ink-2); border-radius: var(--r); padding: 10px 12px; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
.pack:hover { border-color: var(--ink); border-left-color: var(--yellow-deep); background: #fffdf3; }
.pack .pk-model { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.pack .pk-price { display: block; font-family: var(--display); font-size: 19px; line-height: 1.1; margin-top: 2px; }
.pack .pk-inc { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.quick .btn { background: var(--bench); border-color: var(--bench); }
.quick .btn:hover { background: #fff; border-color: var(--ink); }

/* ---------- Follow up: the short list of quotes that want something done today ---------- */
.followups { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--r); margin-bottom: 20px; }
.fu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.fu-head h2 { margin: 0; padding: 0; }
.fu-head h2::after { display: none; }
.fu-head .n { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fu { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.fu:last-child { border-bottom: 0; }
.fu-why { flex: 1 1 240px; min-width: 0; }
.fu-why b { font-family: var(--display); font-size: 15px; letter-spacing: .01em; }
.fu-why a { text-decoration: none; }
.fu-why a:hover { text-decoration: underline; text-decoration-color: var(--yellow-deep); text-underline-offset: 3px; }
.fu-why span { display: block; font-size: 12.5px; color: var(--muted); }
.fu-tag { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px 2px 8px; border-left: 3px solid var(--muted); background: var(--line-soft); color: var(--ink-2); border-radius: 2px; }
.fu-tag.expiring { border-left-color: var(--red); background: var(--red-soft); color: var(--red); }
.fu-tag.viewed { border-left-color: var(--green); background: var(--green-soft); color: var(--green); }
.fu-tag.unopened { border-left-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.fu-money { font-family: var(--display); font-size: 17px; font-weight: 700; white-space: nowrap; }
.fu-act { display: flex; gap: 6px; margin-left: auto; }
.fu-done { color: var(--green); font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.fu-empty { padding: 16px; color: var(--muted); font-size: 13.5px; }

/* ---------- Reports: one bar chart, drawn in CSS, and a share meter ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 18px; }
.bars .bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.bars .bar b { font-family: var(--display); font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.bars .col { display: flex; flex-direction: column-reverse; width: 100%; max-width: 46px; min-height: 2px; background: var(--bench); border: 1px solid var(--line); border-bottom: 0; }
.bars .col i { display: block; width: 100%; background: var(--ink-2); }
.bars .bar small { font-size: 10.5px; color: var(--dim); margin-top: 6px; border-top: 2px solid var(--ink); width: 100%; text-align: center; padding-top: 4px; overflow: hidden; white-space: nowrap; }
.bars .bar:hover .col { border-color: var(--ink); }
.meter { height: 5px; background: var(--line-soft); margin-top: 5px; max-width: 220px; }
.meter span { display: block; height: 100%; background: var(--ink-2); }

/* ---------- Trade-in photos taken at the lot ---------- */
.tradebar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.tradeshot { position: relative; width: 72px; height: 54px; border: 1px solid var(--line); background: var(--bench); overflow: hidden; }
.tradeshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tradeshot button { position: absolute; top: 0; right: 0; width: 20px; height: 20px; border: 0; background: rgba(20,21,22,.72); color: #fff; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.tradeshot button:hover { background: var(--red); }
.trade-add { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 54px; border: 1px dashed var(--line); background: #fbfaf7; color: var(--muted); font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; text-align: center; }
.trade-add:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.trade-note { font-size: 11.5px; color: var(--dim); }

/* ---------- Quote builder ---------- */
.qhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.qhead h1 { display: flex; align-items: center; gap: 12px; }
.qhead h1 .mono { font-family: var(--display); letter-spacing: .02em; }
.status-select { font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 30px 5px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
/* The "why" beside a declined quote's status: same shape as the status select, muted until it is answered. */
.lost-select { border-color: var(--red); color: var(--red); }
.lost-select option { color: var(--ink); }
.qactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.savestate { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 6px; }
.savestate.ok { color: var(--green); }
.savestate.dirty { color: var(--amber); }
.savestate.err { color: var(--red); font-weight: 700; }
.qgrid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 18px; align-items: start; }
.qside { position: sticky; top: 12px; }
.cust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.cust-grid .span2 { grid-column: span 2; }
.scope { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.addbar { display: flex; gap: 8px; margin: 2px 0 14px; }
.search { margin: 0; flex: 1; padding: 11px 14px; font-size: 15px; border-width: 2px; border-color: var(--ink-2); min-height: 46px; }
.search:focus { outline: 3px solid var(--yellow); outline-offset: -2px; border-color: var(--ink); }
.dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--ink-2); border-top: none; box-shadow: 0 14px 30px rgba(0,0,0,.18); max-height: 60vh; overflow: auto; }
.dropdown.results { right: 148px; }
.rg { font-family: var(--display); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: #d5d6da; font-weight: 700; padding: 6px 12px; background: var(--ink-2); }
.ri { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--line-soft); }
.ri:hover, .ri.hi { background: var(--yellow-soft); }
.ri-title { font-weight: 700; }
.ri-title .chip { margin-left: 4px; font-size: 10px; }
.ri-detail { font-size: 12.5px; color: var(--muted); }
.ri-price { text-align: right; font-weight: 700; white-space: nowrap; font-family: var(--display); font-size: 16px; }
.ri-price small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; font-family: var(--body); }
.ri-price .ri-msrp s { color: var(--dim); }
table.lines { width: 100%; border-collapse: collapse; }
table.lines th { font-family: var(--display); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); text-align: left; padding: 4px 6px 8px; border-bottom: 2px solid var(--ink); }
table.lines td { padding: 9px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.lines input, table.lines textarea { width: 100%; font: inherit; font-size: 13.5px; padding: 5px 7px; border: 1px solid transparent; border-radius: var(--r); background: transparent; min-height: 0; }
table.lines input:hover, table.lines textarea:hover { border-color: var(--line); }
table.lines input:focus, table.lines textarea:focus { border-color: var(--navy); background: #fff; outline: none; box-shadow: 0 0 0 2px var(--navy-soft); }
/* An accessory added for a machine sits under it, the way it prints. */
table.lines tr.kid td.w-desc { padding-left: 24px; box-shadow: inset 10px 0 0 -9px var(--line); }
table.lines tr.kid .l-title { font-weight: 500; }
table.lines .l-title { font-weight: 700; font-size: 14.5px; }
table.lines .l-detail { resize: none; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 1px; }
table.lines .l-meta { font-size: 11.5px; color: var(--muted); padding: 2px 7px 0; }
table.lines .l-meta a { color: var(--navy); }
.kind { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
.k-unit { color: var(--red); } .k-book { color: var(--navy); } .k-option { color: var(--green); }
.msrp-tag { color: var(--muted); font-size: 12px; margin-left: 6px; }
.msrp-tag b { color: var(--green); }
.w-qty { width: 60px; } .w-money { width: 122px; } .w-tax { width: 40px; text-align: center; } .w-act { width: 84px; white-space: nowrap; text-align: right; }
table.lines .money, table.lines .l-qty { text-align: right; font-family: var(--display); font-size: 15px; }
table.lines .l-total { padding-top: 13px; font-weight: 700; font-family: var(--display); font-size: 16px; }
table.lines .w-tax input { display: inline; width: auto; margin-top: 8px; accent-color: var(--ink); }
.ib { font: inherit; font-size: 13px; width: 24px; height: 24px; border: 1px solid transparent; background: transparent; border-radius: var(--r); cursor: pointer; color: var(--muted); margin-top: 6px; }
.ib:hover { border-color: var(--line); color: var(--ink); background: #fff; }
.ib.del:hover { color: var(--red); }
.ib:disabled { opacity: .25; cursor: default; }
.empty { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r); margin-top: 8px; background: #fbfaf7; }
.addons { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.addons-head { font-family: var(--display); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin: 6px 0; }
.addon-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.addon { font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; }
.addon:hover { border-color: var(--ink); background: var(--yellow-soft); }
.addon.on { background: var(--green-soft); border-color: #c5dcc8; color: var(--green); cursor: default; }
.addon b { margin-left: 4px; font-family: var(--display); font-size: 13.5px; }
.notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.notes-grid .span2 { grid-column: span 2; }
details summary { cursor: pointer; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; }
/* Ticket: the side panel opens with the number the customer cares about */
.totals-card { padding: 0; overflow: hidden; }
.ticket-top { background: var(--ink); color: #fff; padding: 16px 18px 14px; border-bottom: 3px solid var(--yellow); display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.ticket-top .lbl { display: block; font-family: var(--display); font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: #a3a4a8; margin-bottom: 4px; }
.ticket-top .amt { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--yellow); }
.ticket-top .mo { text-align: right; }
.ticket-top .mo b { display: block; font-family: var(--display); font-size: 26px; line-height: 1; }
.ticket-top .mo small { display: block; font-size: 11px; color: #a3a4a8; margin-top: 3px; }
.tk-grip { display: none; }
.ticket-body { padding: 14px 18px 16px; }
/* Who the quote is for, first thing on the ticket. */
.tk-cust { border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; margin-bottom: 12px; }
.tk-name { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.15; }
.tk-name.none { color: var(--dim); font-weight: 400; font-size: 15px; }
.tk-contact { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.tk-history { display: inline-block; margin-top: 5px; font-size: 12.5px; color: var(--navy); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.tk-history:hover { text-decoration-color: var(--yellow-deep); }
.tk-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tk-actions .btn { min-height: 44px; font-size: 14.5px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.totals-card input.money, .totals-card input[inputmode=decimal], .totals-card input[inputmode=numeric] { text-align: right; font-family: var(--display); font-size: 15px; }
table.tot { width: 100%; border-collapse: collapse; margin: 4px 0 6px; }
table.tot th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 4px 0; font-size: 13.5px; }
table.tot td { text-align: right; padding: 4px 0; font-weight: 700; font-size: 15px; font-family: var(--display); }
table.tot tr.sub th, table.tot tr.sub td { font-size: 12.5px; font-weight: 400; color: var(--muted); font-family: var(--body); }
table.tot tr.save th, table.tot tr.save td { color: var(--green); font-weight: 700; }
table.tot tr.grand th, table.tot tr.grand td { font-size: 19px; border-top: 2px solid var(--ink); padding-top: 8px; font-weight: 700; font-family: var(--display); }
.monthly { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; background: var(--bench); border-radius: var(--r); margin: 6px 0 10px; }
.monthly span:first-child { flex: 1; font-size: 12px; color: var(--muted); font-weight: 700; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; }
.monthly b { font-family: var(--display); font-size: 30px; line-height: 1; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-size: 13px; opacity: 0; transition: .2s; pointer-events: none; z-index: 99; border-left: 4px solid var(--yellow); }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- Email dialog ---------- */
.modal { position: fixed; inset: 0; background: rgba(20,21,22,.6); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.modal-box { background: #fff; width: 100%; max-width: 640px; border-radius: var(--r); border-top: 4px solid var(--yellow); padding: 18px 22px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { font-size: 15px; margin: 0; color: var(--ink); letter-spacing: .12em; }
.modal-head .ib { width: 32px; height: 32px; font-size: 20px; margin: 0; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.note { background: var(--amber-soft); color: var(--amber); border: 1px solid #f0dcb8; border-left: 4px solid var(--amber); border-radius: var(--r); padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
#em_status { margin-top: 8px; min-height: 18px; color: var(--red); font-weight: 600; }

/* ---------- Delivery & tracking ---------- */
.banner { padding: 10px 14px; border-radius: var(--r); margin-bottom: 12px; font-size: 13.5px; }
.banner.ok { background: var(--green-soft); color: var(--green); border: 1px solid #c5dcc8; border-left: 4px solid var(--green); }
.banner a { color: inherit; font-weight: 700; }
.timeline { list-style: none; margin: 4px 0 0; }
.timeline li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; font-size: 13.5px; }
.timeline li:last-child { border-bottom: 0; }
.tl-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); margin-top: 6px; }
.timeline li.sent .tl-dot { background: var(--navy); }
.timeline li.viewed .tl-dot { background: var(--green); }
.timeline li.won .tl-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.timeline li.bad .tl-dot { background: var(--red); }
.timeline li > div { min-width: 0; overflow-wrap: anywhere; }
.track { font-size: 12px; color: var(--muted); }
.track b { color: var(--green); }

/* ---------- Login: dark shop wall, the form as a lit counter ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--ink); background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.025) 22px 44px); }
.login-stack { width: 100%; max-width: 400px; }
.login-badge { text-align: center; margin-bottom: 22px; }
.login-badge .badge { display: block; height: 58px; width: auto; margin: 0 auto 12px; }
.login-badge .mark { font-family: var(--display); font-size: 44px; font-weight: 700; color: #fff; display: block; margin-bottom: 8px; }
.login-badge span { font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .24em; color: #8e8f93; }
.login { width: 100%; background: #fff; border-top: 5px solid var(--yellow); padding: 28px 30px 26px; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.login .btn { margin-top: 4px; min-height: 44px; font-size: 14.5px; }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-grid .span2 { grid-column: span 2; }
.loc-row { display: grid; grid-template-columns: 90px 1fr 1fr 1fr 110px 90px; gap: 8px; align-items: end; margin-bottom: 4px; }
.loc-row label { margin-bottom: 4px; }
.users td form { display: inline; }
/* Sheet health: how many rows the last master-sheet pull could not price, by reason. */
.health-counts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.health-counts li { background: var(--amber-soft); color: var(--amber); border-left: 3px solid var(--amber); padding: 4px 9px; font-size: 12.5px; border-radius: 2px; }
.health-counts li b { font-family: var(--display); font-size: 15px; margin-right: 3px; }

/* ---------- Detail overlay ---------- */
.hx-modal { position: fixed; inset: 0; z-index: 70; display: none; }
.hx-modal.open { display: block; }
.hx-modal-backdrop { position: absolute; inset: 0; background: rgba(20,21,22,.66); }
.hx-modal-panel { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: min(1080px, calc(100% - 32px)); max-height: calc(100vh - 52px); background: var(--paper); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }
.hx-modal-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--ink); color: #fff; min-height: 46px; border-bottom: 3px solid var(--yellow); }
.hx-modal-crumb { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--yellow); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.hx-modal-back, .hx-modal-close, .hx-modal-open { font-family: var(--display); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: transparent; border: 1px solid #4a4b4f; border-radius: var(--r); padding: 5px 10px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.hx-modal-back:hover, .hx-modal-close:hover, .hx-modal-open:hover { border-color: #fff; }
.hx-modal-open { font-weight: 400; color: #c3c4c8; letter-spacing: .06em; }
.hx-modal-close { font-size: 20px; line-height: 1; padding: 1px 9px 4px; font-family: var(--body); font-weight: 400; }
.hx-modal-body { overflow: auto; padding: 18px 20px 24px; -webkit-overflow-scrolling: touch; }
.hx-loading { padding: 48px 20px; text-align: center; color: var(--muted); font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; }
.hx-loading.hx-error { color: var(--red); }
body.hx-modal-lock { overflow: hidden; }
.hx-row { cursor: pointer; }
table.data tr.hx-row:hover td { background: var(--yellow-soft); }
.hx-row:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--yellow-deep); }
table.data tr.hx-row td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .12s; }
table.data tr.hx-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--yellow-deep); }
.tile.drill { cursor: pointer; transition: border-color .12s, transform .12s; position: relative; }
.tile.drill:hover, .tile.drill:focus-visible { border-color: var(--ink); border-top-color: var(--yellow); outline: none; }
.tile.drill::after { content: '\2192'; position: absolute; right: 14px; top: 12px; color: var(--dim); font-size: 15px; font-family: var(--body); }
.stat-link[data-modal-url] { cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.stat-link[data-modal-url]:hover { text-decoration-color: var(--yellow-deep); }
.hd-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.hd-head h1 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; outline: none; line-height: 1.1; }
.hd-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.hd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink-2); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.stat > span:first-child { display: block; font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.stat b { display: block; font-family: var(--display); font-size: 24px; letter-spacing: -.01em; margin-top: 3px; overflow-wrap: anywhere; line-height: 1.1; }
.stat small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.stat.pos { border-top-color: var(--green); } .stat.pos b { color: var(--green); }
.stat.neg { border-top-color: var(--red); } .stat.neg b { color: var(--red); }
.hd-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; margin: 0; }
.dl dt { font-family: var(--display); color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding-top: 2px; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.hx-modal-body .card { margin-bottom: 12px; }
.hx-modal-body table.data { font-size: 13px; }
.detail-page .card { margin-bottom: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .qgrid { grid-template-columns: minmax(0, 1fr); }
  .qside { position: static; }
  .cust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid, .grid2, .notes-grid { grid-template-columns: minmax(0, 1fr); }
  .notes-grid .span2, .settings-grid .span2 { grid-column: auto; }
  .loc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dropdown.results { right: 0; }
}
@media (max-width: 820px) {
  .hx-modal-panel { top: 0; left: 0; transform: none; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .hx-modal-body { padding: 14px 12px 40px; }
  .hx-modal-open { display: none; }
  .hd-grid { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: 105px minmax(0, 1fr); }
  .statstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat b { font-size: 19px; }
  .hd-actions .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 700px) {
  body { font-size: 15px; }
  .wrap { padding: 14px 12px 40px; }
  .card { padding: 14px 13px; margin-bottom: 12px; }
  /* Masthead becomes two rows: brand + user, then a single scrolling row of tabs */
  .masthead-inner { flex-wrap: wrap; padding: 0 12px; gap: 0 12px; min-height: 0; }
  .brand { padding: 9px 0 7px; }
  .brand .mark { font-size: 22px; }
  .brand .badge { height: 22px; }
  .brand .word { font-size: 12.5px; }
  .brand .word small { display: none; }
  .masthead .who { padding: 6px 0; gap: 10px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; white-space: normal; }
  .who .me { min-width: 0; }
  .who .me b { font-size: 13px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .who .me span { display: none; }
  /* The page's own "+ New quote" and the sticky bar cover this on a phone; the bar would not fit otherwise. */
  .who .nav-new, .who a[href="profile.php"] { display: none; }
  .nav { flex: 1 1 100%; order: 3; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px; padding: 0 6px; border-top: 1px solid #2f3033; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 11px 11px; flex: 0 0 auto; font-size: 13px; }
  .page-head { margin-bottom: 12px; }
  .page-head h1, .qhead h1 { font-size: 24px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 12px 12px 10px; }
  .tile b { font-size: 28px; overflow-wrap: anywhere; }
  .quick .btn { flex: 1 1 45%; text-align: center; }
  form.filters { gap: 8px; padding: 10px 12px; }
  form.filters label { flex: 1 1 45%; min-width: 0; }
  form.filters label:first-child { flex-basis: 100%; }
  form.filters input[type=search] { min-width: 0; }
  form.filters .btn { flex: 1 1 100%; padding: 10px; }
  input, select, textarea { font-size: 16px !important; }
  .btn { padding: 9px 14px; }
  .btn.sm { padding: 7px 11px; font-size: 13px; }
  .qhead { gap: 8px; }
  .qactions { width: 100%; }
  .qactions .btn { flex: 1 1 auto; text-align: center; }
  .savestate { flex-basis: 100%; margin: 0; }
  .cust-grid { grid-template-columns: minmax(0, 1fr); }
  .cust-grid .span2 { grid-column: auto; }
  .card-head .scope { width: 100%; gap: 8px 14px; }
  .addbar { flex-wrap: wrap; margin-bottom: 8px; }
  .addbar .btn { width: 100%; }
  .search { padding: 12px; }
  .dropdown { max-height: 55vh; }
  .ri { padding: 10px 12px; }
  table.lines, table.lines tbody { display: block; width: 100%; }
  table.lines thead { display: none; }
  table.lines tr.line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
  table.lines tr.line:last-child { border-bottom: 0; }
  table.lines td { padding: 0; border: 0; min-width: 0; }
  table.lines td.w-desc { grid-column: 1 / -1; }
  table.lines td.w-qty, table.lines td.w-money, table.lines td.w-tax { width: auto; }
  table.lines td.w-qty::before, table.lines td.w-money::before, table.lines td.w-tax::before { display: block; font-family: var(--display); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; padding-left: 7px; margin-bottom: 1px; }
  table.lines td.w-qty::before { content: "Qty"; }
  table.lines td.w-money:nth-child(3)::before { content: "Unit price"; }
  table.lines td.w-money:nth-child(4)::before { content: "Discount"; }
  table.lines td.w-tax::before { content: "Taxable"; }
  table.lines td.l-total::before { content: "Amount"; }
  table.lines td.w-tax { grid-row: 3; grid-column: 1; text-align: left; }
  table.lines td.w-tax input { width: 22px; height: 22px; margin: 4px 0 0 7px; }
  table.lines td.l-total { grid-row: 3; grid-column: 2; padding: 0 7px; text-align: left; font-size: 17px; }
  table.lines td.w-act { grid-row: 3; grid-column: 3; text-align: right; align-self: end; }
  table.lines input, table.lines textarea { border-color: var(--line-soft); background: #fff; }
  table.lines .l-title { font-size: 15px; }
  table.lines .l-detail { font-size: 13px; }
  .ib { width: 34px; height: 34px; font-size: 16px; margin: 0; border-color: var(--line); background: #fff; }
  .addon { padding: 8px 12px; font-size: 13.5px; }
  .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .monthly b { font-size: 26px; }
  .ticket-top .amt { font-size: 30px; }
  .ticket-top .mo b { font-size: 22px; }
  /* The ticket docks to the bottom of a phone: the total is always on screen, a tap opens the rest of it. */
  .quote-page .wrap { padding-bottom: 92px; }
  .quote-page .qside { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45; max-height: 88vh; display: flex; flex-direction: column; }
  .quote-page .qside .totals-card { margin: 0; min-height: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; display: flex; flex-direction: column; box-shadow: 0 -8px 24px rgba(0,0,0,.28); }
  .quote-page .ticket-top { position: relative; cursor: pointer; padding: 16px 16px 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .quote-page .ticket-body { display: none; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .quote-page.ticket-open .ticket-body { display: block; }
  .quote-page.ticket-open .ticket-top { padding-bottom: 14px; }
  .tk-grip { display: block; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 36px; height: 3px; border-radius: 2px; background: #55565a; }
  .tk-actions { flex-direction: row; }
  .tk-actions .btn { flex: 1 1 0; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { display: none; }
  table.data tr { border-bottom: 2px solid var(--line); padding: 8px 0; }
  table.data td { border: 0; padding: 4px 12px; display: flex; gap: 10px; align-items: baseline; min-width: 0; }
  table.data td::before { content: attr(data-label); flex: 0 0 96px; font-family: var(--display); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
  table.data td:empty { display: none; }
  table.data td.num { text-align: left; }
  table.data td:first-child { font-size: 15px; }
  table.data td:first-child::before { display: none; }
  table.data tr.hx-row td:first-child { box-shadow: none; }
  table.data td { flex-wrap: wrap; }
  .users td form { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
  .users td form input[name=password] { width: 100% !important; }
  .login { padding: 22px 20px; }
}

/* ---------- Build from a call ---------- */
.modal-box.wide { max-width: 920px; }
.call-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.call-bar #cl_count { margin-left: auto; }
.call-text { display: block; width: 100%; min-height: 220px; font: inherit; font-size: 14.5px; line-height: 1.5; padding: 12px 14px; border: 2px solid var(--ink-2); border-radius: var(--r); resize: vertical; background: #fff; }
.call-text:focus { outline: 3px solid var(--yellow); outline-offset: -2px; }
#cl_mic.on { background: var(--red); color: #fff; border-color: var(--red); animation: cl-pulse 1.3s ease-in-out infinite; }
@keyframes cl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(209,26,42,.45); } 50% { box-shadow: 0 0 0 7px rgba(209,26,42,0); } }
.note.ok { background: var(--green-soft); color: var(--green); border-color: #c5dcc8; border-left-color: var(--green); }
.prop h3 { margin: 14px 0 6px; }
.prop .table-wrap { margin-bottom: 4px; }
.prop table.data td { padding: 8px 10px; vertical-align: middle; }
.prop table.data td select, .prop table.data td input { width: 100%; font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; min-height: 34px; }
.prop table.data td input.qty { width: 64px; text-align: right; }
.prop .said { font-size: 12.5px; color: var(--muted); }
.prop .unmatched { color: var(--amber); font-weight: 600; }
.prop .cust-grid { margin-top: 4px; }
.prop label.chk { margin: 6px 0 2px; }
@media (max-width: 700px) { .prop table.data td select { min-height: 40px; } }

/* ---------- Search rows read as products: photo, what the package carries, specs ---------- */
.ri-pic { flex: 0 0 64px; width: 64px; height: 48px; background: var(--bench); border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ri-pic img { max-width: 100%; max-height: 100%; display: block; }
.ri-main { min-width: 0; flex: 1 1 auto; }
.ri-inc { font-size: 12.5px; color: var(--ink-2); }
.ri-inc b { font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 4px; }
.ri-specs { font-size: 11.5px; color: var(--dim); margin-top: 1px; }

/* The model photo and its specs inside a detail overlay. */
.ov-media { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ov-pic { max-width: 220px; max-height: 150px; border: 1px solid var(--line-soft); background: var(--bench); }
.ov-specs { list-style: none; font-size: 13.5px; }
.ov-specs li { padding: 3px 0; border-bottom: 1px solid var(--line-soft); }

/* ---------- Guided build: family, then the build, then the accessories ---------- */
.guided { border: 1px solid var(--line); border-left: 3px solid var(--yellow); background: #fff; border-radius: var(--r); padding: 14px 16px 16px; margin-bottom: 14px; }
.gd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gd-head h3 { margin: 0; font-size: 13.5px; color: var(--ink); letter-spacing: .12em; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-chip { font: inherit; font-family: var(--display); text-align: left; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; line-height: 1.15; }
.gd-chip b { display: block; font-size: 15px; letter-spacing: .02em; }
.gd-chip small { display: block; font-size: 11px; color: var(--muted); font-family: var(--body); }
.gd-chip:hover { border-color: var(--ink); background: var(--yellow-soft); }
.gd-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gd-chip.on small { color: var(--yellow); }
.gd-sub { font-family: var(--display); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; margin: 14px 0 7px; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.gd-pack { font: inherit; text-align: left; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink-2); border-radius: var(--r); padding: 10px 12px 11px; cursor: pointer; display: block; }
.gd-pack:hover { border-color: var(--ink); background: #fffdf3; }
.gd-pack.on { border-top-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--ink); }
.gd-pic { display: flex; height: 74px; margin: -2px 0 6px; background: var(--bench); align-items: center; justify-content: center; overflow: hidden; }
.gd-pic img { max-width: 100%; max-height: 74px; }
.gd-name { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; }
.gd-inc, .gd-specs { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.gd-money { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.gd-money b { font-family: var(--display); font-size: 19px; }
.gd-money small { font-family: var(--display); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-left: 5px; }
.gd-money i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.gd-money s { display: block; font-size: 11.5px; color: var(--dim); }
.gd-accs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.gd-acc b { font-family: var(--display); font-size: 13.5px; }
/* The bar that actually puts the build on the quote. It sticks to the bottom of the screen while the panel is
   open, because it used to sit below the fold: a rep picked a build, saw the ticket still reading $0.00, and had
   no idea a button was waiting 350px further down. */
.gd-go { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 0 2px; border-top: 1px solid var(--line-soft); flex-wrap: wrap;
  position: sticky; bottom: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 0, var(--card) 10px, var(--card) 100%); z-index: 3; }
.gd-go .btn.primary { box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.gd-wait { padding: 16px 0; color: var(--muted); font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }

/* ---------- Packages: the shop's own combinations ---------- */
.pack.own { border-left-color: var(--yellow); }
.pack .pk-own { float: right; font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; background: var(--ink); color: var(--yellow); padding: 1px 5px; border-radius: 2px; }
.pack .pk-blurb { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Pricing switch + dual price buttons ---------- */
.seg { display: flex; margin-top: 4px; border: 1px solid var(--ink-2); border-radius: var(--r); overflow: hidden; min-height: 38px; }
.seg button { flex: 1 1 0; font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: #fff; color: var(--ink-2); border: 0; cursor: pointer; padding: 0 8px; transition: background .12s, color .12s; }
.seg button + button { border-left: 1px solid var(--ink-2); }
.seg button.on { background: var(--ink); color: var(--yellow); }
.seg button:hover:not(.on) { background: var(--bench); }
.pbtns { display: inline-flex; gap: 4px; }
.pbtn { font: inherit; font-family: var(--display); font-size: 14.5px; font-weight: 700; line-height: 1.1; padding: 4px 9px 5px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); cursor: pointer; text-align: right; min-width: 86px; }
.pbtn small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 1px; }
.pbtn.on { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--yellow); }
.pbtn:hover { border-color: var(--ink); background: var(--yellow-soft); }
.ri-price .ri-msrp { display: block; margin-top: 3px; }
#cash_note { margin-top: 8px; padding: 8px 10px; background: var(--bench); border-radius: var(--r); }
@media (max-width: 700px) { .pbtns { flex-direction: column; } .pbtn { min-width: 0; } }

/* A suggested attachment reads as an offer, not as an option already priced for the tractor. */
.addon.sug { border-style: dashed; }
.addon.sug:hover { border-style: solid; }

/* ---- Today board: category shelves -------------------------------------------------------------
   A hundred tiles at once told a rep nothing, so the board opens as a row of categories and the one
   they pick opens in place, spanning the row. Everything is already in the page; only height moves. */
.shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 10px; margin-bottom: 14px; align-items: start; }
.shelf { min-width: 0; }
.shelf-face { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; min-height: 76px; align-content: center; text-align: left; cursor: pointer;
  background: var(--graphite); color: #fff; border: 1px solid var(--graphite); border-radius: var(--r); padding: 12px 13px 11px;
  font: inherit; position: relative; overflow: hidden; transition: background .14s, border-color .14s, transform .14s; }
.shelf-face::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.shelf-face:hover { background: var(--ink); transform: translateY(-1px); }
.shelf-face:hover::after, .shelf.open .shelf-face::after { transform: scaleX(1); }
.shelf-face:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sf-label { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: .03em; grid-column: 1; }
.sf-tag { font-size: 9px; letter-spacing: .12em; background: var(--yellow); color: var(--ink); padding: 1px 4px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; }
.sf-from { grid-column: 1; font-size: 12px; color: #cfcdc7; }
.sf-n { grid-column: 2; grid-row: 1; font-size: 11px; color: #a9a7a1; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
/* the chevron turns into a minus when the shelf is open */
.sf-go { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; width: 9px; height: 9px; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.shelf.open .sf-go { transform: rotate(225deg) translate(-2px, -2px); }
.shelf.open { grid-column: 1 / -1; }
.shelf.open .shelf-face { border-radius: var(--r) var(--r) 0 0; background: var(--ink); }
.shelf-body { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--bench); padding: 12px; }
.shelf.open .shelf-body { animation: shelf-open .22s ease both; }
@keyframes shelf-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* the tiles inside arrive in a short stagger, so opening a shelf reads as one movement */
.shelf.open .shelf-body .pack { animation: pack-in .22s ease both; }
.shelf.open .shelf-body .pack:nth-child(1) { animation-delay: .02s } .shelf.open .shelf-body .pack:nth-child(2) { animation-delay: .04s }
.shelf.open .shelf-body .pack:nth-child(3) { animation-delay: .06s } .shelf.open .shelf-body .pack:nth-child(4) { animation-delay: .08s }
.shelf.open .shelf-body .pack:nth-child(5) { animation-delay: .10s } .shelf.open .shelf-body .pack:nth-child(6) { animation-delay: .12s }
.shelf.open .shelf-body .pack:nth-child(n+7) { animation-delay: .14s }
@keyframes pack-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.shelf.ours .shelf-face { background: var(--ink); border-color: var(--yellow-deep); }
.shelf-body .packstrip { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .shelf-face, .sf-go, .shelf-face::after { transition: none; }
  .shelf.open .shelf-body, .shelf.open .shelf-body .pack { animation: none; }
}
@media (max-width: 700px) { .shelves { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* The builder's category chooser: the board's shelves, sized for the panel. */
.gd-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.gd-cat { text-align: left; cursor: pointer; font: inherit; background: var(--graphite); color: #fff; border: 1px solid var(--graphite);
  border-radius: var(--r); padding: 9px 11px; position: relative; overflow: hidden; transition: background .14s, transform .14s; }
.gd-cat::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.gd-cat:hover { background: var(--ink); transform: translateY(-1px); }
.gd-cat:hover::after, .gd-cat.on::after { transform: scaleX(1); }
.gd-cat.on { background: var(--ink); }
.gd-cat b { display: block; font-family: var(--display); font-size: 14px; letter-spacing: .03em; }
.gd-cat small { display: block; font-size: 11px; color: #b9b7b1; margin-top: 1px; }
.gd-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.gd-pack.wide { display: block; text-align: left; padding: 10px 12px; }
.gd-pack.wide .gp-name { display: block; font-family: var(--display); font-weight: 700; font-size: 14.5px; }
.gd-pack.wide .gp-price { display: block; font-family: var(--display); font-size: 17px; margin-top: 1px; }
.gd-pack.wide .gp-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gd-cat, .gd-cat::after { transition: none; } }

/* The make a card is built around, top right. Quiet by design: yellow stays on quote actions. */
.pack .pk-make { float: right; font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 2px; padding: 0 4px; line-height: 15px; margin-left: 6px; }
.pack.own .pk-make { border-color: var(--yellow-deep); color: var(--ink); }
.pack:hover .pk-make { border-color: var(--ink-3); }

.gd-go .gd-hint { margin-left: auto; }
@media (max-width: 700px) { .gd-go .gd-hint { display: none; } }