/* ==========================================================================
   Recording a receipt (Board 05's second screen).

   This is one screen's rules on top of the design system, which App.razor links first. The screen is a
   single column: it asks one question at a time, and a rail beside a confirmation is somewhere for the eye to go
   instead of at the figures.

   NO TOKENS OF ITS OWN, and therefore no dark block and nothing to put back for print. The panels,
   tables, buttons, notices and asides are the design system's, unchanged; so is the CONFIRMATION BLOCK,
   which every screen that commits an act draws and which therefore cannot be owned by a file named for
   one of them. It is drawn on the warning tint, never the danger one: what it means is "this is the act",
   not "this cannot be undone" — the acts differ on that, and each screen's own words say which — and
   nothing has gone wrong. What is left here is the layout of the terms under the title, of the question forms
   (the amount, and the directed step's boxes), of the confirmation's width and the step beside it, and of what
   the screen says once the receipt is recorded.
   ========================================================================== */

/* --- The header ---------------------------------------------------------- */

.record-head { margin-bottom: 14px; }

/* The tenancy's terms the receipt is struck at. A row of facts rather than a heading, because the
   heading is the action and this is what the action is about. */
.record-for {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--text-muted);
    font-size: var(--fs-secondary);
    margin: 0;
}

/* --- The amount ---------------------------------------------------------- */

.record-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

/* What a press on the charges' boxes is told that no one box answers for: a row of its own between the table and the
   buttons, which would otherwise share a row with them in this flex form. */
.charges-answer { flex: 0 0 100%; }
.charges-answer > .field-error { margin: 0; max-width: none; }

/* What is left to place (DEC-0475), or what PropMan refused about the boxes (DEC-0476): a row of its own above the buttons,
   so they stand still as it changes, the figure and the refusal drawn in one cell, keeping its height while neither shows. */
.left-to-place { flex: 0 0 100%; margin: 0; display: grid; }
.left-to-place > span { grid-area: 1 / 1; }
.left-to-place > [hidden] { display: inline; visibility: hidden; }
.left-to-place > .left-refusal { margin: 0; }

/* Where a press on those boxes lands: its answer a third of the way down, with what it is about still in view above. */
.record-form tr:target, .charges-answer:target, .left-to-place:target, .receipt-confirm:target { scroll-margin-top: 30vh; }

/* What is told about one box, under it in its row: reads from the box's own left edge in a right-aligned cell. The
   slash through a zero in either line is the body font's own (Atkinson Hyperlegible), as in all running text. */
.record-form td .field-error { text-align: left; }

/* The other way to commit, a button under the allocation it is offered beside. */
.choose-charges { margin-top: var(--space-16); }

/* The receipt's confirmations kept to a readable measure, as a form is. */
.receipt-confirm { max-width: 72ch; }

/* The amount's "* required" note sits above the one-row question, clear of its labels. */
.req-note + .record-form { margin-top: var(--space-16); }

/* The amount's question, a one-row question laid as DEC-0451 lays the tenancy's (DEC-0452): each field a column of
   three tracks, label, box and answer, which the boxes share wherever they are side by side, so there a line under the
   amount leaves the day where it was, and the button too where it shares their line; a refusal wraps within its column.
   Its panel's width chooses the layout: the two boxes side by side from where they fit, the button starting the row one
   gap under them, and the button on their line from where the whole question fits, each breakpoint the width that
   layout was measured to need, in the question's widest state, the button (as the main one) included where it shares
   the line, and a quarter rem more, rounded up to a half rem; narrower, each box and then the button one gap under the
   last, the amount's pounds box shrinking to a panel narrower than itself, the date box keeping its width. A longer
   label, box or press needs its breakpoint measured again. On a line each column keeps its width, so a question grown past its breakpoint runs past its panel,
   where the walks see it. No item is stretched to its column, or a date box's wrapper would draw the calendar off the
   box's edge. A long refusal is unwalked, and under a default font smaller than 16px the question can run past its
   panel just above a breakpoint (src/README's gaps). */
:has(> .req-note + .record-form) { container: one-row / inline-size; }
.req-note + .record-form {
    display: grid;
    grid-auto-columns: minmax(0, max-content);
    justify-content: start;
    justify-items: start;
    align-items: center;
    gap: 0 12px;
}
.req-note + .record-form > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.req-note + .record-form > .field > * { grid-row: 2; }
.req-note + .record-form > .field > .field-head { grid-row: 1; }
.req-note + .record-form > .field > .field-error { grid-row: 3; contain: inline-size; }
.req-note + .record-form > .field + .field { margin-top: 12px; }
.req-note + .record-form > button { margin-top: 12px; }
@container one-row (min-width: 26rem) {
    .req-note + .record-form { grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; }
    .req-note + .record-form > .field + .field { margin-top: 0; }
    .req-note + .record-form > button { grid-area: 4 / 1; }
}
@container one-row (min-width: 35rem) {
    .req-note + .record-form { grid-template-rows: repeat(3, auto); }
    .req-note + .record-form > button { grid-area: 2 / auto; margin-top: 0; }
}

.record-form input[type="date"] { width: auto; min-width: 11rem; }

/* --- Once it is done ----------------------------------------------------- */

/* What the receipt settled, one line per charge. A list rather than a table: it is read once, as an
   acknowledgement, and a two-row table of one letting's periods is a grid pretending to be a sentence. */
.settled-lines {
    margin: 8px 0;
    padding-left: 18px;
    max-width: 68ch;
}

.settled-lines li { margin-bottom: 4px; }

/* --- Print --------------------------------------------------------------- */

/* Nothing. A printed page is a record of what was recorded and not a way to record it, and the design system's
   print block already hides every `form` — which is what both this screen's amount form and its confirmation
   block are, or are inside. This file declares no tokens either, so there is nothing to put back. */