/* Motorpool interface.

   One system for every page: a navy top bar with the store and the sections a
   person may reach, an icon rail for the pages they use all day, and content on
   cards. A dealership screen is read all day by somebody standing up, so density
   and contrast still win over decoration -- the colour is there to say which
   kind of thing you are looking at, not to fill space.

   The design was settled on a canvas with the domain expert (Lane, second pass)
   and these tokens are that canvas's values. Change a token here, not a colour
   in a template. */

:root {
  --navy: #0f1633;
  --primary: #5b4cf5; --primary-dark: #4636d6; --primary-tint: #ece9ff; --primary-soft: #f6f5ff;
  --teal: #0ea5a3; --teal-tint: #e0f5f4; --teal-ink: #0b7f7d;
  --amber: #f59e0b; --amber-tint: #fff4e0; --amber-ink: #b45309;
  --pink: #ec4899; --pink-tint: #fde8f1;
  --good: #16a34a; --good-tint: #e6f7ec;
  --crit: #e5484d; --crit-tint: #fdeaea;
  --ink: #111433; --ink2: #5c6180; --muted: #8b90ad;
  --line: #e4e6f2; --line-soft: #eef0f8; --bg: #f3f4fb; --panel: #fff;
  --accent: var(--primary); --warn: var(--crit); --ok: var(--good); --dim: var(--muted);
  --font: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --disp: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(17,20,51,.04);
  --shadow-pop: 0 8px 24px rgba(17,20,51,.14);  /* a panel over the page: results under a field */
  --mark: var(--amber-tint);                    /* the typed text, found in a result */
  --z-pop: 15;                                  /* over the page, under the sticky top bar (20) */
  --rail-w: 88px;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: var(--disp); letter-spacing: -.02em; }
h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 800; margin: 26px 0 10px; }
h3 { font-size: 14px; font-weight: 700; margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
.mono, .num { font-family: var(--font); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.dim { color: var(--muted); }
.r { text-align: right; }
small { color: var(--muted); }

/* --- the shell -------------------------------------------------------------- */
.topbar { display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 20px;
          background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; }
.topbar .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--disp);
                 font-weight: 800; font-size: 17px; }
.topbar .mark { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
                background: linear-gradient(135deg, #7c6cff, var(--primary)); box-shadow: 0 6px 14px -6px rgba(91,76,245,.9); }
.topbar .mark svg { width: 19px; height: 19px; }
.topbar .store { position: relative; }
.topbar .store summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px;
                         border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.08);
                         cursor: pointer; white-space: nowrap; }
