/* ══════════════════════════════════════════════════════════════════════════════════════════════
   [135000]  POP-UPS & EDIT STATES — the four families, built once.

   Every pop-up on the quote screens is one of four families. They are built here ONCE as shared
   classes, never per pop-up, because body-level UI does not inherit quote-print.css (it is scoped
   to .quote-view). That scoping has already produced raw browser buttons on a dark dialog once.

     .q-modal    takes over the screen. Only for something you must answer, or several fields
     .q-panel    floats beside what opened it, closes on click-away
     .q-field    INLINE: the row itself becomes the editor (plus .q-editstrip for Save / Cancel)
     .q-undo     one line pinned under the row that changed — never a toast at the screen bottom

   Same rule as base.css: tokens only, no raw colours. Loaded after tokens.css and base.css —
   by the reference pages AND by the app (index.html, since 137500), so this file is the one
   definition of how a pop-up looks.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* [137500] IN THE APP. A pop-up on <body> inherits ATiQ's body font and whatever margins the
   browser gives an h3 or a p. So each family root sets its own font, and resets ONLY its own
   insides — :where() keeps that reset at zero specificity, so every rule below still wins. */
.q-scrim, .q-panel, .q-undo{ font-family:var(--q-font); color:var(--q-text); -webkit-font-smoothing:antialiased; }
:where(.q-scrim, .q-panel, .q-undo) *,
:where(.q-scrim, .q-panel, .q-undo) *::before,
:where(.q-scrim, .q-panel, .q-undo) *::after{ box-sizing:border-box; margin:0; padding:0; }
:where(.q-scrim, .q-panel) button{ font-family:inherit; cursor:pointer; }
/* the real modal backdrop: fixed over the whole app (.q-scrimbox below is the reference page's
   in-page stand-in for it) */
.q-scrim{ position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:16px;
          background:var(--q-scrim); }

/* ── INLINE EDIT ────────────────────────────────────────────────────────────────────────────
   THE rule: editing never changes size. The ring is drawn AROUND the text with a negative
   margin equal to its padding, so the text keeps its own font, size, weight and colour, and the
   row keeps its height. Nothing wraps, nothing jumps. One helper for every inline edit. */
.q-field{ display:inline-block; padding:2px 4px; margin:-3px -5px; border:1px solid var(--q-input-bd); border-radius:4px;
          background:var(--q-input-bg); font:inherit; color:inherit; line-height:inherit; min-width:0; }
.q-field.r{ text-align:right; }
.q-field .caret{ display:inline-block; width:1px; height:1em; margin-left:1px; vertical-align:-.12em; background:currentColor;
                 animation:q-blink 1s steps(1) infinite; }
@keyframes q-blink{ 50%{ opacity:0; } }
.q-editrow{ background:var(--q-row-hi); }
/* the name field takes the whole name column, as on the board; number fields hug their figure */
.q-editrow .name > .q-field, .q-lab.q-editrow > span:first-child > .q-field{ display:block; flex:1; }
.q-editrow .r > .q-field, .q-editrow .u > .q-field{ min-width:28px; }
.q-editstrip{ display:flex; align-items:center; gap:10px; padding:8px 8px 6px; font-size:9.5px; color:var(--q-faint); }
.q-editstrip .spacer{ flex:1; }

/* the + that appears on a group heading only while you hover that heading */
.q-group .q-addbox{ margin-left:auto; width:15px; height:15px; font-size:11px; opacity:0; }
.q-group:hover .q-addbox, .q-group.is-hover .q-addbox{ opacity:1; }

/* ── UNDO BAR ───────────────────────────────────────────────────────────────────────────────
   Pinned directly under the row it is about, with a notch pointing at it. Always offers Undo. */
.q-undo{ position:relative; display:inline-flex; align-items:center; gap:10px; margin:6px 0 4px 8px; padding:6px 6px 6px 12px;
         border-radius:9px; background:var(--q-surface); border:1px solid var(--q-surface-bd); box-shadow:var(--q-shadow);
         font-size:11px; color:var(--q-sub); }
.q-undo::before{ content:''; position:absolute; top:-5px; left:16px; width:8px; height:8px; transform:rotate(45deg);
                 background:var(--q-surface); border-left:1px solid var(--q-surface-bd); border-top:1px solid var(--q-surface-bd); }
.q-undo .timer{ width:34px; height:3px; border-radius:2px; background:var(--q-rule-strong); overflow:hidden; }
.q-undo .timer i{ display:block; width:60%; height:100%; background:var(--q-quiet); }
.q-struck{ background:var(--q-danger-tint); color:var(--q-faint); text-decoration:line-through; }
.q-struck .t{ color:var(--q-faint); }

