/* ============================================================
   VIEWS — page-specific layouts
   ============================================================ */


/* ── PROJECT OVERVIEW (§20.1 — IDENTICAL LAYOUT) ── */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-6);
  padding: var(--s-6);
}
@media (max-width: 1024px) { .overview { grid-template-columns: 1fr; } }

.narrative {
  font-size: var(--t-md); line-height: 1.7;
  color: var(--text-primary);
  max-width: 70ch;
}

.chips-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--r-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.chip-value { font-size: var(--t-base); font-weight: 600; color: var(--text-primary); font-feature-settings: 'tnum' 1; }
.chip-label { font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

.connectors {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-faint);
  display: flex; flex-direction: column; gap: var(--s-1);
  font-size: var(--t-sm); color: var(--text-secondary);
}
.connectors a { color: var(--text-link); }

.hero-chart { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-8); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-height: 320px; }
.hero-chart h3 { font-size: var(--t-md); font-weight: 600; color: var(--text-primary); }
.hero-chart .footnote { font-size: var(--t-sm); color: var(--text-muted); margin-top: auto; }
.supporting-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-3); }
.supporting-grid .widget { min-height: 160px; }

/* Project page tab-bar — constrained to the same 1200px frame as the header. */
.tab-bar.project-tabs {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex; align-items: center;
}

/* Prev / Next project navigation — pinned to the right edge of the tab bar */
.project-tabs-nav {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-1);
}
.pt-nav {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s-2);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pt-nav:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  background: var(--bg-active);
}
.pt-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pt-nav svg { color: currentColor; flex-shrink: 0; }
.pt-nav-label { line-height: 1; }
/* On narrow viewports, drop the labels and keep only the arrows */
@media (max-width: 640px) {
  .pt-nav-label { display: none; }
  .pt-nav { padding: 6px; }
}
.tab-pane {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: var(--s-4) var(--s-6) var(--s-6);
}

/* Project sub-tabs — icon + label, Asana-faithful spacing.
   Icons use currentColor so they inherit the muted → primary state
   transition from the parent .tab. Gap matches the 6px Asana reference. */
.tab--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
  transition: opacity var(--t-fast);
}
.tab-icon svg { display: block; }
.tab--with-icon:hover .tab-icon,
.tab--with-icon[aria-current="page"] .tab-icon {
  opacity: 1;
}

/* ============================================================
   ARTIFACTS & DOCUMENTATION (Files tab) — controlled disclosure.
   No file rows. No icons. No download affordance. Information cards
   that signal depth without exposing artifacts.
   ============================================================ */
.af-pane {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
/* Inner content kept on a 720px reading column, left-aligned with the
   header title (matches the .pb pattern from the Overview tab). */
.af-pane > * { max-width: 640px; }

.af-header {
  display: flex; flex-direction: column;
  gap: 6px;
}
.af-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--asana-coral);
}
.af-title {
  margin: 0;
  font-size: 20px; font-weight: 600; line-height: 1.3;
  color: var(--text-primary);
}
.af-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.af-context {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
}

/* Artifact cards — single column, clean horizontal rows. */
.af-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.af-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: 14px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.af-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--border-soft), 0 4px 12px rgba(0,0,0,0.22);
}
.af-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
}
.af-card-title {
  margin: 0;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--text-primary);
}
.af-tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: var(--r-4);
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.af-card-desc {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--text-secondary);
}

/* NDA / confidentiality block — subtle bordered container, not a warning.
   Same surface palette as the cards so it reads as part of the system, not
   an alert. Single muted accent on the left rail to signal "restricted". */
.af-nda {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 2px solid color-mix(in srgb, var(--asana-coral) 55%, transparent);
  border-radius: var(--r-6);
  padding: 14px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.af-nda-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.af-nda p {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary);
}

/* CTA — single subtle button, conversation entry not lead-gen. */
.af-cta {
  margin-top: var(--s-1);
}
.af-cta .btn { gap: 6px; }

@media (max-width: 640px) {
  .af-card { padding: 12px 14px; }
  .af-nda  { padding: 12px 14px; }
}
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.dashboard-hero-widget { grid-column: span 2; }
@media (max-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr; } .dashboard-hero-widget { grid-column: span 1; } }
.project-not-found { padding: var(--s-8) var(--s-6); }

.zero-chart-note {
  background: var(--bg-soft); border: 1px dashed var(--border-medium);
  border-radius: var(--r-8); padding: var(--s-4);
  font-size: var(--t-sm); color: var(--text-secondary);
}

/* ── INSIGHTS · career impact timeline (v2 — single chart, signal-first) ── */

/* Header stats — right-side cluster */
.in-head-stats {
  display: flex; gap: var(--s-6);
  padding-top: var(--s-3);
  flex-wrap: wrap;
}
@media (max-width: 640px) { .in-head-stats { padding-top: 0; } }

/* Key insights strip — 4 short claims */
.in-insights-strip {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 var(--s-6) var(--s-4);
  display: flex; gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 1100px) {
  .in-insights-strip { justify-content: flex-start; gap: var(--s-4); }
}
.in-insight {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--text-primary);
}
.in-insight-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.in-insight-text { line-height: 1.4; }

/* Sticky timeline */
.in-timeline {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-faint);
  padding: var(--s-4) 0 var(--s-3);
}
.in-timeline-scroll {
  max-width: 1200px; margin: 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: grab;
}
.in-timeline-scroll::-webkit-scrollbar { display: none; }
.in-timeline-scroll.is-dragging { cursor: grabbing; user-select: none; }

.in-timeline-track {
  position: relative;
  height: 240px;
  min-width: 2400px;       /* wider than viewport — drag-to-pan; cards never overlap */
  padding: 0 var(--s-6);
}

/* Spine — horizontal line at vertical center */
.in-tl-spine {
  position: absolute;
  left: var(--s-6); right: var(--s-6); top: 50%;
  height: 1px;
  background: var(--border-soft);
  transform: translateY(-1px);
  z-index: 0;
}

/* Year markers — span top half of track, soft guide line ending at spine.
   Works at any track height (was hardcoded for 160px). */
.in-tl-year {
  position: absolute;
  top: 0;
  height: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.in-tl-year-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.in-tl-year::before {
  content: "";
  width: 1px;
  flex: 1;
  background: var(--text-secondary);
  opacity: 0.18;
}

/* Quarter ticks — faint subdivisions between years */
.in-tl-quarter-tick {
  position: absolute;
  top: calc(50% - 3px);
  width: 1px; height: 6px;
  background: var(--border-medium);
  opacity: 0.4;
  transform: translateX(-50%);
  z-index: 0;
}

/* Impact node — button = dot, card absolute around it */
.in-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  z-index: 2;
}
.in-node:focus-visible { box-shadow: 0 0 0 3px var(--asana-coral-ring); border-radius: var(--r-pill); outline: none; }

.in-node-dot {
  width: 14px; height: 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  display: block;
  transition: transform var(--t-fast);
}
.in-node:hover .in-node-dot { transform: scale(1.15); }
.in-node.is-active .in-node-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}

.in-node.is-future .in-node-dot {
  background: var(--bg);
  border: 2px dashed var(--accent);
  box-shadow: none;
}
.in-node.is-future.is-active .in-node-dot {
  background: var(--accent);
  border-style: solid;
}

/* Card — absolute positioned above OR below the dot */
.in-node-card {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 130px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  text-align: center;
  pointer-events: auto;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.in-node:hover .in-node-card { border-color: var(--border-medium); background: var(--bg-soft); }
.in-node.is-active .in-node-card {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.in-node.is-above .in-node-card { bottom: calc(50% + 14px); }
.in-node.is-below .in-node-card { top:    calc(50% + 14px); }

/* Connector line from dot to card */
.in-node.is-above::after,
.in-node.is-below::after {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 1px; height: 8px;
  background: var(--border-soft);
  z-index: -1;
}
.in-node.is-above::after { bottom: calc(50% + 8px); }
.in-node.is-below::after { top:    calc(50% + 8px); }

.in-node-outcome {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  font-feature-settings: 'tnum' 1;
}
.in-node-title {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.in-node.is-future .in-node-card { border-style: dashed; opacity: 0.85; }
.in-node.is-future .in-node-outcome { color: var(--text-secondary); }
.in-node-planned {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-top: 2px;
}

/* Panel below timeline */
.in-panel-wrap {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-5) var(--s-6) var(--s-3);
}
.in-panel {
  transition: opacity 200ms ease-out;
  min-height: 80px;
}
.in-panel.is-swapping { opacity: 0; }
.in-panel-hint {
  padding: var(--s-4);
  background: var(--bg-soft);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-8);
  text-align: center;
}

/* Expanded card */
.in-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--accent, var(--asana-coral));
  border-radius: var(--r-8);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  width: 100%;
}
.in-card.is-future { border-style: dashed; border-top-style: dashed; background: var(--bg-soft); }

.in-card-head { display: flex; flex-direction: column; gap: 6px; }
.in-card-headline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.in-card-eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.in-card-title { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.in-card-outcome {
  font-size: var(--t-md); font-weight: 700;
  color: var(--accent);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}

/* Context (label-value) */
.in-context {
  display: flex; flex-direction: column; gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-faint);
  padding-top: var(--s-3);
}
.in-context-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-faint);
}
.in-context-row:last-child { border-bottom: 0; }
.in-context-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.in-context-value {
  font-size: var(--t-base);
  color: var(--text-primary);
  margin: 0; line-height: 1.4;
}

/* Inline context — horizontal 3-column layout */
.in-context--inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.in-context-item {
  display: flex; flex-direction: column; gap: 2px;
}
.in-context-item .in-context-value {
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* Systems | Decisions split */
.in-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 640px) { .in-row-split { grid-template-columns: 1fr; } }
.in-row-split > :only-child { grid-column: 1 / -1; }
.in-section-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.in-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-1);
}
.in-list li {
  font-size: var(--t-base);
  color: var(--text-primary);
  padding-left: var(--s-3);
  position: relative;
}
.in-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px;
  background: var(--accent, var(--asana-coral));
  border-radius: var(--r-pill);
}

/* System tags — compact pills with tooltip descriptions */
.in-system-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.in-system-tag {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg-active);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  cursor: default;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.in-system-tag:hover {
  border-color: var(--accent, var(--border-medium));
  color: var(--text-primary);
}

/* Decision list — full rationale visible */
.in-list--decisions li {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.in-list--decisions li strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Project chips */
.in-projects { display: flex; flex-direction: column; gap: var(--s-2); }
.in-project-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.in-project-chip {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: 8px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.in-project-chip:hover { border-color: var(--accent, var(--asana-coral)); background: var(--bg-active); }
.in-project-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.in-project-metric {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--accent, var(--asana-coral));
  font-feature-settings: 'tnum' 1;
}
.in-project-label {
  font-size: var(--t-xs);
  color: var(--text-secondary);
}

/* Cumulative chart section */
.in-chart-section {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-3) var(--s-6) var(--s-12);
}
.in-chart-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.in-chart-sub { font-size: var(--t-sm); color: var(--text-muted); }
.in-chart {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: var(--s-4);
}

/* ── JOURNEY · reuses .in-* timeline classes from Insights section above ── */
/* The only Journey-specific addition is .in-card-footer for the "What changed" / "Target" band */

.in-card-footer {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent, var(--asana-coral));
  border-radius: var(--r-6);
}
.in-card-footer.is-future { border-left-color: var(--text-muted); background: transparent; }
.in-card-footer-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); white-space: nowrap;
}
.in-card-footer-text {
  font-size: var(--t-lg, 17px); color: var(--text-primary);
  line-height: 1.45;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* ── Journey · Premium Cinematic Card ─────────────────────────── */
/* Aligned to design system: --s-* spacing, --t-* type ramp, --r-* radii */

.jn-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-12);
  padding: var(--s-5) var(--s-6);
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s-5);
  animation: jn-fadeIn .4s ease-out;
}
.jn-card.is-future { border-style: dashed; }

/* Ambient accent glow — single subtle wash, no grid noise */
.jn-glow {
  position: absolute; top: -120px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  filter: blur(50px); pointer-events: none;
}
.jn-noise { display: none; }

/* ── Header ── */
.jn-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-5);
}
.jn-head-text { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.jn-badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  width: fit-content;
  font-size: var(--t-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--r-pill);
  padding: 3px var(--s-2) 3px 6px;
}
.jn-badge svg { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.jn-title {
  font-size: var(--t-2xl);
  font-weight: 700; line-height: var(--lh-2xl);
  letter-spacing: -.01em;
  color: var(--text-primary); margin: 0;
}

/* KPI floating card */
.jn-kpi {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: var(--s-3) var(--s-5);
  background: var(--bg-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-soft));
  border-radius: var(--r-8);
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 8%, transparent);
  flex-shrink: 0;
}
.jn-kpi-trend { color: var(--accent); display: flex; }
.jn-kpi-trend svg { width: 14px; height: 14px; }
.jn-kpi-val {
  font-size: var(--t-2xl); font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1;
  line-height: 1;
}
/* Text-only outcomes (no numeric prefix) get smaller sizing */
.jn-kpi--text .jn-kpi-val {
  font-size: var(--t-md); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.25;
  text-align: center;
}
.jn-kpi-lbl {
  font-size: var(--t-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
}

/* ── Context row ── */
.jn-ctx-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (max-width: 640px) {
  .jn-ctx-row { grid-template-columns: 1fr; }
}
.jn-ctx {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  transition: border-color var(--t-fast);
}
.jn-ctx:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-soft));
}
.jn-ctx-top { display: flex; align-items: center; gap: 6px; }
.jn-ctx-ico { color: var(--accent); display: flex; flex-shrink: 0; }
.jn-ctx-ico svg { width: 14px; height: 14px; }
.jn-ctx-label {
  font-size: var(--t-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}
.jn-ctx-val {
  font-size: var(--t-sm);
  color: var(--text-secondary); line-height: var(--lh-sm);
}

/* ── Body grid ── */
.jn-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3); align-items: start;
}
.jn-right { display: flex; flex-direction: column; gap: var(--s-3); }
.jn-body > :only-child { grid-column: 1 / -1; }

/* Block containers */
.jn-block {
  padding: var(--s-4);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  transition: border-color var(--t-fast);
}
.jn-block:hover {
  border-color: color-mix(in srgb, var(--accent) 14%, var(--border-soft));
}
.jn-bh { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s-3); }
.jn-bh-ico { color: var(--accent); display: flex; }
.jn-bh-ico svg { width: 14px; height: 14px; }
.jn-bh-lbl {
  font-size: var(--t-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}

/* Decisions */
.jn-dec-list { display: flex; flex-direction: column; gap: var(--s-3); }
.jn-dec-item { display: flex; gap: var(--s-2); align-items: flex-start; }
.jn-dec-chk { color: var(--accent); display: flex; flex-shrink: 0; margin-top: 1px; }
.jn-dec-chk svg { width: 14px; height: 14px; }
.jn-dec-body strong {
  font-size: var(--t-base); font-weight: 600;
  color: var(--text-primary); display: block;
  line-height: var(--lh-base);
}
.jn-dec-body p {
  margin: 2px 0 0;
  font-size: var(--t-sm);
  color: var(--text-muted); line-height: var(--lh-sm);
}

/* System chips */
.jn-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.jn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: var(--bg-active);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill); cursor: default;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.jn-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border-soft));
  color: var(--text-primary);
}
.jn-chip-ico { color: var(--accent); display: flex; opacity: .7; }
.jn-chip-ico svg { width: 12px; height: 12px; }

/* Project capsules */
.jn-prj-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jn-prj-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.jn-prj-chip:hover {
  border-color: var(--accent);
  background: var(--bg-active);
}
.jn-prj-chip:hover .jn-prj-name { color: var(--text-primary); }
.jn-prj-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.jn-prj-name {
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-secondary);
  line-height: var(--lh-sm);
  transition: color var(--t-fast);
}
.jn-prj-chip::before {
  content: ""; width: 6px; height: 6px;
  background: var(--accent); border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* ── Animation ── */
@keyframes jn-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .jn-card { padding: var(--s-4); gap: var(--s-4); }
  .jn-head { grid-template-columns: 1fr; gap: var(--s-3); }
  .jn-kpi { flex-direction: row; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); justify-self: start; }
  .jn-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .jn-ctx-row { grid-template-columns: 1fr; }
}

/* ============================================================
   INSIGHTS · Systems Notebook (op-* namespace)
   ============================================================
   A curated archive of operating systems, decision frameworks,
   automation workflows, and the principles that govern them.
   Visual treatments map to tokens already used elsewhere on the
   site — same category-color encoding (--cat-*), same eyebrow
   weight + tracking, same hairline borders, same hover-lift.
   ============================================================ */

/* ── Page wrapper · sits below .page-header.sb-header ──────── */
.op-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 96px;
  display: flex; flex-direction: column;
  gap: 96px;
  color: var(--text-primary);
}

/* ── Reveal-on-scroll primitive ───────────────────────────── */
.op-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.op-reveal.is-in { opacity: 1; transform: translateY(0); }

/* ── Section base ─────────────────────────────────────────── */
.op-section { display: flex; flex-direction: column; }
.op-section > .h3-section-head-stacked { margin-bottom: 32px; }

/* ── Legend strip · sits between header and first section ─── */
.op-legend {
  display: flex; align-items: center;
  gap: 24px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  flex-wrap: wrap;
}
.op-legend-title {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-right: 18px;
  border-right: 1px solid var(--border-faint);
}
.op-legend-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex: 1;
}
.op-legend-item {
  display: inline-flex; align-items: center;
  gap: 8px;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-secondary);
}
.op-legend-item[data-tint="it-ai"]   { --accent: var(--cat-it-ai);   }
.op-legend-item[data-tint="product"] { --accent: var(--cat-product); }
.op-legend-item[data-tint="growth"]  { --accent: var(--cat-growth);  }
.op-legend-item[data-tint="brand"]   { --accent: var(--cat-brand);   }
.op-legend-item[data-tint="ai"]      { --accent: var(--cat-ai);      }
.op-legend-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--r-6);
}
.op-legend-ico svg { width: 12px; height: 12px; }
.op-legend-label { letter-spacing: 0.005em; }

/* ── Sub-card heads · used inside Canvas / Stack ──────────── */
.op-card-head {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-faint);
}
.op-card-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.op-card-tag {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.op-card-sub {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Category pill ────────────────────────────────────────── */
.op-cat-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.op-cat-pill[data-tint="it-ai"]   { background: color-mix(in srgb, var(--cat-it-ai) 14%, transparent);   color: var(--cat-it-ai);   border: 1px solid color-mix(in srgb, var(--cat-it-ai) 28%, transparent);   }
.op-cat-pill[data-tint="product"] { background: color-mix(in srgb, var(--cat-product) 14%, transparent); color: var(--cat-product); border: 1px solid color-mix(in srgb, var(--cat-product) 28%, transparent); }
.op-cat-pill[data-tint="growth"]  { background: color-mix(in srgb, var(--cat-growth) 14%, transparent);  color: var(--cat-growth);  border: 1px solid color-mix(in srgb, var(--cat-growth) 28%, transparent);  }
.op-cat-pill[data-tint="brand"]   { background: color-mix(in srgb, var(--cat-brand) 14%, transparent);   color: var(--cat-brand);   border: 1px solid color-mix(in srgb, var(--cat-brand) 28%, transparent);   }
.op-cat-pill[data-tint="ai"]      { background: color-mix(in srgb, var(--cat-ai) 14%, transparent);      color: var(--cat-ai);      border: 1px solid color-mix(in srgb, var(--cat-ai) 28%, transparent);      }

/* ── 01 · Featured System Artifacts · 2-col blocks ────────── */
.op-art-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* 5th artifact spans both columns as a wide capstone */
.op-art-grid > .op-art:nth-child(5) { grid-column: 1 / -1; }

.op-art {
  display: flex; flex-direction: column;
  padding: 28px 28px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  position: relative;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.op-art[data-tint="it-ai"]   { --accent: var(--cat-it-ai);   }
.op-art[data-tint="product"] { --accent: var(--cat-product); }
.op-art[data-tint="growth"]  { --accent: var(--cat-growth);  }
.op-art[data-tint="brand"]   { --accent: var(--cat-brand);   }
.op-art[data-tint="ai"]      { --accent: var(--cat-ai);      }
.op-art:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-faint));
  background: color-mix(in srgb, var(--accent) 3%, var(--bg-soft));
  transform: translateY(-1px);
}
.op-art-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.op-art-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.op-art-letter {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.op-art-title {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}
.op-art-sub {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 20px;
  max-width: 56ch;
}
.op-art-diagram {
  flex: 1;
  margin-bottom: 20px;
  padding: 24px 20px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  border: 1px solid var(--border-faint);
  border-radius: var(--r-8);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
}
.op-art-diagram > svg {
  width: 100%; height: auto;
  max-height: 320px;
  display: block;
}
/* Capstone (5th) gets a contained-width diagram so it doesn't stretch absurdly */
.op-art-grid > .op-art:nth-child(5) .op-art-diagram { min-height: 320px; }
.op-art-grid > .op-art:nth-child(5) .op-art-diagram > svg { max-height: 380px; max-width: 640px; margin: 0 auto; }

.op-art-foot {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border-faint);
}
.op-art-foot-label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-art-foot-text {
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
  font-weight: 500;
}

/* ── SVG diagram primitives ───────────────────────────────── */
.op-dia { color: var(--accent); }
.op-dia-box {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
  stroke: color-mix(in srgb, var(--accent) 38%, transparent);
  stroke-width: 1;
}
.op-dia-box--root {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: color-mix(in srgb, var(--accent) 60%, transparent);
}
.op-dia-box--ghost {
  fill: transparent;
  stroke: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke-dasharray: 3 3;
}
.op-dia-link  { stroke: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: 1; }
.op-dia-link--dashed { stroke-dasharray: 3 3; }
.op-dia-arrowhead    { fill: color-mix(in srgb, var(--accent) 60%, transparent); }
.op-dia-t {
  fill: var(--text-secondary);
  font-size: 8px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.op-dia-t--small { fill: var(--text-muted); font-weight: 400; font-size: 7px; }
.op-dia-t--note  { fill: var(--text-muted); font-weight: 400; font-size: 7px; }
.op-dia-t--axis  { fill: var(--text-muted); font-weight: 500; font-size: 7px; letter-spacing: 0.08em; }
.op-dia-t--axis-rot { fill: var(--text-muted); font-weight: 600; font-size: 7px; letter-spacing: 0.16em; }
.op-dia-dot       { fill: var(--accent); }
.op-dia-dot--ghost{ fill: color-mix(in srgb, var(--accent) 36%, transparent); }
.op-dia-orbit     { stroke: color-mix(in srgb, var(--accent) 28%, transparent); stroke-width: 0.8; stroke-dasharray: 2 4; fill: none; }
.op-dia-core      { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-width: 0.8; }
.op-dia-node      { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1; }

/* ── 02 · Operating Notes ─────────────────────────────────── */
.op-notes-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.op-note {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  position: relative;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.op-note:hover {
  border-color: color-mix(in srgb, var(--asana-coral) 24%, var(--border-faint));
  transform: translateY(-1px);
}
.op-note-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px; line-height: 1;
  color: var(--asana-coral);
  font-weight: 700;
}
.op-note-body {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.op-note-foot {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}
.op-note-attr {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--text-secondary);
}
.op-note-date {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
}

/* ── 03 · Evolution · horizontal flow ─────────────────────── */
.op-evo-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  position: relative;
}
.op-evo-node {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  gap: 10px;
}
.op-evo-node[data-tint="it-ai"]   { --accent: var(--cat-it-ai);   }
.op-evo-node[data-tint="product"] { --accent: var(--cat-product); }
.op-evo-node[data-tint="growth"]  { --accent: var(--cat-growth);  }
.op-evo-node[data-tint="brand"]   { --accent: var(--cat-brand);   }
.op-evo-node[data-tint="ai"]      { --accent: var(--cat-ai);      }
.op-evo-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 4px var(--bg);
  position: relative; z-index: 1;
}
.op-evo-ico svg { width: 16px; height: 16px; }
.op-evo-label {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.op-evo-year {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.op-evo-blurb {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 18ch;
}
.op-evo-edge {
  position: absolute;
  top: 20px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 1px;
  background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 20%, var(--border-faint)));
  opacity: 0.6;
  z-index: 0;
}

