/* ==========================================================================
   PropMan back office — the app's own rules, over the design system.

   THE DESIGN SYSTEM IS NOT THIS FILE. Its stylesheets are dist/propman-tokens.css (every token, in light,
   dark, print and forced colours, importing the faces) and components/bundle.css (every component's
   rules), copied from where the design system is designed, and linked before this file. A change to a
   token or a component is made there and copied again, never written over here: a copy edited in place is a
   copy the next one silently undoes. The exception is a patch made ahead of the design system, which
   DesignSystemCopyTests names and src/README "Known gaps" carries until the design system publishes it.

   WHAT THIS FILE HOLDS is what the design system does not declare and the app still draws:

     1. The page itself — the body's ground, the skip link, and the screen area's gutters, which the
        design system leaves to its consumer.
     2. What the design system's shell leaves to its consumer: the column's height, which of its two
        layouts — the sidebar's or the narrow one, the phone's by name — a window's width uses, and where
        the brand sits on the shell's grid.
     3. The app-wide names its screens still draw that the design system does not declare — among them a
        record's facts, a register row's links, the list of what IS built, and the dashboard's way
        onward.

   ONE RULE: a bare class the design system declares is not declared again here, or in a screen file.
   StylesheetTests holds it where both files declare the class in a list of bare classes alone. A
   stylesheet is a global namespace, so a second `.panel { … }` is a rule every screen gets from whichever
   file loads last. Where the old markup needs something the design system's rule does not give, it is
   written against a qualified selector — a descendant, or an element — which is the sanctioned way to
   specialise a shared name, and says which markup it is for.

   Every colour comes from a token; the one literal allowed is `transparent`, which has no light or dark
   form to get wrong.

   THE TYPEFACES ARE SELF-HOSTED, not linked from a font host. This app is used all day inside one office,
   and a stylesheet that fetches from a third party makes every page load a request to that third party —
   an availability dependency the app does not otherwise have, and a disclosure of who is reading, on a
   screen holding a firm's client money. dist/propman-fonts.css declares the faces against fonts/, and
   fonts/OFL.txt carries their licence and notices — save the figures face's, patched in ahead of the design
   system (DEC-0375), whose licence is fonts/inter/OFL.txt.
   ========================================================================== */

/* --- The page ------------------------------------------------------------ */

body {
    margin: 0;
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
}

/* Past the whole shell to the screen itself. This is a keyboard-heavy tool, and every control in the
   sidebar and the top bar otherwise stands between a keyboard reader and the content, on every page
   load. Hidden until it is focused, which is the one state it is useful in. */
a.skip {
    position: absolute;
    left: -9999px;
    z-index: 1;
}

a.skip:focus {
    left: 8px;
    top: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-raised);
    text-decoration: none;
}

/* A register is wider than the window long before the window is narrow: several money columns, each of
   them nowrap. What overflows is the SCREEN AREA and not the document, so the sidebar and the top bar
   stay where they are while the grid scrolls under them. Put on the scroll container rather than on the
   table, because a table made into a scrolling box stops being laid out as a table: its rows fall into an
   anonymous box that shrink-wraps, and the register then draws its column rules across part of its card.
   The design system caps and centres this container on a wide window; its gutters are this rule's. The
   shell's screen area only: the signed-out pages' main is the design system's auth page, with gutters of its own. */
main#screen {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--page-padding);
    overflow-x: auto;
}

/* --- The shell ------------------------------------------------------------ */

/* The shell itself is the design system's: the sidebar, its areas, the top bar, the trail, the name menu and
   the phone's header (bundle.css, Navigation). What is here is what that leaves to its consumer. */

/* The column the sidebar and the screen sit in is at least the window's height, so the sidebar's ground
   reaches the foot of a short page. */
div.shell { min-height: 100vh; }

/* The brand on the shell's own grid (DEC-0350 ruling 5), where the lockup's own padding would set it off it: in the
   sidebar and the phone's header set in so the word starts on the sidebar's label column, and in the sidebar as
   tall as the top bar, so their rules meet. */
div.side > a.brand {
    height: var(--topbar-height);
    padding: 0 18px 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-12);
}

header.ph-top > a.brand { padding: 0 18px 0 14px; }

/* "Demo data" (DEC-0374): muted ink on the inset ground, a fact stated on every screen rather than a status, so no
   status colour. In the top bar it sits beside the caller's menu, which then gives up its own push to the right; in the
   phone's header it follows the brand. */
span.demo-mark {
    padding: var(--space-2) var(--space-8);
    border: 1px solid var(--border);
    border-radius: var(--radius-badge);
    background: var(--surface-inset);
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 500;
    white-space: nowrap;
}
header.topbar > span.demo-mark { margin-left: auto; }
header.topbar > span.demo-mark + .who-menu { margin-left: 0; }
header.ph-top > span.demo-mark { margin-right: auto; }

/* WHICH OF THE TWO LAYOUTS THE WIDTH USES. The shell draws both (MainLayout says why) and the width is the
   design system's, in its brand book: the sidebar's shell answers min-width 56.25rem, so 900px is the
   sidebar's, and the narrow shell answers that query's negation — never a maximum of the same number, which
   here, the sidebar's shell being the default, would draw the narrow shell at 900. Below it: the phone's header and the back link, and no sidebar or
   top bar. display:none takes the hidden copy out of the tab order and out of speech. In rem, so a reader who
   has enlarged their browser's font reaches the narrow shape sooner.
   Screen-only, so paper — whose width can fall under the line — keeps the design system's print rules.
   THE NEGATION IS A LEVEL 4 QUERY, `not` inside the condition. An engine too old to read it drops each such
   block whole and draws the sidebar's shell at every width; Safari 16.0 to 16.3, which reads the design
   system's subgrid, is such an engine. A fractional maximum just under the line would reach it, and is not
   used: it moves the line a fraction below the brand book's, which asks for the negation. */
header.ph-top, p.ph-back { display: none; }

