/* ==========================================================================
   Compliance — the property screens' own layout: the address's compliance panel and its certificates.

   THE SCALE ITSELF IS NOT HERE. The mark, its token, its ramp and its print and forced-colours blocks are
   the design system's, because more than one screen draws them; what is left here is these screens' own
   furniture around the mark. Today draws the same marks on the design system's scale (see dashboard.css).
   ========================================================================== */

/* --- The property screen -------------------------------------------------- */

/* What the address is required to hold and has not got. A list rather than a table: each entry is one
   name, and the reason it is here is the same for all of them. */
.comp-missing {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 6px 0 0;
    padding: 0;
}

.comp-missing li {
    padding: 2px 8px;
    border: 1px solid var(--danger-hairline);
    border-radius: var(--radius-chip);
    background: var(--danger-tint);
    color: var(--danger-text);
    font-size: var(--fs-caption);
}

/* The day count after an expiry — how long is left, said near expiry alone (DEC-0358 Ruling 3). In the figures face with
   tabular figures (DEC-0375), because it is a figure read down a column against the figures above and below it; its gap
   is its own, the markup's space between the date and the count not reaching the page. */
.comp-days {
    margin-left: var(--space-8);
    font-family: var(--font-figures);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* --- Licensing (DEC-0316) --------------------------------------------------- */

/* An address's licensing answer is set at the panel heading's size, the most visible fact on its panel with any need
   drawn before it; where it asks the reader to act it takes the warning's ink, as a consequence's glyph does. */
.licensing-verdict {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-panel-head);
    font-weight: 600;
    color: var(--text);
}

.licensing-verdict.licensing-asks { color: var(--warning-text); }

/* What it rests on: a line each, unmarked, the rest under the answer. A need comes before it, at its size and in the
   warning's ink, being the fact on the panel that most needs acting on. An act's link keeps its words on one line. */
.licensing-needs,
.licensing-basis {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
}

.licensing-basis li,
.licensing-basis-act { margin: var(--space-4) 0 0; font-size: var(--fs-secondary); }

.licensing-needs a,
.licensing-basis-act a,
.licensing-basis a { white-space: nowrap; }

/* A licence ending is a due line among the rest, at their size, and as wide as they are. */
.licensing-basis li.consequence { max-width: none; }

.licensing-needs li {
    max-width: none;
    font-size: var(--fs-panel-head);
    font-weight: 600;
    color: var(--warning-text);
}

/* --- The firm's certificates (/properties/certificates, DEC-0317) ---------------------------------------- */

/* A step's group row takes the header band's surface, so a group reads as a heading, as the arrears grid's does. The
   mark sits before the kind, as on an address's certificates; the day count follows the expiry on its line. */
.certificates-grid tr.group-head > * { background: var(--surface-subtle); }
/* Paper drops that surface, so there a rule above each group's heading keeps it apart from the row before. */
@media print {
    .certificates-grid tr.group-head > * { border-top: 1px solid var(--border); }
}
.certificates-grid td .comp-mark { margin-right: var(--space-8); }

/* --- Recording a certificate (DEC-0480) ------------------------------------------------------------------- */

/* A line said for one kind — an electrical report's sooner inspection (DEC-0480), what No means for an EPC (DEC-0489) —
   hidden for every other kind: the field's own .basis rule draws it as a block, which the browser's [hidden] does not
   outrank. */
.field .basis[data-usual-note][hidden] { display: none; }

/* The kind, the issue day and the length, and the pass mark and the rating: each field a column of label, line, box and
   refusal, the four lined up across a row by a subgrid (the pattern of app.css's .question-row), so the line shown above
   the length keeps its box level with the issue day's, and the line shown above the pass mark for an EPC (DEC-0489) its
   box level with the rating's (SCREEN-STANDARD §6 rule 1). A row is spaced by its fields' margin, the gap between the four
   parts being none: a field below a wide one has it, and on a narrow screen, where each field is a row of its
   own, every field after the first; two fields side by side in a set's first row have none, the set's own margin
   spacing them, since a margin on the second alone would drop its label. A deposit's take lines its amount and its day
   up the same way, the limit said above the amount (DEC-0496). */
.field-set.certificate-terms, .field-set.take-terms { row-gap: 0; }
.certificate-terms > .field, .take-terms > .field { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.certificate-terms > .field > *, .take-terms > .field > * { grid-row: 3; }
.certificate-terms > .field > .field-head, .take-terms > .field > .field-head { grid-row: 1; }
.certificate-terms > .field > .basis, .take-terms > .field > .basis { grid-row: 2; }
.certificate-terms > .field > .field-error, .take-terms > .field > .field-error { grid-row: 4; }
.certificate-terms > .field-wide ~ .field, .take-terms > .field-wide ~ .field { margin-top: var(--space-16); }
@media (max-width: 40rem) { .certificate-terms > .field + .field, .take-terms > .field + .field { margin-top: var(--space-16); } }