/* ==========================================================================
   Developer's Playbook - Interactive Guide Styles
   ========================================================================== */

/* ==========================================================================
   1. Layout Structure
   ========================================================================== */

.playbook-page {
  --sidebar-width: 280px;
  --progress-height: 0px;
  --nav-height: 64px;
  --breadcrumb-height: 32px;
  --chapter-spacing: 6rem;
}

/* Navigation - Modified for playbook */
.nav--playbook {
  position: fixed;
  top: var(--progress-height);
  left: 0;
  right: 0;
  background-color: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  z-index: var(--z-sticky);
}

@media (min-width: 1024px) {
  .nav--playbook {
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);
  }
  .nav--playbook::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--gray-200);
  }
}

.playbook-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.playbook-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--charcoal-900);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.playbook-sidebar-toggle:hover {
  background-color: var(--gray-100);
}

@media (min-width: 1024px) {
  .playbook-sidebar-toggle {
    display: none;
  }
}

/* ==========================================================================
   2. Sidebar Navigation
   ========================================================================== */

.playbook-sidebar {
  position: fixed;
  top: calc(var(--progress-height) + var(--nav-height));
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--white);
  border-right: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  z-index: var(--z-fixed);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
  will-change: transform;
}

.playbook-sidebar.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .playbook-sidebar {
    transform: translateX(0);
  }
}

.playbook-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

@media (min-width: 1024px) {
  .playbook-sidebar__header {
    display: none;
  }
}

.playbook-sidebar__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.playbook-sidebar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  transition: color var(--duration-fast) var(--ease-out);
}

.playbook-sidebar__close:hover {
  color: var(--charcoal-900);
}

.playbook-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

/* Sidebar Navigation Items */
.playbook-nav-part {
  margin-bottom: var(--space-1);
}

.playbook-nav-part + .playbook-nav-part {
  border-top: 1px solid var(--gray-100);
  padding-top: var(--space-1);
}

.playbook-nav-part__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--charcoal-900);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.playbook-nav-part__number {
  color: var(--gray-400);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-2);
  flex-shrink: 0;
}

.playbook-nav-part__header:hover {
  color: var(--gold-600);
}

.playbook-nav-part.is-current .playbook-nav-part__header {
  color: var(--gold-600);
  background-color: var(--gold-50);
  border-radius: var(--radius-md);
}

.playbook-nav-part.is-current .playbook-nav-part__number {
  color: var(--gold-500);
}

.playbook-nav-part__toggle {
  margin-left: auto;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.playbook-nav-part.is-expanded .playbook-nav-part__toggle {
  transform: rotate(180deg);
}

.playbook-nav-part__chapters {
  display: none;
  padding-left: var(--space-3);
  padding-bottom: var(--space-2);
}

.playbook-nav-part.is-expanded .playbook-nav-part__chapters {
  display: block;
}

.playbook-nav-chapter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3) 6px var(--space-4);
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
  line-height: 1.4;
}

.playbook-nav-chapter:hover {
  color: var(--charcoal-900);
  background-color: var(--gray-50);
}

.playbook-nav-chapter.is-active {
  color: var(--gold-600);
  border-left-color: var(--gold-500);
  background-color: var(--gold-100);
}

.playbook-nav-chapter__badge {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--gold-100);
  color: var(--gold-600);
}

.playbook-sidebar__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--gray-100);
}

/* Sidebar Overlay */
.playbook-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-fixed) - 1);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out);
}

.playbook-sidebar-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .playbook-sidebar-overlay {
    display: none;
  }
}

/* ==========================================================================
   3. Main Content Area
   ========================================================================== */

.playbook-main {
  margin-top: calc(var(--progress-height) + var(--nav-height));
  min-height: calc(100vh - var(--progress-height) - var(--nav-height));
}

@media (min-width: 1024px) {
  .playbook-main {
    margin-left: var(--sidebar-width);
  }
}

/* ==========================================================================
   4. Hero Section
   ========================================================================== */

/* Hero layout — colors/padding overridden in Section 21 */
.playbook-hero {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .playbook-hero {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    gap: var(--space-12);
    max-width: 1100px;
    margin: 0 auto;
  }
}

.playbook-hero__content {
  max-width: 600px;
}

.playbook-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.playbook-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.playbook-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* TOC Card — base structure, colors overridden in Section 21 */
.playbook-toc {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 380px;
}

.playbook-toc__title {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.playbook-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ==========================================================================
   5. Part & Chapter Styles
   ========================================================================== */

.playbook-part {
  padding: var(--space-16) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
}

@media (min-width: 768px) {
  .playbook-part {
    padding: var(--space-20) var(--space-10);
  }
}

@media (min-width: 1024px) {
  .playbook-part {
    padding: var(--space-24) var(--space-16);
    max-width: 900px;
    margin-left: max(0px, calc(50vw - var(--sidebar-width) - 450px));
  }
}

.playbook-part__header {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 2px solid var(--gold-500);
}

.playbook-part__number {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold-600);
  margin-bottom: var(--space-2);
}

.playbook-part__title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-bottom: var(--space-4);
}

.playbook-part__description {
  font-size: var(--text-lg);
  color: var(--gray-600);
  max-width: 60ch;
}

/* Part Navigation - Show only current part with animated transitions */
.playbook-part {
  display: none;
  opacity: 0;
}

.playbook-part.is-visible {
  display: block;
  animation: partFadeIn var(--part-transition-duration, 0.45s) var(--ease-out)
    forwards;
  will-change: transform, opacity;
}

.playbook-part.is-exiting {
  display: block;
  animation: partFadeOut var(--part-transition-duration, 0.25s)
    var(--ease-in, ease-in) forwards;
  will-change: transform, opacity;
}

@keyframes partFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes partFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Part Navigation Buttons */
.playbook-part-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 2px solid var(--gray-200);
}

.playbook-part-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--charcoal-900);
  background-color: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-part-nav__btn:hover {
  border-color: var(--gold-500);
  background-color: var(--gold-50);
  color: var(--gold-700);
}

.playbook-part-nav__btn--prev {
  margin-right: auto;
}

.playbook-part-nav__btn--next {
  margin-left: auto;
  background-color: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--charcoal-900);
}

.playbook-part-nav__btn--next:hover {
  background-color: var(--gold-600);
  border-color: var(--gold-600);
}

.playbook-part-nav__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.playbook-part-nav__btn .icon {
  width: 20px;
  height: 20px;
}

.playbook-part-nav__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

.playbook-part-nav__btn--next .playbook-part-nav__label {
  align-items: flex-end;
}

.playbook-part-nav__hint {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--gray-500);
}

.playbook-part-nav__btn--next .playbook-part-nav__hint {
  color: var(--charcoal-600);
}

@media (max-width: 639px) {
  .playbook-part-nav {
    flex-direction: column;
    gap: var(--space-3);
  }

  .playbook-part-nav__btn {
    width: 100%;
    justify-content: center;
  }

  .playbook-part-nav__btn--prev,
  .playbook-part-nav__btn--next {
    margin: 0;
  }
}

/* Chapter Styles */
.playbook-page .playbook-chapter {
  display: block; /* Override components.css flex */
  margin-bottom: var(--chapter-spacing);
  padding-bottom: var(--space-12);
  padding-left: var(--space-6);
  border-left: 3px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-100);
  scroll-margin-top: calc(
    var(--progress-height) + var(--nav-height) + var(--breadcrumb-height) +
      var(--space-8)
  );
  transition: border-left-color var(--duration-fast) var(--ease-out);
}

.playbook-chapter:hover {
  border-left-color: var(--gold-400);
}

.playbook-chapter:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.playbook-chapter__header {
  display: block;
  margin-bottom: var(--space-6);
}

.playbook-chapter__number {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--gold-600);
  margin-bottom: var(--space-3);
  white-space: nowrap;
}

/* Subtle accent line before chapter number */
.playbook-chapter__number::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--gold-500);
  flex-shrink: 0;
}

.playbook-chapter__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-top: var(--space-3);
  line-height: var(--leading-tight);
}

@media (min-width: 768px) {
  .playbook-chapter__title {
    font-size: var(--text-3xl);
  }
}

.playbook-chapter__badge {
  display: inline-block;
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--gold-100);
  color: var(--gold-600);
  vertical-align: middle;
}

/* Chapter Content - Prose Styles (Premium) */
.playbook-chapter__content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--charcoal-900);
  max-width: 70ch;
}

.playbook-chapter__content p {
  margin-bottom: var(--space-4);
}

.playbook-chapter__content h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.playbook-chapter__content ul,
.playbook-chapter__content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.playbook-chapter__content ul {
  list-style-type: disc;
}

