/**
 * 100x Life Planning System - Platform Module Styles
 * Sliders, scenario grid, time allocation percentages
 */

/* ===== Container ===== */
.platform-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.platform-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.platform-title h1 {
  font-family: var(--font-heading);
  font-size: calc(2rem + var(--text-bump));
  color: var(--navy-primary);
  margin: 0;
}

.platform-title p {
  color: var(--text-secondary);
  margin: 0;
}

/* ===== Mission Card ===== */
.platform-mission-card {
  background: var(--teal-light);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--teal-accent);
}

.platform-mission-card.empty {
  background: var(--bg-tertiary);
  border-left-color: var(--text-muted);
}

.platform-mission-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--navy-primary);
  margin-bottom: 0.5rem;
}

.platform-mission-header i {
  color: var(--teal-ink);
}

.platform-mission-card.empty .platform-mission-header i {
  color: var(--text-muted);
}

.platform-mission-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ===== Sections ===== */
.platform-section {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-light);
}

.platform-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.platform-section-header h2 {
  font-family: var(--font-heading);
  font-size: calc(1.25rem + var(--text-bump));
  color: var(--navy-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.platform-section-header h2 i {
  color: var(--teal-ink);
}

.platform-section-description {
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
  font-size: calc(0.9rem + var(--text-bump));
}

.platform-empty-state {
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: 8px;
}

/* The model chosen in guide step 27, above the characteristics statement. */
.platform-chosen-model {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  color: var(--text-secondary);
}

.platform-chosen-model .fa-sharp {
  color: var(--teal-ink);
}

.platform-chosen-model strong {
  color: var(--navy-primary);
  font-weight: 500;
}

.platform-characteristics-content {
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.platform-characteristics-content p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-dark);
}

/* ===== Assessment Sliders (entry-area grammar, 2026-08-23 redesign) =====
   Each assessment is a serif-titled section on the pane surface; siblings
   separate on the shared .entry-block hairline, so the flex gap and the old
   per-item border are gone. */
.platform-assessments {
  display: flex;
  flex-direction: column;
}

/* The assessment pane's section flattens: the pane itself is the surface,
   the assessments articulate it (the artboard has no inner card). The
   [data-theme] variants out-specify the generic dark .platform-section
   re-tint, in both themes' markup. */
.platform-section--entry,
[data-theme="dark"] .platform-section--entry,
[data-theme="light"] .platform-section--entry {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.platform-detail-head {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1.9rem;
}

.platform-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12px * var(--text-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.platform-eyebrow i {
  color: var(--teal-ink);
  margin-right: 0.45em;
}

.platform-detail-head .platform-section-description {
  margin: 0.6rem 0 0;
  font-size: var(--size-lead);
  line-height: var(--leading-prose);
  color: var(--text-secondary);
  max-width: 46em;
  text-wrap: pretty;
}

.platform-assessment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}

.platform-assessment-header h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--size-h3);
  line-height: var(--leading-tight);
  color: var(--navy-primary);
  margin: 0;
}

.platform-assessment-value {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--size-h4);
  font-variant-numeric: tabular-nums;
  color: var(--teal-ink);
}

/* Honest unanswered state: a slider the member never touched shows a muted
   "Not set" / em dash instead of a fabricated value. */
.platform-assessment-value.is-unanswered,
.time-slider-value.is-unanswered,
.time-group-total.is-unanswered {
  color: var(--text-secondary);
  font-weight: 400;
  font-style: italic;
}

.platform-assessment-value.is-unanswered {
  font-size: calc(0.95rem + var(--text-bump));
}

.platform-assessment-question {
  color: var(--text-dark);
  font-size: var(--size-body);
  line-height: var(--leading-prose);
  max-width: 44em;
  margin: 0.4rem 0 1.4rem;
}

.platform-slider-container {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

/* The poles, named in the uppercase UI voice. */
.platform-slider-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--size-ui-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  min-width: 80px;
  line-height: 1.3;
}

.platform-slider-label.left {
  text-align: right;
}

.platform-slider-label.right {
  text-align: left;
}

