/* =====================================================================
   BASE CORRECTIONS  —  loaded straight after jrs-design-system.css

   Corrections to base-layer classes. A SEPARATE FILE, not an edit of the
   118KB base: two hand-merges into that file vanished silently on 2026-09-04
   (troubleshooting log). Same pattern as every component sheet.

   ---------------------------------------------------------------------
   THE RULE THESE ENFORCE  (Monica, 2026-08-29 and again 2026-09-09):

     CONTENT FILLS ITS BLOCK.

   A text block capped NARROWER than its container, and left-aligned, puts all
   the slack on one side and reads as broken — "an empty space on the right".
   A reading measure is only legitimate when something else occupies the rest
   of the row: a real second column. Otherwise the cap comes off.

   This is the same fault that retired `.jrs-read` (720px inside a 1140 grid,
   420px of dead space on every page). It came back through a different door —
   `max-width` in `ch` on individual elements instead of a wrapper.
   ===================================================================== */

/* ---------------------------------------------------------------
   LISTING ROWS  —  the case Monica named
   A row is a horizontal band with nothing to the right of the title, so a
   62ch cap left 401px empty on every row of the issue contents and the
   article archive. The title uses the row.
   --------------------------------------------------------------- */
.jrs-art__title { max-width: none; }

/* ---------------------------------------------------------------
   PAGE TITLE BAND
   The standfirst sits alone in a 1140 band, so 46ch left 581px empty.
   ⚠️ This changes EVERY page-title band on the site, which is the point —
   it is the same band everywhere — but it is the one correction here with
   site-wide visual reach. Revert this single line if it reads too wide.
   --------------------------------------------------------------- */
.jrs-pagehead__standfirst { max-width: none; }

/* ---------------------------------------------------------------
   WHAT IS DELIBERATELY LEFT CAPPED

   `.jrs-pullquote` (44ch) — a pull quote is a typographic device that is
   MEANT to be narrow, and its accent rule makes the indent read as intended
   rather than as a shortfall.

   `.measure` (65ch) — legitimate INSIDE a real column, e.g. the 456px aside,
   where the cap never binds. It is removed from the markup wherever it was
   sitting in a full-width block instead.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   LIBRARY SUBSCRIPTIONS PAGE (11272) - added 2026-09-09
   Two new things: the rate cards, and the fixes .jrs-lib needs to
   survive being put on a black band.
   --------------------------------------------------------------- */

/* The rate cards. "A series gets rules, a standalone thing gets a box",
   so these are boxes: white on the grey band, 1px black, square corners.
   Deliberately NOT Bricks' pricing-tables element - it is on the avoid
   list in widget-map.md because its own styling fights the tokens. */
