/* ==========================================================================
   A record's own screen — the placements the approved record boards draw, where they differ from the design
   system's own.

   The parts are the design system's: the panel, the register, the figures, the read-back (facts), the
   notices and every control. What is here only places them: two panels side by side, a line of words leading
   a panel's body, the last words of a placed panel's body ending at its padding, a register sitting flush in the
   panel that frames it, and a panel heading that wraps under its chip — and one part of its own, a key just issued
   set to be read and copied. Every space is a token; the one breakpoint is where the design system's own field-set
   folds, and nothing here sets a colour but the hairline between a panel's words and its flush table, which is the
   design system's own subtle border, and the key's line, in the body's and the muted ink tokens.
   ========================================================================== */

/* Two panels side by side in fixed halves that share a height, as the boards draw them — where the design system's
   `.panel-row` fits as many panels as its minimum width allows. They stack where a form's columns fold, as the
   design system's field-set does. */
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); align-items: stretch; margin: 0 0 var(--space-32); }
.two-up > .panel { margin: 0; }
@media (max-width: 40rem) { .two-up { grid-template-columns: minmax(0, 1fr); } }

/* One line of words set apart from what surrounds it, held to the prose measure. */
.act-line { margin: 0 0 var(--space-12); max-width: var(--measure-prose); }

/* The last words in a placed panel's body end at its padding, as the boards draw them, rather than adding
   their own margin under it. */
.two-up > .panel > .panel-body > :last-child,
.panel > .panel-body:has(+ .flush-scroll) > :last-child { margin-bottom: 0; }

/* A register drawn inside a panel sits flush in it: the panel already draws the edge. It sits in a box of its
   own that scrolls sideways, because the design system's panel clips what overflows it and only its body
   scrolls — so on a narrow window the register's last column would otherwise be cut off rather than reached.
   Under words in the panel's body, a hairline divides the two. The box is positioned so it holds a row's hidden words
   as well as its cells: visually hidden text is positioned, and without a positioned box around it inside the scroll
   box it is laid out against the page and widens it on a phone. */
.flush-scroll { position: relative; overflow-x: auto; }
.flush-scroll > .register.flush { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.panel > .panel-body + .flush-scroll { border-top: 1px solid var(--border-subtle); }

/* A panel heading followed by a state chip and its date: where the three do not fit on one line the chip and
   the date go under the heading, rather than the heading squeezing onto two. */
.panel-head.wraps { flex-wrap: wrap; row-gap: var(--space-4); }
.panel-head.wraps > h2 { flex: 0 0 auto; }
/* …and on a window too narrow for the chip's own words, they wrap inside it rather than run past the panel's edge. */
.panel-head.wraps > .tag { max-width: 100%; white-space: normal; }

/* A record's state under its title — the state's tag, with what it means behind a toggletip where there is more to
   say — apart from the acts below it. */
.record-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-16); }

/* A job's facts, apart from the panels under them. */
.job-facts { margin-bottom: var(--space-24); }

/* A date in a panel's heading — a certificate named by the day it was issued — or in a toggletip's sentence reads with
   proportional figures, as the design system's rule draws one inside a title or a sentence rather than down a column,
   in the figures face (DEC-0375). */
.panel-head h2 .stamp, .tip-line .stamp { font-family: var(--font-figures); font-size: inherit; font-variant-numeric: proportional-nums; }

/* A suggested line on one line: who and why at the start, the press at the end (DEC-0429). */
.register .row-actions.suggestion { justify-content: space-between; gap: var(--space-8); }
/* Its press keeps a button's outline at a row's own height, overhanging the line as a row's ⋯ does, so the row stays one
   line high. */
.register .row-actions.suggestion > .button { height: var(--control-height-quiet); margin: calc((1.5em - var(--control-height-quiet)) / 2) 0; }
[data-density="compact"] .register .row-actions.suggestion > .button { height: 22px; margin: calc((1.5em - 22px) / 2) 0; }

/* A key just issued, its Copy button and what that press said, on one line that wraps (IssuedKeyPanel, DEC-0495). The
   key is set at body size in the body's ink, being what the reader copies, and breaks anywhere rather than running out
   of the panel on a phone. Copy is drawn hidden until copy.js shows it, and a button's own display would win over the
   attribute. */
.key-to-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.key-to-copy > [hidden] { display: none; }
.key-to-copy code { font-size: var(--fs-body); color: var(--text); overflow-wrap: anywhere; }
.key-copied { font-size: var(--fs-secondary); color: var(--text-muted); }