@media screen and (not (min-width: 56.25rem)) {
    header.ph-top { display: flex; }
    p.ph-back { display: block; }
    div.side, header.topbar { display: none; }
    /* The header is above the column here, so the column need not fill the window as well. */
    div.shell { min-height: 0; }
}

/* The narrow shape's gutters are a phone's only as far as a phone: at and above the width the design system's
   ph-screen takes the page padding at, the screen keeps main#screen's own page padding, so its gutter does not
   narrow as the window crosses the layout switch. */
@media screen and (not (min-width: 40rem)) {
    main#screen { padding: var(--space-16); }
}

/* A REGISTER IN THE NARROW SHELL keeps the columns a reader acts on there — what is owed, how late, which period —
   and the rest step aside (the usability brief's item 8): below the shell's own switch, a column whose col and cells
   are marked `.wide-only` is not drawn, and `.narrow-only` marks a second home there for what such a column carries
   that the screen needs on a phone, such as who to ring, a charge's kind and marks, or a rent's way back. A wider
   window draws every column. A way back to where the phone's back link leads, a notice's lone way on or an act going
   back, is to be marked `.wide-only` too (DEC-0467, DEC-0468, DEC-0472; OneWayBack; src/README names those not yet). It loses to a later or weightier display rule, such as
   `.screen-acts` or `.pm .button`: mark an element no such rule displays, a wrapper if need be. */
.pm .narrow-only { display: none; }
@media screen and (not (min-width: 56.25rem)) {
    .wide-only { display: none; }
    /* Its own line, flush with the cell, whatever second-part class it also carries. */
    .pm .narrow-only { display: block; margin-left: 0; }
}
/* ...and at a phone's width its cells close up, so the columns it keeps fit beside each other. */
@media screen and (not (min-width: 40rem)) {
    .pm .register th, .pm .register td { padding-inline: var(--space-8); }
}
/* --- Names no component page covers yet ----------------------------------- */

/* A record's own facts, label and value in two columns. */
.record {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 8px 0 18px;
    font-size: var(--fs-body);
}

.record dt { color: var(--text-muted); }
.record dd { margin: 0; }

/* A cell's marks, spaced apart. */
.flags .tag { margin-right: 8px; }

/* A register's higher rent, under the rent it follows. */
.higher-rent {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-caption);
}

/* The counterpart of `.absent`: what IS built, set in the body colour, because a reader asking what they
   can do is not reading a muted footnote. */
.present {
    font-size: var(--fs-secondary);
    max-width: var(--measure-prose);
    padding-left: 18px;
}

.present li { margin-bottom: 6px; }

/* A question asked by a GET above its answer, laid out as a form's field rows are, and not a form that commits. */
.question-form { display: flex; flex-direction: column; gap: 4px; max-width: 72ch; margin: 0; }

/* A journal's legs, and the bills a supplier payment pays: one row each, each box its column's width. */
.pm table.legs td { vertical-align: middle; }
.pm table.legs select, .pm table.legs .money-field { width: 100%; }

/* A group of radio choices under one label: the legend reads as a field's label, and the group draws no box. */
.pm fieldset.choice { border: 0; padding: 0; margin: var(--space-16) 0 0; min-inline-size: 0; }
.pm fieldset.choice > legend { padding: 0; }

/* An acts row closing a panel's body leaves the panel's own padding as its gap. */
.panel-body > .screen-acts:last-child { margin-bottom: 0; }

/* --- Where the calendar sits over a date box (DEC-0210) ------------------ */

/* PLACEMENT ONLY. The calendar's own look — the month, the days, today's ring, the chosen day, a day that
   cannot be chosen — is the design system's (bundle.css). What the design leaves to its consumer is where the
   panel and its button sit, and that is here. Every rule is under has-calendar or names a part the script
   adds, so none of it reaches a box with script blocked.

   The button takes the place of the browser's own picker glyph, which Chromium lets a page hide. A browser
   that does not keeps its glyph beside this one, and its own picker with it; typing works in either. */
.date-field.has-calendar input[type="date"] { padding-right: calc(var(--control-height) + var(--space-4)); }
/* A typed date or count is all digits, so it takes the figures face (DEC-0375). */
.date-field input[type="date"], .pm input[type="number"] { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.date-field.has-calendar input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

/* A BOX OFFERING ITS USUAL ANSWERS SHOWS ITS LIST MARKER before it is touched (DEC-0481): Chromium draws the marker of a box
   naming a datalist only on hover or focus, so an untouched box gave no sign a choice is offered. A browser drawing no
   marker still offers the list as the box is typed in. The marker is the browser's own triangle, not a select's
   chevron: a border-drawn chevron with its appearance and background removed still drew the triangle beneath it, and
   the manager ruled the native marker acceptable (M329). */
.pm input[list]::-webkit-calendar-picker-indicator { display: block; opacity: 1; }

.date-field > .calendar-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
}

/* A child of the body and against the window, so no panel or scrolling body around the box clips it and no
   form's rules for its buttons reach its days; the script sets where — below the box, or above it where
   there is room there and none below. */
body > .calendar {
    position: fixed;
    z-index: 4;
    max-height: 100vh;
    overflow-y: auto;
}

/* Its one control, Close, sits at the end of the foot. */
body > .calendar .calendar-foot { justify-content: flex-end; }

@media print {
    .date-field > .calendar-toggle, body > .calendar { display: none; }
}

/* --- A list screen's composition (the approved example screens' Arrears board) ------------------ */

/* WHAT THE DESIGN LEAVES TO A SCREEN: where its parts sit — the lead figure and its sentence, the filter bar,
   a register's group rows and tag cells. The parts themselves are the design system's; these place them, and
   set type or colour for a group's title and count and for a row that is a sentence about the rows. */
.head-figure { display: flex; align-items: baseline; gap: var(--space-12); flex-wrap: wrap; margin: 0; }
.head-figure + .notice { margin-top: var(--space-20); }
/* A notice with nothing to advise — a save that changed nothing, said in PropMan's own sentence above it (DEC-0417) —
   draws its note empty, and an empty note's gap would sit under the sentence as a blank line. */
