/* ============================================================
   handbook.css — SRT Engineering Handbook platform styles.
   Link AFTER styles.css and nav-v2.css.
   All new classes prefixed hb- to avoid collisions with
   existing cs- (case study) or site-wide classes.
   All colors/fonts reference existing site CSS variables —
   no new hardcoded palette.
   ============================================================ */

/* ---------- Shared layout ---------- */
.hb-shell{ max-width:1200px; margin:0 auto; padding:0 24px; }
.hb-section{ padding:56px 0; }
.hb-section-tight{ padding:32px 0; }
.hb-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--orange); text-transform:uppercase; margin-bottom:10px; display:block; }
.hb-h2{ font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--navy); margin:0 0 8px; }
.hb-lede{ color:var(--gray); font-size:15px; max-width:640px; margin:0 0 28px; }

/* ---------- Handbook hero (landing) ---------- */
.hb-hero{ background:var(--navy-deep); color:#fff; padding:64px 0 0; position:relative; overflow:hidden; }
.hb-hero::before{ content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px; }
.hb-hero-inner{ position:relative; padding-bottom:40px; }
.hb-hero-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.08em; color:var(--orange); text-transform:uppercase; margin-bottom:14px; }
.hb-hero h1{ font-family:var(--font-display); font-weight:700; font-size:36px; margin:0 0 14px; max-width:720px; }
.hb-hero p{ color:#B7C2CE; font-size:16px; max-width:600px; margin:0 0 28px; }
.hb-stats-strip{ display:flex; gap:32px; flex-wrap:wrap; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.12); margin-top:8px; }
.hb-stat{ font-size:13px; color:#B7C2CE; }
.hb-stat strong{ display:block; font-size:20px; font-weight:700; color:#fff; }

/* ---------- Search bar ---------- */
.hb-search-wrap{ position:relative; max-width:620px; }
.hb-search-bar{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:10px; padding:14px 18px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.hb-search-bar svg{ color:var(--gray-light); flex:0 0 auto; }
.hb-search-bar input{ flex:1; border:none; outline:none; font-size:15px; color:var(--navy); font-family:inherit; }
.hb-search-bar input::placeholder{ color:var(--gray-light); }
.hb-search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.18); border:1px solid var(--line); max-height:360px; overflow-y:auto;
  display:none; z-index:20;
}
.hb-search-results.open{ display:block; }
.hb-search-result-item{ display:block; padding:12px 18px; text-decoration:none; border-bottom:1px solid var(--line); }
.hb-search-result-item:last-child{ border-bottom:none; }
.hb-search-result-item:hover{ background:var(--bg); }
.hb-sr-title{ display:block; font-size:14px; font-weight:700; color:var(--navy); }
.hb-sr-meta{ display:block; font-size:11.5px; color:var(--gray-light); margin-top:2px; }
.hb-search-empty{ padding:18px; font-size:13px; color:var(--gray-light); text-align:center; }
.hb-search-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.hb-filter-chip{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:16px; cursor:pointer;
  transition:background .15s ease;
}
.hb-filter-chip:hover, .hb-filter-chip.active{ background:var(--orange); border-color:var(--orange); }

/* ---------- Volume grid ---------- */
.hb-volume-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.hb-volume-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:22px; text-decoration:none; transition:border-color .15s ease, transform .15s ease;
}
.hb-volume-card:hover{ border-color:var(--orange); transform:translateY(-2px); }
.hb-volume-num{ font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--orange); margin-bottom:8px; }
.hb-volume-title{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--navy); margin-bottom:8px; }
.hb-volume-desc{ font-size:13px; color:var(--gray); margin-bottom:16px; flex:1; }
.hb-volume-meta{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--gray-light); border-top:1px solid var(--line); padding-top:12px; }
.hb-status-badge{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:12px; letter-spacing:.02em; }
.hb-status-live{ background:#E6F4EC; color:#1A8A4A; }
.hb-status-dev{ background:var(--bg); color:var(--gray-light); }

/* ---------- Featured / Popular / Latest strips ---------- */
.hb-card-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hb-mini-card{ display:block; border:1px solid var(--line); border-radius:8px; padding:16px; text-decoration:none; transition:border-color .15s ease; }
.hb-mini-card:hover{ border-color:var(--orange); }
.hb-mini-tag{ font-size:10px; font-weight:700; color:var(--orange); letter-spacing:.03em; display:block; margin-bottom:6px; }
.hb-mini-title{ font-size:13.5px; font-weight:700; color:var(--navy); line-height:1.4; }

/* ---------- Learning Path ---------- */
.hb-path{ display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line); margin-left:14px; }
.hb-path-step{ position:relative; padding:0 0 28px 28px; }
.hb-path-step:last-child{ padding-bottom:0; }
.hb-path-step::before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--orange); border:3px solid #fff; box-shadow:0 0 0 2px var(--orange); }
.hb-path-num{ font-size:11px; font-weight:700; color:var(--gray-light); text-transform:uppercase; letter-spacing:.04em; }
.hb-path-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); margin:4px 0 4px; }
.hb-path-title a{ color:inherit; text-decoration:none; }
.hb-path-title a:hover{ color:var(--orange); }
.hb-path-desc{ font-size:13px; color:var(--gray); }

