/* =====================================================================
   JRS GLOBAL CLASSES  —  the "classes" layer of the Bricks System
   Built entirely on tokens-jrs.css. Load AFTER it.

   This REPLACES framework/classes.css for JRS. The generic file could not
   be used as-is: it references --h5, --h6, --radius and --radius-s, none
   of which exist in the JRS token set (the scale stops at h4, and the
   2026-08-27 decisions were square corners and no shadows).

   Every class below resolves only to tokens that actually exist.
   ===================================================================== */

/* ---------------------------------------------------------------
   LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.section {
  padding-block: var(--section-padding-block);
  padding-inline: var(--gutter);
}
.section.is-grey  { background: var(--surface); border-block: var(--section-border); }
.section.is-black { background: var(--black); }

.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
}
.container.is-wide   { max-width: var(--width-wide); }
.container.is-narrow { max-width: var(--width-narrow); }

.flow {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.flow.is-tight { gap: var(--space-s); }
.flow.is-loose { gap: var(--space-l); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

/* ---------------------------------------------------------------
   GRIDS
   --------------------------------------------------------------- */
.grid { display: grid; gap: var(--grid-gap); }
.grid-auto {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: var(--grid-auto-m);
}
.grid-auto.is-small { grid-template-columns: var(--grid-auto-s); }
.grid-auto.is-large { grid-template-columns: var(--grid-auto-l); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(min(100%, 16rem), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(min(100%, 14rem), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(min(100%, 12rem), 1fr)); }

/* ---------------------------------------------------------------
   THE LINE LADDER  —  the three treatments KEPT on 2026-08-27
   (A column rules · C green section stub · D pull-quote rule).
   The heading-rule-to-margin treatment and rules-on-black were DROPPED:
   on black, bands separate with SPACE, never lines.
   --------------------------------------------------------------- */

/* A — column rules. grid + gap:0 + padding INSIDE each cell, so the rule
   runs the full row height. Put .rule-columns on the grid. */
.rule-columns {
  display: grid;
  gap: 0;
}
.rule-columns > * {
  padding-inline: var(--space-m);
  border-right: var(--rule-structural);
}
.rule-columns > *:first-child { padding-left: 0; }
.rule-columns > *:last-child  { padding-right: 0; border-right: 0; }

/* C — the 56x3 green stub that opens a section. The one treatment that is
   distinctively JRS rather than borrowed. */
.section-stub::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--brand);
  margin-bottom: var(--space-s);
}

/* D — pull quotes ONLY. Not cards, callouts or notices. */
.pullquote {
  border-left: var(--rule-accent);
  padding-left: var(--space-m);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
}

/* ---------------------------------------------------------------
   BOXES  —  "a series gets rules, a standalone thing gets a box."
   Square corners, no shadow.
   --------------------------------------------------------------- */
.box {
  padding: var(--space-m);
  border-radius: var(--box-radius);
}
.box.is-quiet  { background: var(--white); border: var(--box-quiet); }
.box.is-filled { background: var(--surface); border: var(--box-filled); }

/* Card hover: 3px lift + border to black, on focus-within too, since the
   whole card is one link. Deliberately NO shadow. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  padding: var(--space-m);
  background: var(--white);
  border: var(--box-quiet);
  border-radius: var(--box-radius);
  transition: transform var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease);
}
.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  border-color: var(--black);
}

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

.clickable-parent { position: relative; }
.clickable-parent a:not(.stays-inline)::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------------------------------------------------------------
   TYPE UTILITIES  —  the JRS scale stops at h4.
   Below it: lead / body / meta / micro.
   --------------------------------------------------------------- */
.h1-look { font-size: var(--h1); line-height: var(--lh-h1); }
.h2-look { font-size: var(--h2); line-height: var(--lh-h2); }
.h3-look { font-size: var(--h3); line-height: var(--lh-h3); }
.h4-look { font-size: var(--h4); line-height: var(--lh-h4); }
.lead    { font-size: var(--text-lead);  line-height: var(--lh-lead); }
.meta    { font-size: var(--text-meta);  line-height: var(--lh-meta); color: var(--text-mute); }
.micro   { font-size: var(--text-micro); line-height: var(--lh-micro); }

/* The accent/eyebrow role that REPLACED Montserrat: Kumbh Sans 700,
   uppercase, tracked. */
.label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.text-center { text-align: center; }
.text-mute   { color: var(--text-mute); }
.measure     { max-width: 65ch; }

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

/* ---------------------------------------------------------------
   MEDIA  —  square corners; cover art is portrait 2:3.
   --------------------------------------------------------------- */
.media { display: block; width: 100%; height: auto; }
.media.is-wide   { aspect-ratio: var(--ratio-wide); object-fit: cover; }
.media.is-cover  { aspect-ratio: var(--ratio-cover); object-fit: cover; }
.media.is-square { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------------------------------------------------------------
   BUTTONS  —  hover is ONE move everywhere: fill deepens to
   --brand-deep and the label flips to white.
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.btn.is-small { padding: var(--btn-padding-sm); font-size: var(--btn-size-sm); }

.btn.is-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid var(--btn-primary-bg);
}
.btn.is-primary:hover,
.btn.is-primary:focus-visible {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg-hover);
  border-color: var(--btn-primary-bg-hover);
}

.btn.is-secondary {
  background: transparent;
  color: var(--btn-secondary-fg);
  border: var(--btn-secondary-border);
}
.btn.is-secondary:hover,
.btn.is-secondary:focus-visible {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg-hover);
  border-color: var(--btn-primary-bg-hover);
}

.btn.is-tertiary {
  background: transparent;
  border: 0;
  padding-inline: 0;
  color: var(--primary);
}
.btn.is-tertiary:hover,
.btn.is-tertiary:focus-visible { color: var(--primary-hover); }

.btn[disabled], .btn.is-disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  border-color: var(--btn-disabled-bg);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------
   ON BLACK  —  put .on-black on a black band. --brand becomes the
   HEADLINE colour (9.86:1); --brand-deep FAILS here (3.54) and must
   never be used for text on this ground.
   --------------------------------------------------------------- */
.on-black {
  background: var(--black);
  color: var(--on-black-text);
}
.on-black h1, .on-black h2, .on-black h3, .on-black h4 { color: var(--on-black-heading); }
.on-black .text-mute, .on-black .meta { color: var(--on-black-mute); }
.on-black a { color: var(--on-black-text); }
.on-black a:hover { color: var(--brand); }
.on-black .btn.is-secondary { color: var(--brand); border-color: var(--brand); }

/* ---------------------------------------------------------------
   MOTION  —  one entrance, top of page only. NEVER scroll-triggered
   on content. Always honour reduced motion.
   --------------------------------------------------------------- */
.entrance {
  animation: jrs-rise 500ms var(--motion-ease) both;
}
@keyframes jrs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance { animation: none; }
  .card { transition: border-color var(--motion-fast) var(--motion-ease); }
  .card:hover, .card:focus-within { transform: none; }
}

/* ---------------------------------------------------------------
   HEADER CHROME
   --------------------------------------------------------------- */

/* ⚠ Nav items WITH a submenu wrap their <a> in .brx-submenu-toggle, so
   `.bricks-nav-menu > li > a` alone styles only the items WITHOUT children —
   which is exactly how About/Journal/Events ended up looking different from
   Home/Contact. Both paths must be styled together. */
.jrs-header-nav .bricks-nav-menu > li > a,
.jrs-header-nav .bricks-nav-menu > li > .brx-submenu-toggle > a,
.jrs-header-nav .bricks-nav-menu > li > .brx-submenu-toggle > button {
  font-size: var(--jrs-nav-size);
  font-weight: var(--fw-head);
  font-family: var(--font-body);
  color: var(--ink);
  padding: 0;
  white-space: nowrap;
  background: none;
  border: 0;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-header-nav .bricks-nav-menu > li > a:hover,
.jrs-header-nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover,
.jrs-header-nav .bricks-nav-menu > li > .brx-submenu-toggle:hover > a,
.jrs-header-nav .bricks-nav-menu > li > .brx-submenu-toggle:hover > button {
  color: var(--brand-deep);
}
/* The submenu caret sits with its label, not adrift. */
.jrs-header-nav .bricks-nav-menu > li > .brx-submenu-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jrs-header-nav .bricks-nav-menu { align-items: center; column-gap: var(--jrs-nav-gap); }
/* Current page gets the JRS stub treatment, not a colour change. */
.jrs-header-nav .bricks-nav-menu > li.current-menu-item > a,
.jrs-header-nav .bricks-nav-menu > li.current-menu-parent > .brx-submenu-toggle > a {
  color: var(--brand-deep);
  box-shadow: inset 0 -3px 0 0 var(--brand);
}

/* STICKY / CONDENSED HEADER.
   On scroll Bricks adds .scrolling to #brx-header. The green utility bar goes, the
   main bar condenses, and search + account fall back to icon buttons so nothing
   becomes unreachable. One 300ms move, per the motion spec. */
/* Only present once the header condenses. The element carries no typed _display,
   because Bricks emits #brxe-* CSS for that which outranks a class rule. */
.jrs-header-icons { display: none; align-items: center; align-self: center; }

.jrs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  width: 40px;
  height: 40px;
  border: var(--box-quiet);
  color: var(--ink);
  flex-shrink: 0;
  transition: border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-icon-btn:hover { border-color: var(--black); color: var(--brand-deep); }

/* Sizes come from VARIABLES the scrolled state redefines, rather than from
   competing per-element rules. Bricks emits its own #brxe-* CSS for element
   settings, and an ID-scoped override of it did not win even with !important;
   an inherited custom property sidesteps the fight entirely. */
/* ⚠ The chrome gutter must be GLOBAL, not scoped to the header — the footer uses it
   too, and while it lived inside #brx-header the footer resolved it to nothing and lost
   its side margins entirely. Anything both header and footer use belongs on :root.
   Scales: 20px at 375, ~40px at 991, ~58px at 1440, capped at 88px on very wide screens. */
:root {
  --jrs-gutter: clamp(20px, 4vw, 88px);
}

#brx-header {
  --jrs-logo-h: 52px;
  /* Nav a touch larger than meta, and tighter between items. Both scale down
     with the viewport so the 992-1279 band does not crush. */
  --jrs-nav-size: clamp(15px, 0.28vw + 13.9px, 17px);
  --jrs-nav-gap:  clamp(12px, 1.1vw, 22px);
}
#brx-header.scrolling { --jrs-logo-h: 38px; }

#brx-header.scrolling .jrs-header-icons { display: flex !important; }
#brx-header.scrolling #brxe-jrshdra { display: none !important; }

#brxe-jrshdrb { transition: padding var(--motion-base) var(--motion-ease); }
#brxe-jrslogo { transition: height var(--motion-base) var(--motion-ease); }

@media (prefers-reduced-motion: reduce) {
  #brxe-jrshdrb, #brxe-jrslogo { transition: none; }
}

/* Auth links — output by {jrs_auth_links} (see jrs-bricks-dynamic-tags.php).
   On the green utility bar text must be BLACK (--on-brand): 9.86:1. */
