/* ============================================================
   Magic Helpers Operations Platform
   App shell v1.0. Session 24.

   The chrome every signed in screen shares: sidebar, page
   layout, toolbar, form controls. Screen specific styling
   stays in the screen. Design values come from tokens.css and
   are never redefined here.
   ============================================================ */

/* Session 232: body is a flex container, so .app is a flex item, and a flex item
   defaults to min-width:auto -- it could not shrink below its content's minimum
   width, which made the Dashboard 945px wide in a 900px window. min-width:0 lets it
   fit the window; anything wide inside still scrolls in its own container. */
.app{ min-height:100vh; min-width:0 }

/* ---------- sidebar ----------
   Session 106: ported verbatim from docs/mh-ops-retro-mockup-v7.html
   (its .side, .side .brand, .brand-mark, .brand-name, .brand-sub,
   .snav, .slbl, .sitem, .sitem:hover, .sitem.on, .sitem .ico,
   .sitem .cnt, .side .me, .avatar), class names renamed to match so
   the mockup's own declarations apply unchanged. .side is now
   position:fixed as the mockup has it, so .main below carries the
   margin-left the mockup's own .main rule uses -- that follows
   directly from porting .side, not a separate decision.

   Part 5 correction: the brief's own "Out of scope" list still said
   "the sliding sidebar marker: cosmetic, later" while its Part 5
   demanded the opposite ("Not a static bar") -- a real contradiction
   inside the brief, resolved in favour of the more specific, more
   recently added instruction (and the brief's own governing rule:
   "never ask whether a mockup decision is worth building"). .cnt is
   still ported and unused: no nav item has a real count to show
   yet, and this session does not invent one. */
.side{
  position:fixed; left:0; top:0; bottom:0; width:var(--side-w);
  background:var(--teal-deep); color:var(--cream); z-index:10;
  display:flex; flex-direction:column; overflow:hidden;
}
.brand{ display:flex; align-items:center; gap:var(--s3); height:var(--hdrH); box-sizing:border-box; padding:0 20px }
.brand-mark{
  width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.brand-name{ font-family:var(--serif); font-style:italic; font-size:22px; line-height:1; display:block }
.brand-sub{ font-size:11.5px; color:var(--teal-light); display:block; margin-top:3px }

.snav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 12px 20px; position:relative }
.snav::-webkit-scrollbar{ width:0 }
.slbl{ font-size:11.5px; color:rgba(255,255,255,.5); padding:14px 10px 4px; font-weight:500 }
.sitem{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; color:rgba(255,255,255,.86); padding:8px 10px;
  border-radius:8px; font-size:14.5px; cursor:pointer; position:relative;
  text-decoration:none; transition:background .2s, color .2s;
}
.sitem:hover{ background:rgba(255,255,255,.08); color:var(--white) }
.sitem.on{ background:rgba(255,255,255,.17); color:var(--white); font-weight:550 }
.sitem .ico{ width:18px; text-align:center; font-size:13px; opacity:.85; flex:none }
/* Session 385: a menu group (Payroll); its pages hide while it is closed (shell.js navGroupsApply).
   Session 408 (Daniel, 27 October 2026: "I want to click Payroll directly and have it collapse." "I want the sub-menu to be a little more differentiated.
   It just doesn't look 'distinguished' enough."): the group's row is one button (.snav-gtog), its chevron a sign inside it; its pages sit further in, on
   a thin guide line running down from the group's icon, in smaller, softer text; the current page is white and bold on its own band with the guide
   line drawn solid beside it. The same for every group with pages (.lo-subnav, data-sub). In the icon rail the pages show their small icons on the line. */
.snav-grp{ display:flex; align-items:center }
button.sitem{ font-family:inherit; line-height:inherit }
.snav-chev{ flex:none; margin-left:auto; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7) }
.snav-chev svg{ transition:transform .2s }
.snav-gtog:hover .snav-chev{ color:var(--white) }
.snav-gtog:focus-visible{ outline:2px solid var(--yellow); outline-offset:-2px }
.snav-grp.closed .snav-chev svg{ transform:rotate(-90deg) }
.sitem.lo-subnav{ padding:6px 10px 6px 42px; font-size:13px; color:rgba(207,236,234,.78); font-weight:450 }
.sitem.lo-subnav .ico{ display:none }
.sitem.lo-subnav::before{ content:""; position:absolute; left:20px; top:0; bottom:0; width:1.5px; background:rgba(255,255,255,.24) }
.sitem.lo-subnav:hover{ color:var(--white) }
.sitem.lo-subnav.on{ color:var(--white); font-weight:650; background:rgba(255,255,255,.13) }
.sitem.lo-subnav.on::before{ width:3px; left:19px; background:var(--white); border-radius:2px }
body.rail .sitem.lo-subnav{ padding:7px 0 }
body.rail .sitem.lo-subnav .ico{ display:block; font-size:12px }
body.rail .sitem.lo-subnav::before{ left:6px }
body.rail .sitem.lo-subnav.on::before{ left:5px }
body.rail .snav-gtog .snav-chev{ margin-left:-4px; width:12px; height:16px }
.sitem[hidden]{ display:none }
/* Session 336: Daniel's menu showed "ashboard", "y work", "rds", "er lifecycle": the whole menu had scrolled sideways, which it
   can only do when something in it is wider than the menu. A label now wraps inside its own line instead (never wider than
   the menu, even a long word), a count badge keeps its size, and the menu never scrolls sideways (.snav overflow-x:hidden). */
.sitem .lbl{ min-width:0; overflow-wrap:anywhere }
.sitem .cnt, .sitem .cand-navn, .sitem .sf-navn{ flex:none }
.slbl{ overflow-wrap:anywhere }
/* .snav-mark: ported verbatim, now the real sliding version (Part 5),
   riding the Spring in shell.js rather than a static ::before. */
.snav-mark{
  position:absolute; left:4px; width:4px; height:0; border-radius:2px;
  background:var(--yellow); box-shadow:0 0 8px rgba(255,209,58,.6);
}
.sitem .cnt{ margin-left:auto; font-size:11px; background:var(--yellow); color:var(--teal-night); border-radius:999px; padding:1px 7px; font-weight:600 }

.side .me{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:10px; font-size:13px }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--yellow); color:var(--teal-night); display:grid; place-items:center; font-weight:600; font-size:12px }
.me .role{ font-size:11.5px; color:rgba(255,255,255,.62); margin-top:1px }
.me .grow{ flex:1; min-width:0 }
.me .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.signout{
  background:none; border:1px solid var(--sidebar-line); color:rgba(255,255,255,.85);
  border-radius:6px; padding:5px 9px; font-size:12px; cursor:pointer; flex:none;
}
.signout:hover{ background:rgba(255,255,255,.12); color:var(--white) }

/* ---------- page ---------- */

.main{ margin-left:var(--side-w); min-width:0 }
/* position:relative;z-index:2 ported from the mockup's .page,
   session 106 Part 5: this is what makes every .card paint over
   the fixed .sky-fix/.valley (z-index:0) regardless of scroll
   position, the same way the mockup's own content sits above its
   background. */
/* Session 112a, Part 1: .top and .topband are both position:fixed
   now (index.html), removed from normal flow, so content needs its
   own top padding to start below their combined height (--hdrH +
   the band's own 10px) rather than underneath them. Checked on
   every screen this session touches; every screen shares this one
   .wrap rule, so the fix is global by construction, not per-screen. */
.wrap{ padding:calc(var(--hdrH) + var(--bandH) + var(--s6)) var(--s7) 72px; max-width:var(--wrap-max); margin:0 auto; position:relative; z-index:2 }
/* .head and .sub ported verbatim from the mockup, session 106. */
.head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; margin-top:var(--s2);
}
/* Session 157: was var(--page-text), the scene's own day/night text
   swap -- with the sky gradient gone (tokens.css, flat --page-bg
   now), a scene-driven swap had nothing left to react to and risked
   landing light text on the now-flat light page at night. Fixed to
   --text, the same token every other secondary line in the app uses. */
.sub{ color:var(--text); font-size:14.5px; margin:6px 0 0 }
.actions{ display:flex; gap:var(--s2) }

/* ---------- shared controls ---------- */

/* Session 157: retargeted to the mockup's own .warn treatment (brief
   Part 2: "the why box and warn box treatments for explanatory
   lines") -- a left-border accent with the corner rounded only on the
   right, not a flat fill. Was already .errbox's own shape (below);
   .warn (69 uses across the app, a plain filled box until now) is
   brought in line with it rather than left as a second, inconsistent
   pattern for the same idea. */
.warn{
  background:var(--amber-bg); color:var(--amber-text);
  border-left:4px solid var(--amber-text); border-radius:0 7px 7px 0;
  padding:9px 13px; font-size:12.5px; margin:0 0 var(--s5) 10px; max-width:760px;
}
.warn b{ color:var(--amber-text) }
.errbox{
  margin:0 0 var(--s5) 10px; background:var(--warn-soft-bg); border:1px solid var(--warn-soft-line);
  border-left:3px solid var(--amber-dot); border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 16px; font-size:13.5px; color:var(--amber-text); max-width:760px;
}
.errbox b{ display:block; font-weight:550; margin-bottom:4px; color:var(--ink) }
/* The mockup's own .why: an informational counterpart to .warn, teal
   rather than amber. Session 157, brief Part 2: brought across
   available for use, the same call already made for .neon/.toggle/.dl
   in tokens.css (ported, ready, nothing wired to it yet). */
.why{
  background:var(--teal-pale); color:var(--teal-dark);
  border-left:4px solid var(--teal-light); border-radius:0 7px 7px 0;
  padding:9px 13px; font-size:12.5px; margin:0 0 var(--s5) 10px; max-width:760px;
}
.why b{ color:var(--teal-dark) }

.msg{ padding:10px 14px; border-radius:var(--radius); font-size:13.5px; margin-top:var(--s4) }
.msg-ok{ background:var(--green-bg); color:var(--green-text) }
.msg-err{ background:var(--danger-bg); color:var(--danger-text) }

/* Session 148: the base input/textarea/select rule and its focus
   treatment that used to live here moved to tokens.css (D-105
   onward), so every value genuinely lives in the one file every
   screen imports, per the design system's own rule 1. Nothing here
   restyles a control; shell.css keeps only what is not a design
   token. */
.btn:disabled{ opacity:.45; cursor:default }
.btn:disabled:hover{ background:var(--white) }
.btn-p:disabled:hover{ background:var(--orange) }

.loading{ padding:56px 32px; text-align:center; color:var(--muted); font-size:13.5px }

/* ---------- chips ----------
   Session 106: ported verbatim from the mockup, replacing four
   near-identical private per-screen copies (opaque white,
   border-radius:20px) that Part 0 found. --page-chip/--page-line
   in the mockup map to session 105's --chip-bg/--content-line,
   already the same values -- not introducing a second pair of
   tokens for one idea. */
.chips{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5) }
.chip{
  background:var(--white); border:1px solid var(--content-line); color:var(--ink);
  border-radius:999px; padding:6px 13px; font-size:12.5px; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.chip:hover{ border-color:var(--teal-dark) }
.chip.on{ background:var(--teal-dark); color:var(--white); border-color:var(--teal-dark) }

/* ---------- property Overview (session 154) ----------
   Ported from docs/mh-property-page-full-mockup.html's own .cols/.col,
   .hp and .mini. Not reusing generic names (.cols/.col) since nothing
   else on this platform uses that two-column pattern yet and a generic
   name risks a future screen colliding with it. */
.pd-ov-cols{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-top:var(--s4) }
.pd-ov-col{ flex:1 1 380px; min-width:300px; display:flex; flex-direction:column; gap:12px }
/* Session 155, Part 1. Daniel: "Buttons do not fit in the page" --
   .fr is plain nowrap flex everywhere else on the platform (unchanged
   there); scoped to the property detail screen only, a row whose label
   and control together are wider than the card now wraps the control
   onto its own line under the label instead of squeezing the label's
   text (and its hint-inline) into whatever space is left. Fixes the
   Refrigerator row (long label + hint next to a 3-button seg) and any
   future row shaped the same way, not just that one instance. */
.s-detail-property .fr{ flex-wrap:wrap; row-gap:6px }
.s-detail-property .fr .k{ flex:1 1 240px }
.s-detail-property .fr .v{ flex:0 0 auto; margin-left:auto }

/* ---------- Getting in tab (session 155) ----------
   Repeating-row lists: entry methods, house rules, storage, laundry
   rules, videos (GETTING_IN_LISTS, server.js). Every row saves on its
   own; add/edit share one inline form (.gi-rowform), never a modal. */
.gi-section{ margin-top:14px }
.gi-section:first-child{ margin-top:0 }
.gi-h4{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin:0 0 8px }
.gi-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft) }
.gi-row:last-of-type{ border-bottom:none }
.gi-main{ font-size:13.5px; color:var(--ink); flex:1 1 auto; line-height:1.5 }
.gi-actions{ display:flex; gap:4px; flex:0 0 auto }
.gi-mini{ background:none; border:1px solid var(--content-line); border-radius:6px; padding:3px 8px; font-size:12px; color:var(--muted); cursor:pointer }
.gi-mini:hover{ color:var(--ink); border-color:var(--teal-dark) }
.gi-add-link{ background:none; border:none; color:var(--teal-dark); font-size:13px; cursor:pointer; padding:8px 0 0; font-weight:550 }
.gi-empty{ padding:10px 0; font-size:13px }
.gi-rowform{ background:var(--gray-bg); border-radius:var(--radius); padding:12px; margin-top:8px }
.gi-field{ margin-bottom:8px }
.gi-field label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:3px }
.gi-field input[type=text], .gi-field select{ width:100%; padding:6px 8px; border:1px solid var(--content-line); border-radius:6px; font-size:13px; box-sizing:border-box }
.gi-field input[type=checkbox]{ margin-right:6px }
.gi-rowform-actions{ display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap }
.pd-code{ display:inline-block; background:var(--chip-bg); border:1px solid var(--content-line); border-radius:5px; padding:1px 7px; font-size:12px; font-weight:600; color:var(--teal-dark); margin-left:4px }
.gi-vid{ display:inline-block; background:var(--white); border:1px solid var(--content-line); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--ink); text-decoration:none; margin:0 8px 8px 0 }
.gi-vid:hover{ border-color:var(--teal-dark); color:var(--teal-dark) }

/* Session 156. The service catalog's own colour swatch and its retired
   rows -- a swatch is a plain <span> with only a background colour set
   inline, so it needs real dimensions here or it renders as nothing. */
.svc-swatch{ display:inline-block; width:14px; height:14px; border-radius:3px; border:1px solid var(--content-line); vertical-align:middle; margin-right:6px }
tr.row-inactive td{ color:var(--muted) }
.pd-hp{
  display:inline-block; background:var(--chip-bg); border:1px solid var(--content-line);
  color:var(--teal-dark); border-radius:12px; padding:2px 10px; font-size:12px; font-weight:600;
  margin:0 5px 5px 0;
}
.pd-mini{
  display:inline-block; border-radius:12px; padding:3px 10px; font-size:12px;
  border:1px solid var(--content-line); background:var(--white); color:var(--muted); cursor:pointer; margin:0 5px 5px 0;
}
.pd-mini.on{ background:var(--chip-bg); border-color:var(--teal-dark); color:var(--teal-dark); font-weight:600 }
/* The mockup's own .v.m: "Missing looks missing... never an empty box
   that looks like an answer" (brief, Part 3). */
.pd-missing{
  display:inline-block; background:var(--amber-bg); color:var(--amber-text);
  border-radius:4px; padding:1px 8px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.pd-missing::before{ content:"add "; }
/* Session 158, Part 2. Read mode's own "not answered" marker: the same
   amber "missing information" language pd-missing already carries, but
   never a click target -- pd-missing's own cursor:pointer and "add "
   prefix read as an edit affordance, exactly what read mode must not
   suggest ("nothing on the page can be changed" outside Edit). */
.pd-ro-missing{
  display:inline-block; background:var(--amber-bg); color:var(--amber-text);
  border-radius:4px; padding:1px 8px; font-size:12.5px; font-weight:600;
}
/* Session 154. The seg's own "not answered" state, distinct from a
   pressed No (see pdBoolSegHtml's own comment in shell.js). */
.seg.unanswered{ border-color:var(--amber-dot) }
.seg-missing{
  padding:4px 10px; font-size:12.5px; color:var(--amber-text); background:var(--amber-bg);
  border-right:1px solid var(--amber-dot);
}

/* ---------- pill switch ----------
   Session 137, Part 1. The segmented pill control Daniel pointed at
   (docs/daniel-prospects-1-pills.png: Auto/Day/Night, Austin/Houston on
   the Team Map). That exact visual (.tm-mbtn, index.html) is scoped
   under .s-teammap only and was built before this file's own rule 1
   ("the value goes into the file first, then gets used"); rather than
   re-scope a screen already carrying a 29-item acceptance checklist,
   the same values are given one shared, unscoped name here so Prospects
   (and any later screen) can use the real thing instead of a private
   copy. Team Map's own markup is untouched. */
.pillswitch{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--gray-bg); border:1px solid var(--line) }
.pillswitch button{ background:none; border:0; padding:7px 16px; border-radius:999px; font-size:13px; font-weight:550; color:var(--muted); cursor:pointer }
.pillswitch button.on{ background:var(--teal-dark); color:var(--white) }

/* ---------- segmented control ----------
   Session 105/106 shipped a second, pill-shaped .seg here as an
   "available and unused" component, riding a JS physics slider
   (segControl()/pillIndicator()) that this session confirmed (grepped
   shell.js) is still never called anywhere in the app -- genuinely
   dead code, not just unused-for-now. Its rules loaded after
   tokens.css's own real, IN-USE .seg (D-117, session 148: the actual
   Yes/No segmented control on the property page and elsewhere), so
   the cascade let this dead block's padding/radius/background bleed
   into the live control's rendering even though nothing ever
   instantiated the slider itself. Removed outright, per rule 1 (fix
   the rule, not the instance) and this session's own Part 2 ("map the
   mockup's values onto the live app's existing classes"): tokens.css's
   D-117 .seg is now the one definition, already matching the mockup's
   own flat, 8px-radius, bordered segmented control. */

/* ---------- the rail ----------
   Session 109, Part 1. One component, two screens (shell.js's
   railHtml()). A row of small flex segments: teal for done, a
   muted fill with a hairline border for not-started (contrast
   checked: --gray-bg alone measures 1.10:1 against --paper, too
   faint to read as a shape with no text riding on it, so
   not-started gets a real border rather than relying on fill alone
   -- unlike a pill, which has its own text for definition, a rail
   segment has none). The current segment is not just a colour
   swap: taller, with a soft glow ring, stolen directly from
   Daniel's legacy console (mh-onboarding v1.3.1's railHTML) so the
   eye finds "the one that matters" before it even reads colour --
   the same reason this also happens to help a colour-blind reader
   (rule 4: state is never colour alone; every segment's real title
   attribute, in words, is the actual accessibility guarantee,
   this is a bonus, not the guarantee itself).
   ============================================================ */
.rail{ display:flex; align-items:center; gap:3px; min-width:64px }
.rail-seg{
  flex:1; min-width:6px; height:7px; border-radius:3px;
  background:var(--gray-bg); border:1px solid var(--line);
  transition:transform .2s var(--spring);
}
.rail-seg.rail-done{ background:var(--teal-dark); border-color:var(--teal-dark) }
.rail-seg.rail-current{ height:11px; border-color:transparent }
/* Session 111a, Part 3. Reverted to exactly what session 109 shipped
   (commit 93135f6, read directly, not re-derived): solid --orange for
   office, solid --yellow for the candidate. Daniel, 9 September 2026:
   "I really like the yellow and the orange that lives on the Stage icon
   for Candidates. I didn't like it in the Waiting On. So edit that color
   back." Session 110 Part 6 softened both the rail and the pills; only
   the pills should have. The pills (below) stay exactly as session 110
   made them -- Daniel liked that change.

   Colour-blind position, now that the rail is back to orange/yellow:
   session 110's own simulation found light teal/yellow measurably better
   than orange/yellow for both common forms of colour blindness (Part 3,
   session 111a report). Daniel has chosen the look anyway. The
   mitigation, confirmed still true: state is never colour alone (rule
   4, session 109) -- every segment's real state is in its title
   attribute, in words, unaffected by which two colours the current
   segment uses. */
.rail-seg.rail-actor-office{
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,138,51,.22);
}
.rail-seg.rail-actor-person{
  background:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,209,58,.30);
}
/* Session 146, Part 4. Daniel: "Lost shows in a way that cannot be
   mistaken for progress." Additive: every existing rail state (done,
   current, not-started, both actor colours) is untouched; this is the
   one new state an opportunity's own rail can reach that a candidate's
   rail never used, var(--danger-text), the platform's own established
   "danger" colour already used in roughly a dozen other spots, not a
   new colour invented for this. */
.rail-seg.rail-lost{ background:var(--danger-text); border-color:var(--danger-text) }
/* No motion beyond what the spring layer already provides on
   hover elsewhere (Part 1's own limit): this is a plain hover, not
   a Spring-driven one. */
.rail-seg[onclick]{ cursor:pointer }
.rail-seg[onclick]:hover{ transform:scaleY(1.35) }

/* The waiting-on label, coloured to match the rail's current segment
   exactly. Session 110 Part 6: tinted background, darker text, the
   mockup's own .pill family (.pill.teal/.pill.warn), no solid fills --
   same softening as the rail, same two colours. Contrast: teal-dark on
   teal-pale 5.13:1; yellow-ink on the flattened .55 yellow (both actual
   colours a browser renders, computed, not the raw token) 9.31-9.39:1,
   comfortably up from the already-good 7.97:1 solid pairing, since a
   paler background gives dark text more room. */
.actor-pill{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:12.5px; font-weight:550;
}
.actor-pill.actor-office{ background:var(--teal-pale); color:var(--teal-dark) }
.actor-pill.actor-person{ background:rgba(255,209,58,.55); color:var(--yellow-ink) }

/* The day-waiting colours, session 109 Part 2. Same rule 3: no new
   colour. Four tiers, Daniel's own thresholds: neutral, amber (4-7),
   orange (8-14), red (15+). --orange-deep, not --orange itself, since
   --orange as text measures 2.31:1 on paper (too faint to read); --orange-
   deep still only reaches 3.43:1, short of the 4.5:1 body-text bar --
   the palette has no member built for orange-as-small-text (rule 3: say
   so rather than invent one), so this is the closest existing token,
   bold-weighted to help it read. */
.age-neutral{ color:var(--text) }
.age-amber{ color:var(--amber-text); font-weight:600 }
.age-orange{ color:var(--orange-deep); font-weight:600 }
.age-red{ color:var(--danger-text); font-weight:700 }
.row-stuck{ box-shadow:inset 3px 0 0 var(--danger-text) }

/* Session 113 Part 4. Coaching board row state, encoded (not decorated):
   overdue reuses .row-stuck's own left-edge pattern; due-this-week gets
   the same treatment in amber. coach-row-open marks the row whose detail
   is expanded in place directly below it (Part 4: never a panel at the
   bottom of the page). Existing tokens only, no new colour (rule 5). */
.coach-row-overdue{ box-shadow:inset 3px 0 0 var(--danger-text) }
.coach-row-soon{ box-shadow:inset 3px 0 0 var(--amber-text) }
.coach-row-open{ background:var(--amber-bg) }
.coach-row-detail td{ padding:var(--s4); background:var(--paper) }
.pill-danger{ background:var(--danger-bg); color:var(--danger-text) }

/* The Training screen's gate rail (session 109 Part 3) runs a little
   wider than the Candidates one, since it now carries the row's own
   visual weight (rule: "the visual and the point of this screen IS each
   gate"). The drill-in box below a clicked gate: same border/radius
   language as the app's other inline expand panels (session 82's own
   .tg-form), just given its own name and scope since .tg-form lives
   under .s-detail only and would carry no styling here. */
.rail-gates{ min-width:120px }
.tb-drill{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--row-glow); padding:12px 14px; margin:0 20px;
  font-size:13.5px;
}

/* ---------- the coached interview, session 110 Parts 1-2 ----------
   The mockup has no say-this/tip block of its own (checked directly,
   Part 0: not inventing one); the STRUCTURE is phone-script-app.php's
   own step card, the COLOUR is the mockup's own .pill.teal/.pill.warn
   palette, per the brief. A step kicker, a bold heading, then a
   guidance paragraph, then per-question say-this (teal) and tip
   (amber) blocks. */
.iv-step{ margin-bottom:var(--s6) }
.iv-kicker{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-dark); margin-bottom:var(--s1);
}
.iv-heading{ font-size:17px; font-weight:600; color:var(--ink); margin:0 0 var(--s2) }
.iv-guidance{ font-size:13.5px; color:var(--text); margin-bottom:var(--s4) }
.iv-question{ border-top:1px dashed var(--line); padding:var(--s4) 0 }
.iv-question:first-of-type{ border-top:none }
.iv-say, .iv-tip, .iv-reframe{
  border-radius:var(--radius); padding:10px 13px; font-size:13.5px; margin-bottom:var(--s2);
}
.iv-say, .iv-reframe{ background:var(--teal-pale); color:var(--teal-dark) }
.iv-tip{ background:var(--amber-bg); color:var(--amber-text) }
.iv-say b, .iv-tip b, .iv-reframe b{ font-weight:600 }
.iv-truth-row{ display:flex; gap:var(--s3); align-items:stretch; margin-bottom:var(--s3) }
.iv-truth-row .iv-say, .iv-truth-row .iv-reframe{ flex:1; margin-bottom:0 }

/* ---------- Checklist tab, session 159 Part 3 ----------
   Ported from docs/mh-property-page-full-mockup.html's own Checklist
   pane CSS, onto this app's real tokens (--teal-dark for the mockup's
   --teal, --teal-light for --tealLt, --line-soft for --bg). */
.r{ display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft); align-items:center }
.r .k{ flex:1; font-size:13.5px }
.r .k s{ display:block; text-decoration:none; font-size:11.5px; color:var(--muted) }
.grp{ font-size:10.5px; letter-spacing:.7px; color:var(--teal-dark); font-weight:700; margin:12px 0 3px; text-transform:uppercase }
.kind{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle }
.k-inv{ background:var(--teal-light) }
.k-task{ background:var(--teal-dark) }
.k-lin{ background:var(--orange) }
.k-spot{ background:var(--yellow) }
.sw{ display:flex; gap:5px; margin:6px 0 4px; flex-wrap:wrap }
.sw span{ background:var(--line-soft); border-radius:8px; padding:5px 12px; font-size:12.5px; color:var(--teal-dark); cursor:pointer }
.sw span.on{ background:var(--teal-dark); color:#fff; font-weight:600 }
.callegend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; margin-top:8px; align-items:center }
.callegend i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:middle }
.p{ display:inline-block; border-radius:11px; padding:2px 10px; font-size:11.5px; font-weight:700 }
.p-gray{ background:var(--line-soft); color:var(--muted) }
.p-teal{ background:var(--teal-pale); color:var(--teal-dark) }
.p-own{ background:var(--yellow); color:var(--teal-dark) }

/* Session 166, Part 3. The Onboarding stage-1 panel running off the right
   edge, root cause found by measuring computed styles locally (before
   touching the live server), not guessed from the screenshot alone:
   tokens.css's own plain `td{ white-space:nowrap; overflow:hidden;
   text-overflow:ellipsis; max-width:0 }` is exactly right for this
   table's other 9 short status columns, and every other data table on the
   platform, but it inherits straight down into this ONE colspan cell's
   own rich content (onbFormSentDetailHtml's paragraphs, textareas and
   buttons) -- nowrap forced the raw setup-link line and the label+
   textarea+button rows onto single unbreakable lines that then simply
   render past the card's own right edge, confirmed by walking the
   computed white-space down the ancestor chain from the Copy button to
   the <td> itself, all "nowrap". Reset on the one <td> that holds this
   panel; every other <td> on this table and every other table on the
   platform is untouched. */
.ob-detailrow > td{ white-space:normal; overflow:visible; text-overflow:clip; max-width:none }
.ob-detail{ overflow-wrap:anywhere; max-width:100% }
.ob-detail a{ word-break:break-all }
.ob-detail .fr > .v{ min-width:0 }

/* Session 166, Part 3. See onbPropertyRowsHtml for why: highlights the
   row that owns a currently-open detail panel so its nine status columns
   read clearly rather than blending into the panel opening beneath them. */
.ob-rowopen{ background:var(--teal-pale) }
.ob-rowopen td{ border-bottom-color:transparent }

/* Session 171, Part 1. A real port, not a description turned back into
   CSS. Session 170's own values are deleted rather than edited, per the
   brief: "the screen came back looking like the platform's own tables"
   even after that session took the mockup's <style> block as a stated
   spec, because its actual property VALUES still leaned on platform
   tokens that are close to, but not equal to, the mockup's own palette,
   and the board's own cell/who elements are <button>/<div>s inside a
   `display:contents` row (needed so a `.obb-panel` sibling can still
   span every column of `.obb-board`'s own grid) which never zeroed a
   button's native four-sided border -- the real cause of "every cell has
   a full border": the mockup's own `.cell` is a plain, borderless `div`,
   so it never had to say so.

   Every value below is checked against tokens.css by hand. Where the
   mockup's own hex is IDENTICAL to a platform token, the token is used
   (--teal-dark, --teal-light, --yellow, --orange, --white). Where it is
   close but not equal, the platform token is NOT used -- introducing a
   second, near-identical shade is exactly the kind of drift rule 17
   warns about, so the mockup's own literal value wins outright, scoped
   to this screen only as --ob-* custom properties on .s-onboarding so it
   cannot leak anywhere else and nothing else can leak into it:
     --ob-teal-dark  #155B63 (mockup .panel h4)      vs no equal platform token
     --ob-teal-pale  #E8F2F3 (row.open, ic.ready bg) vs platform --teal-pale #DDF3F3
     --ob-yellow-pale #FFF6D6 (cell.sel, panel bg)   vs platform --warn-bg   #FFF7DE
     --ob-ink        #1B2426                          vs platform --ink      #4A4F55
     --ob-muted      #6B787B                          vs platform --muted    #7A828A
     --ob-line       #D9E1E2                          vs platform --line     #DCE1E5
     --ob-amber      #B06A00 (ic.wait, st.wait)       vs platform --amber-text #C9752B
     --ob-amber-bg   #FFF6E5 (ic.wait bg)             vs platform --amber-bg #FDF3E6
     --ob-red        #C0392B (ic.late, st.late)       vs platform --danger-text #B3261E
     --ob-red-bg     #FDEDEB (ic.late bg)             vs platform --danger-bg   #FDE7E7
   Two more are literals the mockup itself never tokenised, kept as the
   same literals here rather than invented tokens: .ic.none's border
   #C7D2D4 and .st.none's colour #9BA8AA; the header row's #FAFCFC
   background and .panel .note's #7A5B00 text are the same case. */
.s-onboarding{
  max-width:1500px; margin:0 auto; padding:22px 18px 70px;
  --ob-teal-dark:#155B63; --ob-teal-pale:#E8F2F3; --ob-yellow-pale:#FFF6D6;
  --ob-ink:#1B2426; --ob-muted:#6B787B; --ob-line:#D9E1E2;
  --ob-amber:#B06A00; --ob-amber-bg:#FFF6E5; --ob-red:#C0392B; --ob-red-bg:#FDEDEB;
}
.obb-legend{ background:var(--white); border:1px solid var(--ob-line); border-radius:10px;
  padding:14px 18px; margin-bottom:20px }
.obb-legend h3{ font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ob-muted); margin-bottom:10px; font-weight:700 }
.obb-legrow{ display:flex; gap:26px; flex-wrap:wrap }
.obb-leg{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ob-ink) }
.obb-ic{ width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700 }
.obb-ic.none{ border:2px solid #C7D2D4; background:var(--white); color:transparent }
.obb-ic.wait{ border:2px solid var(--ob-amber); background:var(--ob-amber-bg); color:var(--ob-amber) }
.obb-ic.ready{ border:2px solid var(--teal-dark); background:var(--ob-teal-pale); color:var(--teal-dark) }
.obb-ic.done{ border:2px solid var(--teal-dark); background:var(--teal-dark); color:#fff }
.obb-ic.late{ border:2px solid var(--ob-red); background:var(--ob-red-bg); color:var(--ob-red) }

.obb-board{ display:grid; grid-template-columns:270px repeat(9,1fr);
  background:var(--white); border:1px solid var(--ob-line); border-radius:12px; overflow:hidden }
.obb-hrow{ display:contents }
.obb-hrow > div{ padding:9px 6px; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--ob-muted); font-weight:700; text-align:center; border-bottom:1px solid var(--ob-line); background:#FAFCFC }
.obb-hrow > div:first-child{ text-align:left; padding-left:18px }
.obb-row{ display:contents }
.obb-row.open .obb-who, .obb-row.open .obb-cell{ background:var(--ob-teal-pale) }
.obb-who{ padding:12px 14px 12px 18px; border-right:1px solid var(--ob-line); border-bottom:1px solid var(--ob-line) }
.obb-who .nm{ font-weight:700; color:var(--teal-dark); font-size:var(--tbl-name) }
.obb-who .nm a{ color:inherit }
.obb-who .meta{ font-size:12px; color:var(--ob-muted); margin-top:2px }
.obb-who .stage{ font-size:12.5px; margin-top:5px; font-weight:600; color:var(--ob-ink) }
.obb-who .lnks{ font-size:12px; margin-top:5px }
.obb-who .lnks a{ color:var(--teal-dark); text-decoration:underline; cursor:pointer }
/* border:0 first -- .obb-cell is a <button> (kept for real keyboard/click
   semantics the mockup's plain <div class="cell"> never needed), and a
   button's own native four-sided border is exactly what "every cell has
   a full border" was: border-right/border-bottom alone only ever set
   TWO sides, leaving the browser's own default border on the other two. */
.obb-cell{ border:0; padding:10px 4px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; border-right:1px solid #EDF1F1; border-bottom:1px solid var(--ob-line); cursor:pointer; background:none; width:100%; font:inherit }
.obb-cell:last-of-type{ border-right:0 }
.obb-cell .st{ font-size:11px; font-weight:600; line-height:1.25 }
.obb-cell .dt{ font-size:10.5px; color:var(--ob-muted); line-height:1.2 }
.obb-cell.sel{ background:var(--ob-yellow-pale); box-shadow:inset 0 -3px 0 var(--yellow) }
.obb-cell .st.wait{ color:var(--ob-amber) } .obb-cell .st.ready{ color:var(--teal-dark) }
.obb-cell .st.done{ color:var(--teal-dark) } .obb-cell .st.late{ color:var(--ob-red) } .obb-cell .st.none{ color:#9BA8AA }
.obb-panel{ grid-column:1 / -1; border-top:2px solid var(--yellow); background:var(--ob-yellow-pale); padding:16px 20px }
.obb-panel h4{ font-size:14px; color:var(--ob-teal-dark); margin-bottom:3px }
.obb-panel .note{ font-size:12.5px; color:#7A5B00; margin-bottom:12px }
/* The panel's own inner content (per-step forms, tables and buttons,
   e.g. onbCellDetailHtml's allocation/pending-change UI) is unchanged by
   this port: the brief's own proof list (P2) checks the panel's shell
   only -- border-top, background, padding, the heading and note text --
   never its per-step inner markup, which stays whatever session 165-170
   already built for that step. */

/* Session 169, Part 2 (re-verified through the rebuild). Every step's
   larger icon, a state label and a date/count underneath -- one open
   panel at a time, tracked the same way the prior nine-column layout
   already did (a single OB_OPEN_CELL, not one flag per cell), which is
   what makes "click a different step, the one that was open closes"
   true with no extra code. */

/* ============================================================
   Session 200: the sidebar has three states, the way the Owner mockup's does.
   Full (228px), icon rail (66px) and, on a phone, a drawer that slides over
   the page. shell.js sets body.rail / body.phone from the window width and
   the person's own choice; everything here keys on those two classes, so no
   screen's own layout changes. --side-w already drives .main, .top and the
   toasts, so changing it once moves all of them.
   ============================================================ */
:root{ --rail-w:66px; --side-open:236px }
.collapse,.burger{ display:none }
.collapse{
  margin-left:auto; width:26px; height:26px; flex:none; border-radius:6px; padding:0;
  border:1px solid rgba(255,255,255,.22); background:transparent; color:inherit; cursor:pointer;
  align-items:center; justify-content:center;
}
.collapse:hover{ background:rgba(255,255,255,.12) }
.collapse svg{ width:13px; height:13px; transition:transform .18s }
.brand-text{ min-width:0; white-space:nowrap; overflow:hidden }
.side-scrim{ display:none; position:fixed; inset:0; background:rgba(14,54,59,.55); z-index:40 }
.side{ transition:width .18s ease, transform .2s ease }
.main,.top{ transition:margin-left .18s ease, left .18s ease }
body:not(.phone) .collapse{ display:inline-flex }
body:not(.phone).forced-rail .collapse{ display:none }

/* icon rail */
body.rail{ --side-w:var(--rail-w) }
/* Session 408 (Daniel, 27 October 2026: "When page is collapsed I want that button placed correctly."): the logo alone in the header's height, then,
   under the coloured stripe, the open button at the top of the menu column, as wide as the menu's items and in line with their icons, bordered so it
   reads as a button (it sat under the logo across the stripe, y 66 to 92 against the stripe's 74 to 81). The brand row's box gives way (display:contents)
   so the logo and the button sit in the menu's own column; the full menu is unchanged. */
body.rail .brand{ display:contents }
body.rail .brand-text{ display:none }
body.rail .brand-mark{ margin:14px auto calc(14px + var(--bandH) + 6px) }
body.rail .collapse{ margin:2px 6px 4px; width:auto; height:34px; border-radius:8px; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06) }
body.rail .collapse:hover{ background:rgba(255,255,255,.16) }
body.rail .collapse svg{ transform:rotate(180deg); width:15px; height:15px }
.collapse:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }
/* Session 408 (brief C): the preview pages (Home, Day, Needs you, Assign) take the whole width beside the menu, as the four core lists do (lists.css): body is
   a flex row (shell), so without this .app is only as wide as its content, and a page narrower or wider than the window sat off to one side. */
body.preview-top .app{ flex:1 1 0; min-width:0 }
body.rail .snav{ padding:6px 6px 14px }
/* Session 275: the section headings stay readable in the narrow rail: the short name (NAV short), small and centred
   under a divider line, instead of the bare line alone. */
.slbl .slbl-short{ display:none }
body.rail .slbl{ font-size:9.5px; line-height:1.2; padding:9px 0 3px; margin:6px 0 0; text-align:center; letter-spacing:.02em;
  border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.66); white-space:nowrap; overflow:hidden }
body.rail .slbl .slbl-full{ display:none }
body.rail .slbl .slbl-short{ display:inline }
body.rail .sitem{ justify-content:center; padding:9px 0 }
body.rail .sitem .lbl{ display:none }
body.rail .sitem .hh-navtag{ display:none }   /* session 395: the new home's Preview tag (home-preview.css) */
body.rail .sitem .ico{ width:auto; font-size:16px }
body.rail .side .me{ padding:12px 0; justify-content:center }
body.rail .side .me .grow,body.rail .side .me .signout{ display:none }

/* phone: the sidebar leaves the layout and comes back as a drawer */
body.phone{ --side-w:0px }
body.phone .side{ width:var(--side-open); transform:translateX(-100%); z-index:50; box-shadow:8px 0 24px rgba(0,0,0,.25) }
body.phone.drawer .side{ transform:none }
body.phone.drawer .side-scrim{ display:block }
body.phone .burger{
  display:inline-flex; width:34px; height:34px; flex:none; border-radius:7px; padding:0;
  border:1px solid rgba(255,255,255,.22); background:transparent; color:inherit; cursor:pointer;
  align-items:center; justify-content:center;
}
body.phone .burger svg{ width:16px; height:16px }
body.phone .top{ left:0 }
body.phone .wrap{ padding-left:16px; padding-right:16px }
body.phone .top-wrap{ padding:0 12px; gap:10px }
body.phone .top-sp{ display:none }
@media (prefers-reduced-motion:reduce){ .side,.main,.top,.collapse svg{ transition:none } }

/* brand row: the collapse button now shares it, so the name gives up a little size instead of being cut off */
.brand{ gap:10px; padding:0 14px 0 16px }
.brand-name{ font-size:15px }

/* ============================================================
   THE PROPOSAL BUILDER, session 213. Every number below is read from
   the approved mockup (briefs/mh-proposal-builder-mockup-v1.html,
   screens 1 and 2). Scoped under .bp / .bp-page / .bp-launch so nothing
   else on the platform is touched.
   ============================================================ */
#page.bp-page{ padding:calc(var(--hdrH) + var(--bandH)) 0 0; max-width:none; margin:0; box-sizing:border-box }
.bp{ font-family:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; color:#16181a }
/* Session 215: the band stays full width; its contents line up with the capped block below (1376px wide, centred, 32px inside it) */
.bp-head{ height:58px; box-sizing:border-box; background:#144d54; display:flex; align-items:flex-end; padding:0 max(32px, calc((100% - 1376px) / 2 + 32px)); gap:18px }
.bp-title{ display:flex; align-items:center; gap:10px; padding-bottom:12px; font-size:17px; font-weight:800; color:#fff; letter-spacing:-0.015em; white-space:nowrap }
.bp-ico{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center }
.bp-tabs{ display:flex; gap:4px }
.bp-tab{ background:transparent; color:#fff; text-decoration:none; padding:9px 16px; border-radius:10px 10px 0 0; font-size:13.5px; font-weight:700; white-space:nowrap }
.bp-tab:hover{ color:#fff; background:rgba(255,255,255,0.10) }
.bp-tab.on{ background:#fff; color:#144d54 }
.bp-tab.on:hover{ color:#144d54 }
.bp-grow{ flex-grow:1 }
.bp-back{ padding-bottom:18px; font-size:13px; font-weight:600; color:#6fd5d4; text-decoration:none; white-space:nowrap }
.bp-back:hover{ color:#fff }
.bp-stripe{ height:6px; background:repeating-linear-gradient(90deg,#1d6e77 0 60px,#6fd5d4 60px 120px,#ffd13a 120px 180px,#ff8a33 180px 240px) }
.bp-main{ padding:16px 32px 0; display:flex; gap:24px; align-items:flex-start; max-width:1376px; margin:0 auto; box-sizing:border-box }
.bp-card{ flex-grow:1; min-width:0; background:#fff; border-radius:14px; box-shadow:0 4px 14px 0 rgba(14,54,59,0.08); padding:4px 22px 8px 22px }
.bp-sec{ font-size:12.5px; font-weight:700; color:#1d6e77; padding:8px 0 2px 0 }
.bp-row{ display:flex; align-items:center; gap:14px; padding:6px 0; border-bottom:1px solid #dfe3e6 }
.bp-card > .bp-row:last-child{ border-bottom:0 }
.bp-lab{ width:150px; flex-shrink:0 }
.bp-l{ font-size:13.5px; font-weight:600; color:#16181a; line-height:1.25 }
.bp-h{ font-size:11.5px; color:#6b747b; line-height:1.2 }
.bp-ctl{ flex-grow:1; display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap }
.bp-suf{ font-size:12px; color:#6b747b }
.bp .bp-ctl input[type=text], .bp .bp-ctl input[type=date], .bp .bp-ctl select, .bp-ovc input, .bp-file input{
  box-sizing:border-box; height:34px; padding:0 14px; border:1px solid #c9d0d4; border-radius:6px; margin:0;
  font-family:inherit; font-size:13.5px; font-weight:450; color:#16181a; background:#fff; min-width:0 }
.bp .bp-ctl select{ padding:0 10px }
.bp-ovc input{ height:32px; font-size:13px; width:100% }
.bp-addrbox{ position:relative; flex-grow:1; min-width:180px }
.bp-addrbox input{ width:100%; padding-left:32px !important }
.bp-pin{ position:absolute; left:10px; top:9px; line-height:0 }
.bp-drop{ position:absolute; left:0; right:0; top:36px; z-index:20 }
.bp-drop .search-drop-list, .bp-drop .search-drop-empty{ background:#fff; border:1px solid #c9d0d4; border-radius:6px; box-shadow:0 6px 16px rgba(14,54,59,0.14); font-size:13px }
.bp-drop .search-drop-row, .bp-drop .search-drop-empty{ padding:8px 12px; cursor:pointer }
.bp-drop .search-drop-row:hover{ background:#eef3f4 }
.bp-tagrow{ padding:0 0 6px 164px; border-bottom:1px solid #dfe3e6; min-height:0 }
.bp-tagrow:empty{ display:none }
.bp-tag{ font-size:11.5px; font-weight:600; color:#08513f; background:#e2f4ee; padding:3px 8px; border-radius:999px; white-space:nowrap }
.bp-tag.warn{ color:#9a4a0e; background:#fdeedd }
.bp-seg{ display:inline-flex; border:1px solid #c9d0d4; border-radius:999px; padding:3px; gap:2px; background:#fff }
.bp-seg button{ height:26px; padding:0 18px; border:0; border-radius:999px; font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; background:transparent; color:#4d545a; white-space:nowrap }
.bp-seg button.on{ background:#144d54; color:#fff; font-weight:700 }
.bp-chips{ display:flex; flex-wrap:wrap; gap:6px }
.bp-chip{ height:32px; padding:0 14px; border-radius:999px; font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:6px; background:#fff; color:#4d545a; border:1px solid #c9d0d4 }
.bp-chip.on{ background:#144d54; color:#fff; border-color:#144d54; font-weight:700 }
.bp-right{ width:420px; flex-shrink:0; display:flex; flex-direction:column; gap:12px }
.bp-price{ background:#fff; border-radius:14px; box-shadow:0 4px 14px 0 rgba(14,54,59,0.08); padding:16px 18px; display:flex; flex-direction:column; gap:10px }
.bp-price.bp-p2{ padding:14px 18px; gap:6px }
.bp-ph{ display:flex; align-items:baseline; justify-content:space-between }
.bp-yt{ font-size:12.5px; font-weight:700; color:#1d6e77 }
.bp-yn{ font-size:11.5px; color:#6b747b }
.bp-big{ display:flex; align-items:baseline; gap:10px }
.bp-big span{ font-size:40px; font-weight:800; letter-spacing:-0.035em; line-height:1; color:#144d54 }
.bp-big small{ font-size:12.5px; color:#6b747b }
.bp-meter{ height:6px; border-radius:999px; background:#e9ecee; overflow:hidden }
.bp-meter div{ height:6px }
.bp-mnote{ font-size:12.5px; font-weight:600; margin-top:5px }
.bp-chipis{ display:flex; flex-wrap:wrap; gap:6px }
.bp-chipi{ display:inline-flex; gap:4px; padding:3px 10px; border-radius:999px; background:#dceff0; font-size:12px; color:#144d54; white-space:nowrap }
.bp-ovr{ display:flex; gap:10px; border-top:1px solid #dfe3e6; padding-top:10px }
.bp-ovc{ flex-grow:1; min-width:0 }
.bp-ovl{ font-size:11.5px; color:#6b747b; margin-bottom:4px }
.bp-ovl a{ font-size:11.5px }
.bp-year .bp-yt{ margin-bottom:2px }
.bp-yr{ display:flex; justify-content:space-between; font-size:13px; color:#4d545a; margin-top:6px }
.bp-yr b{ font-weight:600; color:#16181a }
.bp-yr.waived{ text-decoration:line-through; color:#6b747b }
.bp-ysum{ border-top:1px solid #1d6e77; padding-top:6px; margin-top:8px }
.bp-ysum span{ font-weight:800; color:#16181a }
.bp-ysum b{ font-weight:700; color:#ff8a33 }
.bp-acts{ display:flex; flex-direction:column; gap:8px }
.bp-arow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.bp-btn{ height:42px; padding:0 20px; display:inline-flex; align-items:center; gap:8px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap }
.bp-yellow{ border:0; background:linear-gradient(180deg,#ffd13a,#f5c21c); box-shadow:0 6px 16px 0 rgba(217,106,24,0.28); color:#16181a }
.bp-sec-btn{ border:1.5px solid #144d54; background:transparent; color:#144d54; padding:0 18px }
.bp-launch{ display:flex; gap:12px; align-items:center }
.bp-launch .bp-btn{ height:44px }
.bp-savemsg{ font-size:12.5px; font-weight:600; color:#08513f }
.bp-missing{ font-size:12.5px; font-weight:600; color:#9a4a0e }
.bp-missing:empty{ display:none }
.bp-created{ font-size:13px; font-weight:600; color:#08513f }
.bp-state{ font-size:12px; color:#6b747b; display:flex; align-items:center; gap:6px }
.bp-bad{ color:#8f1f1f; font-weight:600 }
.bp-settings{ padding:16px 32px }
.bp-saved{ padding:16px 32px; max-width:1376px; margin:0 auto; box-sizing:border-box }
.bp-stbl{ background:#fff; border-radius:14px; box-shadow:0 4px 14px 0 rgba(14,54,59,0.08); overflow:hidden }
.bp-sh, .bp-sr{ display:grid; grid-template-columns:1.5fr 2fr 1.3fr .9fr 1fr 1.1fr 1.6fr; gap:12px; align-items:center; padding:12px 20px }
.bp-sh{ background:#e9ecee; font-size:12.5px; font-weight:600; color:#6b747b }
.bp-sr{ border-top:1px solid #dfe3e6; font-size:14px; color:#4d545a; cursor:pointer }
.bp-sr:hover{ background:#f5f8f9 }
.bp-sn{ font-weight:700; color:#16181a }
.bp-none{ padding:14px 20px; font-size:14px; color:#6b747b }
.bp-sfoot{ padding:10px 4px; font-size:13px }
.bp-file{ display:flex; gap:6px; margin-top:4px }
.bp-file input{ height:30px; font-size:12.5px; width:150px }
.bp-mini{ height:30px; padding:0 10px; border:1.5px solid #144d54; border-radius:8px; background:transparent; color:#144d54; font-weight:700; font-size:12.5px; cursor:pointer }
.bp-fl{ display:block; font-size:12px; margin-top:2px }
@media (max-width:820px){
  .bp-head{ flex-wrap:wrap; height:auto; padding:8px 16px 0; gap:8px }
  .bp-title{ padding-bottom:0 }
  .bp-tabs{ order:3; width:100%; flex-wrap:wrap }
  .bp-tab{ padding:9px 10px }
  .bp-back{ padding-bottom:0 }
  .bp-main{ flex-direction:column; padding:16px }
  .bp-right{ width:100%; box-sizing:border-box }
  .bp-card{ width:100%; box-sizing:border-box; padding:4px 14px 8px }
  .bp-row, .bp-ctl{ flex-wrap:wrap }
  .bp-lab{ width:100% }
  .bp-tagrow{ padding-left:0 }
  .bp-saved, .bp-settings{ padding:16px }
  .bp-sh{ display:none }
  .bp-sr{ grid-template-columns:1fr 1fr }
  .bp-launch{ flex-wrap:wrap }
}

/* Session 237: New clients from ResortCleaning (#match-queue) and the
   "not yet a client" marker beside an RC client name whose decision is open. */
.mq-rc .card-head{display:flex;align-items:center;gap:var(--s3)}
.mq-rc-sub{font-size:13px;margin:var(--s4) 0 var(--s2);color:var(--muted)}
.mq-rc-row{border-top:1px solid var(--line-soft);padding:var(--s3) 0;min-width:0}
.mq-rc-name{overflow-wrap:anywhere}
.mq-rc-props{margin:6px 0 0;padding-left:18px}
.mq-rc-props li{margin:2px 0;overflow-wrap:anywhere}
.mq-rc-sug{margin-top:6px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.mq-rc-chip{display:inline-block;border:1px solid var(--line-soft);border-radius:6px;padding:2px 8px;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.mq-rc-pick{max-width:380px;margin-top:var(--s3)}
.mq-rc-pick input{width:100%;box-sizing:border-box}
.mq-rc-opt{cursor:pointer;border:1px solid var(--line-soft);border-radius:8px;padding:var(--s2) var(--s3);margin-bottom:var(--s2);overflow-wrap:anywhere}
.mq-rc-opt:hover{background:var(--hover-bg, rgba(0,0,0,.04))}
.rc-notyet{display:inline-block;margin-left:4px;padding:0 5px;border:1px solid currentColor;border-radius:3px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.rc-notyet:hover{text-decoration:underline}

/* Session 243, Part 8: Look up on map, and a Data to fix landing. */
.pd-geo{margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:var(--surface-2,#f3f5f6);font-size:13px;line-height:1.5}
.pd-geo-err{background:#fbe3df;color:#8f2a1d}
.pd-geo-ok{background:#e2f4ee;color:#08513f}
.pd-geo-warn{color:#9a4a0e;font-weight:600}
.pd-geo-act{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.pd-loclink{font-size:12.5px;font-weight:600;margin-left:6px}
.pd-land{box-shadow:0 0 0 3px #ffd13a !important;transition:box-shadow .3s}
.rg-count{margin-left:auto;font-size:12px;font-weight:650;border-radius:999px;padding:2px 10px;background:#e2f4ee;color:#08513f}
.rg-count.amb{background:#fdf0d8;color:#7a5312}
.rg-un{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;padding:8px 0;border-top:1px solid #eceef0}
.rg-un>b{min-width:52px}.rg-un .dim{flex:1 1 260px}.rg-why{font-size:12px;color:#7a5312;flex:1 1 220px}
.rg-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.rg-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600}
.rg-form input{width:110px}.rg-msg{margin-top:8px;font-size:13px}.rg-good{color:#08513f;font-weight:600}.rg-bad{color:#8f2a1d;font-weight:600}
.rg-reg{padding:10px 0;border-top:1px solid #eceef0}.rg-reg.retired{opacity:.6}
.rg-regh{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rg-regh .btn{margin-left:auto}
.rg-zips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.rg-zip{font-size:12px;padding:2px 8px;border-radius:999px;background:#eceef0;cursor:pointer}.rg-zip:hover{background:#dceff0}
.rg-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #eceef0}.rg-add input{flex:1 1 200px}
.rg-log{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:6px 0;border-top:1px solid #eceef0;font-size:13px}

/* Session 265, Part 2: the Staff list's "No usable address" pill and the row tag saying what is missing
   (session 264's words). Orange as a to-do, the platform's to-do pair (tokens.css --b-warn-bg / --b-warn-ink). */
.s-staff .st-addrchip .n{ font-weight:700 }
.s-staff .st-addrchip:not(.on){ border-color:#F0C9A6; color:#9A4A0E; background:#FFF6EE }
.s-staff .st-addrchip:not(.on):hover{ border-color:#C4610A }
.st-addrtag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#FFE8D6; color:#9A4A0E;
  font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap; vertical-align:middle }
.s-staff .st-bar.st-noaddr-on #stTypeTabs, .s-staff .st-bar.st-noaddr-on #stMktTabs{ opacity:.45 } /* session 336: .st-bar, was .toolbar */
.s-staff tr.st-addr-sub{ display:none }
@media (max-width:760px){
  .s-staff tr.st-addr-sub{ display:table-row; cursor:pointer }
  .s-staff tr.st-addr-sub td{ padding:0 12px 10px 16px; border-top:0; white-space:normal }
  .s-staff tr.st-addr-sub .st-addrsub-n{ font-weight:600; font-size:12.5px; color:var(--ink); margin-right:2px }
  .s-staff .st-addrline{ display:none }
}
.s-staff .st-addrline{ margin-top:3px; line-height:1.2 }
.s-staff .st-addrline .st-addrtag{ margin-left:0; white-space:normal }

/* Session 271: the Candidates badge (the Team Hub Hiring tile's: red when someone has waited 7 days or more, yellow otherwise). */
.sitem .cand-navn{ margin-left:auto; background:#C62828; color:var(--white); font-size:11px; font-weight:700; border-radius:10px; padding:1px 7px; line-height:16px; }
.sitem .cand-navn.y{ background:var(--yellow); color:var(--yellow-ink); }

/* Session 296: the suggested email on a Client record with none (Use this / Not this). Long addresses wrap, never cut off. */
.cd-sug{ margin:6px 0 12px; padding:12px 14px; border-radius:10px; background:#eef7f7; border:1px solid #cfe6e7 }
.cd-sug-t{ font-size:14px; line-height:1.45; overflow-wrap:anywhere }
.cd-sug-a{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px }
.cd-sug-a .btn{ min-height:40px }
.cd-sug-n{ margin-top:6px; font-size:12px }
/* Session 309, Part 4: Administration > Users, the six permissions in one "Can" cell (Pages, Money), labelled checkboxes. */
.u-can{ width:370px; min-width:260px }
/* Only the email column may break mid-word; the short ones (Person, Role, Status, Last signed in) keep whole words, so
   the table's automatic layout can no longer squeeze them to one letter a line (index.html sets anywhere for every cell). */
.s-users .tbl th:not(:first-child), .s-users .tbl td:not(:first-child){ overflow-wrap:normal; word-break:normal }
.u-can-g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; margin:0 0 8px }
.u-can-g:last-child{ margin-bottom:0 }
.u-can-h{ grid-column:1 / -1; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:2px }
.u-can .u-can-c{ margin:0; padding:2px 0; font-size:12.5px; gap:6px; line-height:1.3; align-items:flex-start }
/* Session 310 (Part 3.2): what the Owner box opens, on its own line under it. */
.u-can-help{ grid-column:1 / -1; font-size:11.5px; color:var(--muted); line-height:1.35; margin:-2px 0 4px 26px }
/* Session 309: on a phone the accounts table is wider than the screen; it scrolls inside its own card instead of being cut off. */
.s-users .card{ overflow-x:auto }

/* Session 313 (QA-7, QA-8): the message at the bottom can now carry Undo, so it sits above the page (it was under the
   prospect page's own panels on a phone) and is centred on a phone, where the sidebar is hidden (body.phone). */
.toast{ z-index:450 }
body.phone .toast{ left:50% }
/* Session 313: on a phone the prospect's five stage buttons were 459px wide, so the whole page was wider than the screen
   (514px at 390) and the message at the bottom, with its Undo, sat below what the phone shows. The row scrolls on its own. */
@media (max-width:760px){ .oppb .oppb-stageseg{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch } .oppb .oppb-stageseg button{ flex:0 0 auto; padding:8px 13px; white-space:nowrap } }   /* .oppb * resets max-width (index.html), so the rule names .oppb too */

/* ============================================================
   Session 318: the property page, option A. The mockups' own stylesheet (docs/design/session-318/), its values named
   in tokens.css (--pa-*). Scoped under .pa so nothing else on the platform changes. Also used by the Properties list's
   address column (.pa-st, .pa-city, .pa-mp).
   ============================================================ */
.s-detail.s-detail-property .wrapnarrow{ margin-left:auto; margin-right:auto; max-width:var(--pa-wrap) }
body.phone .s-detail.s-detail-property .wrapnarrow{ margin-left:0; margin-right:0 }
.pa{ display:flex; flex-direction:column; gap:var(--pa-gap); color:var(--pa-text); font-size:14px; line-height:1.45; font-weight:450; letter-spacing:-0.006em }
.pa *{ box-sizing:border-box }
.pa a{ color:var(--pa-teal-600); text-decoration:none }
.pa a:hover{ text-decoration:underline }
.pa-crumb{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--pa-muted); flex-wrap:wrap }
.pa-crumb svg{ flex:0 0 14px }

/* the header panel (the hero) */
.pa-hero{ background:linear-gradient(135deg, var(--pa-teal-900), var(--pa-teal-950)); border-radius:var(--pa-radius-hero); box-shadow:var(--pa-shadow-hero);
  color:#fff; padding:28px 32px 26px; display:grid; grid-template-columns:minmax(0,1fr) 380px; column-gap:36px; row-gap:18px;
  grid-template-areas:"pills map" "addr map" "btns map" "vals map" "facts facts" }
.pa-hero > .pa-pills{ grid-area:pills } .pa-hero > .pa-addr{ grid-area:addr } .pa-hero > .pa-btns{ grid-area:btns }
.pa-hero > .pa-vals{ grid-area:vals } .pa-hero > .pa-map{ grid-area:map } .pa-hero > .pa-facts{ grid-area:facts; margin-top:10px }
.pa-hero > .pa-chip-m{ display:none }
.pa-pills{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.pa .pa-addrlink{ display:inline-flex; align-items:flex-start; gap:14px; color:#fff; text-decoration:none }
.pa .pa-addrlink:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px }
.pa-addrlink svg{ margin-top:6px; flex:0 0 34px }
.pa-title{ margin:0; font-size:44px; font-weight:800; letter-spacing:-0.035em; line-height:1.05; color:#fff; font-style:normal }
.pa-title.pa-noaddr{ color:rgba(255,255,255,.72) }
.pa-cityline{ display:flex; align-items:center; gap:12px; margin:10px 0 0 48px; flex-wrap:wrap }
.pa-city-hero{ font-size:22px; font-weight:600; color:var(--pa-teal-300); letter-spacing:-0.015em }
.pa-rchip{ display:inline-flex; align-items:center; gap:10px; background:var(--pa-amber-bg); color:var(--pa-amber-text); border-radius:999px;
  padding:4px 5px 4px 12px; font-size:13px; font-weight:600 }
.pa-rchip button{ background:var(--pa-amber-text); color:#fff; border:0; border-radius:999px; padding:4px 11px; font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer }
.pa-rchip button:disabled{ opacity:.6; cursor:default }
.pa .pa-editaddr{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:600; font-size:13.5px; padding:5px 10px; border-radius:8px;
  background:rgba(255,255,255,.1); border:0; font-family:inherit; cursor:pointer }
.pa .pa-editaddr:hover{ background:rgba(255,255,255,.18); text-decoration:none }
.pa-btns{ display:flex; gap:10px; flex-wrap:wrap }
.pa .pa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 16px; border-radius:var(--pa-radius-btn); font-family:inherit;
  font-weight:600; font-size:14px; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-ink); cursor:pointer; text-decoration:none; white-space:nowrap }
.pa .pa-btn:hover{ text-decoration:none }
.pa .pa-btn.pa-go{ background:linear-gradient(var(--pa-yellow), var(--pa-yellow-2)); border:0; color:var(--pa-ink); font-weight:700; box-shadow:var(--pa-shadow-go) }
.pa .pa-btn.pa-dk{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff }
.pa .pa-btn.pa-dk:hover{ background:rgba(255,255,255,.18) }
.pa-vals{ display:flex; gap:28px; flex-wrap:wrap }
.pa-hl{ font-size:12px; color:rgba(255,255,255,.66); font-weight:600 }
.pa .pa-hv{ font-size:14.5px; color:#fff; font-weight:600 }
.pa a.pa-hv{ color:var(--pa-teal-300) }
.pa-hv .pa-hint-l{ color:var(--pa-teal-300); font-size:12.5px; margin-left:6px }
.pa-map{ background:#fff; border-radius:var(--pa-radius-card); overflow:hidden; align-self:start; color:var(--pa-text) }
.pa-mapbox{ position:relative; height:210px; background:#e7eef0 }
.pa-mapcanvas, .pa-mapbox > svg{ position:absolute; inset:0; width:100%; height:100% }
.pa .pa-mapopen{ position:absolute; inset:0; z-index:2; display:block }
.pa-mapnone{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--pa-muted); font-size:14px }
.pa-mapfoot{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--pa-line); flex-wrap:wrap }
.pa-dot{ width:8px; height:8px; border-radius:99px; background:var(--pa-green-dot); flex:0 0 8px }
.pa-dot.off{ background:var(--pa-amber-edge) }
.pa-pinlbl{ font-size:13px; font-weight:600; color:var(--pa-ink) }
.pa-coords{ font-size:11.5px; color:var(--pa-muted) }
.pa-map .pd-geo{ margin:0 14px 12px; font-size:12.5px }
.pa-facts{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; border-top:1px solid rgba(255,255,255,.16); padding-top:20px }
.pa-fv{ font-size:22px; font-weight:800; color:#fff; letter-spacing:-0.025em; line-height:1.1 }
.pa-fv.pa-y{ color:var(--pa-yellow) } .pa-fv.pa-dim{ color:rgba(255,255,255,.6) }
.pa-fl{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.72); margin-top:4px }

/* pills */
.pa-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap }
.pa-amber{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.pa-green{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.pa-teal{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.pa-grey{ background:var(--pa-grey); color:var(--pa-text) }
/* Session 405: the Active / Inactive toggle beside the status pill (shell.js paActiveHtml), on the dark header */
.pa-act{ display:inline-flex; border:1px solid rgba(255,255,255,.4); border-radius:999px; overflow:hidden }
.pa .pa-actb{ background:transparent; color:#fff; border:0; padding:4px 13px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; line-height:1.4 }
.pa .pa-actb:hover{ background:rgba(255,255,255,.16) }
.pa .pa-actb:focus-visible{ outline:2px solid var(--pa-yellow); outline-offset:-2px }
.pa .pa-actb.on{ background:#fff; color:var(--pa-teal-900) }
.pa .pa-actb.pa-actoff.on{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.pa-actwhy{ font-size:13px; font-weight:600; color:#fff }
.pa-actask{ flex-basis:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:rgba(255,255,255,.1); border-radius:10px; padding:10px 12px }
.pa-actask label{ font-size:13px; font-weight:700; color:#fff }
.pa-actask input{ height:38px; border-radius:8px; border:1px solid var(--pa-input-line); padding:0 10px; font-family:inherit; font-size:14px; color:var(--pa-ink); background:#fff; flex:1 1 220px; min-width:0 }
.pa .pa-btn.pa-actbtn{ height:38px }
.pa-acterr{ flex-basis:100%; font-size:12.5px; font-weight:600; color:var(--pa-yellow) }
.pa-acterr:empty{ display:none }

/* the tab bar */
.pa-tabs{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); padding:6px; display:flex; gap:2px; flex-wrap:wrap }
.pa-tab{ font-family:inherit; font-size:14px; font-weight:600; color:var(--pa-text); background:none; border:0; padding:9px 14px; border-radius:var(--pa-radius-btn); cursor:pointer }
.pa-tab:hover{ background:var(--pa-grey) }
.pa-tab.on{ background:var(--pa-teal-900); color:#fff; font-weight:700 }

/* the not answered band */
.pa-band{ display:flex; align-items:center; gap:14px; background:var(--pa-amber-bg); border-radius:var(--pa-radius-card); padding:14px 18px; color:var(--pa-amber-text) }
.pa-band-ic{ width:38px; height:38px; border-radius:10px; background:var(--pa-amber-icon); display:flex; align-items:center; justify-content:center; flex:0 0 38px; color:var(--pa-amber-edge) }
.pa-band-t{ font-weight:700; font-size:15px }
.pa-band-l{ font-size:13px }
.pa .pa-btn.pa-band-go{ border-color:var(--pa-amber-line); background:#fff; color:var(--pa-amber-text); flex:0 0 auto }

/* cards */
.pa-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--pa-gap); align-items:start }
.pa-col7{ grid-column:span 7; display:flex; flex-direction:column; gap:var(--pa-gap); min-width:0 }
.pa-col5{ grid-column:span 5; display:flex; flex-direction:column; gap:var(--pa-gap); min-width:0 }
.pa-col12{ grid-column:1 / -1; display:flex; flex-direction:column; gap:var(--pa-gap); min-width:0 }
.pa-card{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card) }
.pa-card.pa-ring{ box-shadow:0 0 0 2px var(--pa-teal-300), 0 10px 24px rgba(14,54,59,.12) }
.pa-ch{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--pa-line) }
.pa-ic{ width:40px; height:40px; border-radius:10px; background:var(--pa-teal-900); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 40px }
.pa-ct{ font-size:17px; font-weight:700; color:var(--pa-ink); letter-spacing:-0.015em; margin:0; line-height:1.2; font-style:normal; border:0; padding:0 }
.pa-cs{ font-size:12.5px; color:var(--pa-muted) }
.pa .pa-ed{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--pa-teal-600); background:none; border:0; padding:6px 8px; border-radius:8px;
  cursor:pointer; font-family:inherit; margin-left:auto; white-space:nowrap }
.pa .pa-ed:hover{ background:var(--pa-grey); text-decoration:none }
.pa-kv{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.pa-kv.first{ border-top:0 }
.pa-kv > span:first-child{ min-width:0 }
.pa-v{ color:var(--pa-ink); font-weight:600; text-align:right; overflow-wrap:anywhere }
.pa-yes{ display:inline-flex; align-items:center; gap:6px; color:var(--pa-green-text); font-weight:600; text-align:right }
.pa-no{ color:var(--pa-muted); font-weight:500 }
.pa-big{ font-size:32px; font-weight:800; color:var(--pa-ink); letter-spacing:-0.035em; line-height:1 }
.pa-big.pa-na{ font-size:15px; font-weight:600; letter-spacing:0; line-height:32px }
.pa-lbl{ font-size:12.5px; font-weight:600; color:var(--pa-muted); margin-top:6px }
.pa-bigs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:20px }
.pa-beds{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 20px 18px }
.pa-has{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:var(--pa-teal-100); color:var(--pa-teal-900); font-weight:600; font-size:13.5px }
.pa-hasnt{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:var(--pa-page); color:var(--pa-muted); font-weight:500; font-size:13.5px }
.pa-chips{ display:flex; gap:8px; flex-wrap:wrap }
.pa-note{ padding:0 20px 18px; font-size:13px; color:var(--pa-muted) }
.pa-body{ padding:18px 20px }
.pa-hist{ padding:4px 20px 12px }

/* Edit */
.pa-editbar-wrap{ position:sticky; top:calc(var(--hdrH) + var(--bandH, 0px)); z-index:20; background:var(--page-bg); padding:16px 0 14px; margin:-16px 0 -8px }
.pa-editbar{ display:flex; align-items:center; gap:14px; background:var(--pa-teal-100); border-radius:var(--pa-radius-card); padding:12px 14px 12px 18px; flex-wrap:wrap }
.pa-editbar-t{ flex:1; min-width:0 }
.pa-editbar-t b{ display:block; font-weight:700; color:var(--pa-teal-900); font-size:15px }
.pa-editbar-t span{ font-size:13px; color:var(--pa-teal-900) }
.pa-f{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.pa-flbl{ font-size:12.5px; font-weight:600; color:var(--pa-text) }
.pa .pa-inp{ height:44px; border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-inp); padding:0 12px; font-family:inherit; font-size:15px; color:var(--pa-ink);
  font-weight:500; background:#fff; width:100%; max-width:none; box-shadow:none }
.pa textarea.pa-inp{ height:auto; min-height:88px; padding:10px 12px; line-height:1.4 }
.pa .pa-inp:focus{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.pa .pa-inp.pa-diff{ border-color:var(--pa-amber-edge); background:var(--pa-amber-soft) }
.pa-eg{ padding:20px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px }
.pa-s2{ grid-column:span 2 } .pa-s3{ grid-column:span 3 } .pa-s4{ grid-column:span 4 } .pa-s6{ grid-column:span 6 } .pa-s8{ grid-column:span 8 } .pa-s12{ grid-column:1 / -1 }
.pa-resortline{ align-self:end; display:flex; align-items:center; gap:10px; background:var(--pa-amber-bg); color:var(--pa-amber-text); border-radius:10px;
  padding:10px 10px 10px 14px; font-size:13.5px; font-weight:600; min-height:44px }
.pa-resortline > span{ flex:1 }
.pa-resortline button{ background:var(--pa-amber-text); color:#fff; border:0; border-radius:8px; padding:7px 12px; font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; min-height:34px }
.pa-ro{ grid-column:1 / -1; display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--pa-text); border-top:1px solid var(--pa-line-soft); padding-top:14px }
.pa-ro b{ color:var(--pa-ink) }
.pa-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 20px; border-top:1px solid var(--pa-line-soft); flex-wrap:wrap }
.pa-row.first{ border-top:0 }
.pa-row.pa-top{ align-items:flex-start }
.pa-row.pa-ringrow{ box-shadow:inset 0 0 0 2px var(--pa-teal-300); border-radius:8px }
.pa-seg{ display:inline-flex; border:1px solid var(--pa-input-line); border-radius:999px; padding:3px; gap:2px; background:#fff; flex-wrap:wrap }
.pa-seg button{ font-family:inherit; font-size:13px; font-weight:600; color:var(--pa-text); background:none; border:0; border-radius:999px; padding:6px 14px; cursor:pointer; min-height:32px }
.pa-seg button.on{ background:var(--pa-teal-900); color:#fff }
.pa-segs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end }
.pa-chipbtn{ font-family:inherit; font-size:13px; font-weight:600; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-text); border-radius:999px; padding:6px 12px; cursor:pointer; min-height:32px }
.pa-chipbtn.on{ background:var(--pa-teal-100); border-color:var(--pa-teal-300); color:var(--pa-teal-900) }
.pa-chipset{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:380px }
.pa-num{ display:flex; align-items:center; border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-inp); height:44px; overflow:hidden; background:#fff }
.pa-num:focus-within{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.pa-num button{ width:38px; height:100%; border:0; background:var(--pa-page); color:var(--pa-teal-900); font-size:18px; font-weight:700; cursor:pointer; font-family:inherit; flex:0 0 38px }
.pa .pa-num input{ width:100%; min-width:0; border:0; text-align:center; font-family:inherit; font-size:16px; font-weight:700; color:var(--pa-ink); height:100%; padding:0; outline:none; box-shadow:none; background:#fff }
.pa-total{ height:44px; border-radius:var(--pa-radius-inp); background:var(--pa-teal-100); color:var(--pa-teal-900); display:flex; align-items:center; justify-content:center; gap:6px; font-weight:700 }
.pa-g3{ padding:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.pa-g5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:end }
.pa-g2{ padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.pa-msg{ font-size:13px; font-weight:600 }
.pa-msg.bad{ color:var(--danger-text) }

/* the Properties list's address column (session 318, Part 4) */
.pa-st{ font-size:15.5px; font-weight:700; color:var(--pa-ink); letter-spacing:-0.012em; overflow-wrap:anywhere }
a.pa-st:hover{ text-decoration:underline }
.pa-city{ font-size:13px; color:var(--pa-muted); margin-top:1px }
.pa-mp{ width:32px; height:32px; border-radius:8px; background:var(--pa-teal-100); color:var(--pa-teal-600); display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px }
.pa-mp:hover{ background:var(--pa-teal-300); color:var(--pa-teal-950) }
.pa-addrcell{ display:flex; gap:12px; align-items:flex-start; min-width:0 }
.pa-rpill{ display:inline-flex; align-items:center; padding:1px 8px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--pa-amber-bg); color:var(--pa-amber-text); margin-left:6px; white-space:nowrap }
.lp .pa-fchip.warn{ background:var(--pa-amber-bg); border-color:#e8cf9f; color:var(--pa-amber-text) }
.lp .pa-fchip.warn[aria-pressed="true"]{ background:var(--pa-amber-text); border-color:var(--pa-amber-text); color:#fff }
.pa-fdot{ width:8px; height:8px; border-radius:99px; background:var(--pa-amber-edge); display:inline-block; margin-right:6px }

/* the phone (session 318, Part 5) */
body.phone .pa-hero{ margin:0 -16px; border-radius:0; padding:20px 16px; grid-template-columns:minmax(0,1fr); row-gap:14px;
  grid-template-areas:"pills" "addr" "chipm" "map" "btns" "facts" "vals"; background:linear-gradient(160deg, var(--pa-teal-900), var(--pa-teal-950)) }
body.phone .pa-hero > .pa-chip-m{ display:flex; grid-area:chipm }
body.phone .pa-cityline .pa-rchip{ display:none }
body.phone .pa-title{ font-size:30px; letter-spacing:-0.03em; line-height:1.08 }
body.phone .pa-addrlink{ gap:8px } body.phone .pa-addrlink svg{ width:24px; height:24px; flex:0 0 24px; margin-top:4px }
body.phone .pa-cityline{ margin:6px 0 0 32px }
body.phone .pa-city-hero{ font-size:18px }
body.phone .pa-chip-m.pa-rchip{ border-radius:10px; padding:8px 8px 8px 12px; justify-content:space-between }
body.phone .pa-chip-m.pa-rchip button{ border-radius:8px; padding:8px 12px; min-height:44px }
body.phone .pa-editaddr{ min-height:44px }
body.phone .pa-mapbox{ height:150px }
body.phone .pa-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
body.phone .pa-btns .pa-go{ grid-column:1 / -1 }
body.phone .pa .pa-btn{ height:46px; font-size:14.5px }
body.phone .pa-facts{ grid-template-columns:1fr 1fr; gap:14px 12px; padding-top:14px; margin-top:0 }
body.phone .pa-fv{ font-size:18px; letter-spacing:-0.02em; line-height:1.15 }
body.phone .pa-fl{ font-size:12px; margin-top:2px }
body.phone .pa-vals{ gap:10px 18px }
body.phone .pa-tabs{ background:none; box-shadow:none; padding:0 16px 2px; margin:0 -16px; flex-wrap:nowrap; overflow-x:auto; gap:6px }
body.phone .pa-tab{ flex:0 0 auto; background:#fff; border:1px solid var(--pa-line); border-radius:999px; min-height:44px }
body.phone .pa-tab.on{ background:var(--pa-teal-900); border-color:var(--pa-teal-900) }
body.phone .pa-band{ padding:12px 14px; flex-wrap:wrap }
body.phone .pa-band .pa-btn{ min-height:44px }
body.phone .pa-col7, body.phone .pa-col5, body.phone .pa-col12{ grid-column:1 / -1 }
body.phone .pa-grid{ gap:16px }
body.phone .pa{ gap:16px }
body.phone .pa-ch{ padding:14px 16px; gap:10px }
body.phone .pa-ic{ width:36px; height:36px; flex:0 0 36px }
body.phone .pa-ct{ font-size:16px }
body.phone .pa .pa-ed{ padding:10px 6px; min-height:44px }
body.phone .pa-kv, body.phone .pa-row{ padding:12px 16px }
body.phone .pa-bigs{ gap:8px; padding:16px }
body.phone .pa-big{ font-size:28px }
body.phone .pa-eg{ grid-template-columns:repeat(4,minmax(0,1fr)); padding:16px }
body.phone .pa-s2{ grid-column:span 2 } body.phone .pa-s3, body.phone .pa-s4, body.phone .pa-s6, body.phone .pa-s8{ grid-column:1 / -1 }
body.phone .pa-g3, body.phone .pa-g2{ grid-template-columns:1fr 1fr; padding:16px }
body.phone .pa-g5{ grid-template-columns:1fr 1fr }
body.phone .pa-crumb{ min-height:44px }
body.phone .pa a.pa-hv{ display:inline-flex; align-items:center; min-height:44px }
body.phone .pa-mapfoot .pa-ed{ min-height:44px }
body.phone .pa-seg button, body.phone .pa-chipbtn{ min-height:44px }
body.phone .pa-num button{ width:44px; flex-basis:44px }
/* The other tabs keep their content; their cards take the same corners, shadow and header type (session 318). */
.pa .card{ border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); margin-bottom:0 }
.pa .card > .card-head{ margin:-20px -22px 14px; padding:16px 20px; border-bottom:1px solid var(--pa-line) }
.pa .card-head h2{ font-family:inherit; font-style:normal; font-size:17px; font-weight:700; color:var(--pa-ink); letter-spacing:-0.015em }
.pa .pd-ov-cols{ gap:var(--pa-gap) }
body.phone .pa .card > .card-head{ margin:-20px -22px 14px; padding:14px 16px }
/* The Properties list, session 318 Part 4: Address first, then Name and client; both wrap, never cut off. */
.lp-pr .lp-thead, .lp-pr .lp-tr{ grid-template-columns:minmax(240px, 2.4fr) minmax(180px, 1.8fr) minmax(130px, 170px) minmax(140px, 180px) 80px 90px 130px }   /* session 406: How it's booked */
.lp-pr.st .lp-thead, .lp-pr.st .lp-tr{ grid-template-columns:minmax(240px, 2.4fr) minmax(180px, 1.8fr) minmax(130px, 170px) minmax(140px, 180px) 80px 90px 96px 130px }
.lp-pr .lp-tr.pa-tr{ padding-top:14px; padding-bottom:14px; align-items:start }
.lp-pr .lp-tr.pa-tr > span{ align-items:flex-start }
.lp-pr .lp-tr.pa-tr > span.lp-r{ justify-content:flex-end }
.pa-nc{ display:flex; flex-direction:column; min-width:0 }
.pa-ncn{ color:var(--pa-ink); font-weight:600; overflow-wrap:anywhere }
.pa-ncn .lp-tag{ height:22px; padding:0 8px; font-size:11.5px; margin-left:4px; vertical-align:1px }
.lp .pa-fchip{ display:inline-flex; align-items:center; gap:0; white-space:nowrap }
.lp-card.pr .pa-st{ font-size:15px }
/* the phone: the band's words get the full width, its button goes under them; a "Not answered" big number fits its column */
body.phone .pa-band > .pa-band-mid{ flex:1 1 100% }
body.phone .pa-band .pa-band-go{ width:100% }
.pa-big.pa-na .pa-pill{ white-space:normal; text-align:center; line-height:1.25 }
body.phone .pa-big.pa-na .pa-pill{ font-size:11px; padding:3px 6px }
/* Session 318, Part 6: tap-to-call and mail links under a Client or Staff name; a prospect's address as a Maps link. */
.mh-contact{ display:flex; gap:6px 18px; flex-wrap:wrap; margin-top:6px; font-size:15px; font-weight:600 }
.mh-contact a{ color:var(--pa-teal-600); text-decoration:none }
.mh-contact a:hover{ text-decoration:underline }
.opp-sub{ display:flex; flex-direction:column; gap:2px }
.opp-sub .mh-contact{ margin-top:2px; font-size:14px }
a.opp-maplink{ color:var(--pa-teal-600); font-weight:600 }
body.phone .mh-contact a, body.phone a.opp-maplink{ display:inline-flex; align-items:center; min-height:44px }
body.phone .pa-crumb a{ display:inline-flex; align-items:center; min-height:44px }
body.phone .pa .pa-addrlink{ min-height:44px; align-items:center }
.lp a.pa-st, .lp-tr a.pa-st{ color:var(--pa-ink); text-decoration:none }
body.phone .lp-pr .lp-bl{ flex-wrap:wrap }
body.phone .lp .pa-fchip{ order:9; flex:1 1 100%; justify-content:center; min-height:44px }
body.phone .pa-editbar{ padding:12px }
body.phone .pa-editbar-t{ flex:1 1 100% }
body.phone .pa-editbar .pa-btn{ flex:1 1 0; height:46px }
.pa-f.pa-ringf{ outline:2px solid var(--pa-teal-300); outline-offset:6px; border-radius:6px }

/* ---------- Session 319: the property page, round 2 (docs/design/session-319/property-page-A-v2-1920.html) ----------
   Content 1480 wide, centred (--pa-wrap). The cards in independent columns (.pa-cols > .pa-col, each a flex column), so a
   tall card never leaves a hole beside a short one: three equal columns when the content is 1400 or wider (.pa-n3), two
   (7 and 5 of 12) from 1000, one below. The JS picks the count from the content's width (paColCount). */
.pa.pa-n3 .pa-hero{ grid-template-columns:minmax(0,1fr) var(--pa-map-wide) }
.pa.pa-n3 .pa-mapbox{ height:220px }
.pa-cols{ display:grid; gap:var(--pa-gap); align-items:start }
.pa-cols.pa-n3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.pa-cols.pa-n2{ grid-template-columns:repeat(12,minmax(0,1fr)) }
.pa-cols.pa-n2 > .pa-col:first-child{ grid-column:span 7 } .pa-cols.pa-n2 > .pa-col:last-child{ grid-column:span 5 }
.pa-cols.pa-n1{ grid-template-columns:minmax(0,1fr) }
.pa-col{ display:flex; flex-direction:column; gap:var(--pa-gap); min-width:0 }
.pa-stack{ display:flex; flex-direction:column; gap:var(--pa-gap) }
/* the tab bar sticks under the platform's own fixed top bar; a tab's content keeps the page tall enough that switching tabs
   never moves the bar */
.pa-tabs.pa-stick{ position:sticky; top:calc(var(--hdrH) + var(--bandH)); z-index:15 }
.pa-tabbody{ min-height:calc(100vh - var(--hdrH) - var(--bandH) - 80px) }
/* the not answered band: a chip per card with its count */
.pa-band{ padding:12px 18px; flex-wrap:wrap }
.pa-band-mid{ flex:1; min-width:0 }
.pa-band-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.pa-band-row .pa-band-t{ margin-right:4px }
.pa .pa-gapchip{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--pa-amber-line);
  color:var(--pa-amber-text); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit }
.pa .pa-gapchip:hover{ background:var(--pa-amber-soft) }
.pa .pa-band-go{ margin-left:auto }
/* header pills that link (the duplicate flag) */
.pa a.pa-pill{ text-decoration:none } .pa a.pa-pill.pa-amber{ color:var(--pa-amber-text) }
/* the Cleans card */
.pa-bigs3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px 20px 8px }
.pa-chartwrap{ padding:8px 20px 16px }
.pa-chart{ display:grid; grid-template-columns:22px repeat(12,minmax(0,1fr)); gap:6px; align-items:end; height:var(--pa-chart-h); border-bottom:1px solid var(--pa-line);
  background:linear-gradient(var(--pa-line-soft), var(--pa-line-soft)) 0 50% / 100% 1px no-repeat }
.pa-axis{ align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; font-size:10.5px; color:var(--pa-muted); text-align:right }
.pa-barcol{ align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end; min-width:0 }
.pa-bar{ width:100%; border-radius:4px 4px 0 0 } .pa-bar.pa-bar-under{ border-radius:0 }
.pa-bar-d{ background:var(--pa-teal-600) } .pa-bar-b{ background:var(--pa-teal-300) }
.pa-months{ display:grid; grid-template-columns:22px repeat(12,minmax(0,1fr)); gap:6px; font-size:10.5px; color:var(--pa-muted); text-align:center; margin-top:4px }
.pa-legend{ display:flex; gap:14px; margin-top:8px; font-size:12px; color:var(--pa-text) }
.pa-legend span{ display:inline-flex; align-items:center; gap:6px }
.pa-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block }
.pa-sub{ padding:14px 20px 6px; font-size:12.5px; font-weight:700; color:var(--pa-teal-600); border-top:1px solid var(--pa-line) }
.pa-nx{ display:flex; align-items:center; gap:12px; padding:10px 20px; border-top:1px solid var(--pa-line-soft) }
.pa-day{ width:44px; flex:0 0 44px; text-align:center; border-radius:10px; background:var(--pa-teal-100); color:var(--pa-teal-900); padding:4px 0; line-height:1.1 }
.pa-day-w{ font-size:11px; font-weight:600 } .pa-day-d{ font-size:16px; font-weight:800 }
.pa-nx-s{ color:var(--pa-ink); font-weight:600 }
/* the phone */
body.phone .pa-cols{ gap:16px }
body.phone .pa-col{ gap:16px }
body.phone .pa-stack{ gap:16px }
body.phone .pa-tabs.pa-stick{ background:var(--page-bg); padding-top:8px; padding-bottom:8px }
body.phone .pa-band-mid{ flex:1 1 100% }
body.phone .pa .pa-gapchip{ min-height:44px }
body.phone .pa-bigs3{ padding:16px 16px 8px; gap:8px }
body.phone .pa-chartwrap{ padding:8px 16px 16px }
body.phone .pa-nx, body.phone .pa-sub{ padding-left:16px; padding-right:16px }
body.phone .pa-nx{ min-height:56px }
/* the Properties list. Session 336: its own 1480 cap is gone; it sits in the four core lists' one container (lists.css,
   #page.core-page). Columns sized to what they hold, the name and client next to the address, the region whole (it was cut
   to "Central Austin..." at 1440); what is left over stays empty at the row's end.
   (.lp.lp-pr: lists.css loads after this file and its .lp-pr widths won at equal weight, session 318's included) */
.lp.lp-pr .lp-thead, .lp.lp-pr .lp-tr{ grid-template-columns:minmax(220px, 320px) minmax(180px, 280px) 190px 170px 80px 90px 130px; justify-content:start }   /* session 406: How it's booked */
.lp.lp-pr.st .lp-thead, .lp.lp-pr.st .lp-tr{ grid-template-columns:minmax(210px, 320px) minmax(170px, 280px) 190px 170px 80px 90px 96px 130px; justify-content:start }
/* Session 320, Part 2: the Missing info card's item lines (each a link), the filter chip, the phone's chips and card line.
   The lines follow the region box's rows beside it (.lp-rg): the name, then the count. */
.lp.lp-pr .pr-mis{ display:flex; flex-direction:column; gap:4px }
.lp.lp-pr .pr-mi{ all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center;
  font-size:13px; padding:4px 8px; margin:0 -8px; border-radius:8px; color:var(--b-warn-ink); min-height:28px }
.lp.lp-pr .pr-mi span{ text-decoration:underline; text-underline-offset:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lp.lp-pr .pr-mi b{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--b-ink) }
.lp.lp-pr .pr-mi:hover{ background:var(--b-warn-bg, #fdf3e6) }
.lp.lp-pr .pr-mi[aria-pressed="true"]{ background:var(--b-warn-bg, #fdf3e6); box-shadow:inset 0 0 0 1.5px var(--orange) }
.lp.lp-pr .pr-mi:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.lp.lp-pr .pr-mis-ph{ display:none }
.lp.lp-pr .pr-cmiss{ margin-top:6px; font-size:12.5px; color:var(--b-warn-ink); line-height:1.4 }
@media (max-width:760px){
  .lp.lp-pr .pr-mis-ph{ display:block; margin-top:-8px }
  .lp.lp-pr .pr-mis-ph .pr-mis{ flex-direction:row; flex-wrap:wrap; gap:8px }
  .lp.lp-pr .pr-mis-ph .pr-mi{ margin:0; background:#fff; box-shadow:var(--b-shadow-card); padding:8px 12px; min-height:44px; gap:10px }
}

/* ============================================================
   Session 321: a Quality Check's own page (#qc/<id>, qc-page.js), session 318's design system: the hero with the address
   first, the grade as a big number, the two pills and the actions; then the review (qc.js), the client report's pages, the
   Photos card and the sends. The content width is the property page's (--pa-wrap), centred.
   ============================================================ */
.qcp-wrap{ max-width:var(--pa-wrap); margin:0 auto; min-width:0 }
.qcp-hero{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pills grade" "addr grade" "vals vals" "btns btns" "msg msg" }
.qcp-hero > .qcp-grade{ grid-area:grade; align-self:start; text-align:right }
.qcp-hero > .qcp-actmsg{ grid-area:msg }
.qcp-gn{ font-size:72px; font-weight:800; line-height:.95; letter-spacing:-0.04em; color:#fff }
.qcp-gn.qcp-gnil{ display:none }
.qcp-gl{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.72); margin-top:6px }
.qcp-under{ margin:12px 0 0 48px }   /* session 322: Property and Client as labelled values (.pa-vals), no middle dot */
.qcp-none{ color:rgba(255,255,255,.6); font-weight:500 }
.pa .pa-btn:disabled{ opacity:.5; cursor:default }
.qcp-actmsg{ font-size:13.5px; color:var(--pa-teal-300); min-height:0 }
.qcp-actmsg:empty{ display:none }
.pa .qcp-actmsg a{ color:#fff; text-decoration:underline }
.qcp-actmsg.qcp-bad{ color:var(--pa-yellow) }
.qcp-band .qcp-bt{ flex:1; min-width:0 }
/* the review inside the page: its own title and links are the hero's now; its score box stays (Change score) */
.qcp .qcp-body{ max-width:none; width:100%; margin:0; padding:0 }   /* .qc centres itself; in this flex column it would shrink to its content */
.qcp-body .qcr-head .qcr-hl{ display:none }
.qcp-body .qcr-head{ justify-content:flex-start }
.qcp-prev .pa-ch{ justify-content:space-between }
.qcp-upd{ font-size:13px; font-weight:600; color:var(--pa-amber-text) }
.qcp-pages{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:20px; background:var(--pa-page); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.qcp-pages.qcp-stale{ opacity:.55 }
.qcp-page{ width:100%; max-width:816px; height:auto; background:#fff; box-shadow:0 2px 10px rgba(14,54,59,.14); border-radius:4px }
.qcp-tw{ overflow-x:auto }
.qcp-tbl{ width:100%; margin:0 }
.qcp-tbl td.qcp-w{ white-space:normal; overflow-wrap:anywhere }
.qcp-note p{ margin:6px 0 0; white-space:pre-wrap }
#qcpPhotosSlot .ph-card{ margin:0 }
body.phone .qcp-hero{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pills grade" "addr addr" "vals vals" "btns btns" "msg msg" }
body.phone .qcp-gn{ font-size:52px }
body.phone .qcp-under{ margin-left:0 }
body.phone .qcp-pages{ padding:10px }

/* ============================================================
   Session 322: the QC page round 2. The section bar sticks under the top bar as the property page's tabs do (.pa-tabs.pa-stick):
   Notes, Review, Client report, Photos (n), Sends. The Notes card. The photo tags as colour-coded pills (--pa-tag-* tokens),
   on each photo and as the filter row above the grid. The Settings > Quality sentence box.
   ============================================================ */
.qcp-bar{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; min-height:var(--pa-secbar-h); align-items:center }   /* .pa-tabs.pa-stick: the property page's own bar */
.qcp-bar::-webkit-scrollbar{ display:none }
.qcp-sec{ flex-shrink:0; white-space:nowrap }
.qcp-sec:focus-visible{ outline:2px solid var(--pa-teal-300, #6FD5D4); outline-offset:-2px }
.qcp-notes .pa-ct .pa-cs{ display:inline; font-weight:600 }
.qcp-nadd{ display:grid; gap:6px; margin-top:12px; max-width:720px }
.qcp-nadd textarea{ font-size:16px }
#qcpNotes, #qcAppt, #qcpPrev, #qcPhotos, #qcpSends{ scroll-margin-top:calc(var(--hdrH) + var(--bandH) + var(--pa-secbar-h) + 12px) }
body.phone .qcp-sec{ padding:9px 10px }

.pa-tagpill{ display:inline-flex; align-items:center; gap:6px; min-height:var(--pa-tagpill-h); padding:0 12px; border-radius:999px; border:0; font:700 13px var(--ui-font);
  background:var(--pa-tag-custom-bg); color:var(--pa-tag-custom-fg); cursor:pointer; white-space:nowrap }
.pa-tagpill.t-after{ background:var(--pa-tag-after-bg); color:var(--pa-tag-after-fg) }
.pa-tagpill.t-before{ background:var(--pa-tag-before-bg); color:var(--pa-tag-before-fg) }
.pa-tagpill.t-damage{ background:var(--pa-tag-damage-bg); color:var(--pa-tag-damage-fg) }
.pa-tagpill.t-maintenance{ background:var(--pa-tag-maintenance-bg); color:var(--pa-tag-maintenance-fg) }
.pa-tagpill.t-supplies{ background:var(--pa-tag-supplies-bg); color:var(--pa-tag-supplies-fg) }
.pa-tagpill.t-left-behind{ background:var(--pa-tag-left-behind-bg); color:var(--pa-tag-left-behind-fg) }
.pa-tagpill.t-coaching{ background:var(--pa-tag-coaching-bg); color:var(--pa-tag-coaching-fg) }
.pa-tagpill.t-none{ background:#fff; color:var(--pa-grey-700, #4D545A); box-shadow:inset 0 0 0 1px #C9D0D4 }
.pa-tagpill.t-all{ background:#fff; color:var(--pa-ink, #16181A); box-shadow:inset 0 0 0 1px #C9D0D4 }
.pa-tagpill.on{ box-shadow:inset 0 0 0 2px var(--pa-ink, #16181A) }
.pa-tagpill:focus-visible{ outline:2px solid var(--pa-teal-300, #6FD5D4); outline-offset:2px }
.ph-tag.pa-tagpill{ border:0; min-height:var(--pa-tagpill-h); padding:0 12px; overflow-wrap:normal }
.ph-tag.pa-tagpill.none{ border:0 }
.ph-tagrow{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 10px }
.ph-tagrow[hidden]{ display:none }
.ph-opt b.pa-tagpill{ cursor:inherit; align-self:flex-start }
.qcs-text textarea{ width:100%; min-width:260px; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:6px 8px; font:16px var(--ui-font) }

/* Session 322: the property page's "For the next QC" card. */
.pa-nqnext{ margin-bottom:8px }
.pa-nq{ border-top:1px solid var(--pa-line-soft, #EDF0F2); padding:8px 0; display:grid; gap:2px }
.pa-nqt{ font-weight:700; overflow-wrap:anywhere }
.pa-nqadd{ display:grid; gap:6px; margin-top:10px }
.pa-nqadd textarea{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:8px 10px; font:16px var(--ui-font); resize:vertical }
.pa-nqb{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
/* Session 323: the card's body had no side padding (its text touched the card's edge); 20px as the other cards' rows. */
#pa-card-nextqc #paNqList{ padding:10px 20px 0 }
#pa-card-nextqc .pa-nqadd{ padding:0 20px 18px }
body.phone #pa-card-nextqc #paNqList{ padding:10px 16px 0 }
body.phone #pa-card-nextqc .pa-nqadd{ padding:0 16px 16px }
/* Session 323: Remove on an open note, and its reason box in place. */
.pa .pa-btn.pa-sm{ height:32px; padding:0 12px; font-size:13px }
.pa-nqrm{ margin-top:4px }
.pa-nqrm-open{ display:grid; gap:6px; background:var(--pa-amber-bg, #FFF8E6); border-radius:8px; padding:8px 10px }
.pa-nqrm textarea{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:8px 10px; font:16px var(--ui-font); resize:vertical }
body.phone .pa .pa-btn.pa-sm{ height:44px }

/* Session 324: the Appointment foundation (appointment-foundation.js), in the property page's card style (--pa-* tokens). */
.af-wrap{ margin:0 0 var(--pa-gap, 16px) }
.af-hr{ margin-left:auto }
.af-tag{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; margin-left:8px; white-space:nowrap; vertical-align:2px }
.af-tag-resort{ background:var(--pa-grey, #F1F3F4); color:var(--pa-text) }
.af-tag-prop{ background:var(--pa-teal-100); color:var(--pa-teal-900) }
.af-tag-office{ background:#EEF0FF; color:#2E3A8C }
.af-tag-cleaner, .af-tag-wait{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.af-tag-warn{ background:var(--pa-amber-bg); color:var(--pa-amber-text) }
.af-sub{ display:block; margin-top:2px }
.af-lines{ padding:4px 0 8px }
.af-row{ display:grid; gap:16px; align-items:start; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.af-3 .af-row{ grid-template-columns:minmax(0,1fr) 190px 190px }
.af-2 .af-row{ grid-template-columns:minmax(0,1fr) 190px }
.af-row.af-rh{ border-top:0; font-size:12.5px; font-weight:600; color:var(--pa-muted); padding-top:8px; padding-bottom:4px }
.af-row.af-exp{ background:var(--pa-page, #F7F8F9); border-top:1px dashed var(--pa-line) }
.af-row.af-total{ border-top:2px solid var(--pa-line) }
.af-r{ text-align:right }
.af-name b{ color:var(--pa-ink) }
.af-cell{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right }
.af-amtro{ font-weight:600; color:var(--pa-ink) }
.af-none{ color:var(--pa-muted); font-weight:500 }
.pa .af-amt{ font-family:inherit; font-size:14px; font-weight:700; color:var(--pa-teal-600); background:none; border:1px dashed transparent; border-radius:8px; padding:4px 8px; cursor:pointer }
.pa .af-amt:hover, .pa .af-amt:focus{ border-color:var(--pa-teal-300); background:var(--pa-teal-100) }
.af-says{ font-size:12px; font-weight:600; color:var(--pa-amber-text); background:var(--pa-amber-bg); border-radius:6px; padding:2px 6px }
.af-edit{ display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:170px }
.af-dollar{ display:flex; align-items:center; gap:4px; border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-inp); height:40px; padding:0 10px; background:#fff; font-weight:600 }
.af-dollar:focus-within{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.af-dollar input{ border:0; outline:0; font:inherit; font-size:16px; width:100%; min-width:0; background:transparent }
.af-ebtns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.af-acts{ display:inline-flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.af-addf, .af-aoform{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; align-items:end }
.af-kvr{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right }
.af-hist{ display:flex; flex-direction:column }
.af-hrow{ display:grid; grid-template-columns:120px 130px minmax(0,1fr); gap:12px; padding:8px 0; border-top:1px solid var(--pa-line-soft); font-size:13.5px }
.af-hrow:first-child{ border-top:0 }
.af-hwhen, .af-hwho{ color:var(--pa-muted) }
.af-hwhat{ overflow-wrap:anywhere }
.af-set{ display:flex; flex-direction:column }
.af-srow{ display:grid; grid-template-columns:minmax(0,1.4fr) 110px 110px 110px minmax(200px,1fr); gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--pa-line-soft) }
.af-srow.af-srh{ border-top:0; font-size:12.5px; font-weight:600; color:var(--pa-muted) }
.af-srow.af-off{ opacity:.7 }
.af-rn{ padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.af-rn:first-child{ border-top:0 }
.af-rnt{ white-space:pre-wrap; overflow-wrap:anywhere; color:var(--pa-ink) }
.af-rn-done .af-rnt{ color:var(--pa-muted) }
.af-rnf{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px }
.af-rnf .pa-cs{ margin-right:auto }
.af-mglist{ display:flex; flex-direction:column; gap:6px; margin:10px 0 }
.af-mgpick{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; font-family:inherit; font-size:14px; background:#fff; border:1px solid var(--pa-input-line); border-radius:10px; padding:8px 12px; cursor:pointer }
.af-mgpick:hover{ border-color:var(--pa-teal-300); background:var(--pa-teal-100) }
.af-access{ margin-bottom:12px }
.af-acnotes{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px }
.af-ta{ width:100%; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:8px 10px; font:16px var(--ui-font); resize:vertical }
.af-code{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--pa-line-soft, #EDF0F2) }
.af-codefoot{ grid-column:1 / -1 }
.af-hidden{ letter-spacing:2px; color:var(--pa-muted) }
.af-codeval{ font-weight:700; font-family:ui-monospace, Menlo, monospace }
.af-codeadd{ display:grid; grid-template-columns:140px minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:10px }
.af-rbh{ display:flex; align-items:center; gap:12px; justify-content:space-between }
.af-rblist{ display:flex; flex-direction:column; margin-top:10px }
.af-rbrow{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--pa-line-soft); color:inherit }
.pa .af-rbrow:hover{ text-decoration:none; background:var(--pa-page) }
.af-clrow{ display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid var(--pa-line-soft, #EDF0F2) }
.af-clpick{ display:flex; gap:6px; flex-wrap:wrap; align-items:center }
body.phone .af-3 .af-row{ grid-template-columns:minmax(0,1fr) 92px 92px; gap:8px; padding:10px 14px }
body.phone .af-2 .af-row{ grid-template-columns:minmax(0,1fr) 100px; gap:8px; padding:10px 14px }
body.phone .af-hrow{ grid-template-columns:1fr; gap:2px }
body.phone .af-srow{ grid-template-columns:1fr 1fr; }
body.phone .af-codeadd{ grid-template-columns:1fr }

/* ---------- Session 325: the Appointment page, office view (appointment-page.js) ----------
   The approved drawing's stylesheet (docs/design/mh-appointment-office-view-v2.html) on the --pa-* tokens: content 1480 wide,
   centred; main padding 24px 40px 64px; 22px between cards; cards radius 14 with the property page's shadow; card header
   16px 20px with the 40px icon tile; the top band grid minmax(0,1fr) 440px, gap 28px 36px, padding 28px 32px 26px, radius
   18; the address 44px 800; the timeline 6 equal columns under a hairline; two-pane cards with a 1px divider; photos 6
   columns, 14px gap, 4:3; Checklist and Inventory side by side; the services lines minmax(0,1fr) 140px 140px. */
#page.ap-page{ padding:calc(var(--hdrH) + var(--bandH)) 0 0; max-width:none; margin:0; box-sizing:border-box; background:var(--pa-page); min-height:100vh }
.ap-wrap{ padding:var(--ap-pad) }
.pa.ap{ max-width:var(--pa-wrap); margin:0 auto; gap:var(--pa-gap); font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:var(--pa-text) }
.pa-red{ background:var(--pa-red-bg); color:var(--pa-red-text) }
.pa-purple{ background:var(--pa-purple-bg); color:var(--pa-purple-text) }
.ap-crumb{ align-items:center }
/* the top band */
.ap-top{ background:linear-gradient(135deg, var(--pa-teal-900), var(--pa-teal-950)); border-radius:var(--pa-radius-hero); box-shadow:var(--pa-shadow-hero); color:#fff;
  padding:var(--ap-top-pad); display:grid; grid-template-columns:minmax(0,1fr) var(--ap-top-side); gap:var(--ap-top-gap) }
.ap-topl{ display:flex; flex-direction:column; gap:18px; min-width:0 }
.ap .ap-addr{ display:inline-flex; align-items:flex-start; gap:14px; color:#fff; text-decoration:none }
.ap a.ap-addr:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px }
.ap-addr .ap-pin{ margin-top:6px; flex:0 0 34px }
.ap-h1{ margin:0; font-size:var(--ap-h1); font-weight:800; letter-spacing:-0.035em; line-height:1.05; color:#fff; overflow-wrap:anywhere }
.ap-h1.ap-noaddr{ color:rgba(255,255,255,.72) }
.ap-sub{ margin:10px 0 0 48px; display:flex; flex-direction:column; gap:4px }
.ap-svc{ font-size:22px; font-weight:600; color:var(--pa-teal-300); letter-spacing:-0.015em }
.ap-city{ font-size:13.5px; font-weight:600; color:rgba(255,255,255,.72) }
.ap-btns{ display:flex; gap:10px; flex-wrap:wrap }
.ap-facts{ display:flex; gap:28px; flex-wrap:wrap }
.ap .pa-hv.ap-dim{ color:rgba(255,255,255,.6) }
.ap-fin{ background:#fff; border-radius:var(--pa-radius-card); overflow:hidden; align-self:start; color:var(--pa-text) }
.ap-finh{ padding:18px 20px 14px }
.ap-k{ font-weight:700; color:var(--pa-teal-600) }
.ap-finrow{ display:flex; align-items:baseline; gap:10px; margin-top:4px; flex-wrap:wrap }
.ap-finbig{ font-size:var(--ap-fin-big); font-weight:800; color:var(--pa-ink); letter-spacing:-0.04em; line-height:1 }
.ap-finline{ margin-top:6px }
.ap-fin .pa-kv{ border-top:1px solid var(--pa-line-soft) }
.ap-steps{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(var(--ap-steps),minmax(0,1fr)); gap:16px; border-top:1px solid rgba(255,255,255,.16); padding-top:20px }
.ap-step{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.ap-dot{ width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800 }
.ap-dot.dn{ background:var(--pa-teal-300); color:var(--pa-teal-950) }
.ap-dot.cur{ background:var(--pa-yellow); color:var(--pa-teal-950) }
.ap-dot.fut{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.3) }
.ap-sl{ font-size:13.5px; font-weight:700; color:#fff }
.ap-sw{ font-size:12px; color:rgba(255,255,255,.66); font-weight:500; overflow-wrap:anywhere }
/* the sticky tab bar: sticks under the platform's own top bar */
.ap-anchor{ height:0 }
.ap-tabs{ position:sticky; top:calc(var(--hdrH) + var(--bandH)); z-index:15; padding:6px; display:flex; gap:2px; flex-wrap:wrap; align-items:center }
.ap .ap-tabadd{ margin-left:auto }
.ap-body{ display:flex; flex-direction:column; gap:var(--pa-gap); min-height:calc(100vh - var(--hdrH) - var(--bandH) - 80px) }
/* Session 326: Needs you now (replaces the to-do bar). The drawing: a 1px warm border, a warm header, rows 120px 1fr auto. */
.ap-now{ border:1px solid var(--pa-amber-line); overflow:hidden }
.ap-nowh{ background:var(--pa-amber-soft); border-bottom-color:var(--ap-now-headline) }
.ap .ap-nowic{ background:var(--pa-yellow); color:var(--pa-teal-900) }
.ap-nrow.ap-nowrow{ align-items:center }
.ap-nowquiet{ display:flex; align-items:center; gap:8px; padding:4px 2px; color:var(--pa-muted); font-size:13px; font-weight:600 }
.ap-nowquiet svg{ color:var(--pa-green-dot) }
/* The stay: 4 equal columns with 1px dividers; This home: 5 equal links under a 1px rule on a light background */
.ap-stay{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) }
.ap-stay > div{ padding:18px 20px; display:flex; flex-direction:column; gap:6px; min-width:0 }
.ap-stay > div + div{ border-left:1px solid var(--pa-line) }
.ap-stay > .ap-stayhl{ background:var(--pa-amber-soft) }
.ap-sk{ font-size:12.5px; font-weight:700; color:var(--pa-teal-600) }
.ap-sv{ font-size:var(--ap-stay-v); font-weight:800; color:var(--pa-ink); letter-spacing:-0.03em; line-height:1.15; overflow-wrap:anywhere }
.ap-sv.ap-svna{ color:var(--pa-muted) }
.ap-arr{ display:flex; flex-direction:column; gap:6px }
.ap-arr .pa-inp{ max-width:200px }
.ap-home{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--pa-line); background:var(--ap-home-bg); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.ap .ap-home > a{ padding:14px 20px; display:flex; flex-direction:column; gap:4px; min-width:0; color:inherit; text-decoration:none }
.ap .ap-home > a:hover .ap-hv2{ text-decoration:underline }
.ap-home > * + *{ border-left:1px solid var(--ap-home-line) }
.ap-home .pa-pill{ align-self:flex-start; white-space:normal }
.ap-hk{ font-size:12px; font-weight:700; color:var(--pa-muted) }
.ap-hv2{ font-size:15px; font-weight:700; color:var(--pa-ink); overflow-wrap:anywhere }
/* A card folded to one line: its header only, with Open (parts drawing 1; Getting in folded, the main drawing) */
.ap-chf{ border-bottom:0 }
.ap .ap-open{ margin-left:auto }
.ap-okf{ margin-left:16px }
/* the top band's time card */
.ap-finbig.ap-finna{ font-size:24px; color:var(--pa-muted) }
.ap .ap-linkbtn{ font:inherit; font-weight:600; color:var(--pa-teal-600); background:none; border:0; padding:0; cursor:pointer; text-align:right }
.ap .ap-linkbtn:hover{ text-decoration:underline }
.ap-kvsub{ font-weight:500; text-align:right }
.ap-fin .pa-kv .pa-v{ text-align:right }
.ap .ap-hvlink{ color:var(--pa-teal-300) }
/* "Usually takes here", opened (parts drawing 5) */
.ap-ut{ display:grid; grid-template-columns:var(--ap-ut-cols); align-items:center; gap:16px; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.ap-ut.ap-utskip{ background:var(--ap-skip-bg) }
.ap-ut.ap-uttot{ border-top:1px solid var(--pa-line) }
.ap-utact{ justify-self:end }
.ap-utfoot{ padding:12px 20px 16px }
.ap-approx{ font-weight:500 }
/* segmented choices (parts drawing 2): .opt */
.ap-seg{ display:flex; gap:6px; flex-wrap:wrap }
.ap .ap-opt{ font-family:inherit; font-size:13px; font-weight:600; border-radius:var(--pa-radius-btn); padding:8px 12px; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-text); cursor:pointer }
.ap .ap-opt.on{ background:var(--pa-teal-900); border-color:var(--pa-teal-900); color:#fff }
.ap .ap-opt:disabled{ cursor:default; opacity:.7 }
.ap-segs{ display:flex; flex-direction:column; gap:14px }
.ap-formh{ display:flex; align-items:center; gap:10px; color:var(--pa-ink); font-size:15px }
.ap-remlbl{ display:flex; flex-direction:column; gap:6px; margin-top:10px; max-width:360px }
/* Notes and reminders */
.ap-sec{ padding:12px 20px 4px; font-size:12.5px; font-weight:700; color:var(--pa-teal-600); border-top:1px solid var(--pa-line-soft); padding-top:14px }
.ap-secempty{ padding-top:8px }
.ap-nrow.ap-ddue{ background:var(--pa-red-bg); align-items:center }
.ap-nt.ap-es{ font-weight:500; color:var(--pa-text) }
.ap .ap-pillwrap{ white-space:normal; text-align:left; max-width:280px }
/* the services lines: tax */
.ap-taxnote{ font-weight:500 }
.ap .ap-tot{ font-size:16px }
/* cards */
.ap-card{ min-width:0 }
.ap-ch{ flex-wrap:wrap }
.ap-cht{ min-width:0 }
.ap-chr{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ap-chr .pa-ed{ margin-left:0 }
.ap-hbtns{ display:flex; gap:8px; flex-wrap:wrap }
.ap .pa-btn.pa-sm{ height:34px; padding:0 12px; font-size:13px }
.ap-flash{ box-shadow:0 0 0 2px var(--pa-teal-300), var(--pa-shadow-card) }
.ap-half{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
.ap-half > .ap-pane + .ap-pane{ border-left:1px solid var(--pa-line) }
.ap-pane{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.ap-person{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.ap-av{ width:var(--ap-av); height:var(--ap-av); border-radius:999px; background:var(--pa-teal-100); color:var(--pa-teal-900); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex:0 0 var(--ap-av) }
.ap-pn{ min-width:0; flex:1 }
.ap .ap-pname{ font-weight:700; font-size:16px; overflow-wrap:anywhere }
.ap-pbtns{ display:flex; gap:8px; flex-wrap:wrap; flex-basis:100%; padding-left:calc(var(--ap-av) + 14px) }
.ap-big3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.ap-bigt{ font-size:var(--ap-big); font-weight:800; color:var(--pa-ink); letter-spacing:-0.035em; line-height:1 }
.ap-bigt.ap-na{ font-size:15px; font-weight:600; letter-spacing:0; line-height:30px; color:var(--pa-muted) }
.ap-chg{ display:flex; align-items:flex-start; gap:12px }
.ap-nt{ color:var(--pa-ink); font-weight:600; overflow-wrap:anywhere; white-space:pre-line }
.ap .ap-link{ font-weight:600; font-size:13px }
.ap-right{ margin-left:auto }
.ap-empty{ padding:2px 0 }
.ap-b6{ font-weight:600 }
.ap-row8{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
/* Getting in */
.ap-instr{ color:var(--pa-ink); font-weight:500; font-size:15px; white-space:pre-line; overflow-wrap:anywhere }
.ap-instrb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.ap-codes{ display:flex; flex-direction:column; border:1px solid var(--pa-line-soft); border-radius:12px }
.ap-irow{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--pa-line-soft); flex-wrap:wrap }
.ap-codes > .ap-irow:first-child{ border-top:0 }
.ap-irow .pa-btn{ margin-left:auto }
.ap-ilbl{ min-width:120px }
.ap-dots{ font-weight:800; letter-spacing:3px; color:var(--pa-ink) }
.ap-codev{ font-weight:700; color:var(--pa-ink); overflow-wrap:anywhere }
.ap-ok{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:var(--pa-green-bg); color:var(--pa-green-text); font-weight:700 }
.ap-trouble{ border:1px solid var(--pa-amber-line); background:var(--pa-amber-soft); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px }
.ap-wait{ border:1px dashed var(--pa-input-line); border-radius:12px; padding:14px 16px; color:var(--pa-muted); font-size:13.5px; background:var(--pa-page) }
.ap-waitpad{ margin:18px 20px }
/* Photos */
.ap-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 20px 4px }
.ap .ap-chip{ font-family:inherit; font-size:13px; font-weight:600; border-radius:999px; padding:6px 12px; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-text); cursor:pointer }
.ap .ap-chip.on{ background:var(--pa-teal-900); border-color:var(--pa-teal-900); color:#fff }
.ap-grid6{ display:grid; grid-template-columns:repeat(var(--ap-photo-cols),minmax(0,1fr)); gap:var(--ap-photo-gap); padding:14px 20px 18px }
.ap-ph{ display:flex; flex-direction:column; gap:6px; min-width:0; position:relative }
.ap .ap-thumb{ display:block; width:100%; aspect-ratio:4/3; border-radius:10px; background:var(--ap-thumb-bg); position:relative; overflow:hidden; border:0; padding:0; cursor:zoom-in }
.ap-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.ap .ap-t.pa-tagpill{ position:absolute; left:8px; top:8px; min-height:0; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; z-index:1 }
.ap-thumbw{ position:relative }
.ap-tm{ position:absolute; right:8px; bottom:8px; font-size:11px; font-weight:700; color:#fff; background:rgba(14,54,59,.6); padding:1px 6px; border-radius:6px }
/* Session 346 (brief A2): a cleaner's photo older than her check-in on the visit */
.ap-early{ margin:6px 0 0; font-size:12px; font-weight:700; color:var(--pa-red-text); background:var(--pa-red-bg); border-radius:6px; padding:2px 8px; display:inline-block }
.ap-tg{ display:flex; gap:6px; flex-wrap:wrap }
.ap .ap-tog{ font-family:inherit; font-size:11.5px; font-weight:600; border-radius:999px; padding:2px 9px; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-muted); cursor:pointer }
.ap .ap-tog.on{ background:var(--pa-teal-900); border-color:var(--pa-teal-900); color:#fff }
.ap-phfoot{ display:flex; align-items:center; gap:16px; padding:0 20px 18px; flex-wrap:wrap }
.ap-prog-up, .ap-zipmsg{ margin:0 20px }
/* Notes and the found rows */
.ap-nrow{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:16px; align-items:start; padding:14px 20px; border-top:1px solid var(--pa-line-soft) }
.ap-nrow.first{ border-top:0 }
.ap-nrow.ap-hl{ background:var(--pa-amber-soft) }
.ap-nrow > .pa-pill{ justify-self:start; white-space:normal }
.ap-ncell{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.ap-acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center }
.ap-form{ padding:16px 20px; border-bottom:1px solid var(--pa-line); display:flex; flex-direction:column; gap:8px; background:var(--pa-page) }
.ap-inrow{ padding:0 20px 14px; display:flex; flex-direction:column; gap:8px }
.ap-formrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.ap .ap-ta{ width:100%; font-family:inherit; font-size:14px; border:1px solid var(--pa-input-line); border-radius:10px; padding:10px 12px; resize:vertical; color:var(--pa-ink); box-sizing:border-box }
.ap-reason{ display:flex; flex-direction:column; gap:6px }
.ap-reason .pa-inp{ max-width:520px }
.ap-fphotos, .ap-pick{ display:flex; gap:8px; flex-wrap:wrap }
.ap .ap-fthumb{ width:96px; aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:0; padding:0; background:var(--ap-thumb-bg); cursor:pointer }
.ap .ap-fthumb.on{ box-shadow:0 0 0 3px var(--pa-teal-600) }
.ap-fthumb img{ width:100%; height:100%; object-fit:cover; display:block }
.ap-otbar{ display:flex }
.ap-otbox{ border:1px solid var(--pa-input-line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:#fff }
.ap-otl{ font-weight:700; color:var(--pa-ink) }
.ap-otmode{ color:var(--pa-amber-text); font-weight:600 }
.ap-sent{ display:flex; flex-direction:column; gap:4px; border-left:3px solid var(--pa-line); padding-left:10px }
.ap-sentb{ color:var(--pa-ink); font-size:13.5px; overflow-wrap:anywhere }
/* Checklist and Inventory side by side */
.ap-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pa-gap); align-items:start }
/* Services and add-ons */
.ap-ln{ display:grid; grid-template-columns:minmax(0,1fr) var(--ap-amt-col) var(--ap-amt-col); align-items:center; gap:16px; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.ap-ln.ap-ln2{ grid-template-columns:minmax(0,1fr) var(--ap-amt-col) }
.ap-ln.ap-lnh{ border-top:0; padding-top:12px; padding-bottom:6px }
.ap-ln.first{ border-top:0 }
.ap-ln.ap-lnhl{ background:var(--ap-line-hl) }
.ap-ln.ap-lntot{ border-top:1px solid var(--pa-line) }
.ap-lnm{ color:var(--pa-ink); font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere }
.ap-lnsub{ flex-basis:100%; font-weight:450 }
.ap-ah{ font-size:12px; color:var(--pa-muted); font-weight:700; text-align:right }
.ap-cell{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0 }
.ap .ap-amt{ font-family:inherit; font-size:14px; font-weight:600; color:var(--pa-ink); background:none; border:0; border-bottom:1px dashed #9AA4AB; padding:2px 0; cursor:pointer }
.ap .ap-amt:hover{ color:var(--pa-teal-600); border-bottom-color:var(--pa-teal-600) }
.ap-amtro{ font-weight:600; color:var(--pa-ink) }
.ap-says{ font-size:11.5px; font-weight:700; color:var(--pa-amber-text) }
.ap-lnask{ grid-column:2 / -1; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.ap-lnedit{ padding:0 20px 12px }
.ap-editbox{ padding:12px; border:1px solid var(--pa-input-line); border-radius:12px; background:#fff; display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap }
.ap-addbox{ margin:0 20px 12px }
.ap-dollar{ display:inline-flex; align-items:center; gap:4px; font-weight:700 }
.ap-dollar input{ height:40px; width:180px; border:1px solid var(--pa-teal-600); border-radius:10px; padding:0 12px; font-family:inherit; font-size:15px; font-weight:700; color:var(--pa-ink) }
.ap .pa-btn.ap-quiet{ border:0; color:var(--pa-muted) }
.ap-lnfoot{ padding:0 20px 16px }
.ap-lnadd{ padding-bottom:4px }
.ap .ap-kv0{ padding-left:0; padding-right:0 }
/* Linked: one slim row */
.ap-linked{ padding:14px 20px; display:flex; gap:28px; flex-wrap:wrap; align-items:center }
.ap-lt{ font-size:15px }
.ap-li{ overflow-wrap:anywhere }
/* Change history */
.ap-hist{ padding:4px 20px 14px }
.ap-hrow{ display:grid; grid-template-columns:150px 160px minmax(0,1fr); gap:12px; padding:10px 0; border-top:1px solid var(--pa-line-soft); align-items:start }
.ap-hrow:first-child{ border-top:0 }
.ap-hwhen{ color:var(--pa-muted); font-size:13px; font-weight:600 }
.ap-hwho{ color:var(--pa-ink); font-weight:600; font-size:13px; overflow-wrap:anywhere }
.ap-hwhat{ overflow-wrap:anywhere }

/* narrower windows: the panes stack and nothing scrolls sideways */
@media (max-width: 1400px){ .ap-grid6{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (max-width: 1240px){ .ap-top{ grid-template-columns:minmax(0,1fr) } .ap-steps{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width: 1100px){
  .ap-half, .ap-two{ grid-template-columns:minmax(0,1fr) }
  .ap-half > .ap-pane + .ap-pane{ border-left:0; border-top:1px solid var(--pa-line) }
  .ap-grid6{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
body.phone .ap-wrap{ padding:12px 16px 48px }
body.phone .ap-top{ margin:0 -16px; border-radius:0; padding:20px 16px; gap:16px }
body.phone .ap-h1{ font-size:30px; letter-spacing:-0.03em; line-height:1.08 }
body.phone .ap-addr{ gap:8px } body.phone .ap-addr .ap-pin{ width:24px; height:24px; flex:0 0 24px; margin-top:4px }
body.phone .ap-sub{ margin:6px 0 0 32px }
body.phone .ap-svc{ font-size:18px }
body.phone .ap-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
body.phone .ap-btns .pa-go{ grid-column:1 / -1 }
body.phone .ap-btns .pa-btn{ height:46px; white-space:normal; text-align:center }
body.phone .ap-facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px }
body.phone .ap-steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
body.phone .ap-tabs{ background:var(--pa-page); box-shadow:none; padding:8px 16px; margin:0 -16px; flex-wrap:nowrap; overflow-x:auto; gap:6px; border-radius:0 }
body.phone .ap-tabs .pa-tab{ flex:0 0 auto; background:#fff; border:1px solid var(--pa-line); border-radius:999px; min-height:44px }
body.phone .ap-tabs .pa-tab.on{ background:var(--pa-teal-900); border-color:var(--pa-teal-900) }
body.phone .ap-tabadd{ flex:0 0 auto; min-height:44px }
body.phone .ap-half, body.phone .ap-two{ grid-template-columns:minmax(0,1fr) }
body.phone .ap-half > .ap-pane + .ap-pane{ border-left:0; border-top:1px solid var(--pa-line) }
body.phone .ap-pane{ padding:16px }
body.phone .ap-big3{ gap:8px }
body.phone .ap-bigt{ font-size:22px }
body.phone .ap-pbtns{ padding-left:0 }
body.phone .ap-grid6{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 16px 16px; gap:10px }
body.phone .ap-nrow{ grid-template-columns:minmax(0,1fr); gap:8px; padding:14px 16px }
body.phone .ap-acts{ justify-content:flex-start }
body.phone .ap-ln{ grid-template-columns:minmax(0,1fr) 88px 88px; gap:8px; padding:12px 16px }
body.phone .ap-ln.ap-ln2{ grid-template-columns:minmax(0,1fr) 96px }
body.phone .ap-lnask{ grid-column:1 / -1; justify-content:flex-start }
body.phone .ap-dollar input{ width:140px }
body.phone .ap-hrow{ grid-template-columns:minmax(0,1fr); gap:2px }
body.phone .ap-linked{ gap:10px 20px }
body.phone .ap .pa-btn, body.phone .ap .ap-chip, body.phone .ap .ap-tog{ min-height:44px }
body.phone .ap .ap-tog{ padding:6px 12px }
body.phone .ap-irow{ padding:12px 14px }
/* Session 326: narrower windows and the phone for version 3 */
@media (max-width: 1240px){ .ap-home{ grid-template-columns:repeat(3,minmax(0,1fr)) } .ap-home > :nth-child(4){ border-left:0 } }
@media (max-width: 1100px){ .ap-stay{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ap-stay > :nth-child(3){ border-left:0 } .ap-stay > :nth-child(n+3){ border-top:1px solid var(--pa-line) } }
body.phone .ap-stay, body.phone .ap-home{ grid-template-columns:minmax(0,1fr) }
body.phone .ap-stay > div + div, body.phone .ap-home > * + *{ border-left:0; border-top:1px solid var(--pa-line) }
/* Session 350: a Residential visit's This visit: five across on top (Arrive, Finish by, Estimated time, Owner home today, How often), four links below */
.ap-stay.ap-v5{ grid-template-columns:repeat(5,minmax(0,1fr)) }
.ap-home.ap-v4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.ap-v5 .ap-sv .pa-pill, .ap-v5 .pa-cs .pa-pill{ vertical-align:middle }
.ap-v5 > div > .pa-pill{ align-self:flex-start }   /* session 351: How often's Not answered pill hugs its words (it stretched across the box) */
@media (max-width: 1240px){ .ap-home.ap-v4{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ap-home.ap-v4 > :nth-child(3){ border-left:0 } .ap-home.ap-v4 > :nth-child(n+3){ border-top:1px solid var(--ap-home-line) } .ap-home.ap-v4 > :nth-child(4){ border-left:1px solid var(--ap-home-line) } }
@media (max-width: 1100px){ .ap-stay.ap-v5{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ap-stay.ap-v5 > :nth-child(odd){ border-left:0 } .ap-stay.ap-v5 > :nth-child(even){ border-left:1px solid var(--pa-line) } }
body.phone .ap-stay.ap-v5, body.phone .ap-home.ap-v4{ grid-template-columns:minmax(0,1fr) }
body.phone .ap-stay.ap-v5 > div, body.phone .ap-home.ap-v4 > *{ border-left:0 }
body.phone .ap-stay.ap-v5 > div + div, body.phone .ap-home.ap-v4 > * + *{ border-top:1px solid var(--pa-line) }
body.phone .ap-ut{ grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:12px 16px }
body.phone .ap-ut > :nth-child(2){ grid-column:1 / -1; order:3 }
body.phone .ap-okf{ margin-left:0 }
body.phone .ap-opt{ min-height:44px }
/* Settings > Appointments (parts drawing 3b), Settings > Services: sales tax (3a), a property's long-stay fee */
.aps-card{ max-width:860px; margin:14px 0 18px; font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif }
.aps-sec{ padding:14px 20px 14px; border-top:1px solid var(--pa-line-soft); display:flex; flex-direction:column; gap:12px }
.aps-sec:first-child{ border-top:0 }
.aps-st{ font-size:13px; font-weight:700; color:var(--pa-ink) }
.aps-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.aps-lbl{ min-width:var(--ap-lbl-w) }
.aps-num{ display:inline-flex; align-items:center; gap:6px }
.aps .aps-in, .stx-card .aps-in, .pls .aps-in{ height:var(--ap-num-h); margin:0; width:var(--ap-num-w); border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-btn); padding:0 12px; font-family:inherit; font-size:14px; font-weight:700; color:var(--pa-ink); box-sizing:border-box }
.aps-unit{ font-size:13px; color:var(--pa-muted); font-weight:600 }
.aps-note{ margin-top:-2px }
.aps-save{ display:flex; align-items:center; gap:12px; padding:14px 20px 18px; border-top:1px solid var(--pa-line-soft) }
.aps .ap-seg, .stx-card .ap-seg{ display:flex }
.aps .ap-opt{ font-family:inherit; font-size:13px; font-weight:600; border-radius:var(--pa-radius-btn); padding:8px 12px; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-text); cursor:pointer }
.aps .ap-opt.on{ background:var(--pa-teal-900); border-color:var(--pa-teal-900); color:#fff }
.svp-tax{ margin:0 0 18px }
.stx-card{ max-width:860px; font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif }
.stx-rate{ padding:16px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.stx-row{ display:grid; grid-template-columns:minmax(0,1fr) 140px 160px; align-items:center; gap:16px; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.stx-row.stx-h{ padding-top:8px; padding-bottom:8px }
.stx-row.stx-h .pa-cs{ font-weight:700 }
.stx-sw{ width:var(--ap-sw-w); height:var(--ap-sw-h); border-radius:99px; background:var(--pa-input-line); position:relative; border:0; padding:0; cursor:pointer }
.stx-sw::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:99px; background:#fff }
.stx-sw.on{ background:var(--pa-teal-600) } .stx-sw.on::after{ left:21px }
.stx-sw:disabled{ cursor:default; opacity:.7 }
.stx-foot{ padding:12px 20px 16px }
.pls{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px }
.pls-h{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap }
.pls-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* Session 327: Settings > Checklists, a property's Cleaning list, the visit's Checklist and Inventory, the Dashboard's
   "Switched to Deep Clean". The property page's --pa-* tokens; fields on the page, never a pop-up box. */
.ck{ max-width:1180px }
.s-settings.ck{ max-width:1180px }   /* the Settings pages are 760 wide; this one has four columns */
.ck-tabs{ margin:14px 0 16px }
.ck-card{ margin:0 0 16px; overflow:visible }
.ck-cht{ flex:1 1 auto; min-width:0 }
.ck-chr{ flex:0 0 auto; white-space:nowrap }
.ck-sum{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--pa-text) }
/* Session 328: Spanish to check in two groups, the checklist texts and the cleaner app's App words. */
.ck-esg{ border-top:1px solid var(--pa-line) }
.ck-est{ padding:14px 20px 4px; font-weight:700; color:var(--pa-ink); font-size:14.5px }
.ck-est .pa-cs{ font-weight:400; margin-left:6px }
.ck-esn{ padding:0 20px 14px }
.ck-row{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) 200px 200px; gap:14px; align-items:start; padding:11px 20px; border-top:1px solid var(--pa-line-soft); font-size:13.5px; color:var(--pa-ink) }
.ck-row.ck-row2{ grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) 200px }
.ck-row.ck-head{ font-size:12px; font-weight:600; color:var(--pa-muted); padding-top:9px; padding-bottom:9px }
.ck-row.ck-inh{ color:var(--pa-muted) }
/* session 340: the Deep Clean section in Settings > Checklists (its own list, grouped by area) */
.ck-card.ck-deep{ border:1px solid var(--pa-amber-line); }
.ck-card.ck-deep .pa-ch{ background:var(--pa-amber-soft); }
.ck-row.ck-sub{ grid-template-columns:1fr; padding-top:10px; padding-bottom:4px; color:var(--pa-amber-text); }
.ck-es{ color:var(--pa-text) }
.ck-tag{ margin-top:4px; font-size:11.5px; padding:2px 8px }
.ck-acts{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; align-items:center }
.ck-lk{ background:none; border:0; padding:5px 8px; font-family:inherit; font-size:13px; font-weight:600; color:var(--pa-teal-900); cursor:pointer; border-radius:var(--pa-radius-btn); min-height:32px }
.ck-lk:hover{ background:var(--pa-teal-100) }
.ck-lk:disabled{ color:var(--pa-muted); background:none; cursor:default }
.ck-form{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) 200px 200px; gap:10px 14px; align-items:center; padding:12px 20px; border-top:1px solid var(--pa-line-soft); background:var(--pa-teal-100) }
.ck-form .ck-msg{ grid-column:1 / -1 }
.ck-form.ck-rem{ grid-template-columns:minmax(0,1.25fr) minmax(0,1.45fr) 200px }
.ck-addf{ grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) 190px 190px auto }
.ck .ck-in, .ck-dash .ck-in{ height:38px; margin:0; width:100%; border:1px solid var(--pa-input-line); border-radius:var(--pa-radius-btn); padding:0 10px; font-family:inherit; font-size:13.5px; color:var(--pa-ink); background:#fff; box-sizing:border-box }
.ck-addline{ padding:8px 12px; border-top:1px solid var(--pa-line-soft) }
.ck-slots{ padding:10px 20px; border-top:1px solid var(--pa-line-soft) }
.ck-mode{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
/* session 329: Settings > Checklists > Required photos (the form: English, Spanish, Every visit or Chosen services, the services) */
.ck-form.ck-reqf{ grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) auto auto }
.ck-svcs{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px }
.ck-lk.ck-on{ background:var(--pa-teal-100); color:var(--pa-teal-900); box-shadow:inset 0 0 0 1px var(--pa-teal-700) }
.ck-pick{ display:grid; grid-template-columns:auto minmax(0,1fr) auto 260px; gap:10px 12px; align-items:center }
.ck-hits{ display:flex; flex-direction:column; padding:0 20px 12px }
.ck-hit{ text-align:left; background:none; border:0; border-top:1px solid var(--pa-line-soft); padding:9px 4px; font-family:inherit; font-size:13.5px; color:var(--pa-ink); cursor:pointer }
.ck-hit:hover{ background:var(--pa-teal-100) }
.ck-facts{ display:flex; gap:6px; flex-wrap:wrap }
.ck-tot{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px }
.ck-unk{ font-size:13px; color:var(--pa-amber-text); background:var(--pa-amber-bg); border-radius:var(--pa-radius-btn); padding:8px 12px }
.ck-cols{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px }
.ck-li{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--pa-line-soft); font-size:13.5px }
.ck-li .pa-pill{ font-size:11.5px; padding:2px 8px; white-space:normal; text-align:right }
.ck-sub{ font-weight:700; margin:8px 0 2px }
.ck-sub:first-child{ margin-top:0 }
.ck-note{ margin:-6px 0 14px }
.ck-dash .db-tdh{ align-items:flex-start }
.ck-drow{ display:grid; grid-template-columns:minmax(0,1.6fr) 120px 100px 200px minmax(0,1.4fr); gap:12px; align-items:center; padding:10px 18px; border-top:1px solid var(--pa-line-soft); font-size:13.5px }
.ck-drow.ck-dh{ font-size:12px; font-weight:600; color:var(--pa-muted) }
.ck-dhome{ font-weight:600 }
.ck-rev{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px }
.ap-ckbody{ display:flex; flex-direction:column; gap:0 }
.ap-cklist{ font-size:13.5px; color:var(--pa-text); padding-bottom:8px }
.ap-ckunk{ padding:0 0 8px }
.ap-ckrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:8px 0; border-top:1px solid var(--pa-line-soft); font-size:13.5px }
.ap-ckslots{ grid-column:1 / -1 }
/* session 329: "Photos: Batch" per cleaner on the Checklist card; the one supply list's rows with her answer */
.ap-ckmodes{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:10px 20px 0 }
.ap-invrow{ align-items:center; padding:6px 0 }
.ap-invrow .pa-v{ text-align:left }
body.phone .ck-row, body.phone .ck-form, body.phone .ck-row.ck-row2, body.phone .ck-addf, body.phone .ck-reqf, body.phone .ck-pick, body.phone .ck-cols, body.phone .ck-drow, body.phone .ck-rev{ grid-template-columns:minmax(0,1fr) }
body.phone .ck-row.ck-head, body.phone .ck-drow.ck-dh{ display:none }
body.phone .ck-acts{ justify-content:flex-start }

/* Session 328: the Staff page's new cleaner app (pilot) card (cleaner-office.js). */
.cp-head{ padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid #dfe3e6 }
.cp-t{ font-size:16px; font-weight:700 }
.cp-chip{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:#e9ecee; color:#4d545a; white-space:nowrap }
.cp-chip.cp-on{ background:#e2f4ee; color:#08513f }
.cp-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 20px; border-top:1px solid #dfe3e6; font-size:13.5px }
.cp-row:first-of-type{ border-top:0 }
.cp-k{ color:#6b747b; font-weight:600 }
.cp-v{ font-weight:600; text-align:right; overflow-wrap:anywhere }
.cp-seg{ display:inline-flex; gap:4px; background:#f2f4f5; border-radius:10px; padding:3px }
.cp-opt{ border:0; background:none; font-family:inherit; font-size:13px; font-weight:700; padding:6px 14px; border-radius:8px; cursor:pointer; color:#4d545a; min-height:32px }
.cp-opt.on{ background:#144d54; color:#fff }
/* session 329: Photos for this cleaner (three choices) wraps inside a narrow card instead of running sideways */
.cp-row .cp-seg{ flex-wrap:wrap; justify-content:flex-end }
/* session 329: qc.css (the Quality Check pages) also names a .cp-opt and won on the Staff page, drawing these switches as big boxes
   with white text on pale teal (session 328's card too). Scoped to the card, the card's own look wins here. */
#cpCard .cp-opt{ display:inline-flex; flex-direction:row; align-items:center; flex:0 0 auto; width:auto; min-width:0; max-width:none; min-height:32px; border:0; border-radius:8px; box-shadow:none; padding:6px 14px; background:none; color:#4d545a; font-weight:700 }
#cpCard .cp-opt.on{ background:#144d54; color:#fff; box-shadow:none }
.cp-form{ padding:12px 20px; border-top:1px solid #dfe3e6; display:flex; flex-direction:column; gap:6px }
.cp-lbl{ font-size:12.5px; font-weight:700; color:#4d545a }
.cp-in{ font-family:inherit; font-size:14px; padding:9px 12px; border:1px solid #c9d0d4; border-radius:9px }
.cp-acts{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px }
.cp-btn{ border:none; cursor:pointer; font-family:inherit; padding:9px 14px; border-radius:9px; background:#144d54; color:#fff; font-weight:700; font-size:13.5px }
.cp-msg{ font-size:12.5px; color:#8a2a1c }
.cp-note{ padding:10px 20px 14px; font-size:12px; color:#6b747b; line-height:1.45; border-top:1px solid #dfe3e6 }
.cp-hist{ padding:0 20px 14px; font-size:12px; color:#6b747b; display:flex; flex-direction:column; gap:2px }
.ap-audio{ margin-top:6px; width:100%; max-width:360px }
.ap-quick .ap-nt{ font-weight:600 }

/* Session 330: Settings > Messaging, texts from our Quo lines (connected or not, the two lines, the text to a cleaner). The
   property page's --pa-* tokens. */
.msg-tx-ok, .msg-tx-warn{ border-radius:10px; padding:10px 14px; font-weight:600; font-size:13.5px; margin:0 0 14px }
.msg-tx-ok{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.msg-tx-warn{ background:var(--pa-amber-bg); color:var(--pa-amber-text); border:1px solid var(--pa-amber-edge) }
.msg-tx-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:10px 14px; align-items:center }
.msg-tx-h{ font-size:15px; margin:4px 0 4px }
.msg-tx-ro{ padding:8px 0; color:var(--pa-ink, #16181a) }
body.phone .msg-tx-grid{ grid-template-columns:minmax(0,1fr) }
/* Session 330: the visit's "Switched to Deep Clean" row: Property name, Client, Address, in that order (the Dashboard's three facts). */
.ap-dcfacts{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:13.5px }
.ap-dcfacts a{ color:var(--pa-teal-700, #1d6e77); text-decoration:none } .ap-dcfacts a:hover{ text-decoration:underline }
.ap-dcfacts .ap-dcname{ font-weight:700; color:var(--pa-ink, #16181a) }
/* Session 332: a property's Photos tab, the photos as the page (Daniel: "I want the photos framed well and looking really
   good"). Grouped by room, a short heading with the count; large photos cropped to 4:3 so rows line up, no boxes, a quiet hover. */
.pa .ph-head{ align-items:center }
.pa .ph-head h2{ margin-right:2px }
.ph-count{ font-size:13px; color:var(--pa-muted); margin-right:auto }   /* session 333: was .ph-n, which qc.css's photo number badge overrode (white, 11px) */
.ph-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto }
.ph-hint{ font-size:12.5px; color:var(--pa-muted); margin:0 0 6px }
.ph-card.ph-drop{ outline:2px dashed var(--pa-teal-600); outline-offset:-6px }
.ph-gal{ min-height:40px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:16px; row-gap:8px; align-items:start }
.ph-grp{ grid-column:span 3; min-width:0 }
.ph-grp.ph-n1{ grid-column:span 1 } .ph-grp.ph-n2{ grid-column:span 2 }
.ph-gh{ display:flex; align-items:baseline; gap:8px; margin:18px 0 10px; font-size:15px; font-weight:700; color:var(--pa-ink); letter-spacing:-0.01em }
.ph-gh span{ font-size:13px; font-weight:500; color:var(--pa-muted) }
.ph-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.ph-n1 .ph-row{ grid-template-columns:minmax(0, 1fr) } .ph-n2 .ph-row{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
@media (max-width:1000px){
  .ph-gal, .ph-row{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .ph-grp, .ph-grp.ph-n2{ grid-column:span 2 }
}
/* Session 352: the property gallery's tile, scoped to its grid (.ph-gal). Unscoped, it gave every appointment and Quality Check photo
   tile (qc.css .ph-tile, the picture above its tag and switches) this 4:3 box, so the picture was squeezed to nothing from 13 October. */
.ph-gal .ph-tile{ position:relative; display:block; width:100%; aspect-ratio:4 / 3; padding:0; margin:0; border:0; border-radius:12px; overflow:hidden;
  background:var(--pa-grey); cursor:zoom-in; font:inherit }
.ph-gal .ph-tile img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s ease, filter .35s ease }
.ph-gal .ph-tile:hover img{ transform:scale(1.025); filter:brightness(1.04) }
.ph-gal .ph-tile:focus-visible{ outline:3px solid var(--pa-teal-600); outline-offset:3px }
.ph-nopre{ display:flex; align-items:center; justify-content:center; height:100%; font-size:12px; color:var(--pa-muted) }
.ph-shared{ position:absolute; left:10px; top:10px; padding:3px 9px; border-radius:999px; background:rgba(10,16,18,.58); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.01em }
.ph-editme{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px; background:linear-gradient(transparent, rgba(10,16,18,.62)); color:#fff;
  font-size:12.5px; font-weight:600; text-align:left; opacity:0; transition:opacity .2s ease }
.ph-edit .ph-tile{ cursor:pointer }
.ph-edit .ph-tile:hover .ph-editme, .ph-edit .ph-tile:focus-visible .ph-editme{ opacity:1 }
.ph-empty{ padding:28px 4px; color:var(--pa-muted); font-size:14px }
/* Session 333 (brief G3, G4): a photo on the grid is a box holding the photo (a button that opens the big view), its share pill in
   the top right corner (always visible, one click), and in Edit a tick box in the top left. The pill is grey "Share" when not
   shared and the platform's green with a tick, "Shared with client", when it is. */
.ph-gal .ph-tile{ cursor:default }
.ph-gal .ph-open{ display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in; font:inherit; border-radius:12px; overflow:hidden }
.ph-gal .ph-open:focus-visible{ outline:3px solid var(--pa-teal-600); outline-offset:-3px }
.ph-gal .ph-open:hover img{ transform:scale(1.025); filter:brightness(1.04) }
.ph-edit .ph-open{ cursor:pointer }
.ph-share{ position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.94); color:var(--pa-ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px rgba(10,16,18,.22) }
.ph-share:hover{ background:#fff; box-shadow:0 3px 12px rgba(10,16,18,.3) }
.ph-share:focus-visible{ outline:3px solid var(--pa-teal-300); outline-offset:2px }
.ph-share.on{ background:var(--pa-green-dot); border-color:var(--pa-green-dot); color:#fff }
.ph-share.on:hover{ background:#26876b }
.ph-share:disabled{ opacity:.7; cursor:default }
.ph-tick{ position:absolute; left:10px; top:10px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.ph-tick input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.ph-tick span{ width:26px; height:26px; border-radius:7px; border:2px solid #fff; background:rgba(10,16,18,.35); color:transparent; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 6px rgba(10,16,18,.35) }
.ph-tick:hover span{ background:rgba(10,16,18,.55) }
.ph-tick input:checked + span{ background:var(--pa-teal-600); border-color:var(--pa-teal-600); color:#fff }
.ph-tick input:focus-visible + span{ outline:3px solid var(--pa-teal-300); outline-offset:2px }
.ph-gal .ph-tile.sel{ box-shadow:0 0 0 3px var(--pa-teal-600) }
.ph-gsh{ margin-left:auto; font-size:12.5px !important; font-weight:600 !important; color:var(--pa-muted) !important }
.ph-gsh.on{ color:var(--pa-green-text) !important }
#phSel .ph-selbar{ position:sticky; top:8px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 4px; padding:10px 14px; border-radius:12px;
  background:var(--pa-teal-100); border:1px solid var(--pa-teal-300) }
#phSel .ph-selbar b{ margin-right:6px; font-size:14px; color:var(--pa-ink) }
.pa #phSel .ph-selbar .pa-btn.on{ background:var(--pa-teal-900); color:#fff; border-color:var(--pa-teal-900) }
.pa .pa-btn.ph-danger{ color:var(--pa-red-text); border-color:#e7b8b0 }
.pa .pa-btn.ph-danger:hover{ background:var(--pa-red-bg) }
.ph-selrooms .pvp-rooms{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:4px }
.ph-selrooms{ margin:6px 0 10px; padding:14px; border:1px solid var(--pa-line); border-radius:12px; background:#fff; display:flex; flex-direction:column; gap:10px }
.ph-selrooms h3{ margin:0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pa-muted) }
body.phone .ph-share{ height:38px }
body.phone #phSel .ph-selbar{ top:auto; bottom:8px }
body.phone .ph-gal, body.phone .ph-row, body.phone .ph-n2 .ph-row{ grid-template-columns:minmax(0, 1fr) }
body.phone .ph-grp, body.phone .ph-grp.ph-n1, body.phone .ph-grp.ph-n2{ grid-column:span 1 }
body.phone .ph-row{ gap:12px }
body.phone .ph-btns{ width:100%; margin-left:0 }
body.phone .ph-btns .pa-btn{ flex:1 1 0 }

/* Session 333 (brief B6): Sizes and spares in Edit: battery tick boxes as chips, one filter size chooser per row. */
.pa-ticks{ display:flex; flex-wrap:wrap; gap:8px }
.pa .pa-tick{ position:relative; display:inline-flex; align-items:center; cursor:pointer }
.pa .pa-tick input{ position:absolute; opacity:0; width:1px; height:1px }
.pa .pa-tick span{ display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--pa-input-line); background:#fff;
  font-size:14px; font-weight:600; color:var(--pa-ink) }
.pa .pa-tick span::before{ content:''; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--pa-input-line); background:#fff; box-sizing:border-box }
.pa .pa-tick:hover span{ background:var(--pa-page) }
.pa .pa-tick input:checked + span{ background:var(--pa-teal-100); border-color:var(--pa-teal-600); color:var(--pa-teal-900) }
.pa .pa-tick input:checked + span::before{ background:var(--pa-teal-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; border-color:var(--pa-teal-600) }
.pa .pa-tick input:focus-visible + span{ outline:2px solid var(--pa-teal-300); outline-offset:2px }
.pa-sprow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px }
.pa-sprow select.pa-inp{ max-width:220px }
.pa-sprow input.pa-inp{ flex:1 1 160px; min-width:0 }
#paSpOtherTxt{ margin-top:8px }
/* Session 333 (brief B5): check-out and check-in as two time choosers */
.pd-times{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap }
.pd-times label{ display:flex; flex-direction:column; gap:4px }
.pd-times select.pa-inp{ width:150px }
.pd-times-dash{ padding-bottom:12px; color:var(--pa-muted); font-weight:700 }
/* Session 333 (brief B3): the owner's supplies, beside the supply list on the Inventory tab */
.ck-own{ margin:12px 0 4px; padding:12px 14px; border:1px solid var(--pa-line); border-radius:10px; background:var(--pa-page) }
.ck-own-h{ font-size:13px; font-weight:700; color:var(--pa-ink); margin-bottom:6px }
.ck-own-v{ white-space:pre-wrap; font-size:14px; color:var(--pa-ink) }
/* Session 333 (brief E): the Notes tab. Add note the primary button at the top; each note a card with a clear edge; "From the sale"
   first, quieter; actions as small buttons. */
.pa .nt-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.nt-sub{ font-size:13px; color:var(--pa-muted); margin-right:auto }
.nt-list{ display:flex; flex-direction:column; gap:12px }
.nt-card{ background:#fff; border:1px solid var(--pa-line); border-radius:12px; box-shadow:0 1px 3px rgba(14,54,59,.06); padding:14px 16px; display:flex; flex-direction:column; gap:10px }
.nt-sale{ background:var(--pa-page); box-shadow:none; border-style:dashed; margin-bottom:12px }
.nt-form{ margin-bottom:12px; border-color:var(--pa-teal-300) }
.nt-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.nt-kind{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--pa-teal-100); color:var(--pa-teal-900); font-size:12px; font-weight:700 }
.nt-kind-sale{ background:var(--pa-grey); color:var(--pa-text) }
.nt-vis{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--pa-grey); color:var(--pa-text); font-size:12px; font-weight:600 }
.nt-vis.on{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.nt-meta{ font-size:12.5px; color:var(--pa-muted) }
.nt-body{ white-space:pre-wrap; font-size:14.5px; line-height:1.5; color:var(--pa-ink); overflow-wrap:anywhere }
.nt-acts{ display:flex; gap:8px; flex-wrap:wrap }
.nt-ta{ width:100%; min-height:84px; resize:vertical; box-sizing:border-box }
.nt-chk{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px }
.nt-empty{ padding:10px 2px; color:var(--pa-muted); font-size:14px }
body.phone .nt-head .pa-btn{ width:100% }
/* Session 333 (brief C3): codes in a new order, by a drag handle (computer) or the arrows (phone) */
.af-move{ display:inline-flex; align-items:center; gap:6px; margin-right:8px }
.af-grip{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:32px; color:var(--pa-muted); cursor:grab; border-radius:6px }
.af-grip:hover{ background:var(--pa-grey); color:var(--pa-ink) }
.pa .pa-btn.af-arrow{ width:34px; padding:0; font-size:16px }
.af-code.af-dragging{ opacity:.45 }
.af-code.af-dropon{ box-shadow:inset 0 3px 0 var(--pa-teal-600) }
body.phone .af-grip{ display:none }
.af-code.af-movable{ grid-template-columns:auto minmax(0,1fr) auto auto }
body.phone .af-code.af-movable{ grid-template-columns:auto minmax(0,1fr) }
body.phone .af-code.af-movable .af-codev, body.phone .af-code.af-movable .af-acts{ grid-column:2 / -1 }
/* Session 333 (brief F; Daniel, 13 October 2026: "Anything clickable should be easily identifiable as clickable"; CLAUDE.md's design
   rule since v16): on the property page every action is a real button (primary: the yellow .pa-go, one main action on a card;
   secondary: white with an edge) or an obvious link (teal and underlined). Every button has a hover and a visible focus.
   - .pa-ed (a card's Edit, Look up again, Schedule tab, Change) had no edge: it reads as text. Now a small secondary button.
   - .pa-lk replaces the bare-text actions (.lk spans: Add service, Make default, History, View, Switch off, Remove ...).
   - links inside a tab are underlined. */
.pa .pa-ed{ border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-teal-900); min-height:32px; padding:0 12px; border-radius:8px }
.pa .pa-ed:hover{ background:var(--pa-teal-100); border-color:var(--pa-teal-600) }
.pa .pa-ed:focus-visible, .pa .pa-btn:focus-visible, .pa .pa-lk:focus-visible{ outline:2px solid var(--pa-teal-600); outline-offset:2px }
.pa .pa-btn:hover{ background:var(--pa-page) }
.pa .pa-btn.pa-go:hover{ background:linear-gradient(#FFDA5C, var(--pa-yellow)); box-shadow:0 8px 18px rgba(217,106,24,.32) }
.pa .pa-btn.pa-dk:hover{ background:rgba(255,255,255,.18) }
.pa .pa-lk{ display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 10px; margin:2px 0; border-radius:8px; border:1px solid var(--pa-input-line);
  background:#fff; color:var(--pa-teal-900); font:inherit; font-size:12.5px; font-weight:600; line-height:1.2; cursor:pointer; text-decoration:none; white-space:nowrap; vertical-align:middle }
.pa .pa-lk:hover{ background:var(--pa-teal-100); border-color:var(--pa-teal-600); text-decoration:none }
.pa .pa-link, .pa-tabbody a:not([class]){ color:var(--pa-teal-600); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; font-weight:600 }
.pa .pa-link:hover, .pa-tabbody a:not([class]):hover{ color:var(--pa-teal-900) }
.pa .pa-addrlink{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-decoration-thickness:2px; text-underline-offset:8px }
.pa .pa-addrlink:hover{ text-decoration-color:rgba(255,255,255,.85) }
body.phone .pa .pa-lk{ min-height:40px; padding:0 12px }
/* Session 333 (brief E2): on the Notes tab, each of Resort's appointment notes is a card too (the same edge as the home's notes). */
.qn-prop .qn-row, .qn-prop .qn-row:first-child{ border:1px solid var(--pa-line); border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(14,54,59,.06); padding:12px 14px; margin-bottom:10px }

/* Session 338: "Show before check-in" on a note for the cleaner (appointment page), a real tick box with its label. */
.ap-before{ display:inline-flex; gap:6px; align-items:flex-start; font-size:13px; cursor:pointer; max-width:260px; line-height:1.3 }
.ap-before input{ margin-top:2px; width:16px; height:16px; flex:none }
.ap-before input:focus-visible{ outline:2px solid var(--focus, #e8892b); outline-offset:2px }
/* Session 338: Getting in as ways in; the amber flags on Getting there (3 or more digits, Resort's change). */
.af-way .af-wmain{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.af-wnote{ font-size:13px; overflow-wrap:anywhere }
.af-flag{ margin-top:10px; padding:10px 12px; border-left:4px solid var(--db-a6, #b7791f); background:var(--pa-amber-soft, #FFF6E5); border-radius:6px; display:flex; flex-direction:column; gap:6px; font-size:13px }
.af-rc{ display:flex; flex-direction:column; gap:4px; padding:6px 0 }
.af-wayform{ margin:8px 0; display:flex; flex-direction:column; gap:4px }
.af-wayform select.pa-inp{ max-width:260px }

/* session 340: the visit page's Deep Clean block (its own card, lines by area, her reason) */
#apc-deep-clean{ border:1px solid var(--pa-amber-line); }
#apc-deep-clean .pa-ch{ background:var(--pa-amber-soft); }
.ap-ckrow.ap-deepa .pa-v{ font-weight:700; color:var(--pa-amber-text); }
.ap-deepwhy{ color:var(--pa-ink); }

/* ---- Session 343 (checkout-office.js): the office's Check her out and Add time, drawn in place under a "Not checked out" row (the
   Dashboard) or a cleaner (the appointment page). The platform's button look (.pa-btn): white with a hairline, the one yellow primary;
   the choices are chips that show which is picked. ---- */
.cof-form{ grid-column:1 / -1; display:grid; gap:10px; margin:6px 0 4px; padding:14px 16px; border:1px solid var(--pa-line, #dfe3e6); border-left:4px solid var(--pa-teal-600, #1d6e77);
  border-radius:12px; background:#fff; color:var(--pa-ink, #16181a); font-size:13.5px }
.cof-t{ font-weight:700; font-size:14.5px }
.cof-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.cof-l{ font-size:12.5px; font-weight:600; color:#4d545a; margin-right:2px }
.cof-cs{ font-size:12.5px; color:#6b747b }
.cof-in{ height:38px; min-width:0; flex:1 1 220px; border:1px solid var(--pa-input-line, #c9d0d4); border-radius:10px; padding:0 10px; font:inherit; font-size:14px; background:#fff; color:inherit }
.cof-in.cof-in-s{ flex:0 0 auto; width:auto; min-width:92px }
.cof-in:focus-visible{ outline:2px solid var(--pa-teal-300, #6fd5d4); outline-offset:1px; border-color:var(--pa-teal-600, #1d6e77) }
.cof-chip, .cof-btn{ font:inherit; font-size:13.5px; font-weight:600; height:38px; padding:0 14px; border-radius:var(--pa-radius-btn, 10px); border:1px solid var(--pa-input-line, #c9d0d4);
  background:#fff; color:var(--pa-ink, #16181a); cursor:pointer; white-space:nowrap }
.cof-chip:hover, .cof-btn:hover{ border-color:var(--pa-teal-600, #1d6e77) }
.cof-chip.on{ background:var(--pa-teal-900, #144d54); border-color:var(--pa-teal-900, #144d54); color:#fff }
.cof-btn.cof-go{ background:linear-gradient(var(--pa-yellow, #ffd13a), var(--pa-yellow-2, #f5c21c)); border:0; font-weight:700 }
.cof-btn.cof-go:hover{ filter:brightness(.97) }
.cof-chip:focus-visible, .cof-btn:focus-visible{ outline:2px solid var(--pa-teal-600, #1d6e77); outline-offset:2px }
.cof-btn:disabled{ opacity:.6; cursor:default }
.cof-msg{ font-size:13px; font-weight:600; color:#a3352a; min-height:0 }
.cof-msg:empty{ display:none }
body.db-dark .dayboard .cof-form{ background:#14262b; border-color:rgba(255,255,255,.14); border-left-color:#6fd5d4; color:#e8f1f2 }
body.db-dark .dayboard .cof-l, body.db-dark .dayboard .cof-cs{ color:#a9bcc0 }
body.db-dark .dayboard .cof-in, body.db-dark .dayboard .cof-chip, body.db-dark .dayboard .cof-btn:not(.cof-go){ background:#0f1e22; color:#e8f1f2; border-color:rgba(255,255,255,.22) }
body.db-dark .dayboard .cof-chip.on{ background:#6fd5d4; color:#0e363b; border-color:#6fd5d4 }
body.db-dark .dayboard .cof-msg{ color:#ff9c8f }
body.phone .cof-chip, body.phone .cof-btn, body.phone .cof-in{ height:44px }
/* Session 343: the appointment page's Who and when, each cleaner's check-out clock and its two buttons. */
.ap-co{ display:grid; gap:6px; margin:4px 0 2px }
.ap-coline{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between }
.ap-coline .pa-cs{ flex:1 1 280px }
.ap-cobtns{ display:flex; gap:8px; flex-wrap:wrap }
/* Session 346 (brief B2, B7): a Residential visit's plan on its appointment page */
.ap-plan .ap-plbody{ display:flex; flex-direction:column; gap:0; padding-top:4px }
.ap-plrow{ display:grid; grid-template-columns:200px minmax(0,1fr); column-gap:16px; padding:10px 0; border-top:1px solid var(--pa-line) }
.ap-plrow:first-child{ border-top:0 }
.ap-pll{ font-weight:600; color:var(--pa-text) }
.ap-pla{ font-weight:700; color:var(--pa-ink); overflow-wrap:anywhere }
.ap-pls{ grid-column:2; overflow-wrap:anywhere }
.ap-plnote{ padding-top:10px; border-top:1px solid var(--pa-line) }
.ap-plwarn{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 20px; background:var(--pa-amber-bg, #fdf0d8); border-bottom:1px solid var(--pa-line) }
.ap-plq{ display:flex; flex-direction:column; gap:6px; padding:8px 0; border-top:1px solid var(--pa-line) }
.ap-plform > .ap-plq:first-child{ border-top:0 }
.ap .ap-plin{ width:100%; max-width:520px; height:40px; font-family:inherit; font-size:14px; border:1px solid var(--pa-input-line); border-radius:10px; padding:0 12px; color:var(--pa-ink); box-sizing:border-box }
.ap-pl2{ display:flex; flex-direction:column; gap:6px; max-width:520px }
.ap-plresults{ border-top:1px solid var(--pa-line); display:flex; flex-direction:column; gap:12px }
.ap-plres{ display:flex; flex-direction:column; gap:4px }
.ap-plrt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ap-plpairs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px }
.ap-plpair{ border:1px solid var(--pa-line); border-radius:10px; padding:10px }
.ap-plpn{ font-weight:700; color:var(--pa-ink); margin-bottom:6px }
.ap-plpg{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.ap .ap-plth{ display:inline-block; width:100%; aspect-ratio:4/3; padding:0; border:0; border-radius:8px; overflow:hidden; background:var(--pa-page); cursor:pointer; margin-top:4px }
.ap .ap-plth img{ width:100%; height:100%; object-fit:cover; display:block }
.ap .ap-plth:focus-visible{ outline:3px solid var(--pa-teal-700, #1d6e77); outline-offset:2px }
@media (max-width:640px){ .ap-plrow{ grid-template-columns:1fr } .ap-pls{ grid-column:1 } }
/* Session 347 (brief B, E): a Refresh's focus items on its appointment page, and what she found (four photos side by side) */
.ap-rf .ap-plres + .ap-plres{ margin-top:8px }
.ap-rfitem{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:start; padding:10px 0; border-top:1px solid var(--pa-line) }
.ap-rfn{ width:28px; height:28px; border-radius:50%; background:var(--pa-teal-700, #1d6e77); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center }
.ap-rfw{ min-width:0; overflow-wrap:anywhere }
.ap-rf2{ display:grid; grid-template-columns:repeat(2, minmax(0, 180px)); gap:10px; margin-top:6px }
.ap-rf4{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px }
.ap-rfph{ min-width:0 }
.ap-rfnone{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; margin-top:4px; border:1px dashed var(--pa-line); border-radius:8px; color:var(--pa-text); font-size:13px }
.ap-rfask{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px }
.ap-rfcol{ flex-direction:column; align-items:stretch }
.ap .ap-rfopt{ text-align:left; white-space:normal; height:auto; min-height:36px; padding:8px 12px }
.ap-rfiform{ border:1px solid var(--pa-line); border-radius:10px; padding:12px; margin:8px 0; display:flex; flex-direction:column; gap:6px }
.ap-rfpick{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.ap .ap-rfpk{ width:96px; padding:0; border:2px solid var(--pa-line); border-radius:8px; background:var(--pa-page); cursor:pointer; overflow:hidden; display:flex; flex-direction:column; font:inherit; font-size:12px; color:var(--pa-text) }
.ap .ap-rfpk img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block }
.ap .ap-rfpk span{ padding:2px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ap .ap-rfpk.on{ border-color:var(--pa-teal-700, #1d6e77); box-shadow:0 0 0 2px var(--pa-teal-700, #1d6e77) }
.ap .ap-rfpk:hover{ border-color:var(--pa-teal-700, #1d6e77) }
.ap .ap-rfpk:focus-visible{ outline:3px solid var(--pa-teal-700, #1d6e77); outline-offset:2px }
.ap-rfres{ border:1px solid var(--pa-line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px }
.ap-rfrt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ap-rfdec{ display:flex; flex-direction:column; gap:6px }
/* Session 358: What she sent, her Before set and her After set side by side (one above the other on a phone) */
.ap-rfsent{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px }
.ap-rfset{ min-width:0 }
.ap-rfgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px }
@media (max-width:640px){ .ap-rfsent{ grid-template-columns:minmax(0, 1fr) } }
@media (max-width:640px){ .ap-rf4{ grid-template-columns:repeat(2, minmax(0, 1fr)) } .ap-rfitem{ grid-template-columns:28px minmax(0,1fr) } .ap-rfitem .ap-acts{ grid-column:2 } }

/* Session 348: the QC page's Upload log (qc-page.js qcpDrawUlog): a fold with its one-line summary, the full list on tap. */
.qcp-ulog{ padding:0 }
.qcp-fold{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 18px; border:0; background:transparent; font:inherit; text-align:left; cursor:pointer; color:inherit; border-radius:var(--pa-radius-card) }
.qcp-fold:hover{ background:var(--pa-row-hover, rgba(0,0,0,.03)) }
.qcp-fold:focus-visible{ outline:3px solid var(--pa-focus, #1d6e77); outline-offset:-3px }
.qcp-fold-t{ font-weight:700; font-size:16px; flex:none }
.qcp-fold .pa-cs{ flex:1; min-width:0 }
.qcp-fold-c{ flex:none; font-size:14px; color:var(--pa-muted, #6b7378) }
.qcp-ul{ margin:0 0 8px; line-height:1.45 }
.qcp-ultbl{ margin-top:10px }
.qcp-r{ font-weight:700 }
.qcp-r-ok{ color:#08513f }
.qcp-r-warn{ color:#8a5a00 }
.qcp-r-bad{ color:#b3261e }
.qcs-num{ width:5.5em; box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:6px 8px; font:16px var(--ui-font) }   /* session 348: Settings > Quality minutes */
.qcs-time{ width:7em }   /* session 364: Settings > Quality, the end of the field day ("5:00 PM") */
/* Session 363: Settings > Quality, the reasons on Add a stop (name, minutes on site, on or off the sheet) */
.qcsr-in input[type=text]:not(.qcs-num), .qcsr-in select{ box-sizing:border-box; border:1px solid #c9d0d4; border-radius:8px; padding:6px 8px; font:16px var(--ui-font); background:#fff }
.qcsr-in input[type=text]:not(.qcs-num){ width:16em; max-width:100% }
.qcsr-in select{ cursor:pointer }

/* ============================================================
   Session 355 (briefs/session-355-brief.md Part 6): the client page's People, Standing rules and Relationship cards in the
   current Edit, the plainest way until session 356 redraws the page.
   ============================================================ */
.cdp-person{ padding:12px 0; border-top:1px solid var(--pa-line-soft); display:flex; flex-direction:column; gap:4px }
.cdp-person:first-of-type{ border-top:0 }
.cdp-ph{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cdp-ways{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:13.5px }
.cdp-way.pref b{ font-weight:600; color:var(--pa-teal-900) }
.cdp-grid{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-end }
.cdp-f{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--pa-muted); font-weight:600 }
.cdp-f input, .cdp-f select, .cdp-f textarea{ font-weight:450 }
.cdp-cb{ display:inline-flex; flex-direction:row; align-items:center; gap:6px; font-size:13.5px; color:var(--pa-text); font-weight:500; min-height:36px }
.cdp-note{ margin-top:6px }
.cdp-waysedit{ margin-top:8px; display:flex; flex-direction:column; gap:6px }
.cdp-wayrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px }
.cdp-addway{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px }
.cdp-addway select{ width:auto; max-width:100% }
.cdp-add{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:12px; margin-top:8px; border-top:1px solid var(--pa-line) }
.cdp-gaps{ background:var(--pa-amber-bg); color:var(--pa-amber-text); border-radius:10px; padding:10px 14px; margin-bottom:var(--s3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px }
.btn.sm{ height:32px; padding:0 12px; font-size:13px }

/* ---------- Session 370 (briefs/session-370-brief.md): the Office Inspection card on the appointment page (office-inspection.js), Mark reviewed
   waiting for it, and Settings > Quality > Office inspection. The platform's tokens and buttons only (pa-btn, pa-pill, the hrs rows). ---------- */
.oi .oi-rows{ display:flex; flex-direction:column }
.oi .oi-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; align-items:center; padding:12px 20px; border-top:1px solid var(--pa-line-soft) }
.oi .oi-row.oi-open{ background:var(--pa-amber-soft) }
.oi .oi-q{ display:flex; gap:12px; align-items:flex-start; min-width:0 }
.oi .oi-n{ flex:none; width:24px; height:24px; border-radius:999px; background:var(--pa-page); color:var(--pa-text); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:1px }
.oi .oi-qt{ min-width:0; display:flex; flex-direction:column; gap:3px }
.oi .oi-lab{ color:var(--pa-ink); font-size:14px; line-height:1.4; font-weight:600 }
.oi .oi-src{ color:var(--pa-muted); font-size:12.5px; line-height:1.4 }
.oi .oi-chg{ color:var(--pa-amber-text); font-size:12.5px; line-height:1.4; font-weight:600 }
.oi .oi-note{ color:var(--pa-text); font-size:13px; line-height:1.4; font-style:italic }
.oi .oi-act{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end }
.oi .oi-by{ color:var(--pa-muted); font-size:12.5px }
.oi .oi-ans{ min-width:64px; justify-content:center }
.oi .oi-two{ display:inline-flex; gap:6px }
.oi .oi-two .pa-btn{ min-width:84px; background:#fff; border:1px solid var(--pa-input-line); color:var(--pa-ink); font-weight:600 }
.oi .oi-two .pa-btn:hover{ background:var(--pa-grey) }
.oi .oi-two .oi-pass.on{ background:var(--pa-green-bg); border-color:var(--pa-green-dot); color:var(--pa-green-text) }
.oi .oi-two .oi-miss.on{ background:var(--pa-red-bg); border-color:#C9897F; color:var(--pa-red-text) }
.oi .oi-two .pa-btn:focus-visible, .oi .oi-link:focus-visible{ outline:2px solid var(--pa-ink); outline-offset:2px }
.oi .oi-link{ align-self:flex-start; background:none; border:0; padding:2px 0; font:inherit; font-size:13px; font-weight:600; color:var(--pa-ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer }
.oi .oi-words, .oi .oi-chgbox{ display:flex; flex-direction:column; gap:6px; margin-top:6px }
.oi .oi-chgbox{ min-width:min(360px, 100%) }
.oi .oi-wrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.oi .oi-wrow .pa-inp{ flex:1 1 220px; min-width:0 }
.oi .oi-pts{ display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:999px; background:var(--pa-page); color:var(--pa-ink); font-weight:800; font-size:15px }
.oi .oi-pts.oi-done{ background:var(--pa-green-bg); color:var(--pa-green-text) }
.oi .oi-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 20px 18px; border-top:1px solid var(--pa-line) }
.ap-revwait{ color:var(--pa-amber-text); font-size:13px; font-weight:600 }
body.phone .oi .oi-row{ grid-template-columns:minmax(0,1fr); padding:12px 16px }
body.phone .oi .oi-act{ justify-content:flex-start }
body.phone .oi .oi-two{ display:grid; grid-template-columns:1fr 1fr; width:100% }
body.phone .oi .oi-two .pa-btn{ height:44px }
body.phone .oi .oi-foot .pa-btn{ width:100%; height:46px }
.oi-set .oi-seg{ display:inline-flex; gap:0; border:1px solid var(--pa-input-line); border-radius:10px; overflow:hidden; flex-wrap:wrap }
.oi-set .oi-segb{ font:inherit; font-size:13.5px; font-weight:600; border:0; background:#fff; color:var(--pa-ink); padding:9px 14px; cursor:pointer; min-height:40px }
.oi-set .oi-segb + .oi-segb{ border-left:1px solid var(--pa-input-line) }
.oi-set .oi-segb.on{ background:var(--pa-ink); color:#fff }
.oi-set .oi-segb:focus-visible, .oi-set .oi-chip:focus-visible{ outline:2px solid var(--pa-ink); outline-offset:2px }
.oi-set .oi-chips{ display:flex; gap:6px; flex-wrap:wrap }
.oi-set .oi-chip{ font:inherit; font-size:13px; font-weight:600; border:1px solid var(--pa-input-line); background:#fff; color:var(--pa-text); border-radius:999px; padding:6px 12px; cursor:pointer; min-height:34px }
.oi-set .oi-chip:hover{ background:var(--pa-grey) }
.oi-set .oi-chip.on{ background:var(--pa-green-bg); border-color:var(--pa-green-dot); color:var(--pa-green-text) }
.oi-set .oi-vh{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin:16px 0 10px }
.oi-set .oi-vbtns{ display:flex; gap:8px; flex-wrap:wrap }
.oi-set .oi-tw{ overflow-x:auto }
.oi-set .oi-tbl{ width:100%; border-collapse:collapse; table-layout:auto }
.oi-set .oi-tbl th{ text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pa-muted); padding:8px; border-bottom:1px solid var(--pa-line); white-space:nowrap }
.oi-set .oi-tbl td{ vertical-align:top; font-size:13px; line-height:1.4; padding:10px 8px; border-bottom:1px solid var(--pa-line-soft); color:var(--pa-ink); white-space:normal }
.oi-set .oi-tbl td:first-child{ width:28px; color:var(--pa-text); font-weight:700 }
.oi-set .oi-tbl td:nth-child(3){ color:var(--pa-text) }
.oi-set .oi-tbl td:nth-child(4), .oi-set .oi-tbl td:nth-child(6){ width:52px }
.oi-set .oi-tbl td:nth-child(5){ width:170px }
.oi-set .oi-tbl tr.oi-off td{ color:var(--pa-muted); text-decoration:line-through }
.oi-set .oi-ed{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--pa-line-soft) }
.oi-set .oi-edn{ flex:none; width:24px; font-weight:700; color:var(--pa-text); padding-top:4px }
.oi-set .oi-edf{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px }
.oi-set .oi-edf textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:13.5px; padding:8px; border:1px solid var(--pa-input-line); border-radius:6px }
.oi-set .oi-edrow{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:4px }
.oi-set .oi-edrow label{ display:flex; flex-direction:column; gap:3px }
.oi-set .oi-mv{ display:inline-flex; gap:6px; margin-left:auto }
.oi-set .oi-older{ margin-top:14px } .oi-set .oi-older ul{ margin:6px 0 0 18px; padding:0; font-size:13px; color:var(--pa-text) }
@media (max-width:640px){ .oi-set .oi-segb{ flex:1 1 100% } .oi-set .oi-segb + .oi-segb{ border-left:0; border-top:1px solid var(--pa-input-line) }
  .oi-set .oi-tbl thead{ display:none } .oi-set .oi-tbl tr{ display:block; padding:10px 0; border-bottom:1px solid var(--pa-line-soft) }
  .oi-set .oi-tbl td{ display:block; width:auto !important; border:0; padding:2px 0 } .oi-set .oi-tbl td:first-child::before{ content:'Question ' }
  .oi-set .oi-tbl td:nth-child(n+3)::before{ content:attr(data-l) ': '; color:var(--pa-muted); font-weight:600 } }

/* ---------- Session 372 (briefs/session-372-brief.md): the office inspection's After photo check on the card (office-inspection.js) and the
   Settings > Quality > Office inspection sections (Before photos, After photos, Supply closet). */
.oi .oi-pc{ padding:10px 20px; border-top:1px solid var(--pa-line-soft); background:var(--pa-page) }
.oi .oi-sug{ margin-top:4px; font-size:12.5px; line-height:1.4; font-weight:600; color:var(--pa-text) }
.oi .oi-sug-yes{ color:var(--pa-green-text) }
.oi .oi-sug-no{ color:var(--pa-red-text) }
.oi .oi-sug-unsure, .oi .oi-sug-not_there{ color:var(--pa-amber-text) }
.oi .oi-seephotos{ margin-top:6px; align-self:flex-start }
.oi .oi-golink{ display:inline-block; margin-top:6px; font-size:13px; font-weight:600; color:var(--pa-ink); text-decoration:underline; text-underline-offset:2px }
.oi .oi-golink:focus-visible, .oi .oi-seephotos:focus-visible{ outline:2px solid var(--pa-ink); outline-offset:2px }
.oi-set .oi-sub{ margin-top:16px; padding-top:12px; border-top:1px solid var(--pa-line-soft, #e6e9eb) }
.oi-set .oi-subt{ font-weight:700; font-size:14px; margin-bottom:4px }
.oi-set .oi-vin{ width:6.5em; margin-right:8px }
.oi-set .oi-month{ font-size:13.5px; line-height:1.45 }
.oi-set .oi-std{ margin-top:4px }
@media (max-width: 640px){ .oi .oi-pc{ padding:10px 14px } .oi-set .oi-vin{ width:5.5em } }

/* ---------- Session 373 (briefs/session-373-brief.md): question 6's two links, question 10's words at a home with no patio, and "What her
   After step reminds her to include" in Settings > Quality > Office inspection (office-inspection.js). */
.oi .oi-golinks{ display:flex; flex-wrap:wrap; gap:4px 16px }
.oi-set .oi-tin{ flex:1 1 320px; min-width:0 }
.oi-set .oi-vtext{ flex:1 1 240px; min-width:0; width:auto }
.oi-set .oi-shot{ display:grid; grid-template-columns:22px minmax(0, 1fr) auto; gap:8px 12px; align-items:start; padding:10px 0; border-top:1px solid var(--pa-line-soft, #e6e9eb) }
.oi-set .oi-shotn{ flex:0 0 22px; font-weight:700; color:var(--pa-muted) }
.oi-set .oi-shott{ min-width:0; font-size:14px; line-height:1.4 }
.oi-set .oi-shotb{ display:flex; gap:8px; flex-wrap:wrap }
.oi-set .oi-shotf, .oi-set .oi-shotrm{ display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid var(--pa-line-soft, #e6e9eb) }
.oi-set .oi-shotrm{ border-top:0; padding-bottom:0 }
.oi-set .oi-shotf .pa-inp, .oi-set .oi-shotrm .pa-inp{ width:100%; max-width:560px; box-sizing:border-box }
.oi-set .oi-shotf .oi-wrow, .oi-set .oi-shotrm{ flex-wrap:wrap }
.oi-set .oi-shotf .oi-wrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
@media (max-width: 640px){ .oi-set .oi-shot{ grid-template-columns:22px minmax(0, 1fr) } .oi-set .oi-shotb{ grid-column:2 } }

/* ================================================================ session 375: the Appointment page, version 5, and the Close out screen
   briefs/session-375-brief.md. The board mh-appointment-mockups-v5 (AppointmentV5.html, AppointmentV5Parts.html, AppointmentV4Parts.html,
   AppointmentV6CloseOut.html) is the specification: its CSS, copied here as .a5-* (the page) and .clo-* (the Close out screen). Where the
   board differs from the platform's .pa-* sizes, the board wins on this page (.ap5). */
.pa.ap.ap5{ gap:20px }
.ap5 .pa-btn{ height:40px; padding:0 15px }
.ap5 .pa-btn.pa-sm{ height:34px; padding:0 12px; font-size:13px }
.ap5 .pa-ch{ padding:14px 20px }
.ap5 .pa-ic{ width:38px; height:38px; flex:0 0 38px }
.ap5 .a5-push{ margin-left:auto }
/* the hero */
.ap5 .ap-top.a5-hero{ border-radius:18px; padding:20px 26px 14px; grid-template-columns:minmax(0,1fr) 560px; gap:16px 32px }
.a5-heroL{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.ap .a5-addr{ display:inline-flex; align-items:center; gap:12px }
.ap .a5-addr .ap-pin{ margin-top:0; flex:0 0 28px }
.ap .ap-h1.a5-h1{ font-size:36px; font-weight:800; letter-spacing:-0.035em; line-height:1.05 }
.a5-sub{ margin:8px 0 0 40px; display:flex; align-items:center; gap:4px 14px; flex-wrap:wrap; color:#fff; font-weight:600 }   /* 14 between items as drawn; 4 between lines when it wraps */
.a5-svc{ font-size:18px; font-weight:600; color:#6fd5d4; letter-spacing:-0.01em }
.a5-sep{ width:1px; height:16px; background:rgba(255,255,255,.28) }
.ap a.a5-lk{ color:#6fd5d4; font-weight:600; text-decoration:underline; text-decoration-color:rgba(111,213,212,.45); text-underline-offset:3px }
.ap a.a5-lk:hover{ text-decoration-color:#6fd5d4 }
.a5-btns{ gap:10px }
.ap5 .ap-top.a5-hero > .a5-heroL{ grid-column:1; grid-row:1 }
.ap5 .ap-top.a5-hero > .a5-cc{ grid-column:2; grid-row:1 / span 2 }
.ap5 .ap-top.a5-hero > .a5-btns{ grid-column:1; grid-row:2; align-self:start }
.ap5 .ap-top.a5-hero > .a5-stages{ grid-row:3 }
.a5-cc{ background:#fff; border-radius:14px; color:#4d545a; padding:14px 18px; display:flex; flex-direction:column; gap:12px; align-self:start; min-width:0 }
.a5-cchead{ display:flex; align-items:center; gap:12px }
.a5-av{ width:42px; height:42px; border-radius:999px; background:#dceff0; color:#144d54; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex:0 0 42px }
.a5-ccn{ min-width:0; flex:1 }
.ap a.a5-ccname{ font-weight:700; font-size:16px; color:#1d6e77 }
.a5-nums{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.a5-num{ min-width:0 }
.a5-numbtn{ background:none; border:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; border-radius:8px }
.a5-numbtn .a5-tl{ text-decoration:underline; text-underline-offset:2px; color:#1d6e77 }
.a5-numbtn:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }
.a5-tnum{ font-size:22px; font-weight:800; color:#16181a; letter-spacing:-0.03em; line-height:1.05; white-space:nowrap }
.a5-tnum.a5-dim{ color:#6b747b } .a5-tnum.a5-na{ color:#9aa4ab; font-size:18px }
.a5-tl{ font-size:12px; font-weight:600; color:#6b747b; margin-top:3px }
.a5-ccbtns{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.a5-cc .ap-co, .a5-cc .ap-coline{ padding:0 }
/* the stage bar: 6 equal buttons */
.a5-stages{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; border-top:1px solid rgba(255,255,255,.16); padding-top:10px }
.a5-sbtn{ display:flex; align-items:flex-start; gap:10px; text-align:left; background:none; border:1px solid transparent; border-radius:12px; padding:10px 12px; color:#fff; font-family:inherit; cursor:pointer; min-width:0 }
.a5-sbtn:hover{ background:rgba(255,255,255,.08) }
.a5-sbtn:hover .a5-sl{ text-decoration:underline; text-underline-offset:3px }
.a5-sbtn:focus-visible{ outline:2px solid #ffd13a; outline-offset:2px }
.a5-sbtn.next{ background:rgba(255,209,58,.12); border-color:rgba(255,209,58,.7) }
.a5-sbtn.off{ cursor:default; opacity:.75 }
.a5-sbtn.off:hover{ background:none } .a5-sbtn.off:hover .a5-sl{ text-decoration:none }
.a5-dot{ width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:0 0 24px }
.a5-dot.dn{ background:#6fd5d4; color:#0e363b }
.a5-dot.cur{ background:#ffd13a; color:#0e363b }
.a5-dot.fut{ background:transparent; color:rgba(255,255,255,.7); border:1.5px dashed rgba(255,255,255,.5) }
.a5-sbtn > span:last-child{ flex:1 1 auto; min-width:0 }
.a5-sl{ font-size:13.5px; font-weight:700; color:#fff; display:block }
.a5-sw{ font-size:12px; color:rgba(255,255,255,.7); font-weight:500; display:block; overflow-wrap:anywhere }
.a5-sbtn.next .a5-sw{ color:#ffd13a }
/* session 398: Can finish next day, under the stage bar */
.ap5 .ap-top.a5-hero > .a5-nextday{ grid-row:4 }
.a5-nextday{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.a5-ndbtn{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.45); border-radius:999px; padding:6px 14px 6px 8px; color:#fff; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer }
.a5-ndbtn:hover{ background:rgba(255,255,255,.16) }
.a5-ndbtn:focus-visible{ outline:2px solid #ffd13a; outline-offset:2px }
.a5-ndbtn[disabled]{ cursor:default; opacity:.6 }
.a5-ndk{ width:30px; height:18px; border-radius:999px; background:rgba(255,255,255,.3); position:relative; flex:0 0 30px }
.a5-ndk::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:999px; background:#fff; transition:left .15s }
.a5-ndbtn.on{ background:#ffd13a; border-color:#ffd13a; color:#16181a }
.a5-ndbtn.on .a5-ndk{ background:#16181a }
.a5-ndbtn.on .a5-ndk::after{ left:14px; background:#ffd13a }
.a5-ndw{ font-size:12.5px; color:rgba(255,255,255,.78); min-width:0; flex:1 1 280px }
/* At a glance: 8 equal cells */
.a5-glance{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)) }
.a5-gc{ padding:12px 16px; display:flex; flex-direction:column; gap:2px; min-width:0; color:inherit; text-decoration:none }
.a5-gc + .a5-gc{ border-left:1px solid #e6eaec }
.a5-gk{ font-size:12px; font-weight:700; color:#6b747b }
.a5-gv{ font-size:15px; font-weight:700; color:#16181a; letter-spacing:-0.01em; overflow-wrap:anywhere }
.a5-gv.a5-na{ color:#9aa4ab }
.ap a.a5-gc .a5-gv{ color:#1d6e77 }
.ap a.a5-gc:hover{ background:#f4f9f9 } .ap a.a5-gc:hover .a5-gv{ text-decoration:underline; text-underline-offset:3px }
.ap a.a5-gc:focus-visible{ outline:2px solid #1d6e77; outline-offset:-2px }
.a5-gp{ align-self:flex-start; margin-top:3px }
.a5-glink{ background:none; border:0; padding:0; font:inherit; font-size:12.5px; font-weight:600; color:#1d6e77; text-decoration:underline; cursor:pointer; text-align:left }
.a5-arr{ padding:14px 20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
/* Needs you now and its three tiles */
.ap5 .a5-now{ border:1px solid #e3c48f; overflow:hidden }
.ap5 .a5-now > .pa-ch{ background:#fffaf0; border-bottom-color:#f1dfba }
.a5-qhead{ padding:14px 20px 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.a5-qtitle{ font-size:14px; font-weight:800; color:#16181a }
.a5-qa{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:16px 20px }
.a5-qt{ border:1px solid #dfe3e6; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; background:#fff }
.a5-qt.a5-wait{ border:2px solid #e8a598; background:#fff7f5 }
.a5-qt.a5-conf{ border:2px solid #e3c48f; background:#fffaf0 }
.a5-qt.a5-no{ background:#f8fafa }
.a5-qt.a5-done{ border:2px solid #9fd6c2; background:#f4fbf8 }
.a5-qh{ display:flex; align-items:center; gap:10px }
.a5-qh .pa-pill{ margin-left:auto }
.a5-qn{ font-size:16px; font-weight:800; color:#16181a; letter-spacing:-0.015em }
.a5-qi{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 34px }
.a5-qrow{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start }
.a5-qthumb{ width:96px; aspect-ratio:4/3; border-radius:10px; background:#dfe7ea; overflow:hidden; border:0; padding:0; cursor:zoom-in; display:flex; align-items:center; justify-content:center; font-size:11px; color:#6b747b }
.a5-qthumb img{ width:100%; height:100%; object-fit:cover; display:block }
.a5-qthumb.a5-qnone{ cursor:default }
.a5-qbtns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; align-items:center }
.a5-qfoot{ margin-top:auto }
.a5-qlink{ align-self:flex-start; margin-left:-8px }
.a5-bubble{ background:#e9ecee; border-radius:12px 12px 12px 4px; padding:10px 12px; color:#16181a; font-size:13px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere }
.ap5 .a5-nrow{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:16px; align-items:center; padding:13px 20px; border-top:1px solid #edf0f2 }
.ap5 .a5-nrow > .pa-pill{ justify-self:start }
.a5-quiet{ display:flex; align-items:center; gap:12px; padding:14px 20px; flex-wrap:wrap }
.a5-quieti{ width:34px; height:34px; border-radius:9px; background:#e2f4ee; color:#08513f; display:flex; align-items:center; justify-content:center; flex:0 0 34px }
/* one-line cards (Photos before she arrives, Inventory not answered) */
.a5-line, .a5-inv{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 20px }
.ap5 .a5-line .pa-ct.a5-lt{ font-size:15px }
.a5-ivs{ width:1px; align-self:stretch; background:#e6eaec }
.a5-ivok{ font-size:14px }
/* Photos */
.a5-seg{ display:inline-flex; border:1px solid #c9d0d4; border-radius:10px; overflow:hidden; background:#fff }
.a5-segb{ font-family:inherit; font-size:13px; font-weight:600; padding:6px 12px; border:0; background:#fff; color:#4d545a; cursor:pointer }
.a5-segb + .a5-segb{ border-left:1px solid #c9d0d4 }
.a5-segb.on{ background:#144d54; color:#fff }
.a5-segb:focus-visible{ outline:2px solid #1d6e77; outline-offset:-2px }
.a5-phbtns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.a5-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 20px 0 }
.ap5 .ap-chip.a5-chip{ font-family:inherit; font-size:13px; font-weight:600; border-radius:999px; padding:6px 12px; border:1px solid #c9d0d4; background:#fff; color:#4d545a; cursor:pointer }
.ap5 .ap-chip.a5-chip.on{ background:#144d54; border-color:#144d54; color:#fff }
.a5-selbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:#144d54; color:#fff; border-radius:12px; padding:10px 14px; margin:14px 20px 0 }
.a5-seln{ font-weight:800 } .a5-tagas{ opacity:.75; font-size:13px; margin-left:6px }
.a5-tchip{ font-family:inherit; font-size:12.5px; font-weight:700; border-radius:999px; padding:5px 11px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; cursor:pointer }
.a5-tchip:hover{ background:#ffd13a; color:#144d54; border-color:#ffd13a }
.a5-selsep{ width:1px; height:22px; background:rgba(255,255,255,.3); margin:0 6px }
.ap .pa-ed.a5-clear{ color:#6fd5d4; margin-left:auto; background:none; border:0 }
.a5-ask{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 20px 0; padding:12px 14px; border:2px solid #e3c48f; background:#fffaf0; border-radius:12px }
.a5-prow{ padding:14px 20px; display:flex; flex-direction:column; gap:12px }
.a5-prow + .a5-prow{ border-top:1px solid #dfe3e6 }
.a5-colh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.a5-colt{ font-size:15px; font-weight:800; color:#16181a }
.a5-chk{ font-size:12.5px; font-weight:700; color:#1d6e77; margin-left:8px }
.a5-pg{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px }
.a5-ph{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.a5-thumb{ aspect-ratio:4/3; border-radius:10px; background:#dfe7ea; position:relative }
.a5-thumb.picked{ outline:3px solid #1d6e77; outline-offset:2px }
.a5-timg{ position:absolute; inset:0; border:0; padding:0; margin:0; border-radius:10px; overflow:hidden; cursor:zoom-in; background:#dfe7ea; width:100%; height:100% }
.a5-timg img, .a5-thumb > img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:10px }
.a5-tm{ position:absolute; right:8px; bottom:8px; font-size:11px; font-weight:700; color:#fff; background:rgba(14,54,59,.6); padding:1px 6px; border-radius:6px; pointer-events:none }
.a5-rm{ position:absolute; left:8px; bottom:8px; font-size:11px; font-weight:600; color:#16181a; background:rgba(255,255,255,.88); padding:1px 7px; border-radius:6px; pointer-events:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ap .a5-tagb.pa-tagpill{ position:absolute; left:8px; top:8px; z-index:1; font-family:inherit; font-size:11.5px; font-weight:700; min-height:0; padding:2px 7px 2px 9px; border-radius:999px; border:0; display:inline-flex; align-items:center; gap:3px; cursor:pointer }
.ap .a5-tagb.t-after{ background:#e2f4ee; color:#08513f } .ap .a5-tagb.t-damage{ background:#fbe4e1; color:#8a2a1c } .ap .a5-tagb.t-pet{ background:#fdf0d8; color:#7a5312 }
.a5-selc{ position:absolute; right:8px; top:8px; z-index:1; width:20px; height:20px; accent-color:#144d54; margin:0; cursor:pointer }
.a5-tog{ font-family:inherit; font-size:11.5px; font-weight:600; border-radius:999px; padding:2px 9px; border:1px solid #c9d0d4; background:#fff; color:#6b747b; cursor:pointer; align-self:flex-start }
.a5-tog.on{ background:#144d54; border-color:#144d54; color:#fff }
.a5-tog:focus-visible, .a5-tagb:focus-visible, .a5-mi:focus-visible, .a5-tchip:focus-visible{ outline:2px solid #ffd13a; outline-offset:2px }
.a5-menu{ position:absolute; left:8px; top:36px; background:#fff; border-radius:10px; box-shadow:0 10px 28px rgba(14,54,59,.22); padding:6px; display:flex; flex-direction:column; min-width:170px; z-index:6 }
.a5-mi{ font-family:inherit; font-size:13px; font-weight:600; text-align:left; background:none; border:0; padding:7px 10px; border-radius:7px; color:#16181a; display:flex; align-items:center; gap:8px; cursor:pointer }
.a5-mi:hover{ background:#f2f4f5 } .a5-mi.on{ background:#dceff0 } .a5-mi.a5-mic{ color:#1d6e77; border-top:1px solid #edf0f2; border-radius:0 0 7px 7px }
.a5-swatch{ width:10px; height:10px; border-radius:999px; flex:0 0 10px }
#apUsual:empty, #apArrBox:empty{ display:none }
.a5-phfoot{ padding:0 20px 14px }
/* Notes */
.a5-nchips{ padding:14px 20px 4px }
.a5-dl{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:6px 14px; align-items:baseline }
.a5-dt{ font-size:12.5px; font-weight:700; color:#1d6e77 }
.a5-dd{ color:#16181a; font-weight:500; overflow-wrap:anywhere }
.a5-code{ display:inline-flex; align-items:center; gap:8px; background:#e9ecee; border-radius:8px; padding:2px 4px 2px 10px; font-weight:600; color:#4d545a }
.a5-code button{ font-family:inherit; font-size:12px; font-weight:700; color:#1d6e77; background:#fff; border:1px solid #c9d0d4; border-radius:6px; padding:1px 8px; cursor:pointer }
.a5-code button:hover{ border-color:#1d6e77 } .a5-code button:focus-visible{ outline:2px solid #1d6e77; outline-offset:1px }
.ap5 .a5-nrow.a5-gi{ background:#f4f9f9; border-top:0; margin-top:10px }
.pa-pill.a5-dark{ background:#144d54; color:#fff }
.ap5 .a5-nrow.a5-already{ background:#fffaf0 }
.a5-nb{ font-weight:500; color:#16181a; white-space:pre-wrap; overflow-wrap:anywhere }
.a5-orig{ font-style:italic; margin-top:2px; white-space:pre-wrap }
.a5-es{ margin-top:4px; white-space:pre-wrap }
.a5-mt6{ margin-top:6px } .a5-mt8{ margin-top:8px } .a5-block{ display:block }
.a5-dimpill{ opacity:.7 }
.ap5 .a5-nrow.a5-retline{ padding-top:10px; padding-bottom:10px }
.a5-retire{ border:1px solid #dfe3e6; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; background:#fff; max-width:640px }
.a5-retire .a5-chips{ padding:0 }
.a5-rlbl{ font-size:12.5px; font-weight:700; color:#1d6e77 }
.a5-opt{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #dfe3e6; border-radius:10px; background:#fff; font:inherit; text-align:left; cursor:pointer; color:inherit }
.a5-opt.on{ border:2px solid #144d54; background:#f4f9f9 }
.a5-opt:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }
.a5-rd{ width:16px; height:16px; border-radius:999px; border:2px solid #9aa4ab; flex:0 0 16px; box-sizing:border-box }
.a5-opt.on .a5-rd{ border:5px solid #144d54 }
.a5-nums2{ display:flex; gap:28px; flex-wrap:wrap; padding:14px 20px 0; color:#16181a }
/* the Close out screen */
.clo-top{ padding:16px 20px; display:flex; flex-direction:column; gap:14px }
.clo-th{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.clo-h1{ margin:0; font-size:26px; font-weight:800; color:#16181a; letter-spacing:-0.03em }
.clo-sub{ font-size:13.5px }
.clo-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.clo-stp{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; min-width:0; border:2px solid transparent; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer }
.clo-stp:hover{ background:#f4f9f9 } .clo-stp:hover .clo-sname{ text-decoration:underline; text-underline-offset:3px }
.clo-stp.on{ background:#fffaf0; border-color:#ffd13a }
.clo-stp:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }
.clo-sn{ width:28px; height:28px; border-radius:999px; background:#e9ecee; color:#4d545a; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 28px }
.clo-sn.on{ background:#ffd13a; color:#144d54 }
.clo-sname{ font-weight:800; color:#16181a; font-size:15px; display:block }
.clo-block{ display:block }
.clo-grid{ display:grid; grid-template-columns:minmax(0,1fr) 600px; gap:20px; align-items:start }
.clo-left{ padding:16px 20px; display:flex; flex-direction:column; gap:14px; min-width:0 }
.clo-lh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.clo-ofn{ margin-left:auto; font-weight:700 }
.clo-big{ aspect-ratio:16/10; border-radius:12px; background:#dfe7ea; position:relative; overflow:hidden }
.clo-big img{ width:100%; height:100%; object-fit:contain; display:block }
.clo-empty{ display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; color:#4d545a; font-weight:600 }
.clo-bt{ position:absolute; left:14px; top:14px; font-size:13px; font-weight:700; padding:3px 10px; border-radius:999px; background:#ffd13a; color:#144d54 }
.clo-btm{ position:absolute; right:14px; bottom:14px; font-size:13px; font-weight:700; color:#fff; background:rgba(14,54,59,.6); padding:2px 8px; border-radius:6px }
.clo-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.92); border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#144d54; box-shadow:0 4px 12px rgba(14,54,59,.18) }
.clo-arrow:focus-visible{ outline:3px solid #ffd13a; outline-offset:2px }
.clo-prev{ left:14px } .clo-next{ right:14px }
.clo-full{ position:absolute; left:14px; bottom:14px; font-family:inherit; font-size:12.5px; font-weight:700; color:#144d54; background:rgba(255,255,255,.92); border:0; border-radius:8px; padding:4px 10px; cursor:pointer; text-decoration:underline }
.clo-find{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.clo-fk{ font-size:12.5px; font-weight:800; color:#1d6e77 }
.clo-gridp{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px }
.clo-ft{ aspect-ratio:4/3; border-radius:9px; background:#dfe7ea; position:relative; border:0; padding:0; cursor:pointer; font-family:inherit; overflow:hidden }
.clo-ft img{ width:100%; height:100%; object-fit:cover; display:block }
.clo-ft.on{ outline:3px solid #ffd13a; outline-offset:2px; overflow:visible }
.clo-ft.on img{ border-radius:9px }
.clo-ft:focus-visible{ outline:3px solid #1d6e77; outline-offset:2px }
.clo-l{ position:absolute; left:6px; bottom:6px; font-size:11px; font-weight:600; color:#16181a; background:rgba(255,255,255,.9); padding:1px 6px; border-radius:5px; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.clo-j{ position:absolute; left:6px; top:6px; font-size:10.5px; font-weight:800; color:#144d54; background:#ffd13a; padding:1px 7px; border-radius:999px }
.clo-right{ overflow:hidden; min-width:0 }
.clo-rh{ padding:14px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #dfe3e6 }
.clo-rh .pa-pill{ margin-left:auto }
.clo-gh{ padding:12px 16px 8px; font-size:12.5px; font-weight:800; color:#1d6e77; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.clo-ghapp{ border-top:1px solid #dfe3e6; margin-top:6px; padding-top:14px }
.clo-fold{ background:none; border:0; font:inherit; font-size:12.5px; font-weight:800; color:#1d6e77; display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px }
.clo-q{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-top:1px solid #edf0f2 }
.clo-q.on{ background:#fffaf0; box-shadow:inset 4px 0 0 #ffd13a }
.clo-q.clo-qapp{ grid-template-columns:minmax(0,1fr) auto auto }
.clo-qt{ min-width:0; cursor:pointer }
.clo-qt:hover .ap-nt{ text-decoration:underline; text-underline-offset:3px }
.clo-n500{ font-weight:500 }
.clo-qapp .clo-qt{ cursor:default } .clo-qapp .clo-qt:hover .ap-nt{ text-decoration:none }
.clo-mini{ width:64px; height:48px; border-radius:7px; background:#dfe7ea; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#8a2a1c; overflow:hidden }
.clo-mini img{ width:100%; height:100%; object-fit:cover; display:block }
.clo-mini.none{ background:#fbe4e1 }
.clo-mini:focus-visible{ outline:2px solid #1d6e77; outline-offset:2px }
.clo-pm{ display:inline-flex; gap:6px }
.clo-pb{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:10px; border:1px solid #c9d0d4; background:#fff; font-family:inherit; font-size:13px; font-weight:700; color:#4d545a; cursor:pointer }
.clo-pb svg{ flex:0 0 16px }
.clo-pb:hover{ border-color:#1d6e77 }
.clo-pb:focus-visible{ outline:2px solid #ffd13a; outline-offset:2px }
.clo-pb.sug{ border:2px dashed #1d6e77; color:#144d54; background:#f4f9f9 }
.clo-pb.sugm{ border:2px dashed #b3261e; color:#8a2a1c; background:#fff7f5 }
.clo-pb.pass{ background:#1d6e77; border-color:#1d6e77; color:#fff }
.clo-pb.miss{ background:#b3261e; border-color:#b3261e; color:#fff }
.clo-pb.clo-pbk{ height:24px; padding:0 8px; font-size:11.5px; cursor:default }
.clo-qw{ padding:0 16px 12px 92px }
.clo-words{ display:flex; flex-direction:column; gap:6px; margin-top:6px }
.clo-wrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.clo-wrow .pa-inp{ flex:1 1 220px; min-width:0 }
.clo-key{ display:flex; gap:14px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid #edf0f2; background:#f8fafa }
.clo-k1{ display:inline-flex; align-items:center; gap:6px }
.clo-foot{ padding:14px 16px; border-top:1px solid #dfe3e6; display:flex; flex-direction:column; gap:10px }
.clo-grade{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.clo-donerow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.clo-revrow{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
/* narrower windows */
@media (max-width: 1360px){ .ap5 .ap-top.a5-hero{ grid-template-columns:minmax(0,1fr) 480px } .clo-grid{ grid-template-columns:minmax(0,1fr) 520px } }
@media (max-width: 1240px){
  .ap5 .ap-top.a5-hero{ grid-template-columns:minmax(0,1fr) }
  .a5-stages{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .a5-glance{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .a5-glance .a5-gc:nth-child(4n+1){ border-left:0 } .a5-glance .a5-gc:nth-child(n+5){ border-top:1px solid #e6eaec }
  .a5-pg{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  .clo-grid{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width: 1100px){ .a5-qa{ grid-template-columns:minmax(0,1fr) } .a5-pg{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
body.phone .ap5 .ap-top.a5-hero{ padding:18px 16px 12px; gap:14px }
body.phone .ap .ap-h1.a5-h1{ font-size:28px }
body.phone .a5-sub{ margin:6px 0 0 0; gap:8px 12px }
body.phone .a5-svc{ font-size:16px }
body.phone .a5-nums{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
body.phone .a5-stages{ grid-template-columns:repeat(2,minmax(0,1fr)) }
body.phone .a5-glance{ grid-template-columns:repeat(2,minmax(0,1fr)) }
body.phone .a5-glance .a5-gc{ border-left:0; border-top:1px solid #e6eaec } body.phone .a5-glance .a5-gc:nth-child(2n){ border-left:1px solid #e6eaec }
body.phone .a5-glance .a5-gc:nth-child(-n+2){ border-top:0 }
body.phone .a5-qa{ grid-template-columns:minmax(0,1fr); padding:14px 16px }
body.phone .a5-pg{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
body.phone .ap5 .a5-nrow{ grid-template-columns:minmax(0,1fr); gap:8px; padding:14px 16px }
body.phone .a5-dl{ grid-template-columns:minmax(0,1fr); gap:2px }
body.phone .a5-dl .a5-dd{ margin-bottom:6px }
body.phone .a5-prow, body.phone .a5-chips, body.phone .a5-line, body.phone .a5-inv{ padding-left:16px; padding-right:16px }
body.phone .a5-selbar, body.phone .a5-ask{ margin-left:16px; margin-right:16px }
body.phone .a5-ivs{ display:none }
body.phone .clo-steps{ grid-template-columns:minmax(0,1fr) }
body.phone .clo-gridp{ grid-template-columns:repeat(3,minmax(0,1fr)) }
body.phone .clo-q{ grid-template-columns:48px minmax(0,1fr); }
body.phone .clo-q .clo-pm, body.phone .clo-q > .pa-pill{ grid-column:1 / -1 }
body.phone .clo-pb{ height:44px; flex:1 1 0; justify-content:center }
body.phone .clo-pm{ display:flex }
body.phone .clo-qw{ padding:0 16px 12px }
body.phone .clo-h1{ font-size:22px }
/* Session 375: the brief asks the hero to be no taller than 320 px at a 1440 wide window (the drawing itself is 382 there, 300 at 1920).
   Below 1600 px only: the hero's buttons are the small size, the stage bar is tighter, and each stage's words keep to one line (the full
   words are its tooltip and on Change history). At 1600 and wider it is as drawn. */
@media (min-width: 1241px) and (max-width: 1599px){
  .ap5 .ap-top.a5-hero > .a5-cc{ grid-row:1 }
  .ap5 .ap-top.a5-hero > .a5-btns{ grid-column:1 / -1 }
}
@media (max-width: 1240px){ .ap5 .ap-top.a5-hero > .a5-heroL, .ap5 .ap-top.a5-hero > .a5-cc, .ap5 .ap-top.a5-hero > .a5-btns, .ap5 .ap-top.a5-hero > .a5-stages{ grid-column:1; grid-row:auto } }
@media (min-width: 701px) and (max-width: 1599px){
  .ap5 .a5-btns{ gap:8px }
  .ap5 .a5-btns .pa-btn{ height:34px; padding:0 12px; font-size:13px }
  .ap5 .ap-top.a5-hero{ row-gap:12px; padding-top:18px }
  .a5-stages{ padding-top:8px }
  .a5-sbtn{ padding:8px 10px }
  .a5-sw{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .a5-heroL{ gap:10px }
}

/* Session 376: the office's side of the host's visit summary (host-summary.js): Settings > Messaging rows, the client card, Close out. */
.hs-set{ margin-top:18px }
.hs-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:8px 18px; padding:12px 18px; border-top:1px solid var(--pa-line, #edf0f2); align-items:start }
.hs-row.first{ border-top:0 }
.hs-row.editing{ background:#f8fafa }
.hs-l{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.hs-lt{ color:#16181a; font-weight:600 }
.hs-v{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0 }
.hs-val{ color:#16181a; white-space:pre-wrap; overflow-wrap:anywhere; flex:1 1 220px }
.hs-btns{ display:inline-flex; gap:8px; margin-left:auto }
.hs-ta{ width:100%; min-height:72px; font-family:inherit; font-size:14px; flex:1 1 100% }
.hs-num{ width:120px }
.hs-sub{ padding-top:14px; padding-bottom:4px; font-weight:700 }
.hs-ppl td, .hs-ppl th{ vertical-align:middle }
.hs-ppl tr.hs-landed > td{ background:var(--pa-teal-100) }   /* session 382: the person Users > Hosts > Open came to */
.hs-ppl tr.hs-landed > td:first-child{ box-shadow:inset 3px 0 0 var(--cp-ring) }
.hs-clo .pa-kv{ align-items:flex-start }
.hs-k{ margin-top:12px }
.hs-bubble{ background:#e9ecee; border-radius:16px 16px 16px 6px; padding:10px 14px; font-size:14px; line-height:1.45; color:#16181a; margin-top:6px; overflow-wrap:anywhere }
.hs-offf{ margin-top:10px }
.oi-shrow .pa-inp{ max-width:320px; margin:4px 0 }
@media (max-width:700px){ .hs-row{ grid-template-columns:minmax(0,1fr); padding:12px 14px } .hs-btns{ margin-left:0 } }
/* Session 394 (Daniel, 26 October 2026: "I also want the Name of the Property to be the Headline (not the address). Address should be prominent
   underneath."): the property page's title is the Property Name; the full address, a Google Maps link, is the line under it. */
.pa-hero .pa-cityline.pa-addrrow{ margin:12px 0 0 0 }
.pa .pa-addrlink.pa-addrfull{ align-items:center; gap:8px }
.pa-addrlink.pa-addrfull svg{ margin-top:0; flex:0 0 22px }
.pa-addrfull .pa-city-hero{ color:#fff; font-size:22px; font-weight:600 }
.pa-addrfull .pa-city-hero.pa-noaddr{ color:rgba(255,255,255,.72) }
body.phone .pa-hero .pa-cityline.pa-addrrow{ margin:8px 0 0 0 }
body.phone .pa-addrfull .pa-city-hero{ font-size:17px }
body.phone .pa-addrlink.pa-addrfull svg{ width:20px; height:20px; flex:0 0 20px; margin-top:0 }
/* Session 394: the appointment page's title is the Property Name; the street, a Google Maps link, is the line under it. */
.ap .a5-addr.a5-street{ display:flex; margin-top:10px; font-size:19px; font-weight:600; gap:8px }
.ap .a5-addr.a5-street .ap-pin{ flex:0 0 20px }
body.phone .ap .a5-addr.a5-street{ font-size:16px; min-height:44px }

/* ==========================================================================================================================================
   Session 406 (briefs/session-406-brief.md D; mh-property-overview-mockups-v1/1-overview-one-column.html, its stylesheet the specification):
   the property Overview in one column. Content 1480 wide, centred (the page's --pa-wrap); 18px between cards; each card's facts label over value
   across the width (auto-fill, 240px columns, a 1px #edf0f2 line above and right of each); a group row ("Each visit"); tables; the bottom line.
   Scoped to .pa1 so the client page's cards (which share .pa-card) are unchanged.
   ========================================================================================================================================== */
.pa1{ display:flex; flex-direction:column; gap:var(--pa1-gap); max-width:var(--pa-wrap); width:100%; margin:0 auto; min-width:0 }
.pa1 > .pa-card{ background:#fff; border-radius:var(--pa-radius-card); box-shadow:var(--pa-shadow-card); min-width:0 }
.pa1 .pa-ch{ padding:var(--pa1-head-pad); gap:12px; border-bottom:1px solid var(--pa-line) }
.pa1 .pa-ic{ width:var(--pa1-icon); height:var(--pa1-icon); flex:0 0 var(--pa1-icon); border-radius:10px; background:var(--pa-teal-900) }
.pa1 .pa-ic svg{ width:19px; height:19px }
.pa1 .pa-ct{ font-size:17px; font-weight:700; color:var(--pa-ink); letter-spacing:-0.015em; line-height:1.2 }
.pa1 .pa-ch .pa-cs{ font-size:12.5px; color:var(--pa-muted) }
.pa1 .pa-ed{ margin-left:auto; font-size:13px; font-weight:600; color:var(--pa-teal-600); background:#fff; border:1px solid var(--pa-input-line); padding:6px 12px; border-radius:9px }
.pa1-facts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--pa1-fact-min), 1fr)); gap:0; margin-top:-1px }
.pa1-fact{ padding:14px 20px; border-top:1px solid var(--pa-line-soft); border-right:1px solid var(--pa-line-soft); display:flex; flex-direction:column; gap:4px; min-width:0 }
.pa1-fl{ font-size:12.5px; color:var(--pa-muted); font-weight:600 }
.pa1-v{ font-size:14px; color:var(--pa-ink); font-weight:600; overflow-wrap:anywhere }
.pa1-sub{ font-size:12.5px; color:var(--pa-muted); font-weight:450 }
.pa1-no{ color:var(--pa-muted); font-weight:500 }
.pa1-yes{ color:var(--pa-green-text); font-weight:600 }
.pa1-big{ font-size:24px; font-weight:800; color:var(--pa-ink); letter-spacing:-0.03em; line-height:1.1 }
.pa1-grp{ grid-column:1 / -1; padding:12px 20px 8px; font-size:12.5px; font-weight:700; color:var(--pa-teal-600); border-top:1px solid var(--pa-line); background:var(--pa1-soft) }
.pa1-grp + .pa1-fact, .pa1-grp ~ .pa1-fact{ border-top:0 }
.pa1-chips{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 20px }
.pa1-chipk{ margin-right:4px }
.pa1-chipk2{ margin-left:18px }
.pa1-has{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; background:var(--pa-teal-100); color:var(--pa-teal-900); font-weight:600; font-size:13.5px }
.pa1-hasnt{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; background:var(--pa-page); color:var(--pa-muted); font-weight:500; font-size:13.5px }
.pa1-gline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--pa-line); background:var(--pa1-soft); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.pa1-gline.pa1-warn{ color:var(--pa-amber-text); background:var(--pa-amber-soft) }
.pa1 .pa-btn.pa1-gbtn{ height:36px }
.pa1-tw{ overflow-x:auto }
.pa1-t{ width:100%; border-collapse:collapse }
.pa1 .pa1-t th{ text-align:left; font-size:12.5px; font-weight:600; color:var(--pa-text); background:var(--pa-page); padding:10px 20px; border-bottom:1px solid var(--pa-line); white-space:nowrap; text-transform:none; letter-spacing:normal; border-top:0 }
.pa1 .pa1-t td{ padding:11px 20px; border-top:1px solid var(--pa-line-soft); border-bottom:0; vertical-align:middle }
.pa1-nw{ white-space:nowrap }
.pa1-lst{ display:flex; align-items:center; gap:12px }
.pa1-lpic{ width:72px; height:48px; border-radius:8px; background:#e7eef0; flex:0 0 72px; display:flex; align-items:center; justify-content:center; color:var(--pa-muted) }
.pa1-url{ overflow-wrap:anywhere }
.pa1-open{ font-weight:600; font-size:13px; color:var(--pa-teal-600); text-decoration:underline; text-underline-offset:2px }
.pa1-lsadd{ padding:16px 20px; border-top:1px solid var(--pa-line); background:var(--pa1-soft); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.pa1-lsadd .pa-inp{ max-width:640px }
.pa1-lsb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px }
.pa1-lsr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pa1-lsr .pa-inp{ width:260px; height:36px }
.pa1-edit .pa-card{ min-width:0 }
.pa-statusline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pa-statusrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pa-actseg button{ min-width:92px }
.pa-actask{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.pa-actask label{ font-weight:600; color:var(--pa-ink) }
.pa-actask .pa-inp{ width:320px; max-width:100%; height:38px }
.pa-acterr{ color:var(--danger-text, #a2271b); font-weight:600; font-size:13px }
.pr-book{ font-size:13px; color:var(--pa-text) }
.pr-book.pr-ical{ color:var(--pa-green-text); font-weight:600 }
/* On a phone the mockup's own numbers hold (its stylesheet has no phone rules): the facts' auto-fill gives one per row, the head and icon stay. */
body.phone .pa1 .pa-ch{ padding:var(--pa1-head-pad); gap:12px }
body.phone .pa1 .pa-ic{ width:var(--pa1-icon); height:var(--pa1-icon); flex:0 0 var(--pa1-icon) }
body.phone .pa1 .pa-ct{ font-size:17px }
body.phone .pa1-chipk2{ margin-left:0; flex-basis:100% }
body.phone .pa1 .pa1-t th, body.phone .pa1 .pa1-t td{ padding-left:14px; padding-right:14px }

/* Session 406 (brief C3; 2-resort-notes-en.html): a Resort note cleaned, a 190px heading column then the lines; codes as label over dots. */
.rn1-g{ display:grid; grid-template-columns:var(--rn1-head) minmax(0, 1fr); gap:0 24px; padding:14px 20px; border-top:1px solid var(--pa-line-soft) }
.rn1-g:first-child{ border-top:0 }
.rn1-h{ font-size:13px; font-weight:700; color:var(--pa-teal-600); padding-top:1px }
.rn1-l{ display:flex; flex-direction:column; gap:7px; color:var(--pa-ink); font-weight:500; max-width:980px }
.rn1-li{ display:flex; gap:10px; align-items:flex-start }
.rn1-li::before{ content:""; width:5px; height:5px; border-radius:99px; background:var(--pa-teal-300); flex:0 0 5px; margin-top:8px }
.rn1-codes{ display:flex; flex-wrap:wrap; gap:10px }
.rn1-code{ display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:10px; background:var(--pa-page); min-width:170px }
.rn1-code b{ font-size:12.5px; color:var(--pa-text); font-weight:600 }
.rn1-dots{ font-size:15px; font-weight:800; color:var(--pa-ink); letter-spacing:.18em }
.rn1-val{ font-size:15px; font-weight:800; color:var(--pa-ink); letter-spacing:.02em }
.rn1-bar{ display:flex; align-items:center; gap:14px; margin-left:auto }
.rn1-lk{ color:var(--pa-teal-600); font-weight:600; text-decoration:underline; text-underline-offset:2px; background:none; border:0; font-family:inherit; font-size:13px; cursor:pointer; padding:0 }
.rn1-lk:hover{ color:var(--pa-teal-900) }
.rn1-lk:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px; border-radius:4px }
.rn1-orig{ white-space:pre-wrap; padding:14px 20px; border-top:1px solid var(--pa-line-soft); background:var(--pa1-soft); color:var(--pa-ink) }
.rn1-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--pa-line); background:var(--pa1-soft); border-radius:0 0 var(--pa-radius-card) var(--pa-radius-card) }
.rn1-card + .rn1-card{ border-top:6px solid var(--pa-page) }
body.phone .rn1-g{ grid-template-columns:1fr; gap:6px 0; padding:12px 16px }
.qn-tr{ display:inline-block; margin-left:6px; font-size:12px; color:var(--pa-muted); font-weight:600 }

/* Session 406 (brief C5): the Hub's EN | SP switch, at the right of the top bar (2-resort-notes-en.html .lang). */
.mh-lang{ display:inline-flex; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:3px; gap:2px; flex:0 0 auto }
.mh-lang button{ font-family:inherit; font-size:12.5px; font-weight:700; color:#fff; background:none; border:0; border-radius:999px; padding:5px 12px; cursor:pointer; letter-spacing:.02em }
.mh-lang button.on{ background:var(--pa-yellow); color:var(--pa-teal-900) }
.mh-lang button:hover:not(.on){ background:rgba(255,255,255,.14) }
.mh-lang button:focus-visible{ outline:2px solid var(--pa-teal-300); outline-offset:2px }

/* ============================================================
   Session 407 (briefs/session-407-brief.md part D; mh-appointments-mockups-v1 2-appointment-page-navy.html, 1440): the appointment page in navy.
   Daniel, 27 October 2026: "design options with the Appointments Page and Appointment-Specific pages to be slightly different color than Property
   Pages"; "Appointment ID#... I think it needs to be in the Appointment info in the green box (but small)". Only the appointment page (.ap5): the
   Property page stays teal. The drawing's values, the navy family from tokens.css (--mh-navy*). The hero's narrower-screen rules above are kept.
   ============================================================ */
.ap5 .ap-top.a5-hero{ background:var(--mh-navy-band); padding:18px 26px 12px; grid-template-columns:minmax(0,1fr) 500px; gap:14px 32px }
.a5-eyebrow{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.8); flex-wrap:wrap }
.a5-eyebrow .a5-esq{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.14); display:inline-flex; align-items:center; justify-content:center }
.a5-eyebrow b{ color:#fff; font-weight:700 }
.a5-eyebrow .a5-rc{ color:rgba(255,255,255,.6); font-size:11.5px }
.ap5 .a5-pills{ display:flex; gap:8px; flex-wrap:wrap }
.ap5 .a5-pill{ display:inline-flex; align-items:center; gap:7px; padding:3px 11px 3px 4px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; background:rgba(255,255,255,.12); color:#fff; border:0; font-family:inherit; line-height:normal; text-decoration:none }
.ap5 button.a5-pill{ cursor:pointer } .ap5 button.a5-pill:hover, .ap5 a.a5-pill:hover{ background:rgba(255,255,255,.2); text-decoration:none }
.ap5 .a5-pill.plain{ padding:3px 11px }
.ap5 .a5-pill.moved{ background:var(--apl-yellow-tint); color:var(--apl-on-yellow) }
.ap5 .a5-pill.amber{ background:#fdf0d8; color:#7a5312 }
.ap5 .a5-pill .apl-sq, .ap5 .a5-pill .apl-circ{ width:22px; height:22px }
.ap5 .a5-pill .apl-sq{ border-radius:6px }
.ap5 .a5-svc{ font-size:15px; color:var(--mh-sky) }
.ap5 a.a5-lk{ color:var(--mh-sky); text-decoration-color:rgba(169,212,255,.45) }
.ap5 a.a5-lk:hover{ text-decoration-color:var(--mh-sky) }
.ap5 .a5-addr.a5-street{ font-size:17px }
.ap5 .ap-top .pa-btn.pa-dk{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff }
.ap5 .a5-av{ background:var(--mh-navy-tint); color:var(--mh-navy) }
.ap5 a.a5-ccname{ color:var(--mh-navy) }
.ap5 .a5-cc .pa-ed{ color:var(--mh-navy) }
.ap5 .a5-stages{ border-top-color:rgba(255,255,255,.16) }
.ap5 .pa-tab.on, body.phone .ap5 .ap-tabs .pa-tab.on{ background:var(--mh-navy); border-color:var(--mh-navy); color:#fff }
.ap5 .pa-ic, .ap5 .ap-nowic{ background:var(--mh-navy); color:#fff }
@media (max-width: 1360px){ .ap5 .ap-top.a5-hero{ grid-template-columns:minmax(0,1fr) 480px } }

/* Session 407 (part E; 5-same-day-switch.html, 5a-same-day-switch-off.html): the same-day switch card under the hero. */
.a5-sd{ background:#fff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08); padding:18px 20px; display:flex; flex-direction:column; gap:14px; color:var(--apl-text) }
.a5-sdh{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.a5-sdsw{ width:48px; height:28px; border-radius:999px; border:0; padding:3px; cursor:pointer; display:flex; background:var(--apl-line2); justify-content:flex-start; flex:none }
.a5-sdsw[aria-checked=true]{ background:var(--apl-green); justify-content:flex-end }
.a5-sdsw[disabled]{ cursor:default; opacity:.85 }
.a5-sdsw span{ width:22px; height:22px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); display:block }
.a5-sdsw:focus-visible{ outline:2px solid var(--apl-teal); outline-offset:2px }
.a5-sdt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.a5-sdt b{ font-size:16px; font-weight:800; color:var(--apl-ink); letter-spacing:-0.015em }
.a5-sdt span{ font-size:12.5px; color:var(--apl-muted) }
.a5-tagged{ display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:700; background:var(--apl-green-tint); color:var(--apl-on-green); box-shadow:inset 0 0 0 1.5px var(--apl-green); margin-left:auto }
.a5-sdb{ display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--apl-line); padding-top:14px }
.a5-lbl{ font-size:12.5px; font-weight:600; color:var(--apl-text) }
.a5-sd .a5-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:0 }   /* the older .a5-chips (the page's chip rows) has its own padding */
.a5-chip{ border:0; font:inherit; font-size:13px; font-weight:600; border-radius:999px; padding:8px 13px; cursor:pointer; background:var(--apl-s2); color:var(--apl-ink) }
.a5-chip:hover{ background:#dde2e5 }
.a5-chip[aria-pressed=true]{ background:var(--apl-teal); color:#fff }
.a5-sdf{ display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap }
.a5-sdf label{ display:flex; flex-direction:column; gap:6px }
.a5-sdf label.grow{ flex:1 1 260px }
.a5-sdf input{ border:1.5px solid var(--apl-line2); border-radius:10px; padding:9px 12px; font:inherit; font-size:14px; color:var(--apl-ink) }
.a5-sdf input.t{ width:130px; font-weight:600 }
.a5-sdf input:focus{ outline:2px solid var(--apl-sky); outline-offset:0; border-color:var(--apl-sky) }
.a5-sdn{ font-size:12.5px; color:var(--apl-muted); line-height:1.45 }
.a5-sda{ display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap }
.a5-sda .bad{ color:var(--apl-on-orange); font-weight:700; font-size:12.5px; margin-right:auto }
.a5-sd .apl-btn2, .a5-sd .apl-btny{ font-family:inherit }
.a5-sd .apl-btn2{ padding:9px 16px } .a5-sd .apl-btny{ padding:10px 18px }
/* Session 409 (briefs/session-409-brief.md D4): what turning a home Inactive does (under the switch in Edit), and an Inactive home's Resort appointments
   still to cancel in Resort (under its reason in the header). */
.pa-actplan{ flex-basis:100%; display:block }
.pa-actplan:empty{ display:none }
.pa-plan{ display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.4; background:var(--pa-amber-bg); color:var(--pa-amber-text); border-radius:10px; padding:10px 12px }
.pa-plan b{ font-weight:700 }
.pa-planh{ font-weight:700; margin-top:4px }
.pa-plan ul, .pa-cancelrs ul{ margin:2px 0 0; padding-left:18px }
.pa-plan a, .pa-cancelrs a{ font-weight:700; text-decoration:underline; color:inherit }
.pa-plan .pa-cs{ color:inherit }
.pa-cancelrs{ display:inline-block; font-size:13px; color:#fff; margin-left:8px }
.pa-cancelrs summary{ cursor:pointer; font-weight:700; text-decoration:underline }
.pa-cancelrs summary:focus-visible{ outline:2px solid var(--pa-yellow); outline-offset:2px }
.pa-cancelrs[open]{ display:block; margin:6px 0 0; background:rgba(255,255,255,.1); border-radius:10px; padding:8px 12px }