/* ══════════════════════════════════════════════════════════════════════════════════════════════
   [134500]  DESIGN COMPONENTS — the shared pieces every reference page in design/ is built from.

   The rule for this file: NO raw colours. Every colour is var(--q-…) from tokens.css. The guard
   (tests/suites/_design134500.js) fails the build if a hex or rgb() turns up here or in any
   design/*.html. That is what stops the reference pages drifting the way the canvas did.

   Each class is one piece you can point at on the canvas: .q-item is "SF1 - Strip Footing",
   .q-cardtotal is "Materials Total … $9,253.36". When the app is moved onto this design, these
   are the classes it should end up with — so the names are chosen to survive into the build.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* [137500] the page reset and body rule moved to ref.css: the app loads THIS file (for the pop-ups),
   and a `*{margin:0}` here would have reset every element in ATiQ. */
.num{ font-variant-numeric:tabular-nums; }   /* money and quantities line up in columns */

/* ── small caps label: TOTAL, SLAB, BUILDER, FOOTINGS · HOUSE ───────────────────────────── */
.q-caps{ font-family:var(--q-narrow); font-size:var(--q-fs-caps); font-weight:600; letter-spacing:var(--q-caps-ls);
         text-transform:uppercase; color:var(--q-quiet); }
.q-caps.is-head{ color:var(--q-head); }
.q-caps.is-xs{ font-size:var(--q-fs-capsxs); letter-spacing:1px; }

/* ── the sheet the stage sits on ────────────────────────────────────────────────────────── */
/* [139000] position + isolation so the bar-and-glow layer can sit behind everything on it */
.q-sheet{ position:relative; isolation:isolate; max-width:1020px; margin:24px auto; padding:40px 30px 40px;
          border:1px solid var(--q-sheet-bd); border-radius:6px; }

/* ── the brand bar and its glow (139000) ──────────────────────────────────────────────────────
   The printed quote's colour bar along the sheet's top edge; its colours fall down the header as
   a faint glow that drifts and breathes. Behind the content (z-index −1 inside the isolated
   sheet), clipped to the sheet's rounded top. Print: the bar, no glow (--q-halo-* are 0). */
.q-hlight{ position:absolute; left:0; right:0; top:0; height:230px; z-index:-1; overflow:hidden; border-radius:5px 5px 0 0; pointer-events:none; }
.q-hlight .bar, .q-hlight .halo{ display:block; background:var(--q-brand); background-size:200% 100%; animation:qDrift 12s ease-in-out infinite alternate; }
.q-hlight .bar{ height:6px; }
.q-hlight .halo{ height:210px; opacity:var(--q-halo-lo); -webkit-mask-image:var(--q-halo-mask); mask-image:var(--q-halo-mask);
                 animation:qDrift 12s ease-in-out infinite alternate, qBreathe 5s ease-in-out infinite alternate; }
@keyframes qDrift{ from{ background-position:0 0; } to{ background-position:100% 0; } }
@keyframes qBreathe{ from{ opacity:var(--q-halo-lo); } to{ opacity:var(--q-halo-hi); } }
body.print .q-hlight .halo{ display:none; }
body.print .q-hlight .bar{ animation:none; }
@media (prefers-reduced-motion: reduce){ .q-hlight .bar, .q-hlight .halo{ animation:none; } }

/* ── the header (139000, "header 3") ─────────────────────────────────────────────────────────
     HOUSE                                        14 Framont Ave │ STAGE TOTAL ex GST
     Footings                                  Test Building Co. │ $19,363.36
     ───────────────────────────────────────────────────────────────────────────────
     SLAB 42 m²  BEAMS 101 m  PIERS —  (CONC 20.4 m³)                 DAYS 4  MAN-DAYS 8
   The stage is the headline; the job is context beside the total; the measures and labour are
   readouts — label, figure, unit — with concrete alone in a faint pill. Replaced the 136000
   job line + pill row. */
