/* ==========================================================================
   Statement review (Board 02) — the screen that decides money.

   Loaded after the design system; everything here uses its tokens and its rules.
   Two tokens are defined below because the design system has none of the right weight and this is the
   only screen that needs them — see the token block for what they are and why the accent tint could not serve.

   THE ONE THING THIS FILE MUST NOT GET WRONG. A statement line is in one of four states, and two of them
   — hidden and removed — both mean "not on the landlord's document" while meaning opposite things to the
   payout. The distinction is carried by HOW MANY MONEY CELLS ARE EMPTY: a hidden line's Printed cell is
   empty and its Included cell is not; a removed line's are both. That is form, not colour, so it survives
   a monochrome print, a colour-blind reader and a stylesheet that failed to load. Every colour below is
   reinforcement of a distinction the markup already carries, never the carrier of one.

   The markers are the second encoding, drawn by StatementLineMark and styled by the design system.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

/* The Included column's wash, and the stronger one a hidden line's Included figure sits on. Neither could
   be `--accent-tint`: that token marks a whole panel — the current navigation row, the AS INCLUDED stack's
   header — and a table column washed at that strength competes with the figures in it. These are the
   faintest step the design draws, and the pair is what makes "the loud column" and "the loud cell in the
   loud column" two different things.

   Written twice for dark, exactly as the design system writes its palette twice and for the same reason: a
   selector cannot be inside and outside a media query at once. StatementReviewScreenTests compares the two blocks. */
:root {
    --included-tint: oklch(0.985 0.008 264);
    --included-tint-strong: oklch(0.97 0.02 264);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --included-tint: oklch(0.22 0.02 264);
        --included-tint-strong: oklch(0.28 0.06 264);
    }
}

:root[data-theme="dark"] {
    --included-tint: oklch(0.22 0.02 264);
    --included-tint-strong: oklch(0.28 0.06 264);
}

/* --- The screen's two columns -------------------------------------------- */

.statement-screen {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.statement-lines {
    flex: 1 1 auto;
    min-width: 0;
}

/* The right rail. Fixed at the design's width because two summary stacks, where it draws them, have to fit side by
   side in it — a rail that reflowed them one above the other would put the two figures a reviewer is comparing on
   different screens. */
.statement-rail {
    flex: 0 0 400px;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.statement-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}

/* The payout is what the reader opened the statement for. */
.statement-head > .head-payout { font-weight: 600; }

.state-chip {
    font-size: var(--fs-caption);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-badge);
    color: var(--accent-text);
    background: var(--accent-tint);
    border: 1px solid var(--accent-hairline);
}
/* The state's glyph, where it has one, at a chip's size and on the chip's line, so the chip keeps the head's baseline
   (Icon's rules, DEC-0375). */
.state-chip .icon { width: 12px; height: 12px; margin-right: var(--space-4); }

/* Action links in a paragraph, on other screens: kept here, where it began, whatever the statement pages draw —
   deleting it as their dead CSS breaks those screens. Spaced by the layout rather than by a separator character the
   markup would have to draw between them. */
.statement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 10px 0 0;
    font-size: var(--fs-secondary);
}

/* The warning that the document does not explain the payout, above the lines it is about. */
.statement-lines > .divergence { margin-bottom: 14px; }

/* --- The line filters ---------------------------------------------------- */

/* Drawn as the design system's tabs, which own their look, their chosen state and what prints. */

/* --- The line table ------------------------------------------------------ */

.line-table { margin-top: 0; }

.line-table th, .line-table td { vertical-align: middle; }

/* The columns' widths are the table's colgroup, and the state column keeps the design's padding. */
/* The cells and not the heading, which takes the header row's own size. */
.line-table td.kind-cell { color: var(--text-muted); font-size: var(--fs-secondary); }

/* The rule down the two money columns' leading edges is what makes them a pair rather than two more
   columns; why they are the same width is said at the colgroup (StatementLineTable). */
.line-table .printed-cell,
.line-table .included-cell {
    text-align: right;
    border-left: 1px solid var(--border-hair);
}

/* The one money column drawn where no line is hidden and not also removed (DEC-0384, DEC-0387) is a plain figure
   column: no pair to rule off and no payout tint, since nothing here differs from what is printed. */
.line-table .amount-cell { text-align: right; }

.line-table th.included-cell,
.line-table td.included-cell { background: var(--included-tint); }

.line-table th.included-cell { color: var(--accent-text); }

/* A hidden line's Included figure is the one number on the screen that exists only because the line is
   hidden — the money that is leaving without a printed line to explain it. */
.line-hidden td.included-cell {
    background: var(--included-tint-strong);
    font-weight: 500;
}

.line-hidden td.included-cell .money { color: var(--accent-text); }

/* A removed row is dimmed because it is counted in neither figure. NEVER a strike-through, and never on a
   hidden row: the design pack's rule and this repo's, for the same reason — a hidden line's money is real,
   and striking the row through says it is not. DEC-0387's ruling named a strike-through for a removed line, and the
   owner, asked, kept the removed row as it is here (DEC-0387 Ruling 1). */
.line-removed td, .line-removed th { color: var(--text-muted); }

.line-table tbody { border-bottom: 1px solid var(--border-hair); }
.line-table tbody:last-child { border-bottom: none; }
.line-table tbody > tr > * { border-bottom: none; }

/* The consequence, stated in words under the line it is about. The leader rule ties it to the row above
   rather than letting it read as a row of its own. */
.line-note td {
    padding: 0 12px 9px 38px;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.line-note td::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background: var(--border-strong);
    vertical-align: middle;
    margin-right: 7px;
}

/* The charge period an income line settled, set beside the description rather than under it: it is part
   of naming the line, not a consequence of a mark. */
.line-period { margin-left: 8px; color: var(--text-muted); }
.line-period .stamp { font-size: var(--fs-caption); }

/* The scope label on a rail panel heading, where a panel is one stack's and not both. */
.rail-scope {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

.line-flags { margin-left: 8px; }
.line-flags .tag { margin-left: 6px; }

/* The §4.15 marks, on the row they are about. Right-aligned against the table's edge, and kept on one line
   so a row offering more than one control reads across rather than stacking; the column's width is the
   colgroup's. The buttons are smaller than the design's default control because they sit inside a data
   row: a full-height button per line would make the table read as a form. */
.line-table .act-cell {
    text-align: right;
    white-space: nowrap;
}

.line-table .act-cell > button {
    height: 24px;
    padding: 0 8px;
    margin-left: 5px;
    font-size: var(--fs-caption);
}

/* The retain, set from the rail panel that shows it — ruled off from the figures above it, because it is the one
   thing in this rail that writes rather than reports, and inset from the panel's edge. What setting it does is the
   line before the button; the box and its button are under it, on one row where the form is wide enough (see
   .retain-row). The field and the button take the design system's own control rules; nothing here restates them. It
   is the container its row is laid out by. */
.retain-form {
    container-type: inline-size;
    margin-top: 10px;
    padding: 10px 11px 11px;
    border-top: 1px solid var(--border-hair);
}
/* Clear of the label under it — and more specific than tenancy.css's .note.tight, which loads later and would
   otherwise win. */
.retain-form > .note.tight { margin: 0 0 8px; }

/* A ONE-ROW QUESTION: A BOX, AND ITS BUTTON ON THE BOX'S OWN LINE — not on the label's above it, and not beside a
   refusal under it. Each field's own block is opened (display: contents), so its label, its box and its refusal take
   three rows of the question's grid, with no figure copied from the field's rules. The layout is chosen by a fixed
   width of the form (a container query, so a narrow rail and a narrow window are one case): from 22rem, room for the
   box at its narrowest beside the button and the retain's Cancel, the button takes the box's row and meets the box
   whatever the label or a refusal is, Cancel after it; narrower, the button takes a row of its own under the box, 10px
   under it, a refusal then sitting between the two, and Cancel a row under the button. A longer button or Cancel
   label needs the breakpoint raised. The grid places a field's label line, box and refusal; none of these fields carries a
   hint. The run's period question below is laid out the same way. */
.retain-row {
    display: grid;
    grid-template-columns: minmax(0, 14rem);
    column-gap: 10px;
    align-items: center;
    justify-content: start;
}
.retain-row > .field { display: contents; }
.retain-row > .field > .field-head { grid-area: 1 / 1; }
.retain-row > .field > .money-field { grid-area: 2 / 1; }
.retain-row > .field > .field-error { grid-area: 3 / 1 / auto / -1; }
.retain-row > button { grid-area: 4 / 1; justify-self: start; margin-top: 10px; }
/* The way out beside the button where it shares the box's row, under it where it does not (DEC-0437). */
.retain-row > .confirm-cancel { grid-area: 5 / 1; justify-self: start; margin: 10px 0 0; }
@container (min-width: 22rem) {
    .retain-row { grid-template-columns: minmax(6rem, 14rem) max-content max-content; }
    .retain-row > button { grid-area: 2 / 2; margin-top: 0; }
    .retain-row > .confirm-cancel { grid-area: 2 / 3; margin: 0; }
}

/* --- The markers --------------------------------------------------------- */

/* Each state's glyph is drawn by StatementLineMark and styled by the design system (.line-mark). */

/* What the marks drawn in the State column mean, under the table: each glyph with its words, side by side, wrapping
   where the table is narrow. */
.line-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-16);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}
.line-legend li { display: inline-flex; align-items: center; gap: var(--space-6); }

/* --- The two summary stacks ---------------------------------------------- */

.stacks {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* A stack drawn alone (DEC-0383) takes the rail's whole width, as the panels under it do: capped narrower, its edge
   stops short of theirs and the rail reads as two columns. Where the rail would be wide, the rail is what is capped
   (once it goes under the lines, in Narrow screens below). */
.stack {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-inset);
    background: var(--surface);
    overflow: hidden;
}

/* The payout stack is the one that decides what leaves the bank, so it carries the accent border and the
   ring. The other stack is what the landlord is shown; where the two disagree, this is the true one. */
.stack-included {
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.stack-head {
    padding: 9px 11px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
}

.stack-included .stack-head {
    background: var(--accent-tint);
    border-bottom-color: var(--accent-hairline);
}

.stack-head h3 {
    margin: 0;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.stack-included .stack-head h3 { color: var(--accent-text); }

.stack-head p {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* The label/figure pairs inside a stack or a rail panel. A TABLE and not a definition list, because these
   are rows of a table of figures, and because a bare div between dt/dd groups is not a conforming `dl`.
   The totals rule is drawn as a TOP border on the row that starts a total, in the same token the design
   system's `.figures` rule uses. It is 1px where that one is 2px, and the width is the whole of the
   difference: that rule needs the extra width to win a border-collapse tie against the row above, while the cells here
   set no bottom border for it to tie with. What it must NOT be is a fainter token — a rule that separates
   a column of figures from its total has to be seen. */
.stack-table {
    margin: 0;
    font-size: var(--fs-secondary);
}

.stack-table th, .stack-table td {
    padding: 4px 11px;
    border-bottom: none;
    font-weight: 400;
    color: var(--text-2);
}

.stack-table tbody tr:first-child > * { padding-top: 9px; }
.stack-table tbody tr:last-child > * { padding-bottom: 10px; }

.stack-table tr.rule > * { border-top: 1px solid var(--border-strong); padding-top: 7px; }
.stack-table tr.headline > * { font-weight: 600; color: var(--text); }

.stack-included .stack-table tr.headline > *,
.stack-included .stack-table tr.headline .money { color: var(--accent-text); }

/* An absent figure is an em dash, never a blank and never a zero. Money.razor renders it, so it carries
   `.money` like any other and inherits the cell's own colour — which is the point: given a rule of its
   own in a faint token it would read as the empty cell it is there to replace. */
/* --- The divergence ------------------------------------------------------ */

/* Two states, one shape, because they are two answers to one question and a reader should find the answer
   in the same place either way. The warning tint is the design system's; the agreement is the plain surface. */
.divergence {
    border: 1px solid var(--border);
    border-radius: var(--radius-inset);
    padding: 12px 13px;
    background: var(--surface);
    font-size: var(--fs-secondary);
    line-height: 1.55;
    color: var(--text-2);
}

.divergence-warn {
    border-color: var(--warning-hairline);
    background: var(--warning-tint);
}

.divergence p { margin: 0 0 7px; }
.divergence p:last-child { margin-bottom: 0; }
.divergence strong { color: var(--text); }

/* The rail's own heading, which is where the published-figures mark sits: it marks the whole rail, not
   a row. */
.rail-title {
    margin: 0;
    font-size: var(--fs-panel-head);
    font-weight: 600;
}

/* --- The rail's panels --------------------------------------------------- */

.rail-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-inset);
    background: var(--surface);
    overflow: hidden;
}

.rail-panel > h3 {
    margin: 0;
    padding: 9px 11px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rail-panel > h3 .money {
    margin-left: auto;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

/* A rail panel holds the same figure table the stacks do. */
.rail-panel .stack-table { width: 100%; }

/* --- Narrow screens ------------------------------------------------------ */

/* The rail goes under the lines rather than squeezing them: on a screen with a line table, below the width at which
   the table and the rail's fixed width both fit beside the sidebar, and the lines then take the full width; on any
   statement screen, below the narrower width. Two stacks stay side by side inside it, because comparing them is
   the job. Under the lines it is capped at a width two stacks share comfortably, so a label never sits a screen's
   width from its figure and a stack drawn alone keeps the panels' edge (DEC-0383). */
@media (max-width: 1760px) {
    .statement-screen.with-lines { flex-direction: column; align-items: stretch; }
    .statement-screen.with-lines .statement-rail { flex: 0 0 auto; width: 100%; max-width: 44rem; }
}

@media (max-width: 1180px) {
    .statement-screen { flex-direction: column; align-items: stretch; }
    .statement-rail { flex: 0 0 auto; width: 100%; max-width: 44rem; }
}

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

/* The design system forces the light palette and drops the chrome; this adds the two tokens it does not know about,
   and takes the column wash off the paper. The Printed/Included distinction is carried by which cells are
   empty, so it survives the wash going — which is the property the whole encoding was chosen for. */
@media print {
    :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
        --included-tint: #ffffff;
        --included-tint-strong: #ffffff;
    }

    /* Acts are not part of a printed page — this statement's, and the link paragraphs of the other screens that
       draw .statement-actions. The design system drops every control by hiding `form` and app.css drops the menus
       and toggletips; these are LINKS, outside both rules, so they need their own. */
    .statement-actions, .statement-acts { display: none; }
    .statement-screen { display: block; }
    .statement-rail { width: auto; }
    .stack, .rail-panel, .divergence { break-inside: avoid; }
    .stack-included { box-shadow: none; }
}

/* The run's period question, a one-row question as the retain's is (see .retain-row): its two days side by side, and
   its button and way out on the boxes' line from a form 48rem wide — sized for the asking state's button and Cancel,
   the widest the row draws — on a row of their own var(--space-16) under the boxes below that, with a refusal then
   between them, and the two days one above the other below 25rem. */
.period-form { container-type: inline-size; margin: 0; }
/* The month choice above the two days (DEC-0352), on their first column and as wide as a day's box. */
.month-choice { max-width: 12rem; margin-bottom: var(--space-16); }
.period-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 12rem));
    column-gap: 12px;
    align-items: center;
    justify-content: start;
}
.period-row > .field { display: contents; }
.period-row > .field:nth-child(1) > * { grid-column: 1; }
.period-row > .field:nth-child(2) > * { grid-column: 2; }
.period-row > .field > .field-head { grid-row: 1; }
.period-row > .field > .date-field { grid-row: 2; }
.period-row > .field > .field-error { grid-row: 3; }
.period-acts { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; margin-top: var(--space-16); }
@container (min-width: 48rem) {
    .period-row { grid-template-columns: repeat(2, minmax(0, 12rem)) max-content; }
    .period-acts { grid-column: 3; grid-row: 2; margin-top: 0; }
}
@container (max-width: 25rem) {
    .period-row { grid-template-columns: minmax(0, 12rem); }
    .period-row > .field:nth-child(2) > * { grid-column: 1; }
    .period-row > .field:nth-child(2) > .field-head { grid-row: 4; margin-top: var(--space-16); }
    .period-row > .field:nth-child(2) > .date-field { grid-row: 5; }
    .period-row > .field:nth-child(2) > .field-error { grid-row: 6; }
    .period-acts { grid-row: 7; }
}
/* The "* required" note sits above the row, clear of its labels. */
.req-note + .period-form { margin-top: var(--space-16); }
/* The release's two answers and its way out share one row, which wraps where its box is too narrow for all three. */
.release-actions { flex-wrap: wrap; }