/* ── PANEL ──────────────────────────────────────────────────────────────────────────────────
   Anchored to its trigger, closes on click-away, rows highlight on hover. */
.q-panel{ border-radius:var(--q-r-panel); background:var(--q-surface); border:1px solid var(--q-surface-bd); box-shadow:var(--q-shadow);
          padding:12px; font-size:13px; }
.q-panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:2px 6px 8px; }
.q-panel-head .hint{ font-size:11px; color:var(--q-faint); }
.q-prow{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:8px; }
.q-prow:hover, .q-prow.is-on{ background:var(--q-hover); }
.q-prow .name{ flex:1; min-width:0; font-weight:600; }
.q-prow .name .u{ font-weight:400; color:var(--q-quiet); }
.q-prow .sub{ display:block; margin-top:2px; font-size:11px; font-weight:400; color:var(--q-quiet); }
.q-prow .sub b{ color:var(--q-labour); font-weight:600; }
.q-prow .val{ font-weight:600; }
.q-prow.is-off{ color:var(--q-faint); }
.q-prow.is-off .q-numpill{ color:var(--q-faint); }
.q-pgroup{ display:flex; align-items:center; gap:10px; padding:10px 8px 4px; }
.q-pgroup::after{ content:''; flex:1; height:1px; background:var(--q-rule); }
.q-numpill{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; border-radius:50%;
            border:1px solid var(--q-rule-strong); font-size:12px; font-weight:700; color:var(--q-sub); }
.q-prow.is-on .q-numpill{ border-color:var(--q-measured); background:var(--q-measured-tint); color:var(--q-text); }

/* ── MODAL ──────────────────────────────────────────────────────────────────────────────────
   Dimmed page, centred. Caps eyebrow + 19px title. Actions bottom-right: lime primary on the far
   right, Cancel left of it, destructive pushed far left. */
.q-scrimbox{ position:relative; display:flex; align-items:center; justify-content:center; padding:36px 16px; border-radius:var(--q-r-card);
             background:var(--q-scrim); }
.q-modal{ width:440px; max-width:100%; border-radius:var(--q-r-modal); background:var(--q-surface); border:1px solid var(--q-surface-bd);
          box-shadow:var(--q-shadow); font-size:13px; }
.q-modal.is-wide{ width:470px; }
.q-modal-body{ padding:22px 22px 16px; }
.q-modal-body .q-caps{ display:block; }
.q-modal h3{ margin:6px 0 12px; font-size:19px; font-weight:700; letter-spacing:-.2px; }
.q-modal p{ line-height:1.55; color:var(--q-sub); }
.q-modal-foot{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--q-rule); }
.q-modal-foot .spacer{ flex:1; }
/* [143000] a locked modal's quiet footer line — "Esc does nothing, one has to be picked" (board 20) */
.q-modal-note{ font-size:11.5px; color:var(--q-faint); margin-left:8px; }
.q-hintbox{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:11px 14px; border-radius:10px;
            border:1px dashed var(--q-rule-strong); color:var(--q-quiet); font-size:12px; }
.q-hintbox b{ color:var(--q-text); font-weight:600; }
.q-divide{ height:1px; margin:16px 0; background:var(--q-rule); }
.q-modal-err{ margin-top:12px; color:var(--q-danger); font-size:12px; }   /* an action that threw says so in the modal */

/* modal-size buttons (the in-card .q-btn is smaller on purpose) */
.q-btn[hidden]{ display:none; }   /* [137500] .q-btn is inline-flex, which would otherwise beat the attribute */
.q-btn.is-lg{ height:28px; padding:0 14px; font-size:13px; border-radius:8px; }
.q-btn.is-danger{ border-color:var(--q-danger-bd); }
.q-btn.is-add{ border-color:var(--q-add-bd); color:var(--q-add); }
.q-btn.is-ghost.is-danger{ border-color:transparent; color:var(--q-danger); }   /* Delete as red text, no box */

/* stepper: − n + in a pill. Men, days, crew per day */
.q-fields{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.q-fields > div{ display:flex; flex-direction:column; gap:7px; }
.q-step{ display:inline-flex; align-items:center; gap:14px; height:32px; padding:0 12px; border-radius:var(--q-r-pill);
         border:1px solid var(--q-pill-bd); font-size:15px; font-weight:700; }
.q-step i{ font-style:normal; font-weight:500; color:var(--q-quiet); }
.q-step i.plus{ color:var(--q-add); }
/* [137500] in the app the − and + are real buttons and the figure a real field (a half day can be
   typed). They take the look above and nothing of the browser's: no box, no spinner. */
.q-step button{ border:0; background:none; padding:0; font:inherit; font-weight:500; color:var(--q-quiet); line-height:1; cursor:pointer; }
.q-step button.plus{ color:var(--q-add); }
.q-step button:disabled{ color:var(--q-ghost); cursor:default; }
.q-step input, .q-money input{ min-width:0; border:0; background:none; padding:0; font:inherit; color:inherit; text-align:center; }
.q-step input{ width:3ch; }
.q-money input{ flex:1; width:5ch; text-align:left; }   /* width: a number input is ~150px by default, which pushed the field past min-width */
.q-step input:focus, .q-money input:focus{ outline:none; }
.q-step:focus-within, .q-money:focus-within{ border-color:var(--q-input-bd); }
.q-money input::-webkit-inner-spin-button, .q-money input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.q-money input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
button.q-dayadd, button.q-link-add{ font:inherit; cursor:pointer; }
button.q-dayadd{ font-weight:600; }
button.q-dayadd:disabled{ opacity:.4; cursor:default; }
button.q-link-add{ border:0; background:none; padding:0; font-size:12px; }
.q-step.is-sm{ height:auto; gap:6px; padding:0 6px; font-size:inherit; border-color:var(--q-input-bd); }
.q-money{ display:inline-flex; align-items:center; gap:4px; height:32px; min-width:200px; padding:0 14px; border-radius:var(--q-r-pill);
          border:1px solid var(--q-input-bd); font-size:15px; font-weight:700; }
.q-money i{ font-style:normal; font-weight:400; color:var(--q-quiet); }
.q-dayadd{ display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:var(--q-r-pill); border:1px solid var(--q-add-bd);
           background:var(--q-add-tint); color:var(--q-add); font-weight:600; }
.q-figures{ display:flex; align-items:flex-end; gap:34px; }
.q-figures > div{ display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:700; }
.q-figures .md{ color:var(--q-labour); }
.q-figures .total{ margin-left:auto; text-align:right; }
.q-figures .total b{ font-size:20px; font-weight:800; color:var(--q-total); }
.q-link-add{ display:inline-block; margin-top:12px; font-size:12px; color:var(--q-add); }

/* ── ITEM CHECK (approved V3): concrete check, then a Steel & sundries table ──────────────── */
/* [142000] 10 · WHAT'S IN THIS ITEM, as approved on the canvas 10 Nov (was .q-check, the V3 list).
   The rule on the left starts at the first heading and stops at the last line: the panel's space
   is its margin, not its padding. */
.ic-panel{ margin:12px 0 22px 28px; padding:0 0 0 14px; border-left:1px solid var(--q-rule-strong); }
.ic-ph{ display:flex; align-items:baseline; gap:10px; padding-bottom:8px; }
.ic-ph .q-caps{ font-size:9px; }
.ic-ph .q-caps.is-head{ color:var(--q-add); }
.ic-cmp{ display:flex; gap:26px; padding:2px 0 0; }
.ic-cmp > span{ display:inline-flex; flex-direction:column; gap:2px; }
.ic-cmp .q-caps{ font-size:9px; color:var(--q-faint); }
.ic-cmp b{ font-size:12px; font-weight:700; color:var(--q-text); }
.ic-cmp b.says{ font-weight:500; color:var(--q-sub); }
.ic-cmp b.says.is-dash{ color:var(--q-faint); }
.ic-cmp b.is-ok{ color:var(--q-ok); } .ic-cmp b.is-warn{ color:var(--q-warn); }
.ic-split{ height:1px; background:var(--q-rule); margin:12px 0 10px; }
.ic-grid{ display:grid; grid-template-columns:112px 60px 72px 1fr; column-gap:12px; align-items:baseline; padding:6px 0; font-size:11px; color:var(--q-sub);
          font-variant-numeric:tabular-nums; border-top:1px solid var(--q-rule); }
.ic-grid.is-head{ padding:0 0 5px; border-top:0; } .ic-grid.is-head .q-caps{ font-size:9px; color:var(--q-faint); }
.ic-grid b{ font-weight:700; color:var(--q-text); }
.ic-grid .sz{ color:var(--q-text); } .ic-grid .sp{ color:var(--q-quiet); white-space:nowrap; }
.ic-panel > .ic-grid:last-child{ padding-bottom:0; }

/* ── ITEM TOOLS: the strip under an item being edited ──────────────────────────────────────── */
.q-itemtools{ display:flex; align-items:center; gap:8px; padding:7px 6px 7px 60px; }
.q-itemtools .spacer{ flex:1; }

/* ── FIND SIMILAR: list on the left, the chosen stage on the right ─────────────────────────── */
.q-sim{ padding:0; font-size:13px; }
.q-sim-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 10px; }
.q-sim-head .hint{ font-size:11.5px; color:var(--q-faint); }
.q-sim-head .x{ margin-left:auto; color:var(--q-quiet); }
.q-sim-filters{ display:flex; align-items:center; gap:8px; padding:0 18px 12px; border-bottom:1px solid var(--q-rule); }
.q-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--q-r-pill); border:1px solid var(--q-pill-bd); }
.q-chip .n{ font-size:10px; color:var(--q-quiet); }
.q-search{ flex:1; padding:6px 12px; border-radius:var(--q-r-pill); border:1px solid var(--q-pill-bd); color:var(--q-faint); font-size:12px; }
.q-sim-body{ display:grid; grid-template-columns:270px minmax(0,1fr); }
.q-sim-list{ padding:10px; border-right:1px solid var(--q-rule); }
.q-sim-list .q-prow{ align-items:flex-start; }
.q-pct{ flex:none; padding:3px 7px; border-radius:var(--q-r-pill); border:1px solid var(--q-pill-bd); font-size:11px; font-weight:700; color:var(--q-sub); }
.q-prow.is-on .q-pct{ border-color:var(--q-measured); background:var(--q-measured-tint); color:var(--q-text); }
.q-sim-list .name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* long addresses truncate in the list */
.q-sim-detail{ padding:12px 20px 18px; }
.q-sim-detail h4{ margin:2px 0 6px; font-size:16px; font-weight:700; }
.q-sim-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--q-sub); }
.q-sim-meta .bar{ width:1px; height:12px; background:var(--q-rule-strong); }
.q-cmprow{ display:grid; grid-template-columns:minmax(0,1fr) 80px 80px 70px; gap:8px; align-items:baseline; padding:4px 0; }
.q-cmprow .r{ text-align:right; } .q-cmprow .u{ font-size:10px; color:var(--q-quiet); }
.q-delta{ justify-self:end; padding:1px 7px; border-radius:var(--q-r-pill); background:var(--q-row-hi); font-size:11px; font-weight:700; color:var(--q-sub); }
.q-nil{ justify-self:end; color:var(--q-ghost); }

/* [142000] 04 · EDIT AND DELETE A LINE (canvas board 17): the quick × and Restore sit over the end
   of the line, shown on hover; nothing moves. A struck line keeps its place and its total. */
.q-mat.has-qdel, .q-mat.is-deleted{ position:relative; }
.q-qdel{ position:absolute; right:2px; top:50%; transform:translateY(-50%); display:none; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border:1px solid var(--q-danger); border-radius:6px; background:var(--q-danger);
  color:var(--q-on-danger); font:700 13px/1 var(--q-font); cursor:pointer; }
.q-mat.has-qdel:hover .q-qdel, .q-mat.has-qdel.is-hover .q-qdel{ display:inline-flex; }
.q-mat.has-qdel:hover, .q-mat.has-qdel.is-hover{ background:var(--q-row-hi); }
/* [145000] each part at 40% of ITS OWN colour, struck — the canvas's `opacity:.4`, not one flat grey.
   This said var(--q-ghost) until 145000 while every board said .4: the app was built to this file, so
   the drift could not be seen from here (James, 11 Nov: "its been missed before"). */
.q-mat.is-deleted > span{ opacity:.4; text-decoration:line-through; }
.q-restore{ display:none; position:absolute; right:2px; top:50%; transform:translateY(-50%); height:20px; padding:0 9px; border-radius:var(--q-r-pill);
  border:1px solid var(--q-rule-strong); background:var(--q-surface); color:var(--q-text); font:600 10.5px/1 var(--q-font); cursor:pointer; }
.q-mat.is-deleted:hover .q-restore, .q-mat.is-deleted.is-hover .q-restore{ display:inline-flex; align-items:center; }
.q-editstrip .hint{ font-size:10.5px; color:var(--q-faint); }
.q-editstrip .q-btn.is-danger{ color:var(--q-danger); border:1px solid var(--q-danger-bd); background:var(--q-danger-tint); }
body.print .q-qdel, body.print .q-restore{ display:none; }
/* 11 · the sizes field sits under the name, at the sizes' size and colour */
.q-item.q-editrow .name{ display:flex; flex-direction:column; gap:4px; }
.q-item.q-editrow .name .dims .q-field{ font-size:10px; font-weight:400; color:var(--q-quiet); }
/* 08 · the crew figure edited in place; − / + before the amount */
.q-day .q-step.is-sm{ margin-right:10px; }

/* [142000] the panel's lines are a FIXED height and its two figures sit in fixed-width columns, so the
   panel lays out the same on any machine's fonts (CI's runner has Archivo from Google; this container
   has neither, and the rows drifted 4–8px apart there) */
.ic-ph{ line-height:12px; } .ic-cmp .q-caps{ line-height:12px; } .ic-cmp b{ line-height:16px; }
.ic-cmp > span{ min-width:64px; } .ic-grid{ line-height:14px; }