/* ============================================================
   FIRED HEATER OPERATIONS · FIELD REFERENCE
   Shared Stylesheet v1.0
   ============================================================
   Import in every page <head>:
   <link rel="stylesheet" href="fired-heater-styles.css">
   Remove all inline <style> blocks after linking.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   Warm industrial palette — off-white page, charcoal structure,
   amber flame accent, red-orange for danger/warning states.
   ============================================================ */
:root {
  --page-bg:      #f7f4ef;
  --surface:      #ffffff;
  --surface-warm: #fdf9f3;
  --sidebar-bg:   #1c1f23;
  --sidebar-hover:#252a2f;
  --sidebar-active:#2e333a;

  --ink:   #1a1c1e;
  --ink-2: #3d4147;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;

  --amber:        #e07b2a;
  --amber-light:  #f59e0b;
  --amber-pale:   #fef3c7;
  --amber-border: #fcd34d;

  --red:       #c0392b;
  --red-pale:  #fef2f2;
  --red-border:#fca5a5;

  --green:        #1a7f5a;
  --green-pale:   #f0fdf4;
  --green-border: #86efac;

  --blue:        #1d4ed8;
  --blue-pale:   #eff6ff;
  --blue-border: #93c5fd;

  --line:        #e5e0d8;
  --line-strong: #c9c3b9;

  --sidebar-width: 280px;
  --header-h:      56px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #2e333a;
  z-index: 20;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #3d4147; border-radius: 2px; }

.sidebar-brand { padding: 20px 20px 16px; border-bottom: 1px solid #2e333a; flex-shrink: 0; }
.brand-eyebrow { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.brand-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #f0ece4; line-height: 1.2; }
.brand-sub { font-family: var(--font-mono); font-size: 10px; color: #6b7280; margin-top: 4px; letter-spacing: 0.05em; }

.nav-section { padding: 16px 0 8px; border-bottom: 1px solid #2e333a; }
.nav-section:last-child { border-bottom: none; }
.nav-section-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #4b5563; padding: 0 20px 8px; }

.nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 20px; text-decoration: none; color: #9ca3af; font-size: 13.5px; font-weight: 400; transition: background 0.12s, color 0.12s; border-left: 2px solid transparent; line-height: 1.4; }
.nav-link:hover { background: var(--sidebar-hover); color: #e5e0d8; border-left-color: #3d4147; }
.nav-link.active { background: var(--sidebar-active); color: #f0ece4; border-left-color: var(--amber); font-weight: 500; }
.nav-link .nav-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; opacity: 0.7; }
.nav-link.active .nav-icon { opacity: 1; }

.nav-sub { padding-left: 46px; font-size: 12.5px; color: #6b7280; border-left-color: transparent; }
.nav-sub:hover { color: #9ca3af; }
.nav-sub.active { color: #e5e0d8; border-left-color: var(--amber); }

.nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.badge-new { background: rgba(224,123,42,0.2); color: var(--amber); }
.badge-wip { background: rgba(107,114,128,0.2); color: #6b7280; }

.sidebar-footer { margin-top: auto; padding: 16px 20px; border-top: 1px solid #2e333a; font-family: var(--font-mono); font-size: 10px; color: #4b5563; flex-shrink: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.header { grid-area: header; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 36px; gap: 16px; position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm); }
.header-breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.header-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.header-breadcrumb a:hover { color: var(--amber); }
.header-breadcrumb .sep { color: var(--line-strong); }
.header-breadcrumb .current { color: var(--ink-2); font-weight: 500; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(224,123,42,0.1); color: var(--amber); border: 1px solid rgba(224,123,42,0.25); }
.header-search { font-family: var(--font-mono); font-size: 12px; width: 220px; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--page-bg); color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.header-search:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(224,123,42,0.15); background: var(--surface); }
.header-search::placeholder { color: var(--ink-4); }
.header-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main { grid-area: main; overflow-y: auto; padding: 48px 56px 80px; max-width: 960px; }

/* ============================================================
   CONTENT TYPOGRAPHY
   ============================================================ */
.section-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.content-h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; margin-top: 48px; }
.content-h2:first-child { margin-top: 0; }
.content-h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 10px; margin-top: 32px; }
.content-p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-bottom: 16px; max-width: 72ch; }
.content-p strong { color: var(--ink); font-weight: 600; }
.flame-rule { width: 48px; height: 3px; background: linear-gradient(90deg, var(--amber), var(--amber-light)); border-radius: 2px; margin-bottom: 32px; }

/* ============================================================
   PAGE NAV
   ============================================================ */
.page-nav { display: flex; justify-content: space-between; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.page-nav a { font-family: var(--font-mono); font-size: 12px; text-decoration: none; }
.page-nav .prev { color: var(--ink-3); }
.page-nav .next { color: var(--amber); }
.page-nav a:hover { text-decoration: underline; }

/* ============================================================
   CALLOUT BLOCKS
   ============================================================ */
.callout { display: flex; gap: 14px; padding: 16px 18px; border-radius: 6px; border-left: 3px solid; margin: 24px 0; font-size: 14px; line-height: 1.6; }
.callout-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.callout-body { color: var(--ink-2); }
.callout-body strong { color: var(--ink); font-weight: 600; }
.callout-title { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.callout.danger  { background: var(--red-pale);   border-color: var(--red);   } .callout.danger  .callout-title { color: var(--red);   }
.callout.warning { background: var(--amber-pale); border-color: var(--amber); } .callout.warning .callout-title { color: var(--amber); }
.callout.info    { background: var(--blue-pale);  border-color: var(--blue);  } .callout.info    .callout-title { color: var(--blue);  }
.callout.safe    { background: var(--green-pale); border-color: var(--green); } .callout.safe    .callout-title { color: var(--green); }

/* ============================================================
   PROCEDURE CHECKLIST
   ============================================================ */
.procedure { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 24px 0; box-shadow: var(--shadow-sm); }
.procedure-header { background: var(--sidebar-bg); padding: 16px 24px; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.procedure-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #f0ece4; }
.procedure-meta { font-family: var(--font-mono); font-size: 10px; color: #6b7280; display: flex; gap: 16px; }
.procedure-meta span strong { color: #9ca3af; font-weight: 600; }
.procedure-body { padding: 0; }

.proc-step { display: grid; grid-template-columns: 48px 1fr; border-bottom: 1px solid var(--line); transition: background 0.1s; }
.proc-step:last-child { border-bottom: none; }
.proc-step.completed { background: var(--green-pale); }
.proc-step.critical  { background: #fff8f8; }

.proc-step-num { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 18px 0; border-right: 1px solid var(--line); gap: 8px; }
.step-number { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-4); }
.step-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--line-strong); cursor: pointer; appearance: none; -webkit-appearance: none; background: white; position: relative; transition: all 0.15s; flex-shrink: 0; }
.step-checkbox:checked { background: var(--green); border-color: var(--green); }
.step-checkbox:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 8px; height: 12px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg); }
.step-checkbox:hover:not(:checked) { border-color: var(--amber); background: var(--amber-pale); }

.proc-step-content { padding: 16px 20px; }
.proc-step-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.proc-step-desc { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.proc-step-desc code { font-family: var(--font-mono); font-size: 12px; background: var(--page-bg); padding: 1px 5px; border-radius: 3px; color: var(--amber); border: 1px solid var(--line); }

.proc-step.critical .proc-step-title::before { content: '⚠ '; color: var(--red); }
.proc-step.critical .step-checkbox { border-color: var(--red-border); }
.proc-step.critical .step-checkbox:checked { background: var(--green); border-color: var(--green); }

.proc-reset { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--page-bg); }
.btn-reset { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3); background: none; border: 1px solid var(--line); padding: 6px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.btn-reset:hover { border-color: var(--red); color: var(--red); }

.progress-bar-wrap { margin-top: 8px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--green), #34d399); border-radius: 2px; transition: width 0.3s ease; width: 0%; }
.progress-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 4px; }

/* ============================================================
   TABLES
   ============================================================ */
.data-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 24px 0; box-shadow: var(--shadow-sm); }
.data-table-head { background: var(--sidebar-bg); padding: 14px 20px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; padding: 12px 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--surface-warm); font-weight: 600; }
tbody td { padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-warm); }
td.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--amber); }
td.critical-val { color: var(--red);   font-weight: 600; }
td.warn-val     { color: var(--amber); font-weight: 600; }
td.normal-val   { color: var(--green); font-weight: 600; }
td.yes { color: var(--green); font-weight: 600; }
td.no  { color: var(--ink-4); }
td.med { color: var(--amber); font-weight: 500; }

/* ============================================================
   GRAPHIC PLACEHOLDER
   ============================================================ */
.graphic-placeholder { border: 2px dashed var(--line-strong); border-radius: 8px; padding: 40px 24px; text-align: center; margin: 24px 0; background: var(--surface-warm); }
.graphic-placeholder-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; }
.graphic-placeholder-desc { font-size: 13px; color: var(--ink-4); max-width: 48ch; margin: 0 auto; line-height: 1.6; }

/* ============================================================
   CONCEPT CARDS  (combustion stats / key numbers)
   ============================================================ */
.concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.concept-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow-sm); }
.concept-card-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
.concept-card-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.concept-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* ============================================================
   TYPE DETAIL CARDS  (heater types page)
   ============================================================ */
