:root {
  /* ------------------------------------------------------------------
     Design tokens — Asia-Pacific Youth Culture Foundation journals

     Brief: an academic publishing platform read by submitting authors,
     invited reviewers, and indexing services (Scholar, DOAJ, Crossref).
     The job of this design is credibility, not spectacle: a journal that
     looks like a marketing site is a journal nobody cites.

     Consequences of that read, applied throughout:
     - one accent colour, used for interaction only, never decoration
     - one corner-radius scale; publishing is a squared-off medium
     - borders and rules carry structure instead of card shadows
     - motion only where it answers a click
     ------------------------------------------------------------------ */

  /* Surfaces. A single cool-neutral family; no warm/cool mixing. */
  --bg: #f4f6f8;
  --paper: #ffffff;
  --paper-alt: #fafbfc;
  --ink-wash: #eef1f4;

  /* Rules. Two weights: hairline for lists, structural for sections. */
  --line: #dde2e8;
  --line-strong: #c3ccd6;

  /* Text. Near-black with a trace of blue so it sits with the accent. */
  --text: #16202b;
  --text-soft: #3c4a58;
  --muted: #667484;

  /* The single accent. Saturation deliberately under 80% — this carries
     links, focus rings and the primary action, and nothing else. */
  --accent: #14507d;
  --accent-hover: #0e3c60;
  --accent-wash: #e8eef4;

  /* Status. Not accents: these only ever appear inside status pills. */
  --ok: #1f6b47;
  --warn: #8a5a15;
  --stop: #97282b;

  /* One radius scale. Interactive elements share the same value as
     containers so nothing reads as borrowed from another system. */
  --radius: 4px;
  --radius-lg: 6px;

  /* One shadow, tinted to the background hue rather than pure black,
     reserved for genuinely floating elements (menus, modals). */
  --shadow: 0 8px 24px rgba(22, 32, 43, 0.08);

  /* Type scale, 1.25 ratio from a 16px base. */
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.9531rem;
  --step-4: 2.4414rem;
  --step-5: 3.0518rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background: #fff;
}

a {
  color: var(--accent-hover);
}

.page-shell {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

.utility-bar {
  border-bottom: 1px solid var(--line);
  background: #f7fbfe;
}

.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}

.utility-inner p,
.utility-inner a {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}

.page-stack,
.platform-hero,
.article-layout {
  padding-top: 20px;
  padding-bottom: 36px;
}

.site-shell {
  background: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
}

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 330px;
  max-width: 100%;
  height: auto;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-button {
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.role-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}

/* A column, so the action can be pushed to the foot of the card. The cards
   stretch to a common height in the grid but their descriptions do not run to
   the same number of lines — "Access reviewer notices, manuscript invitations,
   and reviewer workflow tasks" is two lines where its neighbours are three —
   so the buttons sat at three different heights across one row. */
.role-choice-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.role-choice-card > .button {
  margin-top: auto;
}

.role-choice-card h2 {
  margin: 8px 0 10px;
  font-size: 1.55rem;
}

.role-choice-card p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.65;
}

.login-split-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 880px;
  margin: 0 auto;
}

.single-login {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}

.button-primary {
  background: var(--accent);
  color: #fff;
}

.button-secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}

.full-width {
  width: 100%;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.inline-check input {
  width: auto;
}

.card-surface {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.hr-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.metric-card {
  padding: 18px;
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.table-scroll {
  margin-top: 18px;
  overflow-x: auto;
}

.hr-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.hr-table th,
.hr-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.hr-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hr-table code {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86rem;
}

.mini-action {
  min-height: 30px;
  margin: 2px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.mini-action.danger {
  color: #9b1c1c;
}

/* One record per row, full width, stacked top to bottom. Two across saved
   vertical space and cost more than it saved: a folded strip and an opened
   one sat side by side at different heights, and the eye had to work out
   which column it was reading. Each case is one horizontal line that opens
   in place. */
.hr-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
  align-items: start;
}

.hr-record {
  padding: 18px;
  box-shadow: none;
}

.hr-record h3 {
  margin: 4px 0 2px;
  font-size: 1.25rem;
}

.hr-record p {
  margin: 8px 0;
  line-height: 1.55;
}

.hr-record-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.active {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: var(--accent-wash);
  color: var(--accent);
}

.hr-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.hr-stat-row span {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
  color: var(--muted);
  font-size: 0.86rem;
}

.hr-stat-row strong {
  color: var(--text);
}

.full-span {
  grid-column: 1 / -1;
}

.pager-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.pager-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.pager-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11, 28, 46, 0.42);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  width: min(720px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  padding: 24px;
  border-radius: var(--radius-lg);
}

.modal-card.wide-modal {
  width: min(980px, 100%);
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.modal-head h2 {
  margin: 2px 0 0;
}

.portal-hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  margin-top: 18px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(11, 23, 32, 0.74) 0%, rgba(11, 23, 32, 0.48) 32%, rgba(11, 23, 32, 0.22) 58%, rgba(11, 23, 32, 0.54) 100%),
    url("./assets/hero-ice-cave.jpg") center/cover no-repeat;
}

.foundation-hero {
  background:
    linear-gradient(90deg, rgba(7, 23, 39, 0.84) 0%, rgba(7, 23, 39, 0.56) 34%, rgba(7, 23, 39, 0.22) 62%, rgba(7, 23, 39, 0.62) 100%),
    url("./assets/hero-ice-cave.jpg") center/cover no-repeat;
}

.portal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: #fff;
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.portal-brand-logo {
  display: block;
  width: 132px;
  height: auto;
}

.portal-links,
.portal-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.portal-links a,
.portal-tools a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.93rem;
}

.portal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.09);
}

.portal-hero-body {
  display: flex;
  align-items: center;
  min-height: 392px;
  padding: 12px 34px 40px;
}

.portal-hero-copy {
  max-width: 520px;
}

.foundation-hero-body {
  min-height: 430px;
}

.foundation-hero-copy {
  max-width: 760px;
}

.light-eyebrow,
.light-copy,
.portal-hero-copy h1 {
  color: #fff;
}

.portal-hero-copy h1 {
  font-size: clamp(3.1rem, 6vw, 4.6rem);
  line-height: 0.98;
}

.foundation-hero-copy h1 {
  max-width: 13ch;
  font-size: clamp(3.4rem, 6vw, 5.1rem);
}

.foundation-hero-copy .lead {
  max-width: 62ch;
}

.portal-stats {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(740px, 100%);
  background: rgba(36, 47, 54, 0.88);
  color: #fff;
}

.portal-stats article {
  padding: 18px 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-stats article:first-child {
  border-left: none;
}

.portal-stats strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.7rem;
  font-weight: 800;
}

.portal-stats span {
  display: block;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.95rem;
  line-height: 1.45;
}

.hero-copy,
.hero-visual,
.simple-hero,
.journal-hero,
.section-block,
.article-body,
.article-side,
.info-ribbon,
.issue-table,
.statement-box {
  padding: 22px;
}

.hero-copy {
  position: relative;
  overflow: hidden;
}

.hero-copy::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  top: -50px;
  border-radius: 50%;
  background: none;
}

.role-tabs {
  display: flex;
  justify-content: center;
  padding: 18px 0 6px;
}

.role-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.role-switch a {
  padding: 10px 22px;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
}

.role-switch a.active {
  background: #3f474d;
  color: #fff;
}

.portal-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  padding: 12px 0 20px;
}

.foundation-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.portal-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}

.portal-card img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.foundation-card-grid .portal-card {
  height: 100%;
}

.foundation-card-grid .portal-card img {
  height: 190px;
}

.portal-card-copy {
  padding: 14px 14px 16px;
}

.portal-card-copy h3 {
  margin-bottom: 8px;
  font-size: 1.18rem;
}

.portal-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.hero-visual {
  overflow: hidden;
  padding: 0;
  background: var(--paper-alt);
}

.hero-visual img,
.feature-image,
.journal-thumb,
.news-image {
  display: block;
  width: 100%;
  height: auto;
}

.eyebrow,
.section-tag,
.journal-label,
.meta-line {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  color: var(--text);
  line-height: 1;
}

h1 {
  /* No global max-width. An 11ch cap was set here for a hero headline of three
     or four words and then applied to every h1 on the site, so a journal named
     "Asia-Pacific Journal of Economics, Culture & Society" broke over five
     lines in a column with a thousand pixels to spare. Where a measure is
     wanted it is set on the specific heading. */
  font-size: clamp(2.8rem, 5.6vw, 4.5rem);
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

h3 {
  font-size: 1.34rem;
}

.lead,
.supporting,
.section-summary,
.journal-card p,
.article-card p,
.issue-card p,
.resource-card p,
.contact-card p,
.article-section p,
.statement-box p,
.issue-list li {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.supporting {
  max-width: 62ch;
}

.hero-actions,
.action-row,
.pill-row,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions,
.pill-row {
  margin-top: 18px;
}

/* The steps a portal takes you through, under the lede.
   These were drawn as bordered pills, which in this system is the shape of a
   button -- and the administrator's hero carries two real buttons in exactly
   that shape, one hero away. Three things that look pressable and are not is
   the kind of inconsistency that reads as a broken page, so the steps are
   numbered and set as a line instead. Nothing here is clickable and nothing
   here now looks it. */
.pill-row {
  counter-reset: portal-step;
  gap: 8px 24px;
  align-items: baseline;
}

.pill-row span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-soft);
}

.pill-row span::before {
  counter-increment: portal-step;
  content: counter(portal-step);
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  /* `baseline` on the flex line, but the digit is centred in its own disc. */
  align-self: center;
}

.info-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
}

.compact-ribbon {
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.info-ribbon article {
  padding: 6px 14px;
  border-right: 1px solid var(--line);
}

.info-ribbon article:last-child {
  border-right: none;
}

.info-ribbon h2 {
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.section-block {
  margin-bottom: 16px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.section-summary {
  max-width: 54ch;
}

.journal-grid,
.article-grid,
.issue-grid,
.feature-grid,
.news-grid,
.resource-grid,
.contact-grid {
  display: grid;
  gap: 14px;
}

.journal-grid,
.issue-grid,
.contact-grid,
.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-grid,
.resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journal-card,
.article-card,
.issue-card,
.feature-card,
.news-card,
.resource-card,
.contact-card {
  padding: 18px;
}

.journal-showcase-stack {
  display: grid;
  gap: 18px;
}

.journal-showcase {
  padding: 22px;
}

.journal-showcase-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.journal-showcase-summary {
  max-width: 78ch;
  margin-bottom: 18px;
}

.journal-showcase-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 18px;
  align-items: start;
}

.scope-panel,
.board-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.board-panel .dashboard-list {
  margin-top: 10px;
}

.feature-card,
.news-card {
  overflow: hidden;
}

.feature-image,
.news-image {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

.feature-copy,
.news-copy {
  padding-top: 14px;
}

.journal-thumb {
  margin-top: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  height: 260px;
  object-fit: cover;
}

.text-link {
  color: var(--accent-hover);
  font-weight: 700;
  text-decoration: none;
}

.issue-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.issue-year {
  color: var(--muted);
  font-weight: 700;
}

.issue-list {
  margin: 16px 0 0;
  padding-left: 20px;
}

.compact-list {
  margin-top: 18px;
}

.simple-hero,
.journal-hero {
  margin-bottom: 16px;
}

.journal-hero {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
}

.journal-side,
.article-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.issue-table {
  display: grid;
  gap: 0;
}

.issue-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.issue-row:first-child {
  border-top: none;
}

.row-actions {
  align-items: center;
}

.article-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.55fr;
  gap: 24px;
}

.article-body h1 {
  max-width: none;
  font-size: clamp(2.35rem, 4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 18px;
}

.article-section {
  margin-top: 20px;
}

.article-meta-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin: 18px 0 10px;
}

.article-meta-card,
.submission-panel,
.submission-form {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.article-meta-card {
  padding: 18px;
}

.article-byline {
  margin: 10px 0 4px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.article-byline sup {
  margin-left: 2px;
  color: #0f766e;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0;
}

.affiliation-list,
.keyword-line,
.article-note,
.small-print {
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.92rem;
}

.affiliation-list {
  margin: 10px 0 0;
  padding-left: 22px;
}

.affiliation-list li {
  padding-left: 4px;
}

.article-body {
  padding: 24px 26px 28px;
}

.article-side {
  position: sticky;
  top: 18px;
}

.keyword-line strong,
.article-note strong {
  color: var(--text);
}

.article-section ul {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.article-section h2 {
  margin-bottom: 10px;
  font-size: 1.42rem;
  line-height: 1.15;
}

.article-section p,
.article-section li,
.article-note,
.keyword-line,
.small-print,
.affiliation-list li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.article-section p + p {
  margin-top: 12px;
}

.submission-hero,
.submission-layout {
  margin-bottom: 16px;
}

.submission-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
}

.submission-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
}

.submission-hero.single-panel {
  grid-template-columns: 1fr;
}

.submission-side-stack {
  display: grid;
  gap: 16px;
  align-content: start;
}

.submission-form {
  padding: 22px;
}

.submission-panel {
  padding: 20px;
}

.compact-head {
  margin-bottom: 16px;
}

.form-section + .form-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.form-grid,
.author-grid {
  display: grid;
  gap: 14px;
}

.form-grid.two-up,
.author-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-author-list {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  font: inherit;
  color: var(--text);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input[type="file"] {
  padding: 10px 12px;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.inline-button {
  min-height: 36px;
  padding: 0 14px;
}

.author-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.author-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.author-card h3,
.submission-panel h3 {
  margin-bottom: 10px;
}

.author-card-head h3 {
  margin-bottom: 0;
}

.author-remove {
  border: none;
  background: transparent;
  color: #b04a4a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.inline-choice {
  margin-top: 12px;
  display: flex;
  align-items: center;
}

.choice-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.choice-label input {
  margin: 0;
}

.optional-tag {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.receipt-panel,
.query-result {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.receipt-panel.is-empty,
.query-result.is-empty {
  background: var(--paper-alt);
}

/* The contact survey answers in place. Two outcomes need telling apart at a
   glance — recorded, or not sent — so each gets a rule in the status colour
   rather than a wash, which would read as decoration. */
.query-result.is-ok {
  border-left: 3px solid var(--ok);
}

.query-result.is-error {
  border-left: 3px solid var(--stop);
}

.query-result.is-error p:first-child {
  color: var(--stop);
  font-weight: 600;
}

.receipt-id {
  margin: 8px 0 14px;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--accent-hover);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.result-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.result-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.query-form {
  display: grid;
  gap: 12px;
}

.query-results-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.search-panel {
  margin-bottom: 16px;
  padding: 20px 22px;
}

.auth-summary {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.auth-summary strong {
  color: var(--text);
}

.login-shell {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 20px;
}

.login-form-card,
.login-side-card,
.editor-dashboard,
.dashboard-card {
  padding: 22px;
}

.login-actions,
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.dashboard-shell,
.editor-shell {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 20px;
}

.editor-grid {
  display: grid;
  gap: 14px;
}

.editor-record {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.editor-record-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 10px;
}

.editor-record p,
.dashboard-list p {
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.92rem;
}

.editor-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dashboard-list {
  display: grid;
  gap: 12px;
}

.dashboard-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.action-card {
  background: #fffdf7;
}

.reviewer-card {
  background: #fbfdff;
}

.inline-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.inline-form-grid input,
.inline-form-grid select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  font: inherit;
  color: var(--text);
}

.single-editor-control {
  grid-template-columns: 1fr 220px;
}

.register-verification-grid {
  grid-template-columns: minmax(0, 1fr) 240px;
  margin-top: 14px;
}

.field-button {
  display: grid;
  align-items: end;
}

.field-button .button {
  width: 100%;
}

.contact-survey {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.archive-search-meta {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.archive-hidden {
  display: none !important;
}

.query-match {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
}

.query-match h3 {
  margin-bottom: 8px;
  font-size: 1.16rem;
}

.query-match p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.status-tracker {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.status-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
}

.status-dot {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: #fff;
}

.status-step.completed .status-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.status-step.active .status-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.status-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.95rem;
}

.status-copy span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.form-message {
  margin: 0 0 12px;
  color: #b04a4a;
  font-size: 0.9rem;
  font-weight: 700;
}

.check-list {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  padding: 22px;
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.compact-auth-hero h1 {
  max-width: none;
  font-size: clamp(2.7rem, 4vw, 3.4rem);
  line-height: 1.04;
  white-space: nowrap;
}

.login-page-title {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.45rem, 3.3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.dashboard-control-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
}

.dashboard-sidebar {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  position: sticky;
  top: 90px;
  height: fit-content;
}

.dashboard-nav-button {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-nav-button.active {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent-hover);
}

.dashboard-main {
  display: grid;
  gap: 20px;
}

.dashboard-panel {
  padding: 22px;
}

.record-accordion {
  overflow: hidden;
}

.record-summary {
  list-style: none;
  cursor: pointer;
}

.record-summary::-webkit-details-marker {
  display: none;
}

.record-body {
  padding-top: 8px;
  display: grid;
  gap: 10px;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 4px;
}

.issue-management-shell {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
}

.issue-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.issue-management-column {
  display: grid;
  gap: 12px;
}

@media (max-width: 980px) {
  .topnav,
  .info-ribbon,
  .hr-metric-grid,
  .section-head,
  .journal-grid,
  .article-grid,
  .issue-grid,
  .feature-grid,
  .news-grid,
  .resource-grid,
  .contact-grid,
  .journal-hero,
  .journal-showcase-grid,
  .article-layout,
  .submission-hero,
  .submission-layout,
  .dashboard-shell,
  .editor-shell,
  .dashboard-control-shell,
  .login-shell,
  .two-col,
  .issue-row,
  .issue-management-grid {
    grid-template-columns: 1fr;
  }

  .topnav {
    display: grid;
    padding: 10px 0;
  }

  .nav-actions {
    justify-content: start;
  }

  .brand-logo {
    width: 250px;
  }

  .footer-banner {
    flex-direction: column;
    align-items: start;
  }

  .dashboard-sidebar {
    position: static;
  }

  .portal-nav,
  .portal-hero-body,
  .portal-stats,
  .portal-cards,
  .foundation-card-grid,
  .role-choice-grid {
    grid-template-columns: 1fr;
  }

  .portal-nav {
    display: grid;
  }

  .portal-links,
  .portal-tools {
    gap: 12px;
  }

  .portal-hero-body {
    min-height: 280px;
    padding: 10px 22px 110px;
  }

  .portal-stats {
    position: static;
    width: 100%;
  }

  .portal-stats article {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .portal-stats article:first-child {
    border-top: none;
  }

  .portal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foundation-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-ribbon article {
    border-right: none;
    border-top: 1px solid var(--line);
  }

  .info-ribbon article:first-child {
    border-top: none;
  }

  h1 {
    max-width: none;
  }

  .pagination-bar {
    align-items: start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .page-shell {
    width: min(100% - 20px, 1240px);
  }

  .brand-logo {
    width: 220px;
  }

  .utility-inner {
    min-height: auto;
    padding: 8px 0;
    flex-direction: column;
    align-items: start;
  }

  .hero-copy,
  .hero-visual,
  .simple-hero,
  .journal-hero,
  .section-block,
  .article-body,
  .article-side,
  .info-ribbon,
  .issue-table,
  .statement-box {
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  .button,
  .nav-button {
    width: 100%;
  }

  .portal-hero {
    min-height: auto;
  }

  .portal-links,
  .portal-tools {
    display: grid;
  }

  .portal-card-copy {
    padding: 12px;
  }

  .portal-cards {
    grid-template-columns: 1fr;
  }

  .foundation-card-grid {
    grid-template-columns: 1fr;
  }

  .role-choice-grid {
    grid-template-columns: 1fr;
  }

  .footer-actions {
    width: 100%;
  }

  .form-grid.two-up,
  .author-grid,
  .article-meta-grid,
  .result-grid,
  .inline-form-grid,
  .single-editor-control,
  .hr-stat-row {
    grid-template-columns: 1fr;
  }

  .hr-record-head {
    display: grid;
  }

  .modal-backdrop {
    padding: 10px;
    align-items: start;
  }

  .modal-card {
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .modal-head,
  .pager-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media print {
  body {
    background: #fff;
  }

  .site-header,
  .utility-bar,
  .article-side {
    display: none;
  }

  .page-shell {
    width: 100%;
    margin: 0;
  }

  .article-layout {
    display: block;
    padding: 0;
  }

  .article-body {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .article-section {
    break-inside: avoid;
  }
}

/* Public journal domain polish */
body {
  background:
    var(--paper);
}

.journal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border-color: #d8e1ea;
  background:
    var(--paper);
  box-shadow: 0 18px 38px rgba(17, 45, 74, 0.08);
}

.journal-hero h1,
.article-body h1,
.section-head h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0;
}

.journal-hero h1 {
  max-width: 860px;
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  line-height: 0.95;
}

.journal-hero .lead {
  max-width: 820px;
  color: #455d73;
  font-size: 1.08rem;
}

.pill-row span,
.section-tag,
.meta-line {
  letter-spacing: 0.08em;
}

.resource-card,
.board-panel,
.issue-table,
.article-body,
.article-side,
.article-meta-card {
  border-radius: var(--radius);
  box-shadow: 0 12px 26px rgba(17, 45, 74, 0.055);
}

.article-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.article-body {
  max-width: 920px;
  padding: clamp(28px, 5vw, 64px);
}

.article-body h1 {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.02;
}

.article-byline {
  font-size: 1.08rem;
}

.article-section h2 {
  margin-top: 32px;
  border-top: 1px solid #dfe8f0;
  padding-top: 24px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.15;
}

.article-section h3 {
  margin-top: 24px;
  color: #173955;
  font-size: 1.2rem;
}

.article-section p,
.article-section li {
  color: #24384c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
}

.article-section ul {
  padding-left: 1.25rem;
}

.article-section li + li {
  margin-top: 10px;
}

.issue-row h3 {
  max-width: 780px;
  overflow-wrap: anywhere;
}

.row-actions {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-body {
    max-width: none;
  }

  .row-actions {
    white-space: normal;
  }
}

/* ==========================================================================
   Editorial layer
   --------------------------------------------------------------------------
   Overrides applied after the original rules. Grouped here rather than edited
   in place so the earlier cascade stays readable and this pass can be reverted
   on its own.

   The five moves, and why:

   1. Type carries the hierarchy. A journal page is read, not scanned, so the
      scale is set on a 1.25 ratio and body measure is capped near 70 characters.
   2. Rules replace cards. Identical rounded panels with the same shadow are the
      house style of every generated page; a border-top and real spacing say the
      same thing without the SaaS association.
   3. One accent, interaction only. Links, focus and the primary action. Never
      decoration, never a second hue.
   4. Eyebrows are rationed. The small uppercase label above every heading is
      the most reliable tell of a templated page. Kept on the journal masthead,
      removed elsewhere: a section's position already says what it is.
   5. Motion answers clicks and nothing else, and stops entirely for anyone who
      has asked their system to reduce it.
   ========================================================================== */

/* 1 ---------------------------------------------------------------- Type */

body {
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--text);
  font-weight: 600;
  /* Descender clearance: the serif's italic y/g/p clip at leading 1. */
  line-height: 1.15;
  margin: 0 0 0.4em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, var(--step-5)); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li {
  color: var(--text-soft);
}

/* Serif body text needs more leading than the sans it sits beside. */
.page-shell p,
.card-surface p {
  max-width: 70ch;
}

.small-print,
.field-hint,
.meta-line {
  font-size: var(--step--1);
  color: var(--muted);
}

/* 2 ------------------------------------------------------- Rules, not cards */

.card-surface {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 28px 30px;
}

/* A run of sibling panels reads as a list, so it is ruled like one rather
   than broken into repeated floating tiles. */
.dashboard-list > .card-surface,
.editor-grid > .card-surface {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 0;
}

.dashboard-list > .card-surface:first-child,
.editor-grid > .card-surface:first-child {
  border-top: 0;
  padding-top: 0;
}

/* 3 -------------------------------------------------------------- Accent */

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
}

.button,
.button-primary,
.primary-btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0;
  /* Labels stay on one line: a wrapped call to action is a broken control. */
  white-space: nowrap;
}

/* Focus must be visible for keyboard users on every interactive element,
   including the ones the original stylesheet styled only on hover. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* 4 ------------------------------------------------------------ Eyebrows */

/* The masthead label identifies the journal, which is genuine information.
   Every other instance was decoration and is suppressed. */
.meta-line {
  text-transform: none;
  letter-spacing: 0;
}

.journal-masthead .meta-line,
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}

/* 5 -------------------------------------------------------------- Motion */

html {
  /* Smooth scrolling is motion the reader did not ask for. */
  scroll-behavior: auto;
}

.button,
.primary-btn,
.outline-btn,
.mini-action {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button:active,
.primary-btn:active,
.outline-btn:active,
.mini-action:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ Journal data */

/* Issues and articles are tabular information. Presenting them as a ruled
   list rather than a card grid is both closer to how journals are read and
   far denser, which matters once there is more than one volume. */
.issue-list,
.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.issue-list > li,
.article-list > li {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: grid;
  gap: 4px;
}

.issue-list > li:hover,
.article-list > li:hover {
  background: var(--paper-alt);
}

/* The ISSN is the single strongest credibility signal a new journal has,
   so it is set as data rather than hidden in a decorative chip. */
.journal-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}

.journal-identity dt {
  color: var(--muted);
  margin: 0 0 2px;
}

.journal-identity dd {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Forms */

/* Labels sit above their control and are never replaced by placeholder text:
   a placeholder disappears as soon as typing starts, taking the only
   description of the field with it. */
.field label,
.field > span {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--text);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--paper);
}

.field input::placeholder,
.field textarea::placeholder {
  /* Placeholder contrast still has to clear AA; it is a hint, not a ghost. */
  color: #7a8795;
}

.field-hint {
  margin: 6px 0 0;
}

/* ----------------------------------------------------------------- Status */

.status-pill,
.status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
}

/* ------------------------------------------------------------------ Print */

/* Articles get printed and filed. */
@media print {
  .site-header,
  .utility-bar,
  .hero-actions,
  .button,
  footer {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* --------------------------------------------------------------- Masthead */

/* The journal identity is the page, not a panel sitting on it. Wrapping a
   masthead in a bordered card is what makes a publication look like a product
   page; a rule under the identity strip does the same structural job. */
.journal-hero.card-surface {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0 0;
  gap: 48px;
  align-items: start;
}

.journal-hero h1 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  margin-bottom: 0.35em;
}

.journal-hero .lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 44ch;
  margin-bottom: 28px;
}

.journal-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 32px;
  margin: 0;
  padding: 18px 0;
}

.journal-identity dd {
  font-size: var(--step-0);
}

/* The side rail holds the three things a visitor actually came to do. */
.journal-side {
  display: grid;
  gap: 8px;
  padding: 20px;
  background: var(--ink-wash);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------- Prose, not cards */

/* Two facing panels of body copy is the SaaS feature-card layout. The same
   content set as ruled columns reads as a journal's "about" page, which is
   what it is. */
.resource-grid.two-col {
  gap: 0 56px;
  border-top: 1px solid var(--line-strong);
  padding-top: 28px;
}

.resource-grid.two-col > .resource-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.resource-grid.two-col > .resource-card + .resource-card {
  border-left: 1px solid var(--line);
  padding-left: 56px;
}

.resource-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5em;
}

.resource-card p,
.article-section p,
.statement-box p {
  font-size: var(--step-0);
  color: var(--text-soft);
  line-height: 1.65;
}

/* Scope bullets are a list; give them list structure instead of loose lines. */
#journal-scope-bullets {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

#journal-scope-bullets li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* ------------------------------------------------------- Section headings */

.section-block {
  padding: 40px 0 0;
  background: transparent;
  border: 0;
}

.section-head h2 {
  margin-bottom: 0.25em;
}

.section-summary {
  color: var(--muted);
  font-size: var(--step-0);
  max-width: 62ch;
  margin: 0 0 24px;
}

@media (max-width: 900px) {
  .journal-hero.card-surface {
    gap: 28px;
  }

  .resource-grid.two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .resource-grid.two-col > .resource-card + .resource-card {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 32px;
  }
}

/* -------------------------------------------------------------- Side rail */

/* The journal page's own call to action is "submit", not "log in": the header
   already carries sign-in, and two controls with the same intent on one screen
   make the reader choose between identical options. */
.side-rail-title {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.side-rail-note {
  margin: 8px 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------------------------------------------------------- Section header */

/* A headline on the left with a small explainer floating on the right is a
   marketing-site device. Stacked, the summary reads as a standfirst, which is
   how a journal introduces a section. */
.section-head {
  display: block;
  margin-bottom: 20px;
}

.section-head > div {
  display: block;
}

/* ----------------------------------------------------------- Board members */

/* Board membership is a directory. Ruled rows carry more names in less space
   and stay readable as the board grows. */
.board-grid,
#journal-board-root {
  display: block;
  border-top: 1px solid var(--line-strong);
}

.board-grid > *,
#journal-board-root > * {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4px 32px;
  align-items: baseline;
}

.board-grid h3,
#journal-board-root h3 {
  font-size: var(--step-1);
  margin: 0;
  grid-column: 1;
}

.board-grid p,
#journal-board-root p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
  grid-column: 2;
}

@media (max-width: 760px) {
  .board-grid > *,
  #journal-board-root > * {
    grid-template-columns: 1fr;
  }

  .board-grid h3,
  .board-grid p,
  #journal-board-root h3,
  #journal-board-root p {
    grid-column: 1;
  }
}

/* ==========================================================================
   Editorial portal
   --------------------------------------------------------------------------
   Different job from the journal pages. This is working software used daily by
   editors and occasionally, under time pressure, by reviewers. Density matters
   more than atmosphere; the type drops to the sans face and the serif is
   reserved for page titles so the two contexts stay distinguishable.
   ========================================================================== */

.dashboard-shell h3,
.dashboard-panel h3,
.editor-grid h3 {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}

.dashboard-panel {
  padding: 28px 30px;
}

/* Manuscript rows are scanned, not read. Tabular figures keep the reference
   numbers and dates aligned down the column. */
.dashboard-row,
.editor-grid > article {
  font-variant-numeric: tabular-nums;
}

.dashboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

/* A manuscript's state is the first thing an editor looks for, so it is
   colour-coded by meaning rather than styled uniformly. These are the only
   places a hue other than the accent appears. */
.status-pill[data-state="review"],
.status-chip[data-state="review"] { color: var(--accent); }
.status-pill[data-state="action"],
.status-chip[data-state="action"] { color: var(--warn); }
.status-pill[data-state="done"],
.status-chip[data-state="done"] { color: var(--ok); }
.status-pill[data-state="stopped"],
.status-chip[data-state="stopped"] { color: var(--stop); }

/* Forms in the portal are long. Grouping them and capping the measure stops
   inputs from stretching to 1200px, which makes a short field look broken. */
.field {
  margin-bottom: 18px;
}

.field input,
.field select {
  max-width: 42rem;
}

.field textarea {
  max-width: 62rem;
  min-height: 7rem;
  line-height: 1.6;
  resize: vertical;
}

.inline-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

.inline-form-grid .field {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .inline-form-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* The review form is the one screen a reviewer spends an hour in. Give the
   writing area real room and mark the confidential field visibly, because
   putting the wrong text in the wrong box is the mistake that matters here. */
[data-review-comments],
[data-review-confidential] {
  font-size: var(--step-0);
}

[data-review-confidential] {
  border-color: var(--warn);
  background: #fffdf7;
}

/* Draft state has to be legible at a glance or nobody trusts the autosave. */
[data-draft-status] {
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Empty states

   Every panel in the submission system can be empty, and each one used to
   say so in its own shape: the reviewer's and the administrator's as one
   grey line centred under a rule, the author's and the editor's as two
   left-aligned paragraphs with no rule at all. Four dashboards in one
   system, four ways of saying "nothing here yet".

   One block now, and it is the useful shape rather than the tidy one: a
   sentence saying what is true, a line saying what would change it, and,
   where there is something the person can press, the thing to press. A
   panel that only reports nothing is a panel that wasted the screen.

   `.small-print:only-child` keeps the same treatment, so a panel that has
   not been converted still reads as the same system.
   ------------------------------------------------------------------ */

.empty-state,
.dashboard-panel > .small-print:only-child,
.editor-grid > .small-print:only-child {
  display: block;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* The one sentence that says what is true. Reads as a statement, not as a
   heading: an empty desk is not a section of the page. */
.empty-state-head {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.empty-state-note {
  margin: 8px auto 0;
  max-width: 54ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

.empty-state-note strong {
  color: var(--text-soft);
}

/* An action, where there is one. Centred with the rest of the block, and
   floored at the same distance whether or not there is a note above it. */
.empty-state .button-row {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.empty-state > :first-child {
  margin-top: 0;
}

/* Anonymity failures are the single most important message in the submission
   flow: the author cannot proceed until they act on it, so it is set apart
   rather than shown as another hint line. */
#anonymity-report {
  border: 1px solid var(--stop);
  border-radius: var(--radius-lg);
  background: #fdf6f6;
  padding: 18px 20px;
}

#anonymity-report .meta-line {
  color: var(--stop);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
}

#anonymity-problems {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

#anonymity-problems li {
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}

#anonymity-problems code {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  background: var(--ink-wash);
  border-radius: var(--radius);
  font-size: 0.8em;
}

/* ------------------------------------------------------- Contrast repairs */

/* The primary action carried a gradient. A gradient on a button is decoration
   that says nothing about the action, and on a journal it reads as marketing
   chrome. Flat accent, and the hover state changes value rather than adding
   an effect. */
.button-primary,
.primary-btn {
  background-color: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.button-primary:hover,
.primary-btn:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* The side-rail label sat at 4.21:1 against its tinted panel, below the 4.5:1
   floor for text this size. Darkened to the body-text tone. */
.side-rail-title {
  color: var(--text-soft);
}

/* Same check applied to the other small labels that sit on tinted surfaces. */
.journal-side .small-print,
.side-rail-note {
  color: var(--text-soft);
}

/* ---------------------------------------------------------- Mobile header */

/* At 375px the masthead, nav row and sign-in button together were taking a
   third of the viewport before any content appeared. The logo drops to a
   readable-but-modest size and sign-in returns to the nav row. */
@media (max-width: 760px) {
  .brand-logo {
    max-height: 34px;
  }

  .brand-text {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .topnav {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav-links {
    gap: 14px;
    font-size: 0.9rem;
    flex-wrap: wrap;
  }

  .nav-actions .button,
  .nav-button {
    width: auto;
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .journal-hero h1 {
    font-size: clamp(1.9rem, 1.2rem + 4vw, 2.4rem);
  }

  .journal-hero .lead {
    font-size: var(--step-0);
    max-width: none;
  }

  .journal-identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }

  /* Touch targets stay at least 44px tall. */
  .button,
  .nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Journal masthead, Frontiers-style
   --------------------------------------------------------------------------
   What is borrowed from Frontiers is the information architecture: a masthead
   that states what the journal is and what it has, tabbed navigation between
   sections/articles/board, and article listings that lead with article type
   and carry a DOI.

   What is not borrowed is the metrics strip as they use it. Frontiers shows an
   Impact Factor and a citation count because they have them; these journals
   were founded in 2026 and have neither. The strip therefore carries only
   facts that can be checked — ISSN, volumes, article count, access model —
   because a metrics panel filled with aspirational numbers is the first thing
   an indexing assessor will disbelieve.
   ========================================================================== */

.journal-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--accent);
  color: #fff;
  margin-bottom: 0;
}

.journal-banner img {
  width: 100%;
  height: clamp(180px, 22vw, 280px);
  object-fit: cover;
  display: block;
}

.journal-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 32px;
  /* A scrim, not decoration: without it the title is unreadable over a photo. */
  background: linear-gradient(
    180deg,
    rgba(11, 20, 28, 0.15) 0%,
    rgba(11, 20, 28, 0.55) 60%,
    rgba(11, 20, 28, 0.82) 100%
  );
}

.journal-banner-overlay h1 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.journal-banner-overlay .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
}

/* Facts strip. Values are tabular so the figures line up down the row. */
.journal-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}

.journal-fact {
  padding: 16px 20px;
  border-left: 1px solid var(--line);
}

.journal-fact:first-child {
  border-left: 0;
}

.journal-fact-value {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.journal-fact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 2px;
}

/* Tabbed navigation between the journal's areas. */
.journal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line-strong);
  margin: 32px 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.journal-tabs::-webkit-scrollbar {
  display: none;
}

.journal-tab {
  padding: 12px 20px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.journal-tab:first-child {
  padding-left: 0;
}

.journal-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Entry cards for the four things authors and reviewers come looking for. */
.journal-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 36px;
}

.journal-entry {
  background: var(--paper);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: block;
}

.journal-entry:hover {
  background: var(--paper-alt);
}

.journal-entry h3 {
  font-family: "Manrope", sans-serif;
  font-size: var(--step-0);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--accent);
}

.journal-entry p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: none;
}

/* Article listing. Type label first, then title, then the identifiers a
   reader needs to cite or verify it. */
.article-row {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.article-row:first-child {
  border-top: 1px solid var(--line-strong);
}

.article-type-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.article-row h3 {
  font-size: var(--step-1);
  margin: 0 0 6px;
}

.article-row h3 a {
  text-decoration: none;
  color: var(--text);
}

.article-row h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.article-row-authors {
  font-size: var(--step--1);
  color: var(--text-soft);
  margin: 0 0 6px;
}

.article-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.article-row-meta .doi {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

/* Sort controls for the listing. */
.listing-controls {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.sort-tabs {
  display: flex;
  gap: 14px;
}

.sort-tab {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.sort-tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* Sections: the journal's specialty areas, each with a chief editor. */
.section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 40px;
}

.specialty {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.specialty h3 {
  font-size: var(--step-1);
  margin: 0 0 4px;
}

.specialty p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Volumes, by year. */
.volume-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.volume-list a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Policies */

.policy-layout {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-bottom: 64px;
}

.policy-nav {
  position: sticky;
  top: 24px;
}

.policy-nav ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.policy-nav li a {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--text-soft);
  border-left: 2px solid transparent;
  margin-left: -1px;
}

.policy-nav li a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}

.policy-section {
  padding-top: 36px;
  border-top: 1px solid var(--line);
  margin-top: 36px;
}

.policy-section:first-of-type {
  border-top: 0;
  margin-top: 8px;
}

.policy-section h3 {
  font-size: var(--step-1);
  margin-top: 1.4em;
}

.policy-section ol,
.policy-section ul {
  max-width: 70ch;
  padding-left: 22px;
}

.policy-section li {
  margin-bottom: 8px;
}

/* Items still awaiting a decision are marked in the page itself, so a draft
   cannot be published by accident with placeholders left in it. */
.policy-flag {
  border-left: 3px solid var(--warn);
  background: #fffdf6;
  padding: 10px 14px;
  font-size: var(--step--1);
  color: var(--warn);
  font-weight: 600;
  max-width: none;
}

@media (max-width: 900px) {
  .policy-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .policy-nav {
    position: static;
  }

  .journal-banner-overlay {
    padding: 20px;
  }
}

/* ==========================================================================
   Journal landing page — layout matched to Frontiers
   --------------------------------------------------------------------------
   Measured from frontiersin.org rather than approximated: 1140px content
   column, #f7f7f7 page, white cards at 8px radius with no border and no
   shadow, a four-across card grid, 10px/700 uppercase article-type labels,
   16/22 card titles at weight 500, 32px/500 section headings, and 32px-tall
   pill actions.

   Their brand is not copied. The accent stays this foundation's own blue, the
   photographs are the foundation's own, and the typeface is Manrope rather
   than the licensed MuseoSans — a geometric sans of similar weight and
   proportion. What is borrowed is structure and rhythm, which is what makes
   the page legible to someone who reads journals.
   ========================================================================== */

.jrnl {
  --jrnl-page: #f7f7f7;
  --jrnl-card: #ffffff;
  --jrnl-body: #6b6b6b;
  --jrnl-heading: #101010;
  /* A third radius token, 8px, next to the --radius: 4px the brief at the
     top of this file sets out. Two scales is not a scale. Pointed at the
     first one rather than deleted, so the four places that use it keep
     reading as themselves. */
  --jrnl-radius: var(--radius);
  --jrnl-width: 1140px;

  background: var(--jrnl-page);
  font-family: "Manrope", sans-serif;
}

.jrnl-shell {
  width: min(var(--jrnl-width), calc(100% - 48px));
  margin: 0 auto;
}

/* Journal sub-navigation, directly under the site header. */
.jrnl-subnav {
  background: var(--jrnl-card);
  border-bottom: 1px solid #e4e4e4;
}

.jrnl-subnav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 48px;
  flex-wrap: wrap;
}

.jrnl-subnav-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--jrnl-heading);
  margin: 0;
  padding-right: 8px;
}

.jrnl-subnav a,
.jrnl-subnav button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: #404040;
  text-decoration: none;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}

.jrnl-subnav button[aria-selected="true"] {
  color: var(--accent);
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* Hero: photograph, title and verifiable figures on the left, actions flush
   to the right edge as full-height blocks. */
.jrnl-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 240px;
  overflow: hidden;
  background: #1b2733;
}

.jrnl-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jrnl-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: 40px 40px 28px;
  /* Scrim: the title is white over a photograph and has to stay readable
     whichever image is used. */
  background: linear-gradient(
    100deg,
    rgba(16, 24, 32, 0.78) 0%,
    rgba(16, 24, 32, 0.58) 55%,
    rgba(16, 24, 32, 0.28) 100%
  );
}

.jrnl-hero-copy h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.jrnl-hero-kind {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* The figures row. Only checkable values appear here — see the note at the
   top of this block. */
.jrnl-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 44px;
  margin: 0;
}

.jrnl-figure dt {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin: 2px 0 0;
}

.jrnl-figure dd {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.jrnl-hero-actions {
  position: relative;
  display: flex;
}

.jrnl-hero-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  padding: 0 28px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--accent);
}

.jrnl-hero-action + .jrnl-hero-action {
  background: var(--accent-hover);
}

.jrnl-hero-action:hover {
  color: #fff;
  filter: brightness(1.12);
}

/* Section heads: title on the left, a count-bearing link on the right. */
.jrnl-section {
  padding: 44px 0 8px;
}

.jrnl-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}

.jrnl-section-head h2 {
  font-family: "Manrope", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--jrnl-heading);
  margin: 0;
  line-height: 1.2;
}

.jrnl-see-all {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.jrnl-sorts {
  display: flex;
  gap: 26px;
  margin-bottom: 22px;
}

.jrnl-sorts button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #282828;
  cursor: pointer;
  padding: 0 0 6px;
  border-bottom: 2px solid transparent;
}

.jrnl-sorts button[aria-selected="true"] {
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* Four-across card grid. */
.jrnl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.jrnl-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.jrnl-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jrnl-card {
  background: var(--jrnl-card);
  border-radius: var(--jrnl-radius);
  border: 0;
  box-shadow: none;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.jrnl-card:hover {
  color: inherit;
}

.jrnl-card:hover .jrnl-card-title {
  color: var(--accent);
}

.jrnl-card-image {
  width: calc(100% + 40px);
  margin: -20px -20px 4px;
  height: 132px;
  object-fit: cover;
  border-radius: var(--jrnl-radius) var(--jrnl-radius) 0 0;
}

.jrnl-card-type {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jrnl-heading);
  margin: 0;
}

.jrnl-card-date {
  font-size: 0.75rem;
  color: var(--jrnl-body);
  margin: 0;
}

.jrnl-card-title {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 500;
  color: var(--jrnl-heading);
  margin: 0;
}

.jrnl-card-authors {
  font-size: 0.8rem;
  color: var(--jrnl-body);
  margin: 0;
}

.jrnl-card-foot {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.75rem;
  color: var(--jrnl-body);
  font-variant-numeric: tabular-nums;
}

.jrnl-card-doi {
  font-size: 0.7rem;
  color: var(--jrnl-body);
  word-break: break-all;
  margin: 0;
}

/* Volumes row. */
.jrnl-volumes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jrnl-volumes a {
  display: inline-block;
  padding: 10px 18px;
  background: var(--jrnl-card);
  border-radius: var(--jrnl-radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--jrnl-heading);
  font-variant-numeric: tabular-nums;
}

.jrnl-volumes a:hover {
  color: var(--accent);
}

.jrnl-empty {
  background: var(--jrnl-card);
  border-radius: var(--jrnl-radius);
  padding: 40px;
  text-align: center;
  color: var(--jrnl-body);
  font-size: 0.9rem;
}

@media (max-width: 1100px) {
  .jrnl-grid,
  .jrnl-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .jrnl-grid,
  .jrnl-grid--five,
  .jrnl-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .jrnl-hero { grid-template-columns: 1fr; }

  .jrnl-hero-actions { flex-direction: column; }

  .jrnl-hero-action { min-height: 52px; }
}

@media (max-width: 560px) {
  .jrnl-grid,
  .jrnl-grid--five,
  .jrnl-grid--three { grid-template-columns: 1fr; }

  .jrnl-hero-copy { padding: 28px 20px 20px; }
}

/* Article cards carry a variable-length title, so a floor on the height keeps
   the grid rows even rather than letting one short title shrink a whole row.
   Frontiers' equivalent measures 358px; this is lower because these cards
   carry no thumbnail. */
.jrnl-section .jrnl-grid > .jrnl-card {
  min-height: 220px;
}

.jrnl-grid--five > .jrnl-card {
  min-height: 0;
}

/* ==========================================================================
   Frontiers styling applied site-wide
   --------------------------------------------------------------------------
   The journal landing pages were rebuilt around this system. Rather than
   rewrite the markup of every other page, the existing components are
   remapped inside `body.jrnl`: a grey page, white panels at 8px with no
   border or shadow, a 1140px column, Manrope throughout at Frontiers' weights,
   and pill actions.

   Article reading pages keep their serif body text. A journal article is read
   at length, and that is the one place where the measure and the face matter
   more than matching a competitor's chrome.
   ========================================================================== */

body.jrnl {
  background: var(--jrnl-page, #f7f7f7);
  color: #282828;
}

body.jrnl .page-shell {
  width: min(1140px, calc(100% - 48px));
}

/* Header: one row, white, with the mark and the sign-in action only. */
body.jrnl .site-header {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
}

body.jrnl .topnav {
  min-height: 64px;
  align-items: center;
}

body.jrnl .utility-bar {
  display: none;
}

/* Headings take the sans face at Frontiers' weight. */
body.jrnl h1,
body.jrnl h2,
body.jrnl h3,
body.jrnl h4 {
  font-family: "Manrope", sans-serif;
  color: #101010;
  letter-spacing: -0.01em;
}

body.jrnl h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.5rem); font-weight: 500; }
body.jrnl h2 { font-size: 2rem; font-weight: 500; }
body.jrnl h3 { font-size: 1.125rem; font-weight: 700; }

body.jrnl p,
body.jrnl li,
body.jrnl dd {
  color: #6b6b6b;
  font-size: 1rem;
  line-height: 1.5;
}

/* Panels: white, 8px, no border, no shadow — they sit on the grey page. */
body.jrnl .card-surface,
body.jrnl .dashboard-panel,
body.jrnl .resource-card,
body.jrnl .contact-card,
body.jrnl .article-side,
body.jrnl .statement-box,
body.jrnl .issue-table {
  background: #fff;
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 24px 26px;
}

/* Sections separate by space on the grey field rather than by rules. */
body.jrnl .section-block {
  background: transparent;
  border: 0;
  padding: 36px 0 0;
}

body.jrnl .resource-grid.two-col {
  border-top: 0;
  gap: 24px;
  padding-top: 0;
}

body.jrnl .resource-grid.two-col > .resource-card {
  background: #fff;
  padding: 24px 26px;
  border-radius: var(--radius);
}

body.jrnl .resource-grid.two-col > .resource-card + .resource-card {
  border-left: 0;
  padding-left: 26px;
}

/* Actions are pills at Frontiers' proportions. */
body.jrnl .button,
body.jrnl .primary-btn,
body.jrnl .outline-btn,
body.jrnl .mini-action,
body.jrnl .pager-button {
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 20px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.jrnl .button-primary,
body.jrnl .primary-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

body.jrnl .button-secondary,
body.jrnl .outline-btn {
  background: #fff;
  border: 1px solid #d4d4d4;
  color: #282828;
}

/* Form controls inside the grey system. */
body.jrnl .field input,
body.jrnl .field select,
body.jrnl .field textarea {
  border: 1px solid #d4d4d4;
  border-radius: var(--radius);
  background: #fff;
}

body.jrnl .field label,
body.jrnl .field > span {
  color: #282828;
  font-size: 0.8125rem;
}

/* Listings pick up the card treatment. */
body.jrnl .issue-list,
body.jrnl .article-list {
  border-top: 0;
}

body.jrnl .issue-list > li,
body.jrnl .article-list > li,
body.jrnl .dashboard-row {
  background: #fff;
  border: 0;
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 18px 22px;
}

body.jrnl .meta-line,
body.jrnl .small-print,
body.jrnl .field-hint {
  color: #6b6b6b;
  font-size: 0.8125rem;
}

/* The policies page keeps its sticky index but adopts the card surface. */
body.jrnl .policy-section {
  background: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-top: 16px;
}

body.jrnl .policy-section:first-of-type {
  margin-top: 8px;
}

body.jrnl .policy-nav ul {
  border-left: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 10px 6px;
}

body.jrnl .policy-nav li a {
  padding-left: 16px;
}

/* --------------------------------------------------------- Article pages */

/* The one exception. An article is read, not scanned: the serif body and its
   measure stay, and only the surrounding chrome adopts the grey system. */
body.jrnl .article-body,
body.jrnl .article-section {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 36px;
}

body.jrnl .article-body h1,
body.jrnl .article-section h2,
body.jrnl .article-section h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}

body.jrnl .article-section p {
  font-family: "Manrope", sans-serif;
  color: #282828;
}

@media (max-width: 820px) {
  body.jrnl .resource-grid.two-col > .resource-card + .resource-card {
    padding-top: 24px;
  }
}

/* ------------------------------------------------------------ Journals hub */

.jrnl-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jrnl-hero--wide .jrnl-hero-copy {
  gap: 14px;
}

.jrnl-hero-lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 52ch;
  margin: 0;
}

.jrnl-journal-card {
  padding-bottom: 24px;
}

.jrnl-journal-cover {
  height: 180px;
}

.jrnl-journal-name {
  font-family: "Manrope", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: #101010;
  margin: 2px 0 0;
}

/* The same facts as the journal masthead, so a reader comparing the two
   titles sees the same measures on both. */
.jrnl-journal-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #eaeaea;
}

.jrnl-journal-facts dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #101010;
  font-variant-numeric: tabular-nums;
}

.jrnl-journal-facts dt {
  margin: 2px 0 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b6b;
}

.jrnl-subnav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 820px) {
  .jrnl-grid--two { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- Typographic masthead */

/* The journals hub carries no photograph. A landscape behind a publisher's
   index says nothing about the publisher, and the two journals below already
   have their own imagery — the hub does not need to compete with it. The
   hierarchy is carried by type size and a single rule. */
.jrnl-masthead {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
  padding: 64px 0 52px;
}

.jrnl-masthead .jrnl-hero-kind {
  color: #6b6b6b;
  margin-bottom: 14px;
}

.jrnl-masthead h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #101010;
  margin: 0 0 20px;
}

.jrnl-masthead-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: #4a4a4a;
  max-width: 58ch;
  margin: 0 0 32px;
}

/* Summary figures, read from the published record like everywhere else. */
.jrnl-masthead-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 52px;
  margin: 0 0 32px;
  padding: 26px 0 0;
  border-top: 1px solid #e4e4e4;
  max-width: 720px;
}

.jrnl-masthead-facts dd {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #101010;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.jrnl-masthead-facts dt {
  margin: 4px 0 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6b6b;
}

.jrnl-masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 700px) {
  .jrnl-masthead {
    padding: 40px 0 36px;
  }

  .jrnl-masthead-facts {
    gap: 16px 32px;
  }

  .jrnl-masthead-facts dd {
    font-size: 1.375rem;
  }
}

/* ==========================================================================
   Landing page
   --------------------------------------------------------------------------
   The publisher's front door, built to the pattern Frontiers uses on
   frontiersin.org: a full-bleed photograph, the navigation carried over it
   rather than above it, a headline set large enough to be the page's only
   voice, and the figures gathered into one panel at the lower right.

   The figures are the point of difference. Frontiers writes 3.9 million
   researchers and 5.3 billion views; this publisher has two journals and
   thirteen articles, and says so. A front door that opens with borrowed-looking
   numbers is the fastest way to lose a reader who checks.
   ========================================================================== */

.home-hero {
  position: relative;
  min-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  background: #0d1620;
  overflow: hidden;
}

.home-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A photograph carries a headline only if the type stays readable across all
   of it, so the scrim is heaviest where the words are and lifts to the right. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 14, 20, 0.82) 0%, rgba(8, 14, 20, 0.55) 45%, rgba(8, 14, 20, 0.25) 100%),
    linear-gradient(180deg, rgba(8, 14, 20, 0.55) 0%, rgba(8, 14, 20, 0.1) 30%, rgba(8, 14, 20, 0.6) 100%);
}

/* Lift only the children that sit in normal flow above the scrim.
   A negative rule was used here first — `> *` minus the exceptions — and it
   broke twice: once on the background photograph and again on the action
   blocks, each of which positions itself and was reset to relative. Naming
   what should be lifted cannot fail that way as more children are added. */
.home-hero > .home-nav,
.home-hero > .home-hero-copy {
  position: relative;
  z-index: 1;
}

/* Navigation sits on the photograph. */
.home-nav {
  padding: 22px 0;
}

.home-nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.home-nav .brand-logo {
  max-height: 44px;
  /* Not inverted: the mark carries two brand colours, and forcing it to white
     flattened it into a solid block. The scrim behind it is dark enough. */
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 12px;
  border-radius: var(--radius);
}

.home-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.home-nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.home-nav-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.home-nav-actions {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
}

.home-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.home-nav-pill:hover {
  background: #fff;
  color: #101010;
}

.home-nav-pill--solid {
  background: #fff;
  color: #101010;
  border-color: #fff;
}

.home-nav-pill--solid:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #101010;
}

/* The headline is the page's only voice, so it is set large and light. */
.home-hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 180px;
}

body.jrnl .home-hero-copy h1,
.home-hero-copy h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.6rem, 1.2rem + 4.6vw, 4.75rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 22px;
  max-width: 16ch;
}

body.jrnl .home-hero-copy p,
.home-hero-copy p {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 44ch;
}

/* Figures panel, lower right, on a darkened band. */
.home-figures {
  position: absolute;
  right: 440px;
  bottom: 0;
  z-index: 2;
  display: flex;
  background: rgba(8, 14, 20, 0.72);
  backdrop-filter: blur(2px);
}

.home-figure {
  padding: 22px 38px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  min-width: 150px;
}

.home-figure:first-child {
  border-left: 0;
}

.home-figure-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.home-figure-value span {
  font-weight: 400;
  font-size: 1rem;
}

.home-figure-label {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}

/* Segmented audience toggle. */
.home-segments {
  display: flex;
  justify-content: center;
  margin: 44px 0 30px;
}

.home-segment-group {
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 999px;
  background: #fff;
  padding: 5px;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.home-segment {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #404040;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
}

.home-segment[aria-selected="true"] {
  background: #282828;
  color: #fff;
  font-weight: 700;
}

@media (max-width: 900px) {
  .home-figures {
    position: static;
    flex-wrap: wrap;
    background: rgba(8, 14, 20, 0.8);
  }

  .home-hero-copy {
    padding-bottom: 40px;
  }

  .home-nav-actions {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .home-figure {
    flex: 1 1 50%;
    min-width: 0;
    padding: 16px 20px;
  }

  .home-figure:nth-child(odd) {
    border-left: 0;
  }
}

/* ==========================================================================
   Landing hero, light key
   --------------------------------------------------------------------------
   The dark treatment read as heavy: a photograph under a 0.8 scrim stops being
   a photograph and becomes a grey wall, and white type on it makes the whole
   band feel closed.

   Inverted to a light key instead. The photograph stays, but far back — a pale
   wash rather than a subject — and the type goes to ink on near-white. The
   effect is the same structure with air in it, which is what a reader means by
   "clean" when they are looking at a publisher's front door.
   ========================================================================== */

.home-hero {
  background: #ffffff;
  min-height: min(78vh, 660px);
}

/* The image is held back to a wash so the type can be dark and the band can
   breathe. */
.home-hero-photo {
  opacity: 0.22;
  filter: saturate(0.6);
}

.home-hero::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0.55) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0.92) 100%);
}

/* Navigation in ink, on the light band. */
.home-nav {
  padding: 26px 0;
}

.home-nav .brand-logo {
  max-height: 46px;
  background: none;
  padding: 0;
  border-radius: 0;
}

.home-nav-links a {
  color: #3a4550;
}

.home-nav-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

.home-nav-pill {
  border-color: #cdd5dd;
  color: #23303c;
}

.home-nav-pill:hover {
  background: #23303c;
  color: #fff;
  border-color: #23303c;
}

.home-nav-pill--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.home-nav-pill--solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* Type in ink, with the weight lightened so the size carries it rather than
   the density. */
body.jrnl .home-hero-copy h1,
.home-hero-copy h1 {
  color: #18232e;
  font-weight: 300;
  letter-spacing: -0.03em;
  max-width: 17ch;
}

body.jrnl .home-hero-copy p,
.home-hero-copy p {
  color: #56636f;
}

.home-hero-copy {
  padding: 48px 0 150px;
}

/* The figures sit on white with a hairline, not on a dark slab. */
.home-figures {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e6eaee;
  border-left: 1px solid #e6eaee;
  border-top-left-radius: 10px;
}

.home-figure {
  border-left-color: #e6eaee;
  padding: 24px 40px;
}

.home-figure-value {
  color: #18232e;
  font-weight: 600;
  font-size: 1.75rem;
}

.home-figure-label {
  color: #6b7885;
}

/* Room to breathe between the hero and what follows. */
.home-segments {
  margin: 56px 0 34px;
}

@media (max-width: 900px) {
  .home-figures {
    background: rgba(255, 255, 255, 0.95);
    border-left: 0;
    border-radius: 0;
  }

  .home-hero-copy {
    padding: 32px 0 36px;
  }
}

/* --------------------------------------------------------- Interior pages */

/* Every page below the landing opens the same way: a title on the grey field
   with no panel around it, so the first white surface a reader meets is the
   content rather than a wrapper. */
.jrnl-page-head {
  background: transparent;
  border: 0;
  padding: 44px 0 8px;
}

.jrnl-page-head h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 500;
  color: #101010;
  margin: 0 0 10px;
}

.jrnl-page-head p {
  max-width: 62ch;
  color: #6b6b6b;
  margin: 0;
}

.jrnl-search {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 24px 0 8px;
}

/* Issue cards list their contents. */
.jrnl-issue-contents {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eaeaea;
  display: grid;
  gap: 8px;
}

.jrnl-issue-contents a {
  font-size: 0.875rem;
  color: #282828;
  text-decoration: none;
  line-height: 1.35;
  display: block;
}

.jrnl-issue-contents a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Board entries carry a role label above the name, as on the journal pages. */
#board-apyr > *,
#board-apjecs > * {
  background: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 20px 22px;
  display: block;
}

#board-apyr h3,
#board-apjecs h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 4px 0 6px;
  color: #101010;
}

#board-apyr p,
#board-apjecs p {
  font-size: 0.8125rem;
  margin: 0 0 2px;
}

/* Pagination in the shared pill style. */
.jrnl-shell .pager-button {
  border: 1px solid #d4d4d4;
  background: #fff;
}

/* ------------------------------------------------------------------- Mark */

/* The new mark is 3.05:1 where the previous one was 3.8:1, so constraining by
   width made it taller and pushed the header down. Constrained by height
   instead, which is the dimension a header actually cares about. */
.brand-logo {
  width: auto;
  height: 44px;
  max-width: 100%;
}

body.jrnl .site-header .brand-logo {
  height: 42px;
}

.home-nav .brand-logo {
  height: 48px;
  background: none;
  padding: 0;
}

@media (max-width: 760px) {
  .brand-logo,
  body.jrnl .site-header .brand-logo,
  .home-nav .brand-logo {
    height: 34px;
  }
}

/* The brand wordmark is part of the image now; a separate text label beside it
   repeats the same words at a different size. */
body.jrnl .brand-text {
  display: none;
}

/* Header mark sized against Frontiers, whose masthead logo measures 114x24.
   This lockup is 3.57:1 against their 4.76:1, so the same optical weight lands
   a little taller. The strapline is dropped from this version: measured
   against the full lockup it is six per cent of the height, which at any
   header size renders as a grey smudge rather than words. */
.brand-logo,
body.jrnl .site-header .brand-logo {
  width: auto;
  height: 30px;
}

.home-nav .brand-logo {
  height: 34px;
}

@media (max-width: 760px) {
  .brand-logo,
  body.jrnl .site-header .brand-logo,
  .home-nav .brand-logo {
    height: 26px;
  }
}

/* ==========================================================================
   Colour, matched to how Frontiers actually uses it
   --------------------------------------------------------------------------
   Measured on frontiersin.org by painted area, not by reading their CSS:

     white      92.9%     the page is white, not grey
     #001991     4.4%     deep blue, the hero action blocks
     #003BDE     0.9%     bright blue, links and the active state
     #0024B0     0.7%     mid blue
     #f7f7f7     ~0%      their grey barely shows at all

   The earlier build here had that inverted: a grey field with white cards.
   White now dominates, and the grey survives only in the gaps between
   sections, which is where theirs shows too.

   The blues are a three-step ramp rather than one accent — deep for filled
   blocks, mid for hover, bright for links — and the hues come from the APYCF
   mark rather than from Frontiers: sampled from the logo, it is roughly 40%
   deep navy and 9% orange. Orange clears 3.38:1 on white, which is large-text
   only, so it stays on the mark and on small emphasis and never carries body
   copy.

   Text follows their split: #6B6B6B for body (their most-used colour by a
   wide margin) and near-black for headings.
   ========================================================================== */

body.jrnl {
  --jrnl-page: #ffffff;
  --jrnl-card: #ffffff;
  --jrnl-body: #6b6b6b;
  --jrnl-heading: #101820;

  /* One blue, four rungs — not four colours. Hue 206-211, saturation 68-73
     throughout; only the lightness moves. They drifted because they are
     named as if they were separate things, so here is what each is for:

       --navy-deep  15%  the darkest rung: a primary action under the cursor
       --navy       22%  a primary action at rest        (--accent points here)
       --accent     28%  the :root value, for pages outside body.jrnl
       --link       38%  text that is a link, which needs the lightness to
                         stay legible at body size on white

     Reach for --accent and --accent-hover. Reaching past them into the raw
     rungs is what left three primary buttons in three colours moving in two
     directions. */
  --navy-deep: #0b2540;
  --navy: #12395e;
  --link: #1a5fa8;
  --brand-orange: #e8622a;

  --hairline: #e6e8eb;
  --field: #f7f8f9;

  --accent: var(--navy);
  --accent-hover: var(--navy-deep);

  background: #ffffff;
  color: var(--jrnl-heading);
}

/* Cards on white need definition from space and a hairline, not from a grey
   field behind them. */
body.jrnl .jrnl-card,
body.jrnl .card-surface,
body.jrnl .dashboard-panel,
body.jrnl .resource-card,
body.jrnl .article-body,
body.jrnl .article-section,
body.jrnl .policy-section,
body.jrnl .jrnl-search {
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: none;
}

body.jrnl .jrnl-card:hover {
  border-color: #cdd3da;
}

/* Sections separate by rule and space; the page behind them stays white. */
body.jrnl .jrnl-section {
  padding: 48px 0 8px;
}

body.jrnl .jrnl-section + .jrnl-section {
  border-top: 1px solid var(--hairline);
}

/* Links take the bright step of the ramp. */
body.jrnl a,
body.jrnl .jrnl-see-all,
body.jrnl .jrnl-card-title {
  color: var(--link);
}

body.jrnl .jrnl-card-title {
  color: var(--jrnl-heading);
}

body.jrnl .jrnl-card:hover .jrnl-card-title,
body.jrnl a:hover {
  color: var(--navy-deep);
}

/* Filled actions use the deep step, matching the weight Frontiers gives its
   hero blocks. */
body.jrnl .button-primary,
body.jrnl .primary-btn,
body.jrnl .home-nav-pill--solid {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

body.jrnl .button-primary:hover,
body.jrnl .primary-btn:hover,
body.jrnl .home-nav-pill--solid:hover {
  background: var(--navy);
  border-color: var(--navy);
}

/* The one place the brand's orange earns its keep: the active tab, where a
   single saturated mark reads instantly and carries no text. */
body.jrnl .jrnl-tab[aria-selected="true"],
body.jrnl .jrnl-subnav button[aria-selected="true"] {
  color: var(--jrnl-heading);
  border-bottom-color: var(--brand-orange);
}

body.jrnl .jrnl-sorts button[aria-selected="true"],
body.jrnl .sort-tab[aria-selected="true"] {
  border-bottom-color: var(--brand-orange);
}

body.jrnl .home-segment[aria-selected="true"] {
  background: var(--navy-deep);
}

/* Form fields need a tint to separate from a white page. */
body.jrnl .field input,
body.jrnl .field select,
body.jrnl .field textarea {
  background: var(--field);
  border-color: #d6dade;
}

body.jrnl .field input:focus,
body.jrnl .field select:focus,
body.jrnl .field textarea:focus {
  background: #fff;
  border-color: var(--link);
}

/* Listing rows: hairline separators on white rather than floating tiles. */
body.jrnl .issue-list > li,
body.jrnl .article-list > li,
body.jrnl .dashboard-row {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  margin-bottom: 0;
  padding: 18px 0;
}

body.jrnl .jrnl-empty {
  background: var(--field);
  border: 1px solid var(--hairline);
}

/* Header sits on white with a single rule. */
body.jrnl .site-header {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}

/* The landing hero keeps the light key, now on true white. */
body.jrnl .home-hero {
  background: #fff;
}

body.jrnl .home-figures {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--hairline);
}

body.jrnl .home-figure {
  border-left-color: var(--hairline);
}

/* Hero action blocks, the shape Frontiers uses: full height of the band,
   flush to the right edge, two steps of the blue ramp side by side. */
/* Frontiers puts these level with the figures strip along the bottom of the
   band, not down its full height. Running them the full 660px gave the page
   12.4% blue against their 4.4% — the right hue at three times the mass. */
.home-hero-blocks {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 3;
}

/* Translucent white rather than filled blue. This costs the page most of its
   blue area — Frontiers takes 4.4% from exactly these blocks — but a light
   hero with two solid blue slabs in it reads as two different pages joined at
   a seam. The blue stays in the type and the hairline. */
.home-hero-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  min-width: 220px;
  min-height: 92px;
  padding: 0 30px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--navy-deep, #0b2540);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-left: 1px solid var(--hairline, #e6e8eb);
  border-top: 1px solid var(--hairline, #e6e8eb);
  transition: background-color 140ms ease, color 140ms ease;
}

.home-hero-block--alt {
  background: rgba(255, 255, 255, 0.92);
}

body.jrnl .home-hero-block {
  color: var(--navy-deep, #0b2540);
}

/* Filled only on hover, which is where a colour change means something. */
.home-hero-block:hover,
body.jrnl .home-hero-block:hover {
  background: var(--navy-deep, #0b2540);
  color: #fff;
}

/* The copy column stops before the blocks so the headline never runs under
   them. */
@media (min-width: 901px) {
  .home-hero-copy {
    max-width: calc(100% - 300px);
  }
}

@media (max-width: 900px) {
  .home-hero-blocks {
    position: static;
    width: 100%;
  }

  .home-figures {
    right: auto;
  }

  .home-hero-block {
    flex: 1;
    min-width: 0;
    min-height: 60px;
    padding: 0 16px;
    font-size: 0.9rem;
  }
}

/* ------------------------------------------------------------------ Footer */

/* Frontiers runs a 712px footer with 25 links; this site had none at all.
   Beyond navigation, it is where the facts that establish a journal live —
   publisher, ISSN, licence, and a named address — and those are the first
   things an indexing assessor looks for. */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--hairline, #e6e8eb);
  margin-top: 72px;
  padding: 56px 0 32px;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.site-footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #101820;
  margin: 0 0 14px;
}

.site-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.site-footer-col a {
  font-size: 0.9rem;
  color: #6b6b6b;
  text-decoration: none;
}

.site-footer-col a:hover {
  color: var(--link, #1a5fa8);
  text-decoration: underline;
}

.site-footer-identity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 36px 0;
}

.site-footer-identity p {
  font-size: 0.875rem;
  color: #6b6b6b;
  margin: 0 0 12px;
  line-height: 1.5;
}

.site-footer-identity strong {
  color: #101820;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.site-footer-identity span {
  font-size: 0.8125rem;
}

.site-footer-legal {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline, #e6e8eb);
  font-size: 0.8125rem;
  color: #8a8a8a;
}

@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-identity { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 520px) {
  .site-footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Search */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-search {
  margin-left: auto;
}

.site-search-open {
  border: 1px solid var(--hairline, #e6e8eb);
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #282828;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-search-open:hover {
  border-color: #cdd3da;
  color: var(--link, #1a5fa8);
}

/* The panel drops across the page rather than into a narrow dropdown: results
   carry a title, authors and a snippet, and none of that reads in 320px. */
.site-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
  padding: 24px 0 28px;
  max-height: 72vh;
  overflow-y: auto;
}

.site-search-field input {
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  padding: 14px 16px;
  border: 1px solid #d6dade;
  border-radius: var(--radius);
  background: var(--field, #f7f8f9);
  color: #101820;
}

.site-search-field input:focus {
  background: #fff;
  border-color: var(--link, #1a5fa8);
  outline: 2px solid rgba(26, 95, 168, 0.18);
  outline-offset: 1px;
}

.site-search-meta {
  margin: 14px 0 4px;
  font-size: 0.875rem;
  color: #6b6b6b;
}

.site-search-results {
  display: grid;
  gap: 0;
}

.site-search-result {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--hairline, #e6e8eb);
  text-decoration: none;
}

.site-search-result:hover {
  background: var(--field, #f7f8f9);
}

.site-search-title {
  margin: 2px 0 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: #101820;
}

.site-search-authors {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  color: #6b6b6b;
}

.site-search-snippet {
  margin: 0 0 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #56636f;
  max-width: 80ch;
}

.site-search-source {
  margin: 0;
  font-size: 0.75rem;
  color: #8a8a8a;
}

/* Matches are marked with a tint rather than the browser default yellow,
   which fights every other colour on the page. */
.site-search-panel mark {
  background: rgba(232, 98, 42, 0.16);
  color: inherit;
  padding: 0 1px;
  border-radius: var(--radius);
}

/* The header has to establish a containing block for the panel. */
.site-header,
.home-nav {
  position: relative;
}

@media (max-width: 760px) {
  .site-search-open span[aria-hidden] {
    margin: 0;
  }

  .site-search-panel {
    padding: 16px 0 20px;
  }

  .site-search-field input {
    font-size: 1rem;
  }
}

/* The journal sub-navigation now scrolls to sections rather than swapping
   them, so it sticks: a reader eight screens into the article list can still
   jump to the board. */
.jrnl-subnav {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Anchored sections need clearance for the sticky bar, or a jump lands with
   the heading hidden underneath it. */
.jrnl-section[id] {
  scroll-margin-top: 64px;
}


/* Journal-page hero actions.

   These were filled navy, and `body.jrnl a` painted their label link-blue
   over it — 2.4:1, well under the floor. They were emptied out to fix that,
   which did fix it, and left the one action this whole site exists for
   looking like a footer link.

   The contrast problem was never the fill; it was the label inheriting a
   link colour. So the fill comes back and the label is held at white with
   enough specificity to keep it (15:1 on navy), and the two actions stop
   being two shades of the same thing: submitting is the primary action and
   is filled, tracking is secondary and is outlined. */
body.jrnl .jrnl-hero-action,
body.jrnl a.jrnl-hero-action:link,
body.jrnl a.jrnl-hero-action:visited {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  transition: background-color 140ms ease, color 140ms ease;
}

body.jrnl .jrnl-hero-action + .jrnl-hero-action,
body.jrnl a.jrnl-hero-action + a.jrnl-hero-action:link,
body.jrnl a.jrnl-hero-action + a.jrnl-hero-action:visited {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--line-strong, #c3ccd6);
}

body.jrnl a.jrnl-hero-action:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  filter: none;
}

body.jrnl a.jrnl-hero-action + a.jrnl-hero-action:hover {
  background: var(--accent-wash, #e8eef4);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------- Journal masthead, light

   This band was still the dark treatment: white type over a heavy scrim. Two
   things were wrong with leaving it. It no longer matched the landing page,
   and `body.jrnl h1` — one specificity step above `.jrnl-hero-copy h1` — had
   already repainted the journal title near-black on that dark photograph, at
   1.25:1. Eight text nodes in the band were failing.

   Inverted to match the landing page, and the selectors carry the body.jrnl
   prefix so nothing downstream can quietly win again.                        */

body.jrnl .jrnl-hero {
  background: #fff;
}

body.jrnl .jrnl-hero-photo {
  opacity: 0.2;
  filter: saturate(0.6);
}

body.jrnl .jrnl-hero-copy {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.5) 100%);
}

body.jrnl .jrnl-hero-copy h1,
body.jrnl .journal-banner-overlay h1 {
  color: #101820;
  font-weight: 400;
  text-shadow: none;
}

body.jrnl .jrnl-hero-copy .jrnl-hero-kind,
body.jrnl .jrnl-hero-kind {
  color: #56636f;
}

body.jrnl .jrnl-figures {
  color: #101820;
}

body.jrnl .jrnl-figure dd {
  color: #101820;
}

body.jrnl .jrnl-figure dt {
  color: #6b6b6b;
}

/* ------------------------------------------------- Hero proportions, retuned

   Side by side with frontiersin.org the band here was half as tall again as
   theirs and the headline ran to three lines, which pushed the first real
   content below the fold. Theirs is four words on two lines in a ~560px band.

   Three changes: a shorter headline in the markup, a smaller ceiling on the
   type, and the vertical padding cut from 150px to something the content
   earns. The photograph also comes up from 0.2 to 0.34 — a dark frame at 0.2
   over white is not a subtle image, it is no image.                          */

body.jrnl .home-hero {
  min-height: 0;
}

body.jrnl .home-hero-photo {
  opacity: 0.34;
  filter: saturate(0.85);
}

body.jrnl .home-hero-copy {
  padding: 56px 0 132px;
}

body.jrnl .home-hero-copy h1 {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.08;
  max-width: 15ch;
  margin-bottom: 16px;
}

body.jrnl .home-hero-copy p {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  max-width: 42ch;
}

/* Sections tighten so more of the journal fits on a screen. */
body.jrnl .jrnl-section {
  padding: 36px 0 4px;
}

body.jrnl .home-segments {
  margin: 36px 0 24px;
}

body.jrnl .jrnl-card {
  padding: 16px 18px 18px;
  gap: 6px;
}

body.jrnl .jrnl-card-image {
  height: 116px;
  width: calc(100% + 36px);
  margin: -16px -18px 4px;
}

body.jrnl .jrnl-section-head {
  margin-bottom: 14px;
}

body.jrnl .jrnl-section-head h2 {
  font-size: 1.75rem;
}

/* The journal masthead gets the same treatment. */
body.jrnl .jrnl-hero {
  min-height: 0;
}

body.jrnl .jrnl-hero-copy {
  padding: 30px 36px 24px;
  gap: 14px;
}

body.jrnl .jrnl-hero-copy h1 {
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem);
}

body.jrnl .jrnl-hero-photo {
  opacity: 0.32;
}

/* ------------------------------------------------------ Centred hero copy

   The figures strip and the second action block are gone from this band. With
   a single column of type left, centring it is what the composition wants:
   an off-centre headline needs something on the other side to balance against,
   and there is nothing there any more.

   The scrim loses its left-to-right ramp for the same reason — that gradient
   existed to darken the side the text sat on.                                */

.home-hero-copy--centred {
  align-items: center;
  text-align: center;
  padding: 96px 0 104px;
}

body.jrnl .home-hero-copy--centred {
  padding: 96px 0 104px;
}

body.jrnl .home-hero-copy--centred h1 {
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

body.jrnl .home-hero-copy--centred p {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
}

.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

body.jrnl .home-hero-cta .button {
  padding: 12px 28px;
  min-height: 46px;
  font-size: 0.9375rem;
}

/* An even wash now that no side carries the type on its own. */
body.jrnl .home-hero::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.62) 45%, rgba(255, 255, 255, 0.9) 100%);
}

@media (max-width: 700px) {
  .home-hero-copy--centred,
  body.jrnl .home-hero-copy--centred {
    padding: 56px 0 60px;
  }
}

/* With the actions gone the band holds two lines of type and nothing else, so
   the padding that framed a headline-plus-buttons group is now framing air.
   Tightened, and the sub-line moves closer to the headline it belongs to. */
body.jrnl .home-hero-copy--centred {
  padding: 76px 0 78px;
}

body.jrnl .home-hero-copy--centred p {
  margin-top: -2px;
}

@media (max-width: 700px) {
  body.jrnl .home-hero-copy--centred {
    padding: 48px 0 50px;
  }
}


/* Journal masthead title: wide enough to set a long journal name on two lines,
   capped so it never runs under the action blocks. */
body.jrnl .jrnl-hero-copy h1 {
  max-width: 24ch;
}


/* ====================================================================
   Journal masthead: copy aligned to the content column

   The kind / title / figures group started at the viewport edge while
   everything below it — the entry cards, the article grid — started at the
   1140px content column. Two different left edges on one page read as a
   mistake. Frontiers sets the masthead copy on the same column as the body of
   the page, so it does the same here.

   The gutter is a real grid column rather than padding on the copy:
   percentages in `grid-template-columns` resolve against the grid container,
   which is this band at full page width, so the column is exactly half the
   leftover — the same figure `.jrnl-shell`'s auto margins arrive at. A
   viewport-unit calculation would have included the scrollbar and landed a few
   pixels off, which on a vertical alignment is visible.

   The scrim moves off the copy and onto the band, otherwise the new gutter
   would show unscrimmed photograph to the left of a whitened block.
   ==================================================================== */

body.jrnl .jrnl-hero {
  grid-template-columns:
    minmax(24px, calc((100% - var(--jrnl-width)) / 2))
    minmax(0, 1fr)
    auto
    /* The band had a gutter on the left and none on the right, so the last
       action ran off the edge of the page and read as cut rather than as
       placed. The same measure on both sides. */
    minmax(24px, calc((100% - var(--jrnl-width)) / 2));
  /* The band holds its own stack: photograph, scrim, type. Without an explicit
     order they paint in document order and the photograph lands on top of the
     scrim it is supposed to sit under. `isolation` keeps those indices from
     leaking into the page's stack. */
  isolation: isolate;
}

body.jrnl .jrnl-hero-photo {
  z-index: 0;
}

body.jrnl .jrnl-hero-copy,
body.jrnl .jrnl-hero-actions {
  z-index: 2;
}

/* The photograph was being washed out from 95% to 55% across the width,
   which left a grey band ending on a hard vertical edge somewhere behind the
   title — not a picture and not a background, just something that looked
   half-loaded. A veil that varies is a veil you can see; one that does not
   is one you cannot. Even, and lighter, so the image reads as an image. */
body.jrnl .jrnl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.86);
}

body.jrnl .jrnl-hero-copy {
  grid-column: 2;
  background: none;
  padding: 30px 36px 24px 0;
}

@media (max-width: 900px) {
  body.jrnl .jrnl-hero {
    grid-template-columns: 1fr;
  }

  body.jrnl .jrnl-hero-copy {
    grid-column: 1;
    padding: 28px 20px 20px;
  }
}


/* ====================================================================
   Editors

   A replica of the Frontiers editor card: a round portrait at the top, the
   name under it, then institution and place, then a rule across the full width
   of the card with the role and the journal beneath.

   The portrait is initials on a tinted disc. `editorial_board_members` has no
   photograph column, and these are named real people — a stock face under a
   real name is not a placeholder, it is a false statement about somebody. When
   portraits are supplied the disc takes an <img> and nothing else moves.
   ==================================================================== */

.jrnl-editors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.jrnl-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 0;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-radius: var(--radius);
}

.jrnl-editor-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 0 16px;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--navy, #12395e);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.jrnl-editor-name {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jrnl-heading, #101820);
}

.jrnl-editor-affil {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #56636f;
}

.jrnl-editor-place {
  margin: 4px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #8a939c;
}

/* `margin-top: auto` keeps the rule on the floor of the card, so a two-line
   institution in one card does not leave its neighbour's rule floating. The
   negative side margins carry it the full width, as theirs does. */
.jrnl-editor-role {
  width: calc(100% + 40px);
  margin: auto -20px 0;
  padding: 14px 20px;
  border-top: 1px solid var(--hairline, #e6e8eb);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy, #12395e);
}

.jrnl-editor-role span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #78828c;
}

/* The standalone board page sets each journal's editors inside a half-width
   panel, so that grid is two across from the start. */
.jrnl-editors--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jrnl-editor-role a {
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}

.jrnl-editor-role a:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .jrnl-editors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .jrnl-editors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .jrnl-editors,
  .jrnl-editors--two { grid-template-columns: 1fr; }
}


/* ====================================================================
   Search results above the page, not behind it

   The results panel carried `z-index: 40`, which did nothing: it lives inside
   `.home-nav`, and that element had `z-index: 1` of its own, so the panel's 40
   only ever ranked it against its siblings inside the navigation. Against the
   page it counted as 1 — the same as `.home-hero-copy`, which comes later in
   the document and therefore painted over it. The headline read straight
   through the results.

   The fix is on the navigation, not the panel: lift the whole bar above the
   hero copy. The two never overlap when the panel is shut, so nothing else
   changes.
   ==================================================================== */

.home-hero > .home-nav {
  z-index: 30;
}

body.search-open .home-hero {
  overflow: visible;
}

/* The panel is the topmost thing on the page while it is open, including over
   a sticky header on the journal pages. */
.site-search-panel {
  z-index: 60;
}


/* Search sits in the navigation's actions group, beside Log in. The auto
   margin that pushed it right belongs to the group now, not to the button
   inside it. */
.home-nav-actions .site-search,
.nav-actions .site-search {
  margin-left: 0;
}

/* The actions group wraps on narrow widths; keep Log in and Search on one
   line together for as long as the bar allows, and align them to its end. */
.nav-actions {
  align-items: center;
  gap: 12px;
}


/* ====================================================================
   Pagination inside a card grid

   `renderPaginatedCards()` appends the bar into the same element it fills
   with cards, and that element is a four-column grid. So the bar became a
   grid cell about 270px wide: "Page 1 of 3" broke across two lines and
   Previous / Next stacked vertically beside it. It read as a rendering
   fault, which is why it is worth naming — the markup and the text were
   both fine, the bar was simply sitting in one track.

   Spanning every column puts it back on its own row underneath the cards.
   ==================================================================== */

.jrnl-grid > .pagination-bar {
  grid-column: 1 / -1;
  /* Centred, not flush right. On its own row under the cards there is nothing
     for a right edge to align to, and the last row of articles is usually a
     partial one — so a right-aligned bar reads as if it were still sitting in
     the empty cell beside the final card, which is the thing that was wrong
     with it in the first place. */
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline, #e6e8eb);
}

.jrnl-grid > .pagination-bar .small-print {
  margin: 0;
  white-space: nowrap;
}

.jrnl-grid > .pagination-bar .dashboard-actions {
  display: flex;
  gap: 10px;
}

/* A disabled Previous or Next should look unavailable rather than merely
   refuse to work. */
.jrnl-grid > .pagination-bar .button[disabled] {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 560px) {
  .jrnl-grid > .pagination-bar {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}


/* ====================================================================
   Volumes

   Frontiers' volume row: a card per volume carrying the label and an arrow,
   five across, on the grey band below the article list. Theirs reads
   "Volume 17 - 2026" and needs nothing else because the page is one journal.
   This archive covers both, so the journal names the card and the volume
   line sits under it.

   The cards are buttons rather than links: there is one archive here, and a
   card filters it in place instead of opening a page that would hold the
   same cards over again.
   ==================================================================== */

.jrnl-volumes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.jrnl-volume {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  padding: 20px 22px 18px;
  text-align: left;
  font: inherit;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-radius: var(--radius);
  cursor: pointer;
}

.jrnl-volume:hover {
  border-color: #cdd3da;
}

.jrnl-volume-journal {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #8a939c;
}

.jrnl-volume-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--jrnl-heading, #101820);
}

.jrnl-volume-count {
  margin: 0;
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* `margin-top: auto` floors the arrow, so cards with a one-line and a
   two-line journal name still line their arrows up. */
.jrnl-volume-arrow {
  margin-top: auto;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--link, #1a5fa8);
}

.jrnl-volume:hover .jrnl-volume-arrow {
  transform: translateX(3px);
}

.jrnl-volume-arrow {
  transition: transform 140ms ease;
}

@media (max-width: 1100px) {
  .jrnl-volumes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .jrnl-volumes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .jrnl-volumes { grid-template-columns: 1fr; }
}


/* ====================================================================
   Volume page

   Where a volume card leads. Frontiers head this page with the publication
   count and show the volume as a removable filter rather than as a title,
   which says plainly that you are looking at a subset and how to leave it.
   ==================================================================== */

.volume-head {
  padding: 40px 0 8px;
}

.volume-head h1 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 600;
  color: var(--jrnl-heading, #101820);
}

.volume-filter {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.volume-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--navy-deep, #0b2540);
  color: #fff;
}

.volume-chip span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}

.volume-chip strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.volume-clear {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--jrnl-heading, #101820);
  text-decoration: none;
}

.volume-clear:hover {
  text-decoration: underline;
}

.volume-head .small-print {
  margin: 14px 0 0;
}


/* ====================================================================
   Article reading view

   Frontiers' three-column article page: the journal on the left, the article
   in the centre, the metrics and actions on the right. The centre column is
   the only one that scrolls past its own height; both rails stick.

   Built by article-frontiers.js from each page's existing markup, so the
   thirteen static article files and anything article.html renders all take
   the same treatment from one place.
   ==================================================================== */

body.fr-article-page .article-layout {
  /* Wider than the 1140px column the rest of the site uses. Inside that
     measure two 300px rails leave the article itself 476px, narrower than
     either rail and far too narrow for the thing the reader came for.
     Frontiers widen their article page for the same reason; at 1440 this
     leaves the centre around 800px. */
  width: min(1420px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 290px;
  align-items: start;
  gap: 36px;
  padding: 36px 0 64px;
}

/* --------------------------------------------------------------- the rails */

.fr-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 90px;
}

.fr-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-radius: var(--radius);
}

.fr-card-head {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.fr-journal-image {
  display: block;
  width: 100%;
  height: 132px;
  margin: 0 0 14px;
  object-fit: cover;
  border-radius: var(--radius);
}

.fr-journal-name {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jrnl-heading, #101820);
}

.fr-journal-meta {
  margin: 0 0 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6b6b6b;
}

.fr-rail-link {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--link, #1a5fa8);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

.fr-rail-link:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------- the actions */

.fr-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--link, #1a5fa8);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--link, #1a5fa8);
  border-radius: 999px;
  cursor: pointer;
}

.fr-action:hover {
  background: #f3f7fc;
  color: var(--link, #1a5fa8);
}

/* Primary actions all take the same pair and all darken on the way in.
   This one began a rung lighter than the others while the hero's began a
   rung darker and lightened on hover, so three primary buttons on one
   site were three colours moving in two directions. */
.fr-action--primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.fr-action--primary:hover {
  color: #fff;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ------------------------------------------------------------- the metrics */

.fr-metrics {
  display: flex;
  gap: 24px;
}

.fr-metric {
  display: flex;
  flex-direction: column;
}

.fr-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--jrnl-heading, #101820);
  font-variant-numeric: tabular-nums;
}

.fr-metric-label {
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* A count that is not known says so. A zero here would read as a real
   measurement of nothing, which is a different claim. */
.fr-metric-pending {
  margin: 0;
  font-size: 0.85rem;
  color: #8a939c;
}

.fr-citation {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #4a5560;
}

/* -------------------------------------------------------------- the centre */

.fr-article {
  min-width: 0;
}

.fr-provenance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--jrnl-heading, #101820);
}

.fr-provenance-type {
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy, #12395e);
  background: #eef2f7;
  border-radius: var(--radius);
}

.fr-provenance-line {
  margin: 0 0 22px;
  font-size: 0.88rem;
  color: #6b6b6b;
}

/* Frontiers set the article title large and light. It is the one place on the
   site where a long measure is right: this is the thing the reader came for. */
.fr-title {
  margin: 0 0 24px;
  max-width: 34ch;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--jrnl-heading, #101820);
}

.fr-authors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline, #e6e8eb);
}

.fr-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Initials, not faces: there are no author photographs on record and these
   are named real people. */
.fr-author-disc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--navy, #12395e);
  font-size: 0.85rem;
  font-weight: 700;
}

.fr-author-name {
  font-size: 0.95rem;
  color: var(--jrnl-heading, #101820);
}

.fr-author-name sup {
  margin-left: 1px;
  font-size: 0.7em;
  color: #6b6b6b;
}

.fr-affiliations {
  margin: 0 0 14px;
  padding-left: 1.3em;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #6b6b6b;
}

.fr-correspondence,
.fr-dates {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: #6b6b6b;
}

.fr-dates {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

/* The body sections keep their own styling; they are only reframed. */
body.fr-article-page .fr-article .article-section {
  max-width: 74ch;
}

body.fr-article-page .fr-article .article-section h2 {
  font-size: 1.35rem;
}

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1240px) {
  body.fr-article-page .article-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  /* The right rail drops under the article rather than squeezing the text. */
  .fr-rail--right {
    grid-column: 1 / -1;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .fr-rail--right .fr-card {
    flex: 1 1 260px;
  }
}

@media (max-width: 900px) {
  body.fr-article-page .article-layout {
    grid-template-columns: 1fr;
  }

  .fr-rail--left {
    position: static;
  }

  .fr-title {
    max-width: none;
  }
}


/* ====================================================================
   Article reading view — corrections

   Two faults, both the specificity trap this file is full of.

   The PDF button was blue type on a blue field, invisible. `body.jrnl a` is
   (0,1,1) and beat `.fr-action--primary` at (0,1,0) from two thousand lines
   away. Prefixed with `body.jrnl`, the rule is (0,1,2) and holds.

   Every section of the article was drawn as its own bordered white card,
   because `.article-section` is listed in the colour system among the things
   that get a card treatment. In a three-column reading view the article body
   is one continuous column — Frontiers' is — so the cards come off here and
   only here.
   ==================================================================== */

/* Order matters here and I got it wrong once: `body.jrnl a.fr-action` and
   `body.jrnl a.fr-action--primary` are both (0,2,2), so whichever is written
   last wins. The generic rule was last, and it repainted the solid button
   blue on blue all over again. The modifier goes after the base. */

body.jrnl .fr-action,
body.jrnl a.fr-action {
  color: var(--link, #1a5fa8);
}

body.jrnl .fr-action--primary,
body.jrnl a.fr-action--primary,
body.jrnl a.fr-action--primary:hover {
  color: #fff;
}

body.fr-article-page .fr-article .article-section {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Space between sections now comes from the heading, which is where it
   belongs when there is no box to separate them. */
body.fr-article-page .fr-article .article-section h2 {
  margin: 34px 0 12px;
  padding: 0;
  border-top: 0;
}

body.fr-article-page .fr-article .article-section:first-of-type h2 {
  margin-top: 26px;
}

/* Ragged right, not justified. Justified text in a 650px measure with
   automatic hyphenation was opening rivers between words and breaking terms
   mid-line; Frontiers set theirs flush left. */
body.fr-article-page .fr-article .article-section p,
body.fr-article-page .fr-article .article-section li,
body.fr-article-page .fr-affiliations li {
  text-align: left;
  hyphens: manual;
}

body.fr-article-page .fr-article .article-section p {
  font-size: 1rem;
  line-height: 1.7;
}


/* ====================================================================
   References, the closing record, and the cite dialog
   ==================================================================== */

/* A reference's DOI resolves through CrossRef. The bare resolver URL that
   used to sit at the end of each entry is now the link's target rather than
   its text, which is shorter to read and clearer about where it goes. */
.fr-crossref {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--link, #1a5fa8);
  text-decoration: none;
  white-space: nowrap;
}

body.jrnl a.fr-crossref {
  color: var(--link, #1a5fa8);
}

.fr-crossref:hover {
  text-decoration: underline;
}

body.fr-article-page .fr-article .article-section li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ------------------------------------------------- the closing record */

.fr-record {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline, #e6e8eb);
}

.fr-record dl {
  margin: 0;
  display: grid;
  gap: 20px;
}

.fr-record-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.fr-record dt {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.fr-record dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4a5560;
}

.fr-record dd a {
  color: var(--link, #1a5fa8);
}

@media (max-width: 700px) {
  .fr-record-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------------------------------------------------- the cite dialog */

.fr-dialog {
  width: min(680px, calc(100% - 40px));
  max-height: 82vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(16, 24, 32, 0.24);
  color: var(--jrnl-heading, #101820);
}

.fr-dialog::backdrop {
  background: rgba(16, 24, 32, 0.45);
}

.fr-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.fr-dialog-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.fr-dialog-close {
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 6px;
  color: #6b6b6b;
  background: none;
  border: 0;
  cursor: pointer;
}

.fr-dialog-close:hover {
  color: var(--jrnl-heading, #101820);
}

.fr-dialog-body {
  padding: 8px 26px 26px;
  overflow-y: auto;
}

.fr-cite-format {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.fr-cite-format:last-child {
  border-bottom: 0;
}

.fr-cite-format-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.fr-cite-format-head h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.fr-cite-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #33404c;
  /* BibTeX is written with its own line breaks and alignment; preserving them
     is the difference between something that pastes into a .bib file and
     something that has to be retyped. */
  white-space: pre-wrap;
  word-break: break-word;
}

.fr-cite-format:last-child .fr-cite-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  padding: 14px 16px;
  background: var(--field, #f7f8f9);
  border-radius: var(--radius);
}


/* ====================================================================
   Article page typography, matched to Frontiers

   They set their article pages in MuseoSans. That is a commercial face from
   exljbris, licensed to them; their font files are not ours to serve, so the
   substitute is Figtree — the same geometric-humanist construction, a
   comparable x-height, and a real 300 for the body weight they use.

   What is copied exactly is the typographic setting, measured off their own
   article page at 1440: body 16/22 at weight 300, title 32/44 at 500,
   headings 18/28 at 500, body measure about 665px. Those numbers, not the
   drawing of the letters, are what make a page read like theirs.
   ==================================================================== */

body.fr-article-page .fr-article,
body.fr-article-page .fr-rail,
body.fr-article-page .fr-dialog,
body.fr-article-page .fr-record {
  font-family: "Figtree", "Manrope", Helvetica, Arial, sans-serif;
}

body.fr-article-page .fr-article .article-section p,
body.fr-article-page .fr-article .article-section li {
  font-size: 1rem;      /* 16px */
  line-height: 1.375;   /* 22px */
  font-weight: 300;
  color: #101820;
}

body.fr-article-page .fr-article .article-section p + p {
  margin-top: 16px;
}

body.fr-article-page .fr-article .article-section {
  max-width: 665px;
}

body.fr-article-page .fr-title {
  max-width: 665px;
  font-size: 2rem;      /* 32px */
  line-height: 1.375;   /* 44px */
  font-weight: 500;
  letter-spacing: normal;
}

body.fr-article-page .fr-article .article-section h2 {
  font-size: 1.125rem;  /* 18px */
  line-height: 1.556;   /* 28px */
  font-weight: 500;
  color: #282828;
}

body.fr-article-page .fr-article .article-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #282828;
}

/* --------------------------------------------------- the provenance line */

body.fr-article-page .fr-provenance {
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 400;
  color: #282828;
}

body.fr-article-page .fr-provenance-line {
  margin: 6px 0 22px;
  font-size: 0.9rem;
  font-weight: 400;
  color: #282828;
}

.fr-provenance-sep {
  margin: 0 6px;
  color: #b9c0c7;
}

body.fr-article-page .fr-provenance-line a {
  color: var(--link, #1a5fa8);
  text-decoration: none;
  word-break: break-all;
}

body.fr-article-page .fr-provenance-line a:hover {
  text-decoration: underline;
}

/* No DOI is registered for these articles yet. Saying so is the honest
   reading; an invented identifier would resolve to nothing and would be
   copied into citations. */
.fr-doi-pending {
  color: #78828c;
}

body.fr-article-page .fr-record dd,
body.fr-article-page .fr-journal-meta,
body.fr-article-page .fr-affiliations,
body.fr-article-page .fr-correspondence,
body.fr-article-page .fr-dates {
  font-weight: 300;
}


/* ====================================================================
   The article face, declared on the elements rather than the container

   Setting `font-family` on `.fr-article` and expecting it to inherit does
   not work here: existing rules declare a family directly on `p`, on
   `.article-section h2`, and on several others. A directly declared value
   beats an inherited one outright, whatever the specificity of the rule that
   inherited it — so the page kept rendering in Manrope with Cormorant
   Garamond headings while Figtree sat loaded and unused.

   Each element that carries its own family elsewhere is therefore named
   here.
   ==================================================================== */

body.fr-article-page .fr-article,
body.fr-article-page .fr-article h1,
body.fr-article-page .fr-article h2,
body.fr-article-page .fr-article h3,
body.fr-article-page .fr-article h4,
body.fr-article-page .fr-article p,
body.fr-article-page .fr-article li,
body.fr-article-page .fr-article dt,
body.fr-article-page .fr-article dd,
body.fr-article-page .fr-article span,
body.fr-article-page .fr-article a,
body.fr-article-page .fr-article em,
body.fr-article-page .fr-article strong,
body.fr-article-page .fr-rail,
body.fr-article-page .fr-rail p,
body.fr-article-page .fr-rail a,
body.fr-article-page .fr-rail button,
body.fr-article-page .fr-rail span,
body.fr-article-page .fr-action,
body.fr-article-page .fr-dialog,
body.fr-article-page .fr-dialog h2,
body.fr-article-page .fr-dialog h3,
body.fr-article-page .fr-dialog p,
body.fr-article-page .fr-dialog button {
  font-family: "Figtree", "Manrope", Helvetica, Arial, sans-serif;
}

/* BibTeX stays monospaced: its alignment is part of what makes it paste
   correctly. */
body.fr-article-page .fr-dialog .fr-cite-format:last-child .fr-cite-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ====================================================================
   Journal editorial office

   One address per journal, on that journal's own page. A reader with a
   question about a manuscript should not have to work out which of two
   inboxes to write to.
   ==================================================================== */

.jrnl-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-radius: var(--radius);
}

.jrnl-contact-label {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.jrnl-contact-note {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6b6b6b;
}

.jrnl-contact-address {
  flex-shrink: 0;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--navy, #12395e);
  border-radius: 999px;
  white-space: nowrap;
}

/* body.jrnl a is (0,1,1) and would otherwise repaint this link-blue on navy,
   which is the fault this stylesheet keeps producing. */
body.jrnl a.jrnl-contact-address {
  color: #fff;
}

body.jrnl a.jrnl-contact-address:hover {
  color: #fff;
  background: var(--navy-deep, #0b2540);
}

@media (max-width: 640px) {
  .jrnl-contact-address {
    width: 100%;
    text-align: center;
    white-space: normal;
    word-break: break-all;
  }
}


/* A board member's own portrait, where one has been supplied. The disc of
   initials remains the default: most members have no photograph on record,
   and a stock face under a real person's name is a false statement about
   them rather than a placeholder. */
.jrnl-editor-photo {
  width: 96px;
  height: 96px;
  margin: 0 0 16px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #eef2f7;
}


/* ====================================================================
   Template downloads

   Two cards, because a submission is two files and the pair has to read as
   a pair. Authors who take only the manuscript template and write their
   names into it are the commonest way a double-blind round is lost.
   ==================================================================== */

.download-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0 28px;
}

.download-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-radius: var(--radius);
  text-decoration: none;
}

.download-card:hover {
  border-color: var(--link, #1a5fa8);
}

.download-kind {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a939c;
}

.download-name {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.download-note {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #6b6b6b;
}

/* `margin-top: auto` floors the action, so one card carrying a longer note
   does not leave its neighbour's button floating. */
.download-action {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--link, #1a5fa8);
}

body.jrnl a.download-card .download-name {
  color: var(--jrnl-heading, #101820);
}

@media (max-width: 720px) {
  .download-row { grid-template-columns: 1fr; }
}

/* One template rather than two: the row does not stretch a single card
   across the full measure. */
.download-row--single {
  grid-template-columns: minmax(0, 420px);
}


/* ====================================================================
   Inline citations

   A reader scanning an argument wants to see at a glance where a claim is
   sourced. Colour does that; a link does more — where the reference list
   carries a matching entry the citation jumps to it, and the entry lights up
   briefly so the eye can find it among ninety-six others.

   Citations with no matching entry are still coloured but are not links,
   because a link that goes nowhere is worse than no link.
   ==================================================================== */

.fr-cite {
  color: var(--link, #1a5fa8);
  text-decoration: none;
  white-space: nowrap;
}

body.jrnl a.fr-cite {
  color: var(--link, #1a5fa8);
}

a.fr-cite:hover {
  text-decoration: underline;
}

/* Not a link: no pointer, no hover. It reads as a citation without promising
   somewhere to go. */
span.fr-cite {
  cursor: default;
}

/* The entry that was jumped to. :target survives the browser's own back and
   forward, which a class toggled in script would not. */
body.fr-article-page .fr-article .article-section li:target,
body.fr-article-page .fr-article .article-section p:target {
  background: #eef4fb;
  box-shadow: -10px 0 0 #eef4fb, 10px 0 0 #eef4fb;
  border-radius: var(--radius);
}

/* A citation is often the last thing before a full stop; letting it wrap
   whole keeps "(Nogawa et al., 1983)" off two lines. */
body.fr-article-page .fr-article .article-section p {
  overflow-wrap: break-word;
}

/* The brackets and semicolons stay black; only the citations themselves are
   coloured, so a group of four reads as four references rather than one long
   blue run. */
.fr-cite-group {
  color: inherit;
}

/* A contact inquiry in the publisher email log is shown in full: the whole
   point of the log is that a message nobody could send is still readable. */
.email-body {
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-alt);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Password recovery, under the sign-in form. reset-password.html had existed
   the whole time with nothing on the site linking to it, so a person who had
   forgotten a password had no route at all. */
.login-recover {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* The sign-in headings are set on one line because "Administrator log in"
   reads as one thing. Below the width where that stops fitting, let it wrap
   rather than run off the card. */
@media (max-width: 560px) {
  .compact-auth-hero h1,
  .login-page-title {
    white-space: normal;
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }
}

/* Sign-in feedback. The three states need telling apart at a glance: a wrong
   password, a request in flight, and a success that is about to navigate. */
.login-message {
  margin: 14px 0 0;
}

.login-message.is-error {
  color: var(--stop);
  font-weight: 600;
}

.login-message.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.login-message.is-working {
  color: var(--muted);
}

/* Shown on a sign-in page opened with a session already live, so nobody types
   a password they have already given. */
.login-session-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.login-session-note .login-actions {
  margin-top: 10px;
}

.clerk-signin-host {
  display: flex;
  justify-content: center;
  min-height: 420px;
}

/* Reviewer invitation feedback in the editor portal. */
.invite-message {
  margin: 8px 0 0;
}

.invite-message.is-error {
  color: var(--stop);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.invite-message.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.invite-message.is-working {
  color: var(--muted);
}

/* Production panel feedback in the publisher console. */
.production-status:empty {
  display: none;
}

.production-status.is-error {
  color: var(--stop);
  font-weight: 600;
}

.production-status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.production-status.is-working {
  color: var(--muted);
}

/* ------------------------------------------------------------------
   Sign-in and account forms: one measure, centred.

   `.single-login` was written earlier in this file than `.login-shell`.
   Both are single-class selectors, so they are the same specificity and
   source order decided it — the two-column base won, and every
   single-column sign-in page laid its card in the first of two tracks.
   Measured at 1440px: the card was 605px wide, 143px from the left edge,
   with 692px of nothing beside it. The modifier now comes after the base
   and outranks it, so neither can be reordered into a regression.
   ------------------------------------------------------------------ */
.login-shell.single-login {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}

/* reset-password.html and review-invitation.html stack their panels straight
   into the page shell, which made a two-field form 1140px wide. Same measure
   as the sign-in card, and centred the same way. */
.auth-stack > section {
  width: min(680px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Setting another account's password, in the administrator console. The field
   is readable on purpose: the platform stores a salted hash and will never
   show the password again, so the administrator has to be able to see what
   they are handing over. */
.set-password-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.set-password-status {
  margin: 10px 0 0;
}

.set-password-status.is-error {
  color: var(--stop);
  font-weight: 600;
}

.set-password-status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.mini-action + .mini-action,
td .muted + .mini-action {
  margin-left: 8px;
}

/* Outcome of saving a pool profile, reported on the panel because the form
   that produced it is in a modal that closes. */
.person-status {
  margin: 8px 0 14px;
}

.person-status.is-error {
  color: var(--stop);
  font-weight: 600;
}

.person-status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

/* Per-manuscript feedback in the administrator console's Manuscripts panel. */
.manuscript-status:empty {
  display: none;
}

.manuscript-status {
  margin: 10px 0 0;
}

.manuscript-status.is-error,
.small-print.is-error {
  color: var(--stop);
  font-weight: 600;
}

.manuscript-status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.manuscript-status.is-working {
  color: var(--muted);
}

/* The state override on a manuscript card. Folded away by default: it is the
   exception, not the way a manuscript normally moves. */
.ms-override {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ms-override > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
}

.ms-override[open] > summary {
  margin-bottom: 10px;
}

.ms-override .form-grid {
  margin-top: 12px;
}

/* Manuscript version history, in the administrator console and the reviewer
   portal. Folded away: most of the time you want the current file, which is
   already a button above. */
.ms-files {
  margin-top: 12px;
}

.ms-files > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
}

.ms-file-round {
  margin-top: 12px;
}

.ms-file-list {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.ms-file-list li {
  line-height: 1.5;
}

.ms-file-list a + a {
  margin-left: 10px;
}

.ms-file-list .small-print {
  display: block;
  color: var(--muted);
}

/* Reviewer reports on the author's card. Folded, because the author's first
   question is the status and the reports are a longer read. */
.author-reviews {
  margin-top: 12px;
}

.author-reviews > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
}

.author-reviews .dashboard-item {
  margin-top: 10px;
}

/* Reviewer deadline and the actions beside it, in the editor dashboard. */
.reviewer-deadline.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.reviewer-deadline.is-warn {
  color: var(--warn);
  font-weight: 600;
}

.reviewer-deadline.is-error {
  color: var(--stop);
  font-weight: 700;
}

.reviewer-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reviewer-action-status:empty {
  display: none;
}

.reviewer-action-status {
  margin: 10px 0 0;
}

.reviewer-action-status.is-error {
  color: var(--stop);
  font-weight: 600;
}

.reviewer-action-status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.reviewer-action-status.is-working {
  color: var(--muted);
}

.button.danger {
  border-color: var(--stop);
  color: var(--stop);
}

.button.danger:hover {
  background: var(--stop);
  color: #fff;
}

/* The production form on an accepted manuscript. Folded, because the card is
   read far more often than the article is built. */
.ms-production {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ms-production > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

.ms-production[open] > summary {
  margin-bottom: 14px;
}

.ms-production .field,
.ms-production .form-grid {
  margin-bottom: 12px;
}

.ms-production code {
  padding: 1px 4px;
  border-radius: var(--radius);
  background: var(--ink-wash);
  font-size: 0.85em;
}

.ms-override[data-secondary] > summary {
  color: var(--muted);
}

/* A card in the production panel is taller than the others, so it gets the
   full width rather than sharing a row. */
#accepted-list {
  grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------
   Role dashboards: navigation on the right, and more content per screen.

   The panel nav sat on the left at 280px, pushing the content it navigates
   into 840px of a 1140px shell — and on the editor dashboard, where each
   manuscript is an accordion of reviewer cards, that made a long page
   longer. It moves to the right at 220px, which is enough for the longest
   label, and the content takes the rest.
   ------------------------------------------------------------------ */
.dashboard-control-shell {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.dashboard-control-shell > .dashboard-sidebar {
  order: 2;
  align-content: start;
  position: sticky;
  top: 84px;
}

.dashboard-nav-button {
  text-align: left;
  line-height: 1.35;
}

/* The hero above them is page furniture on a dashboard, not the page. It was
   taking a third of the first screen before any work appeared. */
.submission-hero .compact-auth-hero h1 {
  font-size: clamp(1.9rem, 2.4vw, 2.3rem);
}

.submission-hero .compact-auth-hero .lead {
  margin: 6px 0 0;
  font-size: 0.95rem;
}

/* body.jrnl .card-surface sets this padding and counts an element selector,
   so it outranks a two-class rule. Matched rather than fought. */
body.jrnl .submission-hero .compact-auth-hero {
  padding: 18px 22px;
}

/* Reviewers stack, one strip per row, and open on a click. Two across was
   worse, not better: a reviewer card carries a paragraph of comments, so side
   by side they made a single dense block with no way to skim who had
   answered. */
.editor-record .dashboard-item + .dashboard-item {
  margin-top: 10px;
}

.reviewer-card {
  padding: 4px 0;
}

.reviewer-strip {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px;
}

.reviewer-strip .record-strip-title {
  font-size: 0.98rem;
}

.reviewer-strip .record-strip-meta.is-ok {
  color: var(--ok);
}

.reviewer-strip .record-strip-meta.is-warn {
  color: var(--warn);
}

.reviewer-strip .record-strip-meta.is-error {
  color: var(--stop);
  font-weight: 600;
}

.reviewer-fold[open] > .reviewer-strip {
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .reviewer-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .reviewer-strip .record-strip-meta {
    display: none;
  }
}


/* ------------------------------------------------------------------
   A manuscript at rest is one line.

   The card used to open with the number, the title as a heading and a status
   chip stacked in a flex block, then the whole body below it — so two
   manuscripts filled a screen and a queue of twelve meant twelve screens of
   scrolling to find one. Closed, each is now a strip you scan; the body is
   behind the click.
   ------------------------------------------------------------------ */
.record-strip {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
}

.record-strip::-webkit-details-marker {
  display: none;
}

.record-strip-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.record-strip-title {
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-strip-meta {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

details[open] > .record-strip {
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

details[open] > .record-strip .record-strip-title {
  white-space: normal;
  overflow: visible;
}

@media (max-width: 860px) {
  .record-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .record-strip-id {
    grid-column: 1 / -1;
  }

  .record-strip-meta {
    display: none;
  }
}

/* A manuscript card in the administrator console: the strip is the card at
   rest, so it keeps the card's own padding rather than adding its own. */
.ms-record > summary {
  margin: -4px 0;
}

.hr-record .record-strip {
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 12px;
}

.hr-record .record-strip .record-strip-meta {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full width for the manuscript panels: a strip reads badly at half width,
   and expanded the card is dense. */
#manuscript-list,
#accepted-list,
#published-list,
#rejected-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Every dashboard record folds to a strip. A pool card, a submission, an
   assignment and a production form are all one line at rest; the body is
   behind a click. Before this each list was a column of full cards, so
   finding one meant scrolling past the others in full. */
.hr-record .record-strip {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.hr-record .ms-record > summary {
  margin: -4px 0;
}

.dashboard-item > .reviewer-fold > .record-strip {
  padding: 4px 0;
}

.editor-record .record-strip .record-strip-meta,
.hr-record .record-strip .record-strip-meta {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An empty meta cell should not hold a column open. */
.record-strip .record-strip-meta:empty {
  display: none;
}


/* Tables and figures inside an article.
   Results tables are the findings of a quantitative paper, so they are set as
   tables rather than left to the PDF. They scroll sideways on a narrow screen
   instead of forcing the whole page to. */
.article-section .article-table,
.article-section .article-figure {
  margin: 28px 0;
}

.article-section figcaption {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1f2937;
  margin-bottom: 10px;
  line-height: 1.5;
}

.article-section .article-figure figcaption {
  margin: 10px 0 0;
  font-weight: 500;
  color: #4b5563;
}

.article-section .table-scroll {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
}

.article-section table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  font-family: "Manrope", system-ui, sans-serif;
}

.article-section th,
.article-section td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eef1f4;
}

.article-section th {
  background: #f7f9fb;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.article-section tr:last-child td {
  border-bottom: none;
}

/* Numbers do not wrap: a minus sign left on its own line changes what the
   number appears to say. */
.article-section td.num,
.article-section th.num {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.article-section .table-note {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #6b7280;
}

.article-section .article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
}

/* What the editor's dashboard was given, shown when it has nothing to show.
   An empty panel that cannot say why is the thing that costs an evening. */
.editor-diagnostic {
  border-collapse: collapse;
  width: 100%;
  margin-top: 12px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.82rem;
}

.editor-diagnostic th,
.editor-diagnostic td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #eef1f4;
}

.editor-diagnostic th {
  color: #6b7280;
  font-weight: 600;
}

/* An action that cannot be undone should not look like the ones that can. */
.button.is-destructive {
  border-color: #c0392b;
  color: #a5281b;
}

.button.is-destructive:hover {
  background: #fdf2f1;
}

.rule-soft {
  border: none;
  border-top: 1px solid #eef1f4;
  margin: 18px 0 12px;
}

/* "optional" beside a label, so nobody hunts for what is missing. */
.field-optional {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa3ad;
  margin-left: 6px;
}

/* The anonymity report is a finding, not a section of the form: it belongs in
   the page only when there is something to report. */
.anonymity-report[hidden] {
  display: none !important;
}

/* The submission dialog. Centred, because it carries one thing at a time: a
   bar, or a manuscript number. */
.modal-card.submission-modal {
  text-align: center;
  max-width: 520px;
}

.modal-card.submission-modal .section-tag,
.modal-card.submission-modal h2,
.modal-card.submission-modal .receipt-id,
.modal-card.submission-modal p {
  text-align: center;
}

.modal-card.submission-modal .button-row {
  justify-content: center;
}

.modal-card.submission-modal .receipt-id {
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin: 18px 0 8px;
}

.submission-bar {
  height: 8px;
  width: 100%;
  margin: 22px 0 14px;
  background: #eef1f4;
  border-radius: 999px;
  overflow: hidden;
}

.submission-bar-fill {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  transition: width 0.3s ease;
}

/* What threw, shown where the manuscripts should have been. Legible enough to
   be read out or pasted into a message. */
.editor-trace {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fbfcfd;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 10px 0;
  color: #374151;
}

/* Every role an address may sign in as, listed in the accounts table. One
   address can hold several: an administrator who is also an editor and the
   author of their own papers is one account, not three. */
.role-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 0;
  border: 1px solid var(--rule, #d9d9d9);
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
}


/* ── Portal pages: one level of containment, not three ──────────────
   Every portal opened with a card holding the page's own title, a card
   holding the rail, and three bordered buttons inside that card — a box
   in a box in a box, which is what "stiff" looks like when you say it in
   CSS. The brief at the top of this file asks for rules and borders to
   carry structure; it does not ask for them to carry it four deep.

   The title is a title and takes a rule under it. The rail is one list
   with its rows separated by hairlines and the current one marked by a
   bar, not three tiles. The panel below keeps its single border, which
   is the one level that was ever doing any work. */
/* 1. 标题区还原成标题区 —— 盒子是里面那个 article,不是外层 section */
body.jrnl .submission-hero.single-panel > .compact-auth-hero,
body.jrnl .submission-hero.single-panel > .card-surface {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

/* 2. 「以谁的身份登录」是一行字,不是一个填充块 */
body.jrnl .auth-summary {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* 3. 侧栏:一个容器,内部用分隔线,不是三个独立的盒子 */
body.jrnl .dashboard-sidebar {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
body.jrnl .dashboard-nav-button {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: none;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}
body.jrnl .dashboard-sidebar > .dashboard-nav-button:first-of-type {
  border-top: 0;
}
body.jrnl .dashboard-nav-button:hover {
  background: var(--ink-wash);
}
body.jrnl .dashboard-nav-button.active {
  background: var(--accent-wash);
  border-left-color: var(--accent);
  color: var(--accent-hover);
}


/* ====================================================================
   The author overview

   One view, two columns: what needs you and what you have with us on the
   left, who you are and where to ask on the right. It replaced four sidebar
   sections — my manuscripts, the submission form, the receipt and the APC
   text — three of which were places an author went once and never again.

   The submission form is not a tab here. It is a job you sit down to do, so
   it opens from the header action and closes back to this page.
   ==================================================================== */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
}

.overview-greeting {
  margin: 4px 0 32px;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1.15;
}

.overview-block + .overview-block {
  margin-top: 36px;
}

.overview-heading {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* --------------------------------------------------------- what needs you */

/* The one card an author is meant to act on. The accent down the left edge
   is the only place this page raises its voice, so it has to mean something:
   it appears when, and only when, the manuscript is back with the author. */
.todo-card {
  position: relative;
  padding: 20px 22px 20px 26px;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.todo-card + .todo-card {
  margin-top: 12px;
}

.todo-card-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 9px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: var(--radius);
}

.todo-card-head {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.todo-card-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--jrnl-heading, #101820);
}

.todo-card-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--jrnl-body, #6b6b6b);
}

.todo-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ------------------------------------------------------------- the rail */

/* Seven stages, drawn once and read everywhere. A manuscript that was
   stopped or rejected shows its last stage in the stop colour rather than
   as another tick: seven ticks over a rejection reads as a congratulation. */
.stage-rail {
  display: flex;
  align-items: center;
  margin: 14px 0 6px;
}

.stage-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line-strong, #c3ccd6);
}

.stage-dot.is-done {
  background: var(--accent);
  border-color: var(--accent);
}

.stage-dot.is-here {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.stage-dot.is-stopped {
  background: var(--stop);
  border-color: var(--stop);
  box-shadow: 0 0 0 3px #f7eaea;
}

.stage-link {
  flex: 1 1 auto;
  height: 1px;
  min-width: 10px;
  background: var(--line, #dde2e8);
}

.stage-caption {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--jrnl-body, #6b6b6b);
}

/* ------------------------------------------------------------ the side */

.overview-side {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overview-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--hairline, #e6e8eb);
  border-radius: var(--radius);
}

.overview-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.overview-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.overview-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.overview-affiliation {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--jrnl-body, #6b6b6b);
  overflow-wrap: anywhere;
}

.overview-card-head {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--jrnl-heading, #101820);
}

.overview-note {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--jrnl-body, #6b6b6b);
}

.overview-link {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--link, #1a5fa8);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.overview-link + .overview-link {
  margin-top: 8px;
}

.overview-link:hover {
  text-decoration: underline;
}

@media (max-width: 920px) {
  .overview {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .overview-side {
    position: static;
  }
}

/* A portal header carries one way out and the actions for this portal. The
   six public menu items behind a sign-in are not what anybody came for, and
   with a primary action beside them the row wrapped onto two lines. */
.nav-links--portal a {
  font-weight: 600;
}

/* --------------------------------------------------- a manuscript, in the list

   Three lines: what it is, what it is called, and how far along it is. The
   strip the editor and reviewer portals use truncates the title to one line
   and says nothing about the stage, which is the one question an author
   opens this page to ask. */

.manuscript-row {
  padding: 4px 18px 0;
}

.manuscript-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
}

.manuscript-row-head::-webkit-details-marker {
  display: none;
}

.manuscript-row-id {
  grid-column: 1;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--jrnl-body, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

.manuscript-row-head .status-chip {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  /* The journal name sits in this column too, and a long one widens it.
     Without this the chip stretched to the width of "Asia-Pacific Journal of
     Economics, Culture & Society" and stopped reading as a chip. */
  justify-self: end;
}

.manuscript-row-title {
  grid-column: 1;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--jrnl-heading, #101820);
}

/* The rail and its caption sit on one line under the title, with the journal
   pushed to the end of the row. */
.manuscript-row-stage {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.manuscript-row-stage .stage-rail {
  flex: 0 0 116px;
  margin: 0;
}

.manuscript-row-stage-label {
  font-size: 0.78rem;
  color: var(--jrnl-body, #6b6b6b);
}

.manuscript-row-journal {
  grid-column: 2;
  align-self: end;
  font-size: 0.8rem;
  color: var(--jrnl-body, #6b6b6b);
  text-align: right;
}

/* Open: the detail below the head is set off by a rule rather than by a
   second box inside the first. */
.manuscript-row[open] .manuscript-row-head {
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.manuscript-row[open] {
  padding-bottom: 18px;
}

@media (max-width: 760px) {
  .manuscript-row-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .manuscript-row-head .status-chip {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .manuscript-row-journal {
    grid-column: 1;
    text-align: left;
  }
}


/* ====================================================================
   The review forum

   One manuscript, everything about it. The shape — a stage rail across the
   top, the record under it, a status block saying whose move it is, and a
   tab per participant — is the one scholarly publishing has settled on, so
   an author or reviewer who has worked with another publisher knows where
   to look. The setting inside it is this site's: Cormorant Garamond for the
   title, Manrope for everything else, one accent, square corners.
   ==================================================================== */

.forum-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.forum-head-id {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--jrnl-body, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ the rail */

.forum-rail {
  padding: 26px 0 30px;
}

.forum-stages {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.forum-stage {
  position: relative;
  padding-top: 34px;
  text-align: center;
}

/* The line runs between the marks, not under them: it is drawn as two half
   segments either side of each mark so the first and last stages do not
   trail a line off the end of the rail. */
.forum-stage::before,
.forum-stage::after {
  content: "";
  position: absolute;
  top: 11px;
  height: 2px;
  background: var(--line, #dde2e8);
}

.forum-stage::before { left: 0; right: 50%; }
.forum-stage::after  { left: 50%; right: 0; }

.forum-stage:first-child::before,
.forum-stage:last-child::after {
  display: none;
}

/* A segment is filled when the stage on its left is behind you. */
.forum-stage.is-done::before,
.forum-stage.is-done::after,
.forum-stage.is-here::before,
.forum-stage.is-stopped::before {
  background: var(--accent);
}

.forum-stage-mark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-strong, #c3ccd6);
  color: var(--jrnl-body, #6b6b6b);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.forum-stage.is-done .forum-stage-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.forum-stage.is-here .forum-stage-mark {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

/* Stopped, rejected or failed: the last mark is not another tick. Seven
   ticks over a rejection reads as a congratulation. */
.forum-stage.is-stopped .forum-stage-mark {
  background: var(--stop);
  border-color: var(--stop);
  color: #fff;
}

.forum-stage-label {
  display: block;
  padding: 0 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-stage.is-here .forum-stage-label,
.forum-stage.is-stopped .forum-stage-label {
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

@media (max-width: 860px) {
  /* Seven labels do not fit across a phone. The rail becomes a column, which
     also puts the stage names in reading order. */
  .forum-stages {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .forum-stage {
    padding: 6px 0 6px 36px;
    text-align: left;
  }

  .forum-stage::before,
  .forum-stage::after {
    left: 11px;
    right: auto;
    width: 2px;
    height: 50%;
  }

  .forum-stage::before { top: 0; }
  .forum-stage::after  { top: 50%; }

  .forum-stage-mark {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .forum-stage-label {
    padding: 0;
  }
}

/* ---------------------------------------------------------- the record */

.forum-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 40px;
  align-items: start;
  padding: 26px 0 28px;
  border-top: 1px solid var(--hairline, #e6e8eb);
}

.forum-title {
  margin: 0 0 12px;
  max-width: 34ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--jrnl-heading, #101820);
}

.forum-authors {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--jrnl-heading, #101820);
}

.forum-star {
  color: var(--brand-orange, #e8622a);
  font-weight: 700;
}

.forum-origin {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-facts {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}

.forum-facts > div {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px;
}

.forum-facts dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-facts dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--jrnl-heading, #101820);
}

.forum-scope {
  margin: 0;
  max-width: 68ch;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--jrnl-body, #6b6b6b);
}

/* ---------------------------------------------------- the action rail */

.forum-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-left: 1px solid var(--hairline, #e6e8eb);
}

.forum-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  color: var(--link, #1a5fa8);
  background: none;
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

body.jrnl a.forum-action {
  color: var(--link, #1a5fa8);
}

.forum-action:hover {
  background: var(--field, #f7f8f9);
}

.forum-action.is-off {
  margin: 0;
  color: var(--jrnl-body, #6b6b6b);
  cursor: default;
}

.forum-action.is-off:hover {
  background: none;
}

.forum-action-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 860px) {
  .forum-record {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .forum-actions {
    border-left: 0;
    border-top: 1px solid var(--hairline, #e6e8eb);
    padding-top: 14px;
  }

  .forum-action {
    padding-left: 0;
  }
}

/* --------------------------------------------------------- whose move */

.forum-status {
  padding: 20px 22px 20px 24px;
  background: var(--field, #f7f8f9);
  border: 1px solid var(--hairline, #e6e8eb);
  border-left: 3px solid var(--line-strong, #c3ccd6);
  border-radius: var(--radius);
}

/* The accent appears when, and only when, the manuscript is back with the
   person reading the page. */
.forum-status.is-yours {
  border-left-color: var(--accent);
  background: #fff;
}

.forum-status.is-stopped {
  border-left-color: var(--stop);
}

.forum-status-flag {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-status.is-yours .forum-status-flag {
  color: var(--accent);
}

.forum-status.is-stopped .forum-status-flag {
  color: var(--stop);
}

.forum-status-state {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.forum-status-line {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-status-line + .forum-status-line {
  margin-top: 4px;
}

/* ------------------------------------------------------------- the tabs */

.forum-tabs {
  margin-top: 30px;
}

.forum-tabstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.forum-tab {
  padding: 11px 18px 10px;
  font: inherit;
  text-align: center;
  color: var(--jrnl-body, #6b6b6b);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.forum-tab:hover {
  color: var(--jrnl-heading, #101820);
}

.forum-tab.is-here {
  color: var(--jrnl-heading, #101820);
  border-bottom-color: var(--accent);
}

.forum-tab-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}

.forum-tab-note {
  display: block;
  margin-top: 1px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-panel {
  padding: 26px 0 0;
}

/* ---------------------------------------------------------- an entry */

.forum-entry + .forum-entry {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline, #e6e8eb);
}

.forum-entry-head {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jrnl-heading, #101820);
}

.forum-entry-when {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-entry-call {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--jrnl-heading, #101820);
}

/* A reviewer's answer under the question it answers, so a reader does not
   have to hold the question in their head while they read the reply. */
.forum-question {
  padding: 16px 18px;
  background: var(--field, #f7f8f9);
  border-radius: var(--radius);
}

.forum-question-tag {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--jrnl-body, #6b6b6b);
}

.forum-entry-body {
  margin: 0;
  max-width: 72ch;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--jrnl-heading, #101820);
  white-space: pre-wrap;
}

.forum-entry-file {
  margin: 12px 0 0;
  font-size: 0.86rem;
}

/* ---------------------------------------------------------- the history */

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

.forum-history li {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline, #e6e8eb);
}

.forum-history li:last-child {
  border-bottom: 0;
}

.forum-history-when {
  font-size: 0.82rem;
  color: var(--jrnl-body, #6b6b6b);
  font-variant-numeric: tabular-nums;
}

.forum-history-what {
  font-size: 0.9rem;
  color: var(--jrnl-heading, #101820);
}

@media (max-width: 560px) {
  .forum-history li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* The row's own way in. A <summary> is already clickable, so this is the
   second way rather than the only one: it names where the click goes, which
   a disclosure triangle does not. */
.manuscript-row-open {
  grid-column: 2;
  justify-self: end;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--link, #1a5fa8);
  text-decoration: none;
}

.manuscript-row-open:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .manuscript-row-open {
    grid-column: 1;
    justify-self: start;
  }
}

.forum-status-actions {
  margin-top: 16px;
}


/* ====================================================================
   The portal theme

   Everything behind a sign-in — the author's overview, the review forum,
   the editor, reviewer and administrator desks, and the pages that lead to
   them — is set in this layer. It sits on top of `body.jrnl` and changes
   nothing on the public journal or on an article page.

   The brief, in the user's words: it should read like the submission
   systems researchers already use. That means lighter chrome than the
   public site carries — a tinted page with white cards floating on it,
   generous corners, soft filled chips instead of outlined ones, and a
   working blue that is brighter than the navy the public site reserves for
   a masthead.

   The face is Figtree. The systems this is modelled on are set in
   MuseoSans, a commercial face from exljbris whose files are licensed to
   them and are not ours to serve; Figtree is the nearest freely licensed
   match — the same geometric-humanist construction, a comparable x-height,
   and a real 300.
   ==================================================================== */

body.portal {
  /* Paper: a warm grey, so the white cards on it read as paper rather than
     as another shade of the same blue. The page was tinted the working
     blue's own hue for a while, which left the whole screen inside one
     narrow band of colour with nothing to push against. */
  --portal-page: #f1f1ef;
  --portal-card: #ffffff;
  --portal-line: #dedcd8;
  --portal-line-soft: #ebe9e5;

  /* Ink. */
  --portal-ink: #1a1a1a;
  --portal-ink-soft: #55565a;
  /* Dark enough to be read. At #85868a it was 3.6:1 on white, which is a
     pass only for type larger than this is ever set in; the card meta and
     the word counters are both 0.86rem. */
  --portal-ink-faint: #6f7074;

  /* One blue, three rungs, and nothing else borrows them. It carries the
     band, the buttons and the links.

     It was a petrol -- #0b4f71, where the green sat only a little under the
     blue -- and on a page whose greys are warm it read as a colour that had
     been mixed rather than chosen. This one is further from its own green,
     so it reads as blue at a glance and still takes white type at 8:1. */
  --portal-blue: #0b5280;
  --portal-blue-deep: #083e62;
  --portal-blue-wash: #e9eff6;

  /* Status. These appear in flags and chips, never as decoration. The teal
     appears nowhere else on the page, so a tick reads as a tick without
     being read. */
  --portal-ok: #00757f;
  --portal-ok-wash: #e2f1f2;
  --portal-warn: #8a5a15;
  --portal-warn-wash: #fbf1e0;
  --portal-stop: #8d2b32;

  /* Corners, barely. Rounder than this and a working page starts to read
     as an app rather than as a journal. */
  --radius: 4px;
  --radius-lg: 6px;

  --accent: var(--portal-blue);
  --accent-hover: var(--portal-blue-deep);
  --accent-wash: var(--portal-blue-wash);
  --link: var(--portal-blue);
  --hairline: var(--portal-line);
  --line: var(--portal-line);
  --field: #f7f6f4;

  background: var(--portal-page);
  color: var(--portal-ink);
}

/* The face, named on the elements rather than only on the body: rules
   elsewhere in this file declare a family directly on p, on h1-h4 and on
   several others, and a directly declared value beats an inherited one
   whatever the specificity of the rule that inherited it. */
body.portal,
body.portal h1,
body.portal h2,
body.portal h3,
body.portal h4,
body.portal p,
body.portal li,
body.portal dt,
body.portal dd,
body.portal span,
body.portal a,
body.portal label,
body.portal input,
body.portal select,
body.portal textarea,
body.portal button,
body.portal .button,
body.portal summary {
  font-family: "Figtree", "Manrope", Helvetica, Arial, sans-serif;
}

body.portal h1,
body.portal h2,
body.portal h3,
body.portal h4 {
  color: var(--portal-ink);
  letter-spacing: -0.015em;
}

body.portal h1 { font-weight: 800; }
body.portal h2 { font-weight: 700; }

body.portal p,
body.portal li,
body.portal dd {
  color: var(--portal-ink-soft);
}

/* ------------------------------------------------------------ the frame */

/* The header floats over the tinted page rather than sitting in it. */
body.portal .site-header {
  background: #fff;
  border-bottom: 1px solid var(--portal-line);
}

body.portal .site-shell {
  background: transparent;
}

body.portal .site-footer,
body.portal footer {
  background: #fff;
  border-top: 1px solid var(--portal-line);
}

/* ------------------------------------------------------------- surfaces */

/* Every panel on a portal page is a white card on the tint. The journal
   theme gives these a hairline on white, which on a tinted page reads as a
   box drawn around nothing. */
body.portal .card-surface,
body.portal .dashboard-panel,
body.portal .overview-card,
body.portal .dashboard-sidebar,
body.portal .login-form-card,
body.portal .simple-hero,
body.portal .jrnl-card,
body.portal .resource-card {
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04);
}

/* The hero is the page's own heading, not a card sitting on it. */
body.portal .simple-hero,
body.portal .compact-auth-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* The login pages are the exception: there the card is the page. */
body.portal .login-form-card {
  padding: 32px 34px 30px;
}

/* ------------------------------------------------------------- actions */

/* Pills. This is the one shape that says "working tool" more than any
   other single thing, and the public site already uses it for its own
   actions, so nothing new is being introduced. */
body.portal .button,
body.portal .primary-btn,
body.portal .outline-btn,
body.portal .mini-action,
body.portal .pager-button,
body.portal .dashboard-actions .button {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
}

body.portal .button-primary,
body.portal .primary-btn {
  background: var(--portal-blue);
  border-color: var(--portal-blue);
  color: #fff;
}

body.portal .button-primary:hover,
body.portal .primary-btn:hover {
  background: var(--portal-blue-deep);
  border-color: var(--portal-blue-deep);
  color: #fff;
}

body.portal .button-secondary,
body.portal .outline-btn {
  background: #fff;
  border-color: var(--portal-line);
  color: var(--portal-blue);
}

body.portal .button-secondary:hover,
body.portal .outline-btn:hover {
  border-color: var(--portal-blue);
  color: var(--portal-blue-deep);
}

body.portal a {
  color: var(--portal-blue);
}

body.portal a:hover {
  color: var(--portal-blue-deep);
}

/* --------------------------------------------------------------- chips */

/* Soft fills, not outlines. An outlined pill in this system is a button,
   and a status is not something you can press. */
body.portal .status-chip {
  min-height: 26px;
  padding: 0 12px;
  background: var(--portal-blue-wash);
  border: 0;
  color: var(--portal-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- fields */

body.portal input[type="text"],
body.portal input[type="email"],
body.portal input[type="password"],
body.portal input[type="search"],
body.portal input[type="file"],
body.portal select,
body.portal textarea {
  background: var(--field);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius);
}

body.portal input:focus,
body.portal select:focus,
body.portal textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--portal-blue);
  box-shadow: 0 0 0 3px var(--portal-blue-wash);
}

body.portal label {
  color: var(--portal-ink);
  font-weight: 600;
}

/* ------------------------------------------------- the author overview */

body.portal .manuscript-row {
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04);
}

body.portal .manuscript-row:hover {
  border-color: var(--portal-line-soft);
}

body.portal .todo-card {
  border-radius: var(--radius-lg);
  border-left-width: 4px;
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04);
}

body.portal .todo-card-tag {
  background: var(--portal-blue-wash);
  color: var(--portal-blue);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ---------------------------------------------------------- the forum */

body.portal .forum-rail,
body.portal .forum-record,
body.portal .forum-tabs {
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04);
  padding-left: 28px;
  padding-right: 28px;
}

body.portal .forum-rail {
  margin-bottom: 16px;
  padding-top: 30px;
  padding-bottom: 26px;
}

body.portal .forum-record {
  border-top: 1px solid var(--portal-line);
  margin-bottom: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
}

body.portal .forum-status {
  border-radius: var(--radius-lg);
  border-left-width: 4px;
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04);
}

/* Whose move it is, in the colour the answer deserves. "Waiting" is not a
   problem and is not painted as one; "your move" is the only thing on the
   page that gets the accent. */
body.portal .forum-status.is-waiting {
  background: var(--portal-card);
  border-color: var(--portal-line);
  border-left-color: var(--portal-ok);
}

body.portal .forum-status.is-waiting .forum-status-flag {
  color: var(--portal-ok);
}

body.portal .forum-status.is-yours {
  border-left-color: var(--portal-blue);
}

body.portal .forum-status.is-stopped {
  border-left-color: var(--portal-stop);
}

body.portal .forum-tabs {
  margin-top: 16px;
  padding-top: 0;
  padding-bottom: 28px;
}

/* Tabs that are part of the panel rather than a row of underlines above
   it: the active one is joined to what it opens. */
body.portal .forum-tabstrip {
  gap: 4px;
  margin: 0 -28px;
  padding: 0 28px;
  border-bottom: 1px solid var(--portal-line);
}

body.portal .forum-tab {
  padding: 12px 20px 11px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -1px;
}

body.portal .forum-tab:hover {
  background: var(--portal-line-soft);
}

body.portal .forum-tab.is-here {
  background: var(--portal-card);
  border-color: var(--portal-line);
  border-bottom-color: var(--portal-card);
}

body.portal .forum-tab.is-here .forum-tab-label {
  color: var(--portal-blue);
}

/* The title is set in the portal face here, not in the journal's serif:
   this page is a workbench, and the serif belongs on the published
   article. */
body.portal .forum-title {
  font-family: "Figtree", "Manrope", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.95rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 40ch;
}

/* A reviewer's answer, under the question it answers. The tag is set in
   the stop colour because it is a question put to the author, and it has
   to be findable in a wall of prose. */
body.portal .forum-question {
  background: var(--field);
  border: 1px solid var(--portal-line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}

/* ------------------------------------------------------------ empty */

body.portal .empty-state,
body.portal .dashboard-panel > .small-print:only-child,
body.portal .editor-grid > .small-print:only-child {
  border-top-color: var(--portal-line);
}

/* The way out of a task that took over the page. */
.form-shell-head {
  margin-bottom: 20px;
}

.form-shell-head h1 {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.95rem);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--link, #0b5280);
  background: none;
  border: 0;
  cursor: pointer;
}

.back-link:hover {
  text-decoration: underline;
}

/* A record with no title on it. Saying so beats drawing an empty heading
   and leaving the reader to wonder whether the page failed. */
.forum-untitled {
  color: var(--muted, #55565a);
  font-style: italic;
  font-weight: 400;
}


/* ====================================================================
   Signing in

   A centred card with the fields stacked full width, labels that sit on the
   field's own border, and actions that run the width of the card. This is
   the shape sign-in has settled on across the web, and it is the right one
   here for a plain reason: the card is the whole page, so nothing competes
   with it, and a field as wide as the card cannot be mistaken for half of a
   two-column form.

   No "remember me". The platform issues a twelve-hour session and has no
   setting behind it, and a checkbox that changes nothing is a lie told on
   the way in.
   ==================================================================== */

body.portal .login-shell.single-login {
  display: grid;
  place-items: start center;
  padding: 56px 0 72px;
}

body.portal .auth-card {
  width: min(448px, 100%);
  padding: 40px 40px 36px;
  text-align: center;
}

body.portal .auth-card .eyebrow {
  margin: 0 0 10px;
}

body.portal .auth-card .login-page-title {
  margin: 0 0 10px;
  font-size: 1.9rem;
  font-weight: 800;
}

body.portal .auth-register {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--portal-ink-soft);
}

body.portal .auth-lede {
  margin: 0 0 28px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--portal-ink-soft);
}

/* ------------------------------------------------------------- a field */

/* The label sits on the border rather than above the field. It starts as
   the placeholder and rises when there is something to label, which keeps
   the question visible while the answer is being typed — the thing a bare
   placeholder loses the moment you start. */
body.portal .auth-field {
  position: relative;
  margin-bottom: 18px;
  text-align: left;
}

body.portal .auth-field input {
  width: 100%;
  height: 56px;
  padding: 18px 16px 4px;
  font-size: 0.98rem;
  color: var(--portal-ink);
  background: #fff;
  border: 1px solid var(--portal-line);
  border-radius: var(--radius);
}

body.portal .auth-field--password input {
  padding-right: 72px;
}

body.portal .auth-field label {
  position: absolute;
  top: 18px;
  left: 17px;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--portal-ink-soft);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 120ms ease, color 120ms ease;
}

body.portal .auth-field input:focus + label,
body.portal .auth-field input:not(:placeholder-shown) + label {
  transform: translateY(-11px) scale(0.76);
}

body.portal .auth-field input:focus + label {
  color: var(--portal-blue);
}

body.portal .auth-field label span {
  color: var(--portal-stop);
}

body.portal .auth-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--portal-blue);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

body.portal .auth-reveal:hover {
  background: var(--portal-blue-wash);
}

/* ------------------------------------------------------------ actions */

body.portal .auth-recover {
  margin: 0 0 22px;
  text-align: right;
  font-size: 0.84rem;
}

body.portal .auth-recover a {
  font-weight: 600;
  text-decoration: none;
}

body.portal .auth-recover a:hover {
  text-decoration: underline;
}

body.portal .auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-size: 0.95rem;
}

/* A rule with the word sitting in it, rather than the word floating over a
   gap and leaving the two actions looking unrelated. */
body.portal .auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-size: 0.82rem;
  color: var(--portal-ink-soft);
}

body.portal .auth-or::before,
body.portal .auth-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--portal-line);
}

@media (max-width: 520px) {
  body.portal .auth-card {
    padding: 30px 22px 26px;
  }

  body.portal .login-shell.single-login {
    padding: 28px 0 44px;
  }
}

/* Registration asks for five things rather than two, so its card is wider —
   but the fields still run its full width. A field that is half a row reads
   as half a question. */
body.portal .auth-card--wide {
  width: min(520px, 100%);
}

body.portal .auth-stack {
  display: grid;
  gap: 0;
  text-align: left;
}

/* The verification code and the button that sends it belong on one line:
   they are one action split in two. */
body.portal .auth-stack--code {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

body.portal .auth-stack--code .button {
  min-height: 56px;
  white-space: nowrap;
}

body.portal .auth-card .field-hint,
body.portal .auth-card .small-print {
  text-align: left;
}

@media (max-width: 560px) {
  body.portal .auth-stack--code {
    grid-template-columns: 1fr;
  }
}

/* Actions on a sign-in card run its full width and stack, so the primary one
   is always the widest thing on the card and the secondary never looks like
   it is competing. */
body.portal .auth-actions {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

body.portal .auth-actions .button {
  width: 100%;
  min-height: 48px;
}

body.portal .auth-card + .auth-card {
  margin-top: 16px;
}

body.portal .auth-card h1 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  font-weight: 800;
}

/* The four portals as a list rather than a row of cards. Four cards across
   did not fit the measure and wrapped into an uneven grid; a list reads top
   to bottom, which is the order somebody scans them in anyway. */
body.portal .role-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid var(--portal-line);
}

body.portal .role-list li {
  border-bottom: 1px solid var(--portal-line);
}

body.portal .role-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 4px;
  text-decoration: none;
}

body.portal .role-list a:hover {
  background: var(--portal-blue-wash);
}

.role-list-name {
  grid-column: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--portal-ink);
}

.role-list-note {
  grid-column: 1;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--portal-ink-soft);
}

.role-list-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.1rem;
  color: var(--portal-blue);
}


/* ====================================================================
   The review forum, set to match the screenshots

   The brief was explicit and repeated: this page should look like the one
   our authors and reviewers already use. So the rest of the portal keeps
   the house layer above, and the forum takes this one — squared boxes with
   hairline borders on white, the stage rail drawn in the brown it is drawn
   in there, a grey status band, and chunky bordered tabs with the open one
   joined to its panel.

   Nothing here is lifted from them: no mark, no copy, no font file. What is
   matched is the composition and the colour of the furniture.
   ==================================================================== */

body.portal.forum-page {
  background: #fff;
}

/* The forum's own palette, which is not the portal's.
   The rest of the portal is petrol on warm grey. This page is the one the
   journal was asked to look like: a brown rail, a bright blue for anything
   you may click, neutral greys, and a brick flag on a quoted comment. It is
   kept separate on purpose, so changing one does not silently change the
   other. */
body.portal .forum {
  --fr-line: #d4d4d4;
  --fr-line-soft: #e4e4e4;
  --fr-field: #f5f5f5;
  --fr-rail: #7b5e57;
  --fr-rail-soft: #cfc3c0;
  --fr-link: #1a6bbd;
  --fr-flag: #1a56a0;
  --fr-ink: #282828;
  --fr-ink-soft: #6b6b6b;
}

/* ------------------------------------------------------------ the bar */

body.portal .forum-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  background: var(--fr-field);
  border: 1px solid var(--fr-line);
  border-radius: 0;
}

body.portal .forum-head .eyebrow {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fr-ink);
}

body.portal .forum-head .eyebrow::before {
  display: none;
}

body.portal .forum-head-id {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #9a9a9a;
}

body.portal .forum-head-help {
  margin: 0 0 0 auto;
  font-size: 0.86rem;
  color: var(--fr-ink-soft);
}

/* ----------------------------------------------------------- the rail */

body.portal .forum-rail {
  background: #fff;
  border: 1px solid var(--fr-line);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 24px 28px 22px;
}

body.portal .forum-stage {
  /* The rail runs below the labels, so the room for it is reserved here.
     Without it a label that wraps to two lines sat on top of the line. */
  padding: 0 0 22px;
}

/* Label above, line below: the number is part of the label, the way it
   reads in the original. */
body.portal .forum-stage-label {
  display: block;
  min-height: 2.9em;
  padding: 0 10px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--fr-ink);
}

body.portal .forum-stage.is-here .forum-stage-label,
body.portal .forum-stage.is-stopped .forum-stage-label {
  font-weight: 700;
}

/* The connecting line runs under the labels, not above them. */
body.portal .forum-stage::before,
body.portal .forum-stage::after {
  top: auto;
  bottom: 5px;
  height: 3px;
  background: var(--fr-rail-soft);
}

body.portal .forum-stage.is-done::before,
body.portal .forum-stage.is-done::after,
body.portal .forum-stage.is-here::before,
body.portal .forum-stage.is-stopped::before {
  background: var(--fr-rail);
}

body.portal .forum-stage-mark {
  top: auto;
  bottom: 0;
  width: 13px;
  height: 13px;
  background: #fff;
  border: 2px solid var(--fr-rail-soft);
  box-shadow: none;
  /* The number is in the label; the mark is a dot. */
  font-size: 0;
  color: transparent;
}

body.portal .forum-stage.is-done .forum-stage-mark,
body.portal .forum-stage.is-here .forum-stage-mark {
  background: var(--fr-rail);
  border-color: var(--fr-rail);
}

body.portal .forum-stage.is-stopped .forum-stage-mark {
  background: var(--stop);
  border-color: var(--stop);
}

/* The tick that marks a finished stage sits with its label. */
body.portal .forum-stage.is-done .forum-stage-label::before {
  content: "\2713\00a0";
  font-weight: 700;
  color: var(--fr-ink);
}

/* --------------------------------------------------------- the record */

body.portal .forum-record {
  margin: 0;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--fr-line);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 0;
}

body.portal .forum-record-main {
  padding-right: 28px;
}

body.portal .forum-title {
  margin: 0 0 10px;
  max-width: none;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fr-link);
}

body.portal .forum-authors {
  margin: 0 0 2px;
  font-size: 0.95rem;
  color: var(--fr-link);
}

body.portal .forum-origin {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fr-link);
}

/* The facts run as labelled lines, not as a two-column list: "Received on:
   13 Sep 2026" reads as a sentence and takes a third of the room. */
body.portal .forum-facts {
  display: block;
  margin: 0 0 8px;
}

body.portal .forum-facts > div {
  display: block;
  margin-bottom: 2px;
}

body.portal .forum-facts dt,
body.portal .forum-facts dd {
  display: inline;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
}

body.portal .forum-facts dt {
  font-weight: 700;
  color: var(--fr-ink);
}

body.portal .forum-facts dt::after {
  content: ":\00a0";
}

body.portal .forum-facts dd {
  color: var(--fr-ink);
}

body.portal .forum-scope {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fr-ink);
}

/* ---------------------------------------------------- the action rail */

body.portal .forum-actions {
  gap: 0;
  padding: 0 0 0 28px;
  border-left: 1px solid var(--fr-line-soft);
}

body.portal .forum-action {
  gap: 14px;
  padding: 9px 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--fr-ink);
  border-radius: 0;
}

body.portal a.forum-action,
body.jrnl body.portal a.forum-action {
  color: var(--fr-ink);
}

body.portal .forum-action:hover {
  background: none;
  color: var(--fr-link);
  text-decoration: underline;
}

body.portal .forum-action-mark {
  width: 22px;
  height: 22px;
  background: none;
  color: var(--fr-ink-soft);
  font-size: 1.1rem;
  font-weight: 400;
}

/* ------------------------------------------------------- whose move */

body.portal .forum-status,
body.portal .forum-status.is-yours,
body.portal .forum-status.is-waiting,
body.portal .forum-status.is-stopped {
  margin: 0;
  padding: 20px 28px;
  background: var(--fr-field);
  border: 1px solid var(--fr-line);
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
}

body.portal .forum-status-flag {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.portal .forum-status-flag::before {
  content: "\23F0";
  font-size: 1.2rem;
}

body.portal .forum-status .forum-status-flag             { color: var(--portal-ok); }
body.portal .forum-status.is-late .forum-status-flag    { color: var(--portal-warn, #8a5a15); }
body.portal .forum-status.is-stopped .forum-status-flag { color: var(--stop); }

body.portal .forum-status-state {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fr-ink);
}

body.portal .forum-status-line {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--fr-ink);
}

body.portal .forum-status-line + .forum-status-line {
  margin-top: 10px;
}

/* --------------------------------------------------------- the tabs */

body.portal .forum-tabs {
  margin: 22px 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.portal .forum-tabstrip {
  gap: 0;
  margin: 0;
  padding: 0 0 0 2px;
  border-bottom: 1px solid var(--fr-line);
}

body.portal .forum-tab {
  min-width: 118px;
  padding: 11px 20px 9px;
  background: var(--fr-field);
  border: 1px solid var(--fr-line);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  margin: 0 -1px -1px 0;
}

body.portal .forum-tab:hover {
  background: #eee;
}

body.portal .forum-tab.is-here {
  background: #fff;
  border-color: var(--fr-line);
  border-bottom: 1px solid #fff;
  z-index: 1;
  position: relative;
}

body.portal .forum-tab-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fr-ink);
}

body.portal .forum-tab.is-here .forum-tab-label {
  color: var(--fr-ink);
}

body.portal .forum-tab-note {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--fr-ink-soft);
}

body.portal .forum-panel {
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--fr-line);
  border-top: 0;
}

body.portal .forum-question {
  background: var(--fr-field);
  border: 0;
  border-radius: 0;
}

/* A quoted question, in the shape the page this is copied from uses.
   Measured off it: a grey strip carrying a small brick bookmark at its head
   and the label beside it in bold, with the words themselves plain on white
   underneath. Ours put the whole label inside the flag and the words on
   grey, which made a banner where they have a bookmark, and left the loudest
   thing in each report the part nobody needed to read twice. */
body.portal .forum-question {
  margin: 24px 0 20px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

body.portal .forum-question-tag {
  position: relative;
  display: block;
  /* The strip runs the width of the panel. A measure is set for prose, and
     `.page-shell p` reaches this because it is one; the strip is furniture,
     and a strip that stops two thirds of the way across reads as a bar that
     did not finish loading. */
  max-width: none;
  margin: 0 0 14px;
  padding: 11px 16px 11px 56px;
  background: var(--fr-field);
  color: var(--fr-ink);
  border: 0;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  /* Sentence case. In capitals it was read before the sentence it
     introduces, which is the wrong way round. */
  text-transform: none;
  clip-path: none;
}

body.portal .forum-question-tag::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 44px;
  background: var(--fr-flag);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

body.portal .forum-question .forum-entry-body {
  color: var(--fr-ink);
}

@media (max-width: 860px) {
  body.portal .forum-record {
    grid-template-columns: 1fr;
  }

  body.portal .forum-record-main {
    padding-right: 0;
  }

  body.portal .forum-actions {
    margin-top: 18px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--fr-line-soft);
  }
}


/* ------------------------------------------------- the overview, in one card

   The left column is a single panel rather than three stacked blocks on the
   page: the greeting, what needs you, and the list all belong to the same
   thing, and separating them made the page read as three unrelated widgets.
   ---------------------------------------------------------------------- */

body.portal .overview-main.overview-card {
  padding: 28px 30px 30px;
}

body.portal .overview-greeting {
  margin: 0 0 22px;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--portal-ink-soft);
}

body.portal .overview-heading {
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

body.portal .overview-aside {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--portal-ink-soft);
}

/* The card inside the card. The accent edge is the only colour on this page
   that is not a link, and it appears only when something is waiting. */
body.portal .todo-card {
  padding: 18px 20px 18px 22px;
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-left: 4px solid var(--portal-blue);
  border-radius: var(--radius);
  box-shadow: none;
}

body.portal .todo-card-tag {
  margin-bottom: 12px;
  padding: 4px 12px;
  background: var(--field);
  color: var(--portal-ink-soft);
  font-weight: 700;
  letter-spacing: 0.06em;
}

body.portal .todo-card-head {
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 700;
}

body.portal .todo-card-title {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--portal-ink-soft);
}

/* Drawn, not set: the page-glyph this wants is an emoji, and an emoji the
   reader's font does not carry renders as an empty box. */
.todo-card-mark {
  flex: 0 0 auto;
  position: relative;
  width: 13px;
  height: 16px;
  margin-top: 3px;
  border: 1.5px solid var(--portal-ink-soft);
  border-radius: 1px;
  font-size: 0;
}

.todo-card-mark::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  right: 2px;
  height: 1px;
  background: var(--portal-ink-soft);
  box-shadow: 0 3px 0 var(--portal-ink-soft), 0 6px 0 var(--portal-ink-soft);
}

body.portal .todo-card-meta {
  padding-left: 26px;
}

/* The list sits inside the card, so its rows are rules rather than boxes. */
/* `.dashboard-item` wraps each row in its own bordered, tinted box. Inside
   a card that box is a second frame around the first, so it comes off and
   the rows separate by rule. */
body.portal .overview-card .dashboard-item {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

body.portal .overview-card .dashboard-list {
  gap: 0;
}

body.portal .overview-card .manuscript-row {
  background: none;
  border: 0;
  border-top: 1px solid var(--portal-line);
  border-radius: 0;
  box-shadow: none;
  padding: 0 2px;
}

body.portal .overview-card .manuscript-row:hover {
  background: var(--field);
}

body.portal .overview-card .dashboard-list {
  border-bottom: 1px solid var(--portal-line);
}

body.portal .overview-card .empty-state {
  border-top: 1px solid var(--portal-line);
}

/* The row under the fields: remember this browser on the left, the way out
   of a forgotten password on the right. The checkbox is wired to a real
   setting -- a fortnight's session instead of half a day -- because one that
   changed nothing would be a lie told on the way in. */
body.portal .auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 22px;
  font-size: 0.86rem;
}

body.portal .auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  color: var(--portal-ink-soft);
  cursor: pointer;
}

body.portal .auth-remember input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--portal-blue);
  cursor: pointer;
}

body.portal .auth-row a {
  font-weight: 600;
  text-decoration: none;
}

body.portal .auth-row a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------ closing the gap

   Measured against the screenshots rather than guessed at: the working blue
   a rung brighter so a primary action reads as one across a white card, the
   pending manuscript's title in ink rather than grey, and the identity card
   naming the affiliation the account carries rather than repeating the
   address that is already the sign-in.
   ------------------------------------------------------------------- */

body.portal .todo-card-title {
  color: var(--portal-ink);
  font-size: 1rem;
}

body.portal .todo-card-tag {
  background: var(--portal-line-soft);
  color: var(--portal-ink-soft);
}

body.portal .overview-card,
body.portal .card-surface,
body.portal .dashboard-panel,
body.portal .login-form-card {
  box-shadow: 0 1px 3px rgba(22, 32, 43, 0.05);
}

body.portal .auth-card {
  box-shadow: 0 1px 3px rgba(22, 32, 43, 0.05);
}

/* Two things the restyle had fixed and the revert took back out. */

/* The stage's own ::before/::after are painted after the mark, so the grey
   segment was drawn straight across the dot it is supposed to stop at. */
body.portal .forum-stage-mark {
  z-index: 1;
}

/* "Next" is a label on the sentence beside it, not the first word of it. */
body.portal .forum-next {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--portal-line);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--portal-ink-soft);
}

body.portal .forum-next-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
  padding-top: 4px;
}


/* ====================================================================
   Submitting a manuscript

   Five folded steps with their state on the head, a drop zone for the two
   files, and a bar along the bottom carrying the charge and the two things
   you can do with the form. The shape is the one authors in this field
   already use; what it is filled with is this journal's own.
   ==================================================================== */

body.portal .submission-form-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 96px;
}

body.portal .sub-step {
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(22, 32, 43, 0.05);
}

body.portal .sub-step + .sub-step {
  margin-top: 12px;
}

body.portal .sub-step-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

body.portal .sub-step-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--portal-ink);
}

/* The state, and the tick that goes with it. Green only when it is true. */
body.portal .sub-step-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--portal-ink-soft);
}

body.portal .sub-step-state::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--portal-line-soft);
  background: #fff;
}

body.portal .sub-step.is-done .sub-step-state {
  color: var(--portal-ok);
}

body.portal .sub-step.is-done .sub-step-state::before {
  background: var(--portal-ok) no-repeat center/9px 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.2 4.4 9.6 11 3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--portal-ok);
}

body.portal .sub-step-chevron {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--portal-ink-soft);
  border-bottom: 2px solid var(--portal-ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 140ms ease;
}

body.portal .sub-step.is-open .sub-step-chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

body.portal .sub-step-body {
  padding: 4px 24px 26px;
  border-top: 1px solid var(--portal-line-soft);
  margin-top: -1px;
}

/* The first step splits: what the manuscript is on the left, the manuscript
   itself on the right. */
body.portal .sub-step-body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 26px;
}

body.portal .sub-step-main .field + .field {
  margin-top: 18px;
}

/* What this article type is, and what it allows. */
body.portal .sub-guide {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--field);
  border-radius: var(--radius);
}

body.portal .sub-guide-tag {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--portal-ink-soft);
}

body.portal .sub-guide p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------ the files */

body.portal .drop-label {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--portal-ink);
}

body.portal .drop-req {
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--portal-stop);
}

body.portal .drop-zone {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 30px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line-strong, #cbc9c4);
  border-radius: var(--radius);
}

body.portal .drop-zone.is-over {
  border-color: var(--portal-blue);
  background: var(--portal-blue-wash);
}

/* Drawn rather than set in an emoji the reader's font may not carry. */
body.portal .drop-mark {
  position: relative;
  width: 30px;
  height: 38px;
  border: 2px solid var(--portal-ink-faint, #6f7074);
  border-radius: 2px;
}

body.portal .drop-mark::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--portal-ink-faint, #6f7074);
  box-shadow: 0 7px 0 var(--portal-ink-faint, #6f7074), 0 14px 0 var(--portal-ink-faint, #6f7074);
}

body.portal .drop-copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--portal-ink-soft);
}

body.portal .drop-copy span {
  font-size: 0.84rem;
  color: var(--portal-ink-faint, #6f7074);
}

body.portal .drop-or {
  margin: 0;
  font-size: 0.84rem;
  color: var(--portal-ink-faint, #6f7074);
}

body.portal .drop-browse {
  padding: 9px 22px;
}

body.portal .drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.portal .drop-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

body.portal .drop-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--portal-line);
  border-radius: var(--radius);
}

body.portal .drop-file + .drop-file {
  margin-top: 8px;
}

body.portal .drop-file-kind {
  grid-column: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--portal-ink);
}

body.portal .drop-file-name {
  grid-column: 1;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--portal-ink-soft);
  overflow-wrap: anywhere;
}

body.portal .drop-file-size {
  grid-column: 1;
  font-size: 0.8rem;
  color: var(--portal-ink-faint, #6f7074);
}

body.portal .drop-file-remove {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--portal-ink-faint, #6f7074);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

body.portal .drop-file-remove:hover {
  background: var(--field);
  color: var(--portal-stop);
}

body.portal .drop-hint {
  margin: 16px 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--portal-ink-soft);
}

/* ------------------------------------------------------ the word count */

body.portal .field-count {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--portal-ink-faint, #6f7074);
}

body.portal .field-count.is-over {
  color: var(--portal-stop);
}

/* --------------------------------------------------------- the bottom bar */

body.portal .sub-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 16px -24px -24px;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid var(--portal-line);
  box-shadow: 0 -2px 10px rgba(22, 32, 43, 0.06);
}

/* How far through the form you are, along the top edge of the bar. */
body.portal .sub-bar-progress {
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--done, 0%);
  height: 3px;
  background: var(--portal-ok);
  transition: width 200ms ease;
}

body.portal .sub-bar-fee-line {
  margin: 0;
  font-size: 0.95rem;
  color: var(--portal-ink);
}

body.portal .sub-bar-fee-note {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--portal-ink-soft);
}

body.portal .sub-bar-actions {
  display: flex;
  gap: 10px;
}

body.portal .sub-bar-actions .button {
  min-height: 44px;
  padding: 0 26px;
}

@media (max-width: 900px) {
  body.portal .sub-step-body--split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.portal .sub-guide {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.portal .sub-bar {
    margin: 16px 0 0;
    padding: 14px 16px;
  }
}

/* `hidden` is display:none from the user-agent sheet, and any author rule
   that sets `display` beats it. The overview is a grid, so hiding it did
   nothing at all and the form opened underneath it. */
body.portal [hidden] {
  display: none !important;
}

/* ------------------------------------------------------------- the desk

   One list, whatever you are here as. Each row says which relationship you
   have to that manuscript, because an account that both edits and submits
   needs to know which hat it is wearing before it clicks.
   ------------------------------------------------------------------- */

body.portal .manuscript-row--link {
  display: block;
  text-decoration: none;
}

body.portal a.manuscript-row--link:hover {
  background: var(--field);
}

body.portal .manuscript-row--link .manuscript-row-head {
  cursor: pointer;
}

/* The relationship, before the journal name. Set apart by weight rather
   than by a chip: there is already a chip on this row and it says something
   else. */
.desk-role {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--portal-blue);
}

/* Shown only when there is more than one kind of thing on the desk. */
.desk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0 0 30px;
  border-bottom: 1px solid var(--portal-line);
}

.desk-filter {
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  padding: 0 0 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--portal-ink-soft);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
}

.desk-filter sup {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--portal-ink-faint, #6f7074);
}

.desk-filter:hover {
  color: var(--portal-ink);
}

.desk-filter.is-here {
  color: var(--portal-ink);
  font-weight: 700;
  border-bottom-color: var(--portal-blue);
}

.desk-filter.is-here sup {
  color: var(--portal-ink-soft);
}

/* A role with nothing under it is still shown -- a nought answers the
   question -- but it does not ask to be read first. */
.desk-filter.is-empty {
  color: var(--portal-ink-faint);
}

.desk-roles {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--portal-ink-soft);
}

#desk-tool-links .overview-link + .overview-link {
  margin-top: 9px;
}

/* A reviewer's confidential half, marked so nobody quotes it into a letter
   to the author by accident. The rule is the warning, not a colour wash:
   this is read for twenty minutes at a time. */
body.portal .forum-question--private {
  margin-top: 14px;
  border-left: 2px solid var(--portal-line);
  padding-left: 14px;
}

/* The private block reads as the others do.
   It was an amber wash with an amber bookmark and an amber rule beside it,
   three signals for one fact, and the loudest thing on a page of quiet grey
   strips. The fact is carried by the words -- the label says it is not shown
   to the author -- and by one neutral rule down the side, which brackets the
   block without shouting at the person who wrote it. */
body.portal .forum-question--private .forum-question-tag {
  background: var(--fr-field);
  color: var(--fr-ink);
}

/* ------------------------------------------------- the editor's controls

   The buttons that change something, drawn only for the reader who may use
   them. They sit inside the panel they act on rather than in a bar of their
   own: a withdraw button three inches from the reviewer it withdraws is a
   button somebody presses on the wrong row.
   ------------------------------------------------------------------- */

body.portal .forum-controls,
body.portal .forum-invite,
body.portal .forum-decide {
  padding: 18px 20px;
  margin: 0 0 22px;
  background: var(--field);
  border: 1px solid var(--portal-line);
  border-radius: var(--radius);
}

