/* Avakode Hub — scene «wareaudit» (assets/js/scenes/wareaudit.js): the invoice, the rate card, the letter (lane 1.0b).
   Loaded by inc/scenes.php on a family page whose stage is this scene. Classes: .wa-* only; the common parts (.sc-head,
   .sc-sample, .sc-panel, .sc-stamp), the stage, the rail and the caption are scene.css. */

/* The height of the stage before the module arrives = the height it takes (measured; e2e: ≤ 4px apart at 1440, 768, 390).
   --stage-h: the two-column stage; --stage-h-narrow: a window ≤ 720px (rail on top, one column). From 721px up to ≈ 794px
   (the page padding takes 32px, the stage goes one column when its box is ≤ 760px) the rail is on the left and the stage
   is already one column, hence the middle value. If the family page changes its padding, re-measure. */
.hub-scene[data-scene="wareaudit"] { --stage-h: 546px; --stage-h-narrow: 874px; }
@media (min-width: 721px) and (max-width: 794px) {
  .hub-scene[data-scene="wareaudit"] { --stage-h: 835px; }
}
/* the narrowest phones (lane 5.6, measured every pixel with ?static=1, 16.10.2026): below 362px the rows' text wraps, the stage is taller */
@media (max-width: 361px) { .hub-scene[data-scene="wareaudit"] { --stage-h-narrow: 890px; } }
@media (max-width: 354px) { .hub-scene[data-scene="wareaudit"] { --stage-h-narrow: 887px; } }
@media (max-width: 340px) { .hub-scene[data-scene="wareaudit"] { --stage-h-narrow: 904px; } }
@media (max-width: 318px) { .hub-scene[data-scene="wareaudit"] { --stage-h-narrow: 921px; } }

/* columns: invoice 50 %, its tags in the gap, rate card 28 % top right, letter 36 % bottom right */
.wa-invoice { position: relative; width: 50%; }
.wa-row {
  position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr) 70px 64px; gap: 8px;
  padding: 6px 8px; border-top: 1px solid var(--line);
}
.wa-row:last-child { border-bottom: 1px solid var(--line); }
.wa-row > span { position: relative; }
.wa-row .c1 { color: var(--fg-2); }
.wa-row .c2,
.wa-row .c3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-row .c4 { text-align: right; font-variant-numeric: tabular-nums; }
.wa-row > .wa-hot {
  position: absolute; inset: 0; border-left: 2px solid var(--signal); border-radius: 4px;
  background: rgba(124, 92, 252, .16); pointer-events: none;
}
.wa-row > .wa-tag {
  position: absolute; left: calc(100% + 10px); top: 7px; white-space: nowrap;
  font-size: 10px; letter-spacing: .06em; color: var(--signal-hot);
}
.wa-beam {
  position: absolute; left: 22px; top: 10px; width: calc((100% - 44px) * .5); height: 24px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124, 92, 252, .22) 40%, var(--signal) 50%, rgba(124, 92, 252, .22) 60%, transparent);
}
.wa-rate { position: absolute; right: 22px; top: 22px; width: 28%; padding: 12px 14px; }
.wa-rate-line { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); color: var(--fg-2); }
.wa-rate-line span:last-child { color: var(--fg); font-variant-numeric: tabular-nums; }
.wa-rate-line.is-missing span:last-child { color: var(--signal-hot); }
.wa-letter { position: absolute; right: 22px; bottom: 18px; width: 36%; padding: 14px 16px 16px; }
.wa-letter-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.wa-letter-line em { font-style: normal; font-size: 10.5px; color: var(--signal-hot); }
.wa-letter-line b { font-weight: 500; font-variant-numeric: tabular-nums; }
.wa-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--signal); }
.wa-total span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.wa-total b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--signal-hot); }
.wa-fly {
  position: absolute; left: 0; top: 0; display: flex; gap: 14px; padding: 5px 10px; white-space: nowrap; pointer-events: none;
  border: 1px solid var(--signal); border-radius: 4px; background: #1A1430; color: var(--fg); opacity: 0;
}
.wa-fly b { font-weight: 500; color: var(--signal-hot); }

/* the tags of the lit rows stand in the gap right of the invoice; on a container narrower than 1040px the gap is too small
   for the letter that is closing in (the longest tag, «above rate card · $7.10», is ~140px): they move into the flow, a
   second line of their row, at 12px (the type is not made smaller to make room; e2e: no overlaps from 800 to 1250px) */
@container (max-width: 1040px) {
  .wa-row > .wa-tag { position: static; grid-column: 1 / -1; padding-top: 2px; font-size: 12px; white-space: normal; }
}

@container (max-width: 900px) {
  .wa-invoice, .wa-letter, .wa-fly { font-size: 12px; }
  .wa-row { grid-template-columns: 76px minmax(0, 1fr) 62px 56px; gap: 6px; padding: 5px 6px; }
  .wa-rate { width: 26%; padding: 10px 11px; font-size: 11.5px; }
  .wa-letter { width: 40%; }
  .wa-letter-line { grid-template-columns: minmax(0, 1fr) auto; }
  .wa-letter-line em { display: none; }
}

/* a narrow stage (by its own width, not the window's): one column — the invoice, then the rate card (compact, a block in
   the flow: the tag «above rate card · $7.10» points at it), then the letter */
@container (max-width: 760px) {
  .wa-invoice { width: 100%; }
  .wa-row { grid-template-columns: 66px minmax(0, 1fr) 52px 50px; }
  .wa-beam { left: 16px; top: 4px; width: calc(100% - 32px); }
  .wa-rate { position: relative; right: auto; top: auto; width: 100%; margin-top: 14px; padding: 8px 12px; }
  .wa-rate-line { padding: 3px 0; }
  .wa-letter { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 26px; }
  .wa-total b { font-size: 18px; }
}

/* the narrowest phones (the stage ≤ 320px, a window up to ~350px): the item column gets a little room (the gap) and its text may
   wrap instead of being cut by the ellipsis («peak season» is ~80px, the column ~60px); the type is not made smaller */
@container (max-width: 320px) {
  .wa-row { gap: 5px; }
  .wa-row .c2 { white-space: normal; }
}