/* =============================================================================
   SCENARIOS — PAGE-SPECIFIC STYLES
   Load after common.css. Shared by all /decode/scenarios/* pages.
   ============================================================================= */

body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.75; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); letter-spacing: -0.015em; margin-bottom: var(--space-m); }
h3 { font-size: clamp(1rem, 2vw, 1.2rem); letter-spacing: -0.01em; margin-bottom: var(--space-s); }


/* =============================================================================
   SCENARIO HERO
   ============================================================================= */
.scenario-hero {
  background-color: var(--ink);
  color: var(--paper);
  padding: var(--space-xl) 0 var(--space-l);
  border-bottom: 3px solid var(--red);
}
.scenario-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--space-m);
  margin-bottom: var(--space-m);
}
.scenario-hero__vertical {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.scenario-hero__divider {
  color: rgba(212,207,197,0.25);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.scenario-type {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border: 1px solid;
}
.scenario-type--negotiation  { color: var(--gold);  border-color: var(--gold); }
.scenario-type--social        { color: #7eb3a8;       border-color: #7eb3a8; }
.scenario-type--supply-chain  { color: var(--red);   border-color: var(--red); }
.scenario-type--communication { color: rgba(247,244,238,0.5); border-color: rgba(247,244,238,0.25); }

.scenario-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--paper);
  margin-bottom: var(--space-m);
  max-width: 22ch;
}
.scenario-hero__standfirst {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(247,244,238,0.65);
  max-width: 58ch;
  margin-bottom: var(--space-l);
}
.scenario-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(212,207,197,0.12);
}
.scenario-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.scenario-hero__stat-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.3);
}
.scenario-hero__stat-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(247,244,238,0.7);
}
/* Stakes dots */
.stakes-dots {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.stakes-dots__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(184,50,50,0.5);
}
.stakes-dots__dot--filled { background-color: var(--red); border-color: var(--red); }


/* =============================================================================
   SCENE BLOCK — "What you just witnessed"
   ============================================================================= */
.scene-block {
  background-color: var(--ink);
  border-bottom: 1px solid rgba(212,207,197,0.1);
  padding: var(--space-l) 0;
}
.scene-block__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m) var(--space-l);
  align-items: start;
}
@media (max-width: 599px) {
  .scene-block__inner { grid-template-columns: 1fr; }
}
.scene-block__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212,207,197,0.4);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  white-space: nowrap;
  padding-top: 0.4rem;
}
@media (max-width: 599px) {
  .scene-block__label { writing-mode: horizontal-tb; transform: none; }
}
.scene-block__quote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  color: rgba(247,244,238,0.88);
  border-left: 3px solid var(--red);
  padding-left: var(--space-m);
  margin: 0;
}
.scene-block__quote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: rgba(247,244,238,0.3);
  margin-top: var(--space-s);
}


/* =============================================================================
   PAGE BODY LAYOUT
   ============================================================================= */
.scenario-layout { padding-block: var(--space-xl); }
.scenario-layout__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 960px) {
  .scenario-layout__inner { grid-template-columns: 1fr 240px; }
}
.scenario-main { min-width: 0; overflow-wrap: break-word; }


/* =============================================================================
   MISREAD / REALITY PANEL
   The signature structure of every scenario page.
   ============================================================================= */
.misread-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-xl);
}
@media (max-width: 639px) {
  .misread-panel { grid-template-columns: 1fr; }
}
.misread-panel__col {
  padding: var(--space-l);
  min-width: 0;
}
.misread-panel__col--wrong {
  background-color: var(--paper-tint);
  border-top: 4px solid var(--rule);
}
.misread-panel__col--right {
  background-color: #f2f6f4;
  border-top: 4px solid #4a8c7a;
}
.misread-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-s);
}
.misread-panel__col--wrong .misread-panel__eyebrow { color: var(--light); }
.misread-panel__col--right .misread-panel__eyebrow { color: #4a8c7a; }
.misread-panel__heading {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: var(--space-m);
}
.misread-panel__col--wrong .misread-panel__heading { color: var(--mid); }
.misread-panel__col--right .misread-panel__heading { color: var(--ink); }
.misread-panel__body {
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.7;
}
.misread-panel__body p { margin-bottom: 0.8em; }
.misread-panel__body p:last-child { margin-bottom: 0; }
.misread-icon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  vertical-align: middle;
  margin-right: 0.3em;
  opacity: 0.5;
}


/* =============================================================================
   SECTION BLOCKS within scenario-main
   ============================================================================= */
.scenario-section {
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--rule);
}
.scenario-section:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.scenario-section__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light);
  display: block;
  margin-bottom: var(--space-xs);
}
.scenario-section h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  margin-bottom: var(--space-m);
}
.scenario-section p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ink);
  max-width: 65ch;
}
.scenario-section p + p { margin-top: -0.4em; }


/* =============================================================================
   CONCEPT CALLOUT — inline cross-reference
   ============================================================================= */
.concept-callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: var(--space-m) var(--space-l);
  background-color: var(--gold-tint);
  margin-block: var(--space-l);
}
.concept-callout__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.concept-callout__glyph {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
}
.concept-callout__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.concept-callout__name:hover { color: var(--red); }
.concept-callout__pinyin {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.concept-callout p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 60ch;
}


