/* ============================================================
   Plan-Do-Reflect — layout & components
   Everything below reads colors/fonts from tokens.css variables.
   No hex values or font-family literals should appear here except
   inside one deliberate, clearly-labeled exception:
   .theme-switch — fixed reference swatches for each direction,
   shown regardless of the currently active theme.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-body);
  transition: background 0.2s ease;
}

/* ---------- Top nav ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 28px;
  height: 58px;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topnav .logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--logo-color);
  margin-right: 14px;
  white-space: nowrap;
  text-decoration: none;
}

.topnav-items {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.topnav .item {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-nav);
  text-decoration: none;
  white-space: nowrap;
}

.topnav .item.active {
  color: var(--text-nav-active);
}

/* Extra breathing room before Core Skills — it's the cross-cutting category,
   not another altitude in the Framework/Self/Team/Organization progression,
   so it reads as visually set apart rather than a fifth equal step. Chosen
   from three spacing options mocked up on icon-library.html's Nav Mockup.
   Targets the link itself (not :last-child) because References now follows it. */
.topnav-items .item[href="core-skills.html"] {
  margin-left: 40px;
}

/* ---------- Layout: sidebar + content ---------- */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 58px);
}

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
}

.sidebar .sec-title {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--text-caption);
}

.sidebar .sub-item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sidebar-text);
  text-decoration: none;
}

.sidebar .sub-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 700;
}

/* ---------- Content ---------- */
.content {
  background: var(--bg-content);
  padding: 40px 44px;
}

.content h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.content .lede {
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 520px;
  color: var(--text-body);
  opacity: 0.88;
  margin-bottom: 22px;
}

/* .tag / .tag.primary / .tag.secondary (the category + count pills) were
   retired from every page-hero — Try It is the only pill left, so
   .tag-row now just wraps that single link. --tag-primary-bg etc. stay in
   tokens.css; summary.css still reads them for its own unrelated chips. */
.tag-row {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}

/* ---------- Theme switcher (meta-control, intentionally fixed colors) ---------- */
.theme-switch {
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 30px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  z-index: 100;
}

.theme-switch button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.theme-switch button[data-theme="a"] { background: #facc15; }
.theme-switch button[data-theme="b"] { background: #c98a93; }
.theme-switch button[data-theme="c"] { background: #d7ff4b; }

.theme-switch button.is-active {
  border-color: #111214;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #111214;
}

.icon-lib-link {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid #111214;
  color: #111214;
  text-decoration: none;
}

@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---------- Sidebar: indented sub-links under the active parent ----------
   Only the sidebar item matching the current page renders its .sub-sub-list —
   authored per-page (static site, no client-side router), so "collapse the
   other, expand the new" happens naturally by which page you're on. */
.sidebar .sub-sub-list {
  display: flex;
  flex-direction: column;
  margin: 0 0 8px 14px;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

.sidebar .sub-sub-item {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-caption);
  text-decoration: none;
}

.sidebar .sub-sub-item:hover {
  color: var(--sidebar-text);
}

.sidebar .sub-sub-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 700;
}

/* ---------- Sub-page thin hero (lighter than the homepage .hero) ---------- */
.page-hero {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.page-hero .lede {
  margin-bottom: 0;
}

/* ---------- Generic content section (why it matters, etc.) ---------- */
.section-block {
  margin-bottom: 32px;
  max-width: 640px;
}

.section-block h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.section-block p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-body);
}

/* ---------- Framework list (Time Management and similar leaf pages) ---------- */
.framework-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}

/* Modifier — widens the 640px prose-width cap to 960px for a page whose
   content includes something wider than prose (a card grid, a diagram)
   that needs more room than a reading column but still shouldn't sprawl
   to the full layout width on a large monitor — uncapped read as "too
   wide" in practice, with a lonely 560px diagram stranded in a sea of
   whitespace. Cap individual paragraphs/lists back to ~640px inline
   where they're plain prose, so body text doesn't stretch uncomfortably
   wide just because the page also has a wide diagram. */
.framework-list.is-wide {
  max-width: 960px;
}

/* Divider between clusters within one framework-list (e.g. "Set Goals" vs.
   "Prioritize Work") — lighter than a full .stage-group-header, no color dot,
   since it's a sub-grouping within one page rather than a new stage. */
.framework-group-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 6px 0 -2px;
  scroll-margin-top: 80px;
}

.framework-group-label:first-child {
  margin-top: 0;
}

.framework-group-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-caption);
}

/* ---------- Pull quote (stylized book/source quotes, reusable anywhere) ---------- */
.pull-quote {
  border-left: 4px solid var(--accent);
  margin: 24px 0;
  padding: 2px 0 2px 20px;
  max-width: 560px;
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-heading);
}

/* Small eyebrow for non-book pull-quotes, e.g. a Tip — same container,
   swap the <cite> attribution for this label instead. */
.pull-quote .quote-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 6px;
}

/* ---------- Eisenhower-style 2x2 matrix diagram (real text, not an image —
   themes automatically via existing tokens, no per-theme variants needed) ---------- */
.matrix-diagram {
  display: grid;
  grid-template-columns: 76px repeat(2, 1fr);
  gap: 6px;
  max-width: 460px;
  margin: 12px 0 4px;
}

.matrix-diagram .m-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-caption);
  padding: 4px;
}

.matrix-diagram .m-cell {
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 68px;
}

.matrix-diagram .m-cell h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 3px;
  color: var(--text-heading);
}

.matrix-diagram .m-cell p {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-body);
}

.matrix-diagram .m-primary {
  background: var(--accent);
}
.matrix-diagram .m-primary h4,
.matrix-diagram .m-primary p {
  color: var(--accent-strong);
}

.matrix-diagram .m-secondary {
  background: var(--bg-content);
  border: 1px solid var(--border);
}

.matrix-diagram .m-muted {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
}
.matrix-diagram .m-muted h4 {
  color: var(--text-caption);
}
.matrix-diagram .m-muted p {
  color: var(--text-caption);
}

@media (max-width: 720px) {
  .matrix-diagram { grid-template-columns: 56px repeat(2, 1fr); }
}