.type-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 24px 0; box-shadow: var(--shadow-sm); }
.type-detail-header { background: var(--sidebar-bg); padding: 18px 24px; display: flex; align-items: baseline; gap: 16px; justify-content: space-between; }
.type-detail-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #f0ece4; }
.type-detail-tag { font-family: var(--font-mono); font-size: 10px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; }
.type-detail-body { padding: 24px; }
.type-detail-body p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 12px; max-width: 72ch; }
.type-detail-body p:last-child { margin-bottom: 0; }
.type-detail-body strong { color: var(--ink); font-weight: 600; }
.type-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.type-spec { background: var(--page-bg); border-radius: 6px; padding: 12px 14px; }
.type-spec-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.type-spec-value { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ============================================================
   INTRODUCTION PAGE COMPONENTS
   ============================================================ */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 24px 0; }
.type-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: var(--shadow-sm); }
.type-card-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.type-card-duty { font-family: var(--font-mono); font-size: 10px; color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.type-card-desc { font-size: 13px; line-height: 1.6; color: var(--ink-3); }

.hazard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 24px 0; }
.hazard-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--red); }
.hazard-card.amber-top { border-top-color: var(--amber); }
.hazard-card-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.hazard-card-desc { font-size: 13px; line-height: 1.55; color: var(--ink-3); }

