/* 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 }

/* ======================================================================== session 425: My Route in the header, and Find me
   briefs/session-425-brief.md; mh-myroute-mockups-v1 boards 10 to 16. Every value below is the mockups' own stylesheet (their inline styles and
   classes .seg, .big, .near, .opt, .act), copied as named classes. Phone rules are the Hub's phone width (760 px and under: shell.js sets body.phone). */

/* The laptop header button (board 12): yellow, 13.5px 800, padding 7px 14px 7px 12px, fully rounded, a pin, the "3 of 8" chip, a soft shadow; just left of
   Executive Summary. Current while you are on My Route: a white ring. */
.mrh-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; background:#ffd13a; color:#16181a; font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:13.5px; font-weight:800; line-height:normal; border-radius:999px; padding:7px 14px 7px 12px; box-shadow:0 4px 12px rgba(0,0,0,.18); text-decoration:none; white-space:nowrap; flex:none }
.mrh-btn[hidden]{ display:none }
.mrh-btn:hover{ background:#ffdc5e; color:#16181a; text-decoration:none }
.mrh-btn:focus-visible{ outline:2px solid #ffffff; outline-offset:2px }
.mrh-btn[aria-current="page"]{ box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 4px 12px rgba(0,0,0,.18) }
.mrh-btn i{ font-style:normal; font-size:11.5px; font-weight:800; background:rgba(0,0,0,.12); border-radius:999px; padding:1px 7px }
.mrh-btn:not([hidden]) ~ .top-exec, .mrh-btn:not([hidden]) ~ .top-sp{ margin-left:0 }

/* The phone's switch (boards 10 and 11): a pill with rgba(255,255,255,.14) behind and 3px padding; each half 13px 700, padding 7px 14px; the current half
   #ffd13a with #16181a text; the count chip 11px 800. */
.mrh-seg{ display:none }
.mrh-seg a{ font-family:'Inter','Segoe UI',system-ui,sans-serif; font-size:13px; font-weight:700; line-height:normal; border-radius:999px; padding:7px 14px; color:#dceff0;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; text-decoration:none }
.mrh-seg a:hover{ text-decoration:none; color:#ffffff }
.mrh-seg a:focus-visible{ outline:2px solid #ffffff; outline-offset:1px }
.mrh-seg a.on{ background:#ffd13a; color:#16181a }
.mrh-seg a i{ font-style:normal; font-size:11px; font-weight:800; background:rgba(255,255,255,.16); border-radius:999px; padding:1px 6px }
.mrh-seg a.on i{ background:rgba(0,0,0,.12) }
/* The phone's header with the switch: 60px tall, then the 4px band (40px colours), as drawn. The page's own top padding follows (--hdrH, --bandH). */
.mrs-on.mrs-on.phone{ --hdrH:60px; --bandH:4px }
.mrs-on.mrs-on.phone .top-wrap{ padding:0 12px; gap:10px }
.mrs-on.mrs-on.phone .burger{ width:40px; height:40px; border:0; border-radius:10px }
.mrs-on.mrs-on.phone .burger svg{ width:22px; height:22px }
.mrs-on.mrs-on.phone .top-name, .mrs-on.mrs-on.phone .top-exec{ display:none }
.mrs-on.mrs-on.phone .topband{ background-image:repeating-linear-gradient(90deg, #1d6e77 0 40px, #6fd5d4 40px 80px, #ffd13a 80px 120px, #ff8a33 120px 160px) }
@media (max-width:760px){
  .mrh-btn, .mrh-btn:not([hidden]){ display:none }
  .mrh-seg:not([hidden]){ display:inline-flex; background:rgba(255,255,255,.14); border-radius:999px; padding:3px; flex:none }
}

/* The phone's menu (board 11): My Route pinned first, "3 of 8 done · next [Property Name]". The live menu is the dark teal sidebar (the drawing's is white),
   so the pinned item keeps the drawing's shape and words and is outlined in the button's yellow to stand out the same way. */
.mrh-pin{ display:none }
@media (max-width:760px){
  .mrh-pin:not([hidden]){ display:flex; align-items:center; gap:12px; margin:2px 4px 6px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.1);
    border:1.5px solid #ffd13a; color:#ffffff; text-decoration:none; font-family:'Inter','Segoe UI',system-ui,sans-serif }
}
.mrh-pin:hover{ background:rgba(255,255,255,.16); color:#ffffff; text-decoration:none }
.mrh-pin:focus-visible{ outline:2px solid #ffd13a; outline-offset:2px }
.mrh-pin.on{ background:rgba(255,209,58,.16) }
.mrh-pinic{ color:#ffd13a; display:inline-flex; flex:none }
.mrh-pint{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.mrh-pint b{ font-size:15px }
.mrh-pinsub{ font-size:12px; color:#cfe6e8; overflow-wrap:anywhere }

/* Find me and Search a home (board 13): 52px tall, 12px corners, 15px 800; Find me yellow with the 4px soft yellow ring; Search a home white with a 1.5px
   #cfd6da border. */
.mrf-row{ display:flex; gap:10px; padding:2px 0 0 }
.mrf-big{ font-family:'Inter','Segoe UI',system-ui,sans-serif; font-size:15px; font-weight:800; border-radius:12px; height:52px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:1; padding:0 12px; box-sizing:border-box; min-width:0 }
.mrf-big svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none }
.mrf-find{ background:#ffd13a; color:#16181a; box-shadow:0 0 0 4px rgba(255,209,58,.35), 0 8px 18px rgba(217,106,24,.25) }
.mrf-find:hover{ background:#ffdc5e }
.mrf-search{ background:#ffffff; color:#144d54; border:1.5px solid #cfd6da }
.mrf-search:hover{ background:#f7f8f9 }
.mrf-big:focus-visible{ outline:3px solid #144d54; outline-offset:2px }
.mrf-wide{ width:100%; flex:none; margin-top:8px }

/* The sheets: one full-screen layer over the page (boards 14 and 15): the 60px teal header with Back, then the 250px map strip and the white sheet with 20px
   top corners. */
.mrf-lock{ overflow:hidden }
.mrf-ov{ position:fixed; inset:0; z-index:80; background:#f2f4f5; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:#4d545a; -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" }
.mrf-hd{ background:#144d54; color:#ffffff; height:60px; display:flex; align-items:center; gap:10px; padding:0 16px; box-sizing:border-box; flex:none; position:sticky; top:0; z-index:3 }
.mrf-back{ color:#ffffff; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:-10px; border:0; background:none; border-radius:10px; cursor:pointer; flex:none }
.mrf-back:hover{ background:rgba(255,255,255,.12) }
.mrf-back:focus-visible{ outline:2px solid #ffd13a; outline-offset:1px }
.mrf-title{ font-size:16px; font-weight:800 }
.mrf-hdt2{ display:flex; flex-direction:column; min-width:0 }
.mrf-hdsub{ font-size:12px; color:#cfe6e8 }
.mrf-hdname{ font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mrf-map{ height:250px; background:#dce6e8; position:relative; flex:none }
.mrf-mapbox{ position:absolute; inset:0 }
.mrf-acc{ position:absolute; left:12px; bottom:32px; z-index:2; background:#ffffff; border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; color:#144d54; box-shadow:0 2px 8px rgba(14,54,59,.15) }
.mrf-sheet{ position:relative; z-index:2; margin-top:-20px; flex:1 0 auto; background:#ffffff; border-radius:20px 20px 0 0; box-shadow:0 -8px 24px rgba(14,54,59,.12); display:flex; flex-direction:column; padding-bottom:24px }
.mrf-grab{ width:40px; height:4px; border-radius:999px; background:#dfe3e6; margin:10px auto 4px }
.mrf-q{ padding:8px 18px 14px; display:flex; flex-direction:column; gap:6px }
.mrf-ask{ font-size:13px; font-weight:700; color:#6b747b }
.mrf-name{ font-size:23px; font-weight:800; color:#16181a; letter-spacing:-.02em; line-height:1.15; overflow-wrap:anywhere }
.mrf-sub{ font-size:13px; color:#6b747b; line-height:1.45 }
.mrf-yes{ margin-top:8px; height:54px; border-radius:14px; background:#144d54; color:#ffffff; font-family:inherit; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; border:0; width:100%; cursor:pointer }
.mrf-yes:hover{ background:#0e363b }
.mrf-yes:focus-visible, .mrf-near:focus-visible, .mrf-opt:focus-visible, .mrf-start:focus-visible, .mrf-act:focus-visible, .mrf-switch:focus-visible, .mrf-chip:focus-visible, .mrf-link:focus-visible{ outline:3px solid #1d6e77; outline-offset:2px }
.mrf-lbl{ padding:6px 18px 4px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a9297 }
.mrf-near{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:0; border-top:1px solid #e3e7ea; color:#16181a; background:#ffffff; width:100%; text-align:left; font-family:inherit; cursor:pointer; box-sizing:border-box }
.mrf-near:hover{ background:#f7f8f9 }
.mrf-near b{ font-size:14px; display:block; overflow-wrap:anywhere }
.mrf-near small{ font-size:12px; color:#6b747b; display:block }
.mrf-near em{ margin-left:auto; font-style:normal; font-size:12.5px; font-weight:700; color:#4d545a; white-space:nowrap }
.mrf-near[aria-pressed="true"]{ background:#e9f3f4 }
.mrf-else{ color:#144d54 }
.mrf-else b{ display:inline }
.mrf-st{ font-style:normal; font-size:11px; font-weight:700; color:#7a5312; background:#fdf0d8; border-radius:999px; padding:1px 7px; margin-left:4px }
.mrf-which .mrf-near{ padding:14px 14px }
.mrf-wait{ padding:40px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; font-size:15px; color:#16181a }
.mrf-spin{ width:34px; height:34px; border-radius:50%; border:4px solid #dfe3e6; border-top-color:#144d54; animation:mrfspin 1s linear infinite }
@keyframes mrfspin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .mrf-spin{ animation:none } }
.mrf-p{ font-size:14px; line-height:1.5; color:#4d545a; margin:0 }

/* What kind of visit? (board 15): two columns, 10px gap, each choice 76px tall, 14px corners, a 2px #dfe3e6 border; the chosen one #144d54 with #e9f3f4 and a
   3px ring; Start the visit 56px tall, 14px corners, yellow. */
.mrf-body{ padding:16px 16px 0; display:flex; flex-direction:column; gap:10px; flex:1 0 auto }
.mrf-h{ font-size:20px; font-weight:800; color:#16181a; letter-spacing:-.02em }
.mrf-opts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
.mrf-opt{ font-family:inherit; background:#ffffff; border:2px solid #dfe3e6; border-radius:14px; height:76px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:4px; padding:0 14px; cursor:pointer; text-align:left; color:#16181a; box-sizing:border-box; min-width:0 }
.mrf-opt b{ font-size:14.5px; font-weight:800; line-height:1.2 }
.mrf-opt small{ font-size:12px; color:#6b747b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
.mrf-opt:hover{ border-color:#9fb3b8 }
.mrf-opt[aria-pressed="true"]{ border-color:#144d54; background:#e9f3f4; box-shadow:0 0 0 3px rgba(29,110,119,.18) }
.mrf-opt:disabled{ opacity:.55; cursor:not-allowed; border-color:#dfe3e6 }
.mrf-lbl2{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a9297; margin-top:6px }
textarea.mrf-ta, .mrf-ta{ font-family:inherit; font-size:15px; color:#16181a; border:1.5px solid #cfd6da; border-radius:12px; padding:10px 12px; resize:none; background:#ffffff; width:100%; box-sizing:border-box; min-height:0; height:auto }
input.mrf-in, .mrf-in{ font-family:inherit; font-size:16px; color:#16181a; border:1.5px solid #cfd6da; border-radius:12px; padding:0 12px; height:48px; background:#ffffff; width:100%; box-sizing:border-box }
.mrf-res{ display:flex; flex-direction:column; border-radius:12px; overflow:hidden }
.mrf-card{ background:#ffffff; border-radius:12px; border:1.5px solid #e3e7ea; padding:10px 12px; display:flex; align-items:center; gap:10px; font-size:13px; color:#16181a }
.mrf-cardw{ flex:1; line-height:1.4; min-width:0 }
.mrf-dim{ color:#6b747b }
.mrf-link{ font-family:inherit; font-weight:700; font-size:13px; color:#1d6e77; background:none; border:0; padding:6px 2px; cursor:pointer; text-decoration:underline; flex:none }
.mrf-cleans{ border:1.5px solid #e3e7ea; border-radius:12px; overflow:hidden; margin-top:-4px }
.mrf-cleans .mrf-near:first-child{ border-top:0 }
.mrf-chips{ display:flex; gap:8px; flex-wrap:wrap }
.mrf-chip{ font-family:inherit; font-size:14px; font-weight:700; color:#144d54; background:#ffffff; border:1.5px solid #cfd6da; border-radius:999px; padding:0 14px; height:40px; cursor:pointer }
.mrf-chip[aria-pressed="true"]{ background:#e9f3f4; border-color:#144d54 }
.mrf-switch{ width:52px; height:30px; border-radius:999px; border:0; padding:0; position:relative; flex:none; background:#c4cbd0; cursor:pointer }
.mrf-switch[aria-checked="true"]{ background:#2e9c7c }
.mrf-switch span{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .15s }
.mrf-switch[aria-checked="true"] span{ left:25px }
.mrf-foot{ padding:12px 16px 20px; flex:none; position:sticky; bottom:0; background:#f2f4f5 }
.mrf-start{ height:56px; border-radius:14px; background:#ffd13a; color:#16181a; font-family:inherit; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; border:0; width:100%;
  box-shadow:0 8px 18px rgba(217,106,24,.25); cursor:pointer }
.mrf-start:hover{ background:#ffdc5e }
.mrf-start:disabled{ opacity:.7; cursor:wait }
.mrf-yesb{ margin-top:8px }
.mrf-warn{ background:#fdf0d8; color:#7a5312; border-radius:10px; padding:9px 12px; font-size:13.5px; font-weight:600 }

/* On My Route after Start (board 16): the green line, then the You're here card (a 2px #2e9c7c border, 16px corners; its buttons 48px in two columns). */
.mrf-ok{ background:#e2f4ee; color:#08513f; border-radius:12px; padding:10px 12px; font-size:13px; font-weight:600; display:flex; gap:8px; align-items:center }
.mrf-here{ background:#ffffff; border:2px solid #2e9c7c; border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 8px 22px rgba(14,54,59,.12) }
.mrf-hrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.mrf-hk{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#08513f }
.mrf-pill{ margin-left:auto; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; background:#ffe9d6; color:#9a4a0e }
.mrf-hn{ font-size:21px; font-weight:800; color:#16181a; letter-spacing:-.02em; text-decoration:underline; text-decoration-color:#cfd6da; text-underline-offset:3px; overflow-wrap:anywhere }
.mrf-hn:hover{ color:#144d54 }
.mrf-hs{ font-size:13px; color:#4d545a; line-height:1.45 }
.mrf-hnote{ color:#16181a }
.mrf-acts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px }
.mrf-act{ font-family:inherit; font-size:14px; font-weight:800; border-radius:12px; height:48px; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; box-sizing:border-box }
.mrf-act svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round }
.mrf-a1{ background:#e9f3f4; color:#144d54 }
.mrf-a1:hover{ background:#dceff0; color:#144d54; text-decoration:none }
.mrf-a2{ background:#144d54; color:#ffffff }
.mrf-a2:hover{ background:#0e363b; color:#ffffff; text-decoration:none }
.mrf-a3{ background:#ffffff; color:#4d545a; border:1.5px solid #cfd6da }
.mrf-a3:hover{ background:#f7f8f9 }

/* Session 430 (Part C): a stop Resort cancelled */
.mr-cxban{ display:block; width:100%; box-sizing:border-box; text-align:left; font:inherit; font-size:14px; line-height:1.35; color:#6e4a0c; background:#fff6d6; border:1px solid #f5c21c; border-radius:12px; padding:12px 14px; text-decoration:none; cursor:pointer }
.mr-cxban b{ text-decoration:underline; text-underline-offset:2px }
.mr-cxban:hover{ background:#ffefb8 }
.mr-cxban:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }
.mr-cxfold{ margin-top:6px }
.mr-cxfold > summary{ cursor:pointer; font-size:13.5px; font-weight:700; color:#4d545a; padding:8px 0; text-decoration:underline; text-underline-offset:2px }
.mr-cx .mr-name{ text-decoration:line-through; color:#6b747b }
.mr-cx .mr-card{ opacity:.8 }