/* Booth Buddy components. Tokens live in tokens.css. */

.display {
  margin: 0;
  color: var(--iw-navy);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--line-display);
  letter-spacing: -0.02em;
  max-width: 20rem;
}

.kicker,
.component-label {
  margin: 0 0 var(--space-2);
  color: var(--iw-violet);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.small {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-small);
  line-height: var(--line-small);
}

.measure { max-width: var(--measure); }

.lede {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.5;
}

.page-header { margin: 0 0 var(--space-6); }

.section-header { margin: var(--space-7) 0 var(--space-4); }

.section-header h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h2);
  line-height: var(--line-h2);
}

.section-header p {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-secondary);
}

.divider {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-6) 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion), color var(--motion), border-color var(--motion);
}

.button-primary {
  background: var(--iw-purple);
  color: var(--text-on-brand);
}

.button-primary:hover { background: var(--iw-navy); color: var(--text-on-brand); }

.button-secondary {
  background: var(--surface-white);
  border-color: var(--border-soft);
  color: var(--iw-purple);
}

.button-secondary:hover { background: var(--surface-purple); color: var(--iw-purple); }

.button-text {
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--iw-violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button-icon {
  width: 44px;
  padding: 0;
  background: var(--surface-white);
  border-color: var(--border-soft);
  color: var(--iw-purple);
}

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

.card,
.callout {
  padding: var(--space-4);
  background: var(--surface-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.card h3 { margin: 0 0 var(--space-2); font-size: var(--text-h3); line-height: var(--line-h3); }

.card p { margin: 0; max-width: var(--measure); }

.empty-state {
  padding: var(--space-5) 0;
  max-width: 36ch;
}

.empty-state h2 { margin: 0 0 var(--space-2); }

.empty-state p { margin: 0 0 var(--space-4); color: var(--text-secondary); }

.role-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-white);
  color: var(--role-ink, var(--text-primary));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.role-swatch {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--role-swatch, currentColor);
}

.role-all-team { --role-ink: var(--role-all-ink); --role-swatch: var(--role-all); }
.role-sales { --role-ink: var(--role-sales-ink); --role-swatch: var(--role-sales); }
.role-operations { --role-ink: var(--role-operations-ink); --role-swatch: var(--role-operations); }
.role-presales { --role-ink: var(--role-presales-ink); --role-swatch: var(--role-presales); }
.role-lead { --role-ink: var(--role-lead-ink); --role-swatch: var(--role-lead); }

.illustration { margin: var(--space-5) 0; }

.illustration img,
.illustration-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.illustration-hero { margin: 0 0 var(--space-6); }

.illustration-hero img { border-radius: 32px; }

.component { margin: 0 0 var(--rhythm-unit); }

.component .component-statement,
.component-statement {
  margin: 0 0 var(--rhythm-heading);
  color: var(--iw-navy);
  font-size: var(--type-section);
  font-weight: 700;
  line-height: var(--line-section);
  letter-spacing: -0.02em;
}

.prose .component-label {
  margin: 0 0 var(--rhythm-label);
  font-size: var(--type-label);
  font-weight: 700;
  line-height: var(--line-label);
}

.prose .component .component-statement {
  margin: 0 0 var(--rhythm-heading);
  color: var(--iw-navy);
  font-size: var(--type-section);
  font-weight: 700;
  line-height: var(--line-section);
  letter-spacing: -0.02em;
}

.prose .component.pro-tip .component-statement,
.prose .component.trap .component-statement,
.prose .component.warning .component-statement {
  font-size: var(--type-subhead);
  font-weight: 600;
  line-height: var(--line-subhead);
  letter-spacing: -0.01em;
}

.prose .component.remember .component-statement,
.prose .component.example .component-statement {
  font-size: var(--type-reading);
  font-weight: 600;
  line-height: var(--line-reading);
  letter-spacing: 0;
}

.component-body { max-width: var(--measure); }

.component-body > :first-child { margin-top: 0; }

.component-body p { margin: 0 0 var(--rhythm-paragraph); }

.component-body ul,
.component-body ol { margin: 0 0 var(--rhythm-paragraph); padding-left: 1.25rem; }

.component-body li { margin: 0 0 var(--rhythm-item); }

.component-body li:last-child { margin-bottom: 0; }

.component-body p + ul,
.component-body p + ol { margin-top: calc(var(--rhythm-list) - var(--rhythm-paragraph)); }

.component.golden-rule {
  margin: var(--space-7) 0;
  padding: 0;
}

.prose .component.golden-rule > .component-label { color: var(--iw-purple); }

.component.golden-rule .component-statement {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--line-display);
  letter-spacing: -0.02em;
  max-width: 22rem;
}