.jrs-auth { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-meta); color: var(--on-brand); }
.jrs-auth__prefix { color: var(--on-brand); }
.jrs-auth__sep { color: var(--on-brand); opacity: 0.5; }
.jrs-auth__link {
  color: var(--on-brand);
  font-weight: var(--fw-head);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-auth__link:hover { color: var(--brand-deep); }

/* JetSearch sits on the green bar: white field, square corners, black submit. */
.jrs-header-search .jet-ajax-search__form { border-radius: 0; }
.jrs-header-search .jet-ajax-search__field,
.jrs-header-search .jet-ajax-search__categories-select {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  border-radius: 0;
}
.jrs-header-search .jet-ajax-search__submit {
  background: var(--black);
  color: var(--white);
  border-radius: 0;
  border: 0;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.jrs-header-search .jet-ajax-search__submit:hover { background: var(--brand-deep); }


/* ---------------------------------------------------------------
   ICON GLYPHS
   ⚠ TWO Bricks quirks combine here:
   1. Bricks' Themify icon FONT is not loaded, so <i class="ti-*"> renders 0x0
      and empty — the original "black square" on the JetSearch submit button.
   2. The Bricks icon ELEMENT *is* the <i>, so a class on it styles the same
      node as the glyph. Masking that node would clip its own border away.
   So: the glyph is drawn on ::before, and the element stays the box.
   --------------------------------------------------------------- */
:root {
  --jrs-ico-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='9'%20r='6.25'/%3E%3Cpath%20d='M13.5%2013.5L17.5%2017.5'/%3E%3C/svg%3E");
  --jrs-ico-user:   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='10'%20cy='6.75'%20r='3.25'/%3E%3Cpath%20d='M4%2016.5c0-2.9%202.7-4.75%206-4.75s6%201.85%206%204.75'/%3E%3C/svg%3E");
  --jrs-ico-close: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%3E%3Cpath%20d='M4%204L16%2016M16%204L4%2016'/%3E%3C/svg%3E");
}

/* Glyph-only case (e.g. the <i> inside JetSearch's submit button). */
i.ti-search:not(.jrs-icon-btn),
i.ti-user:not(.jrs-icon-btn) {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
i.ti-search:not(.jrs-icon-btn) { -webkit-mask-image: var(--jrs-ico-search); mask-image: var(--jrs-ico-search); }
i.ti-user:not(.jrs-icon-btn)   { -webkit-mask-image: var(--jrs-ico-user);   mask-image: var(--jrs-ico-user); }

/* Box + glyph case: the icon element doubles as the button. */
.jrs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: var(--box-quiet);
  color: var(--ink);
  line-height: 1;
  transition: border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-icon-btn:hover { border-color: var(--black); color: var(--brand-deep); }
.jrs-icon-btn::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.jrs-icon-btn.ti-search::before { -webkit-mask-image: var(--jrs-ico-search); mask-image: var(--jrs-ico-search); }
.jrs-icon-btn.ti-user::before   { -webkit-mask-image: var(--jrs-ico-user);   mask-image: var(--jrs-ico-user); }

/* The JetSearch submit sits on black, so its glyph is white. */
.jrs-header-search .jet-ajax-search__submit { color: var(--white); }
.jrs-header-search .jet-ajax-search__submit i { background-color: var(--white); }
.jrs-header-search .jet-ajax-search__submit-icon { display: inline-flex; align-items: center; justify-content: center; }


/* ---------------------------------------------------------------
   FOOTER
   Black band — the page's one permitted interruption besides a hero.
   Columns separate with SPACE, never rules (the 2026-08-27 decision:
   on black, lines read as scratches).
   --------------------------------------------------------------- */
/* ===============================================================
   FOOTER CALL TO ACTION  (2026-09-09, after mumblebydesign.com)
   A band above the footer proper, carrying the one thing the journal asks
   of a reader. It is green so the page closes on the colour it opens with,
   and because the submit invitation lost its home when the header button
   became the link to the Network.
   =============================================================== */
.jrs-footcta {
  background: var(--brand);
  border-top: var(--section-border);
  padding: var(--space-l) var(--jrs-gutter);
}
.jrs-footcta__in {
  max-width: var(--width-content);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
/* The text takes the slack and the button sits beside it. `flex-basis: auto`
   resolved to the block's full 100%, and under flex-wrap items wrap rather
   than shrink, so the button dropped to its own line. A real basis fixes it,
   and the wrap still does its job on a narrow screen. */
.jrs-footcta__in > *:first-child { flex: 1 1 30rem; min-width: 0; max-width: 64ch; }
.jrs-footcta .jrs-btn { flex: 0 0 auto; align-self: center; }

.jrs-footcta__title {
  font-size: var(--h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-head);
  color: var(--on-brand);
  margin: 0 0 4px;
  padding-top: 0;
  border-top: 0;
}
.jrs-footcta__note {
  font-size: var(--text-meta);
  line-height: 1.5;
  color: var(--on-brand);
  margin: 0;
  max-width: 58ch;
}

/* the direct routes under the ISSN */
.jrs-foot-contact p { margin: 0 0 4px; font-size: var(--text-meta); }
.jrs-foot-contact p:last-child { margin-bottom: 0; }
.jrs-foot-contact a { color: var(--brand); text-decoration: none; }
.jrs-foot-contact a:hover { color: var(--white); }
.jrs-foot-net::after { content: " \2197"; }

.jrs-foot-label { color: var(--brand); }

.jrs-foot-punch {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--on-black-text);
  margin: 0;
}

.jrs-foot-issn,
.jrs-foot-fine {
  font-size: var(--text-micro);
  line-height: 1.9;
  color: var(--on-black-mute);
}

/* Footer menus render vertically; the mobile toggle is suppressed by setting an
   impossible breakpoint on the element, so these stay plain lists everywhere. */
.jrs-foot-nav .bricks-nav-menu {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 12px;
  /* The <ul> carries default list padding, which indented every link relative to
     the column heading above it. Zero it so label and links share a left edge. */
  margin: 0;
  padding: 0;
  list-style: none;
}
.jrs-foot-nav, .jrs-foot-nav .bricks-nav-menu-wrapper { margin: 0; padding: 0; }
.jrs-foot-nav .bricks-nav-menu > li { margin: 0; padding: 0; }
.jrs-foot-nav .bricks-nav-menu > li { width: 100%; }
.jrs-foot-nav .bricks-nav-menu > li > a,
.jrs-foot-nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--on-black-text);
  padding: 0;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-foot-nav .bricks-nav-menu > li > a:hover,
.jrs-foot-nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover { color: var(--brand); }
.jrs-foot-nav .bricks-mobile-menu-toggle,
.jrs-foot-nav .bricks-mobile-menu-wrapper,
.jrs-foot-nav .bricks-mobile-menu-overlay { display: none !important; }

/* Newsletter — deliberately small. Form 10776 ("Email opt-in") renders name +
   email + submit, so it is compacted rather than cut: shorter controls, tight
   gaps, submit inline. The name field is left in place — whether the mailing
   list needs a name is an editorial call, not a layout one. */
.jrs-foot-news { max-width: 340px; }
.jrs-foot-form .jet-form-builder { row-gap: 8px; }
/* The Bricks form element is a flex item that does not stretch on its own. */
.jrs-foot-form { width: 100%; align-self: stretch; }
/* Centre the Subscribe label vertically — the button is a flex box, not a text box. */
.jrs-foot-form .jet-form-builder__submit,
.jrs-foot-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------
   LOGIN POPUP (Bricks template 15880 — replaces Elementor popup 10841)
   Right-hand panel on black, mirroring the live popup's shape.
   --------------------------------------------------------------- */
.jrs-login-title { color: var(--brand); margin: 0; }
.jrs-login-reset { font-size: var(--text-meta); line-height: 1.7; color: var(--on-black-mute); margin: 0; }
.jrs-login-reset a { color: var(--on-black-text); text-decoration: underline; text-underline-offset: 3px; }
.jrs-login-reset a:hover { color: var(--brand); }

/* Labels are white and sit clear of their field. One spacing scale across the
   whole panel: 8px label-to-field, 20px between fields, 28px between blocks. */
.jrs-login-form label {
  display: block;
  color: var(--white);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  margin-bottom: 8px;
  line-height: 1.4;
}
.jrs-login-form .jet-form-builder-row,
.jrs-login-form .jet-form-builder__field-wrap { margin-bottom: 0; }
.jrs-login-form .jet-form-builder { row-gap: 20px; }
.jrs-login-form p { color: var(--on-black-text); font-size: var(--text-meta); line-height: 1.7; margin: 0; }
.jrs-login-form .has-white-color { color: var(--white) !important; }

/* --- The two login methods, kept visually separate ---------------------
   The magic-link form used to sit INSIDE JetFormBuilder's <form>. That is
   invalid HTML: the parser drops the nested <form>, so the magic button
   ended up submitting the PASSWORD form. Each method is now its own
   section, with an "or" between them. */
.jrs-login-method { width: 100%; }
.jrs-login-method__title {
  color: var(--white);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* "or" divider — a rule either side of the word. */
.jrs-login-or {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--on-black-mute);
  font-size: var(--text-meta);
}
.jrs-login-or::before,
.jrs-login-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

/* Magic-link form. Every contested rule below is ID-scoped on purpose: the
   plugin's own shortcode-style.css uses #magic-login-shortcode selectors
   (1,0,x), which a plain class rule cannot outrank. */
.jrs-login-magic #magic-login-shortcode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;      /* plugin hardcodes 320px */
  margin: 0;        /* plugin uses margin:auto */
}
.jrs-login-magic #magic-login-shortcode .magic-login-inline-login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.jrs-login-magic #magic-login-shortcode label {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--white);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  line-height: 1.4;
}
.jrs-login-magic #magic-login-shortcode .input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  margin: 0;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink);
}
.jrs-login-magic #magic-login-shortcode .magic-login-submit {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  margin: 4px 0 0;
  box-sizing: border-box;
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-login-magic #magic-login-shortcode .magic-login-submit:hover {
  background: var(--brand-deep);
  color: var(--white);
}
/* The plugin renders messages as a WHITE admin notice with a blue rule —
   unreadable on the black panel. Restyle as quiet text with a brand rule. */
.jrs-login-magic #magic-login-shortcode .message,
.jrs-login-magic #magic-login-shortcode .success,
.jrs-login-magic #magic-login-shortcode #login_error {
  background: none;
  border: 0;
  border-left: 3px solid var(--brand);
  margin: 0;
  padding: 0 0 0 12px;
  color: var(--on-black-mute);
  font-size: var(--text-meta);
  line-height: 1.7;
}
.jrs-login-magic #magic-login-shortcode .success { border-left-color: var(--brand); color: var(--on-black-text); }
.jrs-login-magic #magic-login-shortcode #login_error { border-left-color: var(--danger); color: var(--white); }
.jrs-login-magic .magic-login-form-header:empty { display: none; }
.jrs-login-magic .magic-login-spinner-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--on-black-text);
  font-size: var(--text-meta);
}

/* Remember-me reads as a row, not a stray box. */
.jrs-login-form input[type="checkbox"] { width: auto; height: auto; margin-right: 8px; }

/* Slide in from the right, matching the live popup's fadeInRight. */
.brxe-popup-15880 .brx-popup-content { animation: jrs-slide-in-right var(--motion-base) var(--motion-ease) both; }
@keyframes jrs-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brxe-popup-15880 .brx-popup-content { animation: none; }
}

/* Close cross — 44px target, top right, inside the panel padding. */
.jrs-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-popup-close:hover { color: var(--brand); }
.jrs-popup-close::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--jrs-ico-close); mask-image: var(--jrs-ico-close);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
/* Two methods make the panel taller than the old single form — let it scroll
   rather than clip on short desktop viewports. */
