/* estimator/app.css — the app's OWN stylesheet, and it is deliberately empty.

   It sits BENEATH the shell's shell.css and may add rules of its own. It may
   NEVER override a shell token: a second token set is a second design system,
   and two of those in one suite is how "the same app in two colours" starts.

   Do not put shell chrome rules here. If a shell-rendered element needs a
   rule, that rule belongs in shell.css at HQ's word — putting it here is the
   copying scar this repo exists to end. */

/* ---------- P-UI1: ONE RHYTHM FOR EVERY SCREEN - LAYOUT ONLY ----------
   The shell's spacing scale and nothing else: label -> 4 px -> box (the
   shell's own label margin), 16 px between fields, 16 px inside a card,
   16 px between cards. The page heading and its quiet line sit together in
   one header with room under it. The foot bar of a long form (Building:
   Save; Takeoff: Run again) rides the bottom of a phone's screen; nothing
   else is sticky. No colour, no font, no token is defined or overridden. */
.page-head { margin: 0 0 var(--sp-4); }
.page-head h1 { margin: 0; }
.page-head .muted-line, .page-head .eng { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* a card's own heading INSIDE the card: the fieldset keeps its legend (it
   names the group for a screen reader); floated, the legend sits in the
   card's box like any heading instead of on its top border */
.building fieldset.card > legend, .takeoff-page fieldset.card > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-h2); line-height: 1.3; color: var(--text);
}
.building fieldset.card > legend + *, .takeoff-page fieldset.card > legend + * { clear: both; }

/* THE FOOT BAR on a phone: the shell's surface and hairline, full bleed */
div.actions.runbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0; }
div.actions.runbar .state-error { flex-basis: 100%; margin: 0; }
div.actions.runbar .save-status { flex-basis: 100%; margin: 0; }
@media (max-width: 899px) {
  div.actions.runbar {
    position: sticky; bottom: 0; z-index: var(--z-bar);
    margin: var(--sp-4) calc(var(--sp-4) * -1) 0;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-sheet);
  }
  /* two buttons side by side; a long label wraps inside its button */
  div.actions.runbar .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }
  div.actions.runbar .state-error { max-height: 40vh; overflow-y: auto; }
}

/* ---------- P3: THE BUILDING FORM - LAYOUT ONLY ----------
   Rules shell.css does not have, for the form's own shapes: the grid of
   boxes, the repeating rows, the tick row, the sketch pane. Every value is a
   shell token or a plain length; no colour, no font, no token is defined or
   overridden here. Phone first: one box per row at 320/390 (two only where
   both are short numbers: .half), the sketch beside the cards from 900 px.
   Nothing here scrolls the page sideways. */

.app-tabs, .app-steps { margin: 0 0 var(--sp-3); padding: 0; }
.app-steps { border-top: 1px solid var(--border); }
.app-steps .tab:disabled, .app-tabs .tab:disabled { opacity: .5; cursor: not-allowed; }

.building-all { border: 0; margin: 0; padding: 0; min-width: 0; }
.building-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) {
  .building-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .sketch-pane { position: sticky; top: var(--sp-4); }
}
.building-cards { min-width: 0; }
.building fieldset.card { min-width: 0; margin: 0 0 var(--sp-4); padding: var(--sp-4); }

.building .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); }
.building .grid > .field { grid-column: 1 / -1; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.building .grid > .field.half { grid-column: auto; }
.building .field .input { width: 100%; min-width: 0; }
@media (min-width: 640px) {
  .building .grid > .field { grid-column: auto; }
  .building .grid > .field.wide { grid-column: 1 / -1; }
}
.building .sub { font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }
.building legend + .sub { margin-top: 0; }

/* Walls enclosed: a tidy 2 x 2 on a phone (A B / C D), one row of four wider */
.building .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
@media (min-width: 640px) { .building .checks { grid-template-columns: repeat(4, max-content); gap: 0 var(--sp-5); } }
.building .checks label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; min-height: var(--touch-min); }
.building .checks input[type="checkbox"] { width: 20px; height: 20px; flex: none; }

