/* Fire Resilience Styles (v1.0.0) */
:root{
  --bg: #fff7f2;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --muted:#636366;
  --brand:#e71d36;        /* vibrant red */
  --brand-2:#ff9f1c;      /* warm amber */
  --brand-3:#2ec4b6;      /* teal accent */
  --brand-4:#8e44ad;      /* violet accent */
  --ring: rgba(231,29,54,.35);
  --radius: 16px;
  --shadow: 0 12px 32px rgba(0,0,0,.08);
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 30%, var(--brand-3) 65%, var(--brand-4) 100%);
}
:root.theme-alt{
  --bg:#f4fbff;
  --panel:#ffffff;
  --brand:#1e90ff;
  --brand-2:#00d084;
  --brand-3:#ffb300;
  --brand-4:#c2185b;
  --ring: rgba(30,144,255,.35);
}

*{box-sizing:border-box}
.fr-wrap{
  font:16px/1.65 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(255,255,255,.85), transparent 60%),
    var(--bg);
  padding:24px 18px 80px;
  margin:0;
}
.fr-title{font-weight:800; font-size: clamp(28px, 4vw, 48px); margin: 8px 0 8px; letter-spacing:.2px}
.fr-subtitle{font-size:clamp(16px,2.2vw,20px); color:#333; margin:0 0 16px}
.fr-keywords{display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 0 8px; list-style:none}
.fr-keywords li{background:rgba(0,0,0,.05); padding:6px 10px; border-radius:999px; font-size:13px}

.fr-utility{
  position:sticky; top:8px; z-index:9; display:flex; gap:8px; flex-wrap:wrap;
  background:rgba(255,255,255,.8); backdrop-filter:saturate(1.2) blur(6px);
  border:1px solid rgba(0,0,0,.08); padding:8px; border-radius:12px; box-shadow:var(--shadow)
}
.fr-btn{
  appearance:none; border:none; cursor:pointer; font-weight:700;
  padding:10px 14px; border-radius:12px; background:var(--grad); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.fr-btn:focus{outline:3px solid var(--ring); outline-offset:2px}
.fr-btn-outline{background:#fff; color:#222; border:2px solid #eee; text-decoration:none}

.fr-hero{
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,1) 80%), var(--grad);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  margin:16px auto;
  max-width:1000px;
}

.fr-toc{
  max-width:1000px; margin:18px auto; padding:16px 18px; background:var(--panel);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow)
}
.fr-toc .fr-h2{margin:0 0 8px}
.fr-toc-list{columns: 1; gap:16px; padding-left:18px}
@media (min-width:800px){ .fr-toc-list{columns: 2;} }
.fr-toc-list a{color:#0a0a0a; text-decoration: none; border-bottom:2px solid transparent}
.fr-toc-list a:hover{border-color:var(--brand-2)}

.fr-section{
  max-width:1000px; margin:18px auto; padding:18px 20px; background:var(--panel);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow)
}
.fr-h2{font-size:clamp(20px,2.4vw,28px); margin:0 0 8px; color:#111}

.fr-figure{
  max-width:1000px; margin:18px auto; padding:8px; background:var(--panel);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow); text-align:center
}
.fr-figure img{width:100%; height:auto; border-radius:12px; display:block}
.fr-figure figcaption{font-size:14px; color:var(--muted); margin-top:6px}

.fr-progress{
  display:flex; align-items:center; gap:10px; margin:10px 0 14px; position:relative
}
.fr-progress-bar{
  height:10px; flex:1 1 auto; background:rgba(0,0,0,.08); border-radius:999px; position:relative; overflow:hidden
}
.fr-progress-bar::before{
  content:""; position:absolute; inset:0; background:var(--grad); transform:translateX(-100%)
}
.fr-progress-label{font-weight:700; font-size:14px}

.fr-checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.fr-checklist li{
  background:linear-gradient(180deg, #fff 0%, #fffdf7 100%);
  border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px;
}
.fr-checklist input[type="checkbox"]{transform:scale(1.15); margin-right:8px}

.fr-accordion{border:1px solid rgba(0,0,0,.1); border-radius:12px; margin:10px 0; background:#fff}
.fr-accordion > summary{
  cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; position:relative
}
.fr-accordion[open] > summary{border-bottom:1px solid rgba(0,0,0,.08)}
.fr-accordion-body{padding:12px 16px; color:#222}

.fr-summary{max-width:1000px; margin:18px auto; padding:16px 18px; background:var(--panel);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow)
}
#fr-copy-src{user-select:text}

.fr-foot{
  max-width:1000px; margin:18px auto; padding:16px 18px; color:#333; background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius)
}

/* Focus outlines for accessibility */
a:focus, button:focus, summary:focus{outline:3px solid var(--ring); outline-offset:2px}

/* Smooth anchors */
html{scroll-behavior:smooth}