#page-clientportal{ overflow-y:auto; padding-top:12px; }
/* PAGE CHROME (2026-09-13): no centered cap — the page's 24px gutter is the one inset every page shares. */
#page-clientportal .cp-wrap{ max-width:none; margin:0; }
.cp-banner{ display:flex;align-items:flex-start;gap:10px;background:linear-gradient(90deg,rgba(47,161,173,.14),rgba(47,161,173,.03));border:1px solid rgba(47,161,173,.32);border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:12.5px;color:var(--text2,#aeb6c2);line-height:1.5 }
.cp-banner b{ color:var(--text) }
.cp-banner svg{ width:18px;height:18px;flex:none;color:#5cc6d1;margin-top:1px }
.cp-search{ width:100%;background:#0d0f13;border:1px solid var(--border);border-radius:9px;color:var(--text);padding:10px 12px;font:inherit;font-size:13px;margin-bottom:14px;box-sizing:border-box }
.cp-pick{ display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px }
.cp-pcard{ text-align:left;cursor:pointer;border:1px solid var(--border);background:#13161b;border-radius:12px;padding:14px;transition:border-color .15s,transform .05s;font:inherit;width:100% }
.cp-pcard:hover{ border-color:var(--teal,#2fa1ad);transform:translateY(-1px) }
.cp-pcard .nm{ font-weight:800;color:var(--text);font-size:15px }
.cp-pcard .ad{ color:var(--text3);font-size:12px;margin-top:2px }
.cp-pcard .ph{ display:inline-block;margin-top:9px;font-size:11px;font-weight:700;color:#5cc6d1;background:rgba(47,161,173,.16);border-radius:20px;padding:2px 9px }
.cp-back{ cursor:pointer;background:none;border:none;color:var(--text3);font:inherit;font-size:12.5px;padding:0;margin-bottom:0;display:inline-flex;align-items:center;gap:6px }
.cp-back:hover{ color:var(--text) }
/* HEADER STACK COMPACTED (2026-09-15, Ryan: "top two banners take up way too much space, can't see
   the widgets below"). The page's .ph banner is the required cross-page chrome (v195); the hero is
   the second header. Both the hero and the Needs-attention card below are slimmed and the gaps
   tightened so the tabs + real content rise into view. */
.cp-hero{ position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:14px;border:1px solid rgba(47,161,173,.28);background:linear-gradient(120deg,#171c22 0%,#12161b 55%,#0f1318 100%);border-radius:14px;padding:11px 16px;margin-bottom:12px;box-shadow:0 6px 24px rgba(0,0,0,.28) }
.cp-hero::after{ content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(47,161,173,.16),transparent 70%);pointer-events:none }
.cp-logo{ width:40px;height:40px;border-radius:11px;position:relative;overflow:hidden;background:linear-gradient(165deg,#121a22,#05080b);border:1px solid rgba(55,179,192,.45);flex:none;box-shadow:0 4px 14px rgba(0,0,0,.4) }
.cp-logo::before{ content:'';position:absolute;inset:0;background:radial-gradient(85% 60% at 50% 74%,rgba(55,179,192,.28),transparent 70%) }
.cp-logo .bm-t{ position:absolute;left:0;right:0;top:19%;text-align:center;font-weight:900;font-size:12px;line-height:1;letter-spacing:.5px;color:#fff;font-family:'Hanken Grotesk',Arial,sans-serif }
.cp-logo svg{ position:absolute;inset:0;width:100%;height:100% }
.cp-h-name{ font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.3px;font-family:Fraunces,serif }
.cp-h-sub{ color:var(--text3);font-size:11.5px;margin-top:1px }
.cp-prog{ flex:1;min-width:180px }
.cp-prog .pl{ display:flex;justify-content:space-between;font-size:11px;color:var(--text2);margin-bottom:5px;font-weight:600 }
.cp-prog .bar{ height:8px;border-radius:5px;background:#0b0d11;overflow:hidden;border:1px solid var(--border) }
.cp-prog .fill{ height:100%;background:linear-gradient(90deg,#2fa1ad,#5cc6d1);box-shadow:0 0 12px rgba(92,198,209,.5) }
.cp-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start }
@media(max-width:760px){ .cp-grid{ grid-template-columns:1fr } }
.cp-card{ border:1px solid var(--border);background:linear-gradient(180deg,#15191f,#111419);border-radius:14px;padding:16px 17px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.2) }
.cp-card h3{ font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text2,#aeb6c2);margin:0 0 12px;font-weight:800 }
.cp-step{ display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--border) }
.cp-step:first-child{ border-top:none }
.cp-dot{ width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:2px solid var(--border);color:var(--text3);background:#0d0f13 }
.cp-step.done .cp-dot{ background:#54d3a2;border-color:#54d3a2;color:#05271c }
.cp-step.cur .cp-dot{ background:var(--teal,#2fa1ad);border-color:var(--teal,#2fa1ad);color:#04222a;box-shadow:0 0 0 4px rgba(47,161,173,.18) }
.cp-step .t{ font-weight:700;color:var(--text);font-size:13.5px }
.cp-step.up .t{ color:var(--text3);font-weight:600 }
.cp-step .b{ color:var(--text3);font-size:12px;margin-top:3px;line-height:1.5 }
.cp-step .tag{ font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-left:8px;color:#5cc6d1 }
/* ── Payment schedule: premium KPI tiles + a status-coded draw timeline ── */
.cp-tiles{ display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px }
@media(max-width:620px){ .cp-tiles{ grid-template-columns:repeat(2,1fr) } }
.cp-tile{ position:relative;overflow:hidden;background:linear-gradient(180deg,#12161c,#0c0e12);border:1px solid var(--border);border-radius:13px;padding:13px 15px;min-width:0 }
/* Stat tiles: values wear TEXT ink, never a status color — a number isn't a state.
   One quiet neutral tick on every tile; only "Due now" (the actionable one) gets the
   warning tick, and even then the tick alone carries it, not the number. */
.cp-tile::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#39424e }
.cp-tile.tone-due::before{ background:#e7b45a }
.cp-tile.tone-bal::before{ background:#5cc6d1 }
.cp-tile .l{ font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:700;line-height:1.35 }
.cp-tile .v{ font-size:21px;font-weight:800;color:var(--text);margin-top:5px;font-family:Fraunces,serif;letter-spacing:-.4px }

.cp-draw{ position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px 11px 17px;border-radius:11px;font-size:13px;color:var(--text);transition:background .12s }
.cp-draw + .cp-draw{ margin-top:5px }
/* Row status lives in the small tick + pill ONLY; amounts stay in text ink
   (de-emphasis by LIGHTNESS for future rows, never by hue). */
.cp-draw::before{ content:'';position:absolute;left:5px;top:11px;bottom:11px;width:3px;border-radius:3px;background:#39424e }
.cp-draw:hover{ background:rgba(255,255,255,.025) }
.cp-draw.st-next::before{ background:#5cc6d1 }
.cp-draw.st-due::before{ background:#e7b45a }
.cp-draw.st-pastdue::before{ background:#e0566f }
.cp-draw.st-paid::before{ background:#54d3a2 }
.cp-draw.st-paid{ color:var(--text2) }
.cp-draw .amt{ margin-left:auto;font-weight:700;font-family:Fraunces,serif;font-size:14.5px;color:var(--text);white-space:nowrap;letter-spacing:-.2px }
/* Admin toggle: does this phase draw offer online (Stripe ACH) payment? (task #87) */
.cp-draw-onl{ margin-left:auto;flex:0 0 auto;border:1px solid rgba(84,211,162,.5);background:rgba(84,211,162,.12);color:#7ee2a8;border-radius:8px;padding:7px 11px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;min-height:40px }
.cp-draw-onl:hover{ background:rgba(84,211,162,.2) }
.cp-draw-onl.off{ border-color:rgba(231,180,90,.55);background:rgba(231,180,90,.12);color:#e7b45a }
.cp-draw-onl.off:hover{ background:rgba(231,180,90,.22) }
.cp-draw-onl + .amt{ margin-left:12px }
.cp-draw.st-paid .amt{ color:var(--text2) } .cp-draw.st-paid .amt::before{ content:'✓ ';font-size:11px;font-family:var(--font-ui,system-ui) }
.cp-draw.st-up .amt,.cp-draw.st-unbilled .amt{ color:var(--text3);font-weight:600 }
/* change-order line — teal-tinted, distinct from the phase draws */
.cp-draw-co{ align-items:flex-start;background:rgba(47,161,173,.055);border:1px solid rgba(47,161,173,.16);padding-top:10px;padding-bottom:10px }
.cp-draw-co::before{ background:#5cc6d1;opacity:1 } .cp-draw-co:hover{ background:rgba(47,161,173,.1) }
.cp-co-tag{ display:inline-block;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#5cc6d1;background:rgba(47,161,173,.14);border:1px solid rgba(47,161,173,.3);border-radius:5px;padding:1px 6px;vertical-align:1px;margin-right:2px }
/* footer totals — a clean summary strip */
.cp-total-wrap{ margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:2px }
.cp-draw-total{ font-weight:800;padding:6px 13px 6px 17px }
.cp-draw-total::before{ display:none }
.cp-pill{ font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 10px;border-radius:20px;flex:none;white-space:nowrap }
.cp-pd-paid{ background:rgba(84,211,162,.16);color:#54d3a2 } .cp-pd-due{ background:rgba(231,180,90,.16);color:#e7b45a } .cp-pd-up{ background:#1a1e25;color:var(--text3) }
.cp-up{ display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--border) }
.cp-up:first-child{ border-top:none }
.cp-up img{ width:88px;height:66px;object-fit:cover;border-radius:8px;flex:none;border:1px solid var(--border) }
.cp-up .meta{ display:flex;align-items:center;gap:8px }
.cp-up .d{ font-size:11px;color:var(--text3) }
.cp-up .x{ font-size:13px;color:var(--text);margin-top:3px;line-height:1.5;white-space:pre-wrap }
.cp-up .del{ cursor:pointer;color:var(--text3);font-size:11px;margin-left:auto }
.cp-up .del:hover{ color:#e88 }
.cp-row{ display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:13px;color:var(--text) }
.cp-row:first-child{ border-top:none }
.cp-row .sub{ color:var(--text3);font-size:11.5px }
.cp-doc-thumb{ width:44px;height:44px;flex:none;border-radius:8px;border:1px solid var(--border);object-fit:cover;cursor:pointer;background:#0d0f13 }
.cp-doc-thumb.ph{ display:inline-flex;align-items:center;justify-content:center;font-size:19px }
.cp-chip{ cursor:pointer;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:4px 11px;border-radius:20px;border:1px solid var(--border);background:#0d0f13;color:var(--text2);margin-left:auto;flex:none;transition:color .12s,border-color .12s,background .12s }
.cp-chip:not(.cp-chip-static):hover{ color:#5cc6d1;border-color:rgba(47,161,173,.5);background:rgba(47,161,173,.08) }
/* A client's chosen/confirmed tile: the chip is a plain status badge, not a button. */
.cp-chip-static{ cursor:default }
.cp-sel-selected{ color:#54d3a2;border-color:rgba(84,211,162,.4) }
/* selection state ramp: yellow (in progress) -> green (final) */
.cp-sel-yellow{ color:#e7c34a;border-color:rgba(231,195,74,.5);background:rgba(231,195,74,.10) }
.cp-sel-green{ color:#54d3a2;border-color:rgba(84,211,162,.5);background:rgba(84,211,162,.12) }
/* inline "what was actually chosen" editor — available to both team and client */
.cp-sel-item{ position:relative;background:linear-gradient(180deg,#151a20,#10141a);border:1px solid var(--border);border-radius:12px;padding:12px 14px 12px 16px;margin-bottom:10px;transition:border-color .12s,background .12s }
.cp-sel-item::before{ content:'';position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px;background:#5a626d;opacity:.4 }
.cp-sel-item:hover{ border-color:rgba(47,161,173,.3) }
.cp-sel-item:has(.cp-sel-yellow)::before{ background:#e7c34a;opacity:1 }
.cp-sel-item:has(.cp-sel-green)::before{ background:#54d3a2;opacity:1 }
.cp-sel-item .cp-row{ border-top:none }
.cp-sel-edit{ width:100%;box-sizing:border-box;margin:11px 0 0;background:#0b0d11;border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:12.5px;padding:8px 10px }
.cp-sel-edit::placeholder{ color:var(--text3) } .cp-sel-edit:focus{ outline:none;border-color:#5cc6d1 }
.cp-ins-pending{ color:var(--text3) } .cp-ins-scheduled{ color:#e7b45a;border-color:rgba(231,180,90,.4) } .cp-ins-passed{ color:#54d3a2;border-color:rgba(84,211,162,.4) }
.cp-muted{ color:var(--text3);font-size:12.5px;padding:8px 2px;line-height:1.5 }
.cp-comp{ display:flex;flex-direction:column;gap:9px;margin-top:12px;padding-top:13px;border-top:1px solid var(--border) }
/* Drop target for documents. Dashed until something is over it, then it lights up — the
   only moment the user needs certainty is mid-drag, when the cursor is not theirs. */
.cp-drop{ border:2px dashed var(--border);border-radius:12px;padding:18px 14px;text-align:center;
  cursor:pointer;transition:border-color .12s ease,background .12s ease,transform .12s ease;
  background:rgba(255,255,255,.012);user-select:none }
.cp-drop:hover{ border-color:var(--blue-m,#5cc6d1);background:rgba(92,198,209,.05) }
.cp-drop:focus-visible{ outline:2px solid var(--blue-m,#5cc6d1);outline-offset:2px }
.cp-drop.on{ border-color:var(--blue-m,#5cc6d1);border-style:solid;background:rgba(92,198,209,.11);transform:scale(1.01) }
.cp-drop.busy{ opacity:.6;pointer-events:none }
.cp-drop-ic{ font-size:20px;line-height:1;color:var(--blue-m,#5cc6d1);margin-bottom:5px }
.cp-drop-t{ font-size:13.5px;font-weight:700;color:var(--text2) }
.cp-drop-s{ font-size:11.5px;color:var(--text3);margin-top:3px }
.cp-comp textarea{ width:100%;background:#0d0f13;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 11px;font:inherit;font-size:13px;line-height:1.5;resize:vertical;min-height:104px;box-sizing:border-box }
.cp-comp .r{ display:flex;align-items:center;gap:9px;flex-wrap:wrap }
.cp-msg-err{ font-size:12px;color:#e88;line-height:1.4 }
.cp-msg-del{ cursor:pointer;color:var(--text3);align-self:flex-start;padding:2px 4px;border-radius:6px;flex-shrink:0 }
.cp-msg-del:hover{ color:#e0566f;background:rgba(224,86,111,.12) }
.cp-comp input[type=file]{ font-size:11.5px;color:var(--text3);max-width:200px }
.cp-warr{ font-size:12.5px;color:var(--text2,#aeb6c2);line-height:1.6 }
.cp-warr b{ color:var(--text) }
.cp-attn{ border-color:rgba(47,161,173,.42);background:linear-gradient(135deg,rgba(47,161,173,.13),rgba(47,161,173,.03) 60%,#12161b);padding:11px 15px;margin-bottom:12px }
/* Collapsible — the strip is useful, but it shouldn't own the top of the page forever.
   The state sticks (per device) for the team and the client alike. Compacted 2026-09-15. */
.cp-attn > h3.cp-attn-h{ display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;margin-bottom:8px }
.cp-attn-cv{ display:inline-block;font-size:11px;color:var(--text3);transition:transform .16s var(--ease,ease);line-height:1 }
.cp-attn-n{ margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:2px 9px;border-radius:20px;
  background:rgba(224,162,59,.16);color:#f0c887;border:1px solid rgba(224,162,59,.42);text-transform:none }
.cp-attn-n.ok{ background:rgba(63,178,127,.14);color:#8fe3bf;border-color:rgba(63,178,127,.4) }
.cp-attn.closed > h3.cp-attn-h{ margin-bottom:0 }
.cp-attn.closed .cp-attn-cv{ transform:rotate(-90deg) }
.cp-attn.closed .cp-attn-body{ display:none }
/* Links inside the portal read as links — the browser's dark navy on our dark ground
   was effectively invisible (owner: "impossible to see"). */
#page-clientportal a{ color:var(--blue-m,#5cc6d1);text-decoration-color:rgba(92,198,209,.45);text-underline-offset:2px }
#page-clientportal a:hover{ color:#8fe3bf;text-decoration-color:rgba(143,227,191,.6) }
.cp-msg-text{ width:100%;background:#0d0f13;border:1px solid var(--border);border-radius:8px;color:var(--text);
  padding:10px 11px;font:inherit;font-size:13px;line-height:1.5;resize:vertical;min-height:104px;box-sizing:border-box;outline:none }
.cp-msg-text:focus{ border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,154,166,.18) }
/* SIGN-HERE hero + pulsing row CTA — the client can't miss where to sign. */
.cp-sign-banner{display:flex;align-items:center;gap:14px;border-radius:14px;padding:14px 18px;margin:-2px 0 16px;background:linear-gradient(135deg,rgba(224,162,59,.20),rgba(224,162,59,.06));border:1px solid rgba(224,162,59,.55);animation:cpSignGlow 2.4s ease-in-out infinite}
.cp-sign-banner .csb-ic{font-size:22px;flex:none}
.cp-sign-banner .csb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-sign-banner .csb-t>b{font-size:14.5px;color:#f0c887;letter-spacing:-.1px}
.cp-sign-banner .csb-t>span{font-size:12px;color:var(--text3);line-height:1.4}
.csb-btn{background:linear-gradient(180deg,#e7b45a,#d99c2e);color:#3d2e00;border:1px solid #b8821c;border-radius:10px;padding:12px 20px;font-size:13.5px;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(224,162,59,.30);flex:none}
.csb-btn:hover{filter:brightness(1.07)}
.cp-chip.cp-sign-cta{background:linear-gradient(180deg,#e7b45a,#d99c2e);color:#3d2e00;border-color:#b8821c;font-weight:800;animation:cpSignGlow 2.4s ease-in-out infinite}
/* Pay online: Apple-Pay-style white pill — adds no new hue to the card (the due badge +
   amounts already carry the amber), and nothing pops harder on a dark card than white. */
.cp-payol{background:#f4f6f8;color:#0d1319;border:1px solid #fff;border-radius:999px;padding:4px 13px;font-size:11px;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cp-payol:hover{background:#fff}
/* A draw whose bank debit is still clearing: same pill, but plainly not a button — no
   hover, no pointer, no click. It reads as status, which is what it is. */
.cp-payol-wait{background:rgba(240,200,135,.16);color:#f0c887;border-color:rgba(240,200,135,.5);cursor:default;box-shadow:none}
.cp-payol-wait:hover{background:rgba(240,200,135,.16)}
@keyframes cpSignGlow{0%,100%{box-shadow:0 0 0 0 rgba(224,162,59,0)}50%{box-shadow:0 0 0 5px rgba(224,162,59,.16)}}
.cp-attn-row{ display:flex;align-items:center;gap:12px;padding:8px 12px;margin:1px -4px;border-radius:10px;font-size:13.5px;color:var(--text);transition:background .12s }
.cp-attn-row.act{ cursor:pointer } .cp-attn-row.act:hover{ background:rgba(255,255,255,.035) }
.cp-attn-ic{ width:9px;height:9px;border-radius:50%;flex:none;color:#5cc6d1;background:currentColor;box-shadow:0 0 9px currentColor }
.cp-attn-ic.choose{ color:#5cc6d1 } .cp-attn-ic.pay{ color:#e7b45a } .cp-attn-ic.ok{ color:#54d3a2 }
.cp-attn-t{ font-weight:700 }
.cp-attn-sub{ color:var(--text2,#aeb6c2);margin-left:6px;font-weight:700 }
.cp-attn-go{ margin-left:auto;color:var(--text3);font-size:18px;line-height:1 }
.cp-attn-row.act:hover .cp-attn-go{ color:var(--teal,#2fa1ad) }
.cp-flash{ animation:cpflash 1.2s ease }
@keyframes cpflash{ 0%,100%{ box-shadow:none } 25%,60%{ box-shadow:0 0 0 2px var(--teal,#2fa1ad) } }
/* ── tabbed layout (no-scroll: only the active panel shows) ── */
.cp-tabs{ display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;padding-bottom:2px;-webkit-overflow-scrolling:touch }
.cp-tab{ cursor:pointer;white-space:nowrap;flex-shrink:0;font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.2px;color:var(--text3);background:#0d0f13;border:1px solid var(--border);border-radius:20px;padding:7px 15px;transition:color .12s,background .12s,border-color .12s }
.cp-tab:hover{ color:var(--text);border-color:var(--blue-m) }
.cp-tab.on{ color:#04222a;background:linear-gradient(90deg,#2fa1ad,#5cc6d1);border-color:transparent }
.cp-tab .ct-badge{ display:inline-block;min-width:16px;height:16px;line-height:16px;text-align:center;font-size:10px;border-radius:9px;background:#e7b45a;color:#3a2a06;margin-left:6px;padding:0 4px }
.cp-tab.on .ct-badge{ background:rgba(4,34,42,.25);color:#04222a }
.cp-panel{ display:none } .cp-panel.on{ display:block }
/* ── selections: calm rows — the name edits in place (admin), controls stay quiet until hover ── */
.cp-sel-name{ background:transparent;border:none;border-bottom:1px dashed transparent;border-radius:0;color:var(--text);font:inherit;font-weight:700;padding:0 2px 1px;min-width:60px;max-width:240px;outline:none;transition:border-color .12s }
.cp-sel-item:hover .cp-sel-name{ border-bottom-color:var(--border) }
.cp-sel-name:focus{ border-bottom:1px solid var(--blue,#2fa1ad) }
.cp-sel-item .cp-fin-rm{ opacity:0;transition:opacity .12s }
.cp-sel-item:hover .cp-fin-rm,.cp-sel-item .cp-fin-rm:focus{ opacity:1 }
.cp-dl-set{ opacity:.5;transition:opacity .12s }
.cp-sel-item:hover .cp-dl-set,.cp-dl-set:focus{ opacity:1 }
/* payments: the states a client actually needs to read */
/* "Up next" carries the BRAND teal — the one forward-looking marker on the card
   (quiet outline, not a fill, so it never competes with the due/paid status pills). */
.cp-pill.cp-pd-next{ background:transparent;color:#5cc6d1;border:1px solid rgba(92,198,209,.45) }
.cp-pill.cp-pd-past{ background:rgba(224,86,111,.16);color:#e88;border:1px solid rgba(224,86,111,.45) }
/* the admin's status dropdown wears the same pill skin */
select.cp-draw-set{ appearance:none;-webkit-appearance:none;font:inherit;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:20px;padding:3px 10px;cursor:pointer;outline:none }
select.cp-draw-set option{ background:#14181e;color:#dfe4ea;text-transform:none;letter-spacing:0;font-weight:600 }
/* a change-order line's billing-stage picker (quiet, under the CO label) */
select.cp-draw-stage{ appearance:none;-webkit-appearance:none;font:inherit;font-size:11px;font-weight:600;color:var(--text2,#aab0b8);background:var(--bg2,#14181e);border:1px solid var(--border);border-radius:7px;padding:3px 8px;cursor:pointer;outline:none;max-width:220px }
select.cp-draw-stage:focus{ border-color:var(--blue,#2fa1ad) }
.cp-draw-co{ align-items:flex-start }
/* ── ONE-PAGE desktop portal (owner spec: a client never scrolls the page on desktop —
   long lists scroll INSIDE their card instead). Active only while a portal is open
   (cpd-fit) and on real desktop viewports; phones/short windows keep normal scrolling. */
@media (min-width:900px) and (min-height:640px){
  #page-clientportal.cpd-fit{ overflow:hidden }
  #page-clientportal.cpd-fit.active{ display:flex;flex-direction:column }
  #page-clientportal.cpd-fit .cp-wrap{ flex:1;min-height:0;display:flex;flex-direction:column;max-width:none;width:100% }
  #page-clientportal.cpd-fit .cp-panel.on{ flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden }
  #page-clientportal.cpd-fit .cp-panel.on > .cp-card{ flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:0 }
  /* the phase ladder keeps its natural height; the two columns absorb the rest of the fold */
  #page-clientportal.cpd-fit .cp-panel.on > .cp-prog-card{ flex:none }
  /* The attention strip is a LIST and grows without bound — on a 720p laptop it took 269px,
     more than the tab content itself, and pushed the Build panel into clipping its own cards.
     Cap it to a share of the fold and let the extra items scroll inside it, so the progress
     ladder + updates + photos are always visible without scrolling the page. */
  #page-clientportal.cpd-fit .cp-attn{ flex:none;max-height:24vh;overflow-y:auto }
  #page-clientportal.cpd-fit .cp-2col{ display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0;align-items:stretch }
  #page-clientportal.cpd-fit .cp-col{ display:flex;flex-direction:column;min-width:0;min-height:0 }
  #page-clientportal.cpd-fit .cp-col > .cp-card:last-child,#page-clientportal.cpd-fit .cp-col > .cp-now:only-child{ flex:1;min-height:0 }
  #page-clientportal.cpd-fit .cp-col > .cp-card{ display:flex;flex-direction:column;min-height:0 }
  #page-clientportal.cpd-fit .cp-scroll-y{ flex:1;min-height:0;overflow-y:auto }
  #page-clientportal.cpd-fit .cp-selgrid{ flex:1;min-height:0;overflow-y:auto }
  /* schedule embed: the calendar becomes the single internal scroll region — no double scroll.
     display needs !important here: the base embed rule below forces display:block!important,
     which un-flexed this container and let the calendar overflow past the fold (owner bug). */
  #page-clientportal.cpd-fit .cp-panel.on > .cp-sched-embed{ flex:1;min-height:0;display:flex !important;flex-direction:column;overflow:hidden }
  /* flex:1 needs !important too — the base embed rule (.cp-sched-embed .split{flex:none!important})
     otherwise wins by !important and un-grows the split, leaving dark space below the calendar
     on a tall monitor (Ryan, 2026-09-16: "calendar isn't taking up the full bottom of the screen"). */
  #page-clientportal.cpd-fit .cp-sched-embed .split{ display:flex !important;flex-direction:column;flex:1 !important;min-height:0 }
  #page-clientportal.cpd-fit .cp-sched-embed .split>.panel:last-child{ flex:1;min-height:0;margin-bottom:0 }
  #page-clientportal.cpd-fit .cp-sched-embed .calwrap{ max-height:none !important;flex:1;min-height:0;overflow-y:auto }
  /* the calendar grid fills the calwrap so the weeks stretch to the bottom instead of a dark gap.
     In the client embed the #js-calendar id is stripped (jpScheduleClientHTML), so the base
     "#jp-schedule #js-calendar" fill rule never lands — target the surviving .jscal class. */
  #page-clientportal.cpd-fit .cp-sched-embed .jscal{ flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto }
  #page-clientportal.cpd-fit .cp-sched-embed .week,#page-clientportal.cpd-fit .cp-sched-embed .cell{ min-height:44px }
  /* payments: the DRAW LIST is the card's internal scroll region — rows can never spill
     out of the bubble or shove "How to pay" off the page (owner bug: cut-offs + stray text) */
  #page-clientportal.cpd-fit #cp-sec-invest{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden }
  #page-clientportal.cpd-fit #cp-sec-invest > *{ flex:none }
  #page-clientportal.cpd-fit #cp-sec-invest > .cp-drawlist{ flex:1 1 auto;min-height:0;overflow-y:auto }
  /* The schedule card GROWS; "How to pay" stays content-sized. Without the grow, both cards
     shrank to fit and the schedule was crushed to a couple hundred pixels — one draw row and
     a clipped second, no visible scrollbar, which on a full monitor read as "I can't see the
     payment schedule" (Ryan, 2026-08-17). */
  #page-clientportal.cpd-fit .cp-col > #cp-sec-invest{ flex:1 1 auto;min-height:0 }
  /* "How to pay" owns the RIGHT column now (2026-08-17 — the messages bubble is gone from
     Payments); it grows with its column and scrolls inside itself. The schedule keeps the
     whole LEFT column. */
  #page-clientportal.cpd-fit .cp-col > #cp-sec-payinfo{ flex:1 1 auto;min-height:0;overflow-y:auto }
  /* warranty: three equal-height columns. Every card either FLEXES (and scrolls inside
     itself) or is FIXED at its natural height — so the whole tab always ends at the fold,
     which is the owner's rule: the client never scrolls to read anything. */
  #page-clientportal.cpd-fit .cp-w-grid{ display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;flex:1;min-height:0;align-items:stretch }
  #page-clientportal.cpd-fit .cp-w-grid > .cp-col{ display:flex;flex-direction:column;min-width:0;min-height:0;gap:16px }
  #page-clientportal.cpd-fit .cp-w-grid > .cp-col > .cp-card{ display:flex;flex-direction:column;min-height:0;margin-bottom:0 }
  #page-clientportal.cpd-fit .cp-w-grid > .cp-col > .cp-card.cp-w-flex{ flex:1 1 0;min-height:92px }
  /* the request form takes its natural height when there's room and shrinks (scrolling
     inside itself) on a short laptop — it never pushes anything past the fold, and it can
     never eat so much of the column that "Keeping your warranty valid" collapses. */
  #page-clientportal.cpd-fit .cp-w-grid > .cp-col > .cp-card.cp-w-fixed{ flex:0 1 auto;min-height:92px;max-height:70% }
}
@media (max-width:1200px){ .cp-w-grid .cp-w-resp,.cp-w-grid .cp-w-note{ font-size:11px } }
/* ── warranty (client portal) ── */
.cp-w-since{ font-size:12.5px;color:var(--text3);line-height:1.55;margin-bottom:10px }
.cp-w-since b{ color:var(--text2) }
.cp-w-row{ display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border) }
.cp-w-row:first-child{ border-top:none;padding-top:2px }
.cp-w-main{ flex:1;min-width:0 }
.cp-w-item{ font-size:13px;font-weight:700;color:var(--text) }
.cp-w-per{ font-size:11.5px;color:var(--text2);margin-top:1px }
.cp-w-thru{ font-size:11.5px;color:var(--text3);margin-top:1px }
.cp-w-note{ font-size:11px;color:var(--text3);line-height:1.5;margin-top:4px;opacity:.85 }
.cp-w-chip{ flex:none;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:3px 9px;border-radius:20px;white-space:nowrap;text-transform:uppercase }
.cp-w-ok{ background:rgba(63,178,127,.16);color:#8fe3bf;border:1px solid rgba(63,178,127,.42) }
.cp-w-soon{ background:rgba(224,162,59,.14);color:#f0c887;border:1px solid rgba(224,162,59,.42) }
.cp-w-off{ background:rgba(229,83,75,.13);color:#f0a49f;border:1px solid rgba(229,83,75,.4) }
.cp-w-mfr{ background:rgba(255,255,255,.05);color:var(--text3);border:1px solid var(--border) }
.cp-w-log{ padding:9px 0;border-top:1px solid var(--border) }
.cp-w-log:first-child{ border-top:none;padding-top:2px }
.cp-w-log-h{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px }
.cp-w-tag{ font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.05);color:var(--text3);border:1px solid var(--border) }
.cp-w-tag.me{ background:rgba(55,179,192,.14);color:#8fd8e2;border-color:rgba(55,179,192,.42) }
.cp-w-log-d{ font-size:11px;color:var(--text3) }
.cp-w-log-b{ font-size:12.5px;color:var(--text2);margin-top:4px;white-space:pre-wrap }
.cp-w-log-m{ font-size:11px;color:var(--text3);margin-top:2px }
.cp-w-shots{ display:flex;gap:6px;flex-wrap:wrap;margin-top:6px }
.cp-w-shots img{ width:78px;height:58px;object-fit:cover;border-radius:6px;border:1px solid var(--border) }
.cp-w-reply{ margin-top:6px;padding:7px 10px;border-left:3px solid var(--blue-m,#37b3c0);background:rgba(55,179,192,.07);border-radius:0 8px 8px 0;font-size:12.5px;color:var(--text2) }
.cp-w-reply span{ display:block;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#8fd8e2;margin-bottom:2px }
.cp-w-state{ display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-right:7px;vertical-align:1px }
.cp-w-state.pre{ background:rgba(255,255,255,.05);color:var(--text3);border:1px solid var(--border) }
.cp-w-state.live{ background:rgba(63,178,127,.16);color:#8fe3bf;border:1px solid rgba(63,178,127,.42) }
.cp-w-state.ended{ background:rgba(229,83,75,.13);color:#f0a49f;border:1px solid rgba(229,83,75,.4) }
.cp-w-form{ display:flex;flex-direction:column;gap:8px }
/* inputs use the app's own field styling, not the browser's defaults */
.cp-w-in{ border:1px solid var(--border);border-radius:var(--r-sm,8px);padding:8px 11px;font-size:12.5px;color:var(--text);background:#13161b;width:100%;outline:none;font-family:inherit;transition:all .15s }
.cp-w-in:hover{ border-color:var(--gray-m) }
.cp-w-in:focus{ border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,154,166,.18) }
textarea.cp-w-in{ resize:vertical;line-height:1.5 }
select.cp-w-in{ appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238c98a6' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center }
.cp-w-pick{ display:flex;align-items:center;gap:9px }
.cp-w-pick input[type=file]{ position:absolute;width:1px;height:1px;opacity:0;pointer-events:none }
.cp-w-picklab{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text2);background:#252b33;border:1px solid var(--border);border-radius:var(--r-sm,8px);padding:7px 13px;cursor:pointer;transition:all .15s;white-space:nowrap }
.cp-w-picklab:hover{ border-color:var(--blue);color:var(--text) }
.cp-w-pickn{ font-size:11.5px;color:var(--text3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.cp-w-pickn.has{ color:#8fe3bf;font-weight:600 }
.cp-w-fee{ margin-top:9px;font-size:11.5px;line-height:1.55;color:var(--text3);padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--border) }
.cp-w-fee.ok{ border-color:rgba(63,178,127,.4);background:rgba(63,178,127,.07) }
.cp-w-fee.off{ border-color:rgba(229,83,75,.32);background:rgba(229,83,75,.06) }
.cp-w-fee b{ color:#8fe3bf }
.cp-w-resp{ padding:7px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text3);line-height:1.55 }
.cp-w-resp:first-child{ border-top:none;padding-top:0 }
.cp-w-resp b{ color:var(--text2);display:block;margin-bottom:2px }
.cp-w-lim{ margin-top:4px;padding-left:10px;border-left:2px solid var(--border) }
/* ── horizontal phase stepper ── */
.cp-stepper{ display:flex;align-items:flex-start;margin:2px 0 14px;overflow-x:auto;padding-bottom:4px }
.cp-sd{ flex:1 1 0;min-width:62px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative }
.cp-sd::before{ content:'';position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0 }
.cp-sd:first-child::before{ display:none }
.cp-sd.done::before,.cp-sd.cur::before{ background:#54d3a2 }
.cp-sd .dot{ position:relative;z-index:1;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;border:2px solid var(--border);background:#0d0f13;color:var(--text3) }
.cp-sd.done .dot{ background:#54d3a2;border-color:#54d3a2;color:#05271c }
.cp-sd.cur .dot{ background:var(--teal,#2fa1ad);border-color:var(--teal,#2fa1ad);color:#04222a;box-shadow:0 0 0 4px rgba(47,161,173,.18) }
.cp-sd .lb{ font-size:9.5px;line-height:1.25;margin-top:6px;color:var(--text3);max-width:76px }
.cp-sd.cur .lb{ color:var(--text);font-weight:700 }
/* ── YOUR BUILD: the phase ladder. Every phase of the job on one line so the client sees the
   whole journey and exactly where their pool is — done ✓ / in progress / still ahead. Sized to
   fit the no-scroll portal: one compact row, never its own scrollbar. ── */
.cp-prog-card{ background:#0d0f13;border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden }
.cp-ladder{ display:flex;align-items:flex-start;gap:0;padding:12px 14px 10px;overflow:hidden }
.cpl-foot{ display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 14px 11px;border-top:1px solid var(--border-2,#2a313a);
  background:rgba(255,255,255,.015) }
.cpl-now-t{ font-size:13px;font-weight:800;color:var(--text);flex:none }
.cpl-now-b{ font-size:12px;color:var(--text2,#aeb6c2);line-height:1.45;flex:1;min-width:140px }
.cpl-next{ font-size:11.5px;color:var(--text3);white-space:nowrap;flex:none }
.cpl-next b{ color:var(--blue-m,#37b3c0);font-weight:700 }
@media(max-width:760px){ .cpl-now-b{ flex:1 1 100% } .cpl-next{ flex:1 1 100% } }
.cpl-step{ flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 2px }
/* connector track between dots — drawn behind, clipped at the ends */
.cpl-step::before,.cpl-step::after{ content:'';position:absolute;top:9px;height:2px;background:var(--border-2,#2a313a);z-index:0 }
.cpl-step::before{ left:0;right:50% }
.cpl-step::after{ left:50%;right:0 }
.cpl-step:first-child::before,.cpl-step:last-child::after{ display:none }
.cpl-step.done::before,.cpl-step.done::after,.cpl-step.now::before{ background:var(--money,#3fb27f) }
.cpl-dot{ position:relative;z-index:1;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;background:#151a20;border:2px solid var(--border-2,#2a313a);color:var(--text3);flex:none }
.cpl-step.done .cpl-dot{ background:var(--money,#3fb27f);border-color:var(--money,#3fb27f);color:#06231a }
.cpl-step.now .cpl-dot{ background:var(--blue-m,#37b3c0);border-color:var(--blue-m,#37b3c0);color:#04222a;
  box-shadow:0 0 0 4px rgba(55,179,192,.18);animation:cplPulse 2.4s ease-in-out infinite }
@keyframes cplPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(55,179,192,.18) } 50%{ box-shadow:0 0 0 7px rgba(55,179,192,.07) } }
.cpl-lab{ font-size:10.5px;font-weight:700;line-height:1.25;margin-top:6px;color:var(--text3);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }
.cpl-step.done .cpl-lab{ color:var(--text2,#aeb6c2) }
.cpl-step.now .cpl-lab{ color:var(--text);font-weight:800 }
.cpl-when{ font-size:9.5px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100% }
.cpl-step.now .cpl-when{ color:var(--blue-m,#37b3c0);font-weight:700 }
@media(max-width:760px){ .cp-ladder{ padding:10px 8px 8px } .cpl-lab{ font-size:9px } .cpl-when{ display:none } }
.cp-now{ background:#0d0f13;border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:14px }
.cp-now .ph{ font-size:14px;font-weight:800;color:var(--text) }
.cp-now .bl{ font-size:12.5px;color:var(--text2,#aeb6c2);margin-top:4px;line-height:1.55 }
.cp-now .nt{ font-size:11.5px;color:var(--text3);margin-top:8px }
.cp-now-lbl{ font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:5px }
.cp-now .ph{ font-size:17px }
.cp-next{ display:flex;align-items:baseline;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--border);flex-wrap:wrap }
.cp-next .nl{ font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#5cc6d1 }
.cp-next .nn{ font-weight:700;color:var(--text) }
.cp-next .nd{ color:var(--text3);font-size:11.5px;margin-left:auto }
.cp-gallery{ display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px }
.cp-ph{ position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3 }
.cp-ph img{ width:100%;height:100%;object-fit:cover;display:block }
.cp-ph .cp-ph-d{ position:absolute;left:0;right:0;bottom:0;font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62));padding:12px 7px 5px }
.cp-ph-stage{ font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#5cc6d1;margin:14px 0 7px } .cp-ph-stage:first-child{ margin-top:0 }
/* ── finishes: admin add control + optional badge ── */
.cp-fin-add{ display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:13px;border-top:1px solid var(--border) }
.cp-fin-add select,.cp-fin-add input{ background:#0d0f13;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 9px;font:inherit;font-size:12.5px }
.cp-fin-rm{ cursor:pointer;color:var(--text3);font-size:16px;line-height:1;margin-left:8px;flex:none;border:none;background:none;padding:0 4px }
.cp-fin-rm:hover{ color:#e88 }
.cp-optbadge{ font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#5cc6d1;background:rgba(47,161,173,.14);border-radius:10px;padding:1px 6px;margin-left:7px }
/* ── schedule (calendar) status pills ── */
.cp-sst{ font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:20px;flex:none;margin-left:auto }
.cp-sst-done{ background:rgba(84,211,162,.16);color:#54d3a2 }
.cp-sst-prog{ background:rgba(47,161,173,.18);color:#5cc6d1 }
.cp-sst-scheduled{ background:rgba(231,180,90,.16);color:#e7b45a }
.cp-sst-delay{ background:rgba(231,90,90,.18);color:#f0a0a0 }
.cp-sst-notscheduled{ background:#1a1e25;color:var(--text3) }
/* ── embedded read-only Job-Portal calendar: fit it into the portal column, stack list over calendar ── */
#jp-schedule.cp-sched-embed{ height:auto!important;min-height:0!important;display:block!important;background:transparent }
/* compact KPI strip — one slim row of four, so the calendar owns the page (owner request) */
#jp-schedule.cp-sched-embed .summary{ grid-template-columns:repeat(4,1fr)!important;gap:8px!important;margin-bottom:8px }
#jp-schedule.cp-sched-embed .kpi{ padding:8px 12px }
#jp-schedule.cp-sched-embed .kpi .lab{ margin-bottom:2px;font-size:9.5px }
#jp-schedule.cp-sched-embed .kpi .big{ font-size:15px }
#jp-schedule.cp-sched-embed .kpi .big.phase{ font-size:12.5px }
#jp-schedule.cp-sched-embed .kpi .sub{ font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
#jp-schedule.cp-sched-embed .legend{ margin-bottom:6px }
@media (max-width:980px){ #jp-schedule.cp-sched-embed .summary{ grid-template-columns:1fr 1fr!important } }
#jp-schedule.cp-sched-embed .split{ grid-template-columns:1fr!important;flex:none!important;display:block!important }
#jp-schedule.cp-sched-embed .split>.panel:first-child{ display:none }          /* hide the full build-phases list — the calendar is the focus */
#jp-schedule.cp-sched-embed .panel{ margin-bottom:12px }
#jp-schedule.cp-sched-embed .calwrap{ max-height:58vh;overflow-y:auto }        /* bounded, scrollable calendar — page through the weeks */
#jp-schedule.cp-sched-embed .dow{ position:sticky;top:0;background:var(--panel);z-index:3;padding-top:4px } /* keep Sun–Sat visible while scrolling */
#jp-schedule.cp-sched-embed .week{ min-height:58px }
#jp-schedule.cp-sched-embed .legend .lg:last-child{ display:none } /* hide the admin "set a date / drag" hint */
#jp-schedule.cp-sched-embed .cal-empty{ display:none }            /* hide the admin empty-state instruction */
/* the ‹ / Today / › view-nav is dead in the client snapshot (jpScheduleClientHTML strips the
   onclick handlers) and unneeded — the natural span already renders every scheduled week, so the
   client just scrolls. Hide the inert buttons; the month-range label (.cm) stays. */
#jp-schedule.cp-sched-embed .calnav{ display:none }