/* FirstTableCheck — "Ember & Porcelain"
   Warm porcelain paper, deep warm-brown ink, burnt-ember red, saffron accent.
   The Opening Map timeline bar is the brand's visual signature. */
:root{
  --paper:#FBF7EF; --paper2:#F4ECDC; --card:#FFFDF8;
  --ink:#2A211A; --inksoft:#5C4B38;
  --ember:#A83A22; --emberdeep:#8C2D18; --emberdark:#7A2812;
  --saffron:#D9A441; --saffronlt:#EFC25E;
  --darkbg:#2E2019; --hero:#3A2417; --cream:#F7EFE1; --creamsoft:#E4D5BE;
  --good:#1E5A2E; --goodbg:#E2EFDF; --warn:#8A5A00; --warnbg:#F7ECD2;
  --bad:#9C2415; --badbg:#F9E3DC; --line:#E2D5C0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.55}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;line-height:1.18;color:var(--ink);margin:0 0 .5em}
h1{font-size:2.35rem} h2{font-size:1.75rem} h3{font-size:1.22rem}
p{margin:0 0 1em}
a{color:var(--emberdeep)}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
section{padding:52px 0}
section.alt{background:var(--paper2)}
section.dark{background:var(--darkbg);color:var(--cream)}
section.hero{background:var(--hero);color:var(--cream);padding:56px 0 60px}
section.dark h2,section.dark h3,section.dark p{color:var(--cream)}
section.hero h1,section.hero h2,section.hero h3,section.hero p{color:var(--cream)}
section.dark a,section.hero a{color:var(--saffronlt)}
.small{font-size:.86rem}
.muted{color:var(--inksoft)}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emberdeep);margin:0 0 .6em}
section.dark .kicker,section.hero .kicker{color:var(--saffronlt)}
.btn{display:inline-block;background:var(--ember);color:#FFF9F0;padding:13px 24px;border-radius:8px;
  font-weight:700;text-decoration:none;border:2px solid var(--ember);font-size:1rem;cursor:pointer}
.btn:hover{background:var(--emberdark)}
.btn.primary{background:var(--ember);color:#FFF9F0}
.btn.ghost{background:transparent;color:var(--emberdeep);border-color:var(--emberdeep)}
section.dark .btn.ghost,section.hero .btn.ghost{color:var(--cream);border-color:var(--cream)}
/* header / footer */
header.site{background:var(--paper);border-bottom:3px solid var(--ember)}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;padding:14px 0}
a.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:Georgia,serif;font-size:1.45rem;font-weight:700;letter-spacing:.01em}
a.wordmark .wm-accent{color:var(--ember)}
a.wordmark svg{flex:none}
nav.main{display:flex;flex-wrap:wrap;gap:6px 20px}
nav.main a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;padding:6px 2px}
nav.main a:hover{color:var(--emberdeep);text-decoration:underline}
footer.site{background:var(--darkbg);color:var(--cream);padding:44px 0 34px;margin-top:0}
footer.site p,footer.site li{color:var(--cream)}
footer.site a{color:var(--saffronlt)}
footer.site .plate{display:inline-block;background:var(--paper);border-radius:10px;padding:10px 16px;margin-bottom:18px}
footer.site .plate a.wordmark{color:var(--ink)}
footer.site .plate a.wordmark .wm-accent{color:var(--ember)}
.fcols{display:flex;flex-wrap:wrap;gap:26px 54px}
.fcols h3{color:var(--cream);font-size:1.05rem}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin:0 0 7px}
/* cards & doors */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-top:5px solid var(--ember);
  border-radius:10px;padding:22px}