/* A hairline track with a solid teal thumb; the halo is the shared focus
   ring's colour breathing out on hover. */
.platform-slider {
  flex: 1;
  height: 4px;
  border-radius: 0;
  background: var(--border-light);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.platform-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-fill);
  cursor: grab;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--motion-quick) var(--ease-smooth);
}

/* Hover-capable pointers only (spec §6): a tap must not stick this. */
@media (hover: hover) {
  .platform-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--teal-accent) 15%, transparent);
  }
}

.platform-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-fill);
  cursor: grab;
  border: none;
}

.platform-assessment-followup {
  margin-top: 1.6rem;
}

/* ===== Time Allocation - Linked Sliders ===== */
.platform-time-allocation {
  margin-bottom: 1rem;
}

.time-allocation-linked {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.time-allocation-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.time-allocation-hint i {
  color: var(--teal-ink);
}

.time-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Individual time group (Current or Ideal) */
.time-group {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 1.25rem;
}

.time-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
}

.time-group-label {
  font-size: calc(0.9rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary);
}

.time-group-total {
  font-size: calc(1rem + var(--text-bump));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.time-group-total.current {
  background: rgba(26, 43, 74, 0.1);
  color: var(--navy-primary);
}

.time-group-total.ideal {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.time-group-total.warning {
  background: #fef2f2;
  color: #dc2626;
}

/* Unanswered totals show the honest muted em dash (the is-unanswered rule
   above), not the colorway pill — .current/.ideal sit later in the file, so
   without this they won their background back and the two dashes rendered as
   two mismatched circled glyphs that read as collapse buttons (2026-08-13
   polish audit). The pills return the moment a group is answered. */
.time-group-total.current.is-unanswered,
.time-group-total.ideal.is-unanswered {
  background: transparent;
  color: var(--text-secondary);
}

/* Sliders list within a group */
.time-sliders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Individual slider item */
.time-slider-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.time-slider-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-slider-name {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
}

.time-slider-value {
  font-size: calc(0.9rem + var(--text-bump));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.time-slider-value.current {
  color: var(--navy-primary);
}

.time-slider-value.ideal {
  color: var(--teal-ink);
}

/* Slider wrapper with fill bar */
.time-slider-wrapper {
  position: relative;
  height: 32px;
}

.time-slider-fill-bg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 8px;
  transform: translateY(-50%);
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none; /* Don't intercept clicks */
}

.time-slider-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--motion-quick) var(--ease-out);
  pointer-events: none; /* Don't intercept clicks */
}

.time-slider-fill.current {
  background: var(--navy-primary);
}

.time-slider-fill.ideal {
  background: var(--teal-accent);
}

/* Range slider input - must be on top */
.time-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  z-index: 10; /* Ensure slider is on top */
}

/* Hide default track */
.time-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  cursor: pointer;
}

.time-slider::-moz-range-track {
  height: 8px;
  background: transparent;
  cursor: pointer;
}

/* Slider thumb - WebKit */
.time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
  margin-top: -6px;
}

.time-slider.current::-webkit-slider-thumb {
  background: var(--navy-primary);
}

.time-slider.ideal::-webkit-slider-thumb {
  background: var(--teal-accent);
}

/* Hover-capable pointers only (spec §6): a tap must not stick this. */
@media (hover: hover) {
  .time-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
  }
}

.time-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

/* Slider thumb - Firefox */
.time-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
}

.time-slider.current::-moz-range-thumb {
  background: var(--navy-primary);
}

.time-slider.ideal::-moz-range-thumb {
  background: var(--teal-accent);
}

/* Hover-capable pointers only (spec §6): a tap must not stick this. */
@media (hover: hover) {
  .time-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
  }
}

.platform-time-reflection {
  margin-top: 1.5rem;
}

.platform-time-reflection label {
  display: block;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.platform-time-reflection textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: calc(0.9rem + var(--text-bump));
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-dark);
}

/* ===== Scenarios ===== */

/* Scenario section header */
.scenario-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* View toggle */
.scenario-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border-light);
}

