/* Veritura Practice (practice-v1, builder B3): the consultant's desk, on the measured standard (app-ux/r3/STANDARD.md).
   Only the desk's own parts are here; panels, tables, chips, the band and the record panels are next-v7.css's. Every size is on the
   ramp (12, 13, 14, 15, 19, 28, 34) and every colour is a token, so the dark theme follows. */

/* ---------- the header: a badge and the context in ink 4 beside the title ---------- */
#view .pq .pq-head .v89-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
#view .pq .pq-head .v7-pct { margin-right: 0; }
#view .pq .pq-ctx { font-size: 15px; line-height: 24px; color: var(--v6-ink-4); }
#view .pq .pq-head + .v7-band, #view .pq .pq-head + .v7m-grid { margin-top: 28px; }
#view .pq .pq-head + .v7-chips { margin: 24px 0 24px; }
#view .pq .v7-band + .v7-chips { margin: 0 0 16px; }

/* ---------- the desk's list rows (canvas: a 28 circle, the row's words in ink 1, the state at the right; 44 apart) ---------- */
#view .pq-rows { display: flex; flex-direction: column; margin-top: 12px; }
#view .pq-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--v6-line); color: inherit; text-decoration: none; }
#view .pq-row:hover .pq-rw, #view .pq-row:hover .pq-rw b { color: var(--v6-link); }
#view .pq-row2 { align-items: flex-start; padding: 10px 0; }
#view .pq-row2 .v7-av { margin-top: 0; }
#view .pq-rw { flex: 1; min-width: 0; font-size: 15px; line-height: 24px; color: var(--v6-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .pq-rw b { display: block; font-weight: 400; font-size: 15px; line-height: 24px; color: var(--v6-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .pq-rw small { display: block; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .pq-row .v5-st { flex: none; }
#view .pq-line { margin: 4px 0 0 !important; color: var(--v6-ink-3) !important; }
#view .pq-due .v6-pf, #view .pq-files .v6-pf { margin-top: auto; padding-top: 12px !important; }
#view .pq-st-info, #view .v5-st.pq-st-info { color: var(--v6-link) !important; }

/* ---------- small parts ---------- */
#view .pq-tb, #dialog .pq-tb { display: inline-flex; align-items: center; height: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 24px; color: var(--v6-link); text-decoration: none; cursor: pointer; white-space: nowrap; }
#view .pq-tb:hover { text-decoration: underline; text-underline-offset: 3px; }
#view .pq-tb[disabled] { color: var(--v6-ink-4); cursor: default; text-decoration: none; }
#view .pq-tb-q { color: var(--v6-ink-3); }
#view .pq-who { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
#view .pq-who > span:last-child { display: inline-flex; flex-direction: column; min-width: 0; }
#view .pq-who b { font-size: 15px; line-height: 24px; font-weight: 400 !important; color: var(--v6-ink-2) !important; }
#view .pq-who small { font-size: 13px !important; line-height: 20px !important; color: var(--v6-ink-4) !important; }
#view .pq-two { display: inline-flex; flex-direction: column; min-width: 0; }
#view .pq-two b { font-size: 15px; line-height: 24px; font-weight: 400 !important; color: var(--v6-ink) !important; }
#view .pq-two small { font-size: 13px !important; line-height: 20px !important; color: var(--v6-ink-4) !important; }
#view .pq table tbody tr[data-dialog] { cursor: pointer; }
#view .pq table tbody tr[data-dialog]:hover td { background: var(--v6-fill) !important; }
#view .pq .v7-num { font-variant-numeric: tabular-nums; }
#view .pq :is(th, td).r { text-align: right; }
#view .pq .v6-empty { font-size: 15px; line-height: 24px; color: var(--v6-ink-3); padding: 8px 0; margin: 0; }
#view .pq-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 28px 0 40px; padding: 24px; border: 1px solid var(--v6-line); border-radius: 12px; }
#view .pq-empty b { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink); }
#view .pq-empty p { margin: 0 0 8px; font-size: 15px; line-height: 24px; color: var(--v6-ink-3); }
#view .pq-p, #dialog .pq-p { margin: 0 0 12px; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#view .pq-sub, #dialog .pq-sub { margin: 0 0 12px; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .v7-band > a.pq-fig { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
#view .v7-band > a.pq-fig > span { font-size: 14px; line-height: 20px; color: var(--v6-ink-3); }
#view .v7-band > a.pq-fig > b { font-size: 19px; line-height: 28px; font-weight: 400; letter-spacing: -.03em; color: var(--v6-ink); }
#view .pq .v7-band:has(+ .v7-chips) { margin-bottom: 24px; }
#view a.pq-fig:hover b { color: var(--v6-link); }
#view .v7-band b.pq-att { color: var(--v6-amber) !important; }
#view .v7-band b.pq-crit { color: var(--v6-red) !important; }
#view .pq .v7-cents { vertical-align: top; }

