/* Live Your Rules composition. All colour/type values use the shared DS4
   tokens; components (brand-block, official, forms, buttons) remain DS4. */
.guvnor.rules { max-width: 1240px; padding: 40px 32px 64px; margin: 0 auto; color: var(--color-text-primary); }
.rules h1, .rules h2, .rules h3, .rules h4 { font-family: var(--font-heading); color: var(--color-text-primary); }
.rules a { color: var(--color-link); text-underline-offset: .2em; }
.rules a:hover { color: var(--color-link-hover); }
.rules a:focus-visible, .rules button:focus-visible, .rules summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.rules-header { border-bottom: 1px solid var(--color-border); padding-bottom: 28px; }
/* The lede is the one loud element on the page: the business, named. */
.rules-header h1 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -.035em; margin: 16px 0 0; max-width: 22ch; font-weight: 650; text-wrap: balance; }
.rules-standfirst { font-size: 17px; line-height: 1.65; color: var(--color-text-secondary); max-width: var(--measure); margin: 16px 0 0; text-wrap: pretty; }
.rules-profile { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 20px 0 0; }
.rules-profile a { margin-left: 16px; font-size: 14px; white-space: nowrap; }
.rules-intro { font-size: 18px; line-height: 1.65; color: var(--color-text-secondary); max-width: 760px; margin: 0; }
.rules-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; margin-top: 32px; }
.rules-contents { align-self: start; position: sticky; top: 96px; font-size: 14px; }
.rules-contents .guvnor-eyebrow { font-size: 11px; color: var(--color-text-secondary); }
.rules-contents nav { display: grid; margin: 16px 0 24px; }
.rules-contents nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); color: var(--color-text-secondary); text-decoration: none; }
.rules-contents nav a:hover { color: var(--color-text-primary); }
.rules-contents p { color: var(--color-text-secondary); line-height: 1.65; }
.rules-body > section { margin-bottom: 44px; scroll-margin-top: 100px; }
.rules .rules-section-label { margin: 0 0 20px; font-family: var(--font-stack); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
/* Flat ruled lists, one per role — not eight closed accordions. The role
   label leads; its ONE provenance sentence sits under it; the requirements
   run as a plain ruled list beside (desktop) or under (mobile) it. */
.rules-roles { display: grid; }
.rules-role { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--color-border-light); }
.rules-role:first-of-type { border-top: 3px solid var(--color-text-primary); }
.rules .rules-role__label { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; font-weight: 650; margin: 0; }
.rules-role__dek { font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); margin: 6px 0 0; }
.rules-role__dek em { font-style: normal; color: var(--color-text-primary); }
.rules-role__dek a { font-weight: 500; }
.rules .rules-meta { display: block; font: 400 14px/1.65 var(--font-stack); color: var(--color-text-secondary); letter-spacing: normal; text-transform: none; }
.rules-section-dek { font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); max-width: 640px; margin: -8px 0 20px; }
.rules-scope-line { font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); border-top: 1px solid var(--color-border-light); padding-top: 14px; margin: 0 0 24px; }
.rules-row { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; }
.rules-row:last-child { border-bottom: 0; }
.rules-role__items > .rules-row:first-child { padding-top: 0; }
/* One block link in the DS4 row grammar (.legal a / .linklist a): the title
   carries the link colour and the hover rule, everything under it stays quiet.
   No arrow — the 45° mark is DS4's "leaves Guvnor" signal, and these are ours. */
.rules-row__title { display: block; font-size: 15px; line-height: 1.55; font-weight: 650; }
.rules-row .rules-row__title, a.rules-row__title { color: var(--color-link); }
a.rules-row__title { text-decoration: none; }
.rules-row:hover .rules-row__title, a.rules-row__title:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.rules-row__description { display: block; margin: 2px 0 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; max-width: 60ch; }
.rules-row .rules-meta { font-size: 13px; color: var(--color-text-muted); }
/* Our own walkthroughs are chapters of the same grid, so the rows need nothing
   of their own beyond .rules-row. The shelf restarts the grid under the scope
   line — its own 3px lead rule says a new kind of thing starts here. */
