/* Raptool Check — admin-only styles on top of shared/theme.css */

/* login ------------------------------------------------------------------ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.login-card { width: 100%; max-width: 380px; }
.login-wrap > div { width: 100%; max-width: 380px; }             /* v5.0: every login card the same width */
.login-wrap > div:has(.picker-card) { max-width: 420px; }
.login-brand {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-bottom: 22px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
}
.login-brand .mark { width: 30px; height: 30px; }
.login-foot { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-3); }
.login-demo { margin-top: 14px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--radius-s); font-size: 12px; color: var(--text-2); }
.login-demo b { color: var(--text); font-weight: 500; }
/* v5.0 Raptool Account: the small line, the links, the not-set-up notice and the company picker */
.login-account { margin: 0 0 14px; font-size: 12.5px; color: var(--text-2); text-align: center; }
.login-links { margin-top: 12px; text-align: center; font-size: 12.5px; }
.login-links a, .login-foot a { color: var(--accent); text-decoration: none; }
.login-links a:hover, .login-foot a:hover { text-decoration: underline; }
.login-sep { margin: 0 8px; }
.login-notice { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.4; }
.login-notice svg { flex: none; margin-top: 1px; }
.picker-card { max-width: 420px; }
.picker-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.ws-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.ws-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: border-color .12s, background .12s; }
.ws-item:hover, .ws-item:focus-visible { border-color: var(--accent-line); background: var(--accent-soft); outline: none; }
.ws-item > svg { color: var(--text-3); flex: none; }
.ws-mark { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sidebar-bg); color: #4f9df2; font-weight: 600; font-size: 15px; }
.ws-item[data-kind="staff"] .ws-mark, .ws-item[data-kind="internal"] .ws-mark { background: var(--warn-soft); color: var(--warn); }
.ws-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ws-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-role { font-size: 12px; color: var(--text-3); }
/* the strips above the page: Raptool support signed in, sign-in notices */
.acct-banner { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-size: 13px; border-bottom: 1px solid var(--border);
  background: var(--warn-soft); color: var(--warn); }
.acct-banner a { color: inherit; font-weight: 600; }
.acct-banner .spacer { flex: 1; }
.acct-banner.is-support { background: #4b2a83; color: #fff; border-bottom-color: #3a1f68; }
.acct-banner.is-support .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.25); }
.acct-banner-reason { opacity: .85; }
.acct-links { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-links a { color: rgba(255,255,255,.6); text-decoration: none; }
.acct-links a:hover { color: #fff; text-decoration: underline; }
/* Settings > Raptool Hub */
.hub-state { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; }
.hub-state dt { color: var(--text-2); }
.hub-state dd { margin: 0; }
.hub-test-msg { margin-top: 10px; font-size: 13px; padding: 9px 11px; border-radius: var(--radius-s); background: var(--surface-2); }
.hub-test-msg.is-ok { background: var(--ok-soft); color: var(--ok); }
.hub-test-msg.is-bad { background: var(--bad-soft); color: var(--bad); }

/* command palette --------------------------------------------------------- */
.palette-wrap { position: fixed; inset: 0; z-index: 150; background: rgba(9,15,23,.4); display: flex; justify-content: center; padding-top: 12vh; }
.palette { width: 100%; max-width: 560px; height: fit-content; max-height: 60vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; }
.palette input { border: none; border-bottom: 1px solid var(--border); border-radius: 0; height: 48px; font-size: 15px; padding: 0 16px; }
.palette input:focus { box-shadow: none; }
.palette-list { overflow: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-s); cursor: pointer; font-size: 13px; }
.palette-item:hover, .palette-item.is-on { background: var(--surface-2); }
.palette-item .kind { margin-left: auto; font-size: 11px; color: var(--text-3); }

/* dashboard --------------------------------------------------------------- */
.chart-card .card-body { padding: 12px 8px 8px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding: 0 8px; }
.bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; position: relative; }
.bars .seg { border-radius: 2px 2px 0 0; min-height: 1px; }
.bars .seg.checks { background: var(--accent); }
.bars .seg.devs   { background: var(--warn); }
.bars .col:hover .seg { filter: brightness(1.15); }
.bars-axis { display: flex; gap: 2px; padding: 6px 8px 0; font-size: 10px; color: var(--text-3); }
.bars-axis span { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); padding: 0 8px 4px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

.hbar { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.hbar .name { width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { flex: 1; height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.hbar .fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.hbar .val { width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

.donut-row { display: flex; align-items: center; gap: 18px; }
.donut { flex: none; }
.donut-key { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.donut-key .k { display: flex; align-items: center; gap: 8px; }
.donut-key .k i { width: 9px; height: 9px; border-radius: 50%; }
.donut-key .k .n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* planner calendar --------------------------------------------------------- */
.planner { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.planner.two-weeks { grid-template-columns: repeat(7, minmax(0,1fr)); }
.pl-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  min-height: 150px; display: flex; flex-direction: column;
}
.pl-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pl-day.is-weekend { background: var(--surface-2); }
.pl-day.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.pl-day-head { padding: 7px 9px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 6px; }
.pl-day-head .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.pl-day-head .dnum { font-size: 14px; font-weight: 600; }
.pl-day-head .cnt { margin-left: auto; font-size: 11px; color: var(--text-3); }
.pl-day-body { padding: 6px; display: flex; flex-direction: column; gap: 5px; overflow: auto; flex: 1; }

.pl-task {
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); padding: 6px 8px; font-size: 12px; cursor: grab; user-select: none;
}
.pl-task:hover { background: var(--surface-3); }
.pl-task.dragging { opacity: .4; }
.pl-task.st-done    { border-left-color: var(--ok);   opacity: .72; }
.pl-task.st-skipped { border-left-color: var(--text-3); opacity: .6; text-decoration: line-through; }
.pl-task.is-overdue { border-left-color: var(--bad); background: var(--bad-soft); }
.pl-task .tt { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-task .tm { color: var(--text-3); font-size: 11px; display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* checklist builder -------------------------------------------------------- */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.builder > * { min-width: 0; }
.cp-block { margin-bottom: 12px; }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.cp-head .grip { cursor: grab; color: var(--text-3); display: flex; }
.cp-head h3 { flex: 1; }
.q-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.q-row:last-child { border-bottom: none; }
.q-row .grip { cursor: grab; color: var(--text-3); display: flex; opacity: .55; }
.q-row:hover .grip { opacity: 1; }
.q-row.dragging { opacity: .4; }
.q-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.q-row .qtype { font-size: 11px; color: var(--text-3); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.q-row .qlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row.is-heading .qlabel { font-weight: 600; }
.q-row .acts { display: flex; gap: 2px; opacity: 0; }
.q-row:hover .acts { opacity: 1; }
.cause-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); }

/* the check point table (v5) ------------------------------------------------ */

/* One row = one check point. The header and every row share the same columns,
   so the cells line up whether the table is a flat list or one group of many. */
.pt-table { --pt-cols: 18px 26px 24px 158px minmax(100px, 1fr) 150px 96px 34px 34px 34px 96px; }   /* v4.19.0: + the 24px icon column; the text may shrink to 110px (was 150px), MORE + bin 104 → 96px. v4.22: + SCAN after REQ. (both 34px, REQ. was 36px), the text may shrink to 100px and the columns are 4px apart (was 6px), so it still fits at 1440px */
.pt-head, .q-row.pt-row {
  display: grid; grid-template-columns: var(--pt-cols); column-gap: 6px; align-items: center;
}
.pt-table:not(.pt-basic) > .pt-head, .pt-table:not(.pt-basic) > .q-row.pt-row { column-gap: 4px; }   /* v4.22: room for SCAN */
.pt-head .c-scan { letter-spacing: 0; }   /* v4.22: the column's word fits its 34px (also in Swedish) */
.pt-head {
  padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3);
}
.pt-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-head .c-no, .q-row .pt-no { text-align: right; }
.pt-head .c-mid, .q-row .c-mid { display: flex; justify-content: center; }
.pt-head .c-mid { display: block; text-align: center; }
.cp-block.is-flat .pt-head { border-radius: var(--radius) var(--radius) 0 0; }

.q-row.pt-row { padding: 5px 12px; font-size: 13px; }
.q-row.pt-row.is-heading { grid-template-columns: 18px minmax(0, 1fr) 104px; background: var(--surface-2); }
.q-row.pt-row .pt-no { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.q-row.pt-empty { display: flex; padding: 14px 16px; }
.q-row.pt-row .acts { opacity: .55; justify-content: flex-end; }
.q-row.pt-row:hover .acts, .q-row.pt-row:focus-within .acts { opacity: 1; }
/* MORE opens the big row editor: always fully visible, a real button, not a faded icon */
.q-row.pt-row .acts { opacity: 1; align-items: center; gap: 4px; }
.q-row.pt-row .acts .btn-icon { opacity: .55; }
.q-row.pt-row:hover .acts .btn-icon, .q-row.pt-row:focus-within .acts .btn-icon { opacity: 1; }
.q-row.pt-row .pt-more { min-width: 60px; padding: 4px 12px; font-weight: 700; letter-spacing: .04em; }
.q-row.pt-row .pt-codecell { position: relative; min-width: 0; display: block; }
.q-row.pt-row .pt-codecell .pt-code { width: 100%; padding-right: 32px; }
.q-row.pt-row .pt-codecell .pt-qr { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); }
.q-row.pt-row .pt-qr { color: var(--text-2); }
.q-row.pt-row .pt-qr:hover { color: var(--accent); }
.q-row.pt-row .pt-req, .q-row.pt-row .pt-scan { position: relative; border-radius: 4px; }
.q-row.pt-row .pt-req input, .q-row.pt-row .pt-scan input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* inline cells look like text until you point at them, like a spreadsheet */
.q-row .pt-in {
  height: 30px; padding: 0 7px; border: 1px solid transparent; background: transparent;
  border-radius: 6px; font-size: 13px; text-overflow: ellipsis;
}
.q-row .pt-in:hover:not(:disabled) { border-color: var(--border-2); }
.q-row .pt-in:focus { background: var(--surface); border-color: var(--accent); }
.q-row .pt-in:disabled { opacity: 1; color: var(--text); cursor: default; }
.q-row .pt-code { font-family: var(--mono); font-size: 12px; }
.q-row.is-heading .pt-in { font-weight: 600; }
.q-row .is-saved { box-shadow: 0 0 0 3px var(--ok-soft); border-color: var(--ok); transition: box-shadow .2s; }
.q-row .pt-text { display: flex; align-items: center; gap: 6px; min-width: 0; }
.q-row .pt-text .pt-in { flex: 1; min-width: 0; }
.q-row .pt-marks { display: flex; align-items: center; gap: 7px; flex: none; color: var(--text-3); }
.q-row .pt-marks > span { display: inline-flex; align-items: center; gap: 2px; }
.q-row .pt-mark-n { font-size: 11px; font-weight: 600; }
.pt-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; cursor: help; justify-self: center;
}

.pt-toolbar { margin-bottom: 12px; }
/* the same table without the barcode, QR, RFID and link columns (the setup wizard) */
.pt-table.pt-basic { --pt-cols: 18px 26px 24px 158px minmax(150px, 1fr) 34px 34px 104px; }
/* a line that only names the group the rows below belong to */
.q-row.pt-row.pt-group { cursor: default; }
.pt-group-name { display: inline-flex; align-items: center; gap: 8px; padding: 0 7px; font-size: 13px; font-weight: 600; color: var(--accent); }
.cp-head { flex-wrap: wrap; }
.cp-head .cp-adds { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.cp-head .cp-adds .btn { padding: 0 8px; }

/* the QR modal */
.qr-modal { display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr-frame { padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); line-height: 0; }
.qr-frame svg.qr-big { width: 252px; height: 252px; display: block; }
.qr-modal .qr-name { margin: 14px 0 2px; font-size: 16px; }
.qr-modal .qr-hint { max-width: 380px; margin: 8px 0 0; }
.qr-modal .qr-addr { align-self: stretch; text-align: left; margin: 16px 0 5px; }
.qr-urlrow { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.qr-url {
  flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-2); font-family: var(--mono); font-size: 12px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all;
}

/* the Add existing modal */
.ex { display: flex; flex-direction: column; gap: 10px; }
.ex-list { border: 1px solid var(--border); border-radius: var(--radius); max-height: min(360px, 42vh); overflow-y: auto; }
.ex-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ex-row:last-child { border-bottom: none; }
.ex-row:hover { background: var(--surface-2); }
.ex-row.is-on { background: var(--accent-soft); }
.ex-row input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ex-main { flex: 1; min-width: 0; }
.ex-label { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-none { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--text-3); }
.ex-sum { min-height: 16px; }
.ex-modes .label { margin-bottom: 6px; }
.ex-mode-lines { margin-top: 8px; }
.ex-mode-line { margin: 0 0 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.ex-mode-line.is-on { color: var(--text); }

/* the properties card (v4.4.2): two columns that fall back to one when the card
   is narrower than about 300px. Auto-fit does the collapsing, so no breakpoint. */
.pt-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: 0 10px; align-items: start; padding: 12px 14px;
}
.pt-grid > .field, .pt-grid > .between { margin-bottom: 10px; min-width: 0; }
.pt-grid > .pt-wide { grid-column: 1 / -1; }
.pt-grid .field > label, .pt-grid .label { margin-bottom: 3px; }
.pt-grid .textarea { min-height: 0; line-height: 1.4; padding: 6px 10px; }
.pt-grid > .between { margin-bottom: 0; }
/* a small input under the interval dropdown: label left, number right, one line */
.pt-iv-sub { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.pt-grid .pt-iv-sub > .label { flex: 1; margin: 0; }
.pt-iv-sub > .input { width: 104px; height: 30px; flex: none; }
.pt-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 6px; }
.pt-choices .choice { min-height: 36px; }
.pt-choices .choice .strong { font-size: 12.5px; line-height: 1.2; }
.pt-tip {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: 1px;
  width: 13px; height: 13px; margin-left: 5px; border-radius: 50%;
  border: 1px solid var(--border-2); color: var(--text-3);
  font: italic 700 9px/1 Georgia, serif; cursor: help;
}
.pt-tip:hover { color: var(--accent); border-color: var(--accent); }
.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* v4.5 — the checklist picture row in the properties card: thumbnail, upload/replace, remove */
.pt-img-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pt-img-thumb {
  flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border-2); background: var(--surface-3);
}
.pt-img-thumb.is-empty, .pt-img-thumb.is-broken { display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.pt-img-thumb.is-broken { font-size: 0; }
.pt-img-row .btn { flex: none; }

/* v4.5 — the screen style strip above the phone in the Mobile view card */
.ss-btn {
  flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 3px 5px; border: 1.5px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text-2); font: inherit; cursor: pointer;
}
.ss-btn:hover:not(:disabled):not(.is-on) { background: var(--surface-3); color: var(--text); }
.ss-btn:disabled { cursor: default; opacity: .7; }
.ss-btn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ss-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ss-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 7px; border: 1px solid var(--border-2); background: var(--surface-3);
}
.ss-btn.is-on .ss-thumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ss-img, .ss-swatch { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-img { object-fit: cover; object-position: top center; }
.ss-name { max-width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-btn.is-on .ss-name { color: var(--accent); font-weight: 700; }

/* v4.5.1 — in the builder's Mobile view the designs stand in a column beside the
   phone(s). v4.5.6: the column is on the LEFT, one thumbnail wide, holds as many as
   fit the phone's height and ends in a big MORE button (DesignPicker, admin/design-picker.js).
   v4.5.2: the Check Screen and the List can both show, side by side. JS (mobileViewCard)
   picks the scale from the card's width and sets --pv-scale; when the designs do not fit
   beside the phones it adds .is-stacked (the designs go below as one line) and .is-col when
   even the phones do not fit in a row (they stack). */
.mv-split {
  --pv-h: 844px; --pv-scale: .62; --mv-pw: calc(390px * var(--pv-scale) + 22px);
  display: grid; grid-template-columns: 132px auto; column-gap: 28px; row-gap: 9px;
  grid-template-areas: ". note" "designs phone" ". pager";
  justify-content: start; justify-items: center; align-items: start;
}
.mv-split.is-both { grid-template-columns: 132px auto auto; grid-template-areas: ". nl nc" "designs pl pc" ". . pager"; }
.mv-split.is-empty { grid-template-areas: "designs phone"; }
.mv-split .phone-note { font-size: 11.5px; color: var(--text-3); text-align: center; max-width: max(var(--mv-pw), 190px); }
.mv-split .mv-n-start, .mv-split .mv-n-check, .mv-split .mv-n-full { grid-area: note; }
.mv-split .mv-p-start, .mv-split .mv-p-check, .mv-split .mv-p-full { grid-area: phone; }
.mv-split.is-both .mv-n-start { grid-area: nl; } .mv-split.is-both .mv-p-start { grid-area: pl; }
.mv-split.is-both .mv-n-check { grid-area: nc; } .mv-split.is-both .mv-p-check { grid-area: pc; }
.mv-split .mv-pager { grid-area: pager; }
.mv-split .mv-empty { grid-area: phone; width: 264px; }
.mv-split .dp { grid-area: designs; justify-self: stretch; height: calc(var(--pv-h) * var(--pv-scale) + 22px); }
.mv-split.is-stacked, .mv-split.is-stacked.is-empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: "designs" "note" "phone" "pager"; }
.mv-split.is-stacked.is-both { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "designs designs" "nl nc" "pl pc" ". pager"; }
.mv-split.is-stacked.is-both.is-col { grid-template-columns: minmax(0, 1fr); grid-template-areas: "designs" "nl" "pl" "nc" "pc" "pager"; }
.mv-split.is-stacked .mv-empty { width: auto; }
.mv-split.is-stacked .dp { height: auto; width: 100%; }

/* the minimise button in the Mobile view header, and the folded card */
.mv-min { gap: 6px; flex: none; }
.mv-min-ico { display: inline-flex; transition: transform .15s; }
.mv-min-ico.is-closed { transform: rotate(-90deg); }
.mv-card.is-min .card-head { border-bottom: 0; }
.mv-card .card-head { flex-wrap: wrap; row-gap: 8px; }

/* v4.5.6 — the design picker (admin/design-picker.js): one line of thumbnails and a big MORE button */
.ss-btn[hidden] { display: none; }
.dp { display: flex; box-sizing: border-box; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.dp-list { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.dp-list::-webkit-scrollbar { display: none; }
.dp.is-col .dp-list { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.dp.is-row .dp-list { overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; }
/* v4.7.2: the "Design" title with its minimise button; folded, only the title stays */
.dp-head { flex: none; }
.dp-min {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 10px 4px;
  border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-2); cursor: pointer;
}
.dp-min:hover { color: var(--text); }
.dp-min-ico { display: inline-flex; transition: transform .15s; }
.dp.is-min .dp-min-ico { transform: rotate(-90deg); }
.dp.is-min .dp-list, .dp.is-min .dp-more { display: none; }
.dp.is-min .dp-min { padding-bottom: 9px; }
.mv-split .dp.is-min { height: auto; align-self: start; }
.dp-more {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink, #fff); font: inherit; font-weight: 700; letter-spacing: .04em;
}
.dp-more:hover { filter: brightness(1.08); }
.dp-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.dp-more-n { font-weight: 600; font-size: 12px; opacity: .85; }
.dp.is-col { flex-direction: column; }
.dp.is-col .dp-list { flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; }
.dp.is-col .ss-btn { width: 58px; flex: none; }
.dp.is-col .dp-more { flex-direction: column; gap: 3px; padding: 10px 6px; min-height: 64px; }
.dp.is-row { flex-direction: row; align-items: stretch; background: transparent; border-color: transparent; }
.dp.is-row .dp-list { flex-direction: row; align-items: flex-start; gap: 8px; padding: 4px 6px 4px 0; }
.dp.is-row .ss-btn { width: 70px; flex: none; }
.dp.is-row .dp-more { flex-direction: row; padding: 0 20px; border-radius: var(--radius); min-height: 86px; }
.dp-pop { min-width: 0; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dp-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; text-align: center; cursor: pointer;
}
.dp-card:hover:not(:disabled) { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.dp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-card.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.dp-card .ss-thumb.dp-card-thumb { width: 118px; aspect-ratio: 144 / 312; }
.dp-card .ss-img { object-position: center; }
.dp-card-name { font-weight: 700; font-size: 14px; }
.dp-card-label { font-size: 10.5px; letter-spacing: .06em; color: var(--text-3); }
.dp-card-desc { font-size: 12px; line-height: 1.4; color: var(--text-2); }
.dp-card-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink, #fff); }

/* v4.5.6 — Properties: the picture miniature, its popup, and the Show image checkbox */
.pt-img-btn {
  position: relative; display: block; width: 100%; max-width: 220px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--surface-3); cursor: pointer; font: inherit;
}
.pt-img-btn:disabled { cursor: default; }
.pt-img-btn:hover:not(:disabled) { border-color: var(--accent); }
.pt-img-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-img-mini { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-img-mini.is-empty, .pt-img-mini.is-broken { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 0; }
.pt-img-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 6px; background: rgba(8, 14, 24, .62); color: #fff; font-size: 11.5px; font-weight: 600;
}
.pt-img-show { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; cursor: pointer; }
.pt-img-show input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.pt-img-show span { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.pt-img-show small { font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.pt-img-show.is-off { opacity: .55; }
.pt-img-show.pt-img-big { margin-top: 7px; }   /* v13: Big image, right under Show image */
/* the checkbox beside its words: beats the theme's `.field > label { display: block }` */
.pt-img > .pt-img-show { display: flex; margin-bottom: 0; color: var(--text); font-weight: 400; font-size: 13px; }
.pt-img-show strong { font-weight: 600; }
.ip-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 14px; }
.ip-cur { width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--border-2); background: var(--surface-3); }
.ip-cur.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); font-size: 12px; }
.ip-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ip-h { font-size: 14px; margin: 6px 0 2px; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ip-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 0; overflow: hidden; border: 1.5px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.ip-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.ip-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ip-tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ip-tile span { padding: 0 8px 7px; font-size: 11.5px; line-height: 1.3; color: var(--text-2); }

/* v4.5 — the unit page header: compact, facts two to a row, photo on the right */
.uh { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; align-items: stretch; padding: 10px 14px; }
.uh-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.uh-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.uh-title h1 { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.uh-title .spacer { flex: 1; }
.kv.uh-kv {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: 3px 10px; margin: 0; font-size: 13px; align-items: baseline;
}
.kv.uh-kv dt { color: var(--text-2); font-size: 12px; }
.kv.uh-kv dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uh-photo {
  position: relative; min-height: 76px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-2); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--text-3);
}
.uh-photo.has-img { border-style: solid; background: var(--surface-3); }
.uh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.uh-photo:not(.has-img):not(.is-empty) { border-style: dashed; }
.uh-add {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.uh-add span { display: inline-flex; align-items: center; gap: 4px; }
.uh-add:hover { color: var(--accent); background: var(--accent-soft); }
.uh-add:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.uh-photo-act { position: absolute; top: 5px; right: 5px; display: flex; gap: 4px; }
.uh-pbtn {
  width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 7px; background: var(--surface); color: var(--text-2);
  box-shadow: var(--shadow-1); cursor: pointer; opacity: .92;
}
.uh-pbtn:hover { color: var(--accent); opacity: 1; }
.uh-pbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the card narrows with its pane, not with the window: below ~540px the facts go one to a row
   and below ~380px the photo drops under the text */
.uh-card { container-type: inline-size; }
@container (max-width: 540px) {
  .uh { grid-template-columns: minmax(0, 1fr) 96px; }
  .kv.uh-kv { grid-template-columns: max-content minmax(0, 1fr); }
}
@container (max-width: 380px) {
  .uh { grid-template-columns: minmax(0, 1fr); }
  .uh-photo { height: 96px; }
}

/* the phone in the question editor ----------------------------------------- */

/* The editor splits in two: what you are writing on the left, what the
   operator will hold on the right. Below 1040px there is no room for both,
   so the phone steps aside and the form keeps the full width. */
.q-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.q-edit.no-preview { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1040px) {
  .q-edit { grid-template-columns: minmax(0, 1fr); }
  .q-edit .phone-col { display: none; }
}

.phone-col { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.phone-col .phone-head {
  display: flex; align-items: center; gap: 7px; align-self: stretch;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.phone-col .phone-head .spacer { flex: 1; }
.phone-col .phone-note { font-size: 11.5px; color: var(--text-3); text-align: center; max-width: 250px; }

/* On/off buttons, one per screen: which phones the builder's preview shows. Looking only. */
.mv-toggles { display: inline-flex; flex: none; gap: 6px; }
.mv-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; user-select: none;
}
.mv-toggle:hover { color: var(--text); background: var(--surface-3); }
.mv-toggle.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }
.mv-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.mv-toggle.is-on .mv-dot { background: #fff; border-color: #fff; }
.mv-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The frame is drawn at the scale the screen is shrunk to, so the bezel stays
   a bezel instead of a hairline. --pv-scale is set from JS to whatever height
   the modal actually has. */
.phone {
  --pv-w: 390px; --pv-h: 844px; --pv-scale: .62;
  position: relative; flex: none;
  width: calc(var(--pv-w) * var(--pv-scale) + 22px);
  height: calc(var(--pv-h) * var(--pv-scale) + 22px);
  border-radius: calc(56px * var(--pv-scale) + 11px);
  background: #10151c;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, var(--shadow-3);
  padding: 11px;
}
:root[data-theme="dark"] .phone { background: #05080c; box-shadow: 0 0 0 1px rgba(255,255,255,.13) inset, var(--shadow-3); }
.phone .screen {
  position: absolute; inset: 11px;
  border-radius: calc(46px * var(--pv-scale)); overflow: hidden; background: var(--bg);
}
.phone iframe {
  width: var(--pv-w); height: var(--pv-h); border: 0; display: block;
  transform: scale(var(--pv-scale)); transform-origin: 0 0;
}
/* The pill the camera sits in. Purely so the frame reads as a phone at a
   glance and the person trusts that the screen inside it is to scale. */
.phone .notch {
  position: absolute; top: calc(11px + 11px * var(--pv-scale) / .62); left: 50%;
  width: calc(126px * var(--pv-scale)); height: calc(37px * var(--pv-scale));
  margin-left: calc(-63px * var(--pv-scale));
  border-radius: calc(19px * var(--pv-scale)); background: #10151c; z-index: 2;
}
:root[data-theme="dark"] .phone .notch { background: #05080c; }
.phone.is-busy .screen { opacity: .55; transition: opacity .12s; }

/* The builder's small phones open large on a click (admin/phone-popup.js). */
.phone.mv-openable { cursor: zoom-in; }
.phone.mv-openable:hover { box-shadow: 0 0 0 2px var(--accent), var(--shadow-3); }
.phone.mv-openable:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* v4.22 — the phone that shows what is selected in the builder (the checklist → Start, a group →
   Groups and List, a check point → Check Screen) has a purple outline, the Group level's colour */
.phone.is-cur-screen { outline: 3px solid var(--lvl-grp); outline-offset: 3px; }
/* v4.22 — the setup wizard's first visit: a purple gradient rolls round the edge of every phone
   that is on (a conic gradient on a ring-shaped pseudo-element, its angle animated through
   @property) for a few seconds, then fades out (.mv-glow-out) into the normal look; the outline
   waits under it. With reduced motion the ring stands still and the glow is short (JS). */
@property --mv-glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mv-glow-spin { to { --mv-glow-a: 360deg; } }
.phone.mv-glow {
  box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 0 30px 8px color-mix(in srgb, var(--lvl-grp) 60%, transparent), var(--shadow-3);
  transition: box-shadow .6s;
}
.phone.mv-glow::before {
  content: ""; position: absolute; inset: -6px; z-index: 3; padding: 4px; box-sizing: border-box; pointer-events: none;
  border-radius: calc(56px * var(--pv-scale) + 17px);
  background: conic-gradient(from var(--mv-glow-a), transparent 0deg, color-mix(in srgb, var(--lvl-grp) 35%, transparent) 50deg,
    var(--lvl-grp) 120deg, #e2d4ff 170deg, var(--lvl-grp) 220deg, color-mix(in srgb, var(--lvl-grp) 35%, transparent) 300deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: mv-glow-spin 1.4s linear infinite; transition: opacity .6s;
}
.phone.mv-glow:not(.mv-glow-out) { outline-color: transparent; }
.phone.mv-glow.mv-glow-out { box-shadow: 0 0 0 1px rgba(255,255,255,.09) inset, 0 0 0 0 transparent, var(--shadow-3); }
.phone.mv-glow.mv-glow-out.is-cur-screen { transition: box-shadow .6s, outline-color .6s; }
.phone.mv-glow.mv-glow-out::before { opacity: 0; }
:root[data-theme="dark"] .phone.mv-glow { box-shadow: 0 0 0 1px rgba(255,255,255,.13) inset, 0 0 30px 8px color-mix(in srgb, var(--lvl-grp) 60%, transparent), var(--shadow-3); }
:root[data-theme="dark"] .phone.mv-glow.mv-glow-out { box-shadow: 0 0 0 1px rgba(255,255,255,.13) inset, 0 0 0 0 transparent, var(--shadow-3); }
@media (prefers-reduced-motion: reduce) {
  .phone.mv-glow::before { animation: none; background: linear-gradient(135deg, var(--lvl-grp), #e2d4ff, var(--lvl-grp)); }
}
/* the large, clickable phone */
.pp-modal { width: auto; max-width: min(860px, calc(100vw - 48px)); }
.pp-modal .modal-body { padding: 14px 18px 18px; }
.pp { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: min(520px, calc(100vw - 84px)); }
.pp-bar { display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap; }
.pp-bar .spacer { flex: 1; }
.pp-seg { flex-wrap: wrap; }
.pp-hint { width: 100%; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.pp-stage { display: flex; justify-content: center; }

/* deviation detail --------------------------------------------------------- */
.dev-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .dev-grid { grid-template-columns: 1fr; } }
.timeline { display: flex; flex-direction: column; gap: 14px; }
.tl-item { display: flex; gap: 10px; }
.tl-item .body { flex: 1; min-width: 0; }
.tl-item .meta { font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.tl-item.sys .body { font-size: 12px; color: var(--text-2); font-style: italic; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.photo-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--border); cursor: zoom-in; display: block; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 7px 10px; font-size: 13px; align-items: baseline; }
.kv dt { color: var(--text-2); font-size: 12px; }
.kv dd { margin: 0; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.86); z-index: 300; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 30px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* unit tree ---------------------------------------------------------------- */
.tree-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-s); cursor: pointer; font-size: 13px; }
.tree-row:hover { background: var(--surface-2); }
.tree-row.is-on { background: var(--accent-soft); color: var(--accent); }
.units-head { flex-wrap: wrap; row-gap: 8px; }
.units-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.units-head h2 { flex: 0 0 auto; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lv-extras { display: contents; }
.uh-actions { display: inline-flex; flex: none; gap: 8px; }
/* v4.27: tick boxes on units, and the action bar */
.table th.sel-col, .table td.sel-col { width: 34px; padding-left: 12px; padding-right: 0; }
.sel-col input[type=checkbox], .sel-all-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; vertical-align: middle; }
.table tr.is-sel td { background: var(--accent-soft); }
.sel-all-row { margin: 0 0 10px 2px; font-size: 12.5px; color: var(--text-2); }
.sel-pick { position: absolute; top: 7px; left: 7px; z-index: 3; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(16, 29, 48, .7); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); cursor: pointer; opacity: 0; transition: opacity .12s; }
.sel-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.lv-cell:hover .sel-pick, .lv-cell.is-sel .sel-pick, .lv-grid.has-selection .sel-pick, .sel-pick:focus-within { opacity: 1; }
.sel-pick ~ .ph-cam-btn { left: 40px; }
.lv-cell.is-sel > .tpl-box { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); border-color: var(--accent); }
@media (hover: none) { .sel-pick { opacity: 1; } }
.bulk-bar { position: sticky; top: 56px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); color: var(--text); font-size: 13px; }
.bulk-bar .spacer { flex: 1; }
.lv-switch .btn { gap: 6px; }
/* v4.24: click a photo to add / change it — the round photo in the table, the camera on a box or a site tile */
.unit-thumb-btn { position: relative; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: block; }
.unit-thumb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.unit-thumb-btn .ph-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(16, 29, 48, .66); color: #fff; opacity: 0; transition: opacity .12s; pointer-events: none; }
.unit-thumb-btn:hover .ph-cam, .unit-thumb-btn:focus-visible .ph-cam { opacity: 1; }
.lv-cell { position: relative; display: flex; min-width: 0; transition: transform .14s; }
.lv-cell:hover { transform: translateY(-2px); }
.lv-cell > .tpl-box { flex: 1; min-width: 0; }
.lv-cell > .tpl-box:hover:not(:disabled) { transform: none; }
.ph-cam-btn { position: absolute; top: 7px; left: 7px; z-index: 3; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(16, 29, 48, .7); color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.lv-cell:hover .ph-cam-btn, .ph-cam-btn:focus-visible { opacity: 1; }
.ph-cam-btn:hover { background: var(--accent); color: var(--accent-ink); }
.ph-cam-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .ph-cam-btn { opacity: 1; } }
.ph-menu { position: fixed; z-index: 270; box-sizing: border-box; min-width: 150px; padding: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow-3); font-size: 13px; color: var(--text); }
.ph-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: var(--radius-s); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ph-item:hover, .ph-item:focus-visible { background: var(--surface-2); outline: none; }
.ph-item.is-bad { color: var(--bad); }
/* The Sites card as boxes: the units' boxes, smaller, two to a row in the narrow left column */
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 0 0; }
.stile .tpl-art { aspect-ratio: 16 / 10; }
.stile .tpl-ico { width: 40px; height: 40px; }
.stile .tpl-art.is-icon { color: #8fb8ff; background: radial-gradient(circle at 30% 18%, rgba(143, 184, 255, .22), transparent 64%), var(--tpl-deep); }
.stile .tpl-body { padding: 8px 9px 9px; gap: 3px; }
.stile .tpl-body h3 { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.stile .tpl-tag { min-height: 0; -webkit-line-clamp: 1; font-size: 10.5px; line-height: 1.35; }
.stile .tpl-chip { font-size: 10px; padding: 0 6px; }
.lv-photos { margin: 0 2px; font-size: 13px; white-space: nowrap; }
.lv-namecell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lv-thumb { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--border); }
.lv-thumb.is-icon { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
/* Boxes: the setup wizard's example cards (.tpl-box), smaller, 4-5 to a row at 1440 px */
.tpl-grid.lv-grid { grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: 12px; }
.lv-box .tpl-art { aspect-ratio: 4 / 3; }
.lv-box .tpl-ico { width: 54px; height: 54px; }
.lv-box .tpl-art.is-icon { color: #8fb8ff; background: radial-gradient(circle at 30% 18%, rgba(143, 184, 255, .22), transparent 64%), var(--tpl-deep); }
.lv-box .tpl-badge { width: 30px; height: 30px; top: 7px; right: 7px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 8px rgba(0, 0, 0, .35); }
.lv-box .tpl-body { padding: 10px 11px 11px; gap: 4px; }
.lv-box .tpl-body h3 { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lv-box .tpl-tag { min-height: 0; -webkit-line-clamp: 1; font-size: 11.5px; line-height: 1.35; }
.lv-box .tpl-chip { font-size: 10.5px; padding: 1px 7px; }
.lv-box .tpl-chip.is-bad { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
/* v4.24: the other chip tones, a colour dot before the title, and a bottom-right corner (avatars) beside the chips */
.lv-box .tpl-chip.is-ok   { background: rgba(52, 199, 123, .22); border-color: rgba(52, 199, 123, .45); color: #9be8be; }
.lv-box .tpl-chip.is-warn { background: rgba(245, 166, 35, .22); border-color: rgba(245, 166, 35, .5); color: #ffd48a; }
.lv-box .tpl-chip.is-info { background: rgba(96, 165, 250, .22); border-color: rgba(96, 165, 250, .5); color: #b4d4ff; }
.lv-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.lv-meta { margin: 0; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; }
.lv-row > .tpl-chips { display: contents; }
.lv-foot { flex: none; display: flex; align-items: center; margin-left: auto; }
.lv-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.lv-box .av-stack > .avatar { box-shadow: 0 0 0 2px var(--tpl-deep); }
.lv-box .av-stack > .av-group, .lv-box .av-stack > .av-more { background: rgba(255, 255, 255, .16); color: #e6ecf4; }
.lv-box .lv-foot .muted-2 { color: rgba(255, 255, 255, .5); }
.units-filters .input { width: 170px; height: 34px; }
.units-filters .dd { width: auto; }
.site-row { font-weight: 600; margin-top: 2px; }
.site-row .site-acts { display: none; flex: none; align-items: center; gap: 2px; margin: -4px -6px -4px 0; }
.site-row:hover .site-acts, .site-row.is-on .site-acts, .site-row:focus-within .site-acts { display: inline-flex; }
.tree-children { margin-left: 16px; border-left: 1px solid var(--border); padding-left: 6px; }

.qr-box { text-align: center; padding: 14px; }
.qr-box svg { width: 190px; height: 190px; }
.qr-box .code { margin-top: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }

@media print {
  .sidebar, .topbar, .toolbar, .btn { display: none !important; }
  .content { padding: 0; }
  .card { border: none; box-shadow: none; }
}

/* setup wizard (#/setup) ---------------------------------------------------- */

/* The wizard is a reading width, not a full-bleed table: five steps that a
   person who has never seen the product is meant to walk without help. */
.wiz { max-width: 1120px; }

.wiz-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.wiz-step {
  display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 7px;
  border: 1px solid transparent; border-radius: 99px; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--text-3); cursor: pointer;
}
.wiz-step:disabled { cursor: default; }
.wiz-step .n {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-3);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wiz-step.is-done { color: var(--text-2); }
.wiz-step.is-done .n { background: var(--ok-soft); color: var(--ok); }
.wiz-step.is-done:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.wiz-step.is-on { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 600; }
.wiz-step.is-on .n { background: var(--accent); color: var(--accent-ink); }

.wiz-head { margin-bottom: 14px; }
.wiz-head h2 { font-size: 19px; }
.wiz-head p { margin: 5px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 68ch; }
/* A form is read, not scanned: the steps keep a column width even on a wide screen. */
.wiz-body > .card { max-width: 900px; }
.wiz-foot { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.wiz-foot .spacer { display: none; }
.wiz-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: 20px;
  position: sticky; top: var(--header-h); z-index: 15; background: var(--bg);
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.wiz-top .wiz-steps { margin-bottom: 0; flex: 1 1 auto; }

.setup-err {
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px;
  padding: 10px 12px; border: 1px solid var(--bad); border-radius: var(--radius-s);
  background: var(--bad-soft); color: var(--bad); font-size: 13px; max-width: 900px;
}
.setup-err svg { flex: none; margin-top: 1px; }
.setup-err-head { font-size: 13px; font-weight: 600; color: var(--bad); margin-bottom: 6px; }
.setup-note {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  padding: 9px 12px; border-radius: var(--radius-s);
  background: var(--accent-soft); color: var(--accent); font-size: 13px; max-width: 680px;
}
.setup-note svg { flex: none; }

/* step 1 — the scenario cards */
.scen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.scen-card {
  display: flex; flex-direction: column; gap: 9px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.scen-card:hover:not(:disabled) { border-color: var(--accent-line); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.scen-card:disabled { cursor: progress; }
.scen-card:disabled:not(.is-busy) { opacity: .6; }
.scen-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.scen-card .top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.scen-card .ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.scen-card h3 { font-size: 14.5px; min-width: 0; line-height: 1.3; }
.scen-card .tag { flex: 1; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.scen-card .chip { flex: none; margin-left: auto; align-self: flex-start; }
.scen-card .facts { font-size: 11.5px; color: var(--text-3); }

/* steps 2 and 3 — rows you pick from and rows you type into */
.pick-list { display: flex; flex-direction: column; gap: 7px; max-width: 680px; }
.pick-row {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: 13.5px; color: inherit; text-align: left; cursor: pointer;
}
.pick-row:hover { border-color: var(--accent-line); background: var(--surface-2); }
.pick-row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.pick-row.is-quiet { opacity: .62; cursor: default; }
.pick-row .rd {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border-2); background: var(--surface);
}
.pick-row.is-on .rd { border-color: var(--accent); border-width: 5px; }
.pick-new { margin-top: 10px; max-width: 420px; }

.u-rows { display: flex; flex-direction: column; gap: 7px; }
.u-head, .u-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 28px; gap: 9px; align-items: center; }
.u-head { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.u-row.is-existing { padding: 6px 0; font-size: 13.5px; }
.u-row .u-code { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.u-row .u-code-inp { font-family: var(--mono); font-size: 12.5px; }

.sw-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }

/* step 5 — the summary beside the phone */
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: start; }
@media (max-width: 1080px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-grid .phone-col { display: none; }
}
.setup-sum { display: flex; flex-direction: column; gap: 9px; }
.sum-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.sum-row .i { flex: none; color: var(--accent); margin-top: 1px; display: flex; }

.setup-done .done-top { display: flex; align-items: center; gap: 14px; }
.setup-done .done-ico {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok-soft); color: var(--ok);
}
.setup-done .done-top p { margin: 3px 0 0; }

/* the first-run nudge on the dashboard */
.setup-nudge { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-color: var(--accent-line); }
.setup-nudge .ico {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.setup-nudge .txt { flex: 1; min-width: 0; }
.setup-nudge .txt p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }

/* =====================================================================
   v4.5 — the onboarding wizard (#/setup): example boxes, task table,
   upload, unit cards, schedule sentence. One block; admin/pages/setup.js.
   ===================================================================== */
.wiz { max-width: 1240px; }
.wiz.is-wide { max-width: none; }   /* v4.10.1: step 2 = the builder page, same width */
.wiz-body > .card { max-width: 1040px; }
.wiz-body > .tpl-design-card { max-width: none; }

/* 1 — search, industry chips, the grid of boxes */
.tpl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.tpl-search { position: relative; display: flex; align-items: center; flex: 0 1 340px; min-width: 220px; }
.tpl-search svg { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.tpl-search-inp { width: 100%; padding-left: 34px; }
.tpl-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-fchip {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface);
  color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.tpl-fchip:hover { border-color: var(--accent-line); color: var(--text); }
.tpl-fchip.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.tpl-count { margin-left: auto; font-size: 12px; color: var(--text-3); }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 14px; }
.tpl-box {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.tpl-box:hover:not(:disabled) { border-color: var(--accent-line); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.tpl-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-box:disabled { cursor: progress; }
.tpl-box:disabled:not(.is-busy):not(.is-on) { opacity: .65; }
.tpl-box.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.tpl-art { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.tpl-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tpl-box:hover:not(:disabled) .tpl-img { transform: scale(1.04); }
.tpl-art.is-icon {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--d-accent, var(--accent)) 30%, transparent), transparent 64%), var(--d-bg, var(--accent-soft));
  color: var(--d-accent, var(--accent));
}
.tpl-ico {
  display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.tpl-art.is-blank { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--accent); }
.tpl-blank { border-style: dashed; border-color: var(--border-2); }
.tpl-check, .tpl-busy {
  position: absolute; top: 9px; left: 9px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tpl-check { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.tpl-busy { background: var(--surface); box-shadow: var(--shadow-1); }
.tpl-added { position: absolute; bottom: 9px; left: 9px; }
/* Examples with a photo: the photo fades into one deep blue, the text goes light, the example's icon sits big on the photo in its design's colour. */
.tpl-dark { --tpl-deep: #101d30; background: var(--tpl-deep); border-color: rgba(255, 255, 255, .08); color: #fff; }
.tpl-dark .tpl-art { background: var(--tpl-deep); }
/* v4.14.0: the fade is a mask on the photo itself, not an overlay on top of it. With an overlay, the hover zoom put the
   photo on its own GPU layer whose bottom edge could land one pixel below the overlay's at 125 %/150 % display scaling,
   drawing a bright line through the card between title and tagline. A masked photo has no hard edge to show. */
.tpl-dark .tpl-img { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 94%); mask-image: linear-gradient(180deg, #000 30%, transparent 94%); }
.tpl-dark .tpl-body { position: relative; z-index: 1; margin-top: -26px; padding-top: 2px; }
.tpl-dark .tpl-tag { color: rgba(255, 255, 255, .72); }
.tpl-dark .tpl-chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #e6ecf4; }
.tpl-dark .tpl-sw { border-color: rgba(255, 255, 255, .3); }
.tpl-dark .tpl-check, .tpl-dark .tpl-busy, .tpl-dark .tpl-added { z-index: 2; }
.tpl-badge {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--b-bg); color: var(--b-ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 3px 10px rgba(0, 0, 0, .35);
}
.tpl-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.tpl-body h3 { font-size: 14.5px; line-height: 1.3; }
.tpl-tag {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tpl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; }
.tpl-chip {
  max-width: 100%; padding: 2px 8px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface-2); color: var(--text-2); font-size: 11px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tpl-sw { flex: none; width: 18px; height: 18px; margin-left: auto; border: 1px solid var(--border-2); border-radius: 50%; }
.tpl-none {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 16px; text-align: center; color: var(--text-2);
  border: 1px dashed var(--border-2); border-radius: var(--radius-l);
}
.tpl-none p { margin: 0; }

.tpl-design-card { margin-top: 18px; padding: 0; }
.tpl-design-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; padding: 12px 14px 4px; }
.tpl-sel { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); }
.tpl-designs { padding: 6px 12px 12px; }

/* 2 — manual table and upload */
.wz-listhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.wz-seg .btn { gap: 6px; }
.wz-headrow { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.wz-headrow .wiz-head { margin-bottom: 0; }
.wz-headrow .spacer { flex: 1; }
.wz-headrow .wz-clear { gap: 8px; border-color: var(--bad, #d93025); color: var(--bad, #d93025); font-weight: 600; }
.wz-headrow .wz-clear:hover { background: var(--bad, #d93025); color: #fff; }
.wz-builder .builder { margin-top: 0; }
.wz-pt { overflow: hidden; }
.wz-pt .pt-table { overflow-x: auto; }
.wz-pt .pt-head { border-radius: var(--radius) var(--radius) 0 0; }
.up-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px; text-align: center;
  border: 2px dashed var(--border-2); border-radius: var(--radius-l); background: var(--surface-2);
  color: var(--text-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.up-drop:hover, .up-drop.is-over, .up-drop:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--text); outline: none; }
.up-drop .small { max-width: 64ch; }
.up-help { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 22px; margin: 10px 0 12px; font-size: 13px; }
.up-sample { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.up-types { flex: 1; min-width: 260px; font-size: 12.5px; color: var(--text-2); }
.up-types summary { cursor: pointer; }
.up-preview { margin-top: 14px; }
.up-preview .text-bad { color: var(--bad); }
.up-preview .text-ok { color: var(--ok); }
.up-table { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-s); font-size: 13px; }
.up-tr { display: grid; grid-template-columns: 36px 26px minmax(0, 1.6fr) 120px minmax(0, 1.2fr); gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.up-tr:last-child { border-bottom: 0; }
.up-th { background: var(--surface-2); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.up-st { display: flex; color: var(--ok); }
.up-tr.is-bad { background: var(--bad-soft); }
.up-tr.is-bad .up-st { color: var(--bad); }
.up-more { padding: 6px 10px; }

/* 3 — building / vehicle / person, and the unit cards */
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kind-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-l);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.kind-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); }
.kind-card.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.kind-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kind-ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.kind-card.is-on .kind-ico { background: var(--accent); color: var(--accent-ink); }
.kind-name { font-size: 15px; font-weight: 600; }
.kind-desc { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.kind-card .tpl-check { top: 10px; right: 10px; width: 22px; height: 22px; }
.u-cards { display: flex; flex-direction: column; gap: 10px; }
.u-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 12px; align-items: end;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.u-fields { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; }
.u-fields .field { margin: 0; }
.u-code-inp { font-family: var(--mono); font-size: 12.5px; }
.u-side { display: flex; justify-content: flex-end; }
.u-photo { position: relative; width: 88px; height: 62px; overflow: hidden; border: 1px solid var(--border-2); border-radius: 8px; }
.u-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.u-photo .btn { position: absolute; top: 2px; right: 2px; background: var(--surface); }
@media (max-width: 760px) {
  .u-card { grid-template-columns: minmax(0, 1fr) 28px; }
  .u-fields { grid-template-columns: minmax(0, 1fr); }
  .u-side { grid-column: 1; justify-content: flex-start; }
}

/* 4 — the schedule and its plain-language sentence */
.wz-sched { margin-top: 14px; }
.wz-sentence {
  display: flex; align-items: flex-start; gap: 10px; max-width: 1040px; margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--accent-soft);
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.wz-sentence svg { flex: none; margin-top: 3px; color: var(--accent); }

/* 5 — the result, and the entry-point card */
.done-img { flex: none; width: 96px; height: 62px; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; }
.setup-cta { padding: 10px 14px; }
.setup-cta .ico { width: 34px; height: 34px; }
.setup-cta .txt h2 { font-size: 14px; }
.setup-cta .txt p { font-size: 12.5px; }
.setup-start { text-decoration: none; white-space: nowrap; }
/* ===== end of the onboarding wizard block ===== */

/* screen types gallery ----------------------------------------------------- */
/* A card is at least 210px so a phone at --pv-scale .42 (about 186px with its
   bezel) fits inside the 12px padding with nothing clipped. */
.screen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.screen-card { min-width: 0; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.screen-card-phone { display: flex; justify-content: center; width: 100%; }
.screen-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
.screen-card-desc { font-size: 12px; line-height: 1.4; color: var(--text-2); }

/* narrow screens: the table keeps its columns and scrolls sideways instead of squeezing them */
.pt-table { overflow-x: auto; }
.pt-head, .q-row.pt-row { min-width: 760px; }
.pt-basic .pt-head, .pt-basic .q-row.pt-row { min-width: 520px; }

/* v4.7: the screen type number in front of a screen's name (Screen types page) */
.screen-no { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 4px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; }

/* v4.7.1: a group (checkpoint block) can be minimised to its header */
.cp-block.is-min > :not(.cp-head) { display: none; }
.cp-block .cp-min .mv-min-ico { display: inline-flex; transition: transform .15s; }
.cp-block.is-min .cp-min .mv-min-ico { transform: rotate(-90deg); }

.dp.is-row .dp-head { display: flex; align-items: center; }
.dp.is-row .dp-min { width: auto; padding: 0 12px 0 4px; }

/* v4.8: the colour theme swatches in Properties */
.cl-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-sw { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--text-3); }
.cl-sw-dot { width: 12px; height: 12px; border-radius: 50%; }
.cl-sw.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cl-sw:disabled { cursor: default; opacity: .6; }

/* v4.8: three or four phones in the Mobile view (Start, Groups, List, Check Screen):
   the notes keep to their phone's width so the row stays as wide as computed */
.mv-split.is-many .phone-note { max-width: var(--mv-pw); font-size: 11px; }

/* v4.8.1: "Use this design on the start screen", over the Start phone */
.mv-home-style { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 5px 10px; border: 1px solid var(--accent-line, var(--border)); border-radius: 99px; background: var(--accent-soft); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.mv-home-style input { margin: 0; }

/* ===== v12: date and time pickers (admin/date-time-picker.js) =====
   An always-open month card and an analog 24-hour clock, used instead of the
   browser's own date and time inputs. Colours are the theme's variables, so
   light and dark both work. */
.dtp-cal, .dtp-clock {
  box-sizing: border-box; width: 100%; max-width: 340px; padding: 16px 16px 14px;
  border-radius: 22px; background: var(--surface-2); box-shadow: var(--shadow-2);
  color: var(--text); user-select: none; -webkit-user-select: none;
}
.dtp-cal-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.dtp-cal-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.dtp-nav { display: flex; gap: 6px; }
.dtp-round {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-1); cursor: pointer;
  transition: background .12s, color .12s;
}
.dtp-round:hover { background: var(--accent-soft); color: var(--accent); }
.dtp-round:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.dtp-wd, .dtp-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dtp-wd { margin-bottom: 4px; }
.dtp-wd span { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-3); padding: 4px 0; }
.dtp-grid { display: flex; flex-direction: column; gap: 2px; }
.dtp-blank { display: block; }
.dtp-day {
  justify-self: center; width: 38px; height: 38px; max-width: 100%; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background .1s, color .1s;
}
.dtp-day:hover:not(:disabled):not(.is-sel) { background: var(--surface-3); }
.dtp-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.dtp-day.is-today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.dtp-day.is-sel { background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 3px 10px rgba(11, 107, 203, .28); }
.dtp-day.is-sel:focus-visible { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }
.dtp-day:disabled { color: var(--text-3); opacity: .45; cursor: not-allowed; }

.dtp-dial-wrap { display: flex; justify-content: center; }
.dtp-dial { display: block; width: 100%; max-width: 252px; height: auto; aspect-ratio: 1; touch-action: none; cursor: pointer; border-radius: 50%; }
.dtp-dial:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.dtp-face { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.dtp-hand { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.dtp-knob { fill: var(--accent); }
.dtp-pivot { fill: var(--accent); }
.dtp-num {
  fill: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round;   /* stays readable over the hand */
}
.dtp-num-in { fill: var(--text-3); font-size: 11.5px; font-weight: 500; }
.dtp-num.is-sel { fill: var(--accent-ink); font-weight: 700; stroke: none; }
.dtp-clock-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.dtp-readout { display: flex; align-items: baseline; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dtp-ro-part {
  padding: 2px 4px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-3); font: inherit; cursor: pointer; transition: background .1s, color .1s;
}
.dtp-ro-part.is-on { color: var(--accent); background: var(--accent-soft); }
.dtp-ro-part:hover:not(.is-on) { color: var(--text); }
.dtp-ro-part:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.dtp-ro-colon { color: var(--text-3); padding: 0 1px; }
.dtp-hint { padding-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-3); text-align: right; }

/* step 4 of the wizard: the clock and the calendar side by side, stacked when narrow */
.wz-dt { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 18px 24px; margin-top: 4px; }
.wz-dt-col { min-width: 0; margin-bottom: 0; }
.wz-dt-label { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.wz-dt-label .label { margin-bottom: 0; }
.wz-dt-clear { margin-left: auto; gap: 4px; color: var(--text-3); }
@media (max-width: 760px) {
  .wz-dt { grid-template-columns: minmax(0, 1fr); }
  .dtp-cal, .dtp-clock { max-width: 100%; }
}
.wz-free {
  display: flex; align-items: flex-start; gap: 10px; max-width: 700px; margin-top: 4px; padding: 12px 14px;
  border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--surface-2);
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.wz-free svg { flex: none; margin-top: 2px; color: var(--accent); }
.wz-who { max-width: 460px; }
/* five choices: when they no longer fit on one line they become separate pills */
@media (max-width: 760px) {
  .wz-sched .wz-seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .wz-sched .wz-seg .btn, .wz-sched .wz-seg .btn:first-child, .wz-sched .wz-seg .btn:last-child { margin-left: 0; border-radius: 99px; }
}
/* ===== end of the date and time pickers ===== */

/* ===== v12: the user picker (admin/user-picker.js) =====
   A field that shows the chosen person's face, name and site; it unfolds a list
   in place (no popup, no scroll bar) with search, "Nobody in particular" and
   "(+) Add user". */
.usp { position: relative; width: 100%; }
.usp-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 7px 10px 7px 8px;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.usp-btn:hover { border-color: var(--accent-line); }
.usp-btn:focus-visible, .usp.is-open .usp-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.usp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.usp-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usp-name.is-muted { font-weight: 500; color: var(--text-2); }
.usp-site { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usp-caret { flex: none; display: flex; color: var(--text-3); transition: transform .12s; }
.usp.is-open .usp-caret { transform: rotate(180deg); }
.usp-nobody, .usp-plus {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.usp-nobody { border: 1.5px dashed var(--border-2); color: var(--text-3); background: var(--surface-2); }
.usp-plus { background: var(--accent-soft); color: var(--accent); }
.usp-panel {
  margin-top: 6px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface); box-shadow: var(--shadow-2);
}
.usp-search-wrap {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px;
  border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-3);
}
.usp-search-wrap .input { border: 0; background: transparent; box-shadow: none; padding-left: 0; height: 34px; }
.usp-list { display: flex; flex-direction: column; gap: 1px; }
.usp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.usp-row:hover, .usp-row.is-active { background: var(--surface-2); }
.usp-row.is-on .usp-name { color: var(--accent); }
.usp-row .avatar { width: 32px; height: 32px; }
.usp-btn .avatar { width: 30px; height: 30px; }
.usp-tick { flex: none; display: flex; color: var(--accent); }
.usp-add { margin-top: 3px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-s) var(--radius-s); padding-top: 9px; }
.usp-add .usp-name { color: var(--accent); }
.usp-empty { padding: 10px; font-size: 13px; color: var(--text-3); }
.usp-form { max-width: 420px; }
.usp-form-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.usp-form-face { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: inline-flex; }
.usp-form-face img { width: 100%; height: 100%; object-fit: cover; }
.usp-form-face .avatar { width: 64px; height: 64px; font-size: 22px; }
.usp-form-photo-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.usp-form-photo-acts .btn { gap: 6px; }

/* Administration -> Users: the photo in the user window */
.user-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.user-photo .avatar { width: 72px; height: 72px; font-size: 24px; }
.site-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.site-photo-face { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); }
.site-photo-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-thumb { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--border); background: var(--surface-2); }
.user-photo-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.user-photo-acts .btn { gap: 6px; }
/* ===== end of the user picker ===== */

/* v4.9.1: the selected group is highlighted; its settings are in Group Properties */
.cp-block { transition: box-shadow .12s, border-color .12s; }
/* v4.17.0: in the group level's purple (see "the builder's three levels" below) */
.cp-block.is-sel { border-color: var(--lvl-grp); box-shadow: 0 0 0 2px var(--lvl-grp), var(--shadow-2, 0 4px 14px rgba(0,0,0,.08)); }
.cp-block.is-sel > .cp-head { background: var(--lvl-grp-soft); }
/* v4.11.1: the property card titles stay on one line; the checklist card says it covers the whole checklist */
.props-h { white-space: nowrap; flex: none; }
.props-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.props-sub { font-size: 12px; color: var(--text-3); }
.gp-card .pt-img { margin-top: 6px; }   /* v13: the group's picture, a little apart from the interval hint */
/* v4.12: Name and Interval on one row — Name wide, Interval a small field to its right */
.gp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 38%); gap: 0 10px; align-items: start; }
.gp-row > .field { margin-bottom: 10px; min-width: 0; }
.gp-row .gp-iv .dd, .gp-row .gp-iv .dd-btn { width: 100%; min-width: 0; }

/* ---------------------------------------------------------------------------
 * v4.13 — Picture fields: the button under the checklist picture and the editor
 * (admin/pages/checklists.js, openHotspotEditor). The pins themselves are the
 * operator app's (shared/hotspots.js, styled in shared/screens.css).
 * ------------------------------------------------------------------------- */
.pt-hs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
.pt-hs-hint { color: var(--text-3); }
.hse-modal { max-width: 1180px; }
.hse { display: flex; flex-direction: column; gap: 12px; }
.hse-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hse-help { min-width: 0; }
.hse-main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.hse-canvas {
  position: relative; height: min(64vh, 620px); min-height: 280px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--border);
  background: #15191f radial-gradient(circle at 50% 40%, #26303b 0, #15191f 70%);
}
.hse-stage { flex: none; }
.hse-stage .hs-pin { touch-action: none; cursor: grab; }
.hse-stage .hs-pin.is-dragging { cursor: grabbing; z-index: 4; --hs-s: 1.12; }
.hse-side {
  display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 14px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
.hse-hint { margin: 0; line-height: 1.45; }
.hse-list { display: flex; flex-direction: column; gap: 4px; }
.hse-row {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 1px;
  align-items: center; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.hse-row:hover { border-color: var(--border-2); }
.hse-row-dot { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: #15181d; box-shadow: 0 0 0 2px var(--accent); }
.hse-row-t { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hse-row-l { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hse-link { width: 100%; }
@media (max-width: 820px) {
  .hse-main { grid-template-columns: minmax(0, 1fr); }
  .hse-canvas { height: min(52vh, 460px); }
}

/* v4.15.0 — Administration · Clear database: the danger-zone card and its dialog */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.settings-grid > .card { margin: 0; }
.danger-zone { border-color: var(--bad); }
.danger-zone .card-head { color: var(--bad); }
.danger-zone .card-head h2 { color: var(--bad); }
.dz-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dz-text { flex: 1 1 360px; min-width: 0; }
.dz-text p { margin: 4px 0 0; }
.clr-h { font-size: 14px; margin: 14px 0 8px; }
.clr-list { display: flex; flex-direction: column; gap: 6px; }
.clr-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.clr-row input { margin-top: 2px; flex: none; }
.clr-row:has(input:checked) { border-color: var(--bad); background: var(--bad-soft); }
.clr-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.clr-name small { font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.clr-count { flex: none; white-space: nowrap; }
.clr-note { margin: 8px 0 0; }
.clr-confirm { max-width: 220px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.clr-status { min-height: 18px; margin: 8px 0 0; color: var(--text-2); }
.clr-status.is-bad { color: var(--bad); }
.clr [hidden] { display: none; }

/* v4.17.0 — the builder's three levels: Checklist (the app's blue), Group (purple),
   Check point (v4.18.1: green, was teal). The checklist header, each group block, the
   selected row, the level path and the properties panel all carry the colour of their level.
   v4.18.1: each level also has a soft tint of its colour (--lvl-*-tint, about 6 %) as the
   background of the checklist header, the group header bars, the check point rows and the
   properties panel's header; the selected row has a stronger green (--lvl-pt-tint-sel).
   White text on --lvl-pt is 5.0 : 1 (light); dark ink on it is 8.9 : 1 (dark). */
:root {
  --lvl-cl: var(--accent);  --lvl-cl-soft: var(--accent-soft);  --lvl-cl-line: var(--accent-line);
  --lvl-grp: #7b4fd6;       --lvl-grp-soft: #f2edfc;            --lvl-grp-line: #cfbdf3;
  --lvl-pt: #15803d;        --lvl-pt-soft: #e3f5e8;             --lvl-pt-line: #9ed8b1;
  --lvl-on-ink: #ffffff;
  --lvl-cl-tint:  color-mix(in srgb, var(--lvl-cl) 6%, transparent);
  --lvl-grp-tint: color-mix(in srgb, var(--lvl-grp) 7%, transparent);
  --lvl-pt-tint:  color-mix(in srgb, var(--lvl-pt) 5%, transparent);
  --lvl-pt-tint-sel: color-mix(in srgb, var(--lvl-pt) 15%, transparent);
}
:root[data-theme="dark"] {
  --lvl-grp: #a98bf5;       --lvl-grp-soft: #221b38;            --lvl-grp-line: #4b3c7a;
  --lvl-pt: #4ade80;        --lvl-pt-soft: #0f2a19;             --lvl-pt-line: #23613a;
  --lvl-on-ink: #08121c;
  --lvl-cl-tint:  color-mix(in srgb, var(--lvl-cl) 10%, transparent);
  --lvl-grp-tint: color-mix(in srgb, var(--lvl-grp) 12%, transparent);
  --lvl-pt-tint:  color-mix(in srgb, var(--lvl-pt) 6%, transparent);
  --lvl-pt-tint-sel: color-mix(in srgb, var(--lvl-pt) 17%, transparent);
}
.lvl-card > .card-head { background: var(--lvl-c-tint); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
/* v4.25: the whole properties card takes its level's tint (checklist blue, group purple,
   check point green); the title bar a touch stronger, the fields stay white */
.lvl-card { background: linear-gradient(var(--lvl-c-tint), var(--lvl-c-tint)), var(--surface); border-color: var(--lvl-c-line, var(--border)); }
.lvl-card > .card-head { background: var(--lvl-c-tint); }
.lvl-cl  { --lvl-c: var(--lvl-cl);  --lvl-c-soft: var(--lvl-cl-soft);  --lvl-c-line: var(--lvl-cl-line);  --lvl-c-tint: var(--lvl-cl-tint); }
.lvl-grp { --lvl-c: var(--lvl-grp); --lvl-c-soft: var(--lvl-grp-soft); --lvl-c-line: var(--lvl-grp-line); --lvl-c-tint: var(--lvl-grp-tint); }
.lvl-pt  { --lvl-c: var(--lvl-pt);  --lvl-c-soft: var(--lvl-pt-soft);  --lvl-c-line: var(--lvl-pt-line);  --lvl-c-tint: var(--lvl-pt-tint); }

/* the checklist header: a click on its name or site chip selects the checklist */
.cl-head {
  padding: 6px 10px 6px 8px; border-radius: var(--radius-s);
  cursor: pointer; transition: background .12s;
}
.cl-head { background: var(--lvl-cl-tint); }   /* v4.18.1: the checklist level's soft blue */
.cl-head:hover { background: color-mix(in srgb, var(--lvl-cl) 11%, transparent); }
.cl-head.is-sel { background: var(--lvl-cl-soft); }
.cl-head > a { cursor: pointer; }

/* the selected row (check point): a soft green background (v4.18.1: a stronger green tint
   than the other check point rows) */
.q-row.pt-row[data-q] { cursor: pointer; }
.q-row.pt-row.is-sel, .q-row.pt-row.is-heading.is-sel { background: var(--lvl-pt-soft); }
/* v4.18.1: in the builder the group header bars are soft purple and the check point rows
   soft green (a screen / heading row keeps its grey); the selected row a stronger green */
.bld-host .cp-block:not(.is-flat) > .cp-head { background: var(--lvl-grp-tint); }
.bld-host .cp-block.is-sel:not(.is-flat) > .cp-head { background: var(--lvl-grp-soft); }
.bld-host .q-row.pt-row[data-q]:not(.is-heading) { background: var(--lvl-pt-tint); }
.bld-host .q-row.pt-row[data-q].is-sel { background: var(--lvl-pt-tint-sel); }
.q-row.pt-row.is-sel .acts { opacity: 1; }

/* v4.18.1: with the Tree check box off the builder looks as in v4.17.1: no rail gutter, the
   original column widths and the coloured edges (a blue edge on the checklist header, a
   purple left edge on each group block, a green bar on the selected row and a top edge on
   the properties panel). With the Tree on (the default) the rail carries the level colours
   instead (see "the builder's rail" below). */
.bld-host:not(.is-tree) .cl-head, .bld-host:not(.is-tree) .rail-head { border-left: 3px solid var(--lvl-cl); }
.bld-host:not(.is-tree) .cp-block:not(.is-flat) { border-left: 3px solid var(--lvl-grp); }
.bld-host:not(.is-tree) .q-row.pt-row.is-sel { box-shadow: inset 3px 0 0 var(--lvl-pt); }
.bld-host:not(.is-tree) .lvl-card { border-top: 3px solid var(--lvl-c); }
.bld-host:not(.is-tree) .rail-node { display: none; }

/* the properties panel: its title icon in the colour of its level */
.lvl-card > .card-head:not(.props-head) { gap: 8px; }
.lvl-ico { flex: none; display: flex; color: var(--lvl-c); }
.props-title { display: flex; align-items: center; gap: 8px; }
.qp-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
.qp-flags .check { min-width: 0; }

/* the level path above the panel: Checklist › Group › Check point */
.lvl-path {
  display: flex; align-items: center; gap: 3px; min-width: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.lvl-chip {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 28px; padding: 0 10px 0 8px;
  border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600;
  line-height: 1; white-space: nowrap;
}
.lvl-chip svg { flex: none; }
.lvl-chip .lvl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the lit level takes the room it needs; the levels above share what is left; a level
   below with nothing selected is a grey icon (its word is the hover text) */
.lvl-chip.is-on { flex: 0 1 auto; background: var(--lvl-c); border-color: var(--lvl-c); color: var(--lvl-on-ink); }
.lvl-chip.is-up { flex: 0 1 auto; max-width: 28%; background: var(--lvl-c-soft); border-color: var(--lvl-c-line); color: var(--lvl-c); cursor: pointer; }
.lvl-chip.is-up:hover { border-color: var(--lvl-c); }
.lvl-chip.is-up:focus-visible { outline: 2px solid var(--lvl-c); outline-offset: 1px; }
.lvl-chip.is-off { flex: none; width: 30px; padding: 0; justify-content: center; background: var(--surface-2); border-color: var(--border); color: var(--text-3); }
.lvl-chip.is-off .lvl-name { display: none; }
.lvl-sep { flex: none; display: flex; color: var(--text-3); }

/* v4.17.0 — Edit question: Title on top, then Type | Description */
.q-type-desc { align-items: flex-start; }
.q-type-desc > .field:first-child { flex: 0 0 38%; }
.q-desc { resize: vertical; min-height: 64px; line-height: 1.45; }

/* ---------------------------------------------------------------------------
 * v4.18.0 — the builder's rail (admin/pages/checklists.js; the dots come from
 * admin/pt-table.js with its `rail` option). v4.18.1: shown while the "Tree"
 * check box is on (the default; .is-tree on the builder's host); off, the nodes
 * are hidden and none of the rules below apply. A metro line down the left of the
 * builder: a big blue station on the checklist header, a purple stop on each
 * group's header and a small teal dot on each row, joined by lines in the level
 * colours: the blue trunk runs from the station past every group's stop, and
 * from each group a purple branch bends into its table and runs down through its
 * dots (in a flat checklist the blue line bends straight into the table).
 *
 * Everything is drawn here, on the elements themselves, so the rail follows the
 * real layout by itself: a folded group keeps only its stop, and rows or groups
 * that are added, removed or dragged take their part of the rail with them.
 *
 * Geometry, measured from the left of the builder's main column (v4.18.3, see
 *   below): the gutter is --rail-g (28px); each table row gets a 24px lane on
 *   the left (12px more than before). To keep every column in view
 *   at 1440px the table's type, barcode and RFID columns give up a few pixels
 *   and the text column may shrink to 110px.
 * ------------------------------------------------------------------------- */
:root { --rail-g: 28px; }
.is-tree .bld-rail { padding-left: var(--rail-g); }
/* one column (narrow windows): the panels below line up with the cards */
@media (max-width: 1100px) { .is-tree .builder > .bld-rail + * { margin-left: var(--rail-g); } }

.rail-node {
  position: absolute; z-index: 2; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; transition: box-shadow .12s, transform .12s;
}
.rail-node svg { display: block; }

/* v4.18.3 — one geometry for every line: 3px wide (--rail-w), the trunk's centre at 10.5px
   from the left of the main column (it covers 9–12px). Every node has an odd size and is
   centred on its line (station 21px, stops 17px, dots 13px), drawn on top of the lines with
   no gap ring, so the line runs straight behind it. Measured from a card's inside (29px:
   the cards start at 28px and have a 1px border) the trunk is at -20px…-17px; in a table
   row (which starts at the card's inside) the branch's lane is at 9–12px. */
:root { --rail-w: 3px; }

/* the station: the checklist header (the setup wizard: its own row, .rail-head) */
.cl-head { position: relative; }
.is-tree .cl-head { padding-left: var(--rail-g); }
.is-tree .cl-head::after, .is-tree .rail-head::after {
  content: ""; position: absolute; left: 9px; width: var(--rail-w); top: 50%; bottom: -16px;
  background: var(--lvl-cl); pointer-events: none;
}
.rail-station {
  left: 0; top: 50%; width: 21px; height: 21px; margin-top: -10.5px;
  background: var(--lvl-cl); color: var(--lvl-on-ink);
}
.rail-station:hover { transform: scale(1.08); }
.cl-head.is-sel > .rail-station, .rail-head.is-sel > .rail-station {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvl-cl) 32%, transparent);
}
.rail-head {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 34px;
  margin: 0 0 12px; padding: 6px 10px 6px 8px;
  border-radius: var(--radius-s); cursor: pointer; transition: background .12s;
}
.rail-head .spacer { flex: 1; }
.is-tree .rail-head { padding-left: var(--rail-g); }   /* v4.18.4: above both columns, like the page header */
.is-tree .rail-head::after { bottom: -12px; }
.rail-head { background: var(--lvl-cl-tint); }   /* v4.18.1: the checklist level's soft blue */
.rail-head:hover { background: color-mix(in srgb, var(--lvl-cl) 11%, transparent); }
.rail-head.is-sel { background: var(--lvl-cl-soft); }
.rail-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; color: var(--text); }

/* the trunk past the toolbar above a flat table (the toolbar starts at 28px) */
.is-tree .bld-rail .pt-toolbar { position: relative; }
.is-tree .bld-rail .pt-toolbar::before {
  content: ""; position: absolute; left: -19px; width: var(--rail-w); top: 0; bottom: -14px;
  background: var(--lvl-cl); pointer-events: none;
}

/* groups: the blue trunk comes down into each group's stop (ending at the middle of the
   last one) and, below every group but the last, on past the block to the next one */
.is-tree .bld-rail .cp-block { position: relative; --rail-br: var(--lvl-grp); }
.is-tree .bld-rail .cp-head { position: relative; }
.is-tree .bld-rail .cp-block:not(.is-flat) > .cp-head::before {
  content: ""; position: absolute; left: -20px; width: var(--rail-w); top: -20px; bottom: 50%;
  background: var(--lvl-cl); pointer-events: none;
}
.is-tree .bld-rail .cp-list > .cp-block:not(.is-flat):not(:nth-last-child(2))::before {
  content: ""; position: absolute; left: -20px; width: var(--rail-w); top: 0; bottom: -1px;
  background: var(--lvl-cl); pointer-events: none;
}
/* the stop: on the trunk, at the vertical middle of its header (also when the header wraps
   onto two lines); the branch leaves from the same height */
.rail-stop {
  z-index: 3; left: -27px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px;
  background: var(--lvl-grp); color: var(--lvl-on-ink);
}
.rail-stop:hover { transform: scale(1.1); }
.cp-block.is-sel .rail-stop { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvl-grp) 32%, transparent); }

/* the branch: purple all the way. It leaves the stop's centre to the right at the stop's
   height, turns down with a rounded elbow (8px) into the table's lane and runs to the
   bottom of the header; the rows carry it on (a folded group has none) */
.is-tree .bld-rail .cp-block:not(.is-flat) > .cp-head::after {
  content: ""; position: absolute; z-index: 1; box-sizing: border-box;
  left: -19px; width: 31px; top: calc(50% - var(--rail-w) / 2); bottom: -1px;
  border-top: var(--rail-w) solid var(--rail-br); border-right: var(--rail-w) solid var(--rail-br);
  border-top-right-radius: 8px; pointer-events: none;
}
.is-tree .bld-rail .cp-block.is-min > .cp-head::after { display: none; }

/* a flat checklist: the blue line comes down beside the table and bends straight into it */
.is-tree .bld-rail .cp-block.is-flat { --rail-br: var(--lvl-cl); }
/* (v4.18.3: two rounded bends — down → right at the trunk, right → down into the lane) */
.is-tree .bld-rail .cp-block.is-flat::after {
  content: ""; position: absolute; z-index: 1; box-sizing: border-box; left: -20px; width: 20px; top: -1px; height: 17px;
  border-left: var(--rail-w) solid var(--lvl-cl); border-bottom: var(--rail-w) solid var(--lvl-cl);
  border-bottom-left-radius: 8px; pointer-events: none;
}
.is-tree .bld-rail .cp-block.is-flat::before {
  content: ""; position: absolute; z-index: 1; box-sizing: border-box; left: -1px; top: 13px;
  width: 13px; height: 14px; border-top: var(--rail-w) solid var(--rail-br); border-right: var(--rail-w) solid var(--rail-br);
  border-top-right-radius: 8px; pointer-events: none;
}
.is-tree .bld-rail .cp-block.is-flat .pt-table > .pt-head::before { top: 20px; }

/* the table's lane: the branch runs down through the header row and every row, and ends
   at the middle of the last one */
.is-tree .bld-rail .pt-table:not(.pt-basic) { --pt-cols: 18px 26px 24px 146px minmax(100px, 1fr) 132px 90px 34px 34px 34px 96px; }   /* v4.19.0: for the icon column Type 150 → 146, Barcode 140 → 132, MORE + bin 104 → 96px */
.is-tree .bld-rail .pt-table > .pt-head, .is-tree .bld-rail .pt-table > .q-row { position: relative; padding-left: 24px; }
.is-tree .bld-rail .pt-table > .pt-head::before, .is-tree .bld-rail .pt-table > .q-row::before {
  content: ""; position: absolute; left: 9px; width: var(--rail-w); top: 0; bottom: -1px;
  background: var(--rail-br); pointer-events: none;
}
.is-tree .bld-rail .pt-table > .q-row:nth-last-child(2)::before { bottom: 50%; }

/* a check point's dot, centred on the lane; lit (filled, with a ring) when its row is selected */
.rail-dot {
  z-index: 1; left: 4px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  background: var(--surface); border: var(--rail-w) solid var(--lvl-pt);
}
.q-row:hover > .rail-dot { transform: scale(1.2); }
.q-row.is-sel > .rail-dot {
  left: 2px; width: 17px; height: 17px; margin-top: -8.5px; transform: none;
  background: var(--lvl-pt); border-color: var(--lvl-pt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvl-pt) 32%, transparent);
}

/* ---------------------------------------------------------------------------
 * v4.18.1 — the level dots in the builder's header (and the wizard's station
 * row): Checklist · Group · Check point as three 34px circles with their counts,
 * joined by a line in the level colours, the level's name under each. The
 * selected level has the halo: a white gap and a soft ring in its colour. They
 * take 32px of the row's height (negative margins), so the header does not grow.
 * Beside them the "Tree" check box (the app's .check style).
 * ------------------------------------------------------------------------- */
/* v4.22 — drawn like the original concept (Zoom steps): 38px circles, each with a white ring
   (the gap) and a soft drop shadow, the count in bold white, a bold dark label under each; a
   4px line between the circles' edges in a gradient from one level's colour to the next; the
   selected level gets one more soft ring (the halo) in its colour. The block (circles + labels,
   52px) is centred on the header row; it borrows 5px above and below, so the row grows by 8px. */
.lvl-dots { position: relative; flex: none; display: flex; align-items: flex-start; margin: -5px 2px; }
.lvl-dot {
  --lvl-next: var(--lvl-c);
  position: relative; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer;
}
.lvl-dot.lvl-cl { --lvl-next: var(--lvl-grp); }
.lvl-dots.is-flat .lvl-dot.lvl-cl, .lvl-dot.lvl-grp { --lvl-next: var(--lvl-pt); }
/* the line to the next circle: from this circle's ring to the next one's (the rings are 3px) */
.lvl-dot:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; height: 4px; border-radius: 2px;
  left: calc(50% + 22px); width: calc(100% - 44px);
  background: linear-gradient(90deg, var(--lvl-c), var(--lvl-next)); pointer-events: none;
}
.lvl-dot-c {
  position: relative; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lvl-c); color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--surface), 0 3px 8px rgba(15, 23, 42, .22);
  transition: box-shadow .12s, transform .12s;
}
.lvl-dot.is-cur .lvl-dot-c {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px color-mix(in srgb, var(--lvl-c) 30%, transparent), 0 3px 8px rgba(15, 23, 42, .22);
}
:root[data-theme="dark"] .lvl-dot-c { color: var(--lvl-on-ink); box-shadow: 0 0 0 3px var(--surface), 0 3px 8px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .lvl-dot.is-cur .lvl-dot-c {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px color-mix(in srgb, var(--lvl-c) 34%, transparent), 0 3px 8px rgba(0, 0, 0, .45);
}
.lvl-dot-l { font-size: 11.5px; line-height: 12px; font-weight: 700; white-space: nowrap; color: var(--text); }
.lvl-dot:hover:not(:disabled) .lvl-dot-c { transform: scale(1.06); }
.lvl-dot:disabled { cursor: default; }
.lvl-dot:disabled .lvl-dot-c { background: var(--surface-2); color: var(--text-3); box-shadow: 0 0 0 3px var(--surface), inset 0 0 0 1px var(--border); }
.lvl-dot:disabled .lvl-dot-l { color: var(--text-3); }
.lvl-dot:focus-visible { outline: none; }
.lvl-dot:focus-visible .lvl-dot-c { outline: 2px solid var(--lvl-c); outline-offset: 6px; }
.check.tree-tog { flex: none; margin: 0 8px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); gap: 6px; user-select: none; }

/* ---------------------------------------------------------------------------
 * v4.18.4 — the level path in the builder's header row (the setup wizard: its
 * station row), at the right in the right column's width (320px; the row's 10px
 * right padding is given back), so the properties panel below starts level with
 * the first group card (admin/pages/checklists.js, placePath / alignRight). The
 * box borrows 6px above and below, so the row does not grow. In one column
 * (narrow windows) the path goes back on top of the panel and the slot is hidden.
 * ------------------------------------------------------------------------- */
.head-path { flex: 0 0 320px; width: 320px; margin: -6px -10px -6px 0; min-width: 0; }
/* v4.22: in the header the chips stand on the header's own background, with no box around them */
.head-path .lvl-path { background: transparent; border-color: transparent; box-shadow: none; }
/* the title keeps its room first; the site and category chips give way before it (with
   "…", the full text is their hover text); the version never wraps */
.cl-head > h1 { flex: 0 0.05 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-head > .badge { flex: 0 20 auto; min-width: 64px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.cl-head > .muted-2 { flex: none; white-space: nowrap; }
/* the row has 320px less room now: slightly tighter spacing, so the title keeps as much as it can */
@media (min-width: 1101px) {
  .cl-head { gap: 8px; }
  .cl-head .lvl-dot { width: 70px; }   /* v4.22: 64 → 70px for the bigger circles and bold labels */
}
@media (min-width: 1101px) { .cl-head { flex-wrap: nowrap; } }
@media (max-width: 1100px) { .head-path { display: none; } }

/* v4.19.0 — check point icons ------------------------------------------------ */

/* the icon cell of a row (admin/pt-table.js): the icon in its colour, or a faint "+" */
.q-row.pt-row .pt-ico {
  width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer;
}
.q-row.pt-row .pt-ico svg { display: block; }
.q-row.pt-row .pt-ico.is-empty { color: var(--text-3); opacity: .45; border: 1px dashed var(--border-2, var(--border)); }
.q-row.pt-row:hover .pt-ico.is-empty, .q-row.pt-row .pt-ico.is-empty:focus-visible { opacity: .9; }
.q-row.pt-row .pt-ico:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border); }
.q-row.pt-row .pt-ico:disabled { cursor: default; }
.q-row.pt-row .pt-ico.is-saved { box-shadow: 0 0 0 2px var(--ok); }

/* the picker popover (admin/icon-picker.js) */
.ip-pop {
  position: absolute; z-index: 1300; width: 344px; max-width: calc(100vw - 16px); padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 14px 40px rgba(10, 20, 30, .22); display: flex; flex-direction: column; gap: 10px;
}
.ip-head { display: flex; align-items: center; gap: 8px; }
.ip-head strong { font-size: 14px; }
.ip-head .ip-count { flex: 1; font-size: 12px; color: var(--text-3); }
.ip-search { width: 100%; }
.ip-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-sw {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); cursor: pointer;
  box-shadow: 0 0 0 1px var(--border); display: inline-flex; align-items: center; justify-content: center;
}
.ip-sw.is-default { background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 700; }
.ip-sw.is-on { box-shadow: 0 0 0 2px var(--text); }
.ip-scroll { max-height: 264px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.ip-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; color: var(--text); }
.ip-ic {
  aspect-ratio: 1; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit;
}
.ip-ic:hover, .ip-ic:focus-visible { background: var(--surface-2); border-color: var(--border); outline: none; }
.ip-ic.is-on { background: var(--accent-soft); border-color: var(--accent); }
.ip-ic svg { display: block; }
.ip-empty { padding: 18px 4px; text-align: center; font-size: 13px; color: var(--text-3); }
.ip-foot { display: flex; justify-content: flex-start; }

/* the Icon field in Check point Properties and the Edit question window */
.ip-field { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; justify-content: flex-start; }
.ip-field-ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.ip-field-ico.is-empty { color: var(--text-3); border: 1px dashed var(--border); border-radius: 5px; }
.ip-field-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-field-txt.is-key { text-transform: capitalize; }
.lv-num { font-size: .9em; opacity: .72; }

/* v4.26: Group Properties — "Click in list to approve" */
.gp-tap > .pt-img-show { display: flex; margin: 0; color: var(--text); font-weight: 400; font-size: 13px; }

/* ---------------------------------------------------------------------------
 * v4.28 — Parts: a round photo from the part's photo link, red stock at 0 or below,
 * the photo preview in the New / Edit part dialog; the parts of a "Parts used"
 * answer on a check; the sub-units on the unit card.
 * ------------------------------------------------------------------------- */
.parts-table .parts-photo-col { width: 52px; }
.parts-table td.stock-low { color: var(--bad); font-weight: 700; }
.part-photo-row { display: flex; gap: 12px; align-items: flex-start; }
.part-photo-prev {
  flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.part-photo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.part-photo-ph { display: flex; color: var(--text-3); }
.part-photo-ph.is-broken { color: var(--bad); }
.table.parts-used { margin: 2px 0 0; background: var(--surface-2); border-radius: var(--radius-s); }
.table.parts-used th, .table.parts-used td { padding: 5px 8px; font-size: 12.5px; }
.table.parts-used tfoot td { border-top: 1px solid var(--border); }

.subunits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.subunit-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.subunit-row:last-child { border-bottom: 0; }
.subunit-row:hover { background: var(--surface-2); }
.subunit-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subunit-row .su-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subunit-row .su-depth { color: var(--text-3); display: flex; }
.uh-parent { display: inline-flex; align-items: center; gap: 4px; }
.uh-parent a { color: var(--accent); text-decoration: none; font-weight: 600; }
.uh-parent a:hover { text-decoration: underline; }

/* =====================================================================
   v5.0 — demo data: the wizard's "Create demo data?" question and result,
   the Settings card, the Dashboard banner, the create / clear dialogs.
   Demo data wears the group level's purple (--lvl-grp), so it never reads
   as the customer's own (blue) data. admin/demo-data.js, admin/pages/setup.js.
   ===================================================================== */
.demo-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; background: var(--lvl-grp-soft); color: var(--lvl-grp);
}
.card-head .demo-ico { margin-right: 2px; }
.demo-badge { background: var(--lvl-grp-soft); color: var(--lvl-grp); margin-left: auto; }

/* the wizard question: two cards like step 3's */
.demo-q { max-width: none; }
.demo-q .card-head { gap: 8px; }
.demo-q-intro { margin: 0 0 12px; }
.demo-opts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 760px) { .demo-opts { grid-template-columns: minmax(0, 1fr); } }
.demo-opt[data-demo="yes"] .kind-ico { background: var(--lvl-grp-soft); color: var(--lvl-grp); }
.demo-opt[data-demo="yes"].is-on { border-color: var(--lvl-grp); background: var(--lvl-grp-soft); box-shadow: 0 0 0 1px var(--lvl-grp); }
.demo-opt[data-demo="yes"].is-on .kind-ico { background: var(--lvl-grp); color: var(--lvl-on-ink); }
.demo-opt[data-demo="yes"].is-on .tpl-check { background: var(--lvl-grp); color: var(--lvl-on-ink); }
.demo-opt[data-demo="no"] .kind-ico { background: var(--surface-2); color: var(--text-2); }
.demo-opt[data-demo="no"].is-on .kind-ico { background: var(--accent); color: var(--accent-ink); }
.demo-q-foot { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.demo-q .setup-note { margin: 0; max-width: none; }

/* the demo units: round photo, name, code */
.demo-units { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.demo-unit {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.demo-unit img { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.demo-unit-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.demo-unit-txt strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-unit-txt small { font-size: 11px; color: var(--text-3); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* counts */
.demo-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.demo-count {
  display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--lvl-grp-soft); color: var(--lvl-grp); font-size: 12.5px;
}
.demo-count b { font-weight: 700; }

/* the Settings card */
.demo-card.has-demo { border-color: var(--lvl-grp-line); }
.demo-card .card-head { gap: 8px; }
.demo-card-text { margin: 0; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.demo-phone-btn { border-color: var(--lvl-grp-line); color: var(--lvl-grp); }
.demo-phone-btn:hover:not(:disabled) { background: var(--lvl-grp-soft); border-color: var(--lvl-grp); }

/* the Dashboard banner */
.demo-banner {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap;
  border-color: var(--lvl-grp-line); background: linear-gradient(90deg, var(--lvl-grp-soft), var(--surface) 70%);
}
.demo-banner .demo-ico { width: 40px; height: 40px; border-radius: 10px; }
.demo-banner .txt { flex: 1 1 320px; min-width: 0; }
.demo-banner .txt h2 { font-size: 15px; margin: 0; }
.demo-banner .txt p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.demo-banner-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* the wizard's result */
.demo-done {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 14px 16px;
  border: 1px solid var(--lvl-grp-line); border-radius: var(--radius-l); background: var(--lvl-grp-soft);
}
.demo-done .demo-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); }
.demo-done .txt { flex: 1 1 320px; min-width: 0; }
.demo-done h3 { margin: 0; font-size: 15px; }
.demo-done p { margin: 3px 0 8px; }
.demo-done-acts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.demo-done .demo-phone-btn { background: var(--surface); }

/* the dialogs */
.demo-preview { margin-top: 6px; min-height: 60px; }
.demo-plan { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.demo-kept { margin-top: 6px; }
.demo-kept ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.demo-kept .clr-h { display: flex; align-items: center; gap: 4px; color: var(--ok); }

/* v5.0 go-live ------------------------------------------------------------ */
.text-bad { color: var(--bad); }

/* Start free trial (admin/signup.html) — the login card's look, phone-friendly: 16px inputs, 44px buttons */
.signup-wrap { align-items: flex-start; padding: 32px 16px 48px; }
.signup-box { width: 100%; max-width: 440px; margin: auto; }
.signup-card { width: 100%; }
.signup-card .card-body { padding: 22px 22px 18px; }
.signup-h { margin: 0 0 4px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.signup-sub { margin: 0 0 16px; font-size: 14px; }
.signup-card .input { height: 44px; font-size: 16px; }
.signup-card .btn-lg { min-height: 44px; margin-top: 6px; }
.signup-card .field { margin-bottom: 12px; }
.signup-opt { font-weight: 400; }
.signup-account { margin: 14px 0 0; text-align: center; font-size: 13px; }
.signup-alert { margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius-s); background: var(--bad-soft); color: var(--bad); font-size: 13.5px; }
.signup-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.login-trial { margin-top: 12px; font-weight: 600; text-decoration: none; }
.login-trial:hover { text-decoration: none; }
@media (max-width: 480px) {
  .signup-wrap { padding: 18px 16px 40px; }
  .signup-card .card-body { padding: 18px 16px 16px; }
}

/* the house data table (admin/data-table.js) */
.dt-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dt-card { margin: 0; overflow: hidden; }
.dt-wrap { max-width: 100%; }
.table.dt { table-layout: fixed; min-width: 100%; width: max-content; }
.table.dt th, .table.dt td { overflow: hidden; text-overflow: ellipsis; }
.table.dt thead th { position: relative; white-space: nowrap; }
.table.dt th.is-sorted { color: var(--text); }
.dt-th { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.dt-label { overflow: hidden; text-overflow: ellipsis; }
.dt-arrow { font-size: 9px; color: var(--accent); min-width: 8px; }
.dt-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
.dt-resize::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: var(--border-2); opacity: 0; transition: opacity .12s; }
.table.dt thead th:hover .dt-resize::after, body.dt-resizing .dt-resize::after { opacity: 1; }
body.dt-resizing { cursor: col-resize; user-select: none; }
.dt-filters th { padding: 4px 6px 8px; background: var(--surface); text-transform: none; letter-spacing: 0; }
.dt-filter { height: 30px; font-size: 12.5px; padding: 0 8px; width: 100%; min-width: 0; }
.dt-empty td { padding: 0; }
.dt-menu { position: absolute; z-index: 300; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.dt-menu-head { padding: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dt-menu-item { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--radius-s); background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dt-menu-item:hover:not(:disabled) { background: var(--surface-2); }
.dt-menu-item:disabled { opacity: .45; cursor: not-allowed; }
.dt-menu-item.is-danger { color: var(--bad); }
.dt-menu-all { margin-top: 4px; justify-content: center; }

/* KPI chips that filter (Customers) */
.kpi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kpi-chip { display: inline-flex; align-items: baseline; gap: 7px; min-height: 36px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s; }
.kpi-chip:hover { border-color: var(--accent-line); }
.kpi-chip .kpi-n { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-chip.info .kpi-n { color: var(--info); }
.kpi-chip.ok .kpi-n { color: var(--ok); }
.kpi-chip.bad .kpi-n { color: var(--bad); }
.kpi-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }

/* Customers */
.cust-company .strong { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cust-here { font-size: 10.5px; }
.cust-ws { font-family: var(--mono); font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 5px; padding: 2px 6px; display: inline-block; }
.cust-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cust-menu { min-width: 210px; }

/* Settings cards: Support access log, Download data dump */
.golive-card .card-head { gap: 8px; }
.golive-card .dt-toolbar { margin-bottom: 6px; }
.golive-list { margin: 0 0 14px; padding-left: 18px; color: var(--text-2); }
.golive-list li { margin: 3px 0; }
.golive-list code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.table.dt td { white-space: nowrap; }
.table.dt td.dt-wrap-cell { white-space: normal; }

/* v5.0: the admin shell on a phone (≤ 480 px) — the sidebar becomes an icon rail so a page keeps the width
   (before, the 232 px sidebar left a 390 px phone about 160 px of page). Wider screens are unchanged. */
@media (max-width: 480px) {
  .sidebar { width: 52px; }
  .sidebar-brand { padding: 0; justify-content: center; gap: 0; font-size: 0; }
  .sidebar-nav { padding: 8px 6px; }
  .sidebar-group { margin-bottom: 6px; }
  .sidebar-group-label { font-size: 0; height: 1px; padding: 0; margin: 6px 4px; background: rgba(255,255,255,.1); }
  .nav-item { justify-content: center; padding: 10px 0; position: relative; }
  .nav-item > span:not(.pill-count) { display: none; }
  .nav-item .pill-count { position: absolute; top: 1px; right: 0; font-size: 9px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; }
  .sidebar-foot { padding: 8px 4px; }
  .sidebar-foot > .flex { flex-direction: column; gap: 6px; }
  .sidebar-foot .flex-col { display: none; }
  .topbar { padding: 0 8px 0 12px; gap: 2px; }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  .topbar h1 { flex: 0 1 auto; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .spacer { display: none; }
  .topbar .btn .small { display: none; }
  .content { padding: 14px 12px; min-width: 0; }
  .content .tabs { overflow-x: auto; flex-wrap: nowrap; }
}