/* Modifier — a 3x3 grid (the classic 9-box), for a framework with three
   levels per axis instead of two (e.g. Succession Planning's Performance
   x Potential grid). Same cell/axis classes, just one more column and a
   wider cap since there's more to fit. */
.matrix-diagram.is-three {
  grid-template-columns: 76px repeat(3, 1fr);
  max-width: 640px;
}

@media (max-width: 720px) {
  .matrix-diagram.is-three { grid-template-columns: 56px repeat(3, 1fr); }
}

/* ---------- Porter's Five Forces diagram (strategic-planning.html) — a
   plus-shaped grid, real text not an image, same "diagram over bullet
   list" approach as .matrix-diagram above. Rivalry sits in the center
   cell, highlighted, since the other four forces all act on it. ---------- */
.forces-diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 560px;
  margin: 14px 0 4px;
}

.forces-diagram .ff-cell {
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--accent);
}

.forces-diagram .ff-cell-icon {
  display: block;
  margin-bottom: 4px;
}

.forces-diagram .ff-cell h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 3px;
  color: var(--accent-strong);
}

.forces-diagram .ff-cell p {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--accent-strong);
}

.forces-diagram .ff-top { grid-column: 2; grid-row: 1; }
.forces-diagram .ff-left { grid-column: 1; grid-row: 2; }
.forces-diagram .ff-right { grid-column: 3; grid-row: 2; }
.forces-diagram .ff-bottom { grid-column: 2; grid-row: 3; }

.forces-diagram .ff-center {
  grid-column: 2;
  grid-row: 2;
  background: var(--accent-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.forces-diagram .ff-center h4,
.forces-diagram .ff-center p {
  color: var(--bg-content);
}

@media (max-width: 640px) {
  .forces-diagram {
    grid-template-columns: 1fr;
  }
  .forces-diagram .ff-cell,
  .forces-diagram .ff-center {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ---------- Pareto circles (80/20 Rule) — size shows magnitude, color
   ties corresponding circles across Effort/Result, arrows make the
   mapping explicit. Inline SVG so it themes via var(--...) directly,
   same approach as the homepage flywheel graphics. */
.pareto-circles {
  max-width: 420px;
  margin: 14px 0 4px 28px;
}

/* ---------- Critical Path diagram — two node-and-edge paths through the
   same project; the longer cumulative path (bold) is critical, the
   shorter one (dashed) carries slack. Node letters are illustrative, not
   tied to any other framework's naming. */
.critical-path-diagram {
  max-width: 420px;
  margin: 14px 0 4px;
}

.critical-path-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-caption);
}

.critical-path-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.critical-path-swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.critical-path-swatch.is-critical {
  background: var(--accent-strong);
}

.critical-path-swatch.is-slack {
  background: none;
  border-top: 3px dashed var(--border);
  height: 0;
}

/* ---------- Milestone track — checkpoints along the plan, connected by a
   line. Equal-width flex stops with a ::after line spanning from each
   dot's center to the next, classic CSS-only connected-timeline trick. ---------- */
.milestone-track {
  display: flex;
  margin: 16px 0 4px;
  max-width: 580px;
}

.milestone-stop {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 24px;
}

.milestone-stop:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

.milestone-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-strong);
  z-index: 1;
}

.milestone-stop h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--text-heading);
  margin-bottom: 2px;
  padding: 0 4px;
}

.milestone-stop p {
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--text-caption);
  padding: 0 4px;
}

/* ---------- Flywheel track — Plan/Do/Reflect as three connected stops
   (same connected-line trick as .milestone-track), each dot colored via
   --stage-color set inline per stop (var(--stage-plan) etc., same token
   technique as .stage-group-header's dot). Pair with a .doodle-note below
   using the loop-arrow icon to make the "it repeats" point explicit,
   rather than attempting a literal circular layout. ---------- */
.flywheel-track {
  display: flex;
  margin: 16px 0 4px;
  max-width: 560px;
}

.flywheel-stop {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 26px;
}

.flywheel-stop:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}

.flywheel-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--stage-color, var(--accent));
  border: 2px solid var(--bg-content);
  box-shadow: 0 0 0 2px var(--stage-color, var(--accent));
  z-index: 1;
}

.flywheel-stop h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.flywheel-stop p {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--text-caption);
  padding: 0 6px;
}

/* ---------- Gotcha list (Reality Check) — small icon per item instead of
   a bullet dot, same icon+text row shape as .doodle-row. ---------- */
.gotcha-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.gotcha-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gotcha-item svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.gotcha-item p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

/* ---------- Generic inline collapse toggle — same collapse mechanics as
   .try-it-inline-toggle/.try-it-collapse, for non-Try-It optional content
   (e.g. the enterprise 5-lens risk framework, tucked away by default). ---------- */
.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-caption);
  cursor: pointer;
}

.inline-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.inline-collapse.is-open {
  max-height: 900px;
}

.inline-collapse .section-block-inner {
  margin-top: 12px;
}

.pareto-legend {
  display: flex;
  gap: 18px;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-caption);
}

.pareto-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pareto-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.pareto-dot.is-vital {
  background: var(--accent);
}

.pareto-dot.is-rest {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
}

/* ---------- MIT slots (Most Important Things: exactly 3, nothing else) ---------- */
.mit-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  margin: 14px 0 4px;
}

.mit-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--bg-content);
  border: 1px solid var(--border);
}

.mit-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.mit-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.mit-slot.is-blocked {
  background: var(--bg-sidebar);
}

.mit-slot.is-blocked .mit-num {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-caption);
}

.mit-note {
  flex: 1;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-caption);
}

/* ---------- Boundary groups (Boundaries & Saying No: 3 icon-led cards) ---------- */
.boundary-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.boundary-group {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-content);
  border: 1px solid var(--border);
}

.boundary-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.boundary-group h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-heading);
  margin-bottom: 3px;
}

.boundary-group p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-body);
}

.boundary-group em {
  color: var(--text-heading);
  font-style: italic;
}