.playbook-chapter__content ol {
  list-style-type: decimal;
}

.playbook-chapter__content li {
  margin-bottom: var(--space-2);
}

.playbook-chapter__content strong {
  font-weight: 600;
  color: var(--charcoal-900);
}

/* Blockquote and callout styles upgraded in Section 19 below */

.playbook-chapter__content .callout--warning {
  background-color: var(--warning-light);
  border-color: var(--warning);
}

.playbook-chapter__content .callout--success {
  background-color: var(--success-light);
  border-color: var(--success);
}

/* Tables — scrollable on narrow screens */
.playbook-chapter__content {
  overflow-x: clip;
}

.playbook-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.playbook-table th,
.playbook-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.playbook-table thead th {
  font-weight: 600;
  color: var(--charcoal-900);
  background-color: var(--gray-50);
  border-bottom: 2px solid var(--gray-300);
}

.playbook-table tbody tr:last-child td {
  border-bottom: none;
}

.playbook-table tbody tr:hover {
  background-color: var(--gray-50);
}

@media (max-width: 639px) {
  .playbook-table {
    font-size: var(--text-xs);
  }
  .playbook-table th,
  .playbook-table td {
    padding: var(--space-2) var(--space-3);
  }
}

/* Interactive Chapter Indicator */
.playbook-chapter--interactive {
  padding: var(--space-8);
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.playbook-chapter--interactive .playbook-chapter__content {
  max-width: none; /* Allow full width for interactive content */
}

/* ==========================================================================
   6. Interactive Components
   ========================================================================== */

/* Quiz Component */
.playbook-quiz {
  display: block;
  width: 100%;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--gray-200);
}

.playbook-quiz__question {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background-color: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.playbook-quiz__question-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-bottom: var(--space-4);
}

.playbook-quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.playbook-quiz__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-quiz__option:hover {
  border-color: var(--gold-400);
  background-color: var(--gold-100);
}

.playbook-quiz__option.is-selected {
  border-color: var(--gold-500);
  background-color: var(--gold-100);
}

.playbook-quiz__option-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.playbook-quiz__option.is-selected .playbook-quiz__option-radio {
  border-color: var(--gold-500);
}

.playbook-quiz__option.is-selected .playbook-quiz__option-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--gold-500);
  border-radius: 50%;
}

.playbook-quiz__option-text {
  font-size: var(--text-base);
  color: var(--charcoal-900);
}

.playbook-quiz__results {
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--white) 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gold-500);
  text-align: center;
}

.playbook-quiz__results-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-bottom: var(--space-2);
}

.playbook-quiz__results-type {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 600;
  color: var(--gold-600);
  margin-bottom: var(--space-4);
}

.playbook-quiz__results-description {
  font-size: var(--text-base);
  color: var(--gray-600);
  max-width: 50ch;
  margin: 0 auto;
}

/* Checklist Component */
.playbook-checklist {
  display: block;
  width: 100%;
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--gray-200);
}

.playbook-checklist__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.playbook-checklist__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--charcoal-900);
}

.playbook-checklist__progress {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.playbook-checklist__progress-count {
  font-weight: 600;
  color: var(--gold-600);
}

.playbook-checklist__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.playbook-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-checklist__item:hover {
  border-color: var(--gray-300);
}

.playbook-checklist__item.is-checked {
  background-color: var(--success-light);
  border-color: var(--success);
}

.playbook-checklist__checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-checklist__item.is-checked .playbook-checklist__checkbox {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--white);
}

.playbook-checklist__checkbox svg {
  width: 14px;
  height: 14px;
  opacity: 0;
}

.playbook-checklist__item.is-checked .playbook-checklist__checkbox svg {
  opacity: 1;
}

.playbook-checklist__text {
  font-size: var(--text-base);
  color: var(--charcoal-900);
  line-height: var(--leading-normal);
}

@media (max-width: 767px) {
  .playbook-checklist__item {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }
}

.playbook-checklist__item.is-checked .playbook-checklist__text {
  text-decoration: line-through;
  color: var(--gray-500);
}

.playbook-checklist__category-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  margin: var(--space-4) 0 var(--space-2);
}

/* Scorecard Component */
.playbook-scorecard {
  display: block;
  width: 100%;
  margin-top: var(--space-8);
  padding: var(--space-6);
  padding-top: var(--space-8);
  background-color: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.playbook-scorecard__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.playbook-scorecard__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-bottom: var(--space-2);
}

.playbook-scorecard__score {
  font-family: var(--font-mono);
  font-size: var(--text-display-lg);
  font-weight: 500;
  color: var(--gold-500);
}

.playbook-scorecard__gauge {
  position: relative;
  height: 12px;
  background-color: var(--gray-200);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.playbook-scorecard__gauge-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--error) 0%,
    var(--warning) 50%,
    var(--success) 100%
  );
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.playbook-scorecard__gauge-marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 20px;
  background-color: var(--charcoal-900);
  border-radius: var(--radius-sm);
  transform: translateX(-50%);
  transition: left var(--duration-slow) var(--ease-out);
}

.playbook-scorecard__criteria {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.playbook-scorecard__criterion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.playbook-scorecard__criterion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.playbook-scorecard__criterion-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--charcoal-900);
}

.playbook-scorecard__criterion-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-600);
}

.playbook-scorecard__criterion-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background-color: var(--gray-200);
  border-radius: var(--radius-full);
  outline: none;
}

.playbook-scorecard__criterion-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--gold-500);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.playbook-scorecard__criterion-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.playbook-scorecard__criterion-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--gold-500);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 767px) {
  .playbook-scorecard__criterion-slider::-webkit-slider-thumb {
    width: 44px;
    height: 44px;
  }
  .playbook-scorecard__criterion-slider::-moz-range-thumb {
    width: 44px;
    height: 44px;
  }
}

.playbook-scorecard__rating {
  text-align: center;
  margin-bottom: var(--space-6);
  font-weight: 600;
  color: var(--gray-600);
}

.playbook-scorecard__criterion-desc {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: var(--space-1);
}

/* Calculator Link */
.playbook-calculator-link {
  margin-top: var(--space-8);
  text-align: center;
}

/* ==========================================================================
   9. Minimal Playbook Footer
   ========================================================================== */

.playbook-minimal-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--gray-200);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gray-500);
}

@media (min-width: 1024px) {
  .playbook-minimal-footer {
    margin-left: max(0px, calc(50vw - var(--sidebar-width) - 450px));
  }
}

.playbook-minimal-footer a {
  color: var(--gray-500);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.playbook-minimal-footer a:hover {
  color: var(--gold-600);
}

/* ==========================================================================
   10. Toast Notifications
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--charcoal-800);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: toast-slide-in var(--duration-normal) var(--ease-out);
}

.toast--success {
  border-left: 4px solid var(--success);
}

.toast--error {
  border-left: 4px solid var(--error);
}

.toast--warning {
  border-left: 4px solid var(--warning);
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==========================================================================
   11. Visualizations
   ========================================================================== */

/* Base visualization container */
.playbook-viz {
  margin: var(--space-6) 0;
}

.viz-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
  text-align: center;
}

/* Chart containers */
.viz-chart-container {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--gray-200);
}

.viz-chart-container canvas {
  max-height: 300px;
}

/* Doughnut chart wrapper */
.viz-doughnut-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 639px) {
  .viz-doughnut-wrapper {
    grid-template-columns: 1fr;
  }
}

.viz-doughnut-wrapper canvas {
  max-width: 220px;
  margin: 0 auto;
}

/* Custom legend */
.viz-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--gray-100);
}

.viz-legend-item:last-child {
  border-bottom: none;
}

.viz-legend-color {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.viz-legend-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.viz-legend-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-900);
}

/* Development Timeline */
.viz-timeline {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--gray-200);
}

.viz-timeline__track {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.viz-timeline__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.viz-timeline__phase-bar {
  width: 100%;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
}

.viz-timeline__phase-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viz-timeline__phase-duration {
  font-size: var(--text-xs);
  color: var(--gray-600);
  margin-top: var(--space-1);
}

.viz-timeline__total {
  text-align: center;
  padding-top: var(--space-4);
  border-top: 2px dashed var(--gray-300);
  font-size: var(--text-sm);
  color: var(--gray-700);
}

@media (max-width: 639px) {
  .viz-timeline__track {
    flex-direction: column;
  }

  .viz-timeline__phase-bar {
    height: 32px;
  }
}

/* Hub Diagram (Six Professionals) */
.viz-hub {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--gray-200);
}

.viz-hub__diagram {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto var(--space-6);
}

.viz-hub__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(212, 168, 75, 0.4);
  z-index: 2;
}