.rules-shelf { margin-top: 4px; }
/* The one place the page asks. A 1px accent-mix border, not a 3px stripe. */
.rules-refine { background: color-mix(in srgb, var(--color-accent-fill) 9%, var(--color-bg-page)); border: 1px solid color-mix(in srgb, var(--color-accent-fill) 28%, transparent); border-radius: var(--border-radius-lg); padding: 24px 28px; }
.rules-refine .guvnor-questions__item { padding: 0; border: 0; background: none; }
.rules-refine .guvnor-questions__legend { font-family: var(--font-stack); font-size: 17px; line-height: 1.45; font-weight: 650; color: var(--color-text-primary); }
.rules-refine .guvnor-questions__why { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 8px 0 0; }
/* A tick sits on the FIRST line of its label, not under it. app.css nudges the
   box down 12px so it clears a wrapped label, which on a 24px line drops it
   below the words it belongs to; (24 - 20) / 2 centres a 20px box on that line
   and a two-line label still reads as one row. Scoped to .rules so it covers
   the questions card and the Your Business plane together. */
.rules .guvnor-questions__choices--multi input { margin-top: 2px; }
.rules-refine__ask { margin: 20px 0 0; padding-top: 18px; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); border-top: 1px solid color-mix(in srgb, var(--color-accent-fill) 22%, transparent); }
.rules-settles { margin-top: 10px; }
.rules-question + .rules-question, .rules-answer-form { margin-top: 24px; }
.rules [data-form-status]:empty, .rules-status:empty, .rules [data-business-saved]:empty { display: none; }
.rules-status { padding: 12px 0; }
.rules-question .rules-meta { margin: 12px 0; }
.rules details > summary { cursor: pointer; min-height: 44px; }
/* T-366: ONE summary for every fold on the page — role lists, Later dates,
   more changes, the guidance Mores, what you can leave aside, and the extra
   questions inside .rules-refine, which used to carry an exception of its
   own. Same marker, same weight, wherever a fold appears. */
