/* ============================================================
   AIfred page: technical and a little mysterious.
   Mono indices on section labels, headlines that decode as they
   arrive (js/aifred-page.js), the decision as a pinned scene and a
   chapter indicator. All of it reads fine without JS.
   ============================================================ */

/* section labels carry a mono index: "03 / The decision" */
.page-aifred .mk-eyebrow[data-idx]::before { content: attr(data-idx) " / "; font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--teal-500); }

/* a faint measuring grid behind the technical sections */
.page-aifred #system, .page-aifred #decision, .page-aifred #integration {
  background-image: linear-gradient(rgba(249,250,251,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(249,250,251,0.035) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top; }

/* decoding headlines: the glyphs keep the line from jumping */
.page-aifred [data-decode] { font-variant-ligatures: none; }
.page-aifred [data-decode] .dc { color: var(--teal-500); font-family: var(--font-mono); font-weight: 400; }

/* ---------- the decision as one scene ---------- */
.st-decide.is-scene .st-offer { transition: opacity 0.45s ease; }
.st-decide.is-scene .st-offer em { opacity: 0; transition: opacity 0.35s ease; }
.st-decide.is-scene .st-offer.is-judged em { opacity: 1; }
.st-decide.is-scene .st-offer.is-out { opacity: 0.32; }
.st-decide.is-scene .st-offer.is-out b { text-decoration: line-through; text-decoration-color: rgba(249,250,251,0.35); }
.st-decide.is-scene .st-criterion { opacity: 0.3; transition: opacity 0.4s ease; }
.st-decide.is-scene .st-criterion.is-lit { opacity: 1; }
.st-decide.is-scene .st-criterion.is-lit i { color: var(--gold-500); }
.st-decide.is-scene .st-pick { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.st-decide.is-scene.is-decided .st-pick { opacity: 1; transform: none; }
.st-decide__scan { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); min-height: 1.4em; }
.st-decide__scan b { color: var(--teal-500); font-weight: 400; }

/* ---------- chapter indicator (same component as the homepage, dark) ---------- */
.st-chapter { position: fixed; z-index: 30; left: var(--container-pad); bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3); padding: 8px 12px;
  background: rgba(5, 16, 29, 0.72); border: 1px solid rgba(249, 250, 251, 0.2); border-radius: 2px;
  backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1;
  color: #f9fafb; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; }
.st-chapter.is-on { opacity: 1; transform: none; }
.st-chapter__n { color: var(--teal-500); }
.st-chapter__bar { position: relative; width: 64px; height: 2px; background: rgba(249, 250, 251, 0.2); overflow: hidden; }
.st-chapter__bar i { position: absolute; inset: 0; background: var(--gold-500); transform-origin: left center; transform: scaleX(var(--p, 0)); }
@media (max-width: 700px) { .st-chapter { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-chapter, .st-decide.is-scene * { transition: none !important; } }

/* ---------- one guest through every chapter: Cabin 7115 from the homepage sea day ---------- */
.st-ex { display: flex; gap: var(--sp-2); align-items: baseline; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.45; color: var(--teal-500); }
.st-ex::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--teal-500); transform: translateY(-1px); }
.st-ex b { font-weight: 400; color: #f9fafb; margin-right: var(--sp-2); white-space: nowrap; }
.st-ex--line { margin-top: var(--sp-6); font-size: var(--fs-small); }
.page-aifred .st-ctx__col li { flex-wrap: wrap; }
.page-aifred .st-ctx__col li em { flex-basis: 100%; padding-left: calc(6px + var(--sp-3)); font-style: normal; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--teal-500); }
.page-aifred .st-ctx__col:not(.st-ctx__col--now) li em { color: var(--text-muted); }