.viz-hub__center span {
  font-weight: 700;
  color: var(--white);
  font-size: var(--text-sm);
}

.viz-hub__node {
  position: absolute;
  width: 70px;
  height: 70px;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
  cursor: default;
}

.viz-hub__node:hover {
  border-color: var(--gold-500);
  transform: scale(1.05);
}

/* Position nodes in a circle */
.viz-hub__node[data-position="0"] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.viz-hub__node[data-position="1"] {
  top: 20%;
  right: 0;
}
.viz-hub__node[data-position="2"] {
  bottom: 20%;
  right: 0;
}
.viz-hub__node[data-position="3"] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.viz-hub__node[data-position="4"] {
  bottom: 20%;
  left: 0;
}
.viz-hub__node[data-position="5"] {
  top: 20%;
  left: 0;
}

.viz-hub__node:hover {
  transform: scale(1.05);
}

.viz-hub__node[data-position="0"]:hover,
.viz-hub__node[data-position="3"]:hover {
  transform: translateX(-50%) scale(1.05);
}

.viz-hub__node-icon {
  font-size: 20px;
}

.viz-hub__node-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.1;
  margin-top: 2px;
}

.viz-hub__legend {
  display: grid;
  gap: var(--space-2);
}

.viz-hub__legend-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.viz-hub__legend-icon {
  flex-shrink: 0;
}

/* Project Scenario Timeline */
.viz-scenario {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--gray-200);
}

.viz-scenario__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-6);
}

.viz-scenario__timeline::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--gray-300);
}

.viz-scenario__milestone {
  display: grid;
  grid-template-columns: 60px auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  position: relative;
}

.viz-scenario__dot {
  position: absolute;
  left: calc(-1 * var(--space-8) + var(--space-3) - 5px);
  width: 12px;
  height: 12px;
  background: var(--gold-500);
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--gold-500);
}

.viz-scenario__month {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
}

.viz-scenario__event {
  font-size: var(--text-sm);
  color: var(--gray-800);
}

.viz-scenario__cost {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-700);
  text-align: right;
}

.viz-scenario__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px dashed var(--gray-300);
}

.viz-scenario__stat {
  text-align: center;
}

.viz-scenario__stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
}

.viz-scenario__stat-label {
  font-size: var(--text-xs);
  color: var(--gray-600);
}

.viz-scenario__stat--highlight .viz-scenario__stat-value {
  color: var(--gold-600);
}

@media (max-width: 639px) {
  .viz-scenario__summary {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .viz-scenario__milestone {
    grid-template-columns: 50px 1fr;
  }

  .viz-scenario__cost {
    grid-column: 2;
    text-align: left;
    margin-top: calc(-1 * var(--space-1));
  }
}

/* Draw Gap Chart Note */
.viz-draw-gap__note {
  text-align: center;
  font-style: italic;
  color: var(--gray-500);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Quick Math Flowchart */
.viz-quickmath {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--gray-200);
}

.viz-quickmath__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.viz-quickmath__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: 400px;
  padding: var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}

.viz-quickmath__step-num {
  width: 32px;
  height: 32px;
  background: var(--gold-500);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.viz-quickmath__step-content {
  flex: 1;
}

.viz-quickmath__step-action {
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--space-1);
}

.viz-quickmath__step-example {
  font-size: var(--text-sm);
  color: var(--gray-600);
  font-family: var(--font-mono);
}

.viz-quickmath__arrow {
  color: var(--gray-400);
  font-size: var(--text-lg);
}

/* ==========================================================================
   12. Premium Visual Components
   ========================================================================== */

/* --- Drop Caps --- */
.playbook-chapter__content > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.5em;
  font-weight: 700;
  line-height: 0.8;
  padding-right: 0.1em;
  padding-top: 0.05em;
  color: var(--gold-600);
}

/* --- Section Label (above chapter heading) --- */
.playbook-chapter__section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

/* --- Data Callout Cards --- */
.playbook-data-callout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}

.playbook-data-callout__item {
  flex: 1 1 140px;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(
    135deg,
    var(--charcoal-800) 0%,
    var(--charcoal-900) 100%
  );
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 168, 75, 0.15);
  text-align: center;
}

.playbook-data-callout__number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-display-md);
  font-weight: 500;
  color: var(--gold-500);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.playbook-data-callout__label {
  font-size: var(--text-sm);
  color: var(--gray-400);
  font-weight: 500;
}

/* --- Expertise Fork Visualization --- */
.viz-fork {
  margin: 2rem 0;
}

.viz-fork__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.viz-fork__trigger {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  text-align: center;
  color: var(--gold-500);
  font-weight: 600;
  font-size: 1rem;
}

.viz-fork__arrow {
  text-align: center;
  font-size: 1.5rem;
  color: var(--gold-500);
  opacity: 0.6;
  line-height: 2;
}

.viz-fork__paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .viz-fork__paths {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.viz-fork__path {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.viz-fork__path-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.viz-fork__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  align-items: start;
}

.viz-fork__step + .viz-fork__step {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.viz-fork__step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.viz-fork__step-text {
  min-width: 0;
}

.viz-fork__step-action {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}

.viz-fork__step-outcome {
  font-size: 0.8125rem;
  color: var(--gray-400);
  line-height: 1.4;
  margin-top: 0.125rem;
}

.viz-fork__step--negative .viz-fork__step-outcome {
  color: #e57373;
}

.viz-fork__step--positive .viz-fork__step-outcome {
  color: var(--gold-500);
  font-weight: 500;
}

/* --- Radio Button Group (Calculators) --- */
.playbook-calc__radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

label.playbook-calc__radio-btn {
  background: var(--charcoal-700);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  user-select: none;
}

label.playbook-calc__radio-btn--checked {
  background: rgba(212, 168, 75, 0.15);
  border-color: var(--gold-500);
  color: var(--gold-500);
  font-weight: 500;
}

label.playbook-calc__radio-btn:hover:not(.playbook-calc__radio-btn--checked) {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

/* --- Failure Modes Radial Diagram --- */
.viz-radial {
  margin: 2rem 0;
}

.viz-radial__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.viz-radial__hub {
  width: 140px;
  height: 140px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--gold-500) 0%,
    rgba(212, 168, 75, 0.6) 60%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.viz-radial__hub::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 75, 0.2);
}

.viz-radial__hub-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--charcoal-900);
  line-height: 1.2;
  padding: 0 0.75rem;
}

.viz-radial__hub-sub {
  font-size: 0.625rem;
  color: rgba(20, 20, 20, 0.7);
  margin-top: 0.125rem;
}

.viz-radial__connector {
  text-align: center;
  font-size: 1.25rem;
  color: var(--gold-500);
  opacity: 0.5;
  line-height: 1.5;
}

.viz-radial__phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .viz-radial__phases {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
}

.viz-radial__phase {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.viz-radial__phase-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-500);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(212, 168, 75, 0.2);
  text-align: center;
}

.viz-radial__mode {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  cursor: default;
  position: relative;
}

.viz-radial__mode:hover {
  border-color: rgba(212, 168, 75, 0.3);
  box-shadow: 0 0 20px rgba(212, 168, 75, 0.08);
}

.viz-radial__mode--prevented {
  border-left: 3px solid rgba(212, 168, 75, 0.4);
}

.viz-radial__mode-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.viz-radial__mode-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--charcoal-900);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.viz-radial__mode-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.viz-radial__mode-desc {
  font-size: 0.875rem;
  color: var(--gray-400);
  line-height: 1.4;
  margin-bottom: 0.375rem;
}

.viz-radial__mode-cost {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e57373;
}

.viz-radial__mode-prevented {
  display: inline-block;
  font-size: 0.6875rem;
  color: var(--gold-500);
  margin-left: 0.5rem;
  opacity: 0.8;
}

.viz-radial__legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: var(--gray-400);
}

.viz-radial__legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.viz-radial__legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.viz-radial__legend-swatch--prevented {
  border-left: 3px solid rgba(212, 168, 75, 0.4);
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
}

