/* SustainableNI — design system, matched to the original React app:
   Montserrat, teal-green brand, light left sidebar, white surfaces. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/montserrat-700.woff2") format("woff2"); }

:root {
  --brand: #50b899;          /* teal-green brand primary */
  --brand-dark: #3f9e82;
  --paper: #ffffff;          /* content background */
  --mist: #f9f8fc;           /* subtle surface / even rows / hover */
  --card: #ffffff;
  --ink: #003f49;            /* deep teal — primary text + headings */
  --ink-soft: #667085;       /* secondary text */
  --ink-faint: #888da3;      /* muted */
  --pine: #50b899;           /* kept name → now brand green (primary buttons) */
  --pine-2: #3f9e82;
  --sage: #50b899;
  --clay: #ec5962;           /* danger */
  --sun: #fc9432;            /* draft / warning accent */
  --sky: #53b4b5;            /* info / invited */
  --line: #dcdbe5;           /* borders */
  --line-strong: #ced2e4;    /* dividers */
  --ok: #3f9e82;             /* success text */
  --ok-bg: #e7f5ef;
  --warn-bg: #fff3e5;
  --err-bg: #fdeaec;
  --sidebar: 240px;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(0, 63, 73, 0.04);
  --sans: "Montserrat", Helvetica, Arial, sans-serif;
  --serif: "Montserrat", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Visible keyboard focus for interactive elements (a11y). Mouse clicks keep the
   clean look via :focus-visible; only keyboard/AT focus draws the ring. */
a:focus-visible, .btn:focus-visible, .side-nav a:focus-visible, .q-nav-item:focus-visible,
summary:focus-visible, [data-segment-id]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}

/* Turbo's top loading bar, tinted to the brand so navigations show progress. */
.turbo-progress-bar { background: var(--brand); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); line-height: 1.25; margin: 0; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
h3 { font-size: 16px; font-weight: 600; }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--mist); padding: 1px 5px; border-radius: 4px; }

/* ---- App shell: fixed left sidebar + main ---- */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar);
  background: var(--mist); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px 16px 18px; z-index: 10; overflow-y: auto;
}
.sidebar-logo { display: flex; justify-content: center; padding: 4px 8px 10px; }
.sidebar-logo img { max-width: 150px; height: auto; }
.side-nav { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
.side-nav a {
  display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400;
  color: var(--ink); padding: 9px 10px; border-radius: 6px; transition: background-color 0.1s ease;
}
.side-nav a img { width: 17px; height: 17px; opacity: 0.85; flex: none; }
.side-nav a:hover { background: #ebe9f1; }
.side-nav a.active { background: #ebe9f1; font-weight: 500; }
.side-recent { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.side-recent .t { font-size: 13px; font-weight: 600; padding: 4px 8px 8px; color: var(--ink-soft); }
.side-recent a { display: block; font-size: 13px; color: var(--ink-soft); padding: 5px 8px; border-radius: 6px; }
.side-recent a:hover { background: #ebe9f1; color: var(--ink); }
.side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.side-user { font-size: 13px; font-weight: 600; padding: 0 4px 8px; }
.side-user span { color: var(--ink-faint); font-weight: 400; display: block; font-size: 11px; }
.side-signout { width: 100%; }
.side-copy { color: var(--ink-faint); font-size: 10px; padding-top: 12px; }

.main { margin-left: var(--sidebar); padding: 30px 34px 70px; max-width: 1280px; }
@media (max-width: 820px) {
  .sidebar { position: static; width: 100%; height: auto; flex-direction: column; }
  .main { margin-left: 0; padding: 22px; }
}

/* ---- Flash ---- */
.flash { padding: 11px 16px; border-radius: 8px; margin: 0 0 18px; font-size: 14px; font-weight: 500; }
.flash-notice { background: var(--ok-bg); color: var(--ok); border: 1px solid #bfe6d6; }
.flash-alert { background: var(--err-bg); color: #b82921; border: 1px solid #f4c6cb; }

/* ---- Cards & tables ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card + .card { margin-top: 18px; }
.muted { color: var(--ink-soft); }
.stack > * + * { margin-top: 14px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-soft); margin: 0; font-size: 14px; }

/* Sized to fit, 2026-10-12. Measured against real data at 1307px: every list
   ran wider than the card holding it — reports by 150px — so each page scrolled
   sideways at a different width and the last column was cut off. Three things
   were doing it: roomy cells (24px of padding per column), 14px body text, and
   one lead author stored as an email, which cannot wrap and so set its column
   to 345px on its own. With these, every list lands at the card's width. */
table.grid { width: 100%; border-collapse: collapse; background: var(--card); }
table.grid th { text-align: left; font-weight: 600; font-size: 13px; color: var(--ink); padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.grid td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; font-weight: 500; letter-spacing: -0.2px; }
/* Only the cells that can hold an address break inside a word, and they have to:
   one 41-character address set the lead-author column to 345px on its own.
   `anywhere` rather than `break-word` because only `anywhere` lowers the cell's
   min-content width, which is what the table's layout reads. Everywhere else it
   would break ordinary words — "SNI Administr/ator", "Superu/ser", "Activ/e". */
table.grid td.breakable { overflow-wrap: anywhere; }
table.grid th:first-child, table.grid td:first-child { padding-left: 14px; }
table.grid .nowrap { white-space: nowrap; }
/* Real-data columns are wide (long council names, emails). Below this width,
   nice-to-have columns step aside so the table fits without sideways clipping
   inside .grid-wrap; the wrap's overflow-x stays as the escape hatch. */
@media (max-width: 1440px) { table.grid .col-roomy { display: none; } }
table.grid tr:nth-of-type(even) td { background: var(--mist); }
table.grid tr:hover td { background: rgba(194, 198, 217, 0.18); }
table.grid tr:last-child td { border-bottom: 0; }
.grid-wrap { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; overflow-x: auto; }
/* When a table wrapper sits inside a card, let the wrapper be the visible border. */
.card:has(> .grid-wrap) { border: 0; padding: 0; background: transparent; }
/* Row-action buttons share a width so each table's action column lines up as a
   tidy grid rather than ragged widths. Right-aligned so they meet the edge.
   The <td> must STAY a table cell — the generic .actions class sets display:flex,
   which breaks row height/striping on a td — so lay the buttons out inline. */
table.grid td.actions { display: table-cell; text-align: right; }
table.grid td.actions form { display: inline-block; }
/* The floor keeps the action columns lining up; at 94px a two-button row no
   longer fitted the column it had left, so every row grew a second line. */
table.grid td.actions .btn { min-width: 62px; margin: 2px 0 2px 4px; }

/* An impact level as a swatch + label chip (the report legend's idiom) —
   readable for every level, unlike white text on the light yellow/grey fills. */
.impact-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mist); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px 4px 7px; font-size: 12px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.impact-chip .swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; }

/* ---- Buttons: white/outline default, brand-green primary ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 500; font-size: 15px; padding: 9px 24px; border-radius: 8px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer;
  line-height: 1.3; transition: filter 0.1s ease; text-align: center;
}
.btn:hover { filter: brightness(95%); }
.btn.secondary { background: #fff; color: var(--ink); border-color: #e5e4eb; }
.btn.secondary:hover { filter: brightness(97%); background: var(--mist); }
.btn.danger { background: var(--clay); border-color: var(--clay); color: #fff; }
.btn.small { padding: 5px 12px; font-size: 12px; border-radius: 4px; }
.btn[disabled], .btn:disabled { background: var(--ink-faint); border-color: var(--ink-faint); color: #f4f5f8; opacity: 0.5; cursor: not-allowed; }

/* ---- Forms ---- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; color: var(--ink); }
.field .hint { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
input[type=text], input[type=email], input[type=search], input[type=password], input[type=date], select, textarea {
  width: 100%; font: inherit; font-weight: 500; font-size: 14px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--brand); border-color: var(--brand); }
input::placeholder, textarea::placeholder { color: rgba(17, 27, 71, 0.35); }
input:disabled, select:disabled { color: #888da3; background: #f4f5f8; cursor: not-allowed; }
.errors { background: var(--err-bg); color: #b82921; border: 1px solid #f4c6cb; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }

/* ---- Pills / badges ---- */
/* inline-flex centres the text in the pill; as an inline-block on the inherited
   line-height it sat 0.8px high inside its own border. vertical-align: middle
   then centres the PILL against the words beside it — on `baseline` its bottom
   padding hangs 2px below the line.
   text-align matters once the text WRAPS: justify-content centres the text block
   as a whole, but the lines inside it still align to `start`, so "Exemption
   recorded" over two lines left-aligned its shorter second line. line-height 1
   was also too tight to read two lines of. */
.badge { display: inline-flex; align-items: center; justify-content: center;
  text-align: center; vertical-align: middle; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.3; padding: 4px 10px; border-radius: 999px;
  background: var(--mist); color: var(--ink-soft); border: 1px solid var(--line); }
.badge.draft { background: var(--warn-bg); color: #c26a12; border-color: #f6d9b4; }
.badge.completed, .badge.active { background: var(--ok-bg); color: var(--ok); border-color: #bfe6d6; }
.badge.invited { background: #e7f2f2; color: #2f7f80; border-color: #c2e0e0; }
.badge.revoked, .badge.removed { background: var(--err-bg); color: #b82921; border-color: #f4c6cb; }

/* ---- Centered auth layout ---- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--mist); }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; width: 100%; max-width: 420px; box-shadow: 0 8px 30px rgba(0, 63, 73, 0.08); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-logo img { max-width: 110px; }
.auth-card h1 { font-size: 22px; }
.auth-card .lede { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }

/* ---- Metric tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 26px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.tile .label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.tile .value { font-size: 32px; font-weight: 600; color: var(--ink); margin: 6px 0 2px; }
.tile .delta { font-size: 12.5px; font-weight: 600; }
.tile .delta.up { color: var(--ok); }
.tile .delta.down { color: var(--clay); }
.tile .delta.flat { color: var(--ink-faint); }
/* Assessment-type tiles: fixed by the organisation, so neither is choosable. The
   one in force still has to read as chosen, not merely as the less grey of two
   greys — so it keeps the brand border and tint, and only the other recedes. */
.tile.is-fixed { cursor: default; }
/* The radio still carries the state for assistive tech, but a greyed-out disabled
   dot is exactly what made the chosen tile read as unavailable — so hide it from
   sight only. The border, tint and badge carry the meaning visually. */
.tile.is-fixed input[type="radio"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.tile.is-off { opacity: .48; }
.tile.is-on { border-color: var(--brand); background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--brand); }
.tile-badge { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; vertical-align: middle; }
/* Heading for a group of controls that has no single input to label. */
.field-legend { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; color: var(--ink); }

/* ---- Avatars ---- */
.avatar { border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; }
.avatar-initials { display: inline-grid; place-items: center; background: var(--ok-bg); color: var(--brand-dark); font-weight: 600; letter-spacing: 0.02em; }
.name-cell { display: inline-flex; align-items: center; gap: 10px; }
.profile-photo { display: flex; align-items: center; gap: 14px; }
.profile-photo .avatar { width: 56px; height: 56px; font-size: 22px; }

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 18px; }
.toolbar .field { margin-bottom: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty { text-align: center; color: var(--ink-faint); padding: 40px 20px; }

/* ---- Pagination bar (page-size + prev/next) ---- */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.page-size { font-size: 13px; }
.page-size a { display: inline-block; padding: 2px 8px; border-radius: 6px; color: var(--ink-soft); }
.page-size a:hover { background: var(--mist); color: var(--ink); }
.page-size a.active { background: var(--brand); color: #fff; font-weight: 600; }
@media (max-width: 560px) { .pagination-bar { justify-content: center; } }

/* ---- Read-only detail pages (organisation account) ---- */
.org-logo { max-height: 96px; max-width: 200px; border-radius: 8px; margin-bottom: 16px; display: block; }
.detail-list { margin: 0; }
.detail-list > div {
  display: grid; grid-template-columns: 220px 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.detail-list > div:first-child { padding-top: 0; }
.detail-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list dt { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.detail-list dd { margin: 0; font-size: 14px; }
.detail-list dd a { color: var(--brand-dark); }
@media (max-width: 560px) { .detail-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Glossary terms — the original's rhythm: teal term, muted indented body ---- */
dl.terms { margin: 0; max-width: 76ch; }
dl.terms dt { font-weight: 600; font-size: 14px; color: var(--ink); }
dl.terms div + div dt { margin-top: 16px; }
dl.terms dd { margin: 3px 0 0 10px; color: var(--ink-soft); font-weight: 400; font-size: 14px; }
dl.terms dd p { margin: 0 0 6px; }
dl.terms dd p:last-child { margin-bottom: 0; }

/* ---- Questionnaire (step two) ---- */
.q-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
@media (max-width: 820px) { .q-layout { grid-template-columns: 1fr; } }
.q-sidebar { position: sticky; top: 20px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.progress-track { height: 8px; background: #e5e4eb; border-radius: 4px; overflow: hidden; margin: 10px 0 4px; }
.progress-fill { height: 100%; background: var(--brand); transition: width 0.25s ease; }
.q-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.q-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; color: var(--ink-soft); font-size: 14px; }
.q-nav-item:hover { background: #ebe9f1; }
.q-nav-item.active { background: var(--brand); color: #fff; }
.q-status { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; flex: none; }
.q-status.q-complete { background: var(--ok-bg); color: var(--ok); }
.q-status.q-in_progress { background: var(--warn-bg); color: var(--sun); }
.q-status.q-incomplete { background: #e5e4eb; color: var(--ink-faint); }
.q-nav-item.active .q-status { background: rgba(255,255,255,0.25); color: #fff; }
.q-question { margin-bottom: 16px; }
.q-title { font-weight: 600; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
.q-subtitle { color: var(--ink-soft); font-size: 14px; margin-bottom: 10px; }
.q-subtitle a, .q-tip a { color: var(--brand-dark); }
.q-tip { margin: 6px 0 12px; }
.q-tip summary { cursor: pointer; color: var(--brand-dark); font-weight: 600; font-size: 13px; }
.q-tip > div { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); background: var(--mist); padding: 10px 14px; border-radius: 8px; }
.q-tip ul { margin: 4px 0; padding-left: 18px; list-style: circle; }
.q-tip li { margin-bottom: 6px; }
.q-answers { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.q-answer { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.q-answer:hover { border-color: var(--brand); }
.q-answer input { margin-top: 3px; flex: none; accent-color: var(--brand); }
.q-letter { font-weight: 600; color: var(--brand-dark); }

/* Two-column field grid for the new-assessment Per-Forma block (ASM-9). */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.word-count { font-size: 12px; color: var(--ink-faint); }
.word-count.over { color: var(--clay); font-weight: 600; }

/* ASM-11 reasoning field */
.q-reasoning { margin-top: 12px; }
.q-reasoning label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.q-reasoning textarea { min-height: 72px; }

/* ASM-12 questionnaire image gallery */
.q-images { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.q-images-title { font-size: 13px; font-weight: 600; }
.q-images-alert { color: #b82921; font-size: 12px; margin: 6px 0 0; }
.q-images-empty { font-size: 13px; margin: 6px 0 0; }
.q-images-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.q-image { width: 156px; }
.q-image-thumb img { width: 156px; height: 112px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.q-image-controls { display: flex; gap: 4px; margin-top: 5px; }
.icon-btn { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--card); border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1; color: var(--ink-soft); }
.icon-btn:hover { border-color: var(--brand); color: var(--ink); }
.icon-btn.danger:hover { border-color: var(--clay); color: var(--clay); }
.q-image-caption { width: 100%; margin-top: 5px; font-size: 12px; padding: 5px 7px; }
.q-image-caption-static { font-size: 12px; margin: 5px 0 0; color: var(--ink-soft); }
.q-image-add { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.q-image-add input[type=file] { font-size: 12px; }
.q-image-add .q-image-caption { width: auto; flex: 1; min-width: 140px; margin-top: 0; }
.q-status.q-summary { color: var(--brand-dark); }

/* ---- Report ---- */
.report-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.report-logo { max-height: 64px; max-width: 160px; border-radius: 8px; }
.ring-wrap { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }
.legend { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.legend div { display: inline-flex; align-items: center; background: var(--mist); border-radius: 9px; padding: 4px 12px; }
.legend .swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 10px; }

/* ---- Report document (RPT-10): mirrors the Ideal Report; shared with the PDF ---- */
:root { --doc-tint: #b3dccd; --doc-tint-soft: #d7eee6; }
.report-doc { max-width: 860px; margin: 0 auto; }
.doc-cover { position: relative; text-align: center; padding-bottom: 6px; }
.doc-logo { position: absolute; top: 0; right: 0; max-height: 66px; max-width: 170px; }
/* Gutters the width of the logo, so a long title cannot run under it. */
.doc-title { font-size: 26px; font-weight: 700; color: var(--brand-dark); margin: 6px 0 10px;
  text-align: center; padding: 0 182px; }
.doc-kind { font-weight: 700; color: var(--brand-dark); margin: 0 0 8px; }
.doc-context { color: var(--ink); margin: 0 auto 22px; max-width: 60ch; }
.doc-project { background: var(--doc-tint); border-radius: 22px; padding: 22px 26px; text-align: left; margin: 0 0 8px; }
.doc-project h2 { color: var(--ink); font-size: 20px; margin: 0 0 10px; }
.doc-project p { margin: 0 0 12px; color: var(--ink); }
.doc-project .doc-overview p:last-child { margin-bottom: 12px; }
.doc-performa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(0,63,73,0.18); }
.doc-performa > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 10px; font-size: 13.5px; align-items: baseline; }
.doc-performa dt { font-weight: 600; margin: 0; color: var(--ink); }
.doc-performa dd { margin: 0; color: var(--ink); }

.doc-section { margin: 26px 0 0; }
.doc-section-head { color: var(--brand-dark); font-size: 19px; font-weight: 700; text-transform: uppercase; margin: 0 0 12px; letter-spacing: 0.2px; }
.doc-section-num { margin-right: 4px; }

.doc-q { margin: 0 0 22px; break-inside: avoid; }
.doc-q-pill { background: var(--doc-tint); border-radius: 16px; padding: 12px 18px; font-weight: 600; color: var(--ink); }
.doc-q-pill b { font-weight: 700; }
.doc-q-prefix { font-weight: 700; }
.doc-answers { margin: 10px 0 0; padding: 0 4px; }
.doc-answer { display: inline; color: var(--ink); }
.doc-answer + .doc-answer::before { content: ", "; }
.doc-answer-letter { color: var(--brand-dark); font-weight: 700; }
.conditional-notice { background: #fff6e5; border: 1px solid var(--amber, #ffc558); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; margin: 0 0 14px; }
.q-reasoning.is-required label { font-weight: 600; }
.q-reasoning.is-required textarea { border-color: var(--brand-dark); }
/* Refs 18-20: the DoF screening step. The evidence panel is deliberately
   flat markup, never an input — ref 19: "Do not place the copied Compass text
   inside an editable box." */
/* Ref 35: Actions and follow-up. The recorded actions are a plain table; entry
   is a form underneath it, because an "impact identified" and an "action
   required" are sentences and a table cell is no place to type one. */
.follow-up-section { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
/* Four columns in roughly 780px, because that is what the questionnaire layout
   leaves and a sideways scrollbar is not an answer. No min-width: the table
   fits the pane it is given. */
table.grid.follow-up-list { table-layout: fixed; }
/* table.grid sets 14px and 12px of padding on every cell, and wins on element
   count — so these have to carry table.grid too or they are silently ignored.
   In a 566px pane that difference is a column's worth of room. */
table.grid.follow-up-list th, table.grid.follow-up-list td {
  vertical-align: top; font-size: 13px; padding: 10px 8px; overflow-wrap: break-word;
}
table.grid.follow-up-list th:first-child, table.grid.follow-up-list td:first-child { padding-left: 12px; }
.follow-up-list col.c-issue { width: 29%; }
.follow-up-list col.c-action { width: 28%; }
.follow-up-list col.c-owner { width: 16%; }
.follow-up-list col.c-status { width: 14%; }
.follow-up-list col.c-edit { width: 13%; }
/* The section the issue came from, and the date it is owned by: both belong to
   the cell above them rather than to a column of their own. */
.follow-up-list .row-label { display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.follow-up-list .row-sub { display: block; color: var(--ink-faint); font-weight: 400; }
/* table.grid gives every action button a 94px floor and a left margin, which is
   wider than this column and is what kept forcing a scrollbar. The selector has
   to out-specify `table.grid td.actions .btn`, hence table.grid.follow-up-list:
   the shorter `.follow-up-list td.actions .btn` loses on element count. */
table.grid.follow-up-list td.actions { padding: 10px 10px 10px 4px; text-align: left; }
table.grid.follow-up-list td.actions .btn {
  display: block; width: 100%; min-width: 0; margin: 0 0 4px;
  padding: 5px 2px; font-size: 11.5px; text-align: center;
}
table.grid.follow-up-list td.actions form { display: block; margin: 0; }
.follow-up-list tr.is-editing { background: var(--warn-bg); }
.follow-up-list tr.is-editing td:first-child { box-shadow: inset 3px 0 0 var(--brand-dark); }
.follow-up-form h3, .follow-up-suggestions h3 { margin: 0 0 12px; font-size: 15px; }
.follow-up-form .field { margin-bottom: 14px; }
.follow-up-form textarea { min-height: 76px; }
.suggestion-list { list-style: none; margin: 0; padding: 0; }
.suggestion-list li { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--line); }
.suggestion-list li:first-child { border-top: 0; }
.suggestion-section { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--ink-faint); letter-spacing: .02em; }
.suggestion-issue { font-size: 13px; }
.suggestion-add { flex: none; }
.dof-head { font-size: 17px; margin: 0 0 12px; color: var(--ink); }
.dof-evidence { background: var(--mist); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.dof-evidence h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: var(--brand-dark); }
.dof-evidence-item { border-top: 1px solid var(--line); padding: 10px 0 0; margin-top: 10px; }
.dof-evidence-item:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.dof-source { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin: 0 0 2px; text-transform: uppercase; }
.dof-question { font-weight: 600; margin: 0 0 4px; }
.dof-answers { margin: 0 0 4px; padding-left: 20px; }
.dof-reasoning { margin: 4px 0 0; font-size: 13px; }
.dof-label { font-weight: 600; color: var(--brand-dark); }
.dof-edit { font-size: 12px; }
.dof-fields .field { margin-bottom: 16px; }
.dof-fields .field.is-required label { font-weight: 700; }
.info-panel { background: var(--mist, #f4f7f6); border-radius: 12px; padding: 14px 18px; margin: 4px 0 18px; }
.info-panel h3 { margin: 0 0 6px; font-size: 15px; }
.info-panel p { margin: 0; font-size: 13px; line-height: 1.6; }
.doc-screening { margin: 22px 0 0; }
/* One grid for the list, not one per row — see reports/print.html.erb. */
.doc-screening-list { display: grid; grid-template-columns: max-content 16px minmax(0, 1fr);
  gap: 7px 12px; align-items: baseline; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.doc-check { display: contents; }
.doc-check-mark { font-weight: 700; text-align: center; }
.doc-check-yes .doc-check-mark { color: var(--brand-dark); }
.doc-check-no .doc-check-mark { color: #c2453a; }
.doc-check-none .doc-check-mark { color: var(--ink-faint); }
.doc-check-label { font-weight: 700; }
.doc-check-none .doc-check-value { color: var(--ink-faint); }
.doc-appendix-label { display: block; font-size: 13px; letter-spacing: 1px;
                      color: var(--ink-faint); margin-bottom: 4px; }
.doc-dof-intro { color: var(--ink-faint); margin: 0 0 20px; max-width: 70ch; }
.doc-dof-coverage { display: block; }
.doc-dof-result { color: var(--ink-faint); }
/* The rows are display: contents, so their own box is gone; the list sets the
   spacing and the size for all of them. */
.doc-dof, .doc-follow-up { margin: 22px 0 0; }
/* On screen there are no pages, so the appendix is set apart with space and a
   rule instead — it is reference material, not part of the report's argument.
   After the shared margin above, or the shorthand there wins and resets it. */
.doc-dof { margin-top: 56px; padding-top: 36px; border-top: 2px solid var(--line); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.doc-table th { background: var(--mist); font-weight: 600; }
.doc-dof-note { display: block; margin-top: 4px; color: var(--ink-faint); }
.doc-dof-confirmed { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }
.brand-colour-row { display: flex; align-items: center; gap: 10px; }
.brand-colour-hex { max-width: 160px; font-family: var(--mono); }
.brand-colour-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.doc-organisation { font-weight: 600; margin: 0 0 6px; padding: 0 182px; }
.doc-about { margin: 22px 0 0; }
.doc-declaration { margin: 22px 0 0; }
.doc-declaration dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 22px; margin: 8px 0 0; }
.doc-declaration div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 10px; font-size: 13px; align-items: baseline; }
.doc-declaration dt { font-weight: 600; margin: 0; }
.doc-declaration dd { margin: 0; }
.doc-na { margin: 8px 0 0; padding: 0 4px; color: var(--ink-faint); font-style: italic; }
.doc-legislation { margin: 22px 0 0; }
.doc-version { font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }

/* The Exemption Record on screen (2026-10-08). Once recorded it is shown as the
   finished document, from the same partials the PDF is built from, so these are
   the few classes the report does not already provide. */
.doc-intro { background: var(--doc-tint); border-radius: 22px; padding: 20px 24px;
             text-align: left; margin: 10px 0 0; }
.doc-record { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; margin: 0; }
.doc-record > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 12px;
                    font-size: 13.5px; align-items: baseline; }
.doc-record dt { font-weight: 600; margin: 0; color: var(--ink); }
.doc-record dd { margin: 0; }
.doc-record-label { font-weight: 700; margin: 16px 0 4px; }
/* The justification and the overview are typed into a textarea, so their line
   breaks are theirs to keep. */
.doc-prose { white-space: pre-wrap; margin: 0; }
.doc-closing { margin: 30px 0 0; font-style: italic; color: var(--ink-soft); }
.doc-status { font-weight: 700; }
@media (max-width: 720px) { .doc-record { grid-template-columns: 1fr; } }
.doc-reasoning { margin: 8px 0 0; padding: 0 4px; color: var(--ink); }
.doc-reasoning-label { color: var(--brand-dark); font-weight: 700; }

.doc-images { display: flex; gap: 12px; margin: 12px 4px 4px; }
.doc-images .doc-image { position: relative; flex: 1 1 0; height: 200px; }
.doc-images.count-1 { justify-content: center; }
.doc-images.count-1 .doc-image { flex: 0 0 62%; max-width: 62%; }
.doc-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.doc-image figcaption { position: absolute; left: 8px; top: 8px; background: rgba(15,32,36,0.82); color: #fff; font-weight: 600; font-size: 12px; line-height: 1.3; padding: 4px 9px; border-radius: 6px; max-width: calc(100% - 16px); }

.doc-summary { margin: 30px 0 0; }
.doc-summary p { color: var(--ink); margin: 0 0 12px; }
.doc-results { margin: 24px 0 0; }
.doc-results-grid { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.doc-wheel { width: 100%; max-width: 420px; }
/* The Results block beneath the wheel holds the Key at rest and one readout
   panel per section on hover (reports/document/_results). Every panel sits in
   the same grid cell, so the block is as tall and as wide as the roomiest of
   them from the moment the page loads, and the report below it never moves as
   the pointer crosses the wheel. visibility, not display, is what keeps the
   cell that size — and it keeps the hidden panels out of the accessibility
   tree, so a screen reader is not read twelve sections at once. */
.doc-results-side { text-align: left; width: 100%; max-width: 420px; display: grid; }
.doc-results-side > .doc-panel { grid-area: 1 / 1; visibility: hidden; }
.doc-results-side > .doc-panel.is-shown { visibility: visible; }

/* One section's readout: its result, the spread of the answers behind it, and a
   numbered square per question coloured by its own result. */
.readout { display: flex; flex-direction: column; gap: 9px; align-content: start; }
.readout-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.readout-jump { font-size: 12px; font-weight: 600; color: var(--brand-dark); }
.readout-meta { font-size: 12px; color: var(--ink-soft); }
.readout-flag { font-size: 12px; font-weight: 600; color: #b82921; }
.readout-bar { display: flex; gap: 2px; height: 9px; }
.readout-bar span:first-child { border-radius: 4px 0 0 4px; }
.readout-bar span:last-child { border-radius: 0 4px 4px 0; }
.readout-bar span:only-child { border-radius: 4px; }
.readout-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.readout-dot { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center;
               font-size: 11px; font-weight: 700; color: var(--ink); cursor: help; }
.readout-dot.none { background: repeating-linear-gradient(45deg, #f1f1f4, #f1f1f4 3px, #fff 3px, #fff 6px);
                    color: var(--ink-faint); border: 1px solid var(--line); }
.doc-general-result { margin-bottom: 16px; text-align: center; }
.doc-gr-label, .doc-key-label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.doc-key-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.doc-key-row .swatch { width: 15px; height: 15px; border-radius: 4px; flex: none; }
@media (max-width: 640px) { .doc-performa { grid-template-columns: 1fr; } }

/* Bespoke impact-by-section chart (ported SVG). */
.report-chart { max-width: 440px; width: 100%; height: auto; }
.report-chart [data-segment-id] { cursor: pointer; }
/* Spotlight the slice: the rest of the wheel steps back, so the readout
   beneath it is plainly about the one slice you are on. */
.report-chart .seg { transition: opacity 0.12s ease; }
.report-chart:hover .seg, .report-chart:focus-within .seg { opacity: 0.2; }
.report-chart .seg:hover, .report-chart .seg:focus { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .report-chart .seg { transition: none; } }
.report-chart .cls-1 { fill: #e57064; }
.report-chart .cls-2 { fill: #ffc558; }
.report-chart .cls-3 { fill: #e8e8e8; }
.report-chart .cls-4 { fill: #53b4b5; }
.report-chart .cls-5 { fill: #92c669; }
.report-chart .cls-6 { fill: #6b6e72; }
.report-chart .cls-10 { fill: #fff; }
.report-chart .cls-11 { opacity: 0.4; }
.report-chart .cls-13 { fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px; }
.tips-group { margin-top: 14px; }
.tips-group h3 { font-size: 16px; margin-bottom: 6px; }
.tip-item { border-left: 3px solid var(--clay); padding: 4px 0 4px 14px; margin: 10px 0; }
.tip-item summary { cursor: pointer; font-weight: 600; }
.tip-item .tip-body { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }
.tip-item .tip-body ul { list-style: circle; padding-left: 18px; }
dialog.segment { border: none; border-radius: 12px; max-width: 560px; width: 92%; padding: 0; box-shadow: 0 20px 60px rgba(0,63,73,0.25); }
dialog.segment::backdrop { background: rgba(0,63,73,0.4); }
dialog.segment .seg-head { padding: 16px 20px; color: #fff; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
dialog.segment .seg-head .t { font-size: 15px; }
dialog.segment .seg-head .x { cursor: pointer; background: none; border: 0; font: inherit; font-size: 22px; line-height: 1; color: inherit; padding: 0 2px; }
dialog.segment .seg-body { padding: 4px 20px 18px; max-height: 60vh; overflow-y: auto; background: var(--card); color: var(--ink); }
dialog.segment .seg-body .q { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
dialog.segment .seg-body .q:last-child { border-bottom: 0; }
dialog.segment .q .top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 5px; }
dialog.segment .q .num { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
dialog.segment .q .qt { font-weight: 600; font-size: 13.5px; line-height: 1.45; }
dialog.segment .q .qa { font-size: 13px; margin: 5px 0 0; }

/* ---- Activity log + record timelines ---- */
.badge.auth { background: #e7f2f2; color: #2f7f80; border-color: #c2e0e0; }
.badge.email { background: #eef3fb; color: #37629c; border-color: #cfdcf1; }
.badge.assessments, .badge.reports { background: var(--ok-bg); color: var(--ok); border-color: #bfe6d6; }
.badge.errors { background: var(--err-bg); color: #b82921; border-color: #f4c6cb; }

.audit-trace summary { cursor: pointer; color: var(--ink-soft); font-size: 12.5px; }
.audit-trace pre { background: var(--mist); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 12px; overflow-x: auto; }

/* Vertical timeline, shared by the user, assessment and report pages. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding-bottom: 18px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -32px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--card); }
.timeline li.problem::before { background: var(--clay); }
.timeline .when { display: block; font-size: 12px; color: var(--ink-faint); }
.timeline .what { font-weight: 600; }
.timeline .who, .timeline .detail { font-size: 13px; color: var(--ink-soft); }

/* The invitation chain on a user page: one card per stage, ticked or flagged. */
.chain { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chain li { flex: 1 1 160px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--mist); }
.chain .step { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.chain .state { font-weight: 600; font-size: 14px; display: block; }
.chain .at { font-size: 12px; color: var(--ink-soft); }
.chain li.done { background: var(--ok-bg); border-color: #bfe6d6; }
.chain li.done .state { color: var(--ok); }
.chain li.problem { background: var(--err-bg); border-color: #f4c6cb; }
.chain li.problem .state { color: #b82921; }

/* Glossary hover (2026-10-08). A term defined in db/glossary.yml carries its
   definition on hover and on keyboard focus, in the question text only — the
   first mention per question, so a page about biodiversity is not a field of
   dotted underlines. CSS-only: there is no state to manage, so no Stimulus. */
.glossary-term {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.glossary-term::after {
  content: attr(data-definition);
  position: absolute;
  left: 0; right: 0;
  margin-top: 6px;
  z-index: 40;
  display: none;
  max-width: 420px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.glossary-term:hover::after,
.glossary-term:focus::after,
.glossary-term:focus-visible::after { display: block; }
.glossary-term:focus { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
/* The tooltip is positioned against the question box rather than the word, so a
   term near the right edge cannot push it off the page. */
.q-title { position: relative; }