* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1c1c1c;
  background: #f4f5f7;
}
a { color: #2266dd; }
.container { max-width: 720px; margin: 40px auto; padding: 0 20px; }
.index-section { margin-bottom: 32px; }
.index-section h2 { font-weight: 500; font-size: 16px; color: #46536b; }
.doc-list { list-style: none; padding: 0; }
.doc-list li { margin: 8px 0; }
.doc-list a { display: block; padding: 12px 16px; background: white; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08); text-decoration: none; color: #1c1c1c; }
.tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  background: #e7ebf3; color: #46536b; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
a.tag { text-decoration: none; cursor: pointer; }
a.tag:hover { background: #d7deec; }
.upload-form { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.btn { padding: 8px 14px; border: 1px solid #cfd4e0; border-radius: 6px;
  background: #f1f3f4; color: #1c1c1c; font-size: 13px; cursor: pointer; }
.btn:hover { background: #e4e6e8; }
.btn.disabled { color: #b0b4bd; background: #f7f8fa; cursor: default; pointer-events: none; }
.error-message { color: #c0392b; }

#app { display: flex; flex-direction: column; width: 100%; height: 100vh; }

/* The report editor's #docApp deliberately doesn't get #app's height:100vh
   shell (see the .viewer-layout comment below) so a tall document scrolls
   the whole page instead of clipping. The reports landing list has no such
   document to protect, so it opts back in here -- without this its
   .editor-container's grey background only reaches as far as the card grid
   instead of filling the viewport like the documents landing page does. */
#docApp.doc-app-landing { display: flex; flex-direction: column; width: 100%; height: 100vh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #1c2333; color: white; flex-shrink: 0;
}
.topbar a { color: #aebbe0; text-decoration: none; }
.doc-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.doc-title a { margin-right: 6px; }
.pagenav { display: flex; align-items: center; gap: 10px; }
.pagenav .btn { background: #2a3350; padding: 6px 12px; border-radius: 4px; }
.doc-title a.btn { color: #1c1c1c; text-decoration: underline; }
.doc-title a.btn.disabled { color: #8a93a8; background: transparent; border: 1px dashed #5b6685; text-decoration: none; opacity: 0.6; }
.doc-title .doc-name { color: white; min-width: 140px; max-width: 260px; }
.doc-title .doc-name:hover { background: rgba(255, 255, 255, 0.12); }
.doc-title .doc-name:focus { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: white; }
.jump input { width: 54px; text-align: center; }

.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: white; border-bottom: 1px solid #e0e2e8; flex-shrink: 0;
}
.mode-group { display: flex; gap: 4px; }
.mode-btn {
  border: 1px solid #cfd4e0; background: white; padding: 6px 12px; border-radius: 4px;
  cursor: pointer; font-size: 13px;
}
.mode-btn.active { background: #2266dd; color: white; border-color: #2266dd; }
.toolbar button:not(.mode-btn) {
  border: 1px solid #cfd4e0; background: #f7f8fa; padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
.toolbar button.confirming { background: #c0392b; color: white; border-color: #c0392b; }
.color-label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.color-pop-wrap { position: relative; }
.toolbar #colorBtn { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.color-current { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.25); }
.color-popover {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: 240px; padding: 10px; box-sizing: border-box;
  background: #fff; border: 1px solid #cfd4e0; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.color-popover[hidden] { display: none; }
.color-popover .color-palette { margin-top: 0; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.color-popover .color-swatch { min-width: 0; width: 100%; box-sizing: border-box; }
.toggle-label { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.hint { font-size: 12px; color: #8a92a5; }
.status-msg { font-size: 13px; margin-left: auto; }

.viewer-layout { display: flex; flex: 1; min-height: 0; }
.viewer-container {
  flex: 1; overflow: auto; background: #6b7280;
  display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 20px;
}
.page-wrap { position: relative; flex-shrink: 0; }
.page-wrap img { display: block; user-select: none; width: 100%; height: 100%; }
.page-wrap canvas {
  position: absolute; top: 0; left: 0; touch-action: none; cursor: default;
}
.page-label {
  display: none; position: absolute; top: -22px; left: 0; font-size: 12px; color: #e7ebf3;
}
.continuous .page-label { display: block; }
.continuous .page-wrap.current-page { outline: 2px solid #2266dd; outline-offset: 3px; }

.context-menu {
  position: fixed; display: none; z-index: 1000; background: white;
  border: 1px solid #cfd4e0; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 4px; min-width: 160px;
}
.context-menu.open { display: block; }
.context-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #c0392b;
}
.context-menu button:hover { background: #f7e8e6; }

.sidebar { width: 260px; flex-shrink: 0; background: white; border-left: 1px solid #e0e2e8;
  padding: 12px; overflow-y: auto; }
.sidebar-grip, .sidebar-close { display: none; }

/* Below this width the sidebar can't coexist with the document/source view,
   so it docks off-screen and slides in over the content on a swipe instead
   of sharing the row (see sidebar-swipe.js for the gesture). */
@media (max-width: 780px) {
  .viewer-layout { position: relative; overflow: hidden; }
  /* Fixed (viewport-relative), not absolute (ancestor-relative): the document
     editor's root doesn't get the #app { height: 100vh } shell the source
     viewer does, so .viewer-layout there is as tall as the whole scrollable
     document, not just the visible screen -- an absolutely positioned
     sidebar would inherit that height and end up centered off-screen. */
  .sidebar {
    position: fixed; top: 0; right: 0; z-index: 30;
    width: min(85vw, 320px); height: 100vh;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 14px rgba(0,0,0,0.2);
  }
  /* A sibling of .sidebar (not a child of it) -- .sidebar has overflow-y:
     auto, and per spec that forces overflow-x to auto too, which would clip
     anything poking out past its left edge. Sitting flush against the
     shared right edge instead gives the same "tab attached to the dock"
     look without being clipped by the sidebar's own scroll container. */
  .sidebar-grip {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 50%; right: 0; transform: translateY(-50%);
    width: 22px; height: 64px; padding: 0; z-index: 29;
    background: white; border: 1px solid #e0e2e8; border-right: none;
    border-radius: 8px 0 0 8px; box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    color: #8a92a5; font-size: 16px; line-height: 1; cursor: pointer;
  }
  .viewer-layout:has(.sidebar.is-open) .sidebar-grip { display: none; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-close {
    display: block; position: sticky; top: 0; z-index: 3; margin: -4px 0 4px auto;
    width: 32px; height: 32px; padding: 0; border: 1px solid #e0e2e8; border-radius: 50%;
    background: white; color: #46536b; font-size: 14px; line-height: 1; cursor: pointer;
  }
}
.sidebar h3 { margin-top: 0; font-size: 14px; }
.snippet-list { display: flex; flex-direction: column; gap: 10px; }
.snippet-card { border: 1px solid #e0e2e8; border-radius: 6px; overflow: hidden; }
.snippet-card img { width: 100%; display: block; }
.snippet-actions { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; font-size: 12px; background: #f7f8fa; }
.snippet-actions button { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 12px; }
.snippet-actions button.confirming { background: #c0392b; color: white; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
.empty { color: #8a92a5; font-size: 13px; }

.snippet-group { margin-bottom: 16px; }
.snippet-group-header {
  position: sticky; top: 0; z-index: 2; margin-bottom: 8px; padding: 6px 8px; border-radius: 4px;
  background: #eef1f7; color: #46536b; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
}
.snippet-group.current .snippet-group-header { background: #2266dd; color: white; }

/* ---- document editor (Google Docs-ish look) ---- */
.docbar {
  position: relative;
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: white; border-bottom: 1px solid #e0e2e8; flex-shrink: 0;
}
.docbar a.btn.disabled { background: transparent; border: 1px dashed #c4c9d4; color: #a0a6b4; opacity: 0.7; }
.docbar .home-link { color: #5f6368; font-size: 16px; text-decoration: none; }
.docbar-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 16px; font-weight: 600; color: #1c1c1c; pointer-events: none;
}

.file-menu { position: relative; }
.menu-trigger {
  border: none; background: none; padding: 6px 10px; border-radius: 4px; cursor: pointer;
  font-size: 14px; color: #3c4043;
}
.menu-trigger:hover { background: #f1f3f4; }
.menu-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 2px;
  background: white; border: 1px solid #e0e2e8; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 4px; min-width: 190px;
}
.menu-dropdown.open { display: block; }
.menu-dropdown button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #1c1c1c;
}
.menu-dropdown button:hover { background: #f1f3f4; }
.menu-dropdown button:disabled { color: #b0b4bd; cursor: default; }
.menu-dropdown button:disabled:hover { background: none; }
.menu-dropdown hr { border: none; border-top: 1px solid #e0e2e8; margin: 4px 0; }
.toolbar .file-menu .menu-trigger { border: none; background: none; padding: 6px 10px; font-size: 14px; }
.toolbar .file-menu .menu-trigger:hover { background: #f1f3f4; }
.toolbar .file-menu .menu-dropdown button { border: none; background: none; padding: 8px 12px; }
.toolbar .file-menu .menu-dropdown button:hover:not(:disabled) { background: #f1f3f4; }
.text-annotation-editor {
  position: absolute; box-sizing: border-box; margin: 0; border: none; outline: 2px solid #2266dd;
  background: rgba(255, 255, 255, 0.85); resize: none; overflow: hidden; line-height: 1.2; z-index: 5;
}

.doc-name {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 6px 8px; font-size: 17px; font-weight: 500; color: #1c1c1c;
  min-width: 160px; max-width: 360px;
}
.doc-name:hover { background: #f1f3f4; }
.doc-name:focus { outline: none; background: white; border-color: #cfd4e0; }
.save-btn {
  border: 1px solid #cfd4e0; background: #f7f8fa; padding: 6px 14px; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: #1c1c1c;
}
.save-btn:hover { background: #e4e6e8; }
.save-btn:disabled { color: #b0b4bd; cursor: default; background: #f7f8fa; }
.save-status { font-size: 12px; color: #8a92a5; min-width: 44px; }

.source-picker { display: flex; flex-direction: column; align-items: stretch; gap: 8px; font-size: 14px; margin-bottom: 14px; }
.source-picker .jump { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; color: #46536b; }
.source-picker .jump select { margin-left: 0; }
.source-picker select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-size: 14px; font-family: inherit; color: #1c1c1c;
  padding: 8px 34px 8px 14px; border: 1px solid #cfd4e0; border-radius: 8px;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f6368' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  cursor: pointer; width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
.source-picker select:hover { border-color: #adb5bd; }
.source-picker select:focus {
  outline: none; border-color: #2266dd; box-shadow: 0 0 0 3px rgba(34,102,221,0.18);
}
.source-picker select:disabled { background-color: #f1f3f4; color: #9aa0ad; cursor: default; border-color: #e0e2e8; }
.source-picker .btn {
  background: #f1f3f4; color: #1c1c1c; padding: 6px 12px; border-radius: 4px;
  text-decoration: none; font-size: 13px; text-align: center;
}
.source-picker .btn:hover { background: #e4e6e8; }
.upload-status { font-size: 12px; color: #8a92a5; }
.upload-status.error { color: #c0392b; }

.doc-toolbar { flex-wrap: wrap; }
.toolbar-hidden { display: none; }
.toolbar-link {
  border: 1px solid #cfd4e0; background: #f7f8fa; padding: 6px 12px; border-radius: 4px;
  color: inherit; text-decoration: none; font-size: 13px; cursor: pointer;
}
.toolbar-link:hover { background: #e4e6e8; }
.toolbar-sep { width: 1px; height: 22px; background: #e0e2e8; margin: 0 2px; }
.fmt-select {
  border: 1px solid #cfd4e0; border-radius: 4px; padding: 6px 8px; font-size: 13px;
  background: white; cursor: pointer;
}
.fmt-select-narrow { width: 56px; }
.fmt-btn { min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.fmt-btn svg { display: block; }
.toolbar .fmt-btn.active { background: #dde6fb; border-color: #2266dd; }
.toolbar button:disabled { opacity: 0.35; cursor: default; }
.toolbar button:disabled:hover { background: #f7f8fa; }
.fmt-btn-group { position: relative; display: inline-flex; gap: 1px; }
.fmt-btn-caret { min-width: 20px; padding-left: 2px; padding-right: 2px; font-size: 10px; }
.color-btn {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: 30px; padding: 4px 0; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 13px;
}
.color-btn:hover { background: #f1f3f4; }
.color-btn .swatch { width: 18px; height: 4px; border-radius: 2px; margin-top: 2px; background: #1c1c1c; }
.toolbar button.color-btn { border: none; background: transparent; font-family: inherit; color: inherit; }
.toolbar button.color-btn:hover { background: #f1f3f4; }

.editor-container { flex: 1; overflow: auto; background: #e8eaed; display: flex; justify-content: center; padding: 32px 20px; }
/* A4 at 96dpi (210mm x 297mm). Margins (--m-*) default to render_report_pdf's
   fitz mediabox + (36, 46, -36, -46) pt inset converted to px (*96/72), but are
   overridden per-document by document.js from the report's saved margins (see
   Page setup). */
.editor-page-wrap { position: relative; width: 794px; max-width: 100%; }
.editor {
  background: white; width: 100%; min-height: 1123px; box-sizing: border-box;
  padding: var(--m-header, 61.33px) var(--m-right, 48px) var(--m-footer, 61.33px) var(--m-left, 48px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18); font-size: 15px; line-height: 1.5;
  font-family: Arial, sans-serif;
}
/* Tiptap mounts its own contenteditable node as a child of #editor (see
   static/src/editor.js) rather than making #editor itself editable, so
   content-level rules target that child (given the "tiptap-content" class
   via editorProps.attributes), while #editor above stays the page-shaped
   background/padding wrapper around it. */
.editor .tiptap-content { outline: none; }
.editor .tiptap-content:empty::before { content: attr(data-placeholder); color: #9aa0ad; }

/* ---- margin guides: dashed outline showing the printable area on each
   simulated page, purely visual, rendered in an overlay layer (not inside
   #editor) so it can never leak into saved/exported content and never
   interferes with contenteditable's :empty placeholder. ---- */
.margin-guides {
  position: absolute; inset: 0; pointer-events: none; user-select: none;
}
.margin-guides .page-rect { position: absolute; left: 0; width: 100%; box-sizing: border-box; }
.margin-guides .page-rect::before {
  content: "";
  position: absolute;
  top: var(--mg-top, 61.33px); right: var(--mg-right, 48px);
  bottom: var(--mg-bottom, 61.33px); left: var(--mg-left, 48px);
  border: 1px dashed rgba(60, 64, 82, 0.28);
}
/* Preview of where the Page setup "page number" will land, positioned
   within the same header/footer margin band the dashed guide above insets
   to -- purely visual, like .page-rect itself; the real text is drawn by
   render_report_pdf/render_report_docx at export time (see app.py). Font
   and size come from the pageNumbers.font/fontSize settings, applied
   inline by renderMarginGuides() in editor.js. Height + matching line-height
   equal to the margin band centers the single line of text vertically in
   the band, instead of pinning it to the band's outer edge. */
.page-number-label {
  position: absolute; left: var(--mg-left, 48px); right: var(--mg-right, 48px);
  font-family: Arial, sans-serif; font-size: 11pt; color: #9aa0ad;
}
.page-number-top-left, .page-number-top-center, .page-number-top-right {
  top: 0; height: var(--mg-top, 61.33px); line-height: var(--mg-top, 61.33px);
}
.page-number-bottom-left, .page-number-bottom-center, .page-number-bottom-right {
  bottom: 0; height: var(--mg-bottom, 61.33px); line-height: var(--mg-bottom, 61.33px);
}
.page-number-top-left, .page-number-bottom-left { text-align: left; }
.page-number-top-center, .page-number-bottom-center { text-align: center; }
.page-number-top-right, .page-number-bottom-right { text-align: right; }
.editor .tiptap-content h1 { font-size: 28px; margin: 0.6em 0 0.3em; }
.editor .tiptap-content h2 { font-size: 22px; margin: 0.6em 0 0.3em; }
.editor .tiptap-content h3 { font-size: 18px; margin: 0.6em 0 0.3em; }

/* ---- multilevel numbering ("section numbers") ----
   Marker text ("1.", "1(2)(3)", ...) is computed straight from the
   ProseMirror document and rendered as a widget decoration -- a
   .list-marker span inserted at the start of each numbered item's first
   paragraph (see the ListMarkers plugin in static/src/listNumbering.js) --
   rather than via CSS counters/::before as the old contenteditable-era
   editor did. list-style stays suppressed here purely to hide the browser's
   own native marker so it doesn't double up with the injected one. */
.editor .tiptap-content ol { list-style: none; }
/* margin-right (not a trailing space in the marker's own text, which
   display:inline-block would trim as trailing whitespace at the edge of
   its own line box) is what actually separates a marker from the item's
   text. text-align: right keeps that margin the ONLY source of the gap
   regardless of marker length: left-aligned, a short marker like "1." sits
   flush against min-width's left edge, so its leftover min-width slack
   piles up *after* the text -- on top of margin-right -- while a longer
   cascaded marker like "1(2)(3)" (common a level or two down, since cascade
   concatenates each ancestor level's own text) already exceeds min-width
   and has no such slack, leaving only margin-right. That mismatch is what
   made nested markers look tighter than the root level's. Right-aligning
   moves any leftover slack to the marker's own left side instead, so the
   gap after every marker -- root or nested -- is exactly margin-right. */
/* Deliberately left to inherit font-family/size/weight from whatever block
   the marker widget lands in -- a <p> for "Normal text" or an
   <h1>/<h2>/<h3> for "Heading" (see ListItem's content spec in
   listNumbering.js) -- so a Heading list item's number visually matches
   its heading text (bigger, bold, same font), same as Word/Google Docs.
   min-width/margin-right stay in em so the gap after the marker scales
   with it too. The tradeoff: item text won't sit in a strict column
   across sibling items of different styles/sizes, since a bigger number
   takes more horizontal space -- that's expected, not a bug. */
.editor .tiptap-content .list-marker { display: inline-block; min-width: 1.6em; margin-right: 0.3em; text-align: right; }
/* A snippet image is rendered by a ProseMirror NodeView (see
   static/src/resizableImage.js) as <span class="img-wrap"><img
   class="doc-snippet">, plus four resize-handle spans>. Unlike the old
   contenteditable editor -- where a wrapper element got left behind
   because native image drag detaches only the bare <img> node (see the old
   static/document.js's cleanLegacyDocFigures comment for the full history)
   -- ProseMirror moves the whole node, wrapper and all, via a real
   document transform when it's dragged, so there's no stranding risk here.
   display:block plus explicit margin-left/margin-right (written by
   resizableImage.js's applyWrapperAttrs, not by this stylesheet) is what
   positions a snippet left/center/right. No max-width -- a snippet keeps
   whichever pixel size its `width`/`height` attrs say (defaulting to its
   native size), not shrunk to fit the page. */
.editor .tiptap-content .img-wrap {
  display: block; position: relative; margin: 16px 0; width: fit-content;
}
.editor .tiptap-content .img-wrap img.doc-snippet {
  display: block; border: 1px solid #e0e2e8;
}
.editor .tiptap-content .img-wrap.img-wrap-selected img.doc-snippet {
  outline: 2px solid #2266dd; outline-offset: 1px;
}

/* Resize handles: absolutely positioned within their own .img-wrap (a
   `position: relative` NodeView wrapper -- see resizableImage.js), shown on
   hover/selection rather than always visible. */
.editor .tiptap-content .img-wrap .resize-handle {
  position: absolute; width: 10px; height: 10px; margin: -5px;
  background: #2266dd; border: 1px solid white; border-radius: 2px;
  display: none;
}
.editor .tiptap-content .img-wrap .resize-handle-nw { top: 0; left: 0; cursor: nwse-resize; }
.editor .tiptap-content .img-wrap .resize-handle-ne { top: 0; right: 0; cursor: nesw-resize; }
.editor .tiptap-content .img-wrap .resize-handle-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.editor .tiptap-content .img-wrap .resize-handle-se { bottom: 0; right: 0; cursor: nwse-resize; }

/* ---- pagination: visual gap between simulated A4 pages ----
   Rendered as widget decorations inside .tiptap-content by the Pagination
   plugin (static/src/pagination.js), not as real editor content -- so
   unlike the old contenteditable-era version, there's no bleed-past-the-
   padding trick here: .tiptap-content itself carries no side padding of
   its own (that lives one level up, on #editor), so a full-width break
   already spans exactly the printable column. */
.editor .page-break {
  /* height is set inline by pagination.js per pass (a fixed ~1cm gap).
     background matches .editor-container's own backdrop (not white, like
     the page itself) so the gap reads as flat space between pages rather
     than a distinct bar -- no box-shadow, which previously drew a
     dark-to-light gradient across the gap's top/bottom edges. */
  box-sizing: border-box;
  background: #e8eaed;
  display: flex; align-items: center; justify-content: center;
  /* pointer-events stays enabled (unlike a typical decorative overlay) so
     this element itself captures hover/clicks instead of letting them fall
     through to the editable text behind it, which is what made the gap look
     like typable space (text-cursor on hover, caret landing nearby on
     click). editor.js also preventDefaults its mousedown so a click here
     is fully inert. */
  cursor: default; user-select: none;
}
.editor .page-break::after {
  content: "Page " attr(data-page);
  font-family: Arial, sans-serif; font-size: 11px; color: #9aa0ad;
}
/* Blank filler padding a page out to full A4 height when its content falls
   short -- unlike .page-break, this is blank space *within* a page, so
   clicks fall through (pointer-events: none) to land the caret at the
   nearest real text, same as clicking below the last line of a normal
   document. */
.editor .page-filler { pointer-events: none; user-select: none; }

.snippet-card img { cursor: default; }
.snippet-card .tag { margin-left: 0; }
.snippet-actions .insert-snippet { color: #2266dd; }

/* ---- document landing / picker ---- */
.doc-landing { width: 100%; max-width: 900px; padding: 12px 4px; }
.doc-landing h2 { font-weight: 500; }
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.report-card {
  display: block; position: relative; background: white; border: 1px solid #e0e2e8; border-radius: 8px; padding: 14px 16px;
  text-decoration: none; color: #1c1c1c; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.report-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.14); border-color: #cfd4e0; }
.report-card-name { font-weight: 600; margin-bottom: 4px; margin-right: 22px; word-break: break-word; }
.report-card-meta { font-size: 12px; color: #8a92a5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-card-delete { position: absolute; top: 8px; right: 8px; }
.report-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.report-list .report-card { padding: 10px 14px; }

/* ---- modals ---- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(20,22,30,0.4); z-index: 200;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal { background: white; border-radius: 8px; padding: 22px 24px; width: 420px; max-width: 90vw;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28); }
.modal h3 { margin-top: 0; }
.modal-field { display: block; margin: 14px 0; font-size: 13px; color: #46536b; }
.modal-field input, .modal-field select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 14px;
  border: 1px solid #cfd4e0; border-radius: 4px;
}
.modal-hint { font-size: 12px; color: #6b7280; margin: 4px 0 14px; }
.margin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.modal-wide { width: 520px; }
.list-cascade-field { display: flex; align-items: center; gap: 8px; }
.list-cascade-field input { margin: 0; }
.list-levels-grid {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px 10px; align-items: center;
  margin-top: 10px; font-size: 13px;
}
.list-levels-grid .list-level-label { color: #46536b; }
.list-levels-grid select { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-actions button {
  border: 1px solid #cfd4e0; background: #f7f8fa; padding: 7px 14px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.modal-actions button:last-child { background: #2266dd; color: white; border-color: #2266dd; }

/* ---- allegations workspace ---- */
#allegationsApp { display: flex; flex-direction: column; width: 100%; height: 100vh; }
.allegations-layout { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: auto; }
.allegations-layout .doc-landing { padding: 32px 20px; }
.allegations-workspace { flex: 1; display: flex; min-height: 0; min-width: 0; max-width: 100%; align-items: flex-start; }

.allegations-column {
  width: 340px; flex-shrink: 0; height: 100%; overflow-y: auto;
  padding: 20px 16px; border-right: 1px solid #e0e2e8; box-sizing: border-box;
}
.allegations-column-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.allegations-column-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

.allegation-list { display: flex; flex-direction: column; gap: 12px; }
.allegation-card {
  background: white; border: 1px solid #e0e2e8; border-radius: 8px; padding: 12px 14px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: grab; position: relative;
}
.allegation-card:hover { border-color: #cfd4e0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.allegation-card.selected { border-color: #2266dd; box-shadow: 0 0 0 2px rgba(34,102,221,0.18); }
.allegation-card.dragging { opacity: 0.4; }
.allegation-card-head { display: flex; align-items: center; gap: 6px; }
.allegation-card .drag-handle { color: #9aa0ad; cursor: grab; flex-shrink: 0; line-height: 1; }
.allegation-title-input {
  flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 4px 6px; font-size: 14px; font-weight: 600; color: #1c1c1c;
}
.allegation-title-input:hover { background: #f7f8fa; }
.allegation-title-input:focus { outline: none; background: white; border-color: #cfd4e0; }
.allegation-summary-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; border: 1px solid transparent; background: transparent;
  border-radius: 4px; padding: 4px 6px; font-size: 13px; color: #46536b; resize: vertical; overflow-y: hidden;
  font-family: inherit; line-height: 1.4;
}
.allegation-summary-input:hover { background: #f7f8fa; }
.allegation-summary-input:focus { outline: none; background: white; border-color: #cfd4e0; }
.allegation-card-meta { margin-top: 6px; padding: 0 6px; font-size: 11px; color: #8a92a5; }
.card-delete-btn {
  flex-shrink: 0; border: none; background: none; color: #b0b4bd; cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 4px; line-height: 1;
}
.card-delete-btn:hover { background: #f7e8e6; color: #c0392b; }
.card-delete-btn.confirming { background: #c0392b; color: white; font-size: 11px; padding: 4px 8px; }

/* Per-card save button, pinned to the bottom-right corner so it's reachable
   regardless of how tall the card's content has grown. */
.card-save-btn {
  position: absolute; right: 8px; bottom: 6px; border: none; background: none; color: #b0b4bd; cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 4px; line-height: 1;
}
.card-save-btn:hover { background: #eef3fc; color: #2266dd; }

/* Brief highlight on a field right after Enter forces an immediate save,
   since the header's save-status text is easy to miss while eyes are on
   the field being edited. */
@keyframes save-flash { from { box-shadow: 0 0 0 2px rgba(63,161,94,0.6); } to { box-shadow: 0 0 0 2px rgba(63,161,94,0); } }
.save-flash { animation: save-flash 0.6s ease-out; }

.allegation-detail { flex: 1; height: 100%; overflow-y: auto; padding: 24px 28px; box-sizing: border-box; }
.allegation-detail-head h2 { margin: 0 0 18px; font-size: 20px; word-break: break-word; }

.evidence-columns { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.evidence-column { flex: 1 1 320px; min-width: min(280px, 100%); }
.evidence-column-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.evidence-column-head h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.evidence-inculpatory .evidence-column-head h3 { color: #a02020; }
.evidence-exculpatory .evidence-column-head h3 { color: #1e7d3c; }
.evidence-inculpatory { border-top: 3px solid #d9534f; padding-top: 10px; }
.evidence-exculpatory { border-top: 3px solid #3fa15e; padding-top: 10px; }

.evidence-list { display: flex; flex-direction: column; gap: 10px; }
.evidence-card {
  display: flex; align-items: flex-start; gap: 8px; background: white; border: 1px solid #e0e2e8;
  border-radius: 8px; padding: 10px 10px 30px 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: grab;
  position: relative;
}
.evidence-card.dragging { opacity: 0.4; }
.evidence-card .drag-handle { color: #9aa0ad; cursor: grab; flex-shrink: 0; margin-top: 6px; line-height: 1; }
.evidence-card-body { flex: 1; min-width: 0; }
.evidence-card-body textarea {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  border-radius: 4px; padding: 4px 6px; font-size: 13px; color: #1c1c1c; resize: vertical; overflow-y: hidden; font-family: inherit; line-height: 1.4;
}
.evidence-card-body textarea:hover { background: #f7f8fa; }
.evidence-card-body textarea:focus { outline: none; background: white; border-color: #cfd4e0; }

/* ---- allegations: per-evidence-item document link (an evidence item can
   link to zero or one uploaded source document; the chip opens it) ---- */
.evidence-doc-control { margin-top: 4px; padding: 0 6px; position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.evidence-doc-add-btn, .evidence-doc-edit-btn {
  border: none; background: none; color: #8a92a5; font-size: 11px; cursor: pointer; padding: 2px 4px;
  font-family: inherit; border-radius: 4px;
}
.evidence-doc-add-btn:hover, .evidence-doc-edit-btn:hover { color: #2266dd; background: #eef3fc; }
.evidence-doc-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #2266dd;
  background: #eef3fc; border-radius: 4px; padding: 2px 6px; text-decoration: none; max-width: 100%;
}
.evidence-doc-chip:hover { background: #dde9fb; text-decoration: underline; }
.evidence-doc-popover {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
  background: white; border: 1px solid #cfd4e0; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14); padding: 8px; box-sizing: border-box; cursor: default;
}
.evidence-doc-filter {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid #e0e2e8; border-radius: 4px;
  padding: 5px 7px; font-size: 12px; font-family: inherit; margin-bottom: 6px;
}
.evidence-doc-filter:focus { outline: none; border-color: #2266dd; }
.evidence-doc-popover-list { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; }
.evidence-doc-option {
  display: block; width: 100%; text-align: left; border: none; background: none; padding: 5px 6px;
  font-size: 12px; color: #1c1c1c; cursor: pointer; border-radius: 4px; font-family: inherit;
}
.evidence-doc-option:hover { background: #f0f3f9; }
.evidence-doc-option.selected { background: #eef3fc; color: #2266dd; font-weight: 600; }
.evidence-doc-option-none { color: #8a92a5; border-bottom: 1px solid #eceef3; margin-bottom: 4px; padding-bottom: 6px; }
.evidence-doc-popover .empty { margin: 0; font-size: 12px; }

@media (max-width: 860px) {
  .allegations-workspace { flex-direction: column; height: auto; align-items: stretch; }
  .allegations-column { width: 100%; height: auto; max-height: 42vh; border-right: none; border-bottom: 1px solid #e0e2e8; }
  .allegation-detail { height: auto; width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  .allegation-detail { padding: 16px 12px; }
  .evidence-columns { gap: 16px; }
}

/* ---- cases workspace (reuses the allegations-workspace layout/classes above;
   these rules cover only what's specific to case cards and hearings) ---- */
.doc-name-static { display: inline-flex; align-items: center; }
.allegation-detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.case-identity-fields { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.case-identity-fields .modal-field { flex: 1 1 220px; margin: 0; }
/* Court / case number look like plain text until clicked into, matching the
   card fields elsewhere rather than a permanently-boxed form field. */
.case-identity-fields .modal-field input {
  border: 1px solid transparent; background: transparent;
}
.case-identity-fields .modal-field input:hover { background: #f7f8fa; }
.case-identity-fields .modal-field input:focus { outline: none; background: white; border-color: #cfd4e0; }

/* ---- cases workspace: each case's mandatory cause, picked on its card ---- */
.case-cause-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0 6px; }
.case-cause-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #8a92a5; }
.case-cause-select {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 3px 4px; font-family: inherit; font-size: 12px; color: #46536b; max-width: 100%; min-width: 0; flex: 1; text-overflow: ellipsis;
}
.case-cause-select:hover { background: #f7f8fa; }
.case-cause-select:focus { outline: none; background: white; border-color: #cfd4e0; }

.hearing-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hearing-card-head { display: flex; align-items: center; gap: 8px; }
.hearing-date-input, .hearing-title-input {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 4px 6px; font-family: inherit;
}
.hearing-date-input:hover, .hearing-title-input:hover { background: #f7f8fa; }
.hearing-date-input:focus, .hearing-title-input:focus { outline: none; background: white; border-color: #cfd4e0; }
.hearing-date-input { flex: 0 0 auto; font-size: 13px; color: #46536b; }
.hearing-title-input { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1c1c1c; }
.hearing-summary-input {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  border-radius: 4px; padding: 4px 6px; font-size: 13px; color: #1c1c1c; resize: vertical; overflow-y: hidden; font-family: inherit; line-height: 1.4;
}
.hearing-summary-input:hover { background: #f7f8fa; }
.hearing-summary-input:focus { outline: none; background: white; border-color: #cfd4e0; }

/* ---- hearing document lists (submitted/received source documents) ---- */
.hearing-doc-lists { display: flex; flex-flow: row wrap; gap: 6px 24px; margin-top: 2px; padding: 0 6px; }
.hearing-doc-list { position: relative; flex: 1 1 220px; min-width: 0; }
.hearing-doc-list-head { display: flex; align-items: center; gap: 8px; }
.hearing-doc-list-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #8a92a5; }
.hearing-doc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.hearing-doc-empty { font-size: 12px; color: #b0b4bd; }
.hearing-doc-chip { display: inline-flex; align-items: center; gap: 2px; }
.hearing-doc-remove-btn {
  border: none; background: none; color: #9aa0ad; cursor: pointer; font-size: 10px; padding: 2px 5px;
  border-radius: 4px; line-height: 1;
}
.hearing-doc-remove-btn:hover { background: #f7e8e6; color: #c0392b; }

/* ---- allegations: case-filter banner ---- */
.allegations-filter-bar {
  margin: 0 0 14px; padding: 8px 10px; background: #eef1f7; border-radius: 6px;
  font-size: 12px; color: #46536b;
}
.allegations-filter-bar a { color: #2266dd; text-decoration: none; }
.allegations-filter-bar a:hover { text-decoration: underline; }

/* ---- allegations: linked-cases popover inside each allegation card
   (an allegation can link to zero or more cases) ---- */
.case-links-inline { margin-top: 6px; padding: 0 6px; position: relative; }
.allegation-cause { margin-top: 2px; padding: 2px 6px; font-size: 11px; color: #8a92a5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegation-cause .allegation-cause-name { color: #46536b; font-weight: 500; }
.case-links-toggle {
  display: flex; max-width: 100%; min-width: 0; white-space: nowrap; align-items: center; gap: 4px; border: none; background: none;
  color: #8a92a5; font-size: 11px; cursor: pointer; padding: 2px 0; font-family: inherit;
}
.case-links-toggle:hover { color: #2266dd; }
.case-links-toggle .case-links-summary { color: #46536b; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.case-links-toggle:hover .case-links-summary { color: #2266dd; text-decoration: underline; }
.case-links-popover {
  position: absolute; top: 100%; left: 6px; right: 6px; z-index: 20; margin-top: 4px;
  background: white; border: 1px solid #cfd4e0; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14); padding: 10px 12px; box-sizing: border-box;
  cursor: default;
}
.case-links-popover .case-link-row { overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1c1c1c; cursor: pointer; padding: 3px 0; }
.case-links-popover .case-link-row input { margin: 0; }
.case-links-popover .empty { margin: 0; font-size: 12px; }

/* ---- causes workspace: goal cards (title + description + linked cases,
   reusing the .evidence-card shell and .case-links-inline popover above) ---- */
.goal-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.goal-title-input {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 4px 6px; font-family: inherit; font-size: 14px; font-weight: 600; color: #1c1c1c;
}
.goal-title-input:hover { background: #f7f8fa; }
.goal-title-input:focus { outline: none; background: white; border-color: #cfd4e0; }
.goal-description-input {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  border-radius: 4px; padding: 4px 6px; font-size: 13px; color: #1c1c1c; resize: vertical; overflow-y: hidden; font-family: inherit; line-height: 1.4;
}
.goal-description-input:hover { background: #f7f8fa; }
.goal-description-input:focus { outline: none; background: white; border-color: #cfd4e0; }

/* ---- allegations: "Things to Prove" section (above the evidence columns;
   reuses the .evidence-card shell like the goal cards above) ---- */
.to-prove-section { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid #e0e2e8; }
.to-prove-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.to-prove-title-input {
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  padding: 4px 6px; font-family: inherit; font-size: 14px; font-weight: 600; color: #1c1c1c;
}
.to-prove-title-input:hover { background: #f7f8fa; }
.to-prove-title-input:focus { outline: none; background: white; border-color: #cfd4e0; }
.to-prove-summary-input {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent;
  border-radius: 4px; padding: 4px 6px; font-size: 13px; color: #1c1c1c; resize: vertical; overflow-y: hidden; font-family: inherit; line-height: 1.4;
}
.to-prove-summary-input:hover { background: #f7f8fa; }
.to-prove-summary-input:focus { outline: none; background: white; border-color: #cfd4e0; }

/* ---- allegations: per-to-prove evidence-links popover (a "to prove" item
   can associate with zero or more evidence cards from the columns below) ---- */
.to-prove-evidence-links { margin-top: 6px; padding: 0 6px; position: relative; }
.to-prove-evidence-toggle {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none;
  color: #8a92a5; font-size: 11px; cursor: pointer; padding: 2px 0; font-family: inherit;
}
.to-prove-evidence-toggle:hover { color: #2266dd; }
.to-prove-evidence-toggle .to-prove-evidence-summary { color: #46536b; font-weight: 500; }
.to-prove-evidence-toggle:hover .to-prove-evidence-summary { color: #2266dd; text-decoration: underline; }
.to-prove-evidence-popover {
  position: absolute; top: 100%; left: 6px; right: 6px; z-index: 20; margin-top: 4px;
  background: white; border: 1px solid #cfd4e0; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14); padding: 8px 10px; box-sizing: border-box;
  cursor: default; max-height: 220px; overflow-y: auto;
}
.to-prove-evidence-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #1c1c1c; cursor: pointer; padding: 4px 0; }
.to-prove-evidence-row input { margin: 2px 0 0; flex-shrink: 0; }
.to-prove-evidence-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.to-prove-evidence-row.kind-inculpatory .to-prove-evidence-kind { color: #a02020; }
.to-prove-evidence-row.kind-exculpatory .to-prove-evidence-kind { color: #1e7d3c; }
.to-prove-evidence-popover .empty { margin: 0; font-size: 12px; }

/* Sign in / sign up (templates/auth.html) and the signed-in bar on the home page. */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: 380px; max-width: 100%; box-sizing: border-box; }
.auth-site-name { margin: 0 0 20px; font-size: 22px; font-weight: 600; text-align: center; }
.auth-terms { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0; font-size: 13px; color: #46536b; }
.auth-terms input { margin-top: 2px; }
.terms-body { max-height: 55vh; overflow-y: auto; font-size: 13px; line-height: 1.5; color: #374151; }
.terms-body ol { padding-left: 20px; margin: 0; }
.terms-body li { margin-bottom: 10px; }
.auth-captcha { display: block; max-width: 100%; height: auto; margin: 4px 0; border-radius: 4px; }
.auth-switch { margin: 14px 0 0; }
.account-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  font-size: 13px; color: #46536b; }
.account-bar form { margin: 0; }
.upload-case { font-size: 13px; color: #46536b; }
.upload-case select { margin-left: 4px; padding: 6px 8px; border: 1px solid #cfd4e0; border-radius: 4px; }

.docbar-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px; max-width: 45%; }
.docbar-center .docbar-title { position: static; transform: none; flex-shrink: 0; }
.docbar-center .cause-picker { min-width: 0; text-overflow: ellipsis; }

/* Narrow screens: the centered title can't float over the bar any more.
   Row 1 keeps the home link, the left nav link (.docbar-lead) and the title;
   everything else (cause picker, status, right-hand links) wraps below.
   .docbar-center dissolves so its title and picker order independently, and
   the ::after is a full-width break between the two groups. */
@media (max-width: 720px) {
  .docbar { flex-wrap: wrap; gap: 8px 12px; }
  .docbar-center { display: contents; }
  .docbar > *, .docbar-center > * { order: 2; }
  .docbar > .docbar-lead { order: 0; }
  .docbar > .docbar-center > .docbar-title, .docbar > .docbar-center > .doc-name-static { order: 1; }
  .docbar::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .docbar .doc-name { min-width: 0; flex: 1 1 140px; }
  .topbar { flex-wrap: wrap; gap: 8px 14px; }
  .topbar .doc-title { flex: 1 1 100%; min-width: 0; }
  .topbar .doc-title .doc-name { flex: 1 1 100px; min-width: 0; max-width: none; }
}
.cause-label { font-size: 13px; color: #8a92a5; margin-left: 10px; margin-right: 4px; white-space: nowrap; }
.cause-picker { font-size: 13px; padding: 4px 8px; border: 1px solid #cfd4e0; border-radius: 6px;
  background: #f7f8fa; color: #46536b; max-width: 200px; }
.cause-static { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

.annotation-delete-icon {
  position: absolute; z-index: 5; width: 22px; height: 22px; padding: 0;
  border: 1px solid #b42318; border-radius: 50%; background: #fff; color: #b42318;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.annotation-delete-icon:hover { background: #b42318; color: #fff; }

/* Annexure page (annexures.html) */
.annex-doc-heading {
  align-self: stretch; color: #fff; font-weight: 600; font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.35); padding: 8px 0 4px; margin-top: 12px;
}
.annex-list { display: flex; flex-direction: column; gap: 6px; }
.annex-item {
  display: flex; align-items: center; gap: 8px; padding: 8px; background: #f7f8fa;
  border: 1px solid #e0e2e8; border-radius: 6px; cursor: grab; font-size: 13px;
}
.annex-item.dragging { opacity: 0.4; }
.annex-item.drop-before { box-shadow: 0 -2px 0 #2266dd; }
.annex-item.drop-after { box-shadow: 0 2px 0 #2266dd; }
.annex-grip { color: #a0a6b4; letter-spacing: -3px; user-select: none; }
.annex-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.annex-name a { color: inherit; text-decoration: none; }
.annex-name a:hover { text-decoration: underline; }
.annex-name a.annex-view { color: #2266dd; font-size: 12px; margin-top: 2px; }
.annex-delete { border: none; background: none; color: #c0392b; cursor: pointer; padding: 4px; display: flex; }
.annex-delete:disabled { color: #c4c9d4; cursor: not-allowed; }
.annex-name select, .annex-name .annex-range { margin-top: 4px; font-size: 12px; padding: 3px 4px; }
.annex-range.invalid { border-color: #c0392b; outline-color: #c0392b; }

.annex-numbering .modal-field { margin: 8px 0; }
.annex-numbering select, .annex-numbering input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.annex-numbering input.invalid { border-color: #c0392b; }
.annex-section-divider { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e0e2e8; }
.color-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 6px; }
.color-swatch { aspect-ratio: 1; padding: 0; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; cursor: pointer; }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { outline: 2px solid #2266dd; outline-offset: 1px; }
.page-number-label .page-number-outline { display: inline-block; box-sizing: border-box; text-align: center; vertical-align: middle; }
.page-number-label .page-number-shaped { height: 1.6em; min-width: 1.6em; line-height: 1.6em; padding: 0 0.3em; }

.annex-toggle { display: block; margin: 12px 0 4px; font-size: 13px; color: #46536b; cursor: pointer; }
.color-popover .color-none { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 4px 6px; font-size: 13px; text-align: left; }
.color-none-box { width: 18px; height: 18px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 3px; background: linear-gradient(to top right, transparent calc(50% - 1px), #c0392b, transparent calc(50% + 1px)), #fff; }
.color-pick-btn { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; border: 1px solid #cfd4e0; background: #f7f8fa; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.modal-field .color-popover { width: 100%; }

/* Collaborations (templates/collaborations.html) and the title-bar bell. */
.notify-bell { position: relative; display: inline-flex; align-items: center; color: #5f6368; text-decoration: none; padding: 4px; }
.notify-bell:hover { color: #2266dd; }
.notify-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: #c0392b; color: white; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.collab-page { max-width: 760px; margin: 24px auto 64px; padding: 0 20px; }
.collab-invite { background: #fcfcfd; border: 1px solid #d5dae3; border-radius: 12px; padding: 4px 19px 16px; margin-bottom: 24px; }
.collab-invite input[type=email], .collab-invite input[type=text] { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #cfd4e0; border-radius: 6px; }
.collab-captcha-row { display: flex; align-items: center; gap: 10px; }
.collab-list { display: flex; flex-direction: column; gap: 12px; }
.collab-card { border: 1px solid #e0e2e8; border-radius: 10px; background: white; padding: 12px 16px; }
.collab-card.is-new { border-color: #2266dd; box-shadow: 0 0 0 2px rgba(34,102,221,0.15); }
.collab-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.collab-email { font-weight: 600; word-break: break-all; }
.collab-status { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 10px; background: #eef1f7; color: #46536b; }
.collab-status.received { background: #fff4d6; color: #7a5b00; }
.collab-status.confirmed { background: #e2f5e7; color: #1d6b34; }
.collab-when { font-size: 12px; color: #8a92a5; margin-left: auto; }
.collab-actions { display: flex; gap: 8px; margin-top: 10px; }
.collab-access h4 { margin: 14px 0 4px; font-size: 13px; color: #46536b; }
.collab-access ul { margin: 0; padding-left: 18px; font-size: 13px; }
.collab-access .kind { font-weight: 600; text-transform: capitalize; }
.collab-role { font-size: 11px; color: #8a92a5; }
.collab-edit-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.collab-edit-row span.title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-edit-row select { padding: 3px 6px; border: 1px solid #cfd4e0; border-radius: 4px; }
.collab-delete { border: none; background: none; padding: 4px; border-radius: 4px; color: #8a92a5; cursor: pointer; line-height: 0; }
.collab-delete:hover { color: #c0392b; background: #fbeceb; }
.collab-delete:disabled { opacity: 0.5; cursor: default; }
.snippet-creator { font-size: 11px; color: #666; margin-top: 2px; }

/* Secret-key sharing (collaborations page) */
.key-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.key-form select { padding: 8px; border: 1px solid #cfd4e0; border-radius: 6px; max-width: 280px; }
.key-form .modal-field { margin: 0; }
.key-group h4 { margin: 14px 0 6px; }
.key-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #e6e9f0; }
.key-row.inactive { opacity: .65; }
.key-title { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-value { font-size: 12px; background: #f1f3f8; padding: 2px 6px; border-radius: 4px; user-select: all; }

/* Viewers can read a report but not change it: hide the editing controls
   (the "Create annexure" link stays) and the snippet Insert buttons. */
#docApp.report-readonly #fmtControls > :not(.toolbar-link),
#docApp.report-readonly .insert-snippet,
#docApp.report-readonly #saveBtn,
#docApp.report-readonly #saveStatus { display: none; }

/* Annotations page for viewers: no editing controls, no snippet Delete. */
#app.doc-readonly .del-snippet,
#app.doc-readonly #saveBtn,
#app.doc-readonly .mode-group,
#app.doc-readonly .color-pop-wrap,
#app.doc-readonly #undoBtn,
#app.doc-readonly #clearBtn,
#app.doc-readonly #modeHint { display: none; }

/* Read-only cards/panes (see static/readonly-lock.js). */
.ro-locked input[readonly], .ro-locked textarea[readonly] { background: #f6f7f9; color: #6b7280; }
.ro-locked button:disabled, .ro-locked select:disabled { opacity: .45; cursor: not-allowed; }
#casesApp .btn:disabled, #causesApp .btn:disabled, #allegationsApp .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Annexure page for viewers: the right panel is read-only. */
#app.annex-readonly .annex-grip { visibility: hidden; }
#app.annex-readonly .annex-delete { display: none; }
.site-also { margin: 14px 0 0; font-size: 12px; color: #667; text-align: center; }