/* ---------- Quick Access ---------- */
.hb-quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hb-quick-item{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px; border:1px solid var(--line); border-radius:8px; text-decoration:none; }
.hb-quick-item:hover{ border-color:var(--orange); }
.hb-quick-icon{ width:34px; height:34px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.hb-quick-label{ font-size:13.5px; font-weight:700; color:var(--navy); }

/* ---------- Volume page: sub-nav / category pills ---------- */
.hb-volume-subnav{ position:sticky; top:var(--hdr-h-shrunk,72px); z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.hb-volume-subnav-inner{ display:flex; gap:4px; overflow-x:auto; padding:12px 0; }
.hb-cat-pill{ flex:0 0 auto; font-size:13px; font-weight:600; color:var(--gray); background:var(--bg); padding:8px 16px; border-radius:20px; text-decoration:none; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.hb-cat-pill:hover{ background:var(--line); }
.hb-cat-pill.active{ background:var(--navy); color:#fff; }

/* ---------- Article list within a category ---------- */
.hb-category-block{ margin-bottom:44px; scroll-margin-top:130px; }
.hb-category-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; border-bottom:2px solid var(--navy); padding-bottom:10px; }
.hb-category-title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy); }
.hb-category-count{ font-size:12.5px; color:var(--gray-light); }
.hb-article-list{ display:flex; flex-direction:column; gap:2px; }
.hb-article-row{ display:flex; align-items:center; gap:16px; padding:16px 14px; border-radius:8px; text-decoration:none; transition:background .15s ease; }
.hb-article-row:hover{ background:var(--bg); }
.hb-article-row-main{ flex:1; min-width:0; }
.hb-article-row-title{ font-size:14.5px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.hb-article-row-summary{ font-size:13px; color:var(--gray); }
.hb-article-row-meta{ display:flex; gap:10px; flex:0 0 auto; align-items:center; }

/* ---------- Tag badges & difficulty ---------- */
.hb-tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:10px; background:var(--bg); color:var(--gray); white-space:nowrap; }
.hb-tag-discipline{ background:#EAF1FB; color:#1E4E8C; }
.hb-tag-failure{ background:#FDECEA; color:#B23A2E; }
.hb-difficulty{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; }
.hb-difficulty-foundational{ background:#E6F4EC; color:#1A8A4A; }
.hb-difficulty-intermediate{ background:#FFF3E0; color:#B0650F; }
.hb-difficulty-advanced{ background:#FDECEA; color:#B23A2E; }
.hb-reading-time{ font-size:12px; color:var(--gray-light); white-space:nowrap; }

/* ---------- Related Volumes strip ---------- */
.hb-related-volumes{ display:flex; gap:14px; flex-wrap:wrap; }
.hb-related-volume-chip{ display:flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-size:13px; font-weight:600; color:var(--navy); }
.hb-related-volume-chip:hover{ border-color:var(--orange); }

/* ============================================================
   ARTICLE TEMPLATE
   ============================================================ */
.hb-article-shell{ max-width:1180px; margin:0 auto; padding:0 24px; display:flex; gap:48px; align-items:flex-start; }
.hb-article-main{ flex:1; min-width:0; max-width:760px; }
.hb-article-rail{ flex:0 0 260px; position:sticky; top:calc(var(--hdr-h-shrunk,72px) + 24px); }

.hb-article-hero{ background:var(--navy-deep); color:#fff; padding:40px 0 32px; }
.hb-article-hero-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.hb-article-hero h1{ font-family:var(--font-display); font-weight:700; font-size:30px; margin:0 0 12px; max-width:760px; }
.hb-article-byline{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#B7C2CE; }

/* Engineering Decision Panel — the signature component */
.hb-decision-panel{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:10px;
  padding:24px 26px; margin:-56px 0 40px; position:relative; box-shadow:0 16px 40px rgba(19,41,75,.10);
  max-width:760px;
}
.hb-decision-panel-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.hb-decision-panel-title svg{ color:var(--orange); }
.hb-decision-panel-note{ font-size:11.5px; color:var(--gray-light); margin:0 0 18px; font-style:italic; }
.hb-decision-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 24px; }
.hb-decision-item{ }
.hb-decision-label{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:4px; }
.hb-decision-value{ font-size:14px; font-weight:700; color:var(--navy); }
.hb-decision-value.hb-placeholder{ color:var(--gray-light); font-weight:600; font-style:italic; }
.hb-decision-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.hb-decision-cta{ font-size:12.5px; font-weight:700; padding:9px 16px; border-radius:6px; text-decoration:none; }
.hb-decision-cta-primary{ background:var(--orange); color:#fff; }
.hb-decision-cta-secondary{ background:var(--bg); color:var(--navy); }

.hb-article-main h2{ font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--navy); margin:38px 0 14px; scroll-margin-top:100px; }
.hb-article-main p{ font-size:15.5px; color:var(--gray); margin-bottom:16px; line-height:1.7; }
.hb-placeholder-block{ background:var(--bg); border:1px dashed var(--line); border-radius:8px; padding:16px 18px; font-size:13px; color:var(--gray-light); font-style:italic; margin-bottom:16px; }

.hb-checklist{ list-style:none; margin:0 0 16px; padding:0; }
.hb-checklist li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--navy); }
.hb-checklist li::before{ content:'☐'; color:var(--orange); flex:0 0 auto; }

.hb-callout{ border-left:3px solid var(--orange); background:var(--bg); border-radius:6px; padding:16px 18px; margin:16px 0; }
.hb-callout-title{ font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--navy); text-transform:uppercase; margin-bottom:6px; }
.hb-callout-safety{ border-left-color:#B23A2E; background:#FDECEA; }
.hb-callout-safety .hb-callout-title{ color:#B23A2E; }

.hb-ask-ai-box{ background:var(--navy); color:#fff; border-radius:10px; padding:22px 24px; margin:32px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hb-ask-ai-text{ flex:1; min-width:220px; }
.hb-ask-ai-title{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 4px; }
.hb-ask-ai-desc{ font-size:13px; color:#B7C2CE; margin:0; }
.hb-ask-ai-btn{ background:var(--orange); color:#fff; font-size:13px; font-weight:700; padding:11px 20px; border-radius:6px; border:none; cursor:pointer; white-space:nowrap; }

.hb-relation-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:16px 0 32px; }
.hb-relation-card{ border:1px solid var(--line); border-radius:8px; padding:16px; }
.hb-relation-card-label{ font-size:10.5px; font-weight:700; color:var(--gray-light); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }
.hb-relation-card a{ display:block; font-size:13.5px; font-weight:700; color:var(--navy); text-decoration:none; padding:4px 0; }
.hb-relation-card a:hover{ color:var(--orange); }
.hb-relation-card-empty{ font-size:12.5px; color:var(--gray-light); font-style:italic; }

.hb-prev-next{ display:flex; justify-content:space-between; gap:16px; margin:40px 0; padding-top:24px; border-top:1px solid var(--line); }
.hb-prev-next a{ text-decoration:none; max-width:45%; }
.hb-prev-next .dir{ font-size:11px; color:var(--gray-light); text-transform:uppercase; letter-spacing:.03em; }
.hb-prev-next .ttl{ font-size:14px; font-weight:700; color:var(--navy); }
.hb-prev-next .next{ text-align:right; margin-left:auto; }

/* Sticky right rail: Table of Contents + meta */
.hb-toc-box{ border:1px solid var(--line); border-radius:8px; padding:18px; margin-bottom:20px; }
.hb-toc-title{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:10px; }
.hb-toc-list{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line); }
.hb-toc-list a{ display:block; font-size:13px; color:var(--gray); text-decoration:none; padding:6px 0 6px 14px; border-left:2px solid transparent; margin-left:-2px; }
.hb-toc-list a:hover{ color:var(--navy); }
.hb-toc-list a.active{ color:var(--orange); border-left-color:var(--orange); font-weight:700; }
.hb-meta-box{ border:1px solid var(--line); border-radius:8px; padding:18px; font-size:13px; color:var(--gray); }
.hb-meta-box div{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.hb-meta-box div:last-child{ border-bottom:none; }

/* Sidebar: reusable card blocks below the ToC/meta */
.hb-side-card{ border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
.hb-side-card-title{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:10px; }
.hb-side-actions{ display:flex; gap:8px; }
.hb-side-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--navy); font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none; }
.hb-side-btn:hover{ border-color:var(--orange); }
.hb-side-ask{ background:var(--navy); color:#fff; border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.hb-side-ask p{ font-size:12.5px; color:#B7C2CE; margin:0 0 10px; }
.hb-side-ask button{ width:100%; background:var(--orange); color:#fff; border:none; border-radius:6px; padding:9px; font-size:12.5px; font-weight:700; cursor:pointer; }
.hb-side-cs{ display:block; text-decoration:none; }
.hb-side-cs-label{ font-size:10.5px; font-weight:700; color:var(--gray-light); text-transform:uppercase; display:block; margin-bottom:4px; }
.hb-side-cs-title{ font-size:13px; font-weight:700; color:var(--navy); }
.hb-quick-facts div{ display:flex; justify-content:space-between; padding:5px 0; font-size:12.5px; }
.hb-quick-facts span:first-child{ color:var(--gray-light); }
.hb-quick-facts span:last-child{ color:var(--navy); font-weight:700; text-align:right; }

/* Illustration placeholder spec block (Enhancement Review deliverable) */
.hb-illus-spec{ border:1px dashed var(--line); border-radius:8px; padding:14px 16px; margin:14px 0; background:var(--bg); }
.hb-illus-spec-title{ font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.hb-illus-spec dl{ display:grid; grid-template-columns:110px 1fr; gap:4px 10px; margin:0; font-size:12px; color:var(--gray); }
.hb-illus-spec dt{ font-weight:700; color:var(--gray-light); }

/* Toolkit section */
.hb-toolkit-card{ border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:18px; }
.hb-toolkit-head{ background:var(--bg); padding:12px 16px; font-weight:700; font-size:13.5px; color:var(--navy); border-bottom:1px solid var(--line); }
.hb-toolkit-body{ padding:16px; }
.hb-toolkit-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.hb-toolkit-table th, .hb-toolkit-table td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
.hb-toolkit-table th{ background:var(--bg); font-size:11px; text-transform:uppercase; letter-spacing:.02em; color:var(--gray-light); }

@media print{
  .hb-side-actions, .hb-side-ask{ display:none !important; }
}

/* ---------- Decision flow diagram (reused pattern from case studies) ---------- */
.hb-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:20px 0 24px; padding:20px; background:var(--bg); border-radius:8px; }
.hb-flow-step{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--navy); white-space:nowrap; }
.hb-flow-arrow{ color:var(--orange); font-weight:700; font-size:14px; }

/* ---------- Coming Soon (Future-Ready) components ---------- */
.hb-comingsoon-card{ border:1px solid var(--line); border-radius:10px; padding:24px; background:linear-gradient(180deg,#fff,var(--bg)); position:relative; }
.hb-comingsoon-badge{ position:absolute; top:16px; right:16px; font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); background:#fff; border:1px solid var(--line); padding:4px 10px; border-radius:12px; }
.hb-comingsoon-icon{ width:40px; height:40px; border-radius:10px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--gray-light); margin-bottom:14px; }
.hb-comingsoon-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); margin-bottom:6px; }
.hb-comingsoon-desc{ font-size:12.5px; color:var(--gray-light); }

/* ============================================================
   ENGINEERING STANDARDS REFERENCE — extends the Handbook design
   system above. New classes prefixed hb-std- to stay distinct
   within this shared file. No new stylesheet is created, per
   the "extend handbook.css, don't duplicate" requirement.
   ============================================================ */

/* Mandatory disclaimer banner — deliberately distinct from the
   orange "tip" callout so it reads as a standing legal/scope
   notice, not editorial content. */
.hb-std-disclaimer{
  display:flex; gap:12px; align-items:flex-start; background:#F4F6F8; border:1px solid var(--line);
  border-radius:8px; padding:16px 18px; margin:20px 0 32px; font-size:13px; color:var(--gray); line-height:1.6;
}
.hb-std-disclaimer svg{ flex:0 0 auto; color:var(--gray-light); margin-top:2px; }
.hb-std-disclaimer strong{ color:var(--navy); }

/* Organization cards (Landing Page grid) */
.hb-std-org-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hb-std-org-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:26px 18px; border:1px solid var(--line); border-radius:10px; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.hb-std-org-card:hover{ border-color:var(--orange); transform:translateY(-2px); }
.hb-std-org-mark{ width:52px; height:52px; border-radius:10px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); }
.hb-std-org-name{ font-weight:700; font-size:14px; color:var(--navy); }
.hb-std-org-count{ font-size:11.5px; color:var(--gray-light); }

/* Facet tiles (Browse by Discipline / Machine Type / Industry / Activity) */
.hb-std-facet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hb-std-facet-tile{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-size:13px; font-weight:700; color:var(--navy); }
.hb-std-facet-tile:hover{ border-color:var(--orange); }
.hb-std-facet-tile span:last-child{ font-size:11.5px; font-weight:600; color:var(--gray-light); }

/* Engineering Context component — "Used In" machine grid */
.hb-std-context-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:16px 0 28px; }
.hb-std-context-item{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); }
.hb-std-context-icon{ width:32px; height:32px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.hb-std-context-label{ font-size:12px; font-weight:600; color:var(--navy); text-align:center; }

/* Engineering Lifecycle component — horizontal stage diagram with highlightable stages */
.hb-std-lifecycle{ display:flex; flex-wrap:wrap; gap:0; margin:16px 0 28px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.hb-std-lifecycle-stage{ flex:1 1 100px; text-align:center; padding:14px 8px; font-size:11.5px; font-weight:700; color:var(--gray-light); background:#fff; border-right:1px solid var(--line); position:relative; }
.hb-std-lifecycle-stage:last-child{ border-right:none; }
.hb-std-lifecycle-stage.hb-std-stage-active{ background:var(--navy); color:#fff; }
.hb-std-lifecycle-note{ font-size:11.5px; color:var(--gray-light); font-style:italic; margin-top:8px; }

/* Coming-with-release notice (landing page: Featured/Recent/Popular before Release 1 ships) */
.hb-std-release-notice{ border:1px dashed var(--line); border-radius:10px; padding:28px; text-align:center; background:var(--bg); }
.hb-std-release-notice-title{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--navy); margin-bottom:8px; }
.hb-std-release-notice-desc{ font-size:13.5px; color:var(--gray-light); max-width:480px; margin:0 auto; }

@media (max-width:1024px){
  .hb-std-org-grid, .hb-std-facet-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .hb-std-org-grid, .hb-std-facet-grid{ grid-template-columns:1fr; }
  .hb-std-lifecycle{ flex-direction:column; }
  .hb-std-lifecycle-stage{ border-right:none; border-bottom:1px solid var(--line); }
  .hb-std-lifecycle-stage:last-child{ border-bottom:none; }
}

/* ============================================================
   ENGINEERING KNOWLEDGE PACKAGES — extends the Handbook/Standards
   design system above. New classes prefixed hb-kp- to stay
   distinct within this shared file.
   ============================================================ */

/* Package hero + completeness meta */
.hb-kp-hero{ background:var(--navy-deep); color:#fff; padding:56px 0 40px; position:relative; overflow:hidden; }
.hb-kp-hero::before{ content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px; }
.hb-kp-hero-inner{ position:relative; }
.hb-kp-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 12px; border-radius:12px; background:rgba(240,124,29,.15); color:var(--orange); margin-bottom:14px; }
.hb-kp-audience{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.hb-kp-audience span{ font-size:11.5px; font-weight:600; color:#B7C2CE; background:rgba(255,255,255,.08); padding:5px 12px; border-radius:14px; }

/* Section: reused-content strip (Handbook / Standards cards inside the package) */
.hb-kp-reuse-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.hb-kp-reuse-card{ display:flex; align-items:flex-start; gap:14px; border:1px solid var(--line); border-radius:10px; padding:18px; text-decoration:none; transition:border-color .15s ease; }
.hb-kp-reuse-card:hover{ border-color:var(--orange); }
.hb-kp-reuse-icon{ width:38px; height:38px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--orange); flex:0 0 auto; }
.hb-kp-reuse-label{ font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:3px; }
.hb-kp-reuse-title{ font-size:14px; font-weight:700; color:var(--navy); line-height:1.35; }
.hb-kp-reuse-note{ font-size:11.5px; color:var(--gray-light); margin-top:4px; }

/* Knowledge Graph — hub-and-spoke, mobile-safe (no absolute circular positioning) */
.hb-kp-graph{ }
.hb-kp-graph-hub{ background:var(--navy); color:#fff; border-radius:10px; padding:18px 22px; text-align:center; max-width:340px; margin:0 auto 4px; font-weight:700; font-family:var(--font-display); font-size:15px; position:relative; }
.hb-kp-graph-hub::after{ content:''; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); width:2px; height:20px; background:var(--line); }
.hb-kp-graph-spokes{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; }
.hb-kp-graph-node{ border:1px solid var(--line); border-top:3px solid var(--orange); border-radius:8px; padding:14px; text-align:center; }
.hb-kp-graph-node-cat{ font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:6px; }
.hb-kp-graph-node a, .hb-kp-graph-node span.hb-kp-graph-node-item{ display:block; font-size:12.5px; font-weight:600; color:var(--navy); text-decoration:none; padding:3px 0; }
.hb-kp-graph-node a:hover{ color:var(--orange); }
.hb-kp-graph-node-empty{ font-size:11.5px; color:var(--gray-light); font-style:italic; }

/* Toolkit reuse notice (avoids duplicating the Handbook's own toolkit) */
.hb-kp-toolkit-reuse{ border:1px dashed var(--line); border-radius:8px; padding:16px 18px; background:var(--bg); margin-bottom:14px; }
.hb-kp-toolkit-reuse a{ color:var(--navy); font-weight:700; }

@media (max-width:1024px){
  .hb-kp-reuse-grid{ grid-template-columns:1fr; }
  .hb-kp-graph-spokes{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .hb-kp-graph-spokes{ grid-template-columns:1fr; }
}

/* ============================================================
   ENGINEERING EVIDENCE PLATFORM — extends the shared design
   system above. New classes prefixed hb-ev- to stay distinct.
   ============================================================ */

/* Evidence hero + status */
.hb-ev-hero{ background:var(--navy-deep); color:#fff; padding:56px 0 40px; position:relative; overflow:hidden; }
.hb-ev-hero::before{ content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px; }
.hb-ev-hero-inner{ position:relative; }

/* THE signature component: Evidence Type distinction.
   Every claim on an evidence page must be visibly typed —
   this is what separates "evidence" from "narrative." */
.hb-ev-claim{ display:flex; gap:12px; align-items:flex-start; border-radius:8px; padding:14px 16px; margin:12px 0; }
.hb-ev-claim-tag{ flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 10px; border-radius:10px; white-space:nowrap; margin-top:1px; }
.hb-ev-claim-fact{ background:#EAF6EC; }
.hb-ev-claim-fact .hb-ev-claim-tag{ background:#1A8A4A; color:#fff; }
.hb-ev-claim-assumption{ background:#FFF7E6; }
.hb-ev-claim-assumption .hb-ev-claim-tag{ background:#B0650F; color:#fff; }
.hb-ev-claim-analysis{ background:#EAF1FB; }
.hb-ev-claim-analysis .hb-ev-claim-tag{ background:#1E4E8C; color:#fff; }
.hb-ev-claim-judgement{ background:#F3EAFB; }
.hb-ev-claim-judgement .hb-ev-claim-tag{ background:#6B3FA0; color:#fff; }
.hb-ev-claim-recommendation{ background:#FDECEA; }
.hb-ev-claim-recommendation .hb-ev-claim-tag{ background:var(--orange); color:#fff; }
.hb-ev-claim-outcome{ background:var(--bg); border:1px solid var(--line); }
.hb-ev-claim-outcome .hb-ev-claim-tag{ background:var(--navy); color:#fff; }
.hb-ev-claim-text{ font-size:14px; color:var(--navy); line-height:1.6; }
.hb-ev-legend{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 24px; }
.hb-ev-legend span{ font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:10px; color:#fff; }

/* Visual Evidence sections */
.hb-ev-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 24px; }
.hb-ev-gallery-item{ aspect-ratio:4/3; background:var(--bg); border:1px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--gray-light); font-size:12px; text-align:center; padding:10px; }

/* Before/After comparison slider — real interactive component, vanilla JS */
.hb-ev-compare{ position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--bg); border:1px solid var(--line); }
.hb-ev-compare-before, .hb-ev-compare-after{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--gray-light); font-size:13px; font-weight:700; }
.hb-ev-compare-before{ background:#e2e6ea; }
.hb-ev-compare-after{ background:#cfd6dc; clip-path:inset(0 0 0 50%); }
.hb-ev-compare-handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; box-shadow:0 0 0 1px var(--line); cursor:ew-resize; transform:translateX(-50%); z-index:5; }
.hb-ev-compare-handle::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:32px; transform:translateX(-50%); }
.hb-ev-compare-handle::after{ content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:32px; height:32px; background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; color:var(--navy); font-weight:700; }
.hb-ev-compare-label{ position:absolute; top:10px; font-size:10.5px; font-weight:700; letter-spacing:.03em; color:#fff; background:rgba(19,41,75,.7); padding:3px 10px; border-radius:10px; }
.hb-ev-compare-label.before{ left:10px; }
.hb-ev-compare-label.after{ right:10px; }

/* Timeline */
.hb-ev-timeline{ position:relative; padding-left:28px; border-left:2px solid var(--line); margin:16px 0 24px; }
.hb-ev-timeline-item{ position:relative; padding-bottom:20px; }
.hb-ev-timeline-item:last-child{ padding-bottom:0; }
.hb-ev-timeline-item::before{ content:''; position:absolute; left:-33px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--orange); border:2px solid #fff; box-shadow:0 0 0 1px var(--orange); }
.hb-ev-timeline-date{ font-size:11px; font-weight:700; color:var(--gray-light); text-transform:uppercase; letter-spacing:.03em; }
.hb-ev-timeline-title{ font-size:14px; font-weight:700; color:var(--navy); margin:2px 0 4px; }

/* Browse-by facet grid (reuses Standards' facet tile pattern, aliased for Evidence) */
.hb-ev-facet-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }

@media (max-width:1024px){
  .hb-ev-gallery{ grid-template-columns:repeat(2,1fr); }
  .hb-ev-facet-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .hb-ev-gallery{ grid-template-columns:1fr; }
  .hb-ev-facet-grid{ grid-template-columns:1fr; }
  .hb-ev-claim{ flex-direction:column; }
}

/* ============================================================
   ENGINEERING ASSET LIBRARY — extends the shared design system.
   New classes prefixed hb-al- to stay distinct.
   ============================================================ */

.hb-al-category-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hb-al-category-card{ display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:10px; padding:20px; text-decoration:none; transition:border-color .15s ease; }
.hb-al-category-card:hover{ border-color:var(--orange); }
.hb-al-category-icon{ width:36px; height:36px; border-radius:8px; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.hb-al-category-name{ font-size:14px; font-weight:700; color:var(--navy); }
.hb-al-category-count{ font-size:11.5px; color:var(--gray-light); }

/* Asset row / card — status is always visible, never implies a live download */
.hb-al-asset-row{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; }
.hb-al-asset-main{ flex:1; min-width:0; }
.hb-al-asset-title{ font-size:14px; font-weight:700; color:var(--navy); margin-bottom:3px; }
.hb-al-asset-cat{ font-size:11px; color:var(--gray-light); }
.hb-al-status{ flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:4px 11px; border-radius:12px; white-space:nowrap; }
.hb-al-status-planned{ background:var(--bg); color:var(--gray-light); }
.hb-al-status-development{ background:#FFF3E0; color:#B0650F; }
.hb-al-status-available{ background:#E6F4EC; color:#1A8A4A; }
.hb-al-rank{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* Asset detail page meta grid */
.hb-al-meta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 24px; }
.hb-al-meta-item{ border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.hb-al-meta-label{ font-size:10.5px; font-weight:700; color:var(--gray-light); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.hb-al-meta-value{ font-size:13.5px; font-weight:700; color:var(--navy); }

.hb-al-format-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--gray-light); background:var(--bg); padding:5px 12px; border-radius:14px; margin-right:8px; }

@media (max-width:1024px){
  .hb-al-category-grid{ grid-template-columns:repeat(2,1fr); }
  .hb-al-meta-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hb-al-category-grid{ grid-template-columns:1fr; }
  .hb-al-asset-row{ flex-wrap:wrap; }
}

/* ============================================================
   ENGINEERING WORKSPACE — extends the shared design system.
   New classes prefixed hb-ws- to stay distinct. No engineering
   calculations are performed by any of these components — they
   organize and persist user-entered data only.
   ============================================================ */

/* Stepper navigation */
.hb-ws-stepper{ display:flex; overflow-x:auto; gap:0; margin-bottom:28px; border-bottom:2px solid var(--line); }
.hb-ws-step-tab{ flex:0 0 auto; padding:12px 18px; font-size:12.5px; font-weight:700; color:var(--gray-light); background:none; border:none; cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-2px; }
.hb-ws-step-tab.active{ color:var(--navy); border-bottom-color:var(--orange); }
.hb-ws-step-tab.done::before{ content:'✓ '; color:#1A8A4A; }
.hb-ws-panel{ display:none; }
.hb-ws-panel.active{ display:block; }

/* Overall progress */
.hb-ws-progress-bar{ height:6px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:24px; }
.hb-ws-progress-fill{ height:100%; background:var(--orange); width:0%; transition:width .3s ease; }
.hb-ws-progress-label{ font-size:12px; color:var(--gray-light); margin-bottom:6px; display:flex; justify-content:space-between; }

/* Checklist progress component */
.hb-ws-checklist-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.hb-ws-checklist-item input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; accent-color:var(--orange); }
.hb-ws-checklist-item label{ font-size:14px; color:var(--navy); cursor:pointer; }
.hb-ws-checklist-item.checked label{ color:var(--gray-light); text-decoration:line-through; }

/* Form inputs (project info, measurements, notes) */
.hb-ws-field{ margin-bottom:16px; }
.hb-ws-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.hb-ws-field input[type="text"], .hb-ws-field input[type="number"], .hb-ws-field input[type="date"], .hb-ws-field select, .hb-ws-field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:14px; color:var(--navy); font-family:inherit;
}
.hb-ws-field textarea{ min-height:90px; resize:vertical; }
.hb-ws-field-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }

/* Measurement table (fillable, no auto-calculation) */
.hb-ws-measure-table{ width:100%; border-collapse:collapse; margin-bottom:10px; }
.hb-ws-measure-table th{ background:var(--bg); font-size:11px; text-transform:uppercase; color:var(--gray-light); padding:8px 10px; text-align:left; border:1px solid var(--line); }
.hb-ws-measure-table td{ border:1px solid var(--line); padding:4px; }
.hb-ws-measure-table input{ width:100%; border:none; padding:8px 10px; font-size:13px; background:transparent; }
.hb-ws-measure-table input:focus{ background:var(--bg); outline:none; }
.hb-ws-add-row-btn{ font-size:12.5px; font-weight:700; color:var(--navy); background:var(--bg); border:1px dashed var(--line); border-radius:6px; padding:8px 14px; cursor:pointer; }

/* Decision tally (counts user selections, does not score/weight them) */
.hb-ws-decision-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.hb-ws-decision-factor{ font-size:13.5px; font-weight:700; color:var(--navy); }
.hb-ws-decision-option{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray); cursor:pointer; }
.hb-ws-tally{ display:flex; gap:20px; margin-top:16px; padding:14px 18px; background:var(--bg); border-radius:8px; }
.hb-ws-tally-item{ text-align:center; }
.hb-ws-tally-count{ font-size:24px; font-weight:700; color:var(--navy); }
.hb-ws-tally-label{ font-size:11px; color:var(--gray-light); text-transform:uppercase; }
.hb-ws-tally-note{ font-size:12px; color:var(--gray-light); font-style:italic; margin-top:8px; }

/* Risk indicator — user-set, not computed */
.hb-ws-risk-picker{ display:flex; gap:8px; }
.hb-ws-risk-option{ flex:1; text-align:center; padding:12px; border:2px solid var(--line); border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--gray-light); }
.hb-ws-risk-option[data-level="low"].selected{ border-color:#1A8A4A; background:#EAF6EC; color:#1A8A4A; }
.hb-ws-risk-option[data-level="medium"].selected{ border-color:#B0650F; background:#FFF7E6; color:#B0650F; }
.hb-ws-risk-option[data-level="high"].selected{ border-color:#B23A2E; background:#FDECEA; color:#B23A2E; }

/* Evidence gallery — client-side photo preview, nothing uploaded anywhere */
.hb-ws-evidence-upload{ border:2px dashed var(--line); border-radius:8px; padding:24px; text-align:center; cursor:pointer; color:var(--gray-light); font-size:13px; }
.hb-ws-evidence-upload:hover{ border-color:var(--orange); }
.hb-ws-evidence-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.hb-ws-evidence-thumb{ position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.hb-ws-evidence-thumb img{ width:100%; height:100%; object-fit:cover; }
.hb-ws-evidence-remove{ position:absolute; top:4px; right:4px; width:20px; height:20px; background:rgba(19,41,75,.8); color:#fff; border-radius:50%; border:none; cursor:pointer; font-size:11px; line-height:1; }

/* Timeline entries — add/remove, reuses hb-ev-timeline visual */
.hb-ws-timeline-add{ display:flex; gap:8px; margin-top:14px; }
.hb-ws-timeline-add input{ flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; }

/* Summary / recommendation panel */
.hb-ws-summary-box{ border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:16px; background:var(--bg); }
.hb-ws-summary-box h3{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); margin:0 0 10px; }

.hb-ws-nav-buttons{ display:flex; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.hb-ws-btn{ font-size:13px; font-weight:700; padding:11px 22px; border-radius:6px; border:none; cursor:pointer; }
.hb-ws-btn-primary{ background:var(--orange); color:#fff; }
.hb-ws-btn-secondary{ background:var(--bg); color:var(--navy); border:1px solid var(--line); }

@media (max-width:768px){
  .hb-ws-field-row{ grid-template-columns:1fr; }
  .hb-ws-decision-row{ grid-template-columns:1fr; gap:6px; }
  .hb-ws-evidence-grid{ grid-template-columns:repeat(2,1fr); }
  .hb-ws-tally{ flex-direction:column; gap:10px; }
}

/* ============================================================
   ENGINEERING WORKSPACE — INTELLIGENCE LAYER (Phase 12)
   Extends the hb-ws- components above. Guidance and context
   only — no computed conclusions anywhere in this section.
   ============================================================ */

/* Two-column layout: existing wizard + sticky context sidebar */
.hb-ws-layout{ display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; }
.hb-ws-main{ min-width:0; }
.hb-ws-sidebar{ position:sticky; top:90px; display:flex; flex-direction:column; gap:16px; }
.hb-ws-sidebar-box{ border:1px solid var(--line); border-radius:10px; padding:16px; background:#fff; }
.hb-ws-sidebar-title{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:10px; }
.hb-ws-sidebar-box a{ display:block; font-size:12.5px; font-weight:600; color:var(--navy); text-decoration:none; padding:5px 0; }
.hb-ws-sidebar-box a:hover{ color:var(--orange); }
.hb-ws-sidebar-empty{ font-size:12px; color:var(--gray-light); font-style:italic; }

/* Dynamic context panel — content swaps per step, same box reused */
.hb-ws-context-panel[data-ws-context-for]{ display:none; }
.hb-ws-context-panel[data-ws-context-for].active{ display:block; }

/* Engineering Guidance Card */
.hb-ws-guidance-card{ border-left:3px solid var(--orange); background:#FFF9F2; border-radius:0 8px 8px 0; padding:14px 16px; margin:16px 0; }
.hb-ws-guidance-title{ font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.hb-ws-guidance-card ul{ margin:0 0 8px 18px; padding:0; font-size:13px; color:var(--gray); }
.hb-ws-guidance-ref{ font-size:11px; color:var(--gray-light); }
.hb-ws-guidance-ref a{ color:var(--navy); font-weight:700; }

/* Decision Support Panel — guidance only, never a conclusion */
.hb-ws-support-panel{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin:16px 0; background:var(--bg); }
.hb-ws-support-title{ font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.hb-ws-support-panel ul{ margin:0; padding-left:18px; font-size:12.5px; color:var(--gray); }
.hb-ws-support-note{ font-size:11px; color:var(--gray-light); font-style:italic; margin-top:8px; }

/* Evidence Reminder — quick-reference, distinct from the interactive checklist */
.hb-ws-reminder{ border:1px dashed #B0650F; border-radius:8px; padding:12px 14px; background:#FFF7E6; font-size:12px; color:#7A4A0A; }
.hb-ws-reminder strong{ display:block; margin-bottom:4px; }

/* Step tracker (Workspace Timeline of navigation, distinct from user's own Assessment Timeline) */
.hb-ws-step-tracker{ display:flex; flex-direction:column; gap:2px; }
.hb-ws-step-tracker-item{ font-size:11.5px; color:var(--gray-light); padding:4px 8px; border-radius:4px; }
.hb-ws-step-tracker-item.visited{ color:var(--navy); }
.hb-ws-step-tracker-item.visited::before{ content:'✓ '; color:#1A8A4A; }
.hb-ws-step-tracker-item.current{ background:var(--bg); font-weight:700; color:var(--navy); }

/* Engineering Notes Panel — persistent across every step */
.hb-ws-notes-panel textarea{ width:100%; min-height:100px; border:1px solid var(--line); border-radius:6px; padding:10px; font-size:12.5px; font-family:inherit; resize:vertical; }

/* Future AI — honestly labeled, not wired to a real response */
.hb-ws-ai-future{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gray-light); background:var(--bg); border:1px dashed var(--line); border-radius:6px; padding:8px 12px; margin:10px 0; cursor:not-allowed; }
.hb-ws-ai-future-badge{ font-size:9.5px; font-weight:700; letter-spacing:.03em; background:var(--line); color:var(--gray-light); padding:2px 7px; border-radius:8px; }

@media (max-width:1024px){
  .hb-ws-layout{ grid-template-columns:1fr; }
  .hb-ws-sidebar{ position:static; order:-1; }
}

/* ============================================================
   HANDBOOK HERO — VISUAL ENHANCEMENT (scoped to the Engineering
   Handbook landing page only). Added as an additional class,
   .hb-hero-eng-bg, layered on top of the existing .hb-hero base
   — .hb-hero itself is untouched so Standards/Assets/Workspace
   landing pages, which reuse the same base class, are unaffected.
   No text, structure, or functionality changes — visual layer only.
   ============================================================ */
/* ============================================================
   SHARED REUSABLE HERO PHOTO BACKGROUND SYSTEM
   Used by Engineering Handbook and Engineering Standards (and
   any future Knowledge Center landing page). All overlay/contrast
   logic lives here once — a page adds .hb-hero-photo-bg plus one
   modifier class that supplies only its own background-image, so
   nothing below is duplicated per page.
   ============================================================ */
.hb-hero-photo-bg{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.hb-hero-photo-bg::before{ content:none; } /* retire the inherited dot-grid in favor of the photo */
.hb-hero-photo-bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(ellipse 480px 320px at 28% 42%, rgba(7,17,36,.65) 0%, transparent 72%),
    linear-gradient(90deg, rgba(7,17,36,.90) 0%, rgba(7,17,36,.68) 36%, rgba(7,17,36,.32) 62%, rgba(7,17,36,.08) 100%);
}
.hb-hero-photo-bg .hb-hero-inner{ position:relative; z-index:1; }
.hb-hero-photo-bg--handbook{ background-image:url('../images/handbook-hero-bg.webp'); }
.hb-hero-photo-bg--standards{ background-image:url('../images/standards-hero-bg.webp'); }
@media (max-width:900px){
  /* simpler, heavier scrim on smaller screens across every page using this system */
  .hb-hero-photo-bg::after{
    background-image:linear-gradient(180deg, rgba(7,17,36,.84) 0%, rgba(7,17,36,.92) 100%);
  }
}

/* Legacy Handbook-only class, retired in favor of the shared system above —
   kept as a no-op alias so nothing breaks if referenced anywhere else. */
.hb-hero-eng-bg{ background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ---------- Print ---------- */
@media print{
  .site-header-v2, .hb-toc-box, .hb-ask-ai-box, .mobile-overlay, .search-panel,
  .site-footer .footer-bottom + *, a.wa-fab, #srt-chatbot, .hb-volume-subnav{ display:none !important; }
  .hb-article-shell{ display:block; max-width:100%; }
  .hb-article-rail{ display:none; }
  body{ padding-top:0 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hb-volume-grid, .hb-card-row, .hb-quick-grid{ grid-template-columns:repeat(2,1fr); }
  .hb-article-shell{ flex-direction:column; }
  .hb-article-rail{ position:static; width:100%; order:-1; }
  .hb-decision-grid{ grid-template-columns:1fr; }
  .hb-relation-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hb-volume-grid, .hb-card-row, .hb-quick-grid{ grid-template-columns:1fr; }
  .hb-hero h1{ font-size:26px; }
  .hb-decision-panel{ margin-top:-32px; padding:18px; }
  .hb-article-hero h1{ font-size:22px; }
  .hb-prev-next{ flex-direction:column; }
  .hb-prev-next a{ max-width:100%; }
  .hb-prev-next .next{ text-align:left; margin-left:0; }
}

/* ============================================================
   SRT LOSS MITIGATION FRAMEWORK (SLMF) — shared components.
   Reuses existing tokens (--navy, --orange, --gray, --line, hb-shell,
   hb-hero, hb-h2, hb-eyebrow) — no new stylesheet, per project convention.
   ============================================================ */

/* Engineering Lifecycle Diagram — 7 connected levels */
.hb-slmf-lifecycle{ display:flex; flex-wrap:wrap; gap:0; margin:32px 0; }
.hb-slmf-lifecycle-node{
  flex:1 1 120px; min-width:120px; position:relative; text-align:center;
  padding:20px 10px; border-top:3px solid var(--line);
  display:block; text-decoration:none; color:inherit; cursor:pointer; transition:background .15s;
}
.hb-slmf-lifecycle-node:hover{ background:var(--bg); }
.hb-slmf-lifecycle-node.active-path{ border-top-color:var(--orange); }
.hb-slmf-lifecycle-num{
  width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
  margin:-37px auto 10px; border:3px solid #fff; box-shadow:0 0 0 3px var(--line);
}
.hb-slmf-lifecycle-title{ font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.hb-slmf-lifecycle-focus{ font-size:11px; color:var(--gray-light); line-height:1.4; }
@media (max-width:900px){
  .hb-slmf-lifecycle{ flex-direction:column; }
  .hb-slmf-lifecycle-node{ border-top:none; border-left:3px solid var(--line); text-align:left; padding:14px 0 14px 20px; }
  .hb-slmf-lifecycle-node.active-path{ border-left-color:var(--orange); border-top-color:transparent; }
  .hb-slmf-lifecycle-num{ margin:0 0 8px -37px; float:left; }
}

/* Interactive Stage Cards — expand/collapse, same accordion pattern as the mobile nav menu */
.hb-slmf-stage-card{ border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; background:#fff; }
.hb-slmf-stage-head{
  display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer;
  background:var(--bg); user-select:none;
}
.hb-slmf-stage-head:hover{ background:#EFF2F6; }
.hb-slmf-stage-badge{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.hb-slmf-stage-headtext{ flex:1; min-width:0; }
.hb-slmf-stage-title{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--navy); }
.hb-slmf-stage-focus{ font-size:12.5px; color:var(--gray-light); margin-top:2px; }
.hb-slmf-stage-chevron{ flex:0 0 auto; width:20px; height:20px; color:var(--gray-light); transition:transform .2s; }
.hb-slmf-stage-card.open .hb-slmf-stage-chevron{ transform:rotate(180deg); }
.hb-slmf-stage-body{ display:none; padding:0 20px 20px; border-top:1px solid var(--line); }
.hb-slmf-stage-card.open .hb-slmf-stage-body{ display:block; padding-top:18px; }
.hb-slmf-stage-block{ margin-bottom:16px; }
.hb-slmf-stage-block:last-child{ margin-bottom:0; }
.hb-slmf-stage-block-label{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:6px; }
.hb-slmf-stage-block p, .hb-slmf-stage-block li{ font-size:13.5px; color:var(--gray); line-height:1.6; }
.hb-slmf-stage-block ul{ margin:0; padding-left:18px; }
.hb-slmf-decision-gate{ background:#FFF9F2; border-left:3px solid var(--orange); border-radius:0 8px 8px 0; padding:12px 16px; }

/* Placeholder cards for Downloads / Emergency Guides / Workspace / Case Studies */
.hb-slmf-placeholder-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin:24px 0; }
.hb-slmf-placeholder-card{ border:1px dashed var(--line); border-radius:10px; padding:20px; background:var(--bg); }
.hb-slmf-placeholder-badge{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.03em; background:var(--line); color:var(--gray-light); padding:3px 8px; border-radius:8px; margin-bottom:10px; }
.hb-slmf-placeholder-title{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--navy); margin-bottom:6px; }
.hb-slmf-placeholder-desc{ font-size:12.5px; color:var(--gray-light); line-height:1.5; }

/* Relationship grid (SLMF <-> other modules) */
.hb-slmf-relation-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:20px 0; }
.hb-slmf-relation-card{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.hb-slmf-relation-name{ font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.hb-slmf-relation-desc{ font-size:12px; color:var(--gray-light); line-height:1.5; }

/* ============================================================
   SLMF OPERATIONAL LAYER (Phase LM-2) — Action Center, operational
   summary grid, Resource Map matrix, First-24-Hours placeholder cards.
   Extends the SLMF components above; no new stylesheet.
   ============================================================ */

/* Condensed operational summary (Purpose/Users/Objectives/etc.) inside each Stage Card */
.hb-slmf-op-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-bottom:18px; padding:14px 16px; background:var(--bg); border-radius:8px; }
.hb-slmf-op-item-label{ font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:4px; }
.hb-slmf-op-item-value{ font-size:12.5px; color:var(--navy); font-weight:600; line-height:1.4; }

/* Action Center — clickable resource links per level, with honest status badges */
.hb-slmf-action-center{ margin-top:6px; }
.hb-slmf-action-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line);
  border-radius:8px; margin-bottom:8px; text-decoration:none; transition:border-color .15s;
}
a.hb-slmf-action-item:hover{ border-color:var(--orange); }
.hb-slmf-action-item.is-planned{ opacity:.72; cursor:default; }
.hb-slmf-action-icon{ flex:0 0 auto; width:32px; height:32px; border-radius:6px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
.hb-slmf-action-item.is-planned .hb-slmf-action-icon{ background:var(--line); color:var(--gray-light); }
.hb-slmf-action-title{ font-size:13px; font-weight:700; color:var(--navy); }
.hb-slmf-action-item.is-planned .hb-slmf-action-title{ color:var(--gray-light); }
.hb-slmf-action-status{ margin-left:auto; flex:0 0 auto; font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:8px; }
.hb-slmf-action-status.available{ background:#E4F5E9; color:#1A8A4A; }
.hb-slmf-action-status.planned{ background:var(--line); color:var(--gray-light); }

/* SLMF Resource Map — matrix table */
.hb-slmf-map-table{ width:100%; border-collapse:collapse; font-size:12px; margin:24px 0; }
.hb-slmf-map-table th, .hb-slmf-map-table td{ border:1px solid var(--line); padding:10px 8px; text-align:center; }
.hb-slmf-map-table th{ background:var(--navy); color:#fff; font-weight:700; font-size:11px; }
.hb-slmf-map-table td:first-child, .hb-slmf-map-table th:first-child{ text-align:left; font-weight:700; color:var(--navy); background:var(--bg); }
.hb-slmf-map-yes{ color:#1A8A4A; font-weight:700; }
.hb-slmf-map-no{ color:var(--gray-light); }
.hb-slmf-map-table-scroll{ overflow-x:auto; }
@media (max-width:900px){ .hb-slmf-map-table{ font-size:11px; } .hb-slmf-map-table th, .hb-slmf-map-table td{ padding:8px 5px; } }

/* First-24-Hours series placeholder pages */
.hb-slmf-f24-card{ border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:14px; }
.hb-slmf-f24-card-label{ font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:6px; }
.hb-slmf-f24-hub-card{ display:block; border:1px solid var(--line); border-radius:10px; padding:20px; text-decoration:none; transition:border-color .15s; }
.hb-slmf-f24-hub-card:hover{ border-color:var(--orange); }
.hb-slmf-f24-hub-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); margin-bottom:6px; }
.hb-slmf-f24-hub-desc{ font-size:12.5px; color:var(--gray-light); line-height:1.5; }

/* ============================================================
   SLMF EXECUTIVE DECISION LAYER (Phase LM-2.5) — business-audience
   components. Extends existing tokens; no new stylesheet.
   ============================================================ */

/* Cost of Waiting — 4-stage severity timeline */
.hb-slmf-waiting-timeline{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.hb-slmf-waiting-stage{ flex:1 1 220px; border-radius:10px; padding:18px; border-left:4px solid var(--line); background:var(--bg); }
.hb-slmf-waiting-stage.sev-1{ border-left-color:#2E9E5B; }
.hb-slmf-waiting-stage.sev-2{ border-left-color:#E0A63A; }
.hb-slmf-waiting-stage.sev-3{ border-left-color:#E0752E; }
.hb-slmf-waiting-stage.sev-4{ border-left-color:#C6402E; }
.hb-slmf-waiting-window{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--gray-light); text-transform:uppercase; margin-bottom:8px; }
.hb-slmf-waiting-desc{ font-size:12.5px; color:var(--gray); line-height:1.55; }

/* With/Without comparison table */
.hb-slmf-compare-table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:13px; }
.hb-slmf-compare-table th, .hb-slmf-compare-table td{ border:1px solid var(--line); padding:14px 16px; text-align:left; vertical-align:top; }
.hb-slmf-compare-table th{ background:var(--navy); color:#fff; font-size:12px; }
.hb-slmf-compare-table th:first-child, .hb-slmf-compare-table td:first-child{ background:var(--bg); font-weight:700; color:var(--navy); width:22%; }
.hb-slmf-compare-without{ color:var(--gray); }
.hb-slmf-compare-with{ color:var(--navy); font-weight:600; }
.hb-slmf-compare-with::before{ content:'✓ '; color:#1A8A4A; }
.hb-slmf-compare-without::before{ content:'✗ '; color:#C6402E; }

/* TCOL breakdown grid */
.hb-slmf-tcol-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; margin:20px 0; }
.hb-slmf-tcol-item{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.hb-slmf-tcol-item.is-visible{ background:#fff; }
.hb-slmf-tcol-item.is-hidden{ background:var(--bg); border-style:dashed; }
.hb-slmf-tcol-label{ font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-bottom:6px; }
.hb-slmf-tcol-item.is-visible .hb-slmf-tcol-label{ color:var(--orange); }
.hb-slmf-tcol-item.is-hidden .hb-slmf-tcol-label{ color:var(--gray-light); }
.hb-slmf-tcol-name{ font-size:13px; font-weight:700; color:var(--navy); }

/* Metrics grid */
.hb-slmf-metric-card{ border:1px solid var(--line); border-radius:10px; padding:18px; }
.hb-slmf-metric-name{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:6px; }
.hb-slmf-metric-desc{ font-size:12.5px; color:var(--gray-light); line-height:1.5; }

/* Audience chip row */
.hb-slmf-audience-row{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 28px; }
.hb-slmf-audience-chip{ font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:20px; background:var(--navy); color:#fff; }

/* ============================================================
   SLMF EXECUTIVE VALUE SYSTEM (Phase LM-2.6) — KPI dashboard cards
   and the premium storytelling section. Extends existing tokens.
   ============================================================ */

/* Executive Decision Dashboard — KPI comparison cards */
.hb-slmf-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin:24px 0; }
.hb-slmf-kpi-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.hb-slmf-kpi-name{ background:var(--navy); color:#fff; font-weight:700; font-size:13px; padding:12px 16px; }
.hb-slmf-kpi-row{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); }
.hb-slmf-kpi-side{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; width:64px; flex:0 0 auto; }
.hb-slmf-kpi-row.without .hb-slmf-kpi-side{ color:#C6402E; }
.hb-slmf-kpi-row.with .hb-slmf-kpi-side{ color:#1A8A4A; }
.hb-slmf-kpi-state{ font-size:12.5px; color:var(--navy); font-weight:600; }
.hb-slmf-kpi-row.without .hb-slmf-kpi-state{ color:var(--gray); font-weight:500; }

/* What Escalates With Delay — compact tag-style grid, complements the 4-stage timeline */
.hb-slmf-escalate-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; margin:20px 0; }
.hb-slmf-escalate-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px; background:var(--bg); }
.hb-slmf-escalate-arrow{ flex:0 0 auto; color:var(--orange); font-weight:700; }
.hb-slmf-escalate-label{ font-size:12.5px; font-weight:600; color:var(--navy); }

/* "The First Decision Costs the Most" — premium storytelling section */
.hb-slmf-story{ background:var(--navy-deep, var(--navy)); color:#fff; border-radius:16px; padding:44px 40px; margin:32px 0; }
.hb-slmf-story-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }
.hb-slmf-story h2{ color:#fff; font-family:var(--font-display); font-size:26px; margin-bottom:20px; }
.hb-slmf-story p{ color:#C9D3DE; font-size:14.5px; line-height:1.8; margin-bottom:16px; max-width:760px; }
.hb-slmf-story-quote{ font-family:var(--font-display); font-size:19px; font-weight:700; color:#fff; border-left:3px solid var(--orange); padding-left:20px; margin:24px 0; line-height:1.5; max-width:720px; }
@media (max-width:768px){ .hb-slmf-story{ padding:28px 22px; } .hb-slmf-story h2{ font-size:21px; } .hb-slmf-story-quote{ font-size:16px; } }

/* ============================================================
   SRT ENGINEERING FRAMEWORK SUITE (Phase EOS-1) — premium executive
   overview page. Extends existing tokens; no new visual language.
   ============================================================ */

/* Framework pillar cards (SLMF / SRT-ARM / BURCE, equal weight) */
.hb-efs-pillar-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; margin:24px 0; }
.hb-efs-pillar{ border:1px solid var(--line); border-radius:14px; padding:26px; background:#fff; }
.hb-efs-pillar-name{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--navy); margin-bottom:4px; }
.hb-efs-pillar-tagline{ font-size:12.5px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px; }
.hb-efs-pillar ul{ margin:0; padding-left:18px; font-size:12.5px; color:var(--gray); line-height:1.7; }

/* Simple workflow chain (Section 3): Incident -> SLMF -> SRT-ARM -> BURCE -> ... */
.hb-efs-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:24px 0; }
.hb-efs-chain-node{ background:var(--navy); color:#fff; font-weight:700; font-size:12.5px; padding:12px 18px; border-radius:8px; }
.hb-efs-chain-node.accent{ background:var(--orange); }
.hb-efs-chain-arrow{ color:var(--gray-light); font-size:16px; }
@media (max-width:900px){ .hb-efs-chain{ flex-direction:column; align-items:stretch; } .hb-efs-chain-arrow{ align-self:center; transform:rotate(90deg); } }

/* Engineering Decision Lifecycle (Section 6) — 11-step granular chain */
.hb-efs-lifecycle11{ display:flex; flex-wrap:wrap; gap:0; margin:28px 0; }
.hb-efs-lifecycle11-node{ flex:1 1 100px; min-width:100px; text-align:center; padding:16px 6px; border-top:3px solid var(--line); }
.hb-efs-lifecycle11-node.governed-slmf{ border-top-color:#2E9E5B; }
.hb-efs-lifecycle11-node.governed-arm{ border-top-color:var(--navy); }
.hb-efs-lifecycle11-node.governed-burce{ border-top-color:var(--orange); }
.hb-efs-lifecycle11-title{ font-size:11px; font-weight:700; color:var(--navy); line-height:1.3; }
.hb-efs-lifecycle11-gov{ font-size:9px; color:var(--gray-light); text-transform:uppercase; letter-spacing:.02em; margin-top:3px; }
@media (max-width:900px){ .hb-efs-lifecycle11{ flex-direction:column; } .hb-efs-lifecycle11-node{ border-top:none; border-left:3px solid var(--line); text-align:left; padding:10px 0 10px 16px; } }

/* Ecosystem diagram (Section 5) — 3 frameworks -> shared knowledge modules */
.hb-efs-ecosystem{ text-align:center; margin:28px 0; }
.hb-efs-ecosystem-frameworks{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.hb-efs-ecosystem-fw{ background:var(--navy); color:#fff; font-weight:700; font-size:13px; padding:12px 22px; border-radius:8px; }
.hb-efs-ecosystem-connector{ font-size:20px; color:var(--line); margin:4px 0; }
.hb-efs-ecosystem-modules{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; max-width:920px; margin:0 auto; }
.hb-efs-ecosystem-module{ border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:12px; font-weight:600; color:var(--navy); background:var(--bg); }

/* Operating System diagram (Section 10) — the capstone visual */
.hb-efs-os-diagram{ text-align:center; margin:28px 0; padding:32px; background:var(--navy-deep, var(--navy)); border-radius:16px; }
.hb-efs-os-title{ color:#fff; font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:.02em; margin-bottom:24px; }
.hb-efs-os-branch{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.hb-efs-os-node{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; font-weight:700; font-size:13px; padding:14px 24px; border-radius:8px; }
.hb-efs-os-line{ color:rgba(255,255,255,.35); font-size:13px; margin:4px 0; }
.hb-efs-os-knowledge-label{ color:var(--orange); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin:16px 0 12px; }
.hb-efs-os-modules{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.hb-efs-os-module-chip{ background:rgba(255,255,255,.1); color:#E4E9EF; font-size:11.5px; font-weight:600; padding:6px 14px; border-radius:20px; }

/* Framework comparison table (Section 4) */
.hb-efs-compare-table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:12.5px; }
.hb-efs-compare-table th, .hb-efs-compare-table td{ border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; }
.hb-efs-compare-table th{ background:var(--navy); color:#fff; font-size:11.5px; }
.hb-efs-compare-table td:first-child{ font-weight:700; color:var(--navy); background:var(--bg); }
.hb-efs-compare-scroll{ overflow-x:auto; }

/* Audience benefit cards (Section 8) */
.hb-efs-audience-card{ border:1px solid var(--line); border-radius:10px; padding:18px; }
.hb-efs-audience-name{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:6px; }
.hb-efs-audience-desc{ font-size:12.5px; color:var(--gray-light); line-height:1.55; }

/* ============================================================
   EMERGENCY GUIDES PLATFORM (Phase SLMF-EG1) — reusable guide
   card component. Extends existing tokens; no new stylesheet.
   ============================================================ */
.hb-eg-guide-card{ display:block; border:1px solid var(--line); border-radius:12px; padding:22px; text-decoration:none; transition:border-color .15s,transform .15s; background:#fff; }
.hb-eg-guide-card:hover{ border-color:var(--orange); transform:translateY(-2px); }
.hb-eg-guide-title{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy); margin-bottom:12px; }
.hb-eg-guide-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-bottom:14px; }
.hb-eg-guide-meta-label{ font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-light); margin-bottom:2px; }
.hb-eg-guide-meta-value{ font-size:12px; color:var(--navy); font-weight:600; line-height:1.35; }
.hb-eg-guide-next{ font-size:12.5px; font-weight:700; color:var(--orange); border-top:1px solid var(--line); padding-top:12px; }

/* Guide detail page sections */
.hb-eg-priority-list{ margin:0; padding-left:0; list-style:none; }
.hb-eg-priority-list li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--gray); }
.hb-eg-priority-num{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hb-eg-mistake-item{ display:flex; gap:10px; padding:10px 14px; background:#FDF3F0; border-radius:8px; margin-bottom:8px; font-size:12.5px; color:var(--gray); }
.hb-eg-mistake-icon{ flex:0 0 auto; color:#C6402E; font-weight:700; }
.hb-eg-evidence-item{ display:flex; gap:10px; padding:10px 14px; background:var(--bg); border-radius:8px; margin-bottom:8px; font-size:12.5px; color:var(--gray); }
.hb-eg-evidence-icon{ flex:0 0 auto; color:#1A8A4A; }
.hb-eg-scope-note{ border:1px dashed var(--line); border-radius:8px; padding:14px 16px; font-size:12px; color:var(--gray-light); font-style:italic; margin:20px 0; }