/* ---------- 01 and 04: every box reads top down, so titles and example lines share one line ---------- */
.page-aifred .st-flow .st-node, .page-aifred .st-loop .st-node { justify-content: flex-start; gap: var(--sp-5); }
.page-aifred .st-flow .st-node > div, .page-aifred .st-loop .st-node > div { flex: 1; display: flex; flex-direction: column; }
.page-aifred .st-flow .st-node h3, .page-aifred .st-loop .st-node h3 { min-height: calc(var(--lh-h2) * var(--fs-h2)); }
.page-aifred .st-loop .st-node h3 { min-height: calc(2 * var(--lh-h2) * var(--fs-h2)); }
.page-aifred .st-flow .st-node p:not(.st-ex), .page-aifred .st-loop .st-node p:not(.st-ex) { min-height: calc(2 * var(--lh-small) * var(--fs-small)); }
.page-aifred .st-flow .st-ex, .page-aifred .st-loop .st-ex { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); min-height: calc(2 * 1.45 * var(--fs-caption) + var(--sp-4)); }

/* ---------- 02: both lists sit one tab in ---------- */
.page-aifred .st-ctx__col ul { padding-left: var(--sp-6); }
.page-aifred .st-ctx__foot { grid-template-columns: 1fr; }

/* ---------- 06: one AIfred, three parts ---------- */
.st-eco { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.2fr; border: 1px solid var(--line-strong); }
.st-eco::before { content: ""; position: absolute; z-index: 1; pointer-events: none; left: 12%; right: 12%; top: 64px; height: 1px; background: linear-gradient(90deg, rgba(42, 191, 176, 0), rgba(42, 191, 176, 0.75), rgba(42, 191, 176, 0)); }
.st-eco__part { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-7) var(--sp-6) var(--sp-6); }
.st-eco__part + .st-eco__part { border-left: 1px solid var(--line-strong); }
.st-eco__part--core { background: radial-gradient(ellipse at 50% 0%, rgba(42, 191, 176, 0.14), rgba(42, 191, 176, 0) 70%), var(--surface-card); }
.st-eco__tag i { font-style: normal; color: var(--text-muted); margin-right: 6px; }
.st-eco__tag { position: absolute; top: var(--sp-4); left: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--teal-500); }
.st-eco__seed { position: absolute; top: 44px; left: var(--sp-6); width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #eafffb 0%, #7ff0e2 24%, rgba(42, 191, 176, 0.5) 52%, rgba(42, 191, 176, 0) 74%); box-shadow: 0 0 40px rgba(42, 191, 176, 0.4); }
.st-eco__part h3 { margin-top: var(--sp-7); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); color: #f9fafb; }
.st-eco__part b { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 400; color: var(--gold-500); }
.st-eco__part p { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); max-width: 34ch; }
@media (max-width: 800px) {
  .st-eco { grid-template-columns: 1fr; }
  .st-eco::before { display: none; }
  .st-eco__part + .st-eco__part { border-left: 0; border-top: 1px solid var(--line-strong); }
}

/* Sense -> Mate -> AIfred: arrows between the parts, and the scene that builds it step by step */
.st-eco__part:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -7px; top: 57px; width: 13px; height: 13px;
  background: var(--bg-page); border-top: 1px solid var(--teal-500); border-right: 1px solid var(--teal-500); transform: rotate(45deg); }
.st-eco.is-scene::before { transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 0.6s ease; }
.st-eco.is-scene .st-eco__part { transition: opacity 0.6s ease; }
.st-eco.is-scene .st-eco__part:not(.is-lit) { opacity: 0.22; }
.st-eco.is-scene .st-eco__part:not(.is-lit)::after { opacity: 0; }
.st-eco.is-scene .st-eco__part--core .st-eco__seed { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease; }
.st-eco.is-scene .st-eco__part--core:not(.is-lit) .st-eco__seed { transform: scale(0.4); opacity: 0.3; }
#suite .st-ex--line { transition: opacity 0.6s ease; }
.st-eco.is-scene:not(.is-done) + .st-ex--line { opacity: 0; }