/* myroute.css -- session 290: My route and its stops (myroute.js), and the QC stop (qc.js .qcx). The values are the
   mockups' own stylesheet (briefs/s290-mockup-*-390.html): cards white, 16px radius, the soft shadow; labels 12.5px 700
   #4d545a; body 15px #16181a; small 13px #5c646b; buttons 52px tall, 12px radius; the yellow action button with its
   orange edge; the teal Next stop panel; the two tags. On a computer the same, at full width: the lists flow into
   columns from 760px. Property names wrap, never cut (overflow-wrap:anywhere), and nothing scrolls inside a box. */

.mr, .qcx{ --mr-ink:#16181a; --mr-k:#4d545a; --mr-s:#5c646b; --mr-line:#c9d0d4; --mr-teal:#144d54; font-family:Inter, system-ui, sans-serif; color:var(--mr-ink) }
.mr{ display:flex; flex-direction:column; gap:14px; margin-bottom:24px }
.mr-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap }
.mr-h1{ margin:0; font-size:28px; font-weight:800; line-height:1.15; color:var(--mr-ink) }
.mr-progress{ font-size:13px; color:var(--mr-s); font-weight:600 }
.mr-bar{ height:8px; border-radius:999px; background:#dfe3e6; overflow:hidden }
.mr-bar i{ display:block; height:100%; background:#2e9c7c }
.mr-tags, .mr-tagrow, .qcx-tagrow{ display:flex; gap:8px; flex-wrap:wrap }
.mr-tag, .qcx-tag{ display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.3; box-sizing:border-box }
.mr-tag.res, .qcx-tag.res{ background:#dceff0; color:#0e363b }
.mr-tag.rt{ background:#fdf0d8; color:#6e4a0c }
.mr-tag.todo{ background:#eceff1; color:#4d545a }
.mr-tag.prac, .qcx-tag.prac{ background:#ede4f7; color:#4b2a73 }   /* session 350: a practice Quality Check */
.mr-prac{ border-style:dashed }
.qcx-tag.core{ background:#ffe8d6; color:#9a4a0e; min-height:20px; font-size:11px; padding:0 8px }

.mr-changed{ background:#fff6d6; border:1px solid #f5c21c; border-radius:12px; padding:12px 14px; color:#6e4a0c }
.mr-chk{ font-size:14px; font-weight:800 }
.mr-chl{ font-size:13px; line-height:1.4; margin-top:2px; overflow-wrap:anywhere }
.mr-gotit{ margin-top:6px; background:none; border:0; padding:6px 0; min-height:32px; font:inherit; font-size:13px; font-weight:700; color:#6e4a0c; text-decoration:underline; cursor:pointer }

.mr-next{ background:#144d54; color:#fff; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px }
.mr-nk{ font-size:12.5px; font-weight:700; color:#6fd5d4; letter-spacing:.3px }
.mr-nrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.mr-nkind{ font-size:20px; font-weight:800 }
.mr-nname{ font-size:17px; font-weight:700; line-height:1.3; color:#fff !important; text-decoration:none; overflow-wrap:anywhere }
.mr-nname:hover{ text-decoration:underline }
.mr-nbody{ font-size:14px; line-height:1.45; opacity:.9; overflow-wrap:anywhere }
.mr-ndrive{ font-size:13px; color:#ffd13a; font-weight:600 }
.mr-nbtns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; max-width:560px }

.mr-btn, .qcx-btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 16px; border-radius:12px; font-family:inherit; font-size:16px; font-weight:700;
  border:1px solid var(--mr-line); background:#fff; color:var(--mr-ink); cursor:pointer; box-sizing:border-box; text-decoration:none; text-align:center; line-height:1.2 }
.mr-btn:hover, .qcx-btn:hover{ border-color:#9aa5ab }
.mr-btn.y, .qcx-btn.y{ background:linear-gradient(#ffd13a, #f5c21c); border-color:#f5c21c; box-shadow:0 3px 0 #d96a18; color:#16181a !important }
.mr-btn.ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.55) }
.mr-btn.ghost.is-dis{ opacity:.5; cursor:default }
/* Session 375 (session 374's bug 1): a ghost button on a white card (a practice stop's Open it, a stop's Go here next) was white on white.
   On a white card it is the platform's secondary button: white with teal words and a visible border, a hover and a focus ring. */
.mr-card .mr-btn.ghost, .qcx-card .mr-btn.ghost{ background:#fff; color:#144d54 !important; border-color:#9fc3c6 }
.mr-card .mr-btn.ghost:hover, .qcx-card .mr-btn.ghost:hover{ background:#f4f9f9; border-color:#1d6e77 }
.mr-card .mr-btn.ghost:focus-visible, .qcx-card .mr-btn.ghost:focus-visible{ outline:3px solid #1d6e77; outline-offset:2px }
.qcx-btn.t2{ background:#144d54; color:#fff; border-color:#144d54 }
.mr-btn.big, .qcx-btn.big{ min-height:58px; font-size:17px; width:100% }
.mr-btn.sm, .qcx-btn.sm{ min-height:44px; font-size:14px; padding:0 14px; flex:none }
.mr-btn:disabled, .qcx-btn:disabled{ opacity:.65; cursor:progress }

.mr-k{ font-size:12.5px; font-weight:700; color:var(--mr-k); letter-spacing:.2px; margin:6px 0 0 }
.mr-k0, .qcx-k{ display:block; font-size:12.5px; font-weight:700; color:var(--mr-k); letter-spacing:.2px; margin-bottom:8px }
.mr-list{ display:flex; flex-direction:column; gap:14px }
.mr-cardlink{ display:block; color:inherit !important; text-decoration:none }
.mr-cardlink.is-done{ opacity:.72 }
.mr-card, .qcx-card{ background:#fff; border-radius:16px; padding:16px; box-shadow:0 1px 2px rgba(16,24,26,.06), 0 2px 8px rgba(16,24,26,.05); display:flex; flex-direction:column; gap:6px; box-sizing:border-box; min-width:0 }
.mr-cardlink:hover .mr-card{ box-shadow:0 1px 2px rgba(16,24,26,.08), 0 4px 14px rgba(16,24,26,.10) }
.mr-chead{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.mr-ct{ display:flex; align-items:center; gap:8px }
.mr-time{ font-size:15px; font-weight:800 }
.mr-kind{ font-size:15px; font-weight:700 }
.mr-name, .qcx-name{ font-size:16px; font-weight:700; line-height:1.3; overflow-wrap:anywhere }
.mr-doneword{ font-size:13px; font-weight:700; color:#08513f; white-space:nowrap }
.mr-s, .qcx-s{ font-size:13px; color:var(--mr-s); line-height:1.4; overflow-wrap:anywhere }
.mr-t{ font-size:15px; color:var(--mr-ink); line-height:1.45 }
.mr-reason{ font-weight:600; margin-bottom:6px; overflow-wrap:anywhere }   /* session 295: the planner's reason for a coaching visit */
.mr-alldone{ font-size:15px; font-weight:700; color:#08513f; padding:8px 0 }
.mr-foot{ margin-top:-4px }
.mr-center, .qcx-center{ text-align:center }

/* a stop's page */
.mr-crumbs{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px }
.qcx-back{ font-size:15px; font-weight:600; min-height:44px; display:inline-flex; align-items:center }
.qcx-what{ font-size:13px; color:var(--mr-s); margin-left:auto }
.mr-stop #mrStop{ display:flex; flex-direction:column; gap:14px; max-width:760px }
.mr-top{ display:flex; flex-direction:column; gap:4px }
.mr-sh1{ margin:2px 0 0; font-size:24px; font-weight:800; line-height:1.25; overflow-wrap:anywhere }
.mr-actrow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px }
.mr textarea, .qcx textarea{ width:100%; box-sizing:border-box; min-height:96px; border:1px solid var(--mr-line); border-radius:12px; padding:12px; font-family:inherit; font-size:15px; line-height:1.45; resize:vertical; color:var(--mr-ink); background:#fff }
.mr textarea.tall{ min-height:130px }
.mr-nh{ margin:-2px 0 8px }
.mr-donebox{ font-size:14px; font-weight:700; color:#08513f }
.qcx-warn{ background:#fff6d6; border:1px solid #f5c21c; color:#6e4a0c; border-radius:12px; padding:10px 12px; font-size:14px }
.qcx-ok{ background:#e3f4ec; border:1px solid #9fd8bd; color:#08513f; border-radius:12px; padding:10px 12px; font-size:14px }

@media (min-width:760px){
  .mr-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px }
  .mr-cardlink, .mr-cardlink .mr-card{ height:100% }
}

/* ---------------- the QC stop (qc.js qcxDraw) ---------------- */
.qc-crumbs .qcx-what{ margin-left:auto; margin-right:12px }
.qcx{ display:flex; flex-direction:column; gap:14px; max-width:760px }
.qcx-top{ display:flex; flex-direction:column; gap:4px }
.qcx-h1{ margin:2px 0 0; font-size:24px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; color:var(--mr-ink) }
.qcx-links{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; margin-top:2px }
.qcx-subrow{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start }
.qcx-choices{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.qcx-choice{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; min-height:52px; padding:8px 12px; border:1px solid var(--mr-line); border-radius:12px; background:#fff; font:inherit; color:var(--mr-ink); cursor:pointer }
.qcx-choice b{ font-size:15px }
.qcx-choice span{ font-size:13px; color:var(--mr-s) }
.qcx-choice.on{ border:2px solid #144d54; background:#f2f8f8 }
.qcx-remind summary{ font-size:15px; font-weight:800; cursor:pointer; min-height:28px; line-height:28px }
.qcx-say{ margin:8px 0 4px }
.qcx-area{ padding:10px 0; border-top:1px solid #dfe3e6 }
.qcx-arow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.qcx-at{ font-size:15px; font-weight:700 }
.qcx-media{ gap:12px }
.qcx-khead{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap }
.qcx-khead .qcx-k{ margin:0 }
.qcx-khead .qc-cact .btn{ min-height:36px }
.qcx-grid{ display:grid !important; grid-template-columns:repeat(4, 1fr); gap:6px }
.qcx-grid .qc-tile{ margin:0; position:relative }
.qcx-grid .qc-thumb{ aspect-ratio:1; border-radius:8px; overflow:hidden; width:100%; height:auto }
.qcx-grid .qc-thumb img{ width:100%; height:100%; object-fit:cover }
.qcx-upmark{ position:absolute; left:4px; bottom:4px; font-size:10px; font-weight:700; background:rgba(22,24,26,.72); color:#fff; border-radius:6px; padding:1px 5px; pointer-events:none }
.qcx-hint{ margin:0 }
.qcx-minor{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px }
.qcx .qc-file{ background:#e9ecee; border-radius:10px; padding:10px 12px; margin-top:8px }
.qcx-trline{ margin-top:6px; font-size:13.5px; color:var(--mr-ink) }
.qcx-trline .qc-link{ font-size:13.5px; font-weight:700; min-height:32px }
.qcx-work{ font-weight:700; color:#1d6e77 }
.qcx-work::after{ content:''; display:inline-block; width:1.2em; text-align:left; animation:qcxDots 1.2s steps(4) infinite }
@keyframes qcxDots{ 0%{ content:'' } 25%{ content:'.' } 50%{ content:'..' } 75%{ content:'...' } }
.qcx-bad{ color:#a33a1f }
.qcx-tr{ background:#fff; border-radius:8px; padding:10px 12px; margin-top:8px }
.qcx-tr p{ margin:0 0 6px; font-size:15px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere }
.qcx-scorerow{ display:flex; align-items:center; gap:12px }
#qcxScore{ width:120px; height:64px; flex:none; box-sizing:border-box; border:2px solid #144d54; border-radius:12px; font-family:inherit; font-size:32px; font-weight:800; text-align:center; color:var(--mr-ink); background:#fff }
#qcxScore:disabled{ opacity:.6 }
.qcx-hist{ margin-top:6px; border-top:1px solid #dfe3e6; padding-top:8px }
.qcx-hk{ font-size:12px; font-weight:700; color:var(--mr-k); margin-bottom:2px }
.qcx-hl{ font-size:13px; color:var(--mr-s); line-height:1.5 }
.qcx-hl b{ color:var(--mr-ink) }
.qcx-locked{ background:#e9ecee; border-radius:12px; padding:12px; font-weight:700; text-align:center }
/* the back link sits on the same line as the stop's name for it (the shared .crumb carries a bottom margin) */
.mr-crumbs .crumb, .qc-crumbs .qcx-back{ margin-bottom:0 }
.mr-crumbs{ flex-wrap:nowrap }
/* the mockups' headings are ink, not the platform's teal h1 */
.mr .mr-h1, .mr .mr-sh1, .qcx .qcx-h1{ color:#16181a }

/* ---------------- session 291: the office's review (qc.js qcrDraw), mockup s291-mockup-qc-office-review-1280 ---------------- */
.qcr{ font-family:Inter, system-ui, sans-serif; color:#16181a; display:flex; flex-direction:column; gap:18px; --mr-ink:#16181a; --mr-k:#4d545a; --mr-s:#5c646b; --mr-line:#c9d0d4 }
.qcr-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px }
.qcr-hl{ min-width:0; flex:1 1 520px; display:flex; flex-direction:column; gap:4px }
.qcr-tagrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2px }
.qcx-tag.rt{ background:#fdf0d8; color:#6e4a0c }
.qcx-tag.qcr-ok{ background:#e3f4ec; color:#08513f }
.qcr .qcr-h1{ margin:0; font-size:30px; font-weight:800; line-height:1.2; color:#16181a; overflow-wrap:anywhere }
.qcr-score{ display:flex; flex-direction:column; align-items:flex-end; gap:4px }
.qcr-sl{ font-weight:700 }
#qcrScore{ width:110px; height:56px; box-sizing:border-box; border:2px solid #144d54; border-radius:12px; font-family:inherit; font-size:30px; font-weight:800; text-align:center; color:#16181a; background:#fff }
#qcrScore:disabled{ opacity:.7 }
.qcr-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:18px; align-items:start }
.qcr-card{ gap:12px }
.qcr-ch{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap }
.qcr-ct{ font-size:18px; font-weight:800 }
.qcr .qcx-k{ margin:0 }
.qcr textarea{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:12px; padding:12px; font-family:inherit; font-size:15px; line-height:1.45; resize:vertical; color:#16181a; background:#fff }
.qcr textarea.qcr-ta{ min-height:150px; overflow:hidden }
.qcr textarea:disabled{ background:#f4f6f7; color:#3a4045 }
.qcr-doc{ border:1px solid #dfe3e6; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px }
.qcr-title{ font-family:inherit; font-size:16px; font-weight:800; border:1px solid transparent; border-radius:8px; padding:4px 6px; margin:-4px -6px; color:#16181a; background:transparent }
.qcr-title:hover, .qcr-title:focus{ border-color:#c9d0d4; background:#fff }
.qcr-line{ display:flex; flex-direction:column; gap:4px }
.qcr-line select{ width:auto; max-width:100%; align-self:flex-start; font-family:inherit; font-size:12.5px; font-weight:700; color:#4d545a; border:1px solid #dfe3e6; border-radius:8px; padding:2px 6px; background:#fff }
.qcr textarea.qcr-lta{ min-height:64px; font-size:15px; overflow:hidden }
.qcr-x{ align-self:flex-end; font-size:12.5px }
.qcr-phs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px }
.qcr-ph{ margin:0; display:flex; flex-direction:column; gap:4px; min-width:0 }
.qcr-thumb{ position:relative; aspect-ratio:4/3; border-radius:6px; background:#c9d0d4; overflow:hidden }
.qcr-thumb img, .qcr-pk img{ width:100%; height:100%; object-fit:cover; display:block }
.qcr-pn{ position:absolute; left:4px; top:4px; background:rgba(22,24,26,.72); color:#fff; font-size:11px; font-weight:700; border-radius:6px; padding:0 5px }
.qcr .qcr-cap{ width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; line-height:1.35; border:1px solid #dfe3e6; border-radius:6px; padding:4px 6px; min-width:0; min-height:0; resize:none; overflow:hidden }
.qcr-pact{ display:flex; gap:6px; flex-wrap:wrap; font-size:12px }
.qcr-pick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px }
.qcr-pk{ position:relative; aspect-ratio:1; border:2px solid transparent; border-radius:6px; padding:0; overflow:hidden; background:#c9d0d4; cursor:pointer }
.qcr-pk.on{ border-color:#144d54; opacity:.55; cursor:default }
.qcr-issues{ border-top:1px solid #dfe3e6; padding-top:10px; display:flex; flex-direction:column; gap:8px }
.qcr-issue{ display:flex; flex-direction:column; gap:6px; background:#fff6d6; border-radius:10px; padding:10px 12px; font-size:14px }
.qcr-iact{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.qcr-btns{ display:flex; flex-wrap:wrap; gap:10px }
.qcr-btns .qcx-btn{ flex:none }
.qcr-run{ background:#fff; border-radius:12px; padding:10px 14px; font-size:14px; box-shadow:0 1px 2px rgba(16,24,26,.06) }
.qcr-onote{ margin-top:6px; color:#6e4a0c }
.qcr-empty{ background:#fff; border-radius:16px; padding:20px; font-size:15px }
.qcr-slack{ display:flex; flex-direction:column; gap:2px }
.qcr-memo audio{ width:100%; max-width:560px }
.qcr-mt{ font-size:15px; line-height:1.55; white-space:pre-wrap; margin:0 }
@media (max-width:600px){
  .qcr .qcr-h1{ font-size:24px }
  .qcr-score{ align-items:flex-start }
  .qcr-grid{ grid-template-columns:1fr }
  .qcr-phs{ grid-template-columns:repeat(2, 1fr) }
  .qcr-btns .qcx-btn{ flex:1 1 100% }
}
/* session 291: Settings > Quality Check drafts */
.qd-card .qd-ta{ width:100%; box-sizing:border-box; min-height:260px; border:1px solid var(--line, #c9d0d4); border-radius:10px; padding:12px; font-family:inherit; font-size:14.5px; line-height:1.5; resize:vertical }
.qd-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:8px }
.qd-old{ margin-top:10px } .qd-old summary{ cursor:pointer; font-size:13px; color:var(--muted, #5c646b) }
.qd-ver pre{ white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:13px; background:#f4f6f7; border-radius:8px; padding:8px 10px; margin:4px 0 10px }
.qd-slack td.qd-wrap, .qd-slack td{ white-space:normal; max-width:none; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; vertical-align:top }
.qd-card .qd-ta{ overflow:hidden; resize:none }
.qd-slack tbody tr:hover td{ background:transparent; color:inherit }

/* session 293: Settings > Walkthrough reminder (qc.js scSettingsWalkthrough); the QC stop's extra lines; the report's send line */
.wt-line{ padding:14px 0; border-top:1px solid var(--line, #dfe3e6) }
.wt-line:first-child{ border-top:0 }
.wt-lh{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px }
.wt-n{ font-weight:800; min-width:28px; color:var(--muted, #5c646b) }
.wt-name{ font-size:15px; overflow-wrap:anywhere }
.wt-acts{ margin-left:auto; display:flex; gap:14px; flex-wrap:wrap }
.wt-grid{ display:grid; grid-template-columns:90px minmax(0, 1fr); gap:8px 12px; align-items:start }
.wt-lab{ font-size:13px; font-weight:700; color:var(--muted, #5c646b); padding-top:8px }
.wt-inp:disabled{ background:var(--input-disabled-bg, #f4f6f7) }
.wt-inp{ width:100%; box-sizing:border-box; border:1px solid var(--line, #c9d0d4); border-radius:8px; padding:8px 10px; font:inherit; font-size:14.5px; background:var(--input-bg, #fff); color:inherit }
.wt-ta{ line-height:1.45; overflow:hidden; resize:none; min-height:44px }
.wt-sel{ width:auto; max-width:100% }
.wt-opts{ display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.wt-rm{ margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--amber-bg, #fff6e5); color:var(--amber-text, inherit) }
.wt-rm .wt-lab{ display:block; padding:0 0 6px }
.wt-hrow{ padding:6px 0; overflow-wrap:anywhere }
.wt-tbl td{ white-space:normal; vertical-align:top } .wt-tbl td.wt-wrap{ overflow-wrap:anywhere; max-width:none }
.wt-tbl tbody tr:hover td{ background:transparent; color:inherit }
@media (max-width:640px){ .wt-grid{ grid-template-columns:minmax(0, 1fr) } .wt-lab{ padding-top:4px } .wt-acts{ margin-left:0; width:100% } }
.qcx-extra .qcx-at{ font-weight:800 }
.qcx-area:not(.qcx-extra) + .qcx-extra{ border-top:2px solid var(--line, #c9d0d4) }
.qcr-send{ margin:6px 0 8px; padding:8px 10px; border-radius:8px; background:var(--green-bg, #eef6f1); color:var(--green-text, inherit) }
.mr-cnts{ display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 4px }
.mr-cnt{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--mr-ink) }
.mr-cnt input{ width:96px; height:44px; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:10px; padding:0 12px; font:inherit; font-size:20px; font-weight:800; text-align:center }

/* ---------------- session 294 (qc-report.js): Before you go in, appointment Notes, the report editor, sending.
   Values from briefs/s294-mockup-qc-stop-390.html and s294-mockup-office-editor-1280.html. ---------------- */
.qb{ border:2px solid #144d54; gap:10px }
.qcr .qb{ font-size:15px }
.qb-line{ font-size:15px; line-height:1.45; overflow-wrap:anywhere }
.qb-flag{ border-radius:10px; padding:10px 12px; font-size:14px; line-height:1.4; overflow-wrap:anywhere }
.qb-flag.qb-yel{ background:#fff6d6; color:#6e4a0c }
.qb-flag.qb-red{ background:#fde8e6; color:#8a1c13 }
.qb-ft{ font-weight:800; font-size:15px; margin-bottom:2px }
.qb-dim{ opacity:.8 }
.qb-sec{ display:flex; flex-direction:column; gap:4px }
.qb-st{ font-size:15px; font-weight:800; line-height:1.35; overflow-wrap:anywhere }
.qb-look{ font-size:15px; line-height:1.45; overflow-wrap:anywhere }
.qb-src{ color:#5c646b }
.qb-inv{ border-top:1px solid #dfe3e6; padding-top:10px; display:flex; flex-direction:column; gap:6px }
.qb-note{ font-size:15px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere }
.qb-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:520px }
.qb-btns .qcx-btn{ min-height:48px }
.qb-ch.on{ background:#144d54; border-color:#144d54; color:#fff }
.qb-foot{ display:flex; gap:8px; flex-wrap:wrap; align-items:baseline }
.qb-refresh{ font-size:13px; min-height:32px }
.qn{ gap:8px }
.qn-t{ font-size:16px }
.qn-row{ border-top:1px solid #dfe3e6; padding:10px 0; display:flex; flex-direction:column; gap:4px }
.qn-row:first-child{ border-top:0; padding-top:2px }
.qn-meta{ display:flex; gap:6px 8px; flex-wrap:wrap; align-items:center; font-size:13px; color:#5c646b }
.qn-meta b{ color:#16181a }
.qn-lab{ display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:999px; font-size:11.5px; font-weight:700 }
.qn-lab.sh{ background:#dceff0; color:#0e363b }
.qn-lab.in{ background:#eceff1; color:#4d545a }
.qn-lab.gone{ background:#fde8e6; color:#8a1c13 }
.qn-text{ font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere }
.qc-card.qn .qn-row{ border-color:var(--qc-line, #dfe3e6) }
.qcr textarea.qr2-ta{ min-height:76px; overflow:hidden }
.qr2-in, .qr2-sel{ width:100%; box-sizing:border-box; min-height:44px; border:1px solid #c9d0d4; border-radius:10px; padding:8px 12px; font-family:inherit; font-size:15px; color:#16181a; background:#fff }
.qr2-sel{ background:#f4f6f7 }
.qr2-ls{ display:flex; gap:10px; align-items:flex-start }
.qr2-ls input[type=checkbox], .qr2-chk input{ width:22px; height:22px; margin:1px 0 0; accent-color:#144d54; flex:none }
.qr2-lsb{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; font-size:14.5px; line-height:1.4; overflow-wrap:anywhere }
.qr2-chk{ display:flex; gap:10px; align-items:center; font-size:14.5px; min-height:32px }
.qr2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px }
.qr2-f{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.qr2-lab{ font-size:13px; font-weight:600; color:#4d545a }
.qr2-bat{ display:grid; grid-template-columns:minmax(0, 1fr) 90px auto; gap:6px; align-items:center }
.qr2-sup{ display:grid; grid-template-columns:minmax(0, 1fr) 120px auto; gap:8px; align-items:center; border-top:1px solid #eceff1; padding-top:6px }
/* Session 322: where a supplies item came from, under the row; an item with no basis is not printed while the full list is Off. */
.qr2-basis{ grid-column:1 / -1; font-size:12.5px; color:var(--muted, #5c646b); margin-top:-2px; overflow-wrap:anywhere }
.qr2-basis.qr2-nobasis{ color:#9A4A0E }
.qr2-rec{ font-size:12.5px; color:var(--muted, #5c646b); margin-top:2px; overflow-wrap:anywhere }
.qr2-dc{ border-radius:10px; padding:12px 14px; font-size:14px; line-height:1.45; overflow-wrap:anywhere }
.qr2-dc.green{ background:#e3f4ec; color:#0b3d2f }
.qr2-dc.yellow{ background:#fff6d6; color:#6e4a0c }
.qr2-dc.red{ background:#fde8e6; color:#8a1c13 }
.qr2-pickbtn{ align-self:flex-start }
.qr2-prev{ width:100% }
.qrs{ gap:12px }
.qrs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px }
.qrs-col{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.qcr textarea.qrs-ta{ min-height:48px; overflow:hidden; font-size:15px }
.qrs-mode{ background:#fff6d6; color:#6e4a0c; border-radius:10px; padding:8px 10px; font-size:13.5px; line-height:1.4 }
.qrs-prev{ display:flex; flex-direction:column; gap:4px }
.qrs-pk{ font-size:12.5px; font-weight:700; color:#4d545a }
.qrs-bub{ background:#dceff0; color:#0e363b; border-radius:14px 14px 14px 4px; padding:10px 12px; font-size:14.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere }
.qrs-mail{ border:1px solid #dfe3e6; border-radius:10px; padding:10px 12px; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere; display:flex; flex-direction:column; gap:6px }
.qrs-mb{ white-space:pre-wrap }
.qrs-att{ font-size:13px; color:#5c646b }
.qrs-lk{ margin-top:6px }
.qrs-tbl{ width:100%; border-collapse:collapse; font-size:13.5px }
.qrs-tbl th{ text-align:left; font-size:12px; color:#4d545a; padding:6px 8px 6px 0; border-bottom:1px solid #dfe3e6 }
.qrs-tbl td{ padding:6px 8px 6px 0; border-bottom:1px solid #eceff1; vertical-align:top }
.qrs-w{ overflow-wrap:anywhere }
@media (max-width:600px){
  .qr2-grid{ grid-template-columns:1fr }
  .qrs-tbl thead{ display:none }
  .qrs-tbl tr{ display:flex; flex-wrap:wrap; gap:2px 10px; border-bottom:1px solid #eceff1; padding:6px 0 }
  .qrs-tbl td{ border:0; padding:0 }
}
.qr2-wide{ grid-column:1 / -1 }
.qcr textarea.qr2-grow{ min-height:44px; padding:10px 12px; resize:none; overflow:hidden; line-height:1.4 }
.qr2-bat{ grid-template-columns:minmax(0, 2fr) minmax(90px, 1fr) auto }
.qrs-tbl td, .qrs-tbl th{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none; overflow-wrap:anywhere }

/* session 298: Settings > Quality Check drafts, the client report's section titles */
.qd-ti{ margin:12px 0 0 }
.qd-tl{ display:block; font-size:13px; color:var(--muted, #5c646b); margin-bottom:4px }
.qd-trow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.qd-tin{ flex:1 1 260px; min-width:0; box-sizing:border-box; border:1px solid var(--line, #c9d0d4); border-radius:10px; padding:9px 12px; font-family:inherit; font-size:15px }
.qd-tm{ margin-top:4px; font-size:12.5px; overflow-wrap:anywhere }
.qr2-who{ font-size:12.5px; color:var(--muted, #5c646b); margin-top:2px }
.qr2-pa{ font-size:13px; margin-top:2px; overflow-wrap:anywhere }
.qr2-never{ color:#a33 }
/* session 298: Settings > Messaging, the three settings in plain words */
.msg-modes{ margin:0; padding-left:20px; line-height:1.55 } .msg-modes li{ margin:3px 0 }

/* ---------------- session 304: the office's Note for the inspector (qc.js qin*, qc-report.js qbDrawNote), "Updating with a
   new note..." and the grey deep clean callout. ---------------- */
.qb-insp{ background:#fff6d6; border-left:4px solid #ffd13a; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:3px }
.qb-ik{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#6e4a0c }
.qb-it{ font-size:16px; font-weight:800; line-height:1.4; color:#16181a; white-space:pre-wrap; overflow-wrap:anywhere }
.qb-upd{ font-size:14px; font-weight:700; color:#144d54; background:#e6f4f5; border-radius:8px; padding:6px 10px; overflow-wrap:anywhere }
.qin{ display:flex; flex-direction:column; gap:8px }
.qin-ta{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:10px; padding:10px 12px; font:inherit; font-size:16px; line-height:1.45; resize:vertical; min-height:64px }
.qin-ta:disabled{ background:#f2f4f5; color:#4d545a }
.qin-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.qin-hist summary{ cursor:pointer; font-size:13px; font-weight:700; color:#1d6e77 }
.qin-v{ border-top:1px solid #dfe3e6; padding:6px 0; font-size:14px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere }
.qr2-dc.grey{ background:#eef0f2; color:#2f353a }
.qr2-capin{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:6px 8px; font:inherit; font-size:14px; line-height:1.35; text-align:center; resize:none; overflow:hidden; display:block }
.qr2-capmsg{ font-size:12px; color:#5c646b; text-align:center; min-height:16px }
/* Session 320, Part 3: an owner's test to the Test list, under the two send columns */
.qrs-test{ margin-top:18px; padding-top:14px; border-top:1px solid var(--b-line, #e3e7ea); display:flex; flex-direction:column; gap:8px; align-items:flex-start }

/* Session 322: notes for the next QC, at the top of Before you go in and in the QC page's Notes card. */
.qb-fn{ display:grid; gap:10px; border:2px solid #FFD13A; background:#FFF8E1; border-radius:10px; padding:10px 12px; margin-bottom:10px }
.qb-fn.qb-fnmini{ display:block; font-size:14px }
.fn-n{ display:grid; gap:4px; padding-top:8px; border-top:1px solid #f0d49a }
.fn-n:first-of-type, .qb-ik + .fn-n{ border-top:0; padding-top:0 }
.fn-t{ font-weight:700; font-size:15px; overflow-wrap:anywhere }
.fn-done .fn-t{ font-weight:600; color:var(--muted, #5c646b) }
.fn-ck{ font-size:13.5px; overflow-wrap:anywhere }
.fn-ok{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; background:#DCEFF0; color:#144D54; font-weight:700; font-size:12.5px }
.fn-acts{ display:flex; gap:8px }
.fn-check{ min-height:40px }
.fn-form{ display:grid; gap:6px; background:#fff; border:1px solid #eceff1; border-radius:8px; padding:10px }
.fn-form textarea, .fn-form select{ font-size:16px }
.fn-b{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.fn-form[hidden]{ display:none }
/* Session 363: the planner's note for the person (Add a stop), on the stop's card and first on the stop's page. */
.mr-note{ margin-top:6px; padding:6px 10px; border-radius:8px; background:#FFF7DE; color:#4A4F55; font-size:13px; overflow-wrap:anywhere }
.mr-notecard{ background:#FFF7DE }
.mr-maplink{ color:var(--mr-teal); font-weight:600; text-decoration:underline; overflow-wrap:anywhere }   /* session 363: a visit's address, a Google Maps link */

/* Session 364: Go somewhere now, Go here next under each stop, the "Your day changed" card in My route's own type, and the band on "See [person]'s
   phone". Buttons 44 px or more, one thumb at 390 wide. */
.mr-gonow{ align-self:flex-start; width:100%; }
.mr-cardwrap{ display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 1px 2px rgba(16,24,26,.06), 0 2px 8px rgba(16,24,26,.05); min-width:0 }
.mr-cardwrap .mr-card{ box-shadow:none; border-radius:16px 16px 0 0; padding-bottom:10px }
.mr-cardwrap .mr-cardlink:hover .mr-card{ box-shadow:none; background:#fafcfc }
.mr-cardact{ display:flex; padding:0 16px 14px }
.mr-cardact .mr-gonext{ width:100%; border-color:var(--mr-teal); color:var(--mr-teal) }
.mr-gonext:focus-visible, .mr-gonow:focus-visible, .mr-viewexit:focus-visible{ outline:3px solid #6fd5d4; outline-offset:2px }
.mr-next .mr-gonext{ width:100% }
.mr-actrow .mr-gonext{ border-color:var(--mr-teal); color:var(--mr-teal) }
.mr .fsc-card{ border-radius:16px; padding:16px; margin:0; gap:10px }
.mr .fsc-h{ font-size:17px }
.mr .fsc-w{ font-size:15px; color:var(--mr-ink) }
.mr .fsc-btns .fs-btn{ min-height:48px; height:auto; font-size:15px; flex:1 1 140px; justify-content:center; border-radius:12px }
.mr-viewband{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:12px 14px; border-radius:12px;
  background:#16181a; color:#fff; font-family:Inter, system-ui, sans-serif; position:sticky; top:0; z-index:5 }
.mr-viewband b{ display:block; font-size:15px; font-weight:800 }
.mr-viewband span{ display:block; font-size:12.5px; color:#d6dbde; line-height:1.4 }
.mr-viewband .mr-btn{ background:#fff; color:#16181a !important; border-color:#fff }
/* Session 365: the question, the end-of-day card and "Working until" on the phone (48 px taps). */
.mr .fsc-picks .fs-btn, .mr .fsc-pickt .fs-btn{ min-height:48px; height:auto; font-size:15px; flex:1 1 120px; justify-content:center; border-radius:12px }
.mr .fsc-pickt input{ height:48px; font-size:16px; flex:1 1 120px }
.mr .fsc-until{ font-size:14px; margin:0 }
.mr .fsc-until .fs-btn{ min-height:44px; border-radius:12px }
.mr .fsc-en b{ font-size:15px }
.mr .fsc-en span{ font-size:13.5px }

/* Session 371 (briefs/session-371-brief.md; board 12, approved by Daniel on 21 October 2026): the inspector's QC stop cleaned up.
   The header leads with the street address; the cleaner is hidden until tapped; "Before you go in" is Check these by room, the host complaints
   folded, the supplies note as chips, three numbers; the Claude line at the very bottom. Shared by the QC panel and the review's drawer. */
/* its colours are tokens.css "Session 371" */
.qcx-addr{ color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px }
.qcx-addr:hover{ color:var(--mr-teal) }
.qcx-city{ font-size:15px; color:var(--mr-ink); line-height:1.35 }
.qcx-client{ font-size:15px; font-weight:700; color:var(--mr-ink); margin-top:2px }
.qcx-dirrow{ display:flex; gap:10px; margin:6px 0 2px }
.qcx-dir{ border-color:var(--mr-teal); color:var(--mr-teal) !important }
.qcx-subacts{ display:flex; gap:8px; flex:none }
.qcx-reveal{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; margin-top:10px; padding:8px 14px; box-sizing:border-box;
  border:2px dashed #8a959b; border-radius:12px; background:#f7f9f9; color:var(--mr-ink); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer }
.qcx-reveal:hover{ border-color:var(--mr-teal); color:var(--mr-teal) }
.qcx-reveal + .qcx-s{ margin-top:6px }
.qcx-reveal:focus-visible, .qcx-btn:focus-visible, .qb-cmps:focus-visible, .qb-fullb:focus-visible, .qcx-addr:focus-visible{ outline:3px solid #6fd5d4; outline-offset:2px }
.qcx-foot{ padding:0 4px }
.qb-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
/* Check these */
.qb-chk{ display:flex; flex-direction:column; gap:10px }
.qb-chkh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.qb-h3{ margin:0; font-size:17px; font-weight:800; color:var(--mr-ink, #16181a) }
.qb-room{ display:flex; flex-direction:column; gap:8px }
.qb-rk{ font-size:12.5px; font-weight:700; letter-spacing:.2px; color:var(--mr-k, #4d545a); text-transform:uppercase }
.qb-item{ display:flex; gap:10px; align-items:flex-start }
.qb-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px; background:var(--qb-teal) }
.qb-dot.red{ background:var(--qb-red) }
.qb-itx{ min-width:0 }
.qb-what{ font-size:14.5px; font-weight:600; line-height:1.35; color:var(--mr-ink, #16181a); overflow-wrap:anywhere }
.qb-why{ font-size:13px; line-height:1.4; color:var(--mr-s, #5c646b); margin-top:1px; overflow-wrap:anywhere }
.qb-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--mr-s, #5c646b); border-top:1px solid #dfe3e6; padding-top:8px }
.qb-legend span{ display:inline-flex; align-items:center; gap:6px }
.qb-legend .qb-dot{ margin-top:0 }
/* host complaints, folded */
.qb-cmp0{ font-size:13px; color:var(--mr-s, #5c646b) }
.qb-cmp{ border:1px solid #f3c4bf; border-radius:12px; background:#fff }
.qb-cmps{ display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 12px; cursor:pointer; list-style:none }
.qb-cmps::-webkit-details-marker{ display:none }
.qb-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; box-sizing:border-box; border-radius:13px; background:var(--qb-red); color:#fff; font-size:14px; font-weight:800 }
.qb-cmpt{ font-size:14.5px; font-weight:700; color:var(--qb-red-ink); flex:1 }
.qb-showb{ font-size:14px; font-weight:700; color:var(--mr-teal, #144d54); text-decoration:underline; text-underline-offset:2px }
.qb-showb .c, .qb-cmp[open] .qb-showb .o{ display:none }
.qb-cmp[open] .qb-showb .c{ display:inline }
.qb-cmpb{ display:flex; flex-direction:column; gap:8px; padding:0 12px 12px }
.qb-crow{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; font-size:14px; line-height:1.4 }
.qb-cd{ font-weight:700; color:var(--mr-ink, #16181a); white-space:nowrap }
.qb-csum{ color:var(--mr-ink, #16181a); overflow-wrap:anywhere }
.qb-lvl{ font-size:12px; font-weight:700; border-radius:10px; padding:2px 8px; white-space:nowrap }
.qb-lvl.guest{ background:var(--qb-red-bg); color:var(--qb-red-ink) }
.qb-lvl.minor{ background:var(--qb-grey-bg); color:var(--qb-grey-ink) }
.qb-full, .qb-seenote{ margin-top:2px }
.qb-fullb{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:700; color:var(--mr-teal, #144d54); text-decoration:underline; text-underline-offset:2px; cursor:pointer; list-style:none }
.qb-fullb::-webkit-details-marker{ display:none }
.qb-fmsg{ border-left:3px solid #f3c4bf; padding:4px 0 4px 10px; margin-top:6px }
.qb-fd{ font-size:12.5px; font-weight:700; color:var(--mr-k, #4d545a) }
/* the supplies note as chips */
.qb-sth{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.qb-chips{ display:flex; gap:6px; flex-wrap:wrap }
.qb-sc{ font-size:13.5px; font-weight:600; border-radius:14px; padding:4px 10px; line-height:1.3; background:var(--qb-grey-bg); color:var(--qb-grey-ink) }
.qb-sc.low, .qb-sc.out{ background:var(--qb-orange-bg); color:var(--qb-orange-ink) }
.qb-sc.maybe{ background:var(--qb-amber-bg); color:var(--qb-amber-ink) }
.qb .qb-btns .qcx-btn{ min-height:44px }
/* three numbers */
.qb-nums{ display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:8px; border-top:1px solid #dfe3e6; padding-top:10px }
.qb-num{ display:flex; flex-direction:column; gap:2px; background:#f7f9f9; border-radius:10px; padding:8px 10px }
.qb-num b{ font-size:20px; font-weight:800; color:var(--mr-ink, #16181a); line-height:1.15 }
.qb-num span{ font-size:12.5px; color:var(--mr-s, #5c646b); line-height:1.3 }
/* the office's line: when the inspector looked */
.qb-reveal{ font-size:13px; color:#5c646b; line-height:1.4 }