/* Trinetra. Palette lifted from the running app's own theme constants:
   BLACKBLUE #0A2463 as primary, DEEPBLUE and DARKBLUE beside it, AMBER
   #F59E0B as secondary, LIGHT_SAFFRON #FFEAB9 as its warning wash, on
   Material greys.
   Note this is the interface palette. Generated reports keep DIPL's document
   house style (navy #002060, gold #F5A623), which lives in settings. */

/* The hidden attribute has to win.

   Author styles beat the browser's own [hidden] { display: none } whatever
   their specificity, so any component that sets a display of its own is
   visible even when the markup and the script both say it is hidden. The save
   bar on the fill-in screen did exactly that: it set display:flex, sat on
   every report claiming unsaved changes it did not have, and "Save now" had
   nothing to save. */
[hidden] { display: none !important; }

:root {
  --navy: #0a2463;        /* BLACKBLUE, the primary */
  --navy-deep: #061a47;   /* pressed and hover states */
  --navy-mid: #1e3a8a;    /* DEEPBLUE */
  --navy-soft: #1e40af;   /* DARKBLUE, links */

  --gold: #f59e0b;        /* AMBER, the secondary */
  --gold-deep: #8a5a06;
  --gold-wash: #ffeab9;   /* LIGHT_SAFFRON */

  --ground: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #eeeeee;
  --ink: #212121;
  --ink-soft: #424242;
  --muted: #757575;
  --rule: #e0e0e0;
  --rule-soft: #eeeeee;

  --ok: #3a8b33;
  --ok-wash: #edf7ec;
  --crit: #c62828;
  --crit-wash: #fdecea;

  /* Sampled from the old sign-in screen. The old screen's button was deep
     purple, which sat oddly beside a blue application; the action colour here
     is DARKBLUE from the same theme instead. */
  --brand-a: #00008b;     /* "Trin" */
  --brand-b: #9e9e9e;     /* "etra" */
  --brand-sub: #1e3a8a;
  --label: #000080;
  --action: #1e40af;      /* DARKBLUE */
  --action-deep: #0a2463; /* BLACKBLUE, for hover and pressed */

  --serif: Georgia, "Times New Roman", serif;
  --sans: Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --radius: 4px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.62 var(--sans);
}

a { color: var(--navy-soft); }

/* -- masthead ------------------------------------------------------------- */

.masthead {
  background: var(--navy);
  color: #fff;
}

.bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

/* The wordmark is blue and red on white. Rather than knocking it out to a flat
   white silhouette on the navy bar, it sits on a small white chip and keeps its
   own colours. */
.mark {
  height: 18px;
  width: auto;
  display: block;
  flex: none;
}

.wordmark .mark {
  background: #fff;
  padding: 4px 7px;
  border-radius: 3px;
  height: 26px;
}

.nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
  flex-wrap: wrap;
}

.nav a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--radius);
  font-size: 1rem;
}

.nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.nav a.on {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
}

.who {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .78);
}

.who .name { color: #fff; font-weight: 600; }
.who .roles { font-size: .8rem; text-transform: capitalize; }
.who form { margin: 0; }

.linkish {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.linkish:hover { color: #fff; }

/* -- page ----------------------------------------------------------------- */

.shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 20px 80px;
}

.page-title {
  font-family: var(--serif);
  font-size: 2.05rem;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 6px;
}

.page-sub {
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 62ch;
}

/* -- centred forms -------------------------------------------------------- */

.centre {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 30px 32px 34px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 10px 30px -18px rgba(15, 22, 38, .3);
}

.panel-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.panel-sub {
  color: var(--muted);
  font-size: .93rem;
  margin: 0 0 22px;
}

label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

/* Every text-like input, by exclusion rather than by listing types. Listing
   them meant number and date inputs got no styling and no bottom margin, and
   the hint below then overlapped them.

   The exclusions sit inside :where() so this counts as the plain element rule
   it reads as. Written as a bare chain of :not()s it scored higher than any
   class, and quietly beat every component that tried to style its own input:
   the sign-in fields lost the padding that makes room for their icon, so the
   icon printed over the text. */
input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="hidden"])) {
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 16px;
}

/* A quantity does not need a full-width box. */
input[type="number"] { max-width: 130px; }
input[type="date"] { max-width: 200px; }

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.hint {
  font-size: .82rem;
  color: var(--muted);
  /* Pulls up into the input's own bottom margin, never past it. */
  margin: -11px 0 16px;
}