.q-head-top{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:0 2px 28px; }
.q-head-name .q-caps{ display:block; }
.q-title{ font-size:var(--q-fs-title); font-weight:700; letter-spacing:-.4px; line-height:1.1; margin-top:3px; }
.q-head-right{ display:flex; align-items:center; gap:26px; }
.q-who{ text-align:right; font-size:var(--q-fs-job); line-height:1.5; }
.q-who .addr{ font-weight:600; color:var(--q-sub); }
.q-who .builder{ color:var(--q-quiet); }
.q-vsep{ width:1px; align-self:stretch; background:var(--q-rule-strong); }
.q-bigtotal{ text-align:right; }
.q-bigtotal > .q-caps{ display:block; line-height:14px; }   /* its own fixed line: the block's height never depends on the font (139000) */
.q-bigtotal .exgst{ text-transform:none; letter-spacing:0; color:var(--q-faint); }
.q-bigtotal b{ display:block; margin-top:4px; font-size:var(--q-fs-bigtotal); font-weight:800; letter-spacing:-.3px;
               line-height:1.1; color:var(--q-total); white-space:nowrap; }

.q-facts{ display:flex; align-items:center; gap:13px; padding:16px 2px 0; margin-bottom:60px; border-top:1px solid var(--q-rule-strong); }
.q-reads{ display:flex; align-items:center; gap:2px; margin-left:-9px; }
.q-read{ display:inline-flex; align-items:baseline; padding:4px 9px; border:1px solid transparent; border-radius:var(--q-r-pill); line-height:1.2; white-space:nowrap; }
.q-read .q-caps{ margin-right:6px; }
.q-read b{ font-size:var(--q-fs-pill); font-weight:700; letter-spacing:.2px; color:var(--q-measured); }
.q-read .u{ margin-left:2px; font-size:10.5px; font-weight:600; color:var(--q-quiet); }
.q-read.is-empty .q-caps, .q-read.is-empty b{ color:var(--q-ghost); }
.q-read.is-conc{ margin-left:6px; border-color:var(--q-conc-bd); background:var(--q-conc-tint); }
.q-read.is-filter{ cursor:pointer; }        /* Slab / Beams / Piers filter the take-off; Conc does not */
.q-read.is-on{ background:var(--q-measured-tint); border-color:var(--q-measured); }   /* the one showing (app: .sv3-pill.is-on, 136000) */
body.print .q-read.is-on{ background:none; border-color:transparent; }
.q-read.is-perm2 b{ color:var(--q-sub); }
.q-facts .q-labour{ display:flex; align-items:baseline; gap:18px; margin-left:auto; }
.q-facts .q-stat{ gap:6px; }
.q-facts .q-stat b{ font-size:var(--q-fs-labour); font-weight:700; }
.q-facts .q-vsep{ align-self:center; height:12px; }

/* labour figures in a card total (Labour Total | 4 DAYS 6 MAN-DAYS) — text, not pills */
.q-labour{ display:flex; align-items:baseline; gap:16px; }
.q-stat{ display:inline-flex; align-items:baseline; gap:5px; }
.q-stat b{ font-size:var(--q-fs-labour); font-weight:800; }
.q-stat.is-mandays b{ color:var(--q-labour); }

/* ── section title: ── TAKE-OFF ─────────────────────────────── [+] ───────────────────────── */
.q-section{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.q-section::before{ content:''; width:22px; height:3px; border-radius:var(--q-r-pill); background:var(--q-section-bar); }
.q-section h2{ font-size:var(--q-fs-section); font-weight:700; letter-spacing:var(--q-section-ls); text-transform:uppercase; }
.q-section .fade{ flex:1; height:1px; background:linear-gradient(90deg, var(--q-section-fade), transparent); }
.q-addbox{ display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:var(--q-r-btn);
           border:1px solid var(--q-add-bd); background:var(--q-add-tint); color:var(--q-add); font-size:13px; font-weight:700; line-height:1; }

/* ── card: no border, a diagonal fade is the edge. Never a card inside a card ────────────── */
.q-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--q-gap-cols); align-items:start; }
.q-stack{ display:flex; flex-direction:column; gap:28px; }
.q-card{ background:var(--q-card); border:1px solid var(--q-card-bd); border-radius:var(--q-r-card); padding:var(--q-pad-card); }

