/* features.css: built by build_features_css.py from feat-expenses.css, feat-finish.css, r5-sales.css, r5-diary.css, r5-forms.css, r6-actuals.css, feat-access.css, feat-videos.css, feat-password.css, feat-blockers.css, fix-myhr.css, feat-design.css, feat-survey.css, feat-survey-blinds.css, feat-surveys.css. Edit those files, then rebuild; don't edit this one. */

/* ==== feat-expenses.css ==== */
/* Expenses round 6 (feat-expenses.js): receipt reading, charged to project / office / van, monthly pack. */
/* Charge it to: the same big buttons as "How did you pay?" */
.exp-charge-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exp-charge-b { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 10px 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.exp-charge-b svg { width: 22px; height: 22px; flex: none; }
.exp-charge-b span { display: flex; flex-direction: column; min-width: 0; }
.exp-charge-b b { font-size: 14px; }
.exp-charge-b small { color: var(--muted); font-size: 12.5px; }
.exp-charge-b.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.exp-charge-b.on small { color: var(--side-text); }
@media (max-width: 420px) { .exp-charge-b { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 70px; } }
.exp-van-c { display: inline-flex; align-items: center; gap: 4px; }
.exp-van-c svg { width: 16px; height: 16px; flex: none; }
.exp-ocr { position: sticky; top: 0; z-index: 4; box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.35; background: var(--paper); border: 1px solid var(--line); }
.exp-ocr.busy { border-color: var(--gold, #B0984E); }
.exp-ocr.ok { background: var(--green-bg, #EAF3EC); border-color: var(--green, #2F7A45); }
.exp-ocr.none { background: var(--amber-bg, #FBF3E2); border-color: var(--amber, #B0842E); }
.exp-spin { flex: none; width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: exp-spin 0.8s linear infinite; }
@keyframes exp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .exp-spin { animation: none; } }
.fld.exp-ocr-hit input, .fld.exp-ocr-hit select, .fld.exp-ocr-hit .pp input { background: var(--green-bg, #EAF3EC); }
.fld.exp-ocr-hit > label::after { content: ' · from the receipt'; color: var(--green, #2F7A45); font-weight: 400; font-size: 12px; }
.exp-pay.exp-ocr-hit > label::after, .exp-charge.exp-ocr-hit > label::after { content: ' · from the receipt'; }
.exp-spend { margin-bottom: 12px; }
.exp-spend-note { grid-column: 1 / -1; margin: 0; }
.exp-vancost .sec-h { flex-wrap: wrap; gap: 8px; }
.exp-vancost .tiles { margin-bottom: 10px; }
.exp-packwho { margin: 0 0 12px; align-items: center; }
.exp-packbar { margin: 4px 0 12px; align-items: center; }
.exp-packgo { min-height: 48px; }
.exp-packprog { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 12px; }
.exp-packdone { max-width: none; margin-bottom: 12px; padding: 16px 18px; border-color: var(--green, #2F7A45); }
.exp-packdone h2 { font-size: 17px; }
.exp-packdone .chips { margin-top: 8px; }
.exp-rules-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.exp-rule { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) auto auto; gap: 8px; align-items: center; }
.exp-rule select, .exp-rule input { height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font: inherit; background: var(--paper); min-width: 0; }
.exp-rule-add { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; margin-top: 6px; }
@media (max-width: 640px) {
  .exp-rule, .exp-rule-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-top: 1px solid var(--line-2); }
  .exp-rule > b, .exp-rule-add > input { grid-column: 1 / -1; }
  .exp-rule-by { grid-column: 1 / -1; }
}

/* ==== feat-finish.css ==== */
/* Finish visit (feat-finish.js): the one-screen close-out and the Arrived / Leaving taps on the visit page. Phone first. */
.fin-stamps .fin-stamp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-stamps .fin-stamp-row .btn { height: 56px; font-size: 16px; white-space: normal; }
.fin-stamps .fin-stamp-row .btn.on { background: var(--green-bg); border-color: #BCD3B7; color: var(--green); }
.fin-back { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.fin-help { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.fin-drawer .form-bar .btn.dark { min-height: 48px; }
.fin-times .fin-tgrid { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 8px; }
.fin-times .fin-t { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.fin-times .fin-t input { min-height: 48px; font-size: 16px; }
.fin-have { margin: 0; font-size: 14px; background: var(--green-bg); color: var(--green); padding: 10px 12px; border-radius: 9px; }
.fin-work-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-say.on { background: #9B3B32; border-color: #9B3B32; color: #fff; }
.fin-say svg { width: 16px; height: 16px; }
.fin-more { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px; background: var(--cell); }
.fin-more > summary { cursor: pointer; padding: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); min-height: 44px; }
.fin-more-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 0 12px 12px; }
.fin-below { display: flex; flex-direction: column; gap: 14px; }
.fin-add { display: flex; gap: 8px; }
.fin-add input { flex: 1; min-width: 0; }
.fin-add .btn { height: 44px; }
.fin-snags-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fin-snags-l li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--amber-bg); color: var(--amber); border-radius: 8px; padding: 6px 6px 6px 12px; font-size: 14px; }
.fin-snags-l li span { min-width: 0; overflow-wrap: anywhere; }
.fin-snags-l .ph-x { position: static; width: 34px; height: 34px; flex-shrink: 0; }
.fin-sig-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fin-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fin-seg .btn { height: 52px; white-space: normal; line-height: 1.2; }
.fin-seg .btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fin-seg .btn.blocked:not(.on) { color: var(--muted); }
.fin-seg .btn.blocked.on { background: var(--amber-bg); border-color: #EAD9B4; color: var(--amber); }
.fin-req { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.fin-req li.ok { color: var(--green); } .fin-req li.no { color: var(--amber); font-weight: 600; }
.fin-tick { display: inline-block; width: 18px; }
.fin-reason { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.fin-reason[hidden] { display: none; }
.fin-terr { color: var(--red); font-size: 13.5px; font-weight: 600; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.fin-terr[hidden] { display: none; }
.fin-terr.ok { color: var(--green); }
.fin-terr .fin-over { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); min-height: 44px; cursor: pointer; }
.fin-terr .fin-over input { width: 22px; height: 22px; accent-color: var(--ink); flex-shrink: 0; }
@media (max-width: 600px) {
  .fin-times .fin-tgrid { grid-template-columns: 1fr 1fr; }
  .fin-times .fin-t:last-child { grid-column: 1 / -1; }
  .fin-more-in { grid-template-columns: 1fr; }
}

/* ==== r5-sales.css ==== */
/* Round 5 sales (r5-sales.js): "Search the price list" on quotes, Add to stock, Enter existing stock */
.qps { border: 2px solid var(--gold); border-radius: 12px; padding: 14px; margin: 10px 0 14px; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.qps-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.qps-h svg { width: 18px; height: 18px; }
.qps-in { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--cell); min-height: 48px; color: var(--ink); }
.qps-in:focus { outline: 2px solid var(--gold); outline-offset: 1px; background: var(--paper); }
.qps-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.qps-row label { font-size: .85rem; color: var(--muted); }
.qps-row > input { font: inherit; font-size: 16px; padding: 6px 10px; min-height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); flex: 1 1 140px; max-width: 240px; min-width: 0; box-sizing: border-box; }
.qps-res { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.qps-hit { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px; min-height: 52px; border-radius: 10px; border: 1px solid var(--line); background: var(--cell); cursor: pointer; font: inherit; color: inherit; }
.qps-hit:hover, .qps-hit:focus-visible { border-color: var(--gold); background: var(--paper); }
.qps-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qps-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qps-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.qps-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.qps-go svg { width: 14px; height: 14px; }
.qps-more { font-size: .85rem; color: var(--muted); margin: 4px 2px 0; }
.qps-added { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.qps-added:empty { display: none; }
.qps-ad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: var(--green-bg); }
.qps-adt { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qps-qty { display: inline-flex; align-items: center; gap: 4px; }
.qps-qty input { width: 64px; font: inherit; font-size: 16px; text-align: center; padding: 6px; min-height: 40px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.qps-qty .btn { min-width: 40px; min-height: 40px; font-size: 1.15rem; justify-content: center; }
.qps-empty p { margin: 4px 0; }
.qps-next { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--amber-bg); color: var(--ink); font-size: .9rem; }
/* Enter existing stock */
.stin-set { position: sticky; top: 0; z-index: 3; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0 12px; }
.stin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.stin-grid select, .stin-grid input { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 44px; }
.stin-pick { border: 2px solid var(--gold); border-radius: 12px; padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; background: var(--paper); }
.stin-pick .qps-qty input { width: 80px; }
.stk-form .qps-qty input { width: 90px; }
@media (max-width: 600px) {
  .qps { padding: 12px; margin-left: 0; margin-right: 0; }
  .qps-go span, .qps-go { padding: 6px 8px; }
  .qps-row > input { max-width: none; }
  /* phone: wrap (two lines each) so the supplier and price are never cut off */
  .qps-t b, .qps-t span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .qps-adt { white-space: normal; flex-basis: 100%; }
}

/* ==== r5-diary.css ==== */
/* Diary (r5-diary.js): drag to move, tiles, the visit page's "where and who" panel, the Undo toast. */
.dy-help { margin: 0 0 8px; }
.jb-n { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb b { -webkit-line-clamp: 3; }
body.dy-toasting .toast { bottom: 88px; }
.form .warnbox.dy-live { grid-column: 1 / -1; }
.jb.movable { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.jb.dy-dragging { opacity: .35; }
body.dy-drag, body.dy-drag * { -webkit-user-select: none; user-select: none; }
body.dy-drag .week { scroll-snap-type: none; }
.day.dy-over { outline: 2px dashed var(--gold); outline-offset: -2px; background: #FBF6E6; }
.dy-ghost { position: fixed; z-index: 200; pointer-events: none; margin: 0; background: var(--paper); box-shadow: 0 10px 28px rgba(0,0,0,.22); transform: rotate(-2deg) scale(1.03); opacity: .95; }

.dy-toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 24px; z-index: 120; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff;
  padding: 8px 8px 8px 16px; border-radius: 10px; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.dy-toast .dy-msg { flex: 1; min-width: 0; }
.dy-toast .dy-undo { border: 1px solid var(--gold-lt); background: none; color: var(--gold-lt); font-weight: 700; border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.dy-toast .dy-x { border: 0; background: none; color: #fff; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .8; }

.visit-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0 0 14px; }
.vt-row { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.vt-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--cell); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold-ink); }
.vt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-l { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vt-v { font-size: 15px; overflow-wrap: anywhere; }
.vt-pre { white-space: pre-wrap; }
a.vt-maps { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); min-height: 44px; }
a.vt-maps .vt-go { color: var(--gold-ink); font-weight: 700; font-size: 13.5px; text-decoration: underline; }
.vt-who { display: flex; flex-direction: column; align-items: flex-start; }
.vt-tel { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; min-height: 40px; }
.vt-tel svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .visit-top { grid-template-columns: minmax(0, 1fr); }
  .dy-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.dy-toasting .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* ==== r5-forms.css ==== */
/* Round 5: forms that fill themselves in (feat-autofill.js) and to-dos that open what they're about (r5-todolinks.js) */
.af-ct { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 4px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.af-ct a { color: var(--gold-ink); text-decoration: none; }
.af-ct a:hover { text-decoration: underline; }
.af-ct .af-sep { color: var(--line); }
.af-ct .af-add { margin-left: auto; font-size: 12.5px; min-height: 32px; }
.af-new { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--gold); border-radius: 8px; background: var(--cell); }
.af-new[hidden] { display: none; }
.af-new .btn { min-height: 40px; }
a.td-title.td-link { color: var(--ink); text-decoration: none; }
a.td-title.td-link:hover, a.td-title.td-link:focus-visible { color: var(--gold-ink); text-decoration: underline; }
.td-why { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.td-row.done .td-why { color: var(--muted); }
@media (max-width: 700px) { .af-ct .af-add { margin-left: 0; } a.td-title.td-link { display: block; padding: 2px 0; } }

/* ==== r6-actuals.css ==== */
/* The diary follows what actually happened (r6-actuals.js): booked vs actual on the visit page, overruns in amber. */
.act-box { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.act-box.act-over { border-left-color: var(--amber); }
.act-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }
.act-l { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.act-bk { color: var(--ink-2); font-weight: 600; }
.act-ac { color: var(--ink); }
.act-d { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 9px; background: var(--green-bg); color: var(--green); }
.act-d.late { background: var(--amber-bg); color: var(--amber); }
.act-box p { margin: 6px 0 0; }
.act-warn { margin-top: 8px; background: var(--amber-bg); color: var(--amber); border-radius: 8px; padding: 8px 12px; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.act-wait { margin: 0 0 12px; }
.jb.overrun { box-shadow: 0 0 0 2px var(--amber) inset; }
.jb.overrun .jb-w { color: var(--amber); }
.jb-act { font-weight: 700; color: var(--green); }
.jb-bk { font-size: 11.5px; color: var(--muted); }

/* ==== feat-access.css ==== */
/* Access per person (feat-access.js): switches by department on a Team record */
.acx .acx-intro { margin: 4px 0 8px; line-height: 1.45; }
.acx .acx-why { margin: 0 0 8px; }
.acx .acx-restored { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); }
.acx-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 12px; }
.acx-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.acx-fld select { min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); padding: 0 10px; max-width: 100%; }
.acx-top .btn { min-height: 44px; }
.acx-sum { border: 1px solid var(--line); border-radius: 10px; background: var(--cell); padding: 10px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.acx-sum p { margin: 0; }
.acx-sum p + p { margin-top: 6px; }
.acx-dept { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin: 0 0 8px; }
.acx-dept > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; min-height: 48px; }
.acx-dept > summary::-webkit-details-marker { display: none; }
.acx-dept > summary::before { content: '▸'; color: var(--muted); width: 12px; }
.acx-dept[open] > summary::before { content: '▾'; }
.acx-dept > summary b { font-size: 15px; }
.acx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line-2); }
.acx-row.is-set { background: #FBF7EA; }
.acx-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.acx-t b { font-weight: 600; }
.acx-d { flex-basis: 100%; line-height: 1.4; }
.acx-dot { width: 9px; height: 9px; border-radius: 50%; background: #C9C3B2; flex-shrink: 0; }
.acx-row.is-on .acx-dot { background: var(--green); }
.acx-sp { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 6px; color: var(--muted); background: var(--grey-bg); }
.acx-sp.sp { color: var(--blue); background: var(--blue-bg); }
.acx-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.acx-b { min-height: 44px; min-width: 64px; padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.acx-b:first-child { border-left: 0; min-width: 104px; }
.acx-b.sel.acx-def { background: var(--ink); color: #fff; }
.acx-b.sel.acx-on { background: var(--green); color: #fff; }
.acx-b.sel.acx-off { background: var(--red); color: #fff; }
.acx-b:disabled { cursor: default; opacity: .55; }
.acx-b.sel:disabled { opacity: .8; }
.acx-legend { margin: 10px 0 0; line-height: 1.45; }
.acx-bar { align-items: center; }
.acx-status { flex: 1 1 auto; color: var(--muted); }
.acx-status.dirty { color: var(--amber); font-weight: 600; }
@media (max-width: 700px) {
  .acx-row { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .acx-seg { display: grid; grid-template-columns: 1.3fr 1fr 1fr; width: 100%; }
  .acx-b, .acx-b:first-child { min-width: 0; padding: 0 6px; }
  .acx-top .btn { width: 100%; }
}
/* the welcome email preview (feat-people.js) */
.pk-wprev { display: block; width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #F4F1E8; margin: 8px 0 12px; -webkit-overflow-scrolling: touch; }
.pk-wprev img { max-width: 110px; }
.pk-wdet { margin: 8px 0 0; } .pk-wdet > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--gold-ink); }
.pk-wstat { margin: 4px 0 8px; } .pk-wnote { margin: 0 0 10px; }

/* ==== feat-videos.css ==== */
/* Instruction videos (feat-videos.js) */
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 4px 0 14px; }
.vid-card { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 16px; }
.vid-card.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-lt); }
.vid-frame { background: #1f2328; display: flex; justify-content: center; }
.vid-v { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #1f2328; }
.vid-v.is-phone { width: auto; max-width: 100%; height: 420px; aspect-ratio: 390 / 844; }
.vid-cap { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vid-cap p { margin: 0; }
.vid-t { font-size: 15.5px; }
.vid-b { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.vid-b .btn { min-height: 40px; }
.vid-err { color: #9b2c2c; font-size: 13px; }
.vid-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 14px; background: var(--paper); border: 1px solid var(--gold-lt); border-radius: 12px; color: var(--ink); text-decoration: none; min-height: 48px; }
.vid-banner:hover { border-color: var(--gold); color: var(--ink); }
.vid-banner > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vid-banner-i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--gold-lt); display: flex; align-items: center; justify-content: center; }
.vid-link { align-self: flex-start; margin-top: 6px; min-height: 36px; }
.wl-vids { margin: 0 0 24px; }
.wl-vid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.wl-vid { display: flex; gap: 12px; align-items: center; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; min-height: 56px; min-width: 0; }
.wl-vid > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-vid-img { width: 96px; height: 60px; object-fit: cover; border-radius: 6px; background: #1f2328; flex: 0 0 auto; }
.wl-vid-img.is-phone { width: 40px; height: 60px; object-position: top; }
@media (max-width: 600px) {
  .vid-grid { grid-template-columns: minmax(0, 1fr); }
  .vid-v.is-phone { height: 460px; }
}
.tt-item-b .vid-link { margin-top: 0; height: 36px; }

/* ==== feat-password.css ==== */
/* Reset password (feat-password.js): the sheet on a Team record */
.pw-slot:empty { display: none; }
.pw-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.pw-body p { margin: 0; line-height: 1.5; }
.pw-q { font-size: 17px; font-weight: 600; color: var(--ink); }
.pw-done { display: flex; flex-direction: column; gap: 10px; }
.pw-confirm { display: flex; flex-direction: column; gap: 10px; }
.pw-warn { padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); }
.pw-msg h3 { margin: 0 0 6px; font-size: 17px; }
.pw-ok { color: var(--green); font-weight: 600; }
.pw-show { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 24px; letter-spacing: 2px; font-weight: 600; text-align: center;
  padding: 16px 10px; border: 2px dashed var(--gold); border-radius: 12px; background: var(--cell); color: var(--ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.pw-once { color: var(--red); font-size: 13px; font-weight: 600; }
.pw-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-acts .btn, .pw-bar .btn, .pw-opt .btn { min-height: 48px; }
.pw-acts .btn { flex: 1 1 140px; justify-content: center; }
.pw-also { margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pw-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pw-opt > div:first-child { flex: 1 1 220px; min-width: 0; }
.pw-opt .dim { font-size: 13px; margin-top: 2px; }
.pw-mfa-q { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pw-did { background: var(--green-bg); color: var(--green); border-color: var(--green-bg); }
.pw-setup { display: flex; flex-direction: column; gap: 10px; }
.pw-steps { margin: 0; padding-left: 22px; line-height: 1.55; font-size: 14px; }
.pw-steps > li { margin: 0 0 8px; overflow-wrap: anywhere; }
.pw-steps ul { margin: 6px 0 0; padding-left: 18px; }
.pw-steps code { font-size: 13px; background: var(--cell); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .pw-show { font-size: 21px; letter-spacing: 1px; } .pw-opt .btn { flex: 1 1 100%; justify-content: center; } }

/* ==== feat-blockers.css ==== */
/* Blockers (feat-blockers.js): raise on a phone, mark up photos, pin on a drawing, office review. Phone first. */
.bl-help { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.bl-raise .form-bar .btn.dark, .bl-raise .bl-cam-btn { min-height: 48px; }
.bl-cam-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-cam-row .btn { min-height: 48px; }
.bl-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bl-th { position: relative; width: 132px; display: flex; flex-direction: column; gap: 6px; }
.bl-th img { width: 132px; height: 100px; object-fit: cover; border-radius: 8px; background: var(--grey-bg); display: block; }
.bl-th.marked img { outline: 2px solid #E0322B; outline-offset: -2px; }
.bl-th .ph-x { top: 4px; right: 4px; width: 30px; height: 30px; }
.bl-th .bl-mark { min-height: 40px; width: 100%; justify-content: center; }
.bl-form .fld select, .bl-form .fld input:not([type=checkbox]), .bl-form .fld textarea { min-height: 44px; font-size: 16px; }
.bl-pinrow .dim { display: block; margin-top: 4px; }
/* mark-up and pin drawers */
.bl-markup, .bl-pin { display: flex; flex-direction: column; gap: 10px; }
.bl-mhead .bl-done { min-height: 44px; margin-right: 8px; }
.bl-mhelp { margin: 0; font-size: 13px; color: var(--ink-2); }
.bl-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bl-tools .btn { min-height: 40px; }
.bl-tool.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bl-cols { display: flex; gap: 6px; align-items: center; }
.bl-col { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.bl-col.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.bl-cwrap { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; background: var(--side); border-radius: 10px; padding: 6px; }
.bl-canvas { touch-action: none; display: block; max-width: 100%; border-radius: 6px; background: #fff; cursor: crosshair; }
/* record page */
.bl-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bl-step { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--cell); min-width: 110px; opacity: .55; }
.bl-step.on { opacity: 1; border-color: #CFC6AE; background: var(--paper); }
.bl-step b { font-size: 13px; }
.bl-wait { margin: 10px 0 0; color: var(--amber); font-weight: 600; }
.bl-eot-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.bl-eot-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cell); cursor: pointer; min-height: 44px; }
.bl-eot-row input { width: 22px; height: 22px; accent-color: var(--ink); flex-shrink: 0; margin-top: 2px; }
.bl-eot-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-eot-row.dim { opacity: .6; }
.bl-tab-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-fin .bl-fin-btn { min-height: 48px; }
.rec-head .bl-raise-btn { white-space: nowrap; }
/* the Projects list: open blockers on the project's line */
.row .c-status .bl-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #F6E3E0; color: #9B3B32; font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.bl-waitrev { margin: 10px 0 16px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 600px) {
  .bl-th { width: calc(50% - 5px); }
  .bl-th img { width: 100%; }
  .bl-cam-row .btn { flex: 1 1 45%; }
  .bl-step { min-width: calc(50% - 4px); }
  .bl-tools .btn span { font-size: 12.5px; }
}

/* ==== fix-myhr.css ==== */
/* fix-myhr.js (round 8): My details, and changes still waiting to send shown on lists */
.pend-mark { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px;
  vertical-align: middle; white-space: nowrap; background: var(--cell, #f2f2f0); color: var(--ink-2, #555); border: 1px dashed var(--line, #ccc); }
.pend-mark.failed { color: #9a3412; border-color: #f0b58f; background: #fff4ec; }
.td-row .pend-mark { margin-left: 0; }
.md-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2, #555); margin: 0 0 12px; }
.md-note .i, .md-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.md-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.md-sec h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.md-kv dd.md-secret { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ==== feat-design.css ==== */
/* feat-design.css: the design & connections screens (feat-design.js) */
.dz-views { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-view { padding: 9px 14px; border-radius: 9px; background: var(--grey-bg); color: var(--ink-2); font-weight: 600; font-size: 13.5px; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.dz-view.on { background: var(--ink); color: #fff; }
.dz-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dz-body .sec.card, .dz-empty { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.dz-empty p { line-height: 1.5; max-width: 760px; }
.dz-pad { padding: 10px 12px; }
.dz-wait { margin: 0; background: var(--amber-bg); color: var(--amber); padding: 8px 12px; border-radius: 9px; }
.dz-ok { display: flex; align-items: center; gap: 6px; color: var(--green); }
.dz-ok svg { stroke: var(--green); }
.dz-issues { background: var(--amber-bg); border: 1px solid #EAD9B4; border-radius: 12px; padding: 10px 14px; }
.dz-issues summary { cursor: pointer; font-weight: 700; color: var(--amber); display: flex; align-items: center; gap: 6px; min-height: 28px; }
.dz-issues summary svg { stroke: var(--amber); }
.dz-issue { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; border-top: 1px solid #EFE2C4; flex-wrap: wrap; }
.dz-ik { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--amber); min-width: 150px; }
.dz-ik.k-twice, .dz-ik.k-type, .dz-ik.k-missing, .dz-ik.k-rack, .dz-ik.k-dup, .dz-ik.k-noport { color: var(--red); }
/* the schedule: rooms on the left */
.dz-sched { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.dz-rooms { display: flex; flex-direction: column; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 8px; position: sticky; top: 12px; }
.dz-room { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; border: 0; background: none; border-radius: 9px; padding: 6px 10px; text-align: left; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.dz-room:hover { background: var(--cell); }
.dz-room.on { background: var(--ink); color: #fff; }
.dz-room.add { color: var(--gold-ink); font-weight: 600; justify-content: flex-start; }
.dz-n { font-size: 12px; color: var(--muted); } .dz-room.on .dz-n { color: var(--gold-lt); }
.dz-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dz-devs { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.dz-dev { display: grid; grid-template-columns: 26px 96px minmax(0, 1fr) minmax(0, 150px) 70px 76px 96px 20px 34px; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.dz-dev:last-child { border-bottom: 0; }
.dz-dev.warn { background: #FFF9EE; }
.dz-dev.waiting, .dz-con.waiting { box-shadow: inset 3px 0 0 var(--gold-lt); }
.dz-tag, .dz-cid { font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: .01em; }
.dz-name { display: flex; flex-direction: column; min-width: 0; } .dz-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-roomsel { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: var(--paper); max-width: 100%; }
.dz-cb input { width: 20px; height: 20px; accent-color: var(--ink); }
.dz-warn svg { stroke: var(--amber); }
.dz-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.dz-bar select, .dz-bar input[type=text], .dz-bar input[type=number] { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--paper); font-size: 14px; max-width: 100%; }
/* add a cable */
.dz-add { display: flex; flex-direction: column; gap: 6px; background: var(--cell); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px; margin-bottom: 10px; }
.dz-add-r { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) 24px minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.dz-add-r.two { grid-template-columns: 44px 130px 120px 70px minmax(0, 1.5fr) minmax(0, 1fr) auto; }
.dz-add select, .dz-add input { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; background: var(--paper); font-size: 13px; min-width: 0; width: 100%; }
.dz-add-l { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.dz-cons { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.dz-con { display: grid; grid-template-columns: 62px minmax(0, 1.2fr) 14px minmax(0, 1.4fr) 84px 58px minmax(0, 1fr) 190px 20px 34px; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.dz-con:last-child { border-bottom: 0; }
.dz-con.warn { background: #FFF9EE; }
.dz-con.focus, .dz-card.focus { outline: 2px solid var(--gold); outline-offset: -2px; }
.dz-con input.dz-len, .dz-con input.dz-route { min-height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; width: 100%; min-width: 0; font-size: 13px; background: var(--paper); }
.dz-con input:disabled { background: transparent; border-color: transparent; }
.dz-end { min-width: 0; display: flex; flex-direction: column; }
.dz-end > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-ticks { display: flex; gap: 10px; }
.dz-arrow { color: var(--muted); text-align: center; }
.dz-type { display: inline-block; border: 1.5px solid; border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; background: var(--paper); }
.dz-via { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-tick { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; min-height: 34px; white-space: nowrap; }
.dz-tick input { width: 20px; height: 20px; accent-color: var(--green); }
.dz-form { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dz-h3 { margin: 6px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dz-picks, .dz-prev { max-height: 260px; overflow-y: auto; }
.dz-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px !important; }
/* schematic and racks */
.dz-canvas { overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; max-height: 78vh; -webkit-overflow-scrolling: touch; }
.dz-canvas svg { width: auto; height: auto; display: block; stroke: none; fill: initial; stroke-linecap: initial; stroke-linejoin: initial; max-width: none; }
.dz-canvas .dz-node { cursor: grab; touch-action: none; }
.dz-racks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.dz-rackwrap { overflow-x: auto; }
.dz-rackwrap svg { width: auto; height: auto; stroke: none; fill: initial; display: block; margin: 0 auto; max-width: 100%; }
.dz-u { width: 64px; min-height: 34px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; background: var(--paper); }
.dz-rackcard select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; margin-top: 8px; background: var(--paper); }
/* check before ordering */
.dz-xtab { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.dz-xrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 100px 100px 80px 90px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.dz-pull .dz-xrow { grid-template-columns: minmax(0, 1fr) 70px 100px 90px 100px 120px; }
.dz-xrow:last-child { border-bottom: 0; }
.dz-xrow.head { background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; }
.dz-xrow.extra { background: #FFF9EE; }
.dz-xrow input { width: 20px; height: 20px; accent-color: var(--ink); }
.dz-xl { min-width: 0; }
.dz-xbtns { margin-top: 12px; }
.dz-total { font-size: 15px; }
/* outputs */
.dz-outs { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dz-out { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.dz-out:last-child { border-bottom: 0; }
.dz-out-t { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
/* on site (phones first) */
.dz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-chip { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 14px; cursor: pointer; }
.dz-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dz-find { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 15px; background: var(--paper); }
.dz-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; min-width: 0; }
.dz-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dz-card-h .dz-cid { font-size: 16px; }
.dz-card-e { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.dz-ab { width: 22px; height: 22px; border-radius: 11px; background: var(--grey-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.dz-card-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-top: 4px; }
.dz-big { min-height: 52px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--cell); font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--ink); }
.dz-big.on { background: var(--green-bg); border-color: #9CC19A; color: var(--green); }
.dz-big.on svg { stroke: var(--green); }
.dz-big:disabled { opacity: .5; cursor: default; }
.dz-rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; }
.dz-inrow { display: flex; gap: 6px; align-items: center; min-width: 0; }
.dz-inrow input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 15px; background: var(--paper); }
.dz-inrow .btn { height: 44px; }
.dz-prog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-prog .tile-v { font-size: 26px; }
@media (max-width: 600px) { .dz-prog { gap: 6px; } .dz-prog .tile { padding: 8px 10px; } .dz-prog .tile-l { font-size: 11px; } .dz-prog .tile-v { font-size: 20px; } }
@media (max-width: 1180px) {
  .dz-con { grid-template-columns: 62px minmax(0, 1fr) 14px minmax(0, 1.2fr) 84px 58px 190px 20px 34px; }
  .dz-con .dz-route { display: none; }
}
.dz-rrow { flex-wrap: wrap; }
.dz-rname { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; }
.dz-ul { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.dz-u { width: 58px; min-width: 58px; flex: 0 0 auto; }
@media (max-width: 900px) {
  .dz-sched { grid-template-columns: minmax(0, 1fr); }
  .dz-rooms { position: static; flex-direction: row; flex-wrap: wrap; padding: 6px; }
  .dz-room { flex: 0 0 auto; border: 1px solid var(--line); }
  .dz-dev { grid-template-columns: 26px minmax(0, 1fr) auto 20px 34px; gap: 4px 8px; }
  .dz-dev .dz-cb { grid-row: 1; } .dz-dev .dz-tag { grid-row: 1; grid-column: 2; }
  .dz-dev .dz-name { grid-row: 2; grid-column: 2 / -1; }
  .dz-dev .dz-rk, .dz-dev .dz-pu, .dz-dev .dz-rm:empty { display: none; }
  .dz-dev .dz-roomsel, .dz-dev .dz-rm { grid-row: 3; grid-column: 2 / -1; width: 100%; min-height: 40px; }
  .dz-dev .dz-rm:not(select) { min-height: 0; }
  .dz-con { grid-template-columns: 62px minmax(0, 1fr) 20px 34px; gap: 4px 8px; }
  .dz-con .dz-cid { grid-row: 1; grid-column: 1; } .dz-con .dz-type, .dz-con .dz-tyc { grid-row: 1; grid-column: 2; justify-self: start; min-width: 0; }
  .dz-con .dz-warn { grid-row: 1; grid-column: 3; } .dz-con > .btn, .dz-con > span:last-child { grid-row: 1; grid-column: 4; }
  .dz-con .dz-end { grid-column: 1 / -1; flex-direction: row; gap: 6px; flex-wrap: wrap; } .dz-con .dz-end > * { white-space: normal; }
  .dz-con .dz-arrow { display: none; }
  .dz-con .dz-to > b::before { content: '→ '; color: var(--muted); font-weight: 400; }
  .dz-con input.dz-len { grid-column: 1; min-height: 40px; } .dz-con .dz-ticks { grid-column: 2 / -1; flex-wrap: wrap; }
  .dz-con .dz-tick { min-height: 40px; }
  .dz-add-r, .dz-add-r.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dz-add-l { grid-column: 1 / -1; }
  .dz-add .btn { grid-column: 1 / -1; height: 44px; }
  .dz-add select, .dz-add input { min-height: 44px; font-size: 15px; }
  .dz-xrow, .dz-pull .dz-xrow { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); }
  .dz-xrow.head { display: none; }
  .dz-xrow > span[data-l]::before, .dz-xrow > b[data-l]::before { content: attr(data-l) ': '; color: var(--muted); font-weight: 400; font-size: 12px; }
  .dz-pull .dz-xrow > b:first-child { grid-column: 1 / -1; }
  .dz-racks { grid-template-columns: minmax(0, 1fr); }
  .dz-view { padding: 8px 12px; font-size: 13px; }
}
/* part 2 (29/09): sign-off, missed from the quote, cable progress, quick patterns, zoom */
.dz-sign { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 12px; padding: 10px 14px; }
.dz-sign.s-reviewed { border-left-color: var(--gold); }
.dz-sign.s-signed-off { border-left-color: var(--green); background: var(--green-bg); }
.dz-sign-t { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.45; }
.dz-sign-steps { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dz-step { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: var(--grey-bg); color: var(--muted); }
.dz-step.on { background: var(--ink); color: #fff; }
.dz-sign.s-signed-off .dz-step.on { background: var(--green); }
.dz-miss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--amber-bg); border: 1px solid #EAD9B4; border-radius: 12px; padding: 10px 14px; }
.dz-miss > svg { stroke: var(--amber); flex-shrink: 0; }
.dz-miss-t { flex: 1 1 240px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.dz-noq { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--amber); background: var(--amber-bg); border: 1px solid #EAD9B4; border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.dz-lv { color: var(--muted); font-size: 12px; } .dz-room.on .dz-lv { color: var(--gold-lt); }
.dz-stat { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; background: var(--paper); font-size: 13px; font-weight: 600; max-width: 100%; }
.dz-stat.s-pulled, .dz-stat.s-terminated { background: var(--amber-bg); }
.dz-stat.s-tested, .dz-stat.s-certified { background: var(--green-bg); color: var(--green); }
.dz-tyc { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dz-quick { justify-content: flex-end; }
.dz-zoom { margin-top: 0; }
.dz-zoom .btn { min-width: 44px; justify-content: center; }
.dz-zl { min-width: 44px; }
@media (max-width: 900px) {
  .dz-con .dz-stat { min-height: 40px; width: 100%; }
  .dz-quick { justify-content: flex-start; }
  .dz-quick .btn { min-height: 40px; }
  .dz-sign .chips .btn, .dz-miss .btn { min-height: 40px; }
}
@media (max-width: 600px) {
  .dz-prog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-big { font-size: 14px; min-height: 50px; gap: 5px; padding: 0 4px; }
}
.dz-name > .dz-nm { display: flex; align-items: center; min-width: 0; overflow: visible; }
.dz-nm .dz-nmt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dz-nm .dz-noq { flex-shrink: 0; margin: 0 6px 0 0; }
@media (max-width: 600px) { .dz-card-b .dz-big { font-size: 13.5px; gap: 4px; } .dz-card-b .dz-big svg { width: 15px; height: 15px; flex-shrink: 0; } }

/* ==== feat-survey.css ==== */
/* Site surveys (feat-survey.js): area-by-area capture on a phone, floor plans with heatmaps, review and send. Phone first. */
.sv-help { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.sv-sync { margin: 0 0 10px; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: var(--cell); border: 1px solid var(--line); }
.sv-sync.ok { color: var(--green); background: var(--green-bg); border-color: #CFE0C9; }
.sv-sync.wait, .sv-sync.busy { color: var(--amber); background: var(--amber-bg); border-color: #E8DABA; }
.sv-sync.err { color: var(--red); background: var(--red-bg); border-color: #EBC9C2; }
.sv-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sv-step { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--cell); font-size: 12.5px; font-weight: 600; color: #8E8C85; }
.sv-step.on { color: var(--ink); border-color: #CFC6AE; background: var(--paper); }
.sv-step.now { background: var(--ink); border-color: var(--ink); color: #fff; }
.sv-waitrev { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.sv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sv-actions .btn { min-height: 44px; }
.sv-big { min-height: 48px; width: 100%; justify-content: center; margin-top: 10px; }
.sv-actions .sv-big { margin-top: 0; }
.sv-kv { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.sv-kv dt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sv-kv dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.sv-cards { display: flex; flex-direction: column; gap: 8px; }
.sv-card { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; min-height: 64px; font: inherit; color: inherit; }
.sv-card:hover { border-color: #CFC6AE; }
.sv-card img, .sv-noph { width: 72px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--grey-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sv-card-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-card-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-lab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.sv-lab label { margin: 0; }
.sv-say { min-height: 36px; white-space: nowrap; }
.sv-say.on { background: var(--red); border-color: var(--red); color: #fff; }
.sv-sum textarea, .sv-form textarea, .sv-form input:not([type=checkbox]), .sv-details input:not([type=checkbox]):not([type=hidden]), .sv-details select { font-size: 16px; min-height: 44px; }
.sv-details .mc input { width: 20px; height: 20px; flex-shrink: 0; }
.sv-sum textarea { width: 100%; }
.sv-cam-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.sv-cam-row .btn { min-height: 48px; }
.sv-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sv-th { position: relative; width: 150px; display: flex; flex-direction: column; gap: 6px; }
.sv-th img { width: 150px; height: 112px; object-fit: cover; border-radius: 8px; background: var(--grey-bg); display: block; }
.sv-th.marked img { outline: 2px solid #E0322B; outline-offset: -2px; }
.sv-th .ph-x { top: 4px; right: 4px; width: 32px; height: 32px; }
.sv-th .sv-mark { min-height: 40px; width: 100%; justify-content: center; }
.sv-th .sv-cap { min-height: 40px; font-size: 14px; width: 100%; }
.sv-files p { margin: 0; overflow-wrap: anywhere; }
.sv-ro { margin: -6px 0 12px; }
.sv-local { border: 1px dashed #CFC6AE; }
.sv-fresh { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); color: var(--green); font-size: 13px; }
.sv-wait { color: var(--amber); font-weight: 600; }
/* the plan editor */
.sv-plan { display: flex; flex-direction: column; gap: 8px; }
.sv-plan > * { flex-shrink: 0; }
.sv-plan .sv-tools, .sv-plan .sv-cwrap, .sv-plan .sv-layers, .sv-plan .d-head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sv-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sv-tools .btn, .sv-mat { min-height: 40px; }
.sv-mat { max-width: 180px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); padding: 0 8px; font-size: 14px; }
.sv-tool.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sv-layers { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13.5px; }
.sv-layers label { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.sv-layers input { width: 20px; height: 20px; accent-color: var(--ink); }
.sv-phelp { margin: 0; min-height: 1.4em; }
.sv-banner { position: absolute; left: 8px; right: 8px; top: 8px; margin: 0; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.93); box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 13px; font-weight: 600; color: var(--ink); pointer-events: none; }
.sv-banner.warn { color: var(--red); }
.sv-banner:empty { display: none; }
.sv-card canvas.sv-fthumb { width: 72px; height: 56px; border-radius: 8px; background: #fff; flex-shrink: 0; }
.sv-cwrap { position: relative; flex-shrink: 0; height: 58vh; min-height: 260px; border-radius: 10px; overflow: hidden; background: #EFEBE0; border: 1px solid var(--line); }
.sv-canvas { display: block; touch-action: none; cursor: crosshair; }
.sv-legend { display: flex; flex-direction: column; gap: 4px; }
.sv-leg-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.sv-leg { display: inline-flex; align-items: center; gap: 6px; }
.sv-sw { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.15); }
.sv-legend p { margin: 0; }
.sv-target { font-weight: 600; }
.sv-predicted { color: var(--amber); font-weight: 600; }
.sv-noscale { color: var(--red); font-weight: 600; }
.sv-panel { padding: 10px 12px; border-radius: 10px; background: var(--cell); border: 1px solid var(--line); }
.sv-panel .form { margin: 0; }
.sv-panel input, .sv-panel select { font-size: 16px; min-height: 44px; }
.sv-devbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-devbtns .btn { min-height: 44px; }
.sv-val { display: inline-block; padding-top: 10px; font-weight: 600; }
.sv-prods { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sv-prod { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; font: inherit; color: inherit; min-height: 48px; }
.sv-qlines { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.sv-qline { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--cell); }
.sv-qline .dim { grid-column: 2; }
@media (max-width: 600px) {
  .sv-th { width: calc(50% - 5px); }
  .sv-th img { width: 100%; }
  .sv-cam-row .btn { flex: 1 1 45%; }
  .sv-kv { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
  .sv-tools .btn span { font-size: 12.5px; }
  .sv-tools .btn, .sv-mat { min-height: 40px; padding-left: 10px; padding-right: 10px; }
  .sv-cwrap { height: 52vh; }
  .sv-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==== feat-survey-blinds.css ==== */
/* Blind & curtain surveys (feat-survey-blinds.js): phone first, big number fields, one opening at a time. */
.bs-help { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.bs-fresh { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); color: var(--green); font-weight: 600; }
.bs-top { flex-wrap: nowrap; }
.bs-top .title-block { min-width: 0; }
.bs-top h1 { overflow-wrap: anywhere; }
.bs-sync { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--green-bg); color: var(--green); max-width: 100%; }
.bs-sync.wait { background: var(--amber-bg); color: var(--amber); }
.bs-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bs-chip { flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; min-width: 88px; max-width: 160px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; text-align: left; }
.bs-chip b { font-size: 14px; }
.bs-chip span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 136px; }
.bs-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bs-chip.on span { color: #D8D4C8; }
.bs-chip.warn { border-color: #D7B25A; box-shadow: inset 0 -3px 0 #D7B25A; }
.bs-chip.add { flex-direction: row; align-items: center; gap: 6px; border-style: dashed; color: var(--gold-ink); }
.bs-chip.add span { color: var(--gold-ink); font-size: 13px; font-weight: 600; }
.bs-ed { display: flex; flex-direction: column; gap: 12px; }
.bs-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bs-tools .btn { min-height: 46px; }
.bs-pos { font-weight: 600; color: var(--muted); font-size: 13px; }
.bs-sec { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 14px; min-width: 0; }
.bs-sec h3 { margin: 0 0 10px; font-size: 15px; }
.bs-sec .sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.bs-sec .sec-h h3 { margin: 0; }
.bs-sub { margin: 4px 0 8px; font-size: 12.5px; color: var(--muted); }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; min-width: 0; }
.bs-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.bs-grid + .bs-grid { margin-top: 10px; }
.bs-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.bs-f.full { grid-column: 1 / -1; }
.bs-f label, .bs-lab { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.bs-f input, .bs-f select, .bs-f textarea { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper); }
.bs-f textarea { min-height: 70px; }
.bs-num, .bs-f input.bs-num { font-size: 22px; font-weight: 600; min-height: 56px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.bs-grid.three .bs-num { font-size: 20px; padding: 8px 6px; }
.bs-grid.three .bs-f label { font-size: 12px; }
.bs-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-sb { min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cell); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); }
.bs-sb.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bs-sb:disabled { opacity: .6; cursor: default; }
.bs-quick { min-height: 46px; }
.bs-all { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; min-height: 40px; cursor: pointer; }
.bs-all input { width: 22px; height: 22px; accent-color: var(--ink); }
.bs-calc { background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bs-calc h3 { margin: 0 0 2px; font-size: 14px; color: var(--gold-lt); letter-spacing: .02em; }
.bs-cl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: baseline; }
.bs-cl-l { font-size: 13px; color: #D8D4C8; }
.bs-cl-v { font-size: 22px; font-variant-numeric: tabular-nums; }
.bs-cl-r { grid-column: 1 / -1; font-size: 12px; color: #BDB8AA; overflow-wrap: anywhere; }
.bs-calc .bs-rules { color: #BDB8AA; }
.bs-calc .bs-rules a { color: var(--gold-lt); }
.bs-need { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--amber-bg); color: var(--amber); font-size: 13px; font-weight: 600; }
.bs-warn { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bs-warn li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #FBF1D6; color: #5E4507; font-size: 13px; line-height: 1.4; }
.bs-warn li svg { margin-top: 1px; color: #B7791F; }
.bs-over .bs-num { font-size: 18px; min-height: 48px; }
.bs-thumbs { margin-top: 10px; }
.bs-cam-btn { min-height: 48px; }
.bs-remove { align-self: flex-start; min-height: 44px; }
.bs-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; margin: 14px -4px 0; padding: 10px 4px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(244, 241, 232, 0), var(--cream) 18%); }
.bs-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.bs-nav .btn { min-height: 52px; justify-content: center; }
.bs-finish { min-height: 48px; justify-content: center; background: var(--green-bg); border-color: #BCD1B6; color: var(--green); font-weight: 700; }
/* the "Take 3 widths / 3 drops" sheet */
.bs-qm { display: flex; flex-direction: column; gap: 10px; }
.bs-qm-step { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.bs-qm-l { font-size: 20px; font-weight: 700; }
.bs-qm-in { font-size: 34px !important; min-height: 72px; text-align: center; border: 2px solid var(--ink); border-radius: 14px; width: 100%; }
.bs-qm-bar .btn { min-height: 52px; flex: 1; justify-content: center; }
.bs-qm-vals { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.bs-qm-vals li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--cell); font-size: 13px; }
.bs-qm-vals li.on { border-color: var(--ink); background: var(--paper); }
/* record page */
.bs-optable { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.bs-or { display: grid; grid-template-columns: 60px minmax(0, 1.3fr) minmax(0, 1fr) 70px minmax(0, 1.1fr) 90px; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: 13.5px; align-items: center; min-height: 44px; }
.bs-or:first-child { border-top: 0; }
.bs-or.head { background: var(--cell); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; min-height: 0; }
.bs-or > span, .bs-or > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-wc { color: #8A5A00; font-weight: 700; }
.bs-local { border: 1px dashed #D7B25A; background: #FBF6E8; }
.bs-ql { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 50vh; overflow-y: auto; }
.bs-qlr { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--cell); min-width: 0; }
.bs-qlr.gen { border-style: dashed; }
@media (max-width: 700px) {
  .bs-or { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 76px; }
  .bs-or > :nth-child(4), .bs-or > :nth-child(3) { display: none; }
  .bs-or.head > :nth-child(3), .bs-or.head > :nth-child(4) { display: none; }
  .bs-or { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.1fr) 70px; }
  .bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-grid .bs-f.full, .bs-sec .bs-f.full { grid-column: 1 / -1; }
  .bs-sec { padding: 10px 10px 12px; }
}
body.bs-capturing .sync:not(.bad):not(.auth) { display: none; }
/* the phone's bottom menu is fixed: the Next / Finish bar sits just above it */
@media (max-width: 900px) { .bs-foot { bottom: calc(60px + env(safe-area-inset-bottom)); } }

/* ==== feat-surveys.css ==== */
/* Field › Surveys (feat-surveys.js): two big starts, then the open surveys. Phone first. */
.svh-help { max-width: 760px; }
.svh-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.svh-start { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper, #fff); color: var(--ink); text-align: left; cursor: pointer; font: inherit; width: 100%; min-width: 0; }
.svh-start:hover, .svh-start:focus-visible { border-color: #CFC6AE; background: #FBF7EC; }
.svh-ic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.svh-ic svg { width: 24px; height: 24px; }
.svh-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svh-t b { font-size: 16px; }
.svh-t span { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.svh-row { min-height: 48px; }
.svh-k { flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--side, #F4F1E8); color: var(--ink-2); }
.svh-links a { display: inline-block; padding: 10px 0; }
@media (max-width: 600px) {
  .svh-starts { grid-template-columns: 1fr; }
  .svh-row .mini-c:not(:last-child) { display: none; }
}