.brxe-popup-15880 .brx-popup-content {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* On phones the popup becomes a FULL-SCREEN sheet, like a page (Monica, 2026-08-29).
   Anchoring the CONTENT itself with position:fixed + inset:0 pins it to the viewport,
   which also sidesteps the wrapper offset that left it overhanging the right edge. */
@media (max-width: 767px) {
  .brxe-popup-15880 .brx-popup-content {
    position: fixed !important;
    inset: 0 !important;
    /* vw/vh, NOT % — the wrapper is as wide as the DOCUMENT (still inflated by the
       leftover Elementor overflow), so a percentage resolved to 534px on a 375px phone. */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 64px 24px 32px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .brxe-popup-15880 { padding: 0 !important; }
  .jrs-popup-close { top: 12px; right: 12px; }
  /* No sideways slide on a full-screen sheet — it rises instead. */
  .brxe-popup-15880 .brx-popup-content { animation-name: jrs-sheet-up; }
}
@keyframes jrs-sheet-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.jrs-login-form input[type="text"],
.jrs-login-form input[type="email"],
.jrs-login-form input[type="password"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink);
}
.jrs-login-form .jet-form-builder__submit,
.jrs-login-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  line-height: 1;
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-login-form .jet-form-builder__submit:hover,
.jrs-login-form button[type="submit"]:hover { background: var(--brand-deep); color: var(--white); }
.jrs-login-form .wp-block-columns { gap: 14px !important; margin-bottom: 0 !important; }
.jrs-login-form .jet-fb-form-block,
.jrs-login-form .jet-form-builder,
.jrs-login-form .jet-form-builder-row,
.jrs-login-form .jet-form-builder__field { width: 100%; }
.jrs-login-form .jet-form-builder { row-gap: 14px; }
.jrs-foot-form .jet-fb-form-block,
.jrs-foot-form .jet-form-builder,
.jrs-foot-form .jet-form-builder-row,
.jrs-foot-form .jet-form-builder__field { width: 100%; }
.jrs-foot-form .jet-form-builder__fields-wrap,
.jrs-foot-form .jet-form-builder__row { margin-bottom: 8px !important; }
.jrs-foot-form .jet-form-builder__field-wrap { margin: 0; }
/* Form 10776 is built with GUTENBERG columns, so its spacing comes from
   WordPress block CSS (gap:36px, margin-bottom:31.5px), not JetFormBuilder. */
.jrs-foot-form .wp-block-columns {
  gap: 8px !important;
  margin-bottom: 0 !important;
}
/* Do NOT force the columns to 100% — the form lays name and email side by side,
   which is what keeps it short. Stacking them made it taller, not smaller. */
.jrs-foot-form .jet-form-builder__field-wrap,
.jrs-foot-form .jet-form-builder-row { margin: 0; }
.jrs-foot-form input[type="email"],
.jrs-foot-form input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink);
}
.jrs-foot-form .jet-form-builder__submit,
.jrs-foot-form button[type="submit"] {
  height: 40px;
  width: 100%;
  padding: 0 20px;
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-foot-form .jet-form-builder__submit:hover,
.jrs-foot-form button[type="submit"]:hover { background: var(--brand-deep); color: var(--white); }
/* Footer newsletter (form 15878) is deliberately email + button only. The label is
   redundant beside the placeholder, and every wrapper must span the column or the
   controls sit at their intrinsic width. */
.jrs-foot-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jrs-foot-form .jet-form-builder__field-wrap,
.jrs-foot-form .jet-form-builder__fields-wrap,
.jrs-foot-form .jet-form-builder__field-template,
.jrs-foot-form .jet-form-builder-row,
.jrs-foot-form .jet-form-builder__action { width: 100%; }
.jrs-foot-form .jet-form-builder { row-gap: 8px; }
/* The Bricks form element is a flex item that does not stretch on its own. */
.jrs-foot-form { width: 100%; align-self: stretch; }
/* Centre the Subscribe label vertically — the button is a flex box, not a text box. */
.jrs-foot-form .jet-form-builder__submit,
.jrs-foot-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------
   BRICKS QUIRK FIXES
   --------------------------------------------------------------- */

/* Bricks' off-canvas overlay is wider than the viewport while closed, which
   causes horizontal scroll on phones. Found on staging 2026-08-28 at 375px:
   .bricks-mobile-menu-overlay measured 535px against a 375px viewport. */
.bricks-mobile-menu-overlay,
.bricks-mobile-menu-wrapper {
  max-width: 100vw;
}

/* Focus ring — kit 679 defined none. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* ===============================================================
   PAGE LAYOUT  —  one grid, everything aligned to its left edge
   (Monica, 2026-08-29, approved on the submissions design)

   THE RULE: every band spans the full width and carries the gutter.
   Inside it, .jrs-grid is the 1140px content grid. Wide things (icon-box
   rows, headings) fill the grid; reading text sits in .jrs-read, 720px,
   LEFT-aligned inside that grid rather than centred.

   That is why the page title, the icon panels and the body text all start
   on the same left edge — which is the whole point, and why the page title
   no longer needs a --narrow modifier.
   =============================================================== */
.jrs-band { padding: clamp(36px, 5vw, 64px) var(--jrs-gutter); }
.jrs-band--tight    { padding-top: 0; }
.jrs-band--grey     { background: var(--grey); border-block: var(--section-border); }
/* A button that leaves the site says so. The arrow is drawn here rather than
   typed into the label, so it stays out of the link's accessible name — a
   screen reader would otherwise announce "north east arrow". Used by the
   header's link to the Resistance Studies Network, which is a separate site. */
.jrs-btn--external::after {
  content: "↗";
  margin-left: 0.4em;
  font-weight: var(--fw-body);
  line-height: 1;
}

.jrs-band--black    { background: var(--black); }

/* ---------------------------------------------------------------
   TEXT ON BLACK  —  set for the BAND, not for one component.
   The band only ever set its background, so its contents inherited --ink
   (#333) from the body and a black section built from plain blocks came out
   near-invisible. The older rules below fixed this for .jrs-prose only, which
   is why it kept coming back on sections built any other way. Monica has
   reported it twice; this is the general rule, and every element that sets
   its own dark colour is corrected under it.
   --------------------------------------------------------------- */
.jrs-band--black { color: var(--on-black-text); }
.jrs-band--black h1,
.jrs-band--black h2 { color: var(--on-black-heading); }
.jrs-band--black h3,
.jrs-band--black h4,
.jrs-band--black strong,
.jrs-band--black b { color: var(--white); }
.jrs-band--black dt { color: var(--brand); }
.jrs-band--black dd { color: var(--on-black-text); }
.jrs-band--black a:not(.jrs-btn) { color: var(--brand); }
.jrs-band--black a:not(.jrs-btn):hover { color: var(--white); }
/* components whose own colour is meant for a light ground */
.jrs-band--black .jrs-pagehead__eyebrow,
.jrs-band--black .jrs-sechead__note,
.jrs-band--black .jrs-sechead__title { color: var(--brand); }
.jrs-band--black .jrs-sechead { border-bottom-color: var(--on-black-mute); }
.jrs-band--black .jrs-pagehead__stub { background: var(--brand); }
.jrs-band--hairline { border-top: var(--rule-structural); }

.jrs-grid { max-width: var(--width-content); margin-inline: auto; width: 100%; }

/* Bricks blocks are flex columns with `align-items: flex-start`, which makes
   every child SHRINK-TO-FIT instead of filling the container. That is the same
   "content crammed to the left" fault as the retired .jrs-read, one level
   deeper: the grid measured 1140 while the form inside it measured 713.
   Containers stretch their children, always. Anything that must stay its own
   size (a button) sets align-self: flex-start on itself. */
.jrs-grid,
.jrs-stack,
.jrs-cols__col,
.jrs-pagehead__inner { align-items: stretch; }

/* and nothing may burst its container */
.jrs-grid > *,
.jrs-stack > *,
.jrs-cols__col > * { max-width: 100%; }

/* RETIRED: .jrs-read (720px). It was nested inside .jrs-grid, so text only ever
   used the left 720 of the 1140 grid and every page hugged the left edge with
   420px of dead space (Monica, 2026-08-29). Content now fills the block it sits
   in. Where a narrower measure is wanted, split the section into .jrs-cols —
   two real columns — rather than shrinking one and leaving a hole. */

/* ===============================================================
   THE SPACING RULE  —  one system, applied everywhere.
   (Monica: "that should also be saved as a variable or class and be
   ALWAYS consistent instead of my saying all the time")

   Every stacked block is a .jrs-stack. Siblings get their space from the
   stack, never from a margin hand-written on the element — so nothing can
   be forgotten, and nothing has to be asked for twice.

   Override per element by setting --flow-space on the element that should
   move, not by adding a margin.
   =============================================================== */
.jrs-stack > * + * { margin-top: var(--flow-space, var(--stack)); }

/* A heading belongs to the thing under it, so it sits closer. */
.jrs-stack > .brxe-heading { margin-bottom: 0; }
.jrs-stack > .brxe-heading + * { --flow-space: var(--stack-tight); }

/* Things that need a clear run before them. */
.jrs-stack > .jrs-btn,
.jrs-stack > .jrs-accordion,
.jrs-stack > .jrs-boxes,
.jrs-stack > .jrs-steps { --flow-space: var(--stack-loose); }

.jrs-stack--tight { --stack: var(--space-s); }
.jrs-stack--loose { --stack: var(--space-l); }

/* ---------------------------------------------------------------
   PAGE TITLE  —  the reusable page header (direction A)
   Bricks section template "JRS — Page title". Insert it at the top of any
   page; the words are edited per page, the LOOK lives here, so changing
   this block changes every page title on the site at once.

     section.jrs-pagehead
       └ block.jrs-pagehead__inner          (the 1140 grid)
           ├ div.jrs-pagehead__stub         (optional)
           ├ p.jrs-pagehead__eyebrow        (optional)
           ├ h1.jrs-pagehead__title         ({post_title})
           └ p.jrs-pagehead__standfirst     (optional)
   --------------------------------------------------------------- */
.jrs-pagehead {
  background: var(--grey);
  border-bottom: var(--section-border);
  padding: clamp(36px, 5vw, 64px) var(--jrs-gutter);
}
.jrs-pagehead__inner { max-width: var(--width-content); margin-inline: auto; width: 100%; }
.jrs-pagehead__stub { width: 56px; height: 3px; background: var(--brand); margin-bottom: 20px; }
.jrs-pagehead__eyebrow {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin: 0 0 14px;
}
.jrs-pagehead__title {
  font-size: var(--h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.jrs-pagehead__standfirst {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 46ch;
}

/* ---------------------------------------------------------------
   PROSE  —  typography scope only. Layout comes from .jrs-read.
   Descendant selectors throughout: Bricks wraps a rich-text element in
   div.brxe-text, so a child combinator would match nothing at all.
   --------------------------------------------------------------- */
.jrs-prose p {
  font-size: var(--text-body);
  /* 1.8, not --lh-body's 1.7: the measure is the full grid now, and a longer
     line needs more leading for the eye to find the next one. */
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 1.15em;
}
.jrs-prose p:last-child { margin-bottom: 0; }
.jrs-prose h2 {
  font-size: var(--h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  color: var(--heading-section);
  margin: 0 0 0.5em;
}
.jrs-prose h3 {
  font-size: var(--h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-head);
  color: var(--ink);
  margin: 1.5em 0 0.4em;
}
.jrs-prose h4 {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--ink);
  margin: 0 0 0.4em;
}
.jrs-prose a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jrs-prose a:hover { color: var(--primary-hover); }
.jrs-prose em { font-style: italic; }
.jrs-prose strong, .jrs-prose b { font-weight: var(--fw-head); }
.jrs-prose ul, .jrs-prose ol {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ink);
  padding-left: 1.3em;
  margin: 0 0 1.15em;
}
.jrs-prose li { margin-bottom: 0.4em; }
.jrs-prose blockquote {
  border-left: var(--rule-accent);
  padding-left: var(--space-s);
  margin: 1.6em 0;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
}

/* On the black band the prose inverts. --brand is the only green readable
   there (9.86:1); --brand-deep fails on black, so links take --brand. */
.jrs-band--black .jrs-prose p,
.jrs-band--black .jrs-prose li { color: var(--on-black-text); }
.jrs-band--black .jrs-prose h2 { color: var(--brand); }
.jrs-band--black .jrs-prose h3,
.jrs-band--black .jrs-prose h4 { color: var(--white); }
.jrs-band--black .jrs-prose a { color: var(--brand); }

/* ---------------------------------------------------------------
   ICON-BOX ROW  —  Bricks `icon-box` widgets in a grid, separated by the
   line ladder's column rules rather than boxed. The rules run the full row
   height because the gap is 0 and the padding sits INSIDE each cell.
   --------------------------------------------------------------- */
.jrs-boxes {
  display: grid;
  gap: 0;
  grid-template-columns: var(--grid-auto-s);
  border-top: var(--rule-structural);
}
.jrs-boxes > * {
  padding: 26px var(--space-m) 26px 0;
  border-right: var(--rule-structural);
}
.jrs-boxes > *:last-child { border-right: 0; }
.jrs-boxes > * + * { padding-left: var(--space-m); }

.jrs-boxes .brxe-icon-box svg,
.jrs-boxes .brxe-icon-box i {
  width: 26px;
  height: 26px;
  color: var(--brand-deep);
}
.jrs-boxes .brxe-icon-box h3,
.jrs-boxes .brxe-icon-box h4 {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--ink);
  margin: 0 0 0.4em;
}
.jrs-boxes .brxe-icon-box p {
  font-size: var(--text-meta);
  line-height: 1.65;
  color: var(--neutral-600);
  margin: 0;
}
/* On grey the rules darken to match the band's own edge. */
.jrs-band--grey .jrs-boxes,
.jrs-band--grey .jrs-boxes > * { border-color: var(--neutral-400); }

/* ---------------------------------------------------------------
   PROCESS STEPS  —  a numbered sequence down a rule.
   There is NO timeline element in Bricks, and JetElements (which supplied
   jet-timeline on the Elementor site) ships no Bricks widgets at all — so
   this is built from the line ladder instead. The numbering is meaningful:
   these are real stages and the order is the information.
   Saved as the section template "JRS — Process steps".
   --------------------------------------------------------------- */
.jrs-steps { border-left: var(--rule-structural); }
.jrs-steps__item { position: relative; padding: 0 0 var(--space-l) var(--space-m); }
.jrs-steps__item:last-child { padding-bottom: 0; }
.jrs-steps__num {
  position: absolute;
  left: -13px;
  top: 2px;
  width: 26px;
  height: 26px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--text-meta);
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jrs-steps__meta {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin: 0 0 6px;
}
.jrs-steps__title {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--ink);
  margin: 0 0 0.4em;
}
.jrs-steps__text {
  font-size: var(--text-meta);
  line-height: var(--lh-body);
  color: var(--neutral-600);
  margin: 0;
}

/* ---------------------------------------------------------------
   TABLE OF CONTENTS  —  the Bricks `post-toc` element, boxed.
   "A series gets rules, a standalone thing gets a box."
   --------------------------------------------------------------- */
.jrs-toc {
  border: var(--box-quiet);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
}
.jrs-toc__label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin: 0 0 12px;
}
.jrs-toc .brxe-post-toc ol,
.jrs-toc .brxe-post-toc ul {
  columns: 2;
  column-gap: var(--space-l);
  margin: 0;
  padding-left: 1.2em;
}
.jrs-toc .brxe-post-toc li {
  break-inside: avoid;
  margin-bottom: 0.35em;
  font-size: var(--text-meta);
}
.jrs-toc .brxe-post-toc a { color: var(--brand-deep); text-decoration: none; }
.jrs-toc .brxe-post-toc a:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .jrs-toc .brxe-post-toc ol,
  .jrs-toc .brxe-post-toc ul { columns: 1; }
}

/* Each guidance section opens with a hairline, so a run of ten subsections
   reads as a series rather than one undifferentiated wall of text. */
.jrs-guide h3 {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: var(--rule-structural);
}
.jrs-guide h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------------------------------------------------------------
   STICKY HEADER OFFSET  (Monica, 2026-08-29: "the header covers the top
   of the page")

   Bricks' headerSticky makes #brx-header position:fixed, which takes it out
   of flow entirely — it does NOT reserve its own height, so every page began
   206px underneath it. Reserve that height on the content wrapper.

   --jrs-header-h is re-measured at runtime by jrs-bricks-dynamic-tags.php,
   because the header is two-tier and its height changes with wrapping. The
   values below are the measured fallbacks, used before the script runs and if
   it never does. Measured 2026-08-29: 206 desktop / 146 tablet / 166 phone
   (phone is taller than tablet because the top bar wraps).
   --------------------------------------------------------------- */
:root {
  --jrs-header-h: 206px;
  /* THE SPACING SCALE — see .jrs-stack. Never hand-write a margin. */
  --stack:       var(--space-m);
  --stack-tight: var(--space-s);
  --stack-loose: var(--space-l);
}
@media (max-width: 991px) { :root { --jrs-header-h: 146px; } }
@media (max-width: 767px) { :root { --jrs-header-h: 166px; } }

#brx-header.brx-sticky ~ #brx-content { padding-top: var(--jrs-header-h); }

/* Anchor links must not land underneath the fixed header either. */
html { scroll-padding-top: calc(var(--jrs-header-h) + 16px); }

/* ---------------------------------------------------------------
   BUTTON  (Monica, 2026-08-29: "I want to keep a submit button instead
   of an hyperlink")

   The Bricks `button` element with style "custom" ships no background, and
   sitting inside .jrs-prose it was picking up the prose link rules — green,
   underlined, indistinguishable from body text. It needs .jrs-prose a.jrs-btn
   (0,2,1) to outrank .jrs-prose a (0,1,1); a bare .jrs-btn would lose.
   --------------------------------------------------------------- */
.jrs-btn,
.jrs-prose a.jrs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;      /* the parent is a flex column: do not stretch */
  width: auto;
  height: 48px;
  padding: 0 26px;
  background-color: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  line-height: 1;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
/* ---------------------------------------------------------------
   THE SPLIT WIPE  (Monica, 2026-09-04, after mumblebydesign.com)
   Two panels fill the button on hover: one opens left to right across the
   top half, the other right to left across the bottom half, meeting in the
   middle. 500ms, which is --motion-enter, the same duration the reference
   uses.

   Done with two background-image layers rather than ::before/::after.
   The reference uses pseudo-elements, but ours are already spoken for:
   .jrs-btn--external::after draws the outward arrow. Animating
   background-size leaves both pseudo-elements free and needs no extra
   stacking context.
   --------------------------------------------------------------- */
.jrs-btn,
.jrs-prose a.jrs-btn {
  background-image:
    linear-gradient(var(--primary-hover), var(--primary-hover)),
    linear-gradient(var(--primary-hover), var(--primary-hover));
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  background-size: 0% 50%, 0% 50%;
  transition: background-size var(--motion-enter) var(--motion-ease),
              color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease);
}
.jrs-btn:hover,
.jrs-prose a.jrs-btn:hover {
  background-size: 100% 50%, 100% 50%;
  color: var(--white);
  text-decoration: none;
}
.jrs-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Someone who has asked for less motion gets the colour, not the sweep. */
@media (prefers-reduced-motion: reduce) {
  .jrs-btn, .jrs-prose a.jrs-btn { transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
  .jrs-btn:hover, .jrs-prose a.jrs-btn:hover { background-color: var(--primary-hover); background-size: 0% 50%, 0% 50%; }
}

/* Ghost — the secondary action beside a solid one. This class was in use on
   the home page ("All issues") with no rule behind it, so it had been
   rendering as a second green button. */
.jrs-btn--ghost,
.jrs-prose a.jrs-btn--ghost {
  background-color: transparent;
  color: var(--black);
  border: var(--section-border);
  background-image:
    linear-gradient(var(--black), var(--black)),
    linear-gradient(var(--black), var(--black));
}
.jrs-btn--ghost:hover,
.jrs-prose a.jrs-btn--ghost:hover { color: var(--white); }

/* On black, the ghost inverts: white edge, white wipe, black text. */
.jrs-band--black .jrs-btn--ghost {
  color: var(--white);
  border-color: var(--white);
  background-image:
    linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white));
}
.jrs-band--black .jrs-btn--ghost:hover { color: var(--black); }
/* Compact variant — the header bar, where 48px is too heavy. */
.jrs-btn--sm,
.jrs-prose a.jrs-btn--sm {
  height: 40px;
  padding: 0 18px;
  font-size: var(--text-micro);
  letter-spacing: 0.03em;
}

/* On black the button keeps the brand green — black-on-green is 9.86:1. */
.jrs-band--black .jrs-prose a.jrs-btn { color: var(--on-brand); }

/* ---------------------------------------------------------------
   BLACK BAND -> BLACK FOOTER  (Monica: "put a white line or something to
   separate the page and the footer since both are black")
   Only where a black band is the LAST thing on the page, so it never draws
   a stray rule mid-page.
   --------------------------------------------------------------- */