/* the repeating rows; the row's number is a CSS counter, so the page script
   does no counting */
.building .rows { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); counter-reset: row; }
.building .row {
  counter-increment: row;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: start;
}
.building .row > .field { grid-column: 1 / -1; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.building .row > .field.half { grid-column: auto; }
@media (min-width: 640px) { .building .row > .field { grid-column: auto; } }
.building .rowhead { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-weight: 700; }
.building .row-name::after { content: " " counter(row); }

.building .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.building .state-error p { margin: 0 0 var(--sp-1); text-align: left; }
.building .state-error { padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.building .refusal-head { font-weight: 700; }

/* the engine's drawing: as wide as its pane, never wider than the page. Its
   small legend line (the engine's) is too small to read on a phone and is
   left out there - Layout in words says the same thing */
.sketch-pane { min-width: 0; }
.sketch { overflow: hidden; }
.sketch svg { display: block; width: 100%; height: auto; }
@media (max-width: 639px) { .sketch svg text[font-size="11"] { display: none; } }
.layout { margin: 0; padding-left: var(--sp-4); overflow-wrap: anywhere; }

/* ---------- P4: THE TAKEOFF STEP - LAYOUT ONLY ----------
   The same rule as above: shell tokens and plain lengths, no colour, no font,
   no token defined or overridden. P-UI1 (ruling 249): each takeoff line is
   ONE <tbody> - its row, then its Why row. On a phone (and up to 899 px) a
   line is a CARD: rule · item · code (and Drop this line) on the first line,
   the Quantity and Price boxes with their small labels, the unit and the
   total on the second, the note quiet under them (one line until the line is
   changed or a box is in use). From 900 px it is a table row no taller than
   one box; the Why row opens under a changed line in both. The labor and
   other tables still scroll inside their own box; the page never does. */
.takeoff-page { min-width: 0; }
.takeoff-all { border: 0; margin: 0; padding: 0; min-width: 0; }
.takeoff-page .sec-head { margin: var(--sp-5) 0 0; }
.takeoff-page .hint { margin: var(--sp-1) 0 var(--sp-3); }
.takeoff-page .scroll { overflow-x: auto; max-width: 100%; margin: var(--sp-2) 0 var(--sp-3); }
.takeoff-page table { border-collapse: collapse; width: 100%; }
.takeoff-page th, .takeoff-page td { padding: var(--sp-1) var(--sp-2); vertical-align: top; text-align: left; border-bottom: 1px solid var(--border); }
.takeoff-page .num { text-align: right; white-space: nowrap; }
.takeoff-page table.labor { min-width: 560px; }
.takeoff-page td.note { overflow-wrap: anywhere; }
.takeoff-page table.labor td.note { min-width: 220px; }
.takeoff-page .flagtag { margin-left: var(--sp-2); vertical-align: middle; white-space: nowrap; }
.takeoff-page .pill { margin-left: var(--sp-2); }

/* THE LINES: shared by both postures */
.takeoff-page table.takeoff { margin: 0 0 var(--sp-3); }
.takeoff-page table.takeoff td.box { min-width: 0; }
.takeoff-page table.takeoff td.box .input { padding: 8px var(--sp-2); min-width: 0; }
.takeoff-page table.takeoff label.mini { margin: 0 0 2px; }
.takeoff-page .engfig { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; white-space: nowrap; }
.takeoff-page table.takeoff .btn.drop { min-height: var(--touch-min); padding: 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 650; background: none; border-color: transparent; box-shadow: none; color: var(--muted); }
.takeoff-page tbody.line td.note { color: var(--muted); font-size: var(--fs-xs); }
.takeoff-page .whybox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-1); }
.takeoff-page .whybox .field { grid-column: 1 / -1; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.takeoff-page .whybox .field[data-price-src] { grid-column: auto; }
.takeoff-page .whybox .input { width: 100%; min-width: 0; }
/* Drop this line: a marked line is struck until the run takes it */
.takeoff-page tbody.dropping .lrow td:not(.act):not(.box) { text-decoration: line-through; color: var(--muted); }

@media (max-width: 899px) {
  .takeoff-page table.takeoff, .takeoff-page table.takeoff tbody, .takeoff-page table.takeoff tr,
  .takeoff-page table.takeoff td { display: block; }
  .takeoff-page table.takeoff thead { display: none; }
  .takeoff-page table.takeoff tbody.line {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3) var(--sp-3); margin: 0 0 var(--sp-2);
  }
  .takeoff-page table.takeoff td { padding: 0; border: 0; }
  .takeoff-page table.takeoff tr.lrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-1) var(--sp-2); }
  /* two zero-height breaks make the three lines of the card */
  .takeoff-page table.takeoff tr.lrow::before, .takeoff-page table.takeoff tr.lrow::after { content: ""; flex-basis: 100%; height: 0; }
  .takeoff-page table.takeoff tr.lrow::before { order: 5; }
  .takeoff-page table.takeoff tr.lrow::after { order: 10; }
  .takeoff-page table.takeoff td:nth-child(1) { order: 1; align-self: center; color: var(--muted); font-size: var(--fs-xs); }
  .takeoff-page table.takeoff td.item { order: 2; flex: 1 1 0; min-width: 0; align-self: center; font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
  .takeoff-page table.takeoff td.code { order: 3; align-self: center; color: var(--muted); font-size: var(--fs-xs); }
  .takeoff-page table.takeoff td.act { order: 4; align-self: center; margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0; }
  .takeoff-page table.takeoff td.box:nth-child(4) { order: 6; flex: 0 1 76px; }
  .takeoff-page table.takeoff td.box:nth-child(6) { order: 7; flex: 0 1 108px; }
  /* the unit and total sit level with the text in the boxes (under the 21 px small label) */
  .takeoff-page table.takeoff td.unit { order: 8; padding-top: 32px; color: var(--muted); font-size: var(--fs-sm); }
  .takeoff-page table.takeoff td:nth-child(7) { order: 9; margin-left: auto; padding-top: 32px; color: var(--muted); font-size: var(--fs-sm); }
  /* an ADDED line has no boxes: its qty and cost print as text */
  .takeoff-page table.takeoff tbody.added td { padding-top: 0; }
  .takeoff-page table.takeoff td.qty { order: 6; }
  .takeoff-page table.takeoff td.cost { order: 7; color: var(--muted); font-size: var(--fs-sm); }
  /* the note: off an untouched card (two lines: the item, the boxes), back
     the moment a box on the card is in use or the line is changed */
  .takeoff-page table.takeoff td.note { order: 11; flex-basis: 100%; min-width: 0; display: none; }
  .takeoff-page table.takeoff tbody.changed td.note, .takeoff-page table.takeoff tbody.line:focus-within td.note,
  .takeoff-page table.takeoff tbody.added td.note { display: block; }
  .takeoff-page table.takeoff tbody.unpriced td:nth-child(7) { display: none; }
  .takeoff-page table.takeoff tr.whyrow { margin-top: var(--sp-2); border-top: 1px solid var(--border); }
}

