/* ==========================================================================
   The tenancy screen (Board 05).

   This is one screen's rules on top of the design system, which App.razor links first: every colour here
   comes from a token, and the tokens that are this screen's own are defined BELOW — the faintest accent
   tint the design uses to mark an active row, the overdue tint beside it, and the letting-in-force chip's
   green. Sizes and radii come from the system's scale wherever it gives one.

   THE ARREARS BAND IS NOT AMONG THEM. It began here, when this was the only screen drawing it; others do
   now, and a stylesheet is a GLOBAL namespace, so the scale and every part of its geometry are the design
   system's. What this file keeps is the header's own layout around the mark.

   Both themes, and print. The two dark blocks are written twice because a selector cannot be inside
   and outside a media query at once, and are compared token for token by
   TenancyScreenTests, so editing one and not the other reddens.
   ========================================================================== */

/* --- Tokens: light ------------------------------------------------------- */

:root {
    /* The faintest accent tint, for the row a scale or a timeline is currently AT. The system's
       --accent-tint is a step stronger; behind a whole table row it reads as a selection rather than
       as a mark. */
    --row-current: oklch(0.985 0.008 264);

    /* The pack's positive/valid colour, for the letting-in-force chip. Three values rather than one: a
       tint to sit on, an ink dark enough to read on it, and a hairline for the chip's edge. */
    --state-ok-text: oklch(0.40 0.13 150);
    --state-ok-tint: oklch(0.96 0.03 150);
    --state-ok-hairline: oklch(0.90 0.05 150);

    /* A row that owes money, and the tint the design puts behind it. Faint enough to sit under black
       text at the body size, which the danger tint proper is not. */
    --row-overdue: oklch(0.985 0.012 28);
}

/* --- Tokens: dark -------------------------------------------------------- */

/* Written twice, deliberately — see the file header. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --state-ok-text: oklch(0.82 0.12 150);
        --state-ok-tint: oklch(0.26 0.05 150);
        --state-ok-hairline: oklch(0.45 0.09 150);
        --row-current: oklch(0.24 0.04 264);
        --row-overdue: oklch(0.24 0.04 28);
    }
}

:root[data-theme="dark"] {
    --state-ok-text: oklch(0.82 0.12 150);
    --state-ok-tint: oklch(0.26 0.05 150);
    --state-ok-hairline: oklch(0.45 0.09 150);
    --row-current: oklch(0.24 0.04 264);
    --row-overdue: oklch(0.24 0.04 28);
}

/* --- One column ---------------------------------------------------------- */

/* Every panel takes the screen's width, so the schedule and the receipts — the screen's two long tables —
   fit their panels at 1280px with nothing clipped (the screen standard, layout 2). The panels' own margins
   space them. */
.tenancy-stack { min-width: 0; }

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

/* The facts on the left, the arrears figure — the most consequential fact on the screen — on the right, and
   the actions in one row under both. */
.tenancy-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-24);
    margin-bottom: var(--space-20);
}

.tenancy-identity { min-width: 0; flex: 1 1 28rem; }

.tenancy-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-16);
    color: var(--text-2);
    font-size: var(--fs-secondary);
    margin: 0;
}

/* A household member's facts line, set apart from what follows it. */
.member-facts { margin-bottom: var(--space-16); }

/* The records above this one, on the facts' edge, apart from each other. */
.tenancy-links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: var(--space-8) 0 0; font-size: var(--fs-secondary); color: var(--text-2); }

/* The arrears figure, pushed to the trailing edge as the design has it. */
.tenancy-arrears { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); }

.tenancy-acts { margin-bottom: var(--space-24); }

/* The question forms on the end's screen, the raise's and the opening rent's correction, tenancy steps this stylesheet
   owns. Their own names rather than the receipt screen's `.record-form`, which lays out a form of the same shape: a
   class declared for one screen and worn by another is a rule neither owner can change, and the stylesheets are one
   namespace, so the borrowing would not be visible from either file. Each is a one-row question, laid out with the
   proposal's below (see .proposal-form). */