/* the Clients section's head on the desk carries the tour's hook (.v5-sec) and keeps the open section's spacing */
#view .pq .v7-sec-h.pq-sech { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; }
#view .pq .v7-sec-h.pq-sech h2 { font-size: 19px !important; line-height: 28px !important; font-weight: 400 !important; }
#view .pq .v7-sec-h.pq-sech a { font-size: 15px; line-height: 24px; }
#view .pq .v7-sec > .v7-chips { margin: 0 0 12px; }

/* chips that are links (the binder's frames) look like the chips that are buttons */
#view .v7-chips a.pq-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--v6-line-2); border-radius: 8px; background: var(--v7-field); font-size: 15px; line-height: 24px; color: var(--v6-ink-3); text-decoration: none; }
#view .v7-chips a.pq-chip:hover { color: var(--v6-ink); }
#view .v7-chips a.pq-chip[aria-pressed="true"] { background: var(--v7-tint); border-color: transparent; color: var(--v6-ink); }
#view .v7-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- drop the binder ---------- */
#view .pq-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; margin: 28px 0 16px; padding: 24px; border: 1.5px dashed rgba(82, 102, 235, .45); border-radius: 12px; background: var(--v7-tint); text-align: center; cursor: pointer; box-sizing: border-box; }
#view .pq-drop.over, #view .pq-drop:focus-within { border-color: var(--v6-blue); }
#view .pq-drop.on { opacity: .8; }
#view .pq-drop-i svg.i { width: 28px; height: 28px; color: var(--v6-blue); }
#view .pq-drop-t { font-size: 15px; line-height: 24px; color: var(--v6-ink); }
#view .pq-drop-s { max-width: 560px; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .pq-drop-p { font-size: 13px; line-height: 20px; color: var(--v6-ink-2); min-height: 20px; }
#view .pq-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#view .pq-inl { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 16px 0; font-size: 13px; line-height: 20px; color: var(--v6-ink-2); }
#view .pq-inl select { height: 32px; font-size: 15px; }
#view .pq-inl-full { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
#view .pq-inl-full textarea { width: 100%; font: inherit; font-size: 15px; line-height: 24px; box-sizing: border-box; }
#view .pq-meter { margin: 0 0 28px; }
#view .pq-meter-h, #view .pq-progress-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#view .pq-meter .v7-note { margin-top: 8px; }
#view .pq-bar { display: block; height: 8px !important; margin-top: 8px !important; border-radius: 4px !important; background: var(--v6-fill-2) !important; overflow: hidden; }
#view .pq-bar i { display: block; height: 100%; border-radius: 4px; background: var(--v6-blue); }
#view .pq-progress { margin: 0 0 24px; }
#view .pq-plain { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--v6-line-2); border-radius: 8px; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#view .pq-plain b { font-weight: 400; color: var(--v6-ink); }
#view .v7-band.pq-figs { margin: 0 0 40px; padding: 12px 16px; }
#view .pq-docs { display: flex; flex-direction: column; gap: 4px; }
#view .pq-doc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
#view .pq-doc > span:first-child { font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#view .pq-acts { display: inline-flex; gap: 12px; }
#view .pq-where { font-size: 14px; line-height: 20px; color: var(--v6-ink-3); white-space: nowrap; }
#view .pq-pair { margin-bottom: 40px !important; }
#view .pq-pair > .pq-panel { padding: 24px !important; }
#view .pq-panel .v6-ph { margin-bottom: 8px !important; }
#view .pq-np { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-top: 1px solid var(--v6-line); }
#view .pq-np > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#view .pq-np b { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink-2); }
#view .pq-np small { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .pq-panel > .pq-tb { margin-top: 8px; }

