/* Avakode Hub — scene «renew» (assets/js/scenes/renew.js): the payment dates, the reminder settings with the 7-day ruler, the
   reminder email, the journal entry (lane 4.5). Loaded by inc/scenes.php on a family page whose stage is this scene.
   Classes: .rn-* only; the common parts (.sc-head, .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption are
   scene.css. --rn is the colour of Renew Forge on the board (the accent of the registry, 6.9:1 on --bg, 6.6:1 on --bg-2: checked
   by tests/scene-renew.test.mjs). Before the signal the frame is in the hub palette: the colour is only on what lights — the
   highlighted payment and its tag, the ruler, the link of the email, two lines of the journal. The final frame (end of beat 3)
   is the default; the timeline hides what has not happened yet. Only transform and opacity move. */

/* The height of the stage before the module arrives = the height it takes, at every width (e2e: window 320 to 1500 every 10 px and
   at the edges of the steps, ≤ 4 px apart; measured every pixel at the edge of every step with the module loaded, 16.10.2026; the
   kit gives the stage min-height: var(--stage-h), or on a window ≤ 720px var(--stage-h-narrow), until the scene is built).
   The built height is a staircase of the window width: a text of the email or of the settings wraps one line more the narrower
   the stage is (a step of 17-18px on the wide stage, more on the narrow one, where the tag goes under the date), so the figures are one
   band per step. --stage-h: two columns from a 1122px window (673px) and four wider steps down to 835px (690 from 1063, 727 from
   1029, 745 from 975, 763 from 835); from 721 to 834px the rail is on the left and the stage is already one column (its own width ≤
   800px), hence 1216px. All of it is 18px more than on 16.10 morning: the journal excerpt got its «…» line on top (lane 5.1) and the
   bands were moved by one line (17.8px) and checked again at the same widths. --stage-h-narrow: a window ≤ 720px, one column with the rail on top; the base value is the one of a window
   ≤ 327px (16.10.2026, lane 5.6: the lines of the journal payload wrap at their spaces instead of being cut by an ellipsis, so the steps below 361px were measured again, every pixel). The steps are for the width the page has with the page padding of 16px and without a classic scrollbar (the headless
   browser; a 15px scrollbar moves a step by 15px): if the page padding, the stage markup, the text or a font changes, re-measure
   (figure height of the final frame, ?static=1): the e2e shows where. */
.hub-scene[data-scene="renew"] { --rn: #6FA287; --stage-h: 673px; --stage-h-narrow: 1581px; }
@media (max-width: 1121px) { .hub-scene[data-scene="renew"] { --stage-h: 690px; } }
@media (max-width: 1062px) { .hub-scene[data-scene="renew"] { --stage-h: 727px; } }
@media (max-width: 1028px) { .hub-scene[data-scene="renew"] { --stage-h: 745px; } }
@media (max-width: 974px) { .hub-scene[data-scene="renew"] { --stage-h: 763px; } }
@media (max-width: 834px) { .hub-scene[data-scene="renew"] { --stage-h: 1216px; } }

@media (min-width: 328px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1564px; } }
@media (min-width: 333px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1528px; } }
@media (min-width: 345px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1492px; } }
@media (min-width: 354px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1474px; } }
@media (min-width: 360px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1458px; } }
@media (min-width: 361px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1441px; } }
@media (min-width: 376px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1424px; } }
@media (min-width: 377px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1368px; } }
@media (min-width: 415px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1350px; } }
@media (min-width: 440px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1334px; } }
@media (min-width: 445px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1316px; } }
@media (min-width: 493px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1298px; } }
@media (min-width: 521px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1280px; } }
@media (min-width: 540px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1244px; } }
@media (min-width: 572px) { .hub-scene[data-scene="renew"] { --stage-h-narrow: 1226px; } }

/* two columns: what the planner reads and decides (payments, settings, the ruler) 46 %, what goes out and the record (the email, the journal) 54 % */
.rn-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.rn-left, .rn-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.rn-pay, .rn-set, .rn-mail, .rn-journal { position: relative; padding: 12px 14px 14px; }
.rn-pay { container: rnpay / inline-size; }
.rn-pro { padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.rn-sub { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* the payments: one row each; the first one lights and has a second column for its tag */
.rn-meta { margin: -2px 0 10px; font-size: 11px; color: var(--fg-2); }
.rn-row { position: relative; display: grid; grid-template-columns: 112px 64px minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 8px 10px; border-top: 1px solid var(--line); }
.rn-rows .rn-row:last-child { border-bottom: 1px solid var(--line); }
.rn-date, .rn-amt, .rn-tag { position: relative; }
.rn-date { font-variant-numeric: tabular-nums; color: var(--fg); }
.rn-amt { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.rn-tag { white-space: nowrap; font-size: 11px; letter-spacing: .04em; color: var(--rn); }
.rn-hot {
  position: absolute; inset: 0; border-left: 2px solid var(--rn); border-radius: 4px;
  background: color-mix(in srgb, var(--rn) 16%, transparent); pointer-events: none;
}

/* the settings the planner reads */
.rn-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.rn-note { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--fg-2); }
.rn-opt b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
.rn-opt i { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rn-span { padding: 2px 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.rn-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rn-ruler { position: relative; margin-top: 6px; }
.rn-ticks { display: flex; justify-content: space-between; height: 14px; }
.rn-ticks i { display: block; width: 1px; height: 100%; background: var(--fg-2); opacity: .5; }
.rn-fill {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; transform-origin: 0 50%;
  background: color-mix(in srgb, var(--rn) 30%, transparent); border-right: 2px solid var(--rn);
}
.rn-days-count { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 11px; color: var(--fg-2); }
.rn-days-num { min-width: 7ch; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--rn); }

/* the email, and the 7 days between the reminder and the payment */
.rn-subject { padding: 6px 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.rn-body { margin: 0 0 8px; font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--fg); }
.rn-cancel { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-2); }
.rn-link { color: var(--rn); text-decoration: underline; text-underline-offset: 3px; }

/* the journal: the stamp straddles the bottom edge (a zero-size slot on the bottom right corner; .sc-stamp keeps its common
   place relative to it), so the panel keeps room under the last line */
.rn-journal { padding-bottom: 22px; }
.rn-stamp-slot { position: absolute; right: 0; bottom: 3px; width: 0; height: 0; white-space: nowrap; }
.rn-entry { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--fg); }
.rn-entry i { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rn-payload { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: var(--fg-2); }
.rn-kv { position: relative; padding: 0 8px; overflow-wrap: break-word; } /* a line of the payload is up to ~264px: on a stage narrower than that it wraps at its spaces (it was cut by an ellipsis) */
.rn-kv.is-key { color: var(--fg); }
.rn-kv .rn-hot { border-radius: 3px; }

/* the stage's own width (not the window's): one column — payments, settings, email, journal */
@container (max-width: 800px) {
  .rn-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
/* the settings: a narrow stage keeps the value column a little narrower */
@container (max-width: 520px) {
  .rn-opt { grid-template-columns: minmax(0, 1fr) auto 46px; }
}
/* the payments panel is a container of its own (named): when the row is too narrow for the date, the amount and the tag side by
   side (the panel itself, not the window: a stage in two columns from 835px has a narrow left column up to about 1000px, a
   narrow window has a narrow stage), the tag goes under the date */
@container rnpay (max-width: 348px) {
  .rn-row { grid-template-columns: 104px minmax(0, 1fr); }
  .rn-tag { grid-column: 1 / -1; white-space: normal; }
}