/* ── 04 + 05 · Canvas + Stack ─────────────────────────────── */
.op-cs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
}
.op-canvas,
.op-stack {
  padding: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  transition: border-color var(--t-fast);
}
.op-canvas:hover,
.op-stack:hover {
  border-color: color-mix(in srgb, var(--asana-coral) 18%, var(--border-faint));
}

/* Canvas board */
.op-canvas-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 20px;
  margin-bottom: 16px;
}
.op-canvas-col { display: flex; flex-direction: column; gap: 12px; }
.op-canvas-col-label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-canvas-dlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.op-canvas-drow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-6);
}
.op-canvas-q { font-size: var(--t-sm); color: var(--text-muted); }
.op-canvas-a {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--text-primary);
}

.op-canvas-otable {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-6);
  padding: 6px;
}
.op-canvas-orow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--r-4);
  transition: background var(--t-fast);
}
.op-canvas-orow--head .op-canvas-oname,
.op-canvas-ohead {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.op-canvas-orow:not(.op-canvas-orow--head) .op-canvas-oname {
  font-size: var(--t-sm);
  color: var(--text-secondary);
}
.op-canvas-orow.is-selected {
  background: color-mix(in srgb, var(--cat-growth) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-growth) 28%, transparent);
}
.op-canvas-orow.is-selected .op-canvas-oname {
  color: var(--text-primary);
  font-weight: 600;
}
.op-canvas-osel { color: var(--cat-growth); margin-left: 4px; }
.op-canvas-odot { display: flex; justify-content: center; }
.op-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
}
.op-dot--low  { background: color-mix(in srgb, var(--cat-it-ai) 70%, transparent); }
.op-dot--mid  { background: color-mix(in srgb, var(--cat-brand) 70%, transparent); }
.op-dot--high { background: color-mix(in srgb, var(--cat-growth) 90%, transparent); }

.op-canvas-decision {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cat-growth) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-growth) 26%, transparent);
  border-left: 3px solid var(--cat-growth);
  border-radius: var(--r-6);
}
.op-canvas-decision-label {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cat-growth);
}
.op-canvas-decision-text {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  font-weight: 500;
}

/* System stack */
.op-stack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.op-stack-row {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  border-left: 2px solid color-mix(in srgb, var(--asana-coral) 60%, transparent);
  border-radius: var(--r-6);
  transition: border-color var(--t-fast);
}
.op-stack-row:hover {
  border-color: color-mix(in srgb, var(--asana-coral) 22%, var(--border-faint));
  border-left-color: var(--asana-coral);
}
.op-stack-layer {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.op-stack-items {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
}
.op-stack-item {
  font-size: var(--t-sm);
  color: var(--text-secondary);
}
.op-stack-item--pill {
  padding: 3px 8px;
  background: color-mix(in srgb, var(--asana-coral) 6%, transparent);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-6);
  font-size: var(--t-xs);
}
.op-stack-sep { color: var(--text-disabled); font-size: var(--t-sm); }

/* ── 06 · Working Principles ──────────────────────────────── */
.op-prin-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.op-prin-item {
  display: flex; align-items: flex-start;
  gap: 14px;
  padding: 20px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.op-prin-item:hover {
  border-color: color-mix(in srgb, var(--asana-coral) 24%, var(--border-faint));
  transform: translateY(-1px);
}
.op-prin-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  color: var(--asana-coral);
  background: color-mix(in srgb, var(--asana-coral) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--asana-coral) 22%, transparent);
  border-radius: var(--r-8);
}
.op-prin-ico svg { width: 16px; height: 16px; }
.op-prin-text {
  font-size: var(--t-sm);
  line-height: 1.45;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* ── Responsive · graceful collapse ───────────────────────── */
@media (max-width: 1280px) {
  .op-notes-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-prin-grid    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-evo-flow     { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .op-evo-edge     { display: none; }
}
@media (max-width: 900px) {
  .op-page { padding: 20px 20px 72px; gap: 72px; }
  .op-legend { gap: 14px; padding: 12px 14px; }
  .op-legend-title { padding-right: 0; border-right: 0; }
  .op-cs-grid { grid-template-columns: 1fr; gap: 16px; }
  .op-section > .h3-section-head-stacked { margin-bottom: 24px; }
  .op-art           { padding: 22px 20px 20px; }
  .op-art-diagram   { min-height: 220px; padding: 16px 12px; }
  .op-art-diagram > svg { max-height: 260px; }
}
@media (max-width: 640px) {
  .op-art-grid                            { grid-template-columns: 1fr; gap: 16px; }
  .op-art-grid > .op-art:nth-child(5)     { grid-column: auto; }
  .op-art-grid > .op-art:nth-child(5) .op-art-diagram { min-height: 240px; }
  .op-art-grid > .op-art:nth-child(5) .op-art-diagram > svg { max-height: 280px; max-width: none; }
}
@media (max-width: 640px) {
  .op-notes-grid   { grid-template-columns: 1fr; }
  .op-prin-grid    { grid-template-columns: 1fr; }
  .op-evo-flow     { grid-template-columns: 1fr; row-gap: 24px; }
  .op-stack-row    { grid-template-columns: 1fr; gap: 6px; }
  .op-stack-layer  { color: var(--text-muted); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
  .op-canvas-board { grid-template-columns: 1fr; }
  .op-canvas-drow  { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .op-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── GOALS ── */
.goals-page { display: flex; flex-direction: column; gap: var(--s-4); max-width: 980px; }
.goals-page .sub-goal { margin-left: var(--s-6); }
.goal-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.goal-kr-label { flex: 1; }

.goal-card {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-8);
  padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3);
}
.goal-card h3 { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; }
.goal-progress { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
.goal-progress-fill { height: 100%; background: var(--asana-coral); border-radius: var(--r-pill); }
.goal-krs { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.goal-kr { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-base); }
.goal-kr.done { color: var(--text-muted); text-decoration: line-through; }

/* ── Collection pages (Category / Company / Portfolios) ── */
.collection-header {
  padding: var(--s-8) var(--s-6) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.collection-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}
.collection-blurb { max-width: 640px; }
.page-body { max-width: 1200px; margin: 0 auto; width: 100%; padding: var(--s-6); }

.collection-group { margin-bottom: var(--s-8); }
.collection-group-title {
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.collection-count {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--text-muted);
}
.collection-group-blurb { margin-bottom: var(--s-3); max-width: 640px; }
.collection-list { display: flex; flex-direction: column; gap: var(--s-1); }

/* Portfolios toggle */
.ptoggle-row {
  display: flex; gap: var(--s-1);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  padding: 4px;
  width: fit-content;
  margin-bottom: var(--s-6);
}
.ptoggle {
  height: 30px; padding: 0 var(--s-3);
  border-radius: var(--r-4);
  font-size: var(--t-base); font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.ptoggle:hover { color: var(--text-primary); }
.ptoggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.ptoggle.is-active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ── PROJECTS · system architecture (Category → System → Project) ── */
.pp-body {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-3) var(--s-6) var(--s-12);
  display: flex; flex-direction: column; gap: var(--s-10);
}

/* Category — anchor section */
.pp-category {
  display: flex; flex-direction: column; gap: var(--s-4);
  border-top: 1px solid var(--border-faint);
  padding-top: var(--s-5);
  position: relative;
}
.pp-category::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 40px; height: 2px;
  background: var(--accent);
}
.pp-cat-head { display: flex; flex-direction: column; gap: var(--s-1); }
.pp-cat-name {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.pp-cat-blurb {
  font-size: var(--t-md);
  color: var(--text-primary);
  font-weight: 500;
  max-width: 640px;
}

/* Systems — sub-grouping within category */
.pp-systems { display: flex; flex-direction: column; gap: var(--s-6); }
.pp-system { display: flex; flex-direction: column; gap: var(--s-2); }
.pp-system-head { display: flex; flex-direction: column; gap: 2px; padding-left: var(--s-3); border-left: 2px solid var(--accent); }
.pp-system-title {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-primary);
}
.pp-system-desc {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Project list */
.pp-projects { list-style: none; padding: 0; margin: var(--s-1) 0 0; display: flex; flex-direction: column; gap: var(--s-1); }

/* Project row — 3-column: logo | content | metadata */
.pp-project {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.pp-project:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
  transform: translateY(-1px);
}
.pp-project:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pp-project:active { background: var(--bg-active); }

/* Company logo tile — 32px unified square; supports <img> brand mark or letter monogram fallback */
.pp-logo {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-4);
  overflow: hidden;
  font-feature-settings: 'tnum' 1;
  transition: opacity var(--t-fast), transform var(--t-fast);
  box-sizing: border-box;
}
/* Brand image variant: full-bleed; white shows only behind transparent logos */
.pp-logo--img {
  background: #ffffff;
  border: none;
  padding: 0;
}
.pp-logo--img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Letter monogram fallback: keeps category-tinted treatment */
.pp-logo--mono {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--accent);
}
.pp-project:hover .pp-logo { opacity: 0.92; transform: translateY(-1px); }

.pp-project-content {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pp-project-title {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-project-desc {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Company-page header logo — large unified tile next to the company name */
.pp-co-header-logo {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-8);
  overflow: hidden;
  background: #ffffff;
  margin-bottom: var(--s-1);
  box-sizing: border-box;
}
.pp-co-header-logo--img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.pp-co-header-logo--mono {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Metadata — right-aligned, muted */
.pp-project-meta {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-sm);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.pp-meta-company { color: var(--text-secondary); font-weight: 500; }
.pp-meta-year { color: var(--text-muted); }
.pp-meta-cat { color: var(--text-muted); }
.pp-meta-sep { color: var(--text-disabled); padding: 0 2px; }
.pp-cta {
  margin-left: var(--s-2);
  padding-left: var(--s-2);
  border-left: 1px solid var(--border-faint);
  color: var(--asana-coral);
  font-size: var(--t-sm);
  font-weight: 500;
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.pp-project:hover .pp-cta { opacity: 1; }
.pp-cta-arrow { display: inline-block; transition: transform var(--t-fast); }
.pp-project:hover .pp-cta-arrow { transform: translateX(2px); }

/* Tablet: 2 columns (drop CTA into a tighter meta row) */
@media (max-width: 1024px) {
  .pp-project {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--s-1);
  }
  .pp-project-meta {
    grid-column: 2;
    flex-wrap: wrap;
  }
  .pp-cta { display: none; }
}

/* Mobile: stacked */
@media (max-width: 640px) {
  .pp-project {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: flex-start;
  }
  .pp-project-title { white-space: normal; }
}

/* ── INBOX → RECOMMENDATIONS · trust layer ── */
.inbox-list { display: flex; flex-direction: column; padding: 0; max-width: 920px; }
.inbox-row-content { flex: 1; min-width: 0; }
.inbox-row-meta { margin-top: var(--s-1); display: flex; align-items: center; gap: var(--s-2); }
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill); }

/* Trust header — title + stats on left, LinkedIn CTA on right */
.recs-header {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-8) var(--s-6) var(--s-3);
  display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s-6);
  flex-wrap: wrap;
}
.recs-trust { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--s-1); }
.recs-eyebrow {
  /* Canonical eyebrow — see base.css `.eyebrow` */
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asana-coral);
  margin-bottom: var(--s-1);
}
.recs-stats {
  display: flex; gap: var(--s-6);
  margin-top: var(--s-3);
}
.recs-stat { display: flex; flex-direction: column; gap: 2px; }
.recs-stat-value { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 700; color: var(--text-primary); font-feature-settings: 'tnum' 1; }
.recs-stat-label { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-eyebrow); }
.recs-cta { flex-shrink: 0; padding-top: var(--s-3); }
.recs-cta .btn { gap: 6px; }

/* Project page header — multiple controls on the right (status + Share)
   share the .recs-cta slot but lay out horizontally with consistent gap. */
.recs-cta.project-header-actions {
  display: flex; align-items: center; gap: var(--s-2);
}

/* Tabs — reuse .tab-bar with extra spacing affordance */
.recs-tabs {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 0 var(--s-6);
  display: flex; align-items: center; gap: var(--s-1);
}
.recs-tabs .tab[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--asana-coral);
}
/* CTA pushed to the right edge of the tab bar */
.recs-tabs-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-secondary);
  padding: 6px var(--s-3);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.recs-tabs-cta:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
  background: var(--bg-active);
}
.recs-tabs-cta:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.recs-tabs-cta svg { color: var(--text-muted); }
.recs-tabs-cta:hover svg { color: var(--text-secondary); }

/* Toolbar — count + sort */
.recs-toolbar {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-3) var(--s-6) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.recs-sort { display: inline-flex; align-items: center; gap: var(--s-2); }
.recs-toolbar-right { display: inline-flex; align-items: center; gap: var(--s-3); }
.recs-sort select {
  height: 28px; padding: 0 var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  color: var(--text-primary);
  font-size: var(--t-sm);
  font-family: inherit;
}
.recs-sort select:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Cards list */
.recs-list {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-4) var(--s-6) var(--s-12);
  display: flex; flex-direction: column; gap: var(--s-3);
}

.rec-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--t-fast), border-color var(--t-fast);
  max-width: 920px; width: 100%;
}
.rec-card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-sm); }

/* LinkedIn icon · top-right corner of the testimonial card */
.rec-linkedin {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--text-muted);
  border-radius: var(--r-6);
  transition: color var(--t-fast), background var(--t-fast);
}
.rec-linkedin svg { width: 18px; height: 18px; }
.rec-linkedin:hover {
  color: #0A66C2;   /* official LinkedIn blue on hover */
  background: var(--bg-active);
}
.rec-linkedin:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.rec-head { display: flex; align-items: center; gap: var(--s-3); }
.rec-avatar img { transform: scale(1.15); }
.rec-head-text { flex: 1; min-width: 0; }
.rec-name { font-size: var(--t-base); font-weight: 600; color: var(--text-primary); }
.rec-role { font-size: var(--t-sm); color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }

.rec-headline {
  font-size: var(--t-md); line-height: 1.5; font-weight: 600;
  color: var(--text-primary);
  font-style: italic;
  border-left: 2px solid var(--asana-coral);
  padding-left: var(--s-3);
}

.rec-body {
  font-size: var(--t-sm); line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.rec-card[data-expanded="true"] .rec-body {
  display: block;
  -webkit-line-clamp: unset;
}

.rec-toggle {
  align-self: flex-start;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-link);
  padding: 4px 0;
}
.rec-toggle:hover { text-decoration: underline; }
.rec-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--r-4); }

.rec-meta {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--text-muted);
  flex-wrap: wrap;
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-faint);
}
.rec-meta-item { color: var(--text-secondary); }
.rec-meta-sep { color: var(--text-muted); }
.rec-meta-spacer { flex: 1; }
.rec-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rec-tag {
  font-size: var(--t-xs); font-weight: 500;
  padding: 2px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rec-tag:hover { background: var(--asana-coral-tint); color: var(--asana-coral); border-color: var(--asana-coral); }
.rec-tag:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.recs-empty {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  background: var(--bg-soft);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-8);
  max-width: 560px; margin: 0 auto;
}
.inbox-row {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border-faint);
  cursor: pointer;
  transition: background var(--t-fast);
  align-items: flex-start;
}
.inbox-row:hover { background: var(--bg-hover); }
.inbox-row:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.inbox-row:active { background: var(--bg-active); }

/* ── SKILLS BOARD · 4-column structured display ── */
.sb-header {
  max-width: 1200px; margin: 0 auto var(--s-6); width: 100%;
  padding: var(--s-8) var(--s-6) var(--s-5);
  display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s-6);
  flex-wrap: wrap;
}
.sb-trust { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--s-1); max-width: 640px; }
.sb-toolbar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; padding-top: var(--s-3); }
.sb-search {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  transition: border-color var(--t-fast);
}
.sb-search:focus-within { border-color: var(--asana-coral); }
.sb-search input {
  background: transparent; border: 0; outline: none;
  color: var(--text-primary); font-size: var(--t-sm);
  width: 180px;
}
.sb-search input::placeholder { color: var(--text-muted); }
.sb-filter { display: inline-flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--r-6); padding: 4px; }
.sb-chip {
  height: 24px; padding: 0 var(--s-3);
  border-radius: var(--r-4);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-chip:hover { color: var(--text-primary); }
.sb-chip.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.sb-chip:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Filter hide rule — overrides flex layout */
.is-hidden { display: none !important; }

/* 4-column grid — fits standard viewport, no horizontal scroll */
.board-grid {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: var(--s-3) var(--s-6) var(--s-6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: stretch;
}

/* Column — fills available height, internal scroll */
.kcol {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  display: flex; flex-direction: column;
  min-height: calc(100vh - 280px);
  position: relative;
  overflow: hidden;
}
.kcol.is-priority {
  border-color: rgba(255,107,107,0.45);
  background: linear-gradient(180deg, rgba(255,107,107,0.05) 0%, var(--bg-soft) 60%);
}
.kcol.is-priority::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--asana-coral);
}

.kcol-head {
  padding: var(--s-3) var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;
}
.kcol-title-row { display: flex; align-items: center; gap: var(--s-2); }
.kcol-title { font-size: var(--t-base); font-weight: 600; color: var(--text-primary); flex: 1; line-height: 1.2; }
.kcol-count {
  font-size: var(--t-xs); color: var(--text-secondary);
  background: var(--bg-active); padding: 2px 8px; border-radius: var(--r-pill);
  font-feature-settings: 'tnum' 1;
}
.kcol-blurb { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }

.kcol-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-2) var(--s-3) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-3);
}

/* Sub-section within column */
.ksection { display: flex; flex-direction: column; gap: var(--s-2); }
.ksection-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-top: var(--s-1);
}

/* Usage group (Daily / Frequent / Occasional) within sub-section */
.ksection-group {
  display: flex; flex-direction: column; gap: var(--s-1-5);
  padding-bottom: var(--s-1);
  border-bottom: 1px dashed var(--border-faint);
}
.ksection-group:last-child { border-bottom: none; padding-bottom: 0; }
.ksection-group-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ksection-group[data-usage-group="daily"]    .ksection-group-label { color: var(--status-on-track-fg); }
.ksection-group[data-usage-group="frequent"] .ksection-group-label { color: var(--status-complete-fg); }
.ksection-cards { display: flex; flex-direction: column; gap: var(--s-1-5); }

/* Skill card — clean, max 2 lines context */
.skill-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  padding: var(--s-2-5, 10px) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.skill-card:hover { border-color: var(--border-medium); background: var(--bg-active); }
.skill-card-head { display: flex; align-items: baseline; gap: var(--s-2); }
.skill-name { font-size: var(--t-base); font-weight: 600; color: var(--text-primary); line-height: 1.3; }

.skill-context {
  font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skill-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: 2px; }
.skill-dots { display: inline-flex; gap: 3px; }
.skill-dots .dot { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--border-medium); }
.skill-dots .dot.on { background: var(--asana-coral); }
.skill-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.skill-tag {
  font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: var(--r-4);
  background: var(--bg-soft); color: var(--text-secondary);
  border: 1px solid var(--border-soft);
}

/* Empty state per column */
.kcol-empty {
  font-size: var(--t-sm); color: var(--text-muted);
  text-align: center; padding: var(--s-6) var(--s-3);
  font-style: italic;
}

/* ── Learning Pipeline strip — below the board ── */
.learning-strip {
  max-width: 1200px; margin: 0 auto var(--s-12); width: 100%;
  padding: var(--s-4) var(--s-6) 0;
  border-top: 1px solid var(--border-faint);
  margin-top: var(--s-4);
  padding-top: var(--s-6);
}
.learning-strip-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.learning-strip-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.learning-strip-blurb { font-size: var(--t-sm); color: var(--text-muted); }
.learning-strip-list { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.learning-strip-empty { font-size: var(--t-sm); color: var(--text-muted); font-style: italic; }
.learning-card {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 12px;
  background: var(--surface);
  border: 1px dashed var(--border-medium);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast);
}
.learning-card:hover { border-color: var(--asana-coral); }
.learning-card-name { font-size: var(--t-sm); font-weight: 500; color: var(--text-primary); }
.learning-card-tags { display: inline-flex; gap: 4px; }

/* Mobile — stack columns vertically */
@media (max-width: 1024px) {
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .kcol { min-height: auto; }
}
@media (max-width: 640px) {
  .board-grid { grid-template-columns: 1fr; }
  .sb-toolbar { width: 100%; }
  .sb-search input { width: 100%; }
}

/* ── ABOUT ── */
.about-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-6); }
.about-head-info { flex: 1; }
.about-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.about-bio { padding: 0 var(--s-6) var(--s-6); max-width: 70ch; line-height: 1.7; font-size: var(--t-md); }
.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); padding: 0 var(--s-6) var(--s-6); }
@media (max-width: 640px) { .qa-grid { grid-template-columns: 1fr; } }
.qa-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-8); padding: var(--s-4); }
.qa-card h4 { font-size: var(--t-base); font-weight: 600; margin-bottom: var(--s-2); }
.qa-card p { font-size: var(--t-base); line-height: 1.6; color: var(--text-primary); }

/* ── FILES list ── */
.files-list { display: flex; flex-direction: column; gap: var(--s-1); }
.file-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-6);
  background: var(--bg-soft); border: 1px solid var(--border-soft);
}
.file-row .name { flex: 1; font-size: var(--t-base); color: var(--text-primary); }
.file-row .size { font-size: var(--t-sm); color: var(--text-muted); }