/* [140000] THE CARD ROWS AT THE POP-UP BOARDS' SCALE (canvas ②, e.g. "What's in this item",
   "Add a material", "Add a row to a labour group"): every pop-up board draws the stage's rows at
   13 / 12.5 / 16px; the stage boards on ① were copies of the app at its print units, ~19%
   smaller. One scale now — these numbers are the boards'. */

/* group heading inside a card: FOOTINGS · HOUSE / CONCRETE / LABOUR */
.q-group{ display:flex; align-items:center; gap:8px; padding:6px 4px 8px; }
.q-group .dot{ width:var(--q-dot); height:var(--q-dot); flex:0 0 auto; border-radius:50%; background:var(--q-faint); }
.q-group .q-caps{ font-size:var(--q-fs-group); letter-spacing:1.3px; }
.q-group .q-caps:not(.is-head){ color:var(--q-sub); }
.q-stack .q-group{ padding:12px 4px 5px; border-bottom:1px solid var(--q-rule); }   /* material + labour groups sit on a rule */
.q-group:not(:first-child){ margin-top:10px; }   /* a new group breathes; the first sits at the card top */

/* ── take-off ──────────────────────────────────────────────────────────────────────────── */
.q-item{ display:flex; align-items:center; gap:9px; padding:8px 6px; background:var(--q-row-hi); border-top:1px solid var(--q-rule);
         font-size:var(--q-fs-line); }
