/* =============================================================
   Great Onboarding Companion — baHRC, April 29, 2026
   Triangle visual system adapted for the Big Mac user:
   one-handed, sun-blinded, greasy-thumb, time-pressured mobile.
   ============================================================= */

:root {
  --dark:    #0D1B2A;
  --gold:    #C9A84C;
  --teal:    #026A76;      /* darkened from #028090 to clear AA on bg (Big Mac sun standard) */
  --coral:   #E07A5F;
  --muted:   #4A5A6E;      /* darkened from #6A7F95 to clear AAA on bg */
  --bg:      #F9F7F4;
  --surface: #FFFFFF;
  --text:    #1A2535;
  --border:  #C8CED6;
  --max-w:   780px;

  /* Big Mac type scale — mobile-first, sun-readable */
  --fs-base:   1.125rem;   /* 18px body minimum */
  --fs-small:  1rem;       /* 16px — no text smaller than this in default flow */
  --fs-label:  0.85rem;    /* 13.6px — absolute floor for metadata labels */
  --fs-h1:     clamp(1.75rem, 5vw, 2.5rem);
  --fs-h2:     clamp(1.4rem, 4vw, 1.75rem);
  --fs-h3:     1.25rem;

  /* Tap targets — Apple HIG min 44, Material 48, we ship 48+ */
  --tap-min:   48px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Georgia, serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── LAYOUT ── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── HEADER ── */
.site-header {
  background: var(--dark);
  color: #fff;
  padding: 2.5rem 1.25rem 2.25rem;
  text-align: center;
}
.event-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.site-header h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.site-header h1 em {
  display: block;
  font-style: normal;
  color: var(--gold);
  font-size: 0.6em;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  font-weight: 600;
}
.tagline {
  font-size: 1.125rem;
  color: #E8ECF2;
  max-width: 560px;
  margin: 0 auto 1.25rem;
  line-height: 1.55;
}
.presenter {
  font-size: 1rem;
  color: #C8D4E0;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.presenter a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.presenter a:hover,
.presenter a:focus { border-bottom-color: var(--gold); }
.event-meta {
  font-size: var(--fs-label);
  color: #9AAEC2;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ── NAVIGATION ── */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.site-nav a:hover,
.site-nav a:focus {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}
.site-nav a.current {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

/* ── SECTION LABELS ── */
.section-label {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

/* ── SLIDE BLOCKS ── */
.slide-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.75rem 1.75rem;
  margin-bottom: 1.25rem;
}
.slide-num {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
  font-weight: 700;
}
.slide-block h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.85rem;
  line-height: 1.3;
}
.slide-block h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  margin: 1.25rem 0 0.6rem;
  line-height: 1.3;
}
.slide-block p { margin-bottom: 0.9rem; }
.slide-block p:last-child { margin-bottom: 0; }
.slide-block ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.9rem;
}
.slide-block ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.slide-block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--teal);
  border-radius: 50%;
}

/* ── STAT GRID (Slide 1 infographic) ── */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.stat-card.coral { border-left-color: var(--coral); }
.stat-card.gold  { border-left-color: var(--gold); }
.stat-figure {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.stat-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.35rem;
}
.stat-sub {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}
.stat-source {
  font-size: var(--fs-label);
  color: var(--muted);
  margin-top: 0.4rem;
  font-style: italic;
}

/* Group headers for stat sections */
.stat-group-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border);
}
.stat-group-label:first-of-type { margin-top: 0.5rem; }