/* ── Boot error ── */
.boot-error {
  max-width: 560px; margin: var(--s-12) auto;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  display: flex; flex-direction: column; gap: var(--s-3);
}

/* ── Bucket dot util ── */
.dot-growth   { background: var(--cat-growth); }
.dot-it-ai    { background: var(--cat-it-ai); }
.dot-digital  { background: var(--cat-digital); }
.dot-ux       { background: var(--cat-ux); }
.dot-product  { background: var(--cat-product); }
.dot-brand    { background: var(--cat-brand); }

.bg-tint-growth   { background: var(--tint-growth);  color: var(--cat-growth); }
.bg-tint-it-ai    { background: var(--tint-it-ai);   color: var(--cat-it-ai); }
.bg-tint-digital  { background: var(--tint-digital); color: var(--cat-digital); }
.bg-tint-ux       { background: var(--tint-ux);      color: var(--cat-ux); }
.bg-tint-product  { background: var(--tint-product); color: var(--cat-product); }
.bg-tint-brand    { background: var(--tint-brand);   color: var(--cat-brand); }

/* ============================================================
   GOALS — Strategy Map (vertical system map)
   ============================================================ */

/* Status palette — single source of truth for nodes, dots, connectors */
.gl-page,
.gl-tabs {
  --gl-compounding: #5BBA6F;
  --gl-active:      #2DD4BF;
  --gl-at-risk:     #FF6B6B;
  --gl-completed:   #8C8F94;
  --gl-not-started: #4D5359;
}

/* ── Tabs (use shared .tab-bar; .gl-tabs adds the max-width container) ── */
.gl-tabs {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.gl-tabs .tab[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--asana-coral);
}

/* ── Toolbar (count on left, filter on right; mirrors .recs-toolbar) ── */
.gl-toolbar {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: var(--s-3) var(--s-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.gl-toolbar-count {
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.gl-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  color: var(--text-primary);
  font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.gl-toolbar-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.gl-toolbar-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gl-toolbar-btn-chevron { color: var(--text-muted); }

/* ── Page wrapper ─────────────────────────────────────────────── */
.gl-page { display: flex; flex-direction: column; }

/* ── Strategy Map: pannable canvas (Asana goal graph) ─────────── */
/* Layout model: .gl-canvas is the viewport (overflow:hidden, fixed height);
   .gl-canvas-stage is transformed via translate+scale for pan/zoom; nodes
   are absolutely positioned within the stage; edges are a single SVG layer
   inside the stage so they pan + zoom as one piece with the nodes. */
.gl-canvas {
  position: relative;
  width: 100%;
  height: clamp(560px, calc(100vh - 280px), 820px);
  overflow: hidden;
  background: var(--bg);
  cursor: grab;
  user-select: none;
}
.gl-canvas.is-dragging { cursor: grabbing; }
.gl-canvas:focus { outline: none; }
.gl-canvas:focus-visible { box-shadow: var(--focus-ring) inset; }

/* Subtle dotted background — visual cue that the area is pannable. */
.gl-canvas-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}

.gl-canvas-stage {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* SVG edges layer — sits behind the nodes inside the same stage */
.gl-edges {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.gl-nodes { position: relative; }

/* ── Node base — Asana minimal: no big colour blocks, light borders ── */
.gl-node {
  position: absolute;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-12);
  padding: 12px 14px;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 200ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1);
  transform-origin: center;
  will-change: transform;
  --accent: var(--text-secondary);
}
.gl-node:hover  {
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(0,0,0,0.40);
  z-index: 2;
}
.gl-node:focus-visible { outline: none; box-shadow: var(--focus-ring); z-index: 3; }

/* Accent stays subtle — used only for the left-edge rail on the title row,
   never as a flooded background. */
.gl-node.accent-product { --accent: var(--cat-product); }
.gl-node.accent-ai      { --accent: var(--cat-it-ai); }
.gl-node.accent-growth  { --accent: var(--cat-digital); }
.gl-node.accent-brand   { --accent: var(--cat-brand); }

/* Variants — slim hierarchy via subtle treatment, not loud chrome. */
.gl-node--root {
  background: linear-gradient(180deg, rgba(255,107,107,0.06), transparent 60%), var(--surface);
  border-color: rgba(255,107,107,0.45);
  box-shadow:
    0 0 0 1px rgba(255,107,107,0.18),
    0 6px 20px rgba(255,107,107,0.06),
    0 2px 6px rgba(0,0,0,0.30);
}
.gl-node--pillar {
  border-left: 2px solid var(--accent);
}
.gl-node--execution {
  /* leaf — neutral surface, no accent rail to reduce visual noise */
}

/* ── Node anatomy ─────────────────────────────────────────────── */
.gl-node-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  min-height: 16px;
}
.gl-node-head-left {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  font-size: 11px; font-weight: 500;
}
.gl-node-icon { color: var(--accent); flex-shrink: 0; }
.gl-node--root .gl-node-icon { color: var(--asana-coral); }
.gl-node-label { letter-spacing: 0.02em; }
.gl-node-status {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
}
.gl-node-status::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--gl-not-started);
  margin-right: 6px;
}
.gl-node-status--compounding::before { background: var(--gl-compounding); }
.gl-node-status--active::before      { background: var(--gl-active); }
.gl-node-status--at-risk::before     { background: var(--gl-at-risk); }
.gl-node-status--completed::before   { background: var(--gl-completed); }
.gl-node-status--not-started::before { background: var(--gl-not-started); }

.gl-node-title {
  margin: 0;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gl-node--root   .gl-node-title { font-size: 15px; font-weight: 600; }
.gl-node--pillar .gl-node-title { font-size: 14px; font-weight: 600; }

/* Progress — thin, single neutral bar; status communicated separately */
.gl-node-progress {
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px;
}
.gl-node-progress-track {
  flex: 1;
  height: 4px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gl-node-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 380ms cubic-bezier(.2,.8,.2,1);
}
.gl-node--root .gl-node-progress-fill { background: var(--asana-coral); }
.gl-node-progress-value {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  min-width: 32px; text-align: right;
  font-feature-settings: 'tnum' 1;
}

.gl-node-foot {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.gl-node-meta-item { overflow: hidden; text-overflow: ellipsis; }
.gl-node-meta-sep { color: var(--text-disabled); }
.gl-node-meta-workspace { color: var(--text-secondary); }

/* Expand / collapse toggle — small circular control on the bottom edge */
.gl-node-toggle {
  position: absolute;
  bottom: -12px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.gl-node-toggle:hover {
  background: var(--asana-coral);
  border-color: var(--asana-coral);
  color: #fff;
}
.gl-node-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Connectors — thin, neutral, structural (no flow animation) ── */
.gl-edge {
  fill: none;
  stroke: rgba(255,255,255,0.14);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 180ms ease, stroke-opacity 180ms ease, stroke-width 180ms ease;
}
.gl-edge.is-on-path,
.gl-edge.is-in-focus {
  stroke: rgba(255,255,255,0.55);
  stroke-width: 1.8;
}
/* Focus mode — non-path edges fade further */
.gl-canvas.has-focus .gl-edge:not(.is-in-focus) { stroke-opacity: 0.25; }
.gl-edge.is-filtered-out { stroke-opacity: 0.10; }

/* ── Node hover/focus painters ────────────────────────────────── */
.gl-node.is-hovered { border-color: rgba(255,255,255,0.32); }
.gl-node.is-on-path { border-color: rgba(255,255,255,0.28); }
.gl-node.is-focused {
  border-color: var(--asana-coral);
  box-shadow:
    0 0 0 2px rgba(255,107,107,0.28),
    0 4px 14px rgba(0,0,0,0.40);
  z-index: 3;
}
.gl-canvas.has-focus .gl-node:not(.is-in-focus):not(.is-focused) {
  opacity: 0.32;
  filter: saturate(0.55);
}
.gl-node.is-filtered-out { opacity: 0.22; filter: saturate(0.5); }
.gl-node.is-focused.is-filtered-out { opacity: 1; filter: none; }

/* ── Zoom toolbar (bottom-right floating) ─────────────────────── */
.gl-zoom-bar {
  position: absolute;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  z-index: 5;
}
.gl-zoom-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.gl-zoom-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.gl-zoom-btn:focus-visible { outline: none; box-shadow: var(--focus-ring) inset; }
.gl-zoom-btn + .gl-zoom-btn { border-top: 1px solid var(--border-soft); }

.gl-dot { width: 8px; height: 8px; border-radius: var(--r-pill); display: inline-block; }
.gl-dot--compounding { background: var(--gl-compounding); }
.gl-dot--active      { background: var(--gl-active); }
.gl-dot--at-risk     { background: var(--gl-at-risk); }
.gl-dot--completed   { background: var(--gl-completed); }
.gl-dot--not-started { background: var(--gl-not-started); }

/* ── Focus Areas tab ──────────────────────────────────────────── */
.gl-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.gl-focus-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-8);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
  --accent: var(--text-secondary);
}
.gl-focus-card.accent-product { --accent: var(--cat-product); }
.gl-focus-card.accent-ai      { --accent: var(--cat-it-ai); }
.gl-focus-card.accent-growth  { --accent: var(--cat-digital); }
.gl-focus-card.accent-brand   { --accent: var(--cat-brand); }
.gl-focus-head { display: flex; align-items: center; justify-content: space-between; }
.gl-focus-title { margin: 0; font-size: var(--t-md); font-weight: 600; color: var(--text-primary); }
.gl-focus-desc  { margin: 0; font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.45; }
.gl-focus-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.gl-focus-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-sm);
  border-radius: var(--r-4);
  background: rgba(255,255,255,0.02);
}
.gl-focus-item-title { flex: 1; min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-focus-item-progress { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* ── Milestones tab ───────────────────────────────────────────── */
.gl-milestones {
  list-style: none; padding: var(--s-4) var(--s-6); margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  /* Outer frame matches the page header / tabs / toolbar (1200px), so the
     row content's left edge aligns with the eyebrow above. Mirrors the
     individual Project page pattern. */
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.gl-milestone-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.gl-milestone-marker {
  width: 8px;
  background: var(--text-secondary);
  border-radius: var(--r-pill);
}
.gl-milestone-marker.accent-product { background: var(--cat-product); }
.gl-milestone-marker.accent-ai      { background: var(--cat-it-ai); }
.gl-milestone-marker.accent-growth  { background: var(--cat-digital); }
.gl-milestone-marker.accent-brand   { background: var(--cat-brand); }
.gl-milestone-body {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.gl-milestone-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.gl-milestone-pillar { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.gl-milestone-title { margin: 0; font-size: var(--t-base); color: var(--text-primary); font-weight: 500; }
.gl-milestone-meta { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--text-muted); }
.gl-milestone-progress { color: var(--text-secondary); font-weight: 600; }
.gl-milestone-track { margin-top: 2px; height: 6px; }
/* Filter — non-matching rows hide cleanly (no dim, since this list is
   already a flat read view). Empty-state row appears when nothing matches. */
.gl-milestone-row.is-filtered-out { display: none; }
.gl-milestones-empty {
  list-style: none;
  padding: var(--s-4) var(--s-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--t-sm);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-8);
}

/* ── Reflections tab ──────────────────────────────────────────── */
.gl-reflections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  /* Same 1200px frame as header / tabs / toolbar so cards' left edge aligns
     with the eyebrow above. Matches individual Project page rhythm. */
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.gl-reflect-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.gl-reflect-card h3 { margin: 0; font-size: var(--t-md); font-weight: 600; color: var(--text-primary); }
.gl-reflect-card p  { margin: 0; font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.55; }
.gl-reflect-card--principle {
  background: linear-gradient(135deg, rgba(255,107,107,0.10), rgba(255,107,107,0.02));
  border-color: rgba(255,107,107,0.4);
}

/* ── Header controls (Status filter / Time range / Create goal) ─ */
.gl-header-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
.gl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  color: var(--text-primary);
  font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.gl-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.gl-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gl-btn--primary {
  background: var(--asana-coral);
  border-color: var(--asana-coral);
  color: #fff;
}
.gl-btn--primary:hover {
  background: var(--asana-coral-hover, #d65555);
  border-color: var(--asana-coral-hover, #d65555);
}
.gl-btn-chevron { color: var(--text-muted); }
.gl-btn-label { line-height: 1; }

/* Filter dropdown */
.gl-filter { position: relative; }
.gl-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gl-filter-menu[hidden] { display: none; }
.gl-filter-option {
  display: flex; align-items: center; gap: var(--s-2);
  height: 32px; padding: 0 var(--s-2);
  border-radius: var(--r-4);
  background: transparent; border: 0;
  color: var(--text-primary);
  font-size: var(--t-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.gl-filter-option:hover { background: var(--bg-hover); }
.gl-filter-option:focus-visible { outline: none; box-shadow: var(--focus-ring) inset; }
.gl-filter-option[aria-checked="true"] {
  color: var(--asana-coral);
  font-weight: 500;
}
.gl-filter-option svg { margin-left: auto; color: var(--asana-coral); }
.gl-filter-dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--text-muted);
  flex-shrink: 0;
}

/* ── Hover path dim (when no focus is active) ─────────────────── */
/* Modern :has() — dims unrelated nodes when any node is hovered. Per brief:
   "Hover on any node → Dim all unrelated nodes (opacity 30–40%)" */
.gl-map:not(.has-focus):has(.gl-node.is-hovered) .gl-node:not(.is-hovered):not(.is-on-path) {
  opacity: 0.42;
  filter: saturate(0.65);
}

/* ── Filter dim (status filter) ───────────────────────────────── */
.gl-node--execution.is-filtered-out {
  opacity: 0.22;
  filter: saturate(0.5);
}
.gl-edge.is-filtered-out { stroke-opacity: 0.08; }
/* Focus override: clicking a filtered-out node should still surface it. */
.gl-node.is-focused.is-filtered-out { opacity: 1; filter: none; }

/* ── Reduced motion: trim transitions, keep static frame readable ── */
@media (prefers-reduced-motion: reduce) {
  .gl-node,
  .gl-node-progress-fill,
  .gl-canvas-stage,
  .gl-edge { transition-duration: 0ms !important; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gl-canvas { height: clamp(520px, calc(100vh - 240px), 760px); }
}
@media (max-width: 640px) {
  .gl-canvas { height: clamp(480px, calc(100vh - 200px), 640px); }
  .gl-zoom-bar { right: 12px; bottom: 12px; }
}

/* ============================================================
   PROJECT BREAKDOWN — single-column system structure
   Used by Drawer body + Project Overview tab. Header is supplied
   by the surrounding container (drawer-head / project-header).
   ============================================================ */

.pb {
  display: flex;
  flex-direction: column;
  gap: 40px;                /* spec: 32–48px between sections */
  max-width: 1200px;        /* outer frame matches the page header */
  margin: 0 auto;
  padding: var(--s-4) var(--s-6) var(--s-12);
  width: 100%;
  --pb-accent: var(--text-secondary);
}
/* Inner content keeps a 720px reading column for prose, left-aligned so
   labels start at the same x as the page-header title. */
.pb > * { max-width: 640px; }

/* ── Cover (project visual slot) ──────────────────────────────────
   Optional hero image at the top of the Overview body. Renders an
   <img> when bd.cover is set; otherwise shows an accent-tinted
   placeholder. 16/9 aspect ratio so layout stays stable regardless. */
.pb-cover {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-12);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pb-accent) 22%, var(--border-soft));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--pb-accent) 14%, transparent) 0%,
      color-mix(in srgb, var(--pb-accent) 4%, transparent) 60%,
      transparent 100%),
    var(--surface);
}
.pb-cover.has-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pb-cover.is-placeholder .pb-cover-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: color-mix(in srgb, var(--pb-accent) 75%, var(--text-muted));
}
.pb-cover-icon {
  width: 32px; height: 32px;
  opacity: 0.75;
  flex-shrink: 0;
}
.pb-cover-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pb-accent) 60%, var(--text-muted));
}

/* Accent driven by category — used by banner + insight rail */
.pb[data-bucket="growth"]   { --pb-accent: var(--cat-digital); }
.pb[data-bucket="it-ai"]    { --pb-accent: var(--cat-it-ai); }
.pb[data-bucket="digital"]  { --pb-accent: var(--cat-digital); }
.pb[data-bucket="ux"]       { --pb-accent: var(--cat-ux); }
.pb[data-bucket="product"]  { --pb-accent: var(--cat-product); }
.pb[data-bucket="brand"]    { --pb-accent: var(--cat-brand); }

/* Project page renders inside a wider container — stretch the breakdown
   to match the surrounding tab body width while preserving readability. */
#project-tab-body .pb { padding: var(--s-5) var(--s-6) var(--s-10); }

/* ── 2. Image banner (visual anchor — gradient block, not a chart) ── */
.pb-banner {
  position: relative;
  height: 132px;
  border-radius: var(--r-12);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.pb-banner-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--pb-accent) 40%, transparent) 0%,
      color-mix(in srgb, var(--pb-accent) 12%, transparent) 50%,
      transparent 100%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--pb-accent) 24%, transparent) 0%, transparent 60%);
}
.pb-banner-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px;
  padding: 20px 24px;
}
.pb-banner-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--pb-accent) 90%, white 10%);
}
.pb-banner-headline {
  margin: 0;
  font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--text-primary);
  max-width: 36ch;
}

/* ── 3–9. Section blocks ──────────────────────────────────────── */
.pb-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pb-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}

.pb-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
}

.pb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pb-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}
.pb-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--pb-accent);
}

/* ── 8. Key insight (subtle highlight, integrated into flow) ─── */
.pb-insight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-left: 3px solid var(--pb-accent);
  background: color-mix(in srgb, var(--pb-accent) 6%, transparent);
  border-radius: var(--r-4);
}
.pb-insight .pb-label { color: var(--pb-accent); }
.pb-insight-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── 10. Metadata footer (compact row) ────────────────────────── */
.pb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--text-muted);
}
.pb-meta-item { white-space: nowrap; }
.pb-meta-sep { color: var(--text-disabled); }

/* Fallback render when a breakdown isn't available */
.pb-fallback {
  font-size: 14px; color: var(--text-primary); line-height: 1.55;
  margin: 0; padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-8);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pb { gap: 32px; padding: var(--s-3) var(--s-4) var(--s-8); }
  .pb-banner { height: 108px; }
  .pb-banner-content { padding: 16px 18px; }
  .pb-banner-headline { font-size: 16px; }
  .pb-insight { padding: 14px 16px; }
}

/* ============================================================
   PROJECT TABS — Asana-style operating system
   List · Board · Timeline · Dashboard · Insights
   ============================================================ */

/* Shared header pattern for tab panes — eyebrow + title + optional sub */
.pl-pane, .bd-pane, .gt-pane, .db-pane, .in-pane {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.pl-eyebrow, .bd-eyebrow, .gt-eyebrow, .db-eyebrow, .in-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ── LIST (Asana table — To Do / Doing / Done) ────────────────
   Five-column read-only task list. Mirrors the Asana list-view density:
   compact rows, hairline dividers, status & priority pills with
   semantic colour palette, role-coloured assignee avatars. */

.al-pane {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.al-toolbar {
  display: flex; align-items: center; gap: var(--s-3);
}
.al-add {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  color: var(--text-primary);
  font-size: 13px; font-weight: 500;
  cursor: not-allowed;
  opacity: 0.7;
}
.al-meta {
  font-size: 12px; color: var(--text-muted);
  margin-left: auto;
  font-style: italic;
}

/* Table grid — uses CSS grid for predictable column widths */
.al-table {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.al-row {
  display: grid;
  grid-template-columns: minmax(280px, 2.4fr) minmax(160px, 1fr) minmax(140px, 1fr) 110px 130px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  padding: 0 12px;
  height: 40px;
  transition: background 120ms ease;
}
.al-row:hover { background: var(--bg-hover); }
.al-row--head {
  height: 32px;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--border-soft);
}
.al-row--head .al-cell {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: default;
}

.al-cell {
  display: flex; align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
  padding-right: 12px;
}
.al-cell:last-child { padding-right: 0; }

/* Section header — collapsible row spanning the table width */
.al-section { display: contents; }
.al-section-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 8px;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
}
.al-section-chevron { color: var(--text-secondary); flex-shrink: 0; }
.al-section-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.al-section-count {
  font-size: 11px; color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}
.al-empty {
  grid-column: 1 / -1;
  padding: 10px 32px;
  font-size: 12px; color: var(--text-disabled);
  font-style: italic;
}

/* Name cell — checkbox + title */
.al-cell--name { gap: 12px; }
.al-cb {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--text-muted);
  color: transparent;
  background: transparent;
  transition: all 140ms ease;
}
.al-cb[data-done="true"] {
  border-color: #5BBA6F;
  background: #5BBA6F;
  color: #fff;
}
.al-name {
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-row[data-status="completed"] .al-name {
  color: var(--text-secondary);
}

/* Assignee cell */
.al-avatar {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.al-avatar--empty {
  background: transparent;
  border: 1.5px dashed var(--text-disabled);
}
.al-assignee-name {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Due cell */
.al-due {
  font-size: 12px;
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.al-empty-chip {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: var(--r-4);
  border: 1.5px dashed var(--text-disabled);
}
.al-row[data-status="at-risk"] .al-due { color: #FF6B6B; }
.al-row[data-status="off-track"] .al-due { color: #FF6B6B; }

/* Pills — priority + status follow Asana palette tokens */
.al-pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: var(--r-4);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
/* Priority */
.al-pill--p-high   { background: rgba(255,107,107,0.18); color: #FF6B6B; }
.al-pill--p-medium { background: rgba(234,179,8,0.18);   color: #eab308; }
.al-pill--p-low    { background: rgba(156,163,175,0.18); color: #9CA3AF; }
/* Status */
.al-pill--s-on-track    { background: rgba(74,222,128,0.18);  color: #4ADE80; }
.al-pill--s-at-risk     { background: rgba(234,179,8,0.18);   color: #eab308; }
.al-pill--s-off-track   { background: rgba(244,114,114,0.18); color: #f47272; }
.al-pill--s-completed   { background: rgba(45,212,191,0.18);  color: #2DD4BF; }
.al-pill--s-not-started { display: none; }

/* Responsive — at narrow widths, drop priority/status into wrapping cells */
@media (max-width: 1024px) {
  .al-row { grid-template-columns: minmax(220px, 2fr) 1fr 1fr 100px 110px; }
}
@media (max-width: 640px) {
  .al-row {
    grid-template-columns: 1fr 1fr;
    height: auto;
    padding: 10px 12px;
    gap: 6px;
  }
  .al-cell--name     { grid-column: 1 / -1; }
  .al-cell--assignee { grid-column: 1; }
  .al-cell--due      { grid-column: 2; justify-content: flex-end; }
  .al-cell--priority { grid-column: 1; }
  .al-cell--status   { grid-column: 2; justify-content: flex-end; }
  .al-row--head { display: none; }
}

/* ── LIST (Process log — DEPRECATED, kept for fallback if class lingers) ── */
.pl-pane > * { max-width: 640px; }
.pl-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--s-3);
}
.pl-title { margin: 4px 0 0 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.pl-count {
  font-size: var(--t-sm); color: var(--text-muted);
  white-space: nowrap;
}
.pl-pane .pl-section { display: flex; flex-direction: column; gap: 6px; }
.pl-pane .pl-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  cursor: default;
}
.pl-section-chevron {
  width: 14px; height: 14px;
  color: var(--text-muted);
  transform: rotate(0deg);
  transition: transform 160ms ease;
}
.pl-section-name {
  margin: 0;
  font-size: var(--t-base); font-weight: 600;
  color: var(--text-primary);
}
.pl-section-count {
  margin-left: auto;
  font-size: var(--t-sm); color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}
.pl-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-task {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-6);
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.pl-task:hover { background: var(--bg-hover); border-color: var(--border-soft); }
.pl-task-cb {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(91,186,111,0.15);
  color: #5BBA6F;
  margin-top: 2px;
}
.pl-task[data-status="in-progress"] .pl-task-cb {
  background: rgba(45,212,191,0.15);
  color: #2DD4BF;
}
.pl-task[data-status="planned"] .pl-task-cb {
  background: transparent;
  color: var(--text-muted);
}
.pl-task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-task-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.pl-task-title {
  font-size: var(--t-base); color: var(--text-primary); font-weight: 500;
  line-height: 1.4;
}
.pl-task-when {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap;
  font-feature-settings: 'tnum' 1;
}
.pl-task-outcome {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 0;
}

/* ── BOARD (Decision system — horizontal threads) ────────────── */
.bd-head { display: flex; flex-direction: column; gap: 4px; }
.bd-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.bd-sub  { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Vertical Kanban — 4 equal-width columns that fit the available layout.
   Columns stretch to match the tallest column; cards inside each column
   distribute that height evenly (grid-auto-rows: 1fr) so every card
   across the board ends up the same height. Spacing is uniform 12px.
   Padding is 0 — vertical breathing room comes from the parent
   .tab-pane (16px top, 24px bottom) and horizontal alignment matches
   the List tab edge-for-edge so switching tabs no longer shifts the
   content. */
.bd-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  padding: 0;
  align-items: stretch;
}

/* Column — fills its grid track; min-width:0 lets long card titles wrap
   instead of forcing horizontal overflow. */
.bd-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Column header — sticks to top of board container while scrolling */
.bd-col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 4px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.bd-col-name {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
}
/* Subtle column-name colour accents — match the prior decision-flow palette */
.bd-col-name[data-col="problem"]    { color: var(--text-muted); }
.bd-col-name[data-col="hypothesis"] { color: #2DD4BF; }
.bd-col-name[data-col="action"]     { color: #d97757; }
.bd-col-name[data-col="outcome"]    { color: var(--asana-coral); }

.bd-col-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px; font-weight: 600;
  font-feature-settings: 'tnum' 1;
}

/* Card stack inside each column — grid with grid-auto-rows: 1fr makes every
   card in the column equal-height (the tallest content wins). flex: 1 lets
   the body fill all vertical space below the sticky header. */
.bd-col-body {
  flex: 1;
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--s-3);
}

/* Cards — clean Asana-style. Equal weight across all 4 columns; min-height
   sets a floor; tag/metric footer pinned to bottom for visual rhythm. */
.bd-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 100px;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.bd-card-foot { margin-top: auto; }
.bd-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.bd-card-title {
  margin: 0;
  font-size: 13px; font-weight: 500; line-height: 1.45;
  color: var(--text-primary);
}
.bd-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  font-size: 10px;
}

/* Tags — quiet ghost labels, equal across columns */
.bd-tag {
  display: inline-flex; align-items: center;
  height: 16px; padding: 0 6px;
  border-radius: var(--r-4);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.04em;
}

/* Metric — small coral typeset; consistent treatment across cards */
.bd-metric {
  font-size: 11px; font-weight: 600;
  color: var(--asana-coral);
  font-feature-settings: 'tnum' 1;
}

/* Responsive — collapse the grid to keep columns readable on small screens.
   2 columns on tablet, 1 on phone. No horizontal scroll at any breakpoint. */
@media (max-width: 1024px) {
  .bd-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bd-board { grid-template-columns: 1fr; }
}

/* ── TIMELINE (Gantt) ────────────────────────────────────────── */
.gt-head {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-3);
  padding: 0 0 var(--s-3) 0;
}
.gt-meta {
  margin-right: auto;
  font-size: var(--t-sm); color: var(--text-muted);
  white-space: nowrap;
}
.gt-chart {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: 0;
  overflow: hidden;
}
/* Toolbar (meta + zoom stepper) on the right of the header */
.gt-tools {
  display: inline-flex; align-items: center;
  gap: var(--s-3);
}

.gt-zoom {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: 2px;
  gap: 0;
  user-select: none;
}
.gt-zoom-btn {
  appearance: none; border: 0;
  background: transparent;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px var(--font-sans);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--r-6);
  transition: background-color 120ms ease, color 120ms ease;
}
.gt-zoom-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.gt-zoom-btn:active:not(:disabled) { background: var(--bg-active); }
.gt-zoom-btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.gt-zoom-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px;
  height: 24px;
  padding: 0 8px;
  font: 600 12px var(--font-sans);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}

/* Chart container — left meta column + right pannable track */
.gt-chart {
  position: relative;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: 0;                       /* no inner padding — rows handle it */
  overflow: hidden;
  cursor: grab;
}
[data-theme="light"] .gt-chart { background: rgba(15,20,28,0.015); }
.gt-pane.is-panning .gt-chart { cursor: grabbing; }

/* The pannable inner — width set by --gt-track-w, X by --gt-pan-x.
   Same rule applied to every row's inner so they all move in sync.
   Background grid is layered via repeating gradients tied to the
   --gt-day-px / --gt-week-px / --gt-month-px CSS variables — that's
   what makes each zoom level look structurally different (different
   number of visible vertical cells), not just a resized chart. */
.gt-track-inner {
  position: relative;
  width: var(--gt-track-w, 100%);
  height: 100%;
  transform: translate3d(var(--gt-pan-x, 0px), 0, 0);
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.gt-pane.is-panning .gt-track-inner { transition: none; }

/* Months zoom — only month dividers (strong) — sparse cells */
.gt-pane[data-zoom="months"] .gt-track-inner {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: var(--gt-month-px, 80px) 100%;
}
[data-theme="light"] .gt-pane[data-zoom="months"] .gt-track-inner {
  background-image:
    linear-gradient(to right, rgba(15,20,28,0.14) 1px, transparent 1px);
}

/* Weeks zoom — week dividers (light) + month dividers (strong) — medium cells */
.gt-pane[data-zoom="weeks"] .gt-track-inner {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size:
    var(--gt-week-px,  60px) 100%,
    var(--gt-month-px, 240px) 100%;
}
[data-theme="light"] .gt-pane[data-zoom="weeks"] .gt-track-inner {
  background-image:
    linear-gradient(to right, rgba(15,20,28,0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,20,28,0.14) 1px, transparent 1px);
}

/* Days zoom — day (faint) + week (light) + month (strong) — dense cells */
.gt-pane[data-zoom="days"] .gt-track-inner {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size:
    var(--gt-day-px,   18px) 100%,
    var(--gt-week-px,  126px) 100%,
    var(--gt-month-px, 540px) 100%;
}
[data-theme="light"] .gt-pane[data-zoom="days"] .gt-track-inner {
  background-image:
    linear-gradient(to right, rgba(15,20,28,0.04)  1px, transparent 1px),
    linear-gradient(to right, rgba(15,20,28,0.08)  1px, transparent 1px),
    linear-gradient(to right, rgba(15,20,28,0.16)  1px, transparent 1px);
}

/* Today vertical marker — coral line + small head, doesn't intercept clicks. */
.gt-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--asana-coral);
  pointer-events: none;
  z-index: 1;
}
.gt-today::before {
  content: '';
  position: absolute;
  top: -3px; left: -2.5px;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--asana-coral);
}

/* ── Time axis row ─────────────────────────────── */
.gt-axis-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-4);
  align-items: stretch;
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.gt-axis-meta { /* spacer */ }
.gt-axis-track {
  height: 48px;
  background: transparent;
  border-radius: 0;
}
.gt-axis-major,
.gt-axis-minor {
  position: absolute; left: 0; right: 0;
}
.gt-axis-major { top: 0;  height: 26px; }
.gt-axis-minor { top: 26px; height: 22px; }
.gt-axis-month {
  position: absolute;
  display: inline-flex; align-items: center;
  height: 26px;
  padding-left: 8px;
  font: 600 11px var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-left: 1px solid var(--border-faint);
}
.gt-axis-tick {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px;
  padding: 0 4px;
  font: 500 10px var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Months zoom — taller axis with no minor row */
.gt-pane[data-zoom="months"] .gt-axis-track { height: 30px; }
.gt-pane[data-zoom="months"] .gt-axis-major { height: 30px; }

/* ── Phase rows ────────────────────────────────── */
.gt-rows {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.gt-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: 8px var(--s-3);
  border-bottom: 1px solid var(--border-faint);
}
.gt-row:last-child { border-bottom: 0; }

.gt-row-meta { min-width: 0; }
.gt-phase-head {
  display: flex; align-items: center;
  gap: 8px;
  min-width: 0;
}
.gt-phase-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.gt-phase-outcome {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: rgba(91,186,111,0.12);
  border: 1px solid rgba(91,186,111,0.28);
  border-radius: var(--r-pill);
  font: 600 10px var(--font-sans);
  color: var(--status-on-track-fg);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-feature-settings: 'tnum' 1;
  flex-shrink: 0;
}
[data-theme="light"] .gt-phase-outcome {
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.30);
}

.gt-row-track {
  position: relative;
  height: 22px;
  background: rgba(255,255,255,0.025);
  border-radius: var(--r-4);
  overflow: hidden;                 /* clip the wider inner */
}
[data-theme="light"] .gt-row-track { background: rgba(15,20,28,0.04); }

.gt-bar {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: var(--r-4);
  background: rgba(74,138,244,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;             /* bars are non-interactive (read-only) */
}
.gt-bar--complete    { background: rgba(91,186,111,0.85); }
.gt-bar--in-progress {
  background: rgba(74,138,244,0.85);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.16) 6px 12px);
  animation: gt-bar-pulse 2.4s ease-in-out infinite;
}
.gt-bar--at-risk     { background: rgba(255,107,107,0.85); }

@keyframes gt-bar-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1.5px rgba(74,138,244,0.40); }
}

/* ── Days zoom: per-day cells with right borders ─────────────────────── */
.gt-axis-minor--days .gt-axis-day {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px;
  font: 500 10px var(--font-mono);
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
  border-right: 1px solid var(--border-faint);
  box-sizing: border-box;
  white-space: nowrap;
}

/* ── Weeks zoom: per-week cells; each cell shows "DD - DD" + Wxx ─────── */
.gt-axis-minor--weeks .gt-axis-week {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: space-between;
  height: 26px;
  padding: 0 8px;
  border-right: 1px solid var(--border-faint);
  box-sizing: border-box;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.gt-axis-week-range {
  font: 500 11px var(--font-mono);
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.01em;
}
.gt-axis-week-num {
  font: 500 10px var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ── Months zoom: quarter banner on top, month cells below ──────────── */
.gt-pane[data-zoom="months"] .gt-axis-track { height: 56px; }
.gt-pane[data-zoom="months"] .gt-axis-major {
  height: 30px;
  background: var(--bg-active);
  border-bottom: 1px solid var(--border-faint);
}
.gt-pane[data-zoom="months"] .gt-axis-minor {
  top: 30px;
  height: 26px;
}
.gt-axis-quarter {
  position: absolute;
  display: inline-flex; align-items: center;
  height: 30px;
  padding-left: 12px;
  font: 600 12px var(--font-sans);
  color: var(--text-primary);
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-right: 1px solid var(--border-faint);
  box-sizing: border-box;
}
.gt-axis-minor--months .gt-axis-month-cell {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px;
  font: 600 12px var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-right: 1px solid var(--border-faint);
  box-sizing: border-box;
}

.gt-foot {
  margin: var(--s-3) 0 0 0;
  font-size: 12px; color: var(--text-muted);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .gt-bar--in-progress { animation: none; }
  .gt-track-inner { transition: none; }
}

@media (max-width: 640px) {
  .gt-row, .gt-axis-row { grid-template-columns: 1fr; gap: 8px; }
  .gt-axis-meta { display: none; }
  .gt-tools { gap: 8px; }
  .gt-zoom-label { min-width: 52px; font-size: 11px; }
}

/* ── DASHBOARD (Metrics + charts + commentary) ───────────────── */
.db-head { display: flex; flex-direction: column; gap: 4px; }
.db-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.db-sub { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.db-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-2);
}
.db-kpi {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.db-kpi-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.db-kpi-value {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-feature-settings: 'tnum' 1;
}
.db-kpi-delta {
  font-size: 11px; color: var(--text-secondary);
}
.db-kpi[data-direction="up"]   .db-kpi-value { color: #5BBA6F; }
.db-kpi[data-direction="down"] .db-kpi-value { color: #5BBA6F; }   /* down for cost = good */
.db-kpi[data-direction="risk"] .db-kpi-value { color: #FF6B6B; }

.db-charts {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.db-chart {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.db-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.db-chart-title {
  margin: 0;
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
}
.db-chart-kind {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--r-4);
  background: var(--bg-hover);
  border: 1px solid var(--border-soft);
}
.db-chart-body {
  background: rgba(255,255,255,0.015);
  border-radius: var(--r-6);
  padding: 12px;
}
.db-svg {
  width: 100%;
  height: auto;
  display: block;
}
.db-chart-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-2);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s-2);
}
.db-ctx { display: flex; flex-direction: column; gap: 4px; }
.db-ctx-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.db-ctx p {
  margin: 0;
  font-size: 12px; line-height: 1.5;
  color: var(--text-secondary);
}

/* Before/After comparison */
.db-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.db-ba-col {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--r-6);
}
.db-ba-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.db-ba-row {
  display: grid;
  grid-template-columns: 1fr 100px 40px;
  align-items: center;
  gap: 8px;
}
.db-ba-name {
  font-size: 11px; color: var(--text-secondary);
}
.db-ba-track {
  height: 6px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.db-ba-fill { height: 100%; border-radius: var(--r-pill); }
.db-ba-fill--before { background: rgba(140,143,148,0.6); }
.db-ba-fill--after  { background: rgba(91,186,111,0.85); }
.db-ba-val {
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* Funnel */
.db-funnel { display: flex; flex-direction: column; gap: 6px; }
.db-funnel-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  align-items: center;
  gap: 12px;
}
.db-funnel-name { font-size: 12px; color: var(--text-secondary); }
.db-funnel-bar {
  height: 28px;
  background: rgba(74,138,244,0.7);
  border-radius: var(--r-4);
  display: flex; align-items: center;
  padding: 0 10px;
}
.db-funnel-val {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.95);
  font-feature-settings: 'tnum' 1;
}
.db-funnel-rate {
  font-size: 11px; color: var(--text-muted);
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* Legacy charts.js fallthrough container */
.db-legacy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}

/* ── INSIGHTS (Strategic principles — Situation/Decision/Outcome/Principle) ── */
.in-pane > * { max-width: 640px; }

/* When the insights section is embedded inside the merged Dashboard
   tab (.db-insights), give it a clear visual break from the charts
   above and slightly tighter top spacing so it reads as one continuous
   page rather than two separate views. */
.db-pane .db-insights {
  margin-top: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.in-head { display: flex; flex-direction: column; gap: 4px; }
.in-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.in-sub { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.in-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.in-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.in-card-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 10px;
}
.in-card-num {
  font-size: 13px; font-weight: 700;
  color: var(--asana-coral);
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.04em;
}
.in-card-title {
  margin: 0;
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  flex: 1;
}
.in-card-grid {
  margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.in-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: baseline;
}
.in-row dt {
  margin: 0;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.in-row dd {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--text-secondary);
}
.in-row--principle dd {
  color: var(--text-primary);
  font-weight: 500;
}
.in-row--evidence dd {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Responsive — collapse multi-col grids on narrow viewports */
@media (max-width: 1024px) {
  .bd-board { grid-template-columns: repeat(5, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
  .pl-pane > *, .in-pane > * { max-width: 100%; }
  .bd-board {
    grid-template-columns: 1fr;
  }
  .gt-row { grid-template-columns: 1fr; gap: 6px; }
  .gt-phase-outcome { grid-column: 1; }
  .db-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .db-ba { grid-template-columns: 1fr; }
  .db-ba-row { grid-template-columns: 1fr 80px 40px; }
  .db-funnel-row { grid-template-columns: 100px 1fr 40px; }
  .in-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   LIGHT THEME — component-level overrides for values that don't
   live in tokens.css (status pill foregrounds, edge strokes,
   dot grids, alpha helpers). Layout untouched — only colour.
   ============================================================ */

[data-theme="light"] {

  /* Goal status chips — bump fg to AA on white */
  .gl-node-status--compounding { color: #15803D; background: rgba(34,163,74,0.14); }
  .gl-node-status--active      { color: #1849A9; background: rgba(74,138,244,0.14); }
  .gl-node-status--at-risk     { color: #B42318; background: rgba(220,38,38,0.12); }
  .gl-node-status--completed   { color: #4D5560; background: rgba(140,143,148,0.20); }
  .gl-node-status--not-started { color: #4D5560; background: rgba(77,83,89,0.10); }

  /* Goal progress bar fills — same enum, deeper hues for light */
  .gl-node-progress-fill--compounding { background: #15803D; }
  .gl-node-progress-fill--active      { background: #1849A9; }
  .gl-node-progress-fill--at-risk     { background: #B42318; }
  .gl-node-progress-fill--completed   { background: #6B7480; }
  .gl-node-progress-fill--not-started { background: #C8CDD3; }

  /* Strategy-map canvas — invert the dot grid + edge strokes */
  .gl-canvas-bg {
    background-image: radial-gradient(circle at 1px 1px, rgba(15,20,28,0.06) 1px, transparent 0);
  }
  .gl-edge { stroke: rgba(15,20,28,0.16); }
  .gl-edge.is-on-path,
  .gl-edge.is-in-focus { stroke: rgba(15,20,28,0.55); }
  .gl-canvas.has-focus .gl-edge:not(.is-in-focus) { stroke-opacity: 0.20; }
  .gl-edge.is-filtered-out { stroke-opacity: 0.06; }

  /* Goals filter menu and toolbar buttons — proper light surface */
  .gl-toolbar-btn:hover { border-color: rgba(15,20,28,0.18); }
  .gl-node:hover { border-color: rgba(15,20,28,0.22); box-shadow: 0 4px 14px rgba(15,20,28,0.10); }
  .gl-node.is-on-path { border-color: rgba(15,20,28,0.30); }
  .gl-node.is-hovered { border-color: rgba(15,20,28,0.32); }

  /* Goal cards — root, pillar, execution accents on light */
  .gl-node--root {
    background: linear-gradient(180deg, rgba(255,107,107,0.06), transparent 60%), #FFFFFF;
    border-color: rgba(255,107,107,0.45);
    box-shadow:
      0 0 0 1px rgba(255,107,107,0.18),
      0 6px 18px rgba(255,107,107,0.10),
      0 1px 3px rgba(15,20,28,0.06);
  }

  /* Asana List pills — keep same hue families, deeper fg + slightly
     warmer bg so they read on white */
  .al-pill--p-high   { background: rgba(168,85,247,0.16); color: #6D28D9; }
  .al-pill--p-medium { background: rgba(217,119,6,0.14);  color: #92400E; }
  .al-pill--p-low    { background: rgba(2,132,199,0.14);  color: #075985; }
  .al-pill--s-on-track    { background: rgba(13,148,136,0.14);  color: #0F766E; }
  .al-pill--s-at-risk     { background: rgba(217,119,6,0.14);   color: #92400E; }
  .al-pill--s-off-track   { background: rgba(220,38,38,0.12);   color: #B91C1C; }
  .al-pill--s-completed   { background: rgba(22,163,74,0.14);   color: #166534; }
  .al-row[data-status="at-risk"]  .al-due,
  .al-row[data-status="off-track"] .al-due { color: #B42318; }
  .al-cb { border-color: var(--text-muted); }
  .al-cb[data-done="true"] { border-color: #15803D; background: #15803D; }
  .al-row--head { background: rgba(15,20,28,0.018); }

  /* Board cards + section accents — columns are transparent on light;
     cards provide their own visual structure via white fill + border */
  .bd-col { background: transparent; }
  .bd-card:hover { border-color: rgba(15,20,28,0.20); box-shadow: 0 4px 10px rgba(15,20,28,0.08); }
  .bd-tag { background: rgba(15,20,28,0.05); }
  .bd-col[data-col="problem"]    .bd-col-name { color: #B42318; }
  .bd-col[data-col="hypothesis"] .bd-col-name { color: #1849A9; }
  .bd-col[data-col="action"]     .bd-col-name { color: #B45309; }
  .bd-col[data-col="outcome"]    .bd-col-name { color: #166534; }
  .bd-col[data-col="insight"]    .bd-col-name { color: #6D28D9; }

  /* Dashboard charts — track + grid lines need to invert; bars stay coral */
  .gt-row-track    { background: rgba(15,20,28,0.04); }
  .gt-track-grid   { background-image: linear-gradient(to right, rgba(15,20,28,0.06) 1px, transparent 1px); }
  .gt-bar--complete    { background: rgba(22,163,74,0.85); }
  .gt-bar--in-progress { background: rgba(37,99,235,0.85); }
  .gt-bar--at-risk     { background: rgba(220,38,38,0.85); }

  .db-svg path[stroke="var(--asana-coral)"] { stroke: #D14848; }
  .db-svg circle { fill: #D14848; }
  .db-funnel-bar { background: rgba(37,99,235,0.70); }
  .db-ba-fill--before { background: rgba(15,20,28,0.30); }
  .db-ba-fill--after  { background: rgba(22,163,74,0.85); }
  .db-ba-track { background: rgba(15,20,28,0.06); }
  .db-chart-body { background: rgba(15,20,28,0.02); }

  /* KPI direction colours — deeper greens for light */
  .db-kpi[data-direction="up"]   .db-kpi-value { color: #15803D; }
  .db-kpi[data-direction="down"] .db-kpi-value { color: #15803D; }
  .db-kpi[data-direction="risk"] .db-kpi-value { color: #B42318; }

  /* Insights tab — coral number stays; principle row reads as primary text */
  .in-row--evidence dd { color: #6B7480; }

  /* Project breakdown — cover gradient adapts; insight rail accent */
  .pb-cover {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--pb-accent) 22%, transparent) 0%,
        color-mix(in srgb, var(--pb-accent) 8%, transparent) 60%,
        transparent 100%),
      #F6F7F9;
  }
  .pb-insight { background: color-mix(in srgb, var(--pb-accent) 10%, #FFFFFF); }

  /* Status pills (project header generic .pill) inherit from token system,
     no extra rules needed. */

  /* Topbar / sidebar separators */
  .topbar { box-shadow: 0 1px 0 rgba(15,20,28,0.06); }

  /* Drawer scrim becomes lighter so it doesn't slam the page */
  .drawer-scrim { background: rgba(15,20,28,0.40); }

  /* Filter dropdown shadow + checkmark colour */
  .gl-filter-menu { box-shadow: 0 12px 32px rgba(15,20,28,0.12), 0 4px 10px rgba(15,20,28,0.06); }
  .gl-filter-option svg { color: var(--asana-coral); }

  /* Recommendations card hover treatment for light */
  .recs-card:hover { box-shadow: 0 8px 24px rgba(15,20,28,0.10); }

  /* Process-log task hover background */
  .pl-task:hover { background: rgba(15,20,28,0.03); border-color: rgba(15,20,28,0.10); }

  /* Strategy-map focus list rows — invert white-alpha to dark */
  .gl-focus-item { background: rgba(15,20,28,0.025); }

  /* Dashboard before/after columns — invert white-alpha to dark */
  .db-ba-col { background: rgba(15,20,28,0.03); }

  /* Artifact card hover shadow — base rule uses dark-mode-heavy rgba(0,0,0,0.30) */
  .af-card:hover { box-shadow: 0 4px 12px rgba(15,20,28,0.12); }

  /* Legacy timeline bar inset glow + in-progress shimmer */
  .gt-bar { box-shadow: inset 0 1px 0 rgba(15,20,28,0.06); }
  .gt-bar--in-progress {
    background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(15,20,28,0.10) 6px 12px);
  }
}

/* ── Theme toggle button (topbar) — sun/moon icons swap by data-theme ── */
.tb-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-6);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  margin-right: var(--s-1);
}
.tb-theme:hover { background: var(--bg-hover); color: var(--text-primary); }
.tb-theme:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tb-theme .icon-sun  { display: none; }
.tb-theme .icon-moon { display: block; }

/* ============================================================
   TIMELINE · Preact island (.tl-* namespace, flagship build)
   Mounted via scripts/views/timeline-island.js. The legacy .gt-*
   block above is dead but left in place for now.
   ============================================================ */

.tl-pane {
  display: flex;
  flex-direction: column;
  /* No gap — toolbar lives inside the chart card now */
}

/* ── Toolbar (integrated inside chart card) ─── */
.tl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft);
}
.tl-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 13px var(--font-sans);
}
.tl-meta-count { color: var(--text-primary); font-weight: 600; }
.tl-meta-sep   { color: var(--text-muted); }
/* Pill matches the portfolio's native status-pill rhythm */
.tl-meta-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tl-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Today button */
.tl-today-btn {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 6px 12px 6px 10px;
  border-radius: var(--r-6);
  font: 600 12px var(--font-sans);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex; align-items: center;
  gap: 6px;
  transition: background-color 120ms, border-color 120ms;
}
.tl-today-btn-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--asana-coral);
  box-shadow: 0 0 0 3px rgba(255,107,107,0.20);
  flex-shrink: 0;
}
.tl-today-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}
.tl-today-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Segmented zoom */
.tl-zoom {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  padding: 2px;
  gap: 0;
}
.tl-zoom-tab {
  appearance: none; border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: var(--r-4);
  font: 600 12px var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;
}
.tl-zoom-tab:hover:not([data-active="true"]) { color: var(--text-primary); }
.tl-zoom-tab[data-active="true"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
[data-theme="light"] .tl-zoom-tab[data-active="true"] {
  box-shadow: 0 1px 3px rgba(15,20,28,0.10);
}

/* ── Chart container ─────────────────────────── */
.tl-chart {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  overflow: hidden;
  cursor: grab;
}
.tl-pane.is-panning .tl-chart { cursor: grabbing; }

/* Pannable inner — width + transform driven by CSS variables.
   Drag bypasses transition (.is-panning). Jumps animate (.is-jumping).
   `min-width: 100%` lets the inner expand to the parent's full width
   when the natural chart pixel width (trackWPx) is smaller than the
   visible track area — eliminates the empty column to the right of
   the last month / quarter cell in Months view. When trackWPx is
   larger (e.g. Weeks view across multiple months), the inner stays at
   that explicit pixel width and overflows for horizontal pan. */
.tl-track-inner {
  position: relative;
  width: var(--tl-track-w, 100%);
  min-width: 100%;
  height: 100%;
  transform: translate3d(var(--tl-pan-x, 0px), 0, 0);
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.tl-pane.is-panning .tl-track-inner { transition: none; }
.tl-pane.is-jumping .tl-track-inner {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Time axis ──────────────────────────────── */
.tl-axis-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  height: 56px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft);
  align-items: stretch;
}
.tl-axis-meta {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--border-soft);
  font: 600 12px var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tl-axis-track {
  position: relative;
  height: 100%;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}
.tl-axis-major,
.tl-axis-minor {
  position: absolute;
  left: 0; right: 0;
}
.tl-axis-major { top: 6px;  height: 22px; }
.tl-axis-minor { top: 30px; height: 22px; }

/* Axis cells — shared base. No borders on individual cells (vertical
   references come from DOM .tl-grid-month spans + the CSS background
   gradient). Per-zoom overrides further down set typography, padding,
   and alignment so each cell type reads correctly. */
.tl-axis-month,
.tl-axis-week,
.tl-axis-quarter,
.tl-axis-month-cell {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  user-select: none;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Click-to-jump hover state */
.tl-axis-clickable { cursor: pointer; transition: background-color 120ms, color 120ms; }
.tl-axis-clickable:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Both Weeks and Months views use the SAME stacked banner layout:
   • Major row (top, 30px) = quarter (Months) or month (Weeks) banner —
     opaque tab that sits ABOVE grid + today lines via z-index.
   • Minor row (below, 26px) = month (Months) or week (Weeks) labels —
     transparent so the body grid lines pass through visually as cell
     dividers between the labels.
   This is the Asana-faithful layout from the reference screenshots. */
.tl-pane[data-zoom="months"] .tl-axis-row,
.tl-pane[data-zoom="months"] .tl-axis-track,
.tl-pane[data-zoom="weeks"] .tl-axis-row,
.tl-pane[data-zoom="weeks"] .tl-axis-track { height: 56px; }

.tl-pane[data-zoom="months"] .tl-axis-major,
.tl-pane[data-zoom="weeks"]  .tl-axis-major {
  top: 0;
  height: 30px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
  z-index: 3;            /* sits above .tl-grid-month (z:1) — clean tab */
}
.tl-pane[data-zoom="months"] .tl-axis-minor,
.tl-pane[data-zoom="weeks"]  .tl-axis-minor {
  top: 30px;
  height: 26px;
  z-index: 2;            /* above grid lines, below today line */
}

/* Banner cell typography — uppercase, bold, slightly looser tracking
   matches the Asana quarter/month banner from the reference. */
.tl-pane[data-zoom="months"] .tl-axis-quarter,
.tl-pane[data-zoom="weeks"]  .tl-axis-month {
  font: 700 12px var(--font-sans);
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  justify-content: flex-start;
  padding-left: 12px;
}
/* Banner cell dividers — 1px line at the LEFT edge of every banner cell
   except the first. Lives ONLY in the axis banner (.tl-axis-major), so
   it never bleeds into the body grid. Adjacent-sibling selector means
   the leftmost cell stays borderless and dividers only appear BETWEEN
   cells — exactly the Asana behaviour from the reference. */
.tl-pane[data-zoom="months"] .tl-axis-major .tl-axis-quarter + .tl-axis-quarter,
.tl-pane[data-zoom="weeks"]  .tl-axis-major .tl-axis-month   + .tl-axis-month {
  border-left: 1px solid var(--border-soft);
}
/* Minor-row labels — month names (Months view) and week numbers
   (Weeks view) get the cleaner secondary treatment, left-padded so the
   text reads aligned with the cell's left grid line. */
.tl-pane[data-zoom="months"] .tl-axis-month-cell {
  font: 600 12px var(--font-sans);
  color: var(--text-secondary);
  justify-content: flex-start;
  padding-left: 12px;
}
.tl-pane[data-zoom="weeks"] .tl-axis-week {
  font: 500 11px var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
  justify-content: flex-start;
  padding-left: 8px;
}

/* ── Phase rows ─────────────────────────────── */
.tl-rows {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.tl-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: stretch;
  height: 52px;
  border-bottom: 1px solid var(--border-faint);
  transition: background-color 120ms;
}
.tl-row:nth-child(even) { background: rgba(255,255,255,0.012); }
[data-theme="light"] .tl-row:nth-child(even) { background: rgba(15,20,28,0.020); }
.tl-row:hover { background: var(--bg-hover); }
.tl-row:last-child { border-bottom: 0; }

.tl-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid var(--border-soft);
}
.tl-phase-dot {
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--tl-phase-color, var(--text-muted));
  flex-shrink: 0;
  /* Soft halo using the phase colour */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-phase-color, transparent) 18%, transparent);
}
.tl-phase-name {
  font: 600 13px/1.3 var(--font-sans);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

.tl-row-track {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* ── Bars (Asana pill, phase-coloured) ──────── */
.tl-bar {
  position: absolute;
  top: 12px; bottom: 12px;
  border-radius: var(--r-pill);
  background: var(--tl-phase-color, var(--text-muted));
  cursor: default;
  pointer-events: auto;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.10);
  z-index: 6;
  filter: brightness(1.08);
}
[data-theme="light"] .tl-bar:hover {
  box-shadow: 0 6px 18px rgba(15,20,28,0.16), 0 1px 3px rgba(15,20,28,0.10);
}

/* In-progress bar shimmer */
.tl-bar--in-progress {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    rgba(255,255,255,0.18) 8px 16px
  );
}
.tl-bar-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.30) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: tl-shimmer 2.4s linear infinite;
  pointer-events: none;
}
@keyframes tl-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position:  100% 0; }
}

/* ── Grid lines (DOM, exact alignment) + Today marker ── */
/* Month grid lines anchor the axis cells to the body — same percentage
   in every track-inner, so axis labels and body cells line up exactly
   regardless of how much is panned off-screen. */
.tl-grid-month {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: 1;
}
[data-theme="light"] .tl-grid-month {
  background: rgba(15,20,28,0.14);
}

.tl-today-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--asana-coral);
  pointer-events: none;
  z-index: 6;            /* above banner (z:3) so today crosses the tab */
}

/* ── Hover tooltip ──────────────────────────── */
.tl-tooltip {
  position: fixed;
  z-index: 100;
  width: 320px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--tl-phase-color, var(--asana-coral));
  border-radius: var(--r-8);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10);
  pointer-events: none;
  transform: translate(-50%, -100%);
  animation: tl-tooltip-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="light"] .tl-tooltip {
  box-shadow: 0 8px 24px rgba(15,20,28,0.14), 0 2px 6px rgba(15,20,28,0.08);
}
@keyframes tl-tooltip-in {
  from { opacity: 0; transform: translate(-50%, -92%); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}
.tl-tooltip-head {
  display: flex; align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tl-tooltip-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--tl-phase-color);
  flex-shrink: 0;
}
.tl-tooltip-title {
  font: 600 13px var(--font-sans);
  color: var(--text-primary);
}
.tl-tooltip-date {
  font: 500 11px var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
  margin-bottom: 8px;
}
.tl-tooltip-desc {
  margin: 0 0 10px;
  font: 400 12px/1.5 var(--font-sans);
  color: var(--text-secondary);
}
.tl-tooltip-outcome {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(91,186,111,0.12);
  border: 1px solid rgba(91,186,111,0.28);
  border-radius: var(--r-pill);
  font: 600 11px var(--font-sans);
  color: var(--status-on-track-fg);
  font-feature-settings: 'tnum' 1;
}
[data-theme="light"] .tl-tooltip-outcome {
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.30);
}
.tl-tooltip-outcome-arrow { font-weight: 700; }

/* ── Background grid (per zoom) ─────────────── */
/* Vertical grid lines:
   • Weeks view = subtle weekly gradient offset to the first Monday so
     each week-column reads as a discrete cell.
   • Months view = NO gradient (months are 28–31 days; any fixed-pitch
     gradient drifts). DOM .tl-grid-month spans handle month edges and
     stay perfectly aligned with the axis labels above. */
.tl-pane[data-zoom="weeks"] .tl-track-inner {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: var(--tl-week-px, 60px) 100%;
  background-position: var(--tl-grid-w-offset, 0) 0;
}
.tl-pane[data-zoom="months"] .tl-track-inner {
  background-image: none;
}
[data-theme="light"] .tl-pane[data-zoom="weeks"] .tl-track-inner {
  background-image:
    linear-gradient(to right, rgba(15,20,28,0.06) 1px, transparent 1px);
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tl-track-inner { transition: none; }
  .tl-bar         { transition: none; }
  .tl-bar-shimmer { animation: none; opacity: 0; }
  .tl-tooltip     { animation: none; }
}

/* ── Mobile fallback ────────────────────────── */
@media (max-width: 640px) {
  .tl-toolbar { gap: 8px; padding: var(--s-2) 12px; }
  .tl-zoom-tab { padding: 4px 10px; font-size: 11px; }
  .tl-today-btn { padding: 4px 10px; }
  .tl-axis-row, .tl-row { grid-template-columns: 180px 1fr; }
  .tl-tooltip { width: 280px; }
}
[data-theme="light"] .tb-theme .icon-sun  { display: block; }
[data-theme="light"] .tb-theme .icon-moon { display: none; }

/* ============================================================
   DASHBOARD · Preact island (.db2-* namespace, interactive build)
   Mounted via scripts/views/dashboard-island.js. Uses the same
   design tokens as the rest of the portfolio: coral primary, dark
   surface, divider hairlines, 8px spacing grid.
   ============================================================ */

.db-host { /* tab-pane wrapper for the dashboard island mount point */ }

.db2-pane {
  display: flex;
  flex-direction: column;
}
.db2-shell {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ── Toolbar (matches Timeline pattern) ──────────── */
.db2-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 16px;
  flex-wrap: wrap;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  background: var(--bg-soft);
}
.db2-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 13px var(--font-sans);
}
.db2-meta-count { color: var(--text-primary); font-weight: 600; }
.db2-meta-sep   { color: var(--text-muted); }
.db2-meta-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.db2-view {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  padding: 2px;
}
.db2-view-tab {
  appearance: none; border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: var(--r-4);
  font: 600 12px var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms, color 120ms, box-shadow 120ms;
}
.db2-view-tab:hover:not([data-active="true"]):not(:disabled) { color: var(--text-primary); }
.db2-view-tab[data-active="true"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.db2-view-tab:disabled { opacity: 0.35; cursor: not-allowed; }
[data-theme="light"] .db2-view-tab[data-active="true"] {
  box-shadow: 0 1px 3px rgba(15,20,28,0.10);
}

/* ── KPI strip ───────────────────────────────────── */
.db2-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}
.db2-kpi {
  appearance: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  cursor: pointer;
  color: var(--text-primary);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 160ms,
              box-shadow 160ms;
  animation: db2-kpi-in 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--anim-delay, 0ms);
}
@keyframes db2-kpi-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.db2-kpi:hover {
  transform: translateY(-1px);
  border-color: var(--border-medium);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
[data-theme="light"] .db2-kpi:hover {
  box-shadow: 0 4px 12px rgba(15,20,28,0.10);
}
.db2-kpi:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.db2-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.db2-kpi-value {
  font: 700 28px/1 var(--font-sans);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.db2-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.db2-kpi-dir {
  display: inline-flex;
  width: 16px; height: 16px;
  align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font-size: 9px;
  background: var(--bg-active);
  color: var(--text-secondary);
}
.db2-kpi[data-direction="up"]   .db2-kpi-dir { background: rgba(91,186,111,0.15); color: var(--status-on-track-fg); }
.db2-kpi[data-direction="down"] .db2-kpi-dir { background: rgba(255,107,107,0.15); color: var(--asana-coral); }
.db2-kpi-context {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.db2-kpi[aria-expanded="true"] {
  border-color: var(--db-accent, var(--asana-coral));
  background: color-mix(in srgb, var(--db-accent, var(--asana-coral)) 5%, var(--surface));
}

/* ── Charts ─────────────────────────────────────── */
.db2-charts {
  display: grid;
  gap: var(--s-4);
}
.db2-chart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  overflow: hidden;
}
.db2-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-soft);
}
.db2-chart-title {
  margin: 0;
  font: 600 14px var(--font-sans);
  color: var(--text-primary);
}
.db2-chart-kind {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 3px 8px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
}
.db2-chart-body { padding: 16px 14px 14px; }
.db2-chart-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  padding: 14px 18px;
  border-top: 1px solid var(--border-faint);
  background: var(--bg-soft);
}
.db2-ctx { display: flex; flex-direction: column; gap: 4px; }
.db2-ctx-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-accent, var(--asana-coral));
}
.db2-ctx p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── SVG chart frame + tooltips ──────────────────── */
.db2-chart-frame { position: relative; }
.db2-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}
.db2-svg-pt circle:first-child { transition: r 120ms; }
.db2-svg-pt[data-active="true"] circle:first-child { r: 5; }

.db2-tooltip {
  position: absolute;
  left: var(--lx, 50%);
  top: calc(var(--ly, 50%) - 12px);
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--db-accent, var(--asana-coral));
  border-radius: var(--r-6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  animation: db2-tip-in 140ms ease-out;
}
.db2-tooltip--bar { top: 24px; transform: translate(-50%, 0); }
@keyframes db2-tip-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}
.db2-tooltip-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.db2-tooltip-value {
  font: 700 16px var(--font-sans);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.db2-tooltip-delta {
  font-size: 11px;
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
}

/* ── Before/After comparison ─────────────────────── */
.db2-ba { display: flex; flex-direction: column; gap: 10px; }
.db2-ba-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border-radius: var(--r-6);
  transition: background 120ms;
}
.db2-ba-row[data-active="true"] { background: var(--bg-hover); }
.db2-ba-name { font-size: 12px; color: var(--text-secondary); }
.db2-ba-tracks { display: flex; flex-direction: column; gap: 6px; }
.db2-ba-track {
  position: relative;
  height: 16px;
  background: var(--bg-active);
  border-radius: var(--r-4);
  overflow: hidden;
}
.db2-ba-fill {
  height: 100%;
  border-radius: var(--r-4);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.db2-ba-fill--before { background: rgba(120, 120, 130, 0.5); }
.db2-ba-fill--after  { background: var(--db-accent, var(--asana-coral)); }
.db2-ba-val {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  font: 600 10px var(--font-mono);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.db2-ba-delta {
  font: 700 12px var(--font-mono);
  color: var(--status-on-track-fg);
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* ── Donut chart ─────────────────────────────────── */
/* Max-width caps the cluster width so the donut + legend sit close
   together instead of stretching across the full card. Centred so
   the chart card stays balanced when the donut is the only widget. */
.db2-donut-frame {
  display: grid;
  grid-template-columns: 180px minmax(200px, 280px);
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  max-width: 520px;
  margin: 0 auto;
}
.db2-donut-svg {
  width: 180px; height: 180px;
  display: block;
}
.db2-donut-legend {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Tighter legend rows — value sits a constant gap from the label,
   not pinned to the right edge of the parent. Reads as one unit. */
.db2-donut-legend-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-6);
  cursor: pointer;
  transition: background 120ms;
}
.db2-donut-legend-item:hover,
.db2-donut-legend-item[data-active="true"] {
  background: var(--bg-hover);
}
.db2-donut-dot {
  width: 12px; height: 12px;
  border-radius: var(--r-pill);
  display: inline-block;
}
.db2-donut-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.db2-donut-value {
  font: 700 13px var(--font-mono);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}

/* ── Horizontal bar (leaderboard) ────────────────── */
.db2-hbar { display: flex; flex-direction: column; gap: 6px; }
.db2-hbar-row {
  display: grid;
  grid-template-columns: 28px 140px 1fr 70px 50px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-6);
  transition: background 120ms;
  cursor: default;
}
.db2-hbar-row:hover,
.db2-hbar-row[data-active="true"] {
  background: var(--bg-hover);
}
.db2-hbar-rank {
  font: 700 11px var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}
.db2-hbar-row[data-rank="1"] .db2-hbar-rank { color: var(--db-accent, var(--asana-coral)); }
.db2-hbar-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db2-hbar-track {
  position: relative;
  height: 12px;
  background: var(--bg-active);
  border-radius: var(--r-4);
  overflow: hidden;
}
.db2-hbar-fill {
  height: 100%;
  background: var(--db-accent, var(--asana-coral));
  border-radius: var(--r-4);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.db2-hbar-row[data-rank="1"] .db2-hbar-fill { background: var(--db-accent, var(--asana-coral)); }
.db2-hbar-row:not([data-rank="1"]) .db2-hbar-fill {
  background: color-mix(in srgb, var(--db-accent, var(--asana-coral)) 65%, var(--bg-active));
}
.db2-hbar-val {
  font: 600 12px var(--font-mono);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
  text-align: right;
}
.db2-hbar-share {
  font: 500 11px var(--font-mono);
  color: var(--text-muted);
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* ── Funnel ──────────────────────────────────────── */
.db2-funnel { display: flex; flex-direction: column; gap: 6px; }
.db2-funnel-row {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: var(--r-6);
  transition: background 120ms;
}
.db2-funnel-row[data-active="true"] { background: var(--bg-hover); }
.db2-funnel-name { font-size: 12px; color: var(--text-secondary); }
/* Track holds the bar (positioned absolutely at left:0, width = bar-pct)
   AND the value (positioned absolutely either inside the bar's right
   edge or just past it). Both anchor off the same `--bar-pct` CSS var
   so the value tracks the bar's right edge precisely. */
.db2-funnel-track {
  position: relative;
  height: 28px;
}
.db2-funnel-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--bar-pct, 0%);
  background: var(--db-accent, var(--asana-coral));
  border-radius: var(--r-4);
  transition: filter 120ms,
              width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.db2-funnel-row[data-active="true"] .db2-funnel-bar { filter: brightness(1.1); }
.db2-funnel-val {
  position: absolute;
  top: 50%;
  font: 700 12px var(--font-mono);
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
  pointer-events: none;
}
/* Bar wide enough — value sits flush-right INSIDE the bar in white */
.db2-funnel-val[data-position="inside"] {
  left: var(--bar-pct, 0%);
  transform: translate(-100%, -50%);
  padding-right: 10px;
  color: #fff;
}
/* Bar too narrow — value sits OUTSIDE the bar, just past the right edge */
.db2-funnel-val[data-position="outside"] {
  left: var(--bar-pct, 0%);
  margin-left: 8px;
  transform: translateY(-50%);
  color: var(--text-primary);
}
.db2-funnel-rate {
  font: 600 11px var(--font-mono);
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
}

/* ── Insights accordion ──────────────────────────── */
.db2-insights {
  margin-top: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.db2-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
}
.db2-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.db2-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.db2-section-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.db2-in-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.db2-in-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  overflow: hidden;
  transition: border-color 160ms;
}
.db2-in-card[data-expanded="true"] { border-color: var(--db-accent, var(--asana-coral)); }
.db2-in-card-head {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: background 120ms;
}
.db2-in-card-head:hover { background: var(--bg-hover); }
.db2-in-card-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--db-accent, var(--asana-coral)); }
.db2-in-num {
  font: 700 11px var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}
.db2-in-title {
  margin: 0;
  font: 600 14px/1.4 var(--font-sans);
  color: var(--text-primary);
}
.db2-in-chev {
  font: 400 18px/1 var(--font-sans);
  color: var(--text-muted);
  text-align: center;
}
.db2-in-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0 18px 18px 60px;
  border-top: 1px solid var(--border-faint);
  padding-top: 14px;
}
.db2-in-row { display: flex; flex-direction: column; gap: 4px; }
.db2-in-row dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.db2-in-row dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.db2-in-row--principle dd {
  font-weight: 600;
  color: var(--text-primary);
}
.db2-in-row--principle dt { color: var(--db-accent, var(--asana-coral)); }
.db2-in-row--evidence dd {
  font: 500 12px/1.5 var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}

/* ── Empty state ─────────────────────────────────── */
.db2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 56px 16px;
  background: var(--surface);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-8);
  color: var(--text-muted);
}
.db2-empty p { margin: 0; font-size: 13px; max-width: 480px; text-align: center; }

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .db2-kpi      { animation: none; }
  .db2-tooltip  { animation: none; }
  .db2-ba-fill  { transition: none; }
}

/* ── Gauge ───────────────────────────────────────── */
.db2-gauge-frame {
  display: grid;
  grid-template-columns: 220px minmax(160px, 240px);
  gap: var(--s-4);
  align-items: center;
  justify-content: center;
  max-width: 540px;
  margin: 0 auto;
}
.db2-gauge-svg { width: 220px; height: 180px; display: block; }
.db2-gauge-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.db2-gauge-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
}
.db2-gauge-row span:last-child {
  font: 600 13px var(--font-mono);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.db2-gauge-dot {
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  display: inline-block;
}

/* ── Heatmap ─────────────────────────────────────── */
.db2-heatmap-frame {
  position: relative;
  overflow-x: auto;
}
.db2-heatmap {
  display: grid;
  gap: 2px;
  align-items: center;
  min-width: 480px;
}
.db2-heatmap-corner { background: transparent; }
.db2-heatmap-colhead {
  font: 600 10px var(--font-mono);
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
  text-align: center;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.db2-heatmap-rowhead {
  font: 500 11px var(--font-sans);
  color: var(--text-secondary);
  padding-right: 10px;
  text-align: right;
  white-space: nowrap;
}
.db2-heatmap-cell {
  appearance: none;
  border: 0;
  border-radius: var(--r-4);
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: outline 120ms;
  outline: 1px solid transparent;
}
.db2-heatmap-cell[data-empty="true"] {
  background: var(--bg-active) !important;
  cursor: default;
}
.db2-heatmap-cell[data-active="true"] {
  outline: 1px solid var(--asana-coral);
  z-index: 2;
}
.db2-heatmap-value {
  font: 600 10px var(--font-mono);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.db2-heatmap-cell[data-empty="true"] .db2-heatmap-value { color: var(--text-disabled); }
.db2-heatmap-tooltip {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--asana-coral);
  border-radius: var(--r-6);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}

/* ── Treemap ─────────────────────────────────────── */
.db2-treemap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 220px;
}
.db2-treemap-tile {
  min-width: 120px;
  min-height: 90px;
  padding: 12px 14px;
  border-radius: var(--r-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: default;
  transition: filter 120ms, transform 120ms;
}
.db2-treemap-tile[data-active="true"] {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.db2-treemap-label {
  font: 600 12px var(--font-sans);
  color: var(--text-primary);
}
.db2-treemap-value {
  font: 700 16px var(--font-mono);
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.db2-treemap-share {
  font: 500 10px var(--font-mono);
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
}

/* ── Stacked legend ──────────────────────────────── */
.db2-stacked-legend {
  list-style: none;
  margin: 8px 0 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
}
.db2-stacked-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.db2-stacked-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  display: inline-block;
}
.db2-stacked-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── Tree (hub-and-spoke) ────────────────────────── */
.db2-tree-frame {
  display: flex;
  justify-content: center;
}
.db2-tree-svg {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
}
/* Clickable nodes get a subtle hover lift via SVG filter — gives
   tactile feedback that this circle is a link, not just a label. */
.db2-tree-node[data-clickable="true"] circle {
  transition: filter 160ms cubic-bezier(0.22, 1, 0.36, 1),
              stroke-width 160ms;
}
.db2-tree-node[data-clickable="true"]:hover circle {
  filter: drop-shadow(0 4px 12px rgba(255, 107, 107, 0.30));
  stroke-width: 2.5px;
}
.db2-tree-node[data-clickable="true"]:focus-visible {
  outline: none;
}
.db2-tree-node[data-clickable="true"]:focus-visible circle {
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 0 3px rgba(255, 107, 107, 0.45));
}

/* ── Iframe card ─────────────────────────────────── */
.db2-iframe-frame {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-8);
  overflow: hidden;
  background: var(--surface);
}
.db2-iframe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-faint);
}
.db2-iframe-url {
  font: 500 12px var(--font-mono);
  color: var(--text-secondary);
  font-feature-settings: 'tnum' 1;
}
.db2-iframe-link {
  font-size: 12px;
  color: var(--asana-coral);
  text-decoration: none;
  font-weight: 500;
}
.db2-iframe-link:hover { text-decoration: underline; }
.db2-iframe-body {
  position: relative;
  min-height: 460px;
  background: var(--bg);
}
.db2-iframe-body iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}
.db2-iframe-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.7;
}
.db2-iframe-body[data-loaded="true"] .db2-iframe-poster { display: none; }
.db2-iframe-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.db2-iframe-fallback p {
  margin: 0; font-size: 13px; color: var(--text-secondary);
}
.db2-iframe-cta {
  font: 500 14px var(--font-sans);
  color: var(--asana-coral);
  text-decoration: none;
}

/* ── Gallery card ────────────────────────────────── */
.db2-gallery-frame { display: block; }
.db2-gallery-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.db2-gallery-tile { display: block; }
.db2-gallery-btn {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-6);
  background: var(--bg-soft);
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms, transform 160ms;
}
.db2-gallery-btn:hover {
  border-color: var(--asana-coral);
  transform: translateY(-1px);
}
.db2-gallery-btn img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.db2-gallery-cap {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 8px 10px;
  text-align: left;
}
.db2-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
  animation: db2-fade-in 180ms ease-out;
}
@keyframes db2-fade-in { from { opacity: 0; } to { opacity: 1; } }
.db2-gallery-lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: var(--r-8);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.db2-gallery-lightbox-cap {
  margin-top: 12px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  text-align: center;
  max-width: 640px;
}
.db2-gallery-close {
  position: fixed;
  top: 16px; right: 20px;
  appearance: none;
  background: transparent;
  border: 0;
  color: white;
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
}