.primary {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}

.primary:hover { background: var(--navy-deep); }

.primary.inline {
  display: inline-block;
  width: auto;
  text-decoration: none;
}

.fineprint {
  font-size: .82rem;
  color: var(--muted);
  margin: 18px 0 0;
  text-align: center;
}

/* -- messages ------------------------------------------------------------- */

.errors {
  background: var(--crit-wash);
  border-left: 3px solid var(--crit);
  padding: 11px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 18px;
}

.errors p {
  margin: 0 0 4px;
  font-size: .9rem;
  color: var(--crit);
}

.errors p:last-child { margin-bottom: 0; }

.flash {
  padding: 11px 15px;
  border-radius: var(--radius);
  margin: 0 0 22px;
  font-size: .93rem;
  border-left: 3px solid var(--muted);
  background: var(--surface-2);
}

.flash.success { background: var(--ok-wash); border-left-color: var(--ok); color: var(--ok); }
.flash.error   { background: var(--crit-wash); border-left-color: var(--crit); color: var(--crit); }
.flash.info    { background: var(--gold-wash); border-left-color: var(--gold); color: var(--gold-deep); }

/* Something was done, and something about it needs attention: the issued
   report that could not be given long-term validation is the case this
   exists for. Gold like info, ruled heavier, because it is not a remark. */
.flash.warning { background: var(--gold-wash); border-left: 4px solid var(--gold-deep); color: var(--gold-deep); }

/* -- tiles ---------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 30px;
}

.tile {
  background: var(--surface);
  padding: 16px 18px 18px;
  display: grid;
  gap: 2px;
}

.tile-n {
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.tile-k {
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* -- placeholder ---------------------------------------------------------- */

.soon {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--surface);
  max-width: 62ch;
}

.soon h2 {
  font-family: var(--sans);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0 0 8px;
}

