/*
 * The imSME grant module's one stylesheet.
 *
 * WHERE IT COMES FROM. It is a port of the approved design canvas, not an
 * interpretation of it. Every rule below is the rule the artboards carry, class
 * name for class name, so that a component drawn in the design and the same
 * component rendered by this tier cannot drift apart. Where a rule here differs
 * from the canvas it says so and why, immediately above itself. Three families
 * of rule in the canvas are deliberately absent, and their absence is not a
 * simplification:
 *
 *   - the screen-identifier badge, which is a canvas annotation and not part of
 *     any screen
 *   - the language switch built from a checkbox and paired <i lang> elements.
 *     The canvas shows both languages in one file so that the two renderings
 *     cannot diverge; a served page carries one language, chosen by the server
 *     from one catalogue entry, which is the same guarantee by the other half of
 *     the same mechanism
 *   - the fixed pixel widths an artboard is framed at. A served page is as wide
 *     as the browser is
 *
 * HOW IT REFLOWS. Intrinsically: grids are auto-fitting tracks with a minimum
 * column width, so a row holds as many columns as fit and no breakpoint has to
 * decide; sibling groups are flex with a gap and wrap on their own. There are
 * exactly two widths named in this file, and each is a decision rather than a
 * device: 900px, below which the header's row of destinations gives way to the
 * menu, and 600px, below which a table restructures into stacked cards. One
 * definition serves every width, which is why a desktop and a mobile rendering
 * of a screen cannot disagree.
 *
 * NO HORIZONTAL SCROLLING, at any width from 360px up, is a requirement and is
 * measured: the browser suite loads the measurement page at five widths and
 * compares the document's scroll width against its client width. Anything that
 * would need a sideways scroll - a wide table above all - restructures instead.
 */

/* ---------------------------------------------------------------------------
 * The palette, in one place
 * -------------------------------------------------------------------------*/
/*
 * The canvas states these as literal colours at each use. They are named here
 * instead for one reason: the palette is not finally settled with the ministry,
 * and when it changes it has to change in one place rather than in ninety.
 *
 * TWO OF THEM ARE CORRECTED FOR CONTRAST, and the corrections are decisions
 * taken on this delivery rather than adjustments made here. The accessibility
 * run measured four uses of the palette below 4.5:1 for normal-size text - the
 * threshold for reading text at level AA - and the corrections are the two
 * values that fix all four. Both are carried into the design at the same time,
 * so the design and what is served cannot disagree.
 */
:root {
  --navy: #002D86;
  --navy-deep: #0F3172;
  --navy-mid: #003A70;

  /*
   * PRIMARY, corrected: #4B6EEC -> #4A6DE9.
   *
   * White text on the original measures 4.43:1 and does not reach the 4.5:1
   * that normal-size reading text needs. This value is the design's own
   * correction, taken so that the artboards and what is served carry one
   * definition of the colour rather than two that happen to be close, and white
   * text on it measures 4.51:1.
   *
   * IT IS A GROUND, NEVER TEXT, and that is now a rule rather than a habit.
   * White on it reaches 4.51:1 and it is used for exactly two things: the
   * primary button's fill and a selected chip's ring or fill. It is not the
   * colour of a link, because as text it measures 4.51:1 only on a white card
   * and 4.25:1 on the page background - the lighter surface, and the one most
   * body text sits on. Links are navy, which reaches 12.21:1 on both.
   *
   * The margin on white text over it is 0.01. A hover shade, an opacity, a
   * gradient or a disabled state derived from this colour does not inherit the
   * compliance - measure it.
   */
  --blue: #4A6DE9;

  --ink: #212529;

  /*
   * SECONDARY TEXT, corrected: #828F9C -> #5B6472.
   *
   * The original measures 3.11:1 on the page background and 3.30:1 on a white
   * card. Both clear 3:1, which is the threshold for large text and for
   * interface components, and neither clears 4.5:1 - and this colour carries
   * hints, breadcrumbs, captions and the column headings a stacked table needs,
   * all of which are normal-size reading text.
   *
   * #5B6472 measures 5.63:1 and 5.98:1 on those two backgrounds. It is not a
   * new colour: it is already in this palette as the label and table-heading
   * colour below, so the correction is a choice between two approved values
   * rather than an addition to the design. The two names are kept apart because
   * they carry different roles and either may move on its own later.
   */
  --muted: #5B6472;

  --slate: #5B6472;
  --page: #F7F8FA;
  /*
   * The ground of a band that is waiting for content rather than carrying it -
   * the home page's hero with nothing published in it. It is the artboard's own
   * value for that state, one step deeper than the page so the band keeps its
   * shape, and the navy heading on it measures 11.4:1.
   */
  --page-deep: #EEF1F5;
  --white: #fff;
  --line: #E5E7EB;
  --line-soft: #F0F2F5;
  --line-field: #C9CFDA;
  /*
   * PLACEHOLDER TEXT, corrected: #98A1AE -> #6B7583.
   *
   * The original measured 2.61:1 on white and cleared neither the 4.5:1 for
   * reading text nor the 3:1 for an interface component. This value is the
   * design's own correction and measures 4.67:1 on white, which is the surface
   * that matters: a placeholder only ever appears inside a field, and a field's
   * ground is white. On the page background it would read 4.39:1, so it is not
   * a colour to reuse for text sitting directly on the page.
   *
   * Nothing rendered today uses it - no field on any page carries a
   * placeholder, because a placeholder is not a label and every field here has
   * a real one - so this is the value the first field that needs one inherits
   * rather than a fix applied after the fact.
   */
  --placeholder: #6B7583;

  --open-bg: #EAF7EE;    --open-fg: #1B6B3A;  --open-line: #BFE3CC;
  --soon-bg: #FFF6E5;    --soon-fg: #8A5A00;  --soon-line: #F2DFB4;
  --shut-bg: #F2F3F5;    --shut-fg: #5B6472;  --shut-line: #DDE1E7;
  --act-bg: #FDEDED;     --act-fg: #A32020;   --act-line: #F5C9C9;
  --proc-bg: #EEF1FE;    --proc-fg: #2A3F9E;  --proc-line: #CBD4F8;
  --proc-tint: #F7F9FF;

  --note-bg: #FFFBEB;    --note-fg: #6B5310;
  --danger: #A32020;

  /* The smallest a touch target may be, and the smallest body text may be.
     Named so that a component cannot be built to a different figure. */
  --target: 44px;
}

* { box-sizing: border-box; }

/*
 * 16px body text is the floor, and it is stated on the root rather than left to
 * a browser default so that a zoomed-out mobile layout cannot inherit something
 * smaller. Nothing in this file sets a size below 11px, and nothing that carries
 * a sentence sets one below 13px.
 */
body {
  margin: 0;
  font-family: Figtree, Roboto, system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 16px;
  line-height: 1.5;
}

/*
 * A link in running text is navy and underlined, on every surface.
 *
 * Navy rather than the primary blue because as text that blue reaches 4.5:1 on
 * a white card and not on the page background, and a link has to be readable
 * wherever it lands; navy reaches 12.21:1 on both. Underlined because colour
 * alone is not a distinction - it is invisible to a reader who cannot
 * distinguish the two hues, which is the commonest form of colour blindness
 * there is, and removing the underline is the change that makes a link
 * indistinguishable from the sentence around it.
 *
 * The controls below opt out of the underline explicitly. They are links in
 * markup - because a link is what a browser, a keyboard and a screen reader
 * understand by "goes somewhere" - and buttons, pills and navigation rows to a
 * reader, where their own shape is the distinction.
 */
a { color: var(--navy); text-decoration: underline; }
a:hover { color: var(--navy-deep); }
.btn, .pill, .lang, .nav a, .menu .mi, .ftl { text-decoration: none; }

/*
 * Visible focus, everywhere, and it is not in the canvas because a static
 * artboard has no focus. A keyboard user has to be able to see where they are,
 * and the browser's own default indicator disappears against the header's navy.
 * Stated once, for everything focusable, rather than per component - a component
 * that forgot would otherwise be invisible to exactly the people who need it.
 */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.hdr :focus-visible,
.menu :focus-visible {
  outline-color: var(--white);
}

img, svg { max-width: 100%; }

/*
 * THERE IS DELIBERATELY NO `overflow-x: hidden` HERE, and its absence is a
 * decision rather than an omission.
 *
 * It was here, as a backstop, and a backstop is exactly what it is not. Hiding
 * horizontal overflow does not stop content sitting outside the viewport - it
 * stops the reader reaching it, and it stops the measurement noticing: the
 * document's scroll width equals its client width whatever is hanging off the
 * side, so the check that the requirement rests on passes on a page whose text
 * is clipped mid-sentence. A long Malay paragraph in a narrow column is exactly
 * the case, and the language it breaks in is the one fewer reviewers read.
 *
 * The approved design carries no such rule either, so the render gate would
 * have caught what this was hiding at runtime. Nothing on a page may need it:
 * the grids fit their tracks to the container, the clusters wrap, and the tables
 * restructure. If something ever does overflow, that is a layout to fix and not
 * a rule to add - and the browser suite now measures every element's own box
 * against the viewport, not just the document's scroll width, so adding it back
 * would not make the check pass.
 */

/* ---------------------------------------------------------------------------
 * Header
 * -------------------------------------------------------------------------*/
.hdr {
  background: var(--navy);
  color: var(--white);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.logo { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.hdr .sep { opacity: .5; }
.hdr .mod { font-size: 14px; }
.nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
  margin-left: 8px;
  opacity: .92;
  flex-wrap: wrap;
}
.nav a, .nav span { color: var(--white); }
/*
 * Differs from the canvas, which draws these as text at their natural height.
 * A destination in the header is something a finger has to hit, so each one is
 * a full-height target; the type size and spacing are the canvas's.
 *
 * IN BOTH DIRECTIONS, and the reason is worth recording because the check that
 * found it could not fire before: while no screen behind the header existed
 * every destination was a label, and a label is not a control - so nothing
 * measured one. The first of them to become a real link measured 43px wide at
 * 14px type, one pixel under the target. The row's own gap is unchanged, so a
 * label wider than the target is laid out exactly as the design draws it and
 * only a very short one is widened.
 */
.nav > * {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  min-width: var(--target);
}
.sp { flex-grow: 1; }

/*
 * Visually hidden, still announced.
 *
 * clip-path rather than the canvas's `clip`: that property is deprecated, and
 * some tools treat text clipped by it as not rendered at all - which turns
 * visually hidden text into text that is hidden from everybody, silently. The
 * effect on screen is identical.
 */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/*
 * THE HEADER'S SHAPE, AND ONLY THE HEADER'S. Its text is white and its ring is
 * white because everything below sits on the navy band, and nothing here names
 * the ground it was measured against - so on any other surface the colour is
 * simply wrong. Used once on a page's own background it measured 1.06:1, white
 * on near-white, and the label it carried was invisible. A label outside the
 * header is a line of text and takes a text class.
 */
.pill {
  border: 1px solid var(--white);
  border-radius: 24px;
  padding: 7px 18px;
  font-size: 14px;
  color: var(--white);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
}
.pill.solid {
  background: var(--white);
  color: var(--navy-mid);
  border-color: var(--white);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * The language control
 * -------------------------------------------------------------------------*/
/*
 * The canvas's control, with its 44px correction: the control itself is the
 * 44x44 box and the ring is drawn inside it, so the target is big enough to hit
 * without the chrome growing. The label names the language currently in force -
 * "EN" while English is rendering - and the accessible name spells that language
 * out in full and says what pressing it does.
 *
 * It is a link rather than a checkbox: the choice is made by the server, which
 * is the only place that can remember it for the next request.
 */
.lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  min-width: var(--target);
  font-size: 13px;
  opacity: .9;
  padding: 5px 12px;
  white-space: nowrap;
  color: var(--white);
}
.lang::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 24px;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * The mobile menu
 * -------------------------------------------------------------------------*/
/*
 * Below 900px the header's row of destinations is hidden, and this is how they
 * stay reachable - which is a requirement, not a nicety: every control must be
 * reachable at every width from 360px up.
 *
 * It is a native disclosure element, with no script. Three things follow, and
 * the first is the reason for the choice: the control reports whether it is
 * expanded, accurately, at all times - an attribute we maintained ourselves
 * would be accurate only while a script was running and would state the
 * opposite when one was not. It opens on a keyboard as a disclosure does. And it
 * works on a response that arrived with scripting unavailable.
 */
.disclose { display: none; }
.burger {
  display: inline-flex;
  width: var(--target);
  height: var(--target);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  /* The disclosure marker the browser draws by itself. The control is the two
     icons below, which say the same thing in the space available. */
  list-style: none;
}
.burger::-webkit-details-marker { display: none; }
.burger::marker { content: ""; }
.burger svg { width: 22px; height: 22px; }
.burger .x { display: none; }
details[open] > .burger .bars { display: none; }
details[open] > .burger .x { display: block; }

/*
 * The panel is over the page, not in flow beneath the header.
 *
 * In flow, opening the menu pushes everything down - so the act of looking at
 * the navigation moves the thing the reader was looking at, and closing it moves
 * it back. Out of flow, measured from the bottom of the header's wrapper, it is
 * laid over the page and nothing beneath it moves.
 *
 * Its containing block is that wrapper rather than this element, because this
 * element is a 44px control sitting in the middle of a flex row and the panel is
 * the full width of the page.
 */
.top { position: relative; z-index: 20; }
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--navy);
  color: var(--white);
  padding: 4px 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  /* It is over content, so it needs an edge - without one it reads as part of
     whatever happens to be behind it. */
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
}
.menu .mi {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.menu .mi:last-of-type { border-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Page body
 * -------------------------------------------------------------------------*/
.wrap { padding: 28px 32px; }
/* The gap between a page's own blocks. An artboard states it inline on each
   element; a served page states it once, here, so a block cannot be added
   without it. */
.wrap > * + * { margin-top: 18px; }

/* A SCREEN WHOSE SUBJECT IS TEXT SOMEBODY TYPES IS DRAWN IN A BOUNDED COLUMN,
   as its board draws it. Every other screen of this product fills the frame, so
   this is asked for rather than given: what it buys is the pairing the editor
   exists for - the Malay text beside the English one, per text - because the
   grids inside it are tracks that fit, and a column that goes on widening keeps
   making more of them until four four-thousand-character bodies sit side by side
   at three hundred pixels each. A bound on the column and never a count of
   tracks: the tracks still fit themselves, and one definition still serves a
   phone. */
.wrap.textcol { max-width: 900px; }
.wrap > h2 { margin-top: 30px; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
/* Differs from the canvas: a breadcrumb whose entries are links needs those
   links to be hittable, so an entry that is a link carries the target size in
   both directions - the first real one measured 40px wide at 13px type. An
   entry that is plain text does not: it is not a control. */
.crumb a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  min-width: var(--target);
}

h1 { font-size: 34px; line-height: 1.2; font-weight: 700; margin: 0 0 8px; text-wrap: pretty; }
h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; text-wrap: pretty; }
h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; text-wrap: pretty; }
/*
 * A subtitle may be the registered name exactly as the company validation
 * service returned it, and a name may be one long unbroken word - which,
 * unbroken, set the page several times wider than a 360px viewport. Every
 * subtitle wraps it the same way, on the profile and on the dashboard alike.
 */
.sub { color: var(--muted); font-size: 14px; margin: 0; overflow-wrap: anywhere; }

.card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.card16 { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }

/*
 * Grids reflow intrinsically, and there is no breakpoint behind it at all.
 *
 * A row holds as many columns as fit and one column when only one fits, decided
 * by the track sizing rather than by a width someone chose. A fixed column count
 * is what this avoids: it is correct at one width and wrong at every other, and
 * it is what makes a second, mobile definition of a screen necessary.
 *
 * THE `min()` IS LOAD-BEARING, and without it this would not be intrinsic at
 * all. `minmax(340px, 1fr)` sets a hard floor of 340px on the track - so in a
 * 328px column the track still demands 340 and the page scrolls sideways, which
 * is the requirement broken by the very declaration meant to keep it. The canvas
 * answers that by forcing a single column below 600px, which is a device
 * breakpoint and puts the reflow back in the hands of a chosen width.
 * `min(340px, 100%)` answers it in the track instead: the floor becomes the
 * container's own width whenever the container is narrower, so the column
 * shrinks rather than overflowing and the breakpoint is not needed.
 */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* ONE CHILD ACROSS EVERY TRACK, and the whole of the grid's exceptions.
 * `1 / -1` is the line-based way to say "the first line to the last", so the
 * child takes every track the grid has at that width: two at a desk, one on a
 * phone, without a width being named anywhere. A span of a FIXED number of
 * tracks is what needs a breakpoint to undo it, because a span of two is wider
 * than a grid with one track and the page then scrolls sideways.
 * Drawn by the question form's visibility condition, whose clause row holds up
 * to seven boxes and cannot be a row inside a third of a page. */