body.portal .forum-invite,
body.portal .forum-decide {
  background: #fff;
}

body.portal .forum-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

body.portal .forum-controls-row + .forum-controls-row {
  margin-top: 14px;
}

body.portal .forum-control-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.portal .forum-control-field > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--portal-ink-soft);
}

body.portal .forum-control-field > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--portal-ink-faint, #6f7074);
}

body.portal .forum-control-field input,
body.portal .forum-control-field select,
body.portal .forum-control-field textarea {
  min-height: 42px;
  padding: 9px 12px;
  font-size: 0.95rem;
}

body.portal .forum-control-field--wide {
  margin-top: 14px;
}

body.portal .forum-control-field--wide textarea {
  width: 100%;
  min-height: 96px;
}

body.portal .forum-controls .button,
body.portal .forum-invite .button,
body.portal .forum-decide .button {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.9rem;
}

/* Withdrawing a reviewer is the one control here that closes somebody out
   of work they agreed to do. It is not painted red until it is hovered --
   a row of red buttons stops meaning anything. */
body.portal .button.is-danger {
  color: var(--portal-stop);
  border-color: var(--portal-line);
}

body.portal .button.is-danger:hover {
  color: #fff;
  background: var(--portal-stop);
  border-color: var(--portal-stop);
}

body.portal .forum-controls-note {
  margin: 12px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--portal-ink-soft);
}

body.portal .forum-controls-row + .forum-controls-note,
body.portal .forum-decide .forum-controls-note:first-of-type {
  margin-top: 0;
  margin-bottom: 14px;
}

/* What just happened, beside the button that did it. */
body.portal .forum-notice {
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--portal-ink-soft);
}

body.portal .forum-notice:empty {
  display: none;
}

body.portal .forum-notice.is-working { color: var(--portal-ink-soft); }
body.portal .forum-notice.is-ok      { color: var(--portal-ok); font-weight: 600; }
body.portal .forum-notice.is-error   { color: var(--portal-stop); font-weight: 600; }

/* One reviewer's comment and the reply to it, kept together. An author
   answering four reports should never have to scroll between the question
   and the box they answer it in. */
body.portal .forum-reply {
  padding: 0 0 4px;
}

body.portal .forum-reply + .forum-reply {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--portal-line);
}

body.portal .forum-reply .forum-control-field--wide {
  margin-top: 14px;
}

body.portal .forum-decide .forum-question {
  margin-bottom: 0;
}

/* ------------------------------------------- what the editor is asking for

   Shown once, to an author arriving at a manuscript that has been sent
   back. Two halves: what is wanted on the left, and where this round sits
   in the whole of it on the right, because "revise and resubmit" means
   something different to somebody who has not seen the shape of the process.
   ------------------------------------------------------------------- */

body.portal .ask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 24, 32, 0.45);
}

body.portal .ask-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  width: min(920px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(16, 24, 32, 0.3);
}

body.portal .ask-said {
  padding: 44px 40px 40px;
}

body.portal .ask-title {
  margin: 0 0 20px;
  max-width: 14ch;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--portal-ink);
}

body.portal .ask-said p {
  margin: 0 0 14px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--portal-ink-soft);
}

body.portal .ask-note {
  padding: 14px 16px;
  background: var(--field);
  border-radius: var(--radius);
}

body.portal .ask-note strong {
  color: var(--portal-ink);
}

body.portal .ask-said .button {
  margin-top: 12px;
  min-height: 46px;
  padding: 0 26px;
}

body.portal .ask-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  padding: 4px 10px;
  font: inherit;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--portal-ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

body.portal .ask-close:hover {
  color: var(--portal-ink);
}

/* The shape of the whole process, with this round marked. Drawn here rather
   than lifted: these are six strokes, and an illustration borrowed from
   somebody else's page would be the one part of this platform that was. */
body.portal .ask-map {
  display: grid;
  align-content: center;
  padding: 40px 36px;
  background: var(--portal-blue-wash);
}

body.portal .ask-map ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.portal .ask-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--portal-blue);
}

/* The connector between the steps. Drawn on the step itself rather than as
   a free-floating pseudo-element: absolutely positioned dashes with no
   positioned parent to hang from landed wherever the page happened to put
   them. */
body.portal .ask-step {
  position: relative;
}

body.portal .ask-step + .ask-step::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 17px;
  width: 1px;
  height: 18px;
  border-left: 1px dashed rgba(20, 80, 125, 0.4);
}

body.portal .ask-step svg {
  color: var(--portal-blue);
}

body.portal .ask-step.is-here {
  font-weight: 800;
  color: var(--portal-ink);
}

body.portal .ask-step.is-here svg {
  color: var(--portal-blue);
}

@media (max-width: 760px) {
  body.portal .ask-card {
    grid-template-columns: 1fr;
  }

  body.portal .ask-said {
    padding: 36px 24px 28px;
  }

  body.portal .ask-map {
    padding: 28px 24px;
  }
}


/* ====================================================================
   The portal, set with some care

   Three changes, and the first carries the other two.

   A serif for anything that names something -- the manuscript, the state it
   is in, the heading of a panel -- and the sans for the furniture around it.
   A page set entirely in one geometric sans reads as an interface; a page
   where the nouns are set in a serif reads as a publication that happens to
   have controls on it. Source Serif 4 rather than the display face the
   public site uses: this is text at working sizes, and a display face is
   thin and tiring there.

   And the manuscript's own title set in a band at the top of its page,
   white on the petrol. The title is the one thing every reader of that
   page came for; it was previously the fourth thing down.

   The palette this is drawn in is at the top of the portal layer, declared
   once. It was declared three times for a while, each block correcting the
   one before it, which is how a green from two revisions ago survived on
   the submission form.
   ==================================================================== */

/* ---------------------------------------------------------- the serif

   Named on the elements rather than only on a container: rules elsewhere in
   this file declare a family directly on h1-h4 and on several others, and a
   directly declared value beats an inherited one whatever the specificity
   of the rule that inherited it. */
body.portal h1,
body.portal h2,
body.portal h3,
body.portal .overview-heading,
body.portal .forum-title,
body.portal .forum-entry-head,
body.portal .forum-status-state,
body.portal .sub-step-name,
body.portal .login-page-title,
body.portal .todo-card-head,
body.portal .manuscript-row-title,
body.portal .ask-title,
body.portal .role-list-name,
body.portal .overview-name {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  /* Several of these are marked up as <p>, and the rule that gives a
     paragraph its softer ink outweighs a single class. Without this every
     heading that is not an <h> element reads a shade grey, which is most
     of them. */
  color: var(--portal-ink);
}

body.portal .forum-title,
body.portal .ask-title,
body.portal .login-page-title {
  letter-spacing: -0.015em;
}

/* Sizes that suit a serif: it carries more weight per pixel than the sans
   did, so the headings come down rather than up. */
body.portal .overview-heading { font-size: 1.5rem; line-height: 1.2; }
body.portal .forum-entry-head { font-size: 1.2rem; }
body.portal .forum-status-state { font-size: 1.35rem; line-height: 1.25; }
body.portal .todo-card-head { font-size: 1.2rem; }
body.portal .manuscript-row-title { font-size: 1.12rem; line-height: 1.35; }
body.portal .sub-step-name { font-size: 1.2rem; }
body.portal .login-page-title { font-size: 2.1rem; }
body.portal .ask-title { font-size: 2rem; }
body.portal .overview-name { font-size: 1.05rem; }
body.portal .role-list-name { font-size: 1.15rem; }

/* ------------------------------------------------- the band on the forum */

/* A strip rather than a band.
   The manuscript's title was set in white on a full-bleed petrol band for a
   while. The journal this page is modelled on puts a thin grey strip here
   with the reference in it and the title inside the record below, where the
   authors and the article type are, and that is what it is again. */
body.portal .forum-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 14px 20px;
  background: var(--fr-field);
  border: 1px solid var(--fr-line);
  border-bottom: 0;
  border-radius: 0;
  color: var(--fr-ink);
}

body.portal .forum-head .eyebrow {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fr-ink);
}

body.portal .forum-head .eyebrow::before {
  display: none;
}

/* The manuscript, in the band. It was the fourth thing down the page and is
   the one thing every reader came for. */
body.portal .forum-head-title {
  display: none;
}

body.portal .forum-head-id {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fr-ink-soft);
  font-variant-numeric: tabular-nums;
}

body.portal .forum-head-help {
  position: static;
  margin: 0 0 0 auto;
  font-size: 0.9rem;
}

body.portal .forum-head-help a,
body.jrnl body.portal .forum-head-help a {
  color: var(--fr-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The rail follows the band rather than riding over it. It was pulled up by
   64px for a moment, which put the stage labels on the petrol in the grey
   they are drawn in on white; two of the seven were unreadable. */
body.portal .forum-rail {
  margin-top: 0;
  border-top: 0;
}

body.portal .forum-record .forum-title {
  display: block;
  margin: 0 0 6px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fr-link);
}

@media (max-width: 760px) {
  body.portal .forum-head {
    flex-wrap: wrap;
    gap: 6px;
  }

  body.portal .forum-head-help {
    margin-left: 0;
  }
}

/* ------------------------------------------- what is coloured, and why

   Three things on the forum were coloured by habit rather than by meaning:
   the author's name and the article type were drawn in the link colour and
   are not links, the status carried an alarm-clock emoji, and the question
   flags were a crimson left over from a palette this page no longer uses.
   Colour here marks one of three things -- you may click it, it marks
   progress, or it is a warning -- and nothing else. */

body.portal .forum-authors,
body.portal .forum-origin {
  color: var(--fr-link);
}

body.portal .forum-origin {
  font-weight: 600;
}

/* The asterisk on the corresponding author is the one mark in that block
   that means something, so it is the one that is coloured. */
body.portal .forum-star {
  color: var(--fr-link);
}

/* The status. An emoji sets its own face, its own weight and its own
   colour, none of which match the page it is printed on; a dot in the
   status colour says the same thing in the page's own voice. */
body.portal .forum-status-flag::before {
  content: "\23F0";
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  background: none;
  font-size: 1.2rem;
}

body.portal .forum-status-flag {
  gap: 9px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* ===================================================================
   The desk's list

   Measured against a page that does this well. Each manuscript is a card
   with room in it rather than a row squeezed between two hairlines, the
   state is said in words at the top of the card instead of in a chip
   floating off to the right, and the one thing you came to do is a link in
   the corner where a link belongs.

   What was taken away matters as much: a seven-dot rail on every row, an
   all-caps role tag, a second copy of every pending manuscript in a block
   of its own above the list. Three decorations and a duplicate, on a page
   whose job is to be read in four seconds.
   =================================================================== */

body.portal .overview-main.overview-card {
  padding: 40px 44px 44px;
}

body.portal .overview-greeting {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

body.portal .overview-heading {
  margin: 0 0 24px;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.15;
}

/* ---------------------------------------------------------- the groups */

body.portal .desk-group + .desk-group {
  margin-top: 40px;
}

body.portal .desk-group-head {
  margin: 0 0 16px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--portal-ink);
}

/* ----------------------------------------------------------- the cards */

body.portal .desk-card + .desk-card {
  margin-top: 14px;
}

body.portal .desk-card-link {
  display: grid;
  gap: 14px;
  padding: 24px 28px 22px;
  background: var(--portal-card);
  border: 1px solid var(--portal-line);
  border-left: 4px solid var(--portal-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The left edge is the only colour on the card, and it is on only when the
   manuscript is waiting for something from the person reading. */
body.portal .desk-card.is-waiting .desk-card-link {
  border-left-color: var(--portal-blue);
}

body.portal .desk-card-link:hover {
  border-color: var(--portal-line);
  border-left-color: var(--portal-blue);
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.07);
}

body.portal .desk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.portal .desk-chip {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--portal-ink-soft);
  background: var(--portal-line-soft);
  border-radius: 999px;
}

body.portal .desk-card-head {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--portal-ink);
}

body.portal .desk-card-title {
  display: flex;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--portal-ink-soft);
}

/* A page rather than an emoji: an emoji is set in whatever face the
   reader's system hands it, at whatever weight that face happens to be. */
body.portal .desk-card-mark {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 16px;
  margin-top: 3px;
  border: 1.5px solid var(--portal-ink-faint);
  border-radius: 1px;
}

body.portal .desk-card-mark::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 2px;
  right: 2px;
  height: 1.5px;
  background: var(--portal-ink-faint);
  box-shadow: 0 4px 0 var(--portal-ink-faint), 0 8px 0 var(--portal-ink-faint);
}

/* The link holds its corner. The meta beside it carries a journal name,
   and "Asia-Pacific Journal of Economics, Culture & Society" was long
   enough to push the link onto a line of its own on some cards and not
   others, so two cards in a list were built differently. */
body.portal .desk-card-foot {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 4px;
}

body.portal .desk-card-meta {
  min-width: 0;
  font-size: 0.86rem;
  color: var(--portal-ink-faint);
}

body.portal .desk-card-go {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  /* Below this the meta has nowhere to go, so the link takes its own line
     on every card rather than on the ones with the longer journal. */
  body.portal .desk-card-foot {
    flex-wrap: wrap;
    gap: 10px;
  }
}

body.portal .desk-card-go {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--portal-blue);
}

body.portal .desk-card-link:hover .desk-card-go {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  body.portal .overview-main.overview-card {
    padding: 26px 20px 28px;
  }

  body.portal .overview-heading {
    font-size: 1.7rem;
  }

  body.portal .desk-card-link {
    padding: 20px 18px;
  }
}

/* The link to an invitation whose letter did not go. It appears inside the
   notice under the invite form, so the editor's next move -- send this to
   them yourself -- is where the failure is reported rather than somewhere
   they have to go and look for it. */
body.portal .forum-fallback-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body.portal .forum-fallback-link input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.84rem;
  font-family: inherit;
  color: var(--portal-ink);
  background: #fff;
  border: 1px solid var(--portal-line);
  border-radius: var(--radius);
}

body.portal .forum-fallback-link button {
  flex: 0 0 auto;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  background: var(--portal-blue);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

/* A decision that is not open yet is drawn as not open, rather than left
   live and refused after the editor has written the letter. */
body.portal .forum-decide .button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* The files, under the two downloads they belong with. A <details> rather
   than another tab: the reason anyone opens it is to find one file, and a
   tab makes them leave the page they were reading to do it. */
body.portal .forum-files {
  margin-top: 2px;
}

body.portal .forum-action--toggle {
  list-style: none;
  cursor: pointer;
}

body.portal .forum-action--toggle::-webkit-details-marker {
  display: none;
}

body.portal .forum-files[open] .forum-action--toggle {
  color: var(--portal-ink);
}

body.portal .forum-files-list {
  margin: 4px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
}

body.portal .forum-files-list li {
  padding: 7px 0;
  border-top: 1px solid var(--portal-line-soft);
}

body.portal .forum-files-list a {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  word-break: break-word;
}

body.portal .forum-files-what {
  display: block;
  font-size: 0.8rem;
  color: var(--portal-ink-faint);
}

/* The reviewer's optional written report. The file already attached is
   named above the picker, because "choosing another replaces it" is only
   useful if you can see what is there now. */
body.portal .forum-attached {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

body.portal .forum-attached a {
  font-weight: 700;
  word-break: break-word;
}

body.portal .forum-attached span {
  display: block;
  font-size: 0.82rem;
  color: var(--portal-ink-faint);
}

body.portal .forum-decide input[type="file"] {
  max-width: 100%;
  font-size: 0.88rem;
}

/* The author's note to the editor, in the history beside the revision it
   came with. Set apart, because it is their words rather than ours. */
body.portal .forum-history-note {
  display: block;
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--fr-line);
  font-weight: 400;
  color: var(--fr-ink-soft);
  white-space: pre-wrap;
}

/* ------------------------------------------- a desk that does not run on

   Four manuscripts in a group is a column four screens tall, and the group
   below it is then somewhere nobody scrolls to. Past three, the group turns
   into a row you push sideways: the cards keep their width, the rest of the
   page keeps its length, and both groups stay on screen at once.

   A real scroll rather than a carousel with buttons. Two fingers on a
   trackpad, a swipe on a phone and shift+wheel all already do this, and a
   pair of arrows would be a second way to do what the surface does.
   ------------------------------------------------------------------ */

/* A scroll container can only scroll if something upstream bounds it. A
   grid or flex item is min-width: auto by default, which is min-content, so
   a wide track pushes its panel open instead of scrolling inside it -- the
   cards spilled out under the sidebar and nothing scrolled at all. */
body.portal .overview-main,
body.portal .overview-block,
body.portal #desk-list,
body.portal .desk-group {
  min-width: 0;
}

body.portal .desk-group-list {
  display: contents;
}

body.portal .desk-group.is-wide .desk-group-list {
  display: grid;
  grid-auto-flow: column;
  /* A fixed width, not a minmax: with a 0 minimum the columns collapse to
     fit the track instead of overflowing it, and five cards share one screen
     width at about sixty pixels each. */
  grid-auto-columns: 330px;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Room for the shadow a card lifts on hover, which a clipped overflow
     would otherwise cut off along the top and bottom. */
  margin: -6px -4px;
  padding: 6px 4px;
  /* Paged with the arrows above, so the bar itself is not drawn. Dragging
     and two-finger swiping still work; this only takes away the furniture. */
  scrollbar-width: none;
}

body.portal .desk-group.is-wide .desk-group-list::-webkit-scrollbar {
  display: none;
}

body.portal .desk-group.is-wide .desk-card {
  scroll-snap-align: start;
}

body.portal .desk-group.is-wide .desk-card + .desk-card {
  margin-top: 0;
}

/* The cards are side by side, so each one is as tall as the tallest. */
body.portal .desk-group.is-wide .desk-card-link {
  height: 100%;
  align-content: start;
}

/* At this width the meta and the link do not sit on one line. */
body.portal .desk-group.is-wide .desk-card-foot {
  flex-wrap: wrap;
  gap: 8px;
}

/* The heading and its pager on one line. */
body.portal .desk-group-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

body.portal .desk-group-bar .desk-group-head {
  margin-bottom: 0;
}

body.portal .desk-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* How many there are, since you can no longer see them all at once. */
body.portal .desk-pager-count {
  margin-right: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--portal-ink-faint);
}

body.portal .desk-page {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--portal-blue);
  background: #fff;
  border: 1px solid var(--portal-line);
  border-radius: 50%;
  cursor: pointer;
}

body.portal .desk-page:hover:not(:disabled) {
  border-color: var(--portal-blue);
}

/* Dim at the end of the row rather than gone, so the row does not change
   width as you reach the edge of it. */
body.portal .desk-page:disabled {
  opacity: 0.3;
  cursor: default;
}

/* The filter row scrolls too, rather than wrapping onto a second line and
   pushing the list down. */
body.portal .desk-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

body.portal .desk-filters::-webkit-scrollbar {
  display: none;
}

body.portal .desk-filter {
  flex: 0 0 auto;
}

/* The files chosen for a revision, named under the zone they were dropped
   into, so "one .docx and one .pdf" is something you can see rather than
   something you have to remember. */
body.portal .drop-file-what {
  font-weight: 700;
}

body.portal .drop-file-name {
  margin-left: 8px;
  color: var(--portal-ink-soft);
  word-break: break-word;
}

body.portal .forum .drop-zone {
  background: #fff;
  border: 1px dashed var(--fr-line);
}

body.portal .forum .drop-zone.is-over {
  border-color: var(--fr-link);
  background: var(--fr-field);
}

body.portal .forum .drop-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

body.portal .forum .drop-list li {
  padding: 5px 0;
}

/* ------------------------------------------------- the interactive review

   The exchange between an author and one reviewer, drawn the same way for
   both of them. Whose turn it was reads off the alignment and the label, not
   off a colour: this is two people working a point out, and colour-coding
   them as sides makes it look like an argument with teams.
   ---------------------------------------------------------------------- */

body.portal .forum-discussion {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--fr-line);
}

body.portal .forum-turns {
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

body.portal .forum-turn {
  padding: 12px 16px;
  background: var(--fr-field);
  border-left: 3px solid var(--fr-line-soft);
}

/* Yours sits a little in from theirs, so a long exchange can be read as a
   back-and-forth without reading every name. */
body.portal .forum-turn.is-mine {
  margin-left: 28px;
  border-left-color: var(--fr-rail);
}

body.portal .forum-turn.is-empty {
  background: none;
  border-left-color: transparent;
  padding-left: 0;
  color: var(--fr-ink-soft);
}

body.portal .forum-turn-who {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fr-ink);
}

body.portal .forum-turn-who span {
  margin-left: 10px;
  font-weight: 400;
  color: var(--fr-ink-soft);
}

body.portal .forum-turn-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--fr-ink);
  white-space: pre-wrap;
}

body.portal .forum-turn-file {
  margin: 8px 0 0;
  font-size: 0.88rem;
}

body.portal .forum-discussion input[type="file"] {
  max-width: 100%;
  font-size: 0.88rem;
}