/* ---------- a response file: the draft, the packets ---------- */
#view .pq-draft { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--v6-line); border-radius: 12px; }
#view .pq-draft p { margin: 0; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
.pq-draft-h { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#dialog .pq-draft-h { margin: 0 0 16px; }
.pq-mark { display: inline-block; width: 22px; height: 22px; flex: none; }
#view .pq-draft-m { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .pq-packets { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }

/* ---------- assessments: the state's form ---------- */
#view .pq-picks { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
#view .pq-formhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; }
#view .pq-formhead b { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink); }
#view .pq-formhead small { flex-basis: 100%; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .pq-formhead + .v7-band { margin-top: 16px; }
#view .pq-row-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
#view .pq-printed { font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#view .pq-assess .v7-sec > .pq-tb { margin-top: 12px; }

/* ---------- monthly reports: the sentence the client reads ---------- */
#view .pq-said { margin: 24px 0 0; padding: 24px; border-radius: 12px; box-shadow: var(--v7-raised); background: var(--v6-surface); }
#view .pq-said p { margin: 12px 0 0; font-size: 19px; line-height: 28px; color: var(--v6-ink); }
#view .pq-said + .v7-band { margin-top: 24px; }

/* ---------- packages: the price the firm sets ---------- */
#view .pq-pkgs { display: flex; flex-direction: column; margin: 28px 0 0; }
#view .pq-pkg { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--v6-line); }
#view .pq-pkg:last-of-type { border-bottom: 1px solid var(--v6-line); }
#view .pq-pkg-t { display: flex; flex-direction: column; min-width: 0; }
#view .pq-pkg-t b { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink); }
#view .pq-pkg-t small { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .pq-price { display: inline-flex; align-items: center; gap: 6px; flex: none; }
#view .pq-price input { width: 140px; height: 36px; padding: 0 12px; font-size: 15px; text-align: right; box-sizing: border-box; }
#view .pq-dollar { font-size: 15px; line-height: 24px; color: var(--v6-ink-3); }
.pq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#view .pq-form-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
#view .pq-form-a .pq-sub { margin: 0; }

/* ---------- the first run (canvas: Invites, section 3) ---------- */
#view .pq-setup .pq-step { display: flex; gap: 12px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--v6-line); }
#view .pq-setup .pq-head + form .pq-step { margin-top: 28px; }
#view .pq-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--v7-tint); color: var(--v6-blue-2); font-size: 12px; line-height: 20px; font-weight: 480; flex: none; }
#view .pq-step-b { flex: 1; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
#view .pq-step-b h2 { margin: 0; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink); }
#view .pq-step-b .form { margin: 0; }
#view .pq-step-b .pq-sub { margin: 0; }
#view .pq-inline-f { display: flex; flex-wrap: wrap; gap: 8px; }
#view .pq-inline-f input { flex: 1 1 180px; min-width: 0; height: 36px; padding: 0 12px; font-size: 15px; box-sizing: border-box; }
#view .pq-staff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#view .pq-pkgmini { display: flex; flex-direction: column; gap: 8px; }
#view .pq-opt, #dialog .pq-opt { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--v6-line-2); border-radius: 8px; }
.pq-opt b { display: block; font-weight: 400; font-size: 15px; line-height: 24px; color: var(--v6-ink); }
.pq-opt small { display: block; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#view .pq-opt .pq-ctx { flex: none; }

/* ---------- dialogs ---------- */
#dialog .pq-dlg { width: min(640px, 100%); }
#dialog .pq-dlg.pq-wide { width: min(860px, 100%); }
#dialog .pq-dlg .pq-msg:empty { display: none; }
#dialog .pq-dlg .pq-msg { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--v6-line-2); font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#dialog .pq-dlg .pq-msg b { font-weight: 500; color: var(--v6-ink); }
#dialog .pq-dlg .pq-msg[data-tone="a"] { border-color: rgba(181, 71, 8, .35); }
#dialog .pq-dlg .pq-msg[data-tone="g"] { border-color: rgba(3, 110, 67, .35); }
#dialog .pq-opts { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#dialog .pq-opts legend { margin-bottom: 6px; padding: 0; font-size: 13px; line-height: 20px; color: var(--v6-ink-2); }
#dialog .pq-opt { justify-content: flex-start; cursor: pointer; }
#dialog .pq-opt:has(input:checked) { border-color: var(--v6-blue); background: var(--v7-tint); }
#dialog .pq-opt input { margin-top: 5px; }
#dialog .pq-preview { padding: 12px; border: 1px solid var(--v6-line); border-radius: 8px; background: var(--v7-field); }
#dialog .pq-preview small { display: block; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#dialog .pq-preview p { margin: 4px 0 0; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#dialog .pq-letter { white-space: pre-wrap; margin: 0 0 12px; padding: 16px; border: 1px solid var(--v6-line); border-radius: 8px; font: inherit; font-size: 14px; line-height: 20px; color: var(--v6-ink-2); max-height: 420px; overflow: auto; }
#dialog .pq-h3 { margin: 16px 0 4px; font-size: 15px; line-height: 24px; font-weight: 500; color: var(--v6-ink); }
#dialog .pq-said-d { margin: 0 0 12px; }
#dialog .pq-said-d .v7m-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--v6-line); }
#dialog .pq-said-d .v7m-row:first-child { border-top: 0; }
#dialog .pq-said-d .v7m-row span { flex: 0 0 160px; font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#dialog .pq-said-d .v7m-row b { flex: 1; text-align: left; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink-2); }
#dialog .pq-out { margin: 0; padding-left: 18px; }
#dialog .pq-out li { font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
#dialog .pq-dlg table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
#dialog .pq-dlg table th { text-align: left; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--v6-ink-4); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--v6-line); }
#dialog .pq-dlg table td { font-size: 15px; line-height: 24px; color: var(--v6-ink-2); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--v6-line); vertical-align: top; }
#dialog .pq-dlg table :is(th, td).r { text-align: right; }

/* ---------- the bookmarks under the nav: the desk's own (each client and what is next), in place of the memo list ---------- */
body.pq-bm-on #v7bm { display: none !important; }
.shell > .nav .pq-bm .v7-bm-i small[data-tone="critical"] { color: var(--v6-red); }
.shell > .nav .pq-bm .v7-bm-i small[data-tone="attention"] { color: var(--v6-amber); }

/* ---------- a record's panels on the desk's pages: five properties fit one row; the figure's unit stays on its line ---------- */
#view .pq .v7m-props { gap: 8px 28px; }
#view .pq .v7m-main .v7m-top > div:first-child { flex: 1; min-width: 0; }
#view .pq .v7m-fig small { white-space: nowrap; }
#view .pq .v7m-acts { flex: none; }
/* the binder's filed table: the observation, its documents, what was found, where */
#view .pq table.pq-filed th:nth-child(1) { width: 24%; }
#view .pq table.pq-filed th:nth-child(2) { width: 34%; }
#view .pq table.pq-filed th:nth-child(4) { width: 16%; }
#view .pq-found + .pq-found { margin-top: 4px; }
#view .pq table.pq-filed .pq-where { white-space: normal; }
#dialog .pq-custom { display: none; }
#dialog form:has(select[name="schedule"] option[value="custom"]:checked) .pq-custom { display: block; }
#view .pq table.pq-filed { table-layout: fixed; }
#view .pq table.pq-filed td { overflow-wrap: anywhere; }
#view .pq table.pq-filed .pq-found .v5-st { white-space: normal !important; align-items: flex-start; }
#view .pq table.pq-filed .pq-doc { flex-wrap: nowrap; }
#view .pq table.pq-filed .pq-doc > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
#view .pq table.pq-filed .pq-doc > :not(:first-child) { flex: none; }
#view .pq-found .v5-st .v5-si { margin-top: 3px; }

/* ---------- the finish round (F4): the client page's new sections, the meter's basis and packs, the owner's asks, the editor ---------- */
#view .pq .v7-sec .pq-form-a { margin-top: 16px; }
#view .pq .v7-sec > .v7m-said + .pq-plain, #view .pq .v7-sec > .pq-plain + table { margin-top: 16px; }
#view .pq .v7-sec > .v7m-said + table, #view .pq .v7-sec > .v7m-said + .pq-form-a { margin-top: 8px; }
#view .pq .v7-sec > .pq-plain { margin: 0 0 16px; }
#view .pq .v7-sec > .pq-more { margin-top: 12px; }
#view .pq table.pq-mon td:last-child, #view .pq table.pq-mon th:last-child { white-space: nowrap; }
#view .pq table.pq-mon .pq-acts { align-items: center; flex-wrap: wrap; gap: 4px 12px; }
#view .pq table.pq-mon th { vertical-align: bottom; }
#view .pq table.pq-qtr td:first-child { width: 36%; }
#view .pq table.pq-fr td:last-child { text-align: right; white-space: nowrap; }
#view .pq table.pq-asks { margin-top: 16px; }
/* the meter: the pages' basis, the packs and what is left, as label over value (STANDARD.md "Columns") */
#view .pq-meter-kv { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 12px; }
#view .pq-meter-kv > div { display: flex; flex-direction: column; min-width: 0; }
#view .pq-meter-kv span { font-size: 13px; line-height: 20px; letter-spacing: .1px; color: var(--v6-ink-2); }
#view .pq-meter-kv b { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--v6-ink); }
#view .pq-meter-kv b[data-tone="attention"] { color: var(--v6-amber); }
#view .pq-meter .pq-ask-a { margin-top: 12px; }
/* a 402: the server's words, then the ask; after asking, what was said stays */
.pq-askbox { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pq-askbox .pq-askw { margin: 0; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
.pq-ask-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pq-ask-said { margin: 0; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); }
.pq-ask-said:empty { display: none; }
#view .pq-plain.pq-stop { display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; border-color: rgba(181, 71, 8, .35); }
#view .pq-plain.pq-stop > b { color: var(--v6-ink); }
#dialog .pq-msg .pq-askbox { gap: 10px; }
/* the outcome's linked letter: offered only when a warning or untitled letter is chosen */
#dialog .pq-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 24px; color: var(--v6-ink-2); cursor: pointer; }
#dialog .pq-check input { margin-top: 5px; }
#dialog .pq-linked { display: none; }
#dialog form:has(select[name="kind"] option[value="warning_letter"]:checked) .pq-linked, #dialog form:has(select[name="kind"] option[value="untitled_letter"]:checked) .pq-linked { display: flex; }
/* the editor: each section's title over its text */
#dialog .pq-edit { display: flex; flex-direction: column; gap: 16px; }
#dialog .pq-edsec { display: flex; flex-direction: column; gap: 6px; }
#dialog .pq-edsec label { font-size: 13px; line-height: 20px; color: var(--v6-ink-4); }
#dialog .pq-edsec input { height: 36px; font-size: 15px; }
#dialog .pq-edsec textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 24px; resize: vertical; }
#dialog .pq-pre { white-space: pre-wrap; }
#dialog .pq-byline { color: var(--v6-ink-2); }

/* ---------- the phone (390): one column, nothing sideways ---------- */
#view .pq-ph-only { display: none !important; }
@media (max-width: 699px) {
  #view .pq .pq-ph-only { display: block !important; }
  #view .pq .v7-sec .v6-table .v5-st { white-space: normal !important; }
  #view .pq .v7m-props { gap: 8px 24px; }
  #view .pq-pkg { flex-direction: column; align-items: stretch; gap: 12px; }
  #view .pq-price input { width: 100%; flex: 1; }
  #view .pq-row-acts { align-items: stretch; flex-direction: column; }
  #view .pq-pair > .pq-panel { padding: 16px !important; }
  #view .pq-draft, #view .pq-said, #view .pq-empty { padding: 16px; }
  #view .pq-drop { min-height: 120px; padding: 16px; }
  #view .pq-where { white-space: normal; }
  #view .pq-inl { margin-right: 0; flex-wrap: wrap; }
  #view .pq .v7m-acts { flex-wrap: wrap; }
  #view .pq .v7m-main .v7m-top { flex-direction: column; }
}
/* the finish round on the phone (appended last, scoped to 699px): the new sections stay inside the column */
@media (max-width: 699px) {
  #view .pq table.pq-mon td:last-child, #view .pq table.pq-mon th:last-child { white-space: normal; }
  #view .pq table.pq-mon td:last-child small, #view .pq table.pq-fr td:first-child { overflow-wrap: anywhere; }
  /* a section's context goes under its heading; the quarterly preview reads as a list, each section over what it counts */
  #view .pq .v7-sec-h { flex-wrap: wrap; row-gap: 0; }
  #view .pq .v7-sec-h > .pq-ctx { flex-basis: 100%; }
  #view .pq table.pq-qtr thead { display: none; }
  #view .pq table.pq-qtr tr { display: block; padding: 12px 0; border-top: 1px solid var(--v6-line); }
  #view .pq table.pq-qtr tbody tr:first-child { border-top: 0; }
  #view .pq .v7-sec table.pq-qtr.v6-table td, #view .pq table.pq-qtr td { display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
  #view .pq table.pq-qtr td + td { margin-top: 4px; }
  #view .pq table.pq-qtr td:first-child { color: var(--v6-ink); }
  #view .pq table.pq-fr .v5-st { white-space: nowrap !important; }
  #view .pq-meter-kv { gap: 8px 24px; }
  #view .pq .v7-sec .pq-form-a { flex-direction: column; align-items: flex-start; }
}