/* ---------- SMART Goals strip (5 letter cards) ---------- */
.smart-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 480px;
  margin: 14px 0 4px;
}

.smart-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 10px;
  background: var(--accent);
}

.smart-letter {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--accent-strong);
}

.smart-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

@media (max-width: 720px) {
  .smart-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Habit-Building: 3-Level System cards ---------- */
.level-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 520px;
  margin: 14px 0 4px;
}

.level-card {
  padding: 14px 12px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--bg-content);
}

.level-card.is-primary {
  background: var(--accent);
  border-color: var(--accent);
}

.level-pct {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text-heading);
}

.level-card.is-primary .level-pct { color: var(--accent-strong); }

.level-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 4px 0 6px;
  color: var(--text-heading);
}

.level-card.is-primary .level-label { color: var(--accent-strong); }

.level-desc {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-body);
}

.level-card.is-primary .level-desc { color: var(--accent-strong); }

@media (max-width: 720px) {
  .level-cards { grid-template-columns: 1fr; }
}

/* ---------- Habit-Building: 4 Laws of Behavior Change ---------- */
.laws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 4px;
}

.law-card {
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-content);
}

.law-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent-strong);
  background: var(--accent);
  margin-bottom: 8px;
}

.law-card h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.law-card p {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-body);
}

@media (max-width: 720px) {
  .laws-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Row layout variant — e.g. Focus & Deep Work's 4 Rules, easier to read than a 4-up grid */
.laws-grid--rows {
  grid-template-columns: 1fr;
}

.laws-grid--rows .law-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.laws-grid--rows .law-num {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* ---------- OKR tree (Objective branching into Key Results) ---------- */
.okr-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 340px;
  margin: 14px 0 4px;
}

.okr-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
}

.okr-objective {
  background: var(--accent);
  color: var(--accent-strong);
}

.okr-results {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.okr-result {
  background: var(--bg-content);
  border: 1px solid var(--border);
  color: var(--text-heading);
  font-size: 0.72rem;
  padding: 7px 10px;
}

/* ---------- Decomposition stack (Scope to Execution Framework) — a
   top-down hierarchy, narrowing rung by rung: Business Outcome →
   Deliverables → Work Packages → Tasks. Each rung indents further right
   to read as "narrowing," connected by a small down-chevron. The 100%
   Rule and Owner Test aren't rungs — they're checks that apply at every
   level, so they get their own dashed-border row below the stack instead
   of sitting inline as a peer step (same "dashed = rule, not a step"
   language as .example-box). ---------- */
.decomp-stack {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 14px 0 4px;
}

.decomp-rung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.decomp-rung:nth-child(3) { margin-left: 16px; }
.decomp-rung:nth-child(5) { margin-left: 32px; }
.decomp-rung:nth-child(7) { margin-left: 48px; }

.decomp-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decomp-rung h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.decomp-agile-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-caption);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.decomp-rung p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-body);
}

.decomp-connector {
  align-self: flex-start;
  margin: 2px 0 2px 29px;
  color: var(--accent-strong);
  opacity: 0.6;
}

.decomp-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  max-width: 520px;
}

.decomp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.decomp-check .decomp-icon {
  width: 26px;
  height: 26px;
}

.decomp-check strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-heading);
}

.decomp-check span {
  font-size: 0.76rem;
  color: var(--text-caption);
}

/* ---------- Comparison table (SMART Goals vs. OKRs) ---------- */
.compare-table-wrap {
  overflow-x: auto;
  max-width: 640px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.compare-table th,
.compare-table td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.compare-table thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent);
}

.compare-table thead th:first-child {
  background: var(--bg-content);
  color: var(--text-caption);
}

.compare-table tbody th {
  font-weight: 700;
  color: var(--text-heading);
  background: var(--bg-sidebar);
  white-space: nowrap;
}

.compare-table td {
  color: var(--text-body);
  line-height: 1.5;
}

/* ---------- Example callout (worked example inside a framework-item) ----------
   Dashed border deliberately distinguishes it from solid-border structural
   cards (.boundary-group, .mit-slot, etc.) — this is a sample, not a step. */
.example-box {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-content);
  border: 1px dashed var(--border);
  max-width: 480px;
}

.example-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 5px;
}

.example-box p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-body);
}

.example-box p + p {
  margin-top: 6px;
}

/* ---------- Stage boxes (self-management.html overview) — one bounding
   box per stage, plain divided rows inside instead of individually
   bordered cards. --stage-color set inline per box (var(--stage-plan)
   etc.), same tokens the homepage flywheel and sidebar dots use. ---------- */
.stage-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.stage-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  background: var(--bg-content);
  scroll-margin-top: 80px;
}

.stage-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.stage-box-header .stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.stage-box-header h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
}

.stage-box-intro {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-body);
  margin-bottom: 14px;
}

.stage-box-list {
  display: flex;
  flex-direction: column;
}

.stage-box-item {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
}

.stage-box-item:first-child {
  border-top: none;
  padding-top: 0;
}

/* Modifier — a small icon to the left of the title (organization.html).
   Only applied where the HTML opts in (.has-icon + .stage-box-item-icon +
   .stage-box-item-body), so pages reusing .stage-box-item without the
   icon markup — team.html, self-management.html, core-skills.html,
   leadership.html — render exactly as before. */
.stage-box-item.has-icon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.stage-box-item-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Modifier — bullet points instead of horizontal dividers between items */
.stage-box-list--bulleted .stage-box-item {
  border-top: none;
  padding: 5px 0 5px 16px;
  position: relative;
}

.stage-box-list--bulleted .stage-box-item:first-child {
  padding-top: 5px;
}

.stage-box-list--bulleted .stage-box-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-heading);
}

.stage-box-item h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-heading);
  margin-bottom: 3px;
}

.stage-box-item p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-caption);
}

/* ---------- Pomodoro icon (tomato-shaped timer, per the technique's own
   naming — a clock face doubles as the tomato body) ---------- */
.pomodoro-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.pomodoro-icon {
  flex-shrink: 0;
}

.pomodoro-cycle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cycle-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
}

.cycle-seg.is-work {
  width: 36px;
  background: var(--accent);
  color: var(--accent-strong);
}

