/* DISIE Review platform — styling layered on top of typesetter.css.
 *
 * All tokens (--saffron, --bistre, --ink-1/2/3, --surface, --border,
 * --space-*, --text-*, --font-body/--font-ui) come from typesetter.css.
 * This file only contains components that the typesetter doesn't have
 * already: role-specific dashboards, the reader iframe layout, the
 * comment sidebar, stage pills.
 */

/* === Layout =========================================================
   Override the typesetter's narrow 1440px / 5vw main: the review
   surface is mostly tables + side-by-side detail panels, so we want
   more horizontal real estate. Padding scales smaller on wide screens
   so the content reaches closer to the viewport edges without losing
   the breathing room on mobile. */
main {
  max-width: 1680px;
  padding: clamp(16px, 2.5vw, 32px) clamp(20px, 3.5vw, 56px);
  width: 100%;
}

@media (max-width: 720px) {
  body:has(#stats-performance)::before {
    content: none;
    display: none;
  }
}

.review-header nav {
  display: flex;
  gap: var(--space-4);
  margin-left: var(--space-5);
  font: 600 var(--text-sm) var(--font-ui);
}

.review-header nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.review-header nav a:hover {
  color: var(--ink-1);
  text-decoration: underline;
}

.review-logout {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
}

.review-logout .user-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  font: 600 var(--text-xs) var(--font-ui);
  padding: 0.25rem 0.6rem;
}

/* Text-as-link button used for secondary actions next to a primary
   CTA (logout, cancel inline form, dismiss). Defined globally so it
   beats the foundation ``button { background: var(--saffron) }``
   rule wherever it appears — not only inside .review-logout. */
.link-button {
  background: none;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font: 500 var(--text-sm) var(--font-ui);
  min-height: 0;
  padding: 0;
  text-decoration: underline;
}

.link-button:hover {
  color: var(--ink-1);
}

.review-brand {
  align-items: center;
  display: inline-flex;
  gap: var(--space-3);
}

.review-brand img {
  display: block;
  height: 1.6rem;
  width: auto;
}

.review-brand-label {
  color: var(--ink-3);
  font: 700 var(--text-xs)/1 var(--font-ui);
  letter-spacing: 0.22em;
  padding-left: var(--space-2);
  margin-left: var(--space-1);
  border-left: 1.5px solid var(--saffron);
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .review-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    justify-content: flex-start;
    min-height: 0;
    padding-bottom: var(--space-3);
    padding-top: var(--space-3);
  }

  .review-brand,
  .review-logout {
    min-width: 0;
  }

  .review-header nav {
    gap: var(--space-3);
    margin-left: 0;
    min-width: 0;
    order: 3;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    width: 100%;
  }

  .review-header nav a {
    white-space: nowrap;
  }

  .review-logout {
    margin-left: auto;
    max-width: 100%;
  }

  .review-logout .user-pill {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* === Centered card layout for login / password reset =============== */

.review-narrow {
  margin: var(--space-7) auto 0;
  max-width: 26rem;
  width: 100%;
}

.review-narrow .page-header h1 {
  font: 600 var(--text-xl)/1.2 var(--font-body);
  max-width: none;
}

.review-form {
  display: grid;
  gap: var(--space-3);
}

.review-form label {
  display: grid;
  font: 600 var(--text-sm) var(--font-ui);
  gap: var(--space-1);
}

/* Shared form-field surface. All inputs/textareas/selects in review
   forms share background/border/radius/width. Per-form classes only
   override font-size (compact in sidebars) and padding. */
.review-form input[type="email"],
.review-form input[type="password"],
.review-form input[type="text"],
.review-form input[type="search"],
.review-form input[type="number"],
.review-form textarea,
.review-form select,
.add-comment-form textarea,
.comment-edit-form textarea,
.general-comment-form textarea,
.review-final-form textarea,
.author-response-form textarea,
.reviewer-search input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-1);
  font: var(--text-base)/1.4 var(--font-ui);
  padding: 0.55rem 0.7rem;
  width: 100%;
}

.review-form textarea {
  font-family: var(--font-ui);
  min-height: 6rem;
  resize: vertical;
}

.review-form input:focus,
.review-form textarea:focus {
  border-color: var(--bistre);
  outline: 2px solid rgb(var(--saffron-rgb) / 0.4);
  outline-offset: 1px;
}

/* Locked review form (after submission). All controls get disabled
   so the browser blocks edits and submits; the styling below removes
   the editable surface affordance so the reviewer reads the form
   like a printed record, not like a paused draft. */
.review-form input:disabled,
.review-form textarea:disabled,
.review-form select:disabled,
.review-form fieldset[disabled] input,
.review-form fieldset[disabled] textarea,
.review-form fieldset[disabled] select {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink-2);
  cursor: not-allowed;
}

.review-form.is-locked label,
.review-form fieldset[disabled] label {
  color: var(--ink-2);
}

.review-form .form-meta {
  color: var(--ink-3);
  font: var(--text-sm)/1.5 var(--font-ui);
  margin-top: var(--space-1);
}

.review-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4) var(--space-3);
}

.review-form legend {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.05em;
  padding: 0 var(--space-2);
  text-transform: uppercase;
}

.review-form .radio-row,
.review-form .checkbox-row {
  align-items: center;
  display: flex;
  font: var(--text-sm) var(--font-ui);
  gap: var(--space-2);
  margin: var(--space-1) 0;
}

.review-form .form-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

button.danger {
  background: var(--crimson);
  color: white;
}

/* === Flash messages — small inline banners on form pages =========== */

.flash {
  border-radius: var(--radius-sm);
  font: var(--text-sm)/1.45 var(--font-ui);
  margin-bottom: var(--space-3);
  padding: 0.55rem 0.8rem;
}

.flash-ok {
  background: #ecf3e8;
  border-left: 3px solid var(--forest);
  color: #1f4a2e;
}

.flash-error {
  background: #fbe8e3;
  border-left: 3px solid var(--crimson);
  color: #7a2e1f;
}

.flash-warning {
  background: #fdf5d8;
  border-left: 3px solid var(--saffron);
  color: #5a4612;
}

.flash-warning .link-button {
  font-weight: 600;
  margin-left: 0.4rem;
  text-decoration: underline;
}

/* === Tables ========================================================= */

.review-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-collapse: separate;
  border-radius: var(--radius);
  border-spacing: 0;
  font: var(--text-sm)/1.45 var(--font-ui);
  overflow: hidden;
  width: 100%;
}

.review-table th,
.review-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
}

.review-table thead th {
  background: var(--surface-2);
  color: var(--ink-3);
  font: 700 var(--text-xs)/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  padding: 0.65rem 1rem;
  text-transform: uppercase;
}

.review-table tbody tr:last-child td {
  border-bottom: 0;
}

.review-table .mono {
  font: var(--text-sm)/1.3 var(--font-mono);
}

.review-table a {
  color: var(--bistre);
}

.muted {
  color: var(--ink-3);
}

.review-empty {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-3);
  font: var(--text-sm)/1.5 var(--font-ui);
  padding: var(--space-4);
  text-align: center;
}

.primary-button {
  background: var(--saffron);
  border: 0;
  border-radius: 6px;
  color: var(--ink-1);
  cursor: pointer;
  display: inline-flex;
  font: 700 var(--text-sm) var(--font-ui);
  min-height: 44px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}

.primary-button:hover {
  filter: brightness(0.96);
}

/* Compact variant for tight contexts like the reader comment sidebar
   where the standard 44px CTA would dominate the column. */
.primary-button.is-small {
  border-radius: var(--radius-sm);
  font: 700 var(--text-xs) var(--font-ui);
  min-height: 0;
  padding: 0.35rem 0.8rem;
}

/* === Stage pill — single colour per workflow stage ================ */

.stage-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-block;
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.04em;
  padding: 0.18rem 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-pill.stage-submitted,
.stage-pill.stage-desk_review {
  background: #fcefbb;
  border-color: var(--type-h1-border);
  color: var(--type-h1-fg);
}

.stage-pill.stage-under_review,
.stage-pill.stage-reviews_complete {
  background: var(--type-h2-bg);
  border-color: var(--type-h2-border);
  color: var(--type-h2-fg);
}

.stage-pill.stage-revision_requested {
  background: #fbe5b7;
  border-color: #d2a247;
  color: #6a4710;
}

.stage-pill.stage-accepted,
.stage-pill.stage-in_production {
  background: var(--type-h3-bg);
  border-color: var(--type-h3-border);
  color: var(--type-h3-fg);
}

.stage-pill.stage-published {
  background: var(--forest);
  border-color: var(--forest);
  color: white;
}

.stage-pill.stage-desk_rejected,
.stage-pill.stage-rejected,
.stage-pill.stage-declined {
  background: var(--type-t-bg);
  border-color: var(--type-t-border);
  color: var(--type-t-fg);
}

.stage-pill.stage-invited {
  background: #e3eff6;
  border-color: #92b6ce;
  color: #194268;
}

/* === Stage strip — grid of count tiles on dashboards =============== */

.stage-strip {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: var(--space-4) 0;
}

.stage-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.stage-tile .stage-count {
  color: var(--ink-1);
  font: 800 1.6rem/1 var(--font-ui);
}

.stage-tile .stage-label {
  color: var(--ink-3);
  font: 700 var(--text-xs)/1.2 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stage-tile.stage-submitted,
.stage-tile.stage-desk_review { border-left-color: var(--saffron); }
.stage-tile.stage-under_review,
.stage-tile.stage-reviews_complete { border-left-color: #4a8db8; }
.stage-tile.stage-revision_requested { border-left-color: #d97c10; }
.stage-tile.stage-accepted,
.stage-tile.stage-in_production { border-left-color: var(--forest); }
.stage-tile.stage-published { border-left-color: var(--bistre); }
.stage-tile.stage-desk_rejected,
.stage-tile.stage-rejected { border-left-color: var(--crimson); }

/* === Submission detail header ====================================== */

.submission-id {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
}

.submission-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}

.submission-header-row {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
}

.submission-header-row > div { min-width: 0; }

.submission-header h1 + .submission-meta { margin-top: var(--space-2); }

/* Page-header above tables looks better with a small subtle saffron
   line below so the eye knows where the page chrome ends and the data
   table starts. Reuses the saffron-rule pattern from typesetter's
   page-masthead. */
.page-header + section,
.page-header + .stage-strip,
.page-header + .review-table { margin-top: var(--space-3); }

.submission-header h1 {
  color: var(--ink-1);
  font: 600 var(--text-xl)/1.2 var(--font-body);
  margin: 0 0 var(--space-2);
  max-width: 48ch;
}

.submission-meta {
  align-items: center;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  font: var(--text-sm) var(--font-ui);
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

/* === Tabs on the submission detail ================================ */

.submission-tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.submission-tabs .tab {
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font: 600 var(--text-sm) var(--font-ui);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

.submission-tabs .tab-active {
  border-bottom-color: var(--saffron);
  color: var(--ink-1);
}

/* === Two-column body inside submission detail ======================
   Aside is 14rem so the data-dense right column owns the real estate.
   ``min-width: 0`` on the main column is the standard CSS-grid fix
   that lets overflow-x scroll tables stay inside their column instead
   of pushing the aside off-screen. */

.submission-body {
  align-items: start;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 14rem minmax(0, 1fr);
}

@media (max-width: 60rem) {
  .submission-body { grid-template-columns: 1fr; }
}

.submission-aside {
  position: sticky;
  top: calc(72px + var(--space-3));
  font: var(--text-sm)/1.45 var(--font-ui);
}

.submission-aside h2 {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

.submission-aside h2:not(:first-child) {
  margin-top: var(--space-4);
}

.submission-aside .author-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submission-aside .author-list li {
  font: var(--text-sm)/1.4 var(--font-ui);
  margin-bottom: var(--space-2);
}

.submission-aside .author-list strong {
  color: var(--ink-1);
  font-weight: 600;
}

.submission-aside .badge,
.badge {
  background: var(--saffron);
  border-radius: 999px;
  color: var(--ink-1);
  font: 700 0.66rem/1 var(--font-ui);
  letter-spacing: 0.05em;
  margin-left: var(--space-1);
  padding: 0.18rem 0.45rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.submission-aside .meta-list {
  display: grid;
  gap: 0.35rem 0.7rem;
  grid-template-columns: minmax(7rem, auto) 1fr;
  margin: 0;
  font: var(--text-sm) var(--font-ui);
}

.submission-aside .meta-list dt {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
}

.submission-aside .meta-list dd {
  color: var(--ink-2);
  margin: 0;
}

.submission-main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  width: 100%;
}

/* Forms inside the main column stretch full-width so textareas and
   inputs don't collapse to their placeholder width. */
.submission-main .review-form,
.action-card .review-form {
  width: 100%;
}

/* Stretch text/textarea fields to full column width. Explicitly
   exclude radio/checkbox/file — otherwise the radio circle is forced
   to 100% width and the label text wraps onto its own line below the
   button (visible on the decision form). */
.submission-main .review-form input[type="email"],
.submission-main .review-form input[type="text"],
.submission-main .review-form input[type="password"],
.submission-main .review-form input[type="number"],
.submission-main .review-form input[type="search"],
.submission-main .review-form textarea,
.action-card .review-form input[type="email"],
.action-card .review-form input[type="text"],
.action-card .review-form input[type="password"],
.action-card .review-form input[type="number"],
.action-card .review-form input[type="search"],
.action-card .review-form textarea {
  width: 100%;
}

/* Radio + checkbox stay at their intrinsic size — the surrounding
   .radio-row / .checkbox-row uses flex so the input sits next to the
   label text on a single line. */
.review-form input[type="radio"],
.review-form input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

/* Decision-letter / desk-reject letter textareas are long-form prose,
   cap them at ~80ch for readability. */
.action-card textarea[name="letter"],
.action-card textarea[name="body_markdown"],
.action-card textarea[name="confidential_to_editor"] {
  max-width: 70rem;
}

/* === Decision history + author submission detail =================== */

.decision-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: var(--radius);
  font: var(--text-sm)/1.5 var(--font-ui);
  padding: var(--space-3) var(--space-4);
}

.decision-card header strong {
  color: var(--ink-1);
  font: 700 var(--text-sm) var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.decision-letter,
.review-body {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--ink-1);
  font: var(--text-sm)/1.5 var(--font-body);
  margin: var(--space-2) 0 0;
  /* pre-wrap respects author line breaks but only wraps at whitespace,
     so a single long undifferentiated string (URLs, asdfasdf, etc.)
     would push the <pre> wider than its column and trigger a
     horizontal scroll on the whole submission view. anywhere lets the
     browser break inside such runs as a last resort. */
  overflow-wrap: anywhere;
  padding: var(--space-3);
  white-space: pre-wrap;
}

.review-card-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.review-card-detail header {
  align-items: baseline;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  font: var(--text-sm) var(--font-ui);
  gap: 0.4rem var(--space-2);
}

.review-card-detail header strong {
  color: var(--ink-1);
  font-weight: 600;
}

/* === Reader (iframe + comment sidebar) ============================= */

/* Break the reader out of the global 1440px <main> cap — the reading
   pane and the comment sidebar both want as much horizontal room as
   the viewport offers. Edge padding is kept slim so the iframe gets
   the lion's share. */
body:has(.reader-shell) main {
  max-width: none;
  padding: clamp(12px, 1.5vw, 20px) clamp(14px, 1.8vw, 28px);
}

.reader-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: calc(100vh - 7rem);
  min-height: 36rem;
}

/* One-line toolbar: ID · Title · stage pill · revision chip · deadline
   chip · PDF link. Wraps gracefully on narrow viewports but stays a
   single row on typical desktop widths so the reader gets vertical
   real estate. */
.reader-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: space-between;
  padding-bottom: var(--space-2);
}

.reader-toolbar-titlerow {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.reader-toolbar-titlerow .submission-id {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.reader-toolbar-titlerow h1 {
  color: var(--ink-1);
  flex: 0 1 auto;
  font: 600 var(--text-md)/1.25 var(--font-body);
  margin: 0;
  max-width: 70ch;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-toolbar-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-3);
  font: 600 var(--text-xs) var(--font-ui);
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

/* Green / "submitted" variant used on the reader toolbar once the
   reviewer has finalised their review. Mirrors .flash-ok so the two
   submitted-state surfaces share one visual language. */
.reader-toolbar-chip-ok {
  background: #ecf3e8;
  border-color: #8eb89a;
  color: #1f4a2e;
}

.reader-toolbar-actions {
  align-items: center;
  display: flex;
  font: var(--text-sm) var(--font-ui);
  gap: var(--space-2);
}

.reader-pdf-link {
  font-weight: 700;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
}

.secondary-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--ink-1);
  display: inline-flex;
  font: 700 var(--text-sm) var(--font-ui);
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
}

.secondary-button:hover {
  border-color: var(--bistre);
}

.reader-layout {
  display: grid;
  flex: 1;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 6px var(--reader-sidebar-width, 30rem);
  min-height: 0;
}

@media (max-width: 62rem) {
  .reader-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .reader-resizer { display: none; }
}

/* Drag handle between manuscript pane and sidebar. JS in reader.html
   updates --reader-sidebar-width during drag and persists it. The
   transparent overlay shown during drag prevents the iframe from
   swallowing mousemove. */
.reader-resizer {
  align-items: center;
  background: transparent;
  cursor: col-resize;
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
}

.reader-resizer::before {
  background: var(--border);
  border-radius: 1px;
  content: "";
  display: block;
  height: 100%;
  width: 2px;
  transition: background 0.15s ease, width 0.15s ease;
}

.reader-resizer:hover::before,
.reader-resizer.is-dragging::before {
  background: var(--saffron);
  width: 3px;
}

.reader-resizer-overlay {
  cursor: col-resize;
  inset: 0;
  position: fixed;
  z-index: 50;
}

.manuscript-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
  width: 100%;
}

/* Sidebar: header sticks at top, the rest scrolls as one column so
   comments + review form are visible together — the reviewer can
   scroll naturally from the comment list down into Empfehlung /
   Begründung without nested scroll areas. Submit stays sticky at the
   bottom of the sidebar so the CTA is always reachable. */
.comment-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3);
  scroll-behavior: smooth;
}

.comment-sidebar > * + * { margin-top: var(--space-3); }

.comment-sidebar-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
  padding: var(--space-3);
  position: sticky;
  top: calc(var(--space-3) * -1);
  z-index: 5;
}

.section-eyebrow,
.comment-sidebar-header h2,
.review-final-form h2 {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.comment-sidebar-header p {
  color: var(--ink-3);
  font: var(--text-xs)/1.45 var(--font-ui);
  margin: 0.35rem 0 0;
}

#comment-anchor-buffer {
  background: #fff8db;
  border: 1px dashed var(--type-h1-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  padding: var(--space-2);
}

.add-comment-form textarea {
  font: var(--text-sm)/1.45 var(--font-ui);
  margin: 0.3rem 0;
  padding: 0.4rem 0.55rem;
}

#comment-list {
  display: block;
}

.comment-bucket {
  margin-bottom: var(--space-3);
}

/* Bucket header is a button: click jumps the iframe to the anchored
   paragraph (so the reviewer can see context while editing comments). */
.comment-bucket-header {
  margin: 0 0 var(--space-1);
}

.comment-bucket-jump {
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: block;
  font: var(--text-sm)/1.4 var(--font-ui);
  margin: 0;
  padding: 0.25rem 0.4rem 0.25rem 0.55rem;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
  width: 100%;
}

.comment-bucket-jump:hover,
.comment-bucket-jump:focus-visible {
  background: rgb(var(--saffron-rgb) / 0.08);
  border-left-color: var(--saffron);
  outline: 0;
}

.comment-bucket-label {
  align-items: center;
  color: var(--ink-3);
  display: inline-flex;
  font: 700 var(--text-xs) var(--font-ui);
  gap: var(--space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comment-bucket-label code {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--bistre);
  font: 600 var(--text-xs) ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.05rem 0.35rem;
  text-transform: none;
}

.comment-bucket-count {
  background: var(--saffron);
  border-radius: 999px;
  color: var(--ink-1);
  font: 700 0.7rem var(--font-mono);
  letter-spacing: 0;
  min-width: 1.1rem;
  padding: 0.05rem 0.4rem;
  text-align: center;
}

.comment-bucket-snippet {
  color: var(--ink-3);
  display: block;
  font: italic var(--text-xs)/1.45 var(--font-body);
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: var(--text-sm)/1.45 var(--font-ui);
  margin-bottom: 0.55rem;
  padding: 0.55rem 0.7rem;
}

.comment-quote {
  border-left: 2px solid var(--saffron);
  color: var(--ink-3);
  font: italic var(--text-xs)/1.4 var(--font-body);
  margin: 0 0 var(--space-1);
  padding-left: 0.5rem;
}

.comment-body {
  color: var(--ink-1);
  white-space: pre-wrap;
}

.comment-author {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
}

.comment-meta {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
  margin: 0.3rem 0 0;
}

.comment-actions {
  margin-top: 0.4rem;
}

.comment-actions > summary {
  color: var(--ink-3);
  cursor: pointer;
  font: 600 var(--text-xs) var(--font-ui);
  list-style: none;
  user-select: none;
}

.comment-actions > summary::-webkit-details-marker {
  display: none;
}

.comment-actions > summary::before {
  content: "✎ ";
}

.comment-edit-form {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.comment-edit-form textarea {
  font: var(--text-sm)/1.45 var(--font-ui);
  padding: 0.4rem 0.55rem;
}

.comment-edit-form .form-row {
  display: flex;
  gap: var(--space-2);
}

.comment-delete-btn {
  background: none;
  border: 0;
  color: var(--crimson, #a53d24);
  cursor: pointer;
  font: 600 var(--text-xs) var(--font-ui);
  padding: 0.3rem 0;
  text-decoration: underline;
}

/* "Allgemeiner Kommentar" — pinned input above the bucket list so the
   reviewer can leave a paragraph-independent comment without first
   clicking into the manuscript. */
.general-comment-form {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
  padding: var(--space-2);
}

.general-comment-form label {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.general-comment-form textarea {
  font: var(--text-sm)/1.45 var(--font-ui);
  min-height: 3rem;
  padding: 0.4rem 0.55rem;
  resize: vertical;
}

.general-comment-form .form-row {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}


/* The Gutachten form sits directly below the comment list in the same
   scrollable sidebar — no nested scroll. Submit stays sticky at the
   sidebar bottom so the CTA is always reachable while the reviewer
   types in the Begründung. */
.review-final-form {
  background: var(--surface);
  border-top: 2px solid var(--border);
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}

.review-final-form .save-indicator-row {
  font: var(--text-xs)/1.3 var(--font-ui);
  margin: 0;
}

.review-final-form fieldset {
  margin: 0;
}

.review-final-form textarea {
  font: var(--text-sm)/1.45 var(--font-ui);
  padding: 0.55rem 0.65rem;
  resize: vertical;
}

.review-final-form textarea[name="body_markdown"] {
  min-height: 14rem;
}

.review-final-form textarea[name="confidential_to_editor"] {
  min-height: 5rem;
}

.review-final-form > button[type="submit"] {
  background: var(--saffron);
  border: 0;
  border-radius: var(--radius-sm);
  bottom: calc(var(--space-3) * -1);
  box-shadow: 0 -10px 14px -10px rgba(21, 24, 27, 0.22);
  color: var(--ink-1);
  cursor: pointer;
  font: 700 var(--text-sm) var(--font-ui);
  margin: var(--space-2) calc(var(--space-3) * -1) calc(var(--space-3) * -1);
  padding: 0.85rem;
  position: sticky;
}

/* === Stats bars ==================================================== */

.stats-bars {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  margin: var(--space-3) 0;
  padding: 0;
}

.stats-bar-row {
  align-items: center;
  display: grid;
  font: var(--text-sm) var(--font-ui);
  gap: 0.5rem;
  grid-template-columns: 5rem 1fr 3rem;
}

.stats-bar-label {
  color: var(--ink-3);
}

.stats-bar {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  display: block;
  height: 0.95rem;
  overflow: hidden;
}

.stats-bar-fill {
  background: var(--saffron);
  display: block;
  height: 100%;
}

.stats-bar-fill.is-forest { background: var(--forest); }
.stats-bar-fill.is-blue { background: #4a8db8; }

.stats-bar-value {
  font-weight: 700;
  text-align: right;
}

.stats-section-heading {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  min-width: 0;
}

.stats-section-heading .muted-note {
  margin: 0;
  text-align: right;
}

.stats-metric-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: var(--space-3);
}

.stats-metric-card,
.stats-usage-card {
  --metric-color: var(--saffron);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--metric-color);
  border-radius: var(--radius);
  min-width: 0;
  padding: var(--space-4);
}

.stats-metric-card {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.stats-usage-card {
  display: grid;
  gap: var(--space-2);
}

.stats-metric-card.is-forest,
.stats-usage-card.is-forest { --metric-color: var(--forest); }
.stats-metric-card.is-blue,
.stats-usage-card.is-blue { --metric-color: #4a8db8; }
.stats-metric-card.is-bistre,
.stats-usage-card.is-bistre { --metric-color: var(--bistre); }
.stats-metric-card.is-orange,
.stats-usage-card.is-orange { --metric-color: #d97c10; }
.stats-metric-card.is-crimson,
.stats-usage-card.is-crimson { --metric-color: var(--crimson); }

.stats-metric-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.stats-metric-copy span,
.stats-usage-card > span:first-child {
  color: var(--ink-3);
  font: 700 var(--text-xs)/1.2 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.stats-metric-copy strong,
.stats-usage-card strong {
  color: var(--ink-1);
  font: 700 var(--text-xl)/1 var(--font-ui);
  overflow-wrap: anywhere;
}

.stats-metric-copy em,
.stats-usage-card em {
  color: var(--ink-3);
  font: var(--text-sm)/1.35 var(--font-ui);
  font-style: normal;
}

.stats-gauge {
  align-items: center;
  aspect-ratio: 1;
  background: conic-gradient(var(--metric-color) var(--value), var(--surface-2) 0);
  border-radius: 999px;
  display: inline-grid;
  flex: 0 0 4.25rem;
  isolation: isolate;
  justify-items: center;
  position: relative;
  width: 4.25rem;
}

.stats-gauge::after {
  background: var(--surface);
  border-radius: inherit;
  content: "";
  inset: 0.48rem;
  position: absolute;
  z-index: 0;
}

.stats-gauge span {
  color: var(--ink-1);
  font: 700 var(--text-sm) var(--font-ui);
  position: relative;
  z-index: 1;
}

.stats-card-meter,
.stats-storage-track {
  background: var(--surface-2);
  border-radius: 999px;
  display: block;
  height: 0.45rem;
  overflow: hidden;
}

.stats-card-meter > span,
.stats-storage-track > span {
  background: var(--metric-color);
  display: block;
  height: 100%;
}

.stats-dashboard-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-5);
}

.stats-panel {
  margin-top: 0;
  min-width: 0;
}

.stats-bars-large .stats-bar {
  height: 1.15rem;
}

.stats-storage-list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.stats-storage-row {
  --metric-color: var(--saffron);
  align-items: center;
  display: grid;
  font: var(--text-sm) var(--font-ui);
  gap: 0.65rem;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(8rem, 1fr) 5.5rem;
}

.stats-storage-row.is-forest { --metric-color: var(--forest); }
.stats-storage-row.is-blue { --metric-color: #4a8db8; }
.stats-storage-row.is-bistre { --metric-color: var(--bistre); }
.stats-storage-row.is-orange { --metric-color: #d97c10; }
.stats-storage-row.is-crimson { --metric-color: var(--crimson); }
.stats-storage-row.is-ink { --metric-color: var(--ink-2); }

.stats-storage-name {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.stats-storage-name code {
  color: var(--ink-1);
  font: 700 var(--text-sm) var(--font-mono);
}

.stats-storage-name small {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
}

.stats-storage-row strong {
  color: var(--ink-1);
  font: 700 var(--text-sm) var(--font-ui);
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 62rem) {
  .stats-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 42rem) {
  .stats-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .stats-section-heading .muted-note {
    text-align: left;
  }

  .stats-metric-card {
    align-items: flex-start;
  }

  .stats-storage-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .stats-storage-row strong {
    text-align: left;
  }
}

@media (max-width: 32rem) {
  .stats-bar-row {
    grid-template-columns: 4.8rem minmax(0, 1fr) 2.4rem;
  }

  .stats-metric-card {
    flex-direction: column;
  }
}

/* === Action cards on the editor overview tab ====================== */

.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: var(--radius);
  display: grid;
  font: var(--text-sm)/1.5 var(--font-ui);
  gap: var(--space-3);
  max-width: 60rem;
  padding: var(--space-4) var(--space-5);
  width: 100%;
}

.action-card h3 {
  color: var(--ink-1);
  font: 600 var(--text-md) var(--font-ui);
  margin: 0;
}

.action-card-production {
  border-left-color: var(--forest);
  background: #f4faf2;
}

.action-card-shipped {
  background: #eff5fb;
  border-left-color: #4a8db8;
}

.action-card-shipped code {
  background: rgba(74, 141, 184, 0.15);
  border-radius: var(--radius-sm);
  font: 600 var(--text-xs) var(--font-mono);
  padding: 0.05rem 0.4rem;
}

.desk-reject-details summary {
  color: var(--ink-3);
  cursor: pointer;
  font: 600 var(--text-sm) var(--font-ui);
}

/* === A11y / skip-link ============================================== */

.skip-link {
  background: var(--ink-1);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: white;
  font: 600 var(--text-sm) var(--font-ui);
  left: 1rem;
  padding: 0.5rem 0.85rem;
  position: absolute;
  text-decoration: none;
  top: -3rem;
  transition: top 0.15s ease;
  z-index: 100;
}

.skip-link:focus {
  outline: 3px solid var(--saffron);
  top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}

main:focus { outline: none; }

/* === Invitation landing ============================================ */

.invitation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: var(--radius);
  font: var(--text-sm)/1.55 var(--font-ui);
  padding: var(--space-4) var(--space-5);
}

.invitation-card h2 {
  color: var(--ink-1);
  font: 600 var(--text-lg)/1.25 var(--font-body);
  margin: 0 0 var(--space-2);
}

.invitation-meta {
  display: grid;
  gap: 0.35rem 0.7rem;
  grid-template-columns: 7rem 1fr;
  margin: var(--space-3) 0;
}

.invitation-meta dt {
  color: var(--ink-3);
  font: 700 var(--text-xs) var(--font-ui);
}

.invitation-meta dd { margin: 0; }

.invitation-policy {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font: var(--text-sm)/1.5 var(--font-ui);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
}

.invitation-policy ul {
  margin: var(--space-1) 0 0;
  padding-left: 1.1rem;
}

.invitation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.invitation-actions form.inline {
  display: inline-flex;
}

/* === Reviewer pool search + table ================================= */

/* Flex layout so the input stretches up to 28rem and the button sits
   next to it at content width. The previous grid (28rem + auto)
   absorbed all leftover container width into the auto track, which
   then stretched the button to full-row width. */
.reviewer-search {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.reviewer-search label {
  display: grid;
  flex: 1 1 16rem;
  font: 600 var(--text-sm) var(--font-ui);
  gap: var(--space-1);
  max-width: 28rem;
}

/* === Author response on a comment ================================ */

.author-comments .comment-card {
  margin-top: 0.5rem;
}

.author-response-details summary {
  color: var(--ink-2);
  cursor: pointer;
  font: 600 var(--text-sm) var(--font-ui);
  margin-top: 0.4rem;
}

.author-response-form textarea {
  font: var(--text-sm)/1.45 var(--font-ui);
  margin-top: 0.4rem;
  padding: 0.45rem 0.6rem;
}

.author-response-form .save-indicator {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
  margin-left: var(--space-2);
}

/* === Audit log ===================================================== */

.audit-table tbody tr:nth-child(odd) td {
  background: var(--surface-2);
}

.audit-payload {
  color: var(--ink-3);
  font: var(--text-xs)/1.4 var(--font-ui);
  word-break: break-word;
}

.audit-chip-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.audit-chip {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  font: var(--text-xs)/1.2 var(--font-ui);
  overflow: hidden;
}

.audit-chip-label {
  background: var(--border);
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.45rem;
}

.audit-chip-value {
  color: var(--ink-1);
  font-family: var(--font-mono);
  padding: 0.15rem 0.55rem;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === ORCID OAuth button ============================================ */
/*
 * Brand spec: ORCID requires the green disc ("ORCID iD") to the
 * left of the label "Sign in with ORCID" / "Mit ORCID registrieren".
 * Minimum disc size is 16x16 px; we render at 20px to match the
 * adjacent button text-height. The visual treatment (white surface,
 * thin border, hover lift) follows ORCID's branded-button guidance
 * at https://info.orcid.org/brand-guidelines/.
 */
.orcid-divider {
  align-items: center;
  color: var(--ink-3);
  display: flex;
  font: var(--text-sm)/1 var(--font-ui);
  gap: var(--space-2);
  margin: var(--space-3) 0;
  text-transform: lowercase;
}

.orcid-divider::before,
.orcid-divider::after {
  background: var(--border);
  content: "";
  flex: 1;
  height: 1px;
}

.orcid-button {
  align-items: center;
  background: var(--surface, #fff);
  border: 1px solid #d6d6d6;
  border-radius: var(--radius-sm);
  color: #2e2e2e;
  display: inline-flex;
  font: 600 var(--text-base)/1 var(--font-ui);
  gap: 0.6rem;
  justify-content: center;
  padding: 0.6rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.orcid-button:hover,
.orcid-button:focus {
  border-color: #a6ce39;
  box-shadow: 0 0 0 2px rgba(166, 206, 57, 0.25);
  outline: none;
}

.orcid-button-icon {
  display: block;
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}

.orcid-register-card {
  margin-bottom: var(--space-3);
}

.register-orcid-lead {
  color: var(--ink-2);
  font: var(--text-sm)/1.5 var(--font-ui);
  margin: 0 0 var(--space-3);
}

/* === Workflow timeline ==============================================
   Vertical milestone list. Each phase has a marker on the left
   (filled saffron = done, ring = current, outline = pending) and a
   body card to the right with timestamp + detail + per-phase counts.
   Connector line (the vertical thread between markers) is drawn as a
   left border on the <ol> itself, offset to sit behind the markers. */

.workflow-timeline {
  border-left: 2px solid var(--border);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
}

.workflow-phase {
  margin: 0 0 var(--space-4) 0;
  padding: 0;
  position: relative;
}

.workflow-phase:last-child {
  margin-bottom: 0;
}

.workflow-phase-marker {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 50%;
  height: 14px;
  left: calc(-1.5rem - 8px);
  position: absolute;
  top: 0.35rem;
  width: 14px;
}

.workflow-phase-done > .workflow-phase-marker {
  background: var(--saffron);
  border-color: var(--saffron);
}

.workflow-phase-current > .workflow-phase-marker {
  background: var(--bg);
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgb(var(--saffron-rgb) / 0.18);
}

.workflow-phase-pending > .workflow-phase-marker {
  background: var(--bg);
  border-color: var(--border);
  border-style: dashed;
}

.workflow-phase-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.workflow-phase-done > .workflow-phase-body {
  border-left: 3px solid var(--saffron);
}

.workflow-phase-current > .workflow-phase-body {
  border-left: 3px solid var(--saffron);
  background: #fffaef;
}

.workflow-phase-pending > .workflow-phase-body {
  background: transparent;
  border-style: dashed;
  color: var(--ink-3);
}

.workflow-phase-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  justify-content: space-between;
  margin: 0;
}

.workflow-phase-label {
  color: var(--ink-1);
  font: 700 var(--text-sm)/1.3 var(--font-ui);
  margin: 0;
}

.workflow-phase-pending .workflow-phase-label {
  color: var(--ink-3);
}

.workflow-phase-when {
  color: var(--ink-3);
  font: 500 var(--text-xs)/1 var(--font-ui);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.workflow-phase-when-active {
  color: var(--saffron-deep, #b27a17);
  font-weight: 700;
  text-transform: uppercase;
}

.workflow-phase-actor {
  color: var(--ink-2);
  font: var(--text-xs)/1.45 var(--font-ui);
  margin: 0.3rem 0 0;
}

.workflow-phase-detail {
  color: var(--ink-1);
  font: var(--text-sm)/1.45 var(--font-ui);
  margin: 0.3rem 0 0;
}

.workflow-phase-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
}

.workflow-phase-counts li {
  color: var(--ink-2);
  font: var(--text-xs)/1.2 var(--font-ui);
}

.workflow-phase-counts strong {
  color: var(--ink-1);
  font-weight: 700;
  margin-right: 0.2rem;
}

.workflow-phase-reviewers {
  margin-top: 0.55rem;
}

.workflow-phase-reviewers summary {
  color: var(--ink-2);
  cursor: pointer;
  font: 600 var(--text-xs)/1.2 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workflow-phase-reviewers ul {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.workflow-phase-reviewers li {
  border-top: 1px dashed var(--border);
  font: var(--text-sm)/1.45 var(--font-ui);
  padding: 0.4rem 0;
}

.workflow-phase-reviewers li:first-child {
  border-top: none;
  padding-top: 0;
}

.workflow-reviewer-label {
  color: var(--ink-1);
  font-weight: 600;
  margin-right: 0.4rem;
}

/* === Layout utilities ==============================================
   Replaces the wave of repeated inline styles that crept into the
   review templates. Each utility names a small layout primitive that
   showed up 3+ times: section spacing, bare lists, inline forms,
   compact disclosure-summary, anti-bot honeypot, page-header with
   trailing action. */

.section-block {
  margin-top: var(--space-4);
}

.section-block-lg {
  margin-top: var(--space-5);
}

.section-block-bottom {
  margin-bottom: var(--space-4);
}

.section-block > .section-eyebrow:first-child,
.section-block-lg > .section-eyebrow:first-child,
.section-block-bottom > .section-eyebrow:first-child {
  margin-bottom: var(--space-2);
}

.bare-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-inline {
  display: inline;
}

.review-body.is-confidential {
  background: #fff8db;
}

.summary-eyebrow {
  color: var(--ink-3);
  cursor: pointer;
  font: 600 var(--text-xs) var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Honeypot field — hidden off-screen, anti-bot pattern (bots that
   auto-fill every visible-looking field populate this; real users
   never see or tab to it). Was previously inlined in register.html. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Page-header with a trailing primary action (e.g. "My submissions"
   list + "Upload manuscript" CTA). The h1 keeps its margin from the
   foundation .page-header rule; the action sits right-aligned. */
.page-header.has-action {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.page-header.has-action h1 {
  margin: 0;
}

/* Lead note above a content block — small muted paragraph that sits
   below the page header and above the data table. */
.section-note {
  color: var(--ink-3);
  font: var(--text-sm)/1.45 var(--font-ui);
  margin: 0 0 var(--space-4);
}

/* Short note directly under a section-eyebrow heading (tighter than
   .section-note — only var(--space-2) below). */
.section-intro {
  margin: 0 0 var(--space-2);
}

/* Spacing inside review-card-detail for sub-elements that the editor
   reviewers tab uses (confidential disclosure, inline comments, accept
   form). Replaces a fistful of style="margin-top: var(--space-2/3)". */
.review-card-detail + .review-card-detail {
  margin-top: var(--space-3);
}

.review-card-detail > details,
.review-card-detail .author-comments {
  margin-top: var(--space-2);
}

.review-card-detail > .form-row {
  margin-top: var(--space-3);
}

.review-card-detail .review-form {
  margin-top: var(--space-2);
}

/* Small muted note that follows a content block (table, list, etc).
   Used both inside review-card-detail and standalone below stats
   tables. */
.muted-note {
  color: var(--ink-3);
  margin: var(--space-2) 0 0;
}

/* Decline-form spacing inside the invitation-actions disclosure. */
.invitation-actions details > .review-form {
  margin-top: var(--space-2);
}

/* Tight follow-up line under a reviewer entry in the workflow timeline. */
.declined-reason {
  margin-top: 0.2rem;
}

/* Prominent "this review is frozen" banner shown at the top of the
   comment sidebar once review.status leaves draft. Same forest tint
   as .flash-ok / .reader-toolbar-chip-ok so the reviewer sees a
   single colour-coded "submitted" state across toolbar + sidebar. */
.review-locked-banner {
  background: #ecf3e8;
  border: 1px solid #8eb89a;
  border-left: 3px solid var(--forest);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}

.locked-banner-title {
  color: #1f4a2e;
  font: 700 var(--text-sm) var(--font-ui);
  margin: 0;
}

.locked-banner-meta {
  color: #2d5e3e;
  font: var(--text-xs)/1.45 var(--font-ui);
  margin: 0.25rem 0 0;
}

/* Subtle informational status block — reserved for stages where the
   author has no action to take ("we'll get back to you"). The saffron
   .action-card variant stays for stages where there's a button to
   click (revision requested, etc.). */
.status-notice {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  font: var(--text-base)/1.55 var(--font-ui);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.status-notice-label {
  color: var(--ink-3);
  font: 700 var(--text-xs)/1.2 var(--font-ui);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.status-notice p {
  color: var(--ink-1);
  margin: 0;
}

.status-notice a {
  color: var(--bistre);
}

/* Key/value lookup table for submission metadata (Article type,
   Submitted at, Authors, …). Same visual rhythm as .review-table but
   with row headers in the first column and no thead. */
.info-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-collapse: separate;
  border-radius: var(--radius);
  border-spacing: 0;
  font: var(--text-sm)/1.5 var(--font-ui);
  overflow: hidden;
  width: 100%;
}

.info-table th[scope="row"] {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--ink-3);
  font: 700 var(--text-xs)/1.2 var(--font-ui);
  letter-spacing: 0.05em;
  padding: 0.7rem 1rem;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
  white-space: nowrap;
  width: 11rem;
}

.info-table td {
  border-bottom: 1px solid var(--border);
  color: var(--ink-1);
  padding: 0.7rem 1rem;
  vertical-align: top;
}

.info-table tr:last-child th,
.info-table tr:last-child td {
  border-bottom: 0;
}

.info-table td code {
  color: var(--bistre);
  font: var(--text-sm) var(--font-mono);
}

/* Stacked author entries inside an info-table cell so multiple
   authors don't collapse onto a single line. */
.info-table .author-entry {
  margin: 0 0 var(--space-2);
}

.info-table .author-entry:last-child {
  margin-bottom: 0;
}

/* Narrow + centred container for stats sections whose payload is a
   single bar, tiny lookup table, or empty state. Sits below the
   full-width stage-tile strip and balances the page visually instead
   of clinging to the left edge of the 1680px main column. */
.stats-narrow {
  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;
}