.grid > .across { grid-column: 1 / -1; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.between { justify-content: space-between; }
/* A row of controls at the far end, as the boards draw the add controls. */
.row.end { justify-content: flex-end; }

/* One clause of a condition, proportioned as the board proportions it: the
   question it names is the widest, the operator narrower, the value narrowest, and
   the control that takes the row out sits after them. The three bases are the
   board's own figures and every one of them may become the whole width once there
   is no room for the next - so the row is one definition that reads as a row on a
   desktop and as a stack on a phone, rather than a set of columns either way.
   Without them every box took the whole width at every size, because a real input
   is 100% wide by default here, and the row that was approved drew as four.

   AND THE BOXES KEEP THAT 100% WIDTH, which reads as redundant beside a basis and
   is not: a flex item's main size comes from its basis, so the width is ignored
   where the row lays out - but it is what keeps each box's MIN-CONTENT
   contribution at nothing. Set to auto, a select asks for its longest option and a
   fieldset refuses to shrink below the min-content of its contents, so this one
   panel was 379px wide inside a 360px viewport and the whole page scrolled
   sideways in Malay. Measured at 360, 390 and 1200. */
.row.clause { gap: 8px; }
.row.clause + .row.clause { margin-top: 8px; }
.row.clause > .cfield { flex: 1 1 200px; min-width: 0; }
.row.clause > .coperator { flex: 1 1 160px; min-width: 0; }
.row.clause > .cvalue { flex: 0 1 150px; min-width: 110px; }

.btn {
  border-radius: 24px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--target);
  cursor: pointer;
  font-family: inherit;
  /* A BUTTON TAKES NEITHER THE PAGE'S TYPEFACE NOR ITS LINE HEIGHT unless it is
     told to, and a link takes both - so the same control drawn as a button came
     out three pixels shorter than the same control drawn as a link, and shorter
     than the board draws either. The typeface was already stated here for that
     reason; this is the other half of it. */
  line-height: inherit;
}
.btn.sec { background: var(--white); color: var(--navy); border-color: var(--line-field); }
.btn.sm { padding: 8px 16px; font-size: 14px; min-height: var(--target); }
/* An action this product performs, unavailable on the record in front of the
 * person (SCR-BKO-35). At the weight the board draws it, and a real disabled
 * control rather than a dimmed label: that is the only form a keyboard skips,
 * a screen reader announces as unavailable, and the contrast minimum exempts
 * (WCAG 1.4.3, inactive components). The reason beside it carries full
 * contrast, because the reason is the part that has to be read. */
.btn:disabled { opacity: .55; cursor: default; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid;
}
.c-open { background: var(--open-bg); color: var(--open-fg); border-color: var(--open-line); }
.c-soon { background: var(--soon-bg); color: var(--soon-fg); border-color: var(--soon-line); }
.c-shut { background: var(--shut-bg); color: var(--shut-fg); border-color: var(--shut-line); }
.c-act  { background: var(--act-bg);  color: var(--act-fg);  border-color: var(--act-line); }
.c-proc { background: var(--proc-bg); color: var(--proc-fg); border-color: var(--proc-line); }
.c-rev  { background: var(--proc-bg); color: var(--proc-fg); border-color: var(--proc-line); }
/*
 * Selected. Navy text inside a ring of the primary blue, and a filled variant
 * that inverts it - the blue as ground with white on it, which is the one
 * relationship that colour is compliant in. The ring carries no text, so it is
 * an interface component rather than reading text and 3:1 is its threshold;
 * it measures 4.51:1 against white.
 */
.c-sel { background: var(--white); color: var(--navy); border-color: var(--blue); }
.c-sel.filled { background: var(--blue); color: var(--white); border-color: var(--blue); }

.lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  display: block;
}
.fld {
  border: 1px solid var(--line-field);
  border-radius: 8px;
  background: var(--white);
  padding: 11px 13px;
  font-size: 15px;
  color: var(--ink);
  min-height: var(--target);
  display: flex;
  align-items: center;
  min-width: 0;
  /* A real input, unlike an artboard's drawn one, must not overflow its column
     at a narrow width - the default intrinsic width of a text input is wider
     than 360px allows. */
  width: 100%;
  font-family: inherit;
}
.fld.ph { color: var(--placeholder); }
/* A field and everything bound to it - label, hint, error - as one block, so
   the error appears with its field and not against the next one. */
.fieldset { margin-bottom: 14px; }
.fieldset:last-child { margin-bottom: 0; }
.help { font-size: 13px; color: var(--muted); margin-top: 5px; }
.err {
  font-size: 13px;
  color: var(--danger);
  margin-top: 5px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

/* A refusal that belongs to no field on the screen, which the approved boards
   draw as a tinted card at the full width of the content rather than as the small
   sentence a field draws under itself. The distinction is the point: a field's
   refusal is read next to the box it is about, and this one is about the page - so
   given the field treatment it read as a stray line under the header. The ground
   and the line are the ones already decided for an act that cannot be taken, and
   the colour of the text is unchanged. */
.err.err-region {
  background: var(--act-bg);
  border: 1px solid var(--act-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 0;
  margin-bottom: 16px;
}

.note {
  background: var(--note-bg);
  border: 1px solid var(--soon-line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--note-fg);
}

/* An informational note - what a screen does, rather than something to be
   careful about. The same three colours the informational chip and the aside
   card read, so a fourth opinion about "this is information" cannot appear. */
.note.info { background: var(--proc-bg); border-color: var(--proc-line); color: var(--proc-fg); }

/* And a note that reports something that HAPPENED, for the one message in the
   administration screens that reports an act rather than warning about one: an
   address the identity store was holding with nobody behind it has been freed,
   and the form that invites somebody at it is now the screen in front of the
   person. It is the one tone carrying a mark as well as a ground, because the
   same shape carries the caution beside it on that screen and the mark is what
   tells them apart at a glance. A MODIFIER RATHER THAN A SECOND BLOCK, so the
   shape, the radius and the padding come from the definition above; the three
   colours are the open status chip's own, because a second green would be a
   second decision about what green means. The mark and the sentence sit on one
   line, the mark not shrinking and the sentence wrapping - the shape the caution
   card already uses for the same pairing. */
.note.done {
  background: var(--open-bg);
  border-color: var(--open-line);
  color: var(--open-fg);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.note.done .ico { width: 18px; height: 18px; margin-top: 1px; }

.ico { width: 16px; height: 16px; flex-shrink: 0; }

/* A caution card, as the confirm step in front of a consequence draws it
 * (SCR-BKO-42): the card shape already defined above, on the warm ground the
 * note uses, with the question at the size a heading would be and the
 * consequence under it. A MODIFIER RATHER THAN A SECOND CARD, so the padding,
 * the radius and the way the card narrows come from one definition - a second
 * card would drift from the first at the first change to either. The icon is
 * the note's own, at the size the board draws it, and the row it sits in does
 * not wrap: an icon on a line of its own reads as a bullet nobody meant. */
.card16.caution { background: var(--note-bg); border-color: var(--soon-line); }
.card16.caution .ico { width: 20px; height: 20px; margin-top: 2px; }
.card16.caution .ask { margin: 0; color: var(--note-fg); font-size: 16px; font-weight: 700; }
.card16.caution .said { margin: 5px 0 0; font-size: 14px; color: var(--note-fg); }
/* The text beside the icon, allowed to be narrower than its own content so a
 * long sentence wraps instead of pushing the card past the viewport, which is
 * the one thing no screen here may do at any width. */
.card16.caution .asked { min-width: 0; }

/* ---------------------------------------------------------------------------
 * Tables
 * -------------------------------------------------------------------------*/
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate);
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}
/*
 * A CELL NEVER FORCES THE TABLE WIDER THAN ITS CONTAINER, whatever is in it.
 *
 * Auto table layout sizes a column to the widest thing a browser cannot break,
 * so one long unbroken value - a code at its thirty-two character bound, an
 * address with no space in it - sets a minimum the whole table has to honour,
 * and the table then runs past the page. Measured: a six-column list with two
 * codes at their bound came out 1131px wide in a 901px viewport, and 433px in a
 * 360px one after it had already stacked into cards. Every value on that page
 * was one the rules accept.
 *
 * Breaking inside a word is the lesser of the two evils and the only one that
 * is bounded: a broken code is still readable and still selectable, and a table
 * that scrolls sideways hides whole columns. It applies to the cells and not to
 * the headings, which are the screen's own words and short by construction.
 */
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; overflow-wrap: anywhere; }
/*
 * Each cell carries its own column heading, hidden while the table is a table.
 * It is what makes the stacked form below readable rather than a column of
 * unlabelled values - the headings are not decoration, they are the only thing
 * that says what each value is once the header row is gone.
 */
.mh { display: none; }

/* ---------------------------------------------------------------------------
 * Discovery: the grant home page and the grant listing
 * -------------------------------------------------------------------------*/
/*
 * Ported from the two artboards class by class, like everything above. Two
 * things in here are worth reading before changing either.
 *
 * THE LISTING IS ONE DEFINITION. Above 900px the panel is a column beside the
 * results; below it the panel is closed and the control in the search row opens
 * it in flow above them. 900px is the width this stylesheet already names for
 * the header, not a new one. The design carried a second, hand-authored narrow
 * version of the listing and the two had already diverged - its fixed-width
 * filter column never wrapped, which is what put the page outside the viewport
 * at 360px; this is what replaces it.
 *
 * NO THIRD WIDTH IS NAMED. Everything else in here reflows on its own: the
 * tiles and the cards are the grid's own tracks, and the card's two halves are
 * flex items that wrap.
 */

/*
 * The hero runs the full width behind the header, which is what the artboard
 * draws - so it cancels the page body's own horizontal padding and states it
 * again as its own. The three values below mirror the three the body padding
 * takes, and each is written beside that padding in the media queries at the
 * foot of this file rather than derived, so that a change to one is visibly a
 * change to the other.
 */
.hero {
  margin: -28px -32px 0;
  padding: 44px 32px 40px;
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
  color: var(--white);
}
.hero h1 { color: var(--white); }
/* The design's own measure: a heading and a lead that stop before the full
   width of a wide viewport, because a line of text that long is hard to read. */
.hero .hero-text { max-width: 640px; }
.hero .lead { opacity: .86; max-width: 560px; margin: 0; }

/*
 * A lead paragraph - the hero's, and the empty state's.
 *
 * 15px is the artboard's size and it is held above the narrow widths. At and
 * below 600px it goes to 16px, which is this platform's floor for running text:
 * the floor is measured at the narrowest width, and it is the width at which a
 * layout is most tempted to shrink type and least entitled to.
 */
.lead { font-size: 15px; }

/*
 * A page section: a heading and the blocks under it.
 *
 * The artboards state the spacing inline on each element; a served page states
 * it once, here. Without this the shell's own rule - an even gap between a
 * page's top-level blocks - would put the same gap between a heading and its
 * own lead as between two sections, and the design draws neither that way.
 */
.wrap > .sect + .sect { margin-top: 30px; }
.sect > .grid { margin-top: 16px; }
.sect > .grid + .row { margin-top: 22px; }

/* A funding-purpose tile: the small card, with its label in medium weight. */
.tile { padding: 16px; font-weight: 600; }

/* ---- The card, on both screens ---- */
/* The home page's summary card: the chip and the agency on one row, then the
   name, the funding range and the window line. */
.cardtop { margin-bottom: 8px; }
.agency { font-size: 12px; }
.fund { margin-top: 12px; }
.amt { font-weight: 600; }

/* The listing's row: the same facts, with the funding range and the control
   drawn to the right of the name at a wide viewport and beneath it at a narrow
   one - by wrapping, not by a width. */
.top-aligned { align-items: flex-start; }
.gmain { flex: 1 1 320px; min-width: 0; }
.gside { flex: 0 1 210px; min-width: 0; text-align: right; }
.gside .amt { font-weight: 700; font-size: 15px; }
.gside .btn { margin-top: 10px; }
/*
 * The listing's own headings are second-level, and they are drawn at the size of
 * a third-level one.
 *
 * The reason they are not third-level: this page has no section heading between
 * its title and them - the design draws none - so a third-level heading would
 * skip a level, which is a real defect for anyone navigating a page by its
 * headings and is on the accessibility floor. The level says where the heading
 * sits in the page; the size is the design's.
 */
.fres h2, .fpanel h2 { font-size: 18px; }
.gcard h2 { margin-top: 9px; }
.gcard .help { margin-top: 6px; }
.fres > .gcard + .gcard { margin-top: 12px; }

/* ---- The search row ---- */
/* The field's label sits above it, so the control beside it aligns with the
   field's own bottom edge rather than with the middle of the pair. */
.search { align-items: flex-end; }
.qfield { flex: 1 1 320px; min-width: 0; margin-bottom: 0; }

/* ---- The filter panel, and how it is reached at a narrow width ---- */
/*
 * ONE DEFINITION FOR EVERY WIDTH, and the defect it replaces is worth stating:
 * the design carried a second, hand-authored narrow version of this screen, and
 * its fixed 280px filter column never wrapped - which is what put the page
 * outside the viewport at 360px and 390px.
 *
 * Above 900px the panel is that column beside the results. Below it the row
 * becomes a block, the panel is closed, and the control in the search row opens
 * it in flow above the results. 900px is the width this stylesheet already names
 * for the header; no third width is introduced.
 */
.lst { display: flex; gap: 20px; align-items: flex-start; }
.lst > .fpanel { flex: 0 0 280px; min-width: 0; }
.lst > .fres { flex: 1 1 420px; min-width: 0; }
.fpanel .ph { font-size: 16px; }
/*
 * The control the panel is opened by is the label of this checkbox, so the
 * panel opens with no script and the control reports its own state truthfully -
 * see the template for why an attribute of our own would not.
 *
 * ABSENT ABOVE THE WIDTH THE PANEL IS A COLUMN AT, not merely invisible. Where
 * the panel is always shown there is nothing to toggle, so a control that could
 * still be reached by a keyboard would be a control that does nothing - and its
 * own label is not shown there either, which makes it a field with no name, one
 * of the things the accessibility floor fails a page for. Below that width it is
 * laid out at zero opacity instead of removed, because there it has to be
 * focusable: it is the only way to the panel.
 */
.fsw { display: none; }
/*
 * The control that opens the panel is the narrow width's own, and it is stated
 * as .btn.ftg rather than .ftg deliberately: this block precedes .btn in this
 * file, and at equal specificity .btn's own display would win and show it at
 * every width.
 *
 * THE APPLY CONTROL IS DRAWN AT EVERY WIDTH. The panel is part of one GET form
 * and nothing filters as a box is ticked, so the column beside the results needs
 * its own way to submit as much as the drawer does.
 */
.btn.ftg { display: none; }
.btn.fapply { width: 100%; justify-content: center; margin-top: 4px; }
/*
 * WHERE THE KEYBOARD IS, ON THE CONTROL A PERSON CAN SEE.
 *
 * The checkbox above is the thing a keyboard reaches and it is laid out at one
 * pixel and zero opacity, so the browser's own focus ring lands on something
 * invisible and the person operating the page by keyboard has no way to tell
 * that the control is the one focused. The ring is therefore painted on the
 * label, which is the control as far as anybody looking is concerned - the same
 * ring the rest of this sheet uses, so focus looks the same everywhere.
 *
 * It is stated as the adjacent sibling, which is why the markup puts the two
 * next to each other: a selector cannot reach backwards or sideways in the
 * document, so a label anywhere else on the page could not be styled from the
 * checkbox's state at all.
 */
.fsw:focus-visible + .btn.ftg {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* A group is a fieldset, so its heading names its boxes; drawn without a frame. */
.fgroup { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.fgroup > legend { padding: 0; }
/*
 * Each value is a real checkbox inside a label that is at least the height of a
 * touch target, so the whole row - box and words - is what a finger hits. The
 * rows sit at that pitch with no gap between them, which is what the design
 * draws for the drawer and the column alike.
 */
.fopt { display: flex; align-items: center; gap: 9px; min-height: var(--target); font-size: 14px; cursor: pointer; }
.fopt input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--blue);
}

/*
 * A small text link at the full height of a touch target: the box is 44px tall
 * and the negative margins hand the extra height back to the layout, so the
 * type stays at 13px and the row it sits in keeps the height the design draws.
 * It is the design's own answer to a 20px control, and it applies to the label
 * form as much as to the link - a control that has to grow on the day it works
 * is a layout that changes on that day.
 */
.lnk44 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  /*
   * AND A MINIMUM WIDTH, not only a height. The height was enough while every one of
   * these carried three or four words; the identity screens put two-word links in a
   * sentence - "Log in", "Register" - and a link whose box is 37px wide is a target
   * that fails the requirement in the one dimension nobody measured. The negative
   * margins hand the extra height back to the layout; the width simply centres the
   * words in a box a finger can hit, which on a longer link changes nothing at all.
   */
  min-width: var(--target);
}

/*
 * AND ITS TYPE IS ITS OWN AND A BUTTON'S IS NOT, which is why these three
 * declarations are scoped away from .btn rather than stated with the box above.
 *
 * This class and .btn are both one class deep, and this block is the later of
 * the two in this file - so on an element carrying both, every declaration here
 * won. A primary button's words took the secondary text colour on the primary
 * blue fill: 1.32:1, which is a button whose label cannot be read at all, and it
 * was on all four of the screens this platform answers with when something is
 * wrong. Its 13px and its negative margins won too, so those buttons were also
 * two sizes down from the size the design draws them at.
 *
 * The fix in the markup was to stop asking: a button is already at least 44px in
 * both directions, so it never needed this class. The scope here is the half
 * that cannot be undone by the next screen to combine them - a text link's type
 * belongs to a text link, and a control that has a ground of its own keeps the
 * colour that ground was measured against.
 */