.cycle-seg.is-break {
  width: 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  color: var(--text-caption);
  font-size: 0.6rem;
}

.cycle-seg.is-longbreak {
  width: 52px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  color: var(--text-caption);
}

.pomodoro-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-caption);
}

.two-minute-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.two-minute-icon {
  flex-shrink: 0;
}

.annotation-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.annotation-sm {
  font-size: 1rem;
}

/* ---------- Handwritten annotation (occasional accent inside a visual,
   never real content — see --font-hand in tokens.css). Kept in normal
   document flow (no absolute positioning) so it can't overflow its
   container at narrow widths. */
.annotation {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--accent-strong);
  line-height: 1;
}

/* ---------- Doodle Note — named, reusable treatment: one or more small
   hand-drawn icons paired with regular-weight text, inside a single
   continuous gold left border like .pull-quote. Text stays in the normal
   body font — the icon + border are what make it stand out, not a
   handwriting font applied to full sentences (that reads as too much).
   First used for the MLP note and Sample Goal/Tenets on Scope to
   Execution / Project Charter (project-program-management.html); reuse
   anywhere a quick illustrated aside fits. A single .doodle-row inside is
   the common case; stack more than one .doodle-row for related examples
   so they share one border instead of each getting its own. ---------- */
.doodle-note {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 0 10px 16px;
  border-left: 4px solid var(--accent);
  scroll-margin-top: 80px;
}

.doodle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.doodle-row svg {
  flex-shrink: 0;
}

.doodle-row p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

/* ---------- Insight aside — a small tinted card for a single dense
   paragraph that deserves to stand apart from the surrounding prose:
   hand-drawn icon + a short handwritten label + the paragraph itself.
   Reuses the icon+handwriting-label language of .annotation, just packaged
   as a standalone block instead of a caption pinned to something else.
   Good for a short run of 2-4 paragraphs that each make one distinct
   point — stack multiple with normal spacing between them. ---------- */
.insight-aside {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-sidebar);
}

.insight-aside svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.insight-aside-body {
  flex: 1;
  min-width: 0;
}

.insight-aside-label {
  display: block;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--accent-strong);
  line-height: 1;
  margin-bottom: 5px;
}

.insight-aside p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}

/* Collapsible variant of .insight-aside (native <details>): the icon and
   label sit in the clickable <summary>; the body stays hidden until opened. */
.insight-aside-collapsible {
  display: block;
}

.insight-aside-collapsible > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.insight-aside-collapsible > summary::-webkit-details-marker {
  display: none;
}

.insight-aside-collapsible > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--accent-strong);
}

.insight-aside-collapsible[open] > summary::after {
  content: "\2212";
}

.insight-aside-collapsible > summary .insight-aside-label {
  margin-bottom: 0;
}

.insight-aside-collapsible .insight-aside-body {
  margin-top: 10px;
  padding-left: 38px;
}

.insight-aside-collapsible ul {
  margin: 6px 0 8px;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-body);
}

/* ---------- Example switch — toggles which worked example's content is
   visible inside a page (currently product-management.html: iPod,
   RouteWise). Every example's content lives in the DOM at all times,
   tagged [data-example="<id>"]; js/example-switch.js shows/hides by
   clearing/setting inline display. Only the fallback example (ipod) gets
   an explicit CSS default, so there's a sensible no-JS/pre-JS state —
   adding a new example needs zero CSS changes, just new [data-example]
   content and a new toggle button. ---------- */
[data-example] {
  display: none;
}
[data-example="ipod"] {
  display: flex;
}
.example-label[data-example] {
  display: none;
}
.example-label[data-example="ipod"] {
  display: inline;
}
.example-label-icon[data-example="ipod"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.example-block[data-example] {
  display: none;
}
.example-block[data-example="ipod"] {
  display: block;
}

.example-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
}

.example-switch-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: 2px;
}

.example-switch button {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.example-switch button:hover {
  border-color: var(--accent-strong);
}

.example-switch button.is-active {
  background: var(--accent-strong);
  color: var(--bg-content);
  border-color: var(--accent-strong);
}


.pull-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-caption);
}

.reflect-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-sidebar);
  border-left: 3px solid var(--stage-plan);
  border-radius: 6px;
}

.reflect-callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.reflect-callout p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

.reflect-callout a {
  color: var(--accent-strong);
  font-weight: 600;
}

.framework-item {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 12px;
  scroll-margin-top: 80px;
}

.framework-item .fw-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-strong);
  background: var(--accent);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.framework-item h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.framework-item p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-body);
}

/* ---------- Sub-section divider inside a merged framework-item (e.g. "The
   Project Plan" bundling Critical Path + Risk Management under one
   accordion). Not a new step of its own — a heading break within one. ---------- */
.fw-subhead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
  margin: 24px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}

.fw-subhead:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

/* ---------- Back to top — subtle link at the end of a long section's
   content, jumping back to that section's own heading rather than the
   page top. ---------- */
.back-to-top {
  display: flex;
  width: fit-content;
  margin-left: auto;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-caption);
  text-decoration: none;
}

.back-to-top:hover {
  color: var(--accent-strong);
}

.back-to-top svg {
  flex-shrink: 0;
}

/* ---------- Framework accordion — modifier for content-dense pages (e.g.
   project-program-management.html) where a full linear scroll of every
   framework is too much. Collapsed by default; .is-open reveals .fw-body. ---------- */
.framework-item.is-accordion {
  display: block;
  padding: 0;
}

.fw-toggle {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.fw-toggle-text {
  flex: 1;
  min-width: 0;
}

.fw-toggle-text h3 {
  margin-bottom: 0;
}

.fw-teaser {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-caption);
  margin-top: 4px;
  transition: opacity 0.15s ease;
}

.is-accordion.is-open .fw-teaser {
  display: none;
}

.fw-chevron {
  flex-shrink: 0;
  margin-top: 6px;
  color: var(--text-caption);
  transition: transform 0.2s ease;
}

.is-accordion.is-open .fw-chevron {
  transform: rotate(180deg);
}