.soon p { margin: 0 0 8px; color: var(--ink-soft); }
.soon ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.soon li { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* -- page head with an action -------------------------------------------- */

.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.head .page-sub { margin-bottom: 18px; }

.crumb { font-size: .85rem; margin: 0 0 6px; }
.crumb a { color: var(--muted); }

/* -- filters -------------------------------------------------------------- */

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.filters input[type="search"],
.filters select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.filters input[type="search"] { min-width: 240px; }

.filters button {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.filters button:hover { background: var(--rule); }

.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}

/* -- tables --------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
}

thead th {
  text-align: left;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--surface-2);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfe; }
tbody tr.off { color: var(--muted); }
tbody tr.off a { color: var(--muted); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .88em; }

td .sub {
  display: block;
  font-size: .82rem;
  color: var(--muted);
}

.actions {
  white-space: nowrap;
  text-align: right;
}

.actions form { display: inline; margin-left: 10px; }

.linky {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .88rem;
  color: var(--navy-soft);
  text-decoration: underline;
  cursor: pointer;
}

.linky:hover { color: var(--navy); }

.chip {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--muted);
  vertical-align: 1px;
}

.chip.warn { background: var(--crit-wash); color: var(--crit); }

.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}

/* -- wide forms ----------------------------------------------------------- */

.form { max-width: 780px; }

fieldset {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px 6px;
  margin: 0 0 18px;
}

legend {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
  padding: 0 6px;
}

.row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.row > * { flex: 1 1 160px; min-width: 0; }
.row > .col-2 { flex: 2 1 300px; }

.errors.wide { max-width: 780px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -- role picker ---------------------------------------------------------- */

.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.role {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 11px 13px;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}

.role:has(input:checked) {
  border-color: var(--navy);
  background: #f7f9fd;
}

.role input { margin-top: 3px; flex: none; }
.role strong { display: block; font-size: .93rem; color: var(--ink); }
.role .sub { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }

.client-pick { max-width: 380px; }
.client-pick select {
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 6px;
}

/* -- admin sub-navigation ------------------------------------------------- */

.subnav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 26px;
  flex-wrap: wrap;
}

.subnav a {
  padding: 11px 16px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .98rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.subnav a:hover { color: var(--navy); }

.subnav a.on {
  color: var(--navy);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

/* -- textareas and selects ------------------------------------------------ */

textarea,
select {
  width: 100%;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 16px;
}

textarea { resize: vertical; line-height: 1.5; }
input[type="file"] { font: inherit; margin-bottom: 8px; }

.head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.version {
  font-size: .6em;
  color: var(--muted);
  vertical-align: middle;
  font-weight: 400;
}

.chip.ok    { background: var(--ok-wash); color: var(--ok); }
.chip.draft { background: var(--gold-wash); color: var(--gold-deep); }

.note {
  border-left: 3px solid var(--rule);
  padding: 2px 0 2px 14px;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 0 24px;
}

/* -- standing prose ------------------------------------------------------- */

/* What prose_html() draws: sub-headings and bullets, and nothing else. */
.prose-head {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  margin: 16px 0 6px;
}

.prose-list { margin: 0 0 12px; padding-left: 20px; }
.prose-list li { margin: 0 0 5px; }

/* -- clause listing ------------------------------------------------------- */

.clause-group { margin: 0 0 26px; }

.clause-head {
  font-family: var(--sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.clause-head .count {
  font-size: .9em;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--rule);
}

table.clauses td { vertical-align: top; }
table.clauses td.si { width: 1%; white-space: nowrap; color: var(--navy); font-weight: 600; }
table.clauses tr:hover { background: transparent; }

/* -- single-control adder ------------------------------------------------- */

.adder {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 20px;
  margin: 0 0 26px;
  max-width: 780px;
}

.adder summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: .9rem;
  color: var(--navy-soft);
}

.adder[open] summary { border-bottom: 1px solid var(--surface-2); margin-bottom: 16px; }
.adder .form { padding-bottom: 6px; }
.adder fieldset { border: 0; padding: 0; margin: 0; }

/* -- publish / delete row ------------------------------------------------- */

.danger-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 30px;
}

.danger-row form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; }
.inline-hint { margin: 0; }
.linky.danger { color: var(--crit); }

.inline-form label { margin: 0; white-space: nowrap; }
.inline-form input { width: 120px; margin: 0; }

/* -- import sample -------------------------------------------------------- */

table.sample {
  font-size: .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin: 6px 0 14px;
}

table.sample caption {
  caption-side: top;
  text-align: left;
  font-size: .82rem;
  color: var(--muted);
  padding: 0 0 7px;
}

table.sample td { color: var(--ink-soft); }

/* -- import review grid --------------------------------------------------- */

.review-form { margin-top: 4px; }

table.review { font-size: .88rem; }
table.review td { padding: 6px 8px; vertical-align: top; }
table.review th { padding: 9px 8px; }
table.review tr:hover { background: transparent; }

table.review input,
table.review textarea {
  width: 100%;
  margin: 0;
  padding: 5px 7px;
  font-size: .88rem;
  border-color: var(--surface-2);
}

table.review input:focus,
table.review textarea:focus { border-color: var(--rule); }

table.review .tick { width: 1%; padding-top: 12px; text-align: center; }
table.review .lineno { width: 1%; color: var(--muted); padding-top: 12px; }
table.review .si-input { width: 70px; }

table.review tr.bad { background: var(--crit-wash); }
table.review tr.bad input,
table.review tr.bad textarea { border-color: #e8b4b0; background: var(--surface); }

.row-error {
  margin: 4px 0 0;
  font-size: .8rem;
  color: var(--crit);
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* -- sign in -------------------------------------------------------------- */

/* White, centred, one column, as on the screen this replaces. */

.signin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    linear-gradient(rgba(10, 36, 99, .72), rgba(6, 26, 71, .88)),
    var(--navy) url("/assets/img/login-panel.png") center / cover no-repeat;
}

/* A white card on the blue field, which is what the screen actually is; the
   screenshot of it was cropped to the card. */
.signin-card {
  width: 100%;
  max-width: 560px;
  text-align: center;
  background: var(--surface);
  border-radius: 10px;
  padding: 46px 56px 40px;
  box-shadow: 0 26px 70px -22px rgba(0, 0, 0, .6);
}

@media (max-width: 560px) {
  .signin-card { padding: 34px 24px 30px; }
}

.signin-logo {
  width: 140px;
  height: auto;
  display: block;
  margin: 0 auto 34px;
}

.brand {
  font-family: var(--sans);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

.brand-a { color: var(--brand-a); }
.brand-b { color: var(--brand-b); }

.brand-sub {
  color: var(--brand-sub);
  font-size: .98rem;
  margin: 0 0 30px;
}

.signin-card label {
  text-align: left;
  color: var(--label);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 7px;
}

/* An input with a leading icon, and on the password an eye at the end. */
.field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.field input {
  width: 100%;
  margin: 0;
  padding: 15px 14px 15px 46px;
  font-size: 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
}

/* The eye sits on top of the input, so the text stops before it. */
.field:has(.field-reveal) input { padding-right: 46px; }

.field input::placeholder { color: #9e9e9e; }

.field input:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: -1px;
  border-color: var(--action);
}

.field-icon {
  position: absolute;
  left: 15px;
  width: 19px;
  height: 19px;
  color: #9e9e9e;
  pointer-events: none;
}

.field-reveal {
  position: absolute;
  right: 8px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: #9e9e9e;
  line-height: 0;
  border-radius: 4px;
}

.field-reveal svg { width: 21px; height: 21px; }
.field-reveal:hover { color: var(--ink-soft); }
.field-reveal[aria-pressed="true"] { color: var(--action); }

.signin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 24px;
}

.remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-weight: 400;
  font-size: .98rem;
  color: var(--navy);
  cursor: pointer;
}

.remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--action); }

