/* ─────────────────────────────────────────────────────────────
   experience.css — shared styling for H33 Business Scenarios
   (/experience/ library + individual guided scenarios)
   Tokens mirror the site: black canvas, Inter body, JetBrains
   Mono labels, bronze #C9956C + green #4ade80 accents.
   ───────────────────────────────────────────────────────────── */

.xp {
  --bg:          #000000;
  --panel:       #0a0a0a;
  --text:        #E8E8E8;
  --muted:       #9a9a9a;
  --dim:         #6d6d6d;
  --bronze:      #C9956C;
  --bronze-soft: rgba(201, 149, 108, 0.14);
  --green:       #4ade80;
  --green-soft:  rgba(74, 222, 128, 0.12);
  --red:         #f87171;
  --red-soft:    rgba(248, 113, 113, 0.12);
  --card-bg:     rgba(255, 255, 255, 0.02);
  --card-border: rgba(255, 255, 255, 0.07);
  --radius:      16px;
  --font-body:   'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
  --max:         1080px;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.xp-wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── Eyebrow / mono label ── */
.xp-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bronze);
}
.xp-eyebrow.green { color: var(--green); }

/* ── Hero ── */
.xp-hero { padding: 96px 0 40px; text-align: center; position: relative; }
.xp-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,149,108,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.xp-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.9rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.03;
  margin: 18px 0 0;
}
.xp-hero .xp-lede {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--muted);
  max-width: 640px;
  margin: 20px auto 0;
}

/* ── Comprehension Framework strip ── */
.xp-framework {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 44px 0 8px;
}
.xp-step {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: left;
}
.xp-step .n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--bronze);
  font-weight: 700;
}
.xp-step .t { font-weight: 700; font-size: 0.92rem; margin-top: 6px; }
.xp-step .d { color: var(--dim); font-size: 0.8rem; margin-top: 4px; }

/* ── Section heads ── */
.xp-section { padding: 40px 0; }
.xp-tier-label {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 12px; margin-bottom: 24px;
}
.xp-tier-label h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.xp-tier-label .sub { color: var(--dim); font-size: 0.85rem; }

/* ── Scenario cards ── */
.xp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.xp-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color .2s, transform .2s, background .2s;
  position: relative;
}
a.xp-card:hover { border-color: rgba(201,149,108,0.5); transform: translateY(-2px); background: rgba(255,255,255,0.03); }
.xp-card .buyer {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--bronze); margin-bottom: 10px;
}
.xp-card h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; }
.xp-card .q { color: var(--muted); font-style: italic; margin-top: 8px; font-size: 0.98rem; }
.xp-card .out { color: var(--text); margin-top: 14px; font-size: 0.92rem; }
.xp-card .out strong { color: var(--green); font-weight: 700; }
.xp-badge {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 5px;
}
.xp-badge.live { color: var(--green); background: var(--green-soft); }
.xp-badge.soon { color: var(--dim); background: rgba(255,255,255,0.04); }
.xp-card.soon { opacity: 0.62; cursor: default; }
.xp-card .run { margin-top: 16px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--green); font-weight: 600; }

/* ── Tier 2/3 chips ── */
.xp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.xp-chip {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted);
  border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 16px; background: var(--card-bg);
}

/* ─────────────────────────────────────────────────────────────
   Guided scenario stage (onboarding / agent scenarios)
   ───────────────────────────────────────────────────────────── */
.xp-stage { padding: 40px 0 100px; position: relative; }

/* elapsed timer chip (fixed corner) */
.xp-timer {
  position: fixed; top: 84px; right: 20px; z-index: 40;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  background: rgba(10,10,10,0.86); backdrop-filter: blur(8px);
  border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 14px;
  color: var(--text); display: none; align-items: center; gap: 9px;
}
.xp-timer.on { display: inline-flex; }
.xp-timer .lbl { color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; }
.xp-timer .val { color: var(--green); }
.xp-timer.frozen .val { color: var(--bronze); }

