/* ============================================================
   home-scenes.css — the live app scenes on /home.

   These are RE-AUTHORED at site scale, not exported. The film's
   composition supplies three things and only three: the content
   strings, the SVG path data, and the choreography (what lands
   when, in what order). Its pixel values are a 1920-frame
   artefact and are discarded.

   Why not scale the 1920 frame down: a zigzag column is about
   466px, so 0.243x, which puts the composition's 14px labels at
   3.4px against the 12px WEB MINIMUM in tenonfold-tokens.css.
   There is no tuning that fixes that. (And scale(calc(100cqw /
   1920)) is invalid anyway: that expression is a length, scale()
   takes a number.)

   Source for content and choreography:
   C:\Users\heems\Videos\brag\tenonfold-home-2026-10-04-recut\
     composition\index.html

   Precedent for this approach: the room vignettes in
   home/index.html use byte-identical path data to the film's
   #rm1-#rm4 with the styling re-declared at site scale.

   COLOUR. Brand v1.2: White is the surface, Clay is the accent and
   is legible as type on White (4.70). The page-scoped ochre that
   briefly stood in for Clay is gone. Two defects in the source do
   not come over:
   - it declares a ninth token --tf-plate:#E8E5DA, which is not in
     tenonfold-tokens.css. Mapped to Stone as a FILL, with Ink
     type on it (about 11:1).
   - it sets "Overdue" in Clay at 19px. Guidelines section 9 bars
     Clay as body text at 4.12:1. The word is set in Quiet and the
     Clay dot carries the state, exactly as plandraw.py's care()
     already does.
   One Clay per composition, always a rule or a fill, never type.
   ============================================================ */

:root {
  /* GSAP power2.out, which is what every rise in the film used. */
  --sc-ease: cubic-bezier(.215, .61, .355, 1);
  --sc-step: .06s;
}

/* TIMING BUDGET. The observer fires the moment a figure's top edge
   touches the viewport bottom, so the whole run has to finish inside
   the time it takes to scroll the figure into view. Longest delay
   plus duration stays under 0.8s. The film's own positions are
   roughly twice this because they are locked to a 110 BPM grid; with
   no music that spacing is just dead air. */

/* ---------- the figure ---------- */
/* Deliberately NOT .dgm: that class gets horizontal scroll and a
   "scroll the drawing sideways" caption under 40rem, which is
   wrong for a scene that reflows. */

.sc {
  margin: 0;
}

.sc__stage {
  border: 1px solid var(--tf-rule);
  background: var(--tf-white);
  border-radius: 10px;
  box-shadow: var(--tf-shadow-1);          /* the app's own card radius */
  padding: 22px 20px;
  min-height: 300px;            /* shared, so the zigzag is not ragged */
  display: grid;
  align-content: start;
}

.sc figcaption {
  margin-top: 12px;
  font-size: var(--tf-size-small);
  color: var(--tf-quiet);
  line-height: 1.45;
}

.sc__label {
  display: block;
  font-size: var(--tf-size-label);
  font-weight: 500;
  letter-spacing: var(--tf-track-label);
  text-transform: uppercase;
  color: var(--tf-ink);
  margin-bottom: 4px;
}

/* ---------- primitives, ported at site scale ---------- */
/* Every one is prefixed. .btn, .row, .mark, .lab, .box, .f and
   .two are all either owned by site.css already or too generic to
   leave bare on a page that will keep being edited. */

.sc-backlink {
  font-size: var(--tf-size-small);
  color: var(--tf-quiet);
}

.sc-h {
  margin: 10px 0 0;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--tf-ink);
}

.sc-lab {
  font-weight: 500;
  font-size: var(--tf-size-label);
  letter-spacing: var(--tf-track-label);
  text-transform: uppercase;
  color: var(--tf-quiet);
}

.sc-box {
  margin-top: 7px;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--tf-rule);
  background: var(--tf-paper);
  font-size: 15px;
  color: var(--tf-ink);
  overflow-wrap: anywhere;      /* H80B-4417-22 must not push out at 334px */
}

/* The one accent in this composition: a rule on the field the read
   was unsure about. A border, never type. Ochre rather than Clay,
   because Clay is retired on this page -- see home-app.css. */
.sc-box--attention { border-color: var(--tf-clay); }

