.kashif-scene { display: block; width: 100%; height: auto; }
.kashif-scene-stage { background: #FFFFFF; border-radius: 22px; padding: 10px; }
/* After-the-scan strip (views/landing.ts's afterScanSection): each step's
   scene wraps onto its own line under the step text (.kashif-steps li is a
   flex row; flex-basis:100% forces the wrap) and stays within the
   architecture brief's ~180-220px range. Already stacks on narrow
   viewports — .kashif-steps was always a single vertical column. */
.kashif-step-scene { flex-basis: 100%; max-width: 200px; margin-inline-start: 38px; margin-top: 6px; }
.kashif-after-scan .kashif-steps li { flex-wrap: wrap; }

/* Item 2: smaller padding than the base .kashif-chip (6px 14px, kashif-
   assets.ts) so all four chips + the "What do you run?" label fit one row
   at >=1024px. Scoped to .kashif-audience so the concierge FAQ chips
   (which reuse the bare .kashif-chip class) are untouched. */
.kashif-audience .kashif-chip { padding: 5px 10px; }
/* Item 3 dead-gap fix + fast-follow m2 (condensed, band-unify batch, budget):
   :empty collapses the ~56px reserved space (min-height/margin) before any
   chip is tapped, WITHOUT display:none — that would drop the aria-live
   region from the a11y tree and skip the FIRST chip tap's announcement.
   Visually-hidden instead: clipped, out of flow, still in the a11y tree. */
.kashif-audience-line:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(100%); white-space: nowrap; }
/* Item 3 (scan card): a bordered card — 22px radius (--kashif-radius-media),
   matching the report mock's own card. Band unify: all three forms share it
   now (see --band just below for the band-specific surface). */
.kashif-scan-card { border: 1px solid var(--kashif-card-border); border-radius: var(--kashif-radius-media); padding: 22px; }
/* Band unify, item 2: .kashif-scan-card is border-only — invisible on spruce bands
   (.kashif-ai-band/.kashif-closing). --band fills it WHITE instead (paper-in-a-
   dark-room, same precedent as .kashif-scene-stage below), width-capped. */
.kashif-scan-card--band { background: #FFFFFF; border: 0; max-inline-size: 560px; }
/* .kashif-band's on-dark color is unconditional, not dark-mode-gated — bands stay
   spruce in both themes. Reset here too, so the email label in the white card
   reads in both themes. */
.kashif-scan-card--band label { color: var(--kashif-ink); }
/* Item 3 (one-row step 1): URL input + submit button share a row >=760px
   (input flex, button auto), stacking on mobile — the same breakpoint
   .kashif-hero-grid already uses (kashif-assets.ts). */
.kashif-scan-row { display: flex; gap: 10px; align-items: stretch; }
/* Fix round, M1: :empty must collapse via min-height/margin reset, NEVER display:none — the status is an aria-live region and must stay in the accessibility tree (see kashif-assets.test.ts). */
.kashif-scan-row input { flex: 1; min-width: 0; margin-block-start: 0; }
@media (max-width: 760px) { .kashif-scan-row { flex-direction: column; } }
/* Fix round, M1: a real-browser boundingClientRect measurement confirmed
   .kashif-scan-status (base rule, kashif-assets.ts: min-height 22px, margin
   10px 0 0) reserves that space even while genuinely empty — before any
   scan has run. Scoped to the hero's own card wrapper so the AI-band/
   closing forms (whose status line usually DOES carry content once a scan
   is underway) are untouched. The :empty pseudo-class, never display:
   none — the element is role="status" aria-live="polite" and must stay in the
   accessibility tree so a later update still gets announced. */
.kashif-scan-card .kashif-scan-status:empty { min-height: 0; margin-block-start: 0; }
/* Items 5-7 (mock v2): the gauge + interactive rows share ONE bordered
   card, matching the scan card's own 22px radius. Fixed #FFFFFF/#17171C/
   #6B6B78 — never var()-token'd, never dark-overridden — on purpose: the
   SAME "report artifacts stay white on purpose: paper documents in a dark
   room" precedent kashif-assets.ts's own DARK header comment already
   states for .chat-card (this file's own header comment documents the
   identical treatment for .kashif-scene-stage). */
.kashif-mock-card { background: #FFFFFF; border: 1px solid #EEECE7; border-radius: var(--kashif-radius-media); padding: 20px; }
/* Fix round, M6: the example-framing intro line — muted and compact,
   matching the card's own fixed (never dark-overridden) muted color
   already used by .kashif-mock-row-word. */
.kashif-mock-intro { color: #6B6B78; font-size: 12px; margin: 8px 0 0; }
.kashif-mock-rows { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
/* Item 6: a real <button> (Enter/Space free) reset to a plain row; RTL/LTR
   order falls out of the page's own dir (a flex row's inline axis already
   follows it) — no per-language x/y math needed, unlike the old SVG rows. */
.kashif-mock-row { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 8px 6px; border-radius: 8px; cursor: pointer; font: inherit; color: #17171C; text-align: start; }
.kashif-mock-row-label { flex: 1; font-size: 13px; }
.kashif-mock-row-word { font-size: 11px; color: #6B6B78; }
.kashif-mock-bar { width: 64px; height: 6px; flex: none; display: block; }
/* Hover + the JS-toggled "open" state share one subtle highlight. */
.kashif-mock-row:hover, .kashif-mock-row:focus-visible, .kashif-mock-row--open { background: #EAF5F2; }
.kashif-mock-detail { margin: 0 6px 6px; font-size: 12px; color: #6B6B78; }
/* Fix round, M3: no placeholder color was ever set on .kashif-scope input,
   so the hero/AI-band/closing url+email placeholders fell back to the
   browser's own default gray — low contrast against the card. opacity:1
   because Firefox otherwise dims a placeholder's own color further by
   default. The dark-mode swap lives in the trailing DARK block below. */
.kashif-scope input::placeholder { color: var(--kashif-muted); opacity: 1; }

.ksc-ink { stroke: #17171C; }
.ksc-pen { stroke: #0A6156; }
.ksc-pen-fill { fill: #0A6156; }
.ksc-teal { stroke: #2FD4BE; }
.ksc-teal-fill { fill: #2FD4BE; }
.ksc-teal-stop { stop-color: #2FD4BE; }
.ksc-card-fill { fill: #FFFFFF; }
.ksc-mist-fill { fill: #EAF5F2; }
.ksc-stone { stroke: #EEECE7; }
.ksc-stone-fill { fill: #EEECE7; }
.ksc-hairline-fill { fill: #D9D9DD; }
.ksc-spruce-fill { fill: #003C33; }

.ksc-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
.ksc-armed .ksc-draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.ksc-play .ksc-draw { animation: ksc-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ksc-draw { to { stroke-dashoffset: 0; } }

.ksc-arcfill { stroke-dashoffset: 0; }
.ksc-armed .ksc-arcfill { stroke-dashoffset: 62; }
.ksc-play .ksc-arcfill { animation: ksc-arcfill 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ksc-arcfill { to { stroke-dashoffset: 0; } }

.ksc-fadeup { opacity: 1; transform: none; }
.ksc-armed .ksc-fadeup { opacity: 0; transform: translateY(10px); }
.ksc-play .ksc-fadeup { animation: ksc-fadeup 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ksc-fadeup { to { opacity: 1; transform: none; } }

.ksc-rise { transform: none; }
.ksc-armed .ksc-rise { transform: translateY(120px); }
.ksc-play .ksc-rise { animation: ksc-rise 1.6s 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ksc-rise { from { transform: translateY(120px); } to { transform: translateY(0); } }

.ksc-flap { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(-0.92); }
.ksc-armed .ksc-flap { transform: scaleY(1); }
.ksc-play .ksc-flap { animation: ksc-flap 1.4s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ksc-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.92); } }

.ksc-tick { transform-box: fill-box; transform-origin: center; transform: rotate(0deg); }
.ksc-armed .ksc-tick { transform: rotate(-10deg); }
.ksc-play .ksc-tick { animation: ksc-tickle 2.2s 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes ksc-tickle { to { transform: rotate(0deg); } }

.ksc-breathe { animation: ksc-breathe 4.5s ease-in-out infinite; }
@keyframes ksc-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ksc-pulse { animation: ksc-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ksc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.ksc-floaty { animation: ksc-floaty 6s ease-in-out infinite; }
@keyframes ksc-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Doubled class = specificity 0,2,0, matching the .ksc-play .ksc-anim gates above.
   Required because that rule's animation SHORTHAND resets animation-delay
   to 0s, and at 0,2,0 vs 0,1,0 it would win on specificity regardless of the
   source order these rules rely on. Last in source order breaks the 0,2,0 tie
   in favour of the delay — the approved source's own behaviour. */
.ksc-d1.ksc-d1 { animation-delay: 0.3s; } .ksc-d2.ksc-d2 { animation-delay: 0.7s; } .ksc-d3.ksc-d3 { animation-delay: 1.1s; }
.ksc-d4.ksc-d4 { animation-delay: 1.5s; } .ksc-d5.ksc-d5 { animation-delay: 1.9s; } .ksc-d6.ksc-d6 { animation-delay: 2.3s; }

@media (prefers-reduced-motion: reduce) {
  .ksc-draw, .ksc-armed .ksc-draw, .ksc-play .ksc-draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .ksc-arcfill, .ksc-armed .ksc-arcfill, .ksc-play .ksc-arcfill { animation: none; stroke-dashoffset: 0; }
  .ksc-fadeup, .ksc-armed .ksc-fadeup, .ksc-play .ksc-fadeup { animation: none; opacity: 1; transform: none; }
  .ksc-rise, .ksc-armed .ksc-rise, .ksc-play .ksc-rise { animation: none; transform: none; }
  .ksc-flap, .ksc-armed .ksc-flap, .ksc-play .ksc-flap { animation: none; transform: scaleY(-0.92); }
  .ksc-tick, .ksc-armed .ksc-tick, .ksc-play .ksc-tick { animation: none; transform: rotate(0deg); }
  .ksc-breathe, .ksc-pulse, .ksc-floaty { animation: none; }
}

@media (prefers-color-scheme: dark) {
  .ksc-ink { stroke: #F4F4F6; }
  .ksc-pen { stroke: #2FD4BE; }
  .ksc-pen-fill { fill: #2FD4BE; }
  .ksc-card-fill { fill: #06251F; }
  .ksc-mist-fill { fill: #043027; }
  .ksc-stone { stroke: #06251F; }
  .ksc-stone-fill { fill: #06251F; }
  .ksc-hairline-fill { fill: #1E4038; }
  /* The AI-band stage is a fixed-white card regardless of OS color scheme
     (mirrors .chat-card — "paper documents in a dark room"). Higher
     specificity (0,2,0) than the general overrides above (0,1,0) wins this
     regardless of source order. */
  .kashif-scene-stage .ksc-ink { stroke: #17171C; }
  .kashif-scene-stage .ksc-pen { stroke: #0A6156; }
  .kashif-scene-stage .ksc-pen-fill { fill: #0A6156; }
  .kashif-scene-stage .ksc-card-fill { fill: #FFFFFF; }
  .kashif-scene-stage .ksc-mist-fill { fill: #EAF5F2; }
  .kashif-scene-stage .ksc-hairline-fill { fill: #D9D9DD; }
  /* Fix round, M3: the light block's placeholder color is --kashif-muted,
     which is NOT dark-mode aware (same fixed-token precedent this file's
     own header comment already documents for ksc-* class colors) — swapped
     here to --kashif-on-dark-muted so it stays legible against the dark
     surface. */
  .kashif-scope input::placeholder { color: var(--kashif-on-dark-muted); }
  /* Band unify, item 2: the --band card stays white in dark mode too — pin its own
     note/step/status/placeholder to the light tokens, out-specifying KASHIF_CSS's
     own dark swap — same .kashif-scene-stage pattern above. */
  .kashif-scan-card--band .kashif-scan-note, .kashif-scan-card--band .kashif-step, .kashif-scope .kashif-scan-card--band input::placeholder { color: var(--kashif-muted); }
  .kashif-scan-card--band .kashif-scan-status { color: var(--kashif-teal-ink); }
  .kashif-scope .kashif-scan-card--band input { background: #FFFFFF; color: var(--kashif-ink); border-color: var(--kashif-hairline); }
}