.viz-radial__legend-swatch--active {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Warning Timeline Visualization --- */
.viz-timeline {
  margin: 2rem 0;
}

.viz-timeline__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.viz-timeline__phases {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .viz-timeline__phases {
    flex-direction: row;
    gap: 0;
  }
}

.viz-timeline__phase {
  flex: 1;
  position: relative;
}

@media (min-width: 768px) {
  .viz-timeline__phase + .viz-timeline__phase {
    border-left: 1px solid rgba(212, 168, 75, 0.2);
  }
}

.viz-timeline__phase-header {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(212, 168, 75, 0.2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 0.75rem 1rem;
  text-align: center;
}

.viz-timeline__phase-name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.viz-timeline__phase-range {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 0.125rem;
}

.viz-timeline__signs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.viz-timeline__sign {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-top: none;
  font-size: 0.8125rem;
  color: var(--gray-300);
  line-height: 1.4;
}

.viz-timeline__sign:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.viz-timeline__severity {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.viz-timeline__severity--medium {
  background: #fbbf24;
}

.viz-timeline__severity--high {
  background: #f97316;
}

.viz-timeline__severity--critical {
  background: #ef4444;
}

.viz-timeline__legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: var(--gray-400);
}

.viz-timeline__legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.viz-timeline__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Partner Evaluation Visualization --- */
.viz-eval {
  margin: 2rem 0;
}

.viz-eval__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.viz-eval__axes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.viz-eval__axis {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.viz-eval__axis-question {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}

.viz-eval__axis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.viz-eval__option {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  color: var(--gray-400);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.viz-eval__option--recommended {
  background: rgba(212, 168, 75, 0.12);
  border-color: rgba(212, 168, 75, 0.3);
  color: var(--gold-500);
  font-weight: 500;
}

.viz-eval__option-arrow {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-left: 0.25rem;
}

.viz-eval__models-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 0.75rem;
}

.viz-eval__models {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .viz-eval__models {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .viz-eval__models {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.viz-eval__model {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.viz-eval__model:hover {
  border-color: rgba(212, 168, 75, 0.3);
  box-shadow: 0 0 20px rgba(212, 168, 75, 0.08);
}

.viz-eval__model--recommended {
  border-color: rgba(212, 168, 75, 0.3);
  border-width: 2px;
}

.viz-eval__model-name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.viz-eval__model-risk {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.viz-eval__model-risk--high {
  color: #e57373;
}

.viz-eval__model-risk--medium {
  color: #fbbf24;
}

.viz-eval__model-risk--low,
.viz-eval__model-risk--lowest {
  color: #4ade80;
}

.viz-eval__model-cost {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-bottom: 0.375rem;
}

.viz-eval__model-best {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-style: italic;
}

.viz-eval__criteria-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 0.5rem;
}

.viz-eval__criteria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.viz-eval__criterion {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: var(--gray-400);
}

/* --- Pull Quotes --- */
.playbook-pull-quote {
  margin: var(--space-10) calc(-1 * var(--space-6));
  padding: var(--space-8) var(--space-6);
  border-left: 4px solid var(--gold-500);
  border-right: 4px solid var(--gold-500);
  background: linear-gradient(
    135deg,
    rgba(212, 168, 75, 0.04) 0%,
    transparent 100%
  );
  position: relative;
}

.playbook-pull-quote__text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.4;
  color: var(--charcoal-900);
  text-align: center;
  max-width: 50ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .playbook-pull-quote__text {
    font-size: var(--text-3xl);
  }
}

.playbook-pull-quote__attribution {
  display: block;
  text-align: center;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--gray-500);
  font-style: normal;
}

/* --- Key Takeaways Card --- */
.playbook-takeaways {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: linear-gradient(
    135deg,
    var(--gold-50, #fdf8ef) 0%,
    var(--white) 100%
  );
  border: 2px solid var(--gold-200, #f0dba0);
  border-radius: var(--radius-lg);
}

.playbook-takeaways__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gold-700, #9a7a2e);
  margin-bottom: var(--space-4);
}

.playbook-takeaways__title svg {
  width: 18px;
  height: 18px;
  color: var(--gold-500);
}

.playbook-takeaways__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.playbook-takeaways__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--charcoal-900);
}

.playbook-takeaways__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background-color: var(--gold-500);
  border-radius: 50%;
}

/* --- Part Completion Banner --- */
.playbook-part-complete {
  display: none;
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-4);
  background: linear-gradient(
    135deg,
    var(--gold-50, #fdf8ef) 0%,
    var(--white) 100%
  );
  border: 2px solid var(--gold-500);
  border-radius: var(--radius-lg);
  text-align: center;
  animation: banner-slide-in 0.6s ease-out;
}

.playbook-part-complete.is-visible {
  display: block;
}

.playbook-part-complete__icon {
  font-size: var(--text-display-lg);
  margin-bottom: var(--space-2);
}

.playbook-part-complete__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--charcoal-900);
  margin-bottom: var(--space-2);
}

.playbook-part-complete__progress {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

@keyframes banner-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Scroll Reveal Base --- */
.playbook-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.playbook-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* For prefers-reduced-motion, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .playbook-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Chapter Complete Toast Enhancement --- */
.toast--chapter-complete {
  border-left: 4px solid var(--gold-500);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.toast--chapter-complete .toast__check {
  width: 24px;
  height: 24px;
  background: var(--gold-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast--chapter-complete .toast__check svg {
  width: 14px;
  height: 14px;
  color: var(--white);
}

/* --- Micro-Interactions --- */

/* Checklist bounce animation on check */
.playbook-checklist__item.is-checking {
  animation: check-bounce 0.4s ease;
}

@keyframes check-bounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.03);
  }
  60% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

/* Quiz option ripple on select */
.playbook-quiz__option {
  overflow: hidden;
  position: relative;
}

.playbook-quiz__option::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(212, 168, 75, 0.25) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.playbook-quiz__option.is-rippling::after {
  opacity: 1;
  animation: ripple-fade 0.6s ease-out forwards;
}

@keyframes ripple-fade {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Scorecard slider gold track fill */
.playbook-scorecard__criterion-slider {
  background: linear-gradient(
    to right,
    var(--gold-500) 0%,
    var(--gold-500) var(--slider-fill, 50%),
    var(--gray-200) var(--slider-fill, 50%),
    var(--gray-200) 100%
  );
}

/* Hover elevation on interactive cards */
.playbook-quiz__question,
.playbook-checklist__item,
.playbook-data-callout__item,
.viz-quickmath__step {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.playbook-quiz__question:hover,
.playbook-data-callout__item:hover,
.viz-quickmath__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Read Time Display --- */
.playbook-chapter__read-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-left: var(--space-3);
}

.playbook-chapter__read-time svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   13. Calculator Components
   ========================================================================== */

.playbook-calc-container {
  margin: var(--space-8) 0 var(--space-4);
}

.playbook-calc {
  background: linear-gradient(
    135deg,
    var(--charcoal-700) 0%,
    var(--charcoal-800) 100%
  );
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--white);
}

.playbook-calc__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gold-400);
  margin-bottom: var(--space-5);
  text-align: center;
}

/* Input Fields */
.playbook-calc__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.playbook-calc__inputs--row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .playbook-calc__inputs--row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.playbook-calc__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.playbook-calc__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.playbook-calc__input {
  padding: var(--space-2) var(--space-3);
  background-color: var(--charcoal-900);
  border: 1px solid var(--gray-600);
  border-radius: var(--radius-md);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  width: 100%;
  transition: border-color var(--duration-fast) ease;
}

.playbook-calc__input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.2);
}

/* Slider fields */
.playbook-calc__slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.playbook-calc__slider-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-400);
}

.playbook-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--gray-600);
  outline: none;
  cursor: pointer;
}

.playbook-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--gold-500);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--duration-fast) ease;
}

.playbook-calc__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.playbook-calc__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--gold-500);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Two-column layout (Build vs Buy) */
.playbook-calc__body--columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .playbook-calc__body--columns {
    grid-template-columns: 1fr 1fr;
  }
}

.playbook-calc__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.playbook-calc__column-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--gray-600);
}

.playbook-calc__column-label--gold {
  color: var(--gold-400);
  border-bottom-color: var(--gold-500);
}

.playbook-calc__shared {
  margin-bottom: var(--space-4);
  max-width: 200px;
}

/* Results */
.playbook-calc__results {
  margin-top: var(--space-4);
}

.playbook-calc__results--columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .playbook-calc__results--columns {
    grid-template-columns: 1fr 1fr;
  }
}

.playbook-calc__results--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.playbook-calc__result-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.playbook-calc__result-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--gray-600);
}

.playbook-calc__result-label--gold {
  color: var(--gold-400);
  border-bottom-color: var(--gold-500);
}

/* Metric cards */
.playbook-calc__metric {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.playbook-calc__metric--highlight {
  background-color: rgba(212, 168, 75, 0.1);
  border: 1px solid var(--gold-500);
}

.playbook-calc__metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

.playbook-calc__metric--highlight .playbook-calc__metric-value {
  color: var(--gold-400);
}

.playbook-calc__metric-label {
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: var(--space-1);
}

/* Verdict */
.playbook-calc__verdict {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-align: center;
  font-size: var(--text-base);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--gray-300);
}

