/* ─── prexiv-rust.css ───────────────────────────────────────────────────────
   bioRxiv-inspired additions for the Rust port. Loaded *after* style.css,
   so it can override or extend existing rules. Only new class names — does
   not interfere with the JS app's templates.
   ──────────────────────────────────────────────────────────────────────── */

/* Two-column manuscript page: main content + right sidebar. */
.bx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 36px;
  align-items: start;
  margin-top: 12px;
}
/* See the @media (max-width: 920px) block at the bottom of this file
   for the single-column collapse. */

.bx-main { min-width: 0; }

.bx-sidebar {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.95em;
}

.bx-sidebar-block {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
}
.bx-sidebar-block h3 {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700;
  font-family: var(--sans);
}

.bx-sidebar-btn {
  display: block;
  background: var(--brand);
  color: #fff !important;
  text-align: center;
  padding: 10px 12px;
  border-radius: 4px;
  font-weight: 600;
  margin-bottom: 6px;
  text-decoration: none !important;
  border: 1px solid var(--brand);
}
.bx-sidebar-btn:hover { background: var(--link-hover); border-color: var(--link-hover); }
.bx-sidebar-btn.secondary {
  background: var(--bg-card-alt);
  color: var(--ink) !important;
  border: 1px solid var(--rule-strong);
}
.bx-sidebar-btn.secondary:hover { background: var(--bg); }
.bx-sidebar-btn.voted {
  background: var(--brand-bg) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  font-weight: 700;
}
.bx-sidebar-btn.voted:hover { background: var(--bg-card) !important; }

.bx-stats { list-style: none; margin: 0; padding: 0; }
.bx-stats li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--rule);
}
.bx-stats li:last-child { border-bottom: none; }
.bx-stats .lbl {
  flex: 0 0 auto;
  color: var(--muted);
}
.bx-stats .val {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bx-stats li.bx-stat-long {
  display: block;
}
.bx-stats li.bx-stat-long .lbl,
.bx-stats li.bx-stat-long .val {
  display: block;
  text-align: left;
}
.bx-stats li.bx-stat-long .val {
  margin-top: 2px;
  line-height: 1.22;
}
.bx-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.9em;
}
.bx-actions a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-soft);
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-card-alt);
}
.bx-actions a:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }

.bx-cat-list { list-style: none; margin: 0; padding: 0; }
.bx-cat-list li { padding: 3px 0; display: flex; justify-content: space-between; }
.bx-cat-list a { color: var(--ink-soft); }
.bx-cat-list a:hover { color: var(--brand); }
.bx-cat-list .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.bx-cat-list li.on a { color: var(--brand); font-weight: 600; }

/* Tab/anchor bar near the top of the manuscript. */
.bx-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin: 14px 0 18px;
  flex-wrap: wrap;
}
.bx-tabs a {
  padding: 8px 14px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.bx-tabs a:hover {
  color: var(--brand);
  border-color: var(--rule-strong);
  text-decoration: none;
}
.bx-tabs a.on {
  color: var(--brand);
  border-color: var(--brand);
}

/* Small "New submission" or "AI-agent" eyebrow above the title. */
.bx-eyebrow {
  display: inline-block;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.bx-eyebrow.agent { color: var(--accent-blue); }
.bx-eyebrow.withdrawn { color: var(--muted); }

/* Smooth scroll for the anchor jumps. */
html { scroll-behavior: smooth; }

/* ─── copy-pre button ────────────────────────────────────────────────────
   Wrap any <pre> in a .copy-pre-wrap that also holds a .copy-pre-btn
   button; the JS in /static/js/copy-button.js binds the button to copy
   the <pre>'s text. Visual: small neutral button top-right of the pre,
   rust on hover, green on success, amber on failure. */
.copy-pre-wrap { position: relative; }
.copy-pre-wrap > pre {
  /* Reserve a 36px top-right corner for the button so it doesn't
     occlude the first line of text. */
  padding-top: 36px !important;
}
.copy-pre-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  user-select: none;
}
.copy-pre-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.copy-pre-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.copy-pre-btn.copied {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok-rule);
}
.copy-pre-btn.failed {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: var(--warn-rule);
}
@media (max-width: 480px) {
  .copy-pre-btn { font-size: 10.5px; padding: 3px 8px; top: 6px; right: 6px; }
  .copy-pre-wrap > pre { padding-top: 32px !important; }
}

/* Rendered-markdown blocks (comments, abstracts, conductor notes,
   auditor statements). Tight vertical rhythm — comment bodies shouldn't
   blow up when they contain a paragraph or list. */
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child  { margin-bottom: 0; }
.markdown p { margin: 0.4em 0; }
.markdown ul, .markdown ol { margin: 0.4em 0; padding-left: 1.4em; }
.markdown li { margin: 0.15em 0; }
.markdown blockquote {
  border-left: 3px solid var(--rule-strong);
  margin: 0.5em 0;
  padding: 0.1em 0.9em;
  color: var(--ink-soft);
}
.markdown code {
  background: var(--code-bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}
.markdown pre {
  background: var(--code-bg);
  padding: 8px 10px;
  border-radius: 4px;
  overflow-x: auto;
}
.markdown pre code { background: transparent; padding: 0; }
.prose pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prose pre code {
  white-space: inherit;
}
.markdown table {
  border-collapse: collapse;
  margin: 0.6em 0;
}
.markdown th, .markdown td {
  border: 1px solid var(--rule);
  padding: 4px 8px;
}
.markdown th { background: var(--bg-card-alt); }
.markdown hr { border: none; border-top: 1px solid var(--rule); margin: 0.8em 0; }
.markdown a { word-break: break-word; }

/* ─── audit-status 3-way choice on the submit form ─────────────────────── */
.audit-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 14px;
}
.audit-none-block, .audit-self-block, .audit-other-block { display: none; }
.audit-section:has(input[name="audit_status"][value="none"]:checked)  .audit-none-block  { display: block; }
.audit-section:has(input[name="audit_status"][value="self"]:checked)  .audit-self-block  { display: block; }
.audit-section:has(input[name="audit_status"][value="other"]:checked) .audit-other-block { display: block; }
.audit-section.audit-choice-none .audit-none-block { display: block; }
.audit-section.audit-choice-self .audit-self-block { display: block; }
.audit-section.audit-choice-other .audit-other-block { display: block; }

/* Self-audit only makes sense for human-AI; an autonomous agent cannot
   independently audit itself. Hide the option (and its block, if
   stale-selected) when conductor_type=ai-agent is active. */
body:has(input[name="conductor_type"][value="ai-agent"]:checked) .audit-self-radio,
body:has(input[name="conductor_type"][value="ai-agent"]:checked) .audit-self-block {
  display: none !important;
}
.submit-form.conductor-ai-agent .audit-self-radio,
.submit-form.conductor-ai-agent .audit-self-block {
  display: none !important;
}

.audit-self-callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 0.95em;
}
.audit-self-callout strong { color: var(--warn); }

/* Self-audit badge — a new state for listing rows. The conductor and the
   auditor are the same person; stronger than 'unaudited' (a real signed
   statement exists), weaker than third-party 'audited'. Visual sits
   between .badge-audited (green) and .badge-unaudited (amber):
   a soft yellow/gold so a scanning reader immediately reads it as
   'partial credit, not full credit'. */
.badge.badge-self-audited {
  background: #fff5d6;
  color: #8b6914;
  border-color: #e6cb84;
}
:root[data-theme="dark"] .badge.badge-self-audited {
  background: #3a2f12;
  color: #f0d68a;
  border-color: #6b5524;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .badge.badge-self-audited {
    background: #3a2f12;
    color: #f0d68a;
    border-color: #6b5524;
  }
}

/* Withdrawn manuscripts: the JS app's style.css strikes through the title.
   Per user feedback that the strikethrough is visually noisy, we just gray
   the title and let the "⊘ withdrawn" badge carry the signal. */
.ms-row-withdrawn .ms-title,
.ms-row-withdrawn .manuscript-title {
  text-decoration: none !important;
}

/* ─── mobile / tablet responsive tuning for bx-* additions ───────────────
   The shared style.css already collapses the topbar (≤900px), row-fields
   (≤720px), and the conductor-type radio cards (intrinsic flex-wrap).
   These rules cover what's specific to the bioRxiv-inspired layout I
   added in the Rust port: the manuscript-page sidebar, the in-page tab
   bar, the kv conductor/auditor tables, and the licensing pickers. */

/* iPad landscape and most "desktop-ish" tablets — sidebar shrinks
   slightly so the main column isn't cramped at the 1024-1100px band. */
@media (min-width: 921px) and (max-width: 1100px) {
  .bx-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
}

/* iPad portrait + everything narrower — sidebar drops below content. */
@media (max-width: 920px) {
  .bx-grid { grid-template-columns: 1fr; gap: 20px; }
  .bx-sidebar { position: static !important; }
}