.notice-note:empty { display: none; }
.head-figure .counts { margin: 0; }
.filters { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin: var(--space-20) 0 var(--space-12); }
.filters .tabs { margin: 0; }
.filters .field-label { margin: 0; }
/* The bar's label column: the band tabs start on the Landlord row's box edge (the design system's filter-row
   rule gives that label the same column). */
.filters > .field-label { min-width: 4rem; }
/* A group's name reads as a heading, its count quieter beside it. */
.group-title { display: inline-flex; align-items: center; gap: var(--space-12); font-weight: 600; }
.group-sub { font-weight: 400; color: var(--text-muted); font-size: var(--fs-secondary); }
/* A row that is a sentence about the rows, not a row of data, reads as a note. */
.register tr.row-note > td { color: var(--text-muted); font-size: var(--fs-secondary); }
/* A cell's own list (a journal's lines): no bullets, starting level with the row's other cells, an item that wraps
   indented under its first line and set apart from the next. */
.register ul.plain { list-style: none; margin: 0; padding: 0; }
.register ul.plain > li { padding-left: var(--space-12); text-indent: calc(-1 * var(--space-12)); }
.register ul.plain > li + li { margin-top: var(--space-4); }
/* A sent payout's bank reference, under the note that says it was sent, and a statement's withdrawn sent marks (DEC-0537),
   each apart from what is below it. */
.facts.payout-reference, .facts.payout-withdrawn { margin-bottom: var(--space-16); }
.cell-tags { display: inline-flex; gap: var(--space-4); margin-left: var(--space-8); vertical-align: 1px; }
/* The line under a screen's title that holds its actions: a register's main action — adding one — as the
   screen's primary button, above the filters and the rows it adds to; or a second action, a way to a related
   screen. */
.screen-acts { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin: 0 0 var(--space-20); }
/* A statement's save drawn among a page's notices, above what the page draws next (the tenancy page after an act took it
   back, the movements register after an amendment released it): set off by a notice's own gap, so its box does not sit
   on the line below (manager ruling M115). */
.lead-save { margin: 0 0 var(--space-24); }
/* A register's filter bar: its rows stacked, the search box above the Landlord row, each label in the bar's 4rem
   label column so every box starts on one edge — the design system's Combobox page holds a filter bar's other
   labels to the Landlord row's column. The search box's label here is its short word (SearchBox's Short), the
   whole phrase staying the box's name. On a phone the label takes its own line, as the Landlord row's does. */