.playbook-calc__verdict--positive {
  background-color: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.playbook-calc__verdict--negative {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.playbook-calc__verdict-icon {
  font-size: var(--text-lg);
  margin-right: var(--space-2);
}

/* Budget total display */
.playbook-calc__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background-color: rgba(212, 168, 75, 0.1);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-md);
}

.playbook-calc__total-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.playbook-calc__total-value {
  font-family: var(--font-mono);
  font-size: var(--text-display-sm);
  font-weight: 700;
  color: var(--gold-400);
}

/* Quick Math steps */
.playbook-calc__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.playbook-calc__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.playbook-calc__step-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gold-500);
  color: var(--charcoal-900);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.playbook-calc__step-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.playbook-calc__step-label {
  font-size: var(--text-sm);
  color: var(--gray-400);
}

.playbook-calc__step-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}

.playbook-calc__step-arrow {
  text-align: center;
  color: var(--gray-500);
  font-size: var(--text-sm);
  line-height: 1;
}

/* Link to full calculator */
.playbook-calc__link {
  margin-top: var(--space-5);
  text-align: center;
}

.playbook-calc__link .btn-outline {
  border-color: var(--gold-500);
  color: var(--gold-400);
}

.playbook-calc__link .btn-outline:hover {
  background-color: var(--gold-500);
  color: var(--charcoal-900);
}

/* Caution verdict (used by Red Flag Detector) */
.playbook-calc__verdict--caution {
  background: linear-gradient(
    135deg,
    rgba(234, 179, 8, 0.15),
    rgba(234, 179, 8, 0.05)
  );
  border-color: rgba(234, 179, 8, 0.3);
}

.playbook-calc__verdict--caution .playbook-calc__verdict-icon {
  color: #eab308;
}

/* ==========================================================================
   13b. Decision Tool Components
   ========================================================================== */

/* Shared tool base */
.playbook-tool {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.playbook-tool__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--white);
  margin: 0 0 var(--space-2) 0;
}

.playbook-tool__subtitle {
  font-size: var(--text-sm);
  color: var(--gray-400);
  margin: 0 0 var(--space-5) 0;
}

/* --- Progress bar (Team Builder, etc.) --- */
.playbook-tool__progress {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.playbook-tool__progress-bar {
  display: flex;
  height: 100%;
}

.playbook-tool__progress-fill {
  height: 100%;
  background-color: var(--gold-500);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.playbook-tool__progress-text {
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-bottom: var(--space-4);
}

/* --- Card grid (Team Builder) --- */
.playbook-tool__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.playbook-tool__card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.15s ease;
  text-align: center;
}

.playbook-tool__card:hover {
  border-color: rgba(212, 168, 75, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.playbook-tool__card--checked {
  border-color: var(--gold-500);
  background-color: rgba(212, 168, 75, 0.1);
}

.playbook-tool__card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.playbook-tool__card-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.playbook-tool__card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
}

.playbook-tool__card-check {
  font-size: var(--text-lg);
  line-height: 1;
  min-height: 1.5em;
}

.playbook-tool__card-detail {
  font-size: var(--text-xs);
  color: var(--gray-400);
  margin-top: var(--space-2);
  line-height: 1.4;
  display: none;
}

.playbook-tool__card--checked .playbook-tool__card-detail {
  display: block;
}

/* Banner (Team Complete, etc.) */
.playbook-tool__banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.playbook-tool__banner--success {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.15),
    rgba(34, 197, 94, 0.05)
  );
  border-color: rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

/* --- Timeline bars (Timeline Modeler) --- */
.playbook-tool__sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.playbook-tool__slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.playbook-tool__slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--gray-300);
}

.playbook-tool__slider-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--gold-400);
}

.playbook-tool__slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
}

.playbook-tool__slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--gold-500);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.playbook-tool__slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.playbook-tool__slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--gold-500);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.playbook-tool__timeline-bars {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  height: 120px;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-2);
}

.playbook-tool__timeline-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.playbook-tool__timeline-bar-fill {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 0.4s ease;
  min-height: 4px;
}

.playbook-tool__timeline-bar-label {
  font-size: 0.65rem;
  color: var(--gray-400);
  margin-top: var(--space-1);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.playbook-tool__timeline-total {
  text-align: center;
  padding: var(--space-3);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.playbook-tool__timeline-total-label {
  font-size: var(--text-xs);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.playbook-tool__timeline-total-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold-400);
}

/* --- Step-through walkthrough (Project Walkthrough) --- */
.playbook-tool__step-counter {
  font-size: var(--text-sm);
  color: var(--gray-400);
  margin-bottom: var(--space-3);
  text-align: center;
}

.playbook-tool__walkthrough-display {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  margin-bottom: var(--space-4);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.playbook-tool__walkthrough-month {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gold-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.playbook-tool__walkthrough-event {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--white);
}

.playbook-tool__walkthrough-cost {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--gray-300);
}

.playbook-tool__walkthrough-running {
  font-size: var(--text-sm);
  color: var(--gray-400);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.playbook-tool__walkthrough-running strong {
  color: var(--gold-400);
  font-family: var(--font-mono);
}

.playbook-tool__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.playbook-tool__nav-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  min-width: 44px;
  min-height: 44px;
}

.playbook-tool__nav-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--gold-500);
}

.playbook-tool__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* --- Red Flag Detector --- */
.playbook-tool__flag-counter {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.playbook-tool__flag-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-400);
}

.playbook-tool__flag-count strong {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
}

.playbook-tool__flag-count--green strong {
  color: #4ade80;
}

.playbook-tool__flag-count--red strong {
  color: #f87171;
}

.playbook-tool__flags {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.playbook-tool__flag-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.playbook-tool__flag-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--gray-300);
  line-height: 1.4;
}

.playbook-tool__flag-toggles {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.playbook-tool__flag-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: transparent;
  color: var(--gray-400);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 44px;
  min-height: 36px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.playbook-tool__flag-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.playbook-tool__flag-btn--yes {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.playbook-tool__flag-btn--no {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

/* --- Risk Ranker --- */
.playbook-tool__risk-top3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  min-height: 80px;
}

.playbook-tool__risk-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(212, 168, 75, 0.1),
    rgba(212, 168, 75, 0.03)
  );
  border: 1px solid rgba(212, 168, 75, 0.25);
  border-radius: var(--radius-md);
}

.playbook-tool__risk-rank {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold-400);
  line-height: 1;
}

.playbook-tool__risk-card-content {
  flex: 1;
  min-width: 0;
}

.playbook-tool__risk-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-1);
}

.playbook-tool__risk-card-tip {
  font-size: var(--text-xs);
  color: var(--gray-400);
  line-height: 1.4;
}

.playbook-tool__risk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.playbook-tool__risk-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.playbook-tool__risk-item:hover {
  border-color: rgba(212, 168, 75, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
}

.playbook-tool__risk-item--selected {
  border-color: var(--gold-500);
  background-color: rgba(212, 168, 75, 0.1);
}

.playbook-tool__risk-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-500);
  min-width: 20px;
}

.playbook-tool__risk-item--selected .playbook-tool__risk-num {
  color: var(--gold-400);
}

.playbook-tool__risk-name {
  font-size: var(--text-sm);
  color: var(--gray-300);
}

.playbook-tool__risk-item--selected .playbook-tool__risk-name {
  color: var(--white);
  font-weight: 500;
}

/* --- Path Finder --- */
.playbook-tool__pf-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.playbook-tool__pf-question {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.playbook-tool__pf-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--white);
}

.playbook-tool__pf-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.playbook-tool__pf-options--spaced {
  margin-bottom: var(--space-6);
}

.playbook-tool__note {
  margin-top: var(--space-4);
}

.playbook-tool__pf-option {
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--gray-300);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  min-height: 44px;
}

.playbook-tool__pf-option:hover {
  border-color: rgba(212, 168, 75, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--white);
}

.playbook-tool__pf-option--selected {
  border-color: var(--gold-500);
  background-color: rgba(212, 168, 75, 0.1);
  color: var(--white);
  font-weight: 500;
}

/* Path Finder result card */
.playbook-tool__pf-result {
  background: linear-gradient(
    135deg,
    rgba(212, 168, 75, 0.12),
    rgba(212, 168, 75, 0.04)
  );
  border: 1px solid rgba(212, 168, 75, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}

.playbook-tool__pf-result-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold-400);
  margin-bottom: var(--space-2);
}