.rules details.rules-fold > summary, .rules .rules-long-list > summary, .rules .rules-further > summary {
    list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px;
    font-size: 15px; line-height: 1.55; font-weight: 600; color: var(--color-link);
}
.rules details.rules-fold > summary::-webkit-details-marker,
.rules .rules-long-list > summary::-webkit-details-marker,
.rules .rules-further > summary::-webkit-details-marker { display: none; }
.rules details.rules-fold > summary::before, .rules .rules-long-list > summary::before,
.rules .rules-further > summary::before { content: '▸'; color: var(--color-text-secondary); }
.rules details.rules-fold[open] > summary::before, .rules .rules-long-list[open] > summary::before,
.rules .rules-further[open] > summary::before { content: '▾'; }
.rules-check-group { border-bottom: 1px solid var(--color-border-light); padding: 12px 0; }
.rules-check-group > summary { padding: 10px 0; font-size: 18px; font-weight: 600; }
.rules-threshold { padding: 12px 0; border-bottom: 1px solid var(--color-border-light); }
.rules-threshold:last-child { border-bottom: 0; }
.rules-role__items > .rules-threshold:first-child { padding-top: 0; }
.rules-threshold h4 { font-size: 15px; line-height: 1.55; margin: 0; }
.rules-threshold p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); }
.rules-threshold a { display: inline-block; margin-top: 6px; font-size: 14px; }
/* Thresholds the figures we hold do not reach: present, quiet, folded. */
.rules-further { margin-top: 18px; border-top: 1px solid var(--color-border-light); padding-top: 14px; }
.rules-further__count { font-weight: 400; color: var(--color-text-secondary); }
.rules-further__items { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.rules-further__items .rules-row__title { display: inline; font-weight: 600; }
.rules-further__rule { font-size: 13px; color: var(--color-text-secondary); }
.rules-timing-row { padding: 12px 0; border-top: 1px solid var(--color-border-light); }
.rules-role__items > .rules-timing-row:first-child { border-top: 0; padding-top: 0; }
.rules-timing-row .rules-meta + .rules-row__title { margin-top: 2px; }
.rules-timing-close { margin: 14px 0 0; font-size: 14px; line-height: 1.6; }
/* Sources is a quiet footer to the briefing, not a chapter of it. */
.rules-sources { background: var(--color-bg-elevated); border-radius: var(--border-radius-lg); padding: 24px 28px; }
.rules-sources p { font-size: 14px; }
.rules-sources p, .rules-detail p, .rules-business p { line-height: 1.7; }
.rules-sources details, .rules-long-list { margin: 20px 0; }
.rules-dialog { width: min(920px, calc(100vw - 48px)); max-width: none; height: calc(100dvh - 64px); max-height: 100dvh; padding: 0; margin: auto; inset: 0; border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); background: var(--color-bg-white); color: var(--color-text-primary); box-shadow: var(--shadow-lg); }
.rules-dialog::backdrop { background: rgb(0 0 0 / .45); }
.rules-dialog__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--color-border); font-size: 11px; letter-spacing: .08em; height: 72px; box-sizing: border-box; }
.rules-dialog iframe { display: block; border: 0; width: 100%; height: calc(100% - 72px); background: var(--color-bg-page); }
body:has(.rules-dialog[open]) { overflow: hidden; }
.guvnor.rules--plane { padding: 28px 32px 48px; background: var(--color-bg-white); }
.rules-plane { background: var(--color-bg-white); }
.rules .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rules .official a { color: var(--official-blue); }
.rules-detail, .rules-business { max-width: 840px; margin: 0 auto; }
.rules-detail > .guvnor-eyebrow, .rules-business > .guvnor-eyebrow { display: block; margin-top: 24px; }
.rules-detail h1, .rules-business h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; margin: 16px 0 20px; }
.rules-detail h2, .rules-business h2 { font-size: 24px; margin-bottom: 16px; }
.rules-detail section, .rules-business section { border-top: 1px solid var(--color-border); padding-top: 24px; margin-top: 28px; }
.rules-detail .official { margin: 16px 0; }
.rules .rules-time-limits .guvnor-clocks { margin: 0; padding: 0; border: 0; }
.rules .rules-time-limits .guvnor-clocks__head { margin: 0 0 16px; }
.rules .rules-time-limits .guvnor-clocks__list { padding: 0; list-style: none; }
.rules .rules-time-limits .guvnor-clock { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); font-size: 16px; line-height: 1.7; color: var(--color-text-primary); }
.rules .rules-time-limits .guvnor-clock__label { display: block; padding: 10px 0; font-size: 18px; font-weight: 600; }
.rules .rules-time-limits .guvnor-clock__timing, .rules .rules-time-limits .guvnor-clock__consequence { display: block; margin: 8px 0; }
.rules-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 0; }
.rules-facts dt { font-size: 14px; color: var(--color-text-secondary); }
.rules-facts dd { margin: 8px 0; overflow-wrap: anywhere; }
.rules-business-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: none; }
.rules-form-actions { grid-column: 1 / -1; }
/* T-368. `.guvnor-field input` carries padding and a border and no
   `box-sizing`, so a 100% width put every text and number field ~30px wider
   than the column it sits in while the selects beside them fitted. One rule,
   both controls, so a row of fields lines up on both edges. */
.rules-business .guvnor-field input, .rules-business .guvnor-field select {
    width: 100%; min-width: 0; box-sizing: border-box;
}
/* Two fields side by side only line up if their LABELS are the same height.
   Two lines of label is what makes them differ, so "(optional)" and a unit
   stay inline and quiet, and the label reserves one line either way. */
.rules-business .guvnor-field > label { display: block; min-height: 24px; }
.rules-business .rules-optional { font-weight: 400; color: var(--color-text-muted); }
/* One hint per field, always under the control, never a second label line. */
.rules-business .guvnor-field > .rules-meta { margin-top: 2px; }
.rules-business-note { grid-column: 1 / -1; margin: 0; }
/* The trade slot owns a listbox, so it spans the form and anchors it. */
.rules-trade { grid-column: 1 / -1; }
/* The listbox hangs off the INPUT, not off the field: anchoring it to the
   field would drop it below the hint line and open a gap it floats over. */
.rules-trade__control { position: relative; display: grid; }
.rules-trade__label { font-size: 15px; line-height: 24px; font-weight: 600; }
.rules-trade__identity { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 650; }
.rules-trade__identity .rules-meta { font-weight: 400; }
.rules-suggest { list-style: none; margin: 4px 0 0; padding: 6px 0; }
.rules-trade [data-trade-list] {
    position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
    background: var(--color-bg-white); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto;
}
.rules-suggest__option { padding: 10px 14px; cursor: pointer; font-size: 15px; line-height: 1.5; }
.rules-suggest__option.is-active, .rules-suggest__option:hover { background: var(--color-bg-elevated); }
.rules-suggest__hint { display: block; font-size: 13px; color: var(--color-text-secondary); }
/* The refused-trade list is the same offer without the overlay: it sits under
   the control that was refused, because that is where the answer to it is. */