/* Phone-ish and below. */
@media (max-width: 700px) {
  /* Tab bar gets a horizontal-scroll affordance so it never wraps to two
     rows of partial-width tabs. Touch-flick to scroll on iOS. */
  .bx-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    /* hide the scrollbar but keep it scrollable */
    scrollbar-width: none;
  }
  .bx-tabs::-webkit-scrollbar { display: none; }
  .bx-tabs a { flex: 0 0 auto; padding: 7px 12px; font-size: 0.95em; white-space: nowrap; }

  /* Sidebar cards get slightly tighter padding when full-width on phone. */
  .bx-sidebar-block { padding: 10px 12px; }
  .bx-sidebar-block h3 { font-size: 0.72em; }
  .bx-sidebar-btn { padding: 9px 10px; font-size: 0.95em; }

  /* Subject Areas index — tighten rows so the long category list
     doesn't dominate the bottom of a phone scroll. */
  .bx-cat-list li { padding: 2px 0; font-size: 0.92em; }

  /* kv tables (Conductor / Auditor metadata) — let long cell content
     wrap; on very narrow screens, fall back to block-with-horizontal-scroll
     instead of overflowing the page. */
  table.kv {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.kv th { white-space: nowrap; }
  table.kv td { word-break: break-word; }

  /* Markdown tables inside abstracts/comments: same scroll-instead-of-overflow. */
  .markdown table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .markdown pre   { font-size: 12px; }

  /* Manuscript title scales down a little so it doesn't dominate. */
  .ms-h1 { font-size: 1.4em; line-height: 1.25; }

  /* Banner blocks (just-minted token, agent-autonomy notice, withdrawn
     tombstone, unaudited warning, audited confirmation) — tighter
     padding so inline <pre> blocks aren't cramped at the edges. */
  .audit-banner, .warn-banner, .agent-banner, .tombstone-banner {
    padding: 10px 12px;
    font-size: 0.95em;
  }
  .audit-self-callout { padding: 8px 10px; font-size: 0.92em; }

  /* Any <pre> inside a banner or ms-section — phones get smaller font
     and tighter padding so wrapped lines retain horizontal room. */
  .audit-banner pre,
  .ms-section pre {
    font-size: 12px;
    padding: 10px;
    line-height: 1.45;
  }

  /* Numbered list inside the just-minted banner — less left-indent so
     wrapped text in step descriptions doesn't lose horizontal room. */
  .audit-banner ol { margin-left: 18px; }

  /* Manuscript-page action bar — flex-wrap so PDF download + cite +
     vote pills don't overflow horizontally. */
  .ms-actions-bar,
  .ms-actions-left,
  .ms-actions-right { flex-wrap: wrap; gap: 6px; }

  /* Comment-form action row — wrap on small viewports. */
  .comment-form .comment-form-actions { flex-wrap: wrap; gap: 6px; }

  /* All form controls should respect viewport width, never overflow. */
  .submit-form input,
  .submit-form select,
  .submit-form textarea,
  .auth-card input { max-width: 100%; box-sizing: border-box; }

  /* Single-column tables in /admin/audit shouldn't blow up. */
  table.kv code { word-break: break-all; }
}

/* Small phone (iPhone SE etc., 320–480px). */
@media (max-width: 480px) {
  .bx-grid { gap: 14px; }
  .bx-tabs a { padding: 6px 9px; font-size: 0.88em; }
  .bx-sidebar-btn { padding: 8px 10px; font-size: 0.9em; }
  .bx-cat-list { font-size: 0.9em; }
  .bx-cat-list li { padding: 2px 0; }

  /* Page-header heading scales down on tiny screens; big-bold-headlines
     look comical at 360px wide. */
  .page-header h1 { font-size: 21px; }
  .ms-h1          { font-size: 1.25em; }

  /* Two-button form-submit rows: stack so neither button looks cramped. */
  .form-submit { flex-wrap: wrap; gap: 8px; }
  .form-submit .btn-primary,
  .form-submit .btn-secondary { width: 100%; text-align: center; }

  /* Pre blocks inside the just-minted banner + sections — one more notch
     down. The agent prompt is still selectable/copyable; it just
     fits more in the visible area at this width. */
  .audit-banner pre,
  .ms-section pre {
    font-size: 11px;
    padding: 8px;
  }

  /* Conductor / audit-status radio cards — at this width single-column
     stacking with a little less inner padding. */
  .ctype-card { padding: 8px 10px; }

  /* Comments — author name + timestamp shouldn't crowd the body. */
  .comment-meta { font-size: 0.92em; }
}

/* ─── Welcome modal ─────────────────────────────────────────────────
   First-visit-only popup. Rendered into / markup with hidden=true;
   welcome-modal.js reveals it on first load and stores dismissal in
   localStorage. Uses position:fixed so DOM position is irrelevant.
   ────────────────────────────────────────────────────────────────── */
.welcome-modal[hidden] { display: none; }
.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.welcome-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 31, 31, 0.55);
  cursor: pointer;
  animation: welcome-fadein 180ms ease-out;
}
.welcome-box {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 28px 32px 22px;
  max-width: 560px;
  width: 100%;
  min-width: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  animation: welcome-slidein 220ms cubic-bezier(0.2, 0.7, 0.3, 1.0);
  outline: none;
}
.welcome-box:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.welcome-title,
.welcome-lede,
.welcome-body {
  overflow-wrap: break-word;
}

.welcome-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ink);
}
.welcome-lede {
  font-style: italic;
  font-weight: 600;
  color: var(--brand);
  font-size: 18px;
  margin: 0 0 14px;
}
.welcome-body p { margin: 0 0 12px; }
.welcome-body strong { color: var(--ink); font-weight: 700; }
.welcome-body code {
  background: var(--code-bg);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.9em;
  font-family: var(--mono);
}
.welcome-coda {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 14px !important;
  color: var(--ink-soft);
  font-size: 15px;
}

.welcome-close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 26px;
  line-height: 28px;
  cursor: pointer;
  border-radius: 4px;
}
.welcome-close:hover { background: var(--bg-card-alt); color: var(--ink); }
.welcome-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.welcome-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Suppress checkbox — small muted control that pushes the action
   buttons to the right on desktop (margin-right: auto). Clicking the
   label toggles the checkbox via the for= association on the maud
   markup, so the whole "Don't show this again" text is a hit target. */
.welcome-suppress {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.welcome-suppress:hover { color: var(--ink-soft); }
.welcome-suppress input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}
.welcome-suppress:focus-within { color: var(--ink); }

@keyframes welcome-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-slidein {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1.000); }
}

/* Phones — fill more of the screen, stack buttons full width. */
@media (max-width: 520px) {
  .welcome-modal { padding: 16px 12px; }
  .welcome-box {
    width: calc(100vw - 24px);
    max-width: 360px;
    padding: 20px 18px 18px;
    max-height: calc(100vh - 32px);
  }
  .welcome-title { font-size: 22px; }
  .welcome-lede  { font-size: 16px; }
  .welcome-body  { font-size: 15px; }
  .welcome-coda  { font-size: 14px; }
  .welcome-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .welcome-actions .btn-primary,
  .welcome-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
  /* Suppress checkbox at the bottom of the stack on phones (column-
     reverse with the checkbox first in DOM order puts it last visually
     — primary action on top for thumb-reach). */
  .welcome-suppress {
    margin-right: 0;
    justify-content: center;
    padding-top: 4px;
  }
}

/* Dark theme — only when the user has selected data-theme=dark or has it
   on auto with a dark OS preference (matches the rest of the stylesheet's
   pattern; light remains the default).                                   */