.signin-link {
  color: var(--action);
  font-size: .95rem;
  text-decoration: none;
}

.signin-link:hover { text-decoration: underline; }

.signin-button {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 15px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--action);
  color: #fff;
  cursor: pointer;
}

.signin-button:hover { background: var(--action-deep); }

.signin-card .errors { text-align: left; margin-bottom: 22px; }

.signin-foot {
  margin: 26px 0 0;
  font-size: .92rem;
  color: var(--muted);
}

.wordmark-lock {
  display: flex;
  align-items: center;
  gap: 11px;
}

.wordmark-lock .mark { height: 30px; }

.wordmark-lock .divider {
  width: 1px;
  height: 26px;
  background: var(--rule);
}

.wordmark-lock .product {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--navy);
  letter-spacing: .01em;
}

body.bare { background: var(--surface); }

.bare-flashes {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 16px 24px 0;
  z-index: 2;
}

.bare-flashes .flash { margin: 0 auto; max-width: 640px; }

/* -- invitation and reset link -------------------------------------------- */

.link-box {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 6px;
}

.link-box label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

.link-box input {
  flex: 1;
  margin: 0;
  padding: 11px 12px;
  font-size: .9rem;
  background: var(--surface-2);
}

.link-box button { flex: none; }

.warn-note {
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  padding: 12px 15px;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 760px;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* Fields without a leading icon still need the padding reset. */
.signin-card .field > input:only-child { padding-left: 14px; }
.signin-card .hint { text-align: left; margin: -14px 0 18px; }

.check.spaced { display: flex; margin: 0 0 10px; }
.hint.spaced { margin: -4px 0 14px; }
label.spaced { margin-top: 14px; }
.radios { display: grid; gap: 9px; margin-bottom: 6px; }
.radios .role { align-items: flex-start; }
fieldset .row .hint { margin: -11px 0 12px; }

/* -- blocks --------------------------------------------------------------- */

.block { margin: 0 0 34px; }

.block-head {
  font-family: var(--sans);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.block-head .count {
  font-size: .95em;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--rule);
}

/* -- progress ------------------------------------------------------------- */

.meter {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 26px;
}

.meter-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 11px;
}

.meter-bar span {
  display: block;
  height: 100%;
  background: var(--navy);
  transition: width .25s ease;
}

.meter-text { margin: 0; font-size: .93rem; color: var(--ink-soft); max-width: none; }

.tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 12px;
  color: var(--muted);
  font-size: .89rem;
}

.tally .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tally .dot.ok  { background: var(--ok); }
.tally .dot.bad { background: var(--crit); }
.tally .dot.na  { background: var(--muted); }
.tally .dot:not(:first-child) { margin-left: 10px; }

.mini-meter {
  display: inline-block;
  width: 90px;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}

.mini-meter span { display: block; height: 100%; background: var(--navy); }

/* -- a control card ------------------------------------------------------- */

