/* 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: #161d29;            /* bench behind the sheet (matches dark UI) */
  --paper-surface: #ffffff;
  --paper-ink: #1a2230;
  --paper-muted: #57647a;   /* AA (>=4.5:1) on the soft-blue/grey tinted cards */
  --paper-border: #e8ecf2;
  --paper-hairline: #eef1f6;
  --paper-soft-blue: #eff6ff;
  --paper-soft-yellow: #fdf6e3;
  --paper-soft-green: #effaf3;
  --paper-soft-red: #fff1f2;
  --paper-accent: #2563c4;
  --paper-accent-deep: #1d4ed8;
  --paper-accent-soft: #dbe8fd;
  --paper-warm: #d4a634;          /* amber used for the writing boxes / wizard accent */
  --paper-radius-lg: 26px;
  --paper-radius-md: 14px;
  --paper-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px -12px rgba(12, 19, 33, 0.55), 0 8px 22px -10px rgba(12, 19, 33, 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;
  /* Soft, layered bench so the white sheet reads as floating paper, not a flat block. */
  background:
    radial-gradient(1200px 600px at 18% -8%, rgba(37, 99, 196, 0.16), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(212, 166, 52, 0.10), transparent 55%),
    linear-gradient(180deg, #1b2430 0%, #141b26 100%);
}

/* ---- 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.4rem;
  background: linear-gradient(180deg, #202b3a 0%, #1a2433 100%);   /* lighter utility strip so the
                            white sheet — not the chrome — is the hero (no backdrop-filter: it
                            would make a containing block that traps position:fixed menus) */
  border-bottom: 1px solid #26313f;
  box-shadow: 0 2px 10px -8px rgba(0,0,0,0.6);
}
.paper-toolbar .ps-title {
  font-weight: 800;
  color: #e2e8f0;
  margin-right: auto;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.paper-toolbar button {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 0.95rem;
  border-radius: 0.7rem;
  background: transparent;            /* ghost: secondary controls recede so the one filled
                                          Download button is the unambiguous primary action */
  color: #cbd6e4;
  border: 1px solid #38475c;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease;
}
.paper-toolbar button:hover { background: rgba(255,255,255,0.06); color: #eef3fa; transform: translateY(-1px); }
.paper-toolbar button.primary {
  background: linear-gradient(180deg, #2f70d6 0%, var(--paper-accent) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -8px rgba(37, 99, 196, 0.8);
}
.paper-toolbar button.primary:hover { filter: brightness(1.05); box-shadow: 0 12px 24px -10px rgba(37, 99, 196, 0.85); }
.paper-toolbar .ps-save-status { font-size: 0.72rem; color: #94a3b8; margin-left: 0.4rem; }
.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 nav[role="tablist"] { display: none !important; }
.ps-provenance { display: none; }
body.ps-focus-mode .ps-provenance { display: inline; font-size: 0.72rem; color: #94a3b8; }

/* "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: transparent; color: #cbd6e4; border: 1px solid #38475c; }
.toolbar-more > summary::-webkit-details-marker { display: none; }
.toolbar-more[open] > summary { background: rgba(255,255,255,0.08); color: #eef3fa; }
/* 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: transparent; color: #cbd6e4; border: 1px solid #38475c; }
.download-menu > summary::-webkit-details-marker { display: none; }
.download-menu[open] > summary { background: rgba(255,255,255,0.08); color: #eef3fa; }
.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: #ffffff;                         /* flat white control strip — visually distinct
                                                  from the blue info cards so nav != content */
  border: 1px solid var(--paper-border);
  border-radius: 14px; padding: 1rem 1.15rem; margin: 0 0 1.7rem;
  box-shadow: 0 2px 10px -7px rgba(12, 19, 33, 0.4);
}
.ps-wizard-bar.ps-wizard-bottom { margin: 1.9rem 0 0; }
/* Persistent grey/yellow key shown above every wizard step */
.ps-step-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin: 0 0 0.75rem; }
.ps-leg { font-size: 0.74rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; }
.ps-leg::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 3px; }
.ps-leg-grey { color: #475569; background: #eef1f6; border: 1px solid #e2e8f0; }
.ps-leg-grey::before { background: #cbd5e1; }
.ps-leg-yellow { color: #835e0c; background: var(--paper-soft-yellow); border: 1px solid #e3c976; }
.ps-leg-yellow::before { background: #f1d27a; border: 1px dashed #d9b85e; }
.ps-wizard-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ps-wizard-mid { flex: 1 1 auto; }
.ps-step-label { font-weight: 800; font-size: 1rem; color: #16203a; letter-spacing: -0.01em; }
.ps-jump { margin-top: 0.4rem; max-width: 100%; font-size: 0.82rem; padding: 0.25rem 0.45rem; border: 1px solid var(--paper-border); border-radius: 7px; background: #fff; color: var(--paper-ink); cursor: pointer; }
.ps-jump:focus-visible { outline: 2px solid var(--paper-accent); outline-offset: 1px; }
.ps-progress-wrap { height: 10px; background: #e6ecf5; border-radius: 999px; overflow: hidden; margin-top: 0.55rem; box-shadow: 0 1px 2px rgba(15,23,42,0.08) inset; }
.ps-progress-bar { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--paper-accent) 0%, #4f86e0 100%);
  box-shadow: 0 0 8px rgba(37, 99, 196, 0.35); transition: width 0.45s cubic-bezier(.4,0,.2,1); }
.ps-wiz-btn {
  font-size: 0.88rem; font-weight: 700; padding: 0.6rem 1.3rem; border-radius: 0.85rem;
  border: 1px solid transparent; cursor: pointer; min-height: 44px;
  background: var(--paper-accent); color: #fff;   /* flat accent — the loud gradient is reserved
                                                      for the toolbar Download CTA only */
  box-shadow: 0 4px 12px -8px rgba(37, 99, 196, 0.5); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ps-wiz-btn.ps-prev { background: #fff; color: var(--paper-accent); border-color: var(--paper-accent-soft); box-shadow: 0 4px 12px -8px rgba(15,23,42,0.4); }
.ps-wiz-btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(37, 99, 196, 0.7); }
.ps-wiz-btn:active { transform: translateY(0); }
.ps-wiz-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; transform: none; }
.ps-wiz-btn:focus-visible { outline: 3px solid var(--paper-accent) !important; outline-offset: 2px; }
.ps-showall {
  margin-top: 0.75rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0.35rem 0.85rem;
  background: #fff; border: 1px solid var(--paper-accent-soft); border-radius: 999px; color: var(--paper-accent);
  min-height: 34px; transition: background .12s ease; display: inline-block;
}
.ps-showall:hover { background: var(--paper-soft-blue); }
/* 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; }
  .ps-wiz-btn, .paper-toolbar button, .use-example, .paper-toolbar button.primary { transition: none; }
  .ps-wiz-btn:hover, .paper-toolbar button:hover, .use-example:hover { transform: none; }
}
@media (max-width: 700px) {
  /* stack: the step label + progress take the full top line, Back/Next split the row beneath */
  .ps-wizard-mid { order: -1; flex: 1 1 100%; }
  .ps-wiz-btn { min-height: 44px; flex: 1 1 0; }
}

/* ---- canvas ---- */
.paper-canvas {
  flex: 1 1 auto;
  max-width: var(--paper-max-width);
  margin: 0 auto;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  color: var(--paper-ink);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--paper-radius-lg);
  box-shadow: var(--paper-shadow);
  padding: 3.4rem clamp(2rem, 4vw, 4rem);
  line-height: 1.72;
  font-size: 17.5px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.paper-canvas h1 {
  font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.22; letter-spacing: -0.035em;
  margin-bottom: 0.6rem; font-weight: 800; color: #131a27;
}
/* Give the wrapped editable title breathing room so highlighted lines never collide. */
.paper-canvas h1 .student-editable { line-height: 1.4; }
.paper-canvas h2 {
  position: relative;
  margin-top: 2.8rem; margin-bottom: 0.4rem; font-size: 1.45rem; letter-spacing: -0.02em;
  padding-bottom: 0.5rem; color: #16203a; font-weight: 800;
  border-bottom: 1px solid var(--paper-hairline);
}
/* a slim accent tick under each section heading */
.paper-canvas h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 2.4rem; height: 3px;
  border-radius: 999px; background: var(--paper-accent);
}
.paper-canvas h3 { font-size: 1.12rem; font-weight: 700; color: #243149; margin-top: 1.6rem; }
.paper-canvas p { margin: 0.85rem 0; }
.paper-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 800; color: var(--paper-accent); }

/* ---- editable fields ---- */
.student-writing-box, .student-editable {
  display: block;
  background: linear-gradient(180deg, #fefaf0 0%, var(--paper-soft-yellow) 100%);
  border: 1.5px dashed #e3c976;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.45rem 0;
  min-height: 2.4em;
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 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); border-style: solid; box-shadow: 0 0 0 4px rgba(37, 99, 196, 0.12); }
.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-flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0.6rem;
  font-size: 0.9rem; font-weight: 700; line-height: 1.2;
  padding: 0.55rem 1.05rem; border-radius: 0.8rem; cursor: pointer; min-height: 44px;
  background: #fff; color: var(--paper-accent); border: 1.5px solid #bcd6f7;   /* big + tappable
                          but a clearly SECONDARY (outlined) helper, not a loud filled button */
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.use-example:hover { background: var(--paper-soft-blue); transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(37, 99, 196, 0.4); }
.use-example:active { transform: translateY(0); }
.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); }
/* Locked = not yet ready, but still the bright hero CTA and still clickable (a click opens the
   readiness checklist). The lock is signalled by the 🔒 label, not by a dead grey colour. */
.paper-toolbar button.primary.locked { background: linear-gradient(180deg, #4f7fd0 0%, #3f6bbf 100%); box-shadow: 0 6px 16px -9px rgba(37,99,196,0.6); }
.paper-toolbar button.primary.locked:hover { filter: brightness(1.05); }

/* ---- 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 > summary { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 700; color: var(--paper-accent); cursor: pointer; list-style: none; }
.onboard-card > summary::-webkit-details-marker { display: none; }
.onboard-card:not([open]) { padding-bottom: 0.7rem; }
.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: transparent;
  border: 1px solid #c2cad6; color: #8a93a3; font-size: 0.66rem; font-weight: 700;
  vertical-align: middle; margin-left: 0.2rem;   /* quiet, decorative — not a clickable control */
}

/* 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: linear-gradient(180deg, #f5f9ff 0%, var(--paper-soft-blue) 100%);
  border: 1px solid var(--paper-accent-soft);
  border-radius: var(--paper-radius-md);
  padding: 1.3rem 1.6rem;
  margin: 1.35rem 0;
  box-shadow: 0 10px 26px -18px rgba(37, 99, 196, 0.5);
}
.cover-summary-card { background: linear-gradient(180deg, #fcfdff 0%, #f6f8fc 100%); border-color: var(--paper-border); }
.evidence-summary-card { background: #fff; border-color: var(--paper-border); box-shadow: 0 10px 26px -20px rgba(15, 23, 42, 0.5); }

.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; }

/* ---- supplementary-material statement ---- */
.paper-canvas .supp-note { font-size: 0.86rem; color: var(--paper-muted); }

/* ---- 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; }
  /* Toolbar: drop the title and give Download its own full-width row so it never wraps
     mid-label and the sticky band stays shallow. */
  .paper-toolbar { padding: 0.6rem 0.9rem; gap: 0.4rem; }
  .paper-toolbar .ps-title { display: none; }
  .paper-toolbar button.primary { flex: 1 1 100%; order: -1; justify-content: center; }
}

/* ---- 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; }