/* ReportForge page. The CyberShelter design system from the approved canvas and
   docs/design/ui-ux-brief.md: ink top bar with the brand-gradient rule, slate reports rail,
   white outline, sand ground, one white sheet per section, teal primary, lime Build.
   DM Sans and DM Mono are served by the app itself from /static/fonts (OFL, built by
   tools/editor/build.sh), with system fallbacks; nothing is fetched from Google Fonts, so
   the page renders the same on an offline LAN box. */

/* DM Sans is variable (opsz and wght axes), normal and italic; DM Mono is 400 and 500. Each
   in latin and latin-ext; the unicode-range values are fontsource 5.3.0's. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("fonts/DMSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("fonts/DMSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap;
  src: url("fonts/DMSans-Italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100 1000; font-display: swap;
  src: url("fonts/DMSans-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/DMMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/DMMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/DMMono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/DMMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --ink: #111D20; --slate: #223536; --teal-deep: #1D4D53; --teal: #1E6672; --lime: #B9D989;
  --lime-hover: #A3E5A5; --mint: #54D5BB; --tint: #E3F2F0;
  --sand: #EFECE7; --sand-dark: #D7D3CB; --sand-light: #FBFAF8;
  --text: #111D20; --muted: #5B6B6E; --muted-light: #8A9598;
  --critical: #A61B1B; --high: #C2410C; --medium: #B45309; --low: #1D4ED8; --info: #4B5563;
  --danger: #A61B1B; --danger-tint: #FBEDEC; --danger-line: #E6B8B5;
  --warn: #E0A458; --warn-tint: #FFE7C2; --warn-bg: #FFF4E5; --warn-text: #7A3E00;
  --grad: linear-gradient(90deg, #00B8C7, #54D5BB, #A3E5A5);
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 8px; --radius-card: 10px; --radius-dialog: 14px;
  --shadow-drawer: -12px 0 32px rgba(17, 29, 32, .12);
  --shadow-pop: 0 12px 32px rgba(17, 29, 32, .18);
  --control-h: 40px; --control-sm: 34px; --input-h: 44px;
  --topbar-h: 63px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--font); color: var(--text); background: var(--sand); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }
a:hover { color: var(--teal-deep); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* the one focus ring: 3 px mint, 2 px offset, on everything that takes focus */
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* ------------------------------------------------------------------ controls */
button { font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--text); border: 1px solid var(--sand-dark); background: #fff; border-radius: var(--radius); height: var(--control-h); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
button svg { width: 16px; height: 16px; flex: none; }
button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover:not(:disabled) { background: var(--sand); border-color: transparent; color: var(--text); }
button.danger { color: var(--danger); border-color: var(--danger-line); }
button.danger:hover:not(:disabled) { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
button.small { height: var(--control-sm); padding: 0 12px; font-size: 13px; }
button.link { background: none; border: none; color: var(--teal); padding: 0 4px; height: auto; text-decoration: underline; }
button.link:hover:not(:disabled) { color: var(--teal-deep); }
button.icon { width: var(--control-sm); height: var(--control-sm); padding: 0; font-size: 14px; color: var(--muted); }
button.icon:hover:not(:disabled) { color: var(--teal); }
button.icon.danger { color: var(--muted); border-color: var(--sand-dark); }
button.icon.danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger-line); background: var(--danger-tint); }
/* reorder / remove groups beside list rows: small and light, not a column of bordered boxes */
.controls .icon { width: 28px; height: 28px; font-size: 13px; border-color: transparent; background: transparent; }
.controls .icon:hover:not(:disabled) { background: var(--sand); border-color: transparent; }
.controls .icon.danger { border-color: transparent; }
.controls .icon.danger:hover:not(:disabled) { background: var(--danger-tint); border-color: transparent; }
.list .add { align-self: flex-start; margin-top: 2px; }

input, textarea, select { font: inherit; font-size: 15px; color: var(--text); width: 100%; height: var(--input-h); border: 1px solid var(--sand-dark); border-radius: var(--radius); padding: 0 12px; background: #fff; min-width: 0; transition: border-color .2s, background .2s; }
textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus { border-color: var(--teal); }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: #fff url("select-arrow.svg") no-repeat right 12px center; }
input[type="checkbox"] { width: auto; height: auto; padding: 0; accent-color: var(--teal); }
input[type="file"] { border: none; width: auto; height: auto; padding: 0; }
input::placeholder, textarea::placeholder { color: var(--muted-light); }
/* a required field nobody has filled is a to-do: dashed on sand until it is touched */
:is(input, textarea):required:invalid:not(:focus) { border-style: dashed; background: var(--sand-light); }
/* the field a diagnostic points at */
:is(input, textarea, select):has(+ .diag-msg.error) { border-color: var(--danger); border-style: solid; box-shadow: 0 0 0 3px var(--danger-tint); }
:is(input, textarea, select):has(+ .diag-msg.warning) { border-color: var(--warn); border-style: solid; }

label.field { display: block; margin: 16px 0 0; }
.lbl { display: block; font-weight: 700; font-size: 13px; color: var(--slate); margin: 0 0 6px; }
div.lbl { font-size: 16px; color: var(--text); margin: 0 0 8px; }
.lbl .hint { display: inline; margin: 0 0 0 6px; font-size: 12px; font-weight: 400; }
.hint { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 6px; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.note { border-left: 4px solid var(--mint); background: var(--tint); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; color: var(--teal-deep); margin: 16px 0 0; }
.note.generated { margin: 0 0 20px; }
.banner { border-left: 4px solid var(--mint); background: var(--tint); border-radius: var(--radius); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 13px; color: var(--teal-deep); }
label.field + .banner { margin-top: 10px; }
.banner.readonly-banner, .banner.copied-from { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn-text); }
.banner.readonly-banner { margin: 0 0 20px; }

/* vertical rhythm inside a sheet: blocks are 16 px apart, the first in its group flush */
.section-body :is(.list, .rich, .row, .dropzone, .cvss, .evidence-rows, .logo-picker, .evidence-library, details.more, [data-sub], .toolbar, .findings-index) { margin-top: 16px; }
.section-body :is(label.field, .list, .rich, .row, .note, .banner, .dropzone, .cvss, .evidence-rows, .logo-picker, .evidence-library, [data-sub], .toolbar, .findings-index):first-child { margin-top: 0; }
.section-body [data-sub] { margin-top: 20px; }
.section-body [data-sub]:first-child { margin-top: 0; }
.row > label.field, .list .fields > label.field, .cvss .metrics > label.field { margin-top: 0; }

/* ------------------------------------------------------------------ shell */
#app { height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 0 20px; min-height: 60px; flex: none; background: var(--ink); color: #fff; z-index: 20; border-bottom: 3px solid transparent; border-image: var(--grad) 1; }
.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius); }
.brand .logo { display: block; height: 30px; width: auto; }
.brand .mark { display: none; height: 30px; width: auto; }
.topbar .divider { width: 1px; height: 28px; background: rgba(255, 255, 255, .18); flex: none; }
.doc { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 1.2em; }
.save-state { display: inline-block; max-width: 100%; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.save-state:not(:empty)::before { content: ""; display: inline-block; vertical-align: middle; width: 8px; height: 8px; margin: -2px 6px 0 0; border-radius: 50%; background: var(--lime); }
.first-error { background: none; border: none; height: auto; padding: 0; font-size: 12px; font-weight: 700; color: var(--mint); text-decoration: underline; }
.first-error:hover:not(:disabled) { color: #fff; border: none; }
.first-error.has-errors, .first-error.has-warnings { color: #FFD9A8; }
.first-error.has-todo { color: rgba(255, 255, 255, .8); }
.first-error.clean { color: var(--lime); text-decoration: none; cursor: default; }
.actions { display: flex; gap: 8px; flex: none; align-items: center; }
.actions button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.actions button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .18); color: #fff; }
.actions button.primary { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.actions button.primary:hover:not(:disabled) { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--ink); }
#btn-menu { width: var(--control-h); padding: 0; }
#btn-menu svg { width: 18px; height: 18px; }
#btn-user { display: inline-block; line-height: calc(var(--control-h) - 2px); background: var(--teal); border-color: var(--teal); border-radius: 999px; font-weight: 700; padding: 0 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; text-align: center; }
#btn-user:hover:not(:disabled) { background: var(--teal-deep); border-color: var(--teal-deep); }

.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 248px 272px minmax(0, 1fr); }

/* the reports rail */
.sidebar { background: var(--slate); color: #fff; padding: 20px 16px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.sidebar > * { flex: none; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sidebar-head > span { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.sidebar #btn-new { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.sidebar #btn-new:hover:not(:disabled) { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--ink); }
#report-search { height: 40px; font-size: 14px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
#report-search::placeholder { color: rgba(255, 255, 255, .55); }
#report-search:hover, #report-search:focus { border-color: var(--mint); }
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.report-list li { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .2s, border-color .2s; }
.report-list li:hover { background: rgba(255, 255, 255, .1); }
.report-list li.active { background: var(--teal-deep); border-color: var(--mint); }
.report-list .name { font-weight: 700; font-size: 14px; }
.report-list .meta { font-size: 12px; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-list li.muted { color: rgba(255, 255, 255, .6); cursor: default; border-style: dashed; }
.rail-foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.rail-foot .link { color: var(--lime); text-decoration: none; font-weight: 600; padding: 0; align-self: flex-start; }
.rail-foot .link:hover:not(:disabled) { color: var(--lime-hover); text-decoration: underline; }

/* the outline */
.outline { background: #fff; border-right: 1px solid var(--sand-dark); padding: 18px 12px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.outline > * { flex: none; }
.outline-head { margin: 0 8px 10px; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.node { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: auto; min-height: 40px; text-align: left; border: 0; background: transparent; border-radius: var(--radius); padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--text); white-space: normal; flex: none; }
.node:hover:not(:disabled) { background: var(--sand); color: var(--text); }
.node.active { background: var(--tint); color: var(--teal-deep); box-shadow: inset 3px 0 0 var(--teal); }
.node.off { color: var(--muted); font-weight: 500; font-style: italic; }
.node.off .num { color: var(--muted-light); }
.node.l1 { padding-left: 34px; font-weight: 500; font-size: 13px; }
.node.l2 { padding-left: 54px; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.node .num { flex: none; min-width: 22px; font-size: 12px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.node .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: inherit; font: inherit; }
.node .badge, .node .chip { flex: none; }

.badge { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.4; border-radius: 999px; padding: 2px 8px; background: var(--tint); color: var(--teal-deep); }
.badge.err { background: var(--critical); color: #fff; }
.badge.warn { background: var(--warn-tint); color: var(--warn-text); }
.badge.todo { background: var(--sand); color: var(--muted); }

.chip { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1.5; color: #fff; border-radius: 6px; padding: 2px 7px; min-width: 28px; background: var(--muted-light); }
.chip.CRITICAL { background: var(--critical); } .chip.HIGH { background: var(--high); } .chip.MEDIUM { background: var(--medium); } .chip.LOW { background: var(--low); } .chip.INFO { background: var(--info); }
.chip[data-sev-index], .cvss .chip, .copy-results .chip { font-family: var(--font); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; }

/* the editor: the sheet on the sand, the footer bar, side panels */
.editor { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; background: var(--sand); }
.editor.with-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.editor.with-check { grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr); }
.editor-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; container-type: inline-size; }
.panel { flex: 1; overflow-y: auto; min-height: 0; padding: 28px 32px 32px; width: 100%; }
.panel > p.muted { background: #fff; border: 1px dashed var(--sand-dark); border-radius: var(--radius-card); padding: 48px 20px; text-align: center; font-size: 15px; margin: 0; }
.sheet { background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); padding: 28px 32px; }
.section-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head .num { width: 36px; height: 36px; border-radius: var(--radius); background: var(--teal); color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.section-head .num:empty { display: none; }
.section-head .title { flex: 1 1 160px; min-width: 0; font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.section-head .flag { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.section-head .flag input.include { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; margin: 0; padding: 0; border: none; border-radius: 999px; background: var(--sand-dark); position: relative; cursor: pointer; flex: none; transition: background .2s; }
.section-head .flag input.include::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.section-head .flag input.include:checked { background: var(--teal); }
.section-head .flag input.include:checked::after { left: 21px; }
.form-footer { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 32px; border-top: 1px solid var(--sand-dark); background: #fff; }
.form-footer .step { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-footer button { flex: none; }

/* ------------------------------------------------------------------ content */
.row { display: grid; gap: 18px; }
.row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.list { display: flex; flex-direction: column; gap: 8px; }
.list > .lbl { margin-bottom: 2px; }
.list .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.list .item:has(> .fields) { border: 1px solid var(--sand-dark); border-radius: var(--radius-card); padding: 14px 16px; background: #fff; }
.list .item .controls { display: flex; gap: 2px; }
.list .fields { display: grid; gap: 12px; }
.list .fields.c2 { grid-template-columns: 1fr 2fr; }
.list .fields.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.list .fields.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.list .fields :is(input, select) { height: 40px; font-size: 14px; }
.list .fields textarea { min-height: 64px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar label.small { display: inline-flex; align-items: center; gap: 8px; height: var(--control-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--sand-dark); border-radius: var(--radius); padding: 0 12px; cursor: pointer; }
.toolbar .muted { font-size: 12px; }

/* the rich-text fields: one editor per field (web/static/richtext.js). ProseMirror's base
   rules, copied verbatim from the `style` constant of @tiptap/core 3.32.0 (dist/index.js):
   every editor runs with injectCSS false, as the page's CSP allows no inline style. */
.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror [contenteditable="false"] {
  white-space: normal;
}

.ProseMirror [contenteditable="false"] [contenteditable="true"] {
  white-space: pre-wrap;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
  margin: 0;
}

.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.ProseMirror-hideselection * {
  caret-color: transparent;
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

/* the editor boxed like a textarea, its real lists and code in the house fonts */
.rich .ProseMirror { font-size: 15px; line-height: 1.5; color: var(--text); background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius); padding: 10px 12px; transition: border-color .2s, background .2s; }
.rich .ProseMirror:hover, .rich .ProseMirror:focus { border-color: var(--teal); }
.rich .ProseMirror:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.rich[data-rich="prose"] .ProseMirror { min-height: 96px; }
.rich:is([data-rich="bullets"], [data-rich="numbered"]) .ProseMirror { min-height: 64px; }
.rich .ProseMirror :is(p, ul, ol, pre) { margin: 0 0 8px; }
.rich .ProseMirror :is(p, ul, ol, pre):last-child { margin-bottom: 0; }
.rich .ProseMirror :is(ul, ol) { padding-left: 24px; }
.rich .ProseMirror ul { list-style-type: disc; }
.rich .ProseMirror ol { list-style-type: decimal; }
.rich .ProseMirror li > :is(p, pre) { margin-bottom: 4px; }
.rich .ProseMirror li > :is(ul, ol) { margin: 4px 0; padding-left: 22px; }
.rich .ProseMirror ul ul { list-style-type: circle; }
.rich .ProseMirror :is(code, pre) { font-family: var(--mono); font-size: 13px; }
.rich .ProseMirror code { background: var(--sand); border-radius: 4px; padding: 1px 4px; }
.rich .ProseMirror pre { background: var(--sand-light); border: 1px solid var(--sand-dark); border-radius: var(--radius); padding: 8px 10px; line-height: 1.45; }
.rich .ProseMirror pre code { background: none; border-radius: 0; padding: 0; font-size: inherit; }
/* the formatting toolbar above each editor: 40 px targets, the pressed state on tint */
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 6px; }
.rt-btn { width: var(--control-h); height: var(--control-h); padding: 0; color: var(--slate); background: transparent; border-color: transparent; }
.rt-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sand); border-color: transparent; color: var(--teal); }
.rt-btn[aria-pressed="true"] { background: var(--tint); border-color: var(--teal); color: var(--teal-deep); }
.rt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rt-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.rt-note { margin: 0 0 6px; font-size: 12px; color: var(--warn-text); background: var(--warn-bg); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 6px 10px; }
/* the field a diagnostic points at, as for inputs */
.rich .ProseMirror:has(+ .diag-msg.error) { border-color: var(--danger); border-style: solid; box-shadow: 0 0 0 3px var(--danger-tint); }
.rich .ProseMirror:has(+ .diag-msg.warning) { border-color: var(--warn); border-style: solid; }

/* the finding card: a header strip, the main sheet and the 380 px side sheet */
.finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); margin-bottom: 20px; }
.finding-head .chip[data-code-index] { font-size: 14px; padding: 6px 12px; }
.finding-head .title { flex: 1 1 200px; min-width: 0; font-weight: 700; font-size: 16px; }
.finding-head .move-hint { order: 10; flex: 1 1 100%; font-size: 12px; margin-top: -2px; }   /* its own line under the title row */
.finding-head + .diag-msg { margin: -12px 0 16px; }
.finding-body { display: block; }
.finding-body > .copied-from { margin: 0 0 20px; }
.finding-body > [data-sub="details"] { margin: 0 0 20px; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); padding: 24px; }
.finding-details { display: flex; flex-direction: column; gap: 16px; }
.finding-details > label.field, .finding-details > .row, .finding-details > .cvss, .finding-details > details.more { margin: 0; }
.finding-body > .prose { background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); padding: 24px; }
.finding-body > .prose > [data-sub]:first-child { margin-top: 0; }
details.more { margin-top: 16px; border-top: 1px dashed var(--sand-dark); padding-top: 10px; }
details.more summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }

.finding-details .cvss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin: 0; }
.cvss-score-wrap { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cvss-score-wrap .score { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--teal-deep); }
.cvss-score-wrap .muted, .cvss-score-wrap .error { font-size: 13px; }
.cvss-score-wrap .error { color: #B4231C; font-weight: 600; }
.icon.calc { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--sand-dark); border-radius: var(--radius); background: var(--sand); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon.calc:hover { border-color: var(--teal); background: var(--tint); color: var(--teal-deep); }
.cvss input[type=text] { font-family: var(--mono); font-size: 12px; }
.cvss-dialog { border: 0; border-radius: var(--radius-card); padding: 0; width: min(680px, 94vw); box-shadow: 0 24px 64px rgba(17, 29, 32, .3); color: var(--text); background: #fff; }
.cvss-dialog::backdrop { background: rgba(17, 29, 32, .4); }
.cvss-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sand-dark); }
.cvss-dialog-head strong { font-size: 16px; }
.cvss-dialog .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px; }
.cvss-dialog .metrics label.field { margin: 0; }
.cvss-dialog .metrics .lbl { font-size: 12px; margin-bottom: 4px; display: block; }
.cvss-dialog .metrics select { height: 38px; font-size: 14px; width: 100%; }
.cvss-dialog .result { display: flex; align-items: center; gap: 12px; padding: 0 20px 4px; min-height: 40px; }
.cvss-dialog .result .score { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.cvss-dialog .actions { display: flex; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--sand-dark); }

/* evidence */
.evidence-rows { display: flex; flex-direction: column; gap: 8px; }
.evidence-item { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); background: #fff; }
.evidence-item img { max-height: 60px; max-width: 140px; border: 1px solid var(--sand-dark); border-radius: 6px; background: #fff; }
.evidence-item select + input { margin-top: 8px; }
.evidence-item .controls { display: flex; gap: 2px; }
.dropzone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px; border: 2px dashed var(--sand-dark); border-radius: var(--radius-card); background: var(--sand-light); color: var(--muted); font-size: 13px; }
.dropzone.over { border-color: var(--teal); background: var(--tint); }
.dropzone label.small { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 700; cursor: pointer; text-decoration: underline; }
.dropzone input[type="file"] { display: none; }
.evidence-library { margin-top: 24px; }
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.evidence-tile { border: 1px solid var(--sand-dark); border-radius: var(--radius-card); padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.evidence-tile img { width: 100%; height: 80px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--sand); }
.evidence-tile .name { font-weight: 700; word-break: break-all; }
.evidence-tile button { align-self: flex-start; }
.logo-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.logo-row img { max-height: 60px; max-width: 140px; border: 1px solid var(--sand-dark); border-radius: 6px; background: #fff; }
.logo-row .dropzone { margin: 0; }
.logo-row img.on-dark { background: #141412; }   /* the PDF cover's own dark, under a "No band" logo */
.logo-choices { display: grid; gap: 8px; }

/* the findings index */
.findings-index { overflow-x: auto; }
.index-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.index-table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 2px solid var(--sand-dark); background: var(--sand-light); }
.index-table td { padding: 10px 12px; border-bottom: 1px solid var(--sand); vertical-align: middle; }
.index-table tbody tr { cursor: pointer; }
.index-table tbody tr:hover td { background: var(--sand-light); }
.index-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
.index-table td.title { font-weight: 700; }

[data-sub], .finding { scroll-margin-top: 20px; }
.flash { animation: sub-flash 1.4s ease-out; border-radius: var(--radius); }
@keyframes sub-flash { 0%, 55% { background: var(--tint); box-shadow: 0 0 0 3px var(--mint); } 100% { background: transparent; box-shadow: none; } }
.section-body :disabled { opacity: .7; }

/* ------------------------------------------------------------------ overlays */
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 80vw; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius-card); z-index: 60; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-pop); display: flex; gap: 12px; align-items: center; }
.toast.err { background: var(--critical); }
.toast .link { color: var(--lime); }
.menu { position: fixed; z-index: 50; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: 6px; min-width: 220px; display: flex; flex-direction: column; }
.menu button { border: none; background: none; justify-content: flex-start; text-align: left; border-radius: 6px; padding: 0 12px; font-weight: 500; }
.menu button:hover:not(:disabled) { background: var(--sand); color: var(--text); }
.menu button.danger:hover:not(:disabled) { background: var(--danger-tint); color: var(--danger); }
.menu button.disabled { color: var(--muted); }
dialog { border: none; border-radius: var(--radius-dialog); padding: 24px 28px; width: min(480px, 92vw); box-shadow: 0 24px 60px rgba(17, 29, 32, .3); background: #fff; color: var(--text); }
dialog::backdrop { background: rgba(17, 29, 32, .55); }
dialog h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
dialog p { color: var(--muted); margin: 4px 0 14px; font-size: 13px; }
dialog label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-weight: 700; font-size: 13px; color: var(--slate); }
dialog label > input, dialog label > select, dialog textarea { font-weight: 400; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; }
.dialog-actions label.small { flex-direction: row; align-items: center; margin: 0 auto 0 0; font-weight: 600; }
#login button.primary { width: 100%; margin-top: 8px; }
#login-error { margin: 6px 0 0; font-weight: 600; font-size: 13px; }
#find { width: min(640px, 92vw); }
.find-results { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.find-results button { width: 100%; height: auto; text-align: left; justify-content: flex-start; border: none; border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; font-weight: 500; }
.find-results button:hover:not(:disabled) { background: var(--sand); color: var(--text); }
.find-results .path { font-family: var(--mono); font-size: 11px; color: var(--teal); }
.find-results .snippet { font-size: 13px; color: var(--text); }

/* ------------------------------------------------------------------ suggestions */
label.field, .list .item { position: relative; }
.suggest { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 4px; padding: 4px; background: #fff; border: 1px solid var(--sand-dark); border-radius: var(--radius); box-shadow: var(--shadow-pop); max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.list .item > .suggest { top: 100%; }
.suggest button { border: none; background: none; height: auto; min-height: 36px; justify-content: flex-start; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: normal; }
.suggest button:hover:not(:disabled) { background: var(--sand); color: var(--text); }

/* ------------------------------------------------------------------ findings dialogs */
#copy, #paste, #import { width: min(720px, 92vw); }
.copy-results { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.copy-results li.muted { padding: 8px 10px; }
.copy-results button { width: 100%; height: auto; min-height: 44px; text-align: left; justify-content: flex-start; border: none; border-radius: var(--radius); padding: 8px 10px; display: flex; gap: 10px; align-items: center; white-space: normal; font-weight: 500; }
.copy-results button .title { flex: 1; font-weight: 700; }
.copy-results button:hover:not(:disabled) { background: var(--sand); color: var(--text); }
#paste textarea, #import textarea { font-family: var(--mono); font-size: 12px; }

/* ------------------------------------------------------------------ diagnostics, build, preview */
.diag-msg { font-size: 12px; font-weight: 600; margin: 6px 0 0; color: var(--danger); }
.diag-msg.warning { color: var(--warn-text); }
.diag-list { display: flex; flex-direction: column; gap: 6px; margin: -8px 0 18px; }
.diag-list .diag-msg { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--danger-tint); border: 1px solid var(--danger-line); }
.diag-list .diag-msg.warning { background: var(--warn-bg); border-color: #F3D9B1; }
.diag-list code { font-family: var(--mono); font-size: 11px; }
.build-drawer { flex: none; border-top: 1px solid var(--sand-dark); background: #fff; padding: 16px 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -8px 24px rgba(17, 29, 32, .08); }
.drawer-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.drawer-head strong { font-size: 16px; font-weight: 700; }
.drawer-head .icon { margin-left: auto; }
.stale { font-size: 12px; font-weight: 600; color: var(--warn-text); background: var(--warn-tint); border-radius: 999px; padding: 3px 10px; }
.files { display: flex; gap: 10px; flex-wrap: wrap; }
.files a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--sand-dark); border-radius: var(--radius-card); text-decoration: none; color: var(--text); font-weight: 600; font-size: 13px; background: #fff; transition: border-color .2s, color .2s; }
.files a:hover { border-color: var(--teal); color: var(--teal); }
.files a::before { content: "FILE"; width: 40px; height: 40px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; background: var(--muted); flex: none; }
.files a[href$=".docx"]::before { content: "DOCX"; background: var(--teal); }
.files a[href$=".pdf"]::before { content: "PDF"; background: var(--slate); }
.preview { border-left: 1px solid var(--sand-dark); display: flex; flex-direction: column; min-height: 0; background: var(--sand-dark); }
.preview-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--sand-dark); background: #fff; font-size: 13px; }
.preview-bar strong { font-size: 16px; font-weight: 700; }
.preview-bar .spacer { flex: 1; }
.preview iframe { flex: 1; border: none; width: 100%; min-height: 0; }
.preview iframe.live { background: #fff; }
.preview-bar button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }

/* ------------------------------------------------------------------ check writing */
.check { border-left: 1px solid var(--sand-dark); display: flex; flex-direction: column; min-height: 0; background: #fff; box-shadow: var(--shadow-drawer); z-index: 2; }
.check-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.check-body > * { flex: none; }
.check-body > .note { margin: 0; }
.check-group h3 { font-size: 13px; font-weight: 700; color: var(--slate); margin: 0 0 8px; }
.check-item { border: 1px solid var(--sand-dark); border-radius: var(--radius-card); background: #fff; margin: 0 0 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.check-item .where { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; height: auto; text-align: left; border: none; background: none; padding: 0; border-radius: 0; white-space: normal; font-weight: 500; }
.check-item .where:hover:not(:disabled) { background: none; color: var(--text); }
.check-item .quote { display: block; font-size: 14px; line-height: 1.5; padding: 10px 12px; background: var(--sand-light); border-radius: var(--radius); border-left: 4px solid var(--sand-dark); color: var(--text); }
.check-item.style .quote { border-left-color: var(--mint); }
.check-item.grammar .quote { border-left-color: var(--warn); }
.check-item .msg { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.check-item .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.check-item .actions .ghost { border-color: var(--sand-dark); color: var(--muted); }

/* ---- a side panel or a laptop narrows the editor: single columns, nothing overlaps ---- */
@container (max-width: 900px) {
  .finding-body { grid-template-columns: minmax(0, 1fr); }
  .finding-grid .props { grid-column: 1; grid-row: auto; margin-top: 20px; }
}
@container (max-width: 700px) {
  .row.c3, .row.c4, .list .fields.c3, .list .fields.c4 { grid-template-columns: minmax(0, 1fr); }
  .evidence-item { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .row.c2, .list .fields.c2 { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 600px) {
  .panel { padding: 16px; }
  .sheet { padding: 18px 16px; border-radius: 12px; }
  .section-head .title { font-size: 20px; }
  .finding-body > [data-sub="details"] { padding: 16px 16px 0; }
  .finding-grid .prose { padding: 0 16px 16px; }
  .finding-grid .props { padding: 16px; }
  .form-footer { padding: 12px 16px; gap: 8px; }
  .build-drawer { padding: 14px 16px; }
}

/* ---- "to fill in" badge: required fields nobody has touched yet are a to-do, not an error ---- */
.badge.todo { background: var(--sand); color: var(--muted); }

/* ---- narrow widths: the reports list and the outline become drawers ---- */
.nav-toggle { display: none; width: var(--control-h); padding: 0; color: #fff; }
.nav-toggle:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.drawer-backdrop { position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-h, 63px); background: rgba(17, 29, 32, .45); z-index: 28; }
.drawer-backdrop[hidden] { display: none; }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 272px minmax(0, 1fr); }
  .sidebar { position: fixed; top: var(--topbar-h, 63px); bottom: 0; left: 0; width: 280px; transform: translateX(-100%); transition: transform .2s ease; z-index: 30; }
  .sidebar.open { transform: none; box-shadow: 12px 0 32px rgba(17, 29, 32, .22); }
  .nav-toggle.reports { display: inline-flex; }
}
@media (max-width: 860px) {
  :root { --control-h: 44px; --control-sm: 40px; }   /* 44 px targets on phones */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .outline { position: fixed; top: var(--topbar-h, 59px); bottom: 0; left: 0; width: min(330px, 85vw); transform: translateX(-100%); transition: transform .2s ease; z-index: 29; }
  .outline.open { transform: none; box-shadow: 12px 0 32px rgba(17, 29, 32, .22); }
  .node { min-height: 44px; }
  .nav-toggle.outline-toggle { display: inline-flex; }
  .topbar { gap: 10px; padding: 0 12px; min-height: 56px; }
  .topbar .divider { display: none; }
  .doc { flex: 1 1 120px; }
  .doc-title { font-size: 13px; }
  .doc-line { gap: 8px; flex-wrap: nowrap; overflow: hidden; }
  .save-state { font-size: 11px; white-space: nowrap; }
  .first-error { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actions { gap: 6px; }
  .actions button { padding: 0 12px; font-size: 13px; }
  .editor.with-preview, .editor.with-check { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .preview, .check { border-left: none; border-top: 1px solid var(--sand-dark); box-shadow: none; }
  .form-footer .step { font-size: 11px; }
  dialog { padding: 20px 18px; }
}
@media (max-width: 480px) {
  .brand .logo { display: none; }
  .brand .mark { display: block; }
  #btn-save, #btn-check, #btn-preview, #btn-menu { display: none; }   /* the phone keeps menu, outline, mark, Build, you */
  #btn-build { width: 44px; padding: 0; }
  #btn-build span { display: none; }
  #btn-user { width: 44px; padding: 0 6px; border-radius: 50%; font-size: 12px; }
  .toast { max-width: calc(100vw - 32px); }
}