@media (min-width: 900px) {
  .takeoff-page table.takeoff { table-layout: fixed; }
  .takeoff-page table.takeoff th:nth-child(1) { width: 2.5em; }
  .takeoff-page table.takeoff th:nth-child(3) { width: 6em; }
  .takeoff-page table.takeoff th:nth-child(4) { width: 5.5em; }
  .takeoff-page table.takeoff th:nth-child(5) { width: 4em; }
  .takeoff-page table.takeoff th:nth-child(6) { width: 7em; }
  .takeoff-page table.takeoff th:nth-child(7) { width: 6em; }
  .takeoff-page table.takeoff th:nth-child(9) { width: 8em; }
  .takeoff-page table.takeoff .btn.drop { white-space: nowrap; }
  .takeoff-page table.takeoff td { vertical-align: middle; font-size: var(--fs-sm); }
  .takeoff-page table.takeoff tr.lrow td { border-bottom: 0; }
  .takeoff-page table.takeoff tbody.line { border-bottom: 1px solid var(--border); }
  .takeoff-page table.takeoff td.box { vertical-align: top; }
  /* the column heads name the boxes here: their small labels are kept for a
     screen reader and taken off the screen */
  .takeoff-page table.takeoff label.mini {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
  }
  .takeoff-page table.takeoff td.code, .takeoff-page table.takeoff td.item { overflow-wrap: anywhere; }
  /* the note: one line in its column; the whole note while a box on the line is in use */
  .takeoff-page table.takeoff td.note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .takeoff-page table.takeoff tbody.line:focus-within td.note { white-space: normal; }
  .takeoff-page table.takeoff td.act { text-align: right; }
  .takeoff-page .whybox { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 0 var(--sp-2); }
  .takeoff-page .whybox .field { grid-column: span 2; }
  .takeoff-page .whybox .field[data-price-src] { grid-column: span 1; }
}

.takeoff-page .totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0; max-width: 520px; }
.takeoff-page .totals .grand { font-weight: 700; }

.takeoff-page .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; margin: var(--sp-3) 0; }
@media (min-width: 900px) { .takeoff-page .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.takeoff-page .sketch { overflow: hidden; }
.takeoff-page .sketch svg { display: block; width: 100%; height: auto; }

.takeoff-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.takeoff-page .state-error { padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.takeoff-page .state-error p, .takeoff-page .done p { margin: 0 0 var(--sp-1); text-align: left; }
.takeoff-page .refusal-head { font-weight: 700; }

.takeoff-page ol.confirm { padding-left: var(--sp-4); }
.takeoff-page ol.confirm li { margin: 0 0 var(--sp-3); overflow-wrap: anywhere; }
.takeoff-page .cfa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); margin-top: var(--sp-2); max-width: 520px; }
.takeoff-page .notes { padding-left: var(--sp-4); overflow-wrap: anywhere; }

/* P4b: the dropped lines under the table, Add a line */
.takeoff-page ul.dropped { list-style: none; padding: 0; margin: var(--sp-2) 0 var(--sp-3); }
.takeoff-page ul.dropped li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.takeoff-page ul.dropped .struck { text-decoration: line-through; color: var(--muted); min-width: 0; flex: 1 1 260px; }
.takeoff-page ul.dropped li.kept .struck { text-decoration: none; color: inherit; }
.takeoff-page .addline .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.takeoff-page .addline .field { min-width: 0; }
.takeoff-page .addline .input { width: 100%; min-width: 0; }
.takeoff-page .addline .field:last-child { grid-column: 1 / -1; }

.takeoff-page fieldset.card { min-width: 0; margin: var(--sp-3) 0; padding: var(--sp-4); }
.takeoff-page .radio { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--touch-min); }
.takeoff-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0; }
.takeoff-page .grid .field { margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; }
.takeoff-page .field.wide { grid-column: 1 / -1; }

/* ---------- P5: THE CUSTOMER VIEW STEP - LAYOUT ONLY ----------
   The staff bar, the Send sheet and the four customer pages (the mockup's
   PDF preview: letter-shaped pages on the surface token). Shell tokens and
   plain lengths only; no token defined or overridden. A page is never wider
   than the phone: the pages are fluid, the sketch scales, nothing scrolls the
   page sideways at 320/390. */