/* ---------- the shipped Row: mark over title over subtitle ---------- */

.sc-rows { margin-top: 18px; }

.sc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}

.sc-row + .sc-row { border-top: 1px solid var(--tf-rule); }

.sc-row__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.sc-row__mark {
  font-weight: 500;
  font-size: var(--tf-size-label);
  letter-spacing: var(--tf-track-label);
  text-transform: uppercase;
  color: var(--tf-forest);
}

.sc-row__title {
  font-weight: 500;
  font-size: 15px;
  color: var(--tf-ink);
  overflow-wrap: anywhere;
}

.sc-row__sub {
  font-size: 13px;
  color: var(--tf-quiet);
  overflow-wrap: anywhere;
}

.sc-row__chev {
  flex: none;
  font-size: 16px;
  color: var(--tf-quiet);
}

/* ============================================================
   MOTION

   One discipline holds the whole system together: NEVER write a
   100% keyframe. A block with only a `from` takes its terminal
   value from the element's own computed style, so the settled
   state is declared exactly once, in the ordinary rule, and is
   visible at first paint. The animation cannot drift away from
   it, and the page's "0 blocks hidden on first paint" standard
   cannot regress through an animation edit.
   ============================================================ */

@keyframes sc-rise {
  from { opacity: 0; translate: 0 var(--sc-y, 8px); }
}

/* Reduced motion is NOT handled by a reduce block. site.css:234
   already zeroes animation-duration globally under reduce, but it
   leaves animation-delay intact -- so with backwards fill a reduce
   visitor would get elements held invisible for their delay and
   then blinking in, staggered. The global rule would MANUFACTURE
   motion for the people it exists to protect.

   So the play rules only exist under no-preference. Under reduce
   .sc--play is an inert class and every scene is simply settled. */

@media (prefers-reduced-motion: no-preference) {

  .sc--play .sc-rise {
    animation: sc-rise .34s var(--sc-ease) backwards;
    animation-delay: var(--d, 0s);
  }

  /* One stagger ladder, reused by every group. A group declares
     only its own start; the step is inherited. */
  .sc--play .sc-stagger > * {
    animation: sc-rise .34s var(--sc-ease) backwards;
    animation-delay: calc(var(--d, 0s) + var(--i, 0) * var(--sc-step));
  }
  .sc-stagger > :nth-child(1) { --i: 0 }
  .sc-stagger > :nth-child(2) { --i: 1 }
  .sc-stagger > :nth-child(3) { --i: 2 }
  .sc-stagger > :nth-child(4) { --i: 3 }
  .sc-stagger > :nth-child(5) { --i: 4 }
  .sc-stagger > :nth-child(6) { --i: 5 }
  .sc-stagger > :nth-child(7) { --i: 6 }
  .sc-stagger > :nth-child(8) { --i: 7 }
}

/* ============================================================
   SCENE: search

   Film scene #s2b, 6.1s to 8.45s. Timing derived as
   (t_absolute - 6.1) * 0.55 and then tightened: every position in
   that timeline sits on a 110 BPM beat grid, and with no music a
   0.52s gap between three rows is dead air a scrolling visitor
   will not wait through.
   ============================================================ */

/* ---------- the data plate (scene: plate) ---------- */
/* Stone-as-fill stands in for the composition's ninth colour
   --tf-plate:#E8E5DA, which is not a brand token. Ink on Stone is
   about 11:1, so the type is comfortable. */

.sc-plateframe {
  position: relative;
  padding: 26px;
  display: grid;
  place-items: center;
}

/* Every label on the plate is Ink, not Quiet. Quiet on Stone measures 4.22:1, which guidelines §9 permits for
   large text and UI only, and these are 11-12px. An etched data plate has one ink anyway: the hierarchy here is
   carried by scale, case and tracking, which is where it belongs. */
.sc-plate {
  position: relative;
  width: 100%;
  max-width: 330px;
  background: var(--tf-stone);
  border: 1px solid rgba(26, 26, 24, .34);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-plate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(26, 26, 24, .26);
}

.sc-plate__brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: var(--tf-track-mark);
  text-transform: uppercase;
  color: var(--tf-ink);
}

.sc-plate__kind {
  font-weight: 500;
  font-size: var(--tf-size-label);
  letter-spacing: var(--tf-track-label);
  text-transform: uppercase;
  color: var(--tf-ink);
}

