/* qc-panel.css -- session 352 (briefs/session-352-brief.md Part 3): the QC panel (qc-panel.js), from the mockup QCPanel.dc.html (approved
   by Daniel on 18 October 2026). Its numbers are the mockup's style attributes as tokens; its colours are the platform's (tokens.css --pa-*).
   560 px from the right over the page; full screen on a phone. */
:root{
  --qpn-w:        560px;   /* the panel */
  --qpn-pad:      18px;    /* a card's padding */
  --qpn-gap:      18px;    /* between cards */
  --qpn-score:    52px;    /* the score */
  --qpn-h:        24px;    /* the property's name */
  --qpn-x:        36px;    /* the close button */
  --qpn-ic:       40px;    /* a card's icon square */
  --qpn-shadow:   -8px 0 24px rgba(0,0,0,.18);
  --qpn-scrim:    rgba(14,54,59,.32);
  --qpn-stripe:   repeating-linear-gradient(90deg, var(--pa-teal-600) 0 60px, var(--pa-teal-300) 60px 120px, var(--pa-yellow) 120px 180px, #FF8A33 180px 240px);
}
body.qpn-open{ overflow:hidden }
.qpn-scrim{ position:fixed; inset:0; z-index:900; background:var(--qpn-scrim) }
.qpn{ position:fixed; top:0; right:0; bottom:0; z-index:901; width:var(--qpn-w); max-width:100vw; box-sizing:border-box; display:flex; flex-direction:column;
  background:var(--pa-page); color:var(--pa-ink); box-shadow:var(--qpn-shadow); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .22s ease-out; font-family:'Inter','Segoe UI',system-ui,sans-serif }
.qpn.in{ transform:none }
.qpn:focus{ outline:none }
@media (prefers-reduced-motion: reduce){ .qpn{ transition:none } }
@media (max-width:600px){ .qpn{ width:100vw } }

/* the header, on the dark teal */
.qpn-hd{ background:var(--pa-teal-900); color:#fff; padding:18px 22px 20px }
.qpn-hrow{ display:flex; align-items:center; gap:10px }
.qpn-chip{ flex:0 0 auto; background:var(--pa-amber-bg); color:var(--pa-amber-text); font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px }
.qpn-where{ flex:1 1 auto; min-width:0; font-size:12.5px; opacity:.85 }
.qpn-x{ flex:0 0 auto; width:var(--qpn-x); height:var(--qpn-x); border-radius:10px; border:0; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center }
.qpn-x:hover{ background:rgba(255,255,255,.24) }
.qpn-x:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px }
.qpn-h{ margin:14px 0 4px; font-size:var(--qpn-h); font-weight:700; letter-spacing:-.025em; line-height:1.2; color:#fff; overflow-wrap:anywhere }
.qpn-sub{ font-size:14px; opacity:.88 }
.qpn-stripe{ flex:0 0 auto; height:6px; background:var(--qpn-stripe) }
.qpn-body{ padding:20px 22px 32px; display:flex; flex-direction:column; gap:var(--qpn-gap) }
@media (max-width:600px){ .qpn-hd{ padding:16px 16px 18px } .qpn-body{ padding:16px 16px 28px } }

/* cards */
.qpn-card{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); min-width:0 }
.qpn-pad{ padding:var(--qpn-pad) }
.qpn-pt0{ padding-top:0 } .qpn-pt8{ margin-top:8px }
.qpn-ch{ display:flex; align-items:center; gap:12px; padding:16px 18px }
.qpn-ic{ flex:0 0 auto; width:var(--qpn-ic); height:var(--qpn-ic); border-radius:10px; background:var(--pa-teal-900); display:flex; align-items:center; justify-content:center }
.qpn-ct{ font-weight:700; font-size:17px; color:var(--pa-ink) }
.qpn-cs{ font-size:12.5px; color:var(--pa-muted) }
.qpn-cs2{ font-size:13px; color:var(--pa-text) }
.qpn-grow{ flex:1 1 auto }
.qpn-link{ font-size:13px; font-weight:600; color:var(--pa-teal-600); text-decoration:underline; text-underline-offset:2px }
.qpn-link:hover{ color:var(--pa-teal-900) }

/* the status */
.qpn-srow{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap }
.qpn-score{ font-size:var(--qpn-score); font-weight:800; letter-spacing:-.04em; line-height:.9; color:var(--pa-ink) }
.qpn-score.look{ color:#D96A18 }
.qpn-score.none{ font-size:24px; letter-spacing:-.02em; line-height:1.1; color:var(--pa-text) }
.qpn-sl{ font-size:12.5px; font-weight:600; color:var(--pa-text); margin-top:6px }
.qpn-sside{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:6px; padding-bottom:2px }
.qpn-pill{ align-self:flex-start; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px }
.qpn-pill.wait{ background:var(--pa-amber-icon); color:var(--pa-amber-text) }
.qpn-pill.ok{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.qpn-times{ font-size:13px; color:var(--pa-text) }
.qpn-steps{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px }
.qpn-steps li{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.qpn-bar{ height:6px; border-radius:3px; background:var(--pa-grey) }
.qpn-steps li.done .qpn-bar{ background:var(--pa-green-dot) }
.qpn-steps li.now .qpn-bar{ background:var(--pa-yellow) }
.qpn-st{ font-size:11.5px; color:var(--pa-text); overflow-wrap:anywhere }
.qpn-steps .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.qpn-acts{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; align-items:center }
.qpn-go{ border:0; cursor:pointer; padding:12px 20px; min-height:44px; border-radius:var(--pa-radius-btn); background:linear-gradient(180deg, var(--pa-yellow), var(--pa-yellow-2)); color:var(--pa-ink); font:inherit; font-weight:700; font-size:14px; box-shadow:var(--pa-shadow-go) }
.qpn-go:hover{ filter:brightness(1.03); box-shadow:0 8px 20px rgba(217,106,24,.34) }
.qpn-go:focus-visible, .qpn-btn2:focus-visible, .qpn-send:focus-visible, .qpn-link:focus-visible, .qpn-th:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px }
.qpn-go:disabled{ opacity:.55; cursor:default; box-shadow:none }
.qpn-btn2{ display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; padding:11px 16px; border-radius:var(--pa-radius-btn); background:var(--pa-grey); color:var(--pa-teal-900); font-size:14px; font-weight:700; text-decoration:none }
.qpn-btn2:hover{ background:#DDE2E5 }
.qpn-msg{ font-size:13px; color:var(--pa-text); margin-top:10px }
.qpn-msg:empty{ display:none }

/* what he sees: his phone's own drawing, inside the card */
/* his phone's card is a column with 10 px between its lines (myroute.css .qb); here without its frame, inside the panel's own card */
.qpn-brief.qb{ border:0; display:flex; flex-direction:column; gap:10px }
.qpn-brief .qb-fn{ background:var(--pa-amber-icon); border-radius:10px; padding:12px 14px; margin:0 }
.qpn-brief .qb-fn .qb-ik{ font-size:12.5px; font-weight:700; color:var(--pa-amber-text) }
.qpn-brief .qb-fn .qcx-s{ color:var(--pa-amber-text); font-size:11.5px }
.qpn-brief .qb-insp{ background:var(--pa-amber-icon); border-radius:10px; padding:12px 14px; margin:0 }
.qpn-brief .qb-line, .qpn-brief .qb-flag, .qpn-brief .qb-sec, .qpn-brief .qb-inv{ font-size:14px }
.qpn-brief .qcx-btn[disabled]{ cursor:default }

/* the note */
.qpn-lead{ font-size:13px; color:var(--pa-text); margin-top:4px; line-height:1.45 }
.qpn-lab{ display:block; font-size:12.5px; font-weight:600; color:var(--pa-text); margin-top:14px }
.qpn-in{ width:100%; box-sizing:border-box; margin-top:6px; border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-inp); padding:10px 12px; font:inherit; font-size:16px; color:var(--pa-ink); resize:vertical; min-height:84px }
@media (min-width:601px){ .qpn-in{ font-size:14px } }
.qpn-in:focus{ outline:3px solid var(--pa-teal-300); outline-offset:1px; border-color:var(--pa-teal-600) }
.qpn-nrow{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap }
.qpn-send{ border:0; cursor:pointer; padding:10px 16px; min-height:44px; border-radius:var(--pa-radius-btn); background:var(--pa-teal-900); color:#fff; font:inherit; font-weight:700; font-size:13.5px }
.qpn-send:hover{ background:var(--pa-teal-950) }
.qpn-send:disabled{ opacity:.6; cursor:default }
.qpn-hint{ font-size:12px; color:var(--pa-muted) }
.qpn-sentn{ margin-top:12px; background:var(--pa-grey); border-radius:10px; padding:10px 12px; font-size:14px }
.qpn-sentn .qpn-cs{ font-size:11.5px; margin-top:4px }

/* the photos */
.qpn-phh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.qpn-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:14px }
.qpn-tile{ min-width:0 }
.qpn-th{ display:block; width:100%; aspect-ratio:1 / 1; border:0; padding:0; border-radius:10px; overflow:hidden; background:var(--ap-thumb-bg); cursor:zoom-in; box-sizing:border-box }
.qpn-th img{ display:block; width:100%; height:100%; object-fit:cover }
.qpn-th.ph-st{ cursor:default; padding:6px }
@media (max-width:420px){ .qpn-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }

/* where it opens from: a QC stop on the Dashboard's Field team card is a button; the schedule's QC stop has Open QC */
.dayboard .ft-stop.ft-qcbtn{ font:inherit; font-size:12px; text-align:left; cursor:pointer; color:inherit; box-shadow:inset 3px 0 0 var(--pa-teal-600) }
.dayboard .ft-stop.ft-qcbtn:hover{ border-color:var(--pa-teal-600); box-shadow:inset 3px 0 0 var(--pa-teal-600), 0 2px 8px rgba(14,54,59,.14) }
.fs-sc-qc{ grid-column:2 / -1; display:flex; margin-top:6px }
.fs-openqc{ border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-teal-900); font:inherit; font-size:12.5px; font-weight:700; padding:5px 12px; min-height:32px; border-radius:8px; cursor:pointer }
.fs-openqc:hover{ background:var(--pa-teal-100); border-color:var(--pa-teal-600) }
.fs-openqc:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px }

/* ================================================================ the review page's top (qc-review-top.js) ================================================================
   Session 352 (brief Part 4; the mockup QCReview.dc.html): the queue, one decision card (radius 18), three columns (340, 520 and 320 px
   to start, gap 18, in the mockup; 300, 440 and 280 here, so the three sit side by side beside the Hub's menu, whose page is 1,132 px wide
   at 1440), stacked on a phone. The page's own cards keep their styles below. */
:root{
  --qrv-h:      30px;    /* the property's name */
  --qrv-tile:   92px;    /* the score's tile */
  --qrv-gap:    18px;
  --qrv-look-bg:#FFE8D6; --qrv-look-n:#D96A18; --qrv-look-t:#9A4A0E;
}
.qrv-queue{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; margin:0 0 14px }
.qrv-queue a{ font-weight:600; color:var(--pa-teal-600); text-decoration:underline; text-underline-offset:2px }
.qrv-queue a:hover{ color:var(--pa-teal-900) }
.qrv-sep{ color:var(--pa-muted) }
.qrv-here, .qrv-queue .qrv-k{ color:var(--pa-text); font-weight:600 }
.qrv-grow{ flex:1 1 auto }
.qrv-queue a.qrv-qbtn, .qrv-qbtn{ display:inline-flex; align-items:center; min-height:36px; box-sizing:border-box; padding:8px 14px; border-radius:var(--pa-radius-btn); background:var(--pa-grey); color:var(--pa-teal-900); font-weight:700; text-decoration:none }
.qrv-queue a.qrv-qbtn:hover{ background:#DDE2E5 }
.qrv-qbtn.off{ opacity:.45 }
.qrv-queue a:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px }

.qrv-dec{ background:#fff; border-radius:var(--pa-radius-hero); box-shadow:var(--pa-shadow-card); padding:20px 24px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin:0 0 var(--qrv-gap) }
.qrv-dl{ flex:1 1 360px; min-width:0 }
.qrv-h{ margin:0; font-size:var(--qrv-h); font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--pa-ink); overflow-wrap:anywhere }
.qrv-line{ font-size:14px; color:var(--pa-text); margin-top:6px; line-height:1.45 }
.qrv-links{ display:flex; gap:6px 14px; margin-top:8px; font-size:13px; flex-wrap:wrap; align-items:baseline }
.qrv-links a{ font-weight:600; color:var(--pa-teal-600); text-decoration:underline; text-underline-offset:2px }
.qrv-links a:hover{ color:var(--pa-teal-900) }
.qrv-note{ color:var(--pa-muted) }
.qrv-dt{ flex:0 0 auto }
.qrv-tile{ width:var(--qrv-tile); height:var(--qrv-tile); border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.qrv-tile.look{ background:var(--qrv-look-bg) } .qrv-tile.look .qrv-tn{ color:var(--qrv-look-n) } .qrv-tile.look .qrv-tl{ color:var(--qrv-look-t) }
.qrv-tile.ok{ background:var(--pa-green-bg) } .qrv-tile.ok .qrv-tn, .qrv-tile.ok .qrv-tl{ color:var(--pa-green-text) }
.qrv-tile.none{ background:var(--pa-grey) } .qrv-tile.none .qrv-tn, .qrv-tile.none .qrv-tl{ color:var(--pa-text) }
.qrv-tn{ font-size:40px; font-weight:800; letter-spacing:-.04em; line-height:1 }
.qrv-tl{ font-size:12px; font-weight:700; margin-top:4px; text-align:center; padding:0 4px }
.qrv-dr{ flex:0 1 320px; min-width:0; display:flex; flex-direction:column; gap:8px }
.qrv-go{ border:0; cursor:pointer; padding:14px 20px; min-height:48px; border-radius:var(--pa-radius-btn); background:linear-gradient(180deg, var(--pa-yellow), var(--pa-yellow-2)); color:var(--pa-ink); font:inherit; font-weight:700; font-size:15px; box-shadow:var(--pa-shadow-go) }
.qrv-go:hover{ filter:brightness(1.03); box-shadow:0 8px 20px rgba(217,106,24,.34) }
.qrv-go:disabled{ opacity:.55; cursor:default; box-shadow:none }
.qrv-go:focus-visible, .qrv-ask:focus-visible, .qrv-link:focus-visible, .qrv-btn2:focus-visible, .qrv-ptb:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px }
.qrv-ok{ background:var(--pa-green-bg); color:var(--pa-green-text); border-radius:var(--pa-radius-btn); padding:12px 14px; font-size:14px; font-weight:600 }
.qrv-ok a{ color:var(--pa-green-text); text-decoration:underline }
.qrv-does, .qrv-why{ font-size:12px; color:var(--pa-muted); line-height:1.45 }
.qrv-why{ color:var(--pa-text) }
.qrv-ask, .qrv-link{ align-self:flex-start; border:0; background:none; padding:4px 0; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--pa-teal-600); text-decoration:underline; text-underline-offset:2px }
.qrv-ask:hover, .qrv-link:hover{ color:var(--pa-teal-900) }
.qrv-more{ flex:1 1 100%; border-top:1px solid var(--pa-line); padding-top:14px; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center }
.qrv-more .pa-btns{ display:flex; flex-wrap:wrap; gap:8px }
.qrv-more .pa-btn.pa-dk{ background:var(--pa-grey); border:1px solid transparent; color:var(--pa-teal-900) }
.qrv-more .pa-btn.pa-dk:hover{ background:#DDE2E5 }
.qrv-more .pa-btn.pa-go{ background:var(--pa-teal-900); color:#fff; border:0 }
.qrv-more .qcp-actmsg{ flex:1 1 100%; color:var(--pa-text); font-size:13px }
.qrv-more .qcp-actmsg a{ color:var(--pa-teal-600) }
.qrv-more .qcp-actmsg.qcp-bad{ color:var(--pa-red-text) }

.qrv-cols{ display:flex; flex-wrap:wrap; gap:var(--qrv-gap); align-items:flex-start; margin:0 0 var(--qrv-gap) }
.qrv-card{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); min-width:0 }
.qrv-found{ flex:1 1 300px; overflow:hidden }
.qrv-photos{ flex:999 1 440px; padding:16px 18px }
.qrv-host{ flex:1 1 280px; overflow:hidden }
.qrv-cols > .qrv-card > .loading{ padding:18px }
.qrv-ch{ padding:16px 18px; display:flex; align-items:center; gap:12px }
.qrv-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:var(--pa-teal-900); display:flex; align-items:center; justify-content:center }
.qrv-ct{ margin:0; font-weight:700; font-size:17px; color:var(--pa-ink) }
.qrv-cs{ font-size:13px; color:var(--pa-text) }
.qrv-pad{ padding:0 18px 14px } .qrv-pt0{ padding-top:0 }
.qrv-k{ font-size:12.5px; font-weight:700; color:var(--pa-text); margin:8px 0 4px }
.qrv-sub{ border-top:1px solid var(--pa-line); padding:14px 18px 4px; margin:0 }
.qrv-p{ font-size:14px; color:var(--pa-text); margin:0 0 8px; line-height:1.5; overflow-wrap:anywhere }
.qrv-dim{ color:var(--pa-muted) }
.qrv-vs{ display:flex; gap:10px; align-items:flex-start; padding-top:8px }
.qrv-vs .qrv-p{ flex:1 1 auto; margin:0; color:var(--pa-ink) }
.qrv-pill{ flex:0 0 auto; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px }
.qrv-pill-ok{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.qrv-pill-diff{ background:var(--qrv-look-bg); color:var(--qrv-look-t) }
.qrv-pill-none{ background:var(--pa-grey); color:var(--pa-text) }

.qrv-phh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.qrv-pgrid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin-top:14px }
@media (max-width:760px){ .qrv-pgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.qrv-pt{ position:relative; min-width:0; aspect-ratio:1 / 1; border-radius:10px; overflow:hidden; background:var(--ap-thumb-bg) }
.qrv-ptb{ display:block; width:100%; height:100%; border:0; padding:0; margin:0; background:none; cursor:pointer; border-radius:10px; overflow:hidden; box-sizing:border-box }
.qrv-ptb img{ display:block; width:100%; height:100%; object-fit:cover }
.qrv-pt.out .qrv-ptb img{ opacity:.45 }
.qrv-pt.office .qrv-ptb{ cursor:default }
.qrv-ptb.ph-st{ height:100% }
.qrv-ptag.pa-tagpill{ position:absolute; left:8px; top:8px; min-height:0; font-size:11px; font-weight:700; padding:2px 8px; pointer-events:none }
.qrv-pbadge{ position:absolute; left:8px; bottom:8px; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; pointer-events:none }
.qrv-pbadge.in{ background:#fff; color:var(--pa-green-text) }
.qrv-legend{ display:flex; gap:8px 14px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--pa-text); align-items:baseline }
.qrv-legend b.t-after{ color:var(--pa-tag-after-fg) } .qrv-legend b.t-damage{ color:var(--pa-tag-damage-fg) } .qrv-legend b.t-coaching{ color:var(--pa-ink) }
.qrv-legend .qrv-link{ padding:0 }

.qrv-hh{ padding:16px 18px; display:flex; align-items:center; gap:10px }
.qrv-doc{ margin:0 18px; border:1px solid var(--pa-line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px }
.qrv-stripe{ height:4px; border-radius:2px; background:repeating-linear-gradient(90deg, var(--pa-teal-600) 0 30px, var(--pa-teal-300) 30px 60px, var(--pa-yellow) 60px 90px, #FF8A33 90px 120px) }
.qrv-dt1{ font-size:15px; font-weight:700; color:var(--pa-ink) }
.qrv-dp{ font-size:13px; color:var(--pa-text); line-height:1.45; overflow-wrap:anywhere }
.qrv-warn{ color:var(--qrv-look-t); font-weight:600 }
.qrv-rec{ background:var(--pa-teal-100); border-radius:8px; padding:10px }
.qrv-rk{ font-size:12px; font-weight:700; color:var(--pa-teal-900) }
.qrv-rec .qrv-dp{ color:var(--pa-ink); margin-top:3px; font-size:12.5px }
.qrv-hps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px }
.qrv-hp{ aspect-ratio:1 / 1; border-radius:6px; overflow:hidden; background:var(--ap-thumb-bg); display:flex; align-items:center; justify-content:center }
.qrv-hp img{ width:100%; height:100%; object-fit:cover; display:block }
.qrv-hp.more{ background:var(--pa-grey); font-size:11px; font-weight:700; color:var(--pa-text) }
.qrv-hb{ display:flex; gap:10px; padding:14px 18px 18px; flex-wrap:wrap }
.qrv-btn2{ display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box; border:0; cursor:pointer; padding:9px 14px; border-radius:var(--pa-radius-btn); background:var(--pa-grey); color:var(--pa-teal-900); font:inherit; font-size:13px; font-weight:700; text-decoration:none }
.qrv-btn2:hover{ background:#DDE2E5 }
/* the full photo tools below: every tile's Share and In report switches and its tag menu are the top grid's click and the photo's full
   view now (Select keeps tagging, sharing and the report for many at once) */
#qcpPhotosSlot .ph-tile .ph-sws, #qcpPhotosSlot .ph-tile .ph-tag{ display:none }
@media (max-width:760px){ .qrv-dec{ padding:16px; gap:16px } .qrv-h{ font-size:24px } .qrv-dr{ flex:1 1 100% } }

/* ======================================================================================================================================
   Session 369 (briefs/session-369-brief.md): the QC's page in three steps, from the QCReview2 mockup's own style attributes (tokens.css
   "Session 369" and the --pa-* tokens). Every class starts .qs (qc-review-top.js, qc-page.js, qc.js).
   ====================================================================================================================================== */
.qs.qcp.pa{ max-width:var(--qs-wrap); margin:0 auto; gap:var(--qs-gap); padding-bottom:24px }
.qs-top{ display:flex; flex-wrap:wrap; background:#fff; border-radius:var(--pa-radius-hero); box-shadow:var(--pa-shadow-card); overflow:hidden }
.qs-tile{ width:var(--qs-tile); flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 0; text-align:center; background:var(--pa-green-bg); color:var(--pa-green-text) }
.qs-tile.look{ background:var(--qs-orange-bg); color:var(--qs-orange-ink) }
.qs-tile.none{ background:var(--pa-page); color:var(--pa-muted) }
.qs-tn{ font-size:var(--qs-score); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--pa-green-text) }
.qs-tile.look .qs-tn{ color:var(--qs-orange-dk) }
.qs-tile.none .qs-tn{ color:var(--pa-muted) }
.qs-tl{ font-size:13px; font-weight:700; margin-top:6px }
.qs-tb{ font-size:11.5px; margin-top:2px }
.qs-tmid{ flex:1 1 420px; min-width:0; padding:18px 22px }
.qs-h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.025em; color:var(--pa-ink); line-height:1.2 }
.qs-h1 a{ color:inherit; text-decoration:none }
.qs-h1 a:hover{ text-decoration:underline; text-underline-offset:4px }
.qs-h1 a:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px; border-radius:4px }
.qs-sub{ font-size:13.5px; color:var(--pa-text); margin-top:3px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 0 }
.qs-sub a, .qs a.qs-linkbtn, .qs-linkbtn{ color:var(--pa-teal-600); font-weight:600; text-decoration:underline; text-underline-offset:2px }
.qs-sub a:hover, .qs-linkbtn:hover{ color:var(--pa-teal-900) }
.qs-dot{ color:var(--pa-muted); margin:0 8px }
.qs-line{ font-size:14px; margin-top:10px; color:var(--pa-ink) }
.qs-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.qs-chip{ font-size:13px; font-weight:700; padding:5px 11px; border-radius:999px }
.qs-c-miss{ background:var(--qs-orange-bg); color:var(--qs-orange-ink) }
.qs-c-sup{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.qs-c-own{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.qs-c-good{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.qs-tside{ flex:0 0 auto; padding:18px 22px; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px }
.qs-pill{ font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px }
.qs-p-ok{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.qs-p-wait{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.qs-p-none{ background:var(--pa-grey); color:var(--pa-text) }
.qs-xpills{ justify-content:flex-end }
.qs-linkbtn{ border:0; background:transparent; cursor:pointer; font:600 13px/1.3 inherit; padding:4px 0; font-family:inherit }
.qs-linkbtn:focus-visible, .qs-btn:focus-visible, .qs-go:focus-visible, .qs-tab:focus-visible, .qs-miss:focus-visible, .qs-sb:focus-visible, .qs-dest:focus-visible,
.qs-rph:focus-visible, .qs-fph:focus-visible, .qs-segb:focus-visible, .qs-box:focus-visible, .qs-nav:focus-visible, .qs-full:focus-visible, .qs-drx:focus-visible, .qs-moresum:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.qs-linkbtn.qs-sm{ font-size:12.5px }
/* the three step tabs */
.qs-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px }
.qs-tab{ border:0; cursor:pointer; display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:var(--pa-radius-card); font-family:inherit; background:#fff; color:var(--pa-ink); box-shadow:var(--pa-shadow-card); text-align:left; min-width:0 }
.qs-tab:hover{ background:#F7F9FA }
.qs-tab.on{ background:var(--pa-teal-900); color:#fff; box-shadow:var(--qs-tab-shadow) }
.qs-tnum{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; background:var(--pa-grey); color:var(--pa-text) }
.qs-tnum.on{ background:var(--pa-yellow); color:var(--pa-ink) }
.qs-tnum.seen{ background:var(--pa-green-dot); color:#fff }
.qs-ttxt{ min-width:0 }
.qs-tt{ display:block; font-size:15px; font-weight:700 }
.qs-ts{ display:block; font-size:12.5px; opacity:.85; margin-top:2px }
/* the columns of each step */
.qs-cols{ display:flex; flex-wrap:wrap; gap:var(--qs-gap); align-items:flex-start }
.qs-left{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.qs-l1{ flex:1 1 var(--qs-left1) }
.qs-viewer{ flex:1 1 var(--qs-right1); min-width:0; overflow:hidden; position:sticky; top:12px }
.qs-l2{ flex:1 1 var(--qs-left2); min-width:0 }
.qs-phonecol{ flex:0 0 var(--qs-phone); display:flex; flex-direction:column; align-items:center; gap:10px }
.qs-report{ flex:999 1 var(--qs-left3); min-width:0; padding:28px 32px }
.qs-side{ flex:1 1 var(--qs-right3); min-width:0; display:flex; flex-direction:column; gap:12px }
.qs-card{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card) }
.qs-pad{ padding:16px 18px }
.qs-pt0{ padding-top:0 }
.qs-ct{ margin:0; font-weight:700; font-size:16px; color:var(--pa-ink); line-height:1.3 }
.qs-ct15{ font-size:15px }
.qs-ct17{ font-size:17px }
.qs-cs{ font-size:13px; color:var(--pa-muted); line-height:1.45 }
.qs-dim{ color:var(--pa-muted) }
.qs-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.qs-mt4{ margin-top:4px } .qs-mt8{ margin-top:8px } .qs-mt10{ margin-top:10px } .qs-mt12{ margin-top:12px } .qs-mt16{ margin-top:16px } .qs-mt18{ margin-top:18px } .qs-mt20{ margin-top:20px } .qs-mb8{ margin-bottom:8px }
.qs-grow1{ flex:1 1 auto }
.qs-ctr{ text-align:center; max-width:340px }
.qs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; box-sizing:border-box; border:0; cursor:pointer; padding:9px 14px; border-radius:var(--pa-radius-btn);
  background:var(--pa-grey); color:var(--pa-ink); font:700 13.5px/1.2 inherit; font-family:inherit; text-decoration:none }
.qs-btn:hover{ background:#DDE2E5 }
.qs-btn:disabled{ opacity:.5; cursor:not-allowed }
.qs-btn.qs-sm{ min-height:34px; padding:6px 10px; font-size:12.5px }
.qs-btn.qs-dark{ background:var(--pa-teal-900); color:#fff }
.qs-btn.qs-dark:hover{ background:#0E363B }
.qs-btn.qs-teal{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.qs-btn.qs-teal:hover{ background:#C9E6E8 }
.qs-btn.qs-green, a.qs-btn.qs-green{ background:var(--pa-green-bg); color:var(--pa-green-text); font-size:14px; padding:12px 18px }
.qs-btn.qs-wide{ width:100% }
.qs-go{ border:0; cursor:pointer; padding:12px 26px; min-height:44px; border-radius:var(--pa-radius-btn); font:700 15px/1.2 inherit; font-family:inherit;
  background:linear-gradient(180deg, var(--pa-yellow), var(--pa-yellow-2)); color:var(--pa-ink); box-shadow:var(--pa-shadow-go) }
.qs-go.off, .qs-go:disabled{ cursor:not-allowed; background:var(--pa-grey); color:#9AA3A9; box-shadow:none }
/* step 1 */
.qs-scorebox .qcr-score{ display:flex; flex-direction:column; gap:4px }
.qs-scorebox #qcrScore{ width:96px; height:44px; font-size:22px; font-weight:800; text-align:center; border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-inp) }
.qs-ch{ padding:14px 18px 8px; display:flex; align-items:center; gap:8px }
.qs-ch0{ padding:0 }
.qs-dotc{ width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.qs-dot-miss{ background:var(--qs-orange) }
.qs-dot-office{ background:var(--pa-amber-edge); border-radius:3px }
.qs-dot-good{ background:var(--pa-green-dot) }
.qs-miss{ padding:14px 18px; border-top:1px solid var(--pa-line-soft); cursor:pointer }
.qs-miss:hover{ background:#FCFCFD }
.qs-miss.sel{ background:var(--qs-sel-bg); box-shadow:inset 4px 0 0 var(--qs-orange) }
.qs-mrow{ display:flex; gap:12px; align-items:flex-start }
.qs-mmain{ flex:1 1 auto; min-width:0 }
.qs-mtop{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.qs-size{ font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:999px; white-space:nowrap }
.qs-size.big{ background:var(--qs-orange); color:#fff }
.qs-size.small{ background:var(--qs-orange-bg); color:var(--qs-orange-ink) }
.qs-mfrom{ font-size:12px; font-weight:600; color:var(--pa-muted) }
.qs-mt{ font-size:15px; font-weight:700; margin-top:6px; color:var(--pa-ink) }
.qs-mw{ font-size:13px; color:var(--pa-text); margin-top:3px }
.qs-mthumbs{ display:flex; gap:4px; flex-shrink:0 }
.qs-mthumb{ width:var(--qs-thumb); height:var(--qs-thumb); border-radius:8px; overflow:hidden; background:var(--pa-page); display:block }
.qs-mthumb img{ width:100%; height:100%; object-fit:cover; display:block }
.qs-mthumb .ph-st{ font-size:9px }
.qs-note{ font-size:12px; color:var(--pa-muted) }
.qs-form{ border:2px solid var(--pa-teal-300) }
.qs-lab{ display:block; font-size:13px; font-weight:700; color:var(--pa-ink); margin:12px 0 6px }
.qs-in{ width:100%; box-sizing:border-box; border:1px solid var(--pa-input-line); border-radius:8px; padding:10px 12px; font:450 14px/1.5 inherit; font-family:inherit; color:var(--pa-ink); background:#fff; resize:vertical }
.qs-in:focus{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.qs-seg{ display:inline-flex; gap:4px; background:var(--pa-page); padding:4px; border-radius:var(--pa-radius-btn) }
.qs-segb{ border:0; cursor:pointer; min-height:36px; padding:6px 14px; border-radius:8px; background:transparent; color:var(--pa-text); font:700 13px inherit; font-family:inherit }
.qs-segb.on{ background:var(--pa-teal-900); color:#fff }
.qs-fpick{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:6px }
.qs-fph{ position:relative; aspect-ratio:1 / 1; border-radius:8px; padding:0; overflow:hidden; border:3px solid transparent; cursor:pointer; background:var(--pa-page); opacity:.55 }
.qs-fph.on{ border-color:var(--qs-orange); opacity:1 }
.qs-fph img{ width:100%; height:100%; object-fit:cover; display:block }
.qs-fn{ position:absolute; left:3px; bottom:3px; font-size:10.5px; font-weight:800; background:rgba(0,0,0,.6); color:#fff; padding:1px 5px; border-radius:5px }
.qs-orow{ padding:10px 18px 14px; border-top:1px solid var(--pa-line-soft) }
.qs-faded{ opacity:.6 }
.qs-ochip{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px }
.qs-o-sup{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.qs-o-own{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.qs-ot{ font-size:14.5px; font-weight:700; margin-top:6px; color:var(--pa-ink) }
.qs-goods{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.qs-good{ font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--pa-green-bg); color:var(--pa-green-text) }
.qs-foot{ margin-top:12px; padding-top:10px; border-top:1px solid var(--pa-line-soft); display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; font-size:13px }
/* the viewer */
.qs-stage{ position:relative; aspect-ratio:4 / 3; display:flex; align-items:center; justify-content:center; background:#1E2326; overflow:hidden }
.qs-bigimg{ width:100%; height:100%; object-fit:contain; display:block }
.qs-bigwait{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.qs-blur{ position:absolute; inset:0; filter:blur(2px); opacity:.6 }
.qs-loading{ position:relative; color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.5) }
.qs-tagchip{ position:absolute; left:12px; top:12px }
.qs-time{ position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; padding:4px 8px; border-radius:6px }
.qs-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--pa-ink); cursor:pointer; display:flex; align-items:center; justify-content:center }
.qs-nav:hover{ background:#fff }
.qs-prev{ left:12px } .qs-next{ right:12px }
.qs-full{ position:absolute; right:12px; top:12px; border:0; cursor:pointer; background:rgba(255,255,255,.92); color:var(--pa-teal-900); font:700 12.5px inherit; font-family:inherit; padding:6px 10px; border-radius:8px; min-height:32px }
.qs-full:hover{ background:#fff }
.qs-vbar{ padding:12px 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--pa-line-soft) }
.qs-vn{ font-size:13px; font-weight:700; color:var(--pa-ink) }
.qs-dest{ border:0; cursor:pointer; min-height:36px; padding:8px 12px; border-radius:var(--pa-radius-btn); font:700 13px inherit; font-family:inherit; background:var(--pa-grey); color:var(--pa-text) }
.qs-dest:hover{ background:#DDE2E5 }
.qs-dest.on.own{ background:var(--pa-teal-600); color:#fff }
.qs-dest.on.cl{ background:var(--qs-orange-dk); color:#fff }
.qs-dest:disabled{ cursor:not-allowed; opacity:.75 }
.qs-stripw{ padding:12px 16px 16px }
.qs-strip{ display:grid; grid-template-columns:repeat(var(--qs-strip), minmax(0, 1fr)); gap:6px }
.qs-sb{ position:relative; aspect-ratio:1 / 1; border-radius:8px; padding:0; cursor:pointer; overflow:hidden; border:0; background:var(--pa-page) }
.qs-sb img{ width:100%; height:100%; object-fit:cover; display:block }
.qs-sb.off{ opacity:.4 }
.qs-sb.cur{ box-shadow:inset 0 0 0 3px var(--pa-yellow); opacity:1 }
.qs-sb.cur img{ outline:3px solid var(--pa-yellow); outline-offset:-3px }
.qs-sb.ring{ box-shadow:0 0 0 2px var(--qs-orange) }
.qs-sb.wait{ background:repeating-linear-gradient(45deg, var(--pa-page) 0 6px, #E4E8EA 6px 12px); cursor:default }
.qs-sdot{ position:absolute; right:4px; bottom:4px; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 2px #fff }
.qs-sdot.own{ background:var(--pa-teal-600) } .qs-sdot.cl{ background:var(--qs-orange) }
.qs-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--pa-text) }
.qs-legend > span{ display:inline-flex; align-items:center; gap:5px }
.qs-ldot{ width:9px; height:9px; border-radius:50% }
.qs-ldot.own{ background:var(--pa-teal-600) } .qs-ldot.cl{ background:var(--qs-orange) }
/* step 2 */
.qs-l2 .qcr-ta{ min-height:120px }
.qs-esline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:12.5px }
.qs-estag{ font-weight:700; padding:3px 8px; border-radius:999px; background:var(--pa-grey); color:var(--pa-text); font-size:12px }
.qs-estag.ok{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.qs-estag.work{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.qs-estag.bad{ background:var(--qs-orange-bg); color:var(--qs-orange-ink) }
.qs-frow{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--pa-line-soft) }
.qs-ft{ font-size:14px; font-weight:600; flex:1 1 auto; color:var(--pa-ink); min-width:0 }
.qs-phone{ width:340px; max-width:100%; border-radius:34px; background:var(--pa-ink); padding:12px; box-sizing:border-box }
.qs-screen{ border-radius:24px; background:#F7F8F8; overflow:hidden; padding:14px 14px 18px; font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; color:#4A4F55 }
.qsa-back{ margin-bottom:10px }
.qsa-backb{ display:inline-block; background:#fff; border:1px solid #E0E4E7; border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:700; color:#1D6E77 }
.qsa-card{ background:#fff; border:1px solid #E0E4E7; border-radius:14px; padding:14px }
.qsa-fmh{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#9CA0A6; margin-bottom:10px }
.qsa-fv{ font-size:14.5px; font-weight:700; color:#4A4F55 }
.qsa-fine{ font-size:11px; color:#9CA0A6; line-height:1.5; margin-top:6px }
.qsa-big{ font-size:34px; font-weight:800; line-height:1; color:#1D6E77; margin-top:8px }
.qsa-lbl{ font-size:12.5px; font-weight:700; color:#9CA0A6; margin-top:14px }
.qsa-note{ background:#F7F8F8; border-left:3px solid #1D6E77; border-radius:0 8px 8px 0; padding:12px 14px; margin:10px 0; font-size:15px; line-height:1.55; white-space:pre-wrap; color:#4A4F55 }
.qsa-ph{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:6px }
.qsa-ph figure{ margin:0 }
.qsa-ph img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:8px; display:block }
.qsa-ph figcaption{ font-size:11px; color:#9CA0A6; margin-top:2px }
.qsa-cta{ margin-top:16px; text-align:center; background:#1D6E77; color:#fff; font-weight:700; border-radius:12px; padding:13px; font-size:15px }
/* step 3 */
.qs-stripe{ height:5px; border-radius:3px; background:var(--qs-stripe) }
.qs-rh{ display:flex; align-items:baseline; gap:10px; margin-top:18px; flex-wrap:wrap }
.qs-rt{ margin:0; font-size:22px; font-weight:800; color:var(--pa-ink) }
.qs-ra{ font-size:14px; color:var(--pa-text); margin-top:4px }
.qs-rsum{ margin-top:18px; display:flex; gap:10px; align-items:flex-start }
.qs-rp{ margin:0; font-size:15px; line-height:1.6; flex:1 1 auto; color:var(--pa-ink) }
.qs-sumin{ font-size:15px; line-height:1.6 }
.qs-rec{ margin-top:16px; background:var(--pa-teal-100); border-radius:var(--pa-radius-btn); padding:14px 16px }
.qs-rk{ font-size:13px; font-weight:700; color:var(--pa-teal-900) }
.qs-rp2{ font-size:14.5px; line-height:1.55; margin-top:4px; color:var(--pa-ink) }
.qs-rgrid{ display:grid; grid-template-columns:repeat(var(--qs-owner-cols), minmax(0, 1fr)); gap:8px; margin-top:8px }
.qs-rph{ position:relative; aspect-ratio:1 / 1; border-radius:8px; border:0; padding:0; overflow:hidden; cursor:pointer; background:var(--pa-page) }
.qs-rph[aria-disabled="true"]{ cursor:default }
.qs-rph img{ width:100%; height:100%; object-fit:cover; display:block }
.qs-rph.out{ opacity:.4 }
.qs-rcap{ position:absolute; left:0; right:0; top:0; padding:5px 6px; font-size:11px; font-weight:600; color:#fff; text-align:left; background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.qs-rbadge{ position:absolute; left:6px; bottom:6px; font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.6); color:#fff }
.qs-rbadge.in{ background:#fff; color:var(--pa-green-text) }
.qs-editnote{ background:var(--pa-amber-icon); color:var(--pa-amber-text); border-radius:var(--pa-radius-btn); padding:10px 12px; font-size:13px; margin-top:12px }
.qs-vers{ border-top:1px solid var(--pa-line-soft); margin-top:14px; padding-top:10px }
.qs-ver{ display:flex; gap:8px; font-size:12.5px; padding:3px 0; align-items:baseline }
.qs-ver .qs-cs{ flex:1 1 auto; font-size:12.5px; color:var(--pa-text) }
.qs-tick{ display:flex; gap:10px; align-items:center; margin-top:12px; font-size:14px; color:var(--pa-ink) }
.qs-box{ width:22px; height:22px; padding:0; border-radius:6px; font:800 13px inherit; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#fff; border:1.5px solid #9AA3A9; flex-shrink:0; cursor:pointer }
.qs-box.on{ background:var(--pa-teal-600); border:0 }
.qs-box:disabled{ cursor:not-allowed }
span.qs-box{ cursor:default }
#qsSendSlot:not(:empty){ margin-top:var(--qs-gap) }
/* the sticky bar */
.qs-bar{ position:sticky; bottom:0; z-index:5; background:#fff; box-shadow:var(--qs-bar-shadow); padding:14px 28px; margin:0 -28px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-radius:12px 12px 0 0 }
.qs-bartext{ font-size:13.5px; color:var(--pa-text); flex:1 1 380px; min-width:0 }
.qs-barmsg{ font-size:13px; font-weight:700; color:var(--pa-ink) }
.qs-barmsg:empty{ display:none }
/* the drawer */
.qs-drawer-wrap{ position:fixed; inset:0; z-index:60 }
.qs-scrim{ position:absolute; inset:0; background:var(--qs-scrim) }
.qs-drawer{ position:absolute; top:0; right:0; bottom:0; width:var(--qs-drawer); max-width:100%; background:var(--pa-page); box-shadow:-8px 0 24px rgba(0,0,0,.2); overflow:auto; font-size:14px; color:var(--pa-text) }
.qs-drh{ background:var(--pa-teal-900); color:#fff; padding:18px 22px; display:flex; align-items:flex-start; gap:10px; position:sticky; top:0; z-index:1 }
.qs-drk{ font-size:12.5px; opacity:.85 }
.qs-drt{ margin:4px 0 0; font-size:20px; font-weight:700; color:#fff }
.qs-drx{ width:44px; height:44px; border-radius:10px; border:0; background:rgba(255,255,255,.14); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.qs-drx:hover{ background:rgba(255,255,255,.24) }
.qs-drb{ padding:18px 22px; display:flex; flex-direction:column; gap:12px }
.qs-drnote{ background:#fff; border-radius:12px; padding:12px 14px; font-size:13.5px; color:var(--pa-text) }
html.qs-dr-open{ overflow:hidden }
/* More */
.qs-more{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card) }
.qs-moresum{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; flex-direction:column; gap:2px; border-radius:var(--pa-radius-card) }
.qs-moresum::-webkit-details-marker{ display:none }
.qs-moresum::after{ content:'Show'; align-self:flex-start; margin-top:6px; font-size:13px; font-weight:700; color:var(--pa-teal-600); text-decoration:underline }
.qs-more[open] > .qs-moresum::after{ content:'Hide' }
.qs-more[open]{ display:flex; flex-direction:column; gap:var(--pa-gap); padding-bottom:18px; background:transparent; box-shadow:none }
.qs-more[open] > .qs-moresum{ background:#fff; box-shadow:var(--pa-shadow-card) }
.qs-moreacts{ background:var(--pa-teal-900); border-radius:var(--pa-radius-card); padding:14px 18px; color:#fff }
.qs-moreacts .qcp-actmsg{ color:#fff; margin-top:8px }
.qs-moreacts .qcp-actmsg a{ color:var(--pa-teal-300) }
/* a phone */
@media (max-width: 760px){
  .qs.qcp.pa{ padding-bottom:12px }
  .qs-tile{ width:100%; flex-direction:row; gap:12px; padding:14px 16px; justify-content:flex-start }
  .qs-tl, .qs-tb{ margin-top:0 }
  .qs-tmid{ flex-basis:100%; padding:14px 16px }
  .qs-tside{ align-items:flex-start; padding:0 16px 16px }
  .qs-h1{ font-size:20px }
  .qs-tabs{ gap:6px }
  .qs-tab{ flex-direction:column; align-items:flex-start; gap:6px; padding:10px }
  .qs-ts{ display:none }
  .qs-tt{ font-size:13px }
  .qs-viewer{ position:static }
  .qs-strip{ grid-template-columns:repeat(5, minmax(0, 1fr)) }
  .qs-fpick{ grid-template-columns:repeat(5, minmax(0, 1fr)) }
  .qs-rgrid{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .qs-report{ padding:18px 16px }
  .qs-phonecol{ flex:1 1 100% }
  .qs-bar{ margin:0 -16px; padding:12px 16px; gap:10px }
  .qs-bartext{ flex-basis:100% }
  .qs-drawer{ width:100% }
  .qs-mrow{ flex-direction:column }
}
/* Session 369, after the first look: screen-reader words stay hidden; an empty band takes no gap; the viewer sticks under the Hub's header. */
.qs-tab .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.qs.qcp.pa > div:empty{ display:none }
.qs-viewer{ top:calc(var(--hdrH, 64px) + var(--bandH, 7px) + 12px) }
@media (max-width: 760px){ .qs-bartext{ font-size:12.5px } .qs-viewer{ top:auto } }
/* Session 371: the phone's Check these, complaints, supplies chips and numbers inside the panel and the drawer, at the panel's size */
.qpn-brief .qb-chk, .qpn-brief .qb-cmp, .qpn-brief .qb-cmp0, .qpn-brief .qb-nums{ font-size:14px }
.qsa-focus{ list-style:none; margin:8px 0 4px; padding:0 }
.qsa-focus li{ border-left:3px solid #C2410C; background:#FFF7ED; border-radius:0 8px 8px 0; padding:8px 10px; margin:6px 0 }
.qsa-ft{ display:block; font-size:14px; font-weight:600; color:#1F2328 }