/* ============================================================
   KinOrbit — mockup2 OPERATORS page skin
   Ports the Fable_5 operators design language onto the mockup2
   operators markup: full-bleed section rhythm, rounded-rect aura
   buttons, lighter layered + sky-aura depth, hover-lift cards,
   Fable dark surfaces, r-md/r-lg radii.
   Scoped to `body.ops-fable` so no other mockup2 page is touched.
   Fonts are intentionally left as the mockup2 stack (Sora/Manrope).
   Load AFTER style.css.
   ============================================================ */

body.ops-fable {
  /* Surface + palette (Fable cream / deep guardian) */
  --cream: #FDFCF8;
  --cream-2: #F8F5EE;
  --cream-3: #EFEADC;
  --guardian-d: #060B17;

  /* Depth — Fable's lighter layered shadows */
  --shadow-sm: 0 2px 6px rgba(26,43,72,.08), 0 1px 2px rgba(26,43,72,.04);
  --shadow-md: 0 6px 18px rgba(26,43,72,.10), 0 2px 6px rgba(26,43,72,.06);
  --shadow-lg: 0 16px 40px rgba(26,43,72,.14), 0 6px 16px rgba(26,43,72,.08);

  /* Aura (sky glow) — Fable signature */
  --aura-soft: 0 0 0 1px rgba(119,181,254,.18), 0 8px 32px -8px rgba(119,181,254,.35);
  --aura-medium: 0 0 0 2px rgba(119,181,254,.25), 0 0 24px rgba(119,181,254,.4), 0 12px 48px -12px rgba(26,43,72,.25);
  --aura-amber: 0 0 0 2px rgba(255,191,0,.3), 0 0 24px rgba(255,191,0,.5);

  /* Radii */
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  /* Flatten the framed-block layout into full-bleed sections */
  --block-r: 0px;
  --frame: 0px;

  /* Fable operators is a fully dark page — guardian-900 canvas with a
     faint amber + sky glow, matching the hero gradient family. */
  background:
    radial-gradient(900px 520px at 82% 0%, rgba(255,191,0,.06), transparent 60%),
    radial-gradient(760px 520px at 6% 22%, rgba(119,181,254,.06), transparent 60%),
    #0B1426;
  background-attachment: fixed;
  color: #fff;
}
body.ops-fable ::selection { background: #FFDE7A; color: #13203A; }

/* ── Section rhythm: full-bleed, 1200 container, 96px vertical ── */
body.ops-fable .block { margin: 0; border-radius: 0; padding: 96px 24px; }
body.ops-fable .block-inner { max-width: 1200px; }
@media (max-width: 760px) { body.ops-fable .block { padding: 64px 20px; } }

body.ops-fable .lede { max-width: 58ch; }

/* ── Buttons: rounded-rect + aura, hover lift ── */
body.ops-fable .btn {
  border-radius: var(--r-md);
  padding: 0 26px;
  height: 52px;
  font-weight: 700;
  font-size: 15.5px;
  border: 1.5px solid transparent;
  transition: transform .22s, box-shadow .22s, background .22s, color .22s;
}
body.ops-fable .btn-lg { height: 56px; padding: 0 30px; font-size: 16px; }
body.ops-fable .btn-amber {
  background: var(--amber); color: #13203A;
  box-shadow: 0 10px 30px -10px rgba(255,191,0,.55);
}
body.ops-fable .btn-amber:hover { background: #FFDE7A; transform: translateY(-1px); box-shadow: var(--aura-amber); }
body.ops-fable .btn-dark { background: var(--guardian); color: #fff; box-shadow: var(--aura-soft); }
body.ops-fable .btn-dark:hover { background: #1F3460; transform: translateY(-1px); box-shadow: var(--aura-medium); }
body.ops-fable .btn-ghost { border: 1.5px solid rgba(26,43,72,.25); }

/* ── Cards: Fable radius, lighter border, hover-lift ── */
body.ops-fable .feat-card,
body.ops-fable .post-card { border-radius: var(--r-lg); border-color: var(--cream-3); }
body.ops-fable .feat-card { transition: transform .22s, box-shadow .22s; }
body.ops-fable .feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
body.ops-fable .ko-card { border-radius: var(--r-lg); }

/* Demand-stream cards get the same hover lift */
body.ops-fable .stream-card { transition: transform .22s, box-shadow .22s; }
body.ops-fable .stream-card:hover { transform: translateY(-4px); box-shadow: var(--aura-soft); }

/* ── How to apply: 2×2 step grid ──
   Ported from the archived `src/app/operators` page, the one section of it with
   no mockup2 equivalent (its five-step timeline above is product onboarding;
   this is the commercial process). Sizes are that page's — 18px radius, 22px
   gap, 24px padding — deliberately NOT the Fable card tokens, so it reads as
   the same block it was. Only the hover lift is new, matching every other card
   on this page. Two columns, not .cards-3: four steps read as two pairs, and at
   three the fourth card sits alone on a second row.
   `.sec-head` caps at 720px, which wraps "Four steps. About six weeks." onto a
   second line at every desktop width — the heading is one line by design. */
body.ops-fable .apply-head { max-width: 900px; }
body.ops-fable .apply-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 900px) { body.ops-fable .apply-grid { grid-template-columns: 1fr; } }
body.ops-fable .apply-card {
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
body.ops-fable .apply-card:hover {
  transform: translateY(-4px); box-shadow: var(--aura-soft); border-color: rgba(119,181,254,.28);
}
body.ops-fable .apply-card .n {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--amber);
}
body.ops-fable .apply-card h3 {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem; margin-top: 4px; color: #fff;
}
body.ops-fable .apply-card p { margin-top: 8px; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.7); }
body.ops-fable .apply-cta { margin-top: 36px; }

/* Media illustrations to Fable radius */
body.ops-fable .split-media .illus { border-radius: var(--r-lg); }

/* ── Forms: Fable field radius + sky-aura focus ── */
body.ops-fable .field input,
body.ops-fable .field textarea,
body.ops-fable .field select { border-radius: var(--r-md); }
body.ops-fable .field input:focus,
body.ops-fable .field textarea:focus,
body.ops-fable .field select:focus {
  outline: none; border-color: var(--sky); box-shadow: var(--aura-soft);
}

/* ── Dark surfaces: Fable deep-guardian radial ── */
body.ops-fable .bg-navy {
  background:
    radial-gradient(1100px 700px at 50% -10%, #16264d 0%, transparent 60%),
    linear-gradient(180deg, #0B1426 0%, #060B17 100%);
}

/* ============================================================
   Whole-page dark theme — the formerly cream sections become
   part of the Fable guardian-900/950 canvas. Font sizes are
   untouched; only surface + text colours flip for legibility.
   ============================================================ */

/* Light sections dissolve into the dark canvas */
body.ops-fable .bg-cream { background: transparent; }
/* deeper guardian-950 panels (how-it-works / cross-link / blog) */
body.ops-fable .bg-cream2 {
  background:
    radial-gradient(800px 480px at 50% -10%, rgba(119,181,254,.05), transparent 60%),
    #060B17;
}

/* Headings / lede / body copy on the newly-dark sections */
body.ops-fable .bg-cream .h-section, body.ops-fable .bg-cream .h-display,
body.ops-fable .bg-cream2 .h-section, body.ops-fable .bg-cream2 .h-display { color: #fff; }
body.ops-fable .bg-cream .lede, body.ops-fable .bg-cream2 .lede { color: rgba(255,255,255,.74); }
body.ops-fable .accent { color: var(--teal-l); }

/* Timeline (How it works) → dark */
body.ops-fable .tl-step .tl-t { color: #fff; }
body.ops-fable .tl-step .tl-d { color: rgba(255,255,255,.66); }
body.ops-fable .tl-step .num { background: rgba(255,255,255,.1); color: #fff; }
body.ops-fable .tl-step.active { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }
body.ops-fable .tl-step.active .num { background: var(--amber); color: #13203A; }
body.ops-fable .tl-step::after { background: rgba(255,255,255,.18); opacity: 1; }

/* Blog post-cards → dark (mirrors the kids-page treatment) */
body.ops-fable .post-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
body.ops-fable .post-card h3 { color: #fff; }
body.ops-fable .post-card p { color: rgba(255,255,255,.66); }

/* Cross-link CTA button reads on dark */
body.ops-fable .bg-cream .btn-dark, body.ops-fable .bg-cream2 .btn-dark {
  background: var(--sky); color: #0B1426; box-shadow: var(--aura-soft);
}
body.ops-fable .bg-cream .btn-dark:hover, body.ops-fable .bg-cream2 .btn-dark:hover {
  background: var(--sky-300); box-shadow: var(--aura-medium);
}