/* Fire Behavior & Chemistry guide: shared reading styles (nav styles live in /dd.css) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-secondary);color:var(--text-soft);font-family:Verdana,Arial,Helvetica,sans-serif}
a{color:var(--link)}
a:visited{color:var(--link)}
a:hover{color:var(--gold)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:8px 14px;z-index:10}
.skip-link:focus{left:0}

/* ---------- Site header (square corners) ---------- */
.site-header{background:var(--bg-secondary);border-bottom:2px solid var(--border)}
.header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;max-width:1280px;margin:0 auto;padding:10px 20px}
.logo-section img{display:block;max-width:100%;height:auto;border:1px solid var(--gold)}
.header-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-box{min-width:220px;max-width:340px}
.hdr-btn{background:rgba(216,154,30,.18);border:1px solid rgba(216,154,30,.75);color:#F4F7FA;font:bold 12px Verdana,Arial,Helvetica,sans-serif;letter-spacing:.04em;padding:8px 14px;cursor:pointer;border-radius:0;white-space:nowrap}
.hdr-btn:hover{background:rgba(216,154,30,.32);border-color:var(--gold);color:#FFE7C2}

/* ---------- Reading area (theme-able; header/nav/footer stay dark) ---------- */
.reading{--r-bg:#0F2236;--r-panel:#17314E;--r-callout:#12293F;--r-text:#DCE4EE;--r-soft:#AFBDCE;--r-head:#E8B04A;--r-link:#7CC4FF;--r-border:rgba(232,176,74,.28);--r-case:#E0693F;background:var(--r-bg);color:var(--r-text)}
html[data-theme="light"] .reading{--r-bg:#F7F4EC;--r-panel:#EDE6D4;--r-callout:#FFFFFF;--r-text:#222B35;--r-soft:#4B5764;--r-head:#8A4A0B;--r-link:#0B5CAD;--r-border:rgba(138,74,11,.32);--r-case:#B23A1B}
.reading a,.reading a:visited{color:var(--r-link)}
.reading a:hover{color:var(--r-head)}
.article{max-width:760px;margin:0 auto;padding:22px 20px 56px;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Verdana,Arial,sans-serif;font-size:18px;line-height:1.75}
.crumbs{font-size:.8rem;color:var(--r-soft);margin:0 0 18px}
.crumbs span{margin:0 6px}
.article h1{color:var(--r-head);font-size:clamp(1.7rem,4.2vw,2.3rem);line-height:1.25;margin:0 0 10px;letter-spacing:.01em}
.dek{font-size:1.1rem;color:var(--r-soft);margin:0 0 8px}
.meta{font-size:.82rem;color:var(--r-soft);margin:0 0 22px}
.article h2{color:var(--r-head);font-size:1.45rem;line-height:1.3;margin:2.4em 0 .6em;padding-top:.9em;border-top:1px solid var(--r-border)}
.article h3{color:var(--r-text);font-size:1.12rem;margin:1.7em 0 .4em}
.article p{margin:0 0 1.1em}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.3em}
.article li{margin-bottom:.45em}
.article strong{color:var(--r-text)}
.article em{color:var(--r-text)}

.callout{background:var(--r-callout);border-left:4px solid var(--r-head);padding:14px 18px;margin:1.5em 0}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout .label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--r-head);font-weight:700;margin-bottom:.35em}
.callout.case{border-left-color:var(--r-case)}
.callout.case .label{color:var(--r-case)}
.callout h3{margin:.1em 0 .5em;font-size:1.08rem;color:var(--r-text)}
.takeaways ul{margin-top:.2em}

.toc{font-size:.92rem;margin:0 0 1.6em;color:var(--r-soft)}
.toc strong{color:var(--r-text)}
.toc ol{margin:.4em 0 0;padding-left:1.3em;columns:2 260px;column-gap:28px}
.toc li{margin-bottom:.2em}

figure{margin:1.8em 0}
figure svg{display:block;width:100%;height:auto;max-width:100%}
figcaption{font-size:.85rem;color:var(--r-soft);margin-top:.6em}
.sv-text{fill:var(--r-text);font:600 14px "Segoe UI",system-ui,sans-serif}
.sv-small{fill:var(--r-soft);font:500 12px "Segoe UI",system-ui,sans-serif}
.sv-line{stroke:var(--r-text);stroke-width:2;fill:none}
.sv-axis{stroke:var(--r-soft);stroke-width:1.5;fill:none}
.sv-grid{stroke:var(--r-border);stroke-width:1;fill:none}
.sv-dash{stroke:var(--r-soft);stroke-width:1.5;stroke-dasharray:6 5;fill:none}

.table-wrap{overflow-x:auto;margin:0 0 1.4em}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
table.data caption{text-align:left;font-size:.85rem;color:var(--r-soft);padding-bottom:.5em}
table.data th,table.data td{border:1px solid var(--r-border);padding:9px 12px;text-align:left;vertical-align:top}
table.data th{background:var(--r-panel);color:var(--r-head)}

.talk dl{margin:.2em 0 0}
.talk dt{font-weight:700;color:var(--r-text);margin-top:.7em}
.talk dd{margin:.1em 0 0;color:var(--r-soft)}
.practice ul{list-style:none;padding:0;margin:0}
.practice li{margin:0}
.practice a{display:block;padding:10px 4px;border-top:1px solid var(--r-border);font-weight:600}

.qa details{border:1px solid var(--r-border);background:var(--r-callout);margin:.6em 0}
.qa summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--r-text)}
.qa details p{margin:0;padding:0 16px 14px}