.end-form,
.raise-form,
.reprice-form {
    --question-gap: 10px;
    margin: 0;
}

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

/* The opening rent's pounds box as wide as a rent (SCREEN-STANDARD §6 rule 1) and as the end's date box, in place of the
   design's own (`.money-field`), so its question goes onto one line where the end's does (DEC-0451). */
.reprice-form .money-field { max-width: 11rem; }

/* Its Cancel spaced from Preview by the row's own gap, as Preview is from the box, not by the way out's margin too. */
.reprice-form > .confirm-cancel { margin-left: 0; }

.end-form .field-label,
.raise-form .field-label,
.reprice-form .field-label { margin-bottom: 6px; }

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

/* The deposit-take's terms, the grant's deposit block asked on its own: a column of field sets as the grant's form
   lays out, under a name of its own for the reason above. */
.take-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 72ch;
    margin: 0 0 var(--space-16);
}


/* A label over the arrears figure. It shares the design system's name for the line above a screen's title,
   which takes the area's ink; over a figure it is a label, in the muted one. */
.tenancy-arrears .eyebrow { color: var(--text-muted); }

/* The figure is the screen's lead figure, in the figures face with tabular figures (DEC-0375). */
.tenancy-arrears .money {
    color: var(--danger-text);
    font-family: var(--font-figures);
    font-size: var(--fs-screen-title);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.tenancy-arrears.settled .money { color: var(--text); font-weight: 400; }

/* Credit held on no charge (DEC-0386): a quiet line under the lead figure, in its own size and colour, not the arrears'. */
.tenancy-arrears .credit-held { color: var(--text-muted); font-size: var(--fs-secondary); }
.tenancy-arrears .credit-held .money { color: var(--text); font-size: inherit; font-weight: 500; }

.arrears-figure {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* --- State chips --------------------------------------------------------- */

/* The letting-in-force chip, the shape the design system gives .tag-warn one colour over. The chip states its
   own meaning in words, so the colour is confirmation and never the message. */
.tag-ok {
    color: var(--state-ok-text);
    border-color: var(--state-ok-hairline);
    background: var(--state-ok-tint);
}

/* --- Rent in force ------------------------------------------------------- */

.rent-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.rent-now {
    flex: 0 0 280px;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-inset);
    padding: 13px 15px;
    background: var(--row-current);
}

.rent-now .eyebrow { color: var(--accent-text); }

/* A lead figure, in the figures face with tabular figures (DEC-0375). Money.razor still renders it, so the provenance
   rail is untouched. */
.rent-figure .money {
    font-family: var(--font-figures);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.rent-figure {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.rent-basis { font-size: var(--fs-secondary); color: var(--text-muted); }

/* Positioned so the panel body, which scrolls it, holds its rows' hidden words too (record.css's `.flush-scroll`). */
.rent-timeline { flex: 1 1 22rem; min-width: 0; position: relative; }

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

.as-of-form input[type="date"] { width: auto; min-width: 11rem; }
/* A day half typed is told on a line of its own under the question, not between the box and its button. */
.as-of-form > .field-error { order: 1; flex-basis: 100%; margin: 0; }
.as-of-form .field-label { margin-bottom: 6px; }

/* Two spacings the shared .note needs on this screen: tight against a panel heading, and stacked
   under the figure it explains. Written here rather than inline so the rule stays in the stylesheet. */
.note.tight { margin: 0; }
.note.stacked { margin: 6px 0 0; }
/* An acts row under a stacked note stands clear of it, the note's link not running into the button below. */
.note.stacked + .screen-acts { margin-top: var(--space-16); }

/* --- Tables -------------------------------------------------------------- */

/* A table that fills its panel edge to edge carries no margin of its own: the panel border is the frame,
   and the base rule's margin would leave a strip of surface above the column headings. */
.panel > table { margin: 0; }

/* The row a timeline or a schedule is currently at. A tint and nothing else would be colour alone, so
   the mark is a rule on the leading edge as well — and the row also states its own status in words, in
   a cell of its own or, in the narrow shell, under its reason, which is what a screen reader gets. */
tr.current > * { background: var(--row-current); }
tr.current > *:first-child { box-shadow: inset 3px 0 0 0 var(--accent); }

tr.overdue > * { background: var(--row-overdue); }
tr.overdue > *:first-child { box-shadow: inset 3px 0 0 0 var(--danger); }

tr.retired > * { color: var(--text-muted); }

.charge-state { white-space: nowrap; font-size: var(--fs-caption); }

/* A period is one line: its two days and the word between them. */
.schedule td:nth-child(2) { white-space: nowrap; }

/* The date the rent panel answers about, on the panel heading's line at its end. */
.panel-head > .as-of-form { margin: 0 0 0 auto; align-items: center; justify-content: flex-end; }
.panel-head > .as-of-form .field-label { margin: 0; }

/* --- Receipts ------------------------------------------------------------ */

/* A receipt is a group of rows: one, where it went whole to one charge, or its own row with its allocations under
   it. A rule between groups says where one receipt ends; within a group the allocations sit under their receipt. */
.receipts tbody.receipt + tbody.receipt > tr:first-child > * { border-top: 1px solid var(--border); }
.receipts tr.receipt-head > td { font-weight: 500; }
.receipts .row-sub { display: block; font-weight: 400; font-size: var(--fs-caption); color: var(--text-muted); }
.receipts td .tag { margin-left: var(--space-6); }
.receipts tr.allocation > td:nth-child(2) { white-space: nowrap; }
/* A period is as wide as the longest it runs to — a month by name, or a range of two days whose months' names are
   proportional in the figures face (DEC-0375) — so the mark after it lines up down the column whichever it is. */
.receipts .alloc-period { display: inline-block; min-width: 25ch; }

/* In the narrow shell a period wraps between its days — each day stays whole, a stamp being one line — and so does a
   charge's state, so the columns it keeps fit beside each other (the usability brief's item 8). The Due column steps
   aside there, so an overdue row's rule is drawn on the period, its first cell drawn. */
@media screen and (not (min-width: 56.25rem)) {
    .schedule td:nth-child(2), .receipts tr.allocation > td:nth-child(2), .charge-state { white-space: normal; }
    .receipts .alloc-period { min-width: 0; }
    .schedule tr.overdue > td:nth-child(2) { box-shadow: inset 3px 0 0 0 var(--danger); }
}

/* --- The allocation proposal --------------------------------------------- */

.proposal-form {
    --question-gap: 12px;
    margin: 0 0 14px;
}

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

/* A ONE-ROW QUESTION: the end's (one box, and two on its correction), the raise's, the opening rent's and the
   proposal's. Each field is a column of four tracks, label, rule, box and answer, which every field on the question's
   line shares, so there a line under one box leaves every other box where it was, and the press too where it shares
   their line; a refusal wraps within its column rather than widening it. How much of a question shares a line is
   chosen by the width of its panel (a container query, so a narrow window and a narrow panel are one case). Each
   breakpoint is the width that layout was measured to need, in the question's widest state and with its Preview where
   the press shares the line, and a quarter rem more, rounded up to a half rem (DEC-0451): the press on the boxes' line
   from there, and narrower one gap under the boxes, as a long press always was on a phone (DEC-0414 Ruling 4); a
   two-box question's boxes side by side from where the two fit, and narrower each box one gap under the last. A longer label, box or press needs its breakpoint measured again; and since the labels
   and press are in pixels, under a default font smaller than 16px a question can run past its panel just above its
   breakpoint (src/README's gaps). Stacked, the one column may shrink, so a choice or a pounds box fits a panel narrower
   than itself, as a wrapped row's fields could; a date box keeps its width. On a line each column keeps its width, so
   a question grown past its breakpoint runs past its panel, which the walks see, rather than squeezing a box that can
   shrink, which they would not. No item is stretched to its column: stacked boxes share one, and a date box's wrapper
   stretched past its input would draw the calendar off the box's edge. */
:has(> :is(.end-form, .raise-form, .reprice-form, .proposal-form)) { container: one-row / inline-size; }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) {
    display: grid;
    grid-auto-columns: minmax(0, max-content);
    justify-content: start;
    justify-items: start;
    align-items: center;
    gap: 0 var(--question-gap);
}
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > .field { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > .field > * { grid-row: 3; }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > .field > .field-head { grid-row: 1; }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > .field > .basis { grid-row: 2; }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > .field > .field-error { grid-row: 4; contain: inline-size; }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > .field + .field { margin-top: var(--question-gap); }
:is(.end-form, .raise-form, .reprice-form, .proposal-form) > :not(.field) { margin-top: var(--question-gap); }

/* One box, the end's or the raise's, beside its Preview. */
@container one-row (min-width: 17rem) {
    :is(.end-form:not(:has(> .field + .field)), .raise-form) { grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; }
    :is(.end-form:not(:has(> .field + .field)), .raise-form) > :not(.field) { grid-row: 3; margin-top: 0; }
}
/* The opening rent's box beside its Preview and its Cancel (DEC-0479), measured with the Cancel on the line. */
@container one-row (min-width: 22.5rem) {
    .reprice-form { grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; }
    .reprice-form > :not(.field) { grid-row: 3; margin-top: 0; }
}
/* Two boxes, the end's correction's and the proposal's, side by side with the press in a fifth row under the first, from
   where the wider pair fits; then each press on its boxes' line, from where its own question fits. The 32rem block names
   both, as the 26rem block does: :is() is as specific as its most specific choice, so the proposal's class alone would
   lose to the 26rem block. */
@container one-row (min-width: 26rem) {
    :is(.end-form:has(> .field + .field), .proposal-form) { grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-auto-columns: max-content; }
    :is(.end-form:has(> .field + .field), .proposal-form) > .field + .field { margin-top: 0; }
    :is(.end-form:has(> .field + .field), .proposal-form) > :not(.field) { grid-area: 5 / 1; }
}
@container one-row (min-width: 31.5rem) {
    .end-form:has(> .field + .field) { grid-template-rows: repeat(4, auto); }
    .end-form:has(> .field + .field) > :not(.field) { grid-area: 3 / auto; margin-top: 0; }
}
@container one-row (min-width: 32rem) {
    :is(.end-form:has(> .field + .field), .proposal-form) { grid-template-rows: repeat(4, auto); }
    :is(.end-form:has(> .field + .field), .proposal-form) > :not(.field) { grid-area: 3 / auto; margin-top: 0; }
}

tr.footer > * {
    border-top: 2px solid var(--border-strong);
    background: var(--surface-subtle);
    font-weight: 500;
}

/* --- Calls ---------------------------------------------------------------- */

/* The tenancy's latest calls (DEC-0382): each a line saying when and by whom, then what was said beneath it. */
.call-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); }
.call-list li { display: grid; gap: var(--space-4); }
.call-when { font-size: var(--fs-secondary); color: var(--text-2); }

/* What was said is typed: its line breaks are kept, a long address or link wraps rather than widening the page, and
   the panel shows a call's first lines, the whole of it on the calls' own screen. */
.call-said { white-space: pre-line; overflow-wrap: anywhere; }
.call-list .call-said { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

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

/* The design system forces its own tokens back to light for print; these are this screen's half of the
   same thing. Without it a reader working in dark prints a schedule whose row tints and chip are lifted for a
   dark surface and washed out on paper. */
@media print {
    :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
        --state-ok-text: oklch(0.40 0.13 150);
        --state-ok-tint: #ffffff;
        --state-ok-hairline: #71717a;
        --row-current: #ffffff;
        --row-overdue: #ffffff;
    }

    /* The form controls are not part of a printed schedule. */
    .as-of-form, .proposal-form { display: none; }
}