.jrs-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-m);
}
.jrs-rate {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  background: var(--bg);
  border: var(--box-filled);
  padding: var(--space-l);
}
.jrs-microlabel {
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0;
}
.jrs-rate__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
}
.jrs-rate__per {
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  color: var(--text-mute);
}
.jrs-rate__list {
  list-style: none;
  margin: 0;
  padding: var(--space-s) 0 0;
  border-top: var(--rule-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* .jrs-lib was written for a white ground and is defined LATE in the base
   file, so on a black band its own colours beat .jrs-band--black's at equal
   specificity. Deep green on black is 3.54:1, which the palette rules forbid
   outright. Scoped to the black band, so the home page's use is untouched. */
.jrs-band--black .jrs-lib > * { border-color: #333333; }
.jrs-band--black .jrs-lib__text { color: var(--on-black-mute); }
.jrs-band--black .jrs-lib__links a { color: var(--brand); }
.jrs-band--black .jrs-lib__links a:hover { color: var(--white); }

/* Fine print under the metadata columns: ISSNs, DOI prefix, Scholar tags. */
.jrs-libnote {
  margin: 0;
  padding-top: var(--space-s);
  border-top: 1px solid #333333;
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  color: var(--on-black-mute);
}

/* Generic column heading, --h4 sized, for a column that is not a section
   in its own right. Named for the job, not for one component, because
   three class collisions in two days all came from reusing a component
   name in good faith. */
.jrs-coltitle {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0 0 var(--space-2xs);
  padding-top: 0;
  border-top: 0;
}

/* The rates section moved onto the black band (Monica, 2026-09-09). Filling a
   black band with white boxes would defeat the point of the band, so the cards
   become part of the black: transparent, hairline border, brand green on the
   price. .jrs-band--black sets a near-white text colour on the whole band, so
   without these rules the cards would have kept their white background and
   rendered near-white text on it - invisible. */
.jrs-band--black .jrs-rate {
  background: transparent;
  border-color: var(--on-black-mute);
  color: var(--on-black-text);
}
.jrs-band--black .jrs-rate__price { color: var(--brand); }
.jrs-band--black .jrs-rate__per,
.jrs-band--black .jrs-microlabel { color: var(--on-black-mute); }
.jrs-band--black .jrs-rate__list { border-top-color: #333333; }
.jrs-band--black .jrs-sechead__note { color: var(--on-black-mute); }
.jrs-band--black .jrs-cols { border-top-color: #333333; }
.jrs-band--black .jrs-cols__col {
  border-right-color: #333333;
  border-bottom-color: #333333;
}

/* ---------------------------------------------------------------
   HEADER FIT, 991px and up  (2026-09-09)

   The desktop nav and the "Go to the Network" button overlapped at every
   width from the mobile-menu handover at 991 up to about 1330, worst around
   1100 where the button printed straight over "Contact us". Monica could not
   see it because her window is wider than that band.

   Root cause was not the button. TWO spacing mechanisms were stacked on the
   nav: a column-gap on the list AND a 30px margin-left on every item, so the
   real space between items was ~42px and six items burned 210px of pure gap.
   Monica spotted that the gaps looked too big, which is what led here.

   Measured on staging: the gap between the nav and the button goes from
   -258px at 992 and -232 at 1024 to +4 and +24 with these rules.
   --------------------------------------------------------------- */
@media (min-width: 991px) {
  /* one spacing mechanism, fluid, instead of two stacked fixed ones.
     !important because Bricks emits these on #brxe-jrsnav, an ID selector
     that a bare class rule loses to. Without it the gap silently stayed at
     Bricks' 12px and the overlap only halved. */
  .bricks-nav-menu > li { margin-left: 0; }
  .bricks-nav-menu { column-gap: clamp(8px, 0.45vw + 3.5px, 28px) !important; }

  #brx-header .jrs-header-nav { column-gap: 12px !important; }
  .jrs-btn--net { padding: 10px 16px !important; }
}

/* Between the handover at 990 and 1100 the full label still does not fit, so
   the button reads just "Network" in that band. The real text node stays in
   the DOM, so the accessible name is unchanged: a screen reader still
   announces "Go to the Network". The ::after arrow needs its font-size
   restated because the parent's is zeroed to collapse the label.

   12px, not var(--btn-size-sm): that token is 0.875rem = 14px, but the button
   actually renders at 12px because Bricks sets the size on #brxe-jrscta. The
   pseudo-label has to match what the button really is, not what the token
   says, or the swapped label comes out visibly bigger than the real one. */
@media (min-width: 991px) and (max-width: 1099.98px) {
  /* padding tightens too: at 992 exactly, the short label alone still left a
     5px overlap, and 992 is the first width the desktop nav appears at. */
  .jrs-btn--net { font-size: 0; padding-inline: 12px !important; }
  .jrs-btn--net::before { content: "Network"; font-size: 12px; }
  .jrs-btn--net::after { font-size: 12px; }
}

/* ---------------------------------------------------------------
   LOGIN POPUP  (2026-09-10)

   Magic Login's honeypot renders its label visibly inside the popup -
   "Leave this field empty" sat under the email box - because the plugin's own
   stylesheet does not load in that context.

   Hidden the way a honeypot must be: off-screen but still in the DOM, still
   focusable and still fillable, so it keeps catching bots. `display: none`
   would be simpler and worse, because a bot that skips hidden inputs would
   then sail through.
   --------------------------------------------------------------- */
.magic-login-form-state {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}