/* =============================================================================
   ACTION STEPS — "What to do"
   ============================================================================= */
.action-steps {
  list-style: none;
  padding: 0;
  margin-block: var(--space-l);
  counter-reset: action-counter;
}
.action-step {
  counter-increment: action-counter;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-m);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.action-step:last-child { border-bottom: none; }
.action-step::before {
  content: counter(action-counter);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--paper);
  background-color: var(--ink);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.action-step__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.action-step p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 60ch;
}


/* =============================================================================
   SAY THIS / NOT THIS — language guidance
   ============================================================================= */
.language-guide {
  margin-block: var(--space-xl);
}
.language-guide__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}
@media (max-width: 639px) {
  .language-guide__grid { grid-template-columns: 1fr; }
}
.language-card {
  border: 1px solid var(--rule);
  padding: var(--space-m) var(--space-l);
}
.language-card--say {
  border-top: 3px solid #4a8c7a;
  background-color: #f2f6f4;
}
.language-card--not {
  border-top: 3px solid var(--rule);
  background-color: var(--paper-tint);
}
.language-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-m);
}
.language-card--say .language-card__eyebrow  { color: #4a8c7a; }
.language-card--not .language-card__eyebrow  { color: var(--light); }
.language-card__item {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--rule);
  padding-left: var(--space-s);
  border-left: 2px solid transparent;
}
.language-card--say .language-card__item  { border-left-color: #4a8c7a; }
.language-card--not .language-card__item  { border-left-color: rgba(180,50,50,0.25); color: var(--mid); font-style: italic; }
.language-card__item:last-child { border-bottom: none; }
.language-card__item + .language-card__item { margin-top: 0.4rem; }


/* =============================================================================
   DON'T DO THIS BLOCK
   ============================================================================= */
.dont-block {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  background-color: rgba(184,50,50,0.04);
  padding: var(--space-m) var(--space-l);
  margin-block: var(--space-l);
}
.dont-block__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: var(--space-s);
}
.dont-block__heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-s);
  line-height: 1.3;
}
.dont-block p {
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 0.7em;
}
.dont-block p:last-child { margin-bottom: 0; }


/* =============================================================================
   RESOLUTION BLOCK — "How this typically resolves"
   ============================================================================= */
.resolution-block {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  padding: var(--space-l);
  background-color: var(--paper-tint);
  margin-top: var(--space-xl);
}
.resolution-block__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light);
  display: block;
  margin-bottom: var(--space-xs);
}
.resolution-block__heading {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-m);
  line-height: 1.25;
}
.resolution-track {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.resolution-step {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  position: relative;
}
.resolution-step:last-child { padding-bottom: 0; }
.resolution-step__line {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.4rem;
}
.resolution-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--rule);
  flex-shrink: 0;
}
.resolution-step:first-child .resolution-step__dot { background-color: var(--ink); }
.resolution-step:last-child  .resolution-step__dot { background-color: var(--gold); }
.resolution-step__connector {
  width: 1px;
  flex: 1;
  background-color: var(--rule);
  margin-top: 3px;
}
.resolution-step:last-child .resolution-step__connector { display: none; }
.resolution-step__body {}
.resolution-step__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  display: block;
  margin-bottom: 0.2rem;
}
.resolution-step p {
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 0;
}


/* =============================================================================
   SCENARIO SIDEBAR
   ============================================================================= */
.scenario-sidebar { font-size: 0.88rem; }
@media (min-width: 960px) { .scenario-sidebar { position: sticky; top: var(--space-l); } }

/* Related scenarios list */
.scenario-nav-list { list-style: none; padding: 0; }
.scenario-nav-list li { margin-bottom: var(--space-xs); }
.scenario-nav-list a {
  border: 1px solid var(--rule);
  padding: var(--space-s) var(--space-m);
  display: block;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--mid);
  line-height: 1.45;
}
.scenario-nav-list a:hover { border-color: var(--ink); color: var(--ink); }

/* Concept chips in sidebar */
.concept-chip-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.concept-chip-link {
  border: 1px solid var(--rule);
  padding: var(--space-s) var(--space-m);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  text-decoration: none;
}
.concept-chip-link:hover { border-color: var(--gold); }
.concept-chip-link__glyph {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--rule);
  line-height: 1;
  flex-shrink: 0;
}
.concept-chip-link__body {}
.concept-chip-link__name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  line-height: 1.2;
}
.concept-chip-link__pinyin {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--light);
  display: block;
}

/* Difficulty indicator in sidebar */
.difficulty-block {
  border: 1px solid var(--rule);
  padding: var(--space-m);
}
.difficulty-block__label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light);
  display: block;
  margin-bottom: var(--space-xs);
}
.difficulty-block__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: var(--space-xs);
}
.difficulty-block p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 0;
}


/* =============================================================================
   PRINT
   ============================================================================= */
@media print {
  .scenario-hero { background: black; }
  .scene-block { background: black; }
  .scenario-sidebar { display: none; }
  .scenario-layout__inner { display: block; }
  .scenario-main { max-width: 100%; }
  .misread-panel { grid-template-columns: 1fr 1fr; }
  .language-guide__grid { grid-template-columns: 1fr 1fr; }
}