/* named expert */
.xp-expert { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.xp-expert .ava {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #000;
  background: linear-gradient(135deg, var(--bronze) 0%, #a06b44 100%);
}
.xp-expert .ava.p { background: linear-gradient(135deg, var(--green) 0%, #2f9e5a 100%); }
/* neutral (monochrome) — the Independent Verifier is not H33; independence is the point */
.xp-expert .ava.v { background: linear-gradient(135deg, #dcdcdc 0%, #9a9a9a 100%); }
.xp-expert .role.independent { color: #cfcfcf; }
.xp-expert .who { font-weight: 700; }
.xp-expert .role { color: var(--dim); font-size: 0.82rem; font-family: var(--font-mono); }

/* scene card */
.xp-scene {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
}
.xp-scene + .xp-scene { margin-top: 18px; }
.xp-scene[hidden] { display: none; }
.xp-scene h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.xp-scene .say { color: var(--muted); margin-top: 12px; font-size: 1.02rem; }
.xp-scene .say strong { color: var(--text); }

/* question form */
.xp-qs { display: grid; gap: 14px; margin-top: 22px; }
.xp-q label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.xp-q input, .xp-q select {
  width: 100%; padding: 13px 15px; background: #060606; color: var(--text);
  border: 1.5px solid var(--card-border); border-radius: 10px; font-size: 1rem; font-family: var(--font-body);
}
.xp-q input:focus, .xp-q select:focus { outline: none; border-color: var(--bronze); }

/* connect buttons */
.xp-connect { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.xp-conn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: #060606; border: 1.5px solid var(--card-border);
  border-radius: 12px; color: var(--text); font-weight: 700; font-size: 0.98rem;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.xp-conn:hover { border-color: rgba(74,222,128,0.5); }
.xp-conn.connected { border-color: rgba(74,222,128,0.5); background: var(--green-soft); }
.xp-conn .state { font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); font-weight: 600; }
.xp-conn.connected .state { color: var(--green); }

/* narration log (terminal) */
.xp-log {
  margin-top: 22px; background: #060606; border: 1px solid var(--card-border);
  border-radius: 12px; padding: 20px; font-family: var(--font-mono); font-size: 0.9rem;
  min-height: 120px;
}
.xp-log .line { color: var(--muted); padding: 4px 0; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.xp-log .line.show { opacity: 1; transform: none; }
.xp-log .line::before { content: "› "; color: var(--bronze); }
.xp-log .line.ok::before { content: "✓ "; color: var(--green); }
.xp-log .line.deny::before { content: "✕ "; color: var(--red); }
.xp-log .line.ask::before { content: "? "; color: var(--bronze); }

/* action plan */
.xp-plan { display: grid; gap: 10px; margin-top: 20px; }
.xp-plan .row {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline;
  padding: 14px 16px; background: #060606; border: 1px solid var(--card-border); border-radius: 10px;
}
.xp-plan .when { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bronze); font-weight: 700; }
.xp-plan .row.none .when { color: var(--green); }
.xp-plan .what { color: var(--text); font-size: 0.95rem; }

/* status checklist */
.xp-status { display: grid; gap: 8px; margin-top: 20px; }
.xp-status .c { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 0.96rem; }
.xp-status .c::before { content: "✓"; color: var(--green); font-weight: 800; }

/* three executive questions */
.xp-execq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.xp-execq .eq {
  background: #060606; border: 1px solid var(--card-border); border-radius: 12px; padding: 18px;
  text-align: center;
}
.xp-execq .eq .qn { font-family: var(--font-mono); font-size: 0.72rem; color: var(--bronze); letter-spacing: 0.1em; text-transform: uppercase; }
.xp-execq .eq .qt { font-weight: 800; font-size: 1.15rem; margin-top: 8px; }
.xp-execq .eq .qa { color: var(--green); font-size: 0.82rem; margin-top: 8px; font-family: var(--font-mono); min-height: 1em; }
.xp-execq .eq .qa.deny { color: var(--red); }

/* buttons */
.xp-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  padding: 14px 26px; border-radius: 10px; font-weight: 800; font-size: 1rem; cursor: pointer;
  border: none; font-family: var(--font-body);
  background: linear-gradient(135deg, var(--green) 0%, #2f9e5a 100%); color: #04170c;
  transition: filter .2s, transform .2s;
}
.xp-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.xp-btn.bronze { background: linear-gradient(135deg, var(--bronze) 0%, #a06b44 100%); color: #1a0f06; }
.xp-btn.ghost { background: transparent; border: 1.5px solid var(--card-border); color: var(--text); }
.xp-btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; }

/* governed-outcome banner */
.xp-verdict {
  margin-top: 26px; padding: 26px; border-radius: var(--radius); text-align: center;
  border: 1px solid rgba(74,222,128,0.4); background: var(--green-soft);
}
.xp-verdict .k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); font-weight: 700; }
.xp-verdict .headline { font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 900; letter-spacing: -0.02em; margin-top: 10px; }
.xp-verdict .sub { color: var(--muted); margin-top: 10px; }

/* measurable outcome card */
.xp-outcome {
  margin-top: 22px; border: 1px solid rgba(201,149,108,0.4); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(201,149,108,0.06), rgba(255,255,255,0.02)); padding: 28px;
}
.xp-outcome .oc-title {
  display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 18px;
}
.xp-outcome .oc-title::before { content: "▎"; color: var(--bronze); }
.xp-outcome .metrics { display: grid; gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.xp-outcome .m { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; background: var(--panel); }
.xp-outcome .m .ml { color: var(--muted); font-size: 0.92rem; }
.xp-outcome .m .mv { font-family: var(--font-mono); font-weight: 700; color: var(--green); font-size: 0.92rem; }
.xp-outcome .m .mv.bronze { color: var(--bronze); }

/* scenario footer nav */
.xp-back { margin-top: 40px; text-align: center; }
.xp-back a { color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem; }
.xp-back a:hover { color: var(--green); }

/* reveal helper */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .xp-framework { grid-template-columns: 1fr 1fr; }
  .xp-grid { grid-template-columns: 1fr; }
  .xp-connect, .xp-execq { grid-template-columns: 1fr; }
  .xp-plan .row { grid-template-columns: 1fr; gap: 4px; }
  .xp-timer { top: auto; bottom: 16px; right: 16px; }
}