.customer-page .sendbar { min-width: 0; margin: var(--sp-3) 0; }
.customer-page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0; }
.customer-page .grid .field { margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; }
.pct { display: flex; align-items: center; gap: var(--sp-1); }
.pct .input { min-width: 0; width: 8em; }
.takeoff-page .markup { margin: var(--sp-3) 0; }
.takeoff-page .pricebox .big, .customer-page .totalline { font-weight: 800; font-variant-numeric: tabular-nums; }
.customer-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.customer-page .facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0 0; }
.customer-page .facts dt { font-weight: 700; }
.customer-page .facts dd { margin: 0; overflow-wrap: anywhere; }
.customer-page .sheet { margin: var(--sp-3) 0; overflow-wrap: anywhere; }
.customer-page .state-error { padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.customer-page .state-error p, .customer-page .done p { margin: 0 0 var(--sp-1); text-align: left; }

.customer-page .pages { display: grid; gap: var(--sp-4); justify-items: center; margin: var(--sp-3) 0; }
.pdf-page { background: var(--surface); color: var(--text); width: 100%; max-width: 640px; min-width: 0; box-shadow: var(--shadow-pop); padding: 22px 22px 14px; display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.pdf-page .phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-bottom: 2px solid var(--brand-strong); padding-bottom: 6px; margin-bottom: 10px; }
.pdf-page .mark { font-weight: 800; color: var(--brand-strong); font-size: 12px; letter-spacing: .04em; line-height: 1.2; }
.pdf-page .ptitle { text-align: right; font-size: 10px; letter-spacing: .06em; }
.pdf-page .ptitle b { display: block; font-size: 12px; color: var(--brand-strong); }
.pdf-page h4 { font-size: 11px; letter-spacing: .06em; color: var(--brand-strong); margin: 10px 0 4px; }
.pdf-page .lbl { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--brand-strong); text-transform: uppercase; }
.pdf-page .box { border: 1px solid var(--border-strong); padding: 5px 7px; margin-bottom: 6px; }
.pdf-page .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; }
.pdf-page .val { min-height: 1.3em; }
.pdf-page .big { font-size: 18px; font-weight: 800; color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.pdf-page ul { margin: 2px 0; padding-left: 16px; }
.pdf-page ul.plain { list-style: none; padding-left: 0; }
.pdf-page .inv { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 2px 8px; }
.pdf-page .inv > :nth-child(3n) { text-align: right; }
.pdf-page .sign { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 18px; }
.pdf-page .sign div { border-top: 1px solid var(--text); padding-top: 2px; font-size: 9px; letter-spacing: .06em; min-height: 26px; }
.pdf-page .sketch { margin: 6px 0; }
.pdf-page .sketch svg { display: block; width: 100%; height: auto; }
.pdf-page .pfoot { margin-top: auto; border-top: 1px solid var(--border-strong); padding-top: 5px; font-size: 9px; letter-spacing: .05em; text-align: center; }
.pdf-page .pfoot .footline { display: block; }
.pdf-page .checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-size: 11.5px; }
.pdf-page .ck::before { content: "\2610"; margin-right: 4px; }
.pdf-page .ck.on::before { content: "\2612"; }
.pdf-page .m0 { margin: 0; }

/* ---------- P6: THE QUOTES LIST AND THE QUOTE'S OWN PAGE - LAYOUT ONLY ----------
   The mockup's list shapes (one card per quote: the number and customer, the
   building, the date / pill / money line, the step links, the buttons, the
   chips) and the quote page's two tables, which scroll inside their own box.
   Shell tokens only; nothing scrolls the page sideways at 320/390. */
.qbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: end; margin: 0 0 var(--sp-2); }
.qbar .field { flex: 1 1 200px; min-width: 0; }
ul.quotes { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
ul.quotes > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--sp-4); min-width: 0; overflow-wrap: anywhere; }
ul.quotes .qhead { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
ul.quotes .eno { font-weight: 800; font-variant-numeric: tabular-nums; }
ul.quotes .who { font-weight: 700; }
ul.quotes .bld { font-size: var(--fs-sm); margin-top: 2px; }
ul.quotes .meta { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
ul.quotes .money { color: var(--text); font-variant-numeric: tabular-nums; }
.steps-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-sm); }
ul.quotes .actions, .quote-page .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.chip:disabled { color: var(--muted); background: var(--surface-2); cursor: not-allowed; }
.chip .chipnote { font-weight: 400; margin-left: var(--sp-1); font-size: var(--fs-xs); }
.rerun-note { font-size: var(--fs-xs); color: var(--muted); margin: var(--sp-2) 0 0; }
.quote-page .scroll { overflow-x: auto; max-width: 100%; margin: var(--sp-2) 0 var(--sp-3); }
.quote-page table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.quote-page th, .quote-page td { text-align: left; vertical-align: top; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); }
.quote-page td.num { text-align: right; font-variant-numeric: tabular-nums; }
.quote-page ul.files { padding-left: var(--sp-4); overflow-wrap: anywhere; }
ul.diffs { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
ul.diffs li { border-left: 3px solid var(--warn); padding-left: var(--sp-2); overflow-wrap: anywhere; }
ul.diffs p { margin: 0; }
.quote-page h2 { margin: var(--sp-4) 0 var(--sp-2); }
@media (min-width: 640px) { .quote-page table.runs td:nth-child(5) { min-width: 14em; } }
/* P-UI1 Q1: on a phone each run and each journal row is a compact card -
   date · engine · Markup · corrections, then the money line, then by; from
   to · the note · date · by. Each cell that needs its head says it (data-h,
   a ratified head word, printed before the value). */
@media (max-width: 639px) {
  .quote-page .scroll { overflow: visible; }
  .quote-page table.runs, .quote-page table.journal, .quote-page table.runs tbody, .quote-page table.journal tbody { display: block; }
  .quote-page table.runs thead, .quote-page table.journal thead { display: none; }
  .quote-page table.runs tr, .quote-page table.journal tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-2);
  }
  .quote-page table.runs td, .quote-page table.journal td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .quote-page td[data-h]::before { content: attr(data-h) " "; color: var(--muted); }
  .quote-page table.runs td.money, .quote-page table.journal td.jnote { flex-basis: 100%; }
  .quote-page table.journal td.from:empty { display: none; }
  .quote-page table.journal td.jnote:empty { display: none; }
  .quote-page table.journal td.jnote p { margin: 0; }
}

/* ---------- P7: THE FIX TICKETS TAB - LAYOUT ONLY ----------
   The Corrections table scrolls inside its own box (the mockup's wide
   table); the Tickets list is one card row each; a Taken back row is greyed
   (HQ Q33). Shell tokens only; nothing scrolls the page sideways at 320/390. */
.app-tabs .badge { margin-left: var(--sp-1); }
.tickets-page h2 { margin: var(--sp-4) 0 var(--sp-2); }
.tickets-page .legend { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.tickets-page .export-box { margin: var(--sp-2) 0 var(--sp-3); }
.tickets-page ul.exports { padding-left: var(--sp-4); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.tickets-page .scroll { overflow-x: auto; max-width: 100%; margin: var(--sp-2) 0 var(--sp-3); }
.tickets-page table.corrections { border-collapse: collapse; width: 100%; min-width: 960px; font-size: var(--fs-sm); }
.tickets-page table.corrections th, .tickets-page table.corrections td { text-align: left; vertical-align: top; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); }
.tickets-page table.corrections td.item { min-width: 16em; overflow-wrap: anywhere; }
.tickets-page table.corrections td.why { min-width: 12em; }
.tickets-page .kind { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.tickets-page .src, .tickets-page .note, .tickets-page .meta { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }
.tickets-page .mark { margin-top: var(--sp-2); min-width: 12em; }
.tickets-page .mark .actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.tickets-page ul.tickets { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tickets-page ul.tickets > li { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); min-width: 0; overflow-wrap: anywhere; }
.tickets-page ul.tickets .meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; margin: 0; }
.tickets-page ul.tickets .said { margin: var(--sp-1) 0 0; }
.tickets-page .taken-back, .tickets-page .taken-back a { color: var(--muted); }
.tickets-page .tid { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }