/* ============================================================
   scene — the schematic primitive kit.

   FR4: demo visuals are drawn, never screenshotted. Every one of
   the twelve scenes is composed from the primitives below. There
   is no per-scene CSS and no absolute positioning: a new scene is
   new *markup*, never a new stylesheet.

   Primitives:
     .win / .win-bar / .win-body   window chrome
     .s-dates                      a week of nights
     .s-chip  (+ .s-st)            a connection or a record, with status
     .s-tabs                       a segmented row with completion state
     .s-meter                      one proportion
     .s-rules                      label / value stack
     .s-figure                     one headline number
     .s-rows                       list rows with a leading marker
     .s-bars                       a small comparison chart
     .s-nodes                      trigger / decision / action flow
     .s-answer                     a cited answer
     .s-slots                      evidence placeholders
     .s-split                      two primitives side by side
   ============================================================ */

/* Scope font aliases to the drawings so their headings and small labels
   also use Inter. Page copy retains its own type families. */
.feature-scene, .aw, .win {
  --sans: var(--mock-font);
  --head: var(--mock-font);
  --mono: var(--mock-font);
  font-family: var(--mock-font);
  line-height: 1.6;
}

.feature-scene {
  container-type: inline-size;
  /* Scaled product previews still need readable labels on their tinted fills. */
  --cta: var(--cta-deep);
  --st-ok: var(--scene-ok);
  --st-wait: var(--scene-wait);
  --st-fail: var(--scene-fail);
  --st-off: var(--mute);
  --faint: var(--mute);
  --text-faint: var(--mute);
  --blk-bar: var(--scene-block);
}

/* ---------- Window chrome ---------- */

/* D2 · option C — an inset shell, not a floating card.
   No shadow: twelve shadowed scenes make the page bubble, and
   none of them ends up looking more important than another. The
   shadow tokens stay unspent so there is still an emphasis tool
   left for the one thing that genuinely needs to lift. */
.win {
  background: var(--scene-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-win);
  overflow: hidden;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surf);
  border-bottom: 1px solid var(--scene-line);
}
.win-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--scene-line);
  flex: 0 0 auto;
}
.win-title {
  font-size: var(--mock-title-size);
  font-weight: 600;
  color: var(--scene-ink);
  margin-inline-start: var(--s-2);
}
.win-meta {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

.win-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
  align-content: start;
}
/* Grid items default to min-width:auto, which lets one long child set
   the column width and push the rest under .win's overflow:hidden. */
.win-body > * { min-width: 0; }

/* ---------- Nights ---------- */

.s-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-1);
}
.s-dates b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  padding: var(--s-2) 0;
  border: 1px solid var(--scene-line);
  border-radius: var(--r-chip);
  background: var(--card);
}
.s-dates .is-booked {
  background: var(--blue-wash);
  border-color: transparent;
  color: var(--blue-deep);
}
.s-dates .is-blocked {
  background: var(--st-off-bg);
  border-style: dashed;
  color: var(--text-faint);
}

/* ---------- Chips ---------- */

.s-chips { display: grid; gap: var(--s-2); }

.s-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--scene-line);
  border-radius: var(--r-chip);
  background: var(--card);
  font-size: var(--small-size);
  color: var(--scene-ink);
  min-height: 36px;
}
.s-chip .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}
.s-chip .sub {
  color: var(--text-faint);
  font-size: 12px;
}

/* Status pill. Semantic colour only — never the accent. */
.s-st {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--st-off-bg);
  color: var(--st-off);
  white-space: nowrap;
}
.s-st.is-ok   { background: var(--st-ok-bg);   color: var(--st-ok); }
.s-st.is-wait { background: var(--st-wait-bg); color: var(--st-wait); }

/* ---------- Segmented row ---------- */

.s-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.s-tabs span {
  font-size: 12px;
  color: var(--text-faint);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--scene-line);
  border-radius: var(--r-chip);
  background: var(--card);
}
.s-tabs .is-done {
  color: var(--st-ok);
  background: var(--st-ok-bg);
  border-color: transparent;
}
.s-tabs .is-on {
  color: var(--text);
  background: var(--scene-fill);
  border-color: var(--scene-ink);
}

/* ---------- Meter ---------- */

.s-meter {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--scene-fill);
  overflow: hidden;
}
.s-meter i {
  display: block;
  height: 100%;
  width: var(--fill, 60%);
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
}

/* ---------- Label / value stack ---------- */

.s-rules { display: grid; gap: var(--s-2); }
.s-rules div {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--small-size);
  color: var(--scene-ink);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--scene-line);
}
.s-rules div:last-child { border-bottom: 0; padding-bottom: 0; }
.s-rules u {
  margin-inline-start: auto;
  font-family: var(--mono);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.s-rules .is-total u { color: var(--blue-deep); }

/* ---------- One number ---------- */

.s-figure {
  font-family: var(--head);
  font-weight: var(--h-weight);
  font-size: clamp(30px, 8cqw, 42px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.s-figure small {
  display: block;
  font-family: var(--sans);
  font-size: var(--small-size);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-faint);
  margin-top: var(--s-1);
}

/* ---------- List rows ---------- */

.s-rows { display: grid; gap: var(--s-2); }
.s-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-chip);
  background: var(--scene-fill);
  font-size: var(--small-size);
  color: var(--scene-ink);
  min-height: 38px;
}
.s-row .who { font-weight: 600; color: var(--text); }
.s-row .via {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}
.s-row .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-row.is-active { background: var(--blue-wash); }

/* ---------- Bars ---------- */

.s-bars { display: grid; gap: var(--s-2); }
.s-bars div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--s-3);
  font-size: 12px;
  color: var(--scene-ink);
}
.s-bars i {
  display: block;
  height: 8px;
  width: var(--w, 50%);
  border-radius: var(--r-pill);
  background: var(--blue);
  opacity: .55;
}
.s-bars div:first-child i { opacity: 1; }
.s-bars u {
  text-decoration: none;
  font-family: var(--mono);
  text-align: end;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Flow nodes ---------- */

.s-nodes { display: grid; gap: var(--s-1); }
.s-node {
  display: grid;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--scene-line);
  border-radius: var(--r-field);
  background: var(--card);
}
.s-node .k {
  font-size: 10px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.s-node .v { font-size: var(--small-size); color: var(--text); }
.s-node.is-draft { border-style: dashed; background: transparent; }
.s-link {
  justify-self: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1;
}

/* ---------- Cited answer ---------- */

.s-answer {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-field);
  background: var(--scene-fill);
  font-size: var(--small-size);
  line-height: var(--small-lh);
  color: var(--scene-ink);
}
.s-cite {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 11px;
  color: var(--blue-deep);
  background: var(--blue-wash);
  border-radius: var(--r-chip);
  padding: 2px var(--s-2);
  justify-self: start;
}

/* ---------- Evidence slots ---------- */

.s-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.s-slots i {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-chip);
  background: var(--scene-fill);
  border: 1px dashed var(--scene-line);
}
.s-slots i.is-filled {
  background: var(--sky);
  border-style: solid;
  border-color: transparent;
}

/* ---------- Two primitives side by side ---------- */

.s-split { display: grid; gap: var(--s-3); }
@container (min-width: 380px) {
  .s-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1024px) {
    .s-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
}

.s-cap {
  font-size: 11px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}

/* ---------- One handset ----------
   Three scenes stand a phone next to the Mac: Pre-arrival, CRM and Marketing.
   Each of those drawings is authored on a canvas of its own width (805, 1280
   and 1100) and then zoomed to fit the same figure, so a phone declared in
   canvas pixels lands at a DIFFERENT size on screen in each scene — 191, 153
   and 196 px wide before this block existed, with three status bars to match.

   The handset is therefore specified once here, in RENDERED pixels, against
   the figure width it is measured at (805px at 1440 viewport). Each scene
   converts with its own factor: canvas px = rendered px x (canvas / 805).
   The numbers in the scene files carry that arithmetic in their comments. */
.feature-scene {
  --phone-w: 193px;        /* 24% of the drawing */
  --phone-h: 377px;        /* 1.95:1, the ratio Pre-arrival already drew */
  --phone-frame: 6px;      /* the dark shell around the screen */
  --phone-radius: 30px;
  --phone-bar-h: 24px;     /* status bar: time, island, signal/wifi/battery */
  --phone-bar-type: 11px;
  --phone-island: 40px;
  --phone-island-h: 12px;
  --phone-icons-h: 11px;
}