.component.mission {
  padding: 0;
}

.component.pro-tip,
.component.remember,
.component.trap,
.component.warning,
.component.boss-level {
  margin-bottom: var(--rhythm-paragraph);
  padding: 0 0 0 var(--space-3);
  background: none;
  border: 0;
  border-left: 3px solid var(--role-sales);
  border-radius: 0;
  box-shadow: none;
}

.component.remember { border-left-color: var(--role-presales); }
.component.trap,
.component.warning { border-left-color: var(--role-operations); }
.component.boss-level { border-left-color: var(--iw-navy); }

.component.pro-tip > .component-label { color: var(--role-sales-ink); }
.component.remember > .component-label { color: var(--role-presales-ink); }
.component.trap > .component-label,
.component.warning > .component-label { color: var(--role-operations-ink); }
.component.boss-level > .component-label { color: var(--iw-navy); }

.component.handover,
.component.rush-mode,
.component.scenario {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.component.handover > .component-label { color: var(--role-sales-ink); }
.component.rush-mode > .component-label { color: var(--role-operations-ink); }

.component.side-quest,
.component.example,
.component.rule {
  padding: 0;
  background: none;
  border: 0;
}

.component.example > .component-label { color: var(--iw-violet); }

.component.side-quest .component-label { color: var(--role-sales-ink); }

.dialogue {
  margin: 0 0 var(--rhythm-paragraph);
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--iw-violet);
  color: var(--iw-navy);
  font-size: var(--type-reading);
  font-weight: 400;
  line-height: var(--line-reading);
  max-width: 40ch;
}

.simple-flow {
  margin: 0 0 var(--rhythm-paragraph);
  max-width: var(--measure);
  color: var(--iw-navy);
  font-size: var(--type-reading);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.check-list { list-style: none; margin: 0; padding: 0; }

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-soft);
}

.check-row input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--iw-purple);
}

.module-grid,
.situation-grid,
.stage-grid {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.situation-grid { gap: var(--space-2); }

.module-card,
.journey-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-height: 72px;
  padding: var(--space-4);
  background: var(--surface-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  text-decoration: none;
}

.situation-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  color: var(--text-primary);
  text-decoration: none;
}

.situation-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.situation-card .component-label { margin: 0; }

.situation-icon,
.situation-go {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-secondary);
}

.situation-go { color: var(--iw-violet); }

.situation-icon svg,
.situation-go svg,
.nav-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.module-card h3,
.situation-title,
.journey-title {
  margin: 0;
  color: var(--iw-navy);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--line-h3);
}

.module-card p,
.journey-group { margin: 0; color: var(--text-secondary); font-size: var(--text-small); }

.situation-card-handover {
  background: var(--surface-teal);
  box-shadow: inset 3px 0 0 var(--iw-teal), var(--shadow-soft);
}

.situation-card-handover .component-label,
.situation-card-handover .situation-icon { color: var(--role-sales-ink); }

.situation-card-golden-rule {
  background: var(--surface-lavender);
  box-shadow: inset 3px 0 0 var(--iw-violet), var(--shadow-soft);
}

.situation-card-golden-rule .situation-icon { color: var(--iw-violet); }

