/* Compass Security — every style in the toolkit.
 * Split out of index.html on 16 Jul 2026. Kasie: the file was 2,560 lines with the colours,
 * the machinery and the screens all shuffled together, and twice in one day a rule silently
 * overrode another one. Colours live here now, alone.
 *
 * The spacing knobs (--sp-*) at the top are what the ?tune=1 panel drives.
 * The colour system is documented in TEAM77_CHANGELOG.md §3 — read that before changing a hex.
 */
/* ===== SPACING KNOBS =====
   Every gap a person would actually want to nudge, named, in one place. Kasie, 16 Jul 2026:
   she wants to fine-tune spacing herself instead of it taking three messages to move something
   8px. These feed the live tuning panel (open any screen with ?tune=1).

   THE VALUES BELOW ARE THE CURRENT ONES, UNCHANGED. Converting them to variables must move
   nothing on screen - that is the whole test. If a number here differs from what the rule used
   to say, that is a bug, not a tweak. */
:root{
  --sp-screen-top:0px;   /* .pad        - top of every screen */
  --sp-screen-bot:0px;   /* .pad        - bottom of every screen */
  --sp-hero-top:0px;     /* .pickhero   - above the region eyebrow */
  --sp-hero-bot:18px;     /* .pickhero   - below "Choose a tool" */
  --sp-tile-gap:18px;     /* .tiles / .lp-grid - between cards */
  --sp-card-pad:18px;     /* .card       - inside the SR Generator box */
  --sp-sec-gap:6px;       /* .sec.cl / .sec.req - between Part bands */
  --sp-lp-hero-top:38px;  /* .lp-hero    - above the headset on the landing page */
  --sp-lp-hero-bot:0px;  /* .lp-hero    - below the intro paragraph */
  --sp-side:18px;         /* .container  - left/right page margin */
}
:root{--red:#D63827;--redd:#BC2525;--char:#4C4C4C;--head:#58595B;--ink:#333;--gray:#6D6D6D;--bg:#F4F4F4;--line:#E4E4E4;--bord:#B8B8B8;--maxw:1040px}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{background:var(--bg);font:15px/1.55 'Mulish','Segoe UI',Arial,sans-serif;color:var(--ink);display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-side)}
.top{background:#fff;border-bottom:1px solid var(--line)}
.top .container{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;padding-bottom:10px}
.top h1{font-size:clamp(16px,4.4vw,19px);font-weight:700;color:var(--red);line-height:1.15}
.top h1 em{font-style:normal;font-weight:400;color:var(--head)}
.rule{width:46px;height:2px;background:var(--red);margin-top:6px}
.topright{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.meter{font-size:12px;color:var(--gray)}.meter b{color:var(--head);font-weight:700}
.back{background:none;border:none;color:var(--gray);font:600 12px 'Mulish',Arial,sans-serif;cursor:pointer;padding:2px 0}
.back:hover{color:var(--red)}
main{flex:1;overflow-y:auto}
body.chat-mode main{overflow:hidden}
.pad{padding:var(--sp-screen-top) 0 var(--sp-screen-bot)}   /* was 20/28 - trimmed with .pickhero, Kasie 16 Jul: too much whitespace */
.lead{color:var(--gray);font-size:13.5px;text-align:center;margin-bottom:16px}
#screen-picker{background:linear-gradient(180deg,#ffffff,#FBFBFB 55%,var(--bg));padding-bottom:36px}
/* padding was 34/26 on top of the screen's own 20/28 - Kasie, 16 Jul: "too much white space and
   margin above and below the content". 16/18 here. NOTE the big whitespace she was seeing is NOT
   this: the Wix page gives the iframe a fixed 1137px for ~450px of hub content, plus a 99px empty
   SITE_HEADER and a 40px empty SITE_FOOTER. Those are three settings in the Wix editor, not CSS. */
.pickhero{text-align:center;padding:var(--sp-hero-top) 0 var(--sp-hero-bot)}
/* the eyebrow is a tinted pill in --outbg/--mpzone - the same shades Box 1/Box 2 use, so the hero
   borrows from the system instead of inventing a colour. --outbg falls back to #faf9f7 outside a
   region screen, so this is safe anywhere. */
.pickeyebrow{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--deep);background:var(--outbg);
  border:1px solid var(--mpedge);padding:5px 12px;border-radius:999px;margin-bottom:0}
.pickh2{font-size:clamp(21px,4vw,27px);font-weight:800;color:var(--deep);letter-spacing:-.01em;margin-top:10px}
/* echoes the red 3px underline under every band on the site */
.pickh2::after{content:'';display:block;width:44px;height:3px;background:var(--red);
  border-radius:2px;margin:10px auto 0}
.picksub{color:var(--gray);font-size:14px;margin-top:10px}
.tiles{display:flex;gap:var(--sp-tile-gap);flex-wrap:wrap;justify-content:center;align-items:stretch}
a.tile{text-decoration:none;color:inherit}
.tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;flex:1 1 250px;min-width:240px;max-width:300px;padding:24px 20px 18px;cursor:pointer;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tile::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),var(--redd))}
.tile.off::before{background:var(--bord)}
.tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12);border-color:transparent}
.tile.off{cursor:default;background:#fbfbfb}
.tile.off:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.05);border-color:var(--line)}
.tile .code{font-size:30px;font-weight:800;color:var(--red);letter-spacing:.01em;line-height:1;margin-top:4px}
.tile.tool .code{font-size:21px}
.tile.hub .code{font-size:22px}
.tile.off .code{color:#a6acb2}
.tile .name{font-size:14px;color:var(--head);font-weight:700;margin-top:7px}
.tile .tprog{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--red);margin-top:4px}
.tile.off .tprog{color:#a6acb2}
.tile .desc{font-size:13px;color:var(--gray);margin-top:10px;line-height:1.55;flex:1}
.tile .topen{margin-top:18px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:6px}
.tile .topen.muted{color:#a6acb2}
.tile .topen .arw{transition:transform .18s}
.tile:hover .topen .arw{transform:translateX(4px)}
.tile .flag{position:absolute;top:16px;right:16px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:5px}
.flag.live{background:#e9f7ef;color:#1c7a45}.flag.soon{background:#eef0f2;color:#8a8a8a}.flag.free{background:#fbeae7;color:var(--redd)}
.flag.live::before{content:'';width:6px;height:6px;border-radius:50%;background:#1c7a45;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(28,122,69,.45)}70%{box-shadow:0 0 0 6px rgba(28,122,69,0)}100%{box-shadow:0 0 0 0 rgba(28,122,69,0)}}
.pickfoot{text-align:center;color:#b3b7bb;font-size:11.5px;letter-spacing:.04em;margin-top:36px}
.card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:var(--sp-card-pad);max-width:660px;margin:0 auto;width:100%}
.card h2{font-size:17px;color:var(--red);margin-bottom:4px}
.card .sub{font-size:12.5px;color:var(--gray);margin-bottom:14px}
.field{margin-bottom:9px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--head);margin-bottom:4px}
select,input[type=text],input[type=date]{width:100%;background:#fff;border:1px solid var(--bord);border-radius:3px;color:var(--ink);padding:10px 12px;font-size:16px;outline:none;font-family:inherit}
select:focus,input:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(214,56,39,.12)}
.btn{background:var(--red);border:none;color:#fff;font-weight:700;border-radius:3px;padding:12px 22px;cursor:pointer;font-size:15px;font-family:inherit}
.btn:hover{background:var(--redd)}.btn.block{width:100%;margin-top:8px}
.sec{border-top:1px solid var(--line);margin-top:12px;padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
.sec .h{grid-column:1/-1;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.sec .two,.sec .chkrow{grid-column:1/-1}
.two{display:flex;gap:12px;flex-wrap:wrap}.two>*{flex:1 1 220px}
/* A count sits BESIDE its question, not on its own row. The question already names the device,
   so the box only needs the number — it does not deserve half the width. */
.two>.field.cnt{flex:0 0 108px}
.two>.field.cnt>label{white-space:nowrap}
.chkrow{display:flex;align-items:center;gap:9px;margin:7px 0}
.chkrow input{width:auto;transform:scale(1.15)}
.chkrow label{margin:0;text-transform:none;letter-spacing:0;font-weight:600;font-size:13.5px;color:var(--ink)}
.out{margin-top:8px}
.outlabel{display:flex;justify-content:space-between;align-items:center;margin:14px 0 5px;gap:10px}
.outlabel span{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--head)}
/* --outbg: the region's accent diluted to 10%. Was #faf9f7, which is dE 2.3 from white - i.e.
   barely shaded at all. 10% is deliberately LIGHTER than --mpzone's 20%: it sits dE 6.4 from
   white (visibly a result box) and dE 6.1 from the multi property zone, so the ZONE stays the
   strongest tint on screen and the tint keeps meaning "multi property". Kasie, 16 Jul 2026. */
.outbox{background:var(--outbg);border:1px solid var(--line);border-radius:3px;padding:12px 13px;font-size:14px;white-space:pre-wrap;word-wrap:break-word;min-height:22px}
/* THE VOICEMAIL BOX LEADS, 21 Jul 2026 (Kasie's new after-hours process — the voicemail is the
   primary output, the SR is the fallback). A green left border and a lightly tinted box lift it
   above the plain SR box below it, so a rep's eye lands on the thing they read aloud first. Green,
   not the region navy or the red alarm — green reads as "this is the go path". */
.vmout .outbox{background:#eef7ee;border-color:#bcdcbc;border-left:4px solid #3f8f4f;font-weight:600;line-height:1.5;white-space:pre-wrap}
.vmout .outlabel span{color:#2f7a3f}
/* THE LIVE-CALL SCRIPT — for when the contractor answers (Kasie, 21 Jul 2026). Blue to set it
   apart from the green voicemail; white-space:pre-line keeps its bulleted lines on their own
   rows (the builder joins with \n). */
.livecall .outbox{background:#eef4fb;border-color:#c2d6ee;border-left:4px solid #3f6f9f;font-weight:600;line-height:1.5;white-space:pre-line}
.livecall .outlabel span{color:#2f5a8f}
/* THE LIVE-CALL FOOTNOTE — an instruction, NOT read aloud. Inside the box now (Kasie, 22 Jul 2026)
   but a lighter blue + italic + normal weight so it reads as a stage direction, not script. .lcbody
   holds the actual script; Copy grabs only that, so the reminder is never copied. */
/* THE "TRY THE CONTRACTOR FIRST" REMINDER above the SR box (Kasie, 22 Jul 2026). Amber warning
   tone so a rep checks themselves before leaving an SR — the SR is the last resort now. */
.srremind{margin:14px 0 6px;padding:9px 12px;border:1px solid #e6c65a;border-left:4px solid #d9a520;
  border-radius:6px;background:#fff6da;font-size:13px;line-height:1.45;color:#6b5320}
/* DEF renders at FULL page size on the website AND as the pinned app (Kasie, 22 Jul 2026:
   "the app should be full web page size; the skinny helper that is needed is the float on top").
   The skinny single-column panel now lives ONLY in the Float-on-top window - its CSS is injected
   into that window's iframe from the Keep-on-top handler in core.js, not here. */
/* MULTI-PROPERTY: each property (main + added) is its own collapsible block; the call/voicemail
   scripts group by contractor in #defScripts (Kasie, 22 Jul 2026). */
.defprop{border:1px solid var(--line);border-radius:7px;margin:12px 0;background:#fff;overflow:hidden}
.defprophdr{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--accent);
  border:none;border-bottom:1px solid rgba(0,0,0,.12);padding:10px 12px;cursor:pointer;
  font:700 13px/1.2 'Mulish',Arial,sans-serif;color:#fff}
.defprophdr:hover{filter:brightness(1.07)}
.defprophdr .dphcv{flex:0 0 auto;font-size:11px;transition:transform .12s}
.defprop:not(.shut) .defprophdr .dphcv{transform:rotate(90deg)}
.defprop.shut .defprophdr{border-bottom:none}
.defprop .dphtitle{flex:0 0 auto}
.defprop .dphsum{flex:1 1 auto;font-weight:400;color:rgba(255,255,255,.82);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.defpropbody{padding:12px}
.defprop.shut .defpropbody{display:none}
.defgate{border:2px solid var(--red);border-radius:6px;padding:10px;margin:8px 0}
.defgate .gateh{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin-bottom:6px}
.conblock{margin:16px 0;padding-top:12px;border-top:2px dashed var(--line)}
.conblock:first-child{border-top:none;padding-top:0}
#defScripts{margin-top:10px}
/* FLOAT-ON-TOP: the hero launcher + the origin tab's calm "now floating" state (Kasie, 22 Jul
   2026 - one-click always-on-top over Genesys, made to look premium, not duct-taped). */
.floathero{margin:2px 0 12px}
.floatbtn{font-size:15px;padding:11px 20px;box-shadow:0 2px 12px rgba(120,75,106,.30)}
.floatnote{display:block;margin-top:7px;font-size:12px;color:var(--gray)}
#screen-def-sr.floating .card{display:none}
.floatov{padding:8px 4px}
.floatov-card{max-width:440px;margin:26px auto;text-align:center;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--accent);border-radius:12px;padding:28px 24px;box-shadow:0 10px 34px rgba(0,0,0,.09)}
.floatov-ic{font-size:34px;line-height:1}
.floatov-h{font:800 21px/1.2 'Mulish',Arial,sans-serif;color:var(--head);margin:8px 0 8px}
.floatov-p{font-size:14px;line-height:1.55;color:var(--gray);margin:0 auto 18px;max-width:360px}
.livecall .lcbody{font-weight:600}
.livecall .lchint{display:block;margin-top:10px;font-style:italic;font-weight:400;font-size:12px;
  line-height:1.4;color:#6f93c8;white-space:normal}
/* THE STICKY AGENT NAME bar — sits at the very top and must NOT blend in (Kasie, 22 Jul 2026:
   "needs to be shaded... it's blending into the background"). Amber tint + a left accent bar so
   it reads as a persistent, do-not-clear field distinct from the white customer inputs. */
.agentbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0;padding:10px 12px;
  border:1px solid #e6c65a;border-left:4px solid #d9a520;border-radius:6px;background:#fff6da}
.agentbar>label{font-weight:800;font-size:13px;color:#7a5c00}
.agentbar>input{flex:1 1 180px;min-width:140px;padding:7px 9px;border:1px solid #d9c27a;border-radius:5px;background:#fff}
.agentbar .agenthint{flex:1 1 100%;font-size:11px;color:#8a7327}
/* "Any day" / "Any time" toggles sit right beside/under their picker, small and inline. */
.anychk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:400;cursor:pointer;white-space:nowrap}
.anychk input{margin:0}
/* the day row's Any box sits under the buttons; the time picker keeps its Any box RIGHT beside it
   (.pick) so "Any time" is never stranded across the row — Kasie, 22 Jul 2026. */
.field.days .anychk{margin-top:6px}
.pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pick input[type=time]{flex:0 0 auto;width:auto}
/* the attic CHECKBOX row (Kasie, 22 Jul 2026) — a plain labelled checkbox, not a dropdown. The
   .atticfield override beats the generic uppercase/letter-spaced/block `.field label` styling so
   "Attic?" sits tight to its box instead of being stretched across the column. */
.chkbox{display:inline-flex;align-items:center;gap:7px;font-weight:600;cursor:pointer}
.chkbox input{margin:0;width:16px;height:16px}
.atticfield{display:flex;align-items:center}
.atticfield label.chkbox{display:inline-flex;align-items:center;gap:7px;text-transform:none;
  letter-spacing:normal;font-size:14px;font-weight:700;color:var(--ink);margin:0}
/* the DEF-only Upgrade rule note — a soft blue callout under the New/Upgrade buttons. */
.upnote{grid-column:1/-1;margin:6px 0 2px;padding:8px 11px;border:1px solid #bcd3ea;
  border-left:4px solid #3f6f9f;border-radius:5px;background:#eef4fb;font-size:12.5px;
  line-height:1.45;color:#274d73}
/* THE CONTRACTOR NOTE above each script — name + number in view, with a Copy # button for the
   dialer. Amber like the SR-adjacent notes so it reads as "reference, act on it". */
.cnote{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 0;
  padding:7px 11px;border:1px solid #dcc7a0;border-left:4px solid #c79a3f;border-radius:5px;
  background:#fbf3e2;font-size:13px;font-weight:700;color:#6b5320}
.cnote .ct{flex:1 1 auto}
.cnote .copy{flex:0 0 auto}
.copy{background:var(--red);border:none;color:#fff;font-size:11px;font-weight:700;padding:6px 13px;border-radius:2px;cursor:pointer;font-family:inherit;white-space:nowrap}
.copy:hover{background:var(--redd)}
.prio{background:#fff;border:1px solid var(--line);border-radius:5px;padding:12px 16px;max-width:660px;margin:0 auto 14px;width:100%}
.prio .h{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.prio ol{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink);line-height:1.5}
#screen-chat{display:none;flex-direction:column;height:100%}
body.chat-mode #screen-chat{display:flex}
.tabs{background:var(--char);display:flex;overflow-x:auto}
.tab{background:none;border:none;color:#D9D9D9;font:700 13px 'Mulish',Arial,sans-serif;padding:13px 18px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab.on{color:#fff;border-bottom-color:var(--red);background:rgba(255,255,255,.06)}
#chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:11px 14px;border-radius:4px;white-space:pre-wrap;word-wrap:break-word;font-size:14.5px}
.u{align-self:flex-end;background:var(--char);color:#fff}
.a{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.err{align-self:center;background:#fbeae7;border:1px solid #eec3ba;color:#8a2c1c;font-size:13px;text-align:center}
.cpr{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.cp{background:var(--red);border:none;color:#fff;font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:2px;cursor:pointer;font-family:inherit}
.hint{align-self:center;color:var(--gray);font-size:12.5px;text-align:center;max-width:92%}
.chips{display:flex;gap:8px;padding:0 16px 10px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--bord);color:var(--head);font-size:12px;font-weight:600;padding:7px 13px;border-radius:2px;cursor:pointer}
.chip:hover{border-color:var(--red);color:var(--red)}
form.ask{display:flex;gap:10px;padding:12px 16px;background:#fff;border-top:1px solid var(--line);padding-bottom:calc(12px + env(safe-area-inset-bottom))}
form.ask input{flex:1}
button.send{background:var(--red);border:none;color:#fff;font-weight:700;border-radius:3px;padding:0 22px;cursor:pointer;font-size:15px;font-family:inherit}
button.send:disabled{opacity:.5}
.dots::after{content:'';animation:d 1.2s infinite}@keyframes d{0%{content:'.'}33%{content:'..'}66%{content:'...'}}
.hidden{display:none!important}
@media(max-width:640px){
  .sec{grid-template-columns:1fr}
  .tile{max-width:none}
  .card,.prio{border-radius:0;border-left:none;border-right:none}
  .container{padding:0 12px}
  #chat{padding:12px}
}



.msg.free{border-left:3px solid #1c7a45}
.freeh{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#1c7a45;margin-bottom:6px}
.cp.alt{background:#fff;border:1px solid var(--bord);color:var(--head)}
.cp.alt:hover{border-color:var(--red);color:var(--red)}
.chip.newcall{background:var(--red);color:#fff;border-color:var(--red);font-weight:700}
.chip.newcall:hover{background:var(--redd);color:#fff;border-color:var(--redd)}
.chip.multi{border-color:var(--red);color:var(--red);font-weight:700}
.chip.multi:hover{background:#fbeae7}
.top h1 .cr{display:inline-block;color:var(--red);font-weight:800;border-bottom:3px solid var(--red);padding-bottom:1px}
.top h1 .ca{color:var(--head);font-weight:600}
.tkbtns{display:flex;gap:10px;margin:12px 0 6px;flex-wrap:wrap}
/* Clear all fields, 16 Jul 2026. Was a grey hairline on white; now the region's DEEP shade as an
   OUTLINE, not a fill. Kasie asked for "the dark shade"; a dark FILL was the other candidate and
   was rejected for two reasons worth keeping: (1) everywhere else on this page deep is the EDGE
   and something else is the fill - a deep-filled button is the only place that inverts the rule;
   (2) Clear all wipes the form, and it is the one control where louder is worse. It sits next to
   the solid red Multi Property button, and staying quiet next to it is the point.
   Only three buttons are a plain .btn2 - clearAll, defClear, depClear - so this rule IS the
   Clear button. .btn2.accent (Multi Property, + Add a property) overrides fill and border below. */
.btn2{background:#fff;border:2px solid var(--deep);color:var(--deep);font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:6px;cursor:pointer;font-family:inherit}
.btn2:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.btn2.accent{background:var(--red);color:#fff;border-color:var(--red)}
.btn2.accent:hover:not(:disabled){background:var(--redd);color:#fff;border-color:var(--redd)}
/* CLEAR SITS ON THE FIRST LINE OF THE LABEL, not the middle of it. Kasie, 21 Jul 2026: "The
   clear button is too far off."
   align-items was `center`, which is invisible while every label is one line and wrong the
   moment one wraps: with a two-line label like "CALL TO SCHEDULE AFTER (OPTIONAL):" the button
   is centred against BOTH lines, so it floats in the gap between this field and the one above
   and reads as belonging to neither. flex-start pins it to the first line, where the eye already
   is. The label text itself is also allowed to wrap tighter so CLEAR is not pushed out to a far
   corner: min-width:0 lets the flex item shrink instead of forcing the row wider. */
.field label{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.field label>span:first-child,.field label{min-width:0}
/* The per-field clear was font-size:10px with padding:0 - a ~30x12px target sitting inside
   a flex <label>. Miss it by a pixel and the click lands on the label instead and nothing
   happens, which is exactly "works some of the time" (Kasie, 15 Jul 2026). Give it a real
   hit area: WCAG 2.5.8 asks for 24x24 minimum. It looks the same; it is just catchable. */
/* NO NEGATIVE HORIZONTAL MARGIN. Kasie, 21 Jul 2026: "Look at the crowding here with clear
   buttons." The -8px on each side was there to stop the 8px of padding widening the row — but a
   negative RIGHT margin makes the button stick 8px OUT of its own label, into the column gap,
   where it lands against the next column's label. In the two-up rows that reads as a CLEAR
   belonging to the field beside it. The hit area comes from the padding either way; the negative
   margin was only ever cosmetic, and it was buying crowding with it.
   flex:0 0 auto so it never shrinks when a long label competes for the row. */
.fldx{background:none;border:none;color:var(--bord);cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 4px;margin:-6px 0 0;min-width:24px;min-height:24px;font-family:inherit;border-radius:4px;flex:0 0 auto;align-self:flex-start}
/* The label's own words. Wrapped in a span by t77WrapLabelText so flex can size it: an unwrapped
   text node cannot shrink, so a long label pushed CLEAR out of the row instead of wrapping.
   That is what put "CLEAR" on top of the next column's question. */
.field label>.lbtxt{flex:1 1 auto;min-width:0}
.fldx:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.fldx:active{background:#FCEBEB}
.fldx:hover{color:var(--red)}
/* NO EXTRA LIFT. Kasie, 21 Jul 2026: "the clear button is still too close to the call after this
   date section."
   I over-corrected. She first said CLEAR was "too far off" — that was align-items:center on a
   two-line label, and flex-start fixed it. I then ALSO added margin-top:-8px on top of the -6px
   already in the shorthand above, which lifted the button clear of its own field and up against
   the section boundary. The first change was the fix; the second was me tuning something that
   was already right.
   The -6px in the shorthand exists to cancel the button's own 6px of top padding, so the text
   sits flush with the label text. Anything beyond that pulls it out of its field. Left as an
   explicit 0 rather than deleting the rule, so the next person sees the decision instead of the
   absence of one. */
.fldx{margin-top:-6px}
.mini{font-size:12px;color:var(--gray);margin:2px 0 10px}
.mpcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px;padding:16px;margin-top:14px}
.mphd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.mptitle{font-size:14px;font-weight:800;color:var(--red)}

/* ===== LANDING (ported from the live Compass Security embed - the hero Kasie wanted back) ===== */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(28,122,69,.45)}70%{box-shadow:0 0 0 6px rgba(28,122,69,0)}100%{box-shadow:0 0 0 0 rgba(28,122,69,0)}}
.tile .topen .arw{transition:transform .18s}
.tile:hover .topen .arw{transform:translateX(4px)}
.lp-hero{text-align:center;padding:var(--sp-lp-hero-top) 8px var(--sp-lp-hero-bot)}
.lp-headset{display:block;margin:0 auto 16px;width:60px;height:60px;color:var(--red)}
.lp-headset svg{width:100%;height:100%;display:block}
.lp-headset{width:50px;height:50px;margin-bottom:12px}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);background:#fff;border:1px solid rgba(214,56,39,.18);padding:6px 14px;border-radius:999px;box-shadow:0 3px 12px rgba(214,56,39,.10)}
.lp-eyebrow .lp-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.8s infinite}
.lp-title{margin:20px auto 0;max-width:14ch;font-size:clamp(30px,5.6vw,48px);line-height:1.03;font-weight:800;letter-spacing:-.02em;color:#17181A}
.lp-title .r{color:var(--red);font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0}
.lp-intro{max-width:62ch;margin:16px auto 0;color:var(--gray);font-size:clamp(14px,1.65vw,16px);line-height:1.66}
.lp-feats{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:980px;margin:28px auto 6px}
.lp-feat{flex:1 1 260px;max-width:322px;display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.lp-fic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--red),var(--redd));box-shadow:0 7px 18px rgba(214,56,39,.30)}
.lp-feat b{display:block;font-size:13.5px;color:#17181A;font-weight:800;margin-bottom:3px}
.lp-feat span{display:block;font-size:12.5px;color:var(--gray);line-height:1.5}
.lp-choose{text-align:center;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#9aa0a6;margin:32px 0 16px;position:relative}
.lp-choose::before,.lp-choose::after{content:'';position:absolute;top:50%;width:56px;height:1px;background:var(--line)}
.lp-choose::before{left:calc(50% - 132px)}
.lp-choose::after{right:calc(50% - 132px)}
.lp-grid{display:flex;gap:var(--sp-tile-gap);flex-wrap:wrap;justify-content:center;align-items:stretch}
.lp-card{position:relative;flex:1 1 270px;min-width:248px;max-width:322px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px 20px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lp-card::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--red),var(--redd))}
.lp-card.live{cursor:pointer}
.lp-card.live:hover{transform:translateY(-6px);box-shadow:0 24px 46px rgba(23,24,26,.17);border-color:transparent}
.lp-card.soon{background:#fbfafa}
.lp-card.soon::before{background:linear-gradient(90deg,#cdd2d6,#b8bec3)}
.lp-badge{position:absolute;top:18px;right:18px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.lp-badge.on{background:#e9f7ef;color:#1c7a45}
.lp-badge.on::before{content:'';width:6px;height:6px;border-radius:50%;background:#1c7a45;animation:pulse 1.8s infinite}
.lp-badge.wait{background:#eef0f2;color:#8a8f95}
.lp-code{font-size:34px;font-weight:800;line-height:1;color:var(--red);margin-top:6px}
.lp-card.soon .lp-code{color:#b6bbc0}
.lp-name{font-size:15px;font-weight:800;color:#17181A;margin-top:9px}
.lp-prog{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-top:5px}
.lp-card.soon .lp-prog{color:#aeb3b8}
.lp-cdesc{font-size:13px;color:var(--gray);line-height:1.56;margin-top:12px;flex:1}
.lp-open{margin-top:20px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:7px}
.lp-open.muted{color:#aeb3b8}
.lp-open .arw{transition:transform .2s}
.lp-card.live:hover .lp-open .arw{transform:translateX(5px)}
.lp-foot{text-align:center;color:#aeb3b8;font-size:11.5px;letter-spacing:.03em;margin-top:34px;line-height:1.6}
.lp-choose::before,.lp-choose::after{display:none}


/* feature cards: what's live vs what's coming */
.lp-feat.pending{background:#fbfafa;border-style:dashed}
.lp-feat.pending .lp-fic{background:linear-gradient(140deg,#c3c8cd,#aeb4ba);box-shadow:0 7px 18px rgba(23,24,26,.10)}
.lp-feat.pending b{color:#8a8f95}
/* .lp-feat span{display:block} (specificity 0,1,1) was beating a bare .lp-soon (0,1,0),
   so the badge rendered as a full-width bar. .lp-feat .lp-soon is 0,2,0 and wins. */
.lp-feat .lp-soon{display:inline-block;width:auto;margin-left:7px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a8f95;background:#eef0f2;padding:3px 8px;border-radius:999px;vertical-align:1.5px;line-height:1.5}
.lp-choose2{margin-top:34px}
/* four cards in the original 3-up flex left the 4th stranded on its own row.
   2x2 grid: deliberate, and each card gets room to breathe. */
.lp-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:700px;margin:0 auto 6px}
.lp-feat{flex:none;max-width:none}
@media(max-width:640px){.lp-feats{grid-template-columns:1fr}.sec.cl>.secbody,.sec.req>.secbody{grid-template-columns:1fr}}

/* ===== INELIGIBILITY ALARM =====
   Kasie, 15 Jul 2026: "We need some obnoxious flashing alert message banner ... I'm getting
   complaints that nothing happens", then: "I don't actually need something flashing... I just
   need a very obvious signal of some sort."
   So: no animation anywhere. The signal is carried by size, colour, sudden appearance and a
   scroll-into-view - which also means there is no flash rate to get wrong (WCAG 2.3.1 caps
   flashing at 3/sec because faster can trigger photosensitive seizures). Nothing here moves,
   so nothing here can hurt anyone. If you ever add motion back, keep it under that limit and
   honour prefers-reduced-motion. */
.alarm{grid-column:1/-1;margin:0 0 12px;border-radius:6px;overflow:hidden;border:3px solid #7A0A05}
.alarm .ahd{display:flex;align-items:center;gap:9px;padding:11px 12px;background:#B3120A;color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.alarm .abang{font-size:19px;line-height:1}
.alarm .awhy{background:#fff;padding:11px 12px;border-top:2px solid #7A0A05}
.alarm .awhy ul{margin:0;padding-left:19px}
.alarm .awhy li{font-size:13.5px;font-weight:600;color:#7A0A05;line-height:1.5}
.alarm .anote{margin-top:9px;padding-top:9px;border-top:1px solid #F09595;font-size:13px;font-weight:600;color:#7A0A05;line-height:1.5}
.alarm .aacts{background:#fff;display:flex;gap:8px;padding:0 12px 11px;flex-wrap:wrap}
.alarm .aacts button{font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border-radius:5px;padding:8px 13px;border:2px solid #7A0A05}
.alarm .afix{background:#7A0A05;color:#fff}
.alarm .afix:hover{background:#B3120A}
.alarm .arm{background:#fff;color:#7A0A05}
.alarm .arm:hover{background:#FCEBEB}
.mpcard.bad{border:2px solid #B3120A;background:#FFF6F5}
/* A date before the first possible appointment is an ERROR - the SR gets rejected downstream -
   so it gets the red FILL, same as .mpcard.bad. That is what the red fill is RESERVED for; this
   is not decoration. Kasie, 16 Jul 2026: "there are disqualifying things not being flagged."
   The date was displayed and never enforced. Displaying a rule is not enforcing it. */
input.dateerr{border:2px solid #B3120A;background:#FFF6F5;color:#8A0F08}
/* An SR with a hole in it is an ERROR - it is wrong the moment it is pasted. Red fill, same
   as .mpcard.bad and input.dateerr. The three errors in this app now look like each other. */
.gapwarn{background:#FFF6F5;border:2px solid #B3120A;color:#8A0F08;font-size:12px;font-weight:600;padding:7px 9px;border-radius:5px;margin-bottom:6px}
.gapwarn:empty{display:none}
/* An error must say WHAT, what was EXPECTED, and HOW TO FIX. Kasie, 16 Jul 2026. */
.awhy .awhat{font-weight:700}
.awhy .aexp{font-size:12px;opacity:.85;margin-top:2px}
.awhy .afixtxt{font-size:12px;margin-top:3px;padding-left:8px;border-left:2px solid currentColor;opacity:.95}
.awhy li{margin-bottom:8px}
/* GUIDANCE, not an error - deliberately not red. Red fill means "this is wrong". A locked
   yard with no appointment is not wrong yet; it is about to be. */
.yardnote{color:var(--deep);background:var(--outbg);border:1px solid var(--mpedge);font-size:12px;padding:6px 8px;border-radius:5px;margin-top:5px}
.yardnote:empty{display:none}
.outbox.gapbad,#box2.gapbad{border:2px solid #B3120A;background:#FFF6F5}
.dateerr-note{color:#B3120A;font-size:12px;font-weight:600;margin-top:4px}
.dateerr-note:empty{display:none}
.srr{margin-top:7px;border:1px solid var(--bord);border-left:4px solid var(--accent);
  border-radius:0;background:#FAFAFA;padding:9px 11px}
.srr-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.srr-k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray)}
.srr-v{font-size:14px;font-weight:700;color:var(--accent)}
.srr-why{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--head)}
.t77flash{outline:3px solid #B3120A;outline-offset:2px}
.btn2:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.addhint{font-size:12.5px;font-weight:600;color:#7A0A05;background:#FCEBEB;
  border:1px solid #F09595;border-radius:5px;padding:8px 10px;margin-top:8px;line-height:1.45}

/* ===== COLLAPSIBLE SECTIONS =====
   Kasie, 15 Jul 2026: "easier to navigate with headers and bolding like the worksheet has...
   each section can be minimized showing only the header unless clicked on".
   The worksheet uses a navy #1F3864 bar with white bold text for every Part, and bold labels
   under it. We use --accent instead of navy so each region keeps its own colour AND matches
   the worksheet's shape.
   .sec IS the two-column grid, so the body must be wrapped rather than hidden in place -
   the wrap happens in JS at boot (see the module near the end), which keeps DEC's static
   markup and DEF/DEP's generated markup on one code path. */
/* MANDATORY sections, Kasie 15 Jul 2026: "If it's mandatory, it needs to be distinctive
   and already open." They were the plainest thing on the screen once every other Part grew
   a coloured bar - exactly backwards. Now: Compass Security red, a Required pill, no chevron, and
   no toggle handler at all, so there is no code path that can shut one.
   Red is the workbook's own language for this - it uses #C00000 for the Priority List. */
.sec.req{display:block;border-top:none;margin-top:var(--sp-sec-gap);padding-top:0}
/* 16 Jul 2026: the FILL went from red to --deep, and the red became a FRAME around the band AND
   its body. Kasie: "We just don't want to overdo the fill red because that is reserved for a
   noticeable thing when it errors." The frame still says "everything inside this line is
   required" - it encloses the questions, rather than merely decorating their header - and the
   white/red Required pill below is untouched, because the pill is what carries the meaning.
   Changed HERE on the base rule, not as an #mpSec override: every .sec.req currently lives
   inside multi property, but a red-filled band would be wrong anywhere, and an override would
   have left this rule quietly lying. */
/* 17 Jul 2026 - THE RED MOVED OFF .req AND ONTO .gate. Kasie: "it's got weird red highlighting
   around required parts... but an answer for all is require... red should only be around the 3
   main questions box." She is right and the reason is worth keeping: on a property card EVERY
   field is required, so "required" red on two sections carried no information - it just made the
   card shout. The red is not "answer this", it is "this is the ELIGIBILITY GATE - get these three
   wrong and there is no enrolment at all". Exactly one section per card is that.
   .req keeps the LAYOUT (always open, never collapsible). .gate carries the red frame and the
   pill, and only "Three questions you must ask" gets it (REDBOX in core.js). */
.sec.req>.h{display:flex;align-items:center;gap:8px;margin:0;padding:9px 11px;
  background:var(--deep);color:#fff;border:2px solid transparent;border-bottom:0;
  border-radius:5px 5px 0 0;cursor:default;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sec.req>.h .ct{flex:1 1 auto}
.sec.req>.secbody{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;
  border:2px solid transparent;border-top:0;border-radius:0 0 5px 5px;padding:12px 11px 4px}
/* ===== THE GATE LOCK. Kasie, 20 Jul 2026 ==================================================
   "the only thing that should show up for the multi property ... are the three mandatory
   questions. you should not be able to see the other boxes or do anything until you pass the
   questions."
   Stated as what SURVIVES, not as a list of what to hide: the card header (which carries the
   'remove' button — a rep must always be able to drop a property), the red gate itself, and the
   alarm that says WHY it is shut. Everything else on the card goes. Written this way on purpose:
   a Part added to a property card next month is hidden by this rule automatically, whereas a
   hide-list would have let it show through a lock nobody thought to update.
   .mpcard is not itself a grid, so display:none on the children is enough; the gate keeps its
   own two-column body. t77GateLock() in core.js owns the class and t_srgen.js guards it. */
.mpcard.gateshut > *:not(.mphd):not(.sec.req.gate):not(.alarm){display:none}

/* ===== ADDRESS SUGGESTIONS (addr-autocomplete.js) =========================================
   THERE ARE DELIBERATELY NO RULES HERE, AND THAT IS THE POINT. 20 Jul 2026.

   What used to live here styled a hand-rolled absolutely-positioned dropdown, and the two
   comments above it were both things I had asserted without checking — including the claim that
   .field was position:relative, which it is not. The list rendered, display:block, two real
   suggestions inside it, at 0x0. It looked exactly like "autocomplete doesn't work".

   The dropdown is now a <datalist>, drawn by the browser outside the page entirely. It cannot be
   styled, and it cannot be clipped, hidden, stacked behind something or collapsed by any css on
   this page — which is the whole reason for the swap. DO NOT reintroduce styling here hoping to
   skin it; if the appearance ever has to change, that means going back to a custom overlay, and
   whoever does that should read the comment above t77AddrWire first. */

/* ===== THE ELECTRIC TICKS (Part 2) ========================================================
   A checkbox answering "is it electric?", 20 Jul 2026. The LABEL is the click target — the box
   itself is 16px and a rep is doing this mid-call, so the whole row has to be hittable.
   align-items:center rather than baseline: a checkbox has no text baseline to align to, and
   baseline pushes it a pixel or two above the words on Windows Chrome. */
.field.chk{display:flex;align-items:flex-end}
.field.chk label.ck{display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--deep);padding:8px 0;user-select:none}
.field.chk label.ck input{width:16px;height:16px;margin:0;accent-color:var(--red);cursor:pointer}

/* ===== THE Y/N BOXES ======================================================================
   Kasie, 20 Jul 2026: "two small boxes next to each other, one with an N and one with a Y and
   the N box is shaded red when clicked and Y box is shaded green when clicked."
   The question and its two boxes share one row, so four questions occupy four short lines
   instead of four label-over-dropdown stacks — which is the space this was meant to save.
   THE GREEN IS NOT FROM THE REGION PALETTE, and that is deliberate: --deep is a different navy
   on each of the three region screens, but "yes" has to read as yes everywhere. #1C7A45 is the
   same green already used for the .flag.live pill at the top of this file, so it is not a new
   colour in the product, just one used in a second place.
   White on #1C7A45 is 4.9:1 and white on --red is 4.71:1 — both clear AA. Do not lighten either. */
/* THE BOXES SIT NEXT TO THE QUESTION, NOT ACROSS THE CARD FROM IT. Kasie, 21 Jul 2026: "the
   yes or no for the fence is too far away from the question."
   It was justify-content:space-between with a flex:1 label, which pins Y/N to the far right
   edge of the column no matter how short the question is — "In a fenced yard?" is nine
   characters and the boxes were sitting an inch away, reading as unrelated to it. flex-start
   plus a label that no longer grows puts them right after the question mark.
   THE LABEL STILL SHRINKS (flex:0 1 auto), so a long question wraps instead of shoving the
   boxes out of the card. */
.field.yn{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:5px 0}
.field.yn label{margin:0;flex:0 1 auto;text-transform:none;letter-spacing:0;
  font-size:12.5px;font-weight:700;color:var(--deep)}
.ynbox{display:flex;gap:4px;flex:0 0 auto}
.ynb{width:30px;height:26px;padding:0;font-family:inherit;font-size:12px;font-weight:700;
  color:#8A8A8A;background:#fff;border:1px solid var(--mpedge);border-radius:4px;cursor:pointer}
.ynb:hover{border-color:var(--deep);color:var(--deep)}
.ynb.on{background:#1C7A45;border-color:#1C7A45;color:#fff}
/* an N that is merely an N: chosen, clearly, but not alarming. Only .bad earns the red. */
.ynb[data-yn="No"].on{background:var(--deep);border-color:var(--deep)}
.ynb.on.bad{background:var(--red);border-color:var(--red)}
.ynb:focus-visible{outline:2px solid var(--red);outline-offset:1px}

/* Part 2's one row: the combo takes the space, the three counts stay narrow beside it.
   minmax(0,…) on the combo because a 1fr column defaults to min-content and the longest device
   string ("HS & WH add on (CM already on AC portion, adding HS & WH)") would push the counts
   off the card. A hidden count leaves the row and the rest close up on their own. */
.row-dev{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:0 8px;align-items:end}
.row-dev .field{margin:0}
.row-dev .field.cnt select{min-width:58px}

/* The Mon-Fri day picker (Part 5). Same shape as the Y/N boxes — a label and a row of small
   toggles — but multi-select, so there is no red and no "one wins": each day stands alone.
   Wraps rather than shrinks: on a narrow card five buttons drop to a second line at full size
   instead of becoming three unhittable pixels wide. */
/* BUTTONS SIT NEXT TO THEIR LABEL, not at the far right of the card. Kasie, 21 Jul 2026: "you
   moved my fence y or n button way far over again."
   .field.yn was fixed for exactly this and .field.days was left behind, so the day and time rows
   kept the old shape: justify-content:space-between with a flex:1 label eats every spare pixel
   and shoves the buttons to the opposite edge, which reads as belonging to the next field along.
   flex-start + a label that only takes the width of its own text keeps the question and its
   answer together. Both rows now match, which is the point — they are the same control. */
.field.days{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;padding:5px 0}
.field.days label{margin:0;flex:0 1 auto;text-transform:none;letter-spacing:0;
  font-size:12.5px;font-weight:700;color:var(--deep)}
.dayrow{display:flex;gap:4px;flex-wrap:wrap}
.dayb{min-width:42px;height:26px;padding:0 6px;font-family:inherit;font-size:11.5px;font-weight:700;
  color:#8A8A8A;background:#fff;border:1px solid var(--mpedge);border-radius:4px;cursor:pointer}
.dayb:hover{border-color:var(--deep);color:var(--deep)}
.dayb.on{background:var(--deep);border-color:var(--deep);color:#fff}
.dayb:focus-visible{outline:2px solid var(--red);outline-offset:1px}

/* The appointment-window picker — Part 4's "Appointment Window:" and Part 5's "Preferred
   time:". Kasie, 21 Jul 2026: "i want it to be buttons like the days of the week."
   DELIBERATELY THE SAME METRICS AS .dayb (26px tall, same border, radius, weight and on-state)
   because in Part 5 the day row and the time row sit directly above one another and are one
   question asked twice. Two button rows that were nearly-but-not-quite alike would read as a
   mistake. min-width is 46 rather than 42 only because "10-2" and "8-12" need the extra pair
   of pixels to centre the same way "Wed" does.
   NOT SHARED WITH .dayb VIA A GROUPED SELECTOR: single-select and multi-select are different
   controls that happen to look alike today, and the moment one needs a state the other does
   not, a shared rule is where the wrong thing changes. */
.field.wins{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;padding:5px 0}
.field.wins label{margin:0;flex:0 1 auto;text-transform:none;letter-spacing:0;
  font-size:12.5px;font-weight:700;color:var(--deep)}
.winrow{display:flex;gap:4px;flex-wrap:wrap}
.winb{min-width:46px;height:26px;padding:0 8px;font-family:inherit;font-size:11.5px;font-weight:700;
  color:#8A8A8A;background:#fff;border:1px solid var(--mpedge);border-radius:4px;cursor:pointer}
.winb:hover{border-color:var(--deep);color:var(--deep)}
.winb.on{background:var(--deep);border-color:var(--deep);color:#fff}
.winb:focus-visible{outline:2px solid var(--red);outline-offset:1px}
/* Part 4 pairs apptDate with apptWin two-up, so the window row lives in a half-width column.
   Stacked there, because a label plus four buttons cannot sit on one line in half a card. */
.two .field.wins{flex-direction:column;align-items:flex-start;gap:4px}

/* THE UNFINISHED-SR BANNER (21 Jul 2026). Sits at the very top of the SR card, above Part 1,
   because it is a decision a rep makes BEFORE they start typing — below the fold it would be
   found after they had already re-entered everything.
   DELIBERATELY NOT RED. It is not an error and nothing is wrong: red here would compete with
   the eligibility gate, which is the one thing on this screen that stops a call. Amber reads as
   "something is waiting for you", which is exactly what it is. */
.t77draftbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 12px;border-radius:6px;
  background:#FFF6E5;border:1px solid #E5B84B;color:#6B4E12;
  font-size:12.5px;font-weight:600;line-height:1.45}
.t77draftbar span{flex:1 1 auto}
.t77draftbar .btn2{flex:0 0 auto;margin:0}

/* The card's own "Copy everything for Genesys". Full width under the SR box, because it is the
   last thing a rep does with the card and it should not be hunted for. */
.cardga{grid-column:1/-1;margin-top:10px}
.cardga .cardga-open{width:100%}

/* A line the rep says out loud. Not an error and not a field — it is quiet, and it only appears
   when its trigger fires, because a prompt that is always on screen stops being read. */
.cmnote{grid-column:1/-1;margin:2px 0 8px;padding:8px 10px;font-size:12.5px;line-height:1.45;
  color:var(--deep);background:var(--outbg);border:1px solid var(--mpedge);
  border-left:3px solid var(--deep);border-radius:0 5px 5px 0}

/* THE ACCOUNT-BOX HINT AND HIGHLIGHT, 21 Jul 2026. Kasie: "highlight the box and put the text
   instructions about when to get that number above the box." The hint sits directly above the
   box (it is rendered immediately before the field). The highlight is a warm amber wash + border
   on the input — deliberately NOT the region navy (which reads as normal) and NOT red (which this
   product reserves for an eligibility failure). Amber means "attention, but not an error": this
   is the one field a rep cannot fill from the call in front of them. */
.fieldhint{grid-column:1/-1;margin:2px 0 4px;padding:7px 10px;font-size:12px;line-height:1.4;
  color:var(--deep);background:#fff7e6;border:1px solid #f0d68c;border-left:3px solid #e0a800;
  border-radius:0 5px 5px 0}
input.hlbox{background:#fff7e6;border-color:#e0a800;box-shadow:0 0 0 2px rgba(224,168,0,.18)}
input.hlbox:focus{border-color:#c68e00;box-shadow:0 0 0 3px rgba(224,168,0,.28)}

/* the gate — and only the gate — is enclosed in red */
.sec.req.gate>.h{border-color:var(--red)}
.sec.req.gate>.secbody{border-color:var(--red)}
.sec.req.gate>.h .rq{flex:0 0 auto;background:#fff;color:var(--red);font-size:10.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:10px}
/* A .secbody always spans its .sec's columns. `.sec` is itself a 2-col grid, and rules existed
   for `.sec.req>.secbody` and `.sec.cl>.secbody` — but a PLAIN `.sec` with a `.secbody` matched
   neither, so it sat in ONE 274px column and every `.two` inside wrapped. That was my markup
   inventing a third structure, not a missing rule: I first "fixed" it by duplicating a rule that
   already existed at line 377, and the mutation harness caught the duplicate as a no-op.
   Kasie spotted the stacking, 17 Jul 2026. */
.sec>.secbody{grid-column:1/-1}
.sec.req>.secbody .two,.sec.req>.secbody .chkrow{grid-column:1/-1}
.sec.req>.secbody .field>label{font-weight:700}
.sec.cl{display:block;border-top:none;margin-top:var(--sp-sec-gap);padding-top:0}
.sec.cl>.h{display:flex;align-items:center;gap:8px;margin:0;padding:9px 11px;
  background:var(--accent);color:#fff;border-radius:5px;cursor:pointer;user-select:none;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:0;width:100%;text-align:left;font-family:inherit}
.sec.cl>.h:hover{filter:brightness(1.12)}
.sec.cl>.h:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sec.cl>.h .cv{flex:0 0 auto;font-size:11px;transition:transform .12s;transform:rotate(90deg)}
.sec.cl.shut>.h{border-radius:5px}
.sec.cl.shut>.h .cv{transform:rotate(0deg)}
.sec.cl:not(.shut)>.h{border-radius:5px 5px 0 0}
.sec.cl>.h .ct{flex:1 1 auto}
/* the badge: a shut section that holds data must SAY so, or a rep ships an SR with
   something hidden in it. Non-negotiable - it is the whole safety case for collapsing. */
.sec.cl>.h .cb{flex:0 0 auto;background:rgba(255,255,255,.24);color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;
  padding:2px 8px;border-radius:10px;max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sec.cl>.secbody{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;
  border:1px solid var(--line);border-top:0;border-radius:0 0 5px 5px;padding:12px 11px 4px}
.sec.cl.shut>.secbody{display:none}
/* .secbody is the two-column grid. Only .field belongs in a column - everything else
   (property cards, the mp list, the add button, hints, the alarm, the mini notes) is a
   full-width block. Without this the 1st Property card gets squeezed into ~230px and the
   alarm wraps to six lines. Spotted on the live site, 15 Jul 2026. */
.sec.cl>.secbody>*:not(.field){grid-column:1/-1}
.sec.req>.secbody>*:not(.field){grid-column:1/-1}
/* ...but a button should still be button-sized. Spanning puts it on its own row (right);
   stretching it to 598px makes it look like a mistake (wrong). Kasie, 15 Jul 2026. */
.sec.cl>.secbody>button,.sec.req>.secbody>button{justify-self:start}
.sec.cl>.secbody .two,.sec.cl>.secbody .chkrow{grid-column:1/-1}
/* bolder labels, per "bolding ... like the worksheet" - the workbook has every field label
   bold 12.5pt. Ours were 500. */
.sec.cl>.secbody .field>label{font-weight:700}

/* ===== REGION ACCENTS =====
   DUSTY palette, Kasie's call 15 Jul 2026. Same hues she approved, chroma pulled from
   29-45 down to ~26, all three at matched lightness L*38 so they read as one set rather
   than three colours that happen to be adjacent. Worst pair deltaE 19.9 (threshold 18),
   contrast ~7:1 on white.
     DEC #1F3864 -> #485982     DEF #7D2E68 -> #784B6A     DEP #16571B -> #41613E
   Compass Security red #D63827 and the cool grey #F4F4F4 are DELIBERATELY unchanged: the red is
   the brand and stays vivid, and cool grey is the foil that makes a warm red pop. Loud
   actions on quiet structure.
   To revert: swap the three hexes back. Nothing else depends on them.
   ===== REGION ACCENTS (from the workbook tab colours) =====
   The Compass Security palette stays primary everywhere - buttons, focus rings,
   section headers, copy buttons. The region colour is an ACCENT only: it does
   the same two jobs inside a screen that it does on a picker tile - the title
   and a stripe. --accent defaults to Compass Security red, so anything not inside a
   region screen is untouched. */
:root{--accent:#D63827}

/* ===== MULTI PROPERTY — IN-FAMILY, PER REGION =====
   Supersedes the single teal (#0E7C8C, shipped and rejected 16 Jul: "i hate it").

   THE RULE, in one line: multi property is the region's own colour, DEEPER. Every band on the
   page is outlined; the OUTLINE COLOUR tells you which tier you are in.

     dusty band (a Part)  -> outlined in its DEEP counterpart
     deep band (inside MP)-> outlined in RED
     red FILL             -> errors ONLY. Nothing else on the page may fill with red.

   That last line is Kasie's, 16 Jul, and it is the whole design: "We just don't want to overdo
   the fill red because that is reserved for a noticeable thing when it errors." Red as an
   OUTLINE is trim; red as a FILL is an alarm. Separating those two let multi property carry the
   brand red without lying about severity. The REQUIRED bands used to be red-filled; they are now
   deep-filled with a red frame, which is why the ineligible card is the only red fill left.

   --deep is NOT the accent with the lightness dropped. All three accents sit at a chroma/
   lightness ratio of 0.67 - THAT ratio is what "dusty" means. Holding chroma at 25.6 while
   halving lightness gives C/L 1.07, which reads richer, not deeper - a different navy. --deep
   holds the RATIO instead, so it is the same dustiness at half the lightness. Counterintuitive
   result worth keeping: #303951 is FURTHER from the accent (dE 16.8 vs 13.9) yet looks like it
   belongs to it. Kasie spotted this before I did.

   --mpzone is literally the accent diluted with white (20%). Not a colour derived some other
   way - same pigment, less of it, which is what makes it cohere. 12% is the "correct" dilution
   and is nearly grey: dusty accents are already low-chroma, and pale+dusty leaves nothing. 20%
   is the point where it still reads as the region's colour. Kasie's call.

   Rejected, so nobody re-treads them:
     teal #0E7C8C - shipped 16 Jul, rejected. Read as a FOURTH REGION.
     rust #96432A / topaz / ochre - warm, dE 32 from the alarm. An error would vanish on it.
     lifting the shade instead of deepening - 4.2:1 against white, so the band text would have
       had to stop being white. It does not.
   Every value below verified: white-on-deep 11.5:1, error dE 72-94 from every surface it sits
   on, deep outline dE 16.5-17 on its own dusty band. 16 Jul 2026. */
/* The :root DEFAULTS, and why they are these values. --accent already defaults to Compass Security red
   (line 313) so anything outside a region screen stays brand. --deep must follow the same logic:
   the deep counterpart of the brand red is --redd, which already exists. It must NOT default to
   DEC's #303951 - that silently hands DEC's navy to any screen that forgets its own tokens, which
   is a bug waiting for the next screen rename. (This file has already lost DEF's collapsibles once
   to exactly that: an id changed, a list went stale, nothing errored.) --mpzone/--mpedge default
   to the page's own greys for the same reason: if multi property ever renders outside a region
   screen, it must look plainly wrong, not plausibly navy. 16 Jul 2026. */
:root{ --deep:var(--redd); --mpzone:var(--bg); --mpedge:var(--line); --outbg:#faf9f7; }
#screen-toolkit,#screen-dec{--accent:#485982;--deep:#303951;--mpzone:#DADEE6;--mpedge:#B9C0D0;--outbg:#EDEEF3}
/* DEF's tints are the plum accent diluted — and diluted plum READS PINK, even at a lower
   chroma than DEC's navy tint (spread 9 vs 12). Kasie, 16 Jul 2026: "the background is very
   pink looking and shouldn't be at all." The offender was .secbody at ~324,000px of #E4DBE1
   filling the Multi Property body.
   This is a PERCEPTUAL correction, not an inconsistency: low-chroma blue reads as grey, so
   DEC can carry more of it; low-chroma plum reads as pink, so DEF must carry less to look
   equally neutral. Hue kept (still DEF's family), chroma cut ~65%. The bands, borders and
   deep shade still carry the region loud and clear. */
#screen-def,#screen-def-sr{--accent:#784B6A;--deep:#4B3143;--mpzone:#E0DDDF;--mpedge:#C6C0C3;--outbg:#F0EEEF}
#screen-dep,#screen-dep-sr{--accent:#41613E;--deep:#2B3E29;--mpzone:#D9DFD8;--mpedge:#B7C3B6;--outbg:#ECEFEC} /* forest, NOT the #1B3B23 tab colour: that sat at L*22 and read
   as near-black rather than green. #41613E matches DEF's lightness AND chroma so the three
   regions read as one set. Kasie's call, 15 Jul 2026. */ /* mulberry, NOT the #3B2E58 tab colour: that sat at
   only deltaE 10.6 from DEC navy and the two were indistinguishable. Kasie's call, 15 Jul 2026. */

/* every region band gets an outline in its deep counterpart. box-sizing:border-box is global
   (line 8), so the 2px does not grow the 100%-wide band. */
.sec.cl>.h{border:2px solid var(--deep)}

/* --- the multi property zone ---
   The tint goes on the BODY, not the section. The band sits ABOVE the zone on the card's white,
   as its own closed object - that is the shape Kasie approved. Putting the tint on #mpSec would
   wrap the band inside the zone instead, which is a different (and unapproved) design.
   Collapsing still works: .sec.cl.shut>.secbody{display:none} hides the zone, band stays. */
#mpSec > .secbody,#depMpSec > .secbody,#defMpSec > .secbody{
  background:var(--mpzone);border:1.5px solid var(--mpedge);border-radius:5px;margin-top:6px;
  padding:10px 11px 6px}
/* the MP band: deep fill, RED outline, closed on all four sides so it reads as its own object.
   .sec.cl:not(.shut)>.h squares the bottom corners to fuse band->body; MP's band is deliberately
   NOT fused, so restore the full radius in both states. */
#mpSec > .h,#depMpSec > .h,#defMpSec > .h,
#mpSec:not(.shut) > .h,#depMpSec:not(.shut) > .h,#defMpSec:not(.shut) > .h{
  background:var(--deep);border:2px solid var(--red);border-radius:5px}
#mpSec .mptitle,#depMpSec .mptitle,#defMpSec .mptitle{color:var(--deep)}
#mpSec .mpcard,#depMpSec .mpcard,#defMpSec .mpcard{border-left-color:var(--deep)}
/* REQUIRED bands: handled on the base .sec.req rule above, not overridden here. */
/* .mpcard.bad keeps its red FILL. It is the only red fill in multi property. Do not add another. */

/* --- what the accent touches ---
   Principle: STRUCTURE and LABELS carry the region colour - they tell you where
   you are. ACTIONS stay Compass Security red - buttons, copy, focus rings, hovers.
   That keeps the brand on everything you click and the region on everything you read. */
.card h2{color:var(--accent)}            /* generator title */
/* .pickeyebrow is NOT listed here any more. It used to be `color:var(--accent)` and this rule sits
   AFTER the eyebrow's own block (line ~33), so at equal specificity it won - which would have
   silently kept the eyebrow dusty while the new pill styling claimed --deep. The eyebrow now
   carries its own colour up there, with its tint and border, as one piece. 16 Jul 2026. */
.sec .h{color:var(--accent)}             /* section headers - Part 1, Part 2 ... */
.prio .h{color:var(--accent)}            /* priority list header */
.mptitle{color:var(--accent)}            /* 'Additional Property 1' */
.mpcard{border-left-color:var(--accent)} /* property card spine */
#screen-toolkit .card,#screen-dec .card,#screen-def-sr .card,#screen-dep-sr .card{border-top:3px solid var(--accent)}

/* ===== REGION HUB TILES =====
   DELETED here, 16 Jul 2026: `.tile[data-go="dec"] .code {color:#485982}` and its two siblings.
   They styled the OLD picker tiles. The picker has used .lp-card for a while, so those three
   rules matched ZERO elements - verified against the live DOM, not assumed. Worse,
   t_palette.js had a check named "picker tile stripe matches the screen accent" that was
   reading them: a green assertion guarding dead code, proving nothing about anything rendered.
   The live picker cards are covered by RULE 7's --rc/--rcd checks instead.

   THE CHANGE. Kasie: "There is hardly a connection in the color palette... It needs to look
   designed and intentional." She was right - the hub was the one screen with no region on it:
   a small --accent eyebrow, then generic RED tiles. It also broke the site's own rule
   ("STRUCTURE and LABELS carry the region colour; ACTIONS stay Compass Security red") - the tile
   title is a label and it was wearing the action colour.

   The hub tiles are the SIBLING of the landing picker cards - both are "pick a thing" cards -
   so they now use the identical grammar:
       band in --accent, white text · red 3px underline · --deep 2px outline · red pill
   Land on DEC, click through, and you arrive somewhere visibly the same product.
   First attempt was just an outline + a coloured title; Kasie: "no I want more region color...
   more cohesive with the rest." She was right about that too. */
.tile.hub{padding:0;overflow:hidden;border:2px solid var(--deep);border-radius:12px}
.tile.hub::before{display:none}          /* the old red gradient stripe - the band replaces it */
.tile.hub .tband{background:var(--accent);padding:13px 15px 11px;position:relative;
  border-bottom:3px solid var(--red)}
.tile.hub .tband .code{color:#fff;margin-top:0;font-size:20px;line-height:1.05}
.tile.hub .tband .name{color:rgba(255,255,255,.78);margin-top:5px;font-size:10.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.tile.hub .tbody{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.tile.hub .tbody .desc{margin-top:0}
/* the flag sits ON the band now, like the LIVE pill on a picker card */
.tile.hub .flag{position:absolute;top:12px;right:12px;background:var(--red);color:#fff}
.tile.hub .flag.free{background:var(--red);color:#fff}
/* "Open" is region-coloured here, matching the picker cards' .lp-open - NOT the red of the SR
   screens' buttons. These are cards you choose between, not actions you fire. */
.tile.hub.tool .topen{color:var(--accent)}
.tile.hub.tool:hover{border-color:var(--deep);box-shadow:0 20px 38px rgba(23,24,26,.15)}

/* Coming soon: keeps the SHAPE of its siblings but is unmistakably inactive. Bandless would
   just look like a tile that failed to load. */
.tile.hub.off{background:#fbfbfb;border-color:#CFD4D8}
.tile.hub.off .tband{background:#B8BEC3;border-bottom-color:#9AA1A7}
.tile.hub.off .tband .code{color:#fff}
.tile.hub.off .tband .name{color:rgba(255,255,255,.8)}
.tile.hub.off .flag,.tile.hub.off .flag.soon{background:rgba(255,255,255,.28);color:#fff}
/* Program cards: --rc per region drives the band and the link; --rcd (the DEEP counterpart, the
   same value the SR screens use) outlines the card.
   Band + full outline, white body. Kasie's pick, 15 Jul 2026.

   16 Jul 2026, Kasie: red underline beneath the band, red LIVE pill, card outlined in the
   region's DEEP shade "to make it all visually more cohesive". These three now say the same thing
   the SR screens say - dusty fills, deep edges, red as the accent - so the picker and the
   generator stop looking like two different products.

   NOTE --rcd is spelled out per card rather than reusing --deep: --deep is scoped to
   #screen-toolkit / #screen-def-sr / #screen-dep-sr, and these cards live on #screen-picker,
   which is outside all of them. Inheriting --deep here would silently pick up the :root fallback
   (--redd) and outline every card in dark red. If you change a region's deep shade, change it in
   BOTH places - t_palette.js fails if they drift apart. */
.lp-card[data-go="dec"]{--rc:#485982;--rcd:#303951}
.lp-card[data-go="def"]{--rc:#784B6A;--rcd:#4B3143}
.lp-card[data-go="dep"]{--rc:#41613E;--rcd:#2B3E29}
.lp-card{border:2px solid var(--rcd);border-radius:12px;overflow:hidden;padding:0;background:#fff}
.lp-card::before{display:none}                     /* the old 5px stripe - the band replaces it */
.lp-band{background:var(--rc);padding:16px 18px 13px;position:relative;border-bottom:3px solid var(--red)}
.lp-band .lp-code{color:#fff;margin:0;font-size:32px;line-height:1}
.lp-band .lp-prog{color:rgba(255,255,255,.72);margin-top:5px}
/* the LIVE pill: solid red, white dot. Was a translucent white pill, which read as chrome.
   White on --red is 4.71:1 - over the 4.5 line, but only just, so do not lighten this red. */
.lp-band .lp-badge{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(2px)}
.lp-band .lp-badge.on{background:var(--red);color:#fff;backdrop-filter:none}
.lp-band .lp-badge.on::before{background:#fff}
.lp-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1}
.lp-body .lp-name{margin-top:0}
.lp-open{color:var(--rc)}
.lp-card.live:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(23,24,26,.16);border-color:var(--rcd)}
.tile.off .code,.tile.off .name{color:#8A8A8A}

/* ===== THE DATE PICKER ================================================================
   Kasie, 17 Jul 2026: no typing, weekends not clickable. Neither is possible with a native
   date input, so the calendar is ours (see the note over t77DPAttach in core.js). */
/* THE FIELD IS A BUTTON (Kasie, 17 Jul 2026 - "Option A is PERFECT").
   The input is still input[type=date] and still the value; it is just not the control any
   more. Kept in the DOM at 1px rather than display:none - it stays a real, measurable,
   form-shaped element, and nothing that walks the form can miss it. */
.dpwrap{position:relative}
.dpwrap>input[type=date][data-dp]{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;
  border:0;opacity:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden}
.dpfield{width:100%;display:flex;align-items:center;gap:9px;box-sizing:border-box;
  padding:10px 12px;border-radius:3px;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;text-align:left;background:#fff;border:1px solid var(--accent);color:var(--deep)}
.dpfield:hover{background:var(--outbg)}
.dpfield:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 2px rgba(214,56,39,.12)}
/* EMPTY LOOKS UNFINISHED ON PURPOSE - dashed says "this is a slot, not a box you type in" */
.dpfield.empty{background:var(--outbg);border:1.5px dashed var(--accent)}
.dpfield.empty:hover{background:var(--mpzone)}
.dpfield>svg{flex:0 0 auto}
.dpval{flex:1 1 auto}
.dpchange{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--accent);text-decoration:underline}
/* the red the hidden input can no longer show. Same red as input.dateerr and .gapwarn. */
.dpfield.dateerr{border:2px solid #B3120A;background:#FFF6F5;color:#8A0F08}
.dpfield.dateerr .dpchange{color:#8A0F08}
.dp{position:absolute;z-index:9999;width:268px;padding:10px;background:#fff;border:1px solid #C9C9C9;
  border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.20);font-size:13px;color:#222}
.dp[hidden]{display:none}
.dphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dptitle{font-weight:700;font-size:13px}
.dpnav{border:0;background:transparent;cursor:pointer;font-size:17px;line-height:1;padding:3px 9px;border-radius:4px;color:inherit}
.dpnav:hover:not(:disabled){background:rgba(0,0,0,.07)}
.dpnav:disabled{opacity:.25;cursor:default}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpdow{font-size:10px;font-weight:700;text-align:center;color:#777;padding:2px 0}
.dpday{border:0;background:transparent;padding:6px 0;border-radius:4px;cursor:pointer;font:inherit;color:inherit}
.dpday:hover{background:var(--accent);color:#fff}
.dpday.dpsel{background:var(--deep);color:#fff;font-weight:700}
/* struck through, not merely pale: a rep must be able to tell "cannot" from "not yet" */
.dpday.dpoff{color:#B5B5B5;text-decoration:line-through;cursor:not-allowed}
.dpday.dpoff:hover{background:#FFF6F5;color:#8A0F08;text-decoration:line-through}
.dpday.dpblank{visibility:hidden}
/* same red as input.dateerr and .gapwarn - the errors in this app look like each other */
.dpwhy{display:none;margin-top:8px;padding:6px 7px;font-size:11.5px;line-height:1.4;font-weight:600;
  color:#8A0F08;background:#FFF6F5;border:1px solid #E3AFAB;border-radius:5px}
.dpwhy.on{display:block}
.dplegend{margin-top:8px;padding-top:6px;border-top:1px solid #EDEDED;font-size:10.5px;line-height:1.4;color:#6A6A6A}

/* ===== THE ACCOUNT # IS THE ONLY THING THIS SECTION ASKS FOR ==========================
   Kasie, 17 Jul 2026: "the big main property banner needs to go.... make the paste the main
   account # text stand out more"

   The banner is gone (see the note in core.js), and this is where its weight went. The 11px
   uppercase grey label is right for a field sitting among twenty others; it is wrong for the
   ONE field a rep must not miss - and since the three questions left this morning, it is the
   only field here at all. So it stops whispering. */
.field.acct label{font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--deep);font-weight:700}
.field.acct input[type=text]{border:2px solid var(--accent);font-size:17px;font-weight:700;padding:11px 12px}
.field.acct input[type=text]:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(214,56,39,.12)}

/* the SR-reason explanation teaches the RULE, not just the answer (Kasie, 17 Jul 2026:
   "be detailed and teach so they understand and learn"). Several short paragraphs read as
   teaching; one long one reads as a wall and gets skipped. */
.srr-why + .srr-why{margin-top:5px}
.srr-why.srr-first{font-weight:700;color:var(--deep)}

/* the Pin bar on the landing screen. Quiet: pinning is a once-ever action, and a rep who has
   already done it never sees this at all (the button hides itself in standalone mode). */
.pinbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:0 auto 18px;max-width:640px;text-align:center}
.pinnote{font-size:12px;line-height:1.5;color:var(--gray)}
.pinnote a{color:var(--red);font-weight:700}
.pinbar:empty{display:none}

/* the per-app Pin bar. It lives in the app's own header because that is the ONLY page the app
   can be installed from - each app's install prompt belongs to its own manifest. One line, and
   gone for good once taken. */
.apppin{display:flex;align-items:center;gap:10px;margin-left:auto}
.apppin-n{font-size:12px;color:var(--gray)}
html[data-app] .top .container{display:flex;align-items:center;gap:12px}

/* ===== THE APP IS NOT THE WEBSITE ==========================================================
   Kasie, 17 Jul 2026: "It looks like the webpage, i didnt want any of the excess color and
   space there." She was right, and the measurements said exactly why:

       body background   #f4f4f4 (--bg)   <- a GREY PAGE
       .container        max-width 1040
       .card / .prio     max-width 660, white, 1px border, 5px radius

   So in a 1728px window the tool was a white card marooned in ~530px of grey on each side,
   under a website header band. That is a web page: a document sitting ON a page. An app has no
   page - the WINDOW is the surface, and the tool owns all of it.

   WHAT THIS DOES NOT DO: widen the card. 660 is right - a rep parks this beside Genesys at
   ~700px, where 660 fills it exactly. The gutters are only visible in a maximised tab, and the
   fix for that is to stop painting them grey, not to stretch the form across 1728px of monitor.
   Removing the colour removes the gutters; there is nothing left to see.

   .top STAYS. It looks like dead chrome and it is not: appPinBar() mounts the Pin button into
   `.top .container`. Hiding .top would hide the Pin button - and t_apps.js would NOT catch it,
   because it asserts on the button's own style.display, which an ancestor's display:none never
   touches. Green test, invisible button, feature gone. Left visible on purpose.

   Every rule is scoped to html[data-app], which ONLY the generated /sr/<region>/ pages carry.
   The site at demo.demo.kasielafleur.com is untouched - t_srgen.js proves the site still has its
   grey page. */
html[data-app] body{background:#fff}
html[data-app] .top{background:transparent;border-bottom:1px solid var(--line)}
/* Align the title bar to the CONTENT, not to the site's 1040 grid. The header sat at the 1040
   container's left edge while the card sat 660-centred, so the app's own title was ~190px out of
   line with everything under it - a small thing that reads loudly as "this is a web page with a
   site header bolted on". Now the title, the Pin button and the form share one left edge. */
html[data-app] .top .container{max-width:660px}
html[data-app] main{padding-top:10px}
/* not a card on a page - a form on a surface */
html[data-app] .prio,
html[data-app] .card{border-left:0;border-right:0;border-radius:0}
html[data-app] .prio{border-top:0;background:transparent}
html[data-app] #crWorth{opacity:.75}
/* The home address, on its own line under both monthly savings. It matters MOST in the pinned app,
   where there is no address bar and this is the only thing on screen saying where the tool
   lives — so it stays underlined, which is what makes it read as a link at all.
   NOT RED. Kasie, 21 Jul 2026: "I don't want the link to be red." Red is this product's alarm
   colour — it means an eligibility failure — and spending it on a footer link both cheapened it
   there and shouted here. --head is the same muted grey the field labels use, so the address
   sits with the monthly savings instead of competing with them; the underline carries the "this is a
   link" job on its own.
   A LITERAL TOKEN, NOT --deep: --deep is scoped to the region screens and this block lives on
   <body>, outside all of them, where it would silently fall back to :root's dark red — which is
   the exact colour she just asked me to remove. */
#crWorth .crlink{color:var(--head);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;word-break:break-word}
#crWorth .crlink:hover{color:var(--ink);text-decoration-thickness:2px}

/* ===== COPY EVERYTHING FOR GENESYS ===== */
.copyall-open{margin-top:12px;width:100%}
.ca-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.ca-panel{background:#fff;border-radius:8px;max-width:640px;width:100%;padding:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.ca-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.ca-top span{font-size:15px;font-weight:800;color:var(--deep,#333);letter-spacing:.01em}
.ca-x{background:none;border:none;font-size:24px;line-height:1;color:var(--gray);cursor:pointer;padding:0 4px}
.ca-x:hover{color:var(--red)}
#copyAllBtn{width:100%;margin-bottom:10px}
/* ===== CONDENSED, 21 Jul 2026 ============================================================
   Kasie: "condense it because the popout to copy all of it takes up way too much space."
   She is right, and the reason it was so tall is that the layout was designed when the popup
   held THREE items — Box 1, Box 2 and one SR. A property card now lists a dozen or more
   answers, and the old shape spent four stacked elements on each one: a bordered card, a
   full-width uppercase header bar, a Copy button on its own line, and the value below it.

   ONE ROW PER ANSWER now: label left, value middle, Copy right, ~30px tall. Twelve answers
   fit in the space three used to take, which is the difference between scrolling a popup
   mid-call and reading it.
   The LABEL COLUMN IS FIXED at 34% so the values line up in a column a rep's eye can run
   down — ragged left edges are what make a list like this slow to read.
   grid, not flex, for exactly that reason: flex would size each label to its own text. */
/* TIGHTER STILL, 21 Jul 2026. Kasie, after the first condense: it is "wayyyyyyyy too spaced
   out." Row padding drops to 2px, the label column narrows to 30% (the values then start
   further left and the list reads as a block), and the SR's inner box loses its top margin.
   align-items:baseline keeps the Copy button on the label's first line for a wrapped value. */
.ca-row{display:grid;grid-template-columns:30% minmax(0,1fr) auto;align-items:baseline;
  gap:0 8px;padding:2px 8px;border-bottom:1px solid var(--line);border-radius:0}
.ca-row:last-child{border-bottom:0}
.ca-row:hover{background:var(--outbg)}
/* a row with no Copy button (a dropdown / button-row answer — Kasie, 21 Jul 2026) drops the
   third column so the value uses the full width instead of leaving a gap where Copy would be. */
.ca-row.ca-nocopy{grid-template-columns:30% minmax(0,1fr)}
.ca-head{display:contents}          /* the header bar is gone; its span is just the label cell */
.ca-head span{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--head,#58595B);
  text-transform:none;line-height:1.4}
.ca-head .copy{font-size:10px;padding:2px 8px}
.ca-text{padding:0;font-size:12.5px;line-height:1.4;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;font-weight:600}
/* The SR is the one row that is genuinely a paragraph, so it gets to span the full width
   rather than being squeezed into the value column. */
.ca-row.ca-sr{grid-template-columns:1fr auto}
.ca-row.ca-sr .ca-text{grid-column:1/-1;margin-top:2px;font-weight:400;
  background:var(--outbg);border-radius:4px;padding:6px 8px}

/* ============================================================================================
   DEF CLEAN 2026 — Kasie's approved direction (22 Jul 2026): "clean and modern, mostly white...
   DEF header in its normal recognizable plum with white text... no dark boxes... keep the Compass Security
   tools... drop the tan." Modern-minimalist editorial, but functional: plum is the region
   signature, everything else white with soft plum accents and Avenir (Compass Security) type. Scoped to
   #screen-def-sr so DEC/DEP stay workbook-faithful. Appended LAST so it wins on source order. The
   Float-on-top window renders this same screen, so it inherits the look. */

/* Avenir (Compass Security's typeface) across the tool; Mulish is the loaded Avenir-like fallback. */
#screen-def-sr, #screen-def-sr input, #screen-def-sr select,
#screen-def-sr textarea, #screen-def-sr button{
  font-family:'Avenir Next','Avenir','Mulish','Segoe UI',system-ui,Arial,sans-serif;
}

/* a plain near-white canvas — no tint, no gradient (Kasie: "more white, less cream") */
#screen-def-sr{ background:#E3E1DB; }
#screen-def-sr .container{ padding:22px 14px 40px; }

/* the card: clean white, soft depth, generous radius, NO gold rail */
#screen-def-sr .card{
  max-width:680px; border:1px solid #ececec; border-radius:14px;
  padding:0 26px 26px; overflow:hidden;
  box-shadow:0 1px 2px rgba(40,25,40,.05), 0 20px 46px -24px rgba(75,49,67,.24);
}
#screen-def-sr .card::before{ content:none; }

/* the recognizable DEF banner: solid plum, white text, a small Compass Security eyebrow */
#screen-def-sr h2{
  position:relative;
  margin:0 -26px 0; padding:22px 120px 19px 26px; line-height:1.12;
  background:linear-gradient(118deg,#5f3a54,#784B6A);
  color:#fff; font-size:22px; font-weight:800; letter-spacing:.005em;
}
#screen-def-sr h2::before{
  content:'Compass Security \00B7 Tools'; display:block; margin-bottom:7px;
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#e6d5e1;
}
/* the DEF SA logo, echoed on the right of the banner (Kasie, 23 Jul 2026) */
#screen-def-sr h2::after{
  content:''; position:absolute; top:50%; right:24px; transform:translateY(-50%);
  width:82px; height:82px;
  background:url('/icons/def/banner-mark.png') center/contain no-repeat;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
#screen-def-sr .sub{
  margin:16px 0 4px; font-size:13px; line-height:1.5; color:#8a818a;
  padding-bottom:16px; border-bottom:1px solid #efe7ec;
}

/* buttons: the plum is the region signature */
#screen-def-sr .floathero{ margin:16px 0 10px; }
#screen-def-sr .btn2.accent, #screen-def-sr .floatbtn{
  background:var(--accent); border:none; color:#fff; border-radius:9px; font-weight:700;
  box-shadow:0 9px 20px -9px rgba(120,75,106,.6); transition:filter .15s, transform .1s;
}
#screen-def-sr .btn2.accent:hover, #screen-def-sr .floatbtn:hover{ filter:brightness(1.07); }
#screen-def-sr .btn2.accent:active, #screen-def-sr .floatbtn:active{ transform:translateY(1px); }
#screen-def-sr .btn2:not(.accent){
  border:1px solid #ddd3d9; border-radius:9px; background:#fff; color:var(--deep); font-weight:700;
}
#screen-def-sr .btn2:not(.accent):hover{ border-color:var(--accent); background:#faf6f9; }
#screen-def-sr .floatnote{ color:#9b8f9a; }

/* the sticky agent-name bar — soft plum tint (was amber), still a clear do-not-clear field */
#screen-def-sr .agentbar{
  background:#F0EFEB; border:1px solid #e3e1db; border-left:4px solid var(--accent);
  border-radius:9px; padding:11px 13px;
}
#screen-def-sr .agentbar>label{ color:var(--deep); font-weight:800; }
#screen-def-sr .agentbar>input{ border:1px solid #ddd0da; border-radius:6px; background:#fff; }
#screen-def-sr .agentbar .agenthint{ color:#9b8f9a; }

/* property blocks */
#screen-def-sr .defprop{
  border:1px solid #ececec; border-radius:12px; overflow:hidden; margin:14px 0; background:#fff;
  box-shadow:0 1px 2px rgba(40,25,40,.04);
}
#screen-def-sr .defprophdr{
  background:var(--accent); color:#fff; border:none; width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:9px; padding:12px 15px;
  font-size:13px; font-weight:700; letter-spacing:.01em;
}
#screen-def-sr .defprophdr:hover{ background:#6d4460; }
#screen-def-sr .defprophdr .dphcv{ flex:0 0 auto; color:#e6d5e1; font-size:11px; transition:transform .12s; }
#screen-def-sr .defprop:not(.shut) .defprophdr .dphcv{ transform:rotate(90deg); }
#screen-def-sr .defprophdr .dphtitle{ font-weight:700; }
#screen-def-sr .defprophdr .dphsum{ font-weight:500; color:#efe2ec; font-size:12px; }
#screen-def-sr .defpropbody{ padding:18px; background:#F8F7F4; }

/* fields: capped widths in a tidy wrapping grid — nothing spans edge-to-edge as one empty band */
#screen-def-sr .two{ display:flex; flex-wrap:wrap; gap:13px 18px; align-items:flex-start; margin:0 0 13px; }
#screen-def-sr .two>.field{ flex:1 1 240px; min-width:0; max-width:360px; margin:0; }
#screen-def-sr .two>.field:only-child{ flex:0 1 460px; }
#screen-def-sr .field.atticfield{ flex:0 0 auto; max-width:none; align-self:flex-end; padding-bottom:8px; }
#screen-def-sr .field.days{ flex:1 1 300px; }
#screen-def-sr .field textarea{ width:100%; max-width:100%; }

/* labels + inputs: clean uppercase micro-labels, soft plum focus */
#screen-def-sr .field>label{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#9a8f97; margin-bottom:6px;
}
#screen-def-sr .field input[type=text],
#screen-def-sr .field input[type=time],
#screen-def-sr .field input:not([type]),
#screen-def-sr .field select,
#screen-def-sr .field textarea,
#screen-def-sr .defmainacct input,
#screen-def-sr .defgate select{
  border:1px solid #e2dbe0; border-radius:9px; background:#fff; padding:11px 13px;
  font-size:14px; color:#332b30; transition:border-color .15s, box-shadow .15s;
}
#screen-def-sr input:focus, #screen-def-sr select:focus, #screen-def-sr textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(120,75,106,.15);
}
/* DEF Property block — compact pill inputs + denser two-up layout (Kasie, 6 Aug 2026) */
#screen-def-sr .defpropbody .field:not(.acct) input[type=text],
#screen-def-sr .defpropbody .field:not(.acct) input[type=time],
#screen-def-sr .defpropbody .field:not(.acct) input:not([type]),
#screen-def-sr .defpropbody .field:not(.acct) select{ border-radius:999px; padding:8px 14px; font-size:13px; }
#screen-def-sr .defpropbody .field>label{ font-size:10px; margin-bottom:3px; letter-spacing:.08em; }
#screen-def-sr .defpropbody{ display:flex; flex-wrap:wrap; gap:9px 14px; padding:14px; }
#screen-def-sr .defpropbody > *{ flex:1 1 100%; margin:0; order:9; }
#screen-def-sr .defpropbody .two{ margin:0; }
#screen-def-sr .defpropbody .two>.field{ max-width:none; }
#screen-def-sr .defpropbody .two:has(input[data-d=cname]){ order:1; flex:1 1 48%; }
#screen-def-sr .defpropbody .two:has(input[data-d=phone]){ order:2; flex:1 1 48%; }
#screen-def-sr .defpropbody .two:has(input[data-d=addr]){ order:3; flex:1 1 100%; }
#screen-def-sr .defpropbody .two:has([data-d=devices]){ order:4; flex:1 1 48%; }
#screen-def-sr .defpropbody .two:has([data-d=etype]){ order:5; flex:1 1 48%; }
#screen-def-sr .defpropbody .deflocs{ order:6; flex:1 1 48%; }
#screen-def-sr .defpropbody .two:has([data-d=own]){ order:7; flex:1 1 48%; }
#screen-def-sr .deflocs .deflocrow{ flex-wrap:nowrap; gap:6px 8px; }
#screen-def-sr .deflocs .chkbox{ white-space:nowrap; }
/* days + time picker share their row (aligned to the other two-up rows) */
#screen-def-sr .defpropbody .two:has(> .field.days){ order:8; align-items:flex-start; gap:9px 14px; }
#screen-def-sr .defpropbody .two:has(> .field.days) > .field.days{ flex:1 1 48% !important; min-width:0; }
#screen-def-sr .defpropbody .two:has(> .field.days) > .field:not(.days){ flex:1 1 48% !important; min-width:0; }
/* ANY pill matches the weekday buttons and sits inline after FRI */
#screen-def-sr .field.days .pick{ flex-wrap:wrap; align-items:center; gap:5px; }
#screen-def-sr .field.days .dayrow{ gap:3px; }
#screen-def-sr .field.days .dayb{ height:26px; box-sizing:border-box; padding:0 7px !important; font-size:11.5px; line-height:normal; }
#screen-def-sr .field.days .anychk{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin:0; height:26px; box-sizing:border-box; border:1px solid #ddd3d9; border-radius:8px; background:#fff; color:var(--deep); font-weight:700; padding:0 7px; font-size:11.5px; line-height:normal; text-transform:uppercase; letter-spacing:.02em; }
#screen-def-sr .field.days .anychk input{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
#screen-def-sr .field.days .anychk:hover{ border-color:var(--accent); background:#faf6f9; }
#screen-def-sr .field.days .anychk:has(input:checked){ background:var(--accent); border-color:var(--accent); color:#fff; }
/* equipment-location + renter checkboxes: match the smaller Before/After/Any-time boxes */
#screen-def-sr .deflocs .chkbox input[type=checkbox], #screen-def-sr .defrentf .chkbox input[type=checkbox]{ width:13px; height:13px; }

/* day / window / enrollment pills */
#screen-def-sr .dayb, #screen-def-sr .winb{
  border:1px solid #ddd3d9; border-radius:8px; background:#fff; color:var(--deep); font-weight:600;
}
#screen-def-sr .dayb:hover, #screen-def-sr .winb:hover{ border-color:var(--accent); background:#faf6f9; }
#screen-def-sr .dayb.on, #screen-def-sr .winb.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* the three-question gate + upgrade note: soft plum callouts, not raw alarm boxes */
#screen-def-sr .defgate{
  border:1px solid #e3e1db; border-left:4px solid var(--accent); border-radius:9px;
  background:#F0EFEB; padding:12px 13px; margin:10px 0;
}
#screen-def-sr .defgate .gateh{ color:var(--deep); }
#screen-def-sr .upnote{
  border:1px solid #e6dfe4; border-left:4px solid var(--accent); background:#f8f5f8;
  border-radius:8px; color:#5c525a;
}
#screen-def-sr .mini{ color:#8a818a; }
#screen-def-sr .defmainacct{ margin-top:10px; }

/* the Enrollment Request bar: collapsed, tucked under a pressable header */
#screen-def-sr .defsr{
  border:1px solid #eadfe6; border-radius:11px; overflow:hidden; margin-top:15px; background:#fff;
}
#screen-def-sr .defsrhdr{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  border:none; background:#F0EFEB; padding:12px 14px;
  font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--deep);
}
#screen-def-sr .defsrhdr:hover{ background:#E9E8E4; }
#screen-def-sr .defsrhdr .dphcv{ flex:0 0 auto; color:var(--accent); font-size:11px; transition:transform .12s; }
#screen-def-sr .defsr:not(.shut) .defsrhdr .dphcv{ transform:rotate(90deg); }
#screen-def-sr .defsrbody{ padding:14px; }
#screen-def-sr .defsr.shut .defsrbody{ display:none; }

/* the aggregate scripts: clean white output cards, plum contractor tag, plum copy buttons */
#screen-def-sr #defScripts{ margin-top:18px; }
#screen-def-sr #defScripts .conblock{
  border:1px solid #ececec; border-radius:12px; padding:16px; margin:14px 0; background:#fff;
  box-shadow:0 1px 2px rgba(40,25,40,.04), 0 14px 30px -20px rgba(75,49,67,.16);
}
#screen-def-sr .cnote{
  background:#fef7d6; border:1px solid #ecd583; border-left:4px solid #e0a800;
  border-radius:8px; color:#6b5b12; font-weight:700;
}
#screen-def-sr .cnote .cninfo{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; }
#screen-def-sr .cnote .chdr{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#a5820e; }
#screen-def-sr .cnote .ct{ color:#5a4d0e; font-weight:700; }
#screen-def-sr .copy{ background:var(--accent); border-radius:5px; }
#screen-def-sr .copy:hover{ background:var(--deep); }
#screen-def-sr .outlabel span{ color:var(--deep); }
#screen-def-sr .outbox{ border-radius:9px; }


/* ============================================================================================
   DEF CLEAN v2 (Kasie, 23 Jul 2026) — designed buttons (not "boring as hell"), a Enrollment Request
   section that actually stands out, amber (not red) equipment warnings, clear color separation
   for additional properties, equipment+attic on one row, inline Any day, and the add-property
   gate note. Appended last so it wins. */

/* toggle chips — day / window / New-Upgrade: tactile, with lift + a rich on-state */
#screen-def-sr .dayb, #screen-def-sr .winb{
  border:1px solid #d8cdd6; border-radius:9px; background:#fff; color:#5b4a54; font-weight:700;
  padding:8px 13px; transition:all .13s ease;
}
#screen-def-sr .dayb:hover, #screen-def-sr .winb:hover{
  border-color:var(--accent); color:var(--deep); background:#faf4f8;
  transform:translateY(-1px); box-shadow:0 4px 10px -6px rgba(120,75,106,.5);
}
#screen-def-sr .dayb.on, #screen-def-sr .winb.on{
  background:linear-gradient(135deg,#854f74,#5f3a54); border-color:#5f3a54; color:#fff;
  box-shadow:0 6px 14px -6px rgba(75,49,67,.6);
}

/* action buttons — plum with real depth + hover lift */
#screen-def-sr .btn2.accent, #screen-def-sr .floatbtn, #screen-def-sr #defMpAdd{
  background:linear-gradient(135deg,#854f74,#5f3a54); border:none; color:#fff; font-weight:800;
  border-radius:10px; letter-spacing:.02em; box-shadow:0 10px 22px -10px rgba(120,75,106,.7);
  transition:transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
#screen-def-sr .btn2.accent:hover, #screen-def-sr .floatbtn:hover, #screen-def-sr #defMpAdd:hover{
  filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(120,75,106,.75);
}
#screen-def-sr .btn2.accent:active, #screen-def-sr .floatbtn:active, #screen-def-sr #defMpAdd:active{ transform:translateY(1px); }
#screen-def-sr .btn2:not(.accent){ border:1.5px solid #d8ccd3; border-radius:10px; background:#fff; color:var(--deep); font-weight:800; transition:all .13s; }
#screen-def-sr .btn2:not(.accent):hover{ border-color:var(--accent); background:#faf4f8; transform:translateY(-1px); box-shadow:0 4px 12px -7px rgba(120,75,106,.5); }
#screen-def-sr .copy{ background:linear-gradient(135deg,#854f74,#5f3a54); border:none; border-radius:6px; font-weight:700; box-shadow:0 4px 10px -5px rgba(120,75,106,.55); transition:filter .15s, transform .1s; }
#screen-def-sr .copy:hover{ filter:brightness(1.08); }

/* the Enrollment Request — its OWN important section, made to stand out far more */
#screen-def-sr .defsr{
  margin-top:20px; border:2px solid #5f3a54; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 12px 28px -16px rgba(75,49,67,.5);
}
#screen-def-sr .defsrhdr{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; text-align:left; cursor:pointer;
  border:none; background:linear-gradient(120deg,#4B3143,#6d4460); color:#fff; padding:14px 16px;
  font-family:inherit; letter-spacing:0; text-transform:none;
}
#screen-def-sr .defsrhdr:hover{ filter:brightness(1.07); }
#screen-def-sr .defsrhdr .dphcv{ flex:0 0 auto; color:#f0d9ea; font-size:12px; transition:transform .12s; }
#screen-def-sr .defsr:not(.shut) .defsrhdr .dphcv{ transform:rotate(90deg); }
#screen-def-sr .defsrbadge{
  flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#4b3410; background:#f0b429; padding:4px 9px; border-radius:20px;
}
#screen-def-sr .defsrttl{ font-size:15px; font-weight:800; letter-spacing:.01em; }
#screen-def-sr .defsrsub{ font-size:11.5px; font-weight:500; color:#e8d6e3; }
#screen-def-sr .defsrbody{ padding:16px; background:#fbf7fa; }
#screen-def-sr .defsr .srremind{ font-size:12.5px; line-height:1.5; }

/* equipment warnings — amber caution, not red (red = error) */
#screen-def-sr .upnote{
  border:1px solid #f0e0b0; border-left:4px solid #e0a92a; background:#fdf6e3; color:#6b5316;
  border-radius:8px; padding:9px 12px; font-size:12.5px; line-height:1.45;
}
#screen-def-sr .upnote b{ color:#5a4410; }

/* the add-property gate note — an amber hint */
#screen-def-sr .defaddnote{
  margin:9px 0 2px; padding:10px 13px; border-radius:9px; background:#fdf6e3;
  border:1px solid #f0e0b0; border-left:4px solid #e0a92a; color:#6b5316; font-size:12.5px; font-weight:700;
}
#screen-def-sr .defaddnote[hidden]{ display:none; }

/* ADDITIONAL properties — clear visual + colour separation from the main call (slate, not plum) */
#defProps .defprop:not(:first-child){
  margin-top:16px;
}
#defProps .defprop:not(:first-child) .defprophdr{ background:linear-gradient(120deg,#333f56,#465575); }
#defProps .defprop:not(:first-child) .defprophdr .dphcv{ color:#c7d0e3; }
#defProps .defprop:not(:first-child) .defprophdr .dphsum{ color:#d5dcec; }
#defProps .defprop:not(:first-child) .defpropbody{ background:#f5f7fb; }

/* equipment box shorter so Attic sits on the SAME row; Any day inline beside the day pills */
#screen-def-sr .two:has(> .atticfield){ flex-wrap:nowrap; align-items:flex-end; }
#screen-def-sr .two:has(> .atticfield) > .field:not(.atticfield){ flex:1 1 auto; max-width:none; }
#screen-def-sr .field.days .anychk{ margin-top:0; }
#screen-def-sr .field.days .pick{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; }
#screen-def-sr .field.days .dayrow{ display:flex; gap:5px; flex-wrap:wrap; }

/* Any day / Any time truly BESIDE their control (Kasie, 23 Jul 2026: "any day needs to fit on the
   side of the days... like im asking"). Give the day field room and let the time select be
   content-width so the checkbox sits next to it, not under it. */
#screen-def-sr .field.days{ flex:1 1 360px; }
#screen-def-sr .field.days .dayb{ padding:7px 10px; }
#screen-def-sr select.timesel{ width:auto; min-width:140px; flex:0 1 auto; }

/* ============================================================================================
   DEF CLEAN v3 (Kasie, 23 Jul 2026) — three note tiers (yellow=regular, orange=warning,
   red=error), Compass Security-red Add + Copy buttons (Add pinned right), graphite (not DEC-blue)
   additional properties that stay LOCKED behind the 3 mandatory questions, an obvious main
   account request, and the after-questions yellow account reminder. Appended last so it wins. */

/* note tiers */
#screen-def-sr .note{ border-radius:8px; padding:8px 12px; font-size:12px; line-height:1.45; border:2px solid; margin:6px 0; background:#fff; }
#screen-def-sr .note-yellow{ background:#fff; border-color:#E0A800; color:#6b5b12; }
#screen-def-sr .note-yellow b{ color:#5a4d0e; }
#screen-def-sr .note-orange{ background:#fff; border-color:#D97757; color:#a5511f; }
#screen-def-sr .note-orange b{ color:#663d0e; }
#screen-def-sr .note-red{ background:#fff; border-color:#d63827; color:#a5261a; font-weight:600; }

/* Compass Security-red Add (pinned right) + Copy buttons */
#screen-def-sr #defMpAdd{ background:#d63827; box-shadow:0 10px 22px -10px rgba(214,56,39,.6); display:block; width:fit-content; margin-left:auto; }
#screen-def-sr #defMpAdd:hover{ background:#c0301f; filter:none; }
#screen-def-sr .copy{ background:#d63827; box-shadow:0 4px 10px -5px rgba(214,56,39,.55); }
#screen-def-sr .copy:hover{ background:#c0301f; filter:none; }

/* the MAIN account request — an OBVIOUS yellow card, clearly being asked for */
#screen-def-sr .defmainacct{ margin:16px 0 6px; padding:13px 15px; border:2px solid #e6c229; border-radius:11px; background:#fffdf3; box-shadow:0 10px 22px -12px rgba(230,194,41,.5); }
#screen-def-sr .defmainacct .acctreqhd{ font-weight:800; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:#6b5b12; margin-bottom:8px; }
#screen-def-sr .defmainacct .note{ margin-top:0; }

/* additional properties — graphite theme (NOT DEC blue), plum region rail; locked until valid */
#defProps .defprop:not(:first-child){
  margin-top:16px;
}
#defProps .defprop:not(:first-child) .defprophdr{ background:var(--accent); }
#defProps .defprop:not(:first-child) .defprophdr .dphcv{ color:#e6d5e1; }
#defProps .defprop:not(:first-child) .defprophdr .dphsum{ color:#efe2ec; }
#defProps .defprop:not(:first-child) .defpropbody{ background:#F8F7F4; }
/* added-property customer fields: same two-up layout as Property 1 (they live inside .deflock) */
#screen-def-sr .deflock:not([hidden]){ display:flex; flex-wrap:wrap; gap:9px 14px; align-items:flex-start; }
#screen-def-sr .deflock > *{ flex:1 1 100%; margin:0; order:9; }
#screen-def-sr .deflock > .defaddacct{ order:0; flex:1 1 100%; }

/* the mandatory 3-question gate — required, prominent; the error inside is red */
#screen-def-sr .defgate{ border:1px solid #e2dbe0; border-radius:11px; background:#fbf9fb; padding:13px 15px; margin:0; }
#screen-def-sr .defgate .gateh{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-transform:uppercase; letter-spacing:.05em; font-size:12px; font-weight:800; color:var(--deep); margin-bottom:11px; }
#screen-def-sr .defgate .reqpill{ flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:#d63827; padding:3px 9px; border-radius:20px; }
#screen-def-sr .defgateerr{ margin:10px 0 0; }
/* streamline the 3 gate questions: one compact row each, short dropdown on the right */
#screen-def-sr .defgate .field{ display:flex; align-items:center; gap:12px; margin:0 0 8px; }
#screen-def-sr .defgate .field:last-of-type{ margin-bottom:0; }
#screen-def-sr .defgate .field > label{ margin:0; flex:1 1 auto; justify-content:flex-start; gap:8px; font-size:11.5px; }
#screen-def-sr .defgate .field select{ flex:0 0 auto; width:auto; min-width:120px; padding:6px 12px !important; }
/* one clear for the whole gate (top-right by Required), not per question */
#screen-def-sr .defgate .field .t77clr{ display:none; }
#screen-def-sr .defgate .gatehr{ display:inline-flex; align-items:center; gap:10px; }
/* account-number sections get their OWN colour (indigo), distinct from the amber Notes and Step 1 blue */
#screen-def-sr .defmainacct, #screen-def-sr .defaddacct{ border:2px solid #5a4bb3 !important; background:#f1eefb !important; box-shadow:0 10px 22px -12px rgba(90,75,179,.45) !important; }
#screen-def-sr .defmainacct .acctreqhd, #screen-def-sr .defaddacct .acctreqhd{ color:#3f2f8f !important; }
#screen-def-sr .defmainacct .note, #screen-def-sr .defaddacct .note{ background:#f7f5fd !important; border:1px solid #ddd5f2 !important; border-left:3px solid #5a4bb3 !important; color:#463a80 !important; }
#screen-def-sr .defmainacct .note b, #screen-def-sr .defaddacct .note b{ color:#3f2f8f !important; }

/* everything past the questions unlocks only once they are answered + valid; account # leads */
#screen-def-sr .deflock{ margin-top:16px; }
#screen-def-sr .deflock[hidden]{ display:none; }
#screen-def-sr .defaddacct{ margin-bottom:14px; }
#screen-def-sr .defaddacct .note{ margin-bottom:10px; }

/* checkmarks in the DEF plum, not the browser's default blue (Kasie, 23 Jul 2026: "blue
   checkmarks are clashing hard"). Covers Attic, Any day, Any time. */
#screen-def-sr input[type="checkbox"]{ accent-color:#784B6A; }
/* the native time picker sits at a natural width so Any time stays beside it */
#screen-def-sr .field .pick input[type="time"]{ width:auto; min-width:140px; flex:0 1 auto; }

/* the mandatory three-question block: a THICK red outline so it reads as required (Kasie, 23 Jul
   2026: "supposed to be thickly outlined in red being its the mandatory three question block"). */
#screen-def-sr .defgate{ border:3px solid #d63827; background:#fdf3f1; border-radius:11px; padding:14px 15px; box-shadow:0 10px 24px -14px rgba(214,56,39,.4); }
#screen-def-sr .defgate .gateh{ color:#a52216; }

/* the call flow, numbered cleanly: Step 1 live call, Step 2 voicemail, Step 3 SR (Kasie, 23 Jul
   2026: label the order with short, gentle guidance). Badge matches the SR "Step 3" pill. */
#screen-def-sr .stepbadge{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#4b3410; background:#E0A800; padding:3px 8px; border-radius:20px; margin-right:7px; vertical-align:middle; }
#screen-def-sr .stepguide{ margin:2px 16px 14px; padding:9px 13px; border-radius:8px; background:#fff; border:2px solid #E0A800; color:#5a4d0e; font-size:12px; line-height:1.5; }
#screen-def-sr .stepguide b{ color:var(--deep); }
#screen-def-sr .stepguide .stepnum{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#999; color:#fff; font-size:10px; font-weight:800; margin-right:7px; vertical-align:middle; }
#screen-def-sr .stepguide .stepnum.sn1{ background:#3f6f9f; }
#screen-def-sr .stepguide .stepnum.sn2{ background:#3f8f4f; }
#screen-def-sr .stepguide .stepnum.sn3{ background:#D97757; }

/* Step 3 — the Enrollment Request text, now in the script flow below Step 2, copyable like 1 & 2 */
#screen-def-sr .srout .outbox{ background:#fdf1ec; border:1px solid #f2d6c8; border-left:4px solid #D97757; font-weight:600; line-height:1.5; }
#screen-def-sr .srout .outlabel span{ color:var(--deep); }
#screen-def-sr .srout .srcopy{ background:#D97757; border-color:#D97757; }
#screen-def-sr .srout .srcopy:hover{ background:#bf5a38; border-color:#bf5a38; }
#screen-def-sr .srout .srpick{ display:flex; align-items:center; gap:8px; margin:2px 0 10px; font-size:12.5px; }
#screen-def-sr .srout .srpick .srpicklbl{ font-weight:700; color:#7a4a2f; white-space:nowrap; }
#screen-def-sr .srout .srrow{ display:flex; align-items:flex-start; gap:8px; }
#screen-def-sr .srout .srrow .srcopy{ flex:0 0 auto; }
#screen-def-sr .srout .srtext{ flex:1; white-space:pre-wrap; font-weight:600; line-height:1.5; background:#fff; border:1px solid #d8d8d8; border-radius:7px; padding:9px 11px; min-height:42px; }
#screen-def-sr .srout .srtext:empty::before{ content:'The SR text will appear here.'; color:#a9a9a9; font-weight:400; font-style:italic; }

/* the additional-property account box matches the MAIN account card — same yellow card + heading
   (Kasie, 23 Jul 2026: "it should be colored like the first one"), numbered "Property N account #". */
#screen-def-sr .defaddacct{ margin:0 0 16px; padding:13px 15px; border:2px solid #e6c229; border-radius:11px; background:#fffdf3; box-shadow:0 10px 22px -12px rgba(230,194,41,.5); }
#screen-def-sr .defaddacct .acctreqhd{ font-weight:800; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:#6b5b12; margin-bottom:8px; }
#screen-def-sr .defaddacct .note{ margin:0 0 10px; }

/* address autocomplete dropdown — drawn by us at document.body (position:fixed) so no ancestor
   overflow/transform/stacking context can clip or hide it (Kasie, 23 Jul 2026: native datalist
   would not render the async results). Global, not region-scoped, because it lives on <body>. */
.t77addrdrop{ position:fixed; z-index:2147483000; display:none; background:#fff; border:1px solid #d8ccd3;
  border-radius:9px; box-shadow:0 16px 36px -10px rgba(40,25,40,.42); max-height:280px; overflow-y:auto;
  font:14px/1.35 'Avenir Next','Mulish',Arial,sans-serif; }
.t77addropt{ padding:9px 13px; cursor:pointer; color:#332b30; border-bottom:1px solid #f1edf0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t77addropt:last-child{ border-bottom:none; }
.t77addropt:hover, .t77addropt.on{ background:#f4eef2; color:#4b3143; }

/* Before / After / Any time checkboxes aligned in one row under the time box (Kasie, 23 Jul 2026). */
#screen-def-sr .bachks{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-top:9px; }
#screen-def-sr .bachks .anychk{ margin:0; }

/* Larger DEF SA logo on the DEF hub hero (Kasie, 23 Jul 2026: 'I want the logo larger somewhere here'). */
.pickhero .deflogo{ display:block; width:132px; height:132px; margin:12px auto 4px; }
@media(max-width:520px){ .pickhero .deflogo{ width:100px; height:100px; } }

/* App-available marker: DEF SA badge in the bottom-right of the card, across from Open (Kasie, 23 Jul 2026). */
.tile.has-app .appmark{ position:absolute; right:18px; bottom:16px; width:42px; height:42px; border-radius:10px; background:#fff; padding:2px; box-shadow:0 3px 9px -3px rgba(0,0,0,.5); }

/* Region picker: enter each region via its main logo (Kasie, 23 Jul 2026). */
.lp-entries{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; max-width:600px; margin:14px auto 0; padding:24px 22px 20px; background:#fff; border:1px solid #aeb3b8; border-radius:26px; box-shadow:0 14px 34px -26px rgba(0,0,0,.14); }
.lp-entry{ display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; cursor:pointer; padding:10px 8px 14px; border-radius:18px; transition:transform .18s ease, box-shadow .18s ease; }
.lp-entry img{ width:100%; max-width:190px; height:auto; display:block; filter:drop-shadow(0 9px 14px rgba(0,0,0,.24)); transition:filter .18s ease; }
.lp-entry:hover{ transform:translateY(-6px); }
.lp-entry:hover img{ filter:drop-shadow(0 15px 22px rgba(0,0,0,.32)); }
.lp-entry:focus-visible{ outline:3px solid var(--red); outline-offset:4px; }
.lp-entry-name{ font-weight:800; color:var(--head); font-size:15px; text-align:center; line-height:1.22; }
/* Learning Hub badge — an inline SVG entry that matches the region badge sizing (Kasie, 26 Aug 2026) */
.lp-entry .learnbadge{ width:100%; max-width:190px; height:auto; display:block; filter:drop-shadow(0 9px 14px rgba(0,0,0,.24)); transition:filter .18s ease; }
.lp-entry:hover .learnbadge{ filter:drop-shadow(0 15px 22px rgba(0,0,0,.32)); }
.lp-entries-learn{ grid-template-columns:1fr; max-width:240px; }
@media(max-width:640px){ .lp-entries{ grid-template-columns:1fr; gap:18px; max-width:280px; margin:6px auto 0; } }


/* Lightning bolts between the tool tiles on each region hub (Kasie, 23 Jul 2026). */
.tile-bolt{ flex:0 0 auto; align-self:center; width:26px; color:var(--red); line-height:0; }
.tile-bolt svg{ width:100%; height:auto; display:block; fill:currentColor; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
@media(max-width:820px){ .tile-bolt{ display:none; } }

/* Closing kicker under the region logos - bookends the header (Kasie, 23 Jul 2026). */
.lp-kicker{ text-align:center; margin:30px auto 6px; font-size:20px; font-weight:800; color:#17181A; letter-spacing:.005em; }
.lp-kicker .r{ color:var(--red); font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:600; }

/* Float overlay hides the tool content on ANY SR screen while floating (DEC/DEP too). */
.floating .card, .floating .prio{ display:none }

/* Match the DEC/DEP float button to DEF's (borderless, same radius/size). */
.floatbtn{ border:none; border-radius:10px; }

/* Kasie 24 Jul 2026: Pin to Desktop + Pin to Gen grouped top-right, OUTLINED (not solid red). */
.topactions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.topactions .apppin{margin-left:0;gap:8px}
.topactions .btn2,.topactions .btn2.accent{background:#fff;color:var(--red);border:1.5px solid var(--red);border-radius:10px;font-weight:700;font-size:12.5px;padding:8px 14px;box-shadow:none}
.topactions .btn2:hover:not(:disabled),.topactions .btn2.accent:hover:not(:disabled){background:#fff5f4;border-color:var(--redd);color:var(--redd)}
.topactions .floatbtn{font-size:12.5px;padding:8px 14px;box-shadow:none}

/* WH add-on -> Customer Service warning box (Kasie, 24 Jul 2026). */
#whCsNote,#depWhCsNote{margin:9px 0 3px;padding:10px 13px;background:#FDECEA;border:1px solid #EBA9A2;border-left:5px solid var(--red);border-radius:8px;color:#96271B;font-weight:600;font-size:13px;line-height:1.45}
#whCsNote b,#depWhCsNote b{color:#7A170F}

/* ===== SALE LOG panel — Kasie, 24 Jul 2026 ===== */
.salelogbtn{white-space:nowrap}
.saleov{position:fixed;inset:0;z-index:100000;background:rgba(20,22,30,.44);display:flex;justify-content:flex-end}
.saleov[hidden]{display:none}
.salepane{width:min(460px,94vw);height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:-14px 0 40px -18px rgba(0,0,0,.5)}
.salehd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;font-size:17px;color:var(--head)}
.salex{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:var(--gray)}
.salex:hover{color:var(--red)}
.saleadd{padding:12px 16px;border-bottom:1px solid var(--line);background:#fafafb}
.saler{display:flex;gap:8px;margin-bottom:8px}
.saler input{flex:1 1 0;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit}
.saleadd textarea{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;resize:vertical}
.salesrprev{font-size:11.5px;color:var(--gray);margin:7px 0 9px;line-height:1.4}
.salesrlbl{font-weight:700;color:var(--head)}
.salelog{width:100%}
.salebody{flex:1 1 auto;overflow-y:auto;padding:10px 16px 20px}
.saleempty{color:var(--gray);font-size:13px;line-height:1.5;padding:18px 4px}
.salemon{margin-bottom:14px}
.salemonh{font-weight:800;color:var(--head);font-size:15px;border-bottom:2px solid var(--line);padding-bottom:4px;margin-bottom:8px}
.salecnt{display:inline-block;background:var(--head);color:#fff;font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px;margin-left:6px;vertical-align:middle}
.saleday{margin:0 0 10px}
.saledayh{font-weight:700;color:var(--gray);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;margin:6px 0 5px}
.saleitem{border-left:4px solid #888;background:#fff;border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:8px 10px;margin-bottom:7px}
.saleitop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.saletag{color:#fff;font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 7px;letter-spacing:.03em}
.saletime{color:var(--gray);font-size:12px}
.salenm{font-weight:700;color:var(--head);font-size:13px}
.saleph{color:var(--head);font-size:12.5px}
.saledel{margin-left:auto;border:0;background:transparent;color:var(--gray);font-size:18px;line-height:1;cursor:pointer}
.saledel:hover{color:var(--red)}
.salenote{font-size:13px;color:var(--head);margin-top:5px;white-space:pre-wrap;line-height:1.4}
.salesr{margin-top:6px}
.salesr summary{cursor:pointer;font-size:12px;color:var(--accent);font-weight:600}
.salesr pre{white-space:pre-wrap;font:inherit;font-size:12px;color:#444;background:var(--outbg);border-radius:6px;padding:7px 9px;margin:5px 0 0}
.salefoot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.salefoot .btn2{flex:1 1 auto}
.salewarn{color:var(--red);border-color:var(--red)}
/* Sale Log — inline on the form (Kasie, 28 Jul 2026) */
.saleinline{margin:18px 0 8px;padding:14px 15px;border:2px solid #2E9E5B;border-radius:11px;background:#DCEEE3;box-shadow:0 6px 18px -14px rgba(46,158,91,.5)}
.salih{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#1F7A46;margin-bottom:10px}
.saleinline .si-notes{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;resize:vertical}
.si-row{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
/* Sale Log v2 — month header tallies + entry numbers (Kasie, 28 Jul 2026) */
.salemonh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.salemtitle{font-weight:800;font-size:15px}
.saleregs{display:inline-flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.salereg{color:#fff;font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 7px;letter-spacing:.02em}
.salenum{color:var(--gray);font-size:11px;font-weight:700;min-width:20px}
/* Sale Log — green quick-jump button ties to the green Log-this-sale card (Kasie, 28 Jul 2026) */
.salejumpbtn{background:#2E9E5B;color:#fff;border-color:#2E9E5B}
.salejumpbtn:hover:not(:disabled){background:#25834B;border-color:#25834B;color:#fff}

.salenm{text-transform:uppercase}

/* Sale Log — entry is one collapsible; first line summarises, expand for the rest (Kasie, 28 Jul 2026) */
.saleitem>summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;list-style:none}
.saleitem>summary::-webkit-details-marker{display:none}
.saleitem>summary::marker{content:""}
.saleitem>summary:hover{opacity:.92}
.salechev{margin-left:4px;color:var(--gray);font-size:12px;transition:transform .15s ease}
.saleitem[open] .salechev{transform:rotate(90deg)}
.saledel{margin-left:auto;border:0;background:transparent;color:var(--gray);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.saleitembody{padding:8px 2px 2px}
.salesrpre{white-space:pre-wrap;font:inherit;font-size:12px;color:#444;background:var(--outbg);border-radius:6px;padding:7px 9px;margin:6px 0 0}
/* Sale Log — Today/Month/YTD stats block (Kasie, 28 Jul 2026) */
.salestats{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin-bottom:14px}
.salestatrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0}
.salestatrow+.salestatrow{border-top:1px solid var(--line)}
.salestatlbl{font-weight:700;color:var(--gray);font-size:11px;text-transform:uppercase;letter-spacing:.06em;min-width:86px}
.salestatnum{font-weight:800;color:var(--head);font-size:19px;min-width:30px}
.salestats .saleregs{margin-left:auto}
/* Sale Log — Year > Month > Day nested collapsibles (Kasie, 28 Jul 2026) */
.saleyr{margin:0 0 12px}
.saleyr>summary,.salemo>summary,.saledy>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.saleyr>summary::-webkit-details-marker,.salemo>summary::-webkit-details-marker,.saledy>summary::-webkit-details-marker{display:none}
.saleyr>summary::marker,.salemo>summary::marker,.saledy>summary::marker{content:""}
.saleyr>summary{padding:6px 0;border-bottom:2px solid var(--line);margin-bottom:6px}
.saleyrh{font-weight:800;font-size:16px;color:var(--head)}
.salemo{margin:6px 0 6px 6px}
.salemo>summary{padding:5px 0;border-bottom:1px solid var(--line)}
.salemoh{font-weight:800;font-size:14px;color:var(--head)}
.saledy{margin:5px 0 8px 14px}
.saledy>summary{padding:4px 0}
.saledyh{font-weight:700;font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.04em}
.saledy .saleitem{margin-left:2px}
.saleyr>summary .saleregs,.salemo>summary .saleregs,.saledy>summary .saleregs{margin-left:auto}
details[open]>summary>.salechev{transform:rotate(90deg)}
/* Sale Log — Log-this-sale collapsible green bar (Kasie, 28 Jul 2026) */
.saleinline{margin:16px 0 8px;border:0;background:transparent;padding:0;box-shadow:none}
.salebar{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-family:inherit;border:0;cursor:pointer;padding:10px 12px;background:#2E9E5B;color:#fff;border-radius:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.salebar:hover{filter:brightness(1.08)}
.salebarcv{flex:0 0 auto;font-size:11px;transition:transform .12s;transform:rotate(90deg)}
.saleinline.shut .salebarcv{transform:rotate(0deg)}
.saleinline:not(.shut) .salebar{border-radius:8px 8px 0 0}
.salebarbody{border:2px solid #2E9E5B;border-top:0;border-radius:0 0 8px 8px;background:#DCEEE3;padding:12px 14px}
.saleinline.shut .salebarbody{display:none}
.salebarbody .si-notes{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;resize:vertical}
/* Sale Log — Log-this-sale bar aligned + sized like the Part bars (Kasie, 28 Jul 2026) */
.saleinline{margin:6px 0 8px}
.salebar{padding:11px 11px;border-radius:5px;line-height:19px}
.saleinline:not(.shut) .salebar{border-radius:5px 5px 0 0}
.salebarbody{border-radius:0 0 5px 5px}
/* Center-screen red alert modal (Kasie, 28 Jul 2026) */
.t77modal-ov{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.t77modal-ov[hidden]{display:none}
.t77modal-card{background:#fff;max-width:460px;width:100%;border:3px solid var(--red,#c0392b);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden;animation:t77pop .16s ease-out}
@keyframes t77pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.t77modal-hd{background:var(--red,#c0392b);color:#fff;font-weight:800;font-size:15px;padding:12px 16px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.3px}
.t77modal-bd{padding:16px 18px;color:#222;font-size:14px;line-height:1.5}
.t77modal-bd b{color:var(--red,#c0392b)}
.t77modal-ft{padding:0 18px 16px;text-align:right}
.t77modal-ok{background:var(--red,#c0392b);color:#fff;border:0;border-radius:8px;font-weight:700;font-size:14px;padding:10px 22px;cursor:pointer}
.t77modal-ok:hover{filter:brightness(1.08)}
/* Own/Rent tenure + CM email in Log this sale */
.si-tenure{display:flex;gap:18px;align-items:center;padding-top:3px}
.si-ten-opt{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;cursor:pointer}
.si-ten-opt input{margin:0}
.saleten{background:#2E9E5B;color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:10px;margin-left:2px}
.saleeml{font-size:12.5px;color:#555;margin-bottom:4px}
/* Sale Log — List | Calendar view (Kasie, 28 Jul 2026) */
.saleviewsw{display:flex;gap:6px;margin-bottom:10px}
.saleview-btn{flex:1;border:1px solid #cfd4da;background:#fff;border-radius:8px;padding:7px 10px;font-weight:700;font-size:13px;cursor:pointer;color:#444}
.saleview-btn.on{background:#2E9E5B;border-color:#2E9E5B;color:#fff}
.salecal{margin-top:4px}
.salecal-hd{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 10px}
.salecal-title{font-weight:800;font-size:15px}
.salecal-nav{border:1px solid #cfd4da;background:#fff;border-radius:8px;width:34px;height:30px;font-size:16px;cursor:pointer;line-height:1}
.salecal-nav:hover{background:#f1f3f5}
.salecal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.salecal-dow{text-align:center;font-size:11px;font-weight:700;color:#8a9099;padding-bottom:2px}
.salecal-cell{position:relative;min-height:46px;border:1px solid #e6e9ee;border-radius:8px;padding:3px 4px;cursor:pointer;background:#fafbfc}
.salecal-cell.empty{border:0;background:transparent;cursor:default}
.salecal-cell.has{background:#fff;border-color:#cfd4da}
.salecal-cell.has:hover{border-color:#2E9E5B}
.salecal-cell.today{box-shadow:inset 0 0 0 2px #b9c0c8}
.salecal-cell.sel{border-color:#2E9E5B;box-shadow:inset 0 0 0 2px #2E9E5B}
.salecal-dnum{font-size:12px;font-weight:600;color:#555}
.salecal-badge{position:absolute;top:2px;right:3px;background:#2E9E5B;color:#fff;font-size:10px;font-weight:800;min-width:15px;height:15px;line-height:15px;text-align:center;border-radius:8px;padding:0 3px}
.salecal-dots{position:absolute;bottom:4px;left:4px;display:flex;gap:2px;flex-wrap:wrap;max-width:80%}
.salecal-dot{width:6px;height:6px;border-radius:50%}
.salecal-day{margin-top:14px}
.salecal-dayh{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.3px;color:#333;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid #e6e9ee}
/* Sale Log — smaller calendar + jump menus (Kasie, 28 Jul 2026) */
.salecal-hd{margin:4px 0 8px;gap:10px}
.salecal-sel{display:inline-flex;gap:6px}
.salecal-msel,.salecal-ysel{font-size:13px;font-weight:700;padding:4px 6px;border:1px solid #cfd4da;border-radius:7px;background:#fff;cursor:pointer}
.salecal-nav{width:28px;height:28px;font-size:15px}
.salecal-grid{gap:3px}
.salecal-dow{font-size:10px;padding-bottom:1px}
.salecal-cell{min-height:32px;padding:2px 3px;border-radius:6px}
.salecal-dnum{font-size:11px}
.salecal-badge{top:1px;right:2px;min-width:13px;height:13px;line-height:13px;font-size:9px;padding:0 2px}
.salecal-dots{bottom:2px;left:3px;gap:2px}
.salecal-dot{width:5px;height:5px}
.salecal-day{margin-top:10px}
/* Sale Log — narrower calendar; day list stays full width (Kasie, 28 Jul 2026) */
.salecal-grid{max-width:280px;margin:0 auto}
.salecal-hd{max-width:280px;margin-left:auto;margin-right:auto}
/* Sale Log — Calendar toggle first; green states; print (Kasie, 28 Jul 2026) */
.saleviewsw{flex-direction:row-reverse}
.salecal-cell.has{background:#fff;border-color:#2E9E5B}
.salecal-cell.has .salecal-dnum{color:#2E9E5B;font-weight:800}
.salecal-cell.has .salecal-badge{background:#2E9E5B;color:#fff}
.salecal-cell.today,.salecal-cell.sel{background:#2E9E5B;border-color:#2E9E5B;box-shadow:none}
.salecal-cell.today .salecal-dnum,.salecal-cell.sel .salecal-dnum{color:#fff;font-weight:800}
.salecal-cell.today .salecal-badge,.salecal-cell.sel .salecal-badge{background:#fff;color:#2E9E5B}
.prtscope{font-size:13px;font-weight:700;color:#444;display:inline-flex;align-items:center;gap:6px}
.prtscope select{font-size:13px;font-weight:700;padding:5px 7px;border:1px solid #cfd4da;border-radius:7px;background:#fff;cursor:pointer}
#t77PrintArea{display:none}
@media print{
  body.t77printing > *{display:none !important}
  body.t77printing #t77PrintArea{display:block !important}
  #t77PrintArea{font:12px/1.45 -apple-system,Segoe UI,Arial,sans-serif;color:#111;padding:0 2px}
  .prttitle{font-size:18px;font-weight:800;margin:0 0 2px}
  .prtsub{font-size:12px;color:#444;margin:0 0 12px}
  .prtday{margin:0 0 12px;break-inside:avoid}
  .prtdayh{font-weight:800;font-size:13px;border-bottom:1.5px solid #000;padding-bottom:2px;margin-bottom:5px}
  .prtitem{padding:4px 0;border-bottom:1px solid #ddd;break-inside:avoid}
  .prtline1{font-weight:700}
  .prtreg{display:inline-block;color:#fff;padding:0 6px;border-radius:6px;font-size:10px;font-weight:800;margin-right:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prtsr{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:11px;margin-top:3px}
  .prtnote{font-size:11.5px;color:#333;margin-top:2px}
}
/* DEC: incomplete SR boxes use the blue tint, not pink (red border still signals the gap) (Kasie, 28 Jul 2026) */
#screen-toolkit .outbox.gapbad,#screen-toolkit #box1.gapbad,#screen-toolkit #box2.gapbad{background:var(--outbg)}
/* Sale Log — cancel/re-enter/edit + per-property log button (Kasie, 28 Jul 2026) */
.saleacts{display:inline-flex;align-items:center;gap:3px;margin-left:auto}
.saleact{font-size:10.5px;font-weight:700;border:1px solid #cfd4da;background:#fff;color:#555;border-radius:6px;padding:2px 7px;cursor:pointer;line-height:1.4}
.salecancel:hover{border-color:#B3120A;color:#B3120A}
.salereenter:hover{border-color:#2E9E5B;color:#2E9E5B}
.saleitem.voided{opacity:.55}
.saleitem.voided .salenum{text-decoration:line-through}
.salevoidreason{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:#B3120A;margin-bottom:5px}
.saleitem.editing{background:#fff;border:2px solid #2E9E5B;border-left-width:4px;border-radius:8px;padding:10px 12px;margin:6px 0}
.saleedit-hd{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:#2E9E5B;margin-bottom:6px}
.saleedit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.saleedit-f{display:flex;flex-direction:column;gap:3px}
.saleedit-f.wide{grid-column:1 / -1}
.saleedit-f label{font-size:11px;font-weight:700;color:#555}
.saleedit-f input,.saleedit-f textarea{font:inherit;font-size:13px;padding:6px 8px;border:1px solid #cfd4da;border-radius:6px;width:100%;box-sizing:border-box}
.saleedit-acts{display:flex;gap:8px;margin-top:10px}
.mplogbtn{margin-top:12px;width:100%;background:#2E9E5B;border-color:#2E9E5B;color:#fff}
.mplogbtn:hover:not(:disabled){background:#25834B;border-color:#25834B;color:#fff}
/* Sale Log — calendar "add a sale on this day" form (Kasie, 28 Jul 2026) */
.calladd{margin-top:14px;border:1px solid #2E9E5B;border-radius:8px;overflow:hidden}
.calladd-bar{background:#2E9E5B;color:#fff;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;padding:9px 11px;cursor:pointer;list-style:none}
.calladd-bar::-webkit-details-marker{display:none}
.calladd-body{padding:12px;background:#F3FAF5;display:flex;flex-direction:column;gap:9px}
.calladd-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.calladd-f{display:flex;flex-direction:column;gap:3px}
.calladd-f label{font-size:11px;font-weight:700;color:#555}
.calladd-f input,.calladd-f textarea,.calladd-f select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid #cfd4da;border-radius:6px;width:100%;box-sizing:border-box}
.calladd-btn{margin-top:2px;background:#2E9E5B;border-color:#2E9E5B;color:#fff}
.calladd-btn:hover:not(:disabled){background:#25834B;border-color:#25834B;color:#fff}
/* Sale Log — make "add a sale on this day" discreet: quiet toggle, no emoji, sale-log green (Kasie, 28 Jul 2026) */
.calladd{margin-top:14px;border:0;border-top:1px solid var(--line);border-radius:0;overflow:visible;padding-top:6px}
.calladd-bar{background:transparent;color:#2E7D4A;font-weight:600;font-size:12px;text-transform:none;letter-spacing:0;padding:4px 2px}
.calladd-bar:hover{text-decoration:underline}
.calladd-body{padding:10px 2px 2px;background:transparent}
.calladd-btn{margin-top:2px;background:#fff;border:1.5px solid #2E9E5B;color:#2E7D4A;font-weight:700}
.calladd-btn:hover:not(:disabled){background:#F0F8F3;border-color:#25834B;color:#25834B}
/* Suggested SR reason — rank the recommended pick loud; keep "also qualifies / don't pick" calm (Kasie, 29 Jul 2026) */
.srr{margin-top:8px;border:0;border-left:0;padding:0;background:transparent}
.srr-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;background:var(--accent);border-radius:7px;padding:9px 12px}
.srr-k{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;opacity:.82}
.srr-v{font-size:16.5px;font-weight:800;color:#fff}
.srr-why{margin-top:6px;font-size:12px;line-height:1.5;color:var(--gray)}
.srr-why.srr-first{margin-top:9px;font-weight:600;color:var(--head)}
/* Suggested SR reason — yellow teaching-note palette (Kasie, 29 Jul 2026) */
.srr{margin-top:8px;background:#FFF6DA;border:1px solid #E6C65A;border-left:4px solid #D9A520;border-radius:6px;padding:10px 12px;color:#6B5320}
.srr-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;background:transparent;border-radius:0;padding:0}
.srr-k{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9A7B1E;opacity:1}
.srr-v{font-size:16.5px;font-weight:800;color:#6B4E12}
.srr-why{margin-top:6px;font-size:12px;line-height:1.5;color:#7A6320}
.srr-why.srr-first{margin-top:9px;font-weight:600;color:#6B5320}
/* Suggested SR reason — smaller/quieter so it does not overshadow the install address + SR boxes (Kasie, 29 Jul 2026) */
.srr{margin-top:8px;padding:8px 10px}
.srr-k{font-size:9.5px}
.srr-v{font-size:13.5px;font-weight:700}
.srr-why{margin-top:5px;font-size:11.5px}
.srr-why.srr-first{margin-top:7px}
/* Suggested SR reason — full soft outline (no left-only mark), lighter, italic guidance (Kasie, 29 Jul 2026) */
.srr{margin-top:8px;background:#FFFDF3;border:1px solid #E6D08F;border-radius:8px;padding:7px 10px;color:#6B5320}
.srr-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;background:transparent;border-radius:0;padding:0}
.srr-k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#A6851F}
.srr-v{font-size:13px;font-weight:700;color:#6B4E12}
.srr-why{margin-top:5px;font-size:11.5px;line-height:1.5;color:#8A7330;font-style:italic}
.srr-why.srr-first{margin-top:6px;font-weight:600;font-style:italic;color:#6B5320}
/* Sale Log — Edit action tint (Kasie, 29 Jul 2026) */
.saleeditbtn:hover{border-color:#485982;color:#485982}
/* Compact buttons — trim the oversized padding/font that wasted space (Kasie, 29 Jul 2026) */
.btn{padding:8px 16px;font-size:13px}
.btn2{padding:5px 11px;font-size:12px}
.tkbtns button,.tkbtns .btn2{padding:5px 11px;font-size:12px}
.topactions .btn2,.topactions .btn2.accent{padding:5px 11px;font-size:12px}
.copy{padding:3px 10px;font-size:10.5px}
/* ===== PREVIEW ONLY — chip layout v4 styles ===== */
.cx-wrap{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.cx-top{position:sticky;top:6px;z-index:60;background:#fff;border:1px solid #b9c0d0;border-radius:9px;padding:9px 11px;box-shadow:0 3px 12px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:8px}
.cx-top-h{display:flex;justify-content:space-between;align-items:center}
.cx-top-h>span:first-child{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#303951}
.cx-top-acts{display:flex;gap:6px}
.cx-top-acts button{border:1px solid #cfd4de;background:#fff;border-radius:6px;font-size:11px;font-weight:600;color:#5b6270;padding:3px 9px;cursor:pointer}
.cx-top textarea.si-notes-top{width:100%;box-sizing:border-box;border:1px solid #cfd4de;border-radius:6px;padding:7px 9px;font:inherit;font-size:13px;resize:vertical;min-height:36px}
.cx-top-fields{display:flex;flex-direction:column;gap:7px}
.cx-top-fields .field{margin:0}
.cx-logbtn{background:#2E9E5B;border-color:#2E9E5B;color:#fff;align-self:flex-start}
.cx-logbtn:hover:not(:disabled){background:#25834B;border-color:#25834B;color:#fff}
.cx-sec{border:1px solid #c9cfdb;border-radius:9px;overflow:hidden;background:#fff}
.cx-h{background:#303951;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:8px 12px}
.cx-body{padding:11px 12px;background:#f4f6fa;display:flex;flex-direction:column;gap:8px}
.cx-body .field{margin:0}
.cx-chiprow{display:flex;flex-wrap:wrap;gap:6px}
.cx-chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid #b9c0d0;background:#fff;color:#5b6270;cursor:pointer;font-weight:500}
.cx-chip.on{background:#485982;border-color:#485982;color:#fff}
.cx-reveals{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.cx-panel{border:1px solid #dfe3ea;border-radius:7px;background:#fff;padding:9px 10px;display:flex;flex-direction:column;gap:8px}
.cx-panel:empty{display:none}
.cx-cancel{display:flex;align-items:center;gap:8px;border:1px solid #E24B4A;border-left:4px solid #E24B4A;border-radius:8px;padding:8px 11px;background:#fff}
.cx-cancel .field,.cx-cancel label{margin:0}
.cx-unit{display:flex;flex-direction:column;gap:5px}
.cx-unit+.cx-unit{margin-top:8px}
.cx-sec .copy{background:var(--accent);border-color:var(--accent)}
.t77cfg-ov{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.t77cfg-ov[hidden]{display:none}
.t77cfg-card{background:#fff;max-width:340px;width:100%;border:2px solid #2E9E5B;border-radius:12px;overflow:hidden}
.t77cfg-hd{background:#2E9E5B;color:#fff;font-weight:800;font-size:14px;padding:11px 14px;text-transform:uppercase;letter-spacing:.3px}
.t77cfg-body{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.t77cfg-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#2b3140;cursor:pointer}
.t77cfg-row.t77cfg-fixed{color:#8a8f99}
.t77cfg-note{padding:0 14px 8px;font-size:11px;color:#8a8f99}
.t77cfg-ft{padding:0 14px 14px;text-align:right}
/* ===== PREVIEW ONLY — chip layout v5 styles ===== */
.cx-wrap{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.cx-top{position:sticky;top:6px;z-index:60;background:#fff;border:1px solid #b9c0d0;border-radius:9px;padding:9px 11px;box-shadow:0 3px 12px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:8px}
.cx-top-h{display:flex;justify-content:space-between;align-items:center}
.cx-top-h>span:first-child{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#303951}
.cx-top-h .si-view{border:1px solid #cfd4de;background:#fff;border-radius:6px;font-size:11px;font-weight:600;color:#5b6270;padding:3px 9px;cursor:pointer}
.cx-top textarea.si-notes-top{width:100%;box-sizing:border-box;border:1px solid #cfd4de;border-radius:6px;padding:7px 9px;font:inherit;font-size:13px;resize:vertical;min-height:36px}
.cx-top-fields{display:flex;flex-direction:column;gap:7px}
.cx-top-fields .field{margin:0}
.cx-logbtn{background:#2E9E5B;border-color:#2E9E5B;color:#fff;align-self:flex-start}
.cx-logbtn:hover:not(:disabled){background:#25834B;border-color:#25834B;color:#fff}
.cx-sec{border:1px solid #c9cfdb;border-radius:9px;overflow:hidden;background:#fff}
.cx-h{background:#303951;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:8px 12px}
.cx-body{padding:11px 12px;background:#f4f6fa;display:flex;flex-direction:column;gap:8px}
.cx-body .field{margin:0}
.cx-chiprow{display:flex;flex-wrap:wrap;gap:6px}
.cx-chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid #b9c0d0;background:#fff;color:#5b6270;cursor:pointer;font-weight:500}
.cx-chip.on{background:#485982;border-color:#485982;color:#fff}
.cx-reveals{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.cx-panel{border:1px solid #dfe3ea;border-radius:7px;background:#fff;padding:9px 10px;display:flex;flex-direction:column;gap:8px}
.cx-panel:empty{display:none}
.cx-cancel{display:flex;align-items:center;gap:8px;border:1px solid #E24B4A;border-left:4px solid #E24B4A;border-radius:8px;padding:8px 11px;background:#fff}
.cx-cancel .field,.cx-cancel label{margin:0}
.cx-unit{display:flex;flex-direction:column;gap:5px}
.cx-unit+.cx-unit{margin-top:8px}
.cx-sec .copy{background:var(--accent);border-color:var(--accent)}
.si-srtoggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#2E7D4A;font-weight:600}
.t77cfg-ov{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.t77cfg-ov[hidden]{display:none}
.t77cfg-card{background:#fff;max-width:360px;width:100%;border:2px solid #2E9E5B;border-radius:12px;overflow:hidden}
.t77cfg-hd{background:#2E9E5B;color:#fff;font-weight:800;font-size:14px;padding:11px 14px;text-transform:uppercase;letter-spacing:.3px}
.t77cfg-sub{padding:9px 14px 0;font-size:12px;color:#5b6270}
.t77cfg-body{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.t77cfg-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#2b3140;cursor:pointer}
.t77cfg-row.t77cfg-fixed{color:#8a8f99}
.t77cfg-note{padding:0 14px 8px;font-size:11px;color:#8a8f99}
.t77cfg-ft{padding:0 14px 14px;text-align:right}
.si-logcustomize{margin-right:auto}
/* ===== PREVIEW ONLY — v6: Notes pinned alone; log fields + button as bottom green section ===== */
.cx-logsec{border-color:#bfe0cb}
.cx-logsec .cx-h.cx-logh{background:#2E9E5B}
.cx-logsec .cx-body{background:#f2faf5}
.cx-logsec .cx-logbtn{background:#2E9E5B;border-color:#2E9E5B;color:#fff;align-self:flex-start;margin-top:4px}
.cx-logsec .cx-logbtn:hover:not(:disabled){background:#25834B;border-color:#25834B;color:#fff}

/* T77 CX yellow-notes tweak */
.cx-top{background:#fff6da;border-color:#e6c65a;box-shadow:0 3px 10px rgba(150,120,20,.14)}
.cx-top-h span{color:#6b5320}
.cx-top .si-notes-top{border-color:#e6c65a;background:#fffdf3}
.si-srnote{font-size:12px;color:#6b5320;background:#fff6da;border:1px solid #e6c65a;border-radius:5px;padding:4px 8px;align-self:flex-start}

/* T77 CX log-section collapsible+soft */
.cx-logsec{border:1px solid #cfe6d8 !important;border-radius:9px;overflow:hidden;background:#fff}
.cx-logsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:#f4faf6;color:#217a49;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cx-logsec>summary::-webkit-details-marker{display:none}
.cx-logsec .cx-logchev{transition:transform .15s ease;font-size:12px}
.cx-logsec[open]>summary{border-bottom:1px solid #e3efe8}
.cx-logsec[open] .cx-logchev{transform:rotate(90deg)}
.cx-logsec .cx-body{background:#fff !important}
.cx-logsec .cx-logbtn{background:#fff !important;border:1px solid #2E9E5B !important;color:#1f7a46 !important;align-self:flex-start;margin-top:4px}
.cx-logsec .cx-logbtn:hover:not(:disabled){background:#2E9E5B !important;color:#fff !important}

/* T77 CX polish r2 */
.cx-top{background:#FFFDF3 !important;border-color:#E6D08F !important;box-shadow:0 3px 10px rgba(150,120,20,.10)}
.cx-top .si-notes-top{border-color:#E6D08F !important;background:#FFFEF8 !important}
.cx-logsec{border:1.5px solid #3E9B63 !important;border-radius:9px;overflow:hidden}
.cx-logsec[open]>summary{border-bottom:1px solid #cfe6d8}
.tkbtns .btn2.accent{background:var(--deep) !important;color:#fff !important;border:2px solid var(--red) !important}
.tkbtns .btn2.accent:hover:not(:disabled){background:var(--deep) !important;border-color:var(--redd) !important;color:#fff !important}
.cx-cancelbtn{background:#fff !important;color:var(--red) !important;border:2px solid var(--red) !important}
.cx-cancelbtn.on{background:var(--red) !important;color:#fff !important}
.cx-cancelbtn:hover:not(:disabled){background:var(--red) !important;color:#fff !important;border-color:var(--red) !important}

/* T77 CX polish r3 true-green */
.cx-logsec{border:1.5px solid #1C8A4B !important}
.cx-logsec>summary{background:#1C8A4B !important;color:#fff !important}
.cx-logsec>summary .cx-logchev{color:#fff}
.cx-logsec[open]>summary{border-bottom:1px solid rgba(255,255,255,.3) !important}
.cx-logsec .cx-logbtn{background:#fff !important;border:1px solid #1C8A4B !important;color:#1C8A4B !important}
.cx-logsec .cx-logbtn:hover:not(:disabled){background:#1C8A4B !important;color:#fff !important}
.salelogbtn{background:#fff !important;color:#1C8A4B !important;border:2px solid #1C8A4B !important}
.salelogbtn:hover:not(:disabled){background:#1C8A4B !important;color:#fff !important;border-color:#1C8A4B !important}

/* T77 CX device-count steppers */
.cx-units{margin-top:8px;background:#fff;border:1px dashed #c3ccdb;border-radius:8px;padding:8px 10px}
.cx-units-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5a6478;margin-bottom:6px}
.cx-units-row{display:flex;flex-wrap:wrap;gap:10px}
.cx-unit-step{display:flex;align-items:center;gap:6px;border:1px solid #d5dbe6;border-radius:7px;padding:3px 6px;background:#f7f9fc}
.cx-unit-name{font-weight:800;font-size:12px;color:#303951;min-width:24px;text-align:center}
.cx-unit-btn{width:24px;height:24px;border:1px solid #b9c0d0;background:#fff;border-radius:6px;font-size:15px;line-height:1;cursor:pointer;color:#303951;font-weight:700}
.cx-unit-btn:hover{background:#eef1f7}
.cx-unit-n{min-width:18px;text-align:center;font-weight:800;font-size:13px;color:#1a2233}
.saleunits{display:inline-block;background:#eaf6ef;color:#1C6B3E;border:1px solid #bfe0cb;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:4px}

/* T77 CX log-units */
.cx-logunits{margin-top:2px}
.cx-nounits{font-size:12px;color:#8a93a6}

/* T77 CX per-item clear */
.cx-fclear{position:absolute;top:0;right:0;width:20px;height:20px;line-height:1;border:1px solid #d3d9e4;background:#fff;color:#98a1b2;border-radius:5px;font-size:14px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.cx-fclear:hover{border-color:#E24B4A;color:#E24B4A}
.cx-unit-reset{background:transparent;border:1px solid #d3d9e4;color:#5a6478;font-size:11px;border-radius:6px;padding:2px 9px;cursor:pointer;font-family:inherit;align-self:center}
.cx-unit-reset:hover{border-color:#E24B4A;color:#E24B4A}

/* T77 CX notes to bottom */
.cx-top{position:sticky !important;top:auto !important;bottom:6px !important;box-shadow:0 -3px 12px rgba(150,120,20,.16) !important}

/* T77 CX notes slim */
.cx-top.cx-top-slim{padding:6px 9px !important;gap:4px !important}
.cx-top.cx-top-slim .cx-top-h{font-size:11px}
.cx-top.cx-top-slim .si-notes-top{min-height:26px;padding:5px 8px;font-size:12.5px}

/* T77 CX customize in header */
.salehd .si-logcustomize{margin-left:auto;margin-right:8px;padding:4px 10px;font-size:12px}

/* T77 CX customize quiet */
.salehd .si-logcustomize{margin-left:auto;margin-right:8px;background:transparent !important;border:none !important;color:#8a93a6 !important;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer;padding:2px 4px;font-family:inherit}
.salehd .si-logcustomize:hover{color:#485982 !important}

/* T77 MP chip wrap */
.cxmp-wrap{margin-top:8px}
.cxmp-wrap .cx-sec{margin-bottom:8px}

/* T77 MP notes yellow */
.cxmp-wrap .cmnote{background:#FFFDF3 !important;border:1px solid #E6D08F !important;border-radius:8px;padding:7px 10px;color:#6B5320 !important;font-size:12.5px;line-height:1.5;margin:6px 0}

/* T77 MP hide original parts */
.mpcard[data-cxmp] > .sec.cl{display:none !important}

/* T77 MP card buttons */
.mpcard[data-cxmp] .mplogbtn{background:#fff !important;border:1px solid #1C8A4B !important;color:#1C8A4B !important}
.mpcard[data-cxmp] .mplogbtn:hover:not(:disabled){background:#1C8A4B !important;color:#fff !important}
.mpcard[data-cxmp] .cardga-open{background:#fff !important;border:1.5px solid var(--deep) !important;color:var(--deep) !important;width:auto !important;align-self:flex-start;display:inline-flex;padding:5px 12px !important;font-size:12px !important;font-weight:700}
.mpcard[data-cxmp] .cardga-open:hover:not(:disabled){background:var(--deep) !important;color:#fff !important;border-color:var(--deep) !important}
/* T77 MP polish r2 */
.cx-collapsed{display:none !important}
.cxmp-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.mpcard[data-cxmp] .mplogbtn{width:auto !important;padding:5px 12px !important;font-size:12px !important}
.salehd .si-logcustomize{color:#5a6478 !important;font-weight:700}
.salehd .si-logcustomize:hover{color:#1C8A4B !important}
#t77SaleBody .saleact{border:1px solid #cfd5e0;border-radius:5px;padding:1px 8px;font-size:11px;background:#fff;cursor:pointer;color:#485982}
#t77SaleBody .saleeditbtn{border-color:#1C8A4B;color:#1C8A4B;font-weight:700}
/* T77 MP actions even */
.cxmp-actions{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.cxmp-actions > button{flex:1 1 0 !important;min-width:0 !important;width:auto !important;padding:8px 12px !important;font-size:12.5px !important;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin:0 !important;border-radius:6px}
/* T77 customize in log body */



/* T77 customize gray gear */
.salebody > .si-logcustomize{margin:0 0 10px 0;font-size:12px;padding:4px 10px;border:1px solid #d3d9e4;border-radius:6px;color:#6b7280;background:#fff;cursor:pointer;font-family:inherit;align-self:flex-start;width:auto;display:inline-flex;align-items:center;gap:5px}
.salebody > .si-logcustomize:hover{background:#f2f4f8;color:#485266;border-color:#c3ccdb}

/* T77 customize gray pill header */
.salehd{display:flex;align-items:center}
.salehd .si-logcustomize{margin-left:auto;margin-right:10px;background:#f2f4f8 !important;border:1px solid #d3d9e4 !important;border-radius:6px;color:#6b7280 !important;font-size:12px;padding:4px 10px !important;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.salehd .si-logcustomize:hover{background:#e7ebf2 !important;color:#485266 !important;border-color:#c3ccdb !important}

/* T77 calendar region+smaller */
.salecal-cell.today{box-shadow:inset 0 0 0 2px var(--calaccent,#303951) !important}
.salecal-cell.sel{border-color:var(--calaccent,#303951) !important;box-shadow:inset 0 0 0 2px var(--calaccent,#303951) !important}
.salecal-cell{min-height:33px !important;padding:2px 3px !important;border-radius:6px !important}
.salecal-grid{gap:3px !important}
.salecal-dnum{font-size:11px !important}
.salecal-dow{font-size:10px !important;padding-bottom:1px !important}
.salecal-badge{min-width:13px !important;height:13px !important;line-height:13px !important;font-size:9px !important;top:1px !important;right:2px !important}
.salecal-dot{width:5px !important;height:5px !important}
.salecal-hd{gap:10px !important;margin:4px 0 7px !important}
.salecal-title{font-size:13px !important}
.salecal-dots{bottom:2px !important;left:3px !important}
/* T77 calendar badge = region color, no green fill */
.salecal-badge{background:var(--calaccent,#303951) !important;color:#fff !important}
.salecal-cell.has .salecal-badge{background:var(--calaccent,#303951) !important;color:#fff !important}
.salecal-cell.today .salecal-badge,.salecal-cell.sel .salecal-badge{background:var(--calaccent,#303951) !important;color:#fff !important}

/* T77 calendar: number badge only (hide region dots) */
.salecal-dots{display:none !important}
/* T77 sale log: pin Customize gear next to the title so it's findable */
.salehd .si-logcustomize{margin-left:10px !important;margin-right:auto !important}

/* T77 calendar: recolor the leftover GREEN sale-day theme to the region color.
   .has days had a green border; the selected/today cell had a green FILL - which is
   the 'green fill on the current date' to kill. Region color instead, everywhere. */
.salecal-cell.has{border-color:var(--calaccent,#303951) !important}
.salecal-cell.today,.salecal-cell.sel{background:var(--calaccent,#303951) !important}
.salecal-cell.today .salecal-dnum,.salecal-cell.sel .salecal-dnum{color:#fff !important}
.salecal-cell.today .salecal-badge,.salecal-cell.sel .salecal-badge{background:#fff !important;color:var(--calaccent,#303951) !important}

/* T77 calendar: sale-day number text was green too -> region color (exclude today/sel so their white number stays) */
.salecal-cell.has:not(.today):not(.sel) .salecal-dnum{color:var(--calaccent,#303951) !important}

/* T77 calendar FINAL coloring: ONLY the current/selected day carries the region color
   (filled), so no other day is ever colored the same. Past sale days keep the GREEN
   outline + green number; the small count badge stays region color per earlier ask. */
.salecal-cell.has:not(.today):not(.sel){border-color:#2E9E5B !important}
.salecal-cell.has:not(.today):not(.sel) .salecal-dnum{color:#2E9E5B !important}
.salecal-cell.today,.salecal-cell.sel{background:var(--calaccent,#303951) !important;border-color:var(--calaccent,#303951) !important}
.salecal-cell.today .salecal-dnum,.salecal-cell.sel .salecal-dnum{color:#fff !important}
.salecal-cell.today .salecal-badge,.salecal-cell.sel .salecal-badge{background:#fff !important;color:var(--calaccent,#303951) !important}
.salecal-cell.has:not(.today):not(.sel) .salecal-badge{background:var(--calaccent,#303951) !important;color:#fff !important}

/* Section headers use the region ACCENT blue (DEC #485982), not the dark navy --deep. Region-scoped, so DEP gets its own; DEF is un-chipified and unaffected. */
.cx-h{background:var(--accent) !important}
/* Log This Sale: light green inner fill on the body; the input fields stay white. */
.cx-logsum + .cx-body{background:#e9f6ee !important}

/* ===== DEC/DEP visual reskin — scoped to #screen-toolkit + #screen-dep-sr; DEF (#screen-def-sr) never matched ===== */
#screen-toolkit .cx-wrap, #screen-dep-sr .cx-wrap{background:#edf0f5 !important; padding:11px !important; border-radius:12px !important;}
#screen-toolkit .cx-wrap .cx-sec, #screen-dep-sr .cx-wrap .cx-sec{background:#fff !important; border:1px solid #d9dfea !important; border-radius:11px !important; overflow:hidden !important; margin:0 0 10px 0 !important;}
#screen-toolkit .cx-wrap .cx-sec:last-child, #screen-dep-sr .cx-wrap .cx-sec:last-child{margin-bottom:0 !important;}
#screen-toolkit .cx-sec > .cx-body, #screen-dep-sr .cx-sec > .cx-body{background:#fff !important;}
#screen-toolkit .tkbtns .btn2, #screen-dep-sr .tkbtns .btn2{border:1px solid var(--accent,#485982) !important; color:var(--accent,#485982) !important; background:#fff !important; border-radius:9px !important; font-weight:600 !important; padding:7px 14px !important;}
#screen-toolkit .tkbtns .btn2.accent, #screen-dep-sr .tkbtns .btn2.accent{background:var(--accent,#485982) !important; color:#fff !important;}
#screen-toolkit .tkbtns .btn2.cx-cancelbtn, #screen-dep-sr .tkbtns .btn2.cx-cancelbtn{border-color:#b5322f !important; color:#b5322f !important; background:#fff !important;}

/* TIME picker -> compact clock button + native picker */
.t77-time-src{display:none !important}
.cx-timewrap{position:relative; display:inline-flex; align-items:center; gap:9px;}
.cx-timebtn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px; border:1px solid #c9d3e4; border-radius:8px; background:#fff; color:var(--accent,#485982); cursor:pointer; padding:0;}
.cx-timebtn:hover{background:#eef2f8; border-color:var(--accent,#485982);}
.cx-timeval{font-size:14px; font-weight:600; color:var(--accent,#485982); cursor:pointer;}
.cx-timeval.cx-timeempty{color:#8a93a5; font-weight:400;}
.cx-timehidden{position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; border:0; padding:0; margin:0;}

/* Calendar: per-region sale bubbles - each bubble is the color of the region the sale was
   made in (DEC blue, DEF plum, DEP forest), fixed; it does NOT recolor to the viewed region. */
.salecal-badge,.salecal-dots{display:none !important}
.salecal-rbubs{position:absolute; right:2px; bottom:2px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; max-width:calc(100% - 4px); pointer-events:none;}
.salecal-rbub{min-width:14px; height:14px; line-height:14px; text-align:center; border-radius:7px; color:#fff; font-size:9px; font-weight:800; padding:0 3px; border:1px solid #fff; box-shadow:0 0 0 0.5px rgba(0,0,0,.25);}

/* DEF simple Log this sale button */
.def-logwrap{margin:14px 16px 4px;}
.def-logbtn{display:block; width:100%; background:#fff; color:#1c8a4b; border:2px solid #1c8a4b; border-radius:11px; padding:13px; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;}
.def-logbtn:hover{background:#1c8a4b; color:#fff;}

/* DEF: keep the Attic checkbox label from clipping to 'ATT' in the equipment row */
#screen-def-sr .atticfield{flex:0 0 auto !important; min-width:100px !important;}
#screen-def-sr .atticfield .chkbox{white-space:nowrap !important; overflow:visible !important;}

/* DEF checkbox fields: keep box + label together (was space-between, which pushed the label off) */
#screen-def-sr .chkbox{justify-content:flex-start !important; gap:6px !important; white-space:nowrap !important;}

/* DEF: Renter? + Attic? sit right next to each other (not split across the row) */
#screen-def-sr .def-checkrow{display:flex !important; justify-content:flex-start !important; gap:26px !important;}
#screen-def-sr .def-checkrow > .field{flex:0 0 auto !important; width:auto !important; min-width:0 !important;}

/* DEF: align the Renter?/Attic? checkboxes on the same line */
#screen-def-sr .def-checkrow{align-items:center !important;}
#screen-def-sr .def-checkrow > .field{display:flex !important; align-items:center !important; margin:0 !important; padding:0 !important;}
#screen-def-sr .def-checkrow .chkbox{display:inline-flex !important; align-items:center !important; gap:6px !important;}

/* DEF: free-text Notes box (like DEC/DEP), logs with the sale */
#screen-def-sr .def-noteslbl{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#6b5713; font-weight:700; margin:0 0 4px 2px;}
#screen-def-sr .def-notes{display:block; width:100%; min-height:54px; background:#fffdf3; border:2px solid #E0A800; border-radius:10px; padding:9px 11px; font-size:14px; font-family:inherit; color:#1e2430; resize:vertical; margin-bottom:0; box-sizing:border-box;}
#screen-def-sr .def-notes:focus{outline:none; border-color:#c9950a; box-shadow:0 0 0 2px rgba(224,168,0,.22);}
/* per-property Notes: full-width row at the bottom of each property block */
#screen-def-sr .defpropbody .def-pnoteswrap, #screen-def-sr .deflock .def-pnoteswrap{ flex:1 1 100%; order:10; margin:12px 0 2px; }


/* ===== Compass Security - Callback reminders ===== */
.t77cb-btn{ background:#fff7e8; color:#7a4d00; border:2px solid #e79a1a; font-weight:600; }
.t77cb-btn:hover{ background:#ffefcf; }

.salecal-cbbub{ background:#e79a1a; color:#fff; border:1px solid #fff; }

.t77cb-item .saletag.t77cb-tag{ color:#fff; }
.t77cb-item.t77cb-isdone{ opacity:.6; }

/* Gate the form past "Enrolled devices" until a device is picked */
.t77devgated{ display:none !important; }
/* Preferred-day weekend note — shows only when Sat/Sun is picked (preference, not a booked appt) */
.dayweekend-hint{ display:none; margin-top:6px; font-size:11.5px; line-height:1.4; color:#8a5a12; background:#fff6e5; border:1px solid #f0d29a; border-radius:8px; padding:6px 9px; }
.field.days.has-weekend .dayweekend-hint{ display:block; }
#screen-def-sr .t77devgate-lock::after, #screen-dep-sr .t77devgate-lock::after, #screen-toolkit .t77devgate-lock::after{
  content:'Make a selection to unlock the rest of the form.'; display:block; margin-top:6px; font-size:11px; font-weight:700; color:#b5541d; letter-spacing:.01em;
}
.t77cb-badge{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; background:#d8dee9; color:#42506b; padding:1px 6px; border-radius:8px; margin-left:4px; }

/* modal */
.t77cb-ov{ position:fixed; inset:0; background:rgba(20,26,40,.5); display:flex; align-items:center; justify-content:center; z-index:99998; padding:18px; }
.t77cb-modal{ background:#fff; width:100%; max-width:460px; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:20px 22px; font-family:inherit; }
.t77cb-hd{ font-size:18px; font-weight:700; color:#303951; }
.t77cb-sub{ font-size:12.5px; color:#5a6478; margin:4px 0 12px; line-height:1.45; }
.t77cb-cap{ background:#f6f8fc; border:1px solid #e3e8f2; border-radius:10px; padding:9px 11px; margin-bottom:14px; }
.t77cb-caph{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#8a93a6; margin-bottom:5px; }
.t77cb-cappre{ margin:0; font-size:12px; color:#33405c; white-space:pre-wrap; word-break:break-word; max-height:150px; overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; }
.t77cb-whenh{ font-size:12.5px; font-weight:700; color:#42506b; margin-bottom:8px; }
.t77cb-presets{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.t77cb-presets button{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:#eef2fb; border:2px solid transparent; border-radius:10px; padding:10px 12px; font-size:14px; font-weight:600; color:#303951; cursor:pointer; }
.t77cb-presets button small{ font-size:11px; font-weight:500; color:#7a8398; }
.t77cb-presets button:hover{ border-color:#485982; background:#e3ebfb; }
.t77cb-atrow{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.t77cb-atrow label{ font-size:12.5px; color:#5a6478; }
.t77cb-atrow{ flex-wrap:wrap; }
.t77cb-dow{ flex:1 0 100%; font-size:14.5px; font-weight:800; color:#a8420b; background:#fff2df; border:1px solid #f2c489; border-radius:8px; padding:6px 10px; margin-bottom:5px; letter-spacing:.2px; }
.t77cb-dow:empty{ display:none; }
.t77cb-atrow input[type=time],.t77cb-atrow input[type=date]{ flex:1 1 0; min-width:0; box-sizing:border-box; font-size:14px; padding:6px 8px; border:1px solid #cdd5e5; border-radius:8px; }
.t77cb-atgo{ background:#485982; color:#fff; border:none; border-radius:8px; padding:7px 14px; font-weight:600; cursor:pointer; }
.t77cb-atgo:hover{ background:#3a496b; }
.t77cb-foot{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; }
.t77cb-cancel{ background:none; border:none; color:#8a93a6; font-size:13px; cursor:pointer; padding:6px 4px; }
.t77cb-cancel:hover{ color:#5a6478; text-decoration:underline; }
.t77cb-set{ background:#485982; color:#fff; border:none; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; padding:8px 18px; }
.t77cb-set:hover{ background:#3a4a6d; }
.t77cb-whenh b{ color:#2f3d5c; }
.t77cb-etnote{ font-weight:700; color:#b5541d; font-size:11px; margin-left:4px; }
.t77cb-now{ margin-top:8px; font-size:12px; color:#5a6478; }
.t77cb-now b{ color:#2f3d5c; }
.t77clock{ position:fixed; left:12px; bottom:12px; z-index:9000; display:flex; flex-direction:column; align-items:flex-start; line-height:1.12; gap:1px; background:rgba(255,255,255,.94); border:1px solid #cbd3e1; border-radius:10px; padding:5px 11px; box-shadow:0 4px 14px rgba(0,0,0,.12); font-variant-numeric:tabular-nums; pointer-events:none; }
.t77clk-you{ font-size:10.5px; font-weight:700; color:#6b748a; }
.t77clk-et{ font-size:12.5px; font-weight:800; color:#1e2a48; }
.t77clock em{ font-style:normal; font-weight:600; opacity:.55; font-size:.82em; margin-left:2px; }
@media (max-width:520px){ .t77clock{ left:8px; bottom:8px; padding:4px 9px; } }

/* banners */
#t77cbBanners{ position:fixed; top:0; left:0; right:0; z-index:99999; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 10px 0; pointer-events:none; }
#t77cbBanners > *{ pointer-events:auto; }
.t77cb-banner{ display:flex; align-items:stretch; gap:14px; background:#fff; border:1.5px solid #e79a1a; border-radius:12px; box-shadow:0 12px 32px rgba(231,154,26,.20), 0 8px 22px rgba(0,0,0,.14); padding:12px 16px; overflow:hidden; max-width:96vw; animation:t77cbIn .22s ease; }
@keyframes t77cbIn{ from{ transform:translateY(-14px); opacity:0; } to{ transform:none; opacity:1; } }
.t77cb-brail{ writing-mode:vertical-rl; transform:rotate(180deg); background:#e79a1a; color:#fff; font-weight:800; letter-spacing:2.5px; font-size:11.5px; display:flex; align-items:center; justify-content:center; padding:10px 7px; margin:-12px 8px -12px -16px; border-radius:12px 0 0 12px; white-space:nowrap; }
.t77cb-btxt{ display:flex; flex-direction:column; gap:3px; justify-content:center; }
.t77cb-bnm{ font-weight:800; font-size:14px; color:#303951; }
.t77cb-bphrow{ display:flex; align-items:center; gap:8px; }
.t77cb-bph{ font-size:13.5px; color:#485982; font-weight:700; }
.t77cb-breg{ font-size:11px; color:#8a93a6; font-weight:600; }
.t77cb-bacts{ display:flex; flex-direction:column; gap:10px; justify-content:center; margin-left:auto; }
.t77cb-bpair{ display:flex; gap:5px; padding-top:8px; border-top:1px solid #eceff3; }
.t77cb-bpair button{ flex:1; }
.t77cb-bacts button, .t77cb-bcopy{ font-size:11.5px; border-radius:7px; border:1px solid #d2d9e6; background:#f5f7fb; color:#42506b; padding:5px 12px; cursor:pointer; font-weight:700; }
.t77cb-bacts button:hover, .t77cb-bcopy:hover{ filter:brightness(.96); }
.t77cb-bopen{ background:#485982 !important; color:#fff !important; border:2.5px solid #e79a1a !important; }
.t77cb-bdone{ background:#eef2f8 !important; color:#303951 !important; border:1px solid #303951 !important; }
.t77cb-bsave{ background:#fff8ec !important; color:#a9631a !important; border-color:#e6b877 !important; }
.t77cb-cd{ display:inline-block; font-size:10.5px; font-weight:800; color:#a9631a; background:#fff3df; border:1px solid #f0d6a8; border-radius:999px; padding:1px 8px; margin-left:6px; }
.t77cb-toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(12px); background:#303951; color:#fff; padding:10px 18px; border-radius:22px; font-size:13px; font-weight:600; box-shadow:0 8px 26px rgba(0,0,0,.3); opacity:0; transition:opacity .3s, transform .3s; z-index:99999; }
.t77cb-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.t77cb-flag{ color:#b06f12; font-weight:700; font-size:11px; letter-spacing:.02em; margin-right:2px; }

.cx-chip.cx-picked{ background:var(--accent,#485982); color:#fff; border-color:var(--accent,#485982); font-weight:700; }
.cx-scherr{ color:#b00020; font-size:12.5px; font-weight:600; margin:6px 0 2px; }

.cx-panel-h{ font-weight:700; color:var(--deep,#303951); font-size:12.5px; letter-spacing:.01em; margin:2px 0 7px; padding-bottom:4px; border-bottom:1px solid #e3e8f2; }

/* collapsible section headers under Scheduling & call notes */
.cx-panel-h{ cursor:pointer; user-select:none; display:flex; align-items:center; gap:7px; }
.cx-ph-chev::before{ content:"\25BE"; font-size:10px; color:#8a93a6; display:inline-block; }
.cx-panel.cx-panel-shut .cx-ph-chev::before{ content:"\25B8"; }
.cx-panel.cx-panel-shut > :not(.cx-panel-h){ display:none !important; }

/* Renter TAF checkboxes */
.cx-renter-cbs{ display:flex; flex-direction:column; gap:7px; margin:2px 0 6px; }
.cx-renter-cb{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#303951; cursor:pointer; }
.cx-renter-cb input{ width:16px; height:16px; flex:0 0 auto; }

/* Renter stationary script note */
.cx-panel-note{ background:#fff7e8; border:1px solid #f0d9a8; border-left:4px solid #e79a1a; border-radius:8px; padding:10px 12px; margin:2px 0 10px; font-size:13px; line-height:1.5; color:#4a3b1f; }
.cx-panel-note a{ color:#485982; font-weight:600; }
.cx-note-tip{ display:block; margin-top:7px; font-size:11.5px; color:#8a6d3b; font-style:italic; }
.cx-panel.cx-panel-shut > :not(.cx-panel-h):not(.cx-panel-note){ display:none !important; }

.cx-panel-static{ cursor:default; }

.cx-subhead{ font-weight:700; font-size:12.5px; color:#42506b; margin:8px 0 5px; }

/* make each dropdown header stand out (thick accent outline) */
.cx-panel-h{ background:#eef3fb; border:2px solid var(--accent,#485982); border-radius:8px; padding:8px 11px; color:var(--accent,#485982); }
.cx-panel-h .cx-ph-chev::before{ color:var(--accent,#485982); }
.cx-reveals > .cx-panel{ margin-bottom:8px; }

/* ===== Scheduling UI polish (headers + choice buttons) ===== */

/* Dropdown section headers -> filled accent bar (matches the worksheet section style) */
.cx-panel-h{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10)), var(--accent,#485982);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  margin:2px 0 9px;
  box-shadow:0 2px 6px rgba(48,57,81,.20);
  font-weight:800;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.cx-panel-h .cx-ph-txt{ flex:1 1 auto; }
.cx-panel-h .cx-ph-chev{ margin-left:auto; }
.cx-panel-h .cx-ph-chev::before{ color:#fff; font-size:12px; }
.cx-panel-h:hover{ filter:brightness(1.05); }
.cx-panel-h.cx-panel-static{ cursor:default; }

/* The three choice buttons: Scheduled / Not scheduled / Renter */
.cx-chiprow{ gap:10px; margin:4px 0 12px; }
.cx-chip{
  font-size:13.5px;
  padding:11px 22px;
  border-radius:12px;
  border:2px solid var(--accent,#485982);
  background:#fff;
  color:var(--accent,#485982);
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 2px 4px rgba(48,57,81,.10);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cx-chip:hover{ transform:translateY(-2px); box-shadow:0 7px 16px rgba(48,57,81,.22); background:#f3f6fd; }
.cx-chip:active{ transform:translateY(0); }
.cx-chip.on, .cx-chip.cx-picked{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12)), var(--accent,#485982);
  color:#fff;
  border-color:var(--accent,#485982);
  box-shadow:0 5px 15px rgba(48,57,81,.34);
  transform:translateY(-1px);
}

/* header = dark navy (--deep); options/buttons stay accent blue for hierarchy */
.cx-panel-h{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.16)), var(--deep,#303951); box-shadow:0 2px 7px rgba(20,26,40,.30); }

/* hierarchy fix: choice buttons darkest (navy) -> headers accent -> fields white */
.cx-panel-h{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.10)), var(--accent,#485982); box-shadow:0 2px 6px rgba(48,57,81,.20); }
.cx-chip.on, .cx-chip.cx-picked{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)), var(--deep,#303951); border-color:var(--deep,#303951); color:#fff; box-shadow:0 6px 16px rgba(20,26,40,.38); }

/* ===== Lighter, outline-based look (no solid fills) ===== */

/* Section headers: accent left-bar on a near-white card, dark text */
.cx-panel-h{
  background:#f7f9fd;
  border:1px solid #dbe2ee;
  border-left:5px solid var(--accent,#485982);
  border-radius:8px;
  color:var(--deep,#303951);
  box-shadow:0 1px 2px rgba(48,57,81,.06);
  padding:9px 13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
}
.cx-panel-h .cx-ph-chev::before{ color:var(--accent,#485982); }
.cx-panel-h:hover{ background:#eef3fb; filter:none; }

/* Choice buttons: outlined pills; selected = accent outline + soft tint (not filled) */
.cx-chip{
  background:#fff;
  border:2px solid #c6cedd;
  color:var(--deep,#303951);
  box-shadow:none;
}
.cx-chip:hover{
  border-color:var(--accent,#485982);
  background:#f4f7fd;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(48,57,81,.13);
}
.cx-chip.on, .cx-chip.cx-picked{
  background:#eaf0fb;
  border-color:var(--accent,#485982);
  color:var(--accent,#485982);
  box-shadow:inset 0 0 0 1px var(--accent,#485982), 0 3px 9px rgba(48,57,81,.15);
  transform:translateY(-1px);
}

/* compact 'Log this sale' buttons (all regions) */
.cx-logbtn, .def-logbtn, .saleinline .si-log{ width:auto !important; display:inline-flex; align-items:center; justify-content:center; padding:8px 20px; font-size:13px; border-radius:9px; }

/* ===== sale-log revamp styles ===== */
.saleph{ font-weight:800; }
.cx-logsec > .cx-body{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cx-copyinputs{ width:auto; display:inline-flex; align-items:center; padding:8px 16px; font-size:12.5px; border-radius:9px; }
.t77lr-armed{ background:#e79a1a !important; border-color:#e79a1a !important; color:#fff !important; box-shadow:0 3px 10px rgba(231,154,26,.35) !important; }
.cx-cmtop .cx-body{ padding-top:8px; }
.cx-renter-email{ margin-top:8px; }
.t77lr-toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(12px); background:#303951; color:#fff; padding:10px 18px; border-radius:22px; font-size:13px; font-weight:600; box-shadow:0 8px 26px rgba(0,0,0,.3); opacity:0; transition:opacity .3s, transform .3s; z-index:99999; }
.t77lr-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Action row inside the Notes bar: Log (primary) + Copy + View ===== */
.cx-actrow{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:6px; }
.cx-actrow .cx-logbtn{ order:0; width:auto !important; margin:0 !important; align-self:auto !important; background:#e9f7ef !important; border:1.5px solid #1C8A4B !important; color:#166e3c !important; font-weight:700; font-size:11px !important; padding:3px 12px !important; border-radius:6px !important; }
.cx-actrow .cx-logbtn:hover:not(:disabled){ background:#1C8A4B !important; border-color:#1C8A4B !important; color:#fff !important; }
.cx-actrow .cx-logbtn.t77lr-armed{ background:#e79a1a !important; border-color:#e79a1a !important; color:#fff !important; }
.cx-actrow .cx-copyinputs{ order:1; width:auto !important; margin:0 !important; font-size:11px !important; padding:3px 9px !important; border-radius:6px !important; }
.cx-actrow .si-view{ order:2; width:auto !important; margin:0 !important; padding:3px 9px !important; font-size:11px !important; font-weight:600; border-radius:6px !important; border:1px solid #cfd4de !important; background:#fff !important; color:#5b6270 !important; cursor:pointer; }
.cx-actrow .si-view:hover{ background:#f2f4f8 !important; }

/* ===== Compact size for top nav (.topactions) + tkbtns rows — match the action row ===== */
.tkbtns{ gap:7px !important; margin:10px 0 6px !important; }
.tkbtns button, .tkbtns .btn2{ font-size:11px !important; padding:3px 10px !important; border-radius:6px !important; }
.topactions{ gap:7px !important; }
.topactions .btn2, .topactions .btn2.accent, .topactions .salelogbtn, .topactions .floatbtn{ font-size:11px !important; padding:4px 11px !important; border-radius:7px !important; }

/* ===== Slim, neutral top toolbar (.topactions) — icons + short labels, no red ===== */
.topactions{ gap:6px !important; }
.topactions .btn2, .topactions .btn2.accent, .topactions .salelogbtn, .topactions .floatbtn, .topactions .t77cb-btn, .topactions .t77-taskpin{ background:#fff !important; color:#33405e !important; border:1.5px solid #cbd3e1 !important; border-radius:8px !important; font-weight:600 !important; font-size:11.5px !important; padding:5px 10px !important; box-shadow:none !important; }
.topactions .btn2:hover:not(:disabled), .topactions .salelogbtn:hover:not(:disabled), .topactions .floatbtn:hover:not(:disabled), .topactions .t77cb-btn:hover:not(:disabled), .topactions .t77-taskpin:hover:not(:disabled){ background:#f3f6fc !important; border-color:#93a4c6 !important; color:#1e2a48 !important; }
.t77toptip{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(10px); background:#303951; color:#fff; padding:9px 16px; border-radius:20px; font-size:12.5px; font-weight:600; box-shadow:0 8px 26px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:99999; max-width:min(90vw,420px); text-align:center; }
.t77toptip.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Top-bar dropdown menus (Tools / Pin) — Kasie, 26 Aug 2026 =====================
   "I want a menu of sorts at the top rather than all of the buttons." Utilities collapse under
   a grid "Tools" menu; the three pin actions collapse under one "Pin" menu. No !important wars:
   the list toggles via a class, not inline display. */
.t77menu{ position:relative; display:inline-flex; }
.topactions .t77menu-btn{ display:inline-flex !important; align-items:center !important; gap:6px !important; }
.t77menu-btn .t77chev{ opacity:.7; margin-left:1px; transition:transform .15s ease; }
.t77menu.t77menu-open .t77menu-btn .t77chev{ transform:rotate(180deg); }
.t77menu .t77mi-f{ fill:currentColor; }
.t77menu .t77mi-s{ stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.t77menu-lbl{ line-height:1; }
.t77menu-list{ position:absolute; top:calc(100% + 6px); right:0; min-width:194px; background:#fff;
  border:1px solid #cbd3e1; border-radius:10px; box-shadow:0 12px 32px rgba(20,26,40,.20);
  padding:6px; z-index:100002; display:none; }
.t77menu.t77menu-open > .t77menu-list{ display:block; }
.topactions .t77menu-list button{ display:flex !important; align-items:center !important;
  justify-content:flex-start !important; width:100% !important; text-align:left !important; gap:8px !important;
  background:#fff !important; color:#26324e !important; border:0 !important; border-radius:7px !important;
  font-weight:600 !important; font-size:12.5px !important; padding:9px 11px !important; margin:0 !important;
  box-shadow:none !important; cursor:pointer; white-space:nowrap; }
.topactions .t77menu-list button:hover:not(:disabled){ background:#f2f6fc !important; color:#16213c !important; border-color:transparent !important; }
/* The old standalone "Desktop" install nag is replaced by the Pin menu's "To desktop" row.
   The element stays in the DOM (its beforeinstallprompt wiring still owns Chrome's prompt via
   window.t77PinInstall), but it never shows as a loose button anymore. */
.apppin{ display:none !important; }

/* ===== Cancel Enrollment option inside "What's being enrolled" ===== */
.cx-cancelopt{ margin-top:10px; padding:8px 11px; border:1px solid #e2b4b2; background:#fdf4f3; border-radius:8px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cx-cancelopt label{ color:#9f312e; font-weight:600; font-size:13px; margin:0; cursor:pointer; }
.cx-cancelopt select{ margin-left:auto; }

/* ===== Genesys SR Comments box — the recognizable output ===== */
.cx-srunit .outbox{ background:#e5e6e8 !important; border:2px solid var(--deep) !important; border-left:6px solid var(--deep) !important; box-shadow:0 2px 12px rgba(48,57,81,.16) !important; border-radius:6px !important; font-weight:700 !important; color:#242b3a !important; }
.cx-body:has(.cx-srunit){ background:#fff !important; }
.cx-body:has(.cx-srunit) .cx-unit:not(.cx-srunit) .outbox{ background:#fff !important; }
.cx-srunit .outlabel span{ color:var(--deep) !important; }
/* ===== Log this sale — compact, top-right of the Notes box (like the Copy button) ===== */
.cx-top-h{ gap:8px; }
.cx-top-h .cx-logbtn{ margin:0 !important; width:auto !important; align-self:auto !important; background:#eef1f6 !important; border:1.5px solid #1C8A4B !important; color:#1C8A4B !important; font-size:11px !important; font-weight:700 !important; padding:6px 14px !important; border-radius:6px !important; }
.cx-top-h .cx-logbtn:hover:not(:disabled){ background:#e2e7f0 !important; border-color:#166e3c !important; color:#166e3c !important; }
.cx-top-h .cx-logbtn.t77lr-armed{ background:#e79a1a !important; border-color:#e79a1a !important; color:#fff !important; }

/* ===== Unified per-field CLEAR: greyed "clear", only when the field has a value ===== */
.field .fldx, .field .t77clr{ display:inline-block; }
.field .cx-fclear{ display:none; }
.t77clr{ background:none; border:none; color:var(--bord); cursor:pointer; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 4px; font-family:inherit; line-height:1; }
.t77clr:hover{ color:var(--red); }
.t77clr.t77clr-abs{ position:absolute; top:2px; right:4px; padding:2px 4px; z-index:2; }

/* ===== Clear all + Copy all — stand-out fills ===== */
#screen-toolkit .tkbtns #clearAll, #screen-dep-sr .tkbtns #depClear, #screen-def-sr .tkbtns #defClear{ background:#eef1f6 !important; border:1.5px solid var(--deep) !important; color:var(--deep) !important; padding:6px 14px !important; font-size:11px !important; }
#screen-toolkit .tkbtns #clearAll:hover, #screen-dep-sr .tkbtns #depClear:hover, #screen-def-sr .tkbtns #defClear:hover{ background:#e2e7f0 !important; }
#screen-toolkit .tkbtns .cx-copyinputs, #screen-dep-sr .tkbtns .cx-copyinputs, #screen-def-sr .tkbtns .cx-copyinputs{ background:#eef1f6 !important; border:1.5px solid var(--deep) !important; color:var(--deep) !important; padding:6px 14px !important; font-size:11px !important; }
#screen-toolkit .tkbtns .cx-copyinputs:hover, #screen-dep-sr .tkbtns .cx-copyinputs:hover, #screen-def-sr .tkbtns .cx-copyinputs:hover{ background:#e2e7f0 !important; }
/* DEF: Log sale + Clear all + Copy all -> small pills, sized like "+ Add a property" */
#screen-def-sr .def-logbtn{ padding:5px 16px !important; font-size:12px !important; border-radius:999px !important; height:auto !important; }
#screen-def-sr .tkbtns #defClear, #screen-def-sr .tkbtns .cx-copyinputs{ padding:5px 13px !important; font-size:11px !important; border-radius:999px !important; }
/* DEF Clear all / Copy all: greige fill to match the neutral background */
#screen-def-sr .tkbtns #defClear, #screen-def-sr .tkbtns .cx-copyinputs{ background:#E7E5E0 !important; }
#screen-def-sr .tkbtns #defClear:hover, #screen-def-sr .tkbtns .cx-copyinputs:hover{ background:#DEDCD5 !important; }

/* ===== All buttons share the app font (Mulish), same as the CLEAR control ===== */
button, input[type=button], input[type=submit]{ font-family: inherit !important; text-transform: uppercase; letter-spacing: .03em; }

.cx-taf-link{ display:inline-block; margin:-1px 0 3px 26px; font-size:12px; font-weight:600; color:var(--accent,#485982); text-decoration:underline; }

/* tkbtns to the right */
.tkbtns{ justify-content:flex-end !important; }
/* choice buttons centered */
.cx-chiprow{ display:flex !important; justify-content:center !important; flex-wrap:wrap; }
/* footer links navy; author names as bold links */
#crWorth a, #crWorth .crlink, #crWorth .crname{ color:#303951 !important; font-weight:800 !important; }
.crname{ font-weight:700 !important; text-decoration:underline; cursor:pointer; }
.crname:hover{ color:var(--red) !important; }

/* ===== Huddle Station ===== */
.t77hud-ov{ position:fixed; inset:0; background:rgba(20,26,40,.55); display:flex; align-items:flex-start; justify-content:center; padding:5vh 14px; z-index:100000; overflow:auto; }
.t77hud-ov[hidden]{ display:none; }
.t77hud-pane{ background:#fff; width:min(560px,96vw); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.t77hud-hd{ display:flex; align-items:center; justify-content:space-between; background:#303951; color:#fff; padding:12px 16px; font-weight:800; font-size:15px; }
.t77hud-x{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1; }
.t77hud-scroll{ padding:14px 16px; display:flex; flex-direction:column; gap:11px; max-height:80vh; overflow:auto; }
.t77hud-lbl{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#5a6478; }
.t77hud-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.t77hud-row3 label, .t77hud-f{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:#42506b; }
.t77hud-ov input, .t77hud-ov textarea{ width:100%; box-sizing:border-box; border:1px solid #cfd4de; border-radius:7px; padding:8px 10px; font:inherit; font-size:13px; font-weight:400; color:#222; text-transform:none; letter-spacing:normal; }
.t77hud-ov textarea{ resize:vertical; min-height:120px; }
.t77hud-tools, .t77hud-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.t77hud-btn{ font-family:inherit; font-size:12px; font-weight:700; padding:8px 13px; border-radius:8px; border:1.5px solid #303951; background:#eef1f6; color:#303951; cursor:pointer; text-transform:uppercase; letter-spacing:.02em; }
.t77hud-btn:hover:not(:disabled){ background:#e2e7f0; }
.t77hud-btn:disabled{ opacity:.6; cursor:default; }
.t77hud-mic.on{ background:#D63827 !important; border-color:#D63827 !important; color:#fff !important; }
.t77hud-email{ background:#1C8A4B !important; border-color:#1C8A4B !important; color:#fff !important; }
.t77hud-email:hover{ background:#156e3b !important; }
.t77hud-speedout{ font-size:12px; font-weight:600; color:#42506b; }
.t77hud-tip{ font-size:11.5px; color:#8a93a6; line-height:1.45; }
.t77hud-toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(12px); background:#303951; color:#fff; padding:10px 18px; border-radius:22px; font-size:13px; font-weight:600; box-shadow:0 8px 26px rgba(0,0,0,.3); opacity:0; transition:opacity .3s,transform .3s; z-index:100001; }
.t77hud-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* DEF equipment location group */
.deflocrow{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:5px; }
.deflocs .deflocother{ display:none; }
.deflocs:has(input[data-d='locOther']:checked) .deflocother{ display:block; margin-top:7px; }

/* DEF apt/unit box is small; the street address grows */
#screen-def-sr .two .field.aptcombo{ flex:0 0 auto !important; }
.aptcomborow{ display:flex; gap:18px; align-items:center; }
.aptcomborow .apttype{ flex:0 0 90px; width:90px; }
.aptcomborow .aptnum{ flex:0 0 90px; width:90px; min-width:0; }
/* address line: a single clear, at the end (drop the one after Service address) */
#screen-def-sr .two:has(input[data-d=addr]) > .field:not(.aptcombo) .t77clr{ display:none; }


/* Step 2 (voicemail) top reminder — mirrors the Step 1 footnote (Kasie, 6 Aug 2026): a stage
   direction, not read aloud. Green to match the voicemail box. */
.vmout .outbox .vmhint{font-style:italic;font-weight:400;color:#2f7a3f;font-size:13px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px dashed #bcdcbc}

/* Step 1 "Provide the following:" label above the info bullets (Kasie, 6 Aug 2026). */
.livecall .outbox .lclabel{display:block;font-style:italic;font-weight:400;font-size:12px;color:#6f93c8;margin:2px 0 4px}

/* Step 3 Enrollment Request — plain section, no dropdown (Kasie, 6 Aug 2026): the SR is the last
   resort after the call and voicemail both fail. */
#screen-def-sr .defsr3{ margin:16px 0 0; padding-top:12px; border-top:1px solid #e6dfe3; }
#screen-def-sr .defsr3 .defsrhead{ display:flex; align-items:center; gap:7px; font-weight:800; color:var(--deep); font-size:15px; margin:0 0 8px; }

/* Scheduling-process instructions box layout (Kasie, 6 Aug 2026). */
#screen-def-sr .stepguide .sgh{ font-weight:800; color:#5a4d0e; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 5px; }
#screen-def-sr .stepguide .sgrow{ margin:3px 0; line-height:1.45; }
#screen-def-sr .stepguide .sgrow b{ color:#5a4d0e; }
#screen-def-sr .stepguide .sgrow .stepbadge{ margin-right:6px; }

/* SR reason + info moved beside Step 3 (Kasie, 6 Aug 2026); block copies are the hidden source. */
#screen-def-sr .defprop .defsrc{ display:none; }
#screen-def-sr .srout .srnote{ font-style:italic;font-weight:400;color:#BF5A38;font-size:12.5px;margin:0 0 8px; }
#screen-def-sr .srout .srinputs{ display:inline-block; margin:0; }
#screen-def-sr .srout .srinputs .srr{ width:auto; min-width:150px; max-width:270px; padding:6px 9px; border:1px solid #ccc; border-radius:7px; font-family:inherit; font-size:13px; }

/* Huddle Assist pop-out fills its own window (Kasie, 6 Aug 2026). */
.t77hud-pane.t77hud-pop{ position:static; inset:auto; width:100%; max-width:none; height:100vh; max-height:none; margin:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
.t77hud-pane.t77hud-pop .t77hud-scroll{ flex:1 1 auto; overflow:auto; }

/* Huddle pop-out: skinny layout + footer (Kasie, 6 Aug 2026). */
.t77hud-pane.t77hud-pop .t77hud-row3{ flex-direction:column; gap:8px; }
.t77hud-pane.t77hud-pop .t77hud-row3 label{ width:100%; }
.t77hud-pane.t77hud-pop .t77hud-foot{ margin:14px 0 4px; padding-top:10px; border-top:1px solid rgba(0,0,0,.08); text-align:center; font-size:11px; opacity:.9; }
.t77hud-pane.t77hud-pop .t77hud-foot #crWorth{ margin:0!important; border:0!important; padding:0!important; }

/* Huddle Send button: red outline, not green (Kasie, 6 Aug 2026). */
.t77hud-pane .t77hud-email{ background:#fff!important; color:#D63827!important; border:1.5px solid #D63827!important; font-weight:800; }
.t77hud-pane .t77hud-email:hover{ background:#fdecea!important; }

/* Huddle pop-out header layout + clean recipients line (Kasie, 6 Aug 2026). */
.t77hud-hd{ display:flex; align-items:center; gap:10px; }
.t77hud-hdbtns{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.t77hud-hd .t77hud-email{ padding:5px 15px; font-size:13px; }
.t77hud-sends{ font-size:12px; color:#555; margin:2px 0 12px; }

/* ===== Huddle Hub — Compass Security colorway (red / white / gray / black), NOT region-specific.
   Kasie, 6 Aug 2026. Topic-based notes with bold/bullet/number, search, save/organize. ===== */
.t77hud-pane.t77hh{ background:#fff; color:#1c1c1c; font:14px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.t77hh .t77hh-hd{ display:flex; align-items:center; gap:10px; padding:11px 14px; background:#6D6D6D; color:#fff; }
.t77hh .t77hh-name{ font-weight:800; font-size:15px; letter-spacing:.01em; }
.t77hh .t77hh-hdbtns{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.t77hh .t77hh-x{ background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer; line-height:1; padding:2px 5px; }
.t77hh .t77hh-hd .t77hh-send{ background:#fff; color:#D63827; border:0; font-weight:800; padding:6px 16px; }
.t77hh .t77hh-bar{ display:flex; align-items:center; gap:7px; padding:9px 12px; border-bottom:1px solid #e4e4e4; background:#fafafa; flex-wrap:wrap; }
.t77hh .t77hh-search{ flex:1 1 130px; min-width:110px; padding:7px 10px; border:1px solid #ccc; border-radius:7px; font:inherit; }
.t77hh .t77hh-btn{ background:#fff; color:#333; border:1px solid #c9c9c9; border-radius:7px; padding:7px 12px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; }
.t77hh .t77hh-btn:hover{ background:#f2f2f2; }
.t77hh .t77hh-scroll{ flex:1 1 auto; overflow:auto; padding:12px 14px; }
.t77hh .t77hh-sends{ font-size:12px; color:#666; margin:0 0 10px; }
.t77hh .t77hh-f{ display:block; font-size:12px; font-weight:700; color:#444; margin:0 0 12px; }
.t77hh .t77hh-f input{ display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid #ccc; border-radius:7px; font:inherit; font-weight:400; }
.t77hh .t77hh-topic{ border:1px solid #e0e0e0; border-left:3px solid #D63827; border-radius:8px; padding:9px 10px; margin:0 0 11px; background:#fff; }
.t77hh .t77hh-thd{ display:flex; align-items:center; gap:6px; }
.t77hh .t77hh-title{ flex:1; font-weight:800; font-size:14px; border:0; border-bottom:1px solid #eee; padding:3px 2px; font-family:inherit; color:#1c1c1c; background:transparent; }
.t77hh .t77hh-title:focus{ outline:0; border-bottom-color:#D63827; }
.t77hh .t77hh-tdel{ background:transparent; border:0; color:#aaa; font-size:17px; cursor:pointer; line-height:1; padding:0 3px; }
.t77hh .t77hh-tdel:hover{ color:#D63827; }
.t77hh .t77hh-fmt{ display:flex; gap:5px; margin:7px 0 5px; }
.t77hh .t77hh-fmt button{ background:#f4f4f4; border:1px solid #d5d5d5; border-radius:5px; padding:3px 9px; font:inherit; font-size:12px; cursor:pointer; color:#333; }
.t77hh .t77hh-fmt button:hover{ background:#e9e9e9; }
.t77hh .t77hh-body{ min-height:66px; border:1px solid #ddd; border-radius:6px; padding:8px 10px; font-size:14px; line-height:1.5; outline:0; color:#1c1c1c; }
.t77hh .t77hh-body:focus{ border-color:#D63827; }
.t77hh .t77hh-body:empty:before{ content:attr(data-ph); color:#aaa; }
.t77hh .t77hh-body ul,.t77hh .t77hh-body ol{ margin:4px 0; padding-left:22px; }
.t77hh .t77hh-noresult,.t77hh .t77hh-savedempty{ color:#888; font-size:13px; padding:6px 2px; }
.t77hh .t77hh-savedwrap{ border:1px solid #e0e0e0; border-radius:8px; padding:8px 10px; margin:0 0 11px; background:#fafafa; }
.t77hh .t77hh-savedhd{ font-weight:800; font-size:13px; margin:0 0 6px; }
.t77hh .t77hh-saveditem{ display:flex; align-items:center; gap:6px; padding:2px 0; border-bottom:1px solid #ececec; }
.t77hh .t77hh-load{ flex:1; text-align:left; background:transparent; border:0; cursor:pointer; font:inherit; font-weight:700; color:#333; padding:5px 2px; }
.t77hh .t77hh-load:hover{ color:#D63827; }
.t77hh .t77hh-when{ display:block; font-weight:400; font-size:11px; color:#999; }
.t77hh .t77hh-savedel{ background:transparent; border:0; color:#aaa; font-size:17px; cursor:pointer; }
.t77hh .t77hh-savedel:hover{ color:#D63827; }
.t77hh .t77hh-utils{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 0; }
.t77hh .t77hh-speedout{ font-size:12px; color:#555; }
.t77hh .t77hh-foot{ padding:9px 14px; border-top:1px solid #e4e4e4; text-align:center; font-size:11px; color:#888; background:#fafafa; }
.t77hh .t77hh-foot #crWorth{ margin:0!important; border:0!important; padding:0!important; }

/* Huddle Hub: collapsible topics (Collapse all -> index of titles, click to open). */
.t77hh .t77hh-tcol{ background:transparent; border:0; color:#999; cursor:pointer; font-size:12px; line-height:1; padding:0 4px; transition:transform .12s; }
.t77hh .t77hh-topic.collapsed .t77hh-tcol{ transform:rotate(-90deg); }
.t77hh .t77hh-topic.collapsed .t77hh-fmt,.t77hh .t77hh-topic.collapsed .t77hh-body{ display:none; }
.t77hh .t77hh-topic.collapsed{ background:#fafafa; }

/* Huddle Hub v3: Send + Speed as red-outlined requirement buttons; search on own row; segmented format toolbar. */
.t77hh .t77hh-bar{ padding:9px 12px 7px; border-bottom:0; }
.t77hh .t77hh-bar .t77hh-send{ margin-left:auto; background:#fff; color:#D63827; border:1.5px solid #D63827; font-weight:800; }
.t77hh .t77hh-bar .t77hh-send:hover{ background:#D63827; color:#fff; }
.t77hh .t77hh-bar2{ padding:0 12px 9px; background:#fafafa; border-bottom:1px solid #e4e4e4; }
.t77hh .t77hh-bar2 .t77hh-search{ width:100%; padding:7px 10px; border:1px solid #ccc; border-radius:7px; font:inherit; box-sizing:border-box; }
.t77hh .t77hh-speed{ background:#fff !important; color:#D63827 !important; border:1.5px solid #D63827 !important; font-weight:800; }
.t77hh .t77hh-speed:hover{ background:#D63827 !important; color:#fff !important; }
.t77hh .t77hh-fmt{ display:inline-flex; gap:0; margin:8px 0 7px; border:1px solid #d3d3d3; border-radius:7px; overflow:hidden; }
.t77hh .t77hh-fmt .t77hh-fb{ background:#fff; border:0; border-right:1px solid #e6e6e6; color:#3a3a3a; cursor:pointer; padding:5px 11px; display:inline-flex; align-items:center; justify-content:center; min-width:30px; }
.t77hh .t77hh-fmt .t77hh-fb:last-child{ border-right:0; }
.t77hh .t77hh-fmt .t77hh-fb:hover{ background:#f1f1f1; color:#D63827; }
.t77hh .t77hh-fmt .t77hh-fb b{ font-size:14px; font-weight:800; }
.t77hh .t77hh-fmt .t77hh-fb svg{ fill:currentColor; display:block; }

/* Huddle Hub v4: Today / History tabs (Send pinned top-right). */
.t77hh .t77hh-tabs{ display:flex; align-items:center; gap:6px; padding:8px 12px 0; background:#fff; }
.t77hh .t77hh-tab{ background:#f0f0f0; border:1px solid #d5d5d5; border-bottom:0; border-radius:7px 7px 0 0; padding:7px 14px; font-weight:700; color:#666; cursor:pointer; font:inherit; }
.t77hh .t77hh-tab.is-on{ background:#fff; color:#111; box-shadow:0 -2px 0 #D63827 inset; }
.t77hh .t77hh-tabs .t77hh-send{ margin-left:auto; background:#fff; color:#D63827; border:1.5px solid #D63827; font-weight:800; }
.t77hh .t77hh-tabs .t77hh-send:hover{ background:#D63827; color:#fff; }
.t77hh .t77hh-panel{ display:flex; flex-direction:column; flex:1; min-height:0; border-top:1px solid #d5d5d5; }
.t77hh .t77hh-panel[hidden]{ display:none; }

/* Huddle Hub v5: richer editor, framed speed test, per-topic reference cards, topic index. */
.t77hh .t77hh-dateline{ font-weight:800; color:#111; font-size:13px; margin:2px 0 8px; }
.t77hh .t77hh-speedbox{ border:1px solid #d3d3d3; border-radius:9px; padding:6px 10px 10px; margin:12px 0; }
.t77hh .t77hh-speedbox legend{ font-weight:800; color:#D63827; font-size:12px; letter-spacing:.03em; padding:0 6px; }
.t77hh .t77hh-speedstatus{ font-size:12px; color:#666; margin:4px 0 6px; }
.t77hh .t77hh-speedgrid{ display:flex; flex-direction:column; gap:2px; }
.t77hh .t77hh-srow{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; border-bottom:1px dashed #eee; }
.t77hh .t77hh-srow span{ color:#666; }
.t77hh .t77hh-srow b{ color:#111; }
.t77hh .t77hh-rec{ border:1px solid #e0e0e0; border-left:3px solid #D63827; border-radius:8px; margin:0 0 9px; background:#fff; }
.t77hh .t77hh-rechd{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-bottom:1px solid #f0f0f0; }
.t77hh .t77hh-rectitle{ font-weight:800; color:#111; flex:1; }
.t77hh .t77hh-recwhen{ font-size:11px; color:#888; white-space:nowrap; }
.t77hh .t77hh-recdel{ background:transparent; border:0; color:#bbb; font-size:16px; cursor:pointer; line-height:1; }
.t77hh .t77hh-recdel:hover{ color:#D63827; }
.t77hh .t77hh-recbody{ padding:8px 10px; font-size:13px; color:#222; }
.t77hh .t77hh-recbody img{ max-width:100%; border-radius:6px; }
.t77hh .t77hh-bar2{ display:flex; gap:7px; align-items:center; }
.t77hh .t77hh-bar2 .t77hh-search{ flex:1; width:auto; }
.t77hh .t77hh-alltopics.is-on{ background:#D63827; color:#fff; border-color:#D63827; }
.t77hh .t77hh-topicbank{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; background:#fafafa; border-bottom:1px solid #e4e4e4; max-height:160px; overflow:auto; }
.t77hh .t77hh-bchip{ background:#fff; border:1px solid #cfcfcf; border-radius:14px; padding:4px 10px; font-size:12px; cursor:pointer; color:#333; }
.t77hh .t77hh-bchip:hover{ border-color:#D63827; color:#D63827; }
.t77hh .t77hh-bchip i{ color:#999; font-style:normal; }
.t77hh .t77hh-fchip{ display:inline-block; background:#f0f0f0; border:1px solid #d5d5d5; border-radius:5px; padding:1px 7px; font-size:12px; }
.t77hh .t77hh-recbody mark, .t77hh .t77hh-body mark{ background:#ffe680; }
.t77hh .t77hh-refhint{ padding:16px 6px; color:#888; font-size:13px; text-align:center; line-height:1.5; }

/* Huddle Hub v6: compact, compartmentalized speed-test result (down=red, up=charcoal, arrows). */
.t77hh .t77hh-speedres{ margin-top:8px; }
.t77hh .t77hh-spgrid{ display:flex; gap:8px; }
.t77hh .t77hh-sptile{ flex:1; border:1px solid #e2e2e2; border-radius:8px; padding:7px 10px; display:flex; flex-direction:column; align-items:flex-start; background:#fff; }
.t77hh .t77hh-sptile.spt-down{ border-left:4px solid #D63827; }
.t77hh .t77hh-sptile.spt-up{ border-left:4px solid #4C4C4C; }
.t77hh .t77hh-sptile .t77hh-sparr{ font-size:13px; font-weight:800; line-height:1; }
.t77hh .t77hh-sptile.spt-down .t77hh-sparr{ color:#D63827; }
.t77hh .t77hh-sptile.spt-up .t77hh-sparr{ color:#4C4C4C; }
.t77hh .t77hh-sptile b{ font-size:20px; font-weight:800; color:#111; line-height:1.15; }
.t77hh .t77hh-sptile .t77hh-spunit{ font-size:10px; color:#8a8a8a; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.t77hh .t77hh-spmeta{ display:flex; gap:10px; align-items:center; margin-top:8px; font-size:12px; color:#666; flex-wrap:wrap; }
.t77hh .t77hh-spmeta b{ color:#111; }
.t77hh .t77hh-spq{ margin-left:auto; font-weight:800; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; padding:2px 9px; border-radius:12px; }
.t77hh .t77hh-spq.ok{ background:#eee; color:#333; }
.t77hh .t77hh-spq.weak{ background:#fdecea; color:#D63827; }
.t77hh .t77hh-spwhen{ font-size:11px; color:#9a9a9a; margin-top:5px; }

/* Huddle Hub v7: custom autocomplete dropdown (native datalist does not work in a PiP window); All-topics on its own toggling row. */
.t77hh-ac{ position:fixed; z-index:2147483000; display:none; background:#fff; border:1px solid #cfcfcf; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.16); max-height:210px; overflow:auto; font-size:13px; }
.t77hh-acrow{ padding:7px 11px; font-size:13px; cursor:pointer; color:#222; }
.t77hh-acrow:hover{ background:#f2f2f2; color:#D63827; }
.t77hh .t77hh-bar3{ padding:0 12px 8px; background:#fafafa; }
.t77hh .t77hh-bar3 .t77hh-alltopics{ width:100%; }

/* "Non-AI" accent - matches the red lightning bolt in the app crest (Kasie, Aug 2026) */
.naiRed{color:#d63827;font-weight:inherit}


/* DEC "AC Only" appointment/SR guide panel (Kasie, Aug 2026) */
.t77ac{ margin:8px 0 4px; padding:10px 12px; border:1px solid #d8c39a; background:#fff8ea; border-radius:10px; }
.t77ac[hidden]{ display:none; }
.t77ac-note{ font-size:12.5px; color:#7a5a12; margin-bottom:8px; line-height:1.4; }
.t77ac-q{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:6px 0; }
.t77ac-q[hidden]{ display:none; }
.t77ac-ql{ font-size:13px; font-weight:700; color:#3a4353; margin-right:2px; }
.t77ac-btn{ font-size:12.5px; font-weight:700; padding:4px 14px; border:1.5px solid #cbd3e1; background:#fff; color:#33405e; border-radius:999px; cursor:pointer; }
.t77ac-btn:hover{ border-color:#93a4c6; }
.t77ac-btn.active{ background:#485982; border-color:#485982; color:#fff; }
.t77ac-result{ margin-top:9px; padding:7px 11px; border-radius:8px; font-size:13px; font-weight:800; }
.t77ac-pending{ background:#eef0f4; color:#6b748a; font-weight:600; }
.t77ac-none{ background:#e7f6ec; color:#1c7a3f; border:1px solid #b7e2c4; }
.t77ac-sr{ background:#e9f0fb; color:#2b4c86; border:1px solid #bcd0ee; }
.t77ac-both{ background:#fdecea; color:#a3311f; border:1px solid #f0b8b0; }

/* ===== Preferred install / callback pickers (clock + Any toggles) ===== */
.t77pref-pick{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.t77pref-clock{ padding:7px 9px; border:1px solid #c7ccd6; border-radius:8px; font:inherit; background:#fff; }
.t77pref-any{ padding:7px 12px; border:1px solid #c7ccd6; border-radius:999px; background:#fff; font:inherit; cursor:pointer; line-height:1; color:#2b3444; }
.t77pref-any:hover{ border-color:#8b93a3; }
.t77pref-any.on{ background:#0b6b52; border-color:#0b6b52; color:#fff; }
.t77pref-anyday{ margin-top:6px; }
.t77cbpref{ margin-top:4px; }
.t77cbpref .field{ margin-top:12px; }

/* ===== Preferred install / callback — cleaned-up titled blocks (Kasie, Aug 2026) ===== */
.t77prefblk{ padding:2px 0; }
.t77prefblk-h{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700;
  color:var(--deep); border-bottom:1px solid var(--mpedge); padding-bottom:5px; margin:14px 0 8px; }
.t77prow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:5px 0; }
.t77prefblk .t77prow > label{ flex:0 0 120px; width:120px; min-width:120px; margin:0;
  text-transform:uppercase; letter-spacing:.04em; font-size:11px; font-weight:700; color:var(--deep); }
.t77prow .dayweekend-hint{ flex:0 0 100%; margin-left:128px; }
/* uniform pills — day buttons, Any Day, Any Time all one shape/size */
.t77prefblk .dayb, .t77pref-any{ height:30px; min-width:44px; padding:0 12px; display:inline-flex;
  align-items:center; justify-content:center; gap:6px; font-family:inherit; font-size:12px; font-weight:700;
  color:#8A8A8A; background:#fff; border:1px solid var(--mpedge); border-radius:4px; cursor:pointer; box-sizing:border-box; }
.t77prefblk .dayb:hover, .t77pref-any:hover{ border-color:var(--deep); color:var(--deep); }
.t77prefblk .dayb.on, .t77pref-any.on{ background:var(--deep); border-color:var(--deep); color:#fff; }
.t77pref-anyday{ margin-top:0; }
/* clock in a bordered box with a leading icon, matching the date field */
.t77pref-pick{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.t77clockbox{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
  border:1px solid var(--mpedge); border-radius:4px; color:#8A8A8A; background:#fff; box-sizing:border-box; }
.t77clockbox svg{ flex:0 0 auto; }
.t77pref-clock{ border:0; outline:0; background:transparent; font-family:inherit; font-size:12px;
  font-weight:700; color:var(--deep); height:26px; padding:0; }
/* the "after this date" picker sits inline and matches the pill height */
.t77prow .dpwrap{ display:inline-flex; }
.t77prow .dpfield{ min-height:30px; border-radius:4px; }

/* ===== "Choose a time" button — mirrors the date picker's "Choose a date" (Kasie, Aug 2026) ===== */
.t77timewrap{ position:relative; display:inline-flex; }
.t77timewrap>.t77pref-clock{ position:absolute; left:0; top:0; width:100%; height:100%; margin:0; padding:0;
  border:0; opacity:0; pointer-events:none; }
.t77timefield{ display:inline-flex; align-items:center; gap:9px; box-sizing:border-box; min-width:190px;
  padding:8px 12px; border-radius:3px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  text-align:left; background:#fff; border:1px solid var(--accent); color:var(--deep); }
.t77timefield:hover{ background:var(--outbg); }
.t77timefield.empty{ background:var(--outbg); border:1.5px dashed var(--accent); }
.t77timefield>svg{ flex:0 0 auto; }
.t77timeval{ flex:1 1 auto; }
/* the "after this date" picker sits inline and matches the time button's footprint */
.t77prow .dpwrap{ position:relative; display:inline-flex; width:auto; }
.t77prow .dpfield{ width:auto; min-width:190px; padding:8px 12px; font-size:14px; }

/* ===== Match the "Choose a time"/"Choose a date" boxes to the 30px pill height (Kasie, Aug 2026) ===== */
.t77prow .t77timefield{ height:30px; min-height:30px; padding:0 12px; font-size:12px; gap:6px; }
.t77prow .t77timefield>svg{ width:16px; height:16px; }
.t77prow .dpfield{ height:30px; min-height:30px; padding:0 12px; font-size:12px; gap:6px; }
.t77prow .dpfield>svg{ width:16px; height:16px; }
.t77prow .dpchange{ font-size:11px; }

/* size the time/date boxes to their content, same padding as the buttons (Kasie, Aug 2026) */
.t77prow .t77timefield{ min-width:0; width:auto; }
.t77prow .t77timeval{ flex:0 0 auto; }
.t77prow .dpfield{ min-width:0; width:auto; }
.t77prow .dpval{ flex:0 0 auto; }

/* ===== Consistent rows: sub-label header ABOVE its controls, every row alike (Kasie, Aug 2026) ===== */
.t77prefblk .t77prow{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:6px 0; }
.t77prefblk .t77prow > label{ flex:none; width:auto; min-width:0; margin:0 0 1px; text-transform:uppercase;
  letter-spacing:.05em; font-size:11px; font-weight:700; color:var(--deep); }
.t77prow .dayweekend-hint{ margin-left:0; flex:none; }

/* make the block headers outrank the DAY(S)/TIME sub-labels (Kasie, Aug 2026) */
.t77prefblk-h{ font-size:13.5px; font-weight:800; letter-spacing:.07em; }
.t77prefblk .t77prow > label{ font-weight:600; }

/* block headers as dark bars with white text (Kasie, Aug 2026) */
.t77prefblk-h{ background:var(--deep); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em;
  border-bottom:0; padding:5px 10px; border-radius:3px; margin:14px 0 8px; display:block; }

/* headers: light-blue chip sized to its text, navy label (Kasie, Aug 2026) */
.t77prefblk-h{ display:inline-block; width:auto; background:#E4EEF8; color:var(--deep); font-size:12px;
  font-weight:700; letter-spacing:.06em; border:0; border-radius:3px; padding:4px 10px; margin:14px 0 8px; }

/* header a touch bigger with a navy outline; box text matched to the option buttons (Kasie, Aug 2026) */
.t77prefblk-h{ font-size:13px; border:1px solid var(--deep); padding:5px 12px; }
.t77prefblk .t77prow .t77timefield, .t77prefblk .t77prow .t77timeval,
.t77prefblk .t77prow .dpfield, .t77prefblk .t77prow .dpval{ font-size:12px; }

/* ===== The primary Scheduled/Not scheduled/Renter chips unlock the next section — make them
   look like the big, important choice they are (Kasie, Aug 2026) ===== */
.cx-chiprow{ gap:8px; }
.cx-chip{ font-size:14px; font-weight:700; padding:11px 20px; border-radius:8px; border:2px solid #485982;
  color:#485982; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.10); }
.cx-chip:hover{ background:#eef1f7; color:#485982; }
.cx-chip.on, .cx-chip.cx-picked{ background:#485982; border-color:#485982; color:#fff;
  box-shadow:0 2px 8px rgba(72,89,130,.35); }

/* ===== DEC Enrollment Request Priority List — collapsible, tiered (Kasie, Aug 2026) ===== */
.t77prio-d{ margin:10px 0; border:1px solid var(--mpedge); border-radius:8px; background:#fff; overflow:hidden; }
.t77prio-sum{ cursor:pointer; list-style:none; padding:8px 12px; font-size:12.5px; font-weight:700; color:var(--deep); background:#E4EEF8; }
.t77prio-sum::-webkit-details-marker{ display:none; }
.t77prio-sum::before{ content:'\25B8'; margin-right:8px; font-size:10px; vertical-align:1px; }
.t77prio-d[open] .t77prio-sum::before{ content:'\25BE'; }
.t77prio-list{ padding:8px 12px; display:flex; flex-direction:column; gap:3px; }
.t77prio-row{ font-size:12.5px; color:#2b3444; }
.t77prio-n{ display:inline-block; min-width:14px; font-weight:800; color:var(--deep); }
.t77prio-foot{ padding:0 12px 10px; font-size:11px; color:var(--gray); }

/* ===== Priority list: always-visible, sized to content, quiet reference (Kasie, Aug 2026) ===== */
.t77prio-ref{ display:inline-block; width:auto; max-width:100%; box-sizing:border-box; margin:10px 0;
  padding:7px 12px 8px; border:1px solid var(--mpedge); border-radius:8px; background:var(--outbg); }
.t77prio-hd{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--deep); margin-bottom:5px; }
.t77prio-list{ display:flex; flex-direction:column; gap:2px; }
.t77prio-row{ font-size:11.5px; color:#3a4353; white-space:nowrap; }
.t77prio-n{ display:inline-block; min-width:12px; font-weight:800; color:var(--deep); }
.t77prio-foot{ margin-top:6px; font-size:10.5px; color:var(--gray); white-space:normal; max-width:340px; }

/* ===== Primary chips: bold COLORED buttons (not white), clear selected state (Kasie, Aug 2026) ===== */
.cx-chip{ background:#3f6fb5; border:2px solid #35609f; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.cx-chip:hover{ background:#35609f; border-color:#2c5088; color:#fff; }
.cx-chip.on, .cx-chip.cx-picked{ background:#22345c; border-color:#22345c; color:#fff;
  box-shadow:0 0 0 3px rgba(63,111,181,.35), 0 2px 8px rgba(0,0,0,.20); }

/* ===== Priority list — clean, aligned, content-width reference (Kasie, Aug 2026) ===== */
.t77prio-ref{ display:inline-block; max-width:100%; box-sizing:border-box; margin:10px 0; vertical-align:top;
  border:1px solid #cdd5e3; border-radius:8px; background:#fff; overflow:hidden; }
.t77prio-hd{ background:#E4EEF8; color:var(--deep); font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:6px 12px; border-bottom:1px solid #cdd5e3; }
.t77prio-list{ padding:8px 12px; display:grid; grid-template-columns:auto 1fr; column-gap:8px; row-gap:3px; }
.t77prio-row{ display:contents; }
.t77prio-n{ font-size:11.5px; font-weight:800; color:var(--deep); text-align:right; }
.t77prio-lab{ font-size:11.5px; color:#2b3444; white-space:nowrap; }

/* ===== Primary chips: use the region's OWN blue (var(--accent)/--deep), selected = deeper (Kasie, Aug 2026) ===== */
.cx-chip{ background:var(--accent); border:2px solid var(--accent); color:#fff; box-shadow:none; }
.cx-chip:hover{ background:var(--deep); border-color:var(--deep); color:#fff; box-shadow:none; }
.cx-chip.on, .cx-chip.cx-picked{ background:var(--deep); border-color:var(--deep); color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }

/* ===== Log sale button: dark-green outline, centered text, a bit larger — sales = green (Kasie, Aug 2026) ===== */
.def-logbtn{ text-align:center; justify-content:center; color:#15723d; border:2px solid #15723d; font-size:15px; padding:15px; }
.def-logbtn:hover{ background:#15723d; color:#fff; }

/* ===== SR priority list: centered on the card ===== */
.t77prio-ref{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }
.t77prio-hd{ text-align:center; }

/* callback readout: agent's own time smaller/lighter, whole line stays on one line (Kasie, Aug 2026) */
.t77cb-dow{ white-space:nowrap; }
.t77cb-you{ font-size:.8em; font-weight:400; color:#8a8f99; margin-left:2px; }

/* ===== Before/After toggles on the time pickers (Kasie, Aug 2026) ===== */
.t77ba-wrap{ display:inline-flex; gap:4px; }
.t77ba-btn{ height:30px; padding:0 12px; border:1px solid var(--mpedge); border-radius:4px; background:#fff;
  color:#8A8A8A; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; box-sizing:border-box; }
.t77ba-btn:hover{ border-color:var(--deep); color:var(--deep); }
.t77ba-btn.on{ background:var(--deep); border-color:var(--deep); color:#fff; }

/* ===== Callback reminder settings gear + overlay (Kasie, Aug 2026) ===== */
.t77cbg-btn{ padding:5px 8px; display:inline-flex; align-items:center; }
.t77cbg-btn svg{ display:block; }
.t77cbg-ov{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); padding:20px; }
.t77cbg-ov[hidden]{ display:none; }
.t77cbg-card{ background:#fff; max-width:340px; width:100%; border:2px solid #2E9E5B; border-radius:12px; overflow:hidden; }
.t77cbg-hd{ background:#2E9E5B; color:#fff; font-weight:800; font-size:14px; padding:11px 14px; text-transform:uppercase; letter-spacing:.3px; }
.t77cbg-body{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.t77cbg-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#2b3140; cursor:pointer; }
.t77cbg-sub{ font-size:12px; color:#5f6470; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-left:24px; }
.t77cbg-sounds{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.t77cbg-snd{ height:26px; padding:0 10px; border:1px solid var(--mpedge); border-radius:4px; background:#fff; color:#8A8A8A; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
.t77cbg-snd:hover{ border-color:#2E9E5B; color:#2E9E5B; }
.t77cbg-snd.on{ background:#2E9E5B; border-color:#2E9E5B; color:#fff; }
.t77cbg-ft{ padding:0 14px 14px; text-align:right; }

/* gear lives in the callback modal header now (Kasie, Aug 2026) */
.t77cb-modal .t77cb-hd{ display:flex; align-items:center; gap:8px; }
.t77cb-hd .t77cbg-btn{ margin-left:auto; padding:4px; display:inline-flex; align-items:center; border:1px solid transparent;
  border-radius:6px; background:transparent; color:inherit; cursor:pointer; opacity:.85; }
.t77cb-hd .t77cbg-btn:hover{ background:rgba(120,120,120,.18); opacity:1; }
.t77cb-hd .t77cbg-btn svg{ display:block; }

/* reminder settings overlay: navy, NOT green (green = sales) (Kasie, Aug 2026) */
.t77cbg-card{ border-color:#303951; }
.t77cbg-hd{ background:#303951; }
.t77cbg-snd:hover{ border-color:#303951; color:#303951; }
.t77cbg-snd.on{ background:#303951; border-color:#303951; color:#fff; }


/* Notes bar is available at ALL TIMES — never hidden by the device gate (Kasie, Aug 2026).
   Higher specificity than .t77devgated{display:none}, so the notes stay visible even before
   any device is selected. */
.cx-top.t77devgated{ display:flex !important; }


/* ===== Log sale buttons — ALWAYS dark-green outline on white, centered; sales = green, never red.
   The main-screen (.def-logbtn) and each property card's own button (.mplogbtn) also carry
   btn2/accent, whose red fill was winning on specificity — force the green look with !important
   and center each button in its card (Kasie, Aug 2026). ===== */
.def-logbtn, .mplogbtn,
.btn2.accent.def-logbtn, .btn2.accent.mplogbtn{
  background:#fff !important;
  color:#15723d !important;
  border:2px solid #15723d !important;
  text-align:center !important;
  justify-content:center !important;
}
.def-logbtn:hover, .mplogbtn:hover,
.btn2.accent.def-logbtn:hover, .btn2.accent.mplogbtn:hover{
  background:#15723d !important; color:#fff !important;
}
/* center the button within its card */
.def-logwrap, .t77declogwrap{ text-align:center !important; }
.mplogbtn{ display:block !important; width:fit-content !important; margin:12px auto 0 !important;
  padding:10px 24px !important; font-size:14px !important; }


/* ===== Multi-property layout (Kasie, Aug 2026) =====
   Un-pin the main notes so it sits in-flow at the bottom of the main property, with the
   Log sale button beneath it, both above the Multi-Property section. Each property card gets
   its own notes box above its Log button. "Log all" matches the green log-sale look. */
.cx-top{ position:static !important; }
.mp-salewrap{ margin:12px 0 0; }
.mp-salelab{ font-size:11px; font-weight:700; color:#5a6478; letter-spacing:.02em;
  text-transform:uppercase; margin-bottom:4px; }
.mp-salenote{ width:100%; box-sizing:border-box; font:inherit; font-size:13px; padding:8px 10px;
  border:1px solid #cfd5e0; border-radius:6px; resize:vertical; }
.t77logallwrap{ margin-top:16px; }
.t77logall{ font-size:15px !important; padding:13px 20px !important; font-weight:800 !important; }


/* Callback reminder — Volume buttons in the alert-settings gear (Kasie, Aug 2026) */
.t77cbg-vol{ height:26px; padding:0 10px; border:1px solid var(--mpedge); border-radius:4px; background:#fff;
  color:#8A8A8A; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
.t77cbg-vol:hover{ border-color:#2E9E5B; color:#2E9E5B; }
.t77cbg-vol.on{ background:#2E9E5B; border-color:#2E9E5B; color:#fff; }


/* Callback reminder time picker — hour / minute (00·15·30·45) / AM·PM dropdowns so only
   quarter-hour minutes are selectable (Kasie, Aug 2026) */
.t77cb-tp{ display:inline-flex; align-items:center; gap:5px; }
.t77cb-tp select{ font:inherit; font-size:14px; padding:6px 8px; border:1px solid #cfd5e0; border-radius:6px; background:#fff; color:#2b3140; cursor:pointer; }
.t77cb-tp .t77cb-colon{ font-weight:800; }


/* CM Time clock — fixed bottom-left footer (Kasie, Aug 2026) */
.t77cmclock{ position:fixed; left:12px; bottom:12px; z-index:9998; display:flex; align-items:stretch; gap:12px; background:rgba(255,255,255,.94); border:1px solid #cbd3e1; border-radius:10px; padding:5px 14px; box-shadow:0 4px 14px rgba(0,0,0,.12); pointer-events:none; font-variant-numeric:tabular-nums; }
.t77cmc-cell{ display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.15; }
.t77cmc-cell b{ font-size:12.5px; font-weight:800; color:#1e2a48; }
.t77cmc-cell em{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.03em; color:#8a93a6; margin-top:1px; }
.t77cmc-div{ width:1px; align-self:stretch; background:#d7dce6; }
#t77clock{ display:none !important; }


/* "CM requests appt" checkbox — third scheduling option under the chips (Kasie, Aug 2026) */
.t77cmreq{ display:inline-flex; align-items:center; gap:7px; margin:9px 2px 2px; padding:5px 11px;
  border:1px solid var(--mpedge,#cfd5e0); border-radius:16px; font-size:13px; font-weight:700;
  color:#2b3140; cursor:pointer; background:#fff; }
.t77cmreq:hover{ border-color:var(--deep,#303951); }
.t77cmreq.on{ background:var(--accent,#E4EEF8); border-color:var(--deep,#303951); }
.t77cmreq input{ width:16px; height:16px; accent-color:var(--deep,#303951); cursor:pointer; margin:0; }


/* AC Only gate — appears when AC Only is selected; holds the CM-requests-appt checkbox and the
   reason warning (Kasie, Aug 2026) */
.t77acgate{ margin:10px 2px 6px; padding:11px 14px; border:1px solid #303951; border-radius:8px;
  background:#EDF2F9; }
.t77acgate-h{ font-size:12px; font-weight:800; color:var(--deep,#303951); text-transform:uppercase;
  letter-spacing:.02em; margin-bottom:7px; }
.t77acgate-cb{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#2b3140; cursor:pointer; }
.t77acgate-cb input{ width:16px; height:16px; accent-color:var(--deep,#303951); cursor:pointer; margin:0; }
.t77acgate-note{ font-size:12px; color:#5f6470; margin-top:6px; }
.t77acgate-warn{ margin-top:9px; padding:7px 10px; border-radius:6px; background:#FDECEA; color:#B4231A;
  border:1px solid #F3C7C2; font-size:12.5px; font-weight:700; }


/* "CM present for install" checkbox inside the AC Only guide panel (Kasie, Aug 2026) */
.t77ac-cb{ display:flex; align-items:center; gap:8px; margin:10px 0 2px; font-size:13.5px;
  font-weight:700; color:#2b3140; cursor:pointer; }
.t77ac-cb input{ width:16px; height:16px; cursor:pointer; margin:0; }


/* Callback reopen-form + copy-phone (Kasie, Aug 2026) */
.t77cb-copyph{ margin-left:6px; }
.t77cb-reopenwrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 0; }
.t77cb-reopen{ font-weight:800; }
.t77cb-reopennote{ font-size:11.5px; color:#5f6470; }


/* Callback due-banner: phone Copy + Open form (Kasie, Aug 2026) */
.t77cb-bphrow{ display:flex; align-items:center; gap:6px; }
.t77cb-bcopy{ font-size:10.5px; border-radius:6px; border:1px solid #e79a1a; background:#e79a1a; color:#fff; padding:2px 7px; cursor:pointer; font-weight:700; line-height:1.2; }
.t77cb-bcopy:hover{ filter:brightness(.96); }
.t77cb-bopen{ background:#485982 !important; color:#fff !important; border:2.5px solid #e79a1a !important; }

/* Copy styled like the app's text-only 'clear' links (Kasie, Aug 2026) */
.t77cb-copyph{ background:none !important; border:none !important; color:#e0ad5f !important; cursor:pointer; font-size:10px !important; font-weight:700 !important; letter-spacing:.04em; text-transform:uppercase; padding:2px 3px !important; font-family:inherit; line-height:1; box-shadow:none !important; }
.t77cb-copyph:hover, .t77cb-copyph:active{ color:#e79a1a !important; filter:none !important; }

.t77cb-bwhen{ font-size:11px; color:#6b748a; font-weight:700; }

/* Log-sale buttons: small pill, like the top-row buttons (Kasie, Aug 2026) */
.cx-logbtn, .def-logbtn, .mplogbtn, .saleinline .si-log, #screen-def-sr .def-logbtn, .mpcard[data-cxmp] .mplogbtn, .btn2.accent.def-logbtn, .btn2.accent.mplogbtn{
  display:inline-flex !important; width:auto !important; height:auto !important;
  padding:5px 14px !important; font-size:11.5px !important; font-weight:700 !important;
  border-radius:999px !important; letter-spacing:.06em !important; text-transform:uppercase !important; }

/* Region Assist logo on the Assist page header (Kasie, Aug 2026) */
.assistlogo{ display:none !important; }

/* Big region banner header on DEC + DEP Assist pages, matching DEF (Kasie, Aug 2026) */
#screen-toolkit h2{ position:relative; margin:0 -26px 0; padding:22px 120px 19px 26px; line-height:1.12; background:linear-gradient(118deg,#2f3c5c,#48597f); color:#fff; font-size:22px; font-weight:800; letter-spacing:.005em; }
#screen-toolkit h2::before{ content:'Compass Security \00B7 Tools'; display:block; margin-bottom:7px; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#cfd8ef; }
#screen-toolkit h2::after{ content:''; position:absolute; top:50%; right:24px; transform:translateY(-50%); width:82px; height:82px; background:url('/icons/dec/banner-mark.png') center/contain no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
#screen-dep-sr h2{ position:relative; margin:0 -26px 0; padding:22px 120px 19px 26px; line-height:1.12; background:linear-gradient(118deg,#2c4a2c,#456b40); color:#fff; font-size:22px; font-weight:800; letter-spacing:.005em; }
#screen-dep-sr h2::before{ content:'Compass Security \00B7 Tools'; display:block; margin-bottom:7px; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#d7e8d4; }
#screen-dep-sr h2::after{ content:''; position:absolute; top:50%; right:24px; transform:translateY(-50%); width:82px; height:82px; background:url('/icons/dep/banner-mark.png') center/contain no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }

/* Collapsible priority list (Kasie, Aug 2026) */
.prio.prio-collapsible{ max-width:520px; padding:9px 14px; }
.prio.prio-collapsible .h{ cursor:pointer; user-select:none; margin-bottom:0; display:flex; align-items:center; gap:8px; }
.prio.prio-collapsible .prio-chev{ font-size:11px; line-height:1; transition:transform .15s ease; opacity:.8; }
.prio.prio-collapsible.prio-open .prio-chev{ transform:rotate(90deg); }
.prio.prio-collapsible ol{ display:none; }
.prio.prio-collapsible.prio-open ol{ display:block; margin-top:7px; }
.prio.prio-collapsible > div:last-child{ display:none; }
.prio.prio-collapsible.prio-open > div:last-child{ display:block; }

/* DEC multi-property: clean red "+ Add a property" button instead of the navy bar (Kasie, Aug 2026) */
#mpSec{ text-align:center; }
#mpSec > .secbody{ text-align:left; }
#mpSec > .h, #mpSec:not(.shut) > .h{ display:inline-flex !important; width:auto !important; margin:6px auto !important; padding:8px 20px !important; background:var(--red) !important; border:none !important; border-radius:999px !important; justify-content:center; box-shadow:none !important; }
#mpSec > .h .cv{ display:none !important; }

/* DEC log row + pill inputs (Kasie, Aug 2026) */
.t77logrow{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:10px; }
.t77logrow > .t77declogwrap{ flex:0 0 auto; width:auto; margin:0; text-align:left; }
.t77logrow > #mpSec{ flex:0 0 auto; margin:0; text-align:right; }
.t77logrow > #mpSec:not(.shut){ flex:1 1 100%; text-align:left; }
#mpSec > .h, #mpSec:not(.shut) > .h{ margin:0 !important; padding:6px 16px !important; font-size:11.5px !important; }
#screen-toolkit input[type="text"], #screen-dep-sr input[type="text"], .mpcard input[type="text"]{ border-radius:999px !important; padding-left:15px !important; padding-right:15px !important; }

/* Force LOG SALE left, + Add a property far right (Kasie, Aug 2026) */
.t77logrow > .t77declogwrap{ order:0; }
.t77logrow > #mpSec{ order:1; }

/* Center LOG SALE; + Add a property = dark-navy outline, pinned far right (Kasie, Aug 2026) */
.t77logrow{ justify-content:center !important; position:relative; }
.t77logrow > #mpSec.shut{ position:absolute !important; right:0; top:50%; transform:translateY(-50%); margin:0 !important; }
.t77logrow > #mpSec:not(.shut){ position:static !important; flex:1 1 100% !important; margin-top:12px !important; transform:none !important; }
#mpSec > .h, #mpSec:not(.shut) > .h{ background:var(--red) !important; color:#fff !important; border:2px solid #303951 !important; }

/* FINAL log row: LOG SALE left again; + Add a property red w/ thicker navy outline, sized down (Kasie, Aug 2026) */
.t77logrow{ justify-content:space-between !important; }
.t77logrow > .t77declogwrap{ order:0 !important; }
.t77logrow > #mpSec{ order:1 !important; }
.t77logrow > #mpSec.shut{ position:static !important; transform:none !important; flex:0 0 auto !important; margin:0 !important; top:auto; right:auto; }
#mpSec > .h, #mpSec:not(.shut) > .h{ background:var(--red) !important; color:#fff !important; border:3px solid #303951 !important; padding:4px 14px !important; font-size:11px !important; }

/* + Add a property: white fill, red text + red outline to match LOG SALE (Kasie, Aug 2026) */
#mpSec > .h, #mpSec:not(.shut) > .h{ background:#fff !important; color:var(--red) !important; border:2px solid var(--red) !important; padding:4px 14px !important; font-size:11px !important; box-shadow:none !important; }

/* ===== Combined Calendar overlay (Kasie, Aug 2026) ===== */
.t77cal-ov{ position:fixed; inset:0; z-index:99999; background:rgba(20,24,33,.55); display:flex; align-items:flex-start; justify-content:center; padding:34px 14px; overflow:auto; }
.t77cal-ov[hidden]{ display:none; }
.t77cal-pane{ width:min(560px,96vw); background:#fff; border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.35); overflow:hidden; }
.t77cal-hd0{ display:flex; align-items:center; justify-content:space-between; background:#303951; color:#fff; padding:12px 16px; font-weight:700; font-size:15px; }
.t77cal-x{ background:transparent; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.t77cal-tools{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:10px 16px; border-bottom:1px solid #eef0f4; }
.t77cal-jumpl{ font-size:11.5px; color:#5a6270; display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.t77cal-jump{ border:1.5px solid #d6dae2; border-radius:999px; padding:4px 12px; font:inherit; font-size:12px; }
.t77cal-legend{ display:inline-flex; gap:12px; flex-wrap:wrap; }
.t77cal-lg{ font-size:11px; color:#5a6270; display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.t77cal-lg i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.t77cal-body{ padding:12px 14px 16px; }
.t77cal .salecal-title{ display:inline-flex; gap:6px; }
.t77cal-msel,.t77cal-ysel{ border:1px solid #d6dae2; border-radius:8px; padding:3px 6px; font:inherit; font-size:12.5px; font-weight:700; color:#303951; background:#fff; }
.t77cal-dots{ display:flex; gap:2px; flex-wrap:wrap; justify-content:center; margin-top:2px; }
.t77cal-dot{ min-width:14px; height:14px; padding:0 3px; border-radius:7px; color:#fff; font-size:9px; line-height:14px; font-weight:700; text-align:center; }
.t77cal-day{ margin-top:12px; }
.t77cal-grp{ margin:10px 0; }
.t77cal-grph{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--gc,#303951); border-bottom:2px solid var(--gc,#303951); padding-bottom:3px; margin-bottom:6px; }
.t77cal-grph span{ opacity:.7; }
.t77cal-item{ border-left:4px solid #888; background:#f7f8fa; border-radius:8px; margin:6px 0; padding:0; overflow:hidden; }
.t77cal-item>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12.5px; }
.t77cal-item>summary::-webkit-details-marker{ display:none; }
.t77cal-tag{ color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.03em; padding:2px 7px; border-radius:999px; }
.t77cal-time{ color:#5a6270; font-size:11.5px; font-variant-numeric:tabular-nums; }
.t77cal-nm{ font-weight:600; color:#28303c; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t77cal-nm.t77cal-dim{ color:#9aa2ad; font-weight:500; }
.t77cal-chev{ color:#9aa2ad; transition:transform .15s; }
.t77cal-item[open]>summary .t77cal-chev{ transform:rotate(90deg); }
.t77cal-ibody{ padding:6px 12px 12px; border-top:1px solid #eef0f4; font-size:12px; color:#333; }
.t77cal-kv{ margin:3px 0; }
.t77cal-kv b{ color:#5a6270; font-weight:700; margin-right:5px; font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
.t77cal-note{ margin:6px 0; white-space:pre-wrap; }
.t77cal-sr{ background:#fff; border:1px solid #e3e6ec; border-radius:6px; padding:8px; white-space:pre-wrap; font-size:11.5px; margin:6px 0; }
.t77cal-hudhtml{ margin:4px 0 8px; }
.t77cal-jumpbtn{ background:#fff; border:1.5px solid #303951; color:#303951; border-radius:999px; padding:4px 12px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; margin-top:6px; }
.t77cal-jumpbtn:hover{ background:#303951; color:#fff; }

/* ===== Huddle Hub — mode toggle + clearer grey topic sub-headers (Kasie, Aug 2026) ===== */
.t77hh-modewrap{ margin:2px 0 12px; }
.t77hh-modeq{ font-size:13px; color:#333; margin-bottom:8px; }
.t77hh-modeseg{ display:inline-flex; border:1.5px solid #E4E4E4; border-radius:999px; padding:3px; }
.t77hh-modebtn{ border:none; background:transparent; font:inherit; font-size:12.5px; font-weight:700; padding:6px 16px; border-radius:999px; cursor:pointer; color:#6D6D6D; }
.t77hh-modebtn.is-on{ background:#D63827; color:#fff; }
.t77hh-modehint{ font-size:11.5px; color:#6D6D6D; margin-top:6px; }
.t77hh-thd{ display:flex !important; align-items:center; gap:9px; background:#6D6D6D !important; padding:9px 12px !important; border-radius:8px 8px 0 0; }
.t77hh-tchip{ flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff; background:#D63827; border-radius:999px; padding:2px 9px; }
.t77hh-onelabel{ display:none; color:#fff; font-weight:700; font-size:14px; }
.t77hh-thd .t77hh-title{ background:transparent !important; border:none !important; color:#fff !important; font-weight:700 !important; font-size:14px !important; flex:1 1 auto; box-shadow:none !important; }
.t77hh-thd .t77hh-title::placeholder{ color:#ececec !important; opacity:1; }
.t77hh-thd .t77hh-tcol, .t77hh-thd .t77hh-tdel{ color:#ededed !important; background:transparent !important; border:none !important; }
.t77hh-noteslbl{ font-size:11px; color:#6D6D6D; margin:7px 12px 2px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; }
.t77hh-topic.collapsed .t77hh-noteslbl{ display:none; }
.t77hh-addbig{ background:#D63827 !important; color:#fff !important; border:none !important; border-radius:999px !important; font-size:12px !important; font-weight:700 !important; padding:6px 13px !important; margin-top:8px; }
.t77hh-mode-one .t77hh-tchip,
.t77hh-mode-one .t77hh-thd .t77hh-title,
.t77hh-mode-one .t77hh-tcol,
.t77hh-mode-one .t77hh-tdel,
.t77hh-mode-one .t77hh-noteslbl,
.t77hh-mode-one .t77hh-addbig,
.t77hh-mode-one .t77hh-collapse{ display:none !important; }
.t77hh-mode-one .t77hh-onelabel{ display:inline-block; }
.t77hh-mode-one .t77hh-topic:not(:first-child){ display:none !important; }

/* One note mode — bigger, more obvious writing box (Kasie, Aug 2026) */
.t77hh-mode-one .t77hh-topic{ box-shadow:0 0 0 2px #E4E4E4; }
.t77hh-mode-one .t77hh-body{ min-height:240px !important; font-size:14px; background:#fff; }

/* ===== Huddle Notes tab — calendar + topic search + rows (Kasie, Aug 2026) ===== */
.t77hh-notesearch{ margin-bottom:12px; }
.t77hh-notesearch .t77hh-search{ width:100%; box-sizing:border-box; border:1.5px solid #E4E4E4; border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; }
.t77hh-notescal{ max-width:300px; margin:0 auto 14px; }
.t77hh-notescal .salecal-cell{ position:relative; }
.t77hh-notedot{ display:block; width:5px; height:5px; border-radius:50%; background:#D63827; margin:1px auto 0; }
.t77hh-daylbl{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#6D6D6D; border-bottom:1px solid #E4E4E4; padding-bottom:5px; margin:4px 0 8px; }
.t77hh-noterow{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:0.5px solid #F0F0F0; }
.t77hh-notetime{ font-size:11px; color:#9a9a9a; width:56px; flex:0 0 auto; }
.t77hh-notemain{ flex:1 1 auto; min-width:0; }
.t77hh-notetitle{ font-size:13px; font-weight:700; color:#333; }
.t77hh-noteprev{ font-size:12px; color:#6D6D6D; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t77hh-noteopen{ background:#D63827; color:#fff; border:none; border-radius:999px; padding:5px 12px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; flex:0 0 auto; }
.t77hh-notedel{ background:transparent; border:none; color:#b8b8b8; font-size:17px; line-height:1; cursor:pointer; flex:0 0 auto; }
.t77hh-viewhd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.t77hh-noteback{ background:transparent; border:none; color:#6D6D6D; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.t77hh-noteedit{ background:#D63827; color:#fff; border:none; border-radius:999px; padding:5px 14px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.t77hh-viewtitle{ font-size:15px; font-weight:700; color:#333; }
.t77hh-viewwhen{ font-size:11px; color:#9a9a9a; margin-bottom:8px; }
.t77hh-viewbody{ font-size:13px; color:#333; }

/* Notes search — distinct, tight, with topic dropdown (Kasie, Aug 2026) */
.t77hh-notesearch{ display:flex !important; gap:8px; align-items:center; margin:0 0 10px !important; }
.t77hh-notesearch .t77hh-search{ flex:1 1 auto; width:auto !important; background:#F4F4F4 !important; border:1.5px solid #C9C9C9 !important; border-radius:999px !important; padding:8px 14px !important; font-size:13px !important; }
.t77hh-notesearch .t77hh-search:focus{ border-color:#D63827 !important; background:#fff !important; outline:none; }
.t77hh-topicsel{ flex:0 0 auto; max-width:140px; border:1.5px solid #C9C9C9; border-radius:999px; padding:7px 10px; font:inherit; font-size:12.5px; font-weight:700; color:#333; background:#fff; cursor:pointer; }

/* ===== Huddle compose — grey canvas, layered cards, button hierarchy (Kasie, Aug 2026) ===== */
.t77hh-p-today, .t77hh-p-today .t77hh-scroll{ background:#ECEBE8; }
/* section cards: soft off-white lifted off the grey canvas; text boxes stay bright white */
.t77hh-topic{ background:#F7F6F4 !important; border:0.5px solid #D9D9D9 !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(0,0,0,.05); overflow:hidden; }
.t77hh-speedbox{ background:#F7F6F4 !important; border:0.5px solid #D9D9D9 !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.t77hh-utils{ background:#F7F6F4; border:0.5px solid #D9D9D9; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:12px; margin-top:8px; align-items:center; gap:10px; }
/* bright white input fields */
.t77hh-thd .t77hh-title{ background:#fff !important; color:#333 !important; border:1px solid #B9B9B9 !important; border-radius:8px !important; padding:6px 10px !important; font-weight:600 !important; }
.t77hh-thd .t77hh-title::placeholder{ color:#8a8a8a !important; }
.t77hh-body{ background:#fff !important; border:1px solid #D9D9D9 !important; border-radius:8px !important; padding:10px !important; }
.t77hh-subj{ background:#fff !important; border:1px solid #C9C9C9 !important; }
/* button hierarchy: Save primary (filled red), Add topic + Speed test secondary (red outline), Copy tertiary (grey) */
.t77hh-utils .t77hh-save{ background:#D63827 !important; color:#fff !important; border:none !important; border-radius:10px !important; font-weight:700 !important; padding:11px 24px !important; }
.t77hh-addbig{ background:#fff !important; color:#D63827 !important; border:1.5px solid #D63827 !important; }
.t77hh-speed{ background:#fff !important; color:#D63827 !important; border:1.5px solid #D63827 !important; }
.t77hh-utils .t77hh-copy{ background:transparent !important; color:#6D6D6D !important; border:1px solid #C9C9C9 !important; font-weight:500 !important; }

/* ===== Notes tab v3 — cards, search-by header, tag-chip notes (Kasie, Aug 2026) ===== */
.t77hh-p-hist, .t77hh-p-hist .t77hh-scroll{ background:#ECEBE8; }
.t77hh-ncard{ background:#F7F6F4; border:0.5px solid #D9D9D9; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:12px; margin:0 0 14px; }
.t77hh-clabel{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6D6D6D; margin-bottom:8px; }
.t77hh-searchrow{ display:flex; gap:8px; margin-bottom:10px; }
.t77hh-searchrow .t77hh-search{ flex:1 1 auto; min-width:0; width:auto !important; background:#fff !important; border:1px solid #B9B9B9 !important; border-radius:8px !important; padding:8px 12px !important; font-size:13px !important; }
.t77hh-searchbtn{ background:#D63827 !important; color:#fff !important; border:none !important; border-radius:8px !important; padding:8px 16px !important; font-size:13px !important; font-weight:700 !important; cursor:pointer; flex:0 0 auto; }
.t77hh-toprow{ display:flex; align-items:center; gap:8px; }
.t77hh-toplbl{ font-size:12px; color:#6D6D6D; font-weight:700; flex:0 0 auto; }
.t77hh-toprow .t77hh-topicsel{ flex:1 1 auto; max-width:none !important; background:#fff !important; border:1px solid #B9B9B9 !important; }
.t77hh-datecard{ width:max-content; max-width:100%; margin:0 auto 14px; text-align:center; }
.t77hh-datecard .t77hh-clabel{ text-align:center; }
.t77hh-notescal{ width:250px; max-width:100%; margin:0 auto; }
.t77hh-noterow{ display:flex !important; align-items:center; gap:10px; background:#fff !important; border:1px solid #E4E4E4 !important; border-radius:10px !important; padding:10px 12px !important; margin-bottom:7px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.t77hh-notetag{ font-size:10px; font-weight:700; letter-spacing:.03em; color:#fff; background:#D63827; border-radius:6px; padding:3px 9px; flex:0 0 auto; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t77hh-notemain{ flex:1 1 auto; min-width:0; }
.t77hh-noteprev{ font-size:12px; color:#6D6D6D; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t77hh-notetime{ width:auto !important; font-size:11px; color:#9a9a9a; margin-top:2px; }
.t77hh-noteopen{ background:#fff !important; color:#D63827 !important; border:1.5px solid #D63827 !important; border-radius:999px !important; padding:4px 12px !important; font-size:12px !important; font-weight:700 !important; cursor:pointer; flex:0 0 auto; }
.t77hh-notedel{ background:transparent; border:none; color:#b8b8b8; font-size:17px; cursor:pointer; flex:0 0 auto; }
.t77hh-noteview{ background:#F7F6F4; border:0.5px solid #D9D9D9; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:12px; }
.t77hh-utils .t77hh-copy{ background:#fff !important; color:#333 !important; border:1px solid #C9C9C9 !important; box-shadow:0 1px 2px rgba(0,0,0,.06); font-weight:600 !important; }

/* Notes tab v4 — matching keyword/topic rows, red date marker, solid toggle (Kasie, Aug 2026) */
.t77hh-modeseg{ background:#fff !important; }
.t77hh-srow{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.t77hh-srow:last-child{ margin-bottom:0; }
.t77hh-srow .t77hh-toplbl{ text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.03em; color:#6D6D6D; min-width:88px; flex:0 0 auto; }
.t77hh-srow .t77hh-search{ flex:1 1 auto; min-width:0; width:auto !important; background:#fff !important; border:1px solid #B9B9B9 !important; border-radius:8px !important; padding:8px 12px !important; font-size:13px !important; }
.t77hh-srow .t77hh-topicsel{ flex:1 1 auto; max-width:none !important; background:#fff !important; border:1px solid #B9B9B9 !important; }
.t77hh-notescal .salecal-cell.sel{ border-color:#D63827 !important; box-shadow:inset 0 0 0 2px #D63827 !important; }

/* Notes tab v5 — text add-topic, red-only calendar, filled Send email, bigger section header (Kasie, Aug 2026) */
/* 1) Add another topic -> plain text button (like the 'clear' links) so Run speed test stands out */
.t77hh-addbig{ background:none !important; border:none !important; box-shadow:none !important; color:#D63827 !important; padding:2px 2px !important; font-size:12.5px !important; font-weight:700 !important; }
.t77hh-addbig:hover{ text-decoration:underline; }
/* 2) Notes calendar: all red, no navy region colour; days-with-notes = red outline box, no dot */
.t77hh-notedot{ display:none !important; }
.t77hh-notescal .salecal-cell.has{ border:1.5px solid #D63827 !important; background:#fff !important; }
.t77hh-notescal .salecal-cell.has .salecal-dnum{ color:#D63827 !important; font-weight:700 !important; }
.t77hh-notescal .salecal-cell.today{ background:#fff !important; border:1.5px solid #D63827 !important; box-shadow:none !important; }
.t77hh-notescal .salecal-cell.sel{ background:#FDECEA !important; border:2px solid #D63827 !important; box-shadow:none !important; }
.t77hh-notescal .salecal-cell.sel .salecal-dnum{ color:#D63827 !important; }
.t77hh-notescal .salecal-badge{ background:#D63827 !important; color:#fff !important; }
/* 3) Send email -> filled red so it pops off the white tab bar */
.t77hh-send{ background:#D63827 !important; color:#fff !important; border:1.5px solid #D63827 !important; }
/* 4) 'Search notes by' header larger so it stands out from the BY KEYWORD / BY TOPIC / date labels */
.t77hh-clabel{ font-size:13px !important; color:#333 !important; }

/* Notes/Huddle v6 — add-topic right-aligned text link; grey search button (Kasie, Aug 2026) */
.t77hh-addbig{ display:block !important; width:max-content; margin:2px 0 6px auto !important; }
.t77hh-searchbtn{ background:#6D6D6D !important; color:#fff !important; border:none !important; }

/* Save matches Copy notes size/shape (red fill kept) (Kasie, Aug 2026) */
.t77hh-utils .t77hh-save{ padding:7px 12px !important; border-radius:7px !important; font-size:13px !important; font-weight:700 !important; box-shadow:none !important; }

/* Footer links dark grey, not blue/purple (Kasie, Aug 2026) */
#crWorth a, #crWorth a:visited, .t77hh-foot a, .t77hh-foot a:visited{ color:#4a4a4a !important; }

/* Topic field dropdown affordance + Add-topic row (Kasie, Aug 2026) */
.t77hh-thd .t77hh-title{ background-color:#fff !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%23888' stroke-width='2'/></svg>") !important; background-repeat:no-repeat !important; background-position:right 9px center !important; padding-right:26px !important; }
.t77hh-acadd{ color:#D63827 !important; font-weight:700 !important; border-top:1px solid #eee; }

/* Date card = full-width like keyword/topic cards (not a centered standout) (Kasie, Aug 2026) */
.t77hh-datecard{ width:auto !important; max-width:none !important; margin:0 0 14px !important; text-align:left !important; }
.t77hh-datecard .t77hh-clabel{ text-align:left !important; }
.t77hh-notescal{ margin:0 auto !important; }

/* Smaller Search button (Kasie, Aug 2026) */
.t77hh-searchbtn{ padding:5px 11px !important; font-size:11.5px !important; border-radius:7px !important; flex:0 0 auto; }

/* Move Collapse all below topics; hide empty top bar so the toggle never shifts (Kasie, Aug 2026) */
.t77hh-bar{ display:none !important; }
.t77hh-toprow2{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.t77hh-toprow2 .t77hh-addbig{ margin:0 !important; }
.t77hh-collapse2{ background:none !important; border:none !important; box-shadow:none !important; color:#6D6D6D !important; font-size:12px !important; font-weight:700 !important; padding:2px 2px !important; cursor:pointer; }
.t77hh-mode-one .t77hh-toprow2{ display:none !important; }

/* Breathing room for Collapse all / + Add topic row (Kasie, Aug 2026) */
.t77hh-toprow2{ padding:0 6px !important; }

/* Dropdown: scrollable list with + Add topic pinned as a footer (Kasie, Aug 2026) */
.t77hh-ac{ overflow:hidden !important; display:flex; flex-direction:column; }
.t77hh-acscroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.t77hh-acfoot{ flex:0 0 auto; border-top:1px solid #eee; background:#fff; }

/* Dropdown footer v2 — cap the scroll list, keep + Add topic below it always visible (Kasie, Aug 2026) */
.t77hh-ac{ overflow:visible !important; max-height:none !important; }
.t77hh-acscroll{ max-height:168px !important; overflow-y:auto !important; }
.t77hh-acfoot{ border-top:1px solid #e2e2e2 !important; background:#faf7f6 !important; position:sticky; bottom:0; }
.t77hh-acfoot .t77hh-acadd{ color:#D63827 !important; font-weight:700 !important; }

/* Manage topics modal (Kasie, Aug 2026) */
.t77hh-acmanage{ color:#6D6D6D !important; font-weight:700 !important; font-size:12px !important; }
.t77hh-manage{ position:fixed; inset:0; z-index:2147483001; background:rgba(20,24,33,.5); display:none; align-items:center; justify-content:center; padding:20px; }
.t77hh-mgcard{ background:#fff; border-radius:12px; width:min(340px,92vw); max-height:80vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.t77hh-mghd{ background:#D63827; color:#fff; padding:10px 14px; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.t77hh-mgclose{ background:transparent; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.t77hh-mgbody{ overflow-y:auto; padding:4px 0; }
.t77hh-mgrow{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-bottom:0.5px solid #f0f0f0; font-size:13px; color:#333; }
.t77hh-mgname{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t77hh-mgdel{ background:#fff; color:#D63827; border:1px solid #D63827; border-radius:999px; padding:3px 12px; font-size:11.5px; font-weight:700; cursor:pointer; flex:0 0 auto; margin-left:10px; }
.t77hh-mgnote{ font-size:11px; color:#6D6D6D; padding:9px 14px; border-top:1px solid #eee; }

/* Dropdown footer: + Add topic left, Manage topics small/light on the right (Kasie, Aug 2026) */
.t77hh-acfoot{ display:flex !important; align-items:center; justify-content:space-between; padding:2px 4px; }
.t77hh-acfoot .t77hh-acadd{ color:#D63827 !important; font-weight:700 !important; font-size:12px !important; padding:6px 8px !important; }
.t77hh-acfoot .t77hh-acmanage{ color:#a4a4a4 !important; font-weight:600 !important; font-size:10.5px !important; padding:6px 8px !important; }
.t77hh-acfoot .t77hh-acmanage:hover{ color:#6D6D6D !important; background:transparent !important; }

/* More breathing room on the Collapse/Add row (Kasie, Aug 2026) */
.t77hh-toprow2{ padding:2px 16px !important; }

/* Header refresh button (Kasie, Aug 2026) */
.t77hh-refresh{ background:transparent; border:none; color:#fff; font-size:17px; line-height:1; cursor:pointer; padding:0 4px; margin-right:2px; }
.t77hh-refresh:hover{ opacity:.8; }

/* Topic field always displays capitalized as you type (Kasie, Aug 2026) */
.t77hh-thd .t77hh-title{ text-transform:capitalize !important; }
.t77hh-thd .t77hh-title::placeholder{ text-transform:none !important; }

/* Inline-overlay hub (refresh fallback) = narrow tall card, not full screen (Kasie, Aug 2026) */
#t77HuddleOv .t77hud-pane.t77hud-pop{ width:340px !important; max-width:96vw !important; height:88vh !important; max-height:none !important; border-radius:14px !important; box-shadow:0 20px 60px rgba(0,0,0,.35) !important; }

/* Header pin button (Kasie, Aug 2026) */
.t77hh-pin{ background:transparent; border:none; font-size:15px; line-height:1; cursor:pointer; padding:0 4px; }
.t77hh-pin:hover{ opacity:.8; }

/* Standalone /huddle page: hub fills the page (Kasie, Aug 2026) */
.t77huddlepage{ margin:0; background:#F4F4F4; }
.t77huddlepage #t77HuddleOv{ position:fixed; inset:0; background:#F4F4F4; padding:0; align-items:stretch; justify-content:center; overflow:hidden; }
.t77huddlepage #t77HuddleOv .t77hud-pane.t77hud-pop{ position:static !important; width:100% !important; max-width:480px !important; height:100vh !important; max-height:none !important; margin:0 auto !important; border-radius:0 !important; box-shadow:none !important; }
.t77huddlepage .t77hh-x{ display:none !important; }

/* Header control chips + white pin (Kasie, Aug 2026) */
.t77hh .t77hh-hdbtns button{ color:#fff; background:rgba(255,255,255,.16); border:0; border-radius:7px; width:27px; height:27px; padding:0; display:inline-flex; align-items:center; justify-content:center; line-height:1; cursor:pointer; transition:background .12s; }
.t77hh .t77hh-hdbtns button:hover{ background:rgba(255,255,255,.32); opacity:1; }
.t77hh .t77hh-pin{ color:#fff; }
.t77hh .t77hh-pin svg{ display:block; width:14px; height:14px; }

/* Standalone /huddle: shown when the hub is pinned/floating (Kasie, Aug 2026) */
.t77huddlepage .t77hh-floatmsg{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:#F4F4F4; z-index:5; }
.t77hh-floatmsg .t77hh-fmcard{ max-width:340px; text-align:center; background:#fff; border:1px solid #E4E4E4; border-radius:14px; padding:28px 24px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.t77hh-floatmsg .t77hh-fmemoji{ font-size:34px; line-height:1; margin-bottom:10px; }
.t77hh-floatmsg .t77hh-fmtitle{ font-weight:800; font-size:18px; color:#3a3a3a; margin-bottom:8px; }
.t77hh-floatmsg .t77hh-fmsub{ font-size:13.5px; color:#6D6D6D; line-height:1.5; margin-bottom:18px; }
.t77hh-floatmsg .t77hh-fmbtn{ background:#D63827; color:#fff; border:0; border-radius:9px; padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer; }
.t77hh-floatmsg .t77hh-fmbtn:hover{ background:#b92f20; }
.t77hh-floatmsg .t77hh-fmhint{ font-size:12px; color:#9a9a9a; margin-top:12px; }

/* Huddle Hub banner: red uppercase title, red control buttons, thick red underline (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ border-bottom:4px solid #D63827 !important; }
.t77hh .t77hh-name{ color:#D63827 !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-weight:800 !important; }
.t77hh .t77hh-hdbtns button{ background:#D63827 !important; color:#fff !important; }
.t77hh .t77hh-hdbtns button:hover{ background:#b92f20 !important; }
.t77hh .t77hh-pin, .t77hh .t77hh-refresh, .t77hh .t77hh-x{ color:#fff !important; }

/* Huddle Hub title: white + larger (Kasie, Aug 2026) */
.t77hh .t77hh-name{ color:#fff !important; font-size:20px !important; }

/* Huddle Hub title: white "HUDDLE" + red "HUB" badge (Kasie, Aug 2026) */
.t77hh .t77hh-name .t77hh-nhub{ background:#D63827; color:#fff !important; border-radius:6px; padding:2px 9px; margin-left:4px; }

/* Huddle Hub title: BOTH words in one red badge, white text (Kasie, Aug 2026) */
.t77hh .t77hh-name{ background:#D63827 !important; color:#fff !important; border-radius:8px !important; padding:3px 12px !important; display:inline-block; }
.t77hh .t77hh-name .t77hh-nhub{ background:transparent !important; color:#fff !important; padding:0 !important; margin:0 0 0 5px !important; border-radius:0 !important; }

/* Banner grey a tad darker than the topic grey (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:#585858 !important; }

/* Banner darker + raised/shadowed red HUDDLE HUB badge (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:#474747 !important; }
.t77hh .t77hh-name{ background:linear-gradient(180deg,#e2412f,#c22e1f) !important; box-shadow:0 2px 5px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -2px 3px rgba(0,0,0,.22) !important; text-shadow:0 1px 1px rgba(0,0,0,.35) !important; }

/* Banner: charcoal gradient with depth instead of flat grey (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:linear-gradient(180deg,#5b5b5b 0%,#3a3a3a 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 2px rgba(0,0,0,.18) !important; }

/* Banner: brighter, more dramatic grey gradient (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:linear-gradient(180deg,#9a9a9a 0%,#6b6b6b 42%,#333333 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 3px rgba(0,0,0,.22) !important; }

/* Banner: lighter in the center, darker to the edges (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:radial-gradient(ellipse 85% 160% at 50% 50%, #a2a2a2 0%, #767676 45%, #3a3a3a 100%) !important; box-shadow:inset 0 0 14px rgba(0,0,0,.28) !important; }

/* Banner: dark at top fading to light at bottom (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:linear-gradient(180deg,#333333 0%,#6b6b6b 55%,#9e9e9e 100%) !important; box-shadow:inset 0 -1px 0 rgba(255,255,255,.22), inset 0 2px 4px rgba(0,0,0,.22) !important; }

/* Banner: dark center fading out to lighter edges (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:radial-gradient(ellipse 90% 175% at 50% 50%, #333333 0%, #6a6a6a 52%, #a6a6a6 100%) !important; box-shadow:inset 0 0 10px rgba(255,255,255,.10) !important; }

/* Banner: diffused, broad dark center gently fading out (Kasie, Aug 2026) */
.t77hh .t77hh-hd{ background:radial-gradient(ellipse 150% 260% at 50% 50%, #3c3c3c 0%, #494949 45%, #6c6c6c 100%) !important; box-shadow:inset 0 0 8px rgba(255,255,255,.06) !important; }

/* ===== DEF: "Why this SR reason" under the Step 3 picker (Kasie, 27 Aug 2026) ==============
   It reuses the .srr / .srr-why teaching classes DEC and DEP print in, so the two regions cannot
   drift apart structurally — but the generic .srr is a pale-yellow note, and on DEF it lands
   INSIDE Step 3's peach SR box, where yellow-on-peach reads as a warning rather than a note.
   These four rules re-tint it to Step 3's own palette; nothing else about it changes.
   .defsrc (the property block's hidden copy of the reason field) stays display:none — its .defwhy
   is painted for parity and is deliberately never seen on this screen. */
#screen-def-sr .srout .defwhy{ background:#fff; border:1px solid #f2d6c8; border-radius:8px; padding:8px 10px; margin:0 0 10px; color:#7a4a2f; }
#screen-def-sr .srout .defwhy .srr-k{ color:#BF5A38; }
#screen-def-sr .srout .defwhy .srr-v{ color:#7a4a2f; font-size:13px; }
#screen-def-sr .srout .defwhy .srr-why{ color:#7a4a2f; font-style:italic; }
#screen-def-sr .srout .defwhy .srr-why.srr-first{ color:#5f3a24; font-weight:600; }