.control {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.control.unanswered { border-left-color: var(--gold); }

.control-head {
  display: flex;
  gap: 14px;
  padding: 15px 18px 12px;
  align-items: flex-start;
}

.control-si {
  flex: none;
  min-width: 34px;
  font-weight: 700;
  color: var(--navy);
  padding-top: 1px;
}

.control-clause { flex: 1; min-width: 0; }
.control-clause p { margin: 0; max-width: 90ch; }
.control-ref { font-size: .85rem; color: var(--muted); margin-top: 4px !important; }

/* What evidence satisfies the control, off the checklist DIPL sent the client.
   Folded away: it runs to several lines and the clause is what is being
   answered, but it is the answer to "what am I supposed to ask them for". */
.control-guidance { margin-top: 6px; font-size: .85rem; }
.control-guidance > summary { color: var(--muted); cursor: pointer; }
.control-guidance > summary:hover { color: var(--ink); }
.control-guidance > p {
  margin-top: 4px !important;
  padding: 8px 10px;
  border-left: 3px solid var(--gold, #F5A623);
  background: var(--tint, rgba(0, 32, 96, .04));
  white-space: pre-line;
}

.control-state {
  flex: none;
  font-size: .8rem;
  color: var(--muted);
  min-width: 54px;
  text-align: right;
  padding-top: 2px;
}

.control-state.saved  { color: var(--ok); }
.control-state.failed { color: var(--crit); }

.control-body {
  padding: 0 18px 16px;
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .control-body { grid-template-columns: 300px 1fr; }
}

.statuses { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; align-content: start; }
.statuses legend {
  padding: 0 0 6px;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
  font-size: .95rem;
  color: var(--ink);
}

.status input { width: 16px; height: 16px; margin: 0; flex: none; }
.status:has(input:checked) { border-width: 2px; padding: 7px 10px; font-weight: 600; }
.status-compliant:has(input:checked)      { border-color: var(--ok);   background: var(--ok-wash);   color: var(--ok); }
.status-non_compliant:has(input:checked)  { border-color: var(--crit); background: var(--crit-wash); color: var(--crit); }
.status-not_applicable:has(input:checked) { border-color: var(--muted); background: var(--surface-2); color: var(--ink-soft); }

.control-texts label { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.control-texts textarea { margin-bottom: 12px; font-size: .95rem; }
.control-texts textarea:last-child { margin-bottom: 0; }

/* -- history -------------------------------------------------------------- */

.trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.trail li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .92rem;
  color: var(--ink-soft);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-2);
}

.trail-when { color: var(--muted); font-size: .85rem; flex: none; }
.trail .sub { display: block; width: 100%; color: var(--muted); }

button[disabled] { opacity: .5; cursor: not-allowed; }

/* -- annexures ------------------------------------------------------------ */

.annexures {
  border-top: 1px dashed var(--rule);
  margin-top: 14px;
  padding-top: 12px;
}

.annex-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 7px;
}

.annex-none { font-size: .88rem; color: var(--muted); }

.annex-list { list-style: none; margin: 0 0 9px; padding: 0; display: grid; gap: 5px; }

.annex-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .89rem;
}

.annex-list a { text-decoration: none; display: flex; gap: 7px; align-items: baseline; }
.annex-list a:hover .annex-name { text-decoration: underline; }
.annex-list strong { color: var(--navy); white-space: nowrap; }
.annex-name { color: var(--ink-soft); }
.annex-size { color: var(--muted); font-size: .82rem; }
.annex-list form { margin: 0; }

.annex-add {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.annex-add input[type="file"] { width: auto; margin: 0; font-size: .85rem; }
.annex-add input[type="text"] { width: auto; flex: 1; min-width: 160px; margin: 0; padding: 6px 9px; font-size: .88rem; }

/* One exhibit, several points. The citation reads as a note on the row; the
   picker needs the whole width, so it breaks the flex row rather than
   squeezing a checklist into the gap after the file size. */
.annex-cited { color: var(--muted); font-size: .82rem; font-style: italic; }
.annex-cited a { display: inline; color: var(--muted); text-decoration: underline; }

/* Whose file it is. The auditor may remove a client's upload -- the client
   cannot withdraw one -- so the row has to say before it is removed. */
.annex-who { color: var(--muted); font-size: .82rem; }

/* An annexure with nothing on it. Gold rather than red: the file is present
   and correct, and a page that is blank on purpose is still someone's to
   send. It is a thing to look at, not a fault to fix. */
.annex-blank {
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: help;
}

/* No name of its own, so the row is showing the filename the camera or the
   scanner chose. Not a fault badge: an unnamed annexure is complete and
   correct, it simply reads badly as a heading in the document. */
.annex-name.unnamed { color: var(--muted); font-style: italic; }

/* The name box takes the width the way the point picker does, rather than
   being squeezed into the gap after the file size. */
.annex-rename { flex-basis: 100%; margin: 3px 0 0; }
.annex-rename > summary { font-size: .82rem; color: var(--navy); cursor: pointer; }
.annex-rename form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}
.annex-rename input[type="text"] {
  width: auto;
  flex: 1;
  min-width: 200px;
  margin: 0;
  padding: 6px 9px;
  font-size: .88rem;
}
.annex-rename .hint { flex-basis: 100%; margin: 0; }

.annex-applies { flex-basis: 100%; margin: 3px 0 0; }
.annex-applies > summary { font-size: .82rem; color: var(--navy); cursor: pointer; }
.annex-applies form { margin: 6px 0 0; }
.annex-applies .hint { margin: 0 0 6px; }

.annex-points {
  list-style: none;
  margin: 0 0 8px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 3px 14px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-soft, #fbfbfd);
}

.annex-points li { display: block; font-size: .85rem; }
.annex-points label { display: flex; gap: 6px; align-items: baseline; font-weight: 400; margin: 0; }
.annex-points input[type="checkbox"] { width: auto; margin: 0; }
.annex-points .mono { color: var(--navy); white-space: nowrap; }

/* -- the pages of one annexure -------------------------------------------- */

/* How many sheets this exhibit runs to. Deliberately quiet and not a badge:
   a three-page annexure is ordinary, and the letters beside it (001a, 001b)
   mean a different exhibit. This is the label that keeps the two apart. */
.annex-pagecount {
  color: var(--muted);
  font-size: .78rem;
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 0 7px;
  white-space: nowrap;
}

/* Listed only when there is more than one, so the ordinary single-sheet
   annexure keeps the row it has always had. Indented under its exhibit, with
   the ordered-list numbers left on: they are the page numbers. */
.annex-pages {
  flex-basis: 100%;
  margin: 4px 0 2px;
  padding: 0 0 0 26px;
  display: grid;
  gap: 3px;
}

.annex-pages li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--muted);
}

.annex-pages a { text-decoration: none; color: var(--navy); white-space: nowrap; }
.annex-pages a:hover { text-decoration: underline; }
.annex-pages .mono { font-size: .8rem; color: var(--muted); }
.annex-pages form { margin: 0; }
.annex-pages .linky { font-size: .8rem; }

.annex-pages-add { flex-basis: 100%; margin: 3px 0 0; }
.annex-pages-add > summary { font-size: .82rem; color: var(--navy); cursor: pointer; }
.annex-pages-add form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}
.annex-pages-add input[type="file"] { width: auto; margin: 0; font-size: .85rem; }
.annex-pages-add .hint { flex-basis: 100%; margin: 0; }

/* -- unsaved work --------------------------------------------------------- */

.savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 0;
  padding: 12px 18px;
  background: var(--gold-wash);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .35);
}

.savebar-text { font-size: .93rem; color: var(--gold-deep); font-weight: 600; }

.control-state.dirty  { color: var(--gold-deep); font-weight: 600; }
.control-state.saving { color: var(--muted); }

/* A report-text slot says whether it saved, the way a control does. The label
   and the word sit on one line above the box. */
.slot-field .control-state {
  float: right;
  min-width: 0;
  padding-top: 0;
}

/* The picker for a screenshot under a block of prose, laid out like the
   annexure one. Without this it fell to `.inline-form input { width: 120px }`,
   which is meant for a one-field row: the file input was clipped to its button
   and the caption beside it was a 120px stub whose placeholder never showed a
   readable word. The caption takes the width that is left, as it does on the
   annexure row. */
.slot-upload {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

.slot-upload input[type="file"] { width: auto; margin: 0; font-size: .85rem; }
.slot-upload input[type="text"] {
  width: auto;
  flex: 1;
  min-width: 160px;
  margin: 0;
  padding: 6px 9px;
  font-size: .88rem;
}

.control-title {
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 3px !important;
}

.render-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 13px 18px;
  margin: 0 0 26px;
}