:root[data-theme="dark"] .welcome-box,
:root[data-theme="dark"] .welcome-body strong,
:root[data-theme="dark"] .welcome-title { color: #e8dfd1; }
:root[data-theme="dark"] .welcome-box   { background: #1f1c18; border-color: #4a3f30; }
:root[data-theme="dark"] .welcome-coda  { color: #b8aa90; border-top-color: #4a3f30; }
:root[data-theme="dark"] .welcome-body code { background: #2a251f; }
:root[data-theme="dark"] .welcome-backdrop  { background: rgba(0, 0, 0, 0.75); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .welcome-box,
  :root[data-theme="auto"] .welcome-body strong,
  :root[data-theme="auto"] .welcome-title { color: #e8dfd1; }
  :root[data-theme="auto"] .welcome-box   { background: #1f1c18; border-color: #4a3f30; }
  :root[data-theme="auto"] .welcome-coda  { color: #b8aa90; border-top-color: #4a3f30; }
  :root[data-theme="auto"] .welcome-body code { background: #2a251f; }
  :root[data-theme="auto"] .welcome-backdrop  { background: rgba(0, 0, 0, 0.75); }
}

/* ─── /submit · Upload PDF + External URL pair ───────────────────────
   The native `<input type="file">` is the only field the browser draws
   with its own button — by default that comes out as a small grey OS
   button that visually misfits next to the styled URL input. We style
   ::file-selector-button to match the rest of the form: brand-accent
   button on the left, chosen-filename text flowing to the right, same
   height as the sibling URL input.
   ──────────────────────────────────────────────────────────────── */
.submit-form input[type="file"] {
  padding: 0;
  background: #fff;
  cursor: pointer;
  min-height: 38px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-soft);
}
.submit-form input[type="file"]::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0 12px 0 0;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--rule-strong);
  background: var(--brand-bg);
  color: var(--brand);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  height: auto;
}
.submit-form input[type="file"]::file-selector-button:hover {
  background: var(--brand);
  color: #fff;
}
.submit-form input[type="file"]::-webkit-file-upload-button {
  /* Safari historical alias — same styling so old WebKit still matches. */
  margin: 0 12px 0 0;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--rule-strong);
  background: var(--brand-bg);
  color: var(--brand);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

/* Match the sibling URL input exactly so the two halves line up. */
.submit-form .row-fields input[type="url"],
.submit-form .row-fields input[type="text"] {
  min-height: 38px;
}

/* ─── Email-verification banner ──────────────────────────────────────
   Shown at the top of /me/edit and /submit when the current user's
   email_verified flag is 0. Warm amber palette so it reads as "needs
   attention" without being alarmist.
   ──────────────────────────────────────────────────────────────── */
.verify-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
  border-left: 4px solid var(--warn);
  border-radius: 5px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.verify-banner-text { flex: 1 1 320px; min-width: 0; }
.verify-banner-text strong { color: var(--warn); }
.verify-banner-resend { margin: 0; flex: 0 0 auto; }
.verify-banner-resend .btn-secondary { white-space: nowrap; }

/* When the banner is in inline-fallback mode it has two controls — the
   primary "Verify my email →" link and a smaller "New link" form. */
.verify-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}
.verify-banner-actions .btn-primary,
.verify-banner-actions .btn-secondary { white-space: nowrap; }
.verify-banner-actions form { margin: 0; }

@media (max-width: 520px) {
  .verify-banner { flex-direction: column; align-items: stretch; }
  .verify-banner-resend .btn-secondary { width: 100%; text-align: center; }
  .verify-banner-actions { flex-direction: column; align-items: stretch; }
  .verify-banner-actions .btn-primary,
  .verify-banner-actions .btn-secondary { width: 100%; text-align: center; }
}

/* ─── Password flows (login forgot link + /me/edit security section) ── */
.login-forgot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dotted var(--rule-strong);
}
.login-forgot a { color: var(--link); font-weight: 600; }

.me-edit-security {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.me-edit-security h2 {
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--ink-soft);
}

/* ─── arxiv-style account info panel on /me/edit ────────────────────
   Read-only summary surfacing the key account fields plus a row of
   action links to the change-* pages. Visual model: arxiv's "Your
   arXiv.org account: <user>" header — thin-bordered box, compact
   two-column dl, an uppercase tag-style heading, and a
   pipe-separated action row underneath. */
.account-info-panel {
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 14px 18px 12px;
  margin: 18px 0 24px;
  font-family: var(--sans);
}
.account-info-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.account-info-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 18px;
  row-gap: 5px;
  margin: 2px 0;
  align-items: baseline;
  font-size: 14px;
}
.account-info-grid dt {
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}
.account-info-grid dd {
  margin: 0;
  color: var(--ink);
  min-width: 0;
  word-break: break-word;
}
.account-info-email {
  font-family: var(--sans);
  margin-right: 4px;
}
.account-info-grid code {
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 13px;
}
.account-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px 2px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  font-family: var(--sans);
  vertical-align: 1px;
}
.account-badge-ok {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok-rule);
}
.account-badge-warn {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-rule);
}

.account-info-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  font-family: var(--sans);
}
.account-info-link {
  color: var(--link);
  font-weight: 600;
  white-space: nowrap;
}
.account-info-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.account-info-sep {
  color: var(--rule-strong);
  margin: 0 10px;
  user-select: none;
  font-weight: 400;
}

/* Email-change banner reuses .verify-banner palette/layout but with a
   slightly cooler tint so it doesn't read as "alert" — this is an
   in-flight action, not a problem to fix. */
.verify-banner.verify-banner-info {
  background: #eef4f9;
  border-color: #9fbcd9;
  border-left-color: var(--accent-blue);
}
.verify-banner.verify-banner-info .verify-banner-text strong {
  color: var(--accent-blue);
}

@media (max-width: 560px) {
  .account-info-panel { padding: 12px 14px 10px; }
  .account-info-grid {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .account-info-grid dt {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: -3px;
  }
  .account-info-grid dd { padding-left: 0; }
  .account-info-sep { display: none; }
  .account-info-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .account-info-link {
    padding: 4px 0;
    border-bottom: 1px dotted var(--rule);
  }
  .account-info-link:last-child { border-bottom: none; }
}

/* ─── /u/{username} profile header card ──────────────────────────────
   Real name (display_name) is the headline — serif, large, ink-black.
   The @username handle drops to a small monospace muted subtitle so
   readers see the person first and the slug second. The whole header
   sits in a thin-bordered card to give it shape distinct from the
   manuscript list that follows. */
.profile-card {
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  padding: 22px 26px 18px;
  margin: 18px 0 26px;
  box-shadow: var(--shadow);
}
.profile-card-id {
  margin-bottom: 12px;
}
.profile-name {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.profile-handle {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
  letter-spacing: 0;
}
.profile-stats {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px dotted var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 0;
}
.profile-stats strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.profile-stats .role-tag {
  margin-left: 2px;
}
.profile-stat { white-space: nowrap; }
.profile-sep {
  color: var(--rule-strong);
  margin: 0 8px;
  user-select: none;
}
.profile-bio {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.profile-affiliation {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
}
.profile-affiliation-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-actions form { margin: 0; display: inline; }

.profile-section-h {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.005em;
}

@media (max-width: 560px) {
  .profile-card { padding: 18px 18px 14px; }
  .profile-name { font-size: 24px; }
  .profile-stats { font-size: 12px; }
  .profile-sep { margin: 0 6px; }
  .profile-actions { flex-direction: column; }
  .profile-actions .btn-primary,
  .profile-actions .btn-secondary,
  .profile-actions button { width: 100%; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   POLISH LAYER · 20260512f
   Loaded last; overrides earlier rules selectively. Aim: the "looks
   effortless" feel of well-built native software — layered subtle
   shadows, hairline rules, restrained palette, generous whitespace.
   ───────────────────────────────────────────────────────────────── */

/* ── A. Foundation tokens (additive — leave style.css alone) ─────── */
:root {
  /* Layered shadow scale. Each step combines a tight 1px inset-ish
     hairline with a soft drop, the way native macOS surfaces do. */
  --shadow-xs: 0 0 0 1px rgba(20, 16, 8, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 16, 8, 0.06), 0 0 0 1px rgba(20, 16, 8, 0.045);
  --shadow-md: 0 4px 14px rgba(20, 16, 8, 0.08), 0 1px 3px rgba(20, 16, 8, 0.045);
  --shadow-lg: 0 12px 40px rgba(20, 16, 8, 0.14), 0 4px 12px rgba(20, 16, 8, 0.05);
  --shadow-xl: 0 28px 80px rgba(20, 16, 8, 0.20), 0 12px 30px rgba(20, 16, 8, 0.08);

  /* Radius scale: small inline pills / chips / buttons / cards / modals.
     Existing rules sit on top of this without breaking. */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Easing curves. */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── B. Selection, focus, scrollbars — global delight ────────────── */
::selection {
  background: rgba(184, 67, 10, 0.22);
  color: var(--ink);
}

/* One coherent focus ring. Box-shadow form so it doesn't shift layout
   the way `outline` does on certain widgets, AND we layer it under
   any element-specific shadow so they don't fight. */
*:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(184, 67, 10, 0.25), 0 0 0 1px var(--brand);
  border-radius: var(--r-sm);
  transition: box-shadow 0.12s var(--ease-out);
}
/* Buttons + links keep their own border-radius — don't square them off. */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-radius: inherit; }
/* Inputs already have a border — bring the ring just outside it. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(184, 67, 10, 0.18);
}

/* WebKit scrollbars — tight, recede when idle. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(20, 16, 8, 0.18);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(20, 16, 8, 0.32); background-clip: content-box; }

/* ── C. Topbar — softer presence, cleaner active state ───────────── */
.topbar {
  background: linear-gradient(180deg, #c75017 0%, #b8430a 55%, #a3380a 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
              0 2px 8px rgba(20, 16, 8, 0.08);
}
.brand-mark {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) inset,
              0 0 0 1px rgba(255, 255, 255, 0.35),
              0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s var(--ease-out);
}
.brand:hover .brand-mark { transform: scale(1.04); }
.brand-name .bx {
  text-shadow: none;            /* the old shadow read as muddy on the new gradient */
}

.topnav a {
  position: relative;
  height: 28px;
  min-height: 28px;
  border-radius: var(--r-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.topnav a:hover { background: rgba(255, 255, 255, 0.14); }
/* Replace the old muddy dark-bg active state with a crisp 2px white
   under-indicator. Reads instantly as "you are here" on the orange
   bar without darkening it. */
.topnav a.on {
  background: transparent;
  color: #fff;
}
.topnav a.on::after {
  content: "";
  position: absolute;
  left: 7px; right: 7px; bottom: -3px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.topnav a.submit-link {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.topnav a.submit-link:hover { background: rgba(255, 255, 255, 0.26); }
.topnav a.submit-link.on { background: rgba(255, 255, 255, 0.32); }
.topnav a.submit-link.on::after { display: none; }

/* Search input — pill, focusable, native-feeling */
.searchbox input {
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: rgba(255, 253, 248, 0.96);
  border-radius: 18px;
  padding: 5px 12px;
  height: 28px;
  font-size: 13px;
  transition: background 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.searchbox input::placeholder { color: rgba(20, 16, 8, 0.42); }
.searchbox input:focus,
.searchbox input:focus-visible {
  background: #fffdf8;
  border-color: rgba(0, 0, 0, 0.26);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4),
              0 1px 3px rgba(0, 0, 0, 0.15) inset;
  outline: none;
}

/* Userbox — quieter dot separators */
.userbox .sep { color: rgba(255, 228, 206, 0.55); }
.userbox .karma { color: rgba(255, 255, 255, 0.78); }

/* ── D. Manuscript row — clearer hierarchy ───────────────────────── */
.ms-row {
  padding: 14px 0 13px;
  gap: 10px;
  border-bottom-color: var(--rule);
}
.ms-row:first-child { padding-top: 8px; }
.ms-rank {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--rule-strong);
}
.ms-vote { gap: 1px; }
.vote-btn {
  width: 22px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: #bcb6a6;
  transition: background-color 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.vote-btn:hover {
  background: var(--brand-bg);
  color: var(--brand);
}
.vote-btn.voted { background: var(--brand-bg); }
.vote-score {
  font-weight: 600;
  color: var(--ink-soft);
}
.ms-title {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ms-arxivid {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0;
}
.ms-meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
}
.ms-meta .dot { color: var(--rule-strong); }
.ms-sub {
  margin-top: 2px;
  font-size: 12px;
}
.ms-row-withdrawn .ms-title {
  color: var(--muted);
  text-decoration: none !important;
}

/* Badges — refined baseline + breathing room */
.badge {
  display: inline-block;
  padding: 1px 8px 2px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  font-family: var(--sans);
  vertical-align: 1px;
  white-space: nowrap;
}

/* ── E. Buttons — hover lift + crisp press ───────────────────────── */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-weight: 600;
  letter-spacing: 0;
  transition:
    transform 0.06s var(--ease-out),
    background-color 0.12s var(--ease-out),
    color 0.12s var(--ease-out),
    border-color 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out);
  will-change: transform;
}
.btn-primary {
  background: var(--brand);
  border: 1px solid #9c3808;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
              0 1px 2px rgba(184, 67, 10, 0.15);
}
.btn-primary:hover {
  background: #c14a0e;
  border-color: #872f06;
  box-shadow: 0 3px 10px rgba(184, 67, 10, 0.28),
              0 1px 2px rgba(184, 67, 10, 0.12);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.btn-primary:active {
  transform: translateY(0);
  background: #a83c08;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) inset;
}
.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.btn-secondary:hover {
  background: #fff;
  border-color: #aea487;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  text-decoration: none;
}
.btn-secondary:active {
  transform: translateY(0);
  background: var(--bg-card-alt);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) inset;
}
.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
  box-shadow: none;
}

/* ── F. Card surfaces — shared shadow rhythm ─────────────────────── */
.profile-card,
.account-info-panel,
.bx-sidebar-block,
.form-errors {
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
}
.welcome-box {
  box-shadow: var(--shadow-xl);
  border-radius: var(--r-lg);
}
.welcome-backdrop {
  background: rgba(20, 16, 8, 0.42);
  backdrop-filter: saturate(0.7) blur(2px);
  -webkit-backdrop-filter: saturate(0.7) blur(2px);
}

/* ── G. Page header — tighter rhythm ─────────────────────────────── */
.page-header { margin: 10px 0 18px; }
.page-header h1 {
  font-size: 26px;
  letter-spacing: -0.015em;
  font-weight: 700;
  line-height: 1.18;
}
.page-header p.muted {
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 0;
  color: var(--muted);
}

/* ── G2. Browse index — compact subject dashboard ────────────────── */
.browse-header {
  max-width: 860px;
  margin-bottom: 14px;
}
.browse-header h1 {
  letter-spacing: 0;
}
.browse-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0 12px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.browse-stat {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.browse-stat strong {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.browse-stat span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.browse-taxonomy-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.browse-taxonomy-note code {
  white-space: nowrap;
}
.browse-domains {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}
.browse-domain {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.browse-domain-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.browse-domain-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  font-weight: 800;
}
.browse-domain-head span {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.browse-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.browse-category {
  display: grid;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}
.browse-category:hover {
  color: var(--ink);
  border-color: var(--brand-soft);
  background: var(--bg-card-alt);
  text-decoration: none;
}
.browse-cat-id {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.browse-cat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 13px;
}
.browse-cat-count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.browse-footnote {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12.5px;
}
@media (max-width: 720px) {
  .browse-overview {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 9px 0;
  }
  .browse-stat {
    justify-content: space-between;
  }
  .browse-stat strong {
    font-size: 22px;
  }
  .browse-domain-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .browse-category-grid {
    grid-template-columns: 1fr;
  }
  .browse-category {
    grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
  }
  .browse-cat-count {
    grid-column: 2;
  }
}

/* ── H. Forms — focus / spacing micro-polish ─────────────────────── */
.submit-form input[type="text"],
.submit-form input[type="email"],
.submit-form input[type="password"],
.submit-form input[type="url"],
.submit-form select,
.submit-form textarea {
  border-radius: var(--r-sm);
  border-color: var(--rule-strong);
  background: #fff;
  transition: border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.submit-form input[type="text"]:hover:not(:focus),
.submit-form input[type="email"]:hover:not(:focus),
.submit-form input[type="password"]:hover:not(:focus),
.submit-form input[type="url"]:hover:not(:focus),
.submit-form select:hover:not(:focus),
.submit-form textarea:hover:not(:focus) {
  border-color: #aea487;
}
.submit-form .label-text {
  letter-spacing: 0.005em;
}
.form-section h2 {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.form-section h2 .muted, .form-section h2 .req {
  text-transform: none;
  letter-spacing: 0;
}
.submit-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--sans);
}
.submit-stepper-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm, 4px);
  background: var(--bg-card);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}
.submit-stepper-item:hover,
.submit-stepper-item:focus-visible {
  border-color: rgba(184, 67, 10, 0.45);
  color: var(--brand);
  background: var(--brand-bg);
}
.stepper-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 11px;
  font-weight: 800;
}
.submit-stepper-item:hover .stepper-index,
.submit-stepper-item:focus-visible .stepper-index {
  background: var(--brand);
  color: #fff;
}
.stepper-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.submit-step {
  scroll-margin-top: 18px;
}
.submit-step h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.submit-step .step-eyebrow {
  color: var(--brand);
}
.submit-step .step-title {
  color: var(--muted);
}
.review-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.review-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm, 4px);
  background: var(--bg-card-alt);
  padding: 14px 15px;
  min-width: 0;
}
.review-card h3 {
  margin: 0 0 9px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.review-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.48;
}
.review-list li {
  margin: 0 0 7px;
}
.review-list li:last-child {
  margin-bottom: 0;
}
.review-list strong {
  color: var(--ink);
}
.review-card-wide {
  grid-column: 1 / -1;
}
.review-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm, 4px);
  background: var(--bg-card);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.42;
}
.review-check input {
  margin-top: 2px;
  flex: 0 0 auto;
}

/* ── H2. Auth pages — compact form + useful account context ─────── */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(260px, 1fr);
  gap: 28px;
  align-items: start;
}
.auth-form {
  margin-top: 0;
  min-width: 0;
}
.auth-aside {
  min-width: 0;
  padding: 2px 0 0 22px;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--sans);
}
.auth-aside h2 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 800;
}
.auth-facts,
.auth-steps {
  margin: 0;
  padding-left: 20px;
}
.auth-facts li,
.auth-steps li {
  margin: 0 0 12px;
  line-height: 1.45;
}
.auth-facts strong,
.auth-steps strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.auth-side-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.auth-side-links a {
  font-weight: 600;
  font-size: 12.5px;
}
@media (max-width: 700px) {
  .auth-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .auth-aside {
    padding: 14px 0 0;
    border-left: none;
    border-top: 1px solid var(--rule);
  }
}

/* ── I. Footer — quiet, dignified ────────────────────────────────── */
.sitefooter {
  margin-top: 72px;
  padding: 32px 0 28px;
  border-top: 1px solid var(--rule);
  background: rgba(20, 16, 8, 0.018);
  color: var(--muted);
  font-size: 13px;
}
.sitefooter a {
  color: var(--ink-soft);
  font-weight: 500;
}
.sitefooter a:hover { color: var(--brand); text-decoration: none; }
.footer-brand { font-size: 18px; }
.foot-cols { gap: 32px !important; }

/* ── J. Misc — flash, code, small-but-noticed details ────────────── */
.flash {
  background: var(--bg-card);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-weight: 500;
}
code, pre {
  font-feature-settings: "calt" 0;  /* turn off contextual alternates for monospace */
}
.role-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px 2px;
  border-radius: 10px;
  background: var(--code-bg);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  line-height: 1.5;
  vertical-align: 1px;
}

/* Smooth out maud-driven anchor jumps */
a[href^="#"], a[href*="#comment-"] { scroll-margin-top: 64px; }

/* Image-style render of the brand wordmark — keep the playful italic
   X but lose the heavy text-shadow that was clashing on the new
   gradient topbar. */
.brand-name .bx { font-style: italic; text-shadow: none; }

/* Empty states — tiny but a give-up sign of bad apps */
.empty {
  text-align: center;
  padding: 56px 16px 64px;
  color: var(--muted);
}
.empty p { margin: 6px 0; }
.empty p:first-child { font-size: 16px; color: var(--ink-soft); }

/* ── Admin dashboard ────────────────────────────────────────────── */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 18px;
}
.admin-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 13px 14px 12px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.admin-stat-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.admin-stat-value {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.admin-stat-detail {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.admin-panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.admin-panel {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 16px 18px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.admin-panel-wide { grid-column: 1 / -1; }
.admin-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}
.admin-panel-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.12;
}
.admin-panel-head p {
  margin: 3px 0 0;
  max-width: 720px;
}
.admin-mini-stat {
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--bg-card-alt);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.admin-empty {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px;
  background: var(--bg-card-alt);
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
  color: var(--muted);
}
.admin-empty strong { color: var(--ink-soft); }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.admin-table th,
.admin-table td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dotted var(--rule);
  overflow-wrap: anywhere;
  min-width: 0;
}
.admin-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-compact th,
.admin-table-compact td { padding: 7px 8px; }
.admin-title-cell {
  min-width: 0;
  max-width: none;
}
.admin-title-cell > a {
  color: var(--ink);
  font-weight: 700;
}
.admin-title-cell .mono {
  overflow-wrap: anywhere;
}
.admin-pill-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
td.admin-pill-stack {
  display: table-cell;
}
td.admin-pill-stack .admin-pill {
  margin: 0 5px 5px 0;
}
.admin-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg-card-alt);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.admin-pill-ok {
  border-color: var(--ok-rule);
  background: var(--ok-bg);
  color: var(--ok);
}
.admin-pill-warn {
  border-color: var(--warn-rule);
  background: var(--warn-bg);
  color: var(--warn);
}
.admin-pill-muted {
  border-color: var(--rule);
  background: var(--code-bg);
  color: var(--muted);
}
.admin-kv {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}
.admin-kv div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
}
.admin-kv div:last-child { border-bottom: none; }
.admin-kv dt {
  color: var(--muted);
  font-weight: 500;
}
.admin-kv dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  .admin-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-panel-grid { grid-template-columns: 1fr; }
  .admin-panel-wide { grid-column: auto; }
}
@media (max-width: 720px) {
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-panel { padding: 13px 12px; }
  .admin-panel-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .admin-table { display: block; overflow-x: auto; table-layout: auto; }
  .admin-table th,
  .admin-table td {
    white-space: nowrap;
  }
  .admin-title-cell { min-width: 240px; }
}
@media (max-width: 460px) {
  .admin-stat-grid { grid-template-columns: 1fr; }
}

/* Dark-mode auto: when the OS prefers dark, the gradient topbar still
   needs to look right. We already darken via the linear-gradient, but
   ensure the brand-mark white square doesn't pop too hard. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .topbar {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 2px 12px rgba(0, 0, 0, 0.4);
  }
  :root[data-theme="auto"] .brand-mark {
    background: #fbe9d9;
  }
  :root[data-theme="auto"] .sitefooter {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.08);
  }
}

/* Reduce-motion users: turn off transforms and shadows-on-hover so
   nothing wiggles. Still keep colour transitions for legibility. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   POLISH LAYER 2 · 20260512g
   Second pass — manuscript-detail page, banners, radio cards, comments,
   404. Builds on the tokens / shadow / radius scale from polish layer 1.
   ───────────────────────────────────────────────────────────────── */

/* Fix: drop the universal radius coercion from the focus ring so each
   element keeps its own shape (the box-shadow naturally follows the
   element's own border-radius). */
*:focus-visible { border-radius: unset; }
/* And the input-specific rule keeps its no-outline + ring. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-radius: var(--r-sm);
}

/* ── K. Manuscript banners — unified shape, semantic accent rail ──── */
.tombstone-banner,
.agent-banner,
.warn-banner,
.audit-banner {
  display: block;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 14px 18px 12px;
  margin: 16px 0 22px;
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}
.tombstone-banner { border-left-color: var(--rule-strong); color: var(--muted); }
.tombstone-banner strong { color: var(--ink-soft); }
.agent-banner { border-left-color: var(--accent-blue); background: #eef4f9; }
.agent-banner strong { color: var(--accent-blue); }
.warn-banner { border-left-color: var(--warn); background: var(--warn-bg); }
.warn-banner strong { color: var(--warn); }
.audit-banner { border-left-color: var(--ok); background: var(--ok-bg); }
.audit-banner strong { color: var(--ok); }

.tombstone-reason {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

/* ── L. Manuscript detail typography ─────────────────────────────── */
.bx-eyebrow {
  display: inline-block;
  padding: 2px 9px 3px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-card-alt);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
  line-height: 1.5;
}
.bx-eyebrow.agent {
  color: var(--accent-blue);
  background: #eef4f9;
  border-color: #c0d3e6;
}
.bx-eyebrow.withdrawn {
  color: var(--muted);
  background: #ece8db;
  border-color: var(--rule-strong);
}
.ms-h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 4px 0 8px;
  color: var(--ink);
}
.ms-authors-line {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 4px;
  line-height: 1.45;
}
.ms-section-h {
  font-family: var(--sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
  margin: 26px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
.ms-abstract {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* Bx-tabs — same active-indicator shape as the topnav, but inked
   rather than fitted to the orange bar. */
.bx-tabs {
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin: 16px 0 20px;
}
.bx-tabs a {
  padding: 9px 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: -1px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition:
    color 0.12s var(--ease-out),
    background-color 0.12s var(--ease-out),
    border-color 0.12s var(--ease-out);
}
.bx-tabs a:hover {
  color: var(--brand);
  background: rgba(184, 67, 10, 0.05);
  border-bottom-color: var(--rule-strong);
  text-decoration: none;
}
.bx-tabs a.on {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* KV table for conductor / auditor blocks */
.kv {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0;
}
.kv th, .kv td {
  padding: 9px 0;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.kv th {
  width: 30%;
  max-width: 200px;
  font-weight: 500;
  color: var(--muted);
  padding-right: 18px;
  font-family: var(--sans);
}
.kv td { color: var(--ink); }
.kv tr + tr th,
.kv tr + tr td { border-top: 1px dotted var(--rule); }
.kv strong { font-weight: 600; }
.kv em { font-style: italic; color: var(--ink); }

/* Auditor statement: a real blockquote with a brand-tinted rail */
.auditor-statement {
  margin: 16px 0 0;
  padding: 12px 18px;
  border-left: 3px solid var(--ok);
  background: var(--ok-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.auditor-statement p:first-child { margin-top: 0; }
.auditor-statement p:last-child  { margin-bottom: 0; }

/* role-tag agent variant — small blue pill */
.role-tag.agent-tag {
  background: #eef4f9;
  color: var(--accent-blue);
  border-color: #c0d3e6;
}

/* ── M. Sidebar refinements ──────────────────────────────────────── */
.bx-sidebar-block {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.bx-sidebar-block h3 {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--muted);
  font-family: var(--sans);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.bx-sidebar-btn {
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0;
  transition:
    transform 0.06s var(--ease-out),
    background-color 0.12s var(--ease-out),
    border-color 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out);
}
.bx-sidebar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(184, 67, 10, 0.22);
}
.bx-sidebar-btn:active { transform: translateY(0); }
.bx-stats .val { font-weight: 700; }

.bx-sidebar-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.bx-sidebar-inline .bx-sidebar-btn {
  margin: 0;
  padding: 7px 8px;
  font-size: 12.5px;
}

.bx-subject-compact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 9px;
  margin-bottom: 9px;
}
.bx-subject-compact .profile-vbadge {
  font-size: 10.5px;
  padding: 2px 7px;
}

.bx-sidebar-fold {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 7px;
}
.bx-sidebar-block > .bx-sidebar-fold:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.bx-sidebar-fold summary {
  cursor: pointer;
  list-style: none;
  color: var(--brand);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
}
.bx-sidebar-fold summary::-webkit-details-marker { display: none; }
.bx-sidebar-fold summary::before {
  content: "›";
  display: inline-block;
  margin-right: 5px;
  color: var(--muted);
  transform: translateY(-1px);
}
.bx-sidebar-fold[open] summary::before {
  transform: rotate(90deg) translateX(1px);
}
.bx-sidebar-fold > :not(summary):first-of-type {
  margin-top: 7px;
}
.bx-sidebar-fold-danger summary {
  color: #9f3212;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.trust-badge {
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm, 4px);
  background: var(--bg-card-alt);
  color: var(--ink);
}
.trust-badge[open] {
  flex-basis: 100%;
}
.trust-badge summary {
  cursor: pointer;
  list-style: none;
  padding: 5px 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
}
.trust-badge summary::-webkit-details-marker {
  display: none;
}
.trust-badge summary::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border: 1px solid rgba(184, 67, 10, 0.35);
  border-radius: 50%;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
}
.trust-badge p {
  margin: 0;
  padding: 0 8px 8px 28px;
}
.bx-actions a {
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  transition: color 0.12s var(--ease-out), border-color 0.12s var(--ease-out), background 0.12s var(--ease-out);
}

/* ── N. Submit form radio cards (.ctype-card) ────────────────────── */
.ctype-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--bg-card);
  cursor: pointer;
  margin-bottom: 8px;
  transition:
    border-color 0.12s var(--ease-out),
    background 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out),
    transform 0.06s var(--ease-out);
}
.ctype-card:hover {
  border-color: #aea487;
  background: var(--bg-card-alt);
  box-shadow: var(--shadow-sm);
}
.ctype-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-bg);
  box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow-sm);
}
.ctype-card.is-checked {
  border-color: var(--brand);
  background: var(--brand-bg);
  box-shadow: 0 0 0 1px var(--brand) inset, var(--shadow-sm);
}
.ctype-card:has(input:checked) strong,
.ctype-card.is-checked strong { color: var(--brand); }
.ctype-card input[type="radio"] {
  margin: 4px 0 0;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.ctype-card .ctype-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.submit-form:has(input[name="conductor_type"][value="human-ai"]:checked) .ctype-ai-agent,
.submit-form:has(input[name="conductor_type"][value="ai-agent"]:checked) .ctype-human-ai,
.submit-form.conductor-human-ai .ctype-ai-agent,
.submit-form.conductor-ai-agent .ctype-human-ai {
  display: none;
}
.ctype-card strong { font-weight: 600; }

/* ── O. Comments — quiet, conversational ─────────────────────────── */
.comments {
  margin-top: 36px;
  padding-top: 8px;
}
.comments > h2 {
  font-family: var(--sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 14px;
}
.comment-form textarea {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  width: 100%;
  resize: vertical;
  transition: border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.comment-form-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comment-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.comment {
  padding: 12px 0 14px;
  border-bottom: 1px dotted var(--rule);
}
.comment:last-child { border-bottom: none; }
.comment-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.comment-meta strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.comment-body {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.login-cta {
  background: var(--bg-card-alt);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.login-cta a { font-weight: 600; }

/* ── P. Cite page (cite-block holds the BibTeX entry) ────────────── */
.cite-block {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 12px 0 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

/* ── Q. 404 / error pages ────────────────────────────────────────── */
.error-page {
  text-align: center;
  padding: 80px 16px 100px;
  max-width: 560px;
  margin: 0 auto;
}
.error-page-code {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 90px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brand);
  opacity: 0.9;
  margin-bottom: 6px;
}
.error-page-h {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 10px;
  color: var(--ink);
}
.error-page p.muted {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 440px;
  color: var(--muted);
}
.error-page-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 520px) {
  .error-page-code { font-size: 64px; }
  .error-page-h { font-size: 24px; }
  .error-page-actions { flex-direction: column; align-items: stretch; }
  .error-page-actions .btn-primary,
  .error-page-actions .btn-secondary { width: 100%; text-align: center; }

  .ms-h1 { font-size: 23px; }
  .bx-tabs a { padding: 8px 10px; font-size: 13px; }
}

/* ─── /m/{id}/versions list + historical-version banner ──────────── */
.version-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.version-row {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.version-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}
.version-row-tag {
  display: inline-block;
  background: var(--code-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 1px 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.version-row-current {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok-rule);
  border-radius: 10px;
  padding: 1px 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.version-row-time {
  color: var(--muted);
  font-size: 12.5px;
  font-family: var(--sans);
}
.version-row-spacer { flex: 1; }
.version-row-note {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

/* "Historical version" banner — same shape as verify-banner, but
   neutral palette so it doesn't read as alarm. */
.historical-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card-alt);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
}
.historical-banner strong { color: var(--accent-blue); }
.historical-banner .verify-banner-text { flex: 1 1 360px; min-width: 0; }
.historical-banner .verify-banner-actions { flex: 0 0 auto; }

/* Small button variant — used inside .version-row */
.btn-secondary.btn-small,
.btn-primary.btn-small {
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
}

/* ─── Footer — small, elegant, hairline ───────────────────────────────
   Overrides the polish-layer footer rules. One quiet line of links + a
   single meta sentence. No background tint, no four-column layout —
   just a hairline border, ~12.5 px text, muted ink.                  */
.sitefooter {
  margin-top: 56px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-family: var(--sans);
  line-height: 1.55;
}
.sitefooter .footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 4px;
  margin: 0;
  padding: 0;
}
.footer-nav a {
  color: var(--ink-soft);
  font-weight: 500;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.12s var(--ease-out);
}
.footer-nav a:hover {
  color: var(--brand);
  text-decoration: none;
}
/* The brand wordmark in the footer — tiny serif version, brand-coloured,
   acts as the start-of-line anchor. */
.footer-brand-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--brand) !important;
  margin-right: 2px;
}
.footer-brand-text .bx {
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  margin: 0 -1px;
  display: inline-block;
}
.footer-brand-text:hover { color: var(--link-hover) !important; }

.footer-sep {
  color: var(--rule-strong);
  user-select: none;
  font-size: 11px;
  vertical-align: 1px;
}
/* Small visual gap between the do-things links (About / Submit / RSS …)
   and the legal links (ToS / Privacy / …). On desktop it's a 12 px
   spacer; on narrow widths it collapses so the row wraps naturally. */
.footer-spacer {
  display: inline-block;
  width: 14px;
}

.footer-meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.005em;
}

@media (max-width: 560px) {
  .sitefooter { font-size: 12px; padding: 12px 0 14px; }
  .footer-spacer { display: none; }
  .footer-meta { font-size: 11px; }
}

/* ─── Notifications: topbar bell + listing page ───────────────────── */
.notif-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  line-height: 1;
  position: relative;
  padding: 2px 4px;
  border-radius: 3px;
}
.notif-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #fff;
  color: var(--brand);
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  margin-left: 2px;
  font-family: var(--sans);
}

.notification-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notification-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.notification-row.notification-unread {
  border-left: 3px solid var(--brand);
  background: #fffaf3;
}
.notification-body { flex: 1; min-width: 0; line-height: 1.5; }
.notification-time {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
.notification-detail {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
  background: var(--code-bg);
  padding: 4px 10px;
  border-radius: var(--r-sm);
}

/* ─── Sitemap pretty-render ───────────────────────────────────────── */
.sitemap-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 32px;
  font-size: 13.5px;
}
.sitemap-table th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--rule);
}
.sitemap-table td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px dotted var(--rule);
  vertical-align: top;
}
.sitemap-table td.num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  width: 80px;
}
.sitemap-table tr:last-child td { border-bottom: none; }

/* ─── 2FA enrollment QR + secret block ───────────────────────────── */
.totp-qr {
  display: flex;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px;
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
}
.totp-qr img {
  display: block;
  border-radius: var(--r-sm);
}
.totp-manual { margin-top: 10px; font-size: 13px; }
.totp-manual summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 600;
  padding: 4px 0;
}
.totp-manual summary:hover { color: var(--link-hover); }
.totp-manual pre {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  word-break: break-all;
  margin: 8px 0 0;
}

/* ─── Danger buttons + delete-account ─────────────────────────────── */
.account-info-link.account-info-danger {
  color: #a03030 !important;
}
.account-info-link.account-info-danger:hover {
  color: #6e1e1e !important;
}
.btn-primary.danger {
  background: #a03030;
  border-color: #6e1e1e;
  box-shadow: 0 1px 2px rgba(160, 48, 48, 0.18);
}
.btn-primary.danger:hover {
  background: #b53636;
  border-color: #6e1e1e;
  box-shadow: 0 3px 10px rgba(160, 48, 48, 0.28);
}
.btn-primary.danger:active {
  background: #862828;
}

/* ─── Versions diff ───────────────────────────────────────────────── */
.diff-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 16px 0 24px;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
}
.diff-meta-version { flex: 1; min-width: 0; }
.diff-meta-arrow {
  font-size: 22px;
  color: var(--muted);
  flex: 0 0 auto;
}
.diff-meta-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 2px;
}
.diff-meta-left  { background: var(--code-bg); color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.diff-meta-right { background: var(--brand-bg); color: var(--brand); border: 1px solid var(--brand); }
.diff-revision-note { font-style: italic; }

.diff-section {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 0 0 14px;
  box-shadow: var(--shadow-sm);
}
.diff-section-h {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 8px;
}
.diff-unchanged-pill {
  background: var(--code-bg);
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  font-weight: 600;
}
.diff-block, .diff-context {
  background: var(--code-bg);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
}
.diff-block { background: #fbfaf3; padding: 8px 0; }
.diff-block .diff-added,
.diff-block .diff-removed,
.diff-block .diff-context {
  display: block;
  padding: 1px 14px;
  white-space: pre-wrap;
}
.diff-block .diff-added   { background: rgba(46, 154, 71, 0.13); color: #1f6633; }
.diff-block .diff-removed { background: rgba(186, 85, 26, 0.13); color: #8b3308; }
.diff-block .diff-context { color: var(--muted); }
.diff-added-inline   { background: rgba(46, 154, 71, 0.18); padding: 0 4px; border-radius: 3px; color: #1f6633; font-weight: 600; }
.diff-removed-inline { background: rgba(186, 85, 26, 0.18); padding: 0 4px; border-radius: 3px; color: #8b3308; font-weight: 600; }

/* ─── /submit: source-type radio choice (CSS-only show/hide) ──────── */
.source-choice-section { margin: 14px 0; }
.source-type-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 16px;
}
.source-block { display: none; margin-top: 10px; }
.source-choice-section:has(input[name="source_type"][value="tex"]:checked) .source-tex-block { display: block; }
.source-choice-section:has(input[name="source_type"][value="pdf"]:checked) .source-pdf-block { display: block; }
.source-choice-section.source-choice-tex .source-tex-block { display: block; }
.source-choice-section.source-choice-pdf .source-pdf-block { display: block; }
@supports not selector(:has(*)) {
  .source-choice-section.source-choice-tex .source-tex-block { display: block; }
  .source-choice-section.source-choice-pdf .source-pdf-block { display: block; }
}
.source-external-url { display: block; margin-top: 10px; }

/* ─── /submit: polished upload dropzone ─────────────────────────────
   A label-target acts as the visible card and proxies clicks/drops to
   the visually-hidden <input type="file"> beneath it. Shared JS updates
   `.upload-filename` text when a file is chosen.
   The dashed border + tinted backdrop reads as a familiar "drop zone"
   without screaming for attention. Hover/focus brighten the rule and
   nudge the tray icon up by 1px for a small bit of physicality.
   ──────────────────────────────────────────────────────────────── */
.upload-dropzone {
  position: relative;
  margin: 6px 0 4px;
}
.upload-dropzone .upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  /* keep the native focus ring drivable */
  border: 0;
  padding: 0;
  margin: 0;
  /* squash any UA-rendered text so nothing peeks through opacity transitions */
  font-size: 0;
  color: transparent;
}
.submit-form .upload-dropzone .upload-input {
  /* override the generic .submit-form input[type="file"] styling so the
     transparent input doesn't paint a brand button under our label.
     The earlier rule sets `display: flex` + `background: #fff` + a
     branded ::file-selector-button; we have to undo all of that here. */
  display: block;
  background: transparent;
  min-height: 0;
}
/* Belt-and-suspenders: a few browser builds keep painting the native
   file-picker button even when the parent input is opacity:0. Collapse
   it to 0×0 and hide it explicitly so nothing leaks through. */
.upload-dropzone .upload-input::file-selector-button,
.upload-dropzone .upload-input::-webkit-file-upload-button {
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: transparent;
}
.upload-target {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--brand-bg);
  border: 1.5px dashed rgba(184, 67, 10, 0.40);
  border-radius: var(--r-lg, 10px);
  transition: border-color 0.18s var(--ease-out, ease),
              background 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease),
              transform 0.18s var(--ease-out, ease);
  cursor: pointer;
  user-select: none;
}
.upload-dropzone:hover .upload-target,
.upload-input:focus-visible + .upload-target {
  border-color: var(--brand);
  background: #fff3e6;
  box-shadow: 0 4px 14px rgba(184, 67, 10, 0.08), 0 1px 3px rgba(184, 67, 10, 0.06);
}
.upload-input:focus-visible + .upload-target {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.upload-dropzone:hover .upload-icon { transform: translateY(-1px); }

.upload-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(184, 67, 10, 0.20);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s var(--ease-out, ease);
}
.upload-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.upload-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.upload-prompt {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.002em;
}
.upload-filename {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.upload-filename.has-file {
  color: var(--brand);
  font-weight: 600;
}

/* Hint chips — replace the long single-line caption with a compact
   key/value grid so each constraint is easy to scan. */
.upload-hint-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 4px;
  font-size: 12.5px;
  line-height: 1.55;
}
.upload-hint-list li {
  display: contents;
}
.upload-hint-key {
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  align-self: baseline;
  padding-top: 2px;
  white-space: nowrap;
}
.upload-hint-val { color: var(--ink-soft); }
.upload-hint-val code {
  background: rgba(20, 16, 8, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ─── /m/{id}/revise: artifact and disclosure controls ───────────── */
.revision-artifacts {
  margin: 16px 0 8px;
  padding: 14px 16px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-card-alt);
}
.revision-artifact-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.revision-artifact-heading .label-text { margin: 0; }
.revision-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.revision-upload-grid .field,
.revision-url-row label { margin: 0; }
.revision-upload-grid .upload-target {
  padding: 14px 16px;
  background: var(--bg-card);
}
.revision-upload-grid .upload-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}
.revision-url-row {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}
.revision-url-field { display: block; margin: 0; }
.disclosure-options {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}
.disclosure-choice {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--bg-card-alt);
}
.disclosure-choice strong { color: var(--ink); }
.disclosure-redaction-note {
  border-left: 3px solid var(--brand);
  background: var(--brand-bg);
  padding: 10px 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}
.disclosure-redaction-note strong { color: var(--brand); }

@media (max-width: 860px) {
  .revision-upload-grid { grid-template-columns: 1fr; }
  .revision-artifact-heading { flex-direction: column; gap: 4px; }
  .archive-intro { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .submit-stepper {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .submit-stepper-item {
    padding: 8px 10px;
  }
  .stepper-label {
    white-space: normal;
  }
  .submit-step h2 {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .review-summary {
    grid-template-columns: 1fr;
  }
  .upload-target { flex-wrap: wrap; padding: 14px 14px; gap: 12px; }
  .upload-hint-list { grid-template-columns: 1fr; row-gap: 8px; }
  .upload-hint-key { padding-top: 0; }
}

/* Dark mode — keep the warmth but darken the tray surface so it reads
   as "still a drop zone" rather than a flat panel. Two selectors:
     * `[data-theme="dark"]`  — explicit, fires always
     * `[data-theme="auto"]`  — only when the OS preference is dark
   The `auto` variant MUST sit inside a prefers-color-scheme media query
   so light-mode users on the auto theme keep the warm cream backdrop
   (without the media query, the dark rules clobber light mode). */
:root[data-theme="dark"] .upload-target {
  background: #2d2017;
  border-color: rgba(217, 107, 46, 0.40);
}
:root[data-theme="dark"] .upload-dropzone:hover .upload-target {
  background: #3a2418;
}
:root[data-theme="dark"] .upload-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(217, 107, 46, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .upload-target {
    background: #2d2017;
    border-color: rgba(217, 107, 46, 0.40);
  }
  :root[data-theme="auto"] .upload-dropzone:hover .upload-target {
    background: #3a2418;
  }
  :root[data-theme="auto"] .upload-icon {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(217, 107, 46, 0.28);
  }
}

/* ─── /me/edit · Verified-scholar status panel ───────────────────────
   Two-row grid showing the institutional-email and ORCID state. Each
   row has a left "what + why" block and a right pill/Verify action.
   Pills follow the same green/amber semantic as account-badge.
   ──────────────────────────────────────────────────────────────── */
.verified-scholar-panel {
  margin: 8px 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
  background: var(--bg-card);
  overflow: hidden;
}
.vsp-row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.vsp-row + .vsp-row { border-top: 1px solid var(--rule); }
.vsp-row-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vsp-row-label strong { font-weight: 600; color: var(--ink); }
.vsp-row-label .muted.small { font-size: 12px; }
.vsp-row-status { flex-shrink: 0; }
.vsp-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vsp-pill-ok {
  background: rgba(46, 154, 71, 0.13);
  color: #1f6633;
  border: 1px solid rgba(46, 154, 71, 0.25);
}
.vsp-pill-pending {
  background: rgba(20, 16, 8, 0.05);
  color: var(--muted);
  border: 1px solid var(--rule-strong);
}
.btn-small {
  font-size: 12px !important;
  padding: 5px 12px !important;
  letter-spacing: 0.02em;
}
.orcid-oauth-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
  background: var(--bg-card-alt);
}
.orcid-oauth-card strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.orcid-oauth-card p {
  margin: 3px 0 0;
}
@media (max-width: 700px) {
  .orcid-oauth-card {
    align-items: stretch;
    flex-direction: column;
  }
  .orcid-oauth-card .btn-primary {
    width: 100%;
  }
}

/* Inline feedback rendered at the top of the verified-scholar status
   panel after the ORCID OAuth round trip. The global flash banner
   above the page header is easy to scroll past when the user is
   focused on identity setup. Two states: .vsp-flash-ok (green) and
   .vsp-flash-err (amber, distinct from the plain .flash bar so success
   looks like success). */
.vsp-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
}
.vsp-flash-ok {
  background: rgba(46, 154, 71, 0.08);
  color: #1f6633;
}
.vsp-flash-err {
  background: rgba(186, 85, 26, 0.07);
  color: #8b3308;
}
.vsp-flash-icon {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  flex-shrink: 0;
}
.vsp-flash-msg { flex: 1; min-width: 0; }

/* ─── Manuscript-page advisory banners (restricted / unverified) ───
   The "unaudited" warning is amber; these are tonally calmer (blue/
   slate) because they're FYI rather than danger. Reader is being told
   "this manuscript hasn't passed certain trust gates," not "this
   manuscript could be wrong." Stacks with .audit-banner.unaudited. */
.advisory-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 14px 0;
  border: 1px solid var(--rule-strong);
  border-left: 4px solid #8a9ba8;
  background: rgba(116, 138, 156, 0.06);
  border-radius: var(--r-sm, 4px);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.advisory-banner .advisory-title {
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}
.advisory-banner code {
  background: rgba(20, 16, 8, 0.06);
  padding: 0 5px;
  border-radius: 3px;
}

/* ─── Profile verified-scholar pictorial badges ───────────────────
   Small circular SVG icons sitting at the end of the display-name
   line, Twitter-verified-style. ORCID green, GitHub charcoal, and
   institutional slate-blue. Pure inline SVG — no icon fonts, no remote images.
   The flex row keeps the badges vertically centered against the
   `<h1>` and lets them wrap below on a narrow viewport. */
.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.profile-name-row .profile-name { margin: 0; }
.profile-name-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* nudge down a hair so the icons sit visually centered against the
     serif heading's x-height rather than its full cap-height */
  margin-top: 4px;
}
.profile-name-badge {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform 0.18s var(--ease-out, ease),
              box-shadow 0.18s var(--ease-out, ease);
  cursor: default;
}
a.profile-name-badge { cursor: pointer; }
.profile-name-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.profile-name-badge svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.profile-name-badge.is-orcid:hover svg { filter: drop-shadow(0 0 0.5px #A6CE39); }
.profile-name-badge.is-github:hover svg { filter: drop-shadow(0 0 0.5px #24292f); }
.profile-name-badge.is-inst:hover  svg { filter: drop-shadow(0 0 0.5px #3a6f9c); }

/* ─── Homepage archive positioning ─────────────────────────────── */
.archive-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 18px;
  align-items: stretch;
  margin: 4px 0 18px;
  min-width: 0;
}
.archive-intro-main,
.archive-principles {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.archive-intro-main {
  padding: 20px 22px;
}
.archive-kicker {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.archive-intro h1 {
  margin: 0 0 10px;
  max-width: 780px;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.archive-intro-main p:not(.archive-kicker) {
  max-width: 820px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.52;
  overflow-wrap: break-word;
}
.archive-intro-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.archive-principles {
  display: grid;
  gap: 0;
  padding: 4px 16px;
}
.archive-principle {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.archive-principle:last-child {
  border-bottom: 0;
}
.archive-principle strong,
.archive-principle span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}
.archive-principle strong {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.archive-principle span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.42;
}

/* ─── Standard / All-submissions mode toggle ─────────────────────
   Two-pill segmented control at the top of /, /new, /top. Sits in
   a thin pill-rail with a single moving "active" background so the
   user can tell which mode they're in at a glance. The two pills
   are plain <a> links — bookmarkable, no JS — pointing at the bare
   path and `?show_all=1` respectively. */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-card-alt);
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin: 4px 0 14px;
  font-family: var(--sans);
}
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.14s var(--ease-out, ease),
              background 0.14s var(--ease-out, ease);
}
.mode-pill:hover {
  color: var(--ink);
  background: rgba(20, 16, 8, 0.04);
}
.mode-pill.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(184, 67, 10, 0.18);
}
.mode-pill.is-active:hover {
  background: var(--brand);
  color: #fff;
}
.mode-pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mode-pill-dot.is-standard { background: #2e9a47; }
.mode-pill-dot.is-all { background: var(--muted); }
.mode-pill.is-active .mode-pill-dot { background: #fff; }

/* ─── Tag/chip input — AI model disclosures on /submit ───────────
   Hidden field carries a comma-joined source-of-truth string. Chips
   on top are visual; the typer at the end accepts new names on
   Enter or comma. Whole assembly looks and behaves like a single
   form field. */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm, 4px);
  background: var(--bg-card);
  min-height: 38px;
  font-family: var(--sans);
}
.tag-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(184, 67, 10, 0.18);
}
.tag-chips {
  display: contents; /* let chips participate in the parent's flex flow */
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: var(--brand-bg);
  color: var(--brand);
  border: 1px solid rgba(184, 67, 10, 0.30);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.tag-chip-label { white-space: nowrap; }
.tag-chip-x {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.tag-chip-x:hover { background: rgba(184, 67, 10, 0.18); }
.tag-typer {
  flex: 1 1 160px;
  min-width: 140px;
  border: 0;
  outline: 0;
  padding: 4px 6px;
  font-size: 13.5px;
  font-family: var(--sans);
  background: transparent;
}

/* ─── AI-model display pills on /m/{id} ──────────────────────────
   Same visual language as the input chips so reader UI and writer
   UI feel of-a-piece. Pills wrap onto multiple lines if the list
   is long. */
.ai-model-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.ai-model-pill {
  display: inline-block;
  padding: 2px 9px;
  background: var(--brand-bg);
  color: var(--brand);
  border: 1px solid rgba(184, 67, 10, 0.22);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.5;
}

/* Small caption under the homepage explaining how "Ranked" sorts. */
.sort-caption {
  color: var(--muted);
  font-size: 12.5px;
  margin: 4px 0 12px;
  line-height: 1.55;
  max-width: 78ch;
}
.sort-caption code {
  background: rgba(20, 16, 8, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11.5px;
}
.sort-caption a { color: var(--ink-soft); }
.sort-caption a:hover { color: var(--brand); }

/* Homepage + topbar phone layout. Keep this after the desktop homepage
   rules so the narrow viewport overrides are not clobbered by the base grid. */
@media (max-width: 1024px) {
  .archive-intro {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 600px) {
  .archive-intro {
    margin: 2px 0 14px;
  }
  .archive-intro-main {
    padding: 17px 18px;
  }
  .archive-intro h1 {
    font-size: 30px;
    line-height: 1.08;
    max-width: 100%;
  }
  .archive-intro-main p:not(.archive-kicker) {
    font-size: 15px;
  }
  .archive-principles {
    padding: 2px 14px;
  }

  .topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    padding: 8px 10px;
    gap: 8px;
  }
  .topbar .brand {
    min-width: 0;
    order: 1;
  }
  .topbar .searchbox {
    grid-column: 1 / -1;
    order: 2;
    min-width: 0;
    width: 100%;
    margin-left: 0;
  }
  .topbar .searchbox input {
    width: 100%;
    min-width: 0;
  }
  .topbar .userbox {
    order: 1;
    justify-content: flex-end;
    min-width: 0;
  }
  .topbar .topnav {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar .topnav::-webkit-scrollbar {
    display: none;
  }
  .topbar .topnav a {
    flex: 0 0 auto;
  }
}

@media (max-width: 460px) {
  .archive-intro-main {
    padding: 16px;
  }
  .archive-kicker {
    font-size: 10.5px;
    letter-spacing: 0.11em;
  }
  .archive-intro h1 {
    font-size: 28px;
  }
  .archive-intro-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .archive-intro-actions .btn-primary,
  .archive-intro-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .archive-principle {
    padding: 12px 0;
  }
}

@media (max-width: 380px) {
  .archive-intro h1 {
    font-size: 26px;
  }
}

/* ─── Inline link-styled buttons (comment delete + flag) ───────────
   Buttons that look like text-only links — used for the small
   "delete" / "flag" actions next to each comment so they don't take
   up button-sized real estate, but are still real <button>s inside
   <form>s so we get CSRF protection by default. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: 12px;
}
.linklike:hover { color: var(--brand); }
.linklike.danger:hover { color: #b54300; }
.comment-actions {
  margin-left: 10px;
  font-size: 12px;
  color: var(--muted);
}
.comment-actions form.inline {
  display: inline;
  margin: 0;
}

/* Flag disclosure on the manuscript sidebar — collapsed by default
   so the action doesn't compete with primary affordances; expands
   with a small textarea on click. */
.flag-disclosure summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 0;
}
.flag-disclosure summary::-webkit-details-marker { display: none; }
.flag-disclosure[open] summary { color: var(--ink-soft); }
.flag-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm, 4px);
  background: var(--bg-card);
  resize: vertical;
}
.flag-form .btn-small {
  font-size: 12px;
  padding: 5px 12px;
}