.card h3{color:var(--ink)} .card p{color:var(--ink)}
.card .go{font-weight:700}
/* checker tool panels */
.tool{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:26px}
.tool h2,.tool h3{color:var(--ink)} .tool p,.tool li{color:var(--ink)}
.tool label{display:block;font-weight:700;margin:0 0 6px;color:var(--ink)}
.tool legend{font-weight:700;color:var(--ink);padding:0 6px}
.tool fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 18px;padding:14px 16px}
.tool select,.tool input[type=text],.tool input[type=number]{width:100%;padding:11px 12px;border:1.5px solid #B9A888;
  border-radius:7px;font-size:1rem;background:#FFFFFF;color:var(--ink);margin:0 0 16px}
.tool input[type=range]{width:100%;margin:0 0 8px}
.tool .checks label{font-weight:400;display:flex;gap:9px;align-items:flex-start;margin:0 0 9px}
.tool .checks input{margin-top:4px}
/* results (JS-injected) */
.result{background:var(--card);color:var(--ink);border:1.5px solid var(--ember);border-radius:12px;padding:26px;margin-top:22px}
.result h3,.result p,.result li{color:var(--ink)}
.chip{display:inline-block;font-weight:700;font-size:.85rem;padding:5px 13px;border-radius:20px;margin:0 0 12px}
.chip.good{background:var(--goodbg);color:var(--good)}
.chip.warn{background:var(--warnbg);color:var(--warn)}
.chip.bad{background:var(--badbg);color:var(--bad)}
.chip.info{background:var(--paper2);color:var(--ink)}
/* lock panels */
.lock-panel{background:var(--paper2);color:var(--ink);border:1.5px dashed var(--ember);border-radius:12px;padding:24px;margin-top:22px}
.lock-panel h3,.lock-panel p,.lock-panel li{color:var(--ink)}
/* kit pack band — light band directly under the hero (kit-visibility rule) */
.pack-band{background:var(--paper2);color:var(--ink);border-bottom:4px solid var(--saffron);padding:30px 0 34px}
.pack-band h2,.pack-band h3,.pack-band p,.pack-band li{color:var(--ink)}
.pack-band .kicker{color:var(--emberdeep)}
.pack-band a.btn,.pack-band a.btn.primary{background:var(--ember);color:#FFF9F0;border-color:var(--ember)}
/* notices */
.notice{background:var(--warnbg);color:var(--ink);border-left:5px solid var(--saffron);border-radius:6px;padding:16px 20px;margin:20px 0}
.notice p,.notice li{color:var(--ink)}
/* tables */
.tablewrap{overflow-x:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;margin:18px 0}
.tablewrap table{border-collapse:collapse;width:100%;min-width:560px}
.tablewrap th,.tablewrap td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.tablewrap th{background:var(--paper2);font-weight:700}
/* faq */
.faq details{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:15px 19px;margin:0 0 12px}
.faq summary{font-weight:700;cursor:pointer;color:var(--ink)}
.faq p,.faq li{color:var(--ink)}
/* check lists */
ul.check{list-style:none;margin:0 0 1em;padding:0}
ul.check li{padding-left:30px;position:relative;margin:0 0 9px}
ul.check li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--ember)}
section.dark ul.check li::before,section.hero ul.check li::before{color:var(--saffronlt)}
ol.steps{margin:0 0 1em;padding-left:24px}
ol.steps li{margin:0 0 9px}
/* sibling bar + stamps */
.sibling{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:26px 0}
.sibling p{margin:0}
.stamp{font-size:.84rem;color:var(--inksoft);border-top:1px solid var(--line);padding-top:12px;margin-top:26px}
/* Opening Map timeline */
.maprow{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px}
.mapdot{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ember);color:#FFF9F0;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-top:2px}
.mapdot.longpole{background:var(--bad)}
.mapbody{flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 19px;color:var(--ink)}
.mapbody h3,.mapbody p{color:var(--ink)}
.mapbar{height:12px;border-radius:6px;background:var(--paper2);margin:9px 0 4px;overflow:hidden}
.mapbar span{display:block;height:100%;background:var(--saffron);border-radius:6px}
.mapbar span.longpole{background:var(--bad)}
/* scoped component rules inside dark + hero (specificity strictly above section rules) */
section.dark .lock-panel,section.hero .lock-panel,
section.dark .card,section.hero .card,
section.dark .tool,section.hero .tool,
section.dark .result,section.hero .result,
section.dark .notice,section.hero .notice,
section.dark .tablewrap,section.hero .tablewrap,
section.dark .faq details,section.hero .faq details{background:var(--card);color:var(--ink)}
section.dark .lock-panel h2,section.dark .lock-panel h3,section.dark .lock-panel p,section.dark .lock-panel li,
section.hero .lock-panel h2,section.hero .lock-panel h3,section.hero .lock-panel p,section.hero .lock-panel li,
section.dark .card h2,section.dark .card h3,section.dark .card p,section.dark .card li,
section.hero .card h2,section.hero .card h3,section.hero .card p,section.hero .card li,
section.dark .tool h2,section.dark .tool h3,section.dark .tool p,section.dark .tool li,section.dark .tool label,section.dark .tool legend,
section.hero .tool h2,section.hero .tool h3,section.hero .tool p,section.hero .tool li,section.hero .tool label,section.hero .tool legend,
section.dark .result h2,section.dark .result h3,section.dark .result p,section.dark .result li,
section.hero .result h2,section.hero .result h3,section.hero .result p,section.hero .result li,
section.dark .notice h2,section.dark .notice h3,section.dark .notice p,section.dark .notice li,
section.hero .notice h2,section.hero .notice h3,section.hero .notice p,section.hero .notice li,
section.dark .tablewrap th,section.dark .tablewrap td,
section.hero .tablewrap th,section.hero .tablewrap td,
section.dark .faq summary,section.dark .faq p,section.dark .faq li,
section.hero .faq summary,section.hero .faq p,section.hero .faq li{color:var(--ink)}
section.dark .lock-panel p.small,section.hero .lock-panel p.small,
section.dark .card p.small,section.hero .card p.small,
section.dark .tool p.small,section.hero .tool p.small,
section.dark .result p.small,section.hero .result p.small,
section.dark .notice p.small,section.hero .notice p.small,
section.dark .tablewrap p.small,section.hero .tablewrap p.small,
section.dark .faq p.small,section.hero .faq p.small,
section.dark .lock-panel p.kicker,section.hero .lock-panel p.kicker,
section.dark .card p.kicker,section.hero .card p.kicker,
section.dark .tool p.kicker,section.hero .tool p.kicker,
section.dark .result p.kicker,section.hero .result p.kicker,
section.dark .notice p.kicker,section.hero .notice p.kicker{color:var(--inksoft)}
section.dark .lock-panel ul.check li::before,section.hero .lock-panel ul.check li::before,
section.dark .card ul.check li::before,section.hero .card ul.check li::before,
section.dark .tool ul.check li::before,section.hero .tool ul.check li::before,
section.dark .result ul.check li::before,section.hero .result ul.check li::before,
section.dark .notice ul.check li::before,section.hero .notice ul.check li::before,
section.dark .faq ul.check li::before,section.hero .faq ul.check li::before{color:var(--ember)}
section.dark .lock-panel a,section.hero .lock-panel a,
section.dark .card a,section.hero .card a,
section.dark .tool a,section.hero .tool a,
section.dark .result a,section.hero .result a,
section.dark .notice a,section.hero .notice a,
section.dark .tablewrap a,section.hero .tablewrap a,
section.dark .faq a,section.hero .faq a{color:var(--emberdeep)}
section .lock-panel a.btn,section .card a.btn,section .tool a.btn,
section .result a.btn,section .notice a.btn,section .faq a.btn,section .tablewrap a.btn,
section .lock-panel a.btn.primary,section .card a.btn.primary,section .tool a.btn.primary,
section .result a.btn.primary,section .notice a.btn.primary,section .faq a.btn.primary,section .tablewrap a.btn.primary{
  background:var(--ember);color:#FFF9F0;border-color:var(--ember)}
section.hero .lock-panel a.btn,section.hero .card 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,
section.hero .lock-panel a.btn.primary,section.hero .card a.btn.primary,section.hero .tool a.btn.primary,
section.hero .result a.btn.primary,section.hero .notice a.btn.primary,section.hero .faq a.btn.primary,section.hero .tablewrap a.btn.primary{
  background:var(--ember);color:#FFF9F0;border-color:var(--ember)}
@media (max-width:760px){
  h1{font-size:1.85rem} h2{font-size:1.45rem}
  section{padding:38px 0}
  nav.main{gap:4px 14px}
  nav.main a{font-size:.93rem}
  .topbar{gap:8px 14px}
  .tool,.result{padding:19px}
}