.how-list { list-style: none; padding: 0; margin: 16px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.how-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.how-list .how-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--amber); background: rgba(224,123,42,0.08); border-radius: 4px; padding: 2px 0; text-align: center; }
.how-list strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   INDEX PAGE (hub) COMPONENTS
   ============================================================ */
.hub-header { margin-bottom: 48px; }
.hub-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.hub-title { font-family: var(--font-display); font-size: clamp(36px,5vw,52px); font-weight: 400; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; }
.hub-title em { font-style: italic; color: var(--amber); }
.hub-lede { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; margin-bottom: 28px; }
.hub-meta { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.hub-meta strong { color: var(--ink-3); font-weight: 600; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 48px; }
.module-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; position: relative; overflow: hidden; }
.module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line); transition: background 0.15s; }
.module-card:hover { border-color: var(--amber-border); box-shadow: var(--shadow); transform: translateY(-2px); }
.module-card:hover::before { background: var(--amber); }
.module-card.danger::before { background: var(--red); }
.module-card.danger:hover { border-color: var(--red-border); }
.module-num { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-4); text-transform: uppercase; }
.module-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
.module-desc { font-size: 13px; line-height: 1.6; color: var(--ink-3); flex: 1; }
.module-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.topic-pill { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-3); background: var(--page-bg); }
.module-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.module-status { display: flex; align-items: center; gap: 5px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-available { background: var(--green); }
.dot-wip       { background: var(--amber); }
.dot-planned   { background: var(--ink-4); }

/* ============================================================
   COMBUSTION PAGE COMPONENTS
   ============================================================ */
.equation-block { background: var(--sidebar-bg); border-radius: 8px; padding: 20px 24px; margin: 20px 0; text-align: center; }
.equation { font-family: var(--font-mono); font-size: 15px; color: #f0ece4; letter-spacing: 0.03em; line-height: 1.8; }
.equation .reactant     { color: #93c5fd; }
.equation .product-good { color: #86efac; }
.equation .product-bad  { color: #fca5a5; }
.equation .arrow { color: var(--amber); margin: 0 8px; }
.equation .plus  { color: var(--ink-4);  margin: 0 6px; }
.equation-caption { font-family: var(--font-mono); font-size: 10px; color: #6b7280; margin-top: 8px; text-align: center; }

.air-spectrum { margin: 24px 0; }
.air-spectrum-bar { height: 24px; border-radius: 6px; background: linear-gradient(90deg,#c0392b 0%,#e07b2a 30%,#1a7f5a 50%,#2e6ba0 75%,#4a5568 100%); margin-bottom: 8px; }
.air-spectrum-labels  { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.air-spectrum-markers { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); margin-bottom: 4px; padding: 0 2px; }

td.flame-blue   { background: #dbeafe; color: #1e40af; font-weight: 600; border-radius: 4px; }
td.flame-orange { background: #fff7ed; color: #c2410c; font-weight: 600; border-radius: 4px; }
td.flame-yellow { background: #fefce8; color: #92400e; font-weight: 600; border-radius: 4px; }
td.flame-black  { background: #1c1f23; color: #f9fafb; font-weight: 600; border-radius: 4px; }
td.flame-lazy   { background: #fef3c7; color: #92400e; font-weight: 600; border-radius: 4px; }

/* ============================================================
   SHARED JS CHECKLIST LOGIC — paste into every page <script>
   ============================================================
   function updateProgress(procId, barId) {
     const proc = document.getElementById(procId);
     const bar  = document.getElementById(barId);
     if (!proc || !bar) return;
     const boxes = proc.querySelectorAll('.step-checkbox');
     const done  = proc.querySelectorAll('.step-checkbox:checked').length;
     bar.style.width = (done / boxes.length * 100) + '%';
     proc.querySelectorAll('.proc-step').forEach(step => {
       const cb = step.querySelector('.step-checkbox');
       step.classList.toggle('completed', cb && cb.checked);
     });
   }
   function resetProcedure(procId, barId) {
     const proc = document.getElementById(procId);
     const bar  = document.getElementById(barId);
     if (!proc || !bar) return;
     proc.querySelectorAll('.step-checkbox').forEach(cb => cb.checked = false);
     proc.querySelectorAll('.proc-step').forEach(step => step.classList.remove('completed'));
     bar.style.width = '0%';
   }
   (function() {
     const page = window.location.pathname.split('/').pop();
     document.querySelectorAll('.nav-link').forEach(link => {
       link.classList.toggle('active', link.getAttribute('href') === page);
     });
   })();
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile nav toggle button — hidden at desktop */
.nav-toggle-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--line-strong);
  border-radius: 6px; cursor: pointer; color: var(--ink-2);
  flex-shrink: 0; padding: 0;
}
.nav-toggle-btn:hover { border-color: var(--amber); color: var(--amber); }
.nav-toggle-btn svg { pointer-events: none; }

/* Mobile sidebar drawer */
.sidebar.sidebar-open {
  display: flex !important;
  position: fixed; inset: 0;
  z-index: 50; width: var(--sidebar-width);
  box-shadow: 4px 0 32px rgba(0,0,0,0.4);
}
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 49;
  background: rgba(0,0,0,0.5);
}
.sidebar-backdrop.visible { display: block; }

@media (max-width: 900px) {
  :root { --sidebar-width: 260px; }
  .main { padding: 32px 28px 60px; }
  .header { padding: 0 20px; gap: 10px; }
  .header-search { width: 160px; font-size: 11px; }
}
@media (max-width: 680px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas: "header" "main";
  }
  .sidebar { display: none; }
  .main { padding: 24px 16px 60px; max-width: 100%; }
  .module-grid { grid-template-columns: 1fr; gap: 12px; }
  .nav-toggle-btn { display: flex; }
  .header-search { width: 130px; }
  .header-breadcrumb { display: none; }
  .header-tag { display: none; }
  /* Push search + toggle to the right edge */
  .header { gap: 8px; }
}
@media (max-width: 480px) {
  :root { --header-h: 52px; }
  .header { padding: 0 14px; gap: 8px; }
  .header-search { display: none; }
  .main { padding: 20px 14px 48px; }
  /* Hub page */
  .hub-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .hub-lede { font-size: 14px; }
  .hub-meta { flex-wrap: wrap; gap: 4px; font-size: 12px; }
  .module-card { padding: 18px; }
  /* Content pages */
  .section-header h1 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .content-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .info-grid, .warning-grid, .step-grid { grid-template-columns: 1fr !important; }
  /* Tables scroll horizontally */
  .data-table-wrap, table { overflow-x: auto; display: block; width: 100%; }
}

/* ============================================================
   DARK MODE TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--amber); color: var(--amber); }

.icon-sun  { display: none; }
.icon-moon { display: inline; }
html[data-theme="dark"] .icon-sun  { display: inline; }
html[data-theme="dark"] .icon-moon { display: none; }

/* ============================================================
   DARK MODE OVERRIDES  (html[data-theme="dark"])
   Toggle via localStorage key: fh-theme = "light" | "dark"
   ============================================================ */
html[data-theme="dark"] {
  --page-bg:      #111316;
  --surface:      #1a1d21;
  --surface-warm: #1c2026;

  --sidebar-bg:    #0d0f11;
  --sidebar-hover: #1a1d21;
  --sidebar-active:#222629;

  --ink:   #f0ece4;
  --ink-2: #c9c3b9;
  --ink-3: #9ca3af;
  --ink-4: #6b7280;

  --amber-pale:   rgba(224,123,42,0.14);
  --amber-border: rgba(252,211,77,0.25);

  --red-pale:    rgba(192,57,43,0.14);
  --red-border:  rgba(252,165,165,0.25);

  --green-pale:   rgba(26,127,90,0.14);
  --green-border: rgba(134,239,172,0.25);

  --blue-pale:   rgba(29,78,216,0.14);
  --blue-border: rgba(147,197,253,0.25);

  --line:        #272b30;
  --line-strong: #3a3f47;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* Component overrides that can't use variables */
html[data-theme="dark"] .step-checkbox       { background: #1a1d21; border-color: var(--line-strong); }
html[data-theme="dark"] .proc-step.critical  { background: rgba(192,57,43,0.08); }
html[data-theme="dark"] .proc-step.completed { background: rgba(26,127,90,0.08); }
html[data-theme="dark"] td.flame-blue   { background: rgba(30,64,175,0.25);  color: #93c5fd; }
html[data-theme="dark"] td.flame-orange { background: rgba(194,65,12,0.25);  color: #fdba74; }
html[data-theme="dark"] td.flame-yellow { background: rgba(146,64,14,0.25);  color: #fde68a; }
html[data-theme="dark"] td.flame-black  { background: #080a0c; color: #f9fafb; }
html[data-theme="dark"] td.flame-lazy   { background: rgba(146,64,14,0.25);  color: #fde68a; }
