/* ── Story Card chassis + carousel (Card UI + اسأل السماء — Slice 1) ──────
   Foundation component only. Not wired into any real view yet (Slice 2).
   Composes the existing .glass-card tokens (blur/border/radius) — does not
   fork them. Reuses --gold/--orange/--pink/--purple/--blue/--teal (theme.css)
   for the 6 life-area accents, and var(--font-ar-display) (DL v2 §5) for the
   Kufi quotable line. Calm rules (display ≤40px, solid gold, glow ≤10px blur /
   ≤.15 opacity, no shimmer) apply throughout — see inline notes below. */

/* ── Card chassis ─────────────────────────────────────────────────────── */
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.story-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Life-area accent edge — same technique as .aspect-soft/.aspect-hard
   (glass.css) border-inline-start, extended to the full 6-hue palette. */
.story-card-accent-relationships { border-inline-start: 3px solid var(--pink); }
.story-card-accent-work          { border-inline-start: 3px solid var(--gold); }
.story-card-accent-home          { border-inline-start: 3px solid var(--teal); }
.story-card-accent-mind          { border-inline-start: 3px solid var(--blue); }
.story-card-accent-body          { border-inline-start: 3px solid var(--orange); }
.story-card-accent-transformation{ border-inline-start: 3px solid var(--purple); }

/* Always-visible date/kind-chip header row (optional `meta` field) — sits
   above the quote, never gated by expand state. Plain flexbox row: under a
   card's own [dir=rtl] (see the `dir` field above), the browser's native RTL
   mirroring already reverses this row's visual order with no left/right
   logic of ours needed — same convention as .story-carousel-track above and
   .aspect-soft/.aspect-hard (glass.css) border-inline-start usage. No
   hardcoded left/right anywhere in this block. */
.story-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.story-card-meta-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.story-card-meta-kind {
  /* Sizing-only tweak on top of the reused .badge base (glass.css) — smaller
     footprint than a full filter-chip badge since this is a passive label,
     not an interactive control. Padding stays logical (inline/block via the
     base .badge shorthand `6px 14px`, itself direction-agnostic already). */
  font-size: var(--text-xs);
  padding-block: 3px;
  padding-inline: 10px;
}

/* Quotable line — Kufi display face, DL v2 §5. Falls through to Nunito for
   Latin text automatically (font-stack fallback), so this one class serves
   both languages without a JS branch. Calm rule: display text ≤40px — this
   tops out at 28px (--text-2xl on wider screens via clamp), well under. */
.story-card-quote {
  font-family: var(--font-ar-display);
  font-size: clamp(1.125rem, 4.5vw, 1.5rem); /* ~18px → 24px, cap far below 40px */
  font-weight: 500;
  line-height: 1.35;
  color: var(--gold);  /* DL v2 calm rule — solid gold hero word, never a gradient fill */
  overflow-wrap: break-word; /* defensive: real interpretation-library text (Slice 2)
                                 can contain long unbroken runs — wrap, don't overflow */
}

/* ── Sky Chart + Time Scrubber plan, Slice 5 ─────────────────────────────
   The scrub's date/time readout — modeled directly on .story-card-quote
   above per the DL v2 rule this brief cites: Kufi display face (falls
   through to Nunito for Latin automatically), solid --gold, NO glow/
   text-shadow (plain solid color is compliant — glow is an optional
   ceiling, not a requirement). "The scrubber is a calm control, not an
   animated one" — no shimmer/pulse here; only the .wheel-layer fade
   already in chart-wheel.js's renderSkyOnly() applies, and only on
   redraw, never a continuous animation. */
.sky-scrub-label {
  font-family: var(--font-ar-display);
  font-weight: 700;
  color: var(--gold);
  text-align: center;
}

/* Mode toggle row + track use flexbox only — no hardcoded left/right,
   so [dir=rtl] (the app's existing container convention) mirrors this
   for free, same as .story-card-meta above. */
.sky-scrub-toggle {
  display: flex;
  gap: 6px;
}

/* Expand affordance — small chevron, static (no shimmer/pulse), rotates on
   open exactly like .chart-details-toggle .arrow (glass.css) already does. */
.story-card-expand-affordance {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
}
.story-card-expand-chevron {
  width: 8px;
  height: 8px;
  border-inline-end: 1.5px solid var(--text-muted);
  border-block-end: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease);
}
.story-card[aria-expanded="true"] .story-card-expand-chevron,
.story-card.is-expanded .story-card-expand-chevron {
  transform: rotate(225deg);
}

/* ── Expanded state ───────────────────────────────────────────────────── */
.story-card-detail {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  animation: viewFadeIn 0.2s ease-out; /* reuses cosmic.css's existing fade keyframe */
}
.story-card-detail[hidden] { display: none; }

/* Grounding sentence — deliberately NOT given an explicit font-family: body
   text already inherits the correct face from <body>/<body class="rtl">
   (theme.css: body{font-family:var(--font-en)} / body.rtl{font-family:var(--font-ar)}),
   which is Naskh for Arabic body copy — reusing that convention rather than
   re-declaring it here. */
.story-card-grounding {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-wrap: break-word; /* defensive: same reasoning as .story-card-quote —
                                 real 200-350 word interpretation text lands here in Slice 2 */
}

.story-card-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.story-card-deeper {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gold);
}

/* ── Gate sub-card (Slice 4 — "summary-then-gate") ────────────────────── */
.story-card-gate {
  text-align: center;
  padding: var(--space-sm) 0 2px;
}
.story-card-gate-icon {
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: var(--space-xs);
  /* Calm rule: glow ≤10px blur, ≤.15 opacity — same cap the progress-ring
     fill above already respects. */
  filter: drop-shadow(0 0 6px rgba(255,212,112,0.12));
}
.story-card-gate-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
}
/* Same gold→orange→pink gradient pill as app.html's .cta-gradient (not
   imported here — cards.css/cards.js are a standalone chassis usable
   outside app.html, e.g. dev-cards-demo.html, so the visual token is
   restated rather than depended on cross-file). */
.story-card-gate-cta {
  background: linear-gradient(135deg, var(--gold), var(--orange), var(--pink));
  border: none;
  padding: 10px 22px;
  border-radius: var(--radius-full, 999px);
  color: var(--bg-deep);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.story-card-gate-cta:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(255,157,80,0.3);
}

/* ── Progress marker (temporal cards) ─────────────────────────────────── */
.story-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.story-progress-ring { width: 28px; height: 28px; flex: 0 0 auto; }
.story-progress-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}
.story-progress-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  /* Calm rule: glow ≤10px blur, ≤.15 opacity. 6px/.12 stays under both caps. */
  filter: drop-shadow(0 0 6px rgba(255,212,112,0.12));
}
.story-progress-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Carousel ─────────────────────────────────────────────────────────── */
.story-carousel {
  position: relative;
  overflow: hidden;
}
.story-carousel-track {
  display: flex; /* deliberately plain `row`, NOT row-reverse — see note below */
  touch-action: pan-y;
  transition: transform 0.28s var(--ease);
}
.story-carousel-track.is-dragging {
  transition: none;
}
/* RTL mirror: keep card DOM/data order identical in both languages (never
   reorder the array). A plain `flex-direction: row` inside a [dir=rtl]
   ancestor already auto-mirrors — main-axis start becomes the right edge —
   exactly like the browser's native RTL mirroring used elsewhere in this
   codebase. (Adding `row-reverse` here would double-flip it back to LTR
   geometry — confirmed by hand while visually verifying this slice, so it's
   deliberately absent.) This physical mirror is what makes "next" a
   swipe-right in Arabic and a swipe-left in English — see cards.js
   Carousel._dirSign(). */
.story-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 2px; /* keeps the focus outline / hover shadow from clipping */
}

.story-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.story-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.story-carousel-btn:hover { color: var(--gold); border-color: var(--border-hover); }
.story-carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.story-carousel-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.story-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-hover);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.story-carousel-dot.active {
  background: var(--gold); /* DL v2 calm rule — solid, never gradient */
  transform: scale(1.3);
}

/* ── Generic disabled-state guidance (Slice 4) ────────────────────────────
   Grayed control + inline reason, applied via cards.js's
   setControlGuidance()/clearControlGuidance(). Deliberately NOT scoped to
   .story-card/.btn — works on any focusable control, same
   framework-agnostic spirit as the rest of this chassis. Native
   `:disabled` styling (e.g. theme.css .btn:disabled — opacity 0.5) already
   applies to the control itself via the `disabled` attribute; the
   grayscale here is an additional, deliberately subtle cue (not a
   duplicate of the opacity dip) that a control is guidance-gated
   specifically, not just transiently disabled (e.g. mid-submit). */
.control-guided-disabled {
  filter: grayscale(0.5);
}
.control-guidance-reason {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.control-guidance-reason[hidden] { display: none; }