:root {
  --add-bg: #e6ffed; --add-border: #34d058;
  --remove-bg: #ffeef0; --remove-border: #d73a49;
  --move-bg: #fff8e6; --move-border: #dbab09;
  --ink: #24292e; --muted: #6a737d; --border: #d0d7de;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); margin: 0; background: #fafbfc; }
.app-header { padding: 16px 24px; border-bottom: 1px solid var(--border); background: #fff; }
.app-header h1 a { color: inherit; text-decoration: none; }
.account-bar { text-align: right; padding: 6px 24px; font-size: 13px; background: #fff; border-bottom: 1px solid var(--border); }
.account-bar a { color: var(--muted); text-decoration: none; }
.account-bar a:hover { text-decoration: underline; }
main { padding: 24px; }

/* Home-page-only branding (see templates/home.html's header/footer block
   overrides) -- other pages keep the plain .app-header title. */
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: #0969da; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.5px;
}
.brand-name { font-size: 20px; font-weight: 600; }
.app-footer { text-align: center; padding: 16px 24px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 24px; }
.card { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 24px; }
button { margin-top: 16px; padding: 8px 16px; background: #2da44e; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
button:hover { background: #2c974b; }

table.results-table { border-collapse: collapse; width: 100%; margin-top: 16px; font-size: 13px; }
table.results-table th, table.results-table td {
  border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top;
}

.config-error { background: var(--remove-bg); border: 1px solid var(--remove-border); color: #82071e; border-radius: 6px; padding: 12px 16px; }

.hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.card h2 + table.results-table { margin-top: 8px; }
.card h2:not(:first-child) { margin-top: 32px; }

.filter-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.filter-form select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }

.approved-banner { background: var(--add-bg); border: 1px solid var(--add-border); color: #116329; border-radius: 6px; padding: 12px 16px; }

progress { width: 100%; height: 20px; }

.scenario-badge { display: inline-block; background: #ddf4ff; color: #0969da; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.summary-line { font-weight: 600; margin: 0; }
.legend { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0; font-size: 13px; }
.legend li::before { content: "\25A0"; margin-right: 6px; }
.legend-add::before { color: var(--add-border); }
.legend-remove::before { color: var(--remove-border); }
.legend-move::before { color: var(--move-border); }

/* Summary (left) and color-coding legend (right) share one line to keep
   the header compact -- see .report-page below for why header height
   matters here. */
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Report page only: dock the header (article name, summary, legend,
   toolbar) so it's always visible, and let just the diff area below it
   scroll -- most useful with the next/previous change navigation, which
   would otherwise scroll the summary/toolbar out of view too. Scoped to
   body.report-page so it doesn't affect the home/progress/results pages,
   which share this stylesheet but not this layout. */
body.report-page { display: flex; flex-direction: column; height: 100vh; margin: 0; overflow: hidden; }
body.report-page .app-header { flex: 0 0 auto; }
body.report-page main.diff-grid { flex: 1 1 auto; overflow-y: auto; margin: 0; }

.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
/* Hidden, not removed: report.js's whole IIFE (Approve/Reject, paragraph
   edit, Prev/Next -- everything) bails out early via `if (!toggle) return;`
   when #rendered-toggle isn't in the DOM at all, so removing this element
   from report.html would silently break every other feature on the page.
   The checkbox stays checked, so the rendered view keeps showing by
   default; there's just no way to toggle to the raw/source view now. */
.view-toggle { display: none; }
.btn-secondary { margin-top: 0; padding: 6px 12px; background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-secondary:hover:not(:disabled) { background: #f3f4f6; }
.btn-secondary:disabled { opacity: 0.5; cursor: default; }
.change-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

.review-actions { display: flex; align-items: center; gap: 8px; }
.review-actions form { margin: 0; }
.btn-approve { border-color: var(--add-border); color: #116329; }
.btn-approve:hover { background: var(--add-bg); }
.btn-reject { border-color: var(--remove-border); color: #82071e; }
.btn-reject:hover { background: var(--remove-bg); }

#review-dialog, #confirm-complete-dialog, #paragraph-edit-dialog {
  border: 1px solid var(--border); border-radius: 6px; padding: 20px; width: 400px; max-width: 90vw;
}
#review-dialog::backdrop, #confirm-complete-dialog::backdrop, #paragraph-edit-dialog::backdrop {
  background: rgba(27, 31, 35, 0.4);
}
#review-dialog h2, #confirm-complete-dialog h2, #paragraph-edit-dialog h2 { margin: 0 0 12px; font-size: 16px; }
/* Wide enough for two comfortably-readable multi-line text boxes stacked
   on top of each other -- the shared 400px review/confirm dialog width is
   too cramped for that. */
#paragraph-edit-dialog { width: 560px; }
.edit-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.dialog-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.dialog-field label { font-size: 13px; font-weight: 600; }
.dialog-field input, .dialog-field textarea {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit;
}
#paragraph-current-text { background: #f6f8fa; color: var(--muted); resize: vertical; }
#paragraph-correction-text { resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.diff-col { min-width: 0; }
.diff-col h2 { font-size: 14px; text-transform: uppercase; color: var(--muted); }
.diff-content {
  background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 16px;
  overflow-x: auto; min-width: 0; overflow-wrap: anywhere;
}

/* Raw-HTML mode: report.js swaps this element's own content (never both
   at once) between the server-rendered webpage markup and the server-
   rendered source view (cached from a <template>, which holds it inert --
   not part of the layout at all -- until the checkbox is unchecked). The
   .diff-source class just switches this one element's typography.
   white-space: pre (not pre-wrap) is deliberate here: each source line
   keeps its real indentation intact, and a long line scrolls horizontally
   within this box (.diff-content already has overflow-x:auto) instead of
   wrapping -- wrapping would restart continuation lines at the left edge
   and make the indentation look broken. The rendered view still just
   word-wraps with no scrollbar, since it isn't showing raw whitespace. */
.diff-content.diff-source { white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; }

.src-line { display: block; padding: 1px 4px; border-radius: 3px; }
span.diff-word-add { background: var(--add-bg); color: #116329; }
span.diff-word-remove { background: var(--remove-bg); color: #82071e; text-decoration: line-through; }

.diff-current-change { outline: 3px solid #0969da; outline-offset: 2px; }
/* Applied (in addition to .diff-current-change on the containing block)
   to the specific ins/del/span word-diff elements inside a "changed"
   block when navigation lands on it -- pinpoints the actual edited
   words, not just the paragraph they're in. */
.diff-current-word { outline: 2px solid #0969da; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.25); }
.diff-content p, .diff-content li, .diff-content td, .diff-content th,
.diff-content blockquote, .diff-content h1, .diff-content h2, .diff-content h3,
.diff-content h4, .diff-content h5, .diff-content h6 {
  padding: 2px 4px; border-radius: 3px;
}
.diff-content table { border-collapse: collapse; width: 100%; }
.diff-content td, .diff-content th { border: 1px solid var(--border); }

.diff-block-add { background: var(--add-bg); border-left: 3px solid var(--add-border); }
.diff-block-remove { background: var(--remove-bg); border-left: 3px solid var(--remove-border); text-decoration: line-through; }
.diff-block-move { background: var(--move-bg); border-left: 3px solid var(--move-border); }
.diff-block-change { border-left: 3px solid var(--move-border); }

/* Reviewer per-paragraph correction: the edit button is baked directly
   into diff_engine.py's rendered output for right-column "changed"/
   "added" blocks only (see _paragraph_edit_button) -- never present in
   the raw/source view. Extra left padding on the right column makes room
   for the button to sit in the margin rather than overlapping the text;
   position: relative on the eligible blocks anchors it there. */
#right-content { padding-left: 34px; }
#right-content .diff-block-change, #right-content .diff-block-add { position: relative; }
.paragraph-edit-btn {
  position: absolute; left: -26px; top: 2px; width: 20px; height: 20px; padding: 0;
  border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--muted);
  font-size: 12px; line-height: 18px; cursor: pointer;
}
.paragraph-edit-btn:hover { background: #f3f4f6; color: var(--ink); }
/* The edit button is baked directly into run.right_html at diff-compute
   time (see diff_engine._paragraph_edit_button), before this article's
   in_sample membership or review status is even known (sample assignment
   happens once, after every row in the CSV has been processed; approval
   happens even later) -- so it can't be left out of the markup itself for
   an out-of-sample or already-approved article. Hidden here instead,
   scoped by the no-edit class report.html puts on <body> whenever the
   Approve/Reject buttons are also hidden (see templates/report.html),
   which also removes it from the tab order and click surface. */
body.no-edit .paragraph-edit-btn { display: none; }

ins.diff-word-add { background: var(--add-bg); color: #116329; text-decoration: none; }
del.diff-word-remove { background: var(--remove-bg); color: #82071e; }

@media (max-width: 900px) {
  .diff-grid { grid-template-columns: 1fr; }
}