/* ==========================================================================
   The back office's write FORMS — the §3.1 address book's screens (EP-WEBAPP-02): creating a landlord,
   correcting one, adding an address, adding a flat, correcting an address's record and letting one; and
   the §3.15/§3.16 supplier ones (EP-WEBAPP-05): setting up a supplier, correcting one, capturing a bill
   and credit-noting one.

   ONE FILE FOR THE WHOLE SURFACE, where a screen with rules of its own usually gets its own — the rule is
   that a file covers what shares a vocabulary. These are one form asked over and over: a reader who has
   entered a landlord and then an address should meet the same field, the same label, the same spacing and
   the same pair of actions in the same places, and a file apiece is a chance apiece for one of them to
   drift.

   NO TOKENS OF ITS OWN, so there is no dark block, nothing to restate for print and nothing for a theme
   sweep to hold. Every colour here resolves through the design system's palette, which already carries
   light, dark by preference, dark by choice and print; the panels, notices, buttons, inputs, asides, the
   field set, the yes-or-no choice and the row that commits are the design system's. What is left is
   layout — how the fields these screens draw sit inside the field set, how a value that is shown rather
   than offered is set apart, and the ways in.

   NOTHING HERE MARKS A STATE BY COLOUR ALONE. One rule tints: the inherited-value block, which carries a
   label and a reason. Take the tint away and it still says what it says, which is what makes it safe
   under forced colours and on paper without a block of its own.
   ========================================================================== */

/* --- The form ------------------------------------------------------------ */

/* A column of groups rather than a grid of fields: these screens ask about several unrelated things — who
   the landlord is, where they are paid, what commission is charged — and a single grid would run one
   group's fields into the next one's. */
.write-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 72ch;
    margin: 0;
}

/* A form whose choice is a register — a bill picked from a list — takes the panel's width, as a register does. */
.register-form > .write-form { max-width: none; }

.write-form h3 {
    margin: 14px 0 0;
    font-size: var(--fs-section);
    font-weight: 600;
}

/* The field set is the design system's; a field inside it is a bare div on these screens until each
   draws the design system's field. */
.field-set > div { min-width: 14rem; }

/* A number field is here for the supplier bill's pence. The letting's rent is typed on this surface too and
   is a text box, so this selector reaches neither it nor the pence boxes outside these screens; what it
   covers is the number inputs the supplier capture form draws. */
.field-set input[type="text"], .field-set input[type="date"], .field-set input[type="number"],
.field-set select { width: 100%; }

/* The line under a field. It carries the rule the field is subject to — what an omission means, what
   PropMan does with it — so it is set as prose rather than as a hint, and it is not hidden on small
   screens: a reader who cannot see it is a reader who does not know what leaving the box empty does. */
.field-set .basis {
    display: block;
    margin-top: 4px;
    max-width: 46ch;
}

/* --- What is shown rather than offered ----------------------------------- */

/* A value this address does not set — a flat's geography, which is its block's, and a holding property's
   address, which is a marker the domain refuses to rename. It travels in a hidden field so the record
   still goes whole, and it is drawn as a fact with the reason beside it. Inset rather than boxed like an
   input: it must not read as a control somebody has disabled, because this app draws none of those. */
.record-inherited {
    min-width: 18rem;
    padding: 8px 12px;
    border-left: 2px solid var(--border);
    background: var(--surface-subtle);
    border-radius: var(--radius-inset);
}

.record-inherited p { margin: 0; font-size: var(--fs-secondary); }

/* A named value with its toggletip on one line, the (i) centred on the words. */
.record-inherited p:has(> .tip) { display: flex; align-items: center; gap: var(--space-4); }

/* Beside a box in a field row it lines up as the box does: its label on the row's label line, its value centred on the
   box's height, the inset's padding drawn outside the row rather than pushing it down. */
.field-set > .record-inherited.in-row { margin-block: -8px; }
.record-inherited.in-row > .field-label { display: flex; align-items: center; min-height: 20px; }
.record-inherited.in-row > p { display: flex; align-items: center; gap: var(--space-4); min-height: var(--control-height); }

/* The same idea for a figure the form carries back without offering it — a landlord's commission terms. */
.record-echo {
    margin: 10px 0 0;
    font-size: var(--fs-secondary);
}

@media (max-width: 700px) {
    .field-set > div { min-width: 100%; }
}