/* ── Mobile fallback ─────────────────────────────── */
@media (max-width: 640px) {
  .db2-toolbar    { padding: 10px 12px; gap: 8px; }
  .db2-view-tab   { padding: 4px 10px; font-size: 11px; }
  .db2-kpi-value  { font-size: 24px; }
  .db2-ba-row     { grid-template-columns: 110px 1fr 50px; gap: 8px; }
  .db2-funnel-row { grid-template-columns: 110px 1fr 60px; gap: 8px; }
  .db2-in-grid    { padding-left: 18px; }
  .db2-donut-frame { grid-template-columns: 1fr; justify-items: center; }
  .db2-donut-svg   { width: 160px; height: 160px; }
  .db2-hbar-row    { grid-template-columns: 24px 100px 1fr 60px 40px; gap: 8px; padding: 6px 8px; }
  .db2-hbar-name   { font-size: 12px; }
  .db2-gauge-frame { grid-template-columns: 1fr; justify-items: center; }
  .db2-treemap-tile { min-width: 100px; min-height: 80px; }
  .db2-iframe-body iframe, .db2-iframe-body { min-height: 320px; height: 320px; }
}

/* ============================================================
   HOME V3 — operational system landing
   Scoped under .h3-page · evolution of /home and /home2.
   Spacing scale: 8 12 16 24 32 48 64 80
   ============================================================ */