.rules-suggest--refused { margin-top: 10px; border-top: 1px solid var(--color-border-light); }
.rules-suggest--refused li { border-bottom: 1px solid var(--color-border-light); }
.rules-suggest--refused li:last-child { border-bottom: 0; }
.rules-suggest__pick {
    display: block; width: 100%; text-align: left; padding: 12px 0; min-height: 44px;
    background: none; border: 0; font: inherit; font-size: 15px; font-weight: 650;
    color: var(--color-link); cursor: pointer;
}
.rules-suggest__pick:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.rules-suggest__pick .rules-meta { font-weight: 400; }
.rules-ch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-top: 24px; max-width: 520px; }
.rules-ch .rules-form-actions { grid-column: auto; }
.rules-ch [data-form-status], .rules-ch__note { grid-column: 1 / -1; margin-top: 2px; }
/* Questions on this plane are chapters of the /your-rules grid, so a fieldset
   is a question and nothing else: no border, no fill, no box inside a box. */
.rules-business .guvnor-questions__item { padding: 0; border: 0; background: none; }
.rules-business .guvnor-questions__item + .guvnor-questions__item { margin-top: 22px; }
.rules-business .guvnor-questions__legend { font-family: var(--font-stack); font-size: 16px; line-height: 1.45; font-weight: 650; color: var(--color-text-primary); }
.rules-business .guvnor-questions__why { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); margin: 6px 0 0; }
.rules-business .rules-role__items--fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
/* An answer we hold but cannot offer back as a control: stated, then sourced. */
.rules-told { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
/* A refusal is not a notice. `guvnor-flash` carries the accent tone, which
   reads as success; app.css belongs to another change, so the warning tone is
   scoped here to the one place this page shows an error. */
.rules-business .guvnor-flash[role=alert] {
    background: color-mix(in srgb, #b3261a 7%, var(--color-bg-white));
    border: 1px solid color-mix(in srgb, #b3261a 26%, transparent);
    color: var(--color-text-primary);
}
.rules-welcome { margin-top: 32px; max-width: 840px; }
.rules .brand-block.rules-welcome h3 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 12px 0 20px; }
.rules .brand-block__btn { color: var(--color-ink-deep); }
.rules-welcome .rules-meta { color: inherit; margin-top: 20px; }
.rules-first-visit { max-width: 680px; margin: 36px 0; }
@media (max-width: 1024px) {
    .rules-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
    .rules-role { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
    .rules-role { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
}
@media (max-width: 640px) {
    .guvnor.rules { padding: 24px 20px 40px; }
    .rules-header h1 { font-size: 34px; }
    .rules-standfirst { font-size: 16px; }
    .rules-profile a { display: block; margin: 8px 0 0; }
    .rules-intro { font-size: 16px; }
    .rules-layout { display: block; margin-top: 24px; }
    /* Never a wrapped row of link fragments: the contents stay a stacked list. */
    .rules-contents { position: static; margin-bottom: 24px; }
    .rules-contents nav { display: grid; margin: 8px 0 0; }
    .rules-contents nav a { font-size: 14px; padding: 10px 0; }
    .rules-contents > p { display: none; }
    .rules-refine, .rules-sources { padding: 20px 16px; }
    .rules-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .rules-dialog__bar { padding: 10px 16px; }
    .rules-business-form, .rules-facts, .rules-ch,
    .rules-business .rules-role__items--fields { grid-template-columns: 1fr; }
    .rules-ch .rules-form-actions { grid-column: 1 / -1; }
    .rules-business .guvnor-field input, .rules-business .guvnor-field select { font-size: 16px; }
}
@media print {
    .gv-header, .gv-footer, .rules-contents, .rules-refine, .rules-dialog { display: none !important; }
    .guvnor.rules { max-width: none; padding: 0; }
    .rules-layout { display: block; }
    .rules-row { break-inside: avoid; }
}