.sources{font-size:.88rem;line-height:1.55;color:var(--r-soft)}
.sources li{margin-bottom:.5em;word-break:break-word}
.about-guide{font-size:.85rem;color:var(--r-soft);border-top:1px solid var(--r-border);margin-top:2.4em;padding-top:1.2em}

.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2.4em 0 0}
.pager a{display:inline-block;padding:11px 16px;border:1px solid var(--r-border);background:var(--r-callout);font-weight:700;font-size:.9rem;text-decoration:none}
.pager a:hover{border-color:var(--r-head);text-decoration:none}
.series{font-size:.92rem;margin-top:2em}
.series ol{padding-left:1.4em;margin:.4em 0 0}
.series li.current{color:var(--r-head);font-weight:700}

.lesson-list{list-style:none;padding:0;margin:0 0 1.4em;counter-reset:lesson}
.lesson-list li{counter-increment:lesson;padding:14px 0 14px 46px;border-top:1px solid var(--r-border);position:relative;margin:0}
.lesson-list li::before{content:counter(lesson);position:absolute;left:0;top:14px;width:32px;height:32px;line-height:32px;text-align:center;background:var(--r-panel);color:var(--r-head);font-weight:700}
.lesson-list a{font-weight:700;font-size:1.05rem}
.lesson-list span{display:block;color:var(--r-soft);font-size:.95rem}
.hero-thumb{float:right;margin:4px 0 10px 18px;border:1px solid var(--r-border);max-width:40%;height:auto}
.clear{clear:both}

footer.site-footer{background:var(--bg-secondary);border-top:2px solid var(--border);padding:18px 24px;text-align:center;font-size:.85em;color:var(--text-muted);line-height:1.7}
footer.site-footer a{color:var(--link)}

@media (max-width:640px){
  .article{font-size:17px;padding:18px 16px 44px}
  .header-row{flex-direction:column;align-items:flex-start}
  .search-box{width:100%;max-width:none}
  .hero-thumb{float:none;display:block;margin:0 0 14px;max-width:100%}
}
@media print{
  .site-header,nav#site-nav,.hdr-btn,.pager,.series,.practice,footer.site-footer{display:none!important}
  body,.reading{background:#fff!important;color:#000!important;--r-bg:#fff;--r-text:#000;--r-soft:#333;--r-head:#000;--r-callout:#fff;--r-border:#999;--r-link:#000;--r-panel:#eee}
  .article{max-width:none;font-size:12pt}
}