.render-strip form { margin: 0; }
.render-links { display: flex; gap: 18px; flex-wrap: wrap; }
.render-links a { text-decoration: none; display: flex; gap: 8px; align-items: baseline; }
.render-links a:hover strong { text-decoration: underline; }

/* -- masters hub ---------------------------------------------------------- */

.master-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.master-card {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}

.master-card:hover { border-left-color: var(--gold); background: #fbfcfe; }
.master-card strong { color: var(--navy); font-size: 1rem; }
.master-card .sub { color: var(--muted); font-size: .86rem; line-height: 1.4; }

.master-count {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 4px;
}

.swatch {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 2px;
  vertical-align: -2px;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,.15);
}

input[type="color"] { width: 60px; padding: 2px; height: 38px; }

.logo-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.logo-fields { flex: 1; min-width: 240px; }

.logo-preview {
  width: 150px;
  max-height: 90px;
  object-fit: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px;
  background: #fff;
  flex: none;
}

.logo-preview.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  color: var(--muted);
  font-size: .85rem;
  border-style: dashed;
}

.staff-pick { max-width: 380px; margin-bottom: 4px; }

.role.disabled { opacity: .5; }

/* -- report setup: tables that are forms ---------------------------------- */

/* The setup screen edits its rows in place, so inputs sit inside table cells
   and need to stop looking like separate boxes stacked in a grid. */
.table-wrap table input[type="text"],
.table-wrap table input[type="date"],
.table-wrap table input[type="number"],
.table-wrap table input:not([type]) {
  width: 100%;
  min-width: 7rem;
  margin: 0;
  padding: 6px 8px;
  font-size: .92rem;
}

.table-wrap table input.narrow { min-width: 4rem; }
.table-wrap table input.strong { font-weight: 600; }

.table-wrap table input.sub-input {
  margin-top: 5px;
  font-size: .84rem;
  color: var(--muted);
}

label.check.tight {
  margin: 0;
  font-size: .86rem;
  white-space: nowrap;
}

fieldset[disabled] .form-actions { display: none; }

/* -- what needs attention -------------------------------------------------- */

ul.attention {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.attention li {
  padding: 11px 0;
  border-bottom: 1px solid var(--surface-2);
  font-size: .95rem;
}

ul.attention li:last-child { border-bottom: 0; }

/* -- what the client said -------------------------------------------------- */

.from-client {
  border-left: 3px solid var(--gold, #f5a623);
  padding: 2px 0 2px 14px;
  margin: 4px 0 18px;
}

.from-client .said { margin-bottom: 12px; }
.from-client .said:last-child { margin-bottom: 0; }

.said-body { margin: 0 0 3px; font-size: .95rem; }

.said-who {
  margin: 0 0 4px;
  font-size: .8rem;
  color: var(--muted);
}

.said-state {
  font-size: .78rem;
  color: var(--muted);
  margin-left: 10px;
}

/* -- diagrams on a block of prose ------------------------------------------ */

.master-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.master-images figure {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.master-images img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.master-images figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  font-size: .86rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--surface-2);
}

/* Giving a section to the rows of a flat checklist, above the review table. */
.fill-down {
  display: grid;
  grid-template-columns: auto minmax(140px, 220px) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.fill-down label { margin: 0; }
.fill-down input { width: 100%; margin: 0; }
.fill-down .hint { grid-column: 1 / -1; margin: 0; }

/* Offering the masters to a report whose prose arrived blank. */
.form.reseed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.form.reseed .hint { margin: 0 0 8px; }

/* The placeholders a text master may carry, listed on its own screen. */
.tokens { margin: 0 0 18px; }
.tokens > summary { cursor: pointer; font-weight: 600; color: var(--navy-soft); }
.tokens .hint { margin: 8px 0 10px; }

.token-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 6px;
}

.token-list dt { margin: 0; font-size: .86rem; color: var(--navy); }
.token-list dd { margin: 0; font-size: .88rem; color: var(--muted); }

@media (max-width: 640px) {
  .token-list { grid-template-columns: 1fr; gap: 2px; }
  .token-list dd { margin-bottom: 8px; }
}

/* The cover block is wider than tall, so its preview is not a logo square. */
.logo-preview.wide { width: 260px; height: auto; max-height: 120px; object-fit: contain; }