.fw-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.is-accordion.is-open .fw-body {
  max-height: 3200px;
  padding: 0 20px 20px;
}

.accordion-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.8rem;
  color: var(--text-caption);
  margin-bottom: 12px;
}

.accordion-hint-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.accordion-hint svg {
  flex-shrink: 0;
}

.collapse-all-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-caption);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}

.collapse-all-btn:hover {
  color: var(--accent-strong);
}

/* ---------- Subcategory grid (root landing pages, e.g. self-management.html) ---------- */
.subcat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
}

.subcat-card {
  display: block;
  padding: 20px;
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
}

.subcat-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.subcat-icon {
  flex-shrink: 0;
}

.subcat-card p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- Stage groups (Plan/Do/Reflect groupings on root landing pages) ----------
   --stage-color is set inline per group (var(--stage-plan) etc. from tokens.css)
   so this stays a single reusable block instead of three near-duplicate ones. */
.stage-group {
  margin-bottom: 36px;
}

.stage-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.stage-group-header .stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stage-color, var(--text-caption));
  flex-shrink: 0;
}

.stage-group-header h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
}

.stage-group-intro {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-body);
  margin-bottom: 16px;
  max-width: 560px;
}

/* Placeholder card for a known content gap — not yet built */
.subcat-card.is-gap {
  border-style: dashed;
  opacity: 0.75;
}

.subcat-card .card-flag {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-caption);
}

/* ---------- Sidebar: Plan/Do/Reflect groupings (mirrors .stage-group above) ---------- */
.sidebar-group {
  margin-bottom: 16px;
}

.sidebar .group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin: 4px 12px 6px;
}

/* Cross-cutting marker: brackets a group label that doesn't belong to any
   one altitude, in a fixed gold rather than the active theme's accent, so
   it reads as "different" no matter which style direction is active. */
.group-label.is-crosscutting,
.stage-box-header h2.is-crosscutting {
  color: var(--accent-gold);
}

.is-crosscutting::before,
.is-crosscutting::after {
  color: var(--accent-gold);
  font-weight: 800;
}

.is-crosscutting::before { content: "["; margin-right: 5px; }
.is-crosscutting::after { content: "]"; margin-left: 5px; }

/* Indent so the link text lines up under the first letter of the group
   label above it (dot width + gap = 13px past the label's own edge). */
.sidebar-group > .sub-item,
.sidebar-group > .sub-item-group {
  margin-left: 13px;
}

@media (max-width: 720px) {
  .subcat-grid { grid-template-columns: 1fr; }
  .framework-item { flex-direction: column; }
}

/* ---------- Homepage (root index.html) ---------- */
.home {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}

.hero {
  text-align: center;
  margin-bottom: 56px;
}

.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 10px;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--text-heading);
  margin-bottom: 4px;
}

.hero-title-arrow {
  display: inline-block;
  padding: 0 8px;
  color: var(--text-caption);
  font-weight: 400;
}

.hero-title-rule {
  width: 60%;
  max-width: 480px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.hero-logo {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: 0 auto 20px;
}

.hero-sub {
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-body);
  text-align: left;
}

.hero-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 22px;
  border-radius: 30px;
  background: var(--accent);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.hero-cta:hover {
  opacity: 0.88;
}

/* ---------- Homepage Why/What/How/When cards ---------- */
.home-explainer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.home-explainer-card {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
}

.home-explainer-card h2 {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--logo-color);
  background: var(--bg-nav);
  margin: -22px -20px 14px;
  padding: 14px 20px;
  border-radius: 11px 11px 0 0;
}

.home-explainer-card p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-body);
}

.home-explainer-card p + p {
  margin-top: 10px;
}

.home-explainer-card .explainer-list {
  margin: 10px 0;
}

.home-explainer-card .explainer-list li {
  font-size: 0.84rem;
}

@media (max-width: 900px) {
  .home-explainer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .home-explainer-grid { grid-template-columns: 1fr; }
}

.explainer-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Modifier — adds real bullet markers, used where the list stands alone
   rather than living inside a card (e.g. homepage's tabbed panels don't
   use this). Scoped so it doesn't change .explainer-list's other uses. */
.explainer-list.is-bulleted {
  list-style: disc;
  padding-left: 20px;
}

/* Modifier — real numbered markers, same reasoning as .is-bulleted but for
   an ordered sequence of steps rather than an unordered set of items. */
.explainer-list.is-numbered {
  list-style: decimal;
  padding-left: 20px;
}

.explainer-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
}

.explainer-list strong {
  color: var(--text-heading);
}

/* ---------- Numbered principle list — a short set of named principles,
   each with a circular accent badge instead of a bullet. Lighter-weight
   than .framework-item's fw-num (no card border/background), for use
   inside a section that's already inside its own card or section-block. ---------- */
.num-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.num-list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Modifier — wraps each item in its own bordered card and caps the list
   to the page's prose width (640px), so a sequence of named steps reads
   as distinct units and never stretches wider than the surrounding
   paragraphs just because its container has more room. */
.num-list.is-cards {
  max-width: 640px;
}

.num-list.is-cards .num-list-item {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.num-badge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-strong);
  background: var(--accent);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Modifier — a plain dot instead of a number, for a list nested inside an
   already-numbered framework-item (the item's own fw-num is the one tier
   of numbering; a second numbered tier inside it reads as two competing
   sequences). */
.num-badge.is-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
}

/* ---------- PI Calendar — a year-long Program Increment calendar, one row
   per quarter, each row an IP week (gold) plus six sprints (solid accent
   color — no alternating shade, which read as bumblebee stripes). The
   year label, quarter month-labels, and "Today" marker are filled in by
   js/annual-calendar.js, which also wires up the Year and FY-start-month
   pickers so the whole thing recomputes for any fiscal calendar. ---------- */
.pi-calendar {
  margin-top: 14px;
  padding: 18px 20px;
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 640px;
}

.pi-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.pi-calendar-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-heading);
}

.pi-calendar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pi-calendar-controls label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-caption);
}

.pi-calendar-controls select {
  font-size: 0.74rem;
  font-family: var(--font-body);
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-sidebar);
  color: var(--text-body);
}

.pi-calendar-footnote {
  margin-top: 14px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-caption);
}

.pi-calendar-rows {
  display: flex;
  flex-direction: column;
}

/* Each row stacks the label+bar line over a milestones line, so any number
   of org/people-calendar chips can wrap without colliding — replaces an
   earlier version that absolute-positioned a single floating badge, which
   only worked for exactly one milestone per quarter. A thin rule between
   quarters (not above the first) marks where one PI ends and the next
   begins. */
.pi-calendar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
}

.pi-calendar-row:first-child {
  padding-top: 0;
}

.pi-calendar-row:last-child {
  padding-bottom: 0;
}

.pi-calendar-row + .pi-calendar-row {
  border-top: 1px solid var(--border);
}

.pi-calendar-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pi-calendar-row-milestones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 72px;
  min-height: 18px;
}

.pi-calendar-row-label {
  width: 60px;
  flex-shrink: 0;
  text-align: right;
}

.pi-calendar-q {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-heading);
}

.pi-calendar-months {
  display: block;
  font-size: 0.64rem;
  color: var(--text-caption);
}

.pi-calendar-bar {
  position: relative;
  display: flex;
  gap: 3px;
  flex: 1;
  height: 34px;
}

.pi-calendar-segment {
  border-radius: 9px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pi-calendar-segment.is-ip {
  background: var(--accent-gold);
  flex: 1;
}

.pi-calendar-segment.is-ip svg {
  width: 15px;
  height: 15px;
}

/* Sprints all share the theme's own pop color (--accent) — alternating it
   with --accent-strong per sprint read as bumblebee stripes rather than
   one continuous cadence, so every sprint block is the same solid color. */
.pi-calendar-segment.is-iter {
  background: var(--accent);
  color: var(--accent-strong);
  flex: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
}

/* PI Planning prep — a light-gray band under the bar spanning Sprint 4
   through Sprint 6, mirroring the bar's own flex ratios (2 per sprint, 1
   for the IP segment) so it lines up under the right sprints regardless
   of container width, instead of fragile fixed percentages. The
   "Continuous PI Planning" pill sits inside the bracket itself, right-
   aligned under the line, rather than in the milestones row below. */
.pi-calendar-prep-track {
  display: flex;
  gap: 3px;
  margin-top: 8px;
  padding-left: 72px;
}

.pi-calendar-prep-spacer {
  flex-shrink: 0;
}

.pi-calendar-prep-bracket {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.pi-calendar-prep-line {
  width: 100%;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
}

.pi-calendar-today {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 3px;
  background: var(--accent-strong);
  border-radius: 2px;
}

.pi-calendar-today::after {
  content: 'Today';
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent-strong);
  white-space: nowrap;
}

.pi-calendar-milestone {
  background: var(--accent-strong);
  color: var(--bg-content);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.pi-calendar-milestone.is-people {
  background: var(--accent-gold);
}

.pi-calendar-milestone.is-prep {
  background: var(--border);
  color: var(--text-body);
}

.pi-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pi-calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-caption);
}

.pi-calendar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pi-calendar-legend-dot.is-ip { background: var(--accent-gold); }
.pi-calendar-legend-dot.is-iter { background: var(--accent); }
.pi-calendar-legend-dot.is-milestone { background: var(--accent-strong); border-radius: 999px; }
.pi-calendar-legend-dot.is-people-milestone { background: var(--accent-gold); border-radius: 999px; }
.pi-calendar-legend-dot.is-prep { background: var(--border); }

.num-list-item p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

.num-list-item strong {
  color: var(--text-heading);
}

/* ---------- Inline example — sits under one bullet in an explainer list,
   citing a real-world instance without cluttering the bullet's own text.
   Lighter-weight than .example-box (a full worked example): just a citation. ---------- */
.li-example {
  display: block;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-sidebar);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-body);
}

/* When a single .li-example box needs to cite more than one example,
   list them as gold-dot bullets inside the one box rather than running
   them together in a semicolon-joined sentence or splitting into
   separate boxes (too heavy inside a compact card). Opt-in: only kicks
   in when the content is a <ul>, so plain-text .li-example usages
   elsewhere are unaffected. */
.li-example ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.li-example li {
  position: relative;
  padding-left: 14px;
}

.li-example li + li {
  margin-top: 5px;
}

.li-example li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent-gold);
}

/* ---------- MVV cards (vision-mission.html) — three icon-led cards
   replacing a plain bulleted definition list, so Mission/Vision/Values
   read as distinct, memorable ideas instead of one wall of bullets.
   Each card's --mvv-color (set inline) colors its top border and icon;
   the worked-example cards below reuse the same three colors as dots so
   Apple/Patagonia/LEGO visually tie back to these. ---------- */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}

/* Modifier — fills available width instead of a fixed 3-up, for a card
   count other than 3 (e.g. Strategic Theme's 5). Packs as many 180px+
   columns as fit rather than wrapping to an uneven last row at a fixed
   column count. Use a class, not an inline style, for this — an inline
   grid-template-columns would outrank the mobile collapse rule below
   and never actually flex down to one column. */
.mvv-grid.is-auto {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Modifier — a fixed 4-up row, for a card count that's exactly 4 and
   should stay that way (e.g. Strategic Theme's four core value drivers,
   with a 5th "Other" catch-all that deliberately isn't part of this row
   — see .mvv-card.is-wide below). */
.mvv-grid.is-four {
  grid-template-columns: repeat(4, 1fr);
}

/* Modifier — a fixed 2-up row, for cards carrying enough text (a
   description plus a .mvv-card-footer) that 3+ across reads cramped —
   e.g. Goleman's Six on leadership-styles.html. */
.mvv-grid.is-two {
  grid-template-columns: repeat(2, 1fr);
}

.mvv-card {
  background: var(--bg-content);
  border: 1px solid var(--border);
  border-top: 3px solid var(--mvv-color, var(--accent));
  border-radius: 12px;
  padding: 16px 16px 18px;
}

/* Optional footer inside a card — one or two short labeled lines (e.g.
   "Best when" / "Watch for") appended below a card's own description,
   set off with a dashed rule so it reads as a quick-reference fact
   rather than more body copy. Established on leadership-styles.html. */
.mvv-card-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-caption);
}