.filter-bar > .search-box { align-items: center; margin: 0 0 var(--space-12); }
.filter-bar .search-field { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.filter-bar .search-field .field-label { min-width: 4rem; margin: 0 var(--space-16) 0 0; }
.filter-bar .search-field input { width: 16rem; max-width: 100%; }
.filter-bar > .filter-note { margin: calc(-1 * var(--space-4)) 0 var(--space-12); }
@media (max-width: 40rem) {
    .filter-bar > .search-box { align-items: flex-end; }
    .filter-bar .search-field { flex-wrap: wrap; flex: 1 1 10rem; }
    .filter-bar .search-field .field-label { flex-basis: 100%; margin: 0 0 var(--space-4); }
    .filter-bar .search-field input { width: auto; flex: 1 1 auto; }
}
/* A row whose ways on outgrow the w-20 column it declares wraps them inside it, from the column's start, rather
   than widening the column. The span keeps a width of its own inside that column, less the cell's padding at
   either density, so a narrow window that squeezes the table wraps them in fewer lines than one to a line —
   the register scrolls inside its container there, as the design system's Table page has it. */
.register .row-actions.wraps { flex-wrap: wrap; justify-content: flex-start; min-width: 16rem; }
/* A column head of several words over figures a fraction of its width may break between them, so the head does
   not set the column's width. */
.register th.head-wraps { white-space: normal; }

/* --- The screen standard's shared pieces (approved 2026-10-09) ------------- */

/* NOT YET THE DESIGN SYSTEM'S. The toggletip, the action menu, the Yes/No box and the required mark are owed to
   the next canvas pass; until it draws them they are placed and finished here, from the system's tokens, and
   each takes the look of the part it sits beside — the menu's panel is the name menu's, its button the base
   or quiet tier. */

/* A box's label line: the label, its required mark and its toggletip, one height whether or not a tip is drawn,
   so fields in a row start their boxes on one line. */
.field-head { display: flex; align-items: center; gap: var(--space-4); min-height: 20px; margin-bottom: var(--space-6); }
.field-head > .field-label { margin: 0; }
.req { color: var(--danger-text); margin-left: var(--space-2); font-weight: 600; }
.req-note { margin: 0; font-size: var(--fs-caption); color: var(--text-muted); }
/* What an act cannot undo, one line before its button, clear of the boxes above it. */
.pm .write-form > .consequence { margin-top: var(--space-24); }
/* …unless it is the form's first visible line, straight after the token, where there are no boxes to clear. */
.pm .write-form > input[type="hidden"] + .consequence { margin-top: 0; }
/* A form's way back, the one line before its button, as quiet as the notes above it. */
.pm .write-form > .act-line { margin-top: var(--space-16); font-size: var(--fs-secondary); color: var(--text-muted); }
/* A choice group under a field set, clear of it. */
.pm .field-set + .choice { margin-top: var(--space-16); }
/* A part of a field set drawn again as a choice beside it changes (refresh-part.js): its field keeps its track in the set. */
.pm .field-set > .refreshed-part { display: contents; }
/* ...and its line under the set saying what it is doing, which takes no room until it says something. */
.pm .part-said:empty { margin: 0; }
/* A form's section heading with its toggletip on the same line. */
.section-head { display: flex; align-items: center; gap: var(--space-4); }
.pm .write-form h3.section-head, .pm .rent-change-form h3.section-head { margin-top: var(--space-24); }
/* An act's button under its section heading, clear of it. */
.pm h3.section-head + .screen-acts { margin-top: var(--space-8); }
/* The rent change's reported-period answer spans its row rather than a field's usual width, so a chosen answer — what
   it does with money — is not cut short where the row can hold it. */
.pm .rent-change-form .field.field-wide { max-width: none; }
/* So do a compliance control's wide boxes: each Off answer says what switching it off does, and is not cut short where
   the row can hold it, and a reason with the row to itself takes the row. */
.pm .control-form .field.field-wide { max-width: none; }
/* A long set of boxes — a user's permissions — in as many columns as the form's width holds, read downwards in the markup's order, rather
   than one long list. */
.pm .choice-grid { display: block; columns: 14rem; column-gap: var(--space-16); }
.pm .choice-grid > .choice-option { break-inside: avoid; margin-bottom: var(--space-2); }
/* Three short boxes on one row, folding as the design system's field-set does. */
.pm .field-set.three { grid-template-columns: repeat(3, minmax(0, 14rem)); }
@media (max-width: 40rem) { .pm .field-set.three { grid-template-columns: minmax(0, 1fr); } }
/* A box as wide as what goes in it (the screen standard, layout 1): a sort code, an account number. */
.pm input.box-short, .pm select.box-short, .pm .field-set input.box-short, .pm .field-set select.box-short { width: 11rem; max-width: 100%; }
/* The same for a select whose longer answer is a sentence — the amend screen's keep-or-remove of a last day: the select
   sizes to that answer, and the wide field around it is not held to one track's width. */
.pm .field-set select.box-fit { width: auto; max-width: 100%; }
.pm .field.field-wide:has(> select.box-fit) { max-width: none; }
/* A unit-marked box (the design system's money box, and the rate box that borrows it) as tall as the boxes beside it:
   the frame's border is drawn outside the box inside it, so that box gives the frame's two pixels back. */
.pm .money-field input { height: calc(var(--input-height) - 2px); }
/* A rate's per-cent sign follows its figure (RateField), so the unit's rule is on the side it now meets the box. */
.pm .rate-field .unit { border-right: 0; border-left: 1px solid var(--border-mark); padding: 0 var(--space-12) 0 var(--space-8); }

/* THE WAY OUT AS A SECONDARY BUTTON (the owner, 2026-10-10). Cancel, and what a form offers instead of committing,
   stays a link, because it navigates, but wears the base tier beside the main button, so the two read as a pair of
   choices rather than an act and a footnote. The design system draws it as a link; this overrides that until the
   next canvas pass decides. */
.pm a.confirm-cancel, .pm a.cancel, .pm a.confirm-instead {
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    padding: 0 var(--space-16);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
}
.pm a.confirm-cancel:hover, .pm a.cancel:hover, .pm a.confirm-instead:hover { background: var(--surface-inset); color: var(--text); }
/* The press a confirmation draws in its way out's place (DEC-0445) wears the way out's look, the design system's
   size for it included, which its stylesheet gives the way out's classes alone. */
.pm a.confirm-instead { font-size: var(--fs-secondary); }

/* The toggletip: a quiet (i) on the label's line, and its one line in a small raised card under it. */
.tip { display: inline-flex; align-items: center; }
.pm button.tip-button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-badge);
    background: transparent;
    color: var(--text-muted);
    justify-content: center;
}
.pm button.tip-button:hover { background: var(--surface-inset); color: var(--text); }
.tip-button .icon { width: 14px; height: 14px; }
/* In a column heading the (i) is taller than the heading's words, so it gives the height back rather than pushing its
   heading below its neighbours. The word comes first in the markup, so a listener hears the column by its name; the
   (i) is drawn before it, so a figure's word keeps the column's edge. */
.register thead .tip { margin-block: -4px; }
.register thead .head-tip { display: inline-flex; flex-direction: row-reverse; align-items: center; }
/* A fact's label carrying a toggletip sits on its value's line, as a column head does. */
.facts dt .tip { margin-block: -4px; }
/* In a sentence the (i) sits on the words' middle, not on their baseline, where the button rides above the line; it
   gives the height back, so the line keeps its spacing. */
p > .tip { vertical-align: middle; margin-block: -4px; }
/* A tip's line is ordinary text wherever its button sits: a tip in a column heading would otherwise inherit the
   heading's capitals, weight, spacing and single line through the popover. */
.tip-line {
    font-size: var(--fs-secondary);
    color: var(--text-2);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    text-align: start;
}
/* Its own width up to the cap, not squeezed into what is left beside the button, so a line with no room on one
   side tries the others (position-try-fallbacks, below) instead of breaking to a word a line. */
.tip-line:popover-open {
    width: max-content;
    max-width: 36ch;
    padding: var(--space-8) var(--space-12);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-inset);
    box-shadow: var(--shadow-raised);
    line-height: 1.45;
}

/* The action menu: the button in the tier it stands in, and a panel of quiet actions, one to a line. */
.menu { display: inline-flex; }
.menu-button .icon { color: var(--text-muted); }
/* The chevron turns over while the panel is open, as every disclosure's does (the brand book's Content). */
.menu:has(> .menu-panel:popover-open) .menu-button .icon { transform: rotate(180deg); }
.pm .menu-row .menu-button { width: var(--control-height-quiet); }
/* A row's ⋯ is taller than the row's line of text; it overhangs the line by the same amount above and below, so its
   dots sit on the text's middle and the row stays one line high. */
.register .row-actions > .menu-row { margin: calc((1.5em - var(--control-height-quiet)) / 2) 0; }
/* A row's press that posts carries its form around it (a statement chooser's Run, DEC-0605): the form draws no box of its
   own, so its button is one of the row's actions, overhanging the row's line as a row's ⋯ does. */
.register .row-actions > form { display: contents; }
.register .row-actions > form > .button { margin: calc((1.5em - var(--control-height-quiet)) / 2) 0; }
[data-density="compact"] .register .row-actions > form > .button { margin: calc((1.5em - 22px) / 2) 0; }
.menu-dots { font-size: var(--fs-panel-head); line-height: 1; letter-spacing: 0.05em; }
/* A panel's own More, at the end of its head: the record the panel names, then what else can be done to it. */
.panel-head > .menu { margin-left: auto; }
.menu-panel:popover-open {
    min-width: 12rem;
    padding: var(--space-6);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}
.menu-panel form { margin: 0; display: flex; }
/* An item and the toggletip saying until when it stays open, on one line. */
.menu-item { display: flex; align-items: center; gap: var(--space-2); }
.pm .menu-item > .button, .pm .menu-item > form { flex: 1 1 auto; }
/* An act the menu names but does not offer — absent, not disabled: words, no control. */
.menu-absent { flex: 1 1 auto; padding: 0 var(--space-8); font-size: var(--fs-secondary); color: var(--text-muted); }
.tip-line .absent { padding: 0; margin: 0; max-width: none; font-size: inherit; color: inherit; }
.pm .menu-panel > .button, .pm .menu-panel > form > button, .pm .menu-item > .button, .pm .menu-item > form > button { justify-content: flex-start; width: 100%; height: var(--control-height-quiet); }
/* A note saying what the item above it does, on the items' own left edge. */
.menu-panel > .basis { padding: 0 var(--space-8); }
/* A press inside a sentence, where it writes the trail and so cannot be a link: the looks of a link in running text
   (bundle.css), and none of a button's box. */
.pm button.sentence-press {
    display: inline;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pm button.sentence-press:hover { background: none; color: var(--accent-hover); }

/* A quieter second part of a cell or a fact — a movement's description beside its kind, a band's days beside its
   pips — on the same line, so a register row stays one line high (the screen standard, actions 5). */
.row-sub, .row-days { margin-left: var(--space-6); font-size: var(--fs-caption); color: var(--text-muted); }
/* A cell's word for a fact not recorded, where its absence is what the column answers — the arrears grid's tenant. */
.row-empty { color: var(--text-muted); }
/* A cell that holds one thing in parts — a period, a date range, a band, a unit or a name: one line, never broken
   between its parts. */
.register td.one-line { white-space: nowrap; }
.fact-sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
/* A fact with its correction on its row (the screen standard, actions 3): the value and the action on one line, the
   action at the value's end rather than pushed to the panel's edge. */
.facts dd.with-act { display: flex; align-items: baseline; gap: var(--space-12); }
.facts dd.with-act > .row-actions { justify-content: flex-start; }
/* Masked bank details, a sort code and an account number read as one: never broken between them. */
.masked { white-space: nowrap; }
/* A second part that is one token — an invoice number — kept whole rather than broken at a hyphen. */
.row-sub.one-line { white-space: nowrap; }

/* A register's total row (the commission report's, DEC-0359): below a rule, as a figures table's totals line is, and in
   the weight a heading takes, so it reads as the rows' sum and not as one more row. 2px for the figures table's reason:
   under border-collapse a 1px rule on a shared edge goes to the row above. */
.register tfoot tr.row-total > * { border-top: 2px solid var(--border-strong); font-weight: 600; }

/* A subtotal among a register's rows (the client-money reconciliation's, DEC-0367): the rows above it summed, so it reads
   as their sum and not as one more row to add, in the total's weight without its rule. */
.register tbody tr.row-subtotal > * { font-weight: 600; }

/* On paper a table's footer repeats at the foot of every page it spans, which would print the whole under each page's
   part of the rows: there it is the table's last rows, printed once. */
@media print { .register tfoot { display: table-row-group; } }

/* A register that is a panel's read sits flush in it from inside the body: it reaches the panel's edges, while words
   above or below it, a refusal and a line saying there is nothing keep the body's padding. */
.panel-body > .flush-scroll { margin-inline: calc(-1 * var(--space-20)); }
.panel-body > .flush-scroll:first-child { margin-top: calc(-1 * var(--space-20)); }
.panel-body > .flush-scroll:last-child { margin-bottom: calc(-1 * var(--space-20)); }
.panel-body > * + .flush-scroll { margin-top: var(--space-16); border-top: 1px solid var(--border-subtle); }
/* A warning, or a disclosure, under a panel's facts stands clear of them. */
.panel-body > .facts + .consequence, .panel-body > .facts + .notice, .panel-body > .facts + .more { margin-top: var(--space-16); }
/* And a panel's buttons stand clear of a disclosure above them, or of a form. */
.panel-body > .more + .screen-acts { margin-top: var(--space-12); }
.panel-body > .write-form + .screen-acts { margin-top: var(--space-16); }
/* A warning or a line under a record's acts belongs to them, so it stands clear of the panels below. */
.pm .screen-acts + .consequence, .pm .screen-acts + .act-line { margin-bottom: var(--space-20); }


/* A record's facts under its title, and the one line naming what is not recorded, with its action. */
.landlord-facts, .property-facts, .bank-facts, .user-facts, .firm-facts, .supplier-facts { margin: 0 0 var(--space-16); grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); column-gap: var(--space-32); }

/* Each landlord's money once, beneath the bills it pays (M277): spaced from the bills' own table. */
.landlords-money { margin-top: var(--space-16); }

/* A document's Companies Act lines at its foot (SI 2015/17 regs 24-25): small and quiet, and printed. */
.legal-line { margin: var(--space-16) 0 0; font-size: var(--fs-caption); color: var(--text-muted); }

/* A state chip that opens the tenancy it names: the chip, with the link's focus ring and no underline. */
.state-link { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text-muted); white-space: nowrap; }

/* A Find's answer without script: the name takes the row's room, so the chevron ends the row whether or not a handle
   is drawn behind the name (DEC-0257 Ruling 3; FoundLandlords.Clashes says where). */
.pm .find-results a > .record-name { flex: 1 1 auto; }

/* A property's shape as a word with its glyph (PropertyKindMark): stated, never drawn as a control. */
.kind-word { white-space: nowrap; }
/* The glyph sits on the word's line rather than setting its height, so the fact's row keeps the list's rhythm. */
.kind-word .icon { color: var(--text-muted); vertical-align: -0.15em; margin-right: var(--space-6); }

/* A NUMBER WRITTEN AMONG WORDS (NumbersIn): the figures face, whose zero is plain, with the proportional figures of a
   sentence (DEC-0375). */
.num { font-family: var(--font-figures); font-variant-numeric: proportional-nums; }

/* A GLYPH LEADING A HEADING OR A KIND OF RECORD (Icon's rules, DEC-0375): a panel's heading and a search result's
   group in the muted ink, as the sidebar's glyphs are, and the trail's section in the trail's own ink; spaced from its
   words as a property's kind is. A button's and a chip's glyphs are spaced by their own rules. */
.panel-head h2 > .icon:first-child, .result-group > h2 > .icon:first-child {
    color: var(--text-muted); vertical-align: -0.15em; margin-right: var(--space-6); }
.crumbs li > a > .icon:first-child, .crumbs li > span > .icon:first-child { vertical-align: -0.2em; margin-right: var(--space-6); }

/* The way from a panel to the screen that acts on it, at the panel's foot. */
.panel-foot-link { margin: var(--space-16) 0 0 calc(-1 * var(--space-8)); }
.not-recorded { margin: 0 0 var(--space-24); font-size: var(--fs-secondary); color: var(--text-2); }

/* WHERE A POPOVER OPENS. Against the button that opened it — the toggletip's line and a menu's panel under it,
   a menu at a line's end opening back towards its start — where the browser can anchor one; a browser that
   cannot centres it in the window, which still reads. */
@supports (position-area: bottom) {
    .tip-line:popover-open { inset: auto; margin: var(--space-4) 0 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
    .menu-panel:popover-open { inset: auto; margin: var(--space-4) 0 0; position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
    .menu-end > .menu-panel:popover-open { position-area: bottom span-left; }
}

/* On paper nothing is pressed: a toggletip's button, a menu and a notice's action are left off. */
@media print {
    .tip, .menu, .notice > .notice-actions { display: none; }
}

/* --- What a circuit draws: the undo offer and the connection's notices (DEC-0369, DEC-0370) ------------------- */

/* NOT YET THE DESIGN SYSTEM'S, as the pieces above are not: a card raised over the foot of the window, on the surface,
   border and shadow the Landlord box's list floats on, as wide as its words and never wider than the window allows.
   Centred under the screen beside the sidebar where the sidebar's shell is drawn, and under the window below it. */
.undo-offer, .circuit-notice {
    position: fixed;
    z-index: 20;
    left: calc(50% + var(--sidebar-width) / 2);
    bottom: var(--space-24);
    transform: translateX(-50%);
    box-sizing: border-box;
    width: max-content;
    max-width: min(36rem, calc(100vw - 2 * var(--space-16)));
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    color: var(--text);
}
@media screen and (not (min-width: 56.25rem)) {
    .undo-offer, .circuit-notice { left: 50%; }
}
.undo-offer { display: flex; }
.undo-offer > p, .circuit-notice p { margin: 0; display: flex; align-items: center; gap: var(--space-8); }
.undo-offer > p .icon { color: var(--done-text); }
/* A refused undo is something gone wrong (the screen standard, 4.1), and stays until it is closed. */
.undo-offer.refused { align-items: flex-start; background: var(--warning-tint); border-color: var(--warning-hairline); }
.undo-offer.refused > div { display: grid; gap: var(--space-4); }
.undo-offer.refused > div > p { margin: 0; }
.undo-offer.refused > div > .undo-heading { display: flex; align-items: center; gap: var(--space-8); font-weight: 600; }
.undo-offer .undo-heading .icon { color: var(--warning-text); }

/* The framework sets a class on the reconnect notice as the connection drops, retries and gives up, and shows the
   fault notice by setting its display. Hidden until then; while it retries it says so, and once it has given up it
   offers the reload. */
.circuit-notice { display: none; }
.circuit-notice.components-reconnect-show,
.circuit-notice.components-reconnect-paused,
.circuit-notice.components-reconnect-failed,
.circuit-notice.components-reconnect-rejected,
.circuit-notice.components-reconnect-resume-failed { display: flex; }
.circuit-notice .circuit-lost { display: none; }
.circuit-notice:is(.components-reconnect-paused, .components-reconnect-failed, .components-reconnect-rejected, .components-reconnect-resume-failed) .circuit-retrying { display: none; }
.circuit-notice:is(.components-reconnect-paused, .components-reconnect-failed, .components-reconnect-rejected, .components-reconnect-resume-failed) .circuit-lost { display: flex; }
/* The three share one place. A notice about the connection takes the offer's while it shows, an offer being no use
   without one; and the reconnect notice shows only while something on the page is live (data-live), so a circuit left
   idle, its offer gone, asks nothing of the reader when it drops. */
body:has(.circuit-notice:is(.components-reconnect-show, .components-reconnect-paused, .components-reconnect-failed, .components-reconnect-rejected, .components-reconnect-resume-failed)) .undo-offer { display: none; }
/* The fault notice is shown by the framework setting its display, so it is read off that. */
body:has(#blazor-error-ui[style*="block"]) .undo-offer { display: none; }
body:not(:has([data-live])) #components-reconnect-modal { display: none; }

/* --- Charts (DEC-0371, DEC-0372) ------------------------------------------------------------------------------ */

/* NOT YET THE DESIGN SYSTEM'S: it has no chart palette. Each series' colour is a token's, named here by the tone a screen
   gives the series — a booked renewal the compliance scale's own Held colour — and the scale's ink and lines are the
   table's; a stacked segment is parted from the one under it by a line of the page the chart sits on. charts.js reads
   them off the figure, and its type's size off the scale's list, so a chart is drawn in the page's theme. */
.chart {
    --chart-fees: var(--accent);
    --chart-vat: var(--area-money);
    --chart-unbooked: var(--accent);
    --chart-booked: var(--comp-held);
    --chart-rent: var(--accent);
    --chart-unpaid: var(--accent);
    --chart-ink: var(--text-muted);
    --chart-grid: var(--border);
    --chart-surface: var(--app-bg);
    margin: 0;
}
.chart-plot { position: relative; height: 15rem; }
.chart-ticks { font-size: var(--fs-secondary); font-family: var(--font-figures); }
.chart-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }
.chart-swatch[data-series="fees"] { background: var(--chart-fees); }
.chart-swatch[data-series="vat"] { background: var(--chart-vat); }
.chart-swatch[data-series="unbooked"] { background: var(--chart-unbooked); }
.chart-swatch[data-series="booked"] { background: var(--chart-booked); }
.chart-swatch[data-series="rent"] { background: var(--chart-rent); }
.chart-swatch[data-series="unpaid"] { background: var(--chart-unpaid); }
/* In forced colours a background is taken away, and the swatch is what names a series beside the figure. */
@media (forced-colors: active) {
    .chart-swatch { forced-color-adjust: none; }
}
.chart-key { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: var(--space-8) 0 0; padding: 0; list-style: none;
    font-size: var(--fs-secondary); color: var(--text-2); }
.chart-key li { display: flex; align-items: center; gap: var(--space-6); }
/* Where the reader points: the category, then each figure ahead of its series' name and the column's total, on the
   surface the Landlord box's list floats on — over the column's top, or under it where there is no room above. */
.chart-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - var(--space-8))); pointer-events: none;
    padding: var(--space-6) var(--space-12); background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius-control); box-shadow: var(--shadow-raised); font-size: var(--fs-secondary); white-space: nowrap; }