#brx-content > .jrs-band--black:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------------
   ACCORDION  —  the Bricks `accordion-nested` element.
   (Monica, 2026-08-29: "all these parts are just boring text one after the
   other... what if they show the text when people want to see it?")

   Ten collapsed rows ARE the contents list, so this replaces the separate
   table of contents: every heading is visible at a glance and opens in
   place. Styled with the line ladder — rules, no boxes, no shadows.
   --------------------------------------------------------------- */
.jrs-accordion { border-top: var(--rule-structural); }
.jrs-accordion > * { border-bottom: var(--rule-structural); }

.jrs-accordion .accordion-title-wrapper {
  cursor: pointer;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-accordion .accordion-title-wrapper:hover { color: var(--brand-deep); }
.jrs-accordion .accordion-title-wrapper h3 {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: inherit;
  margin: 0;
  /* the prose rules give h3 a top border + margin; not here */
  padding-top: 0;
  border-top: 0;
}
.jrs-accordion .accordion-title-wrapper .brxe-icon {
  color: var(--brand-deep);
  flex: none;
  transition: transform var(--motion-base) var(--motion-ease);
}
/* Bricks marks the open item with .brx-open */
.jrs-accordion .brx-open .accordion-title-wrapper .brxe-icon { transform: rotate(90deg); }
.jrs-accordion .brx-open .accordion-title-wrapper h3 { color: var(--brand-deep); }

.jrs-accordion .accordion-content-wrapper { padding: 0 0 var(--space-m); }
.jrs-accordion .accordion-content-wrapper p,
.jrs-accordion .accordion-content-wrapper li {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.jrs-accordion .accordion-content-wrapper p { margin: 0 0 1.15em; }
.jrs-accordion .accordion-content-wrapper p:last-child { margin-bottom: 0; }
.jrs-accordion .accordion-content-wrapper ul,
.jrs-accordion .accordion-content-wrapper ol { padding-left: 1.3em; margin: 0 0 1.15em; }

/* The specimen: text an author should type into their manuscript literally.
   The Tables indicator and the Figures caption are both examples, not prose —
   they were reading as sentences that had lost their ending. */
.jrs-specimen {
  display: block;
  border-left: var(--rule-accent);
  background: var(--grey);
  padding: var(--space-xs) var(--space-s);
  margin: 0 0 1.15em;
  font-size: var(--text-meta);
  line-height: var(--lh-body);
  color: var(--ink);
}
.jrs-specimen__label {
  display: block;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin-bottom: 4px;
}

/* ---------------------------------------------------------------
   TWO COLUMNS  (Monica, 2026-08-29: "a lot of content is on the left only
   with much white space on the right... the submission process on the left
   and manuscript checklist on the right")

   Same mechanism as .jrs-boxes: grid, gap 0, padding INSIDE each cell, so the
   rule between them runs the full column height and reads as structure rather
   than decoration.

   Measured before building, at the width the columns actually get (~550px):
   process 1091px, checklist 1323px — about 21% apart, which reads as even.
   --------------------------------------------------------------- */
.jrs-cols {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  border-top: var(--rule-structural);
}
.jrs-cols__col {
  padding: var(--space-l) var(--space-m) 0 0;
  border-right: var(--rule-structural);
  min-width: 0;              /* let long words wrap instead of forcing overflow */
}
.jrs-cols__col:last-child { border-right: 0; padding-right: 0; }
.jrs-cols__col + .jrs-cols__col { padding-left: var(--space-m); }

/* Stacked: the vertical rule between columns becomes a horizontal one between
   stacked blocks. Without this the first column keeps a border on its right
   edge, which reads as a stray line down the middle of a phone screen. */
@media (max-width: 767px) {
  .jrs-cols__col {
    border-right: 0;
    border-bottom: var(--rule-structural);
    padding: var(--space-m) 0;
  }
  .jrs-cols__col:last-child { border-bottom: 0; padding-bottom: 0; }
  .jrs-cols__col + .jrs-cols__col { padding-left: 0; }

  /* .jrs-boxes has the same latent problem once it stacks. */
  .jrs-boxes > * {
    border-right: 0;
    border-bottom: var(--rule-structural);
    padding: var(--space-m) 0;
  }
  .jrs-boxes > *:last-child { border-bottom: 0; }
  .jrs-boxes > * + * { padding-left: 0; }
}

/* ===============================================================
   FORMS  —  JetFormBuilder, in JRS colours
   (Monica, 2026-08-29: "the form below should also follow our classes and
   var... it appears that it has greens that are not in our palette, right?
   and make sure that numbers and labels are visible, and that it also has
   buttons")

   She was right on all three:
   - JetFormBuilder ships its own accent, #34D7A1 — a bright mint that is in
     no part of the JRS palette. It appeared 12 times on the progress steps.
   - Labels, descriptions and inactive step numbers were --ink (#333) on the
     BLACK band, i.e. invisible.
   - The next-page and repeater buttons were unstyled #F0F0F0 boxes; only the
     final submit had been styled, because it was inheriting the login form's
     rules.

   Base rules assume a light ground; the .jrs-band--black block at the end
   inverts them, so .jrs-form works on either.
   =============================================================== */

/* --- fields ---------------------------------------------------- */
.jrs-form .jet-form-builder__label,
.jrs-form .jet-form-builder__label-text,
.jrs-form .jet-form-builder__field-label {
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.jrs-form .jet-form-builder__required { color: var(--brand-deep); }
.jrs-form .jet-form-builder__desc {
  font-size: var(--text-micro);
  line-height: 1.6;
  color: var(--neutral-600);
  margin-top: 6px;
}

.jrs-form input[type="text"],
.jrs-form input[type="email"],
.jrs-form input[type="url"],
.jrs-form input[type="tel"],
.jrs-form input[type="number"],
.jrs-form input[type="date"],
.jrs-form input[type="password"],
.jrs-form select,
.jrs-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
  border: var(--box-quiet);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  line-height: 1.5;
}
.jrs-form textarea { min-height: 140px; resize: vertical; }
.jrs-form select { appearance: none; padding-right: 38px; }
.jrs-form input:focus-visible,
.jrs-form select:focus-visible,
.jrs-form textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand-deep);
}
.jrs-form input::placeholder,
.jrs-form textarea::placeholder { color: var(--neutral-600); opacity: 1; }

.jrs-form .jet-form-builder-row { margin-bottom: var(--space-m); }
.jrs-form .jet-form-builder-row:last-child { margin-bottom: 0; }

/* checkbox / radio read as a row, not a stray box */
.jrs-form input[type="checkbox"],
.jrs-form input[type="radio"] {
  width: auto;
  min-height: 0;
  margin-right: 8px;
  accent-color: var(--brand-deep);
}
.jrs-form .jet-form-builder__field-label.for-checkbox,
.jrs-form .jet-form-builder__field-label.for-radio {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-weight: var(--fw-body);
  margin-bottom: 0;
}

/* --- every button in the form is a JRS button ------------------- */
.jrs-form .jet-form-builder__action-button,
.jrs-form .jet-form-builder__submit,
.jrs-form .jet-form-builder__next-page,
.jrs-form .jet-form-builder__prev-page,
.jrs-form .jet-form-builder-repeater__new,
.jrs-form .jet-form-builder-repeater__remove,
.jrs-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  padding: 0 26px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  line-height: 1;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-form .jet-form-builder__action-button:hover,
.jrs-form .jet-form-builder__submit:hover,
.jrs-form .jet-form-builder__next-page:hover,
.jrs-form .jet-form-builder__prev-page:hover,
.jrs-form .jet-form-builder-repeater__new:hover,
.jrs-form .jet-form-builder-repeater__remove:hover {
  background: var(--primary-hover);
  color: var(--white);
}
/* Secondary actions — back, add, remove — are outlined, not filled, so the
   page's primary action stays the only solid green thing on screen. */
.jrs-form .jet-form-builder__prev-page,
.jrs-form .jet-form-builder-repeater__new,
.jrs-form .jet-form-builder-repeater__remove {
  min-height: 40px;
  padding: 0 18px;
  background: none;
  color: var(--brand-deep);
  border: 1px solid var(--brand-deep);
  font-size: var(--text-micro);
}
.jrs-form .jet-form-builder__action-buttons,
.jrs-form .jet-form-builder__next-page-wrap,
.jrs-form .jet-form-builder__prev-page-wrap,
.jrs-form .jet-form-builder-repeater__actions { margin-top: var(--space-s); }

/* --- repeater rows --------------------------------------------- */
.jrs-form .jet-form-builder-repeater__row {
  border: var(--box-quiet);
  padding: var(--space-s);
  margin-bottom: var(--space-s);
}

/* --- the multi-page progress bar -------------------------------- */
.jrs-form .jet-form-builder-progress-pages {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
  flex-wrap: wrap;
}
.jrs-form .jet-form-builder-progress-pages__item,
.jrs-form .jet-form-builder-progress-pages__item--wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--neutral-600);
}
.jrs-form .jet-form-builder-progress-pages__item--circle {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.jrs-form .jet-form-builder-progress-pages__item--label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: inherit;
}
.jrs-form .jet-form-builder-progress-pages__separator {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: var(--neutral-400);
  border: 0;
}
/* The step you are on. */
.jrs-form .active-page,
.jrs-form .active-page .jet-form-builder-progress-pages__item { color: var(--brand-deep); }
.jrs-form .active-page .jet-form-builder-progress-pages__item--circle {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

/* --- messages --------------------------------------------------- */
.jrs-form .jet-form-builder__fields-error,
.jrs-form .jet-form-builder-message--error { color: var(--danger); font-size: var(--text-meta); }
.jrs-form .jet-form-builder-message--success { color: var(--brand-deep); font-size: var(--text-meta); }

/* ---------------------------------------------------------------
   ON BLACK. Labels, descriptions and inactive step numbers were --ink
   here, which is why nothing was readable. --brand is the only green
   with contrast on black (9.86:1); --brand-deep fails, so it is never
   used in this block.
   --------------------------------------------------------------- */
.jrs-band--black .jrs-form .jet-form-builder__label,
.jrs-band--black .jrs-form .jet-form-builder__label-text,
.jrs-band--black .jrs-form .jet-form-builder__field-label { color: var(--white); }
.jrs-band--black .jrs-form .jet-form-builder__required { color: var(--brand); }
.jrs-band--black .jrs-form .jet-form-builder__desc { color: var(--on-black-mute); }

.jrs-band--black .jrs-form .jet-form-builder-progress-pages__item,
.jrs-band--black .jrs-form .jet-form-builder-progress-pages__item--wrapper { color: var(--on-black-mute); }
.jrs-band--black .jrs-form .jet-form-builder-progress-pages__separator { background: rgba(255, 255, 255, 0.28); }
.jrs-band--black .jrs-form .active-page,
.jrs-band--black .jrs-form .active-page .jet-form-builder-progress-pages__item { color: var(--brand); }
.jrs-band--black .jrs-form .active-page .jet-form-builder-progress-pages__item--circle {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.jrs-band--black .jrs-form .jet-form-builder__prev-page,
.jrs-band--black .jrs-form .jet-form-builder-repeater__new,
.jrs-band--black .jrs-form .jet-form-builder-repeater__remove {
  color: var(--brand);
  border-color: var(--brand);
}
.jrs-band--black .jrs-form .jet-form-builder__prev-page:hover,
.jrs-band--black .jrs-form .jet-form-builder-repeater__new:hover,
.jrs-band--black .jrs-form .jet-form-builder-repeater__remove:hover {
  background: var(--brand);
  color: var(--on-brand);
}
.jrs-band--black .jrs-form .jet-form-builder-repeater__row { border-color: rgba(255, 255, 255, 0.28); }
.jrs-band--black .jrs-form input[type="checkbox"],
.jrs-band--black .jrs-form input[type="radio"] { accent-color: var(--brand); }

/* ---------------------------------------------------------------
   The progress bar's mint (#34D7A1) survives ordinary overrides.
   Traced as far as it can be traced: it is set by no rule in any
   enumerable stylesheet, by no inline style attribute, and by no custom
   property — JetFormBuilder injects it somewhere the CSSOM does not expose.
   Since there is no selector to outrank, these few declarations are forced.
   Kept to the progress bar only, and listed explicitly rather than as a
   blanket !important on the form.
   --------------------------------------------------------------- */
.jrs-form .jet-form-builder-progress-pages__item,
.jrs-form .jet-form-builder-progress-pages__item--wrapper,
.jrs-form .jet-form-builder-progress-pages__item--label,
.jrs-form .jet-form-builder-progress-pages__separator { color: var(--neutral-600) !important; }

.jrs-form .jet-form-builder-progress-pages__item--circle {
  border-color: currentColor !important;
  color: inherit !important;
}
.jrs-form .jet-form-builder-progress-pages__separator { background: var(--neutral-400) !important; }

.jrs-form .active-page,
.jrs-form .active-page .jet-form-builder-progress-pages__item,
.jrs-form .active-page .jet-form-builder-progress-pages__item--label { color: var(--brand-deep) !important; }
.jrs-form .active-page .jet-form-builder-progress-pages__item--circle {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--on-brand) !important;
}

/* On black: --brand is the only readable green (9.86:1). */
.jrs-band--black .jrs-form .jet-form-builder-progress-pages__item,
.jrs-band--black .jrs-form .jet-form-builder-progress-pages__item--wrapper,
.jrs-band--black .jrs-form .jet-form-builder-progress-pages__item--label { color: var(--on-black-mute) !important; }
.jrs-band--black .jrs-form .jet-form-builder-progress-pages__separator {
  background: rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.28) !important;
}
.jrs-band--black .jrs-form .active-page,
.jrs-band--black .jrs-form .active-page .jet-form-builder-progress-pages__item,
.jrs-band--black .jrs-form .active-page .jet-form-builder-progress-pages__item--label { color: var(--brand) !important; }

/* File inputs: the native "No file chosen" text is the element's own colour,
   which was --ink and therefore invisible on the black band. The chooser
   button gets the secondary-button treatment. */
.jrs-form input[type="file"] {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink);
}
.jrs-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  min-height: 40px;
  padding: 0 18px;
  background: none;
  color: var(--brand-deep);
  border: 1px solid var(--brand-deep);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--fw-head);
  cursor: pointer;
}
.jrs-band--black .jrs-form input[type="file"] { color: var(--on-black-text); }
.jrs-band--black .jrs-form input[type="file"]::file-selector-button {
  color: var(--brand);
  border-color: var(--brand);
}
.jrs-band--black .jrs-form input[type="file"]::file-selector-button:hover {
  background: var(--brand);
  color: var(--on-brand);
}

/* The upload hint ("Maximum file size: 7 MB") is its own element and was the
   last thing still --ink on the black band. */
.jrs-form .jet-form-builder-file-upload__message {
  font-size: var(--text-micro);
  line-height: 1.6;
  color: var(--neutral-600);
  margin-top: 6px;
}
.jrs-band--black .jrs-form .jet-form-builder-file-upload__message { color: var(--on-black-mute); }

/* ---------------------------------------------------------------
   FORM FIELD LAYOUT
   The form fills the 1140 grid now, which fixed the content-crammed-left
   fault — but a single-line input 1140px wide is its own problem. So fields
   sit on a TWO-column grid, and anything that needs the room spans both.

   Two traps, both paid for:
   - NOT `auto-fit`: at 1140 it produced three columns, and `grid-column:
     1 / -1` does not reliably span a collapsed auto-fit track.
   - JetStyleManager wraps some rows in a `.jet-sm-gb-wrapper` div, so the
     GRID ITEM is the wrapper, not the row. `grid-column` set on the row
     computes correctly and does nothing at all. The rules therefore target
     the page's direct children, matching wrapped rows with :has().
   --------------------------------------------------------------- */
.jrs-form .jet-form-builder-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: start;
}
.jrs-form .jet-form-builder-page.jet-form-builder-page--hidden { display: none; }
.jrs-form .jet-form-builder-row { margin-bottom: 0; }

@media (min-width: 768px) {
  .jrs-form .jet-form-builder-page { grid-template-columns: repeat(2, 1fr); }

  /* everything spans both columns ... */
  .jrs-form .jet-form-builder-page > * { grid-column: span 2; }

  /* ... except the short fields, wrapped or not */
  .jrs-form .jet-form-builder-page > .field-type-select-field,
  .jrs-form .jet-form-builder-page > .field-type-text-field,
  .jrs-form .jet-form-builder-page > .field-type-number-field,
  .jrs-form .jet-form-builder-page > .field-type-date-field,
  .jrs-form .jet-form-builder-page > .field-type-media-field,
  .jrs-form .jet-form-builder-page > *:has(> .field-type-select-field),
  .jrs-form .jet-form-builder-page > *:has(> .field-type-text-field),
  .jrs-form .jet-form-builder-page > *:has(> .field-type-number-field),
  .jrs-form .jet-form-builder-page > *:has(> .field-type-date-field),
  .jrs-form .jet-form-builder-page > *:has(> .field-type-media-field) { grid-column: span 1; }
}

/* ---------------------------------------------------------------
   THE UPLOAD GAP  (Monica: "between the label 'Upload full draft' and the
   button to choose the file there is a big gap ... I had not been able to
   fix it previously on elementor")

   JetFormBuilder's file field reserves its uploaded-files PREVIEW area
   before anything has been uploaded: `.jet-form-builder-file-upload__content`
   carries `min-height: 100px`, and the `__files` list inside it is literally
   empty (childCount 0). That empty box was pushing the chooser 117px below
   its own label — nothing to do with margins, which is why it resisted
   fixing in Elementor.

   Collapse it while empty, and give the room back the moment a file is
   actually attached.
   --------------------------------------------------------------- */
.jrs-form .jet-form-builder-file-upload__content,
.jrs-form .jet-form-builder-file-upload__files {
  min-height: 0;
  height: auto;
}
/* inline-flex, even at height 0, still generates a LINE BOX — which left 31px
   of the original gap behind after the min-height was collapsed. Block-level
   flex removes it, and still lets the upload spinner inside display normally. */
.jrs-form .jet-form-builder-file-upload__content { display: flex; }
.jrs-form .jet-form-builder-file-upload__content:has(.jet-form-builder-file-upload__files > *) {
  min-height: 100px;
  margin-bottom: var(--space-xs);
}
/* Fallback for engines without :has() — the preview area still collapses when
   empty, it simply does not re-expand from CSS; the file list sizes itself. */
.jrs-form .jet-form-builder-file-upload__files:empty { display: none; }

/* ---------------------------------------------------------------
   FILTER BAR  —  JetSmartFilters in JRS colours.
   Used on the editorial board (A-Z + search) and, later, the article and
   issue archives. Like the form, JetSmartFilters ships its own look; these
   rules bring it onto the palette and the line ladder.
   --------------------------------------------------------------- */
/* The bar is a ROW. It was written as a column back when the A-Z sat above the
   search; reused as a row it stacked the controls, centred them, and left a
   307px block with an invisible Clear button. One class, one direction. */
.jrs-filters {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
}
/* stacked groups (A-Z above a row) opt in explicitly */
.jrs-filters--stacked { flex-direction: column; align-items: stretch; }
.jrs-filters__row { display: flex; flex-flow: row wrap; align-items: center; gap: var(--space-s); }

/* the JetSmartFilters wrappers are plain divs with no size of their own */
.jrs-filters > *,
.jrs-filters .jet-filter { margin: 0; }
.jrs-filters__search { flex: 1 1 20rem; max-width: 26rem; min-width: 0; }
.jrs-filters__search .jet-filter,
.jrs-filters__search .jet-search-filter { width: 100%; }
.jrs-filters__reset { flex: 0 0 auto; }

/* A-Z: a row of letters, not buttons in boxes. */
.jrs-filters__az .jet-filter-items,
.jrs-filters__az .jet-alphabet-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jrs-filters__az .jet-alphabet-list__item,
.jrs-filters__az .jet-filter-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  margin: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--brand-deep);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-filters__az .jet-alphabet-list__item:hover,
.jrs-filters__az .jet-filter-label:hover { background: var(--grey); }
.jrs-filters__az .jet-alphabet-list__item.is-checked,
.jrs-filters__az .jet-alphabet-list__item[aria-pressed="true"],
.jrs-filters__az .checked .jet-filter-label,
.jrs-filters__az input:checked + .jet-filter-label {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
/* a letter with nothing behind it should read as unavailable, not clickable */
.jrs-filters__az .jet-alphabet-list__item.is-disabled,
.jrs-filters__az .jet-filter-item.is-disabled { color: var(--neutral-400); pointer-events: none; }

/* Search: the same field furniture as every other input on the site. */
.jrs-filters__search { flex: 1 1 18rem; max-width: 26rem; }
.jrs-filters__search input[type="text"],
.jrs-filters__search input[type="search"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--white);
  color: var(--ink);
  border: var(--box-quiet);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
}
.jrs-filters__search input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand-deep);
}

/* Clear: a quiet secondary action, only worth noticing once a filter is on. */
.jrs-filters__reset .jet-remove-all-filters,
.jrs-filters__reset button {
  min-height: 44px;
  padding: 0 18px;
  background: none;
  color: var(--brand-deep);
  border: 1px solid var(--brand-deep);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--fw-head);
  cursor: pointer;
}
.jrs-filters__reset .jet-remove-all-filters:hover,
.jrs-filters__reset button:hover { background: var(--brand-deep); color: var(--white); }

.jrs-filters__count {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin: 0;
}

/* ---------------------------------------------------------------
   PEOPLE ACCORDION  —  the editorial board.
   Same component as the manuscript guidance, but the row is a NAME, so it
   carries a little more weight and the rule ladder does the separating.
   Replaces jet-unfold (JetTricks), which has no Bricks widget at all.
   --------------------------------------------------------------- */
.jrs-accordion--people .accordion-title-wrapper h2,
.jrs-accordion--people .accordion-title-wrapper h3 {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-accordion--people .accordion-title-wrapper:hover h2,
.jrs-accordion--people .accordion-title-wrapper:hover h3 { color: var(--primary-hover); }
.jrs-accordion--people .brx-open .accordion-title-wrapper h2 { color: var(--primary-hover); }
/* The bios come out of the CCT as Word-pasted HTML; keep them on the scale. */
.jrs-accordion--people .accordion-content-wrapper p {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--ink);
}
.jrs-accordion--people .accordion-content-wrapper span[style],
.jrs-accordion--people .accordion-content-wrapper p[style] {
  font-weight: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
}

/* ---------------------------------------------------------------
   PEOPLE GRID  —  the editorial board (page 11763)
   A JetEngine listing (15892, builder "bricks") rendered by a listing grid.
   Each card is its own accordion-nested with a single item, so the name row
   is a real accordion control rather than hand-rolled JS.
   Monica, 2026-08-30: names do not need a full-width row, so four across.
   --------------------------------------------------------------- */
.jrs-people .jet-listing-grid__items { align-items: start; }
.jrs-people .jet-listing-grid__item { display: block; }

.jrs-person { border: var(--box-quiet); background: var(--white); }
.jrs-person > * { border: 0; }

.jrs-person .accordion-title-wrapper {
  cursor: pointer;
  gap: var(--space-xs);
  padding: var(--space-s);
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-person .accordion-title-wrapper:hover { color: var(--primary-hover); }
.jrs-person .accordion-title-wrapper h3 {
  font-size: var(--text-body);
  line-height: 1.35;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-person .accordion-title-wrapper:hover h3 { color: var(--primary-hover); }
.jrs-person .accordion-title-wrapper .brxe-icon {
  color: var(--brand-deep);
  flex: none;
  transition: transform var(--motion-base) var(--motion-ease);
}
.jrs-person .brx-open .accordion-title-wrapper .brxe-icon { transform: rotate(90deg); }
.jrs-person .brx-open .accordion-title-wrapper h3 { color: var(--primary-hover); }
.jrs-person .brx-open { border-color: var(--brand-deep); }

.jrs-person .accordion-content-wrapper { padding: 0 var(--space-s) var(--space-s); }
.jrs-person .accordion-content-wrapper > * { border-top: var(--rule-structural); padding-top: var(--space-xs); }
.jrs-person .accordion-content-wrapper p {
  font-size: var(--text-meta);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 0.8em;
}
.jrs-person .accordion-content-wrapper p:last-child { margin-bottom: 0; }
/* The bios come out of the CCT as Word-pasted HTML — strip the inline styling. */
.jrs-person .accordion-content-wrapper [style] {
  font-weight: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* ===============================================================
   ARCHIVE  —  black filter rail + results (Monica, direction A)
   Used by the articles archive template; the issues archive uses the
   same results side with a top bar instead of a rail.
   =============================================================== */
.jrs-arch {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 991px) {
  .jrs-arch { grid-template-columns: 1fr; gap: var(--space-m); }
}

/* --- the rail ------------------------------------------------------------
   Monica, 2026-09-03: the black panel was too heavy — "use your original
   style". So the rail is the house style: no box, one hairline separating it
   from the results, brand-green labels, square corners, nothing filled.
   Black stays reserved for the one interruption per page and the footer. */
.jrs-rail {
  padding: 0 var(--space-m) 0 0;
  border-right: var(--rule-structural);
  position: sticky;
  top: calc(var(--jrs-header-h) + var(--space-s));
  align-self: start;
  max-height: calc(100vh - var(--jrs-header-h) - var(--space-l));
  overflow-y: auto;
}
.jrs-rail__label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 var(--space-s);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-structural);
}

/* the line ladder: each filter group sits under its own hairline */
.jrs-rail__filter { padding-bottom: var(--space-s); margin-bottom: var(--space-s); border-bottom: var(--rule-structural); }

/* If the rail is taller than the viewport it scrolls inside itself, so Clear all
   stays reachable. Keep that scrollbar quiet — it is furniture, not content. */
.jrs-rail { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
.jrs-rail::-webkit-scrollbar { width: 6px; }
.jrs-rail::-webkit-scrollbar-track { background: transparent; }
.jrs-rail::-webkit-scrollbar-thumb { background: var(--neutral-300); }
.jrs-rail__filter:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.jrs-rail .jet-filter-label,
.jrs-rail .jet-filter__label,
.jrs-rail .jet-smart-filters-select label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-600);
  margin-bottom: 8px;
  display: block;
}
.jrs-rail input[type="text"],
.jrs-rail input[type="search"],
.jrs-rail input[type="number"],
.jrs-rail select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--white);
  color: var(--ink);
  border: var(--box-quiet);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
}
.jrs-rail input::placeholder { color: var(--neutral-600); }
.jrs-rail input:focus-visible,
.jrs-rail select:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 1px; border-color: var(--brand-deep); }

/* The select had appearance:none from the dark rail and so lost its arrow —
   it read as an empty text box. Draw the chevron back on. */
.jrs-rail select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-deep) 50%),
    linear-gradient(135deg, var(--brand-deep) 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Checkbox list — all ten article types visible, which is the point of a rail.
   JetSmartFilters sets the real input to display:none and paints
   .jet-checkboxes-list__button; the box is its own decorator (show_decorator),
   and `columns: 1` on the element stops it packing two labels to a line. */
/* The container that actually lays the items out is .jet-checkboxes-list__row,
   two levels down (list > fieldset.jet-checkboxes-list-wrapper > div.row). It is a
   flex ROW, so short labels pair up as soon as the rail is wide enough — which is why
   this looked fixed at one width and wrong at another. Stack the row itself. */
.jrs-rail .jet-checkboxes-list-wrapper,
.jrs-rail .jet-checkboxes-list__row,
.jrs-rail .jet-filter-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.jrs-rail .brxe-jet-smart-filters-checkboxes .jet-checkboxes-list__item,
.jrs-rail .brxe-jet-smart-filters-check-range .jet-checkboxes-list__item,
.jrs-rail .jet-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-meta);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 7px;
  cursor: pointer;
}
.jrs-rail .jet-checkboxes-list__item:last-child { margin-bottom: 0; }
.jrs-rail .jet-checkboxes-list__button {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}
.jrs-rail .jet-checkboxes-list__decorator {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: var(--box-quiet);
  background: var(--white);
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.jrs-rail .jet-checkboxes-list__item:hover .jet-checkboxes-list__decorator { border-color: var(--brand-deep); }
.jrs-rail .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.jrs-rail .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
  outline: 2px solid var(--brand-deep);
  outline-offset: 1px;
}
.jrs-rail .jet-checkboxes-list__checked-icon { display: none; line-height: 0; }
.jrs-rail .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__checked-icon { display: block; }
.jrs-rail .jet-checkboxes-list__checked-icon svg { display: block; width: 10px; height: 10px; fill: var(--white); }
.jrs-rail .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-checkboxes-list__label {
  color: var(--heading-page);
  font-weight: var(--fw-head);
}
.jrs-rail .jet-checkboxes-list__label { min-width: 0; }
.jrs-rail input[type="radio"] { width: auto; height: auto; accent-color: var(--brand-deep); flex: none; }
.jrs-rail .jet-filter-items-counter { color: var(--neutral-600); margin-left: auto; font-variant-numeric: tabular-nums; }

/* range slider */
.jrs-rail .jet-range__slider,
.jrs-rail .jet-range__track { background: var(--neutral-300); }
.jrs-rail .jet-range__slider__bar,
.jrs-rail .jet-range__track-fill { background: var(--brand-deep); }
.jrs-rail .jet-range__values,
.jrs-rail .jet-range__inputs { color: var(--neutral-600); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }

.jrs-rail__clear { margin-top: var(--space-m); }
.jrs-rail__clear .jet-remove-all-filters__button {
  width: 100%;
  min-height: 40px;
  background: none;
  color: var(--brand-deep);
  border: 1px solid var(--brand-deep);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--fw-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.jrs-rail__clear .jet-remove-all-filters__button:hover { background: var(--brand-deep); color: var(--white); }

/* Stacked (<=991px) the rail sits ABOVE the results, so sticking it would pin a
   panel over the list for the whole scroll. This has to come after the .jrs-rail
   block above: same specificity, so source order decides. */
@media (max-width: 991px) {
  .jrs-rail {
    position: static;
    max-height: none;
    overflow-y: visible;
    border-right: 0;
    border-bottom: var(--rule-structural);
    padding: 0 0 var(--space-m);
  }
}

/* --- results side --- */
.jrs-results__active { margin-bottom: var(--space-s); }
.jrs-results__active .jet-active-tag,
.jrs-results__active .jet-filters-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--text-micro);
  font-weight: var(--fw-head);
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  border: 0;
  border-radius: 0;
}

/* --- the article row --- */
.jrs-artlist .jet-listing-grid__item { border-top: var(--rule-structural); }
.jrs-artlist .jet-listing-grid__item:first-child { border-top: 0; }

/* The whole row is clickable, but the only real link is the TITLE, stretched over
   the row with ::after. A block wrapped in <a> swallows its children in Bricks, and
   an <a> around the whole row would read out the entire citation as its link text.
   The type is a term link, so it is lifted above the overlay and stays clickable. */
.jrs-art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-s) 0;
  color: inherit;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.jrs-art__title a {
  color: inherit;
  text-decoration: none;
}
.jrs-art__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.jrs-art__type a,
.jrs-art__type { position: relative; z-index: 1; }
.jrs-art:has(.jrs-art__cover) { grid-template-columns: 1fr 88px; }
.jrs-art:hover { background: var(--grey); }
.jrs-art:hover .jrs-art__title,
.jrs-art:hover .jrs-art__title a { color: var(--primary-hover); }
.jrs-art:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-art__title a:focus-visible { outline: none; }

.jrs-art__type a { color: inherit; text-decoration: none; }
.jrs-art__type {
  display: inline-block;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--on-brand);
  background: var(--brand);
  padding: 2px 7px;
  margin-bottom: 8px;
}
.jrs-art__title {
  font-size: var(--h4);
  line-height: 1.35;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0 0 6px;
  max-width: 62ch;
  padding-top: 0;
  border-top: 0;
}
.jrs-art__authors { font-size: var(--text-meta); color: var(--ink); margin: 0 0 6px; }
/* A Bricks block is a flex COLUMN by default (.brxe-block). Declaring align-items
   without a direction centred the citation in mid-row — always state the direction. */
.jrs-art__meta {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--space-s);
  font-size: var(--text-micro);
  color: var(--neutral-600);
  font-variant-numeric: tabular-nums;
}
.jrs-art__oa { color: var(--brand-deep); font-weight: var(--fw-head); }
.jrs-art__coverimg img,
.jrs-art__coverimg { width: 100%; height: auto; display: block; }

@media (max-width: 560px) {
  .jrs-art:has(.jrs-art__cover) { grid-template-columns: 1fr 68px; gap: var(--space-s); }
}

/* pagination */
.jrs-pagination { margin-top: var(--space-l); }
.jrs-pagination .jet-filters-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: var(--box-quiet);
  color: var(--brand-deep);
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  margin: 0 4px 4px 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.jrs-pagination .jet-filters-pagination__item:hover {
  border-color: var(--brand-deep);
  background: var(--grey);
}
.jrs-pagination .jet-filters-pagination__item--prev,
.jrs-pagination .jet-filters-pagination__item--next { letter-spacing: 0.04em; }
.jrs-pagination .jet-filters-pagination__current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

/* ===============================================================
   SECTION HEADINGS  —  used wherever an archive splits in two
   (Journal / Magazine, open / closed, upcoming / past)
   =============================================================== */
.jrs-sechead {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: var(--space-s);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-structural);
}
.jrs-sechead__title {
  font-size: var(--h3);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-sechead__note {
  font-size: var(--text-meta);
  color: var(--neutral-600);
  margin: 0;
}

/* ===============================================================
   ISSUE CARDS  —  listing "JRS - Issue card"
   Monica: the eyebrow top-left and the open-access eye top-right, on one
   full-width green bar above the cover, with the title reading as part of
   the card rather than a caption under it.
   =============================================================== */
.jrs-issues .jet-listing-grid__items { align-items: stretch; }
.jrs-issues .jet-listing-grid__item { display: flex; }

.jrs-issue {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  border: var(--box-quiet);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.jrs-issue:hover { border-color: var(--brand-deep); }

/* the bar. A flex ROW — .brxe-block is a column, so the direction is explicit. */
/* The bar is neutral, not green. Monica, 2026-09-04: a green band on every one
   of 23 cards fought the covers and stopped meaning anything. Grey ground, and
   the green is spent only on the open-access eye — so the colour now signals
   something instead of decorating. */
.jrs-issue__bar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 26px;
  padding: 3px var(--space-xs);
  background: var(--grey);
  color: var(--ink);
  border-bottom: var(--rule-structural);
}
.jrs-issue__flag {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the eye sits hard right; when an issue is not open access the bar keeps its
   height because of min-height, so cards stay on a consistent grid */
/* Bricks renders an SVG icon by inlining the file and putting the element's own
   classes ON the <svg>. The file carries a viewBox but no width/height, so without
   an explicit size it fills its container — it came out 241px square. */
/* the one piece of colour on the card, and it means "free to read" */
.jrs-issue__oa {
  margin-left: auto;
  flex: none;
  display: block;
  width: 17px;
  height: 17px;
  color: var(--brand-deep);
  stroke: currentColor;
}

.jrs-issue__cover { display: block; background: var(--grey); }
.jrs-issue__coverimg,
.jrs-issue__coverimg img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.jrs-issue__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-s);
  flex: 1 1 auto;
}
.jrs-issue__title {
  font-size: var(--text-body);
  line-height: 1.3;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-issue__title a { color: inherit; text-decoration: none; }
.jrs-issue__title a::after { content: ""; position: absolute; inset: 0; }
.jrs-issue { position: relative; }
.jrs-issue:hover .jrs-issue__title,
.jrs-issue:hover .jrs-issue__title a { color: var(--primary-hover); }
.jrs-issue:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-issue__title a:focus-visible { outline: none; }

.jrs-issue__topic {
  font-size: var(--text-meta);
  line-height: 1.4;
  color: var(--neutral-600);
  margin: 0;
}

/* ===============================================================
   CALLS FOR PAPERS  —  listing "JRS - Call for papers"
   Monica: "I would greyish out the ones that are [past]". The split is done by
   the query, so the whole closed grid carries the modifier rather than every
   card testing its own deadline.
   =============================================================== */
.jrs-cfps .jet-listing-grid__item + .jet-listing-grid__item { border-top: var(--rule-structural); }

.jrs-cfp {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m) 0;
}
.jrs-cfp:has(.jrs-cfp__cover) { grid-template-columns: 1fr 160px; }

.jrs-cfp__main { display: flex; flex-direction: column; gap: 6px; }
.jrs-cfp__issue {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--on-brand);
  background: var(--brand);
  padding: 2px 7px;
  align-self: flex-start;
}
.jrs-cfp__title {
  font-size: var(--h4);
  line-height: 1.3;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
  max-width: 54ch;
}
.jrs-cfp__title a { color: inherit; text-decoration: none; }
.jrs-cfp__title a::after { content: ""; position: absolute; inset: 0; }
.jrs-cfp:hover .jrs-cfp__title,
.jrs-cfp:hover .jrs-cfp__title a { color: var(--primary-hover); }
.jrs-cfp:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-cfp__title a:focus-visible { outline: none; }

.jrs-cfp__deadline {
  font-size: var(--text-meta);
  font-weight: var(--fw-head);
  color: var(--brand-deep);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.jrs-cfp__eds {
  font-size: var(--text-meta);
  line-height: 1.45;
  color: var(--neutral-600);
  margin: 0;
  max-width: 60ch;
  /* the field is a textarea of "Name, institution, email" lines */
  white-space: pre-line;
}
.jrs-cfp__coverimg,
.jrs-cfp__coverimg img { display: block; width: 100%; height: auto; border: var(--box-quiet); }

/* closed: quieter, but still legible — greyed, not hidden */
.jrs-cfps--closed .jrs-cfp__issue { background: var(--neutral-400); color: var(--white); }
.jrs-cfps--closed .jrs-cfp__title { color: var(--neutral-600); }
.jrs-cfps--closed .jrs-cfp__deadline { color: var(--neutral-600); }
.jrs-cfps--closed .jrs-cfp__coverimg img { filter: grayscale(1); opacity: 0.7; }
.jrs-cfps--closed .jrs-cfp:hover .jrs-cfp__title,
.jrs-cfps--closed .jrs-cfp:hover .jrs-cfp__title a { color: var(--primary-hover); }
.jrs-cfps--closed .jrs-cfp:hover .jrs-cfp__coverimg img { filter: none; opacity: 1; }

@media (max-width: 640px) {
  .jrs-cfp:has(.jrs-cfp__cover) { grid-template-columns: 1fr 96px; gap: var(--space-s); }
}

/* ===============================================================
   EVENTS  —  listing "JRS - Event"
   Monica: "events also have an image, I just wasnt sure how to show it tidylly"
   — a calendar block anchors the left, the image is a fixed 16:9 on the right,
   so rows stay on a rhythm however tall the text is.
   =============================================================== */
.jrs-evs .jet-listing-grid__item + .jet-listing-grid__item { border-top: var(--rule-structural); }

.jrs-ev {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m) 0;
}
.jrs-ev:has(.jrs-ev__img) { grid-template-columns: 68px 1fr 240px; }

.jrs-ev__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 4px;
  border: var(--box-quiet);
  border-top: 3px solid var(--brand-deep);
  background: var(--white);
  text-align: center;
}
.jrs-ev__day {
  font-size: var(--h3);
  line-height: 1;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  font-variant-numeric: tabular-nums;
}
.jrs-ev__mon {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-top: 2px;
}
.jrs-ev__yr { font-size: var(--text-micro); color: var(--neutral-600); font-variant-numeric: tabular-nums; }

.jrs-ev__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jrs-ev__title {
  font-size: var(--h4);
  line-height: 1.3;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
  max-width: 46ch;
}
.jrs-ev__title a { color: inherit; text-decoration: none; }
.jrs-ev__title a::after { content: ""; position: absolute; inset: 0; }
.jrs-ev:hover .jrs-ev__title,
.jrs-ev:hover .jrs-ev__title a { color: var(--primary-hover); }
.jrs-ev:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-ev__title a:focus-visible { outline: none; }

.jrs-ev__when { font-size: var(--text-meta); color: var(--ink); margin: 0; }
.jrs-ev__spk { font-size: var(--text-meta); color: var(--neutral-600); margin: 0; }

.jrs-ev__img { display: block; }
.jrs-ev__imgi,
.jrs-ev__imgi img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--box-quiet);
}

.jrs-evs--past .jrs-ev__date { border-top-color: var(--neutral-400); }
.jrs-evs--past .jrs-ev__mon { color: var(--neutral-600); }
.jrs-evs--past .jrs-ev__title { color: var(--neutral-600); }
.jrs-evs--past .jrs-ev__imgi img { filter: grayscale(1); opacity: 0.75; }
.jrs-evs--past .jrs-ev:hover .jrs-ev__title,
.jrs-evs--past .jrs-ev:hover .jrs-ev__title a { color: var(--primary-hover); }
.jrs-evs--past .jrs-ev:hover .jrs-ev__imgi img { filter: none; opacity: 1; }

@media (max-width: 860px) {
  .jrs-ev:has(.jrs-ev__img) { grid-template-columns: 68px 1fr; }
  .jrs-ev__img { grid-column: 2; }
  .jrs-ev__imgi, .jrs-ev__imgi img { max-width: 320px; }
}
@media (max-width: 480px) {
  .jrs-ev, .jrs-ev:has(.jrs-ev__img) { grid-template-columns: 56px 1fr; gap: var(--space-s); }
}

/* ===============================================================
   A GENERIC ACCORDION  —  used where a page folds long reference
   material away (the RSM index). The chevron is drawn in CSS rather
   than set as an icon: Bricks only enqueues its icon fonts when it
   detects one in the page's own content, so an icon inside a listing
   or a template can render as an empty box.
   =============================================================== */
.jrs-accordion { border-top: var(--rule-structural); }
.jrs-accordion > * { border-bottom: var(--rule-structural); }

.jrs-accordion .accordion-title-wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  cursor: pointer;
}
.jrs-accordion .accordion-title-wrapper h3 {
  font-size: var(--text-body);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-accordion .accordion-title-wrapper:hover h3 { color: var(--primary-hover); }
.jrs-accordion .accordion-title-wrapper::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--motion-base) var(--motion-ease);
}
.jrs-accordion .brx-open .accordion-title-wrapper::after { transform: rotate(-135deg); }
.jrs-accordion .brx-open .accordion-title-wrapper h3 { color: var(--primary-hover); }

.jrs-accordion .accordion-content-wrapper { padding: 0 0 var(--space-m); }

/* the original TablePress index, brought into the type scale */
.jrs-rsm-table table { width: 100%; border-collapse: collapse; font-size: var(--text-meta); }
.jrs-rsm-table th,
.jrs-rsm-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px 8px 0;
  border-bottom: var(--rule-structural);
}
.jrs-rsm-table th {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  border-bottom: var(--rule-structural);
}
.jrs-rsm-table img { max-width: 22px; height: auto; }
.jrs-rsm-table .dataTables_wrapper .dataTables_filter input { border: var(--box-quiet); border-radius: 0; }

/* ===============================================================
   TERM INDEX  —  /topics/ and /article-types/
   Every term, with how much sits under it. A Bricks term query loop:
   {term_name}, {term_url} and {term_count} are native to Bricks and have
   no equivalent in a posts listing.
   =============================================================== */