.playbook-tool__pf-result-desc {
  font-size: var(--text-sm);
  color: var(--gray-300);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.playbook-tool__pf-result .playbook-calc__metrics {
  margin-bottom: var(--space-4);
}

/* --- Tool responsive overrides --- */
@media (max-width: 639px) {
  .playbook-tool {
    padding: var(--space-4);
  }

  .playbook-tool__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .playbook-tool__flag-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .playbook-tool__flag-toggles {
    align-self: flex-end;
  }

  .playbook-tool__risk-top3 {
    grid-template-columns: 1fr;
  }

  .playbook-tool__risk-list {
    grid-template-columns: 1fr;
  }

  .playbook-tool__timeline-bars {
    height: 90px;
  }

  .playbook-tool__pf-options {
    gap: var(--space-1);
  }
}

/* ==========================================================================
   13c. Action Tool Components
   ========================================================================== */

/* --- Mitigation Planner --- */
.playbook-tool__mitigation-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.playbook-tool__mitigation-category {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.playbook-tool__mitigation-cat-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-400);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.playbook-tool__mitigation-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.playbook-tool__mitigation-row:hover {
  opacity: 0.85;
}

.playbook-tool__mitigation-cb {
  accent-color: var(--gold-500);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.playbook-tool__mitigation-label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--gray-300);
}

.playbook-tool__mitigation-impact {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--gold-400);
  font-weight: 600;
}

/* --- Action Plan --- */
.playbook-tool__action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.playbook-tool__action-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.playbook-tool__action-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.playbook-tool__action-item--done {
  opacity: 0.6;
}

.playbook-tool__action-item--done .playbook-tool__action-text {
  text-decoration: line-through;
}

.playbook-tool__action-cb {
  accent-color: var(--gold-500);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.playbook-tool__action-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-500);
  min-width: 20px;
}

.playbook-tool__action-text {
  font-size: var(--text-sm);
  color: var(--gray-300);
  transition: text-decoration 0.2s ease;
}

/* --- 90-Day Tracker --- */
.playbook-tool__day-counter {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.playbook-tool__day-num {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gold-400);
}

.playbook-tool__day-label {
  font-size: var(--text-sm);
  color: var(--gray-400);
}

.playbook-tool__kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.playbook-tool__kanban-col {
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.playbook-tool__kanban-header {
  padding: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--white);
  text-align: center;
  border-bottom: 3px solid var(--gold-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.playbook-tool__kanban-tasks {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.playbook-tool__kanban-task {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: var(--text-xs);
}

.playbook-tool__kanban-task:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.playbook-tool__kanban-task--done {
  opacity: 0.5;
}

.playbook-tool__kanban-task--done .playbook-tool__kanban-text {
  text-decoration: line-through;
}

.playbook-tool__kanban-cb {
  accent-color: var(--gold-500);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}

.playbook-tool__kanban-text {
  color: var(--gray-300);
  line-height: 1.4;
}

/* --- Resource Hub --- */
.playbook-tool__resource-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.playbook-tool__resource-filter {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: transparent;
  color: var(--gray-400);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
}

.playbook-tool__resource-filter:hover {
  border-color: rgba(212, 168, 75, 0.4);
  color: var(--white);
}

.playbook-tool__resource-filter--active {
  background-color: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--charcoal-900);
  font-weight: 600;
}

.playbook-tool__resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.playbook-tool__resource-card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.2s ease,
    transform 0.15s ease;
}

.playbook-tool__resource-card:hover {
  border-color: rgba(212, 168, 75, 0.3);
  transform: translateY(-2px);
}

.playbook-tool__resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.playbook-tool__resource-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-400);
  font-weight: 600;
}

.playbook-tool__resource-bookmark {
  background: none;
  border: none;
  color: var(--gold-400);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
}

.playbook-tool__resource-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-1);
}

.playbook-tool__resource-desc {
  font-size: var(--text-xs);
  color: var(--gray-400);
  line-height: 1.4;
  flex: 1;
  margin-bottom: var(--space-3);
}

.playbook-tool__resource-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold-400);
  text-decoration: none;
  transition: color 0.2s ease;
}

.playbook-tool__resource-link:hover {
  color: var(--gold-300, #f0d78a);
}

/* --- Journey Summary --- */
.playbook-tool__journey-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.playbook-tool__journey-stat {
  text-align: center;
  padding: var(--space-4);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.playbook-tool__journey-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold-400);
  margin-bottom: var(--space-1);
}

.playbook-tool__journey-stat-label {
  font-size: var(--text-xs);
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.playbook-tool__journey-cta {
  text-align: center;
  padding: var(--space-6);
  background: linear-gradient(
    135deg,
    rgba(212, 168, 75, 0.1),
    rgba(212, 168, 75, 0.03)
  );
  border: 1px solid rgba(212, 168, 75, 0.25);
  border-radius: var(--radius-lg);
}

.playbook-tool__journey-cta-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.playbook-tool__journey-cta-desc {
  font-size: var(--text-sm);
  color: var(--gray-300);
  margin-bottom: var(--space-4);
}

/* --- Action tool responsive --- */
@media (max-width: 639px) {
  .playbook-tool__mitigation-categories {
    grid-template-columns: 1fr;
  }

  .playbook-tool__kanban {
    grid-template-columns: 1fr;
  }

  .playbook-tool__resource-grid {
    grid-template-columns: 1fr;
  }

  .playbook-tool__journey-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .playbook-tool__day-counter {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   13d. Appendix Tool Components
   ========================================================================== */

/* Shared appendix utilities */
.playbook-tool__appendix-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.playbook-tool__appendix-search {
  margin-bottom: var(--space-3);
}

.playbook-tool__appendix-search .playbook-calc__input {
  width: 100%;
  max-width: 300px;
}

.playbook-tool__appendix-name-row .playbook-tool__subtitle {
  margin: 0;
}

.playbook-tool__appendix-name-row .playbook-calc__input {
  max-width: 200px;
}

.playbook-tool__resource-badge--spaced {
  margin-bottom: var(--space-2);
}

/* Site eval checklist reuses mitigation-category styles */
.playbook-tool__site-eval-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* --- Glossary --- */
.playbook-tool__glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.playbook-tool__glossary-item {
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}

.playbook-tool__glossary-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.playbook-tool__glossary-term {
  font-weight: 600;
  color: var(--gold-400);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.playbook-tool__glossary-def {
  font-size: var(--text-sm);
  color: var(--gray-300);
  line-height: 1.5;
  margin: 0;
}

/* --- Zoning Table --- */
.playbook-tool__zoning-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.playbook-tool__zoning-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.playbook-tool__zoning-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--gold-400);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(212, 168, 75, 0.3);
  white-space: nowrap;
}

.playbook-tool__zoning-table td {
  padding: var(--space-2) var(--space-3);
  color: var(--gray-300);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
}

.playbook-tool__zoning-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.playbook-tool__zoning-row--yes {
  background-color: rgba(34, 197, 94, 0.04);
}

.playbook-tool__zoning-code {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.playbook-tool__zoning-notes {
  font-size: var(--text-xs);
  color: var(--gray-400);
  max-width: 300px;
}

/* --- Appendix responsive --- */
@media (max-width: 639px) {
  .playbook-tool__site-eval-checklist {
    grid-template-columns: 1fr;
  }

  .playbook-tool__zoning-table {
    font-size: var(--text-xs);
  }

  .playbook-tool__zoning-table th,
  .playbook-tool__zoning-table td {
    padding: var(--space-1) var(--space-2);
  }

  .playbook-tool__zoning-notes {
    max-width: 150px;
  }
}

/* ==========================================================================
   15. Email Gate
   ========================================================================== */

/* Modal overlay */
.playbook-email-gate__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.playbook-email-gate {
  background: linear-gradient(135deg, var(--charcoal-700), var(--charcoal-800));
  border: 1px solid rgba(212, 168, 75, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.playbook-email-gate__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: var(--text-xl);
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease;
}

.playbook-email-gate__close:hover {
  color: var(--white);
}

.playbook-email-gate__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  line-height: 1;
}

.playbook-email-gate__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 var(--space-2) 0;
}

.playbook-email-gate__desc {
  font-size: var(--text-sm);
  color: var(--gray-300);
  line-height: 1.5;
  margin: 0 0 var(--space-5) 0;
}

.playbook-email-gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.playbook-email-gate__input {
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: 16px;
  font-family: var(--font-body);
  transition: border-color 0.2s ease;
}

.playbook-email-gate__input::placeholder {
  color: var(--gray-500);
}

.playbook-email-gate__input:focus {
  outline: none;
  border-color: var(--gold-500);
}

.playbook-email-gate__submit {
  width: 100%;
}

.playbook-email-gate__skip {
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-2);
  transition: color 0.2s ease;
}

.playbook-email-gate__skip:hover {
  color: var(--gray-300);
}

/* Non-blocking banner */
.playbook-email-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(212, 168, 75, 0.12),
    rgba(212, 168, 75, 0.04)
  );
  border: 1px solid rgba(212, 168, 75, 0.25);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.playbook-email-banner__text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--gray-300);
}