.q-tag{ flex:0 0 auto; width:46px; text-align:center; padding:1px 0; border-radius:var(--q-r-pill); border:1px solid var(--q-tag-bd);
        color:var(--q-tag); font-family:var(--q-narrow); font-size:var(--q-fs-tag); font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.q-item .name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.q-item .dims{ font-size:var(--q-fs-dims); font-weight:500; color:var(--q-quiet); }
.q-item .qty{ font-size:var(--q-fs-qty); font-weight:800; color:var(--q-measured); }
.q-unit{ width:22px; flex:0 0 auto; font-size:var(--q-fs-lunit); font-weight:700; color:var(--q-quiet); }
.q-item .check{ width:16px; flex:0 0 auto; color:var(--q-ok); font-size:var(--q-fs-lunit); }
.q-sub{ display:flex; align-items:baseline; padding:4px 6px 4px 28px; font-size:var(--q-fs-subline); color:var(--q-sub); }
.q-sub .name{ flex:1; }
.q-sub .q-unit{ width:30px; padding-left:5px; font-size:11.5px; font-weight:400; }
.q-sub::after{ content:''; flex:0 0 16px; }      /* the ✓ column, so figures line up under the item's */
.q-subhead{ display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.q-subhead::before, .q-subhead::after{ content:''; flex:1; height:1px; background:var(--q-rule-strong); }
.q-subhead .q-caps{ color:var(--q-ghost); font-weight:700; }

/* ── material schedule + labour: name · qty unit · rate · total — the same line ────────── */
.q-mat, .q-lab{ display:flex; align-items:center; padding:7px 4px 7px 14px; font-size:var(--q-fs-line); color:var(--q-text); }
.q-mat .name, .q-lab > span:first-child{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; }
.q-mat .r, .q-lab .r{ text-align:right; }
.q-mat .r:nth-of-type(2), .q-lab .r:nth-of-type(2){ width:46px; }
.q-mat .u{ width:34px; padding-left:5px; font-size:var(--q-fs-lunit); color:var(--q-quiet); }
.q-lab .r:nth-of-type(2){ margin-right:34px; }   /* labour has no unit; its columns still line up with materials' */
.q-mat .r:nth-of-type(4), .q-lab .r:nth-of-type(3){ width:74px; color:var(--q-sub); }
.q-mat .t, .q-lab .t{ width:86px; text-align:right; font-weight:700; color:var(--q-text); }
.q-edited{ width:var(--q-dot); height:var(--q-dot); flex:0 0 auto; border-radius:50%; background:var(--q-edited); }

/* card total: Materials Total … $9,253.36 / Labour Total | 4 DAYS 8 MAN-DAYS … $10,110.00 */
.q-cardtotal{ display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding:14px 8px 4px;
              border-top:1px solid var(--q-rule-strong); }
.q-cardtotal .lbl{ display:flex; align-items:baseline; gap:14px; font-size:var(--q-fs-cardlabel); font-weight:700; }
.q-cardtotal .stats{ display:inline-flex; align-items:baseline; gap:12px; padding-left:14px; border-left:1px solid var(--q-rule-strong); }
.q-cardtotal .stats .q-stat b{ font-size:11.6px; }
.q-cardtotal .stats .q-caps{ font-size:9.6px; letter-spacing:.6px; font-family:var(--q-font); }
.q-cardtotal .val{ font-size:var(--q-fs-cardtotal); font-weight:700; color:var(--q-total); }
.q-markup{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px 0; font-size:var(--q-fs-row); color:var(--q-quiet); }
.q-markup .box{ display:inline-flex; gap:3px; margin-left:8px; padding:2px 8px; border:1px solid var(--q-pill-bd); border-radius:var(--q-r-btn); color:var(--q-text); font-weight:700; }

/* ── labour: a task line, then one line per crew day under a drawn tree ─────────────────── */
.q-day{ display:flex; align-items:center; padding:5px 4px 5px 38px; position:relative; font-size:var(--q-fs-line); color:var(--q-sub); }
.q-day > span:first-child{ flex:1; }
.q-day::before{ content:''; position:absolute; left:22px; top:0; height:50%; width:9px;
                border-left:1px solid var(--q-rule-strong); border-bottom:1px solid var(--q-rule-strong); border-bottom-left-radius:6px; }
.q-day .t{ width:86px; text-align:right; font-weight:400; color:var(--q-quiet); }
.q-day .note{ margin-left:8px; font-style:italic; font-weight:400; color:var(--q-quiet); }   /* notes go on DAY lines only */

/* ── buttons ───────────────────────────────────────────────────────────────────────────── */
.q-btn{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:var(--q-r-btn);
        border:1px solid var(--q-pill-bd); background:transparent; color:var(--q-text); font:600 10.3px var(--q-font); cursor:pointer; }
.q-btn.is-primary{ background:var(--q-total-fill); border-color:transparent; color:var(--q-total-ink); }
.q-btn.is-danger{ color:var(--q-danger); }
.q-btn.is-ghost{ border-color:transparent; color:var(--q-quiet); }
.q-tools{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.q-tools .spacer{ flex:1; }

/* ══ SUMMARY PAGE ══════════════════════════════════════════════════════════════════════════ */

/* header: $ per m² is the last readout on the facts line (139000) */

/* segmented switch on the STAGES heading: All | House | External — inside the card, not under the nav */
.q-seg{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:var(--q-r-pill); border:1px solid var(--q-pill-bd); }
.q-seg button{ padding:5px 11px; border:0; border-radius:var(--q-r-pill); background:transparent; color:var(--q-quiet);
               font:700 11.5px var(--q-font); line-height:1; cursor:pointer; }
.q-seg button[aria-pressed="true"]{ background:var(--q-seg-on); color:var(--q-text); }

/* a group (HOUSE, EXTERNAL) is one card; the stages are rows in it */
.q-sgroup{ padding:12px 16px 14px; margin-bottom:14px; border-radius:16px; background:var(--q-card); border:1px solid var(--q-card-bd); }
.q-sgroup-head{ display:flex; align-items:center; gap:10px; padding:4px 6px 8px; border-bottom:1px solid var(--q-rule); }
.q-sgroup-head .q-caps{ font-size:11px; letter-spacing:1.5px; }
.q-sgroup-head .count{ font-size:11px; color:var(--q-faint); }

/* a stage row: ① Footings · measures · days · total · ▾ */
.q-srow{ display:flex; align-items:center; gap:14px; padding:12px 6px; }
.q-num{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:26px; height:26px; border-radius:50%;
        border:1px solid var(--q-rule-strong); font-size:12.5px; font-weight:700; color:var(--q-sub); }
.q-srow .name{ width:128px; font-size:15px; font-weight:600; }
.q-srow .meas{ display:flex; flex:1; }
.q-srow .days{ width:150px; text-align:right; white-space:nowrap; font-size:12px; color:var(--q-quiet); }
.q-srow .days b{ font-weight:700; color:var(--q-text); }
.q-srow .days b.md{ color:var(--q-labour); }
.q-srow .total{ width:112px; text-align:right; font-size:15px; font-weight:700; }

/* measures on a stage row are compact TEXT, not pills (decided 10 Nov). Each sits in a
   fixed-width slot so Slab / Beams / Piers / Conc start in the same place on every row */
.q-m{ display:inline-flex; align-items:center; gap:4px; flex:none; line-height:1; }
.q-m.slab{ width:76px; } .q-m.beams{ width:80px; } .q-m.piers{ width:54px; } .q-m.conc{ width:80px; }
.q-m .q-caps{ font-size:8px; letter-spacing:1.1px; color:var(--q-row-label); }
.q-m b{ font-size:11px; font-weight:600; color:var(--q-measured); }
.q-m .u{ font-size:9px; font-weight:600; color:var(--q-row-label); }
.q-m.is-empty .q-caps, .q-m.is-empty b{ color:var(--q-row-empty); font-weight:400; }

/* stages are OPEN by default; the ☰ on STAGES folds all of them at once (138500 — was a ▾ per stage) */
.q-compact{ padding:0; cursor:pointer; font-family:inherit; }
.q-compact.is-on{ border-color:var(--q-add); }
.is-compact .q-hang{ display:none; }

/* the items under an open stage: a quiet list hanging off the row, like the V3 item check */
.q-hang{ margin:0 44px 8px 46px; padding:2px 0 4px 16px; border-left:1px solid var(--q-rule-strong); }
.q-hang .q-caps{ display:block; padding:2px 0 4px; font-size:var(--q-fs-capsxs); letter-spacing:1px; }
.q-hrow{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12.5px; }
.q-hrow .name{ flex:1; color:var(--q-sub); }
.q-hrow .dims{ font-size:11px; color:var(--q-quiet); }
.q-hrow b{ font-weight:700; color:var(--q-measured); }
.q-hrow .q-unit{ width:26px; font-size:11.5px; font-weight:400; }
.q-hrow .q-tag{ font-size:9px; }

/* group total: House total | 8 DAYS 21 MAN-DAYS … $40,451.52 — no line above it */
.q-gtotal{ display:flex; justify-content:space-between; align-items:baseline; padding:20px 6px 4px; }
.q-gtotal .lbl{ display:flex; align-items:baseline; gap:18px; font-size:14px; font-weight:700; }
.q-gtotal .stats{ display:inline-flex; align-items:baseline; gap:16px; padding-left:18px; border-left:1px solid var(--q-rule-strong); }
.q-gtotal .stats b{ font-size:13px; font-weight:700; }
.q-gtotal .stats .q-caps{ font-size:9.5px; letter-spacing:.8px; }
.q-gtotal .val{ font-size:17px; font-weight:800; color:var(--q-total); }

/* ── print drops everything you can click ──────────────────────────────────────────────── */
body.print .q-addbox, body.print .q-tools, body.print .q-item .check,
body.print .q-seg{ display:none; }
/* [142000] the old `body.print .is-compact .q-hang{display:block}` is gone: paper prints what the screen
   shows. Collapsed on screen prints collapsed; expanded prints the take-off (James, 10 Nov). */


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   [142000] THE CANVAS'S APPROVED BOARDS, 10 NOV — every change James made on ① and ② that night.
   Each rule says which comment it came from. Two scopes, on purpose:
     · body:not(.print)  — screen only. The printed A4 page is its own approved design and is
                           pinned (tests/fixtures/print-stage.json); these sizes were decided on
                           the screen boards and must not reach paper.
     · no scope          — the same in every mode (what shows, what hides, the summary's layout).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── stage: the sheet, and light mode taken from print (tokens.css body.light) ──────────── */
.q-sheet{ background:var(--q-sheet); }   /* white in light — the A4 sheet, not the page around it */
body:not(.print) .q-sheet{ box-sizing:border-box; width:1020px; max-width:none; min-height:1443px; }   /* the app's sheet: A4 at screen size */
/* the site address and builder brighter: address in the text colour, builder in sub-grey */
body:not(.print) .q-who .addr{ color:var(--q-text); }
body:not(.print) .q-who .builder{ color:var(--q-sub); }

/* ── stage: spacing ─────────────────────────────────────────────────────────────────────── */
body:not(.print) .q-cols .q-section{ margin-bottom:22px; }               /* the stage page: a section title to its card, 10 → 22 */
body:not(.print) .q-stack .q-group:not(:first-child){ margin-top:0; padding-top:12px; }   /* above CONCRETE, STEEL…: 22 → 12 */
body:not(.print) .q-stack .q-group:first-child{ padding-top:4px; }      /* the first heading: 14px from the card top (10 + 4) */
body:not(.print) .q-sub + .q-item{ margin-top:8px; }                    /* each item reads as a block */

/* ── stage: the line sizes (sub-rows 11, material + labour lines 11, tighter) ─────────────── */
body:not(.print) .q-sub, body:not(.print) .q-sub .q-unit{ font-size:11px; }
body:not(.print) .q-mat, body:not(.print) .q-mat .u, body:not(.print) .q-lab, body:not(.print) .q-day{ font-size:11px; }
body:not(.print) .q-mat, body:not(.print) .q-lab{ padding-top:5px; padding-bottom:5px; }
body:not(.print) .q-day{ padding-top:4px; padding-bottom:4px; }

/* ── stage: the item line on two rows — option A4 ───────────────────────────────────────────
   the name on its own line, its sizes under it in grey, so a long size never cuts the name off.
   name 12 · sizes 10 · figure 14 · unit 11. The tag sits level with the name; the figure, unit
   and chip stay centred on the two-line row. */
body:not(.print) .q-item{ font-size:12px; padding-top:7px; padding-bottom:7px; align-items:flex-start; }
body:not(.print) .q-item .q-tag{ margin-top:1px; }
body:not(.print) .q-item .name{ display:flex; flex-direction:column; justify-content:center; gap:2px; white-space:normal; overflow:visible; line-height:1.25; }
body:not(.print) .q-item .name .dims{ display:block; font-size:10px; font-weight:400; line-height:1.3; color:var(--q-quiet); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:not(.print) .q-item .qty{ font-size:14px; }
body:not(.print) .q-item > .q-unit{ font-size:11px; }
body:not(.print) .q-item .qty, body:not(.print) .q-item > .q-unit, body:not(.print) .q-item .ic-b{ align-self:center; }

/* ── stage: the changed-by-hand dot hangs in the margin, so material names keep one left edge ── */
body:not(.print) .q-mat .name{ position:relative; }
body:not(.print) .q-mat .name .q-edited{ position:absolute; left:-10px; top:50%; margin-top:calc(var(--q-dot) / -2); }

/* ── stage: the plan-tag button (James's icon), on the TOP heading of each take-off card ─────
   grey until a plan is tagged, pink once it is; never on paper */
.q-group .q-plantag{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:23px; height:12px; overflow:visible;
  padding:0; border:0; background:none; color:var(--q-quiet); cursor:pointer; }
.q-group .q-plantag svg{ width:100%; height:100%; display:block; }
.q-group .q-plantag.is-tagged, .q-group .q-plantag:hover{ color:var(--q-tagged); }
body.print .q-plantag{ display:none; }

/* ── stage: the check chip — one on EVERY take-off row, item and sub-item ──────────────────
   ✓ green: the concrete matches the size in the name · ! amber: it does not · ✓ grey: nothing to
   compare (no size in the name, or no concrete). Pressing it opens "What's in this item"
   (popups.html 10) for that row only. Never on paper. */
.ic-b{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border-radius:6px; border:1px solid var(--q-rule-strong); background:transparent;
  font:700 11px/1 var(--q-font); color:var(--q-quiet); cursor:pointer; }
.ic-b.is-ok{ color:var(--q-ok); border-color:var(--q-ok-bd); }
.ic-b.is-bad{ color:var(--q-warn); border-color:var(--q-warn-bd); background:var(--q-warn-tint); font-size:12px; font-weight:900; }
.ic-b.on{ background:var(--q-row-hi); box-shadow:inset 0 0 0 1px currentColor; }
.q-sub .ic-b{ margin-left:6px; width:18px; height:18px; }
.q-sub.ic-subrow{ align-items:center; }
.q-sub.ic-subrow::after{ display:none; }
body.print .ic-b{ display:none; }

/* ── stage: COLLAPSED, the default (☰ on) ────────────────────────────────────────────────────
   every item and every sub-item stays, each with its chip; only an item's own material lines fold
   away. Paper prints whichever the screen shows. */
.is-tk-compact .q-sub:not(.ic-subrow){ display:none; }
.is-tk-compact .q-sub + .q-item{ margin-top:0; }

/* ── summary ───────────────────────────────────────────────────────────────────────────────── */
.q-stagelist{ padding-top:8px; }   /* STAGES (and its All | House | External) to the first group: 10 → 18 */

/* the group header is option B: HOUSE · 2 stages ……… 8 DAYS 21 MAN-DAYS   $40,451.52.
   Days + man-days end where the CONC column ends; the group total sits in the price column at the
   stage totals' size. There is no total row at the bottom of the card any more. */
.q-sgroup-head{ gap:14px; padding:6px 6px 12px; border-bottom:1px solid var(--q-rule-strong); }
.q-sgroup-head > .q-caps.is-head{ font-size:13px; letter-spacing:1.6px; }
.q-sgroup-head .count{ position:relative; top:-1.5px; font-size:11px; }   /* optical: lowercase beside caps sat 1.9px low */
.q-sgroup-head .meas{ display:flex; flex:1; justify-content:flex-end; margin-right:26px; }
.q-sgroup-head .stats{ display:inline-flex; align-items:baseline; gap:16px; }
.q-sgroup-head .stats b{ font-size:12px; font-weight:700; }
.q-sgroup-head .stats .q-caps{ font-size:9px; letter-spacing:.8px; }
.q-sgroup-head .total{ width:112px; text-align:right; font-size:15px; font-weight:800; color:var(--q-total); }

/* a stage line: no days / man-days (the group header carries them). The measures sit on the right,
   next to the stage total, as four fixed 78px columns 10px apart, so they line up stage to stage */
.q-srow .meas{ flex:1; justify-content:flex-end; gap:10px; margin-right:26px; }
.q-m.slab, .q-m.beams, .q-m.piers, .q-m.conc{ width:78px; }

/* four sizes in the whole card, each with one job:
     15  the stage line and the money · 12  figures and rows · 11  secondary text · 9  small caps */
.q-srow .q-num, .q-m b{ font-size:12px; }
.q-m .u{ font-size:11px; }
.q-m .q-caps{ font-size:9px; }

/* the take-off under a stage is option D2: an inset band holding a small table with no headings —
   item (its code bold) · size · qty */
.q-hang.q-tktbl{ margin:0 6px 10px 46px; padding:2px 12px; border:0; border-radius:8px; background:var(--q-tk-band); }
.q-tkrow{ display:grid; grid-template-columns:200px 1fr 90px; gap:12px; align-items:baseline; padding:5px 0; border-top:1px solid var(--q-rule); font-size:11px; color:var(--q-sub); }
.q-tkrow:first-child{ border-top:0; }
.q-tkrow .code{ font-weight:700; color:var(--q-text); }
.q-tkrow .dims{ font-size:10px; color:var(--q-quiet); }
.q-tkrow .r{ text-align:right; }
.q-tkrow .r b{ color:var(--q-measured); font-weight:700; }
.q-tkrow .u{ font-size:10px; color:var(--q-row-label); }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   [145000]  THE 11 NOV CANVAS ROUND, as approved (canvas Pop-ups 25–30 and the stage page).
   ════════════════════════════════════════════════════════════════════════════════════════════ */
/* 26 · take-off rows A — a soft 8px band with no rule along its top, 6px wider than the text each side
   (into the card's own padding: the card does not grow); the type pill just left of the measure;
   sub-lines 18px in; 14px after an item's last line, 8px between items when compacted */
/* the extra 6px is an outside shadow in the band's own colour — it paints only outside the box, so
   nothing inside moves and the item's box (what the guards measure from) is where it was. The app
   draws it the same way. */
body:not(.print) .q-item{ border-radius:8px; border-top-color:transparent; box-shadow:-6px 0 0 0 var(--q-row-hi), 6px 0 0 0 var(--q-row-hi); }
body:not(.print) .q-item .name{ order:1; }
body:not(.print) .q-item .q-tag{ order:2; margin-left:8px; align-self:center; margin-top:0; position:relative; }
body:not(.print) .q-item .qty{ order:3; }
body:not(.print) .q-item > .q-unit{ order:4; }
body:not(.print) .q-item .ic-b, body:not(.print) .q-item .check{ order:5; }
body:not(.print) .q-sub{ padding-left:18px; }
body:not(.print) .q-sub + .q-item, body:not(.print) .q-sub + .q-subhead + .q-item{ margin-top:14px; }
body:not(.print) .is-tk-compact .q-item + .q-item, body:not(.print) .is-tk-compact .q-sub + .q-item{ margin-top:8px; }
/* 29 · a changed item: the green dot centred in the gap left of the pill, out of flow */
.q-tag > .q-edited{ position:absolute; left:-6.5px; top:50%; width:var(--q-dot); height:var(--q-dot); margin:calc(var(--q-dot) / -2) 0 0 calc(var(--q-dot) / -2); border-radius:50%; background:var(--q-edited); }
/* 27 · open / compact — unfold more while compacted (press to open), unfold less while open */
.q-compact svg{ width:13px; height:13px; display:block; }
.q-compact.is-on .i-less, .q-compact:not(.is-on) .i-more{ display:none; }
.q-compact.is-on{ border-color:var(--q-add-bd); }
.q-addbox{ transition:background .15s, border-color .15s; }
.q-addbox:hover{ border-color:var(--q-add); background:color-mix(in srgb, var(--q-add) 16%, transparent); }
/* stage page · an unused labour line (quantity 0, card open): the whole row ghost grey */
.q-lab.is-zero > span, .q-lab.is-zero .r, .q-lab.is-zero .t{ color:var(--q-ghost); }
.q-lab.is-zero .t{ font-weight:400; }
.q-group.is-zero .q-caps.is-head{ color:var(--q-ghost); }
/* 28–30 · crossed out: a take-off item, its lines, or a line whose material is crossed out */
.q-item.is-deleted > span, .q-item.is-deleted > .ic-b{ opacity:.4; }
.q-item.is-deleted .name, .q-item.is-deleted .qty{ text-decoration:line-through; }
.q-sub.is-deleted > span{ opacity:.4; text-decoration:line-through; }
/* 02 · a line you added: the hollow lime ring in the margin before its name */
.q-mat .q-added{ position:absolute; left:-10px; top:50%; width:var(--q-dot); height:var(--q-dot); margin-top:calc(var(--q-dot) / -2); box-sizing:border-box; border-radius:50%; border:1px solid var(--q-edited); }
/* [146000] the take-off item row's point of truth (canvas Pop-ups 31): a name is ONE line, its sizes
   inline after it, cut with … — hover shows the whole name in the app. Paper prints it whole. */
body:not(.print) .q-item{ align-items:center; }
body:not(.print) .q-item .name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:not(.print) .q-item .name .dims{ display:inline; margin-left:4px; }