.jrs-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  /* .brxe-block sets align-items:flex-start, which applies to a grid too: a card
     next to a two-line one stayed short and left the background showing through
     as a grey strip. */
  align-items: stretch;
  background: var(--neutral-300);
  border: var(--rule-structural);
}
.jrs-term {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s);
  background: var(--white);
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.jrs-term:hover { background: var(--grey); }
.jrs-term__name {
  font-size: var(--text-body);
  line-height: 1.3;
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
  min-width: 0;
}
.jrs-term__name a { color: inherit; text-decoration: none; }
.jrs-term__name a::after { content: ""; position: absolute; inset: 0; }
.jrs-term:hover .jrs-term__name,
.jrs-term:hover .jrs-term__name a { color: var(--primary-hover); }
.jrs-term:focus-within { outline: 2px solid var(--brand); outline-offset: -1px; }
.jrs-term__name a:focus-visible { outline: none; }
/* A filled green square. Monica, 2026-09-04: the topic lists are otherwise
   colourless. --brand on --on-brand is the pairing every chip and button already
   uses, so this adds colour without adding a colour. Square rather than a pill;
   the min-width keeps three digits inside it. */
.jrs-term__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-size: var(--text-micro);
  font-weight: var(--fw-head);
  color: var(--on-brand);
  background: var(--brand);
  border: 1px solid var(--brand);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.jrs-term:hover .jrs-term__count {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--white);
}

/* the count under a term archive's title, and the links back out */
.jrs-pagehead__count {
  font-size: var(--text-meta);
  color: var(--neutral-600);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.jrs-termnav {
  font-size: var(--text-meta);
  color: var(--neutral-600);
  padding-top: var(--space-s);
  border-top: var(--rule-structural);
}
.jrs-termnav a { color: var(--brand-deep); text-decoration: none; font-weight: var(--fw-head); }
.jrs-termnav a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ===============================================================
   CONTACT  —  an illustration and a form, and not much else.
   Monica, 2026-09-04: "just have mainly a nice form and good looking page".
   The four routes are the form's own options; explaining each of them in a
   column beside it said the same thing twice.
   =============================================================== */
.jrs-contact {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.jrs-contact__art { display: block; }
.jrs-contact__art img { display: block; width: 100%; height: auto; }
.jrs-contact__form { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }

/* the one address published directly: orders and invoices do not need routing
   through the form, and people chasing an invoice want somewhere to write */
.jrs-contact__direct {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: var(--rule-structural);
}
.jrs-contact__label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin: 0 0 2px;
}
.jrs-contact__mail { margin: 0; font-size: var(--text-meta); word-break: break-word; }
.jrs-contact__mail a { color: var(--brand-deep); font-weight: var(--fw-head); text-decoration: none; }
.jrs-contact__mail a:hover { color: var(--primary-hover); text-decoration: underline; }
/* the form is the page, so let it breathe rather than fill the width */
.jrs-contact__form .jrs-form { max-width: 34rem; }

@media (max-width: 860px) {
  .jrs-contact { grid-template-columns: 1fr; gap: var(--space-l); }
  .jrs-contact__art { max-width: 180px; }
  .jrs-contact__form .jrs-form { max-width: none; }
}

/* ===============================================================
   HOME PAGE  —  the journal's front page (page 10610)
   Every block is driven by a JetEngine query: 45/39 counts, 46 latest
   issue, 47 its editorial, 48 latest articles, 49 reviews with covers.
   =============================================================== */

/* --- the green masthead. Brand green is a ground here, so the title takes
       --on-brand (black): --heading-page on --brand is about 2.3:1. --- */
/* The header already draws the black rule under itself, so the band adds only a
   bottom one — a top border here put two black lines a third of a pixel apart.
   Weight comes from --section-border (1px black), the system's own section rule;
   --rule-structural is the 1px #B0B0B0 hairline, too pale to hold an edge
   against a colour field. */
.jrs-band--green {
  background: var(--brand);
  border-bottom: var(--section-border);
}
.jrs-band--green .jrs-pagehead__stub { background: var(--black); }

.jrs-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-xl); align-items: start; }
.jrs-hero__eyebrow {
  font-size: var(--text-micro); font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--on-brand); opacity: .75; margin: 0 0 var(--space-2xs);
}
.jrs-hero__title {
  font-size: var(--h1); line-height: var(--lh-h1); font-weight: var(--fw-head);
  color: var(--on-brand); margin: 0 0 var(--space-s);
  padding-top: 0; border-top: 0; letter-spacing: -0.01em;
}
.jrs-hero__lead {
  font-size: var(--text-lead); line-height: 1.5; font-weight: var(--fw-head);
  color: var(--on-brand); margin: 0; max-width: 32ch;
}
/* Bricks wraps rich text in a <p> inside .brxe-text, so the gap has to be set
   on that paragraph — on the wrapper it only ever sees one child. */
.jrs-hero__links { margin: var(--space-m) 0 0; font-size: var(--text-meta); }
.jrs-hero__links p {
  display: flex; flex-flow: row wrap; gap: var(--space-m); margin: 0;
}
.jrs-hero__links a {
  color: var(--on-brand); font-weight: var(--fw-head);
  text-decoration: none; border-bottom: var(--box-quiet);
}
.jrs-hero__links a:hover { border-bottom-color: var(--on-brand); }

/* --- the counters. Each count sits in a square: white ground, the 2px rule
       the system already uses for structure, no radius, no shadow. --- */
/* Named --herofig, not --stat: jrs-conference.css defines .jrs-stats as a grid
   of figures for the conference archive, loads after this file, and was winning.
   Two components, one class name, and the later file silently reshaped the hero. */
.jrs-herofigs {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  /* column rule — treatment A of the line ladder, at the system's weight */
  border-left: var(--section-border);
  padding-left: var(--space-xl);
}
.jrs-herofig { display: flex; flex-flow: row nowrap; align-items: center; gap: var(--space-s); }
.jrs-herofig__box {
  flex: none; width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: var(--section-border);
}
.jrs-herofig__box .brxe-counter,
.jrs-herofig__box .jrs-herofig__num {
  font-size: var(--h2); line-height: 1; font-weight: var(--fw-head);
  color: var(--black); font-variant-numeric: tabular-nums;
}
.jrs-herofig__label {
  font-size: var(--text-micro); font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--on-brand);
}
/* "Published since 2015" is a sentence, not a quantity — no square. */
.jrs-herofig--since { align-items: baseline; gap: var(--space-2xs); padding-top: var(--space-2xs); }
.jrs-herofig--since .jrs-herofig__num {
  font-size: var(--h3); font-weight: var(--fw-head);
  color: var(--on-brand); font-variant-numeric: tabular-nums;
}
.jrs-herofigs__note {
  margin: var(--space-2xs) 0 0; padding-top: var(--space-s);
  border-top: var(--section-border);
  font-size: var(--text-meta); line-height: 1.5; color: var(--on-brand); max-width: 34ch;
}
.jrs-herofigs__note a { color: var(--on-brand); font-weight: var(--fw-head); }

/* --- the current issue --- */
/* The page supplies the two columns, not the listing: the cover is one listing
   and the issue's text is another, so the editorial (a third listing, on a
   different query) can sit under the text in the same column. */
.jrs-feature { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-xl); align-items: start; }
.jrs-feature__covcol { display: block; }
.jrs-feature__txtcol { display: flex; flex-direction: column; align-items: stretch; }
.jrs-feature__cover { border: var(--rule-structural); }
.jrs-feature__cover img { display: block; width: 100%; height: auto; }
.jrs-feature__title {
  font-size: var(--h1); line-height: var(--lh-h1); font-weight: var(--fw-head);
  color: var(--heading-page); margin: 0 0 var(--space-2xs); padding-top: 0; border-top: 0;
}
.jrs-feature__title a { color: inherit; text-decoration: none; }
.jrs-feature__title a:hover { color: var(--primary-hover); }
.jrs-feature__meta { font-size: var(--text-meta); color: var(--neutral-600); margin: 0 0 var(--space-m); }
.jrs-feature__actions { display: flex; flex-flow: row wrap; gap: var(--space-xs); }

/* the editorial teaser, under the feature */
.jrs-lead { border-top: var(--section-border); padding-top: var(--space-s); margin-top: var(--space-l); }
.jrs-lead__kicker {
  display: inline-block; font-size: var(--text-micro); font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--on-brand); background: var(--brand); padding: 2px 7px; margin-bottom: var(--space-2xs);
}
.jrs-lead__title {
  font-size: var(--h3); line-height: var(--lh-h3); font-weight: var(--fw-head);
  color: var(--heading-page); margin: 0; max-width: 40ch; padding-top: 0; border-top: 0;
}
.jrs-lead__title a { color: inherit; text-decoration: none; }
.jrs-lead__title a:hover { color: var(--primary-hover); }
.jrs-lead__by { font-size: var(--text-meta); color: var(--ink); margin: 6px 0 0; }
.jrs-lead__cite { font-size: var(--text-micro); color: var(--neutral-600); margin: 2px 0 0; font-variant-numeric: tabular-nums; }

/* --- the article cards, in a horizontal rail ---------------------------
   JetEngine's listing grid has its own Swiper carousel and it renders the
   right markup, but the script that initialises it dies on
   `JetPlugins.hooks` — LiteSpeed's "defer JS" reorders JetEngine's
   dependencies, and the same error appears on every page of the site.
   Until that setting is changed, the rail is pure CSS: it scrolls, snaps,
   takes a swipe and a keyboard, and needs no JavaScript at all. --- */
.jrs-rail .jet-listing-grid__items {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(262px, 78vw), 1fr);
  gap: var(--space-s);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2xs);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) transparent;
}
.jrs-rail .jet-listing-grid__items::-webkit-scrollbar { height: 6px; }
.jrs-rail .jet-listing-grid__items::-webkit-scrollbar-track { background: transparent; }
.jrs-rail .jet-listing-grid__items::-webkit-scrollbar-thumb { background: var(--neutral-400); }
.jrs-rail .jet-listing-grid__item { scroll-snap-align: start; height: auto; }
/* JetEngine caps every item at `max-width: var(--item-width)`, i.e. 100%/columns.
   Inside a rail track that is a percentage OF THE TRACK, so a 4-column setting
   squeezed each card to 51px in a 262px slot. The rail sets the width. */
.jrs-artcards.jrs-rail .jet-listing-grid__items > .jet-listing-grid__item,
.jrs-covers .jet-listing-grid__items > .jet-listing-grid__item {
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
}
/* JetEngine's equal-columns wrapper sets height:100% on each item; inside a
   single-row grid that resolves against the track rather than the content and
   the cards came out 1135px tall. The row sizes to its content instead. */
/* grid-auto-rows: max-content sizes the row to its tallest card; stretch then
   makes every card that height, so the rail reads as one band. */
.jrs-rail .jet-listing-grid__items { align-items: stretch; grid-auto-rows: max-content; }
.jrs-rail .jet-listing-grid__item,
.jrs-rail .jet-listing-grid__item > * { height: auto !important; }

/* Named --artcard, not --card: this file already carries two other .jrs-card
   components (the plain/warn block, and the account overview's cards whose
   __title is --h2). The account one comes later and was winning, which is why
   these titles rendered at 34px instead of 20px. */
.jrs-artcards .jet-listing-grid__item { display: flex; height: auto; }
.jrs-artcard {
  position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%;
  /* .brxe-block sets align-items:flex-start — without this the title shrinks to
     its longest word and wraps into a 350px tower. */
  align-items: stretch;
  background: var(--white); border: var(--rule-structural); padding: var(--space-s);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.jrs-artcard:hover { border-color: var(--brand-deep); }
.jrs-artcard__type {
  align-self: flex-start; font-size: var(--text-micro); font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--on-brand); background: var(--brand); padding: 2px 7px;
}
.jrs-artcard__title {
  font-size: var(--h4); line-height: 1.35; font-weight: var(--fw-head);
  color: var(--heading-page); margin: 0; padding-top: 0; border-top: 0;
}
.jrs-artcard__title a { color: inherit; text-decoration: none; }
.jrs-artcard__title a::after { content: ""; position: absolute; inset: 0; }
.jrs-artcard:hover .jrs-artcard__title { color: var(--primary-hover); }
.jrs-artcard:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-artcard__title a:focus-visible { outline: none; }
.jrs-artcard__authors { font-size: var(--text-meta); color: var(--ink); margin: 0; }
.jrs-artcard__cite {
  font-size: var(--text-micro); color: var(--neutral-600);
  margin: auto 0 0; padding-top: var(--space-2xs); font-variant-numeric: tabular-nums;
}

/* Attachment captions never belong in a listing. Bricks renders the media
   library's caption as a <figcaption> whenever the image element's `caption`
   control is unset, and several book covers carry a source credit — which
   landed on top of the artwork. The elements are set to caption:none, and this
   is the safety net for any listing image added later. */
.jet-listing-grid__item figcaption.bricks-image-caption { display: none; }

/* --- reviews: covers only --- */
/* JetEngine only defines column classes up to 6, so `columns: 8` fell back to
   one. The covers set their own track size instead. */
.jrs-covers .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--space-s);
}
.jrs-covers .jet-listing-grid__item { display: block; width: auto; }
.jrs-cover { position: relative; display: block; width: 100%; align-items: stretch; }
/* the same shrink-to-fit trap: before Bricks swaps its lazy-load placeholder the
   image has almost no intrinsic width, and the column collapsed to 4px. */
.jrs-cover__img { display: block; width: 100%; }
.jrs-cover__img img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: var(--rule-structural);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.jrs-cover:hover .jrs-cover__img img { border-color: var(--brand-deep); }
.jrs-cover__title {
  display: block; margin: 6px 0 0; font-size: var(--text-micro); line-height: 1.35;
  color: var(--neutral-600);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jrs-cover__title a { color: inherit; text-decoration: none; }
.jrs-cover__title a::after { content: ""; position: absolute; inset: 0; }
.jrs-cover:hover .jrs-cover__title { color: var(--primary-hover); }

/* --- for libraries: three ruled columns --- */
.jrs-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: start; }
.jrs-lib > * { padding-inline: var(--space-m); border-right: var(--rule-structural); }
.jrs-lib > *:first-child { padding-left: 0; }
.jrs-lib > *:last-child { padding-right: 0; border-right: 0; }
.jrs-lib__title {
  font-size: var(--h4); font-weight: var(--fw-head); color: var(--heading-page);
  margin: 0 0 4px; padding-top: 0; border-top: 0;
}
.jrs-lib__text { font-size: var(--text-meta); color: var(--neutral-600); margin: 0 0 var(--space-xs); }
.jrs-lib__links { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-meta); }
.jrs-lib__links a { color: var(--brand-deep); font-weight: var(--fw-head); text-decoration: none; }
.jrs-lib__links a:hover { color: var(--primary-hover); text-decoration: underline; }