/* ── CALLOUTS ── */
.callout {
  border-left: 4px solid;
  padding: 1.1rem 1.25rem;
  border-radius: 0 6px 6px 0;
  margin: 1rem 0;
  background: var(--surface);
  font-size: 1rem;
  line-height: 1.6;
}
.callout.gold  { border-color: var(--gold);  background: #FBF6E6; }
.callout.teal  { border-color: var(--teal);  background: #E4F2F3; }
.callout.coral { border-color: var(--coral); background: #FBEDE7; }
.callout p { margin: 0; }

/* ── HIGHLIGHT / PULL QUOTE ── */
.pull-quote {
  background: #FBF6E6;
  border-left: 4px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--dark);
  font-weight: 500;
  font-style: italic;
}
.pull-quote-attribution {
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.85rem;
  letter-spacing: 0.02em;
}

/* ── TWO-COLUMN (Cat Herder vs Conductor) ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 1rem 0;
}
@media (min-width: 640px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.col-dark {
  background: var(--dark);
  color: #fff;
  padding: 1.5rem 1.35rem;
  border-radius: 8px;
}
.col-light {
  background: var(--surface);
  border: 1.5px solid var(--border);
  padding: 1.5rem 1.35rem;
  border-radius: 8px;
}
.col-label {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.col-light .col-label { color: var(--teal); }
.col-dark h4, .col-light h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.col-dark h4 { color: #fff; }
.col-light h4 { color: var(--dark); }
.col-dark p, .col-light p {
  font-size: 1rem;
  margin-bottom: 0.6rem;
  line-height: 1.55;
}
.col-dark p { color: #D8E0EC; }
.col-dark ul, .col-light ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.col-dark ul li, .col-light ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.45rem;
  font-size: 1rem;
  line-height: 1.5;
}
.col-dark ul li::before, .col-light ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  font-weight: 700;
}
.col-dark ul li::before { color: var(--gold); }
.col-light ul li::before { color: var(--teal); }
.col-dark ul li { color: #D8E0EC; }

/* ── STAGE GRID (4 stages of onboarding journey) ── */
.stage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}
@media (min-width: 640px) {
  .stage-grid { grid-template-columns: 1fr 1fr; }
}
.stage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.stage-header {
  background: var(--dark);
  color: #fff;
  padding: 0.85rem 1.2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.stage-num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  min-width: 1.5rem;
}
.stage-body {
  padding: 1.1rem 1.25rem;
}
.stage-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stage-body ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.45rem;
  font-size: 1rem;
  line-height: 1.5;
}
.stage-body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* ── METRIC LIST (Measuring Success) ── */
.metric-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin: 1rem 0;
}
.metric-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.metric-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 0.25rem;
}
.metric-desc {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
}

/* ── PREV / NEXT PAGINATION ── */
.page-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 3rem 0 2rem;
}
@media (min-width: 540px) {
  .page-nav { grid-template-columns: 1fr 1fr; }
  .page-nav .page-nav-next { text-align: right; }
}
.page-nav a {
  display: block;
  min-height: var(--tap-min);
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.page-nav a:hover,
.page-nav a:focus {
  border-color: var(--dark);
  background: var(--dark);
  color: #fff;
}
.page-nav a:hover .page-nav-label,
.page-nav a:focus .page-nav-label {
  color: var(--gold);
}
.page-nav-label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.page-nav-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ── HUB CARDS (Index part navigation) ── */
.part-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.part-card {
  display: block;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.part-card:hover,
.part-card:focus {
  border-color: var(--dark);
  transform: translateY(-1px);
}
.part-card-label {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.part-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.part-card-desc {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.part-card-cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal);
}
.part-card:hover .part-card-cta,
.part-card:focus .part-card-cta {
  color: var(--coral);
}

/* ── PRESENTERS SECTION (Index page) ── */
.presenters-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.5rem;
  margin: 1rem 0 2rem;
}
.presenters-heading {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 1rem;
}
.presenter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
  line-height: 1.4;
}
.presenter-row:last-child { margin-bottom: 0; }
.presenter-name {
  font-weight: 700;
  color: var(--dark);
  font-size: 1.1rem;
}
.presenter-title {
  color: var(--text);
}
.presenter-link {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
  padding: 0.5rem 0;
}
.presenter-link:hover,
.presenter-link:focus { text-decoration: underline; }

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0 3rem;
  margin-top: 3rem;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.55;
}
.site-footer a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 600;
}
.site-footer a:hover,
.site-footer a:focus { text-decoration: underline; }
.site-footer p { margin-bottom: 0.4rem; }
.site-footer p:last-child { margin-bottom: 0; }

