/* Pegasus ESU tools design system (from budget.pegasusesu.org.uk): Scouts colours and Cabin.
   Light by default, with a dark theme (data-theme="dark" on <html>, set by theme.js from the
   footer switch or the device setting). Every colour below is a role, so both themes are covered. */
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin"; src: url("fonts/Cabin-700.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

:root {
  --scout-purple: #7413dc;
  --scout-teal: #088486;
  --scout-red: #ed3f23;
  --white: #ffffff;
  --black-80: #333333;
  --black-60: #5f5f5f;
  --black-40: #8a8a8a;
  --black-20: #c4c4c4;
  --font-sans: "Cabin", system-ui, sans-serif;

  --ground: #f5f3f8;
  --panel: #ffffff;
  --text: var(--black-80);
  --muted: var(--black-60);
  --line: #e2dde9;
  --field-line: #8f8a99;        /* 3:1 against the panel, so a field's edge can be seen */
  --wash: #f5f3f8;
  --tint: #f0e7fc;
  --tint-ink: #4b0d8f;
  --accent: var(--scout-purple);
  --on-accent: #ffffff;
  --ink: #000000;
  --bar: var(--scout-purple);
  --danger: #c0301a;
  --radius: 8px;
  --panel-radius: 16px;
  --focus: 0 0 0 3px rgba(116, 19, 220, 0.3);
  --red-wash: #fde8e4;   --red-ink: #a81029;
  --green-wash: #e3f1ea; --green-ink: #1c5039;
  --teal-wash: #e0f3f3;  --teal-ink: #055e60;
  --amber-wash: #fff1de; --amber-ink: #8a4a00;
  --grey-wash: #ececf0;  --grey-ink: #4a4a55;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  color-scheme: light;
}
@media screen {
  :root[data-theme="dark"] {
    --scout-purple: #8a45e6;
    --scout-teal: #2fb3b5;
    --black-80: #ddd6e6;
    --black-60: #b3abbf;
    --black-40: #8d8499;
    --black-20: #4a4156;
    --ground: #15111b;
    --panel: #221c2b;
    --line: #3a3245;
    --field-line: #7d7489;
    --wash: #1b1623;
    --tint: #33244b;
    --tint-ink: #d9c2fb;
    --accent: #b98cf5;
    --on-accent: #15111b;
    --ink: #f4f0f9;
    --bar: #3d1278;
    --danger: #f07a66;
    --focus: 0 0 0 3px rgba(185, 140, 245, 0.45);
    --red-wash: #45201c;   --red-ink: #ff9c8c;
    --green-wash: #173428; --green-ink: #7fdcab;
    --teal-wash: #12302f;  --teal-ink: #74d6d6;
    --amber-wash: #3a2a14; --amber-ink: #f5b56b;
    --grey-wash: #2d2737;  --grey-ink: #c9c1d6;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background: var(--ground); color: var(--text);
  font: 400 15px/1.45 var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--panel); color: var(--accent); font-weight: 700; padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
a { color: var(--accent); }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.2; }
h1 { font-weight: 900; font-size: 28px; color: var(--accent); }
h2 { font-weight: 900; font-size: 19px; }
h3 { font-weight: 800; font-size: 15px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- App bar ---- */
.appbar { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; background: var(--bar); color: var(--white); padding: 10px max(24px, env(safe-area-inset-right, 0px)) 10px max(24px, env(safe-area-inset-left, 0px)); min-height: 60px; }
.appbar a { color: var(--white); text-decoration: none; }
.appbar-title { display: flex; flex-direction: column; min-width: 0; border-radius: 6px; }
.product { font-weight: 700; font-size: 12px; opacity: 0.9; }
.event-name { font-weight: 900; font-size: 18px; line-height: 1.15; }
.appnav { display: flex; gap: 4px; flex-wrap: wrap; }
.appnav a { font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 999px; }
.appnav a:hover { background: rgba(255, 255, 255, 0.14); }
.appnav a[aria-current="page"] { background: var(--white); color: #5a0fae; }
.appbar :focus-visible { outline-color: var(--white); }
.appbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.group-switch select { font: inherit; font-size: 13px; font-weight: 700; color: var(--white); background-color: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 4px 8px; max-width: 220px; cursor: pointer; }
.group-switch select option { color: #1f1f1f; background: #ffffff; }
.group-switch select:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.signin { max-width: 640px; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: var(--white); border: 0; font-family: inherit; cursor: pointer; }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8; flex: none; }
.sync.waiting { background: #fff1de; color: #6f3b00; }
.sync.waiting::before { background: #b86200; }
.sync.problem { background: #fde8e4; color: #8f0d22; }
.sync.problem::before { background: #c4122f; }

/* ---- Page ---- */
.workspace { width: 100%; max-width: 1120px; margin: 0 auto; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.page-head .lede { max-width: 62ch; margin-top: 6px; }
.lede { font-size: 16px; color: var(--text); }
.panel { background: var(--panel); border-radius: var(--panel-radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; margin-right: 8px; border-radius: 999px; background: var(--tint); color: var(--tint-ink); font-size: 13px; font-weight: 800; vertical-align: 2px; }
.hint { color: var(--muted); font-size: 14px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap;
  font: inherit; font-weight: 700; font-size: 14px; min-height: 40px; padding: 0 16px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--accent); background: var(--panel); color: var(--accent);
}
.btn:hover { background: var(--tint); }
.btn-solid { background: var(--scout-purple); color: var(--white); border-color: var(--scout-purple); }
.btn-solid:hover { background: var(--scout-purple); filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--red-wash); }
.btn-quiet { border-color: transparent; background: transparent; padding: 0 10px; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: 18px; cursor: pointer; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

/* ---- Fields ---- */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field-label { font-size: 13px; font-weight: 700; color: var(--text); }
.field-label .req { color: var(--red-ink); font-weight: 800; }
.field-hint { font-size: 13px; color: var(--muted); }
.input, .field input[type=text], .field input[type=date], .field input[type=number], .field input[type=search], .field input[type=url], .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--field-line); border-radius: var(--radius);
  width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px;
}
/* iPhone Safari gives date boxes a native width that ignores width: 100%, so they spill past
   the other fields. Drop the native look and they size like the rest. */
.field input[type=date] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; }
.field input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.45em; }
.field textarea, textarea.input { resize: vertical; min-height: 68px; line-height: 1.45; field-sizing: content; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus); }
.input:disabled, .field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--wash); color: var(--text); border-style: dashed; opacity: 1; -webkit-text-fill-color: var(--text); }
.field.missing .input, .field.missing input, .field.missing textarea { border-color: var(--red-ink); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; }
.check span { padding-top: 1px; }

/* Chips you can switch on and off (who might be harmed, sections). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-weight: 700; font-size: 14px; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--field-line); background: var(--panel); color: var(--text);
}
.chip[aria-pressed="true"] { background: var(--tint); color: var(--tint-ink); border-color: var(--accent); }
.chip[aria-pressed="true"]::before { content: "\2713\00a0"; }
.chip:disabled { cursor: default; opacity: 0.8; }
.chip:disabled[aria-pressed="false"] { display: none; }
.chips.small { gap: 6px; }
.chips.small .chip { font-size: 13px; min-height: 30px; padding: 0 11px; font-weight: 600; }

/* ---- Settings: a list of the parts on the left, the chosen part on the right ---- */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 12px; }
.settings-parts, .settings-items { list-style: none; margin: 0; padding: 0; }
.settings-parts { display: flex; flex-direction: column; gap: 4px; }
.settings-nav button { display: block; width: 100%; text-align: left; font: inherit; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.settings-part { padding: 9px 12px; font-weight: 800; color: var(--ink); }
.settings-part:hover, .settings-items button:hover { background: var(--wash); }
.current > .settings-part { background: var(--tint); color: var(--tint-ink); }
.settings-items { margin: 2px 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--line); }
.settings-items button { padding: 5px 10px; font-size: 14px; color: var(--muted); }
.current .settings-items { border-left-color: var(--accent); }
.current .settings-items button { color: var(--text); }
.settings-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.settings-title { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.settings-title h2 { font-size: 22px; }
.setting { scroll-margin-top: 12px; }
.setting:focus { outline: 0; }
.setting-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.setting-head h3 { font-size: 17px; }
.setting-now { font-size: 14px; font-weight: 700; color: var(--muted); }
.setting-value { margin: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.row.end { align-items: flex-end; }
.save-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 2px solid var(--accent); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); }
.save-bar[hidden] { display: none; }
.save-bar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.save-bar-in p { margin: 0; }
body.has-save-bar { padding-bottom: 84px; }
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .settings-nav { position: static; }
  .settings-parts { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .settings-parts > li { flex: none; }
  .settings-nav .settings-part { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--panel); }
  .settings-nav .current > .settings-part { border-color: var(--accent); background: var(--tint); }
  .settings-items { display: none; }
  .save-bar-in .btn { flex: 1 1 auto; }
}

/* ---- Saving a hazard that looks like one already in the library ---- */
.dup-yours, .dup-match, .dup-keep { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.dup-yours { background: var(--wash); }
.dup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dup-match { border-color: var(--accent); }
.dup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dup-keep { border-style: dashed; }
.kv.compact dd { font-size: 14px; }
.field-error { margin: 0; color: var(--danger); font-weight: 700; font-size: 14px; }
.field-error:empty { display: none; }
.dup-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.dup-ref { background: var(--wash); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dup-ref p { margin: 0; }
.ai-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--tint); }
.ai-box .hint { color: var(--tint-ink); }
.dup-note { margin: 0; font-size: 14px; }
@media (max-width: 760px) { .dup-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---- Formatted text: the box to write in, and how it reads ---- */
.rte { position: relative; display: flex; flex-direction: column; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.rte:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.rte-area { padding: 8px 10px; line-height: 1.45; color: var(--ink); outline: 0; overflow-wrap: anywhere; min-width: 0; cursor: text; }
.rte-area ul, .rte-area ol, .rich ul, .rich ol { margin: 2px 0; padding-left: 22px; }
.rte-area li, .rich li { margin: 1px 0; }
/* Indented items: a list inside an item. Bullets go •, ◦, ▪ as they step in, numbers 1, a, i. */
.rte-area li > ul, .rte-area li > ol, .rte-area ul > ul, .rte-area ol > ol, .rte-area ul > ol, .rte-area ol > ul,
.rich li > ul, .rich li > ol { margin: 1px 0; padding-left: 20px; }
:is(.rte-area, .rich) > ul { list-style-type: disc; }
:is(.rte-area, .rich) > ol { list-style-type: decimal; }
:is(.rte-area, .rich) > :is(ul, ol) ul { list-style-type: circle; }
:is(.rte-area, .rich) > :is(ul, ol) :is(ul, ol) ul { list-style-type: square; }
:is(.rte-area, .rich) > :is(ul, ol) ol { list-style-type: lower-alpha; }
:is(.rte-area, .rich) > :is(ul, ol) :is(ul, ol) ol { list-style-type: lower-roman; }
:is(.rte-area, .rich) > :is(ul, ol) :is(ul, ol) :is(ul, ol) ol { list-style-type: decimal; }
.rte-area li.nest, .rich li.nest { list-style: none; }
.rte-area.is-empty:not(:focus)::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.rte.disabled { background: var(--wash); border-style: dashed; }
.rte.disabled .rte-area { cursor: default; color: var(--text); }
/* The toolbar shows while the box is being written in. Its space is always kept, so leaving
   the box doesn't move what is below it (a click on the button underneath would miss). */
.rte-bar { display: flex; flex-wrap: wrap; visibility: hidden; gap: 2px; padding: 3px 4px; border-top: 1px solid transparent; border-radius: 0 0 var(--radius) var(--radius); }
.rte:focus-within .rte-bar { visibility: visible; border-top-color: var(--line); background: var(--wash); }
.rte.disabled .rte-bar { display: none; }
.rte-btn { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.rte-btn:hover { background: var(--panel); border-color: var(--line); }
.rte-btn:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus); }
.rte-btn[aria-pressed="true"] { background: var(--tint); color: var(--tint-ink); border-color: var(--accent); }
.rte-btn.rte-gap { margin-left: 8px; }
.rte-btn[aria-disabled="true"] { color: var(--muted); opacity: 0.6; cursor: default; }
.rte-btn[aria-disabled="true"]:hover { background: transparent; border-color: transparent; }
.rte-bold { font-weight: 900; }
.rte-italic span { font-style: italic; font-family: Georgia, serif; }
.rte-underline span { text-decoration: underline; }
.rte-ul span, .rte-ol span { font-weight: 800; }
.rich { white-space: normal; }
.rich p { margin: 0; }
.rich p + p, .rich p + ul, .rich p + ol, .rich ul + p, .rich ol + p { margin-top: 4px; }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12.5px; line-height: 1; border-radius: 999px; padding: 5px 10px; white-space: nowrap; background: var(--grey-wash); color: var(--grey-ink); }
.badge.draft { background: var(--amber-wash); color: var(--amber-ink); }
.badge.review { background: var(--tint); color: var(--tint-ink); }
.badge.approved { background: var(--green-wash); color: var(--green-ink); }
.badge.overdue { background: var(--red-wash); color: var(--red-ink); }
.badge.soon { background: var(--amber-wash); color: var(--amber-ink); }
.badge.info { background: var(--teal-wash); color: var(--teal-ink); }
.badge.starter { background: var(--teal-wash); color: var(--teal-ink); }

/* ---- Notices ---- */
.notice { border-radius: 12px; padding: 12px 14px; border-left: 4px solid var(--scout-teal); background: var(--teal-wash); color: var(--text); display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.notice strong { color: var(--ink); }
.notice.warn { border-left-color: #b86200; background: var(--amber-wash); }
.notice.bad { border-left-color: var(--red-ink); background: var(--red-wash); }
.notice.good { border-left-color: var(--green-ink); background: var(--green-wash); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- Lists of assessments and library items ---- */
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.card { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.card-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-title { font-weight: 800; font-size: 16px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.card-title:hover { color: var(--accent); text-decoration: underline; }
.card-meta { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.card-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.empty { border: 1px dashed var(--field-line); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); }
.filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filters > .field:first-child { grid-column: 1 / -1; } }
.list-head { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.more-row { align-items: center; margin-top: 10px; }
.past { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 6px; }
.past > .cards { width: 100%; }
.past-toggle[aria-expanded="false"] .chev { transform: translateY(-2px) rotate(45deg); }
.flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
@media (min-width: 1000px) { .flags { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.flag { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--wash); color: var(--text); text-decoration: none; border: 1px solid transparent; font: inherit; text-align: left; cursor: pointer; }
.flag b { font-size: 26px; font-weight: 900; line-height: 1; color: var(--ink); }
.flag.overdue { background: var(--red-wash); } .flag.overdue b { color: var(--red-ink); }
.flag.soon { background: var(--amber-wash); } .flag.soon b { color: var(--amber-ink); }
.flag.info { background: var(--teal-wash); } .flag.info b { color: var(--teal-ink); }
.flag.review { background: var(--tint); } .flag.review b { color: var(--tint-ink); }
.flag[aria-pressed="true"] { border-color: var(--accent); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { font: inherit; font-weight: 700; padding: 10px 14px; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- The assessment editor ---- */
.editor-top { position: sticky; top: 0; z-index: 10; background: var(--ground); padding: 10px 0; margin: -10px 0; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
/* The step links jump to these; keep the heading clear of the sticky bar above. */
.workspace section.panel[id] { scroll-margin-top: 72px; }
.editor-top h1 { font-size: 22px; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.stepnav { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.stepnav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 13px; text-decoration: none; }
.stepnav a:hover { border-color: var(--accent); color: var(--accent); }
.stepnav .n { color: var(--accent); font-weight: 900; }
.prompts { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.prompts li { break-inside: avoid; margin-bottom: 4px; }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 4px 0; }
details.more[open] > summary { margin-bottom: 8px; }

.hazards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hazard { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.hazard.unconfirmed { border-color: #b86200; border-width: 2px; }
/* The hazard itself is the card's title; who and how, then the controls, read left to right below it. */
.hazard-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 14px; border-bottom: 1px solid var(--line); background: var(--wash); border-radius: 12px 12px 0 0; }
.hazard-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 900; font-size: 14px; }
.hazard-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hazard-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
textarea.hazard-input { font-size: 18px; font-weight: 800; color: var(--ink); min-height: 44px; line-height: 1.3; resize: none; padding: 8px 10px; }
.hazard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hazard-meta:empty { display: none; }
.hazard-tools { flex: none; display: flex; align-items: center; gap: 6px; margin-top: 22px; }
.hazard-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; }
.hazard-col { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; }
.hazard-col + .hazard-col { border-left: 1px solid var(--line); }
.hazard-step { margin: 0; font-size: 14px; font-weight: 800; color: var(--accent); }
.field.inline { flex-direction: row; align-items: center; gap: 10px; }
.field.inline .field-label { flex: none; }
.hazard-bar { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.hazard-bar:empty { display: none; }
.hazard.folded .hazard-head { border-bottom: 0; border-radius: 12px; }
.hazard.folded .hazard-head { padding-top: 8px; padding-bottom: 8px; align-items: center; }
.hazard.folded .hazard-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hazard.folded .hazard-meta { display: none; }
.hazard.folded .hazard-n, .hazard.folded .hazard-tools { margin-top: 0; }
.hazard-summary { margin: 2px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.hazard-name { margin: 0; }
.hazard-name button { all: unset; display: block; cursor: pointer; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.3; padding: 6px 0; overflow-wrap: anywhere; }
.hazard-name button:hover { color: var(--accent); }
.hazard-name button:focus-visible { outline: 0; box-shadow: var(--focus); border-radius: 6px; }
.icon-btn.drag { flex: none; width: 28px; margin: 18px -6px 0 -8px; cursor: grab; touch-action: none; font-size: 20px; }
.hazard.folded .icon-btn.drag { margin-top: 0; }
.hazard.dragging { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); opacity: 0.96; pointer-events: none; }
.hazard.dragging .icon-btn.drag { cursor: grabbing; pointer-events: auto; }
.hazard-gap { border: 2px dashed var(--accent); border-radius: 12px; background: var(--tint); list-style: none; }
.hazard-summary .missing { color: var(--danger); font-weight: 700; }
/* Collapse / Expand: a labelled button with a chevron, so it reads as a control at a glance. */
.btn.fold { gap: 6px; padding: 0 12px 0 10px; white-space: nowrap; }
.btn.fold .chev { display: inline-block; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(2px) rotate(-135deg); transition: transform 0.15s; }
.hazard.folded .btn.fold .chev { transform: translateY(-2px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .btn.fold .chev { transition: none; } }
.hazard-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.order { font-size: 13px; color: var(--muted); }
details.more.order > summary { font-weight: 600; color: var(--muted); font-size: 13px; }
details.more.order > summary:hover { color: var(--accent); }
.order p { margin: 0 0 4px; }
.order ol { margin: 6px 0 0; padding-left: 20px; }
.order li { margin-bottom: 3px; }
.extras { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.extras-title { margin: 0; font-size: 15px; }
.extras .hint { margin: 0; }
.extra { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--wash); }
.extra-head { display: flex; align-items: flex-start; gap: 8px; }
.extra-head .chips { flex: 1; }
.extras > .btn { align-self: flex-start; }
.confirm { background: var(--amber-wash); color: var(--amber-ink); border-radius: 999px; padding: 6px 12px 6px 8px; font-weight: 700; font-size: 13px; }
.warning-box { border: 2px solid var(--red-ink); background: var(--red-wash); border-radius: 12px; padding: 12px 14px; color: var(--text); }
.warning-box strong { color: var(--red-ink); }

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
table.data th { font-size: 12.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
table.data td.pre, .pre { white-space: pre-wrap; }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.log li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.log li.open { border-left: 4px solid var(--scout-teal); }
.log .when { font-weight: 800; color: var(--ink); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.kv dt { font-weight: 700; color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sharelink { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; color: var(--text); }
.logo-preview { height: 56px; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; background: #ffffff; border-radius: 8px; padding: 6px; border: 1px solid var(--line); }
.matrix th, .matrix td { text-align: center !important; }
.matrix th:first-child, .matrix td:first-child, .matrix tbody th { text-align: left !important; white-space: normal; min-width: 132px; position: sticky; left: 0; background: var(--panel); }
.matrix tbody th { color: var(--text); font-size: 14px; font-weight: 600; }
.list-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.list-edit li { display: flex; gap: 6px; align-items: center; }
.list-edit .input { min-height: 38px; }
.list-edit li.hidden-item .input { text-decoration: line-through; color: var(--muted); }

/* ---- Read-only document (share page and old versions) ---- */
.doc-table th { background: var(--tint); color: var(--tint-ink) !important; font-size: 13px !important; white-space: normal !important; }
.doc-table td:first-child { font-weight: 700; color: var(--ink); }
.doc-table th { overflow-wrap: normal; }
.doc-table th:nth-child(1) { width: 18%; }
.doc-table th:nth-child(2) { width: 30%; }
.doc-table th:nth-child(4) { width: 13%; }
.doc-logo { height: 44px; width: auto; }
.doc-logo.plate { background: #ffffff; border-radius: 8px; padding: 4px 8px; }
.doc-logo.for-dark, [data-theme="dark"] .doc-logo.for-light { display: none; }
[data-theme="dark"] .doc-logo.for-dark { display: block; }

/* ---- Dialogs and toasts ---- */
dialog.dialog { border: 0; border-radius: var(--panel-radius); background: var(--panel); color: var(--text); padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: var(--shadow); }
dialog.dialog.wide { width: min(860px, calc(100vw - 24px)); }
dialog.dialog::backdrop { background: rgba(10, 5, 20, 0.5); }
.dialog-form { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.dialog-body { padding: 14px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 20px 18px; border-top: 1px solid var(--line); }
.dialog-foot .left { margin-right: auto; }
.pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pick label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pick label:hover { border-color: var(--accent); }
.pick label:has(input:checked) { background: var(--tint); border-color: var(--accent); }
.pick label:has(input:disabled) { opacity: 0.6; cursor: default; }
.pick .card-meta { display: block; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.choices label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 12px; cursor: pointer; font-weight: 700; }
.choices label:has(input:checked) { background: var(--tint); border-color: var(--accent); color: var(--tint-ink); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compare > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
#toasts, .toasts { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: min(620px, calc(100vw - 24px)); }
.toast { margin: 0; padding: 12px 14px; background: var(--panel); color: var(--text); border-radius: var(--radius); border: 1px solid var(--line); border-left: 4px solid var(--scout-teal); box-shadow: var(--shadow); }
.toast.error { border-left-color: var(--red-ink); }
.toast.ok { border-left-color: var(--green-ink); }

/* ---- Pegasus ESU footer: the same on every Pegasus ESU tool ---- */
.pegasus-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; color: var(--muted); font-size: 12px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 24px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.pegasus-foot .pegasus-foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; text-decoration: none; }
.pegasus-foot-brand img { display: block; height: 28px; width: auto; }
.pegasus-foot-brand:hover span { color: var(--accent); }
.pegasus-foot-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.pegasus-foot a:hover { text-decoration: underline; }
.pegasus-foot .logo-dark, [data-theme="dark"] .pegasus-foot .logo-light { display: none; }
[data-theme="dark"] .pegasus-foot .logo-dark { display: block; }
.theme-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 0 auto; padding: 0; border: 0; min-width: 0; }
.theme-switch legend { float: left; padding: 0; margin-right: 10px; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 30px; }
.theme-options { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); }
.theme-options label { flex: 1; position: relative; cursor: pointer; }
.theme-options input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.theme-options span { display: block; padding: 4px 10px; border-radius: 999px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.theme-options input:checked + span { background: var(--scout-purple); color: var(--white); }
.theme-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

.foot-version { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.foot-version:empty { display: none; }

/* ---- Privacy policy ---- */
.legal-page { max-width: 940px; }
.legal-page .panel { gap: 0; }
.legal-page h2 { margin: 0 0 10px; font-size: 18px; }
.legal-page h3 { margin: 16px 0 6px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.55; }
.legal-page p { margin: 0 0 10px; }
.legal-page ul { margin: 0 0 10px; padding-left: 20px; }
.legal-page li + li { margin-top: 6px; }
.legal-page a { font-weight: 700; }
.legal-lede { font-size: 17px !important; max-width: 70ch; }
.legal-updated { color: var(--muted); font-size: 13px !important; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .appbar { padding: 8px 16px; gap: 6px 12px; }
  .appnav { order: 3; width: 100%; }
  .appnav a { flex: 1; text-align: center; padding: 8px 6px; }
  .workspace { padding: 14px 12px 32px; gap: 14px; }
  .panel { padding: 16px 14px; border-radius: 14px; }
  h1 { font-size: 23px; }
  .fields, .compare { grid-template-columns: minmax(0, 1fr); }
  .hazard-body { grid-template-columns: minmax(0, 1fr); }
  .hazard-col + .hazard-col { border-left: 0; border-top: 1px solid var(--line); }
  .hazard-head { flex-wrap: wrap; padding: 10px 6px 10px 12px; }
  .hazard-n { margin-top: 0; width: 26px; height: 26px; }
  .icon-btn.drag { margin-top: 0; }
  .hazard-title { order: 3; flex-basis: 100%; }
  .hazard-tools { margin: 0 0 0 auto; }
  textarea.hazard-input { font-size: 17px; }
  .rte-btn { min-width: 38px; height: 40px; padding: 0 4px; }
  .rte-btn.rte-gap { margin-left: 4px; }
  .prompts { columns: 1; }
  .editor-top h1 { font-size: 19px; flex-basis: 100%; }
  .workspace section.panel[id] { scroll-margin-top: 140px; }
  .stepnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .stepnav a { white-space: nowrap; }
  .pegasus-foot { padding-left: 16px; padding-right: 16px; }
  .theme-switch { margin-left: 0; width: 100%; }
  dialog.dialog, dialog.dialog.wide { width: 100vw; max-width: 100vw; max-height: 100dvh; height: fit-content; border-radius: 16px 16px 0 0; margin: auto 0 0; }
  .dialog-form { max-height: 92dvh; }
  .btn { min-height: 44px; }
  .hazard-tools .icon-btn { width: 44px; height: 44px; }
  .hazard-tools .btn.fold { min-height: 44px; }
  /* Tables that turn into a stack of labelled blocks, so nothing scrolls sideways on a phone. */
  table.stacking thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stacking, table.stacking tbody, table.stacking tr, table.stacking td { display: block; width: 100%; }
  table.stacking tr { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; }
  table.stacking td { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.stacking td:last-child { border-bottom: 0; }
  table.stacking td:empty { display: none; }
  table.stacking td[data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise 0.18s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}
@media print {
  .appbar, .pegasus-foot, .editor-top .btn, #toasts, .no-print { display: none !important; }
  body { background: #fff; }
  .panel { padding: 0; }
}
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.pick-box { accent-color: var(--accent); width: 20px; height: 20px; flex: 0 0 auto; margin: 0; }
.bulk { margin-bottom: 8px; }

/* About panel: the type as cards, then the details in short groups */
.type-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1000px) { .type-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.type-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px 40px; border: 1px solid var(--field-line); border-radius: 12px; cursor: pointer; background: var(--panel); }
.type-card input { position: absolute; left: 14px; top: 14px; margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.type-card .type-name { font-weight: 800; }
.type-card .type-hint { color: var(--muted); font-size: 13px; line-height: 1.35; }
.type-card:has(input:checked) { background: var(--tint); border-color: var(--accent); }
.type-card:has(input:checked) .type-name { color: var(--tint-ink); }
.type-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.type-card:has(input:disabled) { cursor: default; }
.about-group { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.about-group > h3 { margin: 0 0 10px; }
@media (max-width: 760px) { .type-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .type-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .type-card { padding: 10px 10px 10px 34px; } .type-card input { left: 11px; top: 12px; } .type-card .type-hint { font-size: 12px; } }
.about-group .fields + .fields { margin-top: 14px; }
.por-link { margin: 8px 0 0; }

/* ---- AI help: suggesting hazards, and the owner's list of who has it ---- */
.btn-ai { border-style: dashed; }
.dialog-foot-in { flex: 1; justify-content: flex-end; align-items: center; }
.ai-wait { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tint); color: var(--tint-ink); }
.ai-wait p { margin: 0; }
.spinner { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.ai-picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ai-pick { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); }
.ai-pick.on { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.ai-pick-head { font-size: 16px; }
.ai-sort-row { display: flex; gap: 12px; align-items: flex-start; }
.ai-sort-row p { margin: 4px 0 0; }
.ai-sort-row select { width: auto; min-width: 160px; flex: none; }
.ai-was { font-style: italic; }
.ai-review-part { display: flex; flex-direction: column; gap: 8px; }
.ai-review-part h3 { margin: 8px 0 0; font-size: 17px; }
.ai-review-part .hint { margin: 0; }
.ai-pick.on.remove { border-color: var(--red-ink); box-shadow: inset 4px 0 0 var(--red-ink); }
.ai-quote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--line); color: var(--ink); }
.ai-quote .rich p, .ai-change .rich p { margin: 0; }
.ai-change { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 4px 12px; align-items: start; font-size: 15px; }
.ai-change-label { font-weight: 700; color: var(--muted, var(--grey-ink)); font-size: 13px; padding-top: 2px; }
.ai-change del { text-decoration: none; color: var(--red-ink); background: var(--red-wash); border-radius: 6px; padding: 4px 8px; }
.ai-change del .rich { text-decoration: line-through; }
.ai-change ins { text-decoration: none; color: var(--green-ink); background: var(--green-wash); border-radius: 6px; padding: 4px 8px; }
.ai-change-note { grid-column: span 2; color: var(--green-ink); background: var(--green-wash); border-radius: 6px; padding: 4px 8px; }
.ai-remove-list { display: flex; flex-direction: column; gap: 6px; }
.ai-remove-list .rich, .ai-remove-list .rich p { display: inline; margin: 0; }
@media (max-width: 600px) { .ai-change { grid-template-columns: 1fr; } .ai-change-note { grid-column: auto; } }
@media (max-width: 600px) { .ai-sort-row { flex-direction: column; } .ai-sort-row select { width: 100%; } }
.ai-who { color: var(--muted); font-weight: 600; }
.ai-how { margin: 0 0 0 30px; color: var(--text); }
.ai-pick > .hint, .ai-pick > .row { margin-left: 30px; }
.ai-controls { list-style: none; margin: 0 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-controls li { display: flex; align-items: center; gap: 8px 12px; padding: 6px 8px; border-radius: 8px; background: var(--wash); }
.ai-controls li.ok { background: var(--green-wash); color: var(--green-ink); }
.ai-choice { display: flex; gap: 6px; flex: none; }
.ai-choice .btn.rejected { border-color: var(--danger); color: var(--danger); background: var(--red-wash); }
.badge.ai-on { background: var(--green-wash); color: var(--green-ink); }
.check.switch { align-items: center; white-space: nowrap; }
@media (max-width: 760px) {
  .ai-controls li { flex-direction: column; align-items: stretch; }
  .ai-choice .btn { flex: 1; }
  .ai-how, .ai-controls, .ai-pick > .hint, .ai-pick > .row { margin-left: 0; }
}

/* ---- Hazards grouped under headings ---- */
.hazard-group { list-style: none; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 2px 6px; border-bottom: 2px solid var(--accent); }
.hazard-group:first-child { margin-top: 0; }
.hazard-group-name { margin: 0; font-size: 17px; font-weight: 800; color: var(--accent); }
.hazard-group-count { font-size: 14px; font-weight: 600; color: var(--muted); }
/* The group's name is the button that collapses it: a big target, with a chevron that turns. */
.hazard-group-toggle { display: inline-block; min-height: 36px; margin: -4px 0 -4px -6px; padding: 4px 8px 4px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.hazard-group-toggle:hover { background: var(--wash); }
.hazard-group-toggle:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus); }
.hazard-group-toggle .chev { flex: none; display: inline-block; width: 8px; height: 8px; margin: 0 12px 0 4px; vertical-align: middle; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); transition: transform 0.15s; }
.hazard-group-toggle[aria-expanded="false"] .chev { transform: translateY(-1px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .hazard-group-toggle .chev { transition: none; } }
.hazard-group.shut { border-bottom-style: dashed; }
.hazard-group-flag { font-size: 13px; font-weight: 700; color: var(--danger); }
@media (max-width: 760px) { .hazard-group-toggle { min-height: 44px; } }
.hazard-group-empty { list-style: none; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 14px; }
.group-pick { margin-left: auto; }
.group-pick select { width: auto; min-width: 160px; }
.group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.group-list li { display: flex; align-items: center; gap: 6px; }
.group-list .input { flex: 1; min-width: 0; }
.group-n { flex: none; width: 22px; text-align: center; font-weight: 800; color: var(--muted); }
.group-used { flex: none; white-space: nowrap; }
.group-add .input { flex: 1; min-width: 0; }
.group-add { flex-wrap: nowrap; }
tr.group-row th { text-align: left; background: var(--tint); color: var(--tint-ink); font-size: 15px; padding: 8px 12px; }
@media (max-width: 760px) {
  .group-pick { margin-left: 0; width: 100%; }
  .group-pick select { flex: 1; }
  .group-used { display: none; }
  table.stacking tr.group-row { border: 0; padding: 0; background: none; }
  table.stacking tr.group-row th { display: block; border-radius: 10px; }
}

.list-edit .kind-pick { width: auto; min-width: 130px; flex: none; }
.pick-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 8px 30px; }
.pick-extra .notice { width: 100%; }

/* ---- Asking for a review, and the reviewer's page ---- */
.prewrap { white-space: pre-wrap; }
.review-said { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--tint); color: var(--tint-ink); border-radius: 0 8px 8px 0; }
.ask-review { display: grid; gap: 14px; }
.ask-mode { border: 0; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ask-mode legend, .review-answer .choices legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.review-answer .choices { border: 0; padding: 0; margin: 0 0 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.review-answer .choice { align-items: flex-start; }
.review-answer .choice > span { display: grid; gap: 2px; }
.review-answer .choice .hint { font-weight: 400; }
.review-ask { margin-bottom: 16px; }
.review-ask p { margin: 0 0 6px; }
.review-ask p:last-child { margin-bottom: 0; }
.review-comments h3 { margin-bottom: 4px; }

/* ---- Reviewers' comments on single hazards ---- */
.badge.good { background: var(--green-wash); color: var(--green-ink); }
.badge.warn { background: var(--amber-wash); color: var(--amber-ink); }
.cmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmt { background: var(--amber-wash); border-left: 3px solid var(--amber-ink); border-radius: 0 10px 10px 0; padding: 8px 10px; font-weight: 400; color: var(--text); }
.cmt.done { background: var(--wash); border-left-color: var(--green-ink); }
.cmt.done .cmt-text { color: var(--muted); }
.cmt-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cmt-part { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.cmt-text { margin: 4px 0 2px; color: var(--ink); overflow-wrap: anywhere; }
.cmt-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.cmt-replies { list-style: none; margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); display: grid; gap: 6px; }
.cmt-reply.leader .cmt-meta { color: var(--tint-ink); font-weight: 700; }
.cmt-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px -10px 0 -10px; }
.cmt-actions .btn-quiet { min-height: 32px; }
.cmt-actions .btn:not(.btn-quiet) { margin-left: 10px; }
.cmt-icon { margin-right: 4px; }
.cmt-about { margin: 0 0 12px; }
.cmt-parts { border: 0; padding: 0; margin: 0 0 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cmt-parts legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.cmt.flash { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color 0.4s; }

/* On the reviewer's page: a comments column beside the hazards, or the foot of each hazard card on a phone. */
.cmt-intro { margin-bottom: 12px; display: block; }
.cmt-intro .for-narrow { display: none; }
.doc-table.with-comments th:nth-child(1) { width: 15%; }
.doc-table.with-comments th:nth-child(2) { width: 23%; }
.doc-table.with-comments th:nth-child(4) { width: 10%; }
.doc-table.with-comments th.cmt-col { width: 26%; }
.doc-table td.cmt-col { background: var(--wash); font-weight: 400; color: var(--text); }
.doc-table td.cmt-col:first-child { font-weight: 400; }
.cmt-cell { display: grid; gap: 8px; justify-items: start; }
.cmt-cell .cmt-list { width: 100%; }
tr.commentable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
tr.commentable:hover td:not(.cmt-col) { background: var(--tint); }
tr.commentable td.cmt-col { cursor: default; }
.cmt-summary:empty { display: none; }

/* On the leader's hazard cards. */
.hz-comments:empty { display: none; }
.hz-comments { padding: 12px 14px 14px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.cmt-title { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt-folded { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--amber-ink); font-weight: 700; }
.cmt-done summary { cursor: pointer; font-size: 13.5px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.cmt-count { margin: 6px 0 0; font-size: 14px; }
.cmt-gone { margin-top: 8px; }
.cmt-gone .hint { margin: 0 0 6px; }
.earlier { margin-top: 6px; }
ul.plain { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

@media (max-width: 760px) {
  .cmt-intro .for-wide { display: none; }
  .cmt-intro .for-narrow { display: inline; }
  .doc-table td.cmt-col { background: none; margin-top: 4px; }
  table.stacking td.cmt-col:empty { display: block; }
  tr.commentable:hover td:not(.cmt-col) { background: none; }
  tr.commentable:active { background: var(--tint); }
}

/* A reviewer has asked for changes that haven't been dealt with yet. */
.badge.changes { background: var(--amber-wash); color: var(--amber-ink); box-shadow: inset 0 0 0 1px var(--amber-ink); }
.badge.changes::before { content: "💬"; font-size: 11px; }