@media (max-width: 991px) {
  .jrs-hero, .jrs-feature { grid-template-columns: 1fr; gap: var(--space-m); }
  .jrs-herofigs {
    border-left: 0;
    border-top: var(--section-border);
    padding-left: 0;
    padding-top: var(--space-m);
  }
  .jrs-feature__cover { max-width: 220px; }
  .jrs-lib { grid-template-columns: 1fr; }
  .jrs-lib > * {
    padding-inline: 0; border-right: 0;
    border-bottom: var(--rule-structural); padding-block: var(--space-s);
  }
  .jrs-lib > *:last-child { border-bottom: 0; }
}

/* ===============================================================
   THE ACCOUNT DASHBOARD  —  /account/ and its sub-pages
   Built 2026-09-04 from bricks/account/*.dc.html (design canvas
   "JRS Member Dashboard"). Rendered by JetEngine Profile Builder:
   jet-engine-profile-menu in the rail, jet-engine-profile-content
   for the pane. Sub-pages: account, billing, submissions,
   downloads, profile.

   Every value here is a token. Nothing in this block is a one-off.
   =============================================================== */

/* --- the two-column shell: rail, one structural rule, content --- */
.jrs-acct {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0;
  max-width: var(--width-content);
  margin-inline: auto;
  width: 100%;
}
.jrs-acct__rail {
  padding-right: var(--space-l);
  border-right: var(--rule-structural);
}
.jrs-acct__pane { padding-left: var(--space-xl); min-width: 0; }

/* One column on tablet down: the rule becomes a horizontal one. */
@media (max-width: 900px) {
  .jrs-acct { grid-template-columns: 1fr; }
  .jrs-acct__rail {
    padding-right: 0;
    border-right: 0;
    padding-bottom: var(--space-m);
    border-bottom: var(--rule-structural);
  }
  .jrs-acct__pane { padding-left: 0; padding-top: var(--space-m); }
}

/* --- the rail menu. jet-engine-profile-menu emits its own markup,
       so these are descendant selectors, not child ones. --- */
.jrs-acct__rail .jet-profile-menu,
.jrs-acct__rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--rule-structural);
}
.jrs-acct__rail li { margin: 0; }
.jrs-acct__rail a {
  display: flex;
  align-items: center;
  min-height: 52px;                /* the 44px floor, with room */
  padding: var(--space-2xs) 0 var(--space-2xs) 20px;
  border-bottom: var(--rule-hairline);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease);
}
.jrs-acct__rail a:hover { color: var(--brand-deep); }
.jrs-acct__rail li:last-child a { border-bottom: var(--rule-structural); }

/* The green stub marks the page you are on. JetEngine's own active
   class has varied by version, so every spelling it has used is
   covered here rather than guessed at. */
.jrs-acct__rail .jet-profile-menu__item--active > a,
.jrs-acct__rail .jet-profile-menu-item--active > a,
.jrs-acct__rail li.active > a,
.jrs-acct__rail a[aria-current="page"] {
  padding-left: 17px;
  border-left: var(--rule-accent);
  font-weight: var(--fw-head);
  color: var(--brand-deep);
}

/* --- the access card: the one thing every member comes here to read --- */
.jrs-card {
  background: var(--grey);
  border: var(--box-quiet);
  padding: var(--space-m);
}
.jrs-card--plain  { background: var(--white); }
.jrs-card--warn   { border-left: var(--rule-accent); border-left-color: var(--warning); }

.jrs-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-m);
}

/* --- status badge. On --brand the text is black; that is the only
       colour allowed on it (--on-brand). --- */
.jrs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
  padding: 8px 13px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  line-height: 1;
}
.jrs-badge--warn    { background: transparent; border: 1px solid var(--warning); color: var(--warning); padding: 7px 12px; }
.jrs-badge--neutral { background: transparent; border: 1px solid var(--neutral-400); color: var(--neutral-600); padding: 7px 12px; }

/* --- the fact row: renews / rate / member since.
       Column rules, gap 0, padding inside the cells: the same
       mechanism as .rule-columns, which is how the rest of the
       site draws structure. --- */
.jrs-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: var(--rule-structural);
}
.jrs-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jrs-facts > * {
  padding-inline: var(--space-m);
  border-right: var(--rule-structural);
}
.jrs-facts > *:first-child { padding-left: 0; }
.jrs-facts > *:last-child  { padding-right: 0; border-right: 0; }

.jrs-fact__label {
  display: block;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin-bottom: var(--space-2xs);
}
.jrs-fact__value {
  display: block;
  font-size: var(--h4);
  font-weight: var(--fw-head);
  color: var(--ink);
  line-height: 1.3;
}

@media (max-width: 700px) {
  .jrs-facts, .jrs-facts--2 { grid-template-columns: 1fr; }
  .jrs-facts > * {
    padding-inline: 0;
    border-right: 0;
    border-bottom: var(--rule-hairline);
    padding-block: var(--space-xs);
  }
  .jrs-facts > *:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------------
   BENEFITS, GROUPED  (Monica, 2026-09-09: "can you groups them? like
   journal, community platform, upcoming conference, members events, RSN")

   Each group is a real Bricks block carrying a Bricks CONDITION on
   {jrs_membership_route}, so which groups appear is set in the builder and
   the words inside them are editable there too. A library subscription
   shows the journal group and nothing else.
   --------------------------------------------------------------------- */
.jrs-bengroups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-xl);
  align-items: start;
}
.jrs-bengroup {
  border-top: var(--rule-structural);
  padding-top: var(--space-xs);
}
.jrs-bengroup__title {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 var(--space-2xs);
}
@media (max-width: 700px) { .jrs-bengroups { grid-template-columns: 1fr; } }

/* A benefit row. The tick is DRAWN, not an icon and not inline SVG, so every
   item can stay a plain text element that Monica can edit in the builder. */
.jrs-benefit {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 26px;
  border-bottom: var(--rule-hairline);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink);
}
.jrs-benefit:last-child { border-bottom: 0; }
.jrs-benefit::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1.05em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(-45deg);
}
/* Anything not yet settled reads as provisional rather than promised. */
.jrs-benefit--pending { color: var(--warning); }
.jrs-benefit--pending::before { border-color: var(--warning); }

/* ---------------------------------------------------------------------
   THE STACK, THROUGH PROFILE BUILDER'S WRAPPER.

   Monica, 2026-09-09: "there is no margin below the grey box and I told you
   before to have it on classes/variables that such blocks always need a
   margin below."

   The cause was structural, not a missing margin. `jet-engine-profile-content`
   renders its OWN wrapper div between .jrs-acct__pane and the sub-page
   template, so the pane's .jrs-stack only ever saw one child and had nothing
   to space. The wrapper itself has to be the stack.

   Fixed in two places so it cannot silently come back: the element carries
   .jrs-stack in the template, and the rule below catches the wrapper by its
   Bricks class even if that ever goes missing. No margin is written on the
   card itself: spacing stays a property of the stack, as everywhere else.
   --------------------------------------------------------------------- */
.jrs-acct__pane > .brxe-jet-engine-profile-content > * + * {
  margin-top: var(--flow-space, var(--stack));
}

/* --- row lists: recent downloads, your submissions --- */
.jrs-rowlist { display: flex; flex-direction: column; }
.jrs-rowlist__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s) 0;
  border-bottom: var(--rule-hairline);
}
.jrs-rowlist__item:last-child { border-bottom: 0; }
.jrs-rowlist__title {
  font-size: var(--text-body);
  font-weight: var(--fw-head);
  line-height: 1.4;
  color: var(--brand-deep);
  text-decoration: none;
}
.jrs-rowlist__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.jrs-rowlist__meta { font-size: var(--text-meta); color: var(--neutral-600); }

/* --- payment history: the JetEngine dynamic table, drawn with the
       line ladder instead of the plugin's boxes --- */
.jrs-acct-table table,
.jrs-acct-table .jet-dynamic-table__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-s);
}
.jrs-acct-table th {
  text-align: left;
  padding: 0 var(--space-s) var(--space-2xs) 0;
  border-bottom: var(--rule-edge);
  background: none;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
}
.jrs-acct-table td {
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-bottom: var(--rule-hairline);
  font-size: var(--text-body);
  color: var(--ink);
  vertical-align: top;
}
.jrs-acct-table th:last-child,
.jrs-acct-table td:last-child { padding-right: 0; text-align: right; }

/* amounts line up on the decimal */
.jrs-acct-table td.amount,
.jrs-acct-table .amount {
  font-weight: var(--fw-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the plugin ships its own borders and zebra striping; both fight the ladder */
.jrs-acct-table table,
.jrs-acct-table tr,
.jrs-acct-table tbody tr:nth-child(odd) { background: none; border: 0; }

@media (max-width: 700px) {
  .jrs-acct-table { overflow-x: auto; }
  .jrs-acct-table table { min-width: 520px; }
}

/* --- the signed-in identity block in the page head --- */
.jrs-acct-id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.jrs-acct-id__name { font-size: var(--h4); font-weight: var(--fw-head); color: var(--ink); }
.jrs-acct-id__email { font-size: var(--text-meta); color: var(--neutral-600); }
@media (max-width: 900px) {
  .jrs-acct-id { align-items: flex-start; text-align: left; margin-top: var(--space-s); }
}

/* --- the account page head: title left, identity right, stacking on
       tablet down. The pagehead class supplies the grey band and the
       black rule; this only sets the row. --- */
.jrs-acct-head {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-m) var(--space-xl);
}
.jrs-acct-head__title { display: flex; flex-direction: column; }

.jrs-acct-id__label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin: 0;
}
/* the rail's own heading needs a gap under it; the identity block
   gets its spacing from the flex gap instead */
.jrs-acct__rail > .jrs-acct-id__label { padding-bottom: var(--space-xs); }

/* Log out is a button ELEMENT (Bricks renders a link-less button as an
   inert span, so it has to be one) but must read as a quiet link. */
.jrs-acct-id__logout,
.jrs-acct-id__logout:hover {
  height: auto;
  padding: 0;
  margin-top: var(--space-2xs);
  background: none;
  border: 0;
  font-size: var(--text-meta);
  font-weight: var(--fw-body);
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jrs-acct-id__logout:hover { color: var(--primary-hover); }

@media (max-width: 900px) {
  .jrs-acct-head { align-items: flex-start; }
}

/* --- pieces of the access card, and the pane's section rhythm --- */
.jrs-card__headline { display: flex; flex-direction: column; gap: var(--space-2xs); }
.jrs-card__title {
  font-size: var(--h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-head);
  color: var(--brand-deep);      /* NOT --heading-section: the light green is 1.9:1 on grey */
  margin: 0;
}
.jrs-card__actions {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-m);
}
.jrs-card__note {
  font-size: var(--text-micro);
  line-height: 1.6;
  color: var(--neutral-600);
  margin: var(--space-xs) 0 0;
  max-width: 76ch;
}
.jrs-acct-section > .jrs-sechead + * { margin-top: var(--space-s); }

/* --- ADMIN PREVIEW BAR -------------------------------------------------
   Only a user with manage_options is ever served this markup (the tag
   returns '' for everyone else), so there is no visibility rule here.
   Deliberately does NOT look like the site: it is scaffolding, and it
   should be impossible to mistake for a member-facing component.
   ---------------------------------------------------------------------- */
.jrs-preview-bar {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-m);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--black);
  color: var(--on-black-text);
  font-size: var(--text-micro);
}
.jrs-preview-bar__label {
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand);
}
.jrs-preview-bar__item {
  padding: 4px 9px;
  border: 1px solid var(--on-black-mute);
  color: var(--on-black-text);
  text-decoration: none;
  line-height: 1.4;
}
.jrs-preview-bar__item:hover { border-color: var(--brand); color: var(--brand); }
.jrs-preview-bar__item.is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);       /* black on the light green — the only readable pairing */
  font-weight: var(--fw-head);
}
.jrs-preview-bar__note { color: var(--on-black-mute); margin-left: auto; }

/* While previewing, the page wears a green edge so a screenshot can never be
   mistaken for what a member actually sees. */
body.jrs-previewing #brx-content { box-shadow: inset 0 0 0 3px var(--brand); }

/* ---------------------------------------------------------------------
   THE CHANGE-PASSWORD FORM  (/account/password/)

   Not a jet-form-builder-form, so it does not use .jrs-form: JetFormBuilder
   cannot set a password (verified 2026-09-09, `wp_set_password` appears
   nowhere in the plugin), so this form is rendered by jrs-account-password.php.
   The field geometry is deliberately the same as .jrs-form's: 44px controls,
   square corners, one hairline border.
   --------------------------------------------------------------------- */
.jrs-pwform { display: flex; flex-direction: column; gap: var(--space-s); max-width: 34rem; }
.jrs-pwform__row { display: flex; flex-direction: column; margin: 0; }

.jrs-pwform__label {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--neutral-600);
  margin-bottom: var(--space-2xs);
}
.jrs-pwform__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--neutral-400);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink);
  box-sizing: border-box;
}
.jrs-pwform__input:focus {
  outline: 2px solid var(--brand-deep);
  outline-offset: 1px;
  border-color: var(--brand-deep);
}
.jrs-pwform__hint,
.jrs-pwform__forgot {
  font-size: var(--text-micro);
  line-height: 1.5;
  color: var(--neutral-600);
  margin: var(--space-2xs) 0 0;
}
.jrs-pwform .jrs-btn { align-self: flex-start; }

/* The result of the last attempt. Stated in words, with a colour that is not
   the only thing carrying the meaning. */
.jrs-formnotice {
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border-left: var(--rule-accent);
  font-size: var(--text-body);
  line-height: 1.5;
  background: var(--grey);
}
.jrs-formnotice--ok  { border-left-color: var(--success); }
.jrs-formnotice--bad { border-left-color: var(--warning); color: var(--warning); }

/* ---------------------------------------------------------------------
   THE OVERVIEW PANELS: recent downloads beside recent submissions.
   Two cells divided by one column rule, which becomes a horizontal rule
   when they stack. Same mechanism as .rule-columns and .jrs-facts:
   gap 0, padding inside the cells, so the rule runs the full height.
   --------------------------------------------------------------------- */
.jrs-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.jrs-panels > * {
  padding-inline: var(--space-l);
  border-right: var(--rule-structural);
}
.jrs-panels > *:first-child { padding-left: 0; }
.jrs-panels > *:last-child  { padding-right: 0; border-right: 0; }

.jrs-panel { display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }

@media (max-width: 900px) {
  .jrs-panels { grid-template-columns: 1fr; }
  .jrs-panels > * {
    padding-inline: 0;
    padding-block: var(--space-m);
    border-right: 0;
    border-bottom: var(--rule-structural);
  }
  .jrs-panels > *:first-child { padding-top: 0; }
  .jrs-panels > *:last-child  { padding-bottom: 0; border-bottom: 0; }
}