.playbook-email-banner__btn {
  flex-shrink: 0;
}

.playbook-email-banner__dismiss {
  background: none;
  border: none;
  color: var(--gray-500);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
}

.playbook-email-banner__dismiss:hover {
  color: var(--white);
}

@media (max-width: 639px) {
  .playbook-email-gate {
    padding: var(--space-6);
  }

  .playbook-email-banner {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   16. Sticky Chapter Breadcrumb
   ========================================================================== */

.playbook-breadcrumb {
  position: fixed;
  top: calc(var(--progress-height) + var(--nav-height));
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--text-xs);
  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.playbook-breadcrumb.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .playbook-breadcrumb {
    left: var(--sidebar-width);
  }
}

.playbook-breadcrumb__part {
  font-weight: 600;
  color: var(--gold-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.playbook-breadcrumb__sep {
  width: 14px;
  height: 14px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.playbook-breadcrumb__chapter {
  color: var(--gray-600);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom scrollbar for sidebar */
.playbook-sidebar__nav::-webkit-scrollbar {
  width: 4px;
}

.playbook-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}

.playbook-sidebar__nav::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: 2px;
}

.playbook-sidebar__nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--gold-400);
}

/* Firefox scrollbar */
.playbook-sidebar__nav {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

/* ==========================================================================
   18. Premium Part Header Enhancements
   ========================================================================== */

/* Larger, more dramatic part number */
.playbook-part__number {
  font-size: 11px;
  letter-spacing: 0.2em;
  position: relative;
  padding-left: 44px;
}

.playbook-part__number::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transform: translateY(-50%);
}

/* Larger part title on desktop */
@media (min-width: 768px) {
  .playbook-part__title {
    font-size: var(--text-display-lg);
  }
}

/* Part divider — subtle gold gradient line above each part header */
.playbook-part__header::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  margin-top: var(--space-6);
  border-radius: 2px;
}

/* ==========================================================================
   19. Premium Chapter Polish
   ========================================================================== */

/* Drop cap on first paragraph of each chapter */
.playbook-chapter__content > p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 3.2em;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: var(--gold-600);
}

/* Chapter number with decorative element */
.playbook-chapter__number {
  position: relative;
}

/* Subtle chapter separator between sibling chapters */
.playbook-chapter + .playbook-chapter {
  position: relative;
}

.playbook-chapter + .playbook-chapter::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gray-200);
  margin-bottom: var(--space-8);
}

/* Elevated blockquote styling */
.playbook-chapter__content blockquote {
  position: relative;
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--gold-500);
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--white) 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lg);
  line-height: 1.7;
}

.playbook-chapter__content blockquote::before {
  content: "\201C";
  position: absolute;
  top: -8px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold-300);
  line-height: 1;
  pointer-events: none;
}

/* Better strong text in chapters */
.playbook-chapter__content strong {
  color: var(--charcoal-900);
  font-weight: 700;
}

/* Key insight callout pattern */
.playbook-chapter__content .callout {
  position: relative;
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  border-left: 4px solid var(--gold-500);
  background-color: var(--white);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   21. Hero Polish
   ========================================================================== */

.playbook-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--charcoal-900) 0%,
    var(--charcoal-800) 60%,
    var(--charcoal-700) 100%
  );
  padding: var(--space-16) var(--space-4);
  min-height: 100vh;
  min-height: 100dvh;
  align-content: center;
}

@media (min-width: 768px) {
  .playbook-hero {
    padding: var(--space-20) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .playbook-hero {
    padding: var(--space-20) var(--space-12);
  }
}

/* Decorative dot grid */
.playbook-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background-image: radial-gradient(
    circle,
    rgba(212, 168, 75, 0.12) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

/* Hero text on dark bg */
.playbook-hero__title {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.playbook-hero__subtitle {
  color: var(--gold-400);
  margin-bottom: var(--space-4);
}

.playbook-hero__description {
  color: var(--gray-300);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
  max-width: 52ch;
}

.playbook-hero__meta-item {
  color: var(--gray-400);
}

.playbook-hero__meta-item .icon {
  color: var(--gold-500);
}

/* Badge row */
.playbook-hero__badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.playbook-hero .badge--gold {
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: var(--space-2) var(--space-4);
}

.playbook-hero__value-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-400);
  text-decoration: line-through;
  text-decoration-color: var(--gray-500);
  letter-spacing: var(--tracking-wide);
}

/* Social proof line */
.playbook-hero__proof {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--gray-500);
  font-style: italic;
}

/* TOC on dark bg */
.playbook-toc {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  box-shadow: none;
}

.playbook-toc__title {
  color: var(--gray-300);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.playbook-toc__item a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gray-300);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.playbook-toc__item a:hover {
  color: var(--gold-400);
}

.playbook-toc__part-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold-500);
  background-color: rgba(212, 168, 75, 0.1);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.playbook-toc__chapters-count {
  font-size: 10px;
  color: var(--gray-600);
  margin-left: auto;
  white-space: nowrap;
}

.playbook-toc__item--appendix a {
  color: var(--gray-500);
  font-style: italic;
}

/* ==========================================================================
   22. Part Color Accent System
   ========================================================================== */

/* Each part gets a subtle accent color for its left border and badges */
[data-part="1"] {
  --part-accent: var(--gold-500);
}
[data-part="2"] {
  --part-accent: #5b9bd5;
}
[data-part="3"] {
  --part-accent: #6bb77b;
}
[data-part="4"] {
  --part-accent: #e8834a;
}
[data-part="5"] {
  --part-accent: #d45b5b;
}
[data-part="6"] {
  --part-accent: #9b7fd4;
}
[data-part="7"] {
  --part-accent: var(--gold-500);
}
[data-part="8"] {
  --part-accent: var(--gray-500);
}

/* Apply part accent to chapter left borders */
.playbook-part .playbook-chapter {
  border-left-color: color-mix(
    in srgb,
    var(--part-accent) 30%,
    var(--gray-200)
  );
}

.playbook-part .playbook-chapter:hover {
  border-left-color: var(--part-accent);
}

/* Part header gold line uses part accent */
.playbook-part__header {
  border-bottom-color: var(--part-accent, var(--gold-500));
}

/* Interactive chapter card uses part accent */
.playbook-chapter--interactive {
  border-color: color-mix(in srgb, var(--part-accent) 20%, var(--gray-200));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--part-accent) 3%, var(--white)) 0%,
    var(--gray-50) 100%
  );
}

/* Chapter badge uses part accent */
.playbook-chapter__badge {
  background-color: color-mix(in srgb, var(--part-accent) 12%, var(--white));
  color: var(--part-accent);
}

/* ==========================================================================
   23. Enhanced Interactive Chapter Cards
   ========================================================================== */

.playbook-chapter--interactive {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  position: relative;
}

/* Decorative corner accent on interactive chapters */
.playbook-chapter--interactive::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    color-mix(in srgb, var(--part-accent) 8%, transparent) 50%
  );
  border-radius: 0 var(--radius-lg) 0 0;
  pointer-events: none;
}

/* ==========================================================================
   24. Stronger Sidebar Active States
   ========================================================================== */

/* Current chapter: solid gold bg, not just 2px border */
.playbook-nav-chapter.is-active {
  color: var(--charcoal-900);
  font-weight: 600;
  background-color: var(--gold-100);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Part progress indicator in sidebar header */
.playbook-nav-part.is-current .playbook-nav-part__header {
  background-color: var(--gold-50);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-weight: 700;
}

.playbook-nav-part.is-current .playbook-nav-part__number {
  color: var(--gold-500);
}

/* ==========================================================================
   25. Chapter Position Indicator
   ========================================================================== */

/* Injected by JS into each chapter header */
.playbook-chapter__position {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-2);
}

/* Progress dots */
.playbook-chapter__position-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.playbook-chapter__position-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gray-300);
}

.playbook-chapter__position-dot.is-current {
  background-color: var(--part-accent, var(--gold-500));
  box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.3);
}

/* ==========================================================================
   27. Quiz Component Upgrade
   ========================================================================== */

/* Bigger, more tactile quiz options */
.playbook-quiz__option {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-quiz__option:hover {
  border-color: var(--gold-400);
  background-color: rgba(212, 168, 75, 0.04);
  transform: translateX(4px);
}

.playbook-quiz__option.is-selected {
  border-color: var(--gold-500);
  background-color: var(--gold-50);
  box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.15);
}

/* Custom radio circle — larger, animated */
.playbook-quiz__option-radio {
  width: 24px;
  height: 24px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-quiz__option:hover .playbook-quiz__option-radio {
  border-color: var(--gold-400);
}

.playbook-quiz__option.is-selected .playbook-quiz__option-radio {
  border-color: var(--gold-500);
  border-width: 3px;
}

.playbook-quiz__option.is-selected .playbook-quiz__option-radio::after {
  width: 12px;
  height: 12px;
  background-color: var(--gold-500);
  animation: radio-pop 0.2s ease-out;
}

@keyframes radio-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Quiz results card — more celebratory */
.playbook-quiz__results {
  background: linear-gradient(
    135deg,
    var(--charcoal-800) 0%,
    var(--charcoal-900) 100%
  );
  border: 2px solid var(--gold-500);
  color: var(--white);
}

.playbook-quiz__results-title {
  color: var(--gray-300);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.playbook-quiz__results-type {
  color: var(--gold-400);
  font-size: var(--text-display-md);
}

.playbook-quiz__results-description {
  color: var(--gray-300);
}

/* ==========================================================================
   28. Scorecard Component Upgrade
   ========================================================================== */

/* Thicker gauge with labeled zones */
.playbook-scorecard__gauge {
  height: 16px;
  border-radius: var(--radius-full);
  position: relative;
  margin-bottom: var(--space-8);
}

/* Zone labels below gauge */
.playbook-scorecard__gauge-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Bigger marker with shadow */
.playbook-scorecard__gauge-marker {
  width: 6px;
  height: 24px;
  top: -4px;
  background-color: var(--charcoal-900);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Better slider with visible gold track fill */
.playbook-scorecard__criterion-slider {
  height: 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--gold-500) 0%,
    var(--gold-500) var(--slider-fill, 50%),
    var(--gray-200) var(--slider-fill, 50%),
    var(--gray-200) 100%
  );
}

/* Larger, more tactile thumb with ring */
.playbook-scorecard__criterion-slider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  background-color: var(--white);
  border: 3px solid var(--gold-500);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: grab;
}

.playbook-scorecard__criterion-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 12px rgba(212, 168, 75, 0.3);
}

.playbook-scorecard__criterion-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.playbook-scorecard__criterion-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background-color: var(--white);
  border: 3px solid var(--gold-500);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: grab;
}

/* Better score display */
.playbook-scorecard__score {
  font-size: var(--text-display-xl);
  line-height: 1;
}

/* Criterion rows: card-like with separation */
.playbook-scorecard__criterion {
  padding: var(--space-4);
  background-color: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
}

/* ==========================================================================
   29. Checklist Component Upgrade (Gold Theme)
   ========================================================================== */

/* Gold theme instead of green for checked items */
.playbook-checklist__item.is-checked {
  background-color: var(--gold-50);
  border-color: var(--gold-400);
}

.playbook-checklist__item.is-checked .playbook-checklist__checkbox {
  background-color: var(--gold-500);
  border-color: var(--gold-500);
}

/* Bigger checkbox for touch targets */
.playbook-checklist__checkbox {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.playbook-checklist__item:hover .playbook-checklist__checkbox {
  border-color: var(--gold-400);
}

/* Strikethrough with gold instead of plain gray */
.playbook-checklist__item.is-checked .playbook-checklist__text {
  text-decoration-color: var(--gold-400);
  color: var(--gray-600);
}

/* ==========================================================================
   30. Toast Notification Upgrade
   ========================================================================== */

/* Chapter-complete toast: gold celebration style */
.toast--chapter-complete {
  background: linear-gradient(
    135deg,
    var(--charcoal-800) 0%,
    var(--charcoal-900) 100%
  );
  border: 1px solid var(--gold-500);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.toast--chapter-complete .toast__check {
  color: var(--gold-400);
}

.toast--chapter-complete .toast__check svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   32. Unified Tool Container Framing
   ========================================================================== */

/* Shared premium framing for both calculator and tool containers */
.playbook-calc,
.playbook-tool {
  position: relative;
  border-top: 3px solid var(--gold-500);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 1px 4px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* Subtle inner glow at the top from the gold border */
.playbook-calc::before,
.playbook-tool::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    180deg,
    rgba(212, 168, 75, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the glow */
.playbook-calc > *,
.playbook-tool > * {
  position: relative;
  z-index: 1;
}

/* Unified title treatment */
.playbook-calc__title,
.playbook-tool__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold-400);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  letter-spacing: -0.01em;
}

/* Subtitle/description below title */
.playbook-tool__subtitle {
  margin-top: 0;
  padding-bottom: var(--space-4);
}

/* Increase internal padding */
.playbook-calc,
.playbook-tool {
  padding: var(--space-8);
}

@media (max-width: 639px) {
  .playbook-calc,
  .playbook-tool {
    padding: var(--space-5);
  }
}

/* ==========================================================================
   14. Print Styles
   ========================================================================== */

@media print {
  .nav--playbook,
  .playbook-sidebar,
  .playbook-sidebar-overlay,
  .playbook-breadcrumb,
  .playbook-minimal-footer,
  .toast-container,
  .playbook-calc,
  .playbook-tool,
  .playbook-email-gate__overlay,
  .playbook-email-banner {
    display: none !important;
  }

  .playbook-main {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  .playbook-part {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .playbook-chapter {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   12. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .playbook-sidebar,
  .playbook-sidebar-overlay,
  .playbook-scorecard__gauge-fill,
  .playbook-scorecard__gauge-marker,
  .toast,
  .playbook-part-complete,
  .playbook-checklist__item,
  .playbook-quiz__option,
  .playbook-calc__slider::-webkit-slider-thumb,
  .playbook-tool__slider-input::-webkit-slider-thumb {
    transition: none;
    animation: none;
  }

  .playbook-reveal {
    opacity: 1;
    transform: none;
  }

  .playbook-email-gate__overlay,
  .playbook-email-gate {
    animation: none;
  }

  .playbook-tool__card,
  .playbook-tool__resource-card,
  .playbook-tool__flag-btn,
  .playbook-tool__pf-option,
  .playbook-tool__risk-item,
  .playbook-tool__kanban-task,
  .playbook-tool__action-item,
  .playbook-tool__nav-btn {
    transition: none;
  }

  .playbook-breadcrumb {
    transition: none;
  }

  .playbook-part.is-visible {
    animation: none;
    opacity: 1;
  }

  .playbook-part.is-exiting {
    animation: none;
    display: none;
  }
}

/* ==========================================================================
   33. Mobile Optimization — 375px Target
   ========================================================================== */

/* --- P0: Calculator results grid → single column --- */
@media (max-width: 639px) {
  .playbook-calc__results--grid {
    grid-template-columns: 1fr;
  }
}

/* --- P0: Hub diagram → scale down, legible labels --- */
@media (max-width: 639px) {
  .viz-hub__diagram {
    width: 240px;
    height: 240px;
  }
  .viz-hub__center {
    width: 66px;
    height: 66px;
  }
  .viz-hub__node {
    width: 58px;
    height: 58px;
  }
  .viz-hub__node-label {
    font-size: 10px;
  }
}

/* --- P0: Reduce vertical whitespace --- */
@media (max-width: 639px) {
  .playbook-page {
    --chapter-spacing: 3.5rem;
  }
  .playbook-part {
    padding: var(--space-8) var(--space-4);
  }
  .playbook-part__header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
  }
}

/* --- P1: Prose → 16px / 1.7 for mobile --- */
@media (max-width: 639px) {
  .playbook-chapter__content {
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* --- P1: Sub-11px fonts → 12px minimum --- */
@media (max-width: 639px) {
  .playbook-tool__timeline-bar-label {
    font-size: var(--text-xs);
  }
  .playbook-tool__resource-badge {
    font-size: var(--text-xs);
  }
}

/* --- P1: Legend flex wrap defense --- */
@media (max-width: 639px) {
  .viz-radial__legend,
  .viz-timeline__legend {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* --- P2: Pull quote bleed aligned with reduced padding --- */
@media (max-width: 639px) {
  .playbook-pull-quote {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding: var(--space-6) var(--space-4);
  }
  .playbook-pull-quote__text {
    font-size: var(--text-xl);
  }
}

/* --- P2: Hero padding → 40px vertical --- */
@media (max-width: 639px) {
  .playbook-hero {
    padding: var(--space-10) var(--space-4);
  }
}

/* --- P2: Toast → constrain within viewport --- */
@media (max-width: 639px) {
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }
  .toast {
    max-width: none;
  }
}