.topbar .store summary::-webkit-details-marker { display: none; }
.topbar .store summary strong { font-weight: 600; }
.topbar .store summary span { color: #c7cbe6; }
.topbar .store .menu { position: absolute; top: 42px; left: 0; min-width: 240px; background: var(--panel); color: var(--ink);
                       border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 32px -12px rgba(17,20,51,.35);
                       padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 30; }
.topbar .store .menu a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.topbar .store .menu a:hover, .topbar .store .menu a.on { background: var(--primary-tint); }
.topbar .store .menu a small { color: var(--muted); }
.topbar nav.sections { display: flex; gap: 2px; }
.topbar nav.sections a { padding: 7px 12px; border-radius: 8px; color: #c7cbe6; font-weight: 500; }
.topbar nav.sections a.on { background: rgba(255,255,255,.12); color: #fff; }
.topbar nav.sections a:hover { color: #fff; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* The accounting month, beside the person: what a close posts into today. */
.topbar a.period { font: 600 12px/1 var(--mono, monospace); color: #c9cde8; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 5px 8px; text-decoration: none; }
.topbar a.period:hover { color: #fff; }
.topbar form.search { display: flex; align-items: center; gap: 8px; width: 260px; height: 36px; padding: 0 12px;
                      border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.08); color: #9ba1c9; }
.topbar form.search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: inherit; padding: 0; outline: none; }
.topbar form.search input::placeholder { color: #9ba1c9; }
.topbar form.search svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar form.search { position: relative; }
/* The type-ahead under the box. A panel in the page's own colours, not the bar's,
   because it reads like results. `.on` is the row the arrow keys are on. */
.topbar form.search ul.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; z-index: 30;
                                 list-style: none; margin: 0; padding: 6px; background: var(--panel); color: var(--ink);
                                 border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(17,20,51,.14); }
.topbar form.search ul.suggest li a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 7px; color: inherit; text-decoration: none; font-weight: 500; }
.topbar form.search ul.suggest li a .dim { color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar form.search ul.suggest li.on a, .topbar form.search ul.suggest li a:hover { background: var(--bg); }
.topbar form.search kbd.hint { font: 600 11px/1 var(--mono, monospace); color: #9ba1c9; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 2px 5px; }
.topbar form.search:focus-within kbd.hint { display: none; }
kbd { font: 600 12px/1.2 var(--mono, monospace); background: var(--line-soft); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
dialog.keys { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; max-width: 560px; width: calc(100% - 32px); box-shadow: var(--shadow); }
dialog.keys::backdrop { background: rgba(20, 24, 48, .45); }
dialog.keys h2 { margin: 0 0 8px; }
dialog.keys table { margin: 12px 0; box-shadow: none; }
dialog.keys td:first-child { white-space: nowrap; width: 1%; padding-right: 16px; }
.topbar .who { position: relative; }
.topbar .who summary { list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%;
                       background: linear-gradient(135deg, var(--amber), var(--pink)); color: #fff;
                       display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.topbar .who summary::-webkit-details-marker { display: none; }
.topbar .who .menu { position: absolute; top: 42px; right: 0; min-width: 220px; background: var(--panel); color: var(--ink);
                     border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 32px -12px rgba(17,20,51,.35);
                     padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 30; }
.topbar .who .menu .name { padding: 8px 10px 4px; font-weight: 700; }
.topbar .who .menu .name small { display: block; font-weight: 400; color: var(--muted); }
.topbar .who .menu a, .topbar .who .menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
                                                  color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; }
.topbar .who .menu a:hover, .topbar .who .menu button:hover { background: var(--primary-tint); }

.frame { display: flex; min-height: calc(100vh - 60px); }
.rail { display: flex; flex-direction: column; gap: 4px; width: var(--rail-w); flex-shrink: 0; padding: 14px 12px;
        background: var(--panel); border-right: 1px solid var(--line); position: sticky; top: 60px; height: calc(100vh - 60px); }
.rail a { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; padding: 10px 0;
          border-radius: 12px; color: var(--ink2); font-size: 10.5px; font-weight: 600; text-align: center; }
.rail a.on { background: var(--primary-tint); color: var(--primary); }
.rail a:hover { background: var(--line-soft); }
.rail a svg { width: 22px; height: 22px; }
.rail .spacer { flex: 1; }
main { flex: 1; min-width: 0; padding: 22px 28px 64px; }
main.narrow { max-width: 760px; }

svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Messages: a toast row under the top bar, not a bare line of text. */
.messages { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.messages li { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); font-weight: 500; }
.messages li.error { border-color: #f4b8bb; color: #a12f33; background: var(--crit-tint); }
.messages li.success { border-color: #b7e4c7; color: #146c33; background: var(--good-tint); }
.messages li.warning { border-color: #f6d9a8; color: var(--amber-ink); background: var(--amber-tint); }

/* --- the service write-up --------------------------------------------------
   One page: find or create, choose the car, then the visit. The matches are a
   pick list the arrow keys walk; `.on` is the row Enter will choose. */
.writeup { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.writeup:not(:has(> .side)) { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.writeup-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.writeup-main > .card, .writeup-main > details.card { margin: 0; }
.writeup-search { display: flex; gap: 8px; }
.writeup-search input { flex: 1; min-width: 0; height: 46px; font-size: 16px; }
.writeup-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 14px; }
.writeup-results h3 { color: var(--ink2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.writeup-choice { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--radius-sm); color: var(--ink); }
.writeup-choice:hover { background: var(--bg); color: var(--ink); }
.writeup-choice.on, .writeup-choice:focus { outline: 0; background: var(--primary-tint); box-shadow: inset 3px 0 0 var(--primary); }
.writeup-choice .pick-main { font-weight: 700; }
.writeup-choice .pick-sub { color: var(--muted); font-size: 12.5px; }
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plain-list li { padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list li .pill { margin-left: 10px; }
.plain-list.history li { padding: 8px 0; font-size: 13px; }
details.walk-in > summary { list-style: none; cursor: pointer; }
details.walk-in > summary::-webkit-details-marker { display: none; }
details.walk-in[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
details.walk-in > summary h2 { color: var(--primary); }
.walk-in-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.walk-in-form legend { font-family: var(--disp); font-weight: 800; font-size: 14px; padding: 0; margin: 0 0 10px; }
.walk-in-form .business-only { display: none; }
.walk-in-form:has(input[name=is_business]:checked) .business-only { display: block; }
.walk-in-form:has(input[name=is_business]:checked) .person-only { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 14px; align-items: start; }
.form-grid.tight { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.form-grid .wide { grid-column: span 2; }
.form-grid > div > .field { margin: 0; }
.form-grid input:not([type=checkbox]):not([type=radio]), .form-grid select { width: 100%; }
.field .label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.field.has-error input, .field.has-error select { border-color: var(--crit); }
label.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 13.5px; margin: 6px 0; cursor: pointer; }
label.check input { margin-top: 3px; }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.form-actions.sticky { position: sticky; bottom: 0; z-index: 5; padding: 12px 18px; background: var(--panel);
                       border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -6px 18px -12px rgba(17,20,51,.25); }
/* Waiting or drop-off: two buttons, one pressed. */
.seg-radio { display: inline-flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: var(--radius-sm); }
.seg-radio > div { display: contents; }
.seg-radio label { display: flex; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-radio label span { padding: 8px 14px; border-radius: 8px; font-weight: 600; color: var(--ink2); }
.seg-radio input:checked + span { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(17,20,51,.12); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--primary); }
/* Concern rows: a letter, what the customer said, an op code, who pays. */
.concern-rows { display: flex; flex-direction: column; gap: 8px; }
.concern-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 130px 150px; gap: 10px; align-items: center; }
.concern-row.concern-head { font-size: 12px; font-weight: 600; color: var(--muted); }
.concern-row input, .concern-row select { width: 100%; }
.concern-row .letter { width: 28px; height: 28px; border-radius: 8px; background: var(--primary-tint); color: var(--primary);
                       font-family: var(--disp); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.concern-rows.js .concern-row.spare { display: none; }
.more-concerns { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; }
/* Alerts: a line on the page, never a popup. The text says what it is. */
.alert { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); margin: 0 0 12px; }
.alert p { margin: 6px 0 0; }
.alert.warn { border-color: #f6d9a8; background: var(--amber-tint); color: var(--ink); }
.alert.info { border-color: #ddd8ff; background: var(--primary-soft); }
.alert.crit { border-color: #f4b8bb; background: var(--crit-tint); color: #a12f33; }
.alert.ok { border-color: #b7e4c7; background: var(--good-tint); }
.alert .errorlist { margin: 0; padding: 0; list-style: none; }
ul.alerts { list-style: none; margin: 0; padding: 0 18px 12px; display: flex; flex-direction: column; gap: 8px; }
ul.alerts .alert { margin: 0; font-size: 13px; }
.warning-box { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid #f6d9a8; background: var(--amber-tint); color: var(--amber-ink); font-weight: 600; }
.who-line { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
          background: linear-gradient(135deg, #7c6cff, var(--primary)); color: #fff; font-weight: 800; }
h3.minor { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* --- notes, alerts, the VIN reading, campaigns, signatures -------------------- */
.customer-alerts { display: flex; flex-direction: column; gap: 8px; }
.customer-alert { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.notes-log textarea { width: 100%; }
.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.note-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.note-entries li { padding: 10px 0; }
.note-entries li.live { box-shadow: inset 3px 0 0 var(--crit); padding-left: 10px; }
.note-entries li.cleared { opacity: .75; }
.note-meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; margin-bottom: 3px; }
.quick-note textarea { width: 100%; }
.vin-reading { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; margin-top: 4px; }
.stack-fields { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.stack-fields textarea { width: 100%; }
.campaigns-due { border-color: #f4b8bb; }
table.compact { box-shadow: none; margin: 8px 0; }
/* The inspection: a tablet in the bay, so the buttons are big. */
.inspection-point { padding: 14px 16px; margin: 0 0 10px; border-left: 5px solid var(--line); }
.inspection-point.ok { border-left-color: var(--good); }
.inspection-point.attention { border-left-color: var(--amber); }
.inspection-point.urgent { border-left-color: var(--crit); }
.point-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.point-head h3 { font-size: 15px; margin-right: auto; }
.point-rate { display: flex; gap: 8px; flex-wrap: wrap; }
.point-rate input[type=text] { flex: 1; min-width: 220px; height: 48px; }
.condition-buttons { display: flex; gap: 6px; }
.condition-buttons button { height: 48px; min-width: 76px; justify-content: center; font-size: 15px; }
.condition-buttons .condition-ok.on { background: var(--good); border-color: var(--good); color: #fff; }
.condition-buttons .condition-attention.on { background: var(--amber); border-color: var(--amber); color: #fff; }
.condition-buttons .condition-urgent.on { background: var(--crit); border-color: var(--crit); color: #fff; }
.pill.condition-ok { background: var(--good-tint); color: var(--good); }
.pill.condition-attention { background: var(--amber-tint); color: var(--amber-ink); }
.pill.condition-urgent { background: var(--crit-tint); color: var(--crit); }
.point-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.point-photos img { height: 96px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.point-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.point-actions label.button { cursor: pointer; }
.quick-job { padding: 12px 14px; margin: 0 0 14px; }
.quick-job-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.quick-job-row #quick-entry { flex: 1; min-width: 240px; height: 44px; font-size: 15px; }
.quick-job-row .quick-tech { width: 120px; }
.quick-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stock-state { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 6px; }
.stock-state.stock, .stock-state.held { background: var(--good-tint); color: var(--good); }
.stock-state.contested, .stock-state.ordered { background: var(--amber-tint); color: var(--amber-ink); }
.stock-state.short { background: var(--crit-tint); color: var(--crit); }
table.compact td, table.compact th { padding: 7px 10px; }
.package-add { flex-wrap: wrap; }
.package-add .qty { width: 110px; flex: 0 0 auto; }
.campaign-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.signature-pad { display: block; width: 100%; height: 160px; border: 1px dashed #c9cde0; border-radius: var(--radius-sm);
                 background: #fff; touch-action: none; cursor: crosshair; }
.sign-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sign-form input, .sign-form select { width: 100%; }
.signature-kept { margin: 0 0 12px; }
.signature-kept img { display: block; max-width: 100%; height: 70px; object-fit: contain; object-position: left;
                      border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.signature-kept figcaption { font-size: 12.5px; }
.signature-kept pre.statement { white-space: pre-wrap; font: 12px/1.45 var(--mono); background: var(--bg); padding: 8px 10px; border-radius: 8px; }
/* --- the repair order's visit strip and next steps -------------------------- */
.visit-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 18px; margin: 0 0 16px; background: var(--panel);
               border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; }
.visit-strip > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.visit-strip dt, .visit-strip .k { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.visit-strip .v { font-weight: 700; }
.visit-strip .v.late { color: var(--crit); }
.visit-strip .edit { margin-left: auto; align-self: center; }
/* The status line beside the shop status: one sentence, Enter saves it. */
form.status-line { display: inline-flex; align-items: center; gap: 6px; }
form.status-line input { width: 26em; max-width: 60vw; }
.status-line-text { color: var(--muted); font-weight: 600; font-size: 13px; }
/* Facts the car carries through owners: its notes, its contracts, its sale. */
.car-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.car-facts .alert { margin: 0; }
.invoice-comments { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.steps-next { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.steps-next li { display: flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); font-weight: 600; font-size: 13px; }
.steps-next li.warn { border-color: #f6d9a8; background: var(--amber-tint); color: var(--amber-ink); }
.steps-next li.ok { border-color: #b7e4c7; background: var(--good-tint); color: var(--good); }
.steps-next li.todo { color: var(--ink2); }
.authorize-all { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 14px;
                 border: 1px dashed #f4b8bb; border-radius: var(--radius); background: var(--crit-tint); }
.authorize-all input[type=text] { flex: 1; min-width: 220px; }
@media (max-width: 1100px) { .writeup { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .writeup-results { grid-template-columns: 1fr; gap: 12px; }
  .concern-row { grid-template-columns: 28px minmax(0, 1fr); }
  .concern-row > div:nth-child(n+3) { grid-column: 2; }
  .concern-row.concern-head { display: none; }
  .form-grid .wide { grid-column: auto; }
}
.error, .warn-text { color: var(--crit); }

/* --- page furniture ------------------------------------------------------------ */
.crumbs { display: flex; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.head h1 { margin: 0; }
.head .sub { color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.head .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.lead { color: var(--ink2); margin: -10px 0 18px; }

.button, button, .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px;
                        font: inherit; font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
                        cursor: pointer; text-decoration: none; white-space: nowrap; }
.button:hover, button:hover, .btn:hover { border-color: #c9cde0; color: var(--ink); }
.button.primary, button.primary, button[type=submit].primary, .btn.primary {
  background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 16px -8px rgba(91,76,245,.7); }
.button.primary:hover, button.primary:hover, .btn.primary:hover { background: var(--primary-dark); color: #fff; }
.button.danger, button.danger { color: var(--crit); border-color: #f4b8bb; }
.button.small, button.small { height: 32px; padding: 0 10px; font-size: 12.5px; border-radius: 9px; }
.link { background: none; border: 0; color: var(--primary); cursor: pointer; font: inherit; padding: 0; height: auto; }
.link:hover { border: 0; color: var(--primary-dark); }
.inline { display: inline; }
.button svg, button svg { width: 17px; height: 17px; }

/* Cards. `.stack`, `.job`, `.entry`, `.close` were the old panel classes; they are cards now. */
.card, .stack, .job, .entry, .close, section.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* A form is a grid, not a column (the expert, 2026-10-04: "long, and not
   a lot on the screen"). Fields flow into as many columns as fit -- three or
   four at a desk, one on a phone -- in the order the form declares them, so
   related fields stay side by side. Everything that is not a field --
   headings, notes, errors, the buttons, a nested grid -- takes the whole
   row, and so does a field holding a text area. */
.stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px;
  align-items: start; max-width: 1180px; padding: 18px 20px; }
.stack > :not(.field), .stack > .field.wide, .stack > .field:has(textarea) { grid-column: 1 / -1; }
.stack > .field input:not([type=checkbox]):not([type=radio]), .stack > .field select { width: 100%; }
.stack > p:has(> button), .stack > button, .stack > .button { justify-self: start; }
.field > input[type=checkbox], .field > input[type=radio] { align-self: flex-start; width: auto; margin: 6px 0 0; }
.stack.tight { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; max-width: 560px; }
.stack p { margin: 0; }
/* The sign-in card and the customer's pay page stay one narrow column. */
.signin .stack { display: flex; flex-direction: column; }
.job, .entry, .close { padding: 0; margin: 14px 0; overflow: hidden; }
.job > header, .entry > header { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
                                 padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.job > header h3, .entry > header h3 { font-size: 15px; }
.job > header .letter { width: 32px; height: 32px; border-radius: 10px; background: var(--primary); color: #fff; font-family: var(--disp);
                        font-weight: 800; display: flex; align-items: center; justify-content: center; }
.job > *:not(header):not(table):not(.foot), .entry > *:not(header):not(table) { padding: 0 18px; }
.job .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px;
             background: #f8f8fd; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.job.refused { border-color: #f4b8bb; }
.job.refused .foot { background: var(--crit-tint); border-color: #f4b8bb; color: var(--crit); font-weight: 600; }
.job.declined { opacity: .82; border-style: dashed; }
.job.declined .lines .num { text-decoration: line-through; color: var(--muted); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.card-head h2 { margin: 0; }
.card-head .note { margin: 0; }
.card-body { padding: 0 18px 16px; }
.card table { border-radius: 0; box-shadow: none; border: 0; }

section { margin: 0 0 22px; }
section > h2:first-child { margin-top: 0; }

.threecs { display: grid; grid-template-columns: 90px 1fr; gap: 3px 10px; margin: 12px 0; font-size: 13px; }
.threecs dt, .meta dt, .kv dt { color: var(--muted); font-size: 12px; }
.threecs dd, .meta dd, .kv dd { margin: 0; }
.meta { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin: 0 0 16px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; margin: 0; }
.kv dd { font-weight: 500; }
.summary { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary-soft); border: 1px solid #ddd8ff; margin: 0 0 16px; }

.note { color: var(--ink2); font-size: 12.5px; max-width: 64ch; }
.empty { color: var(--muted); padding: 14px 0; }
.adder { margin: 14px 0; }
.adder summary { cursor: pointer; color: var(--primary); font-weight: 600; padding: 6px 0; }
.adder .stack, .adder form.stack { margin-top: 10px; }

/* Tables look like data tables: quiet header, right-aligned money, hover rows. */
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbfe; }
/* Every heading sorts on a click; the arrow says which way. */
thead th { cursor: pointer; user-select: none; }
thead th[aria-sort="ascending"]::after { content: " \2191"; }
thead th[aria-sort="descending"]::after { content: " \2193"; }
.tabs { display: flex; gap: 4px; align-items: center; margin: 14px 0 10px; }
.tabs a { padding: 7px 12px; border-radius: 8px; text-decoration: none; color: var(--ink2); font-weight: 600; }
.tabs a.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line); }
.tabs .spacer { flex: 1; }
.report-on-screen table { box-shadow: none; border: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfbfe; }
/* The row j/k are on. A bar on the left, not a colour wash, so a warn row stays a warn row. */
tbody tr.on td { background: var(--bg); }
tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tfoot th, tfoot td { background: #fafbfe; color: var(--ink); font-weight: 700; border-top: 1px solid var(--line); }
tr.warn td { background: var(--crit-tint); }
tr.dim td { opacity: .55; }
td.actions form.inline { display: inline; margin-right: 8px; }
td.actions form.reopen input { width: 130px; font-size: 12px; }
/* A figure typed over in place on a grid row (receiving): narrow, right-aligned. */
td input.cell { width: 92px; text-align: right; font-variant-numeric: tabular-nums; padding: 3px 6px; }
table.lines input, table.lines select { width: 100%; }
table.lines td { padding: 4px 6px; }
table.grid td, table.grid th { padding: 3px 8px; font-size: 12px; white-space: nowrap; }
table.grid tbody th { text-align: right; color: var(--muted); font-weight: normal; }
.grid-scroll { overflow-x: auto; border-radius: var(--radius); }

/* Forms. */
input, select, textarea { font: inherit; height: 40px; padding: 0 12px; border: 1px solid #d3d6e8; border-radius: var(--radius-sm);
                          background: #fff; color: var(--ink); }
textarea { height: auto; padding: 10px 12px; }
input[type=checkbox], input[type=radio] { height: auto; width: auto; accent-color: var(--primary); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary); }
.field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.field small { color: var(--muted); }
.field .errorlist { margin: 0; padding: 0; list-style: none; color: var(--crit); font-size: 12.5px; }
.errorlist { color: var(--crit); }
.row { display: flex; gap: 8px; margin: 8px 0; }
.row input[type=text] { flex: 1; }
.filters { margin: 0 0 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters input[type=text], .filters input[type=search] { min-width: 260px; }

/* A typed record field's results (forms.LookupInput): a panel directly under
   the box, its full width, over whatever follows. Each row is the record in
   words on the first line, the code that fills the box beside it, and what
   tells two Smiths apart on the second; the typed text is marked. `.on` is
   the row the arrows are on. */
.lookup { position: relative; display: block; }
.stack > .field .lookup input, .row > .lookup input { width: 100%; }
.row > .lookup { flex: 1; }
.lookup-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 280px; z-index: var(--z-pop);
                display: block; max-height: 360px; overflow-y: auto; padding: 6px; background: var(--panel);
                border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.lookup-panel[hidden] { display: none; }
/* A dropdown (the journal's account): the whole chart on entry, a caret to say so. */
.lookup.dropdown input { padding-right: 28px; }
.lookup-caret { position: absolute; top: 0; right: 0; bottom: 0; width: 26px; padding: 0; border: 0;
                background: transparent; cursor: pointer; color: var(--ink2); }
.lookup-caret::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -2px 0 0 -4px;
                       border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
.lookup-caret:hover { color: var(--ink); }
.lookup-results { display: block; }
.lookup-option { display: block; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.lookup-option[hidden] { display: none; }
.lookup-option:hover, .lookup-option.on { background: var(--primary-tint); }
.lookup-line { display: block; color: var(--ink); }
.lookup-line b { font-weight: 600; }
.lookup-line .mono { color: var(--ink2); margin-left: 6px; }
.lookup-detail { display: block; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookup-panel mark { background: var(--mark); color: inherit; border-radius: 2px; }
.lookup-foot { display: block; padding: 7px 10px 3px; font-size: 12.5px; color: var(--muted); }
.lookup-results:empty + .lookup-foot { padding-top: 3px; color: var(--ink2); }
/* A card or table that clips its corners lets an open panel out. */
.job:has(.lookup-panel:not([hidden])), .entry:has(.lookup-panel:not([hidden])),
.close:has(.lookup-panel:not([hidden])), table:has(.lookup-panel:not([hidden])) { overflow: visible; }
.entry-head { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; align-items: flex-start; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.choice input { margin-top: 3px; }
.choice strong { display: block; }
.choice small { color: var(--ink2); font-size: 12.5px; }

/* Pills: tinted, never colour alone -- the text says what it is. */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px;
        border-radius: 8px; background: var(--line-soft); color: var(--ink2); white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.pill.open, .pill.working, .pill.sent, .pill.partial { background: var(--amber-tint); color: var(--amber-ink); }
.pill.estimate, .pill.draft { background: var(--line-soft); color: var(--ink2); }
.pill.closed, .pill.delivered, .pill.posted, .pill.received, .pill.good { background: var(--good-tint); color: var(--good); }
.pill.void, .pill.unwound, .pill.cancelled, .pill.crit { background: var(--crit-tint); color: var(--crit); }
.pill.locked { background: var(--ink); color: #fff; }
.pill.info { background: var(--primary-tint); color: var(--primary); }
.pill.big { font-size: 13px; padding: 5px 12px; }
.ok { color: var(--good); font-weight: 600; }
.warn { color: var(--crit); font-weight: 600; }
.owed { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }

.totals { text-align: right; color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.grand { text-align: right; font-size: 15px; margin: 12px 0; }

/* Dashboard tiles and department cards. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--primary); color: var(--ink); }
.tile.teal { border-top-color: var(--teal); } .tile.amber { border-top-color: var(--amber); } .tile.pink { border-top-color: var(--pink); }
.tile .label { display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--ink2); }
.tile .badge { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
               background: var(--primary-tint); color: var(--primary); }
.tile.teal .badge { background: var(--teal-tint); color: var(--teal-ink); }
.tile.amber .badge { background: var(--amber-tint); color: var(--amber-ink); }
.tile.pink .badge { background: var(--pink-tint); color: var(--pink); }
.tile .n { font-family: var(--disp); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.tile .unit { color: var(--muted); margin-left: 8px; font-size: 13px; }
.tile .foot { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stats li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stats .n { display: block; font-family: var(--disp); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.stats li.warn { border-top: 4px solid var(--crit); color: var(--ink); }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shop-board { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
.shop-column { width: 270px; min-width: 270px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.shop-column > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px 10px; }
.shop-column h2 { font-size: 14px; margin: 0; }
.shop-card { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px; margin: 0 0 8px; box-shadow: 0 1px 2px rgba(20, 27, 54, .04); }
.shop-card:hover { border-color: var(--primary); text-decoration: none; }
.shop-card > span:not(.pill), .shop-card small { grid-column: 1 / -1; }
.shop-card small { color: var(--muted); line-height: 1.35; }
.shop-card .shop-summary { color: var(--ink2); }
.dispatch-board .shop-card { display: block; }
.dispatch-board .shop-card form { display: flex; gap: 6px; margin-top: 9px; }
.dispatch-board .shop-card input { width: 100%; }
.cards a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 16px 18px; color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.cards a:hover { border-color: var(--primary); }
.cards span { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.two.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side { display: flex; flex-direction: column; gap: 16px; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.doc .side { position: sticky; top: 82px; }
.legend { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--ink2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bars .bar { display: grid; grid-template-columns: 62px 1fr 84px; align-items: center; gap: 10px; font-size: 12.5px; }
.bars .bar .track { height: 12px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.bars .bar .fill { height: 100%; border-radius: 6px; background: var(--primary); }
.bars .bar.crit .fill { background: var(--crit); }
.bars .bar.crit span { color: var(--crit); font-weight: 700; }
.bars .bar span:first-child { color: var(--ink2); }
.list { display: flex; flex-direction: column; }
.list a, .list .item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 18px; border-top: 1px solid var(--line-soft); color: var(--ink); }
.list a:hover { background: #fbfbfe; }
.list .item .pill, .list a .pill { flex-shrink: 0; height: 22px; }
.list .t { font-weight: 600; } .list .s { font-size: 12.5px; color: var(--muted); }
.axis { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.lbl { font-size: 11.5px; font-weight: 700; fill: var(--ink); font-family: var(--font); }
.seg { display: inline-flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: 10px; }
.seg a, .seg span { padding: 4px 10px; border-radius: 8px; color: var(--ink2); font-size: 12.5px; font-weight: 500; }
.seg .on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(17,20,51,.1); }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.tabs a { padding: 8px 2px; border-bottom: 2px solid transparent; color: var(--ink2); font-weight: 500; }
.tabs a.on { border-bottom-color: var(--primary); color: var(--ink); font-weight: 600; }

/* Settings: a sub-nav and a form column. */
.settings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 12px; position: sticky; top: 82px; }
.subnav .grp { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 14px 12px 4px; }
.subnav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink2); font-weight: 500; }
.subnav a.on { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.subnav a:hover { background: var(--line-soft); }
.subnav a svg { width: 16px; height: 16px; }
.subnav a .soon { margin-left: auto; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #7c6cff, var(--primary)); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 22px; }
.steps .step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.steps .step.done { color: var(--ink); }
.steps .step i { width: 18px; height: 18px; border-radius: 50%; background: var(--line-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.steps .step.done i { background: var(--good); color: #fff; }
.steps .step i svg { width: 11px; height: 11px; stroke-width: 3; }

/* Sign-in: a card in the middle of the navy. */
body.plain { background: var(--navy); }
.signin { max-width: 380px; margin: 10vh auto; }
.signin .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--disp); font-weight: 800; font-size: 20px; margin: 0 0 18px; justify-content: center; }
.signin .stack { max-width: none; }
.signin h1 { font-size: 20px; }

/* Payment links: on the RO beside what is owed, and the customer's own page,
   which is reached without signing in and so wears the sign-in card. */
.paylinks { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line-soft); }
.paylink { display: flex; flex-direction: column; gap: 6px; }
.paylink-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.paylink-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.paylink input[readonly] { width: 100%; }
.pay-amount { font-family: var(--disp); font-size: 34px; font-weight: 800; color: var(--primary); margin: 4px 0 8px; }
.pay-test { background: var(--amber-tint); color: var(--amber-ink); padding: 8px 12px; border-radius: 8px; font-size: 13px; }

/* The customer's view of their RO, from a link: the sign-in card, wider. */
.signin.custview { max-width: 560px; margin: 4vh auto; }
.custview-jobs { display: flex; flex-direction: column; gap: 12px; }
.custview-job { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.custview-line { display: flex; justify-content: space-between; font-size: 13px; }
.custview-photo { max-width: 100%; border-radius: 8px; }

/* A part's page: the master in two columns, the facts as a definition list. */
.part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Paging. The row count is always shown, even on a single page: the point is
   that a reader can tell whether what they are looking at is all of it. */
.paging { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin: 14px 0 4px; font-size: 13px; }
.paging .count { color: var(--muted); }
.paging .pages { display: flex; gap: 10px; align-items: baseline; margin-left: auto; }
.paging .pages a:hover { text-decoration: underline; }
.paging .disabled { color: var(--muted); opacity: .45; }
.paging .where { color: var(--muted); }

/* The caveat that has to be read before the figures are believed. */
.provenance { border: 2px solid var(--crit); border-radius: var(--radius); background: var(--crit-tint); padding: 12px 16px; margin: 16px 0; }
.provenance h2 { margin-top: 0; color: var(--crit); border: 0; }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .two.even, .doc, .settings { grid-template-columns: minmax(0, 1fr); }
  .doc .side, .subnav { position: static; }
  .topbar form.search { width: 180px; }
  .topbar nav.sections a { padding: 7px 8px; }
}
@media (max-width: 820px) {
  .rail { display: none; }
  main { padding: 16px 14px 48px; }
  .topbar nav.sections { display: none; }
  .steps { grid-template-columns: 1fr; }
}
@media print {
  .topbar, .rail, .messages { display: none; }
  body { background: #fff; }
  main { padding: 0; }
}

/* The permission picker: a matrix, the role column read-only, one "all" per module. */
table.permissions { max-width: 760px; }
table.permissions th.c, table.permissions td.c { text-align: center; width: 110px; }
table.permissions tr.module th { background: var(--bg); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
table.permissions tr.module label { font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
table.permissions td.role-mark { color: var(--good); font-weight: 700; }
table.permissions tr.in-role td:first-child { color: var(--ink); }
table.permissions input[type=checkbox] { width: 16px; height: 16px; }
/* A key-cap on a filled button reads on the fill, not as a grey chip. */
button.primary kbd, .button.primary kbd { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }

/* The receipt's open items: the payer's documents, ticked to pay (receivables.ageing). */
div.open-items { border-top: 1px solid var(--line-soft); }
table.open-items input[inputmode=decimal] { width: 8em; text-align: right; }
table.open-items tr:focus-within td { background: var(--primary-soft); }

/* The repair order's conversation with its customer: what went out on the
   right, what came back on the left, as a phone shows it (ui/_thread.html). */
.thread-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.thread-list li { max-width: 80%; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--line-soft); }
.thread-list li.out { align-self: flex-end; background: var(--primary-soft); }
.thread-list li.in { align-self: flex-start; }
.thread-list li.in.unread { background: var(--amber-tint); }
.thread-list .meta { font-size: 12px; color: var(--muted); }
.thread-list .body { white-space: pre-wrap; margin-top: 2px; }