.lnk44:not(.btn) {
  margin: -11px 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---- No grant matched, and every other card that stands in for a table ---- */
.empty { text-align: center; padding: 40px 22px; }
.empty .mag { width: 40px; height: 40px; color: var(--muted); }
/*
 * The heading of an empty card carries the same margin whichever level it is.
 * The level is the document's business rather than this card's: a card standing
 * alone on a page heads at the second level, and one standing inside a card that
 * already has a heading heads at the third - and the second would be a heading
 * out of order, which a screen reader reports as a missing section. So the rule
 * names both levels rather than the layout naming the level.
 */
.empty h2,
.empty h3 { margin-top: 12px; }
.empty .lead { margin: 8px auto 0; max-width: 420px; }
.centred { justify-content: center; }

/* ---------------------------------------------------------------------------
 * Discovery: one grant's own page
 * -------------------------------------------------------------------------*/
/*
 * Ported from the grant page's artboards. ONE DEFINITION: the body and the side
 * column are flex items with a basis and a minimum, so they sit side by side
 * where there is room and the side column falls beneath the body where there is
 * not - no width is named for either state, and the lists wrap.
 */
.gpage { align-items: flex-start; gap: 28px; }
.gpage > .gbody { flex: 1 1 380px; min-width: 0; }
.gpage > .gaside { flex: 1 1 300px; min-width: 0; }
.gbody h1 { margin-top: 12px; }
.gbody .gagency { margin: 0 0 20px; }
/* The route card, in the tone the design gives a statement about the process. */
.groute { margin-bottom: 16px; background: var(--proc-bg); border-color: var(--proc-line); }
.groute h3, .groute p { color: var(--proc-fg); }
.groute p { font-size: 14px; margin: 6px 0 0; }
.gsect + .gsect { margin-top: 22px; }
.gsect p { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.glist { font-size: 15px; padding-left: 22px; margin: 6px 0 0; overflow-wrap: anywhere; }
.glist .sub { font-size: 14px; }
.gfacts .gtype { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.gfacts .gamount { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.gfacts .gtotal { font-size: 16px; font-weight: 600; }
.gfacts .help { margin: 5px 0 14px; }
.gfacts .gwindow { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
/* The controls are the full width of their column at every width, as drawn. */
.gacts { display: grid; gap: 8px; }
.gacts .btn { width: 100%; justify-content: center; }
.gsupport { margin-top: 14px; }
.gsupport .gsupname { font-size: 14px; font-weight: 600; }
.gsupport .lnk44:not(.btn) { font-size: 14px; color: var(--blue); overflow-wrap: anywhere; justify-content: flex-start; }
/* No longer available: the card stands alone, and its way back is a control. */
.gone h1 { font-size: 26px; }
.gone p { margin: 6px 0 14px; }
/* The listing with nothing on it at all: one card under the page's heading. */
.none-listed p { margin: 6px 0 0; }

/* ---------------------------------------------------------------------------
 * Discovery: saving a grant, and the saved list
 * -------------------------------------------------------------------------*/
/*
 * Ported from the saved-grants artboards and the save control on the grant
 * page's. A control posted as a form is the form's own button: the form is the
 * item the row lays out, so it grows where a bare button would, and the button
 * fills it.
 */
form.inline { display: inline-flex; margin: 0; }
.gacts > .gsave { display: grid; }
.gacts .saved { background: var(--proc-bg); border-color: var(--proc-line); }
.gfacts .gsave-note { margin: 10px 0 0; }
.gsave-note .lnk44 { margin: -11px 0; }
/* The way between the screens of finding a grant, above the page's heading. */
.fnav { gap: 8px; margin: 0 0 14px; }
.fnav .btn { text-decoration: none; }
.saved-lede { font-size: 15px; margin-bottom: 18px; }
/* Each saved card's two controls, side by side and wrapping beneath the funding. */
.gcard-acts { gap: 8px; justify-content: flex-end; margin-top: 10px; }
.gcard-acts .btn { margin-top: 0; }
.gcard + .gcard, .gcard + .bookmark { margin-top: 12px; }
/* The bookmark sentence, in the tone the design gives a note. */
.bookmark { background: var(--note-bg); border-color: var(--soon-line); padding: 14px; }
.bookmark p { font-size: 13px; margin: 0; color: var(--note-fg); }
.saved-empty p { font-size: 15px; margin: 0 0 16px; }
@media (max-width: 600px) {
  .row > form.inline { flex-grow: 1; }
  .row > form.inline > .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * The shell
 * -------------------------------------------------------------------------*/
.shell { position: relative; min-height: 100%; background: var(--page); display: flex; flex-direction: column; }
.shell > main { flex-grow: 1; }

.ftr { background: var(--navy); color: var(--white); padding: 26px 24px; }
.ftr .op { font-size: 13px; opacity: .85; margin: 8px 0 0; max-width: 60ch; }
.ftr .brand { font-weight: 700; font-size: 17px; }
/* Footer notices, 44px per row and the type stays at 13px. */
.ftl { display: flex; align-items: center; min-height: var(--target); font-size: 13px; opacity: .9; color: var(--white); }
/* A notice that leads somewhere is drawn as a link; one that does not is text. */
a.ftl { text-decoration: underline; text-underline-offset: 3px; }
.ftr .cols { align-items: flex-start; gap: 20px; }
/* Intrinsic again: the two columns are flex items with a basis and a minimum,
   so they sit side by side where there is room and stack where there is not -
   with no width named for either state. */
.ftr .about { flex: 1 1 260px; min-width: 0; }
.ftr .notices { flex: 0 1 200px; list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
 * Tablet - below here the header's destinations move into the menu
 * -------------------------------------------------------------------------*/
@media (max-width: 900px) {
  .wrap { padding: 24px 20px; }
  /* The hero's bleed mirrors the padding above it - see the rule itself. */
  .hero { margin: -24px -20px 0; padding: 36px 20px 32px; }
  h1 { font-size: 28px; }
  /*
   * The panel stops being a column and becomes a drawer: the row is a block, the
   * panel is closed, and the control in the search row opens it in flow above
   * the results. A fixed-width column beside the results is not usable here and
   * is what used to overflow the viewport.
   */
  .lst { display: block; }
  .fsw {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .btn.ftg { display: inline-flex; cursor: pointer; }
  .fpanel { display: none; margin: 0 0 16px; }
  .wrap:has(.fsw:checked) .fpanel { display: block; }
  /* Open, the panel says so with its own edge rather than only by being there. */
  .wrap:has(.fsw:checked) .fpanel > .card16 { border-color: var(--blue); border-width: 2px; }
  /*
   * The row of destinations gives way to the menu. The language control and the
   * account controls stay, which is why the menu does not repeat them.
   */
  .nav { display: none; }
  .disclose { display: block; }

  /*
   * AND A TABLE WITH MORE THAN A HANDFUL OF COLUMNS RESTRUCTURES HERE RATHER
   * THAN AT THE NARROW WIDTH BELOW.
   *
   * The restructure is the same one, and the only thing that differs is the
   * width at which it happens - which is why it is stated as a width and not as
   * a second design: six, seven or eight columns, one of them an email address
   * bounded at 128 characters, cannot be laid out in 640px whatever the type
   * size, so between the two named widths such a table was 796px wide in a 640px
   * viewport and part of it was reachable only by scrolling sideways. Measured in
   * a browser, not reasoned about: that is exactly how it was found.
   *
   * Marked on the table rather than inferred from its columns, because how many
   * values a row carries is a property of the screen and CSS cannot count them.
   * And it is this width rather than an invented third one: the frame collapses
   * to its menu here, so "the row of destinations no longer fits" and "a wide
   * table no longer fits" are one statement about the viewport.
   */
  .tbl.wide { display: block; }
  .tbl.wide caption { text-align: left; }
  .tbl.wide thead { display: none; }
  .tbl.wide tbody { display: block; }
  .tbl.wide tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    padding: 12px;
    margin-bottom: 10px;
  }
  .tbl.wide th { display: none; }
  .tbl.wide td { display: block; border: none; padding: 3px 0; }
  .tbl.wide td:first-child { padding-bottom: 8px; }
  /*
   * The column heading each stacked cell carries is hidden by the base rule and
   * revealed at the narrow width; a wide table stacks earlier, so it is revealed
   * earlier too - a stacked cell with no heading is a column of unlabelled
   * values.
   */
  .tbl.wide .mh {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 2px;
  }
}

/* ---------------------------------------------------------------------------
 * Narrow - no horizontal scrolling at any width
 * -------------------------------------------------------------------------*/
@media (max-width: 600px) {
  /* .tbl .mh beats the base `.mh{display:none}` on specificity, so it does not
     matter whether that rule appears before or after this block. */
  /*
   * 12px, not the canvas's 11px. Nothing on this platform goes below 12px, and
   * this is reading text - it is the only thing that says what each value in a
   * stacked card is, once the header row is gone. The canvas is corrected to
   * match; the runtime does not inherit the smaller size in the meantime.
   */
  .tbl .mh {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 2px;
  }

  body { font-size: 16px; }
  .hdr { padding: 12px 16px; gap: 10px; }
  .logo { font-size: 16px; }
  .wrap { padding: 18px 16px; }
  /* Again mirroring the padding above it. */
  .hero { margin: -18px -16px 0; padding: 28px 16px 26px; }
  h1 { font-size: 24px; }
  h2 { font-size: 19px; }
  /*
   * A lead paragraph is running text, and running text does not go below 16px
   * at the narrowest width this module serves. The artboard's 15px holds
   * everywhere above this.
   */
  .lead { font-size: 16px; }
  /*
   * The card's two halves have stacked by now, so the funding range and its
   * control read from the left like everything above them - right-aligned text
   * in a single column reads as a mistake.
   */
  .gside { text-align: left; }
  .card, .card16 { padding: 16px; border-radius: 12px; }
  /*
   * The canvas forces a single column here. That rule is deliberately absent:
   * the grids above reach one column on their own at this width, by their track
   * sizing, so restating it as a breakpoint would only hide whether the
   * intrinsic behaviour works - and a test that measured the column count below
   * 600px would be measuring this rule instead of the reflow.
   */
  /* Every button becomes full-width and stacks - 44px targets preserved. */
  .btn { width: 100%; }
  .btn.sm { width: auto; }
  .row > .btn { flex-grow: 1; }
  /* Tables restructure into stacked cards rather than scrolling sideways. */
  .tbl { display: block; }
  .tbl caption { text-align: left; }
  .tbl thead { display: none; }
  .tbl tbody { display: block; }
  .tbl tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    padding: 12px;
    margin-bottom: 10px;
  }
  .tbl th { display: none; }
  .tbl td { display: block; border: none; padding: 3px 0; }
  .tbl td:first-child { padding-bottom: 8px; }
  .lang { font-size: 12px; padding: 4px 9px; }
  .lang::before { inset: 8px 0; }
  .pill { padding: 6px 14px; font-size: 13px; }
  .ftr { padding: 20px 16px; }
}

/* ---------------------------------------------------------------------------
 * The identity screens
 * -------------------------------------------------------------------------*/
/*
 * Ported from the artboards for registering, signing in, confirming a code,
 * resetting a password, deciding a membership request and the account settings.
 *
 * The canvas states most of this as inline style, because an artboard is one
 * file and has nowhere else to put it. Here it is named, for the reason the
 * whole sheet exists: a served page carries no inline style at all, which is
 * what keeps a content security policy that forbids inline style reachable.
 *
 * Every rule below reflows on its own. The two named widths in this file - 900
 * for the header and 600 for tables and buttons - are the only ones, and
 * nothing here adds a third: the narrow column is a maximum rather than a
 * width, the option list and the description list are auto-fitting tracks, and
 * the code boxes wrap.
 */

/*
 * The centred column the pre-session screens sit in. A maximum and not a width:
 * below it the column is the viewport, above it the form stops growing - a
 * hundred-character-wide text field is harder to read, not easier.
 *
 * Two sizes, which is the whole of the design's vocabulary here: the narrow one
 * for a form of two or three fields, the wider one for the declaration step,
 * which carries a list, two blocks and a checkbox.
 */
.mid { display: flex; justify-content: center; padding-top: 40px; }
.narrow { width: 100%; max-width: 460px; }
.narrow.roomy { max-width: 620px; }

/* The step indicator. Words rather than graphics: it is read out as "step 2 of
   3", which three unlabelled dots are not. */
.step { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.step .now { color: var(--navy); font-weight: 700; }

/*
 * A choice from a controlled list, as the design draws it: a card per value,
 * the chosen one ringed.
 *
 * A REAL RADIO INSIDE A REAL LABEL, which is what makes the whole card a target
 * and what lets a keyboard move through the list with the arrow keys. The input
 * itself is laid out rather than hidden, because an input at one pixel takes the
 * focus ring with it and a keyboard user then cannot see where they are.
 *
 * Auto-fitting tracks, so five values are a column at 360px and share the width
 * where there is room - with no breakpoint deciding which.
 */
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--target);
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.opt:has(input:checked) { border-color: var(--blue); border-width: 2px; padding: 9px 13px; }
.opt input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--blue); }

/*
 * The declaration, and any other statement a person has to tick. The control
 * and the sentence are one label, so the sentence is the target as well as the
 * box - the box alone is 20px, and a 20px target is a requirement failed.
 */
/*
 * The whole label is the target and not the box inside it. A checkbox is drawn at
 * twenty pixels by every browser and by this design; what a person hits is the row, so
 * the row carries the minimum. Growing the box instead would draw a checkbox the size
 * of a button.
 */
.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--target); font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--blue); }

/* A panel inside a card: the second-contact block and the declaration block,
   which the design sets on the page ground to separate them from the form. */
.panel { background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.panel h2, .panel h3 { font-size: 17px; margin: 0; }

/*
 * A label-and-value list - the requester's declaration, the state of a
 * membership request. Auto-fitting tracks again, so it is one column on a phone
 * and as many as fit on a desktop, and a value never sits away from its label.
 */
.dl { display: grid; gap: 12px 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
.dl dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
.dl dd { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; }

/* The declaration as the requester made it, quoted so that it reads as their
   words rather than as the page's. */
.quote { margin: 0; padding-left: 14px; border-left: 3px solid var(--line); font-size: 14px; }

/*
 * A key to be transcribed by hand. Monospaced and loosely spaced, because the
 * failure mode is a person misreading one character in a string they only get
 * one sight of.
 */
.key { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .14em; overflow-wrap: anywhere; }

/*
 * The six-box code input the design draws for the second factor.
 *
 * SIX BOXES ON THAT SCREEN AND A SINGLE FIELD EVERYWHERE ELSE, exactly as
 * drawn - it is not an inconsistency to tidy up. A code read from an app on the
 * same device is typed digit by digit; a code read from an email is pasted, and
 * a pasted value lands in one field and nowhere near six.
 *
 * They wrap rather than shrink, so at 360px they are two rows of boxes a finger
 * can hit instead of six boxes too small to.
 */
.boxes { display: flex; gap: 8px; flex-wrap: wrap; }
.boxes input {
  width: 48px;
  min-height: 52px;
  text-align: center;
  font-size: 20px;
  border: 1px solid var(--line-field);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}

/* The control that ends a session, in the slot the log-in control occupies. The
   form is the wrapper the header lays out; the button is the pill. */
.out { display: inline-flex; margin: 0; }
.out .pill { border: 0; background: none; font: inherit; cursor: pointer; }

/* A short list of statements - what the second contact does and does not do. */
.bullets { margin: 0; padding-left: 20px; font-size: 14px; }
.bullets li + li { margin-top: 6px; }

/* A stack of sections on one page, each its own card: the account settings. */
.stack { display: grid; gap: 16px; }

/* A line of supporting text centred under a form. The design centres three of
   these - "already have an account", "grant information can be read without
   logging in" - and centring is a property of the line rather than of the
   column it sits in. */
.centred-text { text-align: center; }

/* The second language's half of a page that carries both on one card, under a hairline
   rule: the web server's own too-large page. */
.other-language { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
 * The business profile
 * -------------------------------------------------------------------------*/
/*
 * Ported from the profile artboards class by class, like everything above.
 *
 * ONE SET OF RULES FOR EVERY WIDTH. There is no mobile definition of any of
 * these screens: the attribute row wraps because its two halves are flex items
 * with a basis rather than a fixed pair of columns, the equity fields and the
 * row form reflow as tracks that fit, and the record table restructures into
 * cards below the width at which four columns stop fitting. A breakpoint appears
 * below only where a layout genuinely changes shape - the table - and not to
 * re-state a size.
 */

/*
 * The card that says what the profile is for, in the design's own confirming
 * green. Its own rule rather than the note component's, because the note is
 * amber and means "be aware of this"; this means "this is already done for you",
 * which is the opposite.
 */
.assure {
  background: var(--open-bg);
  border-color: var(--open-line);
  color: var(--open-fg);
  margin: 16px 0;
}
.assure b { display: block; }
.assure p { font-size: 14px; margin: 4px 0 0; }

/*
 * A read-only definition list: a label and the value under it, one pair per
 * row, on the cards that show how something is configured.
 *
 * A REAL <dl> RATHER THAN A GRID OF DIVS, because that is what these are: a
 * screen reader announces the label with the value it belongs to, which is the
 * whole of the accessible structure a configuration card needs. The rows are
 * grouped in a div inside the list, which is what lets each pair carry its own
 * separator without a table.
 *
 * THE BOXED FORM IS FOR A VALUE SOMEBODY TYPED, as the approved board draws it:
 * the identity values sit in a bordered box because an edit form will show the
 * same values in inputs at the same size, and the two screens should not move
 * under a person switching between them. The unboxed form is for a value the
 * platform derived - a route's name, a count - which was never typed.
 *
 * WHY THE BOX IS NOT THE FIELD CLASS. A field is a flex row sized for a control
 * and it will not wrap a long word; a stored name in either language can be
 * longer than a 360px column, so this wraps anywhere rather than running past
 * the card.
 */
.dfns { margin: 0; }
.dfn { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.dfn:last-child { border-bottom: 0; }
.dfn dd { margin: 0; font-size: 15px; font-weight: 600; }
.dfn dd .help { display: block; font-weight: 400; }
.dfn dd.dfn-box {
  font-size: 14px;
  font-weight: 400;
  border: 1px solid var(--line-field);
  border-radius: 8px;
  background: var(--white);
  padding: 10px 13px;
  min-height: var(--target);
}
/* The card above the one beside it, where a column holds two. */
.dfn-card { margin-bottom: 14px; }
/* A derived figure a card leads with - the same weight as a definition value. */
.dfn-value { font-size: 15px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.dfn-grants { margin: 6px 0 0; padding-left: 18px; }
.dfn-grants li { overflow-wrap: anywhere; }

/*
 * THE INERT GRANTS PICKER ON A PERSON'S FORM, BESIDE THE REASON IT IS INERT.
 * The boards draw the two side by side where there is room for both and stacked
 * where there is not, which is what a row of two flexible items does - the
 * picker sized to the width a control reads at and allowed to shrink, the
 * sentence taking what is left and centred against it. An absent picker would
 * be indistinguishable from one that failed to load, so it is drawn, marked
 * unavailable to anything that reads the page, and the sentence says what to do
 * instead.
 */
.nopick { flex: 0 1 260px; min-width: 0; background: var(--page); }
.nopick-why { margin: 0; flex: 1 1 240px; min-width: 0; align-self: center; }

/*
 * A STORED VALUE NEVER FORCES A LAYOUT WIDER THAN ITS CONTAINER, wherever it is
 * rendered. This is the same rule as the one on a table cell, applied to the
 * other five places a value somebody typed or a code somebody chose reaches a
 * screen - and it is a rule about DATA rather than about a kind of element,
 * which is why it is a list of the places data lands rather than a blanket.
 *
 * WHAT CROSSES THE LINE, MEASURED: an email address at its two-hundred-and-
 * fifty-four character bound, which has no space in it to break at, and a code
 * at thirty-two, which is one unbroken word. Both appear in a definition value,
 * in a boxed field value, in a breadcrumb and - for a code - as a group heading
 * over a table. Auto layout sizes a column, and a flex or grid track, to the
 * widest thing a browser cannot break, so one of these sets a minimum the whole
 * page has to honour and the page then runs past the viewport.
 *
 * LABELS AND HEADINGS ARE NOT IN THIS LIST AND MUST NOT BE. The words of the
 * interface are the screen's own, they are short by construction, and breaking
 * one mid-word would be making this platform's own prose unreadable to fix a
 * problem it does not have. The exception is the ministry group heading, which
 * is not a heading in that sense: it renders a stored code.
 */
.mingroup h2,
.mingroup .sub,
.crumb,
.fld,
.opt > span,
.dfn dd { overflow-wrap: anywhere; }
/*
 * AND THE OPTION'S LABEL MAY SHRINK. It is a flex item, so without this it
 * cannot go below its own minimum content width - and on a picker whose
 * options are grant codes that minimum is a thirty-two character unbroken
 * word, which set the whole page 447px wide in a 360px viewport. Breaking
 * inside the word is what makes the minimum one character; being allowed to
 * shrink is what makes the break happen.
 */
.opt > span { min-width: 0; }
/* The group a ministry heading and its own line make, which may shrink. */
.mingroup { flex: 1 1 320px; min-width: 0; }

/* The two cards of attribute rows. */
.attrs { margin-bottom: 16px; }
.attrs h2 { font-size: 18px; }
.attrs > .sub { font-size: 14px; margin-bottom: 6px; }

/*
 * One attribute: a label and its value on the left, the badges and the edit
 * control on the right.
 *
 * THE WRAP IS THE WHOLE OF THE RESPONSIVE BEHAVIOUR and it needs no breakpoint.
 * The left side may grow and may shrink to 260px; the right side is sized by its
 * content and never shrinks. Below the width at which those two fit side by
 * side, the row becomes two lines - which is what the mobile artboard draws, from
 * this same declaration rather than from a second one.
 */
.attr { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.attr:last-child { border-bottom: 0; }
.attr-line { align-items: flex-start; }
.attr-main { flex: 1 1 260px; min-width: 0; }
.attr-value { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
/* A value nobody has stated yet: words, and in the secondary colour, so it reads
   as an absence rather than as a value that happens to say that. */
.attr-none { color: var(--muted); font-weight: 400; }
.attr-side { gap: 10px; flex: 0 0 auto; }
.attr-side .chip { font-size: 12px; }

/* The design's own mark on a mandatory field. Decoration - the word beside it,
   read out and not shown, is what carries the meaning. */
.req { color: var(--danger); }

/* ---- An attribute's edit state ---- */
.h1-edit { font-size: 26px; }
.lede-edit { font-size: 15px; margin-bottom: 18px; }
/* The card a form sits in, at the width the design draws it. A form wider than
   this is a form whose fields are further from their labels than they are long. */
.editcard { max-width: 620px; }
.acts { gap: 10px; margin-top: 20px; }

/* The primary contact's edit state, in the second contact's screen's shape: what
   replacing the address does and does not do, on the caution card's warm ground
   inside the form card, at the board's smaller type; and Save across the card. */
.contact-what { margin-top: 18px; padding: 14px; }
.card16.caution.contact-what .ask { font-size: 14px; }
.contact-what .bullets { margin-top: 8px; font-size: 13px; color: var(--note-fg); overflow-wrap: anywhere; }
.btn.contact-save { width: 100%; justify-content: center; margin-top: 18px; }

/*
 * A real select, styled as the field it is drawn as.
 *
 * `display: block` rather than the field's own flex, because a select's children
 * are its options: flex on a select is undefined in practice and renders
 * differently in each engine. The full width and a zero minimum are what keep it
 * inside its column at 360px - a select sizes itself to its longest option by
 * default, and an industry classification's longest label would push the page
 * sideways. The overflow clip is for the chosen option's text rather than the box:
 * one engine counts the text a select cuts off toward the width the page can be
 * scrolled, so a long agency name chosen in a narrow select panned the whole page
 * sideways while the box itself stayed inside its column. The height is the field's.
 */
select.fld { display: block; width: 100%; min-width: 0; overflow: hidden; appearance: none; padding-right: 36px; }
/* A list that shows several options at once scrolls inside itself: the clip above would stop it. */
select.fld[multiple] { overflow-y: auto; }
select.fld:disabled { background: var(--page); color: var(--placeholder); }

/*
 * A button that is drawn as a small text link, for the three places where the
 * design draws a link and the action changes something: clearing a value, and
 * removing a record.
 *
 * A LINK CANNOT DO IT. Every state-changing route in this module is a POST, and a
 * link that changed something could be followed by a browser, a crawler or a
 * prefetch without anybody having asked it to. So the control is a real button
 * inside a real form, drawn as the design draws it - and it keeps the touch
 * target the class it shares carries, in both dimensions.
 */
.aslink { display: inline-flex; margin: 0; }
/*
 * Spelled with both classes so it outweighs the rule above that gives every
 * small text link the secondary colour. It has to: these are controls, the
 * design draws them as links, and a link is navy and underlined - which is what
 * distinguishes them from the helper text they would otherwise match.
 */
button.lnk44.aslink {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  margin: -11px 0;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
button.lnk44.aslink:hover { text-decoration: none; }

/* ---- The ownership form ---- */
.composition { margin-top: 20px; }
/*
 * The three percentages. A smaller minimum track than the default grid, because
 * a percentage is four characters and a 240px minimum would stack three of them
 * on a tablet for no reason.
 */
.grid.equity { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
/* The figure the database derives, shown and never entered. */
.derived { margin-top: 16px; padding: 12px 14px; background: var(--page); border-radius: 10px; }

/* ---- The two record lists ---- */
.recordcard { max-width: 860px; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--muted); }
.empty-help { margin: 6px auto 14px; max-width: 420px; }
/* The empty panel the design draws: a dashed outline, which says "nothing here
   yet" rather than "a card failed to load". */
.recordcard .empty { padding: 28px 16px; border: 1px dashed var(--line-field); border-radius: 12px; }
/* Edit and Remove on one row, and they do not wrap apart from each other: two
   controls for the same record read as a pair. */
.acts-row { gap: 16px; flex-wrap: nowrap; }
.declare { margin-top: 16px; }
.backlink { margin-top: 14px; }

/*
 * The record table becomes a list of cards rather than scrolling sideways.
 *
 * At 640px rather than at the 600px the shell's own tables use, and the
 * difference is the content: four columns of names, a year and an amount stop
 * fitting before three columns of shorter values do. It is the width the design's
 * own board carries.
 */
@media (max-width: 640px) {
  .tbl.cards { display: block; }
  /*
   * THE HEADER ROW GOES, NOT ONLY ITS CELLS, and the tbody becomes a block.
   *
   * Hiding the cells alone leaves the row itself, which the rule below gives a
   * border, a ground and a margin to - so a stacked table began with an empty
   * bordered box above its first card. And a row group left as a table row
   * group inside a block parent is wrapped in an anonymous table by the
   * browser, which is what makes the cards below it lay out as a table's rows
   * again rather than as blocks. The wide table beside this one has carried
   * both rules since it was written; this one had neither, and the design
   * canvas emits both.
   */
  .tbl.cards thead { display: none; }
  .tbl.cards tbody { display: block; }
  .tbl.cards tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    padding: 12px;
    margin-bottom: 10px;
  }
  .tbl.cards th { display: none; }
  .tbl.cards caption { display: none; }
  .tbl.cards td { display: block; border: none; padding: 3px 0; }
  .tbl.cards td:first-child { padding-bottom: 8px; }
  /* And the heading each cell carries, which is the only thing that says what a
     value is once the header row is gone. */
  .tbl.cards .mh { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); }
}
/* ---------------------------------------------------------------------------
 * The permission matrix, as cards
 * -------------------------------------------------------------------------*/
/*
 * ONE CARD PER ROLE, NOT A GRID. Nine columns and twenty-two rows cannot be a
 * table at 360px without scrolling sideways, and a table in this module
 * restructures rather than scrolls - so the matrix is a card per role and
 * population, each listing every action with its mark. One definition serves
 * every width: the cards are the grid's own tracks, and there is no breakpoint
 * here at all.
 */
.mx {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.mx:last-of-type { border-bottom: 0; }
/* The mark itself never shrinks: it is the column the eye runs down. */
.mark { flex-shrink: 0; font-weight: 700; }
/*
 * The two marks take the palette's own approved pair rather than new colours:
 * the permitted tone is the one every "open" chip already uses, and the refused
 * one is the muted text colour - which measures against both surfaces this
 * module draws on, and is the same colour as the words beside it.
 */
.mark.yes { color: var(--open-fg); }
.mark.no { color: var(--muted); font-weight: 400; }
/* A row that is not permitted is stated in the muted tone as well as by its
   mark - never by colour alone, which is why the mark also carries a word. */
.mx .off { color: var(--muted); }

/* ---------------------------------------------------------------------------
 * The authenticator enrolment: the scannable code and the key beside it
 * -------------------------------------------------------------------------*/
/*
 * TWO WAYS TO TAKE ONE ENROLMENT, side by side where there is room and stacked
 * where there is not - auto-fitting tracks, so no breakpoint decides it and the
 * narrow width is the one the minimum produces.
 *
 * The drawing is markup rather than an image the browser fetches: what it
 * encodes is the shared secret, and a secret in an address is a secret in an
 * access log. It is sized by its box so that one figure serves every width.
 */
.enrol { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: start; }
.enrol-code { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.enrol-code svg { display: block; width: 100%; height: auto; max-width: 220px; }
.enrol-key { min-width: 0; }

/*
 * A note in an officer's own words: several lines, in one language, kept as
 * typed. The field is the same box as every other - one definition of what a
 * field looks like - with the height a few sentences need and room to grow.
 */
.fld.area { display: block; width: 100%; min-height: 96px; resize: vertical; font: inherit; }

/* ---------------------------------------------------------------------------
 * The Content section of the Backoffice
 * -------------------------------------------------------------------------*/
/*
 * Ported from the seven artboards class by class, like everything above it.
 * Three things in here are worth reading before changing any of them.
 *
 * NO WIDTH IS NAMED IN THIS BLOCK AT ALL. The editor's two columns, the
 * confirm screen's six facts and the preview's four controls are the grid's own
 * auto-fitting tracks and the row's own wrapping, so they reflow on their own
 * and the same markup serves the narrowest width this module presents at and
 * the widest. The two tables in the section are marked as wide tables and use
 * the restructuring rules the media queries above already hold.
 *
 * THE SELECTED CHIP IS A BORDER AND A WEIGHT, NEVER A COLOUR ALONE. A filter
 * that said which set you were looking at only by hue would say nothing to
 * anybody who cannot see it, so the selected chip takes the accent border and
 * the navy label the artboard draws, and the control is a real link either way.
 *
 * AND THE PREVIEW STAGE IS A WIDTH RATHER THAN A DEVICE. The narrow combination
 * constrains the stage to the width the design's own mobile renderings are drawn
 * at and centres it; the page around it is unchanged, because what is being
 * previewed is the content and not the browser.
 */

/* The row of surface chips, and the language and width controls above a preview. */
.chips { gap: 8px; }
/* The selected one. Both properties, so the state is not carried by colour. */
.btn.sec.on { border-color: var(--blue); color: var(--navy); font-weight: 700; }

/*
 * A card that explains something rather than holding a control: the note that
 * says there is no audience control, and the statement about approval by email.
 * The blue ground is the design's for a statement of fact, as distinct from the
 * amber one for a caution.
 */
.card16.aside { background: var(--proc-bg); border-color: var(--proc-line); }
.card16.aside .said-title { color: var(--proc-fg); font-size: 16px; }
.card16.aside .said { margin: 5px 0 0; font-size: 14px; color: var(--proc-fg); }
.card16.aside .lbl { color: var(--proc-fg); }
.card16.aside .recorded { margin-top: 14px; }

/*
 * The screens the design draws as one column of a measured width rather than
 * across the page: the schedule form, the checklist, the statement. A maximum
 * and not a width, so the narrow widths are unaffected and nothing has to be
 * said about them.
 */
.narrow-card { max-width: 720px; }

/*
 * The preview stage: the public page's own band, inside a frame that says what
 * is being looked at.
 */
.card16.framed { padding: 0; overflow: hidden; }
.card16.framed .caption { padding: 10px 16px; margin: 0; border-bottom: 1px solid var(--line); background: var(--page); }
.stage { padding: 20px; }
/*
 * The hero inside the stage keeps its own look and loses its full-bleed
 * negative margins - it is inside a card here rather than behind the header,
 * and a bleed would pull it out of the frame it is being examined in.
 */
.stage .hero { margin: 0; border-radius: 12px; padding: 26px; }
/*
 * The heading of a previewed item is a paragraph and not a heading element,
 * deliberately: the Backoffice page around it already has its own level-one
 * heading, and a second one inside a preview would make the officer's screen
 * read as having two titles to anybody navigating by headings.
 */
.stage .hero-heading { font-size: 22px; font-weight: 700; margin: 0; color: var(--white); }
.stage .hero .lead { margin-top: 8px; }
/* The narrow combination: the design's own mobile width, centred. */
.stage.narrow { max-width: 430px; margin: 0 auto; }

/*
 * A submit drawn as a text link: restoring a version changes something, so it
 * has to be a form rather than a link, and the design draws it as a row action
 * beside the others. The touch-target class gives it the box; this removes the
 * button chrome a form control arrives with and nothing else.
 */
.lnk44.plain {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.lnk44.plain:hover { text-decoration: none; }

/*
 * The home page with no hero served.
 *
 * A QUIET BAND AND NOT A BLANK ONE. The heading still carries the page, so it
 * keeps the band's shape and takes the navy ink on the pale ground the design
 * draws for this state - which is a page waiting for content rather than a page
 * that failed to load. Nothing here is a fallback copy of the hero: what is
 * absent is content, and content is not something this stylesheet can supply.
 */
.hero.quiet { background: var(--page-deep); border-bottom: 1px solid var(--line); color: var(--slate); }
.hero.quiet h1 { color: var(--navy); }
.hero.quiet .lead { opacity: 1; font-size: 17px; }

/* ---------------------------------------------------------------------------
 * The reference-data lists
 * -------------------------------------------------------------------------*/
/*
 * One of the eight lists on the card that lists them: its name and one line of
 * help on the left, its count and the way to open it on the right.
 *
 * THE WRAP IS THE WHOLE OF THE RESPONSIVE BEHAVIOUR, as it is on the attribute
 * rows this borrows its shape from, and it needs no breakpoint. The left side
 * may grow and may shrink to 200px; the right side is sized by its content and
 * never shrinks. Below the width at which those two fit side by side, the row
 * becomes two lines.
 *
 * THE OPEN LIST IS MARKED BY THE ATTRIBUTE A SCREEN READER REPORTS, and the
 * ground is drawn from it rather than from a class of its own - so a row that
 * looks like the current one and does not say so is not expressible. The
 * negative margin hands the extra padding back to the card, so the highlighted
 * row lines up with the eight beside it instead of insetting.
 */
/*
 * A heading over a run of rows in a table: the section a page of the industry
 * classification is grouped under, named and counted once above its own rows.
 *
 * ONE CELL SPANNING THE TABLE, and a ground rather than a rule, because what it
 * separates is runs of rows rather than columns. Once the table has stacked it
 * becomes a heading card above the value cards it covers, which is what the
 * stacking rules already do to a row - so nothing here is needed at that width
 * beyond the ground it already has.
 *
 * AND IT WRAPS ANYWHERE, because part of it is stored text: a section's label
 * comes from the list rather than from this product's own words, and a long one
 * with nowhere to break is exactly what runs a page past the viewport.
 */
.tbl .gh {
  background: var(--page-deep);
  font-weight: 600;
  padding: 9px 10px;
  overflow-wrap: anywhere;
}

/*
 * The line that says how much of a searched list arrived, which quotes the
 * keyword somebody typed.
 *
 * IT WRAPS ANYWHERE BECAUSE PART OF IT IS TYPED. The keyword field accepts a
 * hundred and twenty-eight characters and nothing makes a person put a space in
 * them - and an unbroken run that long inside a sentence is exactly what runs a
 * page past a 360px viewport. Every other element on these screens that renders
 * something a person or the Ministry supplied carries the same rule; a heading
 * or a label never does, because those are this product's own words and are
 * known to fit.
 */
.matched { overflow-wrap: anywhere; }

.setrow { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.setrow > .row { flex-shrink: 0; gap: 10px; }
.setrow[aria-current] {
  background: var(--proc-bg);
  border-radius: 10px;
  border-bottom-color: transparent;
  padding: 12px 10px;
  margin: 0 -10px;
}
/* A row that is a variant of the row above it, indented under it as the board
   draws it: the eleven notification texts are nine events, two of which have a
   second text addressed to the agency, and the indent is what says so at a
   glance. The label says it too, in words, for anybody the indent does not
   reach. */
.setrow.variant { padding-left: 22px; }

/* The name and its help line, which may shrink. */
.setname { flex: 1 1 200px; min-width: 0; }
.setname b { font-size: 14px; }
.setname .help { margin-top: 2px; }

/* --------------------------------------------------------------------------
 * Operational monitoring - SCR-BKO-01, SCR-BKO-02, SCR-BKO-05
 * -------------------------------------------------------------------------*/
/*
 * The figure on a monitoring tile: one count, large enough to be read across a
 * desk, above the label that says what it counts.
 *
 * A CLASS AND NOT AN INLINE STYLE, which is not tidiness: a content-security
 * policy that forbids inline style is the one control that makes an injected
 * string harmless, and it cannot be introduced later over templates that need
 * inline style to look right.
 *
 * IT SCALES WITH NOTHING. The size is fixed because a count is one to four
 * digits at every width the design serves, and a figure that shrank on a phone
 * would be a figure somebody misreads.
 */
.fig { font-size: 30px; font-weight: 700; line-height: 1.1; }
/*
 * The chip beneath a figure, where the tile has something to say about it. The
 * margin is here rather than on the chip itself, which is used on a row beside
 * text everywhere else in the product.
 */
.fig + .chip { margin-top: 8px; }
/*
 * The search card on the application list: the keyword, four narrowings and the
 * control that runs it, as tracks that fit rather than as a fixed row. The
 * keyword's own track is wider, because what is typed into it is longer than any
 * of the others.
 */
.find { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); align-items: end; }
/*
 * The keyword field spans two of the search card's tracks, as the board draws
 * it - and the one width-keyed rule in this section undoes that span where two
 * tracks no longer fit.
 *
 * WHY IT IS A QUERY AND NOT INTRINSIC, stated so it is a considered exception
 * rather than a precedent. The card's tracks already fit intrinsically; what
 * needs a width is the SPAN, because a span of two is wider than the grid
 * whenever the grid has one track, and the layout then overflows. CSS has no
 * way to say "span two tracks, or all of them if there are fewer" - the two
 * intrinsic alternatives are to span every track at every width, which makes
 * the keyword full-width on a desk and is not what the design draws, or to drop
 * the span and make the keyword the same width as a date, which is the field
 * somebody types the most into. So it is one property, restated once, on a
 * layout that is otherwise entirely intrinsic.
 */
.find .wide { grid-column: span 2; }
@media (max-width: 640px) { .find .wide { grid-column: span 1; } }
/*
 * The two dates of a range, which are one field to a reader and two inputs to a
 * form - so they sit on one line and wrap together.
 */
.find .pair { display: flex; gap: 8px; flex-wrap: wrap; }
.find .pair .fld { flex: 1 1 120px; min-width: 0; }
/*
 * A control the design draws and this release does not carry out - the export
 * the reporting package owns. Drawn as the board draws it and plainly not
 * available: a disabled control that looked like a live one would be a control
 * somebody presses and reports as broken.
 */
.later { color: var(--slate); }
.later + .help { margin-top: 2px; }
/*
 * A stored value shown as it is stored: a template's subject, its body, a
 * placeholder token.
 *
 * IT WRAPS ANYWHERE, WHICH IS NOT DECORATION. A body is up to four thousand
 * characters and may carry an unbroken token run with no break opportunity in
 * it; without this the card grows past the viewport and the page scrolls
 * sideways, which this product's screens never do. The rule is on the element
 * that renders a stored value and never on a label, because a label is a word
 * somebody chose and breaking it mid-word is worse than wrapping it.
 */
.wrapped { overflow-wrap: anywhere; }
/*
 * And a body keeps the line breaks it was authored with. A notification is sent
 * as plain text, so the breaks in it are part of the message rather than
 * markup - collapsed, the panel would show something other than what goes out.
 */
.wrapped.body { white-space: pre-wrap; }
/* ---------------------------------------------------------------------------
 * A grant's configuration
 * -------------------------------------------------------------------------*/

/*
 * ANYTHING WHOSE TEXT WAS TYPED BY SOMEBODY BREAKS ANYWHERE. A grant's name is
 * accepted at a hundred and sixty characters in each language, a document's
 * instruction at two thousand, a code at thirty-two - and nothing makes a person
 * put a space in any of them. An unbroken run that long inside a card is exactly
 * what runs a page past a 360px viewport, which is what the browser suite
 * measured on the documents board before this rule existed.
 *
 * IT CARRIES min-width:0 AS WELL, because most of these sit inside a flex row,
 * and a flex child will not shrink below the width of its longest word without
 * it. The break rule alone does nothing there - the element wraps its text and
 * the row grows anyway, which is the half of this defect that looks fixed.
 *
 * THE SAME RULE IS ALREADY ON EVERY TABLE CELL, ON A DEFINITION'S VALUE AND ON
 * A QUOTED KEYWORD. This is the same decision for the elements those do not
 * cover; a heading or a label never carries it, because those are this product's
 * own words and are known to fit.
 */
.brk { overflow-wrap: anywhere; min-width: 0; }

/*
 * ---- A stored name, drawn as the name of the thing ----
 *
 * THE BOARD'S OWN CLASS FOR A FILENAME, and it carries one declaration the break
 * rule above does not: the weight. A document's name is the name of an object a
 * person keeps, drawn semibold on the card so the eye lands on it before the size
 * and the date beside it; with the break rule alone it rendered at 400 and the
 * card read as three lines of body text.
 *
 * AND ON A LINK IT ALIGNS LEFT, which is the second half of the same drawing. The
 * touch-target class centres its words, which is right for the two-word links it
 * was written for and wrong for a name: a short filename sat in the middle of a
 * 187px box while the three names under it started at the left edge. Scoped to
 * the pair rather than written inline on the element, so the rule has one home.
 */
.nm { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.lnk44.nm { justify-content: flex-start; }

/*
 * ---- The tab strip on a grant's record ----
 *
 * NINE DESTINATIONS THAT WRAP, NOT SCROLL. The board draws them as one row
 * inside the card that also carries the rule beneath them. Nine tabs, each with
 * a dot and a word, do not fit one line at a desk and come nowhere near fitting
 * at 360px - so the row wraps and every tab keeps its own width, which is why
 * each is `flex: 0 0 auto` rather than a share of the row. A strip that scrolled
 * sideways instead would put a destination behind a gesture, which nothing in
 * this product does.
 *
 * FORTY-FOUR PIXELS EACH, stated here rather than left to the text's own height:
 * these are the most-used destinations in the section and they are tapped on a
 * phone.
 */
.tabstrip { padding: 10px 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 2px; font-size: 13px; }
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
  min-width: 0;
}
/* The tab being read, on the design's own selected ground. */
.tab.on { background: var(--proc-bg); }
/*
 * AND A TAB WITH NO SCREEN TAKES THE ROOM ITS REASON NEEDS. Three of the nine
 * carry a sentence rather than a readiness word, and the board draws those wide
 * - they grow into the room the row has left while the tabs around them keep
 * their own width. The reason is dimmed, which is a second signal beside the
 * absence of a link and never the only one: it is not a link, it says so to
 * assistive software, and it carries the words that explain it.
 */
.tab.inert { flex: 1 1 240px; opacity: .6; }
/* The word or sentence beside a tab's label, on the label's own line. */
.twd { display: inline; margin: 0; }
/* The rule that says what the dots mean, inside the strip's own card. */
.tabstrip .dotrule { margin: 6px 10px 2px; }

/*
 * ---- A readiness dot ----
 *
 * THREE MARKS, AND NEVER THE ONLY SIGNAL. The tab being read, a tab that is
 * complete, and a plain dot for one that is not - each with its own word beside
 * it, because a colour is not an answer to somebody who cannot see it and a
 * shape this small is not one either. The plain dot is the design's field line,
 * which is the value the canvas gives it.
 */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-field); flex-shrink: 0; }
.dot.on { background: var(--blue); }
.dot.done { background: var(--open-fg); }
/* ---------------------------------------------------------------------------
 * SCR-BKO-14 - a grant's eligibility conditions.
 *
 * ONE DEFINITION FOR EVERY WIDTH, AND THE TREE IS A LIST. Each condition is one
 * item holding a row that wraps: the three boxes sit side by side where they fit
 * and stack inside the same item where they do not, so a desk and a phone are the
 * same markup laid out by the same rules. There is no card-shaped second
 * definition of this screen, which is what makes the two impossible to drift
 * apart.
 *
 * TWO WIDTHS DECIDE SOMETHING HERE AND BOTH ARE STATED. At 900px the acts that
 * restructure the tree appear, because moving a condition between groups and
 * reordering need the whole tree in view - below it the card at the top says so.
 * At 640px a NESTED group folds, because a phone showing four levels at once is a
 * page nobody can read; it folds as a disclosure, so the list stays in the
 * document and the control reports its own state.
 * --------------------------------------------------------------------------- */

.rb-head { align-items: flex-end; margin-bottom: 18px; }
.rb-h1 { font-size: 26px; }
.rb-h2 { font-size: 18px; }
.rb-chips { gap: 9px; justify-content: flex-end; }
.rb-state { min-width: 0; }
.rb-why { margin: 4px 0 0; }

/*
 * The control that has nothing to try a rule set against yet. Its own element is
 * the target and it reports itself disabled, so the reason beneath it is read
 * rather than guessed at from an appearance.
 */
.btn.rb-inert {
  color: var(--muted);
  border-color: var(--line-field);
  background: var(--white);
}

/*
 * AND IT IS NOT DIMMED, WHICH IS DECIDED HERE AND NOWHERE ELSE. Lowering the
 * opacity of a control lowers the contrast of its words against whatever is behind
 * it, by a factor nothing measures - a label that meets the contrast floor at full
 * strength does not at half. Every disabled control in this platform is faded and
 * given the ordinary pointer by two rules in the component layer; faded, the words
 * on this one measure between two and three to one against the page, under the
 * floor. The colours stated above are chosen to meet it and measure about six to
 * one, so the fade is switched off and the refusing cursor put back for this
 * control alone - the shared rules are left as they are, because what every other
 * disabled control should look like is not this package's decision. What tells a
 * reader the control does nothing is the element's own disabled state and the
 * sentence it points at, not the appearance.
 *
 * ONE BLOCK AND NOT TWO. The declaration that un-dims is in this rule, so the
 * reasoning for it is here too: stated above the appearance as well, a reader who
 * removed this rule would leave a comment promising a contrast nothing delivers.
 *
 * AND EVERY SELECTOR HERE NAMES ENOUGH TO WIN. Written on the class alone, not one
 * declaration in this block was drawn: `.btn.sec` sets the colours and
 * `.btn:disabled` the fade, and each carries two selectors where a bare class
 * carries one - which beats it however far down the file it sits. So the appearance
 * names the button and the class, the rule that undoes a state names the state as
 * well, and what the browser computes was read back rather than the file being
 * reasoned about.
 */
.btn.rb-inert:disabled { opacity: 1; cursor: not-allowed; }

/* The plain-language summary, first in the document at every width. */
.rb-summary { background: var(--open-bg); border-color: var(--open-line); margin-bottom: 16px; }
.rb-summary-h { font-size: 17px; color: var(--open-fg); }
.rb-summary-sub { font-size: 13px; color: var(--open-fg); margin-bottom: 11px; }
.rb-summary-text { margin: 0; overflow-wrap: anywhere; }
.rb-summary-none { margin: 0; font-size: 14px; color: var(--open-fg); }
/* The pair as it is typed: the same gap the reason text's pair is drawn with. */
.rb-summary-pair { gap: 12px; }
/* What the analysis found, under the summary and above the tree. */
.rb-findings { margin-bottom: 16px; }
.rb-findings-sub { font-size: 13px; margin-bottom: 11px; }
.rb-summary-help { margin-top: 10px; color: var(--open-fg); }

/* And what a screen too narrow to restructure the tree on says for itself. */
.rb-narrow-note { background: var(--note-bg); border-color: var(--soon-line); margin-bottom: 16px; }
.rb-narrow-note b { color: var(--note-fg); }
.rb-narrow-body { font-size: 14px; color: var(--note-fg); margin: 5px 0 0; }

.rb-body { gap: 22px; }

/*
 * The officer's sample-profile form and the panel that answers it.
 *
 * THE PAIRS ARE A GROUP AND ARE DRAWN AS ONE. A repeatable pair of boxes with
 * nothing around it reads as two unrelated fields repeated; the rule and the
 * padding are what say "these belong together, and there may be more of them".
 *
 * AND THE MARKS ARE A LIST, because they are one - the character beside each is
 * decorative and the sentence carries the meaning, which is the same shape the
 * applicant's own result card uses for the same reason.
 */
.rb-pairs { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.rb-pair { margin-top: 10px; }
.rb-acts { margin-top: 18px; gap: 10px; }
.rb-outcome { margin: 10px 0 14px; }
.rb-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.rb-marks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.rb-marks li:last-child { padding-bottom: 0; border-bottom: 0; }
.rb-tail { display: block; margin-top: 2px; }
.rb-conditions { margin-bottom: 14px; }
.rb-conditions-head { margin-bottom: 14px; }
.rb-none { margin: 0; color: var(--muted); }

.rb-root { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }

.rb-tree, .rb-tree ul { list-style: none; margin: 0; padding: 0; }

.rb-group-head { margin-bottom: 9px; gap: 6px; }
.rb-group-name { gap: 8px; }
.rb-group-heading { font-size: 13px; color: var(--slate); }
.rb-group-chip { font-size: 12px; }

/*
 * A nested group keeps its own border and indent at every width - the indent is
 * what makes the nesting visible, and the border and the heading beside it are
 * what make it readable without relying on the indent alone.
 */
/*
 * A NESTED GROUP'S ITEM CARRIES NO BOX OF ITS OWN. The item that holds a condition
 * is a card; the item that holds a group is the indent and nothing else, because the
 * group inside it draws its own border - two boxes around one group would read as
 * two groups.
 */
.rb-nested { margin-left: 22px; background: none; border: 0; padding: 0; }
.rb-nested > .rb-group {
  border: 1px solid var(--proc-line);
  background: var(--proc-bg);
  border-radius: 8px;
  padding: 12px;
}
.rb-nested .rb-group-heading { color: var(--proc-fg); }

.rb-item {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  margin-bottom: 9px;
}
.rb-item:last-child { margin-bottom: 0; }

.rb-item-row { gap: 8px; font-size: 14px; }

/*
 * The three boxes, as tracks that shrink rather than as columns. The subject and
 * the operator take what is left in proportion; the value is allowed to be
 * narrow but not narrower than a figure, and none of the three may be narrower
 * than its content would force the row to be - which is what min-width:0 is for.
 */
.rb-fld { padding: 7px 11px; min-width: 0; overflow-wrap: anywhere; }
.rb-subject { flex: 1 1 200px; }
.rb-operator { flex: 1 1 180px; }
.rb-value { flex: 0 1 150px; min-width: 110px; }
.rb-item-chip { font-size: 12px; }

.rb-finding { margin-top: 6px; }

/* A finding on a group's own heading row rather than on a condition. */
.rb-group > .rb-finding { margin-bottom: 8px; }

.rb-reason-sub { font-size: 14px; margin-bottom: 12px; }
.rb-reason-pair { gap: 12px; margin-top: 8px; }
.rb-reason-text {
  font-size: 15px;
  font-weight: 600;
  min-height: var(--target);
  display: flex;
  align-items: center;
  overflow-wrap: anywhere;
}
/* A half nobody has typed yet, said in words rather than drawn as a gap. */
.rb-absent { font-weight: 400; color: var(--muted); }

.rb-side { margin-bottom: 14px; }
.rb-operators { font-size: 13px; margin: 0; color: var(--slate); }
.rb-operators-note { margin: 6px 0 0; }
.rb-version { font-size: 14px; }

.rb-readiness { border-color: var(--soon-line); background: var(--note-bg); }
.rb-readiness-h { color: var(--soon-fg); }
.rb-check { gap: 8px; font-size: 13px; align-items: flex-start; flex-wrap: nowrap; margin-bottom: 5px; }
.rb-mark { font-weight: 700; flex-shrink: 0; color: var(--open-fg); }
.rb-check-no, .rb-check-no .rb-mark { color: var(--danger); }
/*
 * A row that is not in force yet, in the palette's own pending colour rather than
 * in a dimmed version of the text colour: opacity lowers contrast on every element
 * under it at once, and a row an officer is being told about has to be readable.
 * The mark for this state is a HOLLOW dot, so the state is legible without it.
 */
.rb-check-soon, .rb-check-soon .rb-mark { color: var(--soon-fg); }
.rb-check-why { display: block; color: inherit; }
.rb-readiness-note { margin: 6px 0 0; }

/*
 * The act on one condition's row, and the controls that add one.
 *
 * AT EVERY WIDTH, both of them, and each a full target: reading a condition and
 * typing in it need no more room than reading it does, so neither carries the class
 * that hides a control below the width the tree can be restructured at.
 */
.rb-item-acts { gap: 12px; margin-top: 7px; }

/*
 * A control that needs the room to see the whole tree at once.
 *
 * DRAWN AT EVERY WIDTH AND WITHDRAWN AT ONE, which is the opposite way round from
 * the card that explains itself: what needs the room is restructuring the tree -
 * moving a condition between groups, switching how a group combines, reordering -
 * and one display: the group a condition is being written into, which is chosen on
 * the tree rather than on its form. The base rule is here so the class is a
 * declaration rather than a name nothing defines, and REVERT rather than a display
 * of its own, because these are block elements and a value written here would
 * decide their layout for them.
 */
.rb-wide { display: revert; }
.rb-adds { gap: 8px; }

/* ---------- SCR-BKO-61: one condition's own form ---------- */

.rb-form-head { align-items: flex-end; margin-bottom: 16px; }
.rb-form-lead { font-size: 15px; }
.rb-form-card { margin-bottom: 14px; }
.rb-form-grid { margin-top: 10px; }

/*
 * The table that says which shape of value each operator takes.
 *
 * ROWS AND NOT A TABLE ELEMENT, for the reason the tree is a list: below the width
 * at which two columns fit, the shape wraps under the operators it belongs to
 * inside the same row, so one definition serves a desk and a phone. The first
 * column is given a basis rather than a width, so it holds its line at the wide
 * widths and gives it up at the narrow ones.
 */
.rb-shape-h { margin-top: 12px; }
.rb-shape {
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.rb-shape-op { flex: 0 1 200px; min-width: 0; overflow-wrap: anywhere; }
.rb-shape-of { flex: 1 1 200px; min-width: 0; margin: 0; }

/*
 * The switch that says whether failing this condition excludes the enterprise.
 *
 * THE ROW IS THE LABEL AND THE ROW IS THE TARGET. The box a browser draws is
 * twenty pixels, and a twenty-pixel target is a requirement failed - so the label
 * wraps the box and is at least the target tall, which is the same treatment every
 * other statement somebody ticks in this tier carries. What differs here is only
 * the ground and the chip pushed to the end of the row, both of which the approved
 * board draws.
 */
.rb-switch-row { margin-top: 12px; }
.rb-switch {
  background: var(--proc-bg);
  border-color: var(--proc-line);
  border-radius: 8px;
  font-size: 14px;
}
.rb-switch-word { flex-grow: 1; min-width: 0; }
.rb-switch-chip { font-size: 12px; flex-shrink: 0; }

/*
 * What the chip means, and the word each of its two states reads: the chip and its
 * word beside each other, wrapping as a pair rather than as four loose things.
 */
.rb-chip-note { margin-top: 8px; }
.rb-chip-legend { gap: 8px; margin-top: 6px; font-size: 13px; }
.rb-chip-word { margin: 0; }

/* The control that shows the pair as an applicant will read it, and its own line. */
.rb-preview-row { gap: 10px; margin-top: 10px; }
.rb-preview-help { margin: 0; min-width: 0; }

/*
 * And what it shows: the two halves as the grant's own page will list them, each
 * under the name of its language. A half nobody has typed is said in words rather
 * than drawn as a gap, because a draft may really hold one language only.
 */
.rb-preview { margin-top: 12px; background: var(--page); }
.rb-preview-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.rb-preview-text { display: block; overflow-wrap: anywhere; }

/* The row the two acts sit in, which is a stack of buttons at a phone's width. */
.rb-form-acts { gap: 10px; margin-bottom: 18px; }

/* The refusals this form answers with, listed as the sentences they are. */
.rb-refusals { margin: 8px 0 0; padding-left: 20px; }
.rb-refusals li { margin-bottom: 4px; }

/*
 * The fold control is a real checkbox with a real label, so it holds its own state
 * and works on a keyboard with no script - and the label is a full target, because
 * it is the only way to reach the conditions inside a folded group.
 */
.rb-foldctl {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}
.rb-foldctl:hover { text-decoration: none; }

/*
 * The fold itself, which holds the control and the list it opens - and is the box
 * the control is positioned against.
 */
.rb-fold { display: block; position: relative; }

/*
 * THE CHECKBOX IS INVISIBLE AND FULL-SIZED, laid over the row the label draws.
 * Hidden the way announced-but-unseen text is hidden, it would be a one-pixel
 * control - which is unhittable on the screens this fold exists for. Covering the
 * row instead makes the target the row, keyboard focus still lands on it, and the
 * label beside it is what a reader sees and what names it.
 */
.rb-foldbox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--target);
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/*
 * The focus ring belongs to the label, because the box itself is not on screen:
 * without this the control is reachable by keyboard and gives no sign of where the
 * keyboard is.
 */
.rb-foldbox:focus-visible + .rb-foldctl {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Folded until the control is used - which is the state below the fold only. */
.rb-foldbox:not(:checked) + .rb-foldctl + div[role='group'] { display: none; }

/*
 * ABOVE 640px A NESTED GROUP IS NEVER FOLDED, so the control is not drawn and the
 * conditions are shown whatever the disclosure element's own state says. The list
 * stays in the document either way, which is what keeps a screen reader's view of
 * the tree whole.
 *
 * THE STATE IS A CHECKBOX AND THE RULES ARE SIBLING COMBINATORS, which is what
 * makes one stylesheet able to decide both widths. A disclosure element hides its
 * own contents by a mechanism no stylesheet can reach into - a rule saying "show
 * this list" does not override it - so above the fold, where no control is drawn,
 * the conditions of every nested group would be in the document and reachable by
 * nothing. With the state in a checkbox the group is selected through its siblings:
 * below the fold it is hidden until the box is checked, and above it the same
 * selector shows it whatever the box says.
 */
@media (min-width: 641px) {
  .rb-foldctl,
  .rb-foldbox { display: none; }
  .rb-foldbox:not(:checked) + .rb-foldctl + div[role='group'] { display: block; }
}

/* And the card that explains a narrower screen is drawn only on one. */
@media (min-width: 900px) {
  .rb-narrow { display: none; }
}

/*
 * THE ACTS THAT RESTRUCTURE THE TREE ARE DRAWN ONLY WHERE THERE IS ROOM FOR THEM.
 * Moving a condition into another group, switching how a group combines what is
 * inside it and reordering rows all need the tree wide enough to see what is being
 * moved and where; below that width the card above the tree says so, in words, and
 * the acts are not drawn rather than drawn and cramped. Reading, adding, correcting
 * and removing are drawn at EVERY width, because none of them needs more room than
 * reading a condition does.
 *
 * Paired with .rb-narrow above, which is drawn only below the same width - so
 * exactly one of the two is ever on the page and neither is a second definition of
 * the screen. The pair is the reason the sentence and the absence cannot disagree.
 */
@media (max-width: 899px) {
  .rb-wide { display: none; }
}

/*
 * The two ways a group may combine what is inside it: one column at every width,
 * as the board draws them. The tier's option rows share the width where there is
 * room, which is right for five short values and wrong for two rows whose
 * sentences then read as one paragraph broken in half.
 */
.rb-combinator { grid-template-columns: 1fr; }

/*
 * An act on a row is a form of its own, because it changes something - so it is
 * laid out as the link the boards draw rather than as the block a form is. The
 * button inside it already carries the platform's own link-shaped-control
 * treatment; this is only what keeps the form from breaking the row.
 */
.rb-act { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* The group a condition is being moved into, beside the control that moves it. */
.rb-move { padding: 4px 8px; font-size: 13px; min-height: var(--target); max-width: 220px; }

/* The acts on a group's own heading row, and the consequence of the last of them. */
.rb-group-acts { gap: 2px 10px; }
/*
 * Which group this is, beside the chip: the same size and colour as the sentence
 * drawn over the group, because the two are read as one line.
 */
.rb-group-place { font-size: 13px; color: var(--slate); }
/*
 * AND THE SPACE BETWEEN THE SIGN AND THE WORD ON THE CONTROL THAT ADDS A GROUP.
 * The control is laid out as a row, which collapses the trailing space of the
 * "+ " text node - so the gap is what keeps "+ Group" two words.
 */
.rb-addgroup { gap: 4px; }

/* And the sentence under the card that stands where the tree would be. */
.rb-root-note { margin: 10px 0 0; }
.rb-consequence { margin: 2px 0 0; }


/* ---------------------------------------------------------------------------
 * The applicant's own portal
 * -------------------------------------------------------------------------*/
/*
 * Ported from the boards for the dashboard, its first-time state, the
 * applications list, one application, the outstanding actions, the notification
 * centre, the communication history and the receipt.
 *
 * NINE SCREENS AND ELEVEN RULES, because almost all of it is already here: the
 * cards, the grid whose tracks fit themselves, the chips, the stacked table, the
 * definition rows, the empty card and the forty-four pixel link are the shell's
 * own and are reused rather than restated. What is new is the ground the
 * action-required region is drawn on, the gap between the items in it, the
 * timeline's own lines, and the second line a table cell carries.
 *
 * NO NEW BREAKPOINT. Every rule below reflows on its own or inherits the two the
 * sheet already has - 900 for the frame and a wide table, 600 for tables and
 * buttons - so one definition of each screen serves a phone and a desktop.
 */

/*
 * THE REGION THAT COMES FIRST, ON THE GROUND THE BOARD DRAWS IT ON. The chip
 * palette's own attention colours: a card in the warm ground with the heading in
 * the same family, which is what makes the first region read as the first region
 * before anybody reads a word of it. The ground carries no text of its own -
 * every sentence inside it sits on a white card - so the contrast that matters is
 * the heading's, which measures 7.3:1 on it.
 */
.alert16 { background: var(--act-bg); border-color: var(--act-line); }
.alert16 > h2 { color: var(--act-fg); }
/* The same card carrying the label-and-body shape rather than a heading, for the
   request an answer is being written to: the label and the body both read on the
   attention ground, and the response date keeps the weight it has in the region
   above. */
.alert16 > .lbl, .alert16 > p { color: var(--act-fg); }
/* The response date inside that card is the fact it exists for, so it carries
   the weight the board gives it - the same rule the item in the first region
   states for the same line, which cannot reach here because that one is scoped
   to the item. */
.alert16 > .acts-when { font-weight: 600; }

/*
 * AND THE CAUTION IN THE SAME SHAPE, for the one card on this platform that
 * cautions with a LIST rather than a sentence: what withdrawing an application
 * does, in the four points the board draws.
 *
 * A CARD AND NOT THE SHARED NOTE, because that component is a paragraph and a
 * list inside a paragraph is closed by every browser at the first item - so the
 * four points would fall out of the amber box and read as ordinary body text.
 * The three colours are the caution's own, already decided for the note beside
 * it, so a second opinion about what amber means cannot appear; the contrast of
 * the text on that ground measures 7.4:1.
 */
.caution16 { background: var(--note-bg); border-color: var(--soon-line); }
.caution16 > b, .caution16 .applist { color: var(--note-fg); }

/*
 * THE CONFIRMING CONTROL OF AN ACT THAT CANNOT BE UNDONE. The secondary shape,
 * because it is not the thing a person came to the page to do and the page
 * itself asks whether they mean it - with the attention colour on the label and
 * the line, which is how the board distinguishes it from the control beside it
 * that takes them back. The ground stays white: a filled attention ground on a
 * 44px control reads as an error rather than as a choice.
 */
.btn.sec.danger { color: var(--act-fg); border-color: var(--act-line); }

/* The items inside it, and on the outstanding-actions screen: a stack with the
   board's own gap, which is a grid so that a single item is not stretched. */
.acts-list { display: grid; gap: 10px; }
/* One item. The response date is the one line in it that is not reading text:
   it is the fact the region exists for, so it carries the attention colour and
   the weight the board gives it. */
.acts-item .acts-when { font-weight: 600; color: var(--act-fg); margin: 6px 0 0; }

/*
 * THE TIMELINE. A definition list of what the status became and when, which is
 * the structure the facts already have - a term and a description - so it needs
 * no new shape, only the moment drawn as the supporting line the board draws.
 * The dot the board puts beside each entry is decorative and is deliberately not
 * drawn: it carries no meaning the words do not, and a marker the width of the
 * text's own line height is a marker a phone has no room for.
 */
.tline .when { color: var(--muted); font-size: 13px; }

/*
 * THE SECOND LINE A TABLE CELL CARRIES - the agency and the reference under a
 * grant's name, and the sentence that says what kind of record the row is. A
 * block so that it sits under the value rather than beside it, at the board's own
 * size, and it may break inside a word: a reference has no space in it to wrap
 * at, and an unbroken run in a cell is exactly what has run a page past the
 * viewport in this product before.
 */
.tbl td > .sub { display: block; font-size: 13px; margin-top: 2px; }

/*
 * A NOTIFICATION CARD's own half, which is a flex item beside the chip and has
 * to be allowed to shrink: a subject at the length a template renders is a long
 * unbroken run beside a chip that will not shrink, and without this the pair sets
 * the card wider than the column.
 */
.ncard { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
/* A card whose email could not be delivered says so with its own edge as well as
   with the line inside it - the line is the signal, and the edge is the second.
   Prefixed like every sibling in this section: an unprefixed name is the one a
   later screen reuses for something else. */
.nfailed { border-color: var(--act-line); }
/*
 * A matched grant's card. The chip is sized for the WHOLE qualifier the outcome
 * label carries - the word eligible is never presented on its own, in either
 * language - so it wraps rather than being cut, and the card's own values may
 * break inside a word because a grant's name is configuration and this product
 * has already run a page past a 360px viewport on an unbroken one.
 */
.mgrant { overflow-wrap: anywhere; }
.mgrant .chip { white-space: normal; }
/* An announcement's card: the heading sits closer to its body than a card
   heading does elsewhere, as the board draws it. */
.anncard h3 { margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
 * SCR-MCH-01, SCR-MCH-02 and SCR-MCH-04 - checking which grants fit.
 *
 * ONE DEFINITION FOR EVERY WIDTH, AND NOT ONE RULE HERE NAMES A BREAKPOINT
 * except the two that have to: the sticky control at the foot of a long
 * questionnaire, which is a phone's problem and nobody else's, and the stepper's
 * own wrapping. Everything else is a wrapped row or an auto-fitting track, so a
 * desk and a phone are the same markup laid out by the same rules and the two
 * cannot drift apart.
 * -------------------------------------------------------------------------*/

/*
 * The four steps on the screen that begins a check. A list, because it is one -
 * so a screen reader announces "four items" and numbers them, and the digit
 * drawn beside each is decorative.
 */
.mstep { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.mstep li { display: flex; gap: 14px; align-items: flex-start; }
.mstep li > span:last-child { display: grid; gap: 2px; }
.mstep-no {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* The form that begins a check: a wrapper the row lays out, not a block of its
   own. */
.mform { display: inline-flex; margin: 0; }

/*
 * How far through a check somebody is.
 *
 * A LENGTH AND A SENTENCE, NEVER A LENGTH ALONE. The bar carries an accessible
 * name saying the same thing in words, because a proportion drawn as a width is
 * unreadable to anybody not looking at it - and it is drawn with a ground behind
 * it so that "none of it done" is still visibly a bar rather than nothing.
 */
.bar {
  /*
   * DRAWN FROM THE ELEMENT THAT MEANS IT, which needs the appearance reset in
   * every browser before any of it can be styled at all - and then needs the
   * ground and the filled part named separately, because the two engines expose
   * them under different pseudo-elements. Both are written out; a rule for one
   * of them leaves the bar drawn as the browser's own control in the other.
   */
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--line);
  color: var(--blue);
}
.bar::-webkit-progress-bar { background: var(--line); border-radius: 9999px; }
.bar::-webkit-progress-value { background: var(--blue); border-radius: 9999px; }
.bar::-moz-progress-bar { background: var(--blue); border-radius: 9999px; }

/* What the platform already holds, counted - on the approved board's own
   ground, which is the one every "this is settled" statement uses. */
/* The card that says what is already answered from what the platform holds. The
   same two-line shape as the caution card, in the tone that means something is
   open rather than something to be careful about - so the ask/said pair and the
   icon take this card's own ink. */
.mheld { background: var(--open-bg); border-color: var(--open-line); }
.mheld b, .mheld p { color: var(--open-fg); }
.mheld .ico { width: 20px; height: 20px; margin-top: 2px; }
.mheld .asked { min-width: 0; }
.mheld .ask { margin: 0; color: var(--open-fg); font-size: 16px; font-weight: 700; }
.mheld .said { margin: 5px 0 0; font-size: 14px; color: var(--open-fg); }

/* One thing the questionnaire asks or shows. Separated by a rule rather than by
   a gap, as the board draws it, and the last one carries none. */
.mq { padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; }
.mq:last-of-type { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }

/* A group of option buttons. A real fieldset with a real legend, so the group
   has a name a screen reader announces before the choices in it. */
.mq-set { border: 0; margin: 0; padding: 0; }
.mq-set legend { padding: 0; }

/*
 * A group of option buttons that came back refused.
 *
 * THE RULE IS ON THE GROUP BECAUSE THE REFUSAL IS ABOUT THE GROUP. Nothing was
 * chosen, so no single button is the one at fault, and outlining one of them
 * would say something untrue about it. The rule is a mark and never the meaning:
 * the message under the group is what says what is wrong, and every input in it
 * carries the invalid state so that a screen reader hears it on whichever is
 * reached first.
 *
 * THE PADDING IS WHAT KEEPS THE BUTTONS OFF THE RULE. Drawn without it the
 * border sat on the first option's own border and read as a doubled edge.
 */
.opts.refused {
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 6px 8px;
}

/* A value the platform holds and this screen may not change: drawn as the
   board draws it, on the page ground so that it reads as a value rather than as
   an empty box somebody should type in. */
.mhold { background: var(--page); flex: 1 1 220px; min-width: 0; }

/*
 * The two controls at the foot of a section.
 *
 * STICKY AT A PHONE'S WIDTH AND NOT ABOVE IT, which is the board's own note. A
 * section of a dozen questions is longer than a phone screen, so the control
 * that continues would otherwise be below the fold on every section; at a
 * desk's width the whole section is visible and a pinned bar would take space
 * from it for nothing. The ground and the top rule are what keep it legible
 * over content it overlaps.
 */
.mfoot { margin-top: 24px; gap: 10px; }
@media (max-width: 600px) {
  .mfoot {
    position: sticky;
    bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    padding: 12px 0;
    margin-bottom: -18px;
  }
}

/*
 * The screen a check in progress is offered back on, and the confirmation that
 * leaving it kept everything.
 *
 * THE CHIP DOES NOT SHRINK AND THE SENTENCE BESIDE IT DOES, which is the one
 * thing this card needs said: the chip is a fixed label and the sentence is a
 * paragraph, so in a row that may not wrap the sentence is the flexible half.
 */
.mresume { margin-bottom: 0; }
.mresume-text { min-width: 0; }
.mresume-chip { flex-shrink: 0; }
.mresume-stopped { margin: 0; font-size: 15px; font-weight: 700; }
.mresume-kept { margin: 6px 0 0; font-size: 14px; }
.mresume-bar { margin-top: 14px; }
/*
 * The two controls at the foot of the card, and the one thing they need said.
 *
 * THE CONTROL THAT FINISHES A CHECK IS INSIDE A FORM, because finishing writes -
 * and a form is a flex item that will not shrink below the width of the button in
 * it, so at a phone's floor the pair overflowed the viewport by three pixels
 * instead of wrapping. Both halves may shrink, and the label inside wraps rather
 * than setting the width: a control whose words wrap is still a control, and a row
 * that is wider than the screen is a requirement failed.
 */
.mresume-acts { margin-top: 16px; gap: 10px; }
.mresume-acts .mform { min-width: 0; max-width: 100%; }
.mresume-acts .btn { max-width: 100%; white-space: normal; }

/* The count beside an outcome's own heading: the heading's weight is the
   heading's, and the count is not part of it. */
.mcount { font-weight: 400; font-size: 15px; }

/* When the assessment was made and what would make a new one, under the
   heading as one sentence. */
.mres-asat { margin-top: 4px; }

/* One grant's card on the results screen. Long grant names break rather than
   widening the card past the viewport. */
.mres { overflow-wrap: anywhere; }
.mres .chip { white-space: normal; }
.mres h3 { margin-top: 10px; }
.mres-need { font-size: 14px; margin: 10px 0 0; }

/* The conditions on a card: a list, because it is one - the mark is decorative
   and the sentence carries the meaning. */
.mres-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.mres-lines li { display: flex; gap: 8px; align-items: flex-start; }

/*
 * What the assessment is waiting on, where nothing fits yet.
 *
 * THE SAME LIST SHAPE AS A CARD'S CONDITIONS, indented as a list rather than
 * marked with a glyph: each line is a value's name and what is missing about it,
 * and there is no mark to draw because there is nothing about these that is a
 * pass or a failure.
 */
.mres-waiting { margin-top: 10px; font-size: 15px; padding-left: 22px; list-style: disc; }
.mres-waiting li { display: list-item; }

/* The row of controls, which wraps: three of them in Malay do not fit a phone
   side by side, and an amount sits with them rather than above them. */
.mres-acts { margin-top: 12px; gap: 10px; align-items: flex-start; }

/*
 * A control that is drawn and does nothing yet, with the line that says why.
 *
 * THE CONTROL KEEPS THE SHAPE AND THE SIZE THE BOARD DRAWS IT AT and is a span
 * with no address, so it cannot be pressed for nothing and cannot be followed by
 * a keyboard. The line beneath is what makes it honest rather than broken, and it
 * is stacked under the control so that the pair reads as one thing in a row of
 * controls that wraps.
 *
 * IT IS NOT DIMMED, WHICH IS THE POINT OF THE THREE COLOURS HERE. Fading a
 * control is the obvious way to say it is not available and it is the wrong one:
 * an opacity of two thirds took the label under four and a half to one against
 * what is behind it, on every card, in both languages - so the control that says
 * least is also the one hardest to read. The closed tone the rest of this sheet
 * already uses for something that is not open says the same thing at full
 * strength, and reads.
 */
.mres-inert { display: grid; gap: 4px; }
.mres-inert .btn {
  cursor: default;
  background: var(--shut-bg);
  color: var(--shut-fg);
  border-color: var(--shut-line);
}

/*
 * A CONTROL THAT IS DRAWN AT THE DESK ALONE, which the rule boards already draw
 * this way and which the form builder's two reordering controls now use.
 *
 * WHY A WIDTH AND NOT A DEVICE. Reordering a list by pressing a control once per
 * position is a desk task: on a phone the row's name, the way into its own form,
 * the act that takes it out and two more controls do not fit beside each other in
 * either language, and the row that carries them all wraps into a column of five
 * links that reads as five rows. What is hidden here is never the only way to do
 * something - the order a grant asks its questions in is also the order they were
 * added in, and every other act on the row is offered at every width.
 */
@media (max-width: 899px) {
  .rb-wide { display: none !important; }
}

/*
 * ---------------------------------------------------------------------------
 * The record of a submission, and the state a closed grant draws
 * ---------------------------------------------------------------------------
 * FIVE RULES, AND EVERY OTHER PART OF BOTH SCREENS IS ALREADY IN THIS SHEET.
 * The panels, the definition lists, the chip, the controls, the breadcrumb, the
 * centred single column and the centred text are the tier's own; what is here is
 * the three quiet grounds the two boards draw, the row a document's name sits
 * on, and one icon size.
 *
 * A QUIET CARD IS A CARD WITHOUT A LINE. Three of the panels on these two boards
 * carry a sentence the page is making about ITSELF rather than a thing to act on
 * - that a record cannot be altered, that a grant stopped accepting
 * applications, that a draft was not lost. Each is drawn as a panel with a
 * ground and no border, because a border would make it read as one more panel in
 * the stack beside the others.
 *
 * TWO OF THE THREE SIT ON THE PAGE'S OWN GROUND and one on the closed ground,
 * which is what the boards draw and is not a shade chosen here. The permanence
 * card had been given the page's DEEPER shade, which reads as a panel of its own
 * rather than as the page speaking - a difference no gate this project runs can
 * see, since the word is right and only the ground is wrong. The closed ground
 * stays where it is, because there the sentence is about something having ended.
 *
 * THE DOCUMENT ROW IS A LINE WITH A HAIRLINE UNDER IT, matching the definition
 * rows above it rather than inventing a second separator - the same soft line,
 * the same rhythm. It reflows by being a wrapping row, so at a phone's width the
 * control moves under the name instead of crushing it, and nothing here has a
 * width rule.
 *
 * AND THE ICON IS SIZED RATHER THAN DRAWN AT A SIZE. The sheet's own icon is
 * sixteen pixels, which is right in a row of text and far too small for the mark
 * above a page's heading; the board draws it at the touch-target size, which is
 * also the size at which its two strokes are legible.
 */
.said-quiet { background: var(--page); border: 0; }
.said-quiet p { margin: 0; font-size: 14px; }
.said-shut { background: var(--shut-bg); border-color: var(--shut-line); }
.said-shut p { margin: 0; font-size: 14px; color: var(--slate); }
.said-soft { background: var(--page); border: 0; }
.said-soft p { margin: 5px 0 0; font-size: 14px; }
.docline { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.docline:last-child { border-bottom: 0; }
.ico-lg { width: 44px; height: 44px; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
 * A grant's own form, as the applicant fills it in (SCR-APP-01, SCR-APP-02)
 * ---------------------------------------------------------------------------
 * ONE DEFINITION FOR BOTH WIDTHS, as everywhere else in this sheet: the two side
 * cards and the questions are auto-fitting tracks with a minimum width, so they
 * sit beside each other where there is room and under each other where there is
 * not - and no breakpoint decides which. The board's own minimum is the one the
 * sheet already names for a wide pair.
 */
.appform { min-width: 0; }
.appmeta { display: grid; gap: 14px; align-content: start; min-width: 0; }
.appfact { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* The gap between one question and the next, which the board draws as a rhythm
   rather than as a rule between them. */
.appq { margin-bottom: 18px; }
.appq:last-child { margin-bottom: 0; }

/*
 * A question whose answer came back refused.
 *
 * THE MARK IS ON THE CONTROL, WHICH IS WHERE THE BOARD DRAWS IT: the box takes
 * the refused edge and the sentence sits under it. The rule is a mark and never
 * the meaning - the sentence below says what is wrong and every control carries
 * the invalid state, so nothing about this depends on seeing a colour.
 *
 * THE GROUP OF CHOICES HAS ITS OWN RULE ALREADY, on the group rather than on one
 * button, because nothing was chosen and outlining one of them would say
 * something untrue about it.
 */
.appq.refused > .fld,
.appq.refused .fieldset > .fld,
.appq.refused select.fld { border-color: var(--danger); }

/*
 * A QUESTION THAT APPEARED BECAUSE OF AN ANSWER, in the panel the board draws
 * around one: a dashed outline on the page's own ground, which says "this was not
 * here a moment ago" without a colour carrying the meaning - the sentence under it
 * is what says why.
 */
.appq.cond {
  padding: 16px;
  margin-bottom: 18px;
  background: var(--page);
  border: 1px dashed var(--line-field);
  border-radius: 12px;
}

/*
 * ONE ROW OF A REPEATING GROUP. A bordered card per row, which is the shape the
 * stacked table already uses for a record on a phone: the fields inside it stack,
 * so the card is the same at every width and the row's own number is above them.
 */
.approw {
  padding: 16px;
  margin-bottom: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/*
 * THE CONTROL THAT ADDS A ROW, AND THE SENTENCE SAYING HOW MANY THERE MAY BE.
 * A flex row with the page's own gap, so the sentence sits beside the control where
 * there is room and under it where there is not - and the shell's own rule makes
 * every button the full width of its column below 640px, which is what puts the
 * sentence on its own line at a phone's width without a breakpoint here.
 */
.approws { margin-top: 4px; align-items: center; }
.approws > .help { margin: 0; }

/*
 * AND THE CONTROL THAT EMPTIES ONE, at the head of the row it belongs to. It reads
 * as a link because it is not the page's own action, and it is the touch target's
 * own height either way - the shared rule for a link at that size is what gives it
 * that, rather than padding chosen here.
 */
.approw > .row.between { margin-bottom: 12px; }
.approw > .row.between > .lbl { margin: 0; }

/*
 * THE TWO ENDS OF A PERIOD, sharing the width where there is room and stacking
 * where there is not. The basis is the board's own: two boxes of a date's width,
 * which at 360px is one box per line.
 */
.appperiod > .fieldset { flex: 1 1 140px; min-width: 0; margin-bottom: 0; }

/*
 * AND THE FIVE PARTS OF AN ADDRESS, in tracks of their own. A postcode and a
 * state do not need the width a street line does, so the tracks auto-fit rather
 * than being a fixed count - the block is five rows at a phone's width and two or
 * three at a desk, with nothing deciding which.
 */
.appaddress { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/*
 * AND SEVERAL BOXES A PERSON READS AS ONE ANSWER ARE DRAWN IN ONE BORDERED BLOCK -
 * the same card a row of a repeating group is drawn in, because it is the same
 * idea. The group's own wrapper carries no border by design, so the block inside it
 * carries it; the tracks above are what reflow, so nothing here has a column count.
 */
.appblock {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.appaddress > .fieldset { margin-bottom: 0; min-width: 0; }

/* The list of what to have to hand, which is a list and is drawn as one. */
.applist { font-size: 15px; padding-left: 22px; margin: 8px 0 0; }
.applist li { margin-bottom: 4px; }
.applist li:last-child { margin-bottom: 0; }

/* The stepper's own gap, which the board draws wider than the shell's default
   because each step carries a dot as well as its words. */
.appstep { gap: 18px; margin-top: 14px; }

/*
 * THE TWO CONTROLS AT THE FOOT, and the one rule they need: the board draws them
 * at the two ends of a row, and the shell already makes every button full-width
 * below 640px - so at a phone's width they stack, which is what the board's own
 * mobile rendering shows.
 */
.appfoot { margin-top: 24px; }

/*
 * THE TWO CONTROLS THE PAGE BEFORE AN APPLICATION EXISTS OFFERS, drawn as the
 * board draws them: side by side with the page's own gap, and full-width and
 * stacked at a phone's width, which the shell's own button rule already does.
 *
 * THE CONTROL THAT SUBMITS IS INSIDE A FORM, AND THE FORM IS WHAT THE ROW LAYS
 * OUT. A control told to take the full width takes the full width of its own
 * parent, so inside a content-sized form it took the width of the words in it -
 * a hundred and seventy-one pixels at three hundred and sixty against three
 * hundred and twenty-eight for the identical inert control beside it, and a
 * different figure again in the other language. The form is given the same
 * full-width, stacked treatment the wrapper around an inert control already has,
 * so the two read as the one control the board draws.
 */
.appacts { margin-top: 18px; }

@media (max-width: 640px) {
  .appacts > form { width: 100%; }
}

/* The sentence the officer's own view of a form draws under a question. */
.appcond { margin-top: -12px; margin-bottom: 18px; }

/* Guidance text, which takes no answer: a paragraph under its own heading, with
   the same wrapping every element that renders a stored value has. */
.appguide { font-size: 15px; margin: 4px 0 0; overflow-wrap: anywhere; }

/* ---------- Document checklist (SCR-APP-05) ----------
   Eight classes the approved boards draw and the canvas had no rule for, plus
   the two the refused and busy states need. Every one of them is new here: not
   one existed in this sheet, so there was nothing to reuse and nothing to
   widen.

   AND ONE OF THEM IS RENAMED FROM WHAT THE BOARD FIRST DREW. The board's mark
   for a row that is neither required nor conditional was drawn with the class
   this sheet already uses for an OPTION CARD - a 44px white clickable panel -
   so a build that copied the board would have painted the word "optional" as a
   card somebody could press. */

/* The attach control: a real <input type="file"> inside a real <label>.

   THE LABEL IS THE TOUCH TARGET AND THE INPUT IS LAID OUT RATHER THAN HIDDEN,
   and both halves are load-bearing. The label carries the visible words and is
   44px in both directions; the input covers it at full size and is made
   invisible by colour alone, so it stays hit-testable, focusable and
   measurable. display:none takes it out of every measurement there is, and the
   one-pixel clip pattern - which is right for text a reader should hear - takes
   the focus ring with it and fails a layout check at every width. */
.browse {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target);
    min-width: var(--target);
    padding: 0 16px;
    border: 1px dashed var(--blue);
    border-radius: 24px;
    background: white;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.browse input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}
.browse input[type="file"]::file-selector-button { display: none; }
.browse:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

/* The control that SENDS the chosen file, beside the label. Nothing on this
   page runs in a browser, so choosing a file cannot start an upload: the press
   is a real submission and needs a control. */
.browse + .send { margin-left: 10px; }

/* A supplied file's line in the File cell: the mark that it was accepted and
   scanned, its name and its size.

   THE NAME CARRIES THE BREAK RULE ITSELF. A filename is the one unbreakable run
   on this screen - one with no hyphen has no break opportunity at all - and
   inheriting the rule from whichever cell happens to hold it is how the same
   name overflows in the stacked card and not in the table. The name's own rule
   is .nm, written once beside the document lines earlier in this sheet. */
.file { display: block; font-size: 14px; padding: 3px 0 6px; min-width: 0; }
.file > * { margin-right: 6px; }
.file form { display: inline; }
.tick { color: var(--open-fg); font-weight: 700; }

/* The mandatory mark, which is decoration: the column of its own carries the
   meaning in words, so the asterisk is hidden from anything that reads the page
   out and carries no title attribute - guidance that appears only while a
   pointer rests on something is forbidden on this screen by name. */
.must { color: var(--act-fg); font-weight: 700; margin-left: 2px; }

/* And the mark for a row that is neither required nor conditional. Named so it
   can never be confused with the option card above. */
.optional-mark { font-size: 12px; color: var(--muted); font-style: italic; margin-left: 6px; }

/* The per-row disclosure: a native <details>, operable by pointer, by touch and
   by keyboard with nothing running in a browser. The summary is a 44px target on
   the negative-margin pattern the tier's own act links use, so the type stays
   13px and the row keeps its height; the marker is a chevron that turns. */
.dt { margin-top: 2px; font-size: 13px; }
.dt summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--target);
    min-width: var(--target);
    margin: -8px 0;
    padding: 0 2px;
    color: var(--navy);
    text-decoration: underline;
    cursor: pointer;
    list-style: none;
}
.dt summary::-webkit-details-marker { display: none; }
.dt summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    flex-shrink: 0;
}
.dt[open] summary::before { transform: rotate(45deg); }
.pop {
    margin: 4px 0 6px;
    padding: 9px 11px;
    background: var(--page);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    max-width: 520px;
}

/* The chips in this table are the small form the boards draw, and the rule is
   scoped to the table rather than written on the element: this tier serves no
   inline style at all, because the policy it serves admits none. */
[data-region="document-checklist"] .chip { font-size: 12px; }

/* The checklist drawn inside a form section rather than as a step of its own.
   Separated from the questions above it and from the control below it, so the run
   of rows reads as the part of the section it is, and given the same top margin
   the section's own groups take. */
/*
 * THE FORMS THE CHECKLIST'S CONTROLS BELONG TO. They hold nothing a person sees -
 * a token and at most two hidden boxes each - and they are drawn outside every
 * other form rather than around the controls, so they take no part in the layout.
 * Taken out of flow rather than hidden, because a form a browser does not render
 * still submits, and its controls live in the cells above.
 */
.offform { display: none; }

.docsinform {
    margin: 22px 0 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.docsinform h3 { margin: 0 0 10px; font-size: 19px; }

/* The documents arm of the response screen: a list of what is attached, each on
   the tinted row the board draws, with the act that takes it back at the far end.
   A list rather than a table, because every row here is a file somebody chose to
   attach to an answer - there is no requirement to state and no status to
   derive. */
.docarm { display: flex; flex-direction: column; gap: 8px; }
.docarmrow {
    padding: 11px 14px;
    background: var(--page);
    border-radius: 8px;
    font-size: 14px;
}
.docarmrow form { display: inline; }
/* The name and its size, which must be able to shrink: a filename is the one
   unbreakable run here, so the group holding it may go narrower than its
   contents and the name itself carries the break rule. */
.docarmfile { gap: 9px; min-width: 0; }

/* The header row and the proportion beside it, and the two controls at the foot
   - a flex row with a gap, full width at a phone's width like every other pair
   of controls on an applicant screen. */
.docsum { gap: 9px; }
.docfoot { gap: 10px; margin-top: 10px; justify-content: space-between; }

/* The control that moves on, while a mandatory document is still outstanding.
   Drawn as the control the board draws and operable by nobody - it carries the
   state in the markup as well as in the colour, and is described by the
   sentence above it that says how many documents are owed. */
.btn.is-blocked {
    background: var(--line-soft);
    border-color: var(--line);
    color: var(--muted);
    cursor: default;
}

/* ---------------------------------------------------------------------------
 * Submitting an application (SCR-APP-07, SCR-APP-08, SCR-APP-11, SCR-APP-12,
 * SCR-APP-14)
 *
 * THE REVIEW is a single column of cards at every width, inside the board's
 * 800px column. Each card's heading row wraps: the text side may shrink and has
 * a basis, the chip and the edit control are a group of their own, and on a
 * phone the group moves under the heading instead of pushing the card wider than
 * the viewport. The card that blocks the declaration is pinned above the
 * sections on the act ground the boards draw it on.
 *
 * THE DECLARATION'S TEXT scrolls in a region of its own, so the control that
 * submits stays in reach on a phone. Each statement a person ticks is the shared
 * check row: the label is the target, at least 44px tall, and the box stays
 * beside it because the row does not wrap and the sentence is what shrinks.
 *
 * THE THREE LANDINGS are one centred card in the board's 640px column, the mark
 * at the touch-target size above the heading, and the two controls a wrapping row
 * with a gap.
 * ------------------------------------------------------------------------ */
.narrow-card.review { max-width: 800px; }
.narrow-card.declaration { max-width: 760px; }
/* The report export's form (SCR-BKO-26), at the board's width. */
.narrow-card.report-export { max-width: 640px; }
.lede { font-size: 16px; }
.revcard .revhead { flex: 1 1 320px; min-width: 0; }
.revcard .revhead h2 { font-size: 16px; margin: 0; }
.revcard .revhead .sub { font-size: 14px; margin: 4px 0 0; }
.revcard .revside { gap: 10px; flex-wrap: wrap; }
.revcard .dfns { margin-top: 8px; }
.revcard .owed { margin: 6px 0 0; font-size: 14px; color: var(--act-fg); }
.revversion { font-size: 15px; font-weight: 600; }
.card16.blocking { background: var(--act-bg); border-color: var(--act-line); color: var(--act-fg); }
.card16.blocking .blockline { gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.card16.blocking .said { margin: 0; font-size: 14px; flex: 1 1 240px; min-width: 0; }
.decltext {
    max-height: 230px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: var(--page);
    margin-top: 8px;
}
.decltext p { font-size: 14px; margin: 0 0 10px; }
.decltext p:last-child { margin-bottom: 0; }
.declticks { display: flex; flex-direction: column; gap: 4px; }
.declticks .check { flex-wrap: nowrap; font-size: 15px; }
.declticks .check span { flex: 1 1 auto; min-width: 0; }
.landing { display: flex; justify-content: center; }
.landing > .card16 { width: 100%; max-width: 640px; }
.landing > .card16 > * + * { margin-top: 16px; }
.landhead { text-align: center; }
.landhead h1 { font-size: 23px; margin: 12px 0 0; }
.landhead p { font-size: 15px; margin: 8px 0 0; }
.land-act { color: var(--act-fg); }
.land-soon { color: var(--soon-fg); }
.said-act { background: var(--act-bg); border-color: var(--act-line); }
.said-act p { margin: 0; font-size: 14px; color: var(--act-fg); }
.said-soon { background: var(--note-bg); border-color: var(--soon-line); }
.said-soon p { margin: 0; font-size: 14px; color: var(--note-fg); }
.said-soft .strong { font-weight: 700; margin-top: 8px; }
.landlist { font-size: 15px; padding-left: 22px; margin: 6px 0 0; }
.landacts { justify-content: center; }

/*
 * The confirmation a submission lands on (SCR-APP-16): the reference in a block of
 * its own, large and selectable, and what happens next as a numbered list whose
 * numbers are drawn as the board draws them. One definition at every width; the
 * reference may wrap anywhere rather than push the card wider than the screen.
 */
.land-open { color: var(--open-fg); }
.said-ref { background: var(--open-bg); border: 1px solid var(--open-line); border-radius: 12px; padding: 18px; text-align: center; }
.said-ref .lbl { color: var(--open-fg); }
.said-ref .refno { font-size: 26px; font-weight: 700; color: var(--open-fg); letter-spacing: .5px; user-select: all; }
.said-ref .help { color: var(--open-fg); }
.nextsteps { list-style: none; counter-reset: nextstep; margin: 8px 0 0; padding: 0; }
.nextsteps > li { counter-increment: nextstep; display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; font-size: 14px; }
.nextsteps > li::before { content: counter(nextstep); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }

/*
 * The queue's view controls (SCR-AGW-01): one row of secondary buttons that
 * wraps, the view in force drawn as the board draws it - the primary blue ring
 * and navy words - and marked as the current page for a reader who cannot see
 * the colour.
 */
.views { gap: 8px; margin: 16px 0 14px; }
.views .btn.sec[aria-current="page"] { border-color: var(--blue); color: var(--navy); }

/*
 * ONE APPLICATION'S DOCUMENTS (SCR-AGW-04): A ROW IS AT LEAST AS TALL AS ITS TARGET.
 * Each row's Download link is a 44px box whose negative margins hand its height back
 * to the line, so rows of one line stood 22px apart and each link's lower half lay
 * over the next row's link - a press meant for one document took the next. The row
 * keeps the target's height, so neighbouring targets meet and never overlap; and
 * what the document is - its category, or the request it answers - sits on a line
 * of its own under its name.
 */
[data-region="documents"] .row.between { min-height: var(--target); }
[data-region="documents"] .doc-label { display: block; font-size: 12px; color: var(--muted); }
/*
 * AND WHAT FOLLOWS THE LIST STANDS CLEAR OF ITS LAST LINK. A text link hands back
 * the height it adds beyond its line, so where the narrowest widths put a link on a
 * line of its own it reaches below its row by that much - and the control after the
 * list, the one that extracts every document, started inside that reach, so a press
 * meant for one document produced them all. It now starts below it, with the gap
 * the board leaves between a list and its action.
 */
[data-region="documents"] > .row:not(.between) { margin-top: 18px; }
/*
 * THE SAME RULE FOR THE VIEW'S LIST OF PAGES. Each is a text link on a line of its
 * own, and at the narrowest widths the lines stood closer than a target's height,
 * so each link's box reached over the next one's; each line now keeps the target's
 * height, and neighbouring links meet without overlapping.
 */
[data-region="links"] > p { min-height: var(--target); display: flex; align-items: center; }
/* And the documents an answer in the history carried, which are the same list in a smaller place. */
[data-region="history"] dd > .row.between { min-height: var(--target); }

/*
 * The agency workspace's files: the form of file an officer chooses, and what an
 * extract will hold.
 *
 * A CHOICE DRAWN AS THE BOARD DRAWS IT. Each form of file is a secondary button
 * holding a real radio control, so the whole button is the touch target and the
 * choice works by keyboard and with no script; the chosen one is drawn in the
 * ring the board gives it. The row wraps at the narrowest width.
 *
 * WHAT A SINGLE DOCUMENT LEAVES OUT IS SAID BY WHAT IS CHOSEN. Under the single
 * document the supporting documents are not in the file, and the line that
 * counts them is replaced by the line that says so - in the stylesheet, so the
 * page is true with or without a script.
 */
.formats { gap: 8px; align-items: center; }
.formats .btn.sec { gap: 8px; cursor: pointer; }
.formats .btn.sec:has(input:checked) { border-color: var(--blue); color: var(--navy); font-weight: 700; }
.formats input[type='radio'] { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--blue); }
.extract .included { margin: 4px 0 14px; }
/* The choice of form and the two actions under it stand apart, as the board draws them. */
.extract .formats + .row { margin-top: 18px; }
.extract .docs-pdf { display: none; }
.extract:has(input[value='pdf']:checked) .docs-zip { display: none; }
.extract:has(input[value='pdf']:checked) .docs-pdf { display: list-item; }

/*
 * THE OFFICER'S REMARK TO THE APPLICANT (SCR-AGW-08): the form sits on the lightly
 * tinted ground the board draws for words the applicant will read, edged in the
 * informational line, with the chip saying so at its top - and the note about
 * keeping remarks and internal notes apart sits under it in the caution's tone.
 */
.card16.tinted { background: var(--proc-tint); border-color: var(--proc-line); }
.card16.tinted + .note { margin-top: 16px; }

/*
 * THE OFFICER'S INTERNAL NOTE (SCR-AGW-09), THE STATUS PAGE AND ITS CORRECTION
 * (SCR-AGW-10). The note's form sits on the faint internal ground the board draws,
 * edged in the internal line, with the earlier notes under it as a list of entries
 * and the caution under both. The status page's choices are the full-size options
 * the outcome's board draws; the ways to the acts that record a status of their own
 * wrap as a row whose lines stand far enough apart that two links' full-height
 * boxes never meet, and the caution sits under the form as the board spaces it.
 */
.card16.internal { background: #FFFAFA; border-color: #F5C9C9; }
.card16.earlier { margin-top: 14px; }
.card16.earlier .entry { padding: 10px 0; border-bottom: 1px solid #F0F2F5; }
.card16.earlier .entry p { margin: 0; }
[data-region='note-form'] ~ .note,
[data-region='status-form'] + .note,
[data-region='correction-form'] + .note { margin-top: 16px; }
[data-region='choices'] { gap: 10px; }
[data-region='act-links'] { margin: 11px 0; }
[data-region='act-links'] .row { gap: 24px 16px; }
[data-region='status-form'] [data-region='empty'] { margin: 14px 0 0; }
[data-region='status-form'] fieldset,
[data-region='correction-form'] fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/*
 * THE OVERDUE REQUEST'S CONTROLS (SCR-SYS-14) FILL THEIR ROW ON A PHONE, as the board
 * grows every button in a row. The two live controls submit, so each sits inside its
 * form and the form is what the row lays out: the form grows as the board's buttons
 * do, and the button inside it takes the form's full width.
 */
@media (max-width: 600px) {
  [data-region='controls'] > form { flex-grow: 1; }
}

/*
 * THE REFERRAL ROUTE'S TWO PAGES (SCR-HND-10, SCR-HND-01): a bounded column of
 * cards, as the boards draw it. The facts under a heading wrap by their own widths
 * across the card's ruled foot; the two columns of next steps are the shared grid's
 * tracks. The reference is one token and never breaks; a long grant or agency name
 * wraps instead. The interest's head card carries the open ground, the state that
 * says the page cannot be shown the internal one.
 */
.referral { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 660px; margin: 0 auto; }
.referral h1 { margin-top: 14px; }
.referral .facts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); gap: 12px 24px; align-items: flex-start; }
.referral .facts > div { min-width: 0; }
.referral .fact { font-size: 16px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.referral .fact-text { font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.referral .refno { font-size: 16px; font-weight: 700; margin: 0; white-space: nowrap; }
.referral .named { margin-top: 14px; }
.referral .named-value { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.referral .acts { margin-top: 16px; }
.referral .steps { margin-top: 16px; }
.referral .todo { font-size: 14px; padding-left: 20px; margin: 8px 0 0; }
.referral .todo li { margin-bottom: 7px; overflow-wrap: anywhere; }
.referral .fee-label { font-size: 14px; margin: 6px 0 0; }
.referral .amount { font-size: 24px; font-weight: 700; margin: 2px 0; }
.referral .fee-required { font-size: 15px; font-weight: 600; margin: 6px 0 14px; }
.referral [data-region='payment'] { margin-bottom: 14px; }
.referral .follow { margin-top: 8px; }
.referral .interest-head { border-color: var(--open-line); background: var(--open-bg); }
.referral .fault-head { border-color: #F5C9C9; background: #FDF7F7; }
/*
 * The same page at a later status (SCR-HND-02): the chip and its date are one
 * wrapping group; the agency's reference takes the room left between the two facts
 * and wraps within itself, because the agency may type up to sixty-four characters
 * with no break in them.
 */
.referral .state-line { gap: 10px; align-items: center; }
.referral .state-date { font-size: 13px; color: var(--muted); }
.referral .agency-ref { flex: 1 1 200px; }
.referral .agency-refno { font-size: 16px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.referral .history { margin: 12px 0 0; font-size: 14px; }
/* ---------------------------------------------------------------------------
 * The exception queue's automated half and the exception case - SCR-BKO-03,
 * SCR-BKO-39, SCR-BKO-79, SCR-SYS-13
 * -------------------------------------------------------------------------*/
/*
 * The automated half: its heading, then one card per item. Each card is the
 * item's words beside its one action, as two flex items that wrap - the words
 * take the room and may shrink below their content, so a long reason or an
 * agency's key wraps inside the card rather than pushing the page sideways, and
 * at a narrow width the action falls beneath the words at its full touch size.
 */
.xqueue { display: grid; gap: 12px; }
.xqueue > h2 { margin: 0; }
.xitem { border-color: var(--act-line); }
.xitem .what { flex: 1 1 320px; min-width: 0; }
.xitem h3 { margin-top: 9px; font-size: 16px; overflow-wrap: anywhere; }
.xitem .said { font-size: 14px; margin: 5px 0 0; overflow-wrap: anywhere; }
.xcut { margin: 0; }
/*
 * The case's own screen: its cards stacked with the page's own gap, the facts as
 * a definition list whose tracks fit, the controls in a row that wraps.
 */
.xcase + .xcase { margin-top: 16px; }
.xcase .dl { margin-top: 12px; }
.xcase > .row + .help,
.xcase .dl + .help,
.xcase .dl + .row,
.xcase .help + .row { margin-top: 14px; }
.xcase .xnote { font-size: 15px; margin: 4px 0 0; }
/*
 * The first monitoring screen's count by agency, above its list: the label and a
 * chip per agency, wrapping as a row.
 */
.byagency { gap: 8px; margin-top: 10px; }
.byagency .lbl { margin: 0; }

/* ---------------------------------------------------------------------------
 * THE INFORMATIONAL PAGES - how to apply, what you will need, the agencies and
 * the questions. One reading column; every word in it is managed content. The
 * steps are rows of a number and its text that wrap at any width, and the
 * contact block takes the informational tint the board draws it in.
 * -------------------------------------------------------------------------*/
.info { max-width: 820px; }
.info > * + * { margin-top: 14px; }
.info-lede { font-size: 16px; }
.info-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.info-step { display: flex; gap: 16px; align-items: flex-start; }
/* Each step's and card's heading is the level under the page's h1, drawn at the board's card size. */
.info h2 { font-size: 18px; margin: 0 0 4px; }
.info-step h2 { margin: 0; }
.info-step p { font-size: 16px; margin: 4px 0 0; overflow-wrap: anywhere; }
.info-num { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.info .card16 p { font-size: 16px; margin: 8px 0 0; overflow-wrap: anywhere; }
.info-need ul { font-size: 16px; padding-left: 22px; margin: 8px 0 0; }
.info-contact { background: var(--proc-bg); border-color: var(--proc-line); }
.info-contact h2, .info-contact p { color: var(--proc-fg); }
/* The participating agencies' support addresses, from their records: a row each, wrapping inside the card at any width. */
.info-support { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--proc-fg); }
.info-support li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: var(--target); min-width: 0; }
.info-support .lnk44:not(.btn) { margin: 0; font-size: 14px; color: var(--proc-fg); overflow-wrap: anywhere; justify-content: flex-start; min-width: 0; }
/* The listing's managed introduction, under its heading, as the boards draw it. */
.listing-intro { font-size: 16px; max-width: 640px; }

/* ---------------------------------------------------------------------------
 * THE INFORMATIONAL PAGE EDITOR - one row per zone, its words beside its
 * control, wrapping below each other at any width; the side list of surfaces;
 * the position number on a zone's own page.
 * -------------------------------------------------------------------------*/
.zone-rows, .side-list { list-style: none; margin: 12px 0 0; padding: 0; }
.zone-row { display: flex; flex-wrap: wrap; gap: 9px 16px; justify-content: space-between; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.zone-row-text { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.side-list li { font-size: 14px; border-bottom: 1px solid var(--line); }
.side-list b { display: flex; align-items: center; min-height: 44px; }
/*
 * Each sibling surface is a row of its own, the board's dark 14 px text, the
 * full row the target. The house rule's negative margin is for a link standing
 * in a line of text; in a column of rows it lays each target over the next.
 */
.side-list .lnk44.side-link:not(.btn) { display: flex; justify-content: flex-start; margin: 0; font-size: 14px; color: var(--ink); text-decoration: none; }
.side-list .lnk44.side-link:hover { text-decoration: underline; }
/*
 * The read-only list's two read links share one narrow action cell, and at a
 * desktop width the pair wraps onto two lines. The house rule's negative margin
 * would then lay one 44 px target over the other, so here each keeps its whole
 * box: stacked they meet at an edge, side by side the gap stands between them.
 */
.read-acts { row-gap: 0; }
.read-acts > .lnk44:not(.btn) { margin: 0; }
.zone-blocked { display: block; margin-top: 5px; font-size: 14px; }
.zone-pos { color: var(--muted); font-weight: 600; margin-right: 8px; }

/* ---- Banners: the home page's region, its card, and the Backoffice list ---- */
/*
 * The region's cards sit in an intrinsic grid whose track minimum never exceeds
 * the column: a bare 340px minimum overhung a 328px column at 360 by 12px while
 * the page reported no overflow. Three across at 1200, two at 768, one below.
 */
.banners { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.banner-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; min-width: 0; }
/* The image's box is reserved before its bytes arrive: five by two, always. */
.banner-box { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; background: #EEF1FE; }
.banner-box.none { display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed var(--line-field); font-size: 12px; color: var(--muted); background: none; }
.banner-words { padding: 14px 16px 16px; }
.banner-words h2 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.banner-words p { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.bnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: #FBFCFD; }
.bnmove { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.bnarrows { display: flex; flex-direction: column; }
.bngap { display: inline-block; width: 44px; height: 44px; }
.bnthumb { width: 105px; height: auto; aspect-ratio: 5 / 2; border: 1px solid #CBD4F8; border-radius: 8px; flex-shrink: 0; object-fit: cover; background: #EEF1FE; }
.bnthumb.none { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-field); font-size: 12px; color: var(--muted); background: none; }
/* Up and down are two whole targets, stacked: neither hands its height back to the other. */
.bnarrows .lnk44:not(.btn) { margin: 0; }
.bnwords { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
/* The chip and the row's controls take the room left and wrap inside it, never past the card. */
.bnacts { flex: 1 1 auto; min-width: 0; }
.picker-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); min-height: 44px; }
.picker-row .bnthumb { width: 90px; }
/* A picture that is not the shape of its box, or the words a browser draws when a picture will not load, stay inside the box. */
.bnthumb, .banner-box { overflow: hidden; }
.picker-row .picker-words { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }