/* RapidMeta Evidence Paper Studio — pilot stylesheet.
   Scoped under #tab-paper / .paper-studio-page so it never touches the
   dark RapidMeta workbench UI. The paper itself is a white "sheet" sitting
   on the dark bench. */

#tab-paper {
  --paper-bg: #1e2530;            /* bench behind the sheet (matches dark UI) */
  --paper-surface: #ffffff;
  --paper-ink: #1f2933;
  --paper-muted: #667085;
  --paper-border: #e5e7eb;
  --paper-soft-blue: #eef6ff;
  --paper-soft-yellow: #fff8df;
  --paper-soft-green: #eefaf2;
  --paper-soft-red: #fff1f1;
  --paper-accent: #2454a6;
  --paper-radius-lg: 22px;
  --paper-radius-md: 14px;
  --paper-shadow: 0 18px 50px rgba(15, 23, 42, 0.45);
  /* Desktop writing width. The studio shows the paper PLUS yellow writing boxes, tips
     and figures, so it should fill the screen. The flex canvas grows to fill the whole
     track (no cap) on screen; print/clean export is re-capped to A4 below. */
  --paper-max-width: none;
  background: var(--paper-bg);
}

/* ---- toolbar ---- */
.paper-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: #131c2b;   /* opaque (no backdrop-filter: it would make a containing block
                            that traps the position:fixed dropdown menus) */
  border-bottom: 1px solid #334155;
}
.paper-toolbar .ps-title {
  font-weight: 800;
  color: #e2e8f0;
  margin: 0 auto 0 0;            /* keep the flex push-right; zero the default <h1> block margins */
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.paper-toolbar button {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border-radius: 0.7rem;
  background: #334155;
  color: #e2e8f0;
  border: 1px solid #475569;
  cursor: pointer;
  transition: all 0.15s;
}
.paper-toolbar button:hover { background: #475569; }
.paper-toolbar button.primary { background: var(--paper-accent); border-color: var(--paper-accent); color: #fff; }
.paper-toolbar button.primary:hover { background: #1d4486; }
.paper-toolbar .ps-save-status { font-size: 0.72rem; color: #94a3b8; margin-left: 0.4rem; white-space: nowrap; }
.paper-toolbar .ps-save-status.ps-saving { color: #d97706; }
.paper-toolbar .ps-save-status.ps-saved { color: #16a34a; }
.paper-toolbar button#btnFocusMode[aria-pressed="true"] { background: var(--paper-accent); border-color: var(--paper-accent); color: #fff; }

/* ---- focus mode (Feature A): hide the host chrome for a full-screen writing space ----
   display:none reclaims the space AND removes the bars from the tab order + a11y tree
   (what the review wanted inert/aria-hidden for), and works without the Fullscreen API. */
body.ps-focus-mode #rapidmeta-integrity-badge,
body.ps-focus-mode > header,
body.ps-focus-mode .alm-paper-top,
body.ps-focus-mode nav[role="tablist"] { display: none !important; }
.ps-provenance { display: none; }
body.ps-focus-mode .ps-provenance { display: inline; font-size: 0.72rem; color: #94a3b8; }

/* Always-available escape from focus mode. Fixed, high z-index, large tap target —
   shown ONLY in focus mode so the user can never get trapped full-screen with no way
   back. (The toolbar's own "Exit focus" button + Esc also work; this is the guarantee.) */
.ps-focus-fab { display: none; }
body.ps-focus-mode .ps-focus-fab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  position: fixed; top: 12px; right: 12px; z-index: 100000;
  padding: 0.55rem 0.95rem; min-height: 42px;
  background: var(--paper-accent, #2563eb); color: #fff;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
  font: 700 0.82rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.ps-focus-fab:hover { filter: brightness(1.07); }
.ps-focus-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Workflow-stage back-navigation in the top bar (issue: no way back to Search/
   Screening/Extraction/Analysis from Paper Studio). State is preserved because every
   stage app reads the same shared localStorage workspace buses. */
.alm-stage-nav { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-left: auto; }
.alm-stage-label { font-size: 0.72rem; color: #94a3b8; margin-right: 0.15rem; }
.alm-stage-nav a {
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
  color: #1d4ed8; padding: 0.3rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff;
}
.alm-stage-nav a:hover, .alm-stage-nav a:focus-visible { border-color: #1d4ed8; background: #eff4ff; }
@media (prefers-color-scheme: dark) {
  .alm-stage-nav a { color: #93c5fd; background: #1e293b; border-color: #334155; }
  .alm-stage-nav a:hover, .alm-stage-nav a:focus-visible { border-color: #60a5fa; background: #243044; }
}

/* Per-study data-check panel in the sidebar. */
.paper-datacheck-panel h4 { margin: 0 0 0.4rem; }
.dc-summary { font-size: 0.78rem; color: #475569; margin: 0 0 0.3rem; }
.dc-note { font-size: 0.7rem; color: #64748b; margin: 0 0 0.4rem; }
.dc-empty { font-size: 0.78rem; color: #64748b; }
.dc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dc-row { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.45rem 0.55rem; background: #f8fafc; }
.dc-title { font-size: 0.78rem; font-weight: 600; color: #0f172a; line-height: 1.35; }
.dc-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.dc-eff { font-size: 0.76rem; color: #166534; font-variant-numeric: tabular-nums; }
.dc-se { color: #64748b; }
.dc-missing { font-size: 0.76rem; color: #b45309; font-weight: 700; }
.dc-links { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.dc-link { font-size: 0.72rem; font-weight: 600; text-decoration: none; color: #1d4ed8; padding: 0.1rem 0.4rem; border: 1px solid #cbd5e1; border-radius: 6px; }
.dc-link.ct { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.dc-link:hover { filter: brightness(1.05); }
@media (prefers-color-scheme: dark) {
  .dc-summary { color: #94a3b8; }
  .dc-row { background: #0f172a; border-color: #1e293b; }
  .dc-title { color: #e2e8f0; }
  .dc-eff { color: #4ade80; }
  .dc-link { color: #93c5fd; background: #1e293b; border-color: #334155; }
  .dc-link.ct { background: #1d4ed8; color: #fff; }
}

/* "More" overflow + download menus */
.toolbar-more, .download-menu { position: relative; }
.toolbar-more > summary { list-style: none; cursor: pointer; font-size: 0.78rem; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 0.7rem; background: #334155; color: #e2e8f0; border: 1px solid #475569; }
.toolbar-more > summary::-webkit-details-marker { display: none; }
.toolbar-more[open] > summary { background: #475569; }
/* Fixed-position (viewport-anchored) so they escape the tab's overflow:auto scroll
   container and never clip; internal scroll handles long menus. */
.toolbar-more-body { position: fixed; left: 14px; top: 54px; z-index: 60; width: 230px; max-height: calc(100vh - 70px); overflow-y: auto; background: #0f172a; border: 1px solid #334155; border-radius: 0.8rem; padding: 0.5rem; box-shadow: 0 18px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 0.3rem; }
.toolbar-more-body button { text-align: left; font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.6rem; border-radius: 0.5rem; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; cursor: pointer; }
.toolbar-more-body button:hover { background: #334155; }
.toolbar-more-body button.danger { color: #fca5a5; border-color: #7f1d1d; background: #2a1414; margin-top: 0.2rem; }
.toolbar-more-body button.danger:hover { background: #3a1a1a; }

/* download menu */
.download-menu { position: relative; }
.download-menu > summary { list-style: none; cursor: pointer; font-size: 0.78rem; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 0.7rem; background: #334155; color: #e2e8f0; border: 1px solid #475569; }
.download-menu > summary::-webkit-details-marker { display: none; }
.download-menu[open] > summary { background: #475569; }
.download-menu-body { position: fixed; right: 14px; top: 54px; z-index: 60; width: 260px; max-height: calc(100vh - 70px); overflow-y: auto; background: #0f172a; border: 1px solid #334155; border-radius: 0.8rem; padding: 0.6rem; box-shadow: 0 18px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 0.3rem; }
/* Tall menus (esp. Advanced formats) overflow on short screens. Make the scroll obvious
   and keep the wheel inside the menu so it never feels stuck:
   - a VISIBLE scrollbar tells the user it scrolls;
   - overscroll-behavior:contain stops the wheel from chaining to the page behind it. */
.toolbar-more-body, .download-menu-body { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #64748b #1e293b; }
.toolbar-more-body::-webkit-scrollbar, .download-menu-body::-webkit-scrollbar { width: 11px; }
.toolbar-more-body::-webkit-scrollbar-track, .download-menu-body::-webkit-scrollbar-track { background: #1e293b; border-radius: 6px; }
.toolbar-more-body::-webkit-scrollbar-thumb, .download-menu-body::-webkit-scrollbar-thumb { background: #64748b; border-radius: 6px; border: 2px solid #1e293b; }
.toolbar-more-body::-webkit-scrollbar-thumb:hover, .download-menu-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* On phones, render menus as a centered bottom sheet so nothing is clipped. */
@media (max-width: 640px) {
  .download-menu-body, .toolbar-more-body { left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(-50%); width: min(94vw, 380px); max-height: 75vh; border-radius: 0.9rem 0.9rem 0 0; }
}
.download-menu-body strong { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-top: 0.2rem; }
.download-menu-body button { text-align: left; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.6rem; border-radius: 0.5rem; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; cursor: pointer; }
.download-menu-body button:hover { background: #334155; }
.download-menu-body hr { border: none; border-top: 1px solid #334155; margin: 0.3rem 0; }
.download-menu-body .fig-fmt { font-size: 0.72rem; color: #94a3b8; display: flex; align-items: center; gap: 0.4rem; }
.download-menu-body .fig-fmt select { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 0.4rem; padding: 0.2rem; font-size: 0.78rem; }

/* ---- layout ---- */
.paper-studio-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
}
.paper-sidebar {
  flex: 0 0 290px;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.paper-sidebar section {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: var(--paper-radius-md);
  padding: 1rem;
}
.paper-sidebar h4 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #94a3b8;
  margin-bottom: 0.7rem;
}
.paper-mission {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #cbd5e1;
}
.paper-mission strong { color: #f8fafc; }

/* ---- left section navigator (Feature B) ---- */
.paper-nav-panel { background: transparent !important; border: none !important; padding: 0 !important; }
.section-nav-wrap { background: rgba(15, 23, 42, 0.6); border: 1px solid #334155; border-radius: var(--paper-radius-md); padding: 0.6rem 0.8rem; }
.section-nav-wrap > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.section-nav-wrap > summary::-webkit-details-marker { display: none; }
.section-nav-wrap .nav-h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #94a3b8; }
.nav-progress { font-size: 0.7rem; font-weight: 700; color: #cbd5e1; }
.nav-skip { display: inline-block; margin: 0.5rem 0 0.2rem; font-size: 0.74rem; font-weight: 700; color: #93c5fd; background: transparent; border: none; cursor: pointer; padding: 0.2rem 0; }
.nav-skip:hover { color: #bfdbfe; text-decoration: underline; }
.nav-grouplist { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.nav-group { list-style: none; margin-bottom: 0.45rem; }
.nav-group-title { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 800; margin: 0.45rem 0 0.15rem; }
.nav-group > ul { list-style: none; margin: 0; padding: 0; }
.nav-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: transparent; border: none; color: #cbd5e1; font-size: 0.8rem; line-height: 1.3; padding: 0.4rem 0.45rem; border-radius: 6px; cursor: pointer; min-height: 34px; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); }
.nav-item[aria-current="step"] { background: rgba(59, 130, 246, 0.18); color: #fff; }
.nav-glyph { flex: 0 0 auto; color: #64748b; font-weight: 700; }
.nav-item.nav-done .nav-glyph { color: #4ade80; }
.nav-item.nav-done .nav-label { color: #94a3b8; }
.nav-item:focus-visible { outline: 3px solid var(--paper-accent) !important; outline-offset: 1px; }

/* ---- one-section wizard (Feature C) ---- */
.ps-wizard-bar { background: #f8fafc; border: 1px solid var(--paper-border); border-radius: var(--paper-radius-md); padding: 0.7rem 0.9rem; margin: 0 0 1.4rem; }
.ps-wizard-bar.ps-wizard-bottom { margin: 1.6rem 0 0; }
.ps-wizard-row { display: flex; align-items: center; gap: 0.9rem; }
.ps-wizard-mid { flex: 1 1 auto; }
.ps-step-label { font-weight: 800; font-size: 0.95rem; color: var(--paper-ink); }
.ps-progress-wrap { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-top: 0.45rem; }
.ps-progress-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #22c55e); transition: width 0.3s; }
.ps-wiz-btn { font-size: 0.85rem; font-weight: 700; padding: 0.5rem 1.1rem; border-radius: 0.7rem; border: 1px solid var(--paper-accent); background: var(--paper-accent); color: #fff; cursor: pointer; min-height: 42px; }
.ps-wiz-btn.ps-prev { background: #fff; color: var(--paper-accent); }
.ps-wiz-btn:hover { filter: brightness(1.05); }
.ps-wiz-btn:disabled { opacity: 0.4; cursor: default; }
.ps-wiz-btn:focus-visible { outline: 3px solid var(--paper-accent) !important; outline-offset: 2px; }
.ps-showall { margin-top: 0.6rem; font-size: 0.8rem; font-weight: 700; background: transparent; border: none; color: var(--paper-accent); cursor: pointer; text-decoration: underline; padding: 0.3rem 0; min-height: 32px; }
/* visibility: one step at a time unless "show all" */
#paperCanvas:not(.ps-show-all) .ps-step { display: none; }
#paperCanvas:not(.ps-show-all) .ps-step.ps-current { display: block; }
#paperCanvas.ps-show-all .ps-wizard-row,
#paperCanvas.ps-show-all .ps-wizard-bottom { display: none; }
/* the wizard chrome never belongs in an export */
.export-clean-pdf .ps-wizard-bar, #paperCanvas.paper-mode-preview .ps-wizard-bar { display: none !important; }
/* CRITICAL: export / preview / print must show the WHOLE paper, never just the current
   wizard step — otherwise a student exporting mid-wizard gets a one-section PDF. */
.export-clean-pdf .ps-step,
#paperCanvas.paper-mode-preview .ps-step { display: block !important; }
@media print { #paperCanvas .ps-step { display: block !important; } }
@media (prefers-reduced-motion: reduce) { .ps-progress-bar { transition: none; } }
@media (max-width: 700px) { .ps-wiz-btn { min-height: 44px; flex: 1 1 auto; } }

/* ---- canvas ---- */
.paper-canvas {
  flex: 1 1 auto;
  max-width: var(--paper-max-width);
  margin: 0 auto;
  background: var(--paper-surface);
  color: var(--paper-ink);
  border-radius: var(--paper-radius-lg);
  box-shadow: var(--paper-shadow);
  padding: 3rem;
  line-height: 1.65;
  font-size: 17px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.paper-canvas h1 { font-size: 2.2rem; line-height: 1.32; letter-spacing: -0.03em; margin-bottom: 0.5rem; color: var(--paper-ink); }
/* Give the wrapped editable title breathing room so highlighted lines never collide. */
.paper-canvas h1 .student-editable { line-height: 1.4; }
.paper-canvas h2 {
  margin-top: 2.5rem; font-size: 1.35rem; letter-spacing: -0.015em;
  border-bottom: 1px solid var(--paper-border); padding-bottom: 0.4rem; color: var(--paper-ink); font-weight: 700;
}
.paper-canvas h3 { font-size: 1.05rem; font-weight: 700; color: var(--paper-ink); }
.paper-canvas p { margin: 0.8rem 0; }
.paper-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 800; color: var(--paper-accent); }

/* ---- editable fields ---- */
.student-writing-box, .student-editable {
  display: block;
  background: var(--paper-soft-yellow);
  border: 1px dashed #e0c768;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.4rem 0;
  min-height: 2.4em;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
/* Inline editables (title, captions): small vertical padding + per-line-fragment
   background so a wrapped multi-line value doesn't overlap the line above/below. */
.student-editable {
  display: inline;
  padding: 0.04em 0.3rem;
  min-height: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.student-writing-box:focus, .student-editable:focus { background: #fffdf3; border-color: var(--paper-accent); }
.student-writing-box:empty::before, .student-editable:empty::before { content: attr(data-placeholder); color: #7a6411; } /* AA contrast on the yellow box */
/* An EMPTY inline editable (title, figure captions) has no intrinsic width, so it
   collapses to ~12px when its placeholder text is short/absent — clicks then land on
   the non-editable <h1>/<figcaption> and it looks "not editable". Guarantee a hit area:
   captions get a minimum inline-block box; the title fills its whole line so a click
   anywhere on the title row lands the caret. Once the field has text these rules stop
   matching (:empty is false) and the value flows inline again (wrapping preserved). */
.student-editable:empty { display: inline-block; min-width: 14ch; }
.paper-canvas h1 .student-editable:empty { display: block; min-width: 0; }
.student-task-label {
  display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #705a0f; background: #fdf0c9; padding: 0.1rem 0.5rem;
  border-radius: 999px; margin-bottom: 0.2rem;
}
/* "Use this example to start" — fills an empty box with a clean starter sentence the
   student then edits. Hidden in every export (.no-clean-pdf) and skipped by the word
   counter (it is not a .student-writing-box). Hidden once the box has content. */
.use-example {
  display: inline-block; margin: 0.1rem 0 0.4rem; font-size: 0.74rem; font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: 999px; cursor: pointer;
  background: var(--paper-soft-blue); color: var(--paper-accent); border: 1px solid #cfe3fb;
}
.use-example:hover { background: #dceafb; }
.use-example[hidden] { display: none; }
/* "Open protocol page" link — shown only when the protocol-link field holds a real URL. */
.protocol-open { display: inline-block; margin: 0.1rem 0 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--paper-accent); text-decoration: underline; }
.protocol-open[hidden] { display: none; }
.word-target { font-size: 0.72rem; color: var(--paper-muted); font-style: italic; }
.live-wc { font-style: normal; font-weight: 700; }
.live-wc.wc-low { color: #b45309; }
.live-wc.wc-ok { color: #15803d; }
.confirm-note { color: var(--paper-muted); }
.paper-toolbar button.primary.locked { background: #51607a; opacity: 0.85; }
.paper-toolbar button.primary.locked:hover { background: #5b6b87; }

/* ---- instructional guidance (novice writers) ---- */
.onboard-card {
  position: relative; background: var(--paper-soft-blue); border: 1px solid #cfe3fb;
  border-radius: var(--paper-radius-md); padding: 1.1rem 1.4rem; margin: 0 0 1.5rem;
}
.onboard-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--paper-accent); }
.onboard-card ol { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; }
.onboard-card li { margin: 0.3rem 0; font-size: 0.9rem; line-height: 1.5; }
.onboard-card .onboard-tip { font-size: 0.82rem; color: var(--paper-muted); margin: 0.6rem 0 0; }
.onboard-card .onboard-privacy { font-size: 0.8rem; color: #166534; background: var(--paper-soft-green); border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.5rem 0.7rem; margin: 0.5rem 0 0; }
.onboard-dismiss {
  position: absolute; top: 0.6rem; right: 0.7rem; background: transparent; border: none;
  font-size: 1rem; color: var(--paper-muted); cursor: pointer; line-height: 1;
}
.onboard-dismiss:hover { color: var(--paper-ink); }

.section-help {
  font-size: 0.84rem; line-height: 1.5; color: #475569; background: #f8fafc;
  border-left: 3px solid var(--paper-accent); border-radius: 0 8px 8px 0;
  padding: 0.5rem 0.8rem; margin: 0.4rem 0 0.7rem;
}
.section-help .help-ico { margin-right: 0.2rem; }
.field-help { font-size: 0.78rem; color: var(--paper-muted); margin: 0.1rem 0 0.3rem; line-height: 1.45; }
.section-example {
  font-size: 0.8rem; line-height: 1.5; background: var(--paper-soft-green);
  border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.3rem 0 0.8rem; color: #14532d;
}
.section-example .ex-good { font-weight: 700; color: #15803d; }
.section-example .ex-weak { font-weight: 700; color: #b45309; }
/* Decorative marker only — the actual guidance is shown as visible .field-help text. */
.help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; border-radius: 999px; background: var(--paper-accent);
  color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: middle; margin-left: 0.2rem;
}

/* The toggle collapses the EXTRA guidance (onboarding, section notes, examples) but
   NEVER the per-box .field-help — that is the core instruction for a first-time writer. */
body.tips-hidden .onboard-card,
body.tips-hidden .section-help,
body.tips-hidden .glossary-card,
body.tips-hidden .story-card,
body.tips-hidden .case-card,
body.tips-hidden .section-example { display: none !important; }

/* real-trial teaching cases (story-based teaching; real, named, sourced) */
.case-card { background: var(--paper-soft-blue); border: 1px solid #cfe3fb; border-left: 4px solid var(--paper-accent); border-radius: 0 10px 10px 0; padding: 0.2rem 0.9rem; margin: 0.4rem 0 0.9rem; }
.case-card > summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--paper-accent); padding: 0.4rem 0; }
.case-card .case-body p { font-size: 0.9rem; line-height: 1.6; color: #1e3a5f; margin: 0.2rem 0 0.5rem; }
.case-card .case-rule { font-weight: 700; color: #14532d; }
.case-card .case-source { font-size: 0.72rem; color: var(--paper-muted); }

/* short-story teaching cards (secular parables) */
.story-card { background: #fbf7ef; border: 1px solid #ece0c8; border-left: 4px solid #c9a84a; border-radius: 0 10px 10px 0; padding: 0.2rem 0.9rem; margin: 0.4rem 0 0.9rem; }
.story-card > summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: #92702a; padding: 0.4rem 0; }
.story-card p { font-size: 0.9rem; line-height: 1.6; color: #5b4a26; font-style: italic; margin: 0.2rem 0 0.6rem; }
.live-wc.wc-thin { color: #a16207; font-weight: 600; }

/* glossary card + inline "30-second" term chips */
.glossary-card { background: #f8fafc; border: 1px solid var(--paper-border); border-radius: var(--paper-radius-md); padding: 0.6rem 1rem; margin: 0 0 1.25rem; }
.glossary-card > summary { cursor: pointer; font-weight: 700; color: var(--paper-accent); font-size: 0.9rem; }
.glossary-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.learn-chip {
  font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; cursor: pointer;
  background: var(--paper-soft-blue); color: var(--paper-accent); border: 1px solid #cfe3fb;
  vertical-align: middle; white-space: nowrap;
}
.learn-chip:hover { background: #dceafb; }
.export-clean-pdf .learn-chip { display: none !important; }

/* Examples: stronger amber for the "weak" line (red-green friendly with the ✗ word). */
.section-example .ex-weak { color: #92400e; }

/* a11y: dismiss control ≥24px touch target (WCAG 2.2). */
.onboard-dismiss { padding: 0.35rem; min-width: 24px; min-height: 24px; }

/* ---- cards ---- */
.clinical-question-card, .evidence-summary-card, .cover-summary-card {
  background: var(--paper-soft-blue);
  border: 1px solid #cfe3fb;
  border-radius: var(--paper-radius-md);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
.cover-summary-card { background: #f8fafc; border-color: var(--paper-border); }
.evidence-summary-card { background: #fff; border-color: var(--paper-border); }

.evidence-chip {
  display: inline-flex; gap: 0.35rem; align-items: center;
  border: 1px solid var(--paper-border); border-radius: 999px;
  padding: 0.35rem 0.65rem; margin: 0.2rem; background: #fff; font-size: 0.85rem; color: var(--paper-ink);
}
.evidence-chip strong { color: var(--paper-accent); }
.paper-sidebar .evidence-chip { background: rgba(255,255,255,0.06); color: #e2e8f0; border-color: #475569; }
.paper-sidebar .evidence-chip strong { color: #93c5fd; }

/* ---- figure cards ---- */
.paper-figure-card {
  border: 1px solid var(--paper-border);
  border-radius: var(--paper-radius-md);
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}
.figure-card-header { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.75rem; }
.figure-label { font-size: 0.8rem; font-weight: 700; color: var(--paper-accent); text-transform: uppercase; letter-spacing: 0.08em; }
.figure-card-header h3 { margin: 0; }
.figure-learning-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.figure-learning-row button {
  font-size: 0.74rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--paper-soft-blue); color: var(--paper-accent); border: 1px solid #cfe3fb; cursor: pointer;
}
.figure-learning-row button:hover { background: #dceafb; }
.figure-visual { overflow-x: auto; margin: 1rem 0; min-height: 40px; }
.figure-visual svg { max-width: 100%; }
/* own forest/funnel + x-range controls */
.fig-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--paper-muted); }
.fig-controls-label { font-weight: 700; }
.fig-controls .fig-x { width: 5.5rem; padding: 0.2rem 0.4rem; border: 1px solid var(--paper-border); border-radius: 6px; font-size: 0.78rem; }
.fig-controls button { font-size: 0.74rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid #cfe3fb; background: var(--paper-soft-blue); color: var(--paper-accent); cursor: pointer; min-height: 24px; }
.fig-controls button:hover { background: #dceafb; }
.ps-figbox { width: 100%; min-height: 240px; }
.fig-controls-wrap > summary { cursor: pointer; font-size: 0.76rem; color: var(--paper-muted); margin-bottom: 0.3rem; }
.fig-controls-wrap .fig-opt { font-size: 0.66rem; background: #eef2f7; color: #64748b; border-radius: 999px; padding: 0.05rem 0.4rem; }
.fig-controls-note { flex: 1 1 100%; font-size: 0.7rem; color: var(--paper-muted); }
.readiness-honesty { font-size: 0.72rem; color: #94a3b8; line-height: 1.45; margin: 0.6rem 0 0; border-top: 1px solid #334155; padding-top: 0.5rem; }
.tutor-copy-btn { width: 100%; margin-top: 0.5rem; font-size: 0.76rem; font-weight: 700; padding: 0.5rem; border-radius: 0.6rem; background: #1e293b; color: #cbd5e1; border: 1px solid #475569; cursor: pointer; }
.tutor-copy-btn:hover { background: #334155; color: #fff; }

/* outcomes manager */
.outcome-manager { background: #f8fafc; border: 1px solid var(--paper-border); border-radius: var(--paper-radius-md); padding: 0.8rem 1.1rem; margin: 0.5rem 0 1.25rem; }
.outcome-manager h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper-accent); margin: 0 0 0.5rem; }
.outcome-list { list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.88rem; }
.outcome-list li { padding: 0.2rem 0; }
.oc-remove { font-size: 0.72rem; color: #b91c1c; background: #fff1f1; border: 1px solid #fecaca; border-radius: 6px; padding: 0.1rem 0.5rem; cursor: pointer; margin-left: 0.4rem; min-height: 24px; }
.add-outcome > summary { cursor: pointer; font-weight: 700; color: var(--paper-accent); font-size: 0.85rem; }
.add-outcome-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-top: 0.7rem; }
.add-outcome-form label { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--paper-muted); gap: 0.15rem; }
.add-outcome-form input, .add-outcome-form select { padding: 0.25rem 0.4rem; border: 1px solid var(--paper-border); border-radius: 6px; font-size: 0.82rem; width: 6rem; }
.add-outcome-form input#ocf-label { width: 12rem; }
.add-outcome-form button { background: var(--paper-accent); color: #fff; border: none; border-radius: 7px; padding: 0.4rem 0.9rem; font-weight: 700; font-size: 0.8rem; cursor: pointer; min-height: 32px; }
.add-outcome-note { flex: 1 1 100%; font-size: 0.75rem; color: var(--paper-muted); margin: 0.3rem 0 0; }
.illus-badge { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 0.05rem 0.45rem; vertical-align: middle; }
.outcome-section { margin-top: 1.5rem; }
.dropped-warning { background: var(--paper-soft-red); border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: 8px; padding: 0.7rem 1rem; margin: 0.6rem 0; font-size: 0.9rem; color: #7f1d1d; }

/* Methods/Results format selector */
.style-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; background: var(--paper-soft-blue); border: 1px solid #cfe3fb; border-radius: var(--paper-radius-md); padding: 0.6rem 0.9rem; margin: 0.4rem 0 0.9rem; font-size: 0.82rem; }
.style-control-label { font-weight: 700; color: var(--paper-accent); }
.style-control label { display: inline-flex; flex-direction: column; gap: 0.1rem; font-size: 0.7rem; color: var(--paper-muted); }
.style-control select { padding: 0.25rem 0.4rem; border: 1px solid var(--paper-border); border-radius: 6px; font-size: 0.8rem; background: #fff; }
.style-control-note { flex: 1 1 100%; font-size: 0.72rem; color: var(--paper-muted); }

/* a11y: visible focus ring on every interactive element (review/Sam blocker) */
.paper-studio-page button:focus-visible,
.paper-studio-page select:focus-visible,
.paper-studio-page summary:focus-visible,
.paper-studio-page input:focus-visible,
.paper-studio-page [contenteditable="true"]:focus-visible,
.learning-drawer button:focus-visible,
.learning-drawer a:focus-visible,
.paper-toolbar button:focus-visible,
.paper-toolbar summary:focus-visible {
  outline: 3px solid var(--paper-accent) !important;
  outline-offset: 2px;
  border-radius: 4px;
}
.student-writing-box:focus-visible, .student-editable:focus-visible { outline: 3px solid var(--paper-accent) !important; outline-offset: 1px; }

.missing-visual {
  color: var(--paper-muted); font-size: 0.85rem; background: #f8fafc;
  border: 1px dashed var(--paper-border); border-radius: 8px; padding: 1rem; text-align: center;
}
.paper-plot-image { max-width: 100%; height: auto; }

/* ---- references builder ---- */
.refs-build-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0.8rem; }
.refs-build-row button {
  font-size: 0.8rem; font-weight: 700; padding: 0.45rem 0.85rem; border-radius: 0.6rem;
  background: var(--paper-soft-blue); color: var(--paper-accent); border: 1px solid #cfe3fb; cursor: pointer;
}
.refs-build-row button:hover { background: #dceafb; }
.refs-note { font-size: 0.78rem; color: var(--paper-muted); flex: 1 1 240px; }
#paperCanvas [data-field="studentText.references"] { white-space: pre-wrap; font-variant-numeric: tabular-nums; }
figcaption { font-size: 0.95rem; color: var(--paper-muted); border-top: 1px solid var(--paper-border); padding-top: 0.8rem; margin-top: 0.6rem; }

/* ---- checklist ---- */
.checklist-item { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8rem; padding: 0.2rem 0; }
.checklist-item.complete { color: #4ade80; }
.checklist-item.incomplete { color: #fcd34d; }   /* lighter amber → AA on dark panel */
.checklist-item .sr-prefix { font-weight: 700; }
.readiness-score { font-size: 1.4rem; font-weight: 800; color: #e2e8f0; }
.readiness-bar { height: 8px; background: #334155; border-radius: 999px; overflow: hidden; margin: 0.5rem 0; }
.readiness-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#22c55e); transition: width 0.3s; }
.readiness-level { font-size: 0.78rem; color: #94a3b8; }
.readiness-gate { font-size: 0.74rem; font-weight: 700; padding: 0.35rem 0.6rem; border-radius: 8px; margin: 0.5rem 0; }
.readiness-gate.ready { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
.readiness-gate.blocked { background: rgba(234,179,8,0.12); color: #fcd34d; border: 1px solid rgba(234,179,8,0.4); }

/* ---- issues panel ---- */
.ps-issue { font-size: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 8px; margin: 0.35rem 0; border-left: 3px solid; }
.ps-issue.error { background: var(--paper-soft-red); border-color: #ef4444; color: #7f1d1d; }
.ps-issue.warn  { background: var(--paper-soft-yellow); border-color: #eab308; color: #854d0e; }

/* ---- learning drawer ---- */
.learning-drawer {
  position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100vh; z-index: 60;
  background: #0f172a; color: #e2e8f0; border-left: 1px solid #334155;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5); padding: 1.75rem; overflow-y: auto;
}
.learning-drawer[hidden] { display: none; }
.learning-drawer h2 { font-size: 1.25rem; font-weight: 800; margin: 1rem 0 0.5rem; }
.learning-drawer p { font-size: 0.9rem; line-height: 1.6; color: #cbd5e1; }
.learning-common-mistake { background: #422006; border: 1px solid #854d0e; border-radius: 10px; padding: 0.9rem; margin: 1rem 0; }
.learning-common-mistake strong { color: #fbbf24; }
.learning-drawer a#learningCourseLink {
  display: inline-block; margin-top: 1rem; background: var(--paper-accent); color: #fff;
  padding: 0.6rem 1.1rem; border-radius: 0.7rem; font-weight: 700; font-size: 0.85rem; text-decoration: none;
}
#closeLearningDrawer { background: #334155; color: #e2e8f0; border: none; border-radius: 0.6rem; padding: 0.4rem 0.9rem; cursor: pointer; font-size: 0.8rem; }

/* ---- worked-example modal (read-only exemplar) ---- */
/* Mounted on <body>, OUTSIDE #tab-paper, so the --paper-* custom properties (scoped to
   #tab-paper) do NOT resolve here — use explicit colours so text stays high-contrast
   regardless of the surrounding dark theme. */
.example-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, 0.6);
  display: flex; align-items: flex-start; justify-content: center; padding: 3vh 1rem; overflow-y: auto;
}
.example-modal[hidden] { display: none; }
.example-modal-card {
  background: #fff; color: #1f2933; max-width: 760px; width: 100%;
  border-radius: 18px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.45); padding: 1.5rem 1.8rem 2rem;
}
.example-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; background: #fff; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb;
}
.example-modal-head strong { font-size: 1.05rem; color: #1f2933; }
.example-modal-head button { font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: 0.6rem; background: #334155; color: #fff; border: none; cursor: pointer; }
.example-modal-head button:hover { background: #475569; }
.example-modal-note { background: #eefaf2; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.8rem 0; font-size: 0.84rem; color: #14532d; }
.example-modal-body h3 { font-size: 1rem; color: #2454a6; margin: 1.1rem 0 0.2rem; }
.example-modal-body p { font-size: 0.92rem; line-height: 1.6; margin: 0.2rem 0; color: #1f2933; }

/* ---- toast ---- */
.paper-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: #0f172a; color: #e2e8f0; padding: 0.6rem 1.2rem; border-radius: 999px;
  border: 1px solid #334155; font-size: 0.82rem; z-index: 70; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.paper-toast.show { opacity: 1; }

/* ---- author transparency ---- */
.author-transparency {
  background: var(--paper-soft-green); border: 1px solid #bbf7d0; border-radius: var(--paper-radius-md);
  padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.85rem; color: #166534;
}
.author-transparency strong { color: #14532d; }

/* ---- preview mode: hide scaffolding on the canvas ---- */
#paperCanvas.paper-mode-preview .student-task-label,
#paperCanvas.paper-mode-preview .word-target,
#paperCanvas.paper-mode-preview .figure-learning-row,
#paperCanvas.paper-mode-preview .author-transparency.working-only { display: none !important; }
#paperCanvas.paper-mode-preview .student-writing-box,
#paperCanvas.paper-mode-preview .student-editable {
  background: transparent; border: none; padding: 0;
}
#paperCanvas.paper-mode-preview .student-writing-box:empty,
#paperCanvas.paper-mode-preview .student-editable:empty { display: none; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .paper-studio-layout { flex-direction: column; }
  .paper-sidebar { flex-basis: auto; width: 100%; position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .paper-sidebar section { flex: 1 1 240px; }
  .paper-nav-panel { flex: 1 1 100% !important; }   /* the section navigator spans the full width on top */
  .paper-canvas { padding: 1.5rem; }
}
/* Phones: stack the sidebar cards, give comfortable 44px tap targets, keep the
   navigator collapsed by default (JS) so it does not bury the paper. */
@media (max-width: 700px) {
  .paper-sidebar { flex-direction: column; }
  .paper-sidebar section { flex: 1 1 100%; }
  .nav-item, .nav-skip { min-height: 44px; }
  .nav-item { font-size: 0.85rem; }
  .paper-canvas { padding: 1.1rem; }
}

/* ---- print / PDF export ---- */
/* The desktop writing width is wide; re-cap to an A4-like measure for the printed/PDF
   sheet (the export path also adds .export-clean-pdf). Screen stays full-width. */
@media print { #tab-paper { --paper-max-width: 920px; } }
.export-clean-pdf .paper-canvas { max-width: 920px; }
.export-clean-pdf .no-clean-pdf,
.export-clean-pdf .figure-learning-row,
.export-clean-pdf .student-task-label,
.export-clean-pdf .word-target,
.export-clean-pdf .author-transparency.working-only { display: none !important; }
.export-clean-pdf .student-writing-box,
.export-clean-pdf .student-editable { border: none; background: transparent; padding: 0; }
.export-clean-pdf .student-writing-box:empty,
.export-clean-pdf .student-editable:empty { display: none; }