:root{--fg:#141618;--bg:#fff;--muted:#5a6169;--line:#d4d8dc;--accent:#0b4a6f;--accent-fg:#fff;--error:#8a1f11;--ok:#14532d;--focus:#b8860b;
  /* THE HEADER IS A SURFACE OF ITS OWN, and everything drawn on it takes its
     colour from these four. An installation with no branding gets the platform's
     own header, which is the same navy a branded one starts from; brand.css
     replaces all four together so a header and its navigation can never be
     coloured from different places. That is the bug these tokens exist to end:
     .mainnav-link used to be var(--accent) — the brand's primary — sitting on a
     header background that was ALSO the brand's primary, so every label was the
     same colour as the thing behind it.

     THE DEFAULTS ARE THE PLAIN HEADER an installation has before anybody sets a
     colour: white, dark text, and the same pale tints the navigation has always
     used. Nothing about an unbranded installation changes here. */
  --header-bg:#ffffff;--header-fg:#141618;--header-hover:#e7eff5;--header-current:#e8f1f8}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-fg);padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}
/* A focus indicator that meets contrast requirements and is never removed.
   Removing it is the single most common accessibility regression in any codebase.

   SUMMARY IS IN THE LIST because <summary> is neither a button nor a link to a
   CSS selector, and every disclosure control in this product is one. Without it
   the Filters panel, the briefing and every "Advanced" section could be opened
   by keyboard with no indication of where the keyboard was.

   THE SECOND RING (box-shadow) is white and sits inside the coloured one, so
   the indicator is visible on a dark button as well as on the page, without
   needing a different rule per component. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 1px #fff}
/* THE HEADER HOLDS A BIGGER MARK NOW (A49 §1), so it aligns on CENTRES rather
   than on baselines: a 4.6rem logo and a one-line company name have no shared
   baseline, and aligning them on one dropped the name to the foot of the mark.
   A minimum height reserves the mark's own height before the image arrives, so
   the page does not jump; wrapping was already here and is what keeps the
   navigation off the logo at a narrow width rather than over it. */
header{border-bottom:1px solid var(--line);padding:.75rem 1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;min-height:4.6rem}
@media (max-width:30rem){header{min-height:3.4rem}}
/* THE COMPANY'S NAME IS BRANDING TOO (A48 §1). It was 1.1rem — smaller than
   an ordinary heading on the page beneath it — which is the other half of
   "make the company branding visibly larger": a company with no logo saved
   has nothing BUT its name in the header, and enlarging only the logo would
   have done nothing at all for them. */
header h1{font-size:1.45rem;margin:0;line-height:1.2;font-weight:600}
@media (max-width:30rem){header h1{font-size:1.2rem}}
/* No logo: nothing is drawn, and the header reads exactly as it did. */
.brandmark{display:none}
/* THE COMPANY'S LOGO IN THE HEADER (A47 §2, A48 §1), on a published sign-in
   page and on every signed-in page alike.

   THE FALLBACK, WHEN THE COMPANY'S OWN STYLESHEET HAS NOT ARRIVED. What is
   drawn is a BOX with the image inside it, and /ui/brand.css gives that box the
   company's own geometry: how tall the MARK is, how wide the mark is at that
   height, and how far to pull the image so the file's padding falls outside the
   box. Without those numbers the sensible default is the whole file at the
   header's height, scaled by its own proportions and never stretched — which is
   what these rules do.

   A47 fitted THE FILE into the box. That is why enlarging the box did not
   enlarge the logo: most logo files are a small mark on a large empty canvas,
   so the mark got a fraction of whatever the box gained. A48 measures the mark
   at upload and scales THAT. */
.brandlogo{display:inline-block;position:relative;overflow:hidden;height:4.6rem;max-width:26rem;vertical-align:middle;margin-right:.9rem}
/* A51 §2: the company's name directly below its mark, centred on it. */
.brandstack{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;margin-right:.9rem}
.brandstack .brandlogo{margin-right:0}
.brandstack h1{margin:0;text-align:center;font-size:1.15rem}
.brandlogo img{display:block;height:100%;width:auto;max-width:none;object-fit:contain}
@media (max-width:30rem){.brandlogo{height:3.4rem;max-width:14rem}}
/* THE BRANDING PAGE'S PREVIEW (A48 §1). The stage is the header's own
   background, because a mark is judged against what it will sit on, and a
   white logo previewed on white paper looks like a missing file. */
/* THE DOCUMENT EDITOR'S FIELDS (the addendum of 15 September 2026, §3).
   A seven-step form on a wide panel: without this the title and the reference
   are drawn at the browser's default input width — about twenty characters —
   beside a text area the width of the page, which reads as though the title
   mattered less than the prose. One rule, so every step's fields line up. */
[data-document-editor] input,[data-document-editor] select,[data-document-editor] textarea{width:100%;max-width:34rem}
[data-document-editor] input[type="date"]{max-width:14rem}
[data-document-editor] fieldset[data-section]{margin:1rem 0;border:1px solid var(--line);border-radius:6px;padding:.75rem 1rem}
/* THE SHARED SECTION LAYOUT (A49 §2). Every area's heading, search, filters,
   folder boxes and record table come from src/ui/sectionLayout.ts, and these
   are the only rules any of them needs. Changing how an area looks is one
   change here rather than one change per page, which is the whole point. */
.sectionhead{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;margin:0 0 .25rem}
.sectionhead h2{margin:0;flex:1 1 auto}
.sectionhead-actions{margin:0;flex:0 0 auto}
.sectionintro{margin:0 0 1rem;max-width:56rem}
.crumb{margin:0 0 .5rem}
/* The search sits above the boxes, as it does on Home, and grows to fill the
   row until the screen is too narrow for it to share one. */
form.sectionsearch{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin:0 0 1rem}
form.sectionsearch>div:first-child{flex:1 1 22rem}
form.sectionsearch input[type="search"]{width:100%}
nav.sectionfilters{margin:0 0 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
/* A49 §7: the key pouch, first on a site's page. The two identifiers are the
   largest thing on the screen once they have been asked for, because the
   person reading them is outdoors, at night, holding a torch. */
.pouchfirst{border:2px solid var(--accent);border-radius:.6rem;padding:1rem;margin:0 0 1.4rem;background:#fbfcfd}
.pouchfirst>h3{margin-top:0}
.pouchfirst-ids{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0 0 .8rem}
.pouchfirst-id{flex:1 1 16rem;min-width:0}
.pouchfirst-label{display:block;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pouchfirst-value{display:block;font-size:2.1rem;line-height:1.15;font-weight:700;word-break:break-word;font-variant-numeric:tabular-nums}
.pouchfirst-value-hidden{letter-spacing:.2em;color:var(--muted)}
.pouchfirst-value-none{font-size:1.1rem;font-weight:400;color:var(--muted)}
.pouchfirst-note{display:block;font-size:.85rem}
.pouchfirst-question{margin:1rem 0;border:1px solid var(--line);border-radius:.4rem;padding:.8rem}
.pouchfirst-question legend{font-weight:700;padding:0 .3rem}
/* A49 §9: one block per area, each plainly its own, and the list of the areas
   not used yet BENEATH them rather than mixed in with them. */
.areablock{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:.4rem;padding:.8rem;margin:0 0 1rem}
.areablock>h4{margin:0 0 .6rem;font-size:1.05rem}
.areachooser{border-top:2px dashed var(--line);padding-top:.9rem;margin-top:.5rem}
.areachooser-ask{font-weight:700;margin:0 0 .2rem}
/* A49 §6: the steps of the site-information workflow, as a list somebody can
   jump about in rather than a single scroll they have to finish in order. */
.stepnav{border:1px solid var(--line);border-radius:.5rem;padding:.9rem;margin:0 0 1.4rem;background:#fbfcfd}
.stepnav-ask{font-weight:700;margin:0 0 .2rem}
.stepnav-list{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.stepnav-list a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.3rem .7rem;border:1px solid var(--line);border-radius:.35rem;text-decoration:none}
.stepnav-list .stepnum{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:.8rem;font-weight:700}
@media (max-width:40rem){.pouchfirst-value{font-size:1.7rem}}
.sectionfilters-items{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
/* A49 §5: the Client list is navigation, not a service type. A rule and a
   sentence of its own keep it out of the run of filter chips, and it wraps
   onto its own line on a phone rather than being squeezed in beside them. */
.sectionfilters-aside{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-left:.9rem;border-left:2px solid var(--line)}
.sectionfilters-aside .muted{font-size:.85rem}
@media (max-width:40rem){.sectionfilters-aside{flex-basis:100%;padding:.6rem 0 0;border-left:0;border-top:2px solid var(--line)}}
.logo-previews{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1rem 0}
.logo-previews figure{margin:0}
.logo-previews figcaption{margin-bottom:.35rem}
.logo-stage{background:var(--header-bg);color:var(--header-fg);border:1px solid var(--line);border-radius:.4rem;padding:.6rem .9rem;display:flex;align-items:center;min-width:12rem;min-height:4.5rem;overflow:hidden}
.logo-stage .brandlogo{margin-right:0}
header{background:var(--header-bg);color:var(--header-fg)}
header nav{margin-left:auto;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
main{max-width:60rem;margin:0 auto;padding:1.5rem 1rem 4rem}
h2{margin-top:0}
.muted{color:var(--muted)}
/* A49 §5: the mark a required field's label carries, in the colour errors use
   so that "this one is needed" reads at a glance rather than by hovering. */
.required{color:var(--error);font-weight:700}
table{border-collapse:collapse;width:100%;margin:1rem 0}
caption{text-align:left;padding-bottom:.5rem;color:var(--muted)}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600}
form.stack{display:grid;gap:1rem;max-width:26rem}
label{display:block;font-weight:600;margin-bottom:.25rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],select,textarea{width:100%;padding:.55rem;border:1px solid var(--line);border-radius:3px;font:inherit;background:var(--bg);color:var(--fg)}
textarea{resize:vertical;min-height:8rem}
input[type=file]{font:inherit}
textarea:focus-visible,[type=file]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:1rem 0}
dt{font-weight:600}
dd{margin:0}
/* The instructions block on a phone: a label over its text, not a narrow column beside it. */
.known-instructions dl{grid-template-columns:minmax(9rem,auto) 1fr}
@media (max-width:480px){.known-instructions dl{grid-template-columns:1fr;gap:0 0}.known-instructions dd{margin:0 0 .6rem}}
.known-instructions summary{cursor:pointer;font-weight:600;margin:.5rem 0}
/* A form on a page of prose needs to be as wide as the writing it holds. */
form.stack{max-width:44rem}
button{font:inherit;padding:.55rem 1rem;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);border-radius:3px;cursor:pointer}
button.secondary{background:transparent;color:var(--accent)}
/* A link that acts as a primary action. Still a link — it navigates, it does not
   submit — so it stays an <a> and only looks like a button. */
a.button{display:inline-block;text-decoration:none;padding:.55rem 1rem;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);border-radius:3px}
a.button.secondary{background:transparent;color:var(--accent)}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0}
/* WHICH VIEW IS IN USE HAS TO BE OBVIOUS (local acceptance, September 2026).
   Two buttons of nearly the same weight are not an answer to "which one am I
   looking at": the one in use is filled, outlined a second time and carries a
   tick, and a line under the pair says in words what is being shown. */
.home-view{align-items:center;margin:1rem 0 .25rem}
.home-view-label{margin-right:.25rem}
.home-view a.button.is-current{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);font-weight:600}
.home-view a.button.is-current::before{content:"✓ "}
[data-home-view-says]{margin:.25rem 0 1rem}
/* The branding page's two swatches: the colour with the text the platform
   computed for it, so the administrator sees the actual result before saving. */
.swatches{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.swatch{padding:1rem 1.25rem;border-radius:4px;border:1px solid var(--line);min-width:14rem;display:grid;gap:.25rem}
.swatch span{font-size:.9rem;opacity:.9}
input[type=color]{width:4rem;height:2.5rem;padding:.1rem;border:1px solid var(--line);border-radius:3px;background:var(--bg);vertical-align:middle}
#primary_hex,#accent_hex{width:7rem;display:inline-block;margin-left:.5rem}
/* MY WORK and MY SERVICES: a list where every row is one tap target.
   Deliberately not a table. These are the screens somebody opens on a phone,
   outdoors, one-handed: the whole row is the link, it is at least 56px tall so
   a thumb finds it without aiming, the three lines stack in one column at every
   width, and nothing needs a sideways scroll. The desktop view is the same
   thing with more room rather than a different layout to maintain. */
.tapcards{margin:.5rem 0 1.5rem}
.tapcard{margin:0}
/* A67 §9: the same face as a home-page card — the border, the left edge, the
   radius and the height — so the two do not read as two different systems. */
.tapcard>a{display:grid;gap:.2rem;padding:1rem 1.1rem;min-height:6.5rem;
  border:1px solid var(--line);border-left-width:6px;border-radius:6px;background:var(--bg);text-decoration:none;color:inherit}
.tapcard>a:hover,.tapcard>a:focus-visible{background:#e7eff5;border-color:var(--accent)}
.tapcard-title{font-weight:600;font-size:1.05rem}
.tapcard-sub{font-size:.95rem}
.tapcard-meta{font-size:.9rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
/* "What this adds up to" on a person's page: the sites their access reaches and
   the reason for each. The reasons are chips because a site commonly has more
   than one and they must not read as a sentence — "every site belonging to this
   customer" and "keyholding, everywhere it is delivered" are two separate facts,
   and an administrator deciding what to take away needs to see that. On a phone
   the table scrolls sideways inside its own box rather than stretching the page. */
.reach{width:100%;border-collapse:collapse;margin:.5rem 0 1rem;display:block;overflow-x:auto}
.reach th,.reach td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
.reach th{font-weight:600;white-space:nowrap}
.reason{display:inline-block;margin:.1rem .25rem .1rem 0;padding:.15rem .5rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem;white-space:nowrap}
/* Each state change is its own form, because each posts a different value and
   some carry a mandatory reason. Laid out in a column so they read as a list of
   choices rather than a row of unlabelled buttons. */
.actions-column{display:grid;gap:1.25rem;max-width:44rem}
form.inline-action{margin:0;padding:.75rem 0;border-top:1px solid var(--line)}
/* A34 C-3: the invitation link is long and must wrap rather than run off a phone. */
.invite-link{display:block;word-break:break-all;padding:.5rem;background:#f4f4f4;border:1px solid var(--line)}
li form.inline-action{display:inline-block;border:0;padding:0 0 0 .5rem}
/* Positioned, so an absolutely positioned child — a visually hidden
   column heading, say — is contained by the scroller instead of escaping it
   and widening the whole page on a handset. */
.scrollx{overflow-x:auto;max-width:100%;position:relative}
/* The portal's filters (A34 §18): wrap on a phone rather than push the page sideways. */
form.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;max-width:100%}
form.filters label{display:block;font-size:.9rem}
form.filters select,form.filters input{max-width:100%;min-width:0}
/* A34 §3 — the editor's modes and steps. */
.modeswitch{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0 1rem}
.modeswitch button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
.steps{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.steps a.step-jump{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:4px;text-decoration:none;font-weight:600}
.steps a.step-jump.current{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* The staged alarm form's navigator: a stage not yet open, one not needed, and the saved-complete mark. */
.steps .step-jump{gap:.4rem;padding:.3rem .7rem}
.steps span.step-jump{display:inline-flex;align-items:center;min-height:44px;border:1px dashed var(--line);border-radius:4px;color:var(--muted);cursor:not-allowed}
.steps span.step-jump.skipped{cursor:default;border-style:dotted}
.steps .step-done{font-size:.8rem;font-weight:600;color:var(--success,#1b6b3a)}
.steps .step-done::before{content:"\2713 "}
.steps .step-missing{font-size:.8rem;font-weight:700;color:var(--error)}
.steps .step-missing::before{content:"! "}
.gaplist ul{margin:.35rem 0 .35rem 1.2rem;padding:0}
[data-gap-note]{margin:0 0 .35rem}
/* A52 §2 — THE FOUR STEPS OF ADDING A SITE, drawn as four steps.
 *
 * The markup is an <ol>, because the steps ARE an ordered list and a screen
 * reader should hear them as one. It reused the .steps class, written for the
 * report editor's jump buttons, so it inherited the flex row and nothing else:
 * the browser drew its own list marker AND the number inside each item, giving
 * "1. 1 Site details and address 2 2 Services", with the marker of one step
 * colliding with the text of the one before it. Four steps, eight numbers, no
 * spacing, and no way to see which one you were on.
 *
 * The list marker goes (the number is inside, where it can be styled), each step
 * becomes a chip, and the current one is filled in — which is the only part of
 * this a person actually reads. */
ol.steps[data-site-steps]{list-style:none;padding-left:0;gap:.5rem;align-items:stretch}
ol.steps[data-site-steps] li{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.9rem;color:var(--muted)}
ol.steps[data-site-steps] li .stepnum{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid var(--line);font-size:.8rem;font-weight:700}
ol.steps[data-site-steps] li.is-current{border-color:var(--accent);color:inherit;font-weight:600}
ol.steps[data-site-steps] li.is-current .stepnum{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.stepbar{display:flex;justify-content:space-between;gap:.5rem;margin:1rem 0;flex-wrap:wrap}
.stage-of{font-weight:400;font-size:.9rem}
/* A34 §8, §10 — zones and contact attempts as rows. */
fieldset.zone,fieldset.contact{border:1px solid var(--line);border-radius:6px;padding:.75rem;margin:0 0 1rem}
/* A REPEATABLE BLOCK — one contact, one recipient, one company's people.
   fieldset.zone above has carried a border for a long time and these rows are
   DIVS, so they never got one: a column of a dozen identical fields with
   nothing between them, and no way to see where one person ends and the next
   begins. Light, not heavy: the border is there to group, not to shout. */
.row[data-row]{border:1px solid var(--line);border-radius:6px;padding:.75rem 1rem;margin:0 0 .75rem;background:var(--bg)}
.row[data-row]>h5{margin:0 0 .5rem;font-size:1rem}
/* And a company, which CONTAINS blocks, is grouped a step more strongly so the
   two companies on the alarm step cannot be read as one. */
.companyblock{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;
  padding:1rem;margin:0 0 1.25rem}
.companyblock>h4{margin:0 0 .25rem}
/* One named code, with what is recorded and the box for the next one. */
.codeentry{border:1px dashed var(--line);border-radius:6px;padding:.75rem 1rem;margin:.75rem 0}
.codeentry>h5{margin:0 0 .35rem;font-size:1rem}
.codeentry ul.files{margin:.35rem 0}
fieldset.zone legend,fieldset.contact legend{font-weight:600;padding:0 .3rem}
.zone-action{display:grid;grid-template-columns:1fr;gap:.35rem;margin:.4rem 0;padding:.4rem;border-left:3px solid var(--line)}
@media (min-width:640px){.zone-action{grid-template-columns:1fr 1fr 1fr}.zone-action label{grid-column:1/-1}}
.zones-summary li,.contacts-summary li{margin:.35rem 0}
.signature{border:1px solid var(--line);border-radius:6px;padding:.75rem;margin:1rem 0}
.scrollx input[type=time],.scrollx input[type=number]{min-width:6.5rem}
/* Plain number and date controls outside the picker pair: sized like text. */
input[type=number]:not(.bigfield),input[type=date]:not(.bigfield),input[type=time]:not(.bigfield){padding:.55rem;border:1px solid var(--line);border-radius:3px;font:inherit;background:var(--bg);color:var(--fg);max-width:100%}
input[type=number]:not(.scrollx *):not(.bigfield),input[type=date]:not(.scrollx *):not(.bigfield){width:100%;max-width:18rem}
fieldset{border:1px solid var(--line);border-radius:3px;padding:.75rem 1rem 1rem;margin:0}
legend{font-weight:600;padding:0 .35rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:32rem){.pair{grid-template-columns:1fr}}
/* Notices carry a word as well as a colour: colour is never the sole carrier of
   meaning, because it is invisible to a screen reader and to some readers. */
.notice{border-left:4px solid;padding:.75rem 1rem;margin-bottom:1.5rem}
.notice.error{border-color:var(--error);background:#fdf3f2}
.notice.error strong{color:var(--error)}
.notice.success{border-color:var(--ok);background:#f2f9f4}
.notice.success strong{color:var(--ok)}
.notice.warning{border-color:#946200;background:#fdf7ec}
.notice.warning strong{color:#7a5100}
/* The step form's Saving / Saved / Failed line (A62). Empty until the script
   writes to it, so a page without a script shows nothing rather than a gap. */
.savestate{margin:.25rem 0 0;font-size:.9rem;min-height:1.2em}
.savestate:empty{margin:0}
/* A64 §1: a code box and its "show what I am typing" button on one line. */
.codeinput{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.codeinput input{flex:1 1 12rem;min-width:0}
/* A64 §2: eight rows, one a day, each readable on a phone without sideways scroll. */
.coverweek{display:grid;gap:.75rem}
.coverweek fieldset legend{font-size:1rem}
.coverweek .buttonrow{gap:.5rem}
.savestate[data-state="saving"]{color:var(--muted)}
.savestate[data-state="saved"]{color:var(--ok);font-weight:600}
.savestate[data-state="failed"]{color:var(--error);font-weight:600}
footer.build{margin:2.5rem 0 1rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.85rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
/* A field-level error: a word, a colour and a border, so none of the three is
   carrying the meaning alone. */
.field-error{color:var(--error);font-weight:600;margin:.35rem 0 0}
[aria-invalid=true]{border:2px solid var(--error)}
/* Status badges. The colours are darkened text on a pale ground rather than
   white on a colour, which keeps every one of them above 4.5:1 against its own
   background and legible on a phone in daylight. */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .55rem;border-radius:999px;
  border:1px solid;font-size:.9rem;font-weight:600;white-space:nowrap;line-height:1.6}
.badge-mark{font-size:1rem}
.badge-done{color:#14532d;background:#e7f6ec;border-color:#2f7d4f}
.badge-waiting{color:#6b4300;background:#fdf3e2;border-color:#a5710a}
.badge-action{color:#6b4300;background:#fdf3e2;border-color:#a5710a}
.badge-live{color:#0b3f63;background:#e8f1f8;border-color:#2a6f9e}
.badge-quiet{color:#41474d;background:#f1f3f5;border-color:#8a9199}
.badge-urgent{color:#7a1a0c;background:#fdecea;border-color:#a83224}
.badges{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
/* WHO PUT THIS HERE is not a status, so it does not get a status badge. A
   document added by the client is not "in progress" and one added by the
   company is not "stopped"; borrowing the live/quiet colours for provenance
   taught two different things with one vocabulary, and the play triangle on
   "From the client" read as a button somebody could press. Same shape, no
   symbol, no status colour. */
.tag{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:999px;
  border:1px dashed #8a9199;color:#41474d;background:#fff;font-size:.9rem;font-weight:600;
  white-space:nowrap;line-height:1.6}
/* One review choice, boxed, so Approve and Return cannot be pressed for each
   other by a thumb on a phone. */
.choice{border:1px solid var(--line);border-radius:4px;padding:1rem;margin:0 0 1rem}
.choice h4{margin:0 0 .35rem}
.choice p{margin:.25rem 0 .75rem}
.choice.approve{border-color:#2f7d4f}
.choice.return{border-color:#a5710a}
/* Buttons big enough for a thumb, and never side by side when they do opposite
   things. */
button,a.button{min-height:2.75rem}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}
/* Looking at an attachment. The container scrolls so a full-size image on a
   phone can be moved around without the page itself scrolling sideways. */
.viewer{overflow:auto;max-width:100%;border:1px solid var(--line);background:#f6f7f8;padding:.5rem}
.viewer img.fit{max-width:100%;height:auto;display:block}
.viewer img.full{max-width:none;height:auto;display:block}
.viewer img.large{max-width:none;width:200%;height:auto;display:block}
.viewer.pdf{padding:0}
.viewer.video{padding:0;background:#111}
.viewer.video video{width:100%;max-height:75vh;display:block}
.viewer.pdf iframe,.viewer.pdf object,.viewer.pdf embed{width:100%;height:75vh;border:0;display:block}
/* Pages rendered here and delivered as pictures: the path that does not depend
   on a browser's own PDF viewer. Each page is a plain image, one under the next. */
.viewer.pdf.pages{padding:.5rem;background:#f6f7f8}
.viewer.pdf.pages img{display:block;max-width:100%;height:auto;margin:0 auto .75rem auto;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.viewer.pdf.pages img:last-child{margin-bottom:0}
.zoom{margin:.5rem 0}
.button.small{padding:.25rem .6rem;font-size:.9rem}
ul.files li{padding:.4rem 0}
/* A section of report questions: a native disclosure, no script involved. */
details.section{border:1px solid var(--line);border-radius:4px;margin:.5rem 0;padding:.25rem .75rem}
details.section>summary{cursor:pointer;padding:.5rem 0;min-height:44px}
details.section>summary h4{display:inline;margin:0}
label.radio{display:block;padding:.35rem 0;min-height:44px}
/* ---- buttons instead of menus --------------------------------------------
   "Maybe buttons not dropdowns." A select is three interactions on a phone —
   open it, scroll it, choose — and an officer is doing this one-handed in the
   rain. These are radios underneath, so they submit without script, work with
   the arrow keys and announce themselves as one question; the styling is what
   makes each one a target big enough for a thumb. */
fieldset.buttons{border:0;padding:0;margin:.75rem 0}
fieldset.buttons>legend{font-weight:600;padding:0;margin-bottom:.25rem}
.buttonrow{display:flex;flex-wrap:wrap;gap:.4rem}
/* A67 §3: the hazard checklist as a compact list — one row per area, its three
   answers beside its name, and the details only where there is a hazard. A row
   nobody has answered is marked as unanswered rather than left looking like a
   No. */
/* A67 §6: the briefing as bordered cards with a compact navigator above them. */
.briefing-nav{margin:.6rem 0 1rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:6px;background:var(--surface-muted,#f7f7f7)}
.briefing-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0;padding:0}
.briefing-nav a{font-weight:600}
.briefing-section{border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;margin:0 0 1rem}
.briefing-section > h3:first-child{margin-top:0}
@media (max-width:640px){.briefing-section{padding:.7rem .8rem}}
.hazardlist{list-style:none;padding:0;margin:.5rem 0;border:1px solid var(--line);border-radius:6px}
.hazardrow{padding:.5rem .7rem;border-bottom:1px solid var(--line)}
.hazardrow:last-child{border-bottom:0}
.hazardrow-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;justify-content:space-between}
.hazardrow-name{font-weight:600}
.hazardrow[data-hazard-state="yes"]{border-left:4px solid var(--warning,#a4510a)}
.hazardrow[data-hazard-state="unknown"]{border-left:4px dashed var(--warning,#a4510a)}
.hazardrow[data-hazard-state="unanswered"]{background:var(--surface-muted,#f7f7f7)}
.hazardrow .buttonrow{margin:.35rem 0}
@media (max-width:640px){.hazardrow .buttonrow{gap:.3rem}}
.buttonrow label.pick{margin:0}
label.pick{display:inline-flex;align-items:center;position:relative}
label.pick input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
label.pick span{display:inline-block;padding:.6rem .9rem;min-height:44px;line-height:1.6;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);cursor:pointer}
label.pick input:checked+span{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
/* "Not answered" is grey when it is the one checked (A33): it is the absence of
   an answer, and painting it the same blue as a real answer made the default
   look like a choice somebody made. */
label.pick input[value=""]:checked+span{background:#f1f3f5;color:#41474d;border-color:#8a9199;font-weight:500}
/* The keyboard must be able to see where it is; the border alone is not enough
   once the checked state has repainted it. */
label.pick input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
/* ---- reports in progress, on My Work ---------------------------------- */
ul.workcards{list-style:none;padding:0;margin:.5rem 0;display:grid;gap:.75rem}
li.workcard{border:1px solid var(--line);border-left:4px solid #a5710a;border-radius:6px;padding:.6rem .9rem}
li.workcard.returned{border-left-color:#a83224}
li.workcard p{margin:.25rem 0}
.workcard-title{font-size:1.05rem}
/* ---- reports to finish, as rows beneath the cards (0090) ---------------- */
section.to-finish{margin:1rem 0 1.5rem}
section.to-finish h4{margin:.75rem 0 .25rem}
ul.workrows{list-style:none;padding:0;margin:.25rem 0;display:grid;gap:.4rem}
li.workrow{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  border:1px solid var(--line);border-left:4px solid #a5710a;border-radius:6px;padding:.5rem .8rem}
li.workrow.returned{border-left-color:#a83224}
.workrow-main{flex:1 1 16rem;min-width:0}
.notice-inline.error{color:#a83224;font-weight:600}
.notice-inline.success{color:var(--ok);font-weight:600}
details.codecard{border:1px solid var(--line);border-radius:6px;padding:.5rem .8rem;margin:.5rem 0}
details.codecard>summary{cursor:pointer;padding:.2rem 0}
.codeinput{position:relative}
.codecover{position:absolute;pointer-events:none;overflow:hidden;white-space:nowrap;letter-spacing:.12em}
input.code-hidden{color:transparent;caret-color:var(--fg)}
input.code-hidden::selection{color:transparent}
/* ---- choosing the kind and the site (0090) ------------------------------ */
ul.kinds li{margin-bottom:.9rem}
ul.kinds .kind-help{margin:.2rem 0 0 .2rem;font-size:.92rem}
section.sitegroup{margin:.75rem 0}
section.sitegroup h3{margin:.5rem 0 .25rem;font-size:1rem;color:#41474d}
ul.sitepick a.choice,ul.sitepick button.choice{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;width:100%;font:inherit;cursor:pointer}
/* The address and reference are what tell two sites apart: legible on the dark choice, not muted into it (review of a34-usability, F8: #5a6169 on #0b4a6f was 1.5:1; this is above 7:1). */
ul.sitepick a.choice .muted,ul.sitepick button.choice .muted{color:#dbe6ee}
form.inline{display:inline-block;margin:0}
.workrows .followups{list-style:none;padding:0;margin:.4rem 0}
.workrows .followups li{margin:.25rem 0;padding:.25rem 0;border-top:1px solid var(--line)}
.workrows .followups form.followup{display:inline-flex;gap:.3rem;flex-wrap:wrap;align-items:center;margin-left:.5rem}
.editform{margin:.5rem 0;padding:.75rem;border:1px solid var(--line);border-radius:4px;background:#fafbfc}
.tsection{margin:1.25rem 0;padding:.75rem;border:1px solid var(--line);border-radius:4px}
.grouprows{margin:.5rem 0 0 1rem;padding-left:.75rem;border-left:3px solid var(--line)}
.preview-items{list-style:none;padding-left:0}
.preview-items li{margin:.4rem 0}
.preview-items li.followup{margin-left:1.5rem;padding-left:.5rem;border-left:3px solid var(--line)}
/* A question still needed (26 September 2026): a substantial red border, its left edge heavier, and the words above it. */
.q.gap{border:3px solid var(--error);border-left-width:8px;border-radius:6px;padding:.75rem .85rem;background:var(--critical-bg,#fdecec)}
[data-stage-gaps],[data-client-stage-gaps],[data-gap-list]{border:3px solid var(--error);border-left-width:8px;background:var(--critical-bg,#fdecec)}
[data-stage-nav] [data-stage-incomplete]{outline:3px solid var(--error);outline-offset:2px}
fieldset.group{border:1px solid var(--line);padding:.75rem}
fieldset.evidence ul.files{list-style:none;padding:0}
fieldset.evidence ul.files li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.35rem 0}
fieldset.evidence .thumb img{width:112px;height:84px;object-fit:cover;border:1px solid var(--line);border-radius:3px;display:block}
figure.pending{margin:.5rem 0;padding:.5rem;border:1px dashed var(--line);border-radius:4px;max-width:20rem}
figure.pending img{max-width:100%;max-height:220px;display:block;border-radius:3px}
figure.pending figcaption{font-size:.9rem;color:var(--muted);margin-top:.3rem}
.auto p{margin:.2rem 0 .8rem}
.instruction{margin:.5rem 0}
/* ---- the alarm attendance block (0090) ---------------------------------- */
fieldset.attendance{border:1px solid var(--line);border-radius:6px;padding:.5rem .9rem 1rem;margin:.75rem 0}
fieldset.attendance>legend{font-weight:600;padding:0 .4rem}
fieldset.attendance .times{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
fieldset.attendance .datetime{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
fieldset.attendance .datetime>label{flex:1 0 100%}
fieldset.attendance .datetime input.bigfield{flex:1 1 7rem;min-width:6rem}
label.nextday{flex:1 0 100%;display:block;font-size:.92rem;margin-top:.15rem;min-height:auto}
.nowbutton{margin-left:.2rem;vertical-align:middle}
/* ---- the site briefing on the form ------------------------------------- */
details.briefing{border:1px solid var(--line);border-left:4px solid #1d6f9c;border-radius:6px;padding:.25rem .9rem;margin:.75rem 0}
details.briefing>summary{cursor:pointer;font-weight:600;padding:.5rem 0;min-height:44px}
details.briefing dl.known dd{margin-bottom:.4rem}
section.briefing-section{margin:1rem 0;padding:.5rem .9rem;border:1px solid var(--line);border-radius:6px}
section.briefing-section h3{margin:.25rem 0 .5rem}
/* Special instructions (a38 §5): the approved text set apart, a proposal marked as such, the history as a list. */
.special-text{border-left:4px solid #1d6f9c;padding:.25rem .9rem;margin:.5rem 0;background:#f6f9fb}
.special-text.special-proposed{border-left-color:#b8860b;background:#fdf8ec}
ol.revision-history{list-style:none;padding:0;margin:.5rem 0}
ol.revision-history>li{border-top:1px solid var(--line);padding:.6rem 0}
ol.revision-history>li[data-current]{background:#f3faf3}
/* A follow-up hidden until its answer is given: nothing else about it changes. */
.q[hidden]{display:none}
fieldset.zone-handling{margin:.5rem 0}
/* ---- the four stages ------------------------------------------------------
   One list of ten sections was the complaint: "too lengthy and too much".
   Numbering them is not decoration — it is how somebody halfway down knows how
   much is left. */
section.stage{margin:1.5rem 0;padding-top:.5rem;border-top:2px solid var(--line)}
section.stage>h3{display:flex;align-items:center;gap:.6rem;margin:.25rem 0 .5rem}
.stagenum{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;
  border-radius:50%;background:var(--accent);color:var(--accent-fg);font-size:.95rem;flex:0 0 auto}
/* An on-demand section is absent until it is asked for, and its summary is the
   asking. It looks like a button because it does what a button does. */
details.ondemand{margin:.4rem 0}
details.ondemand>summary{list-style:none;display:inline-block;padding:.6rem .9rem;min-height:44px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);cursor:pointer;font-weight:600}
details.ondemand>summary::-webkit-details-marker{display:none}
details.ondemand[open]>summary{margin-bottom:.5rem}
details.ondemand>div{border-left:3px solid var(--line);padding-left:.75rem}
/* ---- findings and zones --------------------------------------------------- */
fieldset.finding{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;
  padding:.5rem .9rem 1rem;margin:.75rem 0}
fieldset.finding>legend{font-weight:600;padding:0 .4rem}
fieldset.finding .evidence{margin-top:.75rem;padding-top:.5rem;border-top:1px dashed var(--line)}
/* A file input has an intrinsic width wider than a phone; it must never be the
   thing that makes a form scroll sideways. */
input[type=file]{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
/* Nothing in a stack may size the stack: a grid track grows to its widest
   item's min-content, and one wide control would then widen every row. */
.stack>*{min-width:0}
/* A fieldset's default min-inline-size is min-content, which lets one wide
   control push the whole page past the edge of a phone. */
fieldset{min-width:0;min-inline-size:0;max-width:100%}
.capture{margin:.5rem 0}
.capture>label{display:block;margin-top:.5rem}
.findings>button,.zones>button{margin-top:.5rem}
/* ---- the report as it reads ----------------------------------------------- */
section.preview{border:1px solid var(--line);border-radius:6px;padding:.75rem 1rem;margin:1rem 0}
section.preview h4{margin:0 0 .25rem}
section.preview h5{margin:.75rem 0 .25rem;font-size:1rem}
.narrated{margin:.5rem 0}
.narrated p{margin:.2rem 0}
.pair{display:flex;gap:.75rem;flex-wrap:wrap}
/* ---- the pickers app.js draws --------------------------------------------
   A month view and a 24-hour list, in the page, at a size somebody can use.
   Present only when the script has run; the fields work without it. */
/* THE POPUP IS A COLUMN: a head, a body that scrolls, and actions that do not.
   The max-height keeps it inside the viewport; the minutes are the part allowed to
   grow and scroll, so Set, Clear and Cancel are always on screen. */
.pop{z-index:50;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.28);padding:.75rem;
  display:flex;flex-direction:column;
  width:min(360px,calc(100vw - 16px));max-width:min(360px,calc(100vw - 16px));
  max-height:min(88vh,600px)}
/* AFTER .pop, and more specific than it. The wider cap for the time picker was
   written BEFORE the general rule and lost to it, so the minute grid was laid out
   for 430px inside a box 360px wide and the right-hand columns were cut off. */
.pop.pop-time{width:min(430px,calc(100vw - 16px));max-width:min(430px,calc(100vw - 16px))}

/* EVERY BUTTON IN A POPUP STARTS FROM ZERO PADDING.
   The global button rule adds .55rem 1rem — 32px of horizontal padding — which
   on a minute button is more than twice the width of the number inside it. Ten of
   those do not fit in any popup, which is what pushed the grid past its container.
   Each kind below then asks for the space it actually needs. */
.pop button{padding:0;border-radius:6px}

.pop-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;flex:0 0 auto}
.pop-title{font-size:1.1rem}
.pop-arrow{min-width:2.75rem;min-height:2.75rem;font-size:1.3rem;background:var(--bg);
  border:1px solid var(--line);color:var(--fg);cursor:pointer}
.pop-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;flex:0 1 auto;overflow-y:auto}
.pop-dow{text-align:center;font-size:.85rem;color:var(--muted);padding:.25rem 0}
.pop-day,.pop-empty{min-height:2.75rem;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;border-radius:6px;text-align:center}
.pop-day{background:var(--bg);border:1px solid var(--line);color:var(--fg);cursor:pointer}
.pop-day.is-today{border-color:var(--accent);font-weight:700}
.pop-day.is-chosen{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.pop-empty{border:0}
.pop-readout{display:block;font-size:1.6rem;text-align:center;padding:.25rem 0 .5rem 0;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.pop-label{display:block;font-size:.9rem;color:var(--muted);margin:.35rem 0 .2rem 0;flex:0 0 auto}
/* RESPONSIVE COLUMNS. auto-fill with a minimum fits as many as the width
   allows and no more, so the same grid works at 430px, at a phone's 360 and at
   200% zoom — instead of a fixed ten that overflow whenever they do not fit. */
.pop-hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(3rem,1fr));gap:3px;
  flex:0 1 auto;max-height:9rem;overflow-y:auto;overflow-x:hidden}
.pop-minutes{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:3px;
  flex:1 1 auto;min-height:3rem;max-height:12rem;overflow-y:auto;overflow-x:hidden}
.pop-h,.pop-m{min-height:2.75rem;display:flex;align-items:center;justify-content:center;
  font-size:1rem;background:var(--bg);border:1px solid var(--line);
  color:var(--fg);cursor:pointer;font-variant-numeric:tabular-nums}
.pop-h.is-chosen,.pop-m.is-chosen{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.pop-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem;flex:0 0 auto}
/* The action buttons DO want the ordinary button padding back. */
.pop-actions button{padding:.55rem 1rem;min-height:2.75rem}
/* The save bar at the top of an editable report: the same two buttons as the
   bottom of the page, so a long form never hides the way to keep your work. */
.savebar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1rem 0;
  padding:.6rem .75rem;border:1px solid var(--line);border-radius:6px;background:#f6f7f8}
.savebar .muted{flex:1 1 12rem}
/* THE AUTOSAVE STATE (A34 §14): one line, coloured by the platform's own rule —
   green is confirmed by the server, amber is pending or unsaved, red is a failure.
   Hidden until the script runs; the static sentence beside it is the truth then. */
.autosave{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.95rem}
.autosave .autosave-mark{width:.7rem;height:.7rem;border-radius:50%;background:var(--muted);flex:0 0 auto}
.autosave[data-state="saved"] .autosave-mark{background:var(--ok)}
.autosave[data-state="saving"] .autosave-mark,.autosave[data-state="uploading"] .autosave-mark{background:var(--focus);animation:autosave-pulse 1s infinite alternate}
.autosave[data-state="dirty"] .autosave-mark,.autosave[data-state="pending"] .autosave-mark{background:var(--focus)}
.autosave[data-state="failed"] .autosave-mark{background:var(--error)}
.autosave[data-state="failed"] [data-autosave-text]{color:var(--error);font-weight:600}
.autosave button.small{padding:.25rem .6rem;font-size:.9rem}
@keyframes autosave-pulse{from{opacity:.4}to{opacity:1}}
.autosave-recovery .buttonrow{margin-top:.5rem}
/* A recipient of a release (A34 §18): a real checkbox beside the person and what they can open. */
.recipient-row{display:flex;gap:.75rem;align-items:flex-start;padding:.5rem .6rem;border:1px solid var(--line);border-radius:3px}
.recipient-row input[type=checkbox]{width:1.4rem;height:1.4rem;margin-top:.15rem;flex:0 0 auto}
.ok{color:var(--ok)}
.panel{margin-top:1.5rem;padding-top:.5rem;border-top:1px solid var(--line)}

/* A51 §15: the signing box, and the two fields that take a reading. */
.signpad canvas{display:block;width:100%;max-width:32rem;height:auto;aspect-ratio:3/1;border:1px dashed var(--line);border-radius:4px;background:#fff;touch-action:none;cursor:crosshair}
.signature ul.files img,.signature .thumb img{max-height:5rem;width:auto;background:#fff;border:1px solid var(--line);border-radius:4px}
.locationfield [data-location-value],.scanfield [data-scan-value]{max-width:32rem}

/* A51 §16: the branded preview beside the policy editor — a sheet of paper on
   the screen, in the company's colours, so an author can see a table came out
   as a table without downloading a PDF. */
.docpreview{background:#fff;color:#141618;border:1px solid var(--line);border-radius:4px;padding:1.5rem;max-width:46rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.docpreview-head{border-bottom:3px solid var(--accent);padding-bottom:.75rem;margin-bottom:1rem}
.docpreview-logo{display:block;max-height:3.5rem;max-width:60%;margin-bottom:.5rem}
.docpreview-company{margin:0;font-weight:600;color:var(--accent)}
.docpreview h1{font-size:1.4rem;margin:.25rem 0}
.docpreview h2{font-size:1.05rem;margin:1.1rem 0 .3rem;color:var(--accent)}
.docpreview-meta{margin:0;color:var(--muted);font-size:.9rem}
.docpreview-draft{margin:.5rem 0 0;font-weight:700;letter-spacing:.08em;color:var(--error)}
.docpreview table{width:100%;border-collapse:collapse;margin:.5rem 0}
.docpreview th,.docpreview td{border:1px solid var(--line);padding:.35rem .5rem;text-align:left;font-size:.95rem}
@media (max-width:40rem){.docpreview{padding:1rem}}
.company-logo{max-width:280px;max-height:100px;width:auto;height:auto;border:1px solid var(--line);padding:.25rem;background:#fff}
.release ul{margin:.25rem 0 1rem}
.backnav{margin:0 0 1rem 0}
a.backlink{min-height:2.75rem;display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;font-size:1.05rem}
.pop-trigger{min-width:2.75rem;min-height:2.75rem;margin-left:.35rem;font-size:1.2rem;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--fg);cursor:pointer;
  vertical-align:middle;padding:0}
.pop button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* With the script running, the field and the button that opens its popup sit on
   one line; the label and any error still take a line of their own. */
html[data-pickers=on] .datetime{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
html[data-pickers=on] .datetime>*:not(input):not(button){flex:0 0 100%}
html[data-pickers=on] .datetime input.bigfield{flex:1 1 7rem;width:auto;min-width:0}
html[data-pickers=on] .datetime .pop-trigger{flex:0 0 auto;margin-left:0}
/* One button that fills both halves of a date-and-time pair from the clock. It
   is drawn by the script, so it never appears as a dead control. */
.nowbutton{align-self:flex-end;margin-top:.25rem;min-height:44px}
/* ---- the date and time control -----------------------------------------
   A field that is technically present is not a field somebody can use. These
   sizes are the requirement, not decoration: 3rem of height and 1.15rem of text
   give a thumb something to hit and eyes something to read, and a larger field
   also makes the browser draw a larger calendar icon to tap. */
.bigfield{font-size:1.15rem;min-height:3rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--fg);font-family:inherit;width:100%;box-sizing:border-box}
input.bigfield[type=date],input.bigfield[type=time]{max-width:100%}
/* The key handover's date and time (25 September 2026): the same size, height and spacing as the text boxes beside them, on any screen. */
.field-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0 1rem}
#handedOverDate,#handedOverTime{display:block;width:100%;max-width:none;box-sizing:border-box;font:inherit;line-height:1.5;padding:.55rem;min-height:calc(1.5em + 1.1rem + 2px);border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--fg)}
[data-design="2"] #handedOverDate,[data-design="2"] #handedOverTime{padding:.6rem .7rem;border-radius:var(--radius-sm);border-color:var(--line-strong)}
.datetime{flex:1 1 14rem;min-width:0}
.answers dt{font-weight:600;margin-top:.5rem}
.answers dd{margin:0 0 .25rem 0}
/* A stated negative is a finding, not an absence. Marked, never faded. */
.answers dd.stated-negative{font-weight:600}
/* ---- the main navigation ------------------------------------------------
   Four destinations, each a symbol and a word, each big enough for a thumb. The
   current one is marked by weight, a colour and an underline bar, so no single
   one of the three is carrying the meaning alone. */
.mainnav{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:0}
.mainnav-link{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;
  min-width:5.5rem;min-height:3.25rem;padding:.5rem .75rem;border-radius:6px;
  text-decoration:none;color:var(--header-fg);font-weight:600;border:1px solid transparent}
/* HOVER CHANGES THE SHADE AND NOTHING ELSE. The label is at full contrast
   before the pointer arrives, and the shade is computed away from the text, so
   it can only ever be darker under white type and lighter under black. */
.mainnav-link:hover,.mainnav-link:focus-visible{background:var(--header-hover)}
.mainnav-mark{font-size:1.3rem;line-height:1}
/* THREE SIGNALS FOR THE CURRENT TAB, none of them carrying it alone: a deeper
   shade, a border, and an underline bar — all in the header's own text colour,
   so they survive a company's palette and a forced-colours display. */
.mainnav-link.current{background:var(--header-current);border-color:var(--header-fg);
  box-shadow:inset 0 -3px 0 0 var(--header-fg)}
.accountbar{margin-left:auto;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
@media (max-width:40rem){
  header{gap:.5rem}
  .mainnav{width:100%;justify-content:space-between}
  .mainnav-link{flex:1 1 auto;min-width:0}
  .accountbar{margin-left:0;width:100%;font-size:.95rem}
}
/* ---- the home page cards -------------------------------------------------
   A grid that becomes one column on a phone. The whole card is the link, so the
   tap target is the card and not the number inside it. */
/* A67 §9 — ONE CARD LAYOUT, EVERYWHERE, AND A COLUMN COUNT THAT IS SAID
   RATHER THAN IMPLIED.
   "Apply the same card style used on the home page across roles… Use three
   cards across on desktop, fewer columns on smaller screens, and a single
   column on mobile." auto-fit gave whatever happened to fit — four narrow
   cards on a wide screen, two on the same screen with a different font — so
   the same dashboard looked different to two people and different again from
   the officer's. The breakpoints below are the requirement, written down:
   one, then two, then three. Both grids use them, so an officer's "At a
   glance" and a home page are laid out the same way. */
.cards,.tapcards{list-style:none;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:40rem){.cards,.tapcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.cards,.tapcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards{margin:1.5rem 0}
.card{display:block;padding:1rem 1.1rem;border:1px solid var(--line);border-left-width:6px;
  border-radius:6px;text-decoration:none;color:var(--fg);background:var(--bg);min-height:6.5rem}
/* HOVER CHANGES THE SHADE, AND NOTHING ELSE (local acceptance, September 2026).
   Nothing on a card is hidden until hovered — every label, count and line of
   help is drawn at full contrast all the time — so hover is an affordance and
   never a way to read the card. #f7f9fb was a 2% change that nobody could see;
   this is visible without being a colour change, and the keyboard gets exactly
   the same treatment, which is the part that was missing. */
.card:hover,.card:focus-visible{background:#e7eff5;border-color:var(--accent)}
/* THE TITLE AND THE COUNT SIT ON ONE LINE, title first: "Draft reports  1".
   The count is pushed to the end so a column of cards lines its numbers up. */
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.card-count{display:flex;align-items:center;gap:.4rem;font-size:2.1rem;font-weight:700;line-height:1.1;margin-left:auto}
.card-mark{font-size:1.6rem;color:#2f7d4f}
.card-title{display:block;font-weight:600;font-size:1.05rem}
.card-help{display:block;color:var(--muted);font-size:.92rem;margin-top:.25rem}
/* The Reports tab's quick-access strip (0100): the form's button, its favourite mark beside it. */
ul.choices.quick li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
ul.choices.quick li .kind-help{flex-basis:100%;margin:0}
section.find-reports form.filters div{display:inline-block;margin:0 .6rem .5rem 0;vertical-align:bottom}
/* The navigation boxes below the divider (mandatory update, September 2026): the same card, a mark where the count would be. */
/* AN ACCOUNT SET-UP NOTICE. Not a card, not muted prose: one bordered block
   that says something has to be put right, with room to say who can do it. */
.notice.setup{border-left:6px solid #2a6f9e;background:#f2f7fb}
/* THE SET-UP PANEL'S LIST (A46 §4): one line per outstanding thing, tight
   enough that four of them are still a panel rather than a page. The help
   sentence wraps under its link on a phone and sits beside it on a desktop. */
/* THE PHONE VIEW (A46 §6): a frame of the same page, at a handset's width, so
   the stylesheet's own phone rules apply inside it rather than a desktop
   layout being squeezed into a narrow column. */
.phoneframe{margin:1rem 0;max-width:100%;overflow-x:auto}
.phoneframe iframe{width:390px;max-width:100%;height:720px;border:10px solid #2c3136;border-radius:18px;background:#fff;display:block}
/* A51 §15: the builder's live preview — the form itself, full width. */
body.bare > header, body.bare > footer, body.bare .skip{display:none}
body.bare > main{padding-top:.5rem}
.previewframe iframe{width:100%;height:720px;border:1px solid var(--line);border-radius:4px;background:#fff;display:block}
.setuplist{list-style:none;margin:.4rem 0 0;padding:0}
.setuplist li{margin:.3rem 0;line-height:1.35}
.setuplist li a{font-weight:600}
@media (min-width:40rem){.setuplist li{display:flex;gap:.5rem;align-items:baseline}
.setuplist li>span{flex:1 1 auto}}
/* "Step 1 of 2" above a form that is one of two. Said in words, not drawn as a
   progress bar: a bar with two segments takes more room than the sentence. */
.steps{margin:.25rem 0 1rem}
/* THE REPORTS PAGE: one search box and one button at the top, the period tabs
   under them, everything else behind Filters. The search grows to fill the row
   and the button sits beside it until the screen is too narrow, when the two
   stack — the same layout at every width rather than a second one to maintain. */
.findbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin:1rem 0 .5rem}
.findsearch{flex:1 1 22rem;margin:0}
.findsearch-row{display:flex;gap:.5rem;flex-wrap:wrap}
.findsearch-row input[type=search]{flex:1 1 14rem;min-width:0;font-size:1.05rem;padding:.6rem .7rem}
.findwrite{margin:0}
.periodtabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .25rem}
.periodtabs a.button.is-current{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);font-weight:600}
[data-period-basis]{margin:.25rem 0 1rem;font-size:.92rem}
.filterpanel{margin:0 0 1rem}
.smallhead{font-size:1rem;margin:.75rem 0 .35rem}
/* THE FIELD PALETTE: the same card as everywhere else, in a grid, each one a
   name and a sentence. Nothing is hidden until hover; the card is the target. */
.palette{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:6px;background:#fbfcfd}
.palettelist{list-style:none;padding:0;margin:.75rem 0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.palettelist .card{min-height:0}
.palettelist .card-count{font-size:1rem}
.capture-choice{margin:0}
.capture-choice .card{display:grid;gap:.35rem}
.capture-choice button{justify-self:start;margin-top:.35rem}
details.advanced{margin:.5rem 0}
details.advanced>summary{cursor:pointer;font-weight:600}
/* A list of plain statements — what an area does not yet do, and why. */
/* The list of missing answers: a link each, straight to the question. */
.gaplist ol{margin:.35rem 0 .35rem 1.2rem;padding:0}
.gaplist li{margin:.2rem 0}
.q.gap{scroll-margin-top:1rem}
.plainlist{margin:.5rem 0 1rem 1.1rem;padding:0}
.plainlist li{margin:.35rem 0}
hr.home-divider{border:0;border-top:2px solid var(--line);margin:2rem 0 1.25rem}
.card-nav .card-nav-mark{font-size:1.7rem;color:#2a6f9e}
.card-nav{border-left-color:#2a6f9e}
form.global-search{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin:.5rem 0 1rem}
form.global-search div{flex:1 1 18rem}
.search-results h4{margin:.9rem 0 .3rem}
.card-done{border-left-color:#2f7d4f}
.card-waiting{border-left-color:#a5710a}
.card-action{border-left-color:#a5710a}
.card-live{border-left-color:#2a6f9e}
.card-quiet{border-left-color:#8a9199}
.card-urgent{border-left-color:#a83224}
.card-urgent .card-count{color:#7a1a0c}
/* The attachment list: filename, then a removal link with room around it so a
   thumb cannot hit it while aiming for the file. */
.files{list-style:none;padding:0;margin:.5rem 0}
.files li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.files a.remove{display:inline-block;margin-left:.5rem;padding:.35rem .6rem;
  color:#7a1a0c;border:1px solid #a83224;border-radius:4px;text-decoration:none;min-height:2.25rem}
.files a.remove:hover,.files a.remove:focus-visible{background:#fdecea}
.files.removed li{color:var(--muted)}
/* A checkbox big enough to hit, with a label that a screen reader can read even
   though the column heading carries the visible text. */
/* A checkbox and its label side by side, both big enough to press. */
.checkline{display:flex;gap:.75rem;align-items:flex-start;padding:.6rem 0}
.checkline input{width:1.4rem;height:1.4rem;margin-top:.15rem;flex:0 0 auto}
.checkline label{font-weight:600;margin:0}
.checkline label .muted{display:block;font-weight:400}
label.tick{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;margin:0}
label.tick input{width:1.35rem;height:1.35rem}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.langs{display:flex;gap:.5rem}
.langs [aria-current=true]{font-weight:700;text-decoration:none}
/* ==========================================================================
   DESIGN 2 — PROPOSED (24 September 2026), for approval.
   Drawn only on pages that ask for it (body[data-design="2"]): Home, the site
   briefing and the staged alarm report. Every other page is exactly as it was.
   Colours still come from the company's own brand.css (--accent, --header-*),
   so a subscriber's palette and logo carry over unchanged.
   ========================================================================== */
[data-design="2"]{--surface:#f3f5f7;--card:#fff;--line:#dfe3e8;--line-strong:#c9d0d7;--muted:#56606b;
  --radius:12px;--radius-sm:8px;--shadow:0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.06);
  --critical:#b42318;--critical-bg:#fef3f2;--caution:#8a5a00;--caution-bg:#fff8eb;--done:#1b6b3a;
  background:var(--surface);font-size:16px;line-height:1.55}
[data-design="2"] main{max-width:74rem;padding:1.5rem 1.25rem 5rem}
[data-design="2"] h2{font-size:1.55rem;line-height:1.25;letter-spacing:-.01em;margin:.25rem 0 .35rem}
[data-design="2"] h3{font-size:1.08rem;line-height:1.3;margin:0 0 .6rem}
[data-design="2"] .muted{color:var(--muted)}
[data-design="2"] .page-lead{color:var(--muted);margin:0 0 1.25rem}

/* THE ONE HEADER (A77 §12). These were Home's rules only, so the header changed
   size between Home and every other page. They are every page's now: the same
   padding, logo box, name, navigation and account controls at the same width.
   The header: the company's mark and name, one row of navigation, the account
   in small type — compact, and still the company's own colours. */
body header{background:var(--header-bg);color:var(--header-fg);min-height:0;padding:.55rem 1.25rem;line-height:1.5;
  gap:.5rem 1.5rem;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(16,24,40,.03)}
body header h1{font-size:1.15rem}
body .brandstack{flex-direction:row;gap:.6rem;align-items:center}
body .brandstack h1{text-align:left;font-size:1.1rem}
body .mainnav{gap:.25rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
body .mainnav-link{flex-direction:row;gap:.45rem;min-width:0;min-height:2.6rem;padding:.35rem .75rem;border-radius:999px;font-weight:600;font-size:.95rem;white-space:nowrap}
body .mainnav-mark{font-size:1rem}
body .mainnav-link.current{box-shadow:none;border-color:transparent;background:var(--header-current)}
body .accountbar{font-size:.85rem;gap:.35rem .9rem}
/* The header's own line spacing and button, so a page's body settings cannot change its size. */
body .accountbar button,body .accountbar a.account-button{min-height:2.2rem;padding:.25rem .8rem;font-weight:600;border-radius:8px;font-size:inherit;line-height:1.5;display:inline-flex;align-items:center;text-decoration:none;box-sizing:border-box}
@media (max-width:40rem){
  body header{padding:.5rem .75rem}
  body .mainnav{width:100%;justify-content:flex-start}
  body .mainnav-link{flex:0 0 auto}
  body .accountbar{font-size:.8rem}
}

/* Surfaces, buttons, fields and notices. */
[data-design="2"] .panel,[data-design="2"] section.stage,[data-design="2"] .briefing-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.25rem}
[data-design="2"] button,[data-design="2"] a.button{border-radius:var(--radius-sm);font-weight:600;padding:.6rem 1.1rem;min-height:2.75rem}
[data-design="2"] button.secondary,[data-design="2"] a.button.secondary{background:var(--card);border-color:var(--line-strong);color:var(--fg)}
[data-design="2"] button.secondary:hover,[data-design="2"] a.button.secondary:hover{border-color:var(--accent);color:var(--accent)}
[data-design="2"] input[type=text],[data-design="2"] input[type=search],[data-design="2"] input[type=email],[data-design="2"] input[type=number],
[data-design="2"] input[type=date],[data-design="2"] input[type=time],[data-design="2"] select,[data-design="2"] textarea{border-radius:var(--radius-sm);border-color:var(--line-strong);padding:.6rem .7rem}
[data-design="2"] .notice{border:1px solid var(--line);border-left:4px solid;border-radius:var(--radius-sm);background:var(--card);padding:.7rem 1rem;margin:0 0 1rem}
[data-design="2"] .notice.error{border-left-color:var(--critical);background:var(--critical-bg)}
[data-design="2"] .notice.warning{border-left-color:#c27c00;background:var(--caution-bg)}
[data-design="2"] .notice.success{border-left-color:var(--done);background:#f1f8f3}
[data-design="2"] footer.build{max-width:74rem;margin:0 auto;padding:1rem 1.25rem;font-size:.8rem}

/* ---- Home ---------------------------------------------------------------- */
[data-design="2"] .home-top{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.25rem}
[data-design="2"] .home-top .global-search{display:flex;gap:.5rem;align-items:flex-end;flex:1 1 22rem;max-width:34rem}
[data-design="2"] .home-top .global-search>div:first-child{flex:1}
[data-design="2"] .home-top .global-search label{font-size:.85rem;color:var(--muted);font-weight:600}
[data-design="2"] .home-top .search-results{flex:1 1 22rem;max-width:34rem;margin:0}
[data-design="2"] .home-top .search-results>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-design="2"] .home-top .global-search{max-width:none}
[data-design="2"] .dash{display:grid;gap:1rem;grid-template-columns:1fr;align-items:start}
@media (min-width:44rem){[data-design="2"] .dash{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:66rem){[data-design="2"] .dash{grid-template-columns:repeat(3,minmax(0,1fr))}}
[data-design="2"] .dash-panel h3{display:flex;align-items:center;gap:.5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem}
[data-design="2"] .dash-list{list-style:none;margin:0;padding:0}
[data-design="2"] .dash-list li+li{border-top:1px solid var(--line)}
[data-design="2"] .dash-row{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;align-items:center;padding:.7rem .25rem;text-decoration:none;color:inherit;border-radius:var(--radius-sm)}
[data-design="2"] .dash-row:hover,[data-design="2"] .dash-row:focus-visible{background:#f2f6fa}
[data-design="2"] .dash-row .card-title{font-weight:600;font-size:1rem}
[data-design="2"] .dash-row .card-help{grid-column:1;font-size:.87rem;color:var(--muted);margin:0}
[data-design="2"] .dash-row .card-count{grid-column:2;grid-row:1 / span 2;font-size:1.6rem;font-weight:700;line-height:1;margin:0;display:flex;align-items:center;gap:.35rem}
[data-design="2"] .dash-row[data-tone="urgent"] .card-count,[data-design="2"] .dash-row[data-tone="action"] .card-count{color:var(--critical)}
[data-design="2"] .dash-row[data-tone="waiting"] .card-count{color:var(--caution)}
[data-design="2"] .dash-row[data-tone="done"] .card-count{color:var(--done)}
[data-design="2"] .dash-empty{color:var(--muted);margin:.4rem .25rem}
[data-design="2"] .notice.setup{margin-bottom:1.25rem}
[data-design="2"] .notice.setup .setuplist{margin:.4rem 0 0;padding-left:1.1rem}

/* ---- The site briefing ---------------------------------------------------- */
[data-design="2"] .briefing-nav{position:sticky;top:0;z-index:2;background:var(--surface);border:0;border-radius:0;padding:.5rem 0;margin:0 0 1rem}
[data-design="2"] .briefing-nav ul{flex-wrap:nowrap;overflow-x:auto;gap:.4rem;scrollbar-width:none}
[data-design="2"] .briefing-nav a{display:inline-block;white-space:nowrap;padding:.35rem .8rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);text-decoration:none;font-size:.9rem}
[data-design="2"] .briefing-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:52rem){[data-design="2"] .briefing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-design="2"] .briefing-card.wide{grid-column:1 / -1}}
[data-design="2"] .briefing-card{margin:0;scroll-margin-top:4rem}
[data-design="2"] .briefing-card h3{display:flex;align-items:center;gap:.5rem}
[data-design="2"] .briefing-card.critical{border-left:5px solid var(--critical)}
[data-design="2"] .briefing-card.critical h3{color:var(--critical)}
[data-design="2"] .briefing-card.important{border-left:5px solid var(--accent)}
[data-design="2"] .briefing-card dl{display:grid;grid-template-columns:minmax(8rem,38%) 1fr;gap:.35rem .9rem;margin:0}
[data-design="2"] .briefing-card dt{color:var(--muted);font-weight:600;font-size:.9rem}
[data-design="2"] .briefing-card dd{margin:0}
@media (max-width:30rem){[data-design="2"] .briefing-card dl{grid-template-columns:1fr}[data-design="2"] .briefing-card dd{margin-bottom:.35rem}}
[data-design="2"] .briefing-card ul.files,[data-design="2"] .briefing-card ol.files{padding-left:0;list-style:none;margin:0}
[data-design="2"] .briefing-card .files>li{padding:.55rem 0;border-top:1px solid var(--line)}
[data-design="2"] .briefing-card .files>li:first-child{border-top:0}
[data-design="2"] a.call{display:inline-flex;align-items:center;gap:.35rem;margin:.3rem .4rem 0 0;padding:.35rem .8rem;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;font-weight:600;min-height:2.5rem}
[data-design="2"] a.call::before{content:"\260E"}
[data-design="2"] .briefing-headline{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 1rem}
[data-design="2"] .briefing-headline .pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border-radius:999px;font-size:.88rem;font-weight:600;background:var(--card);border:1px solid var(--line-strong)}
[data-design="2"] .briefing-headline .pill.critical{border-color:var(--critical);color:var(--critical);background:var(--critical-bg)}

/* ---- The staged alarm report -------------------------------------------- */
[data-design="2"] .report-head{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;margin-bottom:.75rem}
[data-design="2"] .report-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
[data-design="2"] .report-meta dt{display:none}
[data-design="2"] .report-meta dd{margin:0}
[data-design="2"] nav.steps{display:flex;gap:.35rem;overflow-x:auto;padding:.15rem 0 .6rem;margin:0 0 1rem;scrollbar-width:thin;counter-reset:none}
[data-design="2"] nav.steps .step-jump{flex:0 0 auto;border-radius:999px;min-height:2.6rem;padding:.3rem .85rem .3rem .35rem;font-weight:600;font-size:.9rem;background:var(--card);border:1px solid var(--line-strong);color:var(--fg)}
[data-design="2"] nav.steps .stepnum{display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;border-radius:50%;background:#eef1f4;font-size:.85rem}
[data-design="2"] nav.steps a.step-jump.current{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
[data-design="2"] nav.steps a.step-jump.current .stepnum{background:rgba(255,255,255,.22);color:inherit}
[data-design="2"] nav.steps a[data-stage-state="complete"] .stepnum{background:#e3f2e8;color:var(--done)}
[data-design="2"] nav.steps span.step-jump.locked{background:transparent;border-style:dashed;color:#7a838c}
[data-design="2"] nav.steps .step-done{font-size:.78rem}
[data-design="2"] section.stage{margin:0 0 1rem;border-top:1px solid var(--line)}
[data-design="2"] section.stage>h3{font-size:1.3rem;gap:.6rem}
[data-design="2"] .stage-of{margin:0 0 .15rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
[data-design="2"] section.stage .stack>.q{padding:.85rem 0;border-top:1px solid var(--line)}
[data-design="2"] section.stage .stack>.q:first-child{border-top:0}
[data-design="2"] .q.gap{background:var(--critical-bg);border-radius:var(--radius-sm);padding:.85rem .75rem;border:3px solid var(--error);border-left-width:8px}
[data-design="2"] label.pick span{border-radius:999px;padding:.5rem 1rem}
[data-design="2"] details.briefing{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:.3rem 1rem;margin:0 0 1rem}
[data-design="2"] .savebar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .75rem;box-shadow:var(--shadow);gap:.5rem}
[data-design="2"] .savebar [data-save-continue],[data-design="2"] .savebar [value="submit"]{margin-left:auto;order:5}
[data-design="2"] .savebar [data-autosave-static]{display:none}
[data-design="2"] .savebar .autosave{flex:1 1 100%;order:6;font-size:.88rem}
[data-design="2"] .savebar-top{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
@media (max-width:40rem){
  [data-design="2"] main{padding:1rem .75rem 7rem}
  [data-design="2"] h2{font-size:1.3rem}
  [data-design="2"] .savebar.stagebar{position:fixed;left:0;right:0;bottom:0;z-index:5;margin:0;border-radius:0;border-width:1px 0 0;padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom))}
  [data-design="2"] .savebar.stagebar a.button{display:none}
  [data-design="2"] .savebar.stagebar button{flex:1 1 auto;padding:.55rem .6rem}
  [data-design="2"] section.stage{padding:1rem .85rem}
}
/* Design 2 — refinements after the first photographs (24 September 2026). */
/* :is(body, body[data-design="2"]) — the header outranks any page's own rules for
   quiet text and buttons, so it looks the same on Home as everywhere (A77 §12). */
:is(body,body[data-design="2"]) header .muted,:is(body,body[data-design="2"]) header a.muted{color:var(--header-fg);opacity:.88}
:is(body,body[data-design="2"]) header .accountbar button,:is(body,body[data-design="2"]) header .accountbar a.account-button{background:transparent;color:var(--header-fg);border:1px solid var(--header-fg);opacity:1}
:is(body,body[data-design="2"]) header .accountbar button:hover,:is(body,body[data-design="2"]) header .accountbar button:focus-visible,:is(body,body[data-design="2"]) header .accountbar a.account-button:hover,:is(body,body[data-design="2"]) header .accountbar a.account-button:focus-visible,:is(body,body[data-design="2"]) header .accountbar a.account-button[aria-current]{background:var(--header-hover);color:var(--header-fg)}
[data-design="2"] .home-top{align-items:center}
[data-design="2"] .home-top .search-results{flex:0 1 30rem}
[data-design="2"] .home-top form.global-search{margin:0;flex-wrap:nowrap}
[data-design="2"] .home-top form.global-search>div{flex:0 0 auto}
[data-design="2"] .home-top form.global-search>div:first-child{flex:1 1 auto;min-width:0}
[data-design="2"] .notice.setup{border-left-color:var(--accent)}
[data-design="2"] .notice.draft-status{border-left-color:#8a939c;background:var(--card)}
[data-design="2"] nav.steps{flex-wrap:nowrap}
[data-design="2"] .briefing-grid{align-items:start}
[data-design="2"] .briefing-intro{font-size:.9rem}
[data-design="2"] form#report-form{max-width:none}
[data-design="2"] details.briefing dl.known{grid-template-columns:minmax(9rem,13rem) 1fr}
[data-design="2"] details.briefing:not([open]){padding-top:0;padding-bottom:0}
/* The stage bar reads as a sequence: 1 → 2 → … → Review. */
[data-design="2"] nav.steps{gap:1.35rem}
[data-design="2"] nav.steps>.step-jump{position:relative}
[data-design="2"] nav.steps>.step-jump:not(:last-child)::after{content:"\2192";position:absolute;right:-1.05rem;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:400;pointer-events:none}
[data-design="2"] .review-summary{display:grid;gap:.75rem;margin-top:.5rem}
[data-design="2"] .review-summary .readback{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .85rem}
[data-design="2"] .review-summary h5{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 .35rem;font-size:1rem}
[data-design="2"] .review-summary dl{display:grid;grid-template-columns:minmax(10rem,40%) 1fr;gap:.25rem .8rem;margin:0}
[data-design="2"] .review-summary dt{color:var(--muted);font-size:.9rem}
[data-design="2"] .review-summary dd{margin:0}
@media (max-width:30rem){[data-design="2"] .review-summary dl{grid-template-columns:1fr}}
/* A74 §3 — THE PHONE. Readable text (16px) and fields, controls at least 44 × 44px,
   every menu destination and every stage on screen at once, and the fixed save bar
   out of the way while somebody types. Scoped to narrow screens; desktop is unchanged. */
@media (max-width:40rem){
  html{scroll-padding-bottom:7rem;scroll-padding-top:1rem}
  body .mainnav,body[data-design="2"] .mainnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;width:100%;overflow:visible;flex-wrap:wrap;margin:0}
  body .mainnav-link,body[data-design="2"] .mainnav-link{flex-direction:row;justify-content:flex-start;gap:.5rem;min-height:3rem;padding:.4rem .7rem;font-size:1rem;white-space:normal;text-align:left;border-radius:var(--radius-sm,8px);line-height:1.2}
  body .accountbar,body[data-design="2"] .accountbar{font-size:1rem;gap:.25rem 1rem;width:100%;margin-left:0}
  body .accountbar a,body[data-design="2"] .accountbar a{display:inline-flex;align-items:center;min-height:44px}
  body .accountbar button,body[data-design="2"] .accountbar button,body .accountbar a.account-button,body[data-design="2"] .accountbar a.account-button{min-height:44px;padding:.4rem 1rem}
  body main,body[data-design="2"] main{font-size:1rem}
  body input[type=text],body[data-design="2"] input[type=text],body input[type=search],body[data-design="2"] input[type=search],body input[type=email],body[data-design="2"] input[type=email],body input[type=number],body[data-design="2"] input[type=number],body input[type=tel],body[data-design="2"] input[type=tel],body input[type=password],body[data-design="2"] input[type=password],body input[type=date],body[data-design="2"] input[type=date],body input[type=time],body[data-design="2"] input[type=time],body select,body[data-design="2"] select,body textarea,body[data-design="2"] textarea{font-size:16px;min-height:44px;box-sizing:border-box}
  body input[type=checkbox],body[data-design="2"] input[type=checkbox],body input[type=radio],body[data-design="2"] input[type=radio]{width:1.4rem;height:1.4rem;flex:0 0 auto;margin:0}
  body label:has(>input[type=checkbox]):not(.pick):not(.tick),body[data-design="2"] label:has(>input[type=checkbox]):not(.pick):not(.tick),body label:has(>input[type=radio]):not(.pick):not(.tick),body[data-design="2"] label:has(>input[type=radio]):not(.pick):not(.tick){display:flex;align-items:center;gap:.65rem;min-height:44px;font-size:1rem}
  body button,body[data-design="2"] button,body a.button,body[data-design="2"] a.button,body input[type=submit],body[data-design="2"] input[type=submit]{min-height:44px;font-size:1rem}
  body nav[aria-label="Breadcrumb"] a,body[data-design="2"] nav[aria-label="Breadcrumb"] a,body nav.chips a,body[data-design="2"] nav.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem}
  body nav.chips,body[data-design="2"] nav.chips{display:flex;flex-wrap:wrap;gap:.35rem .5rem}
  body nav.chips a,body[data-design="2"] nav.chips a{padding:.3rem .8rem;border:1px solid var(--line-strong,#c9d0d7);border-radius:999px;text-decoration:none;background:var(--card,#fff)}
  body details>summary,body[data-design="2"] details>summary{min-height:44px}
  body nav.steps,body[data-design="2"] nav.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;overflow:visible;flex-wrap:wrap}
  body nav.steps>.step-jump,body[data-design="2"] nav.steps>.step-jump{width:auto;min-height:3rem;white-space:normal;font-size:1rem;line-height:1.2;padding:.35rem .6rem .35rem .35rem;border-radius:var(--radius-sm,8px);justify-content:flex-start}
  body nav.steps>.step-jump:not(:last-child)::after,body[data-design="2"] nav.steps>.step-jump:not(:last-child)::after{content:none}
  body nav.steps a.step-jump.current,body[data-design="2"] nav.steps a.step-jump.current{outline:3px solid var(--accent);outline-offset:1px}
  body nav.steps .step-done,body[data-design="2"] nav.steps .step-done{font-size:.9rem}
  body ol.stepnav-list,body[data-design="2"] ol.stepnav-list,body .stepnav-list,body[data-design="2"] .stepnav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding:0}
  body .stepnav-list li,body[data-design="2"] .stepnav-list li{font-size:1rem;list-style:none}
  body .stepnav-list a,body[data-design="2"] .stepnav-list a{display:flex;width:100%;box-sizing:border-box;white-space:normal;min-height:3rem;font-size:1rem}
  body a.button.small,body[data-design="2"] a.button.small,body button.small,body[data-design="2"] button.small,body .nowbutton,body[data-design="2"] .nowbutton,body .report-meta,body[data-design="2"] .report-meta,body ol.steps li,body[data-design="2"] ol.steps li,body .home-top .global-search label,body[data-design="2"] .home-top .global-search label,body .global-search label,body[data-design="2"] .global-search label{font-size:1rem}
  body nav[aria-label="Breadcrumb"] a,body[data-design="2"] nav[aria-label="Breadcrumb"] a{min-width:44px;justify-content:center}
  body .checkline,body[data-design="2"] .checkline{display:flex;align-items:center;gap:.65rem;min-height:44px}
  body .checkline>label,body[data-design="2"] .checkline>label{flex:1 1 auto;display:flex;align-items:center;min-height:44px;margin:0}
  body ol.steps[data-site-steps] li,body[data-design="2"] ol.steps[data-site-steps] li{font-size:1rem;min-height:44px}
  body input:not([type]),body[data-design="2"] input:not([type]){font-size:16px;min-height:44px;box-sizing:border-box}
  body input[type=file],body[data-design="2"] input[type=file]{font-size:16px;min-height:44px;max-width:100%}
  body input[type=file]::file-selector-button,body[data-design="2"] input[type=file]::file-selector-button{min-height:44px;padding:.4rem .9rem;font-size:1rem;margin-right:.6rem}
  html[data-typing] body .savebar.stagebar,html[data-typing] body[data-design="2"] .savebar.stagebar{display:none}
}
/* A75 §2 — THE IPHONE DESIGN. More than larger text: generous buttons with the main
   action full width and obvious, the menu as cards, large date/time and choice
   controls, a clear sequence of stages, and a save bar within reach that never
   covers the page. Phones only; the company's own colours throughout. */
@media (max-width:40rem){
  body main,body[data-design="2"] main{padding-left:1rem;padding-right:1rem}
  body main h2,body[data-design="2"] main h2{font-size:1.45rem;line-height:1.25;margin:.4rem 0 .6rem}
  body main h3,body[data-design="2"] main h3{font-size:1.15rem;line-height:1.3}
  body main label,body[data-design="2"] main label{font-weight:600;line-height:1.35}
  body form.stack>div,body[data-design="2"] form.stack>div,body .stack>div,body[data-design="2"] .stack>div,body .q,body[data-design="2"] .q{margin-bottom:.35rem}
  body button,body[data-design="2"] button,body a.button,body[data-design="2"] a.button,body input[type=submit],body[data-design="2"] input[type=submit]{min-height:52px;padding:.75rem 1.15rem;font-size:1.05rem;font-weight:600;border-radius:12px;line-height:1.2}
  body button.secondary,body[data-design="2"] button.secondary,body a.button.secondary,body[data-design="2"] a.button.secondary{background:var(--card,#fff);color:var(--accent);border:2px solid var(--accent)}
  body .actions,body[data-design="2"] .actions,body p.actions,body[data-design="2"] p.actions{display:flex;flex-direction:column;align-items:stretch;gap:.65rem;margin:1.25rem 0}
  body .actions>button,body[data-design="2"] .actions>button,body .actions>a.button,body[data-design="2"] .actions>a.button,body .actions>form>button,body[data-design="2"] .actions>form>button,body p.actions>button,body[data-design="2"] p.actions>button,body p.actions>a.button,body[data-design="2"] p.actions>a.button{width:100%;text-align:center;justify-content:center}
  body .actions>.muted,body[data-design="2"] .actions>.muted,body p.actions>.muted,body[data-design="2"] p.actions>.muted{text-align:left}
  body a.backlink,body[data-design="2"] a.backlink{min-height:48px;border-radius:12px}
  body header,body[data-design="2"] header{padding:.6rem .75rem .75rem}
  body .mainnav,body[data-design="2"] .mainnav{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  body .mainnav-link,body[data-design="2"] .mainnav-link{min-height:3.5rem;padding:.55rem .8rem;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);font-size:1.02rem;gap:.6rem}
  body .mainnav-mark,body[data-design="2"] .mainnav-mark{font-size:1.25rem}
  body .mainnav-link.current,body[data-design="2"] .mainnav-link.current{background:var(--header-current);border:2px solid var(--header-fg);box-shadow:none}
  body .accountbar,body[data-design="2"] .accountbar{font-size:.95rem;gap:.1rem .9rem;margin-top:.35rem}
  body .accountbar form,body[data-design="2"] .accountbar form{margin-left:auto}
  body .accountbar button,body[data-design="2"] .accountbar button,body .accountbar a.account-button,body[data-design="2"] .accountbar a.account-button{min-height:44px;padding:.35rem 1rem;font-size:1rem;border-radius:999px}
  body .dash-panel,body[data-design="2"] .dash-panel,body .panel,body[data-design="2"] .panel,body .briefing-card,body[data-design="2"] .briefing-card{border-radius:16px;padding:1rem 1rem}
  body .dash-row,body[data-design="2"] .dash-row{min-height:3.75rem;padding:.8rem .5rem}
  body .dash-row .card-title,body[data-design="2"] .dash-row .card-title{font-size:1.05rem}
  body .dash-row .card-help,body[data-design="2"] .dash-row .card-help{font-size:.95rem}
  body .tapcard>a,body[data-design="2"] .tapcard>a,body .cards>a,body[data-design="2"] .cards>a,body .cards .card,body[data-design="2"] .cards .card{min-height:5rem;border-radius:16px}
  body .home-top form.global-search,body[data-design="2"] .home-top form.global-search,body .global-search,body[data-design="2"] .global-search{flex-wrap:wrap}
  body .home-top form.global-search>div,body[data-design="2"] .home-top form.global-search>div,body .global-search>div,body[data-design="2"] .global-search>div{flex:1 1 100%}
  body .home-top form.global-search button,body[data-design="2"] .home-top form.global-search button,body .global-search button,body[data-design="2"] .global-search button{width:100%}
  body input[type=text],body[data-design="2"] input[type=text],body input[type=search],body[data-design="2"] input[type=search],body input[type=email],body[data-design="2"] input[type=email],body input[type=number],body[data-design="2"] input[type=number],body input[type=tel],body[data-design="2"] input[type=tel],body input[type=password],body[data-design="2"] input[type=password],body input[type=date],body[data-design="2"] input[type=date],body input[type=time],body[data-design="2"] input[type=time],body input:not([type]),body[data-design="2"] input:not([type]),body select,body[data-design="2"] select,body textarea,body[data-design="2"] textarea{min-height:52px;font-size:17px;padding:.7rem .8rem;border-radius:10px;width:100%;max-width:100%}
  body input[type=date],body[data-design="2"] input[type=date],body input[type=time],body[data-design="2"] input[type=time],body #handedOverDate,body[data-design="2"] #handedOverDate,body #handedOverTime,body[data-design="2"] #handedOverTime{min-height:52px;font-size:17px}
  body .pop-trigger,body[data-design="2"] .pop-trigger,body .nowbutton,body[data-design="2"] .nowbutton{min-width:52px;min-height:52px;font-size:1.1rem;border-radius:10px}
  body .buttonrow,body[data-design="2"] .buttonrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.55rem}
  body label.pick,body[data-design="2"] label.pick{display:flex}
  body label.pick span,body[data-design="2"] label.pick span{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:.7rem 1rem;font-size:1.02rem;text-align:center;border-radius:12px;line-height:1.25}
  body input[type=checkbox],body[data-design="2"] input[type=checkbox],body input[type=radio],body[data-design="2"] input[type=radio]{width:1.6rem;height:1.6rem}
  body label:has(>input[type=checkbox]):not(.pick):not(.tick),body[data-design="2"] label:has(>input[type=checkbox]):not(.pick):not(.tick),body label:has(>input[type=radio]):not(.pick):not(.tick),body[data-design="2"] label:has(>input[type=radio]):not(.pick):not(.tick),body .checkline,body[data-design="2"] .checkline{min-height:52px;gap:.8rem}
  body input[type=file]::file-selector-button,body[data-design="2"] input[type=file]::file-selector-button{min-height:48px;border-radius:10px}
  body [data-add-key-row],body[data-design="2"] [data-add-key-row],body [data-add-set-photo],body[data-design="2"] [data-add-set-photo],body [data-add-key],body[data-design="2"] [data-add-key]{width:100%;min-height:56px}
  body [data-key-row],body[data-design="2"] [data-key-row]{border:1px solid var(--line);border-radius:16px;padding:1rem;margin:0 0 1rem;background:var(--card,#fff)}
  body nav.steps,body[data-design="2"] nav.steps,body ol.stepnav-list,body[data-design="2"] ol.stepnav-list,body .stepnav-list,body[data-design="2"] .stepnav-list{gap:.5rem}
  body nav.steps>.step-jump,body[data-design="2"] nav.steps>.step-jump,body .stepnav-list a,body[data-design="2"] .stepnav-list a{min-height:3.4rem;border-radius:12px}
  body nav.steps a.step-jump.current,body[data-design="2"] nav.steps a.step-jump.current,body .stepnav-list a[aria-current],body[data-design="2"] .stepnav-list a[aria-current]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);outline:3px solid var(--accent);outline-offset:2px}
  body section.stage,body[data-design="2"] section.stage{padding:1rem .9rem;border-radius:16px}
  body .savebar.stagebar,body[data-design="2"] .savebar.stagebar{display:grid;grid-template-columns:1fr 1.6fr;gap:.55rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(16,24,40,.12)}
  body .savebar.stagebar button,body[data-design="2"] .savebar.stagebar button{min-height:54px;width:100%;margin:0}
  body .savebar.stagebar [data-save-continue],body[data-design="2"] .savebar.stagebar [data-save-continue],body .savebar.stagebar [value=submit],body[data-design="2"] .savebar.stagebar [value=submit]{grid-column:2;order:0}
  body .savebar.stagebar .autosave,body[data-design="2"] .savebar.stagebar .autosave,body .savebar.stagebar .savestate,body[data-design="2"] .savebar.stagebar .savestate{grid-column:1 / -1;margin:0;font-size:.9rem}
  body .briefing-nav ul,body[data-design="2"] .briefing-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;overflow:visible;flex-wrap:wrap;padding:0;margin:0}
  body .briefing-nav a,body[data-design="2"] .briefing-nav a{display:flex;align-items:center;min-height:48px;padding:.45rem .8rem;font-size:1rem;white-space:normal;border-radius:12px;line-height:1.2}
  body .briefing-nav,body[data-design="2"] .briefing-nav{position:static}
  body main div>label[for]:not(.pick),body[data-design="2"] main div>label[for]:not(.pick){display:block;margin-top:1rem;margin-bottom:.35rem}
  body .briefing-card dt,body[data-design="2"] .briefing-card dt,body main dt,body[data-design="2"] main dt{font-size:1rem}
  body main p a:not([class]),body[data-design="2"] main p a:not([class]),body main li a:not([class]),body[data-design="2"] main li a:not([class]),body main dd a:not([class]),body[data-design="2"] main dd a:not([class]){display:inline-flex;align-items:center;min-height:44px;padding:.2rem 0}
}

/* A76 §1 and §9 — THE REPORT'S BRIEFING AS FIVE CARDS, AND THE KEY-POUCH NUMBER. Desktop and phone. */
details.briefing-cards>summary{min-height:48px;display:flex;align-items:center;font-size:1.05rem;font-weight:600;cursor:pointer}
.briefing-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;margin:.6rem 0 .8rem}
details.briefing-cards .briefing-tabs a.briefing-tab{display:flex;align-items:center;justify-content:center;text-align:center;min-height:3.25rem;padding:.6rem .9rem;
  font-size:1.02rem;font-weight:600;border-radius:12px;border:2px solid var(--accent);background:var(--card,#fff);color:var(--accent);text-decoration:none;line-height:1.2}
details.briefing-cards .briefing-tabs a.briefing-tab.is-current,details.briefing-cards .briefing-tabs a.briefing-tab[aria-expanded="true"]{background:var(--accent);color:var(--accent-fg)}
.briefing-view{border:2px solid var(--accent);border-radius:14px;padding:1rem 1.1rem;margin:0 0 1rem;background:var(--card,#fff)}
.briefing-view .briefing-card{border:0;box-shadow:none;padding:0;margin:0}
.briefing-view dl{display:grid;grid-template-columns:minmax(8rem,34%) 1fr;gap:.4rem .9rem;margin:0}
.briefing-view dd{margin:0}
.pouch-number-box{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;border:3px solid var(--accent);border-radius:14px;
  padding:.9rem 1.2rem;margin:.5rem 0 1rem;background:var(--card,#fff)}
.pouch-number-item{display:flex;flex-direction:column;gap:.15rem}
.pouch-number-label{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.pouch-number-value{font-size:2.1rem;line-height:1.1;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pouch-number-none{font-size:1.05rem}
@media (max-width:40rem){
  .briefing-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  details.briefing-cards .briefing-tabs a.briefing-tab{min-height:3.5rem}
  .briefing-view dl{grid-template-columns:1fr}
  .briefing-view dd{margin-bottom:.5rem}
  .pouch-number-value{font-size:1.9rem}
}