.situation-card-rush-mode {
  background: var(--surface-blush);
  box-shadow: inset 3px 0 0 var(--iw-orange), var(--shadow-soft);
}

.situation-card-rush-mode .component-label,
.situation-card-rush-mode .situation-icon { color: var(--role-operations-ink); }

.journey-stage { flex-direction: row; align-items: center; gap: var(--space-3); }

.journey-index {
  flex: 0 0 auto;
  width: 2.5rem;
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.journey-copy { display: flex; flex-direction: column; min-width: 0; }

.stage-group-label {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.density-specimen h3 { margin: 0 0 var(--space-2); font-size: var(--text-h3); }

.density-editorial {
  --component-gap: var(--rhythm-unit);
  --rhythm-section: 44px;
  --statement-size: var(--text-display);
}
.density-situational {
  --component-gap: var(--rhythm-section-tight);
  --rhythm-section: var(--rhythm-section-tight);
  --statement-size: var(--text-display);
}
.density-operational {
  --component-gap: var(--space-4);
  --rhythm-section: var(--rhythm-section-tight);
  --statement-size: var(--text-display);
}

.density .component { margin-bottom: var(--component-gap); }
.density .component.golden-rule { margin-top: var(--rhythm-section); margin-bottom: var(--component-gap); }
.density .component.golden-rule .component-statement { font-size: var(--statement-size); }

.density .component.pro-tip,
.density .component.remember,
.density .component.trap,
.density .component.warning,
.density .component.example {
  margin-bottom: var(--rhythm-paragraph);
}

.prose .now-principle {
  margin: 0 0 var(--rhythm-list);
  color: var(--iw-navy);
  font-size: var(--type-subhead);
  font-weight: 600;
  line-height: var(--line-subhead);
}

.prose .now-note {
  margin: 0 0 var(--rhythm-heading);
  color: var(--text-secondary);
  font-size: var(--type-meta);
}

.now-actions {
  list-style: none;
  margin: 0 0 var(--rhythm-section-tight);
  padding: 0;
}

.situation .now-actions > li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: var(--space-3);
  row-gap: 2px;
  margin: 0 0 var(--rhythm-list);
}

.now-index {
  grid-row: 1 / span 2;
  color: var(--now-accent, var(--iw-violet));
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.prose .now-action-title {
  margin: 0;
  color: var(--now-accent, var(--iw-violet));
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.prose .now-action-detail { margin: 0; }

.situation-now-engage { --now-accent: var(--iw-violet); }
.situation-now-handover { --now-accent: var(--role-sales-ink); }
.situation-now-rush { --now-accent: var(--role-operations-ink); }

.now-weak .component-label { color: var(--role-operations-ink); }
.now-weak .dialogue { border-left-color: var(--role-operations); }

.now-deeper { margin-top: var(--rhythm-section-tight); }

.now-learn { margin: var(--rhythm-section-tight) 0 0; }

.density-situational .component.pro-tip,
.density-situational .component.remember,
.density-situational .component.trap,
.density-situational .component.warning,
.density-situational .component.handover,
.density-situational .component.rush-mode,
.density-situational .component.boss-level,
.density-operational .component.pro-tip,
.density-operational .component.remember,
.density-operational .component.trap,
.density-operational .component.warning,
.density-operational .component.handover,
.density-operational .component.rush-mode,
.density-operational .component.boss-level {
  box-shadow: none;
}

.density-operational .component-body,
.density-operational .lede { font-size: var(--text-body); }

.density-note { margin: 0 0 var(--space-4); max-width: var(--measure); }

@media (min-width: 768px) {
  .module-grid,
  .situation-grid { grid-template-columns: 1fr 1fr; }
  .stage-grid { grid-template-columns: 1fr 1fr; }
  .density-board { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; gap: var(--space-5); align-items: start; }
  .illustration-hero img { max-width: 40rem; }
}

@media (min-width: 1100px) {
  .module-grid { grid-template-columns: 1fr 1fr 1fr; }
  .showcase { max-width: 72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}