.mvv-card-footer p + p {
  margin-top: 3px;
}

.mvv-card-footer strong {
  color: var(--text-heading);
}

/* Title row + info badge — for a card that's a peer in its grid but
   needs a one-glance flag that it's a special case (e.g. IC Product
   Manager sitting among Managers of Work despite not owning delivery
   the way the others do). The badge's title attribute carries the
   explanation on hover/focus; .mvv-card-footer should still spell it
   out in the card body too, since hover-only text isn't reliable on
   touch devices. */
.mvv-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.mvv-card-title-row h3 {
  margin-bottom: 0;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--bg-content);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
  cursor: help;
}

/* Modifier — lays a single card out horizontally (icon, heading+body,
   worked example as three flex columns) instead of the grid's stacked
   layout. For a catch-all/outlier item that deliberately isn't a peer
   card in the grid above it (e.g. Strategic Theme's "Other" row). */
.mvv-card.is-wide {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border-top: none;
  border-left: 3px solid var(--mvv-color, var(--accent));
}

.mvv-card.is-wide .mvv-card-icon {
  margin-bottom: 0;
  margin-top: 2px;
}

.mvv-card.is-wide .mvv-card-body {
  flex: 0 1 260px;
}

.mvv-card.is-wide .li-example {
  flex: 1;
  margin-top: 0;
}

@media (max-width: 720px) {
  .mvv-card.is-wide {
    flex-direction: column;
  }
}

.mvv-card-icon {
  display: block;
  margin-bottom: 10px;
}

.mvv-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
  margin-bottom: 5px;
}

.mvv-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- MVV worked examples (vision-mission.html) — a 3-up card
   grid replacing stacked .li-example boxes, so Apple/Patagonia/LEGO read
   side by side instead of one under the next. Dot colors reuse the three
   .mvv-card accent colors above. ---------- */
.mvv-example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.mvv-example-card {
  background: var(--bg-content);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.mvv-example-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.mvv-example-icon {
  flex-shrink: 0;
  display: block;
}

.mvv-example-header strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-heading);
}

.mvv-example-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-body);
  margin-top: 7px;
}

.mvv-example-row:first-of-type {
  margin-top: 0;
}

.mvv-example-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}

@media (max-width: 720px) {
  .mvv-grid,
  .mvv-example-grid,
  .mvv-grid.is-auto,
  .mvv-grid.is-four,
  .mvv-grid.is-two {
    grid-template-columns: 1fr;
  }
}

/* ---------- Site footer (all pages) ---------- */
.site-footer {
  text-align: center;
  padding: 28px 24px 110px;
  font-size: 0.82rem;
  color: var(--text-caption);
}

.site-footer a {
  color: var(--text-caption);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--text-heading);
}

/* ---------- References page ---------- */
.page-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.references {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.references-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 40px;
  max-width: 560px;
}

.ref-section {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.ref-section:last-child {
  border-bottom: none;
}

.ref-section h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
}

.ref-group {
  margin-bottom: 16px;
}

.ref-group h3 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 8px;
}

.ref-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ref-list li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-body);
}

.ref-list a {
  color: var(--accent-strong);
  text-decoration: underline;
}

.ref-list a:hover {
  opacity: 0.8;
}

/* ---------- Title font — the big page-title elements (page-hero h1, the
   homepage's hero-title) use their own fixed font across all three themes,
   independent of each theme's own --font-heading (which still governs
   h2/h3/etc.). Chosen after an in-page A/B picker; see --font-title in
   tokens.css. ---------- */
.content h1,
.hero-title,
.page-title {
  font-family: var(--font-title);
  font-weight: 800;
}

/* ---------- Try It (one per page, bottom of content — a copyable prompt
   for the user's AI tool of choice, not a real embedded agent) ---------- */
.try-it-box {
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--bg-content);
  max-width: 640px;
  margin-top: 32px;
  scroll-margin-top: 80px;
}

/* ---------- Try It, nested inside a framework-item (e.g. Project Charter
   on project-program-management.html) — collapsed independently of the
   section's own open/closed state, so an already-expanded section doesn't
   dump the whole prompt box into view. Wired up in framework-accordion.js
   alongside .fw-toggle, same collapse mechanics + chevron rotation. ---------- */
.try-it-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-heading);
  cursor: pointer;
}

.try-it-inline-toggle .fw-chevron {
  margin-top: 0;
}

.try-it-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.try-it-collapse.is-open {
  max-height: 2000px;
}

.try-it-collapse .try-it-box {
  margin-top: 12px;
}

.try-it-quicklink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-strong);
  text-decoration: none;
}

.try-it-quicklink:hover {
  opacity: 0.88;
}

.try-it-quicklink svg {
  flex-shrink: 0;
}

.try-it-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.try-it-header h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-heading);
}

.try-it-box > p {
  font-size: 0.88rem;
  color: var(--text-body);
  margin-bottom: 12px;
}

.try-it-prompt {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-heading);
  margin-bottom: 12px;
}

/* Most Try It prompts are one flowing paragraph (plain text node). A few
   longer ones (e.g. Status Report's formatting spec) are structured with
   real <p>/<ul><li> instead, so the shape stays readable — copy behavior
   for these relies on innerText, see try-it.js. */
.try-it-prompt p {
  margin-bottom: 10px;
}

.try-it-prompt p:last-child {
  margin-bottom: 0;
}

.try-it-prompt ul {
  margin: 2px 0 10px 20px;
}

.try-it-prompt li {
  margin-bottom: 5px;
}

.try-it-prompt li:last-child {
  margin-bottom: 0;
}

.try-it-copy {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-strong);
  cursor: pointer;
}

.try-it-copy:hover {
  opacity: 0.9;
}

.try-it-copy.is-copied {
  background: var(--bg-sidebar);
  color: var(--text-caption);
}