.h3-page {
  display: flex;
  flex-direction: column;
  gap: 96px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 24px 48px;
  color: var(--text-primary);
}

/* ── Eyebrows + accents shared across sections ─────────────── */
.h3-eyebrow {
  display: inline-block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--asana-coral);
}
/* Legacy --coral variant is now redundant since the base is already coral,
   but the class is preserved as a no-op so existing markup never breaks. */
.h3-eyebrow--coral { color: var(--asana-coral); }
/* Muted variant — opt-in for cases where the eyebrow should sit back
   (e.g. low-emphasis section headers). */
.h3-eyebrow--muted { color: var(--text-muted); }
.h3-accent { color: var(--asana-coral); }

/* SVG icons used inside h3 — inherit color via currentColor */
.h3-page svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── §1 Hero — cinematic systems composition ────────────────
   No card, no border-radius, no surface fill. Lives directly on the page
   background with subtle ambient layers (radial glow + faint grid) behind
   the content. Two-column asymmetric: editorial type left, abstract systems
   visual right. Animations are CSS-only; cursor parallax is handled in JS
   via a tiny RAF loop in afterRender.
   ──────────────────────────────────────────────────────────── */
.h3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 48px;
  align-items: center;
  min-height: 86vh;
  padding: 40px 32px 64px;
  isolation: isolate;
}
.h3-hero-bg {
  position: absolute; inset: -80px -40px -40px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.h3-hero-glow {
  position: absolute;
  top: 18%; right: -8%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(255,107,107,0.07) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0;
  animation: h3-hero-bg-fade 1.6s ease-out 0.05s both;
}
.h3-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, rgba(0,0,0,0.7), transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, rgba(0,0,0,0.7), transparent 75%);
  opacity: 0;
  animation: h3-hero-bg-fade 2s ease-out 0.1s both;
}

.h3-hero-left {
  display: flex; flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ── Eyebrow pill — translucent capsule with pulsing accent dot ── */
.h3-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 6px 14px 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--asana-coral) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--asana-coral) 18%, transparent);
  border-radius: var(--r-pill);
  opacity: 0;
  animation: h3-hero-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
.h3-hero-eyebrow-dot {
  width: 5px; height: 5px;
  background: var(--asana-coral);
  border-radius: var(--r-pill);
  box-shadow: 0 0 8px var(--asana-coral);
  animation: h3-hero-dot-pulse 2.4s ease-in-out infinite;
}


/* ── Editorial headline with per-line reveal ── */
.h3-hero-title {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.032em;
  color: var(--text-primary);
  margin: 0;
}
.h3-hero-line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0;
}
.h3-hero-line-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(108%);
  animation: h3-hero-line-reveal 0.85s cubic-bezier(0.2, 0.7, 0.15, 1) both;
}
.h3-hero-line:nth-child(1) .h3-hero-line-inner { animation-delay: 0.20s; }
.h3-hero-line:nth-child(2) .h3-hero-line-inner { animation-delay: 0.28s; }
.h3-hero-line:nth-child(3) .h3-hero-line-inner { animation-delay: 0.36s; }
.h3-hero-title em.h3-accent {
  color: var(--asana-coral);
  font-style: normal;
}

/* ── Lede · narrower, softer ── */
.h3-hero-lede {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
  opacity: 0;
  animation: h3-hero-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

/* ── Meta row · inline metadata, low visual weight ── */
.h3-hero-meta {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 10px;
  opacity: 0;
  animation: h3-hero-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.70s both;
}
/* Compact, never-wrap items so all three metadata pieces sit on one row */
.h3-hero-meta .h3-meta { font-size: 12px; gap: 5px; white-space: nowrap; }
.h3-hero-meta .h3-meta svg { width: 13px; height: 13px; }

/* ── CTA row · primary filled, secondary text-link ── */
.h3-hero-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 28px;
  margin-top: 4px;
  opacity: 0;
  animation: h3-hero-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both;
}
.h3-hero-btn {
  display: inline-flex; align-items: center;
  gap: 10px;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  font-family: inherit;
  transition: background var(--t-normal), box-shadow var(--t-normal), color var(--t-fast);
}
/* No underline ever — overrides any inherited a:hover rule from base.css */
.h3-hero-btn,
.h3-hero-btn:hover,
.h3-hero-btn:focus,
.h3-hero-btn:active,
.h3-hero-btn span { text-decoration: none !important; border-bottom: 0 !important; }
.h3-hero-btn svg { width: 16px; height: 16px; transition: transform var(--t-normal); }

.h3-hero-btn--primary {
  height: 46px; padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--asana-coral);
  color: var(--on-coral);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(255,107,107,0.40),
    0 8px 28px rgba(255,107,107,0.28);
}
.h3-hero-btn--primary:hover {
  background: var(--asana-coral-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 1px rgba(255,107,107,0.55),
    0 12px 36px rgba(255,107,107,0.40);
}
.h3-hero-btn--primary:hover svg { transform: translateX(4px); }

.h3-hero-btn--secondary {
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
}
.h3-hero-btn--secondary svg { opacity: 0.6; }
.h3-hero-btn--secondary:hover { color: var(--text-primary); }
.h3-hero-btn--secondary:hover svg { transform: translateX(4px); opacity: 1; }
.h3-hero-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Right side · abstract systems visualization ──
   Wider than tall to make room for the right-aligned tile labels.
   Orbital system sits on the left half (centred at SVG x=300); labels
   live on the right (x=558+). */
.h3-hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 820 / 600;
  max-width: 880px;
  margin: 0 auto;
  opacity: 0;
  animation: h3-hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
/* SVG label typography · the inline <text> elements need explicit sizing
   so the labels read proportionally to the scaled-up tile geometry. */
.h3-tile-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: inherit;
}
.h3-tile-sub {
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
}
/* Emphasised second half of the hero lede — calls out the operational
   principle without breaking line rhythm. */
.h3-hero-lede-strong {
  font-weight: 600;
  color: var(--text-primary);
}
.h3-hero-svg,
.h3-page svg.h3-hero-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible;
}
/* Override the global .h3-page svg 16px clamp so decorative children render
   at the sizes their viewBox dictates. */
.h3-hero-svg circle,
.h3-hero-svg polygon,
.h3-hero-svg line,
.h3-hero-svg text { width: auto; height: auto; }

/* Tile labels · SVG text inheriting the page font.
   Title sits beside the endpoint dot in its tile's category colour;
   subtitle reads as the supporting muted line beneath it. */
.h3-tile-title {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h3-tile-sub {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Twin orbital rings · counter-rotating around the shared centre (300, 300).
   SVG user-space transform-origin (no transform-box: fill-box). */
.h3-orbit { transform-origin: 300px 300px; }
.h3-orbit--outer { animation: h3-hero-rotate 120s linear infinite; }
.h3-orbit--inner { animation: h3-hero-rotate  90s linear infinite reverse; }

/* Planes are static — architectural, not wobbly. No animation. */

/* Central core — heartbeat anchored to the Strategy plane centre (300, 212).
   Halo breathes in opacity + scale; core ticks subtly underneath. */
.h3-pulse-halo {
  transform-origin: 300px 212px;
  animation: h3-hero-halo 3.6s ease-in-out infinite;
}
.h3-pulse-core {
  transform-origin: 300px 212px;
  animation: h3-hero-core 3.6s ease-in-out infinite;
}

/* Signal beam · the dash pattern flows downward into the top plane,
   reading as energy "raining" into the system. Pattern is 14px dash, 30px
   gap → 44px cycle. Animating stroke-dashoffset by one full cycle creates
   continuous downward flow. Increasing offset shifts the pattern further
   along the path (downward, since the line is drawn top→bottom). */
.h3-pulse-line-flow {
  stroke-dashoffset: 0;
  animation: h3-hero-flow 1.6s linear infinite;
}

/* Four orbiters · rotate around the SVG centre (300, 300) at staggered
   speeds and alternating directions. Each carries a project-category
   colour so the visual reads as the work-system in motion. */
.h3-orbiter { transform-origin: 300px 300px; }
.h3-orbiter--1 { animation: h3-hero-rotate 18s linear infinite; }
.h3-orbiter--2 { animation: h3-hero-rotate 26s linear infinite reverse; }
.h3-orbiter--3 { animation: h3-hero-rotate 22s linear infinite; }
.h3-orbiter--4 { animation: h3-hero-rotate 34s linear infinite reverse; }
.h3-orbiter--1 circle { fill: var(--cat-growth);  filter: drop-shadow(0 0 6px rgba(74,222,128,0.55)); }
.h3-orbiter--2 circle { fill: var(--cat-product); filter: drop-shadow(0 0 6px rgba(91,141,239,0.55)); }
.h3-orbiter--3 circle { fill: var(--cat-brand);   filter: drop-shadow(0 0 6px rgba(245,158,11,0.55)); }
.h3-orbiter--4 circle { fill: var(--cat-ai);      filter: drop-shadow(0 0 6px rgba(169,112,255,0.55)); }

/* ── Hero SVG element styling ──
   Replaces inline `stroke=` and `fill=` attrs that were stripped from
   home.js so the SVG could theme via CSS. All values flip cleanly in
   [data-theme="light"] block at the end of this file. */
.h3-orbit--outer    { stroke: rgba(255,107,107,0.22); }
.h3-orbit--inner    { stroke: rgba(255,255,255,0.10); }
.h3-plane--strategy { stroke: var(--asana-coral); stroke-opacity: 0.85; }
.h3-plane--systems  { stroke: var(--cat-product); stroke-opacity: 0.75; }
.h3-plane--outcomes { stroke: var(--cat-growth);  stroke-opacity: 0.75; }
.h3-pulse-line-base { stroke: var(--asana-coral); stroke-opacity: 0.30; }
.h3-pulse-line-flow { stroke: var(--asana-coral); stroke-opacity: 0.95; }
.h3-pulse-top       { fill:   var(--asana-coral); }
.h3-pulse-core      { fill:   var(--asana-coral); }

.h3-tile-label--strategy line   { stroke: var(--asana-coral); stroke-opacity: 0.45; }
.h3-tile-label--strategy circle { fill:   var(--asana-coral); }
.h3-tile-label--strategy .h3-tile-title { fill: var(--asana-coral); }

.h3-tile-label--systems  line   { stroke: var(--cat-product); stroke-opacity: 0.45; }
.h3-tile-label--systems  circle { fill:   var(--cat-product); }
.h3-tile-label--systems  .h3-tile-title { fill: var(--cat-product); }

.h3-tile-label--outcomes line   { stroke: var(--cat-growth); stroke-opacity: 0.45; }
.h3-tile-label--outcomes circle { fill:   var(--cat-growth); }
.h3-tile-label--outcomes .h3-tile-title { fill: var(--cat-growth); }

.h3-tile-sub { fill: var(--text-muted); }

/* ── Keyframes — minimum surface area, every one is referenced ── */
@keyframes h3-hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes h3-hero-line-reveal {
  from { opacity: 0; transform: translateY(108%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes h3-hero-bg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes h3-hero-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%      { transform: scale(1.5); opacity: 0.55; }
}
@keyframes h3-hero-rotate {
  to { transform: rotate(360deg); }
}
@keyframes h3-hero-halo {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(1.5); opacity: 1;    }
}
@keyframes h3-hero-core {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.25); }
}
/* Flowing line · advances by one full dash-cycle (14 + 30 = 44) so the
   loop is seamless. Negative offset shifts the dash pattern in the same
   direction the line is drawn (top→bottom), so the pattern reads as
   continuous downward "raining" flow into the system. */
@keyframes h3-hero-flow {
  from { stroke-dashoffset: 0;   }
  to   { stroke-dashoffset: -44; }
}

/* ── Reduced motion — everything settles to its final state ── */
@media (prefers-reduced-motion: reduce) {
  .h3-hero-eyebrow,
  .h3-hero-line-inner,
  .h3-hero-lede,
  .h3-hero-meta,
  .h3-hero-cta,
  .h3-hero-visual,
  .h3-hero-glow,
  .h3-hero-grid { animation: none !important; opacity: 1 !important; transform: none !important; }
  .h3-orbit,
  .h3-orbiter,
  .h3-pulse-halo,
  .h3-pulse-core,
  .h3-pulse-line-flow,
  .h3-hero-eyebrow-dot { animation: none !important; }
}

.h3-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.h3-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.h3-meta svg { width: 14px; height: 14px; opacity: 0.55; }
.h3-meta-sep { color: var(--text-disabled); font-size: 13px; }
.h3-meta--live { color: var(--status-on-track-fg); }
.h3-meta--live svg { color: var(--status-on-track-fg); opacity: 0.9; }

.h3-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.h3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-6);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  font-family: inherit;
}
.h3-btn:active { transform: translateY(1px); }
.h3-btn--primary {
  background: var(--asana-coral);
  color: var(--on-coral);
  box-shadow: 0 1px 4px rgba(255,107,107,0.25);
}
.h3-btn--primary:hover { background: var(--asana-coral-hover); text-decoration: none; box-shadow: 0 2px 8px rgba(255,107,107,0.30); }
.h3-btn--secondary {
  background: var(--surface);
  border-color: var(--border-soft);
  color: var(--text-primary);
}
.h3-btn--secondary:hover {
  background: var(--bg-active);
  border-color: var(--border-medium);
  text-decoration: none;
}
.h3-btn svg { width: 16px; height: 16px; }

