/* Team 77 — 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}
.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}
.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)}
.field label{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* 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. */
.fldx{background:none;border:none;color:var(--bord);cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;margin:-6px -8px;min-width:24px;min-height:24px;font-family:inherit;border-radius:4px}
.fldx:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.fldx:active{background:#FCEBEB}
.fldx:hover{color:var(--red)}
.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 Team 77 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)}
.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}
/* 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: CLEAResult 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. */
.sec.req>.h{display:flex;align-items:center;gap:8px;margin:0;padding:9px 11px;
  background:var(--deep);color:#fff;border:2px solid var(--red);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>.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}
.sec.req>.secbody{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start;
  border:2px solid var(--red);border-top:0;border-radius:0 0 5px 5px;padding:12px 11px 4px}
.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
   CLEAResult 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 CLEAResult 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 CLEAResult 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 CLEAResult 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}
#screen-def,#screen-def-sr{--accent:#784B6A;--deep:#4B3143;--mpzone:#E4DBE1;--mpedge:#CCBBC6;--outbg:#F2EDF0}
#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 CLEAResult 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 CLEAResult 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}