/* ShopStayOpen — "Signal Slate" theme.
   Dark slate + the three zone lights (green / amber / red) are the identity:
   the site wears the same colors as the score it explains.
   Cascade discipline: light components stay light in EVERY section flavor;
   scoped rules pin their text and their button labels at high specificity. */
:root{
  --paper:#FAF7F1; --paper2:#EFE9DB; --card:#FFFFFF;
  --ink:#182230; --ink-soft:#45536A;
  --slate:#131C28; --slate2:#1E2A3A; --line:#D9D2C2; --line-dark:#35465C;
  --paper-on-dark:#F5F0E3; --muted-on-dark:#B3C3D6;
  --teal:#0B5563; --teal-bright:#7FD1C0;
  --green:#14663F; --amber:#F2B33D; --amber-ink:#182230; --red:#B3261E;
  --cream:#FFF6DE; --rose:#FDECEA;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;font-size:17px}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;line-height:1.2;color:var(--ink)}
h1{font-size:2.35rem;margin:.2em 0 .45em}
h2{font-size:1.72rem;margin:0 0 .55em}
h3{font-size:1.24rem;margin:0 0 .4em}
p{margin:0 0 1em}
a{color:var(--teal)}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
section.alt{background:var(--paper2)}
section.dark{background:var(--slate);color:var(--paper-on-dark)}
section.dark h2,section.dark h3,section.dark h4{color:var(--paper-on-dark)}
section.dark a{color:var(--teal-bright)}
section.dark p{color:var(--paper-on-dark)}
.hero{background:linear-gradient(160deg,var(--slate) 55%,var(--slate2));color:var(--paper-on-dark);padding:64px 0 56px;border-top:6px solid var(--amber)}
.hero h1{color:var(--paper-on-dark)}
.hero h2,.hero h3,.hero h4{color:var(--paper-on-dark)}
.hero p{color:var(--paper-on-dark)}
.hero a{color:var(--teal-bright)}
.hero .kicker{color:var(--amber)}
.kicker{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--teal);margin:0 0 .6em}
.lede{font-size:1.16rem;max-width:44em}
.small{font-size:.88rem}
.muted{color:var(--ink-soft)}
section.dark .muted,.hero .muted{color:var(--muted-on-dark)}
/* header / footer */
header.site{background:var(--slate);padding:14px 0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font-family:Georgia,serif;font-size:1.45rem;font-weight:700;text-decoration:none;color:var(--paper-on-dark)}
.wordmark .w1{color:var(--paper-on-dark)} .wordmark .w2{color:var(--amber)} .wordmark .w3{color:var(--teal-bright)}
.wordmark .dot{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--green);margin-left:.28em;box-shadow:.62em 0 0 var(--amber),1.24em 0 0 var(--red)}
nav.main{display:flex;gap:20px;flex-wrap:wrap}
nav.main a{color:var(--paper-on-dark);text-decoration:none;font-size:.98rem}
nav.main a:hover{text-decoration:underline}
footer.site{background:var(--slate);color:var(--paper-on-dark);padding:44px 0 34px;margin-top:0}
footer.site a{color:var(--teal-bright)}
footer.site p{color:var(--paper-on-dark)}
footer.site .fine{color:var(--muted-on-dark);font-size:.86rem}
/* buttons */
.btn{display:inline-block;background:var(--teal);color:#FFFFFF;padding:.72em 1.35em;border-radius:8px;text-decoration:none;font-weight:700;border:2px solid var(--teal);cursor:pointer}
.btn:hover{background:#08424D;border-color:#08424D}
.btn-red{background:var(--red);border-color:var(--red);color:#FFFFFF}
.btn-red:hover{background:#8F1D17;border-color:#8F1D17}
.btn-ghost{background:transparent;color:var(--paper-on-dark);border:2px solid var(--paper-on-dark)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
/* light components — pinned in every flavor */
.card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3,.card h4{color:var(--ink)} .card p{color:var(--ink)} .card a{color:var(--teal)}
.tool{background:var(--card);color:var(--ink);border-radius:14px;padding:26px;box-shadow:0 14px 34px rgba(10,16,24,.28)}
.tool h2,.tool h3{color:var(--ink)} .tool p{color:var(--ink)} .tool a{color:var(--teal)}
.lock-panel{background:var(--cream);color:var(--ink);border:2px dashed #B98A1F;border-radius:12px;padding:20px 22px;margin:22px 0}
.lock-panel h3,.lock-panel h4{color:var(--ink)} .lock-panel p{color:var(--ink)} .lock-panel a{color:var(--teal)}
.lock-panel li{color:var(--ink)}
.notice{background:#E9F2ED;color:var(--ink);border-left:6px solid var(--green);border-radius:8px;padding:16px 18px;margin:20px 0}
.notice p{color:var(--ink)} .notice a{color:var(--teal)}
.notice-warn{background:var(--rose);border-left-color:var(--red)}
.faq{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:0 0 14px}
.faq h3,.faq p{color:var(--ink)} .faq a{color:var(--teal)}
.tablewrap{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:6px 18px 12px;overflow-x:auto;margin:18px 0}
.tablewrap table{border-collapse:collapse;width:100%;min-width:520px}
.tablewrap th{background:var(--slate);color:var(--paper-on-dark);text-align:left;padding:10px 12px;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-size:.92rem}
.tablewrap td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.tablewrap a{color:var(--teal)}
/* scoped button-label pins — the MHC/CanIWholesale lesson, applied at build time */
section .card a.btn,section .lock-panel a.btn,section .tool a.btn,section .result a.btn,
section .notice a.btn,section .faq a.btn,section .tablewrap a.btn{color:#FFFFFF}
section .card a.btn-red,section .lock-panel a.btn-red,section .tool a.btn-red,section .result a.btn-red{color:#FFFFFF}
.hero .card a.btn,.hero .lock-panel a.btn,.hero .tool a.btn,.hero .result a.btn,
.hero .notice a.btn,.hero .faq a.btn,.hero .tablewrap a.btn{color:#FFFFFF}
/* component text/link pins — strictly above every flavor rule (dark/alt/hero) */
section .card h3,section .card h4,section .card p,section .card li,
section .lock-panel h3,section .lock-panel h4,section .lock-panel p,section .lock-panel li,
section .tool h2,section .tool h3,section .tool p,section .tool li,section .tool label,
section .result h3,section .result h4,section .result p,section .result li,
section .notice h3,section .notice p,section .notice li,
section .faq h3,section .faq p,section .faq li,
section .tablewrap td{color:var(--ink)}
section .card a,section .lock-panel a,section .tool a,section .result a,
section .notice a,section .faq a,section .tablewrap a{color:var(--teal)}
section.dark .card h3,section.dark .card p,section.dark .lock-panel h3,section.dark .lock-panel p,
section.dark .tool h3,section.dark .tool p,section.dark .result h3,section.dark .result p,
section.dark .notice p,section.dark .faq h3,section.dark .faq p,section.dark .tablewrap td{color:var(--ink)}
section.dark .card a,section.dark .lock-panel a,section.dark .tool a,section.dark .result a,
section.dark .notice a,section.dark .faq a,section.dark .tablewrap a{color:var(--teal)}
section.hero .card h3,section.hero .card p,section.hero .lock-panel h3,section.hero .lock-panel p,
section.hero .tool h2,section.hero .tool h3,section.hero .tool p,section.hero .result h3,section.hero .result p,
section.hero .notice p,section.hero .faq h3,section.hero .faq p,section.hero .tablewrap td{color:var(--ink)}
section.hero .card a,section.hero .lock-panel a,section.hero .tool a,section.hero .result a,
section.hero .notice a,section.hero .faq a,section.hero .tablewrap a{color:var(--teal)}
/* button pins LAST and strictly highest — a container link rule must never paint a button label */
section.dark .card a.btn,section.dark .lock-panel a.btn,section.dark .tool a.btn,section.dark .result a.btn,
section.dark .notice a.btn,section.dark .faq a.btn,section.dark .tablewrap a.btn{color:#FFFFFF}
section.dark .card a.btn-red,section.dark .lock-panel a.btn-red,section.dark .tool a.btn-red,section.dark .result a.btn-red{color:#FFFFFF}
section.hero .card a.btn,section.hero .lock-panel a.btn,section.hero .tool a.btn,section.hero .result a.btn,
section.hero .notice a.btn,section.hero .faq a.btn,section.hero .tablewrap a.btn{color:#FFFFFF}
/* kit-visibility pack band (2026-10-23) — light band directly under the hero */
.pack-band{background:var(--cream);color:var(--ink);padding:26px 0;border-bottom:1px solid var(--line)}
.pack-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pack-band h2{color:var(--ink);font-size:1.45rem;margin:0 0 .25em}
.pack-band p{color:var(--ink);margin:0;max-width:44em}
.pack-band .pack-band-cta{margin:0;flex:none}
section.pack-band a.btn,section.pack-band a.btn-red{color:#FFFFFF}
/* checker */
fieldset.vrow{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 14px;background:#FFFDF8}
fieldset.vrow legend{font-weight:700;padding:0 6px;color:var(--ink)}
label{display:block;margin:0 0 12px;font-weight:600;color:var(--ink)}
label input,label select{margin-top:5px}
input[type=number],input[type=date],select{width:100%;padding:.6em .7em;border:1.5px solid #B9B09A;border-radius:7px;font-size:1rem;background:#fff;color:var(--ink)}
input[type=radio],input[type=checkbox]{width:auto;margin-right:.45em}
.radio-row{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 14px}
.radio-row label{font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
details.metrics{margin:6px 0 16px}
details.metrics summary{cursor:pointer;font-weight:700;color:var(--teal)}
.v-remove{background:none;border:1.5px solid var(--red);color:var(--red);border-radius:7px;padding:.4em .9em;cursor:pointer;font-weight:700}
#add-violation{background:none;border:1.5px dashed var(--teal);color:var(--teal);border-radius:7px;padding:.55em 1em;cursor:pointer;font-weight:700;margin:0 0 16px}
/* result panel (runtime-injected) */
.result{background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:22px;margin-top:22px}
.result h3,.result h4{color:var(--ink)} .result p,.result li{color:var(--ink)} .result a{color:var(--teal)}
.result-safe{border-top:8px solid var(--green)}
.result-watch{border-top:8px solid var(--amber)}
.result-danger,.result-severe{border-top:8px solid #D97A16}
.result-critical{border-top:8px solid var(--red)}
.result-handoff{border-top:8px solid var(--slate);background:var(--paper2)}
.result-band{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}
.result-warn{background:var(--rose);border-radius:8px;padding:10px 14px}
.result-clock{background:var(--paper2);border-radius:8px;padding:10px 14px;margin:10px 0}
.result-note{font-size:.9rem;color:var(--ink-soft)}
.gauge{position:relative;height:18px;border-radius:9px;background:linear-gradient(90deg,var(--red) 0 20%,#D97A16 20% 60%,var(--amber) 60% 80%,var(--green) 80% 100%);margin:14px 0 4px}
.gauge-fill{display:none}
.gauge-marker{position:absolute;top:-5px;width:5px;height:28px;background:var(--ink);border-radius:2px;transform:translateX(-50%)}
.gauge-labels{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-soft);margin-bottom:10px}
.fix-list li{margin-bottom:12px}
/* zone chips + tables */
.chip{display:inline-block;padding:.18em .7em;border-radius:999px;font-weight:700;font-size:.85rem}
.chip-green{background:var(--green);color:#FFFFFF}
.chip-amber{background:var(--amber);color:var(--amber-ink)}
.chip-red{background:var(--red);color:#FFFFFF}
.stamp{font-size:.85rem;color:var(--ink-soft)}
section.dark .stamp,.hero .stamp{color:var(--muted-on-dark)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:20px 0}
ul.tight li{margin-bottom:7px}
.checklist{list-style:none;padding:0}
.checklist li{padding-left:1.5em;position:relative;margin-bottom:9px}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
section.dark .checklist li::before{color:var(--teal-bright)}
.letter{background:#FFFDF8;border:1px solid var(--line);border-radius:10px;padding:18px 20px;white-space:pre-wrap;font-family:Georgia,serif;font-size:.98rem;color:var(--ink);margin:12px 0}
.dayplan td:first-child{font-weight:700;white-space:nowrap}
.toc{columns:2;column-gap:34px}
@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:1.85rem} h2{font-size:1.45rem}
  section{padding:40px 0}
  .grid2{grid-template-columns:1fr}
  .toc{columns:1}
  header.site .wrap{flex-direction:column;align-items:flex-start}
  nav.main{gap:14px}
  .tablewrap{padding:4px 10px 8px}
  .pack-band .wrap{flex-direction:column;align-items:flex-start}
}