.sc-plate__rows { display: flex; flex-direction: column; gap: 9px; }

.sc-plate__row { display: flex; align-items: baseline; gap: 14px; }

.sc-plate__k {
  width: 88px;
  flex: none;
  font-weight: 500;
  font-size: var(--tf-size-label);
  letter-spacing: var(--tf-track-label);
  text-transform: uppercase;
  color: var(--tf-ink);
}

.sc-plate__v {
  font-weight: 500;
  font-size: 14px;
  color: var(--tf-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.sc-plate__foot {
  padding-top: 10px;
  border-top: 1px solid rgba(26, 26, 24, .26);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tf-ink);
}

.sc-screw {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(26, 26, 24, .30);
}

/* The viewfinder marks. In the film these settle, hold, then snap
   inward as the shutter fires. CSS cannot run two animations over
   one property and have them compose, so the whole sequence is ONE
   keyframe set whose percentages are the original timings divided
   by the total. The resting state is the closed position, which is
   the right still image for a figure that is not moving. */
.sc-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--tf-clay);
}
.sc-corner--tl { left: 6px;  top: 6px;    border-right: 0; border-bottom: 0 }
.sc-corner--tr { right: 6px; top: 6px;    border-left: 0;  border-bottom: 0 }
.sc-corner--bl { left: 6px;  bottom: 6px; border-right: 0; border-top: 0 }
.sc-corner--br { right: 6px; bottom: 6px; border-left: 0;  border-top: 0 }

@keyframes sc-corner {
  0%   { opacity: 0; scale: 1.5 }
  34%  { opacity: 1; scale: 1.18; animation-timing-function: cubic-bezier(.4, 0, .2, 1) }
  86%  { scale: 1.18 }
  /* no 100%: the resting state is the closed position */
}

/* ---------- the review thumbnail ---------- */

.sc-mini {
  width: 92px;
  flex: none;
  background: var(--tf-stone);
  border: 1px solid var(--tf-rule);
  border-radius: 8px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sc-mini__brand {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tf-track-mark);
  text-transform: uppercase;
  color: var(--tf-ink);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(26, 26, 24, .26);
}

.sc-mini__row { display: flex; flex-direction: column; gap: 1px }
/* Ink, for the same reason as .sc-plate__k: the mini plate is a Stone fill, and Quiet on Stone is 4.22:1, which
   §9 permits for large text and UI only. At 9px it is the smallest type on the page and the least forgiving. */
.sc-mini__k {
  font-weight: 500; font-size: 9px;
  letter-spacing: var(--tf-track-label); text-transform: uppercase;
  color: var(--tf-ink);
}
.sc-mini__v {
  font-weight: 500; font-size: 11px; color: var(--tf-ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.sc-reviewhead { display: flex; align-items: flex-start; gap: 14px }
.sc-reviewhead h4 { margin: 0; font-weight: 300; font-size: 22px; line-height: 1.1; color: var(--tf-ink) }
.sc-reviewhead p  { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--tf-quiet) }
.sc-reviewbody { margin-top: 18px }

/* ---------- chips, tags, units ---------- */

.sc-unit + .sc-unit { margin-top: 14px }

.sc-labrow { display: flex; align-items: center; gap: 8px }

/* was .mark in the composition; .mark is too generic to ship bare */
.sc-tag {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--tf-clay);
  background: var(--tf-white);
  font-size: 11px;
  color: var(--tf-clay);
}

.sc-chips { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 7px }

.sc-chip {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--tf-rule);
  background: var(--tf-paper);
  font-size: 13px;
  color: var(--tf-ink);
}

.sc-chip--on {
  border-color: var(--tf-forest);
  background: var(--tf-forest);
  color: var(--tf-paper);
}

.sc-two { display: flex; gap: 12px }
.sc-two > div { flex: 1; min-width: 0 }

.sc-none { margin-top: 7px; font-size: 14px; color: var(--tf-quiet) }

/* was .btn, which site.css owns */
.sc-cta {
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--tf-forest);
  background: var(--tf-forest);
  color: var(--tf-paper);
  font-weight: 500; font-size: 14px; letter-spacing: .02em;
}

.sc-row__act { flex: none; font-weight: 500; font-size: 13px; color: var(--tf-forest) }

/* ---------- the care calendar ---------- */

.sc-tabs { margin-top: 14px; display: flex; border-bottom: 1px solid var(--tf-rule) }
.sc-tab {
  padding: 0 11px 8px; margin-bottom: -1px;
  font-size: 13px; color: var(--tf-quiet);
  border-bottom: 2px solid transparent;
}
.sc-tab--on { font-weight: 500; color: var(--tf-ink); border-bottom-color: var(--tf-forest) }

.sc-caretop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.sc-caretop span { font-weight: 500; font-size: 13px; color: var(--tf-forest) }

.sc-cal { margin-top: 16px }
.sc-cal__head { display: flex; align-items: center; justify-content: space-between }
.sc-cal__head h4 { margin: 0; font-weight: 500; font-size: 15px; color: var(--tf-ink) }
.sc-cal__nav { font-size: 16px; color: var(--tf-ink) }

.sc-cal__wd { margin-top: 10px; display: grid; grid-template-columns: repeat(7, 1fr) }
.sc-cal__wd div {
  padding: 4px 0; text-align: center;
  font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--tf-track-label);
  color: var(--tf-quiet);
}

.sc-cal__grid { margin-top: 5px; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px }

.sc-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border-radius: 7px; padding: 4px 0; min-height: 42px;
}
.sc-cell--sel { background: var(--tf-forest) }
.sc-cell__d {
  display: flex; height: 26px; width: 26px;
  align-items: center; justify-content: center;
  border-radius: 50%; font-size: var(--tf-size-label); color: var(--tf-ink);
}
.sc-cell--out .sc-cell__d { color: var(--tf-quiet) }
.sc-cell--sel .sc-cell__d { color: var(--tf-paper) }

.sc-cell__m { display: flex; height: 7px; align-items: center; gap: 3px }
.sc-dot { display: block; height: 7px; width: 7px; border-radius: 50% }
.sc-dot--due { background: var(--tf-forest) }
/* Overdue. Clay against Forest-for-due. At 7px these are told apart
   by hue and by value, and on White both sit clear of the ground. */
.sc-dot--od  { background: var(--tf-clay) }
.sc-dot--war { border: 2px solid var(--tf-forest) }
.sc-cell--sel .sc-dot--due { background: var(--tf-paper) }
.sc-cell--sel .sc-dot--war { border-color: var(--tf-paper) }

.sc-day { margin-top: 14px }
.sc-day h5 { margin: 0; padding: 8px 0; font-weight: 500; font-size: 14px; color: var(--tf-ink) }

/* ============================================================
   PER-SCENE TIMING
   Derived as (t_absolute - t_scene_start) * 0.55, then tightened.
   Longest delay plus the 0.34s duration stays under 0.8s.
   ============================================================ */

.sc--plate  .sc-plateframe { --d: .04s }

.sc--search .sc-h       { --d: .06s }
.sc--search .sc-field   { --d: .16s; margin-top: 16px }
.sc--search .sc-rows    { --d: .30s }

.sc--review .sc-reviewhead { --d: .06s }
.sc--review .sc-reviewbody { --d: .22s }

.sc--care   .sc-caretop { --d: .04s }
.sc--care   .sc-cal     { --d: .18s }
.sc--care   .sc-day     { --d: .42s }

.sc--record .sc-h       { --d: .06s }
.sc--record .sc-ctawrap { --d: .20s; margin-top: 16px }
.sc--record .sc-rows    { --d: .34s }

/* The corner marks run their own compound keyframe rather than
   sc-rise, so they are declared outside the shared ladder. */
@media (prefers-reduced-motion: no-preference) {
  .sc--play .sc-corner {
    animation: sc-corner 1.1s var(--sc-ease) backwards;
    animation-delay: .10s;
  }
}

/* ---------- narrow ---------- */

@media (max-width: 52rem) {
  .sc__stage { min-height: 0 }
}

@media (max-width: 40rem) {
  .sc__stage { padding: 16px 14px }
  .sc-plate__k { width: 72px }
  .sc-cell { min-height: 36px }
  .sc-cell__d { height: 22px; width: 22px }
  .sc-chip { height: 27px; padding: 0 11px; font-size: var(--tf-size-label) }
  .sc-two { flex-direction: column; gap: 14px }
}