/* Right column · dominant metric + supporting row — narrative, not dashboard */
.h3-hero-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
}
.h3-hero-dominant {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: var(--bg-soft);
  border-left: 3px solid var(--asana-coral);
  border-radius: var(--r-8);
}
.h3-dominant-value {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.h3-dominant-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.h3-hero-supporting {
  display: flex;
  gap: 24px;
  padding: 4px 0 0;
}
.h3-support-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.h3-support-value {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-feature-settings: 'tnum' 1;
}
.h3-support-label {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ── Hero · responsive ──────────────────────────────────────
   Tablet — slightly tighter type, smaller gap.
   Mobile — stack to single column, hide the systems visualization (the
   ambient background gradient still carries depth on its own), keep CTA
   immediately accessible above the fold. */
@media (max-width: 1100px) {
  .h3-hero {
    grid-template-columns: 1fr;
    gap: 56px;
    min-height: auto;
    padding: 32px 24px 56px;
  }
  .h3-hero-visual { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .h3-hero { padding: 24px 16px 48px; gap: 40px; }
  .h3-hero-left { gap: 22px; }
  /* .h3-hero-visual stays visible — PHASE 5 mobile rule (≤640px) shows
     a static simplified version. Between 640-720px the full viz is OK. */
  .h3-hero-cta { gap: 20px; }
  .h3-hero-btn--primary { height: 44px; padding: 0 20px; }
}

/* ── §2 Featured editorial surface + context rail ──────── */
/* Centered section header — stacks eyebrow, title, and subhead together
   above the full-width carousel. Replaces the old left-aligned column
   header now that the recent-updates rail is gone. */
.h3-section-head-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Unified header-to-content gap · 32px across all section heads */
  margin: 0 auto 32px;
}
/* Stacked left-aligned variant — eyebrow, title, and subhead anchored to
   the left edge. Used for the Principles section. Note: .h3-section-head
   (without modifier) is a flex-row layout used elsewhere, so this
   purpose-named class avoids that conflict. The .h3-section-title and
   .h3-section-sub rules elsewhere have text-align:center baked in, so
   we override them here. */
.h3-section-head-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* Unified header-to-content gap · 32px across all section heads */
  margin: 0 0 32px 0;
  max-width: 640px;
}
.h3-section-head-stacked .h3-eyebrow { margin-bottom: 12px; }
.h3-section-head-stacked .h3-section-title,
.h3-section-head-stacked .h3-section-sub { text-align: left; margin-left: 0; margin-right: 0; }
/* The subheading by default uses an intentional <br> for a balanced two-line
   read centred under the title. Inside the stacked variant we let the line
   wrap naturally instead. */
.h3-section-head-stacked .h3-section-sub br { display: none; }
/* The sub's base style carries margin-bottom: 36px (designed for standalone
   use). Inside any section-head wrapper, that 36px stacks on top of the
   wrapper's own margin-bottom — producing a 68px gap to the next content.
   Reset both the sub's and title's bottom margins so the wrapper alone
   defines the gap to the content below. */
.h3-section-head-stacked .h3-section-title,
.h3-section-head-stacked .h3-section-sub,
.h3-section-head-centered .h3-section-title,
.h3-section-head-centered .h3-section-sub { margin-bottom: 0; }
/* Re-introduce a small gap between title and sub so they don't collapse
   onto each other. Eyebrow→title gap is already handled above. */
.h3-section-head-stacked .h3-section-title  { margin-bottom: 8px; }
.h3-section-head-centered .h3-section-title { margin-bottom: 8px; }
.h3-section-head-centered .h3-eyebrow {
  margin-bottom: 12px;
  /* Color inherits from .h3-eyebrow (coral) — matches every other eyebrow on the site. */
}

/* Centered section heading — sits above the featured grid as the
   editorial frame for the carousel + updates row. Uses the same accent
   pattern as the hero title (last phrase in coral) for visual continuity.
   Stays on a single line on desktop; only wraps below 720px viewports. */
.h3-section-title {
  text-align: center;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  margin: 0 auto 14px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .h3-section-title { white-space: normal; }
}

/* Section subheading — supporting line under the centered title.
   Softer typographic weight, secondary text colour, intentional line break
   on desktop via <br> (collapses on mobile under prefers-reduced-line break). */
.h3-section-sub {
  text-align: center;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0 auto 36px;
  max-width: 640px;
}
@media (max-width: 640px) {
  .h3-section-sub br { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   §3.5 · Leverage Allocation — exact match to reference design
   Tall bar (56px) · bordered tinted segments · left-aligned tint-coloured % ·
   5-col legend with small dots + label · pct + muted note.
   ───────────────────────────────────────────────────────────── */
.h3-section { display: flex; flex-direction: column; }
.h3-lev { width: 100%; }

/* ── The bar ───────────────────────────────────────────────── */
.h3-lev-bar {
  display: flex;
  width: 100%;
  height: 56px;
  gap: 2px;
  border-radius: var(--r-8);
  overflow: hidden;
  background: transparent;
}
.h3-lev-seg {
  flex: var(--w, 10) 1 0;
  min-width: 0;
  display: flex; align-items: center;
  padding: 0 16px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background var(--t-fast), border-color var(--t-fast);
  cursor: default;
}
.h3-lev-seg:hover {
  background: color-mix(in srgb, var(--accent) 24%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}
.h3-lev-seg[data-tint="it-ai"]   { --accent: var(--cat-it-ai);   }
.h3-lev-seg[data-tint="product"] { --accent: var(--cat-product); }
.h3-lev-seg[data-tint="growth"]  { --accent: var(--cat-growth);  }
.h3-lev-seg[data-tint="brand"]   { --accent: var(--cat-brand);   }
.h3-lev-seg[data-tint="ai"]      { --accent: var(--cat-ai);      }
.h3-lev-pct {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--accent);
}

/* ── The legend · 5-col grid · dot + (label · pct) + note ─── */
.h3-lev-legend {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.h3-lev-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}
.h3-lev-item[data-tint="it-ai"]   { --accent: var(--cat-it-ai);   }
.h3-lev-item[data-tint="product"] { --accent: var(--cat-product); }
.h3-lev-item[data-tint="growth"]  { --accent: var(--cat-growth);  }
.h3-lev-item[data-tint="brand"]   { --accent: var(--cat-brand);   }
.h3-lev-item[data-tint="ai"]      { --accent: var(--cat-ai);      }
.h3-lev-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex-shrink: 0;
}
.h3-lev-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h3-lev-label {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.h3-lev-note {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .h3-lev-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
}
@media (max-width: 640px) {
  .h3-lev-bar { height: 44px; }
  .h3-lev-pct { font-size: var(--t-xs); }
  .h3-lev-seg  { padding: 0 10px; }
  .h3-lev-legend { grid-template-columns: 1fr; gap: 16px; }
}

.h3-feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
  gap: 24px;
  align-items: stretch;
}
.h3-feat-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
/* Column-level eyebrow header — mirrors .h3-rail-head spacing so the
   "Selected Systems" and "Recent updates" labels sit at the same y-position
   across the two grid columns. */
.h3-feat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Track wrapper — edge fades only */
.h3-feat-wrap { position: relative; }
.h3-feat-fade {
  position: absolute; top: 0; bottom: 0; width: 40px; z-index: 3;
  pointer-events: none; transition: opacity 0.3s ease;
}
.h3-feat-fade--l {
  left: 0;
  background: linear-gradient(90deg, rgba(15,17,23,0.92) 0%, transparent 100%);
  opacity: 0;
}
.h3-feat-fade--r {
  right: 0;
  background: linear-gradient(270deg, rgba(15,17,23,0.92) 0%, transparent 100%);
}
.h3-feat-wrap.is-scrolled .h3-feat-fade--l { opacity: 1; }
.h3-feat-wrap.is-at-end .h3-feat-fade--r { opacity: 0; }

/* Arrow buttons */
.h3-feat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 20px));
  z-index: 4;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.h3-feat-arrow svg { width: 18px; height: 18px; }
.h3-feat-arrow:hover {
  background: var(--border-soft);
  color: var(--text-primary);
  border-color: var(--text-disabled);
}
.h3-feat-arrow--l { left: -6px; }
.h3-feat-arrow--r { right: -6px; }
.h3-feat-arrow.is-hidden { opacity: 0; pointer-events: none; }

/* Footer row — dots left, link right */
.h3-feat-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; }
.h3-feat-dots { display: flex; align-items: center; gap: 6px; }
.h3-feat-dot {
  width: 20px; height: 3px; border-radius: var(--r-2);
  background: var(--border-faint); border: none; padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.h3-feat-dot:hover { background: var(--text-disabled); }
.h3-feat-dot.is-active { background: var(--asana-coral); width: 32px; }

/* Draggable track */
.h3-feat-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding: 2px 0;
}
.h3-feat-track::-webkit-scrollbar { display: none; }
.h3-feat-track.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.h3-feat-track.is-grabbing .h3-feat-card { transition: none; }

/* Card shell — standard 38%, hero 52% → both fit with peek of third */
.h3-feat-card {
  flex: 0 0 42%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  overflow: hidden;
  scroll-snap-align: start;
  user-select: none;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
/* All cards now share the same width — the legacy --hero variant is kept as
   a no-op so any cached markup still renders correctly. */
.h3-feat-card--hero { flex: 0 0 42%; }
.h3-feat-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--border-soft), 0 4px 24px rgba(0,0,0,0.18);
}

/* Image zone — uniform height across all cards */
.h3-feat-image {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
  overflow: hidden;
  flex-shrink: 0;
}
.h3-feat-card[data-tint="it-ai"] .h3-feat-image {
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(231,111,81,0.14) 0%, transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(231,111,81,0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.h3-feat-card[data-tint="growth"] .h3-feat-image {
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(74,222,128,0.14) 0%, transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(74,222,128,0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.h3-feat-card[data-tint="product"] .h3-feat-image {
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(91,141,239,0.14) 0%, transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(91,141,239,0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.h3-feat-card[data-tint="brand"] .h3-feat-image {
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(245,158,11,0.14) 0%, transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(245,158,11,0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.h3-feat-card[data-tint="digital"] .h3-feat-image {
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(74,222,128,0.14) 0%, transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(74,222,128,0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.h3-feat-card[data-tint="ux"] .h3-feat-image {
  background:
    radial-gradient(60% 80% at 30% 40%, rgba(91,141,239,0.14) 0%, transparent 60%),
    radial-gradient(80% 100% at 80% 80%, rgba(91,141,239,0.06) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}

.h3-feat-image-glow {
  position: absolute;
  bottom: -40%;
  left: 20%;
  width: 65%;
  height: 85%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 55%);
  filter: blur(28px);
  pointer-events: none;
}
.h3-feat-domain {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-4);
  color: rgba(255,255,255,0.85);
  z-index: 2;
}

.h3-feat-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 18px;
  flex: 1;
}
.h3-feat-title {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  margin: 0;
  min-height: 2.6em;
}
.h3-feat-blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h3-feat-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 12px 0 6px;
  margin-top: auto;
  border-top: 1px solid var(--border-faint);
}
.h3-feat-metric { display: flex; flex-direction: column; gap: 3px; }
.h3-feat-mv {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--asana-coral);
  font-feature-settings: 'tnum' 1;
  line-height: 1;
}
/* Per-tint metric colour — green for growth / digital */
.h3-feat-card[data-tint="growth"] .h3-feat-mv,
.h3-feat-card[data-tint="digital"] .h3-feat-mv { color: var(--status-on-track-fg); }
.h3-feat-ml {
  font-size: 10px;
  color: var(--text-disabled);
  letter-spacing: 0.01em;
}
.h3-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: gap 0.3s ease, color var(--t-fast);
}
.h3-feat-cta:hover { gap: 10px; color: var(--asana-coral); }
.h3-feat-cta svg { width: 14px; height: 14px; }

/* Right rail — compact, secondary, supporting */
.h3-rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: stretch; }
.h3-rail-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Bottom padding mirrors the carousel footer (dots + "View all systems"
     link sit at h3-feat-footer with 14px padding-top + ~26px content =
     ~40-50px). This makes the rail's updates list end at the same y as
     the project cards instead of overflowing down into the footer zone. */
  padding: 0 0 50px;
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 0;
}
.h3-rail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.h3-rail-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.h3-rail-list li svg { width: 6px; height: 6px; opacity: 0.5; }
.h3-rail-list-live { color: var(--status-on-track-fg) !important; }
.h3-rail-list-live svg { color: var(--status-on-track-fg); opacity: 1 !important; }

/* Goal card + bar removed — styles cleaned up */

.h3-rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
/* space-between · first update sits flush with the top of the rail (parallel
   to the top edge of the first project card), last update sits flush with
   the bottom. The middle items distribute evenly between them — no extra
   padding at the ends, so the rail visually mirrors the card column. */
.h3-rail-updates { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 8px; }
.h3-rail-update {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.h3-rail-update > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h3-rail-update-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h3-rail-update-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h3-rail-update-date {
  font-size: 11px;
  color: var(--text-disabled);
  margin-top: 1px;
}
.h3-rail-dot { width: 8px; height: 8px; margin-top: 6px; }
.h3-rail-dot[data-tint="growth"]  svg { color: var(--cat-growth); }
.h3-rail-dot[data-tint="product"] svg { color: var(--cat-product); }
.h3-rail-dot[data-tint="it-ai"]   svg { color: var(--cat-it-ai); }
.h3-rail-dot[data-tint="digital"] svg { color: var(--cat-digital); }
.h3-rail-dot[data-tint="brand"]   svg { color: var(--cat-brand); }
.h3-rail-dot svg { width: 8px; height: 8px; }

.h3-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--asana-coral);
  text-decoration: none;
  margin-top: auto;
  transition: gap var(--t-fast);
}
.h3-rail-link:hover { text-decoration: none; gap: 8px; }
.h3-rail-link svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .h3-feat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .h3-feat-card { flex: 0 0 88%; min-width: 0; }
  .h3-feat-card--hero { flex: 0 0 88%; }
  .h3-feat-image { height: 120px; }
  .h3-feat-content { padding: 14px 16px 16px; }
  .h3-feat-arrow { width: 34px; height: 34px; }
  .h3-feat-arrow--l { left: 4px; }
  .h3-feat-arrow--r { right: 4px; }
}

/* ── Section heads (shared) ──────────────────────────────── */
.h3-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.h3-section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--asana-coral);
  text-decoration: none;
  font-weight: 500;
  transition: gap var(--t-fast);
}
.h3-section-link:hover { text-decoration: none; gap: 8px; }
.h3-section-link svg { width: 14px; height: 14px; }

/* ── §3 Core Systems · enriched 4-card grid ───────────────── */
.h3-systems-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  /* Unified · matches .h3-section-head-centered and .h3-section-head-stacked */
  margin-bottom: 32px;
}
.h3-systems-header-left { display: flex; flex-direction: column; gap: 12px; }
.h3-systems-headline {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
.h3-systems-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0;
}
.h3-systems-header .h3-section-link { flex-shrink: 0; align-self: flex-end; }

.h3-systems-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Card shell */
.h3-sys-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  transition: border-color var(--t-fast), box-shadow var(--t-slow);
}
.h3-sys-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--border-soft), 0 4px 20px rgba(0,0,0,0.15);
}

/* Primary card — subtle anchor emphasis */
.h3-sys-card--primary {
  border-color: rgba(255,107,107,0.12);
  box-shadow: 0 0 24px rgba(255,107,107,0.05);
}
.h3-sys-card--primary:hover {
  border-color: rgba(255,107,107,0.20);
  box-shadow: 0 4px 24px rgba(255,107,107,0.08);
}

/* Head row — icon + optional badge */
.h3-sys-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h3-sys-icon {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
}
.h3-sys-icon svg { width: 20px; height: 20px; }
.h3-sys-card[data-tint="it-ai"]   .h3-sys-icon { background: var(--tint-it-ai);   color: var(--cat-it-ai); }
.h3-sys-card[data-tint="growth"]  .h3-sys-icon { background: var(--tint-growth);  color: var(--cat-growth); }
.h3-sys-card[data-tint="product"] .h3-sys-icon { background: var(--tint-product); color: var(--cat-product); }
.h3-sys-card[data-tint="brand"]   .h3-sys-icon { background: var(--tint-brand);   color: var(--cat-brand); }

.h3-sys-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-4);
  background: rgba(255,107,107,0.12);
  color: var(--asana-coral);
}

/* Title */
.h3-sys-title {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}

/* Description */
.h3-sys-blurb {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* Capability bullets */
.h3-sys-caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h3-sys-caps li {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}
.h3-sys-caps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--text-disabled);
}
.h3-sys-card[data-tint="it-ai"]   .h3-sys-caps li::before { background: var(--cat-it-ai); opacity: 0.5; }
.h3-sys-card[data-tint="growth"]  .h3-sys-caps li::before { background: var(--cat-growth); opacity: 0.5; }
.h3-sys-card[data-tint="product"] .h3-sys-caps li::before { background: var(--cat-product); opacity: 0.5; }
.h3-sys-card[data-tint="brand"]   .h3-sys-caps li::before { background: var(--cat-brand); opacity: 0.5; }

/* Tool pills */
.h3-sys-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.h3-sys-tool {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-4);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--bg-hover);
  color: var(--text-muted);
}

/* Impact footer */
.h3-sys-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-faint);
}
.h3-sys-impact { display: flex; flex-direction: column; gap: 3px; }
.h3-sys-metric {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.h3-sys-metric-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.h3-sys-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: gap 0.3s ease, color var(--t-fast);
}
.h3-sys-cta:hover { gap: 10px; color: var(--text-primary); }
.h3-sys-cta svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .h3-systems-grid { grid-template-columns: repeat(2, 1fr); }
  .h3-systems-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .h3-systems-grid { grid-template-columns: 1fr; }
  .h3-systems-headline { font-size: 24px; }
}

/* ── §5 Principles · calm philosophy layer ─────────────────── */
/* Cards · refined spacing, larger padding, accent-tinted icons, lift on hover.
   The h3-section-head-centered above the grid handles the centered title; the
   grid itself sits flush below it with a clear visual gap. */
.h3-principles-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.h3-principle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-12);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.h3-principle:hover {
  border-color: var(--border-soft);
  background: var(--surface);
  transform: translateY(-2px);
}
.h3-principle-icon {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
  background: color-mix(in srgb, var(--asana-coral) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--asana-coral) 16%, var(--border-faint));
  color: var(--asana-coral);
  margin-bottom: 8px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.h3-principle:hover .h3-principle-icon {
  background: color-mix(in srgb, var(--asana-coral) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--asana-coral) 28%, var(--border-faint));
}
.h3-principle-icon svg { width: 16px; height: 16px; }
.h3-principle-title {
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin-top: 0;
  /* Balance the line-break so 5-word titles don't orphan a single word
     on the last line (e.g. "Own the Outcome End-to-End"). */
  text-wrap: balance;
}
.h3-principle-blurb {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .h3-principles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .h3-principles-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .h3-principle { padding: 22px 18px; }
}
@media (max-width: 640px) {
  .h3-principles-grid { grid-template-columns: 1fr; }
}

/* ── §6 Journey · 5 milestones — narrative progression ──────── */
.h3-journey-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.h3-journey-track::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--border-faint) 0%, var(--border-soft) 50%, var(--asana-coral) 100%);
  opacity: 0.6;
  z-index: 0;
}
.h3-journey-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-8);
  position: relative;
  z-index: 1;
  transition: border-color var(--t-fast);
}
.h3-journey-node:hover { border-color: var(--border-soft); }
.h3-journey-node:last-child { border-color: var(--border-soft); }
.h3-journey-icon {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-6);
  background: var(--bg-hover);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.h3-journey-node:last-child .h3-journey-icon {
  background: var(--tint-growth);
  color: var(--asana-coral);
}
.h3-journey-icon svg { width: 13px; height: 13px; }
.h3-journey-period {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-feature-settings: 'tnum' 1;
}
.h3-journey-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.h3-journey-blurb {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .h3-journey-track { grid-template-columns: repeat(2, 1fr); }
  .h3-journey-track::before { display: none; }
}
@media (max-width: 640px) {
  .h3-journey-track { grid-template-columns: 1fr; }
}

/* ── §7 Trusted · quiet credibility layer ─────────────────── */
.h3-trusted {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
/* Header · centered eyebrow only */
.h3-trusted-header {
  display: flex; align-items: baseline; justify-content: center;
}
.h3-trusted-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  align-items: center;
}
.h3-trusted-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 12px 0;
  transition: transform var(--t-fast);
  cursor: default;
}
/* Vertical dividers between cells · rendered as ::before pseudo on every
   cell EXCEPT the first, so the row reads as a connected partner strip
   rather than a scattered word list. */
.h3-trusted-logo + .h3-trusted-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 24px;
  transform: translateY(-50%);
  background: var(--border-faint);
}
.h3-trusted-logo:hover { transform: translateY(-1px); }
.h3-trusted-logo:hover .h3-trusted-label { color: var(--text-primary); }
.h3-trusted-logo:hover .h3-trusted-sub   { color: var(--text-muted); }
.h3-trusted-label {
  /* Unified uppercase, mono-tracked treatment so DAG / DROIDCON / Telekom /
     Microsoft / HubSpot all read as part of the same brand-of-brands strip,
     regardless of how the underlying name is cased. */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--t-fast);
}
.h3-trusted-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-disabled);
  transition: color var(--t-fast);
}

@media (max-width: 1100px) {
  .h3-trusted-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Hide dividers when the grid wraps, since the visual rhythm breaks across rows */
  .h3-trusted-logo + .h3-trusted-logo::before { display: none; }
}
@media (max-width: 640px) {
  .h3-trusted-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
}
@media (max-width: 640px) {
  .h3-trusted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── §8 Footer · integrated, no card, no frame ─────────────
   The footer is NOT a component — it is the closing rhythm of the page.
   No background, no border-radius, no boxed container. Structure is built
   from negative space and hairline dividers (--border-faint) that already
   exist in the design system. Typography hierarchy carries all the weight.
   ──────────────────────────────────────────────────────────── */
.h3-foot {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Top row — statement left, action links right */
.h3-foot-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.h3-foot-left { display: flex; flex-direction: column; gap: 16px; }
.h3-foot-title {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  margin: 0;
}
.h3-foot-blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 46ch;
}

/* Action links — text-first, no buttons, no fills.
   Each link is a row with the label on the left and a muted arrow on the
   right. Hover reveals a thin underline on the label and nudges the arrow
   forward. No outlines, no background fills — pure typography. */
.h3-foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.h3-foot-links li {
  border-top: 1px solid var(--border-faint);
}
.h3-foot-links li:last-child {
  border-bottom: 1px solid var(--border-faint);
}
.h3-foot-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--t-fast), opacity var(--t-fast);
}
/* Leading icon — muted by default, only the primary action carries colour */
.h3-foot-link-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.h3-foot-link-ico svg { width: 16px; height: 16px; }
.h3-foot-link-text {
  flex: 1;
}
/* Trailing arrow — sits muted, drifts forward on hover. No underline reveal. */
.h3-foot-link-arrow {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform var(--t-normal), color var(--t-fast);
}
.h3-foot-link-arrow svg { width: 14px; height: 14px; }
.h3-foot-link:hover .h3-foot-link-arrow {
  color: var(--text-primary);
  transform: translateX(3px);
}
/* Non-primary links lighten subtly on hover — no fills, no underlines */
.h3-foot-link:hover { color: var(--text-primary); }
.h3-foot-link:hover .h3-foot-link-ico { color: var(--text-secondary); }
.h3-foot-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* Primary action · Email — the only coloured link.
   Icon + text both carry the brand accent so this is unambiguously the
   primary path to start a conversation. */