.chart-tip.chart-tip-below { transform: translate(-50%, var(--space-8)); }
.chart-tip p { margin: 0; display: flex; align-items: center; gap: var(--space-6); }
.chart-tip .chart-tip-head { color: var(--text-muted); font-family: var(--font-figures); }
.chart-tip strong { color: var(--text); font-family: var(--font-figures); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-table { margin-top: var(--space-12); }
/* The table's categories and figures in the figures face, as the canvas draws them (DEC-0375). */
.chart-table tbody th, .chart-table tbody td { font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.chart-table > summary { cursor: pointer; width: max-content; display: flex; align-items: center; gap: var(--space-6);
    list-style: none; color: var(--text-2); font-size: var(--fs-secondary); }
.chart-table > summary::-webkit-details-marker { display: none; }
.chart-table > summary:hover { color: var(--text); }
.chart-table[open] .when-closed, .chart-table:not([open]) .when-open { display: none; }
.chart-table > .flush-scroll { margin-top: var(--space-8); }
/* A report's chart follows its list (the screen standard, layout 1), under a heading of its own. On paper the list is
   the report, and a chart's canvas and its closed table would print as a picture and an empty line. */
.pm .report-chart { margin-top: var(--space-32); }
.pm .report-chart > h2 { margin: 0 0 var(--space-12); font-size: var(--fs-panel-head); }
@media print {
    .report-chart { display: none; }
}

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

/* The design system forces the light palette on paper and drops its own chrome; this lets the screen area use
   the page. The phone's header and back link stay hidden on paper, the width switch above being screen-only. What a
   circuit draws is about this window and never about the record. */
@media print {
    main#screen { padding: 0; overflow-x: visible; }
    .undo-offer, .circuit-notice { display: none !important; }
}

/* What is drawn for paper alone: a read's notice under the session modal, which the design system does not
   print (ResultPanel says why the screen does not show it); and a label paper needs where the screen does not — the
   certificate expiries report's "Showing" beside the one tab that prints. */
@media screen {
    div.for-paper { display: none; }
}
@media screen {
    span.for-paper { display: none; }
}

/* --- A report: its acts and its question (DEC-0317, DEC-0318) ------------------------------------------- */

/* Print is drawn hidden until print.js shows it, and a button's own display would win over the attribute. On paper
   neither act is drawn; the question is a form, which the design system leaves off paper already, the landlord in force
   with it — the lead names them. What a report says about its file — that one was not made, or how to make one — is
   left off too, its links being ones nobody can press. */
.report-acts > [hidden] { display: none; }
@media print {
    .report-acts, .report-file { display: none; }
}

/* An empty answer's way on (DEC-0469, FirstStepButton): its main button under the words, centred as they are, and off
   paper, where nothing is pressed. */
.empty-way { margin: var(--space-16) 0 0; }
@media print {
    .empty-way { display: none; }
}

/* A register's Landlord row on paper: its Find is left off, its own display otherwise winning over the design system's
   rule leaving forms off paper, and a landlord in force stays, as its chip. */
@media print {
    form.combobox { display: none; }
}

/* A report's question (ReportQuestion, DEC-0358 Ruling 4) is one row: each field a column of label, box and refusal,
   the three lined up across the row by a subgrid, so every box starts at one height whatever a label holds, and the
   button on the boxes' line. Each box has a width of its own, the Landlord's slot keeping its box's width when a chip
   stands in it, and a refusal or a long name wraps inside its column rather than widening it. A field here takes no
   Hint: the second row is the box's. In a narrow column the fields stack, the button last. Find's answer sits under
   the row; the row is where Find's links land, scrolled to only where it is out of sight (the design system's
   filter-row rule). */
.report-question { container-type: inline-size; margin: 0 0 var(--space-12); }
.question-row {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: var(--space-12);
    align-items: center;
    justify-content: start;
    scroll-margin-top: max(0px, calc(100vh - 12rem));
    scroll-margin-top: max(0px, calc(100svh - 12rem));
}
.question-row > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-items: center; max-width: none; }
.question-row > .field > .field-head { grid-row: 1; }
.question-row > .field > :is(select, .combobox-field, .date-field, .filter-chip) { grid-row: 2; }
.question-row > .field > .field-error { grid-row: 3; contain: inline-size; }
.question-row > .field > .filter-chip { justify-self: start; max-width: 100%; height: auto; min-height: var(--segment-height); white-space: normal; }
.question-row select { width: 14rem; }
.question-row .combobox-field { width: 16rem; max-width: none; }
.question-row .landlord-field { width: 16rem; }
.question-row .date-field { width: 12rem; }
.question-acts { grid-row: 2; }
.report-question > .find-answer { margin-top: var(--space-8); }
@container (max-width: 50rem) {
    .question-row { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: minmax(0, 16rem); row-gap: var(--space-16); }
    .question-row > .field { grid-row: auto; grid-template-rows: none; }
    .question-row select, .question-row .combobox-field, .question-row .landlord-field, .question-row .date-field { width: 100%; }
    .question-acts { grid-row: auto; }
}

/* The firm's logo as uploaded (FirmDetails): at about the height a letterhead carries it, and never wider than its
   panel. */
.firm-logo { margin: 0 0 var(--space-16); }
.firm-logo img { display: block; max-height: 64px; max-width: 100%; }
.firm-logo figcaption { margin-top: var(--space-6); }
/* Beside its act (DEC-0464) a logo's figure keeps the band's own width, which a fact's flex row would shrink to its
   content; the firm's facts take a record's label column, as a landlord's do, so at a desktop width the two fit on one
   line. */
.facts dd.with-act > .firm-logo { flex: 0 1 320px; min-width: 0; }
/* ...and its act wraps under it where the fact is too narrow for both, as on a phone, rather than squeezing it away. */
.firm-facts dd.with-act { flex-wrap: wrap; row-gap: 0; }
/* The white logo on the Modern statement's band; ink where the firm's colour does not carry white (DEC-0333). */
/* Forced colours keep the preview's own: it shows what the statement is to print, which no theme repaints. */
.firm-band { display: block; width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-inset); forced-color-adjust: none; }
/* The print palette's ink (its text-2), fixed rather than a theme token, so white reads on it in every theme. */
.firm-band-ink { fill: #16161a; }
/* The firm's colour as a swatch beside its spelling. */
.brand-colour { display: flex; align-items: center; gap: var(--space-6); }
.brand-swatch { width: 24px; height: 24px; flex: none; forced-color-adjust: none; }

/* --- The statement upload (DEC-0514) ------------------------------------------------------------ */
/* The file box drawn as a place to drop a file on: the whole form takes the drop, this is where the eye goes. */
.file-drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); padding: var(--space-16);
    border: 1px dashed var(--border-control); border-radius: var(--radius-control); }
