/* ─── 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;
  padding: 3px 0;
  border-bottom: 1px dotted var(--rule);
}
.bx-stats li:last-child { border-bottom: none; }
.bx-stats .lbl { color: var(--muted); }
.bx-stats .val { font-variant-numeric: tabular-nums; font-weight: 600; }

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

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

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

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

/* ─── 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-ish and below. */
@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; }

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

  /* Audit-status callout — let it breathe a bit less. */
  .audit-self-callout { padding: 8px 10px; font-size: 0.92em; }

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

/* Small phone (iPhone SE etc.). */
@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.95em; }
  .bx-cat-list li { padding: 4px 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; }
}