/* ---------- Status card — mini "at a glance" mockup previewing the top
   of an actual status report (Project Status Report Template). ---------- */
.status-card {
  margin-top: 16px;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-content);
  padding: 14px 16px;
}

.status-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.status-card-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 2px;
}

.status-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text-heading);
}

.status-card-period {
  font-size: 0.7rem;
  color: var(--text-caption);
  white-space: nowrap;
}

.status-card-health {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-caption);
}

.status-pill .rag-dot {
  margin-right: 1px;
}

.status-card-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-caption);
  margin-bottom: 5px;
}

.status-card-progress-track {
  height: 7px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  overflow: hidden;
}

.status-card-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
}

.status-card-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-body);
}

/* ---------- Status card additions — header badge/lead, dashed section
   dividers, skeleton "squiggle" placeholders for prose fields, donut
   chart (Task Progress, 3 segments), and Planned vs. Actual mini bars. ---------- */
.status-card-header {
  align-items: flex-start;
}

.status-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.status-card-lead {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-card-lead-tag {
  font-size: 0.66rem;
  color: var(--text-caption);
}

.status-card-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.status-card-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin-bottom: 9px;
}

.status-card-sublabel {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-caption);
  margin-bottom: 7px;
}

.status-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-card-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-card-list-row svg {
  flex-shrink: 0;
}

.donut-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  color: var(--text-body);
}

.donut-legend-item strong {
  margin-left: auto;
  padding-left: 14px;
  color: var(--text-heading);
}

.donut-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-swatch.is-complete { background: var(--accent-strong); }
.donut-swatch.is-atrisk { background: var(--accent); }
.donut-swatch.is-notstarted { background: none; border: 1.5px solid var(--border); }

.compare-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.compare-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-bar-tag {
  width: 48px;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-caption);
}

.compare-bar-track {
  flex: 1;
  min-width: 90px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  overflow: hidden;
}

.compare-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-strong);
  box-sizing: border-box;
}

.compare-bar-fill.is-planned {
  background: none;
  border: 1.5px dashed var(--border);
}

.compare-bar-value {
  width: 30px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-heading);
}

/* ---------- RAG (Red/Amber/Green) status dots — Health Summary. ---------- */
.rag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.rag-dot.is-green { background: var(--status-green); }
.rag-dot.is-amber { background: var(--status-amber); }
.rag-dot.is-red { background: var(--status-red); }

.status-card-rag-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.status-card-rag-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
}

.status-card-rag-item strong {
  color: var(--text-heading);
}

.status-card-rag-item span:last-child {
  color: var(--text-caption);
}

.status-card-columns {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.status-card-column {
  flex: 1;
  min-width: 150px;
}

.status-card.is-wide {
  max-width: 640px;
}

/* ---------- Priority tag — small P0-P3 badge, darkest/most solid for the
   highest priority, fading to an outline for P3. Used inside PRD-style
   faux-document cards next to a user story or the framework's own legend. ---------- */
.priority-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.priority-tag.is-p0 {
  background: var(--accent-strong);
  color: var(--bg-content);
}

.priority-tag.is-p1 {
  background: var(--accent);
  color: var(--text-heading);
}

.priority-tag.is-p2 {
  background: var(--bg-sidebar);
  color: var(--text-caption);
  border: 1px solid var(--border);
}

.priority-tag.is-p3 {
  background: none;
  color: var(--text-caption);
  border: 1px dashed var(--border);
}

/* ---------- Course pages (ai-beyond-fundamentals.html) ----------
   Modules reuse .framework-item.is-accordion; these add the few pieces a
   course needs on top: sub-headings inside a module, a project/rubric box,
   a full-width diagram, and small caption notes. Modules run long, so the
   open max-height is raised just for .course-module. */
.is-accordion.is-open.course-module .fw-body {
  max-height: 12000px;
}

.course-subhead {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 18px 0 6px;
}

.fw-body > p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-body);
}

.course-project {
  margin: 18px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: 8px;
  background: var(--bg-sidebar);
}

.course-project-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 6px;
}

.course-project p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-body);
}

.course-project p + p {
  margin-top: 6px;
}

.course-note {
  margin-top: 8px;
  font-size: 0.78rem !important;
  color: var(--text-caption) !important;
}

.course-diagram {
  margin: 16px 0 8px;
  /* A diagram drawn at 760px wide would shrink its text to illegible on a phone, so it keeps a
     minimum width and scrolls sideways instead of scaling down further. */
  overflow-x: auto;
}

.course-diagram svg {
  width: 100%;
  min-width: 620px;
  height: auto;
  display: block;
  font-family: var(--font-body);
}

.course-diagram figcaption {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-caption);
}

/* ---------- Ratio bar — a single stacked bar split into labeled segments
   by relative proportion (e.g. the 70-20-10 development model on
   development-plans.html). Each segment's width is set inline per
   instance since the ratio is content, not styling. ---------- */
.ratio-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 14px;
}

.ratio-bar-segment {
  height: 100%;
}

.ratio-bar-segment.is-a { background: var(--accent-strong); }
.ratio-bar-segment.is-b { background: var(--accent); }
.ratio-bar-segment.is-c { background: var(--accent-gold); }

.ratio-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 12px;
}

.ratio-bar-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 300px;
}

.ratio-bar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.ratio-bar-legend-item p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

/* ---------- Platform hover cards (ai-fundamentals comparison table) ----------
   Card is position: fixed and placed by js/platform-tips.js, because
   .compare-table-wrap's overflow-x: auto would clip an absolute tooltip. */
.platform-tip {
  display: table;
  margin-bottom: 4px;
  border-bottom: 1px dotted var(--text-caption);
  cursor: help;
}

.platform-item {
  display: table;
  margin-bottom: 4px;
}

.platform-tip:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.platform-tip-card {
  display: none;
  position: fixed;
  z-index: 50;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-content);
  color: var(--text-body);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem;
  line-height: 1.5;
  pointer-events: none;
}

.platform-tip-card strong {
  color: var(--text-heading);
}

.platform-tip-card.is-open {
  display: block;
}

.platform-tip-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-caption);
}