.scenario-view-btn {
  padding: 0.4rem 0.75rem;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--motion-quick) var(--ease-out);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.scenario-view-btn:hover {
  color: var(--text-dark);
}

.scenario-view-btn.active {
  background: var(--bg-primary);
  color: var(--navy-primary);
  box-shadow: var(--shadow-sm);
}

/* Empty state */
.platform-empty-scenarios {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px dashed var(--border-light);
}

.platform-empty-scenarios i {
  font-size: calc(2.5rem + var(--text-bump));
  margin-bottom: 0.75rem;
  display: block;
  color: var(--teal-ink);
  opacity: 0.6;
}

.platform-empty-scenarios p {
  margin: 0;
  font-size: calc(0.95rem + var(--text-bump));
}

/* Scenarios container */
.scenarios-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Color palette for scenario accents */
.scenario-card[data-color="blue"] { --scenario-accent: #3b82f6; --scenario-bg: #eff6ff; }
.scenario-card[data-color="green"] { --scenario-accent: #10b981; --scenario-bg: #ecfdf5; }
.scenario-card[data-color="purple"] { --scenario-accent: #8b5cf6; --scenario-bg: #f5f3ff; }
.scenario-card[data-color="orange"] { --scenario-accent: #f59e0b; --scenario-bg: #fffbeb; }
.scenario-card[data-color="pink"] { --scenario-accent: #ec4899; --scenario-bg: #fdf2f8; }
.scenario-card[data-color="teal"] { --scenario-accent: #14b8a6; --scenario-bg: #f0fdfa; }

/* Scenario card - collapsed state */
.scenario-card {
  --scenario-accent: var(--teal-accent);
  --scenario-bg: var(--teal-light);
  background: var(--bg-primary);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all var(--motion-quick) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.scenario-card:hover {
  box-shadow: var(--shadow-md);
}

/* Accent bar on left */
.scenario-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--scenario-accent);
  border-radius: 12px 0 0 12px;
}

.scenario-card {
  position: relative;
  padding-left: 4px;
}

/* Card header - always visible */
.scenario-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

.scenario-header:hover {
  background: var(--bg-secondary);
}

.scenario-expand-icon {
  color: var(--text-muted);
  font-size: calc(1rem + var(--text-bump));
  transition: transform var(--motion-quick) var(--ease-out);
  flex-shrink: 0;
}

.scenario-card.expanded .scenario-expand-icon {
  transform: rotate(90deg);
}

.scenario-title-section {
  flex: 1;
  min-width: 0;
}

.scenario-title-input {
  font-size: calc(1.1rem + var(--text-bump));
  font-weight: 600;
  color: var(--navy-primary);
  border: none;
  background: transparent;
  width: 100%;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.scenario-title-input:focus {
  cursor: text;
}

.scenario-title-input::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.scenario-summary {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scenario-card.expanded .scenario-summary {
  display: none;
}

/* Status badge */
.scenario-status {
  font-size: calc(0.7rem + var(--text-bump));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.scenario-status[data-status="exploring"] {
  background: #fef3c7;
  color: #92400e;
}

.scenario-status[data-status="developing"] {
  background: #dbeafe;
  color: #1e40af;
}

.scenario-status[data-status="ready"] {
  background: #d1fae5;
  color: #065f46;
}

/* Header actions */
.scenario-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity var(--motion-quick) var(--ease-out);
}

.scenario-header:hover .scenario-actions {
  opacity: 1;
}

.scenario-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--motion-quick) var(--ease-out);
}

.scenario-action-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-dark);
}

.scenario-action-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Card content - expandable.
   grid-template-rows 0fr → 1fr, not a max-height guess (2026-08-17). The
   1000px ceiling both clipped a long scenario and spent most of the duration
   travelling through empty space below a short one, which is why this reveal
   read as mistimed either way. The grid animates to the content's real
   height. Padding moves on the inner element so it collapses with the row. */
.scenario-content {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  background: var(--bg-secondary);
  transition: grid-template-rows var(--motion-enter) var(--ease-smooth),
              border-color var(--motion-enter) var(--ease-smooth);
}

.scenario-content-inner {
  overflow: hidden;
  padding: 0 1.25rem;
  transition: padding var(--motion-enter) var(--ease-smooth);
}

.scenario-card.expanded .scenario-content {
  grid-template-rows: 1fr;
  border-top-color: var(--border-light);
}

.scenario-card.expanded .scenario-content-inner {
  padding: 0 1.25rem 1.25rem 1.25rem;
}

.scenario-field {
  margin-top: 1rem;
}

.scenario-field:first-child {
  margin-top: 1rem;
}

.scenario-field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.8rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.scenario-field-label i {
  color: var(--scenario-accent);
  font-size: calc(0.9rem + var(--text-bump));
}

.scenario-field-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: inherit;
  font-size: calc(0.9rem + var(--text-bump));
  line-height: 1.5;
  resize: none;
  background: var(--bg-primary);
  color: var(--text-dark);
  transition: border-color var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
}

.scenario-field-input:focus {
  border-color: var(--scenario-accent);
  box-shadow: 0 0 0 3px var(--scenario-bg);
}

.scenario-field-input::placeholder {
  color: var(--text-muted);
}

/* Status selector in expanded view */
.scenario-status-selector {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.scenario-status-option {
  flex: 1;
  padding: 0.5rem;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-primary);
  cursor: pointer;
  text-align: center;
  transition: all var(--motion-quick) var(--ease-out);
}

.scenario-status-option:hover {
  border-color: var(--text-muted);
}

.scenario-status-option.selected {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.scenario-status-option span {
  display: block;
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-secondary);
}

.scenario-status-option i {
  font-size: calc(1.25rem + var(--text-bump));
  margin-bottom: 0.25rem;
  color: var(--text-muted);
}

.scenario-status-option.selected i {
  color: var(--teal-ink);
}

/* ===== Compare Mode (Table View) ===== */
.scenarios-compare {
  overflow-x: auto;
  background: var(--bg-primary);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.scenarios-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

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

.scenarios-compare-table th {
  background: var(--bg-secondary);
  font-size: calc(0.8rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}

.scenarios-compare-table th:first-child {
  width: 180px;
  border-right: 1px solid var(--border-light);
}

.scenarios-compare-table td:first-child {
  font-weight: 600;
  color: var(--navy-primary);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-light);
}

.scenarios-compare-table tr:last-child td {
  border-bottom: none;
}

.compare-scenario-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-scenario-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.compare-cell-content {
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-dark);
  line-height: 1.5;
}

.compare-cell-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: calc(0.85rem + var(--text-bump));
}

/* Excitement rating in compare view */
.compare-excitement {
  display: flex;
  gap: 0.25rem;
}

.compare-excitement i {
  color: var(--border-light);
  font-size: calc(1rem + var(--text-bump));
}

.compare-excitement i.filled {
  color: #f59e0b;
}

/* ===== Interview Mode ===== */
.platform-interview-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.platform-interview-container .interview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.platform-interview-container .interview-header .back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--motion-quick) var(--ease-out);
}

.platform-interview-container .interview-header .back-btn:hover {
  background: var(--teal-light);
  border-color: var(--teal-accent);
  color: var(--teal-ink);
}

.platform-interview-container .interview-title h2 {
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: calc(1.5rem + var(--text-bump));
  color: var(--navy-primary);
  margin: 0;
}

.platform-interview-container .interview-title p {
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-muted);
  margin: 0.25rem 0 0 0;
}

.platform-interview-container .interview-actions {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

/* Statement Editor for Platform (characteristics) */
.platform-interview-container .statement-editor {
  background: var(--bg-primary);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: var(--shadow-md);
}

.platform-interview-container .statement-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.platform-interview-container .statement-editor-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: calc(1.1rem + var(--text-bump));
  color: var(--navy-primary);
  font-weight: 600;
}

.platform-interview-container .statement-editor-title i {
  color: var(--teal-ink);
}

.platform-interview-container .statement-editor-status {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  padding: 0.35rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.platform-interview-container .statement-editor textarea {
  width: 100%;
  min-height: 150px;
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: calc(1rem + var(--text-bump));
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-secondary);
  resize: vertical;
  transition: border-color var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out);
}

.platform-interview-container .statement-editor textarea:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
  background: var(--bg-primary);
}

.platform-interview-container .statement-editor textarea::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.platform-interview-container .statement-editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .platform-container {
    padding: 0.75rem;
  }

  .platform-slider-container {
    flex-direction: column;
    gap: 0.5rem;
  }

  .platform-slider-label {
    min-width: auto;
  }

  .platform-slider-label.left,
  .platform-slider-label.right {
    text-align: center;
  }

  /* Time allocation linked sliders responsive */
  .time-groups {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .time-group {
    padding: 1rem;
  }

  .time-group-label {
    font-size: calc(0.85rem + var(--text-bump));
  }

  .time-slider-name {
    font-size: calc(0.8rem + var(--text-bump));
  }

  /* Scenario cards responsive */
  .scenario-header {
    flex-wrap: wrap;
  }

  .scenario-title-section {
    order: 2;
    width: 100%;
    margin-top: 0.5rem;
  }

  .scenario-expand-icon {
    order: 1;
  }

  .scenario-status {
    order: 3;
    margin-left: auto;
  }

  .scenario-actions {
    order: 4;
    opacity: 1;
  }

  .scenario-status-selector {
    flex-direction: column;
  }

  /* Compare table responsive */
  .scenarios-compare {
    margin: 0 -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .scenarios-compare-table {
    font-size: calc(0.85rem + var(--text-bump));
  }

  .scenarios-compare-table th,
  .scenarios-compare-table td {
    padding: 0.75rem;
  }
}

/* ===== Dark Theme ===== */
[data-theme="dark"] .platform-title h1 {
  color: var(--text-dark);
}

[data-theme="dark"] .platform-section {
  background: var(--bg-secondary);
  border-color: var(--border-medium);
}

[data-theme="dark"] .platform-assessment-header h3 {
  color: var(--text-dark);
}

[data-theme="dark"] .scenario-card {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .platform-characteristics-content {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .platform-mission-card {
  background: rgba(74, 155, 181, 0.1);
}

/* Scenario card color backgrounds — dark variants */
[data-theme="dark"] .scenario-card[data-color="blue"] { --scenario-bg: #1a2a3a; }
[data-theme="dark"] .scenario-card[data-color="green"] { --scenario-bg: #1a2a1f; }
[data-theme="dark"] .scenario-card[data-color="purple"] { --scenario-bg: #231a30; }
[data-theme="dark"] .scenario-card[data-color="orange"] { --scenario-bg: #2a2515; }
[data-theme="dark"] .scenario-card[data-color="pink"] { --scenario-bg: #2a1a25; }
[data-theme="dark"] .scenario-card[data-color="teal"] { --scenario-bg: #1a2a2a; }

/* Status badges — dark variants */
[data-theme="dark"] .scenario-status[data-status="exploring"] {
  background: var(--gold-light);
  color: var(--gold);
}

[data-theme="dark"] .scenario-status[data-status="developing"] {
  background: #1a2a3a;
  color: #93c5fd;
}

[data-theme="dark"] .scenario-status[data-status="ready"] {
  background: #1a2a1f;
  color: #6ee7b7;
}

/* Warning/error states — dark variants */
[data-theme="dark"] .time-group-total.warning {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
}

[data-theme="dark"] .scenario-action-btn.delete:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
}

/* ===== Scenario Modal (Two-Step Flow) ===== */
.scenario-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn var(--motion-enter) var(--ease-out);
}

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

.scenario-modal {
  width: 100%;
  max-width: 600px;
  max-height: calc(100dvh - 2rem);
  background: var(--bg-primary, #ffffff);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp var(--motion-enter) var(--ease-out);
}

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

.scenario-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-medium, #2d4a6f) 100%);
}

.scenario-modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.scenario-modal-title i {
  font-size: calc(1.5rem + var(--text-bump));
  color: var(--gold-accent, #d4af37);
}

.scenario-modal-title h3 {
  font-size: calc(1.25rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-light, #ffffff);
  margin: 0;
}

.scenario-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-light, #ffffff);
  cursor: pointer;
  transition: all var(--motion-quick) var(--ease-out);
}

.scenario-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-light, #ffffff);
}

.scenario-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.scenario-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--bg-secondary, #f8f9fa);
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.scenario-modal-footer:empty {
  display: none;
}

/* Ideas Grid */
.scenario-ideas-intro {
  color: var(--text-secondary);
  margin: 0 0 1.25rem 0;
  font-size: calc(0.95rem + var(--text-bump));
}

.scenario-ideas-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.scenario-idea-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1rem;
  background: linear-gradient(135deg, var(--bg-primary, #ffffff) 0%, var(--bg-secondary, #f8f9fa) 100%);
  border: 2px solid var(--border-light, #e2e8f0);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--motion-quick) var(--ease-out);
  font-family: inherit;
  font-size: calc(0.95rem + var(--text-bump));
  color: var(--text-dark);
  line-height: 1.5;
  width: 100%;
}

.scenario-idea-card:hover {
  border-color: var(--teal-accent);
  background: linear-gradient(135deg, var(--teal-light, #e8f4f8) 0%, var(--bg-primary, #ffffff) 100%);
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.scenario-idea-card i {
  color: var(--teal-ink);
  font-size: calc(1.5rem + var(--text-bump));
  flex-shrink: 0;
  margin-top: 0;
}

.scenario-idea-card span {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Custom Idea Input */
.scenario-ideas-custom {
  padding-top: 1rem;
  border-top: 1px solid var(--border-light, #e2e8f0);
}

.scenario-ideas-custom label {
  display: block;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.custom-idea-input {
  display: flex;
  gap: 0.5rem;
}

.custom-idea-input input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  font-family: inherit;
  font-size: calc(0.9rem + var(--text-bump));
  background: var(--bg-primary, #ffffff);
  color: var(--text-dark);
}

.custom-idea-input input:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

/* Loading State */
.scenario-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.scenario-loading i {
  font-size: calc(2.5rem + var(--text-bump));
  color: var(--teal-ink);
  margin-bottom: 1rem;
}

.scenario-loading p {
  margin: 0;
  font-size: calc(0.95rem + var(--text-bump));
}

.scenario-loading-idea {
  margin-top: 0.75rem !important;
  color: var(--navy-primary);
  font-style: italic;
  font-weight: 500;
}

/* Error State */
.scenario-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.scenario-error i {
  font-size: calc(2.5rem + var(--text-bump));
  color: #dc2626;
  margin-bottom: 1rem;
}

.scenario-error p {
  margin: 0;
  color: var(--text-secondary);
}

/* Preview Fields (reused in preview step) */
.scenario-preview-field {
  margin-bottom: 1.25rem;
}

.scenario-preview-field:last-child {
  margin-bottom: 0;
}

.scenario-preview-field label {
  display: block;
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  color: var(--teal-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.scenario-preview-content {
  background: var(--bg-secondary, #f8f9fa);
  border-radius: 8px;
  padding: 1rem;
  color: var(--text-dark);
  line-height: 1.6;
  font-size: calc(0.95rem + var(--text-bump));
  white-space: pre-wrap;
}

.scenario-preview-content em {
  color: var(--text-muted);
}

/* Spin animation for loading state */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
  .scenario-modal-overlay {
    padding: 0;
  }

  .scenario-modal {
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .scenario-ideas-grid {
    grid-template-columns: 1fr;
  }

  .scenario-modal-footer {
    flex-direction: column;
  }

  .scenario-modal-footer .btn {
    width: 100%;
  }

  .custom-idea-input {
    flex-direction: column;
  }

  .custom-idea-input .btn {
    width: 100%;
  }
}

/* Dark theme */
[data-theme="dark"] .scenario-modal {
  background: var(--bg-secondary);
}

[data-theme="dark"] .scenario-modal-header {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
}

[data-theme="dark"] .scenario-modal-title h3 {
  color: var(--text-dark);
}

[data-theme="dark"] .scenario-idea-card {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-light);
}

[data-theme="dark"] .scenario-idea-card:hover {
  background: rgba(74, 155, 181, 0.15);
}

[data-theme="dark"] .custom-idea-input input {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-light);
}

[data-theme="dark"] .scenario-preview-content {
  background: var(--bg-tertiary);
  color: var(--text-light);
}

[data-theme="dark"] .scenario-modal-footer {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
}

[data-theme="dark"] .scenario-loading-idea {
  color: var(--text-dark);
}

/* ── Low-Cost Probe worksheet (Member Guide pp. 97-100) ─────────────────────
   Parameters sheet + post-probe debrief, rendered inside the module's
   scenario card and the design_probes guide step. All classes .probe-. */

.probe-worksheet {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.probe-disclosure {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.probe-disclosure-summary {
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-primary, #1a2b4a);
}

.probe-disclosure-summary i {
  color: var(--teal-accent, #4a9bb5);
  margin-right: 0.35rem;
}

.probe-fields {
  padding: 0.25rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.probe-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}

.probe-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.probe-field-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  color: #1e293b;
}

/* Focus keeps the app's base :focus-visible ring (focus-ring tokens);
   the border echo is just a resting-state accent. */
.probe-field-input:focus {
  border-color: var(--teal-accent, #4a9bb5);
}

.probe-scale-note {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.probe-question {
  margin: 0;
}

.probe-question-text {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  color: #1e293b;
}

.probe-slider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.probe-range {
  flex: 1;
  accent-color: var(--teal-accent, #4a9bb5);
}

.probe-slider-num {
  font-size: 0.78rem;
  color: #64748b;
  min-width: 6.5rem;
  text-align: right;
  white-space: nowrap;
}

.probe-debrief-locked {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.probe-debrief-locked i {
  margin-right: 0.25rem;
}

.probe-save-status {
  align-self: flex-end;
  min-height: 1rem;
  font-size: 0.75rem;
}

[data-theme="dark"] .probe-disclosure {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
}

[data-theme="dark"] .probe-disclosure-summary {
  color: var(--text-dark);
}

[data-theme="dark"] .probe-field-label,
[data-theme="dark"] .probe-scale-note,
[data-theme="dark"] .probe-slider-num,
[data-theme="dark"] .probe-debrief-locked {
  color: var(--text-light);
}

[data-theme="dark"] .probe-question-text {
  color: var(--text-dark);
}

[data-theme="dark"] .probe-field-input {
  background: var(--bg-tertiary);
  border-color: var(--border-medium);
  color: var(--text-light);
}

/* The probe worksheet makes an expanded card's content taller than the
   original 1000px expand clip, which cut the worksheet off mid-scroll;
   give the max-height transition enough headroom for both disclosures open. */
.scenario-card.expanded .scenario-content {
  max-height: 3600px;
}

/* ===========================================
   Master-detail shell (the Library shell's grammar in platform-shell- names:
   one elevated viewport-fit card split into a master rail and a detail pane,
   each owning its own scroll. The rail sits a tonal step below the pane so
   the selected row's lift off its 3px teal edge reads. Rows are list
   grammar (one line, may ellipsize); the pane holds the selection whole and
   keeps the old page's .platform-section markup unchanged inside it.

   Below 900px it collapses list-first: the rail fills the screen and
   .is-detail-open (server-set for explicit ?entry= links, client-set on row
   taps) pushes the pane full-screen with a back affordance.)
   =========================================== */

.platform-shell {
  display: grid;
  grid-template-columns: minmax(300px, 348px) minmax(0, 1fr);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  /* The card fits the viewport under the sticky chrome (--chrome-height is
     published live by chrome_height_controller; the fallback covers the
     pre-JS first paint) so both panes scroll internally, app-like. */
  height: calc(100dvh - var(--chrome-height, 140px) - 3.25rem);
  min-height: 32rem;
  overflow: hidden;
  margin-block: 0.25rem 1.5rem;
}

/* Entrance: the hub's motion grammar, once per session. */
.platform-shell[data-entrance="play"] > * {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
}

.platform-shell[data-entrance="play"] > :nth-child(1) { animation-delay: 0ms; }
.platform-shell[data-entrance="play"] > :nth-child(2) { animation-delay: 60ms; }

/* ── The master rail ─────────────────────────────────────────────────────── */

.platform-shell-master {
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
  /* A quiet tonal step below the detail pane, so the selected row's lift
     to the card surface reads. */
  background: var(--surface-page);
}

.platform-shell-masthead {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 1.05rem;
  border-bottom: 1px solid var(--border-light);
}

/* The AI chat launcher, quiet and full-width in the masthead. */
.platform-shell-chat-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(13px * var(--text-scale));
  color: var(--teal-ink);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  .platform-shell-chat-launch:hover {
    background: var(--teal-light);
  }
}

/* ── Sections: quiet labels over row groups ──────────────────────────────── */

.platform-shell-index {
  padding-bottom: 1.25rem;
}

.platform-shell-rail-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.25rem 0.45rem;
}

.platform-shell-rail-section-head h2 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

.platform-shell-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.platform-shell-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem 0.65rem 0.95rem;
  min-height: var(--tap);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out),
              border-color var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  a.platform-shell-row:hover:not([aria-current]) {
    background: color-mix(in srgb, var(--surface-card) 65%, transparent);
  }
}

/* The selected row lifts to the detail pane's surface off a teal edge. */
.platform-shell-row[aria-current] {
  background: var(--surface-card);
  border-left-color: var(--teal-accent);
}

.platform-shell-row-body {
  min-width: 0; /* let titles ellipsize instead of widening the rail */
}

.platform-shell-row-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.35;
  color: var(--navy-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One line, may ellipsize — list grammar; the pane never truncates. */
.platform-shell-row-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: calc(12.5px * var(--text-scale));
  line-height: 1.5;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The quiet done mark on a written section. */
.platform-shell-row-done {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(11.5px * var(--text-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  white-space: nowrap;
}

/* The scenario count badge. */
.platform-shell-row-count {
  font-family: var(--font-body);
  font-size: calc(12px * var(--text-scale));
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── The detail pane ─────────────────────────────────────────────────────── */

.platform-shell-detail {
  overflow-y: auto;
  background: var(--surface-card);
}

turbo-frame#platform_detail {
  display: block;
  min-height: 100%;
}

.platform-shell-pane {
  min-height: 100%;
}

.platform-shell-article {
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.25rem, 4vw, 2.5rem) 4rem;
}

/* The old page's section cards sat on the page surface; inside the pane they
   sit on the card surface, so let the pane's article provide the frame and
   keep the section's own border for grouping. */
.platform-shell-article .platform-section {
  margin-bottom: 0;
}

/* Member text in this pane's editors keeps the standard editor typography
   (var(--font-body)). Saved answers can arrive wrapped in Trix heading blocks
   (synthesized/imported statements), and the global heading rule (base.css
   h1..h6 -> var(--font-heading)) was rendering them as serif inside the
   editor. Scoped to the pane's editors only. */
.platform-shell-pane trix-editor.trix-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-body);
  font-size: inherit;
  line-height: inherit;
}

/* ── The back affordance: narrow screens only ────────────────────────────── */

.platform-shell-back {
  display: none;
  align-items: center;
  gap: 0.1rem;
  min-height: var(--tap);
  padding: 0.9rem clamp(1.25rem, 5vw, 2rem) 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  text-decoration: none;
}

.platform-shell-back .fa-sharp {
  font-size: 1.35em;
}

/* ── Narrow: list-first, detail pushes full-screen ───────────────────────── */

@media (max-width: 899.98px) {
  .platform-shell {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .platform-shell-master {
    border-right: 0;
    overflow: visible;
  }

  .platform-shell-detail {
    display: none;
    overflow: visible;
  }

  .platform-shell.is-detail-open .platform-shell-master {
    display: none;
  }

  .platform-shell.is-detail-open .platform-shell-detail {
    display: block;
  }

  .platform-shell-back {
    display: inline-flex;
  }

  .platform-shell-article {
    padding-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-shell[data-entrance="play"] > * {
    animation: none;
  }
}