.h3-foot-link--primary { color: var(--asana-coral); }
.h3-foot-link--primary .h3-foot-link-ico,
.h3-foot-link--primary .h3-foot-link-arrow { color: var(--asana-coral); }
.h3-foot-link--primary:hover { color: var(--asana-coral-hover); }
.h3-foot-link--primary:hover .h3-foot-link-ico,
.h3-foot-link--primary:hover .h3-foot-link-arrow { color: var(--asana-coral-hover); }

/* Bottom row — meta strip on left, copyright on right, single line.
   Sits above a hairline divider so it reads as the closing edge of the page
   without becoming a separate footer band. */
.h3-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-faint);
}
/* Metadata strip — informational, calm, low visual noise.
   Icons stay muted by default (inherits .h3-meta svg opacity 0.55); only the
   green "Available Immediately" dot carries colour via .h3-meta--live. */
.h3-foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.h3-foot-copy {
  font-size: 12px;
  color: var(--text-disabled);
}

@media (max-width: 900px) {
  .h3-foot-main { grid-template-columns: 1fr; gap: 40px; }
  .h3-foot-title { font-size: 28px; }
  .h3-foot-bottom { gap: 12px; }
}
@media (max-width: 640px) {
  .h3-foot { gap: 36px; }
  .h3-foot-title { font-size: 24px; }
  .h3-page { padding: 20px 16px 32px; gap: 64px; }
}

/* ============================================================
   LIGHT THEME — h3-* (home page) overrides
   The home page was built after the original light-theme block
   (around line 4054) and shipped without theme parity. This block
   closes the gap so every home surface flips cleanly.
   ============================================================ */

[data-theme="light"] {

  /* ── §1 · Hero ─────────────────────────────────────────── */
  /* Background grid — invert white-alpha → dark-alpha so lines
     read on a white surface. The radial mask still fades the right edge. */
  .h3-hero-grid {
    background-image:
      linear-gradient(rgba(15,20,28,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,20,28,0.04) 1px, transparent 1px);
  }
  /* Glow blob — coral, lower alpha so it doesn't over-saturate light bg */
  .h3-hero-glow {
    background: radial-gradient(circle, rgba(255,107,107,0.05) 0%, transparent 60%);
  }
  /* Hero SVG element overrides */
  .h3-orbit--outer { stroke: rgba(255,107,107,0.30); }
  .h3-orbit--inner { stroke: rgba(15,20,28,0.10); }
  /* Orbiter drop-shadows — soften on light so glow doesn't blow out */
  .h3-orbiter--1 circle { filter: drop-shadow(0 0 4px rgba(22,163,74,0.35)); }
  .h3-orbiter--2 circle { filter: drop-shadow(0 0 4px rgba(59,111,212,0.35)); }
  .h3-orbiter--3 circle { filter: drop-shadow(0 0 4px rgba(180,83,9,0.35)); }
  .h3-orbiter--4 circle { filter: drop-shadow(0 0 4px rgba(124,58,237,0.35)); }
  /* Primary CTA shadow — lighter footprint on white */
  .h3-hero-btn--primary {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 0 0 1px rgba(255,107,107,0.30),
      0 6px 18px rgba(255,107,107,0.22);
  }
  .h3-hero-btn--primary:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 0 0 1px rgba(255,107,107,0.45),
      0 10px 28px rgba(255,107,107,0.32);
  }

  /* ── §2 · Featured carousel ────────────────────────────── */
  /* Edge fades — flip from dark→transparent to white→transparent */
  .h3-feat-fade--l { background: linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
  .h3-feat-fade--r { background: linear-gradient(270deg, var(--bg) 0%, transparent 100%); }
  /* Arrow button shadow */
  .h3-feat-arrow { box-shadow: 0 1px 3px rgba(15,20,28,0.08), 0 4px 12px rgba(15,20,28,0.06); }
  /* Card hover shadow */
  .h3-feat-card:hover { box-shadow: 0 0 0 1px rgba(15,20,28,0.06), 0 6px 20px rgba(15,20,28,0.10), 0 1px 3px rgba(15,20,28,0.05); }
  /* Image-glow — invisible white on white; replace with a coral hint */
  .h3-feat-image-glow { background: radial-gradient(circle, rgba(255,107,107,0.04) 0%, transparent 55%); }
  /* Image gradients per tint — stronger alpha so the image areas carry
     category colour instead of reading as generic grey boxes */
  .h3-feat-image {
    background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
  }
  .h3-feat-card[data-tint="it-ai"] .h3-feat-image {
    background:
      radial-gradient(60% 80% at 30% 40%, rgba(196,64,43,0.16) 0%, transparent 60%),
      radial-gradient(80% 100% at 80% 80%, rgba(196,64,43,0.07) 0%, transparent 70%),
      linear-gradient(135deg, #FFFAF9 0%, #F8F0EF 100%);
  }
  .h3-feat-card[data-tint="growth"] .h3-feat-image,
  .h3-feat-card[data-tint="digital"] .h3-feat-image {
    background:
      radial-gradient(60% 80% at 30% 40%, rgba(22,163,74,0.16) 0%, transparent 60%),
      radial-gradient(80% 100% at 80% 80%, rgba(22,163,74,0.07) 0%, transparent 70%),
      linear-gradient(135deg, #F8FDF9 0%, #EFF8F1 100%);
  }
  .h3-feat-card[data-tint="product"] .h3-feat-image,
  .h3-feat-card[data-tint="ux"] .h3-feat-image {
    background:
      radial-gradient(60% 80% at 30% 40%, rgba(59,111,212,0.16) 0%, transparent 60%),
      radial-gradient(80% 100% at 80% 80%, rgba(59,111,212,0.07) 0%, transparent 70%),
      linear-gradient(135deg, #F8FAFF 0%, #EFF3FC 100%);
  }
  .h3-feat-card[data-tint="brand"] .h3-feat-image {
    background:
      radial-gradient(60% 80% at 30% 40%, rgba(180,83,9,0.16) 0%, transparent 60%),
      radial-gradient(80% 100% at 80% 80%, rgba(180,83,9,0.07) 0%, transparent 70%),
      linear-gradient(135deg, #FFFCF7 0%, #FCF5EC 100%);
  }
  /* Domain badge stays dark-glass for both themes — provides contrast
     against the tinted image regardless of surface. */

  /* ── §3 · Core systems cards ───────────────────────────── */
  .h3-sys-card:hover { box-shadow: 0 0 0 1px rgba(15,20,28,0.06), 0 4px 16px rgba(15,20,28,0.10), 0 1px 3px rgba(15,20,28,0.05); }
  .h3-sys-card--primary {
    border-color: rgba(255,107,107,0.18);
    box-shadow: 0 0 16px rgba(255,107,107,0.04);
  }
  .h3-sys-card--primary:hover {
    border-color: rgba(255,107,107,0.30);
    box-shadow: 0 4px 18px rgba(255,107,107,0.08);
  }
  /* Sys badge — softer coral bg on white */
  .h3-sys-badge { background: rgba(255,107,107,0.10); }

  /* ── §5 · Principle cards ──────────────────────────────── */
  /* No explicit overrides needed — uses --surface / --bg-soft / tokens */

  /* ── §7 · Trusted logos ────────────────────────────────── */
  /* No explicit overrides needed — uses --text-secondary / --text-disabled */

  /* ── §8 · Footer CTA ──────────────────────────────────── */
  /* No explicit overrides needed — uses --text-primary / --asana-coral / hairlines */
}

/* ============================================================
   PHASE 1-5 · MOBILE + TABLET + TOUCH SYSTEM
   ============================================================
   Tokenized breakpoint contract:
     ≤640px   — Mobile (phones)
     641-1024 — Tablet (iPad portrait/landscape)
     1025+    — Desktop
   Plus orthogonal capability queries:
     (pointer: coarse) — touch devices regardless of viewport
     (hover: none)     — touch devices, no real hover
   ============================================================ */

/* ── PHASE 1a · Suppress sticky :hover on touch devices ──────
   On iOS Safari + Android Chrome, `:hover` triggers on tap and
   persists until the next interaction. Transform-based lifts get
   "stuck" and ruin the calm feel. Disable transforms on hover
   for touch devices, keep colour/border changes (those don't
   stick visually). */
@media (hover: none) {
  .pcard:hover, .kcard:hover, .af-card:hover,
  .h3-feat-card:hover, .h3-sys-card:hover, .rec-card:hover,
  .op-art:hover, .op-note:hover, .op-prin-item:hover,
  .h3-trusted-logo:hover, .bd-card:hover, .tl-bar:hover,
  .pp-project:hover .pp-logo {
    transform: none !important;
  }
}

/* ── PHASE 1b · Touch device tap-target sizing ───────────────
   Apple HIG 44pt + Material 48dp minimum. Applies regardless of
   viewport width so iPad mini (744px viewport) also benefits. */
@media (pointer: coarse) {
  .tb-toggle, .tb-theme, .btn-icon {
    width: 44px; height: 44px;
  }
  .tb-avatar { width: 36px; height: 36px; }
  .task-cb, .al-cb { width: 22px; height: 22px; }
  .h3-feat-arrow { width: 44px; height: 44px; }
  .pt-nav { padding: 10px; min-height: 44px; }
  .sb-item { min-height: 44px; }
  .sb-project { min-height: 40px; }
  /* Tabs grow to 44px on touch so they don't feel mis-tappable */
  .tab { min-height: 44px; }
}

/* ── PHASE 1c · Mobile content-text readability ──────────────
   Body UI text stays at --t-base (13px) for density, but content
   prose bumps to 15px on mobile so the reading experience isn't
   eye-straining. */
@media (max-width: 640px) {
  .narrative,
  .h3-hero-lede,
  .pb-narrative,
  .recs-card-desc,
  .af-context,
  .af-card-desc,
  .in-row dd {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ── PHASE 1d · Mobile project-tabs horizontal scroll ────────
   6 tabs would overflow on a 375px phone. Make the bar scroll
   horizontally instead of wrapping or clipping. */
@media (max-width: 640px) {
  .tab-bar {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; flex-shrink: 0; }
  /* Prev/Next on a separate row below tabs on tiny screens */
  .tab-bar.project-tabs .project-tabs-nav { display: none; }
}

/* ── PHASE 3 · Tablet sidebar icon-rail ──────────────────────
   The existing shell.css mobile rule (≤1023px) collapses the
   sidebar to a slide-out drawer. For tablet (641-1024), restore
   the icon rail so navigation is one tap away instead of two.
   Search remains in topbar at compact width. */
@media (min-width: 641px) and (max-width: 1024px) {
  .app-body {
    grid-template-columns: var(--sidebar-w-c) 1fr;
  }
  .sidebar {
    position: static;
    width: var(--sidebar-w-c);
    transform: none;
    top: auto; left: auto; bottom: auto;
    z-index: auto;
  }
  /* Hide labels, keep icons */
  .sb-heading,
  .sb-bucket-count,
  .sb-projects,
  .sb-group,
  .sb-item span:not(.sb-bucket-dot):not(.lucide),
  .sb-item .sb-bucket span:not(.sb-bucket-dot) { display: none; }
  .sb-item { justify-content: center; padding: 0; }
  /* Disable drawer scrim on tablet (no drawer to dismiss) */
  .scrim { display: none !important; }
  .app[data-sidebar-mobile="open"] .scrim {
    opacity: 0; pointer-events: none;
  }
  /* Topbar search regains its width at tablet */
  .tb-search {
    width: 320px;
    padding: 0 var(--s-4);
    justify-content: flex-start;
  }
  .tb-search > span:not(.lucide),
  .tb-search .kbd { display: inline-flex; }
  .tb-search .tb-search-input { display: block; }
}

/* ── PHASE 4a · Sticky project tab bar on scroll ─────────────
   Long project pages lose context. Sticky tab bar keeps Overview/
   List/Board/Timeline/Dashboard/Files reachable while reading. */
.tab-bar.project-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

/* ── PHASE 5a · Mobile hero alternative ──────────────────────
   The previous rule (max-width: 640px → display: none) hid the
   hero visualization entirely on phones, costing the centerpiece
   moment. Show a STATIC, simplified version instead: planes +
   core dot, no animations. Performance-friendly. */
@media (max-width: 640px) {
  .h3-hero-visual {
    display: block;
    max-width: 240px;
    margin: 0 auto;
    opacity: 0.75;
  }
  /* Suppress the animated SVG layers on mobile */
  .h3-orbit,
  .h3-orbiter,
  .h3-pulse-line-base,
  .h3-pulse-line-flow,
  .h3-pulse-top { display: none; }
  /* Soften the ambient glow + grid so they don't dominate */
  .h3-hero-glow {
    opacity: 0.4;
    filter: blur(40px);
  }
  .h3-hero-grid { opacity: 0.6; }
}

/* ── PHASE 5b · Below-fold paint optimization ────────────────
   content-visibility: auto skips layout/paint for off-screen
   sections until they scroll into view. ~30-50% paint cost
   reduction on long pages (Career Journey, Approach, Strategy). */
.h3-page > section:not(:first-child),
.tab-pane > section,
.pb > section,
.op-page > section:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ── PHASE 5c · Mobile content overflow fixes ────────────────
   Forensic round 2: pieces that still broke on ≤640px after the
   first mobile pass. */
@media (max-width: 640px) {
  /* Hero title — 40px display-lg dominates the entire fold on a
     375px phone. Drop to 32px so the lede + CTA fit above the fold. */
  .h3-hero-line-inner,
  .h3-hero-title { font-size: 32px; line-height: 1.1; }

  /* Hero meta row — base rule is flex-wrap:nowrap + nowrap text.
     On phone, allow wrapping so "Open for PM/Growth/DT roles" doesn't
     overflow off-screen. */
  .h3-hero-meta { flex-wrap: wrap; row-gap: 6px; }
  .h3-hero-meta .h3-meta { white-space: normal; }
  /* Hide the separator dots when items wrap — they look orphaned at
     the start of a wrapped line. */
  .h3-hero-meta .h3-meta-sep { display: none; }

  /* Hero eyebrow pill — long uppercase string was wrapping awkwardly.
     Reduce padding + allow break. */
  .h3-eyebrow-pill { padding: 6px 12px; font-size: 10px; }

  /* Strategy map canvas — absolutely-positioned goal cards spill off
     the right of the viewport. Enable horizontal scroll inside the
     canvas so the whole graph is reachable via touch-pan. */
  .gl-canvas {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Reduce canvas height on phone so it doesn't push the rest of
       the page far below the fold. */
    height: clamp(420px, calc(100vh - 200px), 560px);
  }
  /* Zoom bar — keep within tap range, away from the viewport edge */
  .gl-zoom-bar { right: 10px; bottom: 10px; transform: scale(0.92); transform-origin: bottom right; }

  /* Section titles — 28-32px on phone wraps onto 3-4 lines */
  .h3-section-title { font-size: 22px; line-height: 1.2; }

  /* Featured carousel — full-width cards (drop the 88% peek pattern
     since on a 375px phone the peek is only ~45px and reads as broken). */
  .h3-feat-card,
  .h3-feat-card--hero { flex: 0 0 calc(100% - 32px); min-width: 0; }

  /* Footer CTA title — was scaling down via 600px rule. After
     breakpoint consolidation, ensure the smallest size still applies. */
  .h3-foot-title { font-size: 24px; line-height: 1.2; }
  .h3-foot { gap: 36px; }
  .h3-page { padding: 20px 16px 32px; gap: 56px; }

  /* Project page header on mobile — title + status crowded; status
     pill wraps below the title naturally with flex-wrap. */
  .project-header-row { flex-wrap: wrap; }
  .project-header-actions { width: 100%; justify-content: flex-start; gap: 8px; }
  .project-title { font-size: 22px; line-height: 1.2; }
  .project-sub { font-size: 13px; }
  .project-header { padding: 16px 16px 0; gap: 10px; }

  /* Long h3-feat-card titles — let them wrap on mobile */
  .h3-feat-title { font-size: 20px; line-height: 1.2; }
}

/* ============================================================
   PHASE 6 · Cross-device completion (post-forensic round 3)
   ============================================================
   Remaining mobile/responsive issues not covered by Phase 1-5.
   Triggered after the cross-device review board audit.
   ============================================================ */

@media (max-width: 640px) {

  /* ── Page-level chrome density ──────────────────────────── */
  .page-header { padding: 16px 16px 0; gap: 8px; }
  .page-body { padding: 16px; }
  .tab-pane { padding: 16px 16px 24px; }
  .overview { padding: 16px; gap: 20px; }

  /* ── Topbar density on phone ────────────────────────────── */
  .topbar { gap: 8px; padding: 0 12px; }
  /* Search becomes 44px tap target instead of 36px */
  .tb-search { width: 44px; height: 44px; }

  /* ── List view (al-row) · collapse to 2 columns ─────────────
     Desktop: 5-column grid (title, status, priority, due, assignee).
     Mobile: just title + status pill on the right. Detail still
     reachable via row tap → drawer. */
  .al-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 12px;
  }
  .al-row .al-cell:nth-child(n+3) { display: none; }
  .al-row--head .al-cell:nth-child(n+3) { display: none; }

  /* ── Timeline · horizontal scroll on phone ─────────────────
     Both legacy (.gt-*) and new (.tl-*) timeline panes have wide
     tracks. Wrap in a scrollable container; rows keep their min
     width so the timeline doesn't compress unreadably. */
  .tl-pane, .gt-pane {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .tl-row, .gt-row { min-width: 560px; }
  .tl-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }

  /* ── Dashboard · stats wrap, charts fit-width ──────────────── */
  .recs-stats { flex-wrap: wrap; gap: 16px; }
  .db-chart-body, .db-svg, .db-funnel { max-width: 100%; overflow-x: auto; }
  .db-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* ── Drawer body padding (right-side detail drawer) ──────── */
  .drawer-body { padding: 16px; }
  .drawer-head { padding: 12px 16px; }

  /* ── Approach page (op-*) · single column + tighter padding ─ */
  .op-art, .op-note, .op-prin-item { padding: 16px; }
  .op-grid, .op-prin-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── Career Journey timeline ─────────────────────────────── */
  .cap-card, .tm-card { padding: 16px; }

  /* ── Strategy Map filter bar wraps on phone ──────────────── */
  .gl-tabs-bar { flex-wrap: wrap; gap: 8px; }
  .gl-meta-bar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }

  /* ── Hero CTA: secondary CTA stays on its own line so the
     primary button gets full prominence ─────────────────────── */
  .h3-hero-cta { gap: 16px; flex-direction: column; align-items: flex-start; }
  .h3-hero-btn--primary { width: 100%; justify-content: center; }

  /* ── Footer logo strip + meta wrap cleanly ───────────────── */
  .h3-foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .h3-foot-meta { gap: 10px; }

  /* ── Recs / testimonials cards ───────────────────────────── */
  .recs-card { padding: 16px; }
  .recs-grid, .rec-grid { grid-template-columns: 1fr !important; }

  /* ── Project breakdown (pb-) sections ─────────────────────── */
  .pb { gap: 32px; padding: 0; }
  .pb-section { padding: 0; }
  .pb-cover { border-radius: var(--r-8); }
  .pb-insight { padding: 14px 16px; }

  /* ── Drawer scrim cover for sidebar — never cover topbar on
     mobile so the user can still tap the close-toggle ──────── */
  .scrim { inset: var(--topbar-h) 0 0 0; }
}

/* ── Ultra-narrow phones (≤380px) ────────────────────────────
   iPhone SE 1st gen and similar. Drop the workspace name to
   reclaim topbar real estate. */
@media (max-width: 380px) {
  .tb-ws-name { display: none; }
  .h3-hero-line-inner,
  .h3-hero-title { font-size: 28px; }
}

/* ── PHASE 6b · Skeleton loading state on mobile ─────────────
   The home page skeleton (scripts/views/home.js) uses inline
   `style="grid-template-columns: ..."` for its 5 grid sections,
   which bypasses my CSS responsive rules. Override with high
   specificity + !important so the skeleton matches the actual
   mobile layout (single column for everything). */
@media (max-width: 640px) {
  .skel-page .skel-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* The inner metric-tile mini-grid stays 2-col so it doesn't
     stack 6 huge bars. */
  .skel-page section:first-child .skel-grid .skel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .skel-page .skel-page,
  .skel-page section { padding: 0; }
  /* Pages outer padding — match the live h3-page mobile padding */
  .skel-page { padding: 20px 16px 32px; gap: 48px; }
}

/* ── PHASE 6c · Project Board → horizontal scroll on mobile ──
   Stacked vertically on phone produces 12+ screens of scroll for
   a 4-column kanban with 3 cards each. Native kanban pattern is
   horizontal swipe — columns stay readable, peek of next column
   signals scrollability. */
@media (max-width: 640px) {
  .bd-board {
    display: grid !important;
    grid-template-columns: repeat(4, 85%) !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .bd-board::-webkit-scrollbar { display: none; }
  .bd-col { scroll-snap-align: start; min-width: 0; }
  .bd-card { padding: 12px 14px; }
}

/* ── PHASE 6d · Tab bar fade indicator ───────────────────────
   When tabs overflow, the rightmost tab gets cut off with no
   visual signal. Add a fade gradient on the right edge so users
   know to swipe. */
@media (max-width: 640px) {
  .tab-bar {
    position: relative;
    /* Mask creates a soft fade on the right edge of the scroll
       container so the last tab fades into the background. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  }
}

/* ── PHASE 6e · Core systems + principles full-width cards ──
   On mobile, multi-column grids collapse to 1fr so cards become
   full-width. Reduce internal padding so big empty cards don't
   feel hollow. */
@media (max-width: 640px) {
  .h3-sys-card,
  .h3-prin-card,
  .h3-feat-card { padding: 18px; }
  .h3-feat-card { padding: 0; }
  .h3-sys-icon,
  .h3-prin-icon { width: 36px; height: 36px; }
  .h3-sys-title,
  .h3-prin-title { font-size: 18px; }
  .h3-sys-desc,
  .h3-prin-desc { font-size: 14px; line-height: 1.5; }
  .h3-sys-bullets li,
  .h3-prin-bullets li { font-size: 13px; }
  /* Core Systems section · tighten the gap between header and grid */
  .h3-section-head-stacked,
  .h3-section-head-centered { margin-bottom: 24px; }
}

/* ── Universal grid → single column on mobile ────────────────
   Catch any multi-column grid that escaped explicit handling.
   Selectors only target known portfolio grid containers — does
   not affect SVG, table, or icon-grid micro-layouts. */
@media (max-width: 640px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  [class*="-grid"]:not(.h3-foot-main):not(.db-kpi-grid):not(.gl-canvas):not(.bd-grid) {
    grid-template-columns: 1fr;
  }
  /* Kanban + Board stay horizontal (intentional swipe pattern) */
  .kanban, .bd-grid { overflow-x: auto; }
}