/* Smallfire Lab design system v1 (2026-10-30). One stylesheet for the site and apps.
   Header (.sf-header) and footer (.sf-footer) work on any page. Everything else
   (base type, dark theme) applies only inside <body class="sf">, so older pages with
   their own inline styles keep their look until they are rebuilt. */

:root {
  --ember: #D9480F; --ember-text: #B93A08; --ember-hover: #9A3006; --ember-soft: #FFF1E8;
  --ink: #1F2328; --muted: #5B6470; --paper: #FFFDFB; --card: #FFFFFF; --line: #E7E2DC;
  --ok: #1E7A46; --warn: #A35300; --bad: #C62828; --ctl-line: #8A9099;
  --ok-soft: #E8F5EE; --warn-soft: #FFF4E5; --bad-soft: #FDECEC;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 12px; --r-ctl: 10px;
  --wide: 1100px; --read: 720px;
  --focus: 0 0 0 3px rgba(217, 72, 15, .35);
}
@media (prefers-color-scheme: dark) {
  body.sf {
    --ember: #FF8A4C; --ember-text: #FF8A4C; --ember-hover: #FFA472; --ember-soft: #3A1F12;
    --ink: #E9EAEC; --muted: #A3AAB5; --paper: #14161A; --card: #1C1F24; --line: #353B43;
    --ok: #4CC38A; --warn: #F0A04B; --bad: #FF6B6B; --ctl-line: #6B7380;
    --ok-soft: #12291D; --warn-soft: #2E2210; --bad-soft: #301617;
    --focus: 0 0 0 3px rgba(255, 138, 76, .45);
    color-scheme: dark;
  }
}

/* ---------- Base (opt-in: <body class="sf">) ---------- */
body.sf { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--font); -webkit-text-size-adjust: 100%; }
body.sf *, body.sf *::before, body.sf *::after { box-sizing: border-box; }
body.sf h1, body.sf h2, body.sf h3 { line-height: 1.2; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; }
body.sf h1 { font-size: 40px; }
body.sf h2 { font-size: 28px; margin-top: 8px; }
body.sf h3 { font-size: 19px; }
body.sf p { margin: 0 0 16px; }
body.sf a { color: var(--ember-text); text-underline-offset: 2px; }
body.sf a:hover { color: var(--ember-hover); }
body.sf img, body.sf svg { max-width: 100%; }
@media (max-width: 640px) { body.sf h1 { font-size: 30px; } body.sf h2 { font-size: 24px; } }

.sf-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.sf-read { max-width: var(--read); }
.sf-section { padding-top: 56px; padding-bottom: 56px; }
.sf-section + .sf-section { border-top: 1px solid var(--line); }
.sf-lead { font-size: 20px; color: var(--muted); }
.sf-muted { color: var(--muted); }
.sf-small { font-size: 15px; }
.sf-center { text-align: center; }

/* ---------- Header (works on any page) ---------- */
.sf-header { font: 16px/1.4 var(--font); border-bottom: 1px solid var(--line, #E7E2DC); background: var(--paper); margin-bottom: 24px; }
.sf-header .sf-bar { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; max-width: var(--wide); margin: 0 auto; padding: 12px 24px; }
.sf-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink) !important; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; margin-right: auto; }
.sf-logo svg { width: 28px; height: 28px; flex: none; }
.sf-logo .sf-flame-in { fill: var(--ink); }
.sf-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.sf-header .sf-nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.sf-header .sf-nav a:hover { color: var(--ember-text); text-decoration: underline; }
.sf-header .sf-nav a[aria-current="page"] { color: var(--ember-text); font-weight: 600; }
.sf-header .sf-header-cta { min-height: 40px; padding: 8px 16px; font-size: 16px; }
@media (max-width: 640px) {
  .sf-header .sf-bar { padding: 10px 16px; gap: 4px 12px; }
  .sf-header .sf-header-cta { order: 2; min-height: 40px; padding: 6px 12px; font-size: 15px; }
  .sf-nav { order: 3; width: 100%; gap: 0 20px; font-size: 15px; }
  .sf-header .sf-nav a { padding: 10px 0; }
  .sf-card-action > .sf-btn { align-self: stretch; }
}
/* Older pages keep their own narrow body; stretch the bar to that column. */
body:not(.sf) .sf-header .sf-bar, body:not(.sf) .sf-footer .sf-cols { padding-left: 0; padding-right: 0; }

/* ---------- Footer (works on any page) ---------- */
.sf-footer { font: 15px/1.6 var(--font); color: var(--muted); border-top: 1px solid var(--line); margin-top: 48px; background: var(--paper); }
.sf-footer .sf-cols { max-width: var(--wide); margin: 0 auto; padding: 24px 24px 32px; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }
.sf-footer p { margin: 0 0 8px; }
.sf-footer a, body.sf .sf-footer a { color: var(--ink); }
.sf-footer a { text-decoration: none; }
.sf-footer a:hover { color: var(--ember-text); text-decoration: underline; }
.sf-footer .sf-disclose { color: var(--ink); }
.sf-footer .sf-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sf-footer address { font-style: normal; }

/* ---------- Buttons ---------- */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--r-ctl); border: 2px solid var(--ember-text); background: var(--ember-text); color: #fff; font: 600 17px/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.sf-btn:hover { background: var(--ember-hover); border-color: var(--ember-hover); color: #fff; }
.sf-btn:focus-visible, .sf-input:focus-visible, .sf-select:focus-visible, .sf a:focus-visible, .sf-header a:focus-visible, .sf-footer a:focus-visible, .sf-faq summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sf-btn:focus-visible { border-radius: var(--r-ctl); }
.sf-btn-secondary { background: transparent; color: var(--ember-text); }
.sf-btn-secondary:hover { background: var(--ember-soft); color: var(--ember-hover); }
body.sf .sf-btn, body.sf .sf-btn:hover { color: #fff; }
body.sf .sf-btn-secondary, body.sf .sf-btn-secondary:hover { color: var(--ember-text); }
@media (prefers-color-scheme: dark) { body.sf .sf-btn, body.sf .sf-btn:hover { color: #14161A; } body.sf .sf-btn-secondary, body.sf .sf-btn-secondary:hover { color: var(--ember-text); } }

/* ---------- Forms ---------- */
.sf-field { margin: 0 0 16px; }
.sf-label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.sf-hint { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.sf-input, .sf-select, .sf-textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ctl-line); border-radius: var(--r-ctl); background: var(--card); color: var(--ink); font: 17px/1.4 var(--font); }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus { border-color: var(--ember); }
.sf-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-form-row .sf-input { flex: 1 1 220px; width: auto; }

/* ---------- Cards, grids, steps ---------- */
.sf-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.sf-card > :last-child { margin-bottom: 0; }
.sf-card-action { display: flex; flex-direction: column; }
.sf-card-action > .sf-btn { margin-top: auto; align-self: flex-start; }
.sf-lead + .sf-grid { margin-top: 32px; }
.sf-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sf-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--ember-soft); color: var(--ember); display: grid; place-items: center; margin-bottom: 16px; }
.sf-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-steps { counter-reset: sf-step; list-style: none; padding: 0; margin: 0; }
.sf-steps > li { counter-increment: sf-step; position: relative; padding-left: 52px; margin-bottom: 24px; }
.sf-steps > li::before { content: counter(sf-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ember-soft); color: var(--ember); font-weight: 700; display: grid; place-items: center; }

/* ---------- Status line, notice, badges ---------- */
.sf-status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--ember-soft); color: var(--ink); font-size: 16px; }
.sf-status::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--ember); }
.sf-notice { border-left: 4px solid var(--line); background: var(--card); padding: 12px 16px; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; color: var(--ink); }
.sf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; }
.sf-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sf-badge-ok { color: var(--ok); background: var(--ok-soft); }
.sf-badge-warn { color: var(--warn); background: var(--warn-soft); }
.sf-badge-bad { color: var(--bad); background: var(--bad-soft); }
.sf-badge-muted { color: var(--muted); background: transparent; }

/* ---------- Tables ---------- */
.sf-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.sf-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.sf-table th, .sf-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sf-table th { font-size: 14px; color: var(--muted); font-weight: 600; }
.sf-table tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.sf-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.sf-faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after { content: "+"; color: var(--ember); font-weight: 700; }
.sf-faq details[open] summary::after { content: "\2212"; }
.sf-faq details > :not(summary) { margin: 12px 0 0; color: var(--ink); }

/* ---------- Hero ---------- */
.sf-hero { padding-top: 48px; padding-bottom: 56px; }
.sf-hero-grid { display: grid; gap: 40px; grid-template-columns: 1.05fr 1fr; align-items: center; }
@media (max-width: 860px) { .sf-hero { padding-top: 24px; padding-bottom: 40px; } .sf-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.sf-figure { margin: 0; }
.sf-figure figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ---------- Utilities ---------- */
.sf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Header and footer on older pages (no body.sf): no tint, no CTA (column too narrow), sane box sizing. */
.sf-header, .sf-header *, .sf-footer, .sf-footer * { box-sizing: border-box; }
body:not(.sf) .sf-header, body:not(.sf) .sf-footer { background: transparent; }
body:not(.sf) .sf-header .sf-header-cta { display: none; }