.file-drop-words { color: var(--text-2); white-space: nowrap; }
.import-found { margin: var(--space-12) 0; }
/* The file's closing balance, under what was found and tight to it (DEC-0515). */
.import-closing { margin: calc(-1 * var(--space-8)) 0 var(--space-12); color: var(--text-2); }
.import-notes { margin: 0 0 var(--space-12); padding-left: var(--space-16); }
.register.import-lines { margin-top: var(--space-16); }
.import-lost:empty { margin: 0; }
form[aria-busy="true"] .import-reading { opacity: 0.6; }

/* A GROUP HIDDEN UNTIL ITS CHOICE APPLIES (DEC-0486; the rent form's, DEC-0487). The page draws it hidden where the
   choice it was drawn with does not apply, which a page read without the app's style keeps. With it, these rules alone
   decide: each group's own display outranks the hidden attribute (a field-set's, and the block given here to a field and
   to the Section 13 notice, at no specificity, so a context's own display wins), and the group is hidden while its
   choice does not apply, so it shows and hides again as the choice changes, script or none. A browser that cannot read
   :has() (but reads :where()) keeps a group of boxes drawn hidden as drawn, so it shows no group the page drew hidden —
   the let and rent forms refuse or answer a press making the choice without them and draw them open; one drawn open stays
   shown as its choice is unmade, and one drawn hidden holding what was typed is read unseen (src/README "Known gaps"). A lone field is left out, since its form records without
   it: a certificate's rating shows there whatever the kind, and is read for an EPC alone (DEC-0486 Ruling 2); the chart of
   accounts' ledger box whatever the act, and is read by every act but adding (DEC-0601). */
:where(.field[data-shown-by], .section-13) { display: block; }
@supports not selector(:has(*)) { [data-shown-by][hidden]:not(.field) { display: none; } }
.write-form:has(#commissionChoice option[value="inherit"]:checked) .commission-terms,
.write-form:has(#depositChoice option[value="none"]:checked) .deposit-terms,
.write-form:has(#type option:checked:not([value="EnergyPerformance"])) .field:has(#energyRating),
.write-form:has(#act option[value="add"]:checked) .field:has(#ledger),
.rent-change-form:has(#reason option:checked:not([value="StatutoryIncrease"])) .section-13,
.rent-change-form:has(#tribunal option:checked:not([value="yes"])) .tribunal-days { display: none; }

/* HOW A PAYMENT LEAVES (DEC-0540): the line before the press for each way out is drawn, the one the choice drawn applies to
   shown and the other hidden, which a page read without the app's style keeps; with it, these rules show the line for the
   way out chosen as the choice changes, script or none (DEC-0486's pattern). A browser that cannot read :has() shows both
   lines, and keeping the one drawn would leave it saying the way out first chosen after another is chosen; so each is led
   by its way out's name, drawn in the line and hidden by a rule such a browser drops, which leaves both true whatever is
   chosen there (DEC-0490). */
:where(.consequence[data-send-by]) { display: block; }
.write-form:has(#sendBy option[value="ByHand"]:checked) .consequence[data-send-by="BankFile"],
.write-form:has(#sendBy option[value="BankFile"]:checked) .consequence[data-send-by="ByHand"] { display: none; }
.write-form:has(#sendBy) .send-by-lead { display: none; }

/* Left wrongly's bills (DEC-0532): drawn for part of a payment only; the server acts on the choice, never on a hidden box. */
.loss-extent:has(option[value="all"]:checked) ~ .loss-part { display: none; }
/* Why a payment did not go, in the person's own words (NotGoneReasonBox, DEC-0535, DEC-0537): drawn beside Other alone; a
   press sends them beside Other alone, never from a hidden box. */
.not-gone-reason:not(:has(option[value="Other"]:checked)) ~ .not-gone-words { display: none; }