/* ── UTILITY ── */
section { margin-bottom: 2.5rem; }
section h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
a { color: var(--teal); }
a:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
strong { font-weight: 700; }

/* ──────────────────────────────────────────────────────────────
   PART II — Edge Cases (baHRC-branded resource surface)
   Distinct palette (warm cream / navy / orange / brown)
   to signal "resource" vs session artifact. Type scale matches
   the Big Mac standard — same readability, different identity.
   ────────────────────────────────────────────────────────────── */

.edgecases-page {
  --ec-bg:        #F7F5F0;
  --ec-text:      #1A1A1A;
  --ec-muted:     #5A5149;
  --ec-border:    #BDB5A3;
  --ec-surface:   #FFFFFF;
  --ec-navy:      #2B4A8C;
  --ec-orange:    #C97B2A;
  --ec-orange-text: #96501A;
  --ec-ca-bg:     #FCEFDB;
  --ec-intro-bg:  #E0E7F2;

  background: var(--ec-bg);
  color: var(--ec-text);
  font-family: Georgia, "Times New Roman", serif;
  min-height: 100vh;
  padding: 2rem 1.25rem 3rem;
}
.edgecases-page .wrap { max-width: 720px; margin: 0 auto; }
.ec-header { border-bottom: 3px solid var(--ec-text); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.ec-header-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.ec-badge {
  background: var(--ec-text); color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: 3px;
}
.ec-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); color: var(--ec-muted);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
}
.ec-eventdate {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); color: var(--ec-orange-text);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.6rem; font-weight: 700;
}
.ec-sessionname { font-size: 1rem; font-style: italic; color: var(--ec-muted); margin-bottom: 0.75rem; line-height: 1.4; }
.ec-header h1 { font-size: var(--fs-h1); font-weight: 700; color: var(--ec-text); line-height: 1.2; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.ec-subtitle { font-size: 1.1rem; color: var(--ec-muted); font-style: italic; line-height: 1.4; }

.ec-ca-callout {
  background: var(--ec-ca-bg); border-left: 4px solid var(--ec-orange);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  font-size: 1rem; line-height: 1.6; color: var(--ec-text);
}
.ec-ca-callout strong { color: var(--ec-orange-text); }
.ec-intro {
  background: var(--ec-intro-bg); border-left: 4px solid var(--ec-navy);
  padding: 1rem 1.25rem; margin-bottom: 1.75rem;
  font-size: 1rem; line-height: 1.6; color: var(--ec-text);
}
.ec-intro strong { color: var(--ec-navy); }
.ec-section-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ec-muted); margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ec-border); font-weight: 700;
}
.ec-card { background: var(--ec-surface); border: 1px solid var(--ec-border); margin-bottom: 0.75rem; border-radius: 2px; }
.ec-card summary {
  padding: 1.1rem 1.25rem; cursor: pointer; display: flex;
  align-items: center; gap: 0.75rem; list-style: none;
  min-height: var(--tap-min); user-select: none;
}
.ec-card summary::-webkit-details-marker { display: none; }
.ec-card summary::marker { content: ""; }
.ec-card-num {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); color: var(--ec-muted);
  letter-spacing: 0.1em; min-width: 1.75rem; font-weight: 700;
}
.ec-card-titlewrap { flex: 1; }
.ec-card-title { font-size: 1.125rem; font-weight: 700; color: var(--ec-text); line-height: 1.3; }
.ec-card-sub { font-size: 0.95rem; color: var(--ec-muted); font-style: italic; margin-top: 2px; line-height: 1.4; }
.ec-card-toggle { color: var(--ec-navy); font-size: 1.5rem; font-weight: 300; flex-shrink: 0; line-height: 1; }
.ec-card[open] .ec-card-toggle::before { content: "−"; }
.ec-card:not([open]) .ec-card-toggle::before { content: "+"; }
.ec-card-body { border-top: 1px solid #E0DBCF; padding: 1.1rem 1.25rem 1.25rem; }
.ec-card-body p {
  display: flex; gap: 0.75rem; margin-bottom: 0.7rem;
  font-size: 1rem; line-height: 1.6; color: var(--ec-text);
}
.ec-card-body p:last-child { margin-bottom: 0; }
.ec-card-body p::before { content: "—"; color: var(--ec-navy); font-weight: 700; flex-shrink: 0; }
.ec-footer {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--ec-border);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); color: var(--ec-muted); line-height: 1.6;
}
.ec-footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.ec-footer a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ec-navy); text-decoration: none; font-weight: 700;
  min-height: var(--tap-min); padding: 0.5rem 0;
}
.ec-footer a:hover, .ec-footer a:focus { text-decoration: underline; }
.ec-disclaimer { color: #5A5149; }
.ec-page-nav {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--ec-border);
  display: grid; grid-template-columns: 1fr; gap: 0.75rem;
}
@media (min-width: 540px) {
  .ec-page-nav { grid-template-columns: 1fr 1fr; }
  .ec-page-nav .ec-page-nav-next { text-align: right; }
}
.ec-page-nav a {
  display: block; min-height: var(--tap-min);
  padding: 1rem 1.25rem; background: var(--ec-surface);
  border: 1.5px solid var(--ec-border); border-radius: 4px;
  text-decoration: none; color: var(--ec-text); font-family: Georgia, serif;
}
.ec-page-nav a:hover, .ec-page-nav a:focus { border-color: var(--ec-navy); background: var(--ec-intro-bg); }
.ec-page-nav .page-nav-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ec-muted); margin-bottom: 0.25rem; font-weight: 700; display: block;
}
.ec-page-nav .page-nav-title { font-size: 1.1rem; font-weight: 700; color: var(--ec-text); line-height: 1.3; display: block; }

/* PART III — Silent Holder */
.silent-holder { display: none; }

/* SMALL SCREEN TIGHTENING */
@media (max-width: 480px) {
  .site-header { padding: 2rem 1.25rem 1.75rem; }
  .slide-block { padding: 1.35rem 1.25rem; }
  .presenters-section { padding: 1.25rem; }
  .stat-figure { font-size: 1.75rem; }
  .wrap { padding: 0 1rem; }
}

/* ──────────────────────────────────────────────────────────────
   NUTS & BOLTS — Field resources (cheat sheets + templates)
   ────────────────────────────────────────────────────────────── */
.nb-page .nb-nav { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Georgia, serif; }
.nb-card { background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: 4px; margin-bottom: 1.25rem; overflow: hidden; page-break-inside: avoid; }
.nb-card-header {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1.1rem 1.25rem; background: var(--ec-intro-bg);
  border-bottom: 1px solid var(--ec-border); flex-wrap: wrap;
}
.nb-template .nb-card-header { background: var(--ec-ca-bg); border-bottom-color: var(--ec-orange); }
.nb-template .nb-card-num { color: var(--ec-orange-text); }
.nb-card-num {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); color: var(--ec-navy);
  letter-spacing: 0.1em; min-width: 1.75rem; font-weight: 700;
  padding-top: 0.25rem; flex-shrink: 0;
}
.nb-card-titlewrap { flex: 1; min-width: 200px; }
.nb-card-title {
  font-size: 1.25rem; font-weight: 700; color: var(--ec-text);
  line-height: 1.25; margin: 0 0 0.25rem;
  font-family: Georgia, "Times New Roman", serif;
}
.nb-card-sub { font-size: 0.95rem; font-style: italic; color: var(--ec-muted); line-height: 1.4; }
.nb-download {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.9rem; background: var(--ec-navy); color: #fff;
  text-decoration: none;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 3px; min-height: var(--tap-min); flex-shrink: 0;
}
.nb-download:hover, .nb-download:focus { background: var(--ec-text); color: var(--ec-ca-bg); }
.nb-download svg { flex-shrink: 0; }
.nb-card-body { padding: 1.25rem 1.25rem 1.5rem; }
.nb-callback {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.85rem; margin-bottom: 1.1rem;
  background: var(--ec-intro-bg); border-left: 3px solid var(--ec-navy);
  border-radius: 0 3px 3px 0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); color: var(--ec-text);
  letter-spacing: 0.04em; line-height: 1.45;
}
.nb-callback::before { content: "↺"; color: var(--ec-navy); font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.nb-callback a { color: var(--ec-navy); font-weight: 700; text-decoration: none; }
.nb-callback a:hover, .nb-callback a:focus { text-decoration: underline; }
.nb-week { margin-bottom: 1.25rem; }
.nb-week:last-child { margin-bottom: 0; }
.nb-week-label {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ec-orange-text); font-weight: 700;
  margin-bottom: 0.6rem; padding-bottom: 0.4rem;
  border-bottom: 1px dashed var(--ec-border);
}
.nb-checklist { list-style: none; padding: 0; margin: 0; }
.nb-checklist li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.5rem 0; font-size: 1rem; line-height: 1.5; color: var(--ec-text);
  border-bottom: 1px dotted #E0DBCF;
}
.nb-checklist li:last-child { border-bottom: none; }
.nb-box {
  display: inline-block; width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--ec-navy); border-radius: 2px;
  flex-shrink: 0; margin-top: 0.15rem; background: var(--ec-surface);
}
.nb-callout-gold {
  background: #FBF6E6; border-left: 4px solid var(--gold);
  padding: 0.95rem 1.1rem; margin-top: 1rem;
  font-size: 1rem; line-height: 1.55; color: var(--ec-text);
  border-radius: 0 4px 4px 0;
}
.nb-callout-gold strong { color: #8A6E20; }
.nb-template-hint {
  background: #F0F4FA; border-left: 3px solid var(--ec-navy);
  padding: 0.85rem 1rem; margin-bottom: 1rem;
  font-size: 0.95rem; line-height: 1.55; color: var(--ec-text); font-style: italic;
}
.nb-template-hint strong { color: var(--ec-navy); font-style: normal; }
.nb-template-hint:last-child { margin-bottom: 0; margin-top: 1rem; }
.nb-template-block {
  background: #FAF8F2; border: 1px solid var(--ec-border);
  border-radius: 4px; padding: 1rem 1.1rem;
  overflow-x: auto; margin-bottom: 1rem;
}
.nb-template-block pre { margin: 0; }
.nb-template-block code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92rem; line-height: 1.6; color: var(--ec-text);
  white-space: pre-wrap; word-wrap: break-word;
}
.nb-template-block code strong { color: var(--ec-navy); font-weight: 700; }
@media (max-width: 480px) {
  .nb-card-header { padding: 1rem 1rem; }
  .nb-card-body { padding: 1rem 1rem 1.25rem; }
  .nb-template-block code { font-size: 0.82rem; }
}

/* ──────────────────────────────────────────────────────────────
   CAT HERDER → CONDUCTOR — Three stacked sections (was 3-col)
   ────────────────────────────────────────────────────────────── */
.cc-grid { display: flex; flex-direction: column; gap: 1.75rem; margin: 1.5rem 0 1rem; }
.cc-col { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; margin-bottom: 0; }
.cc-col-head { background: var(--dark); color: #fff; padding: 1.4rem 1.4rem 1.25rem; border-bottom: 4px solid var(--gold); }
.cc-col-1 .cc-col-head { border-bottom-color: var(--coral); }
.cc-col-2 .cc-col-head { border-bottom-color: var(--teal); }
.cc-col-3 .cc-col-head { border-bottom-color: var(--gold); }
.cc-col-tag { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.4rem; }
.cc-col-1 .cc-col-tag { color: var(--coral); }
.cc-col-2 .cc-col-tag { color: var(--teal); }
.cc-col-3 .cc-col-tag { color: var(--gold); }
.cc-col-title { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.2; margin: 0 0 0.6rem; }
.cc-col-sub { font-size: 1rem; color: #D8E0EC; line-height: 1.55; margin: 0; }
.cc-col-body { padding: 1.4rem; flex: 1; }
.cc-col-body h4 {
  font-size: 1rem; font-weight: 700; color: var(--dark);
  margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.cc-col-body h4:first-child { margin-top: 0; }
.cc-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.cc-list li {
  position: relative; padding: 0.5rem 0 0.5rem 1.25rem;
  font-size: 1rem; line-height: 1.6; color: var(--text);
  border-bottom: 1px dotted var(--border);
}
.cc-list li:last-child { border-bottom: none; }
.cc-list li::before { content: "▸"; position: absolute; left: 0; top: 0.5rem; color: var(--teal); font-weight: 700; }
.cc-col-1 .cc-list li::before { color: var(--coral); }
.cc-col-2 .cc-list li::before { color: var(--teal); }
.cc-col-3 .cc-list li::before { color: var(--gold); }
.cc-list li strong { color: var(--dark); }
.cc-tip {
  margin-top: 1.5rem; padding: 1rem 1.1rem;
  border-left: 4px solid var(--teal); border-radius: 0 4px 4px 0;
  font-size: 0.98rem; line-height: 1.6; background: #E4F2F3;
}
.cc-tip strong { display: block; margin-bottom: 0.35rem; color: var(--dark); }
.cc-tip-coral { background: #FBEDE7; border-left-color: var(--coral); }
.cc-tip-teal  { background: #E4F2F3; border-left-color: var(--teal); }
.cc-tip-gold  { background: #FBF6E6; border-left-color: var(--gold); }
.cc-steps { list-style: none; padding: 0; margin: 0; counter-reset: cc-step; }
.cc-steps li { display: flex; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.cc-steps li:last-child { border-bottom: none; }
.cc-step-num {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem; font-weight: 800; color: var(--teal);
  min-width: 1.75rem; padding-top: 0.1rem; letter-spacing: 0.05em; flex-shrink: 0;
}
.cc-step-body { flex: 1; }
.cc-step-body h4 {
  font-size: 1.05rem; font-weight: 700; color: var(--dark);
  margin: 0 0 0.35rem; text-transform: none; letter-spacing: 0;
  padding: 0; border: none;
}
.cc-step-body p { font-size: 1rem; line-height: 1.6; color: var(--text); margin: 0; }
@media (max-width: 480px) {
  .cc-col-head { padding: 1.2rem 1.1rem 1.1rem; }
  .cc-col-body { padding: 1.2rem 1.1rem; }
  .cc-col-title { font-size: 1.3rem; }
}

/* ──────────────────────────────────────────────────────────────
   C-SUITE — Talk tracks, bedrock stats, sources
   ────────────────────────────────────────────────────────────── */
.cs-bedrock { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.25rem 0 1rem; }
@media (min-width: 640px) { .cs-bedrock { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cs-bedrock { grid-template-columns: repeat(4, 1fr); } }
.cs-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--teal); border-radius: 6px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column;
}
.cs-stat:nth-child(2n) { border-top-color: var(--gold); }
.cs-stat:nth-child(3n) { border-top-color: var(--coral); }
.cs-stat-figure { font-size: 1.85rem; font-weight: 800; color: var(--dark); line-height: 1.05; margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.cs-stat-claim { font-size: 0.95rem; color: var(--text); line-height: 1.5; margin-bottom: 0.6rem; flex: 1; }
.cs-stat-source { font-size: 0.8rem; color: var(--muted); font-style: italic; line-height: 1.4; }
.cs-stat-source a { color: var(--teal); text-decoration: none; font-weight: 600; }
.cs-stat-source a:hover, .cs-stat-source a:focus { text-decoration: underline; }
.cs-track { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 1.25rem; overflow: hidden; page-break-inside: avoid; }
.cs-track-head { background: var(--dark); color: #fff; padding: 1.5rem 1.5rem 1.25rem; border-bottom: 4px solid var(--gold); }
.cs-track-tag { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 0.45rem; }
.cs-track-head h3 { font-size: 1.55rem; font-weight: 700; color: #fff; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.cs-track-lens { font-size: 0.98rem; color: #D8E0EC; line-height: 1.55; margin: 0; }
.cs-track-lens strong { color: var(--gold); font-weight: 700; }
.cs-track-body { padding: 1.5rem; }
.cs-section-block { margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px dashed var(--border); }
.cs-section-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.cs-section-block h4 { font-size: 0.85rem; font-weight: 700; color: var(--teal); margin: 0 0 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cs-section-block p { font-size: 1rem; line-height: 1.6; color: var(--text); margin-bottom: 0.6rem; }
.cs-section-block p:last-child { margin-bottom: 0; }
.cs-section-block p strong { color: var(--dark); font-weight: 700; }
.cs-facts { list-style: none; padding: 0; margin: 0; }
.cs-facts li {
  position: relative; padding: 0.65rem 0 0.65rem 1.5rem;
  font-size: 1rem; line-height: 1.55; color: var(--text);
  border-bottom: 1px dotted var(--border);
}
.cs-facts li:last-child { border-bottom: none; }
.cs-facts li::before { content: "→"; position: absolute; left: 0; top: 0.65rem; color: var(--gold); font-weight: 700; }
.cs-facts li strong { color: var(--dark); font-weight: 700; }
.cs-cite { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--muted); font-style: italic; }
.cs-cite a { color: var(--teal); text-decoration: none; font-weight: 600; }
.cs-cite a:hover, .cs-cite a:focus { text-decoration: underline; }
.cs-assemble { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.75rem 1.75rem 1.5rem; margin-top: 1.5rem; }
.cs-source-list { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
@media (min-width: 720px) { .cs-source-list { grid-template-columns: 1fr 1fr; } }
.cs-source-list li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.6rem 0.85rem;
  font-size: 0.92rem; line-height: 1.45;
}
.cs-source-list li a { color: var(--teal); text-decoration: none; font-weight: 600; }
.cs-source-list li a:hover, .cs-source-list li a:focus { text-decoration: underline; }
.cs-source-disclaimer { font-size: 0.88rem; color: var(--muted); font-style: italic; line-height: 1.55; margin-top: 0.75rem; }
@media (max-width: 480px) {
  .cs-track-head { padding: 1.25rem 1.1rem 1.1rem; }
  .cs-track-body { padding: 1.2rem 1.1rem; }
  .cs-track-head h3 { font-size: 1.35rem; }
  .cs-stat-figure { font-size: 1.6rem; }
}

/* PRINT STYLES */
@media print {
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .site-header, .ec-header, .site-nav, .ec-page-nav, .page-nav,
  .ec-footer, .site-footer, .nb-download, .ec-intro, .ec-section-label,
  .fab-top, .back-to-top-inline, .page-toc, .section-nav-inline { display: none !important; }
  .nb-card, .cs-track, .ec-card { page-break-inside: avoid; border: 1px solid #888 !important; box-shadow: none !important; margin-bottom: 0.5rem !important; }
  .nb-card-header, .cs-track-head, .cc-col-head { background: #f4f4f4 !important; color: #000 !important; border-bottom: 1px solid #888 !important; }
  .nb-card-title, .cs-track-head h3, .cc-col-title { color: #000 !important; }
  .cs-track-lens, .cs-track-tag, .cc-col-tag, .cc-col-sub { color: #333 !important; }
  .nb-box { border: 1.5px solid #000 !important; width: 12pt; height: 12pt; }
  a { color: #000 !important; text-decoration: none !important; }
  .cs-cite a:after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ──────────────────────────────────────────────────────────────
   NAVIGATION FURNITURE — applied across all pages
   ────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

.fab-top {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  width: 52px; height: 52px;
  background: var(--dark); color: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700; text-decoration: none; line-height: 1;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background 0.15s;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  z-index: 100;
}
.fab-top.show { opacity: 0.95; visibility: visible; transform: translateY(0); }
.fab-top:hover, .fab-top:focus { opacity: 1; background: var(--coral); color: #fff; outline: none; }
.fab-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.edgecases-page .fab-top { background: var(--ec-navy); color: var(--ec-ca-bg); }
.edgecases-page .fab-top:hover, .edgecases-page .fab-top:focus { background: var(--ec-orange); color: #fff; }

.back-to-top-inline { text-align: center; margin: 1.25rem 0 0.5rem; padding-top: 0.5rem; }
.back-to-top-inline a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--tap-min); padding: 0.6rem 1.25rem;
  font-size: 0.95rem; font-weight: 600; color: var(--muted);
  background: transparent; border: 1.5px solid var(--border);
  border-radius: 24px; text-decoration: none; transition: all 0.15s;
}
.back-to-top-inline a::before { content: "\2191"; font-weight: 700; font-size: 1.05rem; }
.back-to-top-inline a:hover, .back-to-top-inline a:focus { background: var(--dark); color: var(--gold); border-color: var(--dark); }
.edgecases-page .back-to-top-inline a {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ec-muted); border-color: var(--ec-border); background: var(--ec-surface);
}
.edgecases-page .back-to-top-inline a:hover, .edgecases-page .back-to-top-inline a:focus {
  background: var(--ec-navy); color: #fff; border-color: var(--ec-navy);
}

.page-toc { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; margin: 1.5rem 0 2rem; }
.page-toc-label {
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 0.8rem;
}
.page-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-toc-list li { margin: 0; padding: 0; }
.page-toc-list li::before { content: ""; display: none; }
.page-toc-list a {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: 0.5rem 0.9rem; font-size: 0.92rem; font-weight: 600;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 22px;
  text-decoration: none; transition: all 0.15s;
}
.page-toc-list a:hover, .page-toc-list a:focus { background: var(--dark); color: var(--gold); border-color: var(--dark); outline: none; }
.edgecases-page .page-toc { background: var(--ec-surface); border-color: var(--ec-border); border-radius: 4px; }
.edgecases-page .page-toc-label { color: var(--ec-muted); font-family: "SFMono-Regular", Consolas, monospace; }
.edgecases-page .page-toc-list a {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.85rem; letter-spacing: 0.04em;
  background: var(--ec-bg); border-color: var(--ec-border);
  color: var(--ec-text); border-radius: 3px;
}
.edgecases-page .page-toc-list a:hover, .edgecases-page .page-toc-list a:focus {
  background: var(--ec-navy); color: #fff; border-color: var(--ec-navy);
}

.section-nav-inline {
  display: grid; grid-template-columns: 1fr; gap: 0.5rem;
  margin: 1rem 0 2.5rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 540px) { .section-nav-inline { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.section-nav-inline a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 0.6rem 1rem;
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 24px; text-decoration: none; gap: 0.4rem; transition: all 0.15s;
}
.section-nav-inline a:hover, .section-nav-inline a:focus {
  background: var(--dark); color: var(--gold); border-color: var(--dark); outline: none;
}
.section-nav-inline .sn-prev { justify-self: start; }
.section-nav-inline .sn-top  { justify-self: center; }
.section-nav-inline .sn-next { justify-self: end; }
@media (max-width: 539px) { .section-nav-inline a { width: 100%; } }
@media (max-width: 480px) { .fab-top { bottom: 0.85rem; right: 0.85rem; width: 48px; height: 48px; font-size: 1.4rem; } }