/*
 * stacks-policies.css — styles for the Editorial Policies page.
 *
 * SHARED ON PURPOSE: the WordPress template and the in-app admin preview both
 * load THIS file, so the preview is the page. (The article styles in
 * stacks-article.css are mirrored by hand into React components and have
 * drifted before; this page deliberately avoids that.)
 *
 * Every rule is scoped under .sjp-policy so the WordPress theme's own styles
 * can't leak in and ours can't leak out. Tokens match the app: brand #7448FF,
 * deep #2D2163, tint #F4F1FF, ink #2C2C2C, Open Sans. Design approved by David
 * in the mockup on 2026-10-07.
 */
.sjp-policy {
  --sjp-brand: #7448FF;
  --sjp-brand-dark: #513CA3;
  --sjp-deep: #2D2163;
  --sjp-tint: #F4F1FF;
  --sjp-ink: #2C2C2C;
  --sjp-muted: #5b5b66;
  --sjp-line: #d9d4e6;
  /* ONE size for a section heading ("Journal Information") and for the values in the boxes under
     the title, so they stay the same size if either is ever changed (David, 2026-10-07). */
  --sjp-section-size: 26px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: var(--sjp-ink);
  font-size: 16px;
  line-height: 1.7;
  /* ⚠️ THE SAME 1080px AS THE SITE HEADER'S CONTENT ROW, measured on the live page
     2026-10-20: the logo's left edge and the Join Us button's right edge sit at 216
     and 1296 in a 1512px window, and the policy page was 1120px — 20px proud on each
     side, so the tinted band visibly overhung the header above it. David: "I also
     think they should be the same width as the Stacks in the header... right now it
     looks a little funky." If the theme's content width ever changes, this follows it. */
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
}
.sjp-policy *, .sjp-policy *::before, .sjp-policy *::after { box-sizing: border-box; }
.sjp-policy a { color: var(--sjp-brand); text-decoration: underline; text-underline-offset: 2px; }
.sjp-policy a:hover { color: var(--sjp-brand-dark); }

/* Hero */
/* ── Clearing the site's own fixed header ────────────────────────────────────
   --sjp-chrome is the height of whatever fixed bar the SITE puts across the top
   of the window. stacks-policies.js measures it and sets it; it is 0 where there
   is none, which is the in-app preview (/admin/policies/preview) — the same
   stylesheet serves both, so a hard-coded 72px would push the preview down by a
   header that is not there. Everything that has to sit below the bar, or land
   below it after a jump, is written as calc(var(--sjp-chrome, 0px) + 16px). */
:root {
  --sjp-chrome: 0px;
  /* The lead-in a SECTION heading carries before its words: 24px of padding over a
     1px rule (see .sjp-body h2 below — change both together). A jump has to land the
     TITLE level with the top of the contents card, not the heading's box, so the
     scroll margin backs this out. Subsections have no lead-in and need no correction. */
  --sjp-h2-lead: 25px;
}
/* ⚠️ THE SITE HEADER OVERLAPS THE TOP OF THE PAGE. It is `position: fixed`, so it is
   out of the flow and the document starts underneath it — which put the document title
   and the contents card's search box behind the bar the moment these pages started
   rendering inside the theme's Global Header (David, 2026-10-20).
   The height goes on whichever block comes FIRST, as extra top padding, rather than on
   .sjp-policy as a margin: the hero's tint then runs all the way up behind the bar
   instead of leaving a strip of page background above it. An archived version opens
   with the amber "superseded" banner instead, so that gets the same treatment.
   Both fall back to 0, which is the in-app preview, where there is no bar. */
.sjp-policy > .sjp-hero:first-child { padding-top: calc(var(--sjp-chrome, 0px) + 36px); }
.sjp-policy > .sjp-banner:first-child { padding-top: calc(var(--sjp-chrome, 0px) + 12px); }
/* ⚠️ NO TINTED BAND, deliberately. David, 2026-10-20, looking at the live page:
   "can we try getting rid of the light purple header". The rule UNDER it stays —
   it is the only thing now separating the title block from the contents card and
   the body, and without it they run together. ⚠️ The fact tiles in this block are
   white (.sjp-fact), so on a white hero they are held apart by their 1px border
   alone; if they ever read as flat, give them the tint rather than bringing the
   band back. */
.sjp-hero { background: #fff; padding: 36px 32px 28px; border-bottom: 1px solid var(--sjp-line); scroll-margin-top: calc(var(--sjp-chrome, 0px) + 16px); }
/* 15px, up from 12px. David, same note: "amkign STACKS JOURNAL bigger". The
   .08em tracking stays — tracked-out uppercase needs the air, and it is what keeps
   this line reading as a label rather than competing with the 34px title below. */
.sjp-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sjp-brand-dark); }
.sjp-hero h1 { font-size: 34px; line-height: 1.2; font-weight: 700; color: var(--sjp-deep); margin: 6px 0 8px; }
.sjp-meta { font-size: 14px; color: var(--sjp-muted); }
.sjp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; }
.sjp-fact { background: #fff; border: 1px solid var(--sjp-line); border-radius: 8px; padding: 10px 14px; }
.sjp-fact-wide { grid-column: span 2; }  /* long values (a list) get double width; undone on phones below */
.sjp-fact-link { display: block; text-decoration: none; color: inherit; }
.sjp-fact-link:hover { border-color: var(--sjp-brand); }
.sjp-fact-link .sjp-fact-value { color: var(--sjp-brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.sjp-fact-label { font-size: 12px; color: var(--sjp-muted); }
.sjp-fact-value { font-size: var(--sjp-section-size); font-weight: 700; line-height: 1.25; color: var(--sjp-deep); overflow-wrap: anywhere; }

/* Previous-versions page: one centred column, no contents card */
.sjp-solo { max-width: 760px; margin: 0 auto; padding: 32px 24px 48px; }
.sjp-versions { list-style: none; margin: 0; padding: 0; }
.sjp-versions li { padding: 14px 0; border-bottom: 1px solid #ece8f5; font-size: 17px; }
.sjp-version-date { color: var(--sjp-muted); font-size: 14px; margin-left: 10px; }
.sjp-version-current { background: var(--sjp-tint); color: var(--sjp-brand-dark); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }

/* Superseded banner (archived versions only) */
.sjp-banner { background: #FFF3D6; color: #7A5200; border-bottom: 1px solid #f0d9a0; padding: 12px 32px; font-size: 14px; }
.sjp-banner a { color: #7A5200; font-weight: 600; }

/* Two columns: sticky TOC + body */
.sjp-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
/* Documents with no contents card (the Privacy Policy and the Terms) run as one
   column. The body already caps its lines at 72ch, so without centring the column
   the text would hug the left edge with a wide empty margin beside it. */
.sjp-layout.sjp-no-contents { grid-template-columns: minmax(0, 1fr); }
.sjp-layout.sjp-no-contents .sjp-body { max-width: none; margin: 0; padding-left: 32px; padding-right: 32px; }
/* With no contents card beside it, the text uses the column it is given rather than a
   centred strip inside it: 820px centred inside 1080 left a wide blank margin on both
   sides and started the text 211px right of the logo. ⚠️ The 72ch cap goes with it —
   it is what kept each paragraph narrow even once the column was wide. The 32px side
   padding matches the hero's, so the document title and the body text start on the
   same line down the page.
   ⚠️ The honest cost: at a 1512px window these lines run about 124 characters, well
   past the 60-90 that is comfortable to read. That is the trade David chose when he
   asked for full width, with the contents card gone. */
.sjp-layout.sjp-no-contents .sjp-body > * { max-width: none; }
.sjp-toc {
  position: sticky; top: calc(var(--sjp-chrome, 0px) + 16px);
  max-height: calc(100vh - var(--sjp-chrome, 0px) - 32px); overflow-y: auto;
  margin: 16px 0 16px 16px; padding: 0 12px 18px;
  background: #fff; border: 1px solid var(--sjp-line); border-radius: 12px;
  /* A card with a soft shadow, not a flat column: the box ends wherever its
     list ends, and a flat background there looked cut off (David, 2026-10-07). */
  box-shadow: 0 4px 18px rgba(45, 33, 99, .10);
}
/* Document title pinned at the top of the sticky column (David, 2026-10-07). Hidden on phones, where the hero is right above. */
.sjp-toc .sjp-toc-title { display: block; padding: 0 10px 12px; margin-bottom: 0; border-left: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--sjp-deep); }
.sjp-toc .sjp-toc-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sjp-brand-dark); margin-bottom: 2px; }
/* ⚠️ Hidden only when the script has run (.sjp-js). With JS off the title just stays visible,
   which is harmless; the reverse (hidden with no script to reveal it) would lose it. The hero
   shows the same title at the top of the page, so there it would be a duplicate. */
.sjp-js .sjp-toc .sjp-toc-title { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; transition: max-height .2s, opacity .2s; }
.sjp-js.sjp-scrolled .sjp-toc .sjp-toc-title { max-height: 90px; opacity: 1; padding-bottom: 12px; }
.sjp-toc .sjp-toc-title:hover { color: var(--sjp-brand); }
.sjp-toc summary { display: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sjp-muted); padding: 8px 10px; cursor: pointer; list-style: none; }
.sjp-toc summary::-webkit-details-marker { display: none; }
.sjp-toc ul { list-style: none; margin: 0; padding: 0; }
.sjp-toc li { margin: 0; padding: 0; }
.sjp-toc a { display: block; padding: 5px 10px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.4; color: var(--sjp-ink); text-decoration: none; }
.sjp-toc a:hover { color: var(--sjp-brand); }
.sjp-toc .sjp-toc-l3 { display: none; }
.sjp-toc .sjp-toc-l3 a { padding-left: 22px; font-size: 12px; color: var(--sjp-muted); }
/* Search: hidden until the script runs (it can do nothing without it). The grey line under it
   is the divider David asked for between search and the sections. */
.sjp-head { position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 18px; padding-bottom: 10px; }
/* ⚠️ The card scrolls (overflow-y:auto on .sjp-toc) and this header sticks inside it. The card's top
   padding is therefore INSIDE the header (padding-top above), not on the card: with padding on the
   card, list text scrolled up through that gap above the "stuck" header (David: header must always
   be visible, 2026-10-07). */
.sjp-search { display: none; padding: 0 2px 12px; border-bottom: 1px solid #ece8f5; position: relative; }
/* ⚠️ Chrome draws its own clear cross on input[type=search]; hidden so there
   is not a second one beside ours. */
.sjp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sjp-search-clear { position: absolute; top: 0; right: 2px; height: 34px; width: 30px;
  display: flex; align-items: center; justify-content: center; background: none; border: 0;
  padding: 0; font-size: 16px; line-height: 1; color: var(--sjp-muted); cursor: pointer; }
.sjp-search-clear:hover { color: var(--sjp-brand); }
.sjp-search-clear[hidden] { display: none; }
.sjp-js .sjp-search { display: block; }
/* Magnifying glass: an inline SVG data-URI, so the WordPress page needs no extra file and
   cannot show a broken image. Stroke colour is the muted grey (#5b5b66, URL-encoded). The
   screen-reader label stays the longer "Search these policies" (aria-label in the markup). */
.sjp-search-input { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px 8px 32px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5b66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") no-repeat 10px center; border: 1px solid var(--sjp-line); border-radius: 8px; color: var(--sjp-ink); }
.sjp-search-input:focus { outline: 2px solid var(--sjp-brand); outline-offset: 0; border-color: transparent; }
.sjp-results { margin: 0; }
.sjp-results[hidden] { display: none; }
.sjp-searching .sjp-toc-list { display: none; }
.sjp-results ul { list-style: none; margin: 0; padding: 0; }
.sjp-toc .sjp-result { display: block; padding: 8px 10px; border-left: 2px solid transparent; border-radius: 4px; }
.sjp-toc .sjp-result:hover { background: var(--sjp-tint); border-left-color: var(--sjp-brand); }
.sjp-result-title { font-size: 13px; font-weight: 600; color: var(--sjp-deep); line-height: 1.35; }
.sjp-result-crumb { font-size: 11px; color: var(--sjp-muted); }
.sjp-result-snippet { font-size: 12px; color: var(--sjp-ink); line-height: 1.45; margin-top: 2px; }
.sjp-result-snippet mark { background: #FFF3D6; color: inherit; border-radius: 2px; padding: 0 1px; }
.sjp-results-empty { font-size: 13px; color: var(--sjp-muted); padding: 8px 10px; }
/* The instance tally, under the search divider: context for the list, not an
   entry in it. Matches the article's contents card. */
.sjp-results-tally { font-size: 11px; color: var(--sjp-muted); padding: 8px 10px 2px; }
/* The section a run of snippets belongs to — a heading, not a link. */
.sjp-result-section { font-size: 13px; font-weight: 600; color: var(--sjp-deep); padding: 10px 10px 2px; }
/* The section name is a link (see stacks-policies.js): it has to look like the rest of
   the heading, not like body copy, and pick up the same hover as a snippet below it. */
.sjp-result-section-link { color: inherit; text-decoration: none; display: block; border-radius: 4px; }
.sjp-result-section-link:hover { color: var(--sjp-brand); }
.sjp-result-count { font-weight: 400; color: var(--sjp-muted); }
.sjp-results .sjp-result { padding-left: 18px; }
/* The script marks the current section's group "sjp-open" so only the subsections you're inside are shown. */
.sjp-toc .sjp-toc-l3.sjp-open { display: block; }
.sjp-toc a.sjp-current { border-left-color: var(--sjp-brand); background: var(--sjp-tint); color: var(--sjp-brand-dark); font-weight: 600; }

/* Body */
.sjp-body { padding: 28px 40px 48px; min-width: 0; }
.sjp-body > * { max-width: 72ch; }
.sjp-body h2 { font-size: var(--sjp-section-size); line-height: 1.3; font-weight: 700; color: var(--sjp-deep); margin: 52px 0 10px; padding-top: 24px; border-top: 1px solid #ece8f5; scroll-margin-top: calc(var(--sjp-chrome, 0px) + 16px - var(--sjp-h2-lead)); }
/* The first section has no rule above it, so it has no lead-in to back out either. */
.sjp-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; scroll-margin-top: calc(var(--sjp-chrome, 0px) + 16px); }
.sjp-body h3 { font-size: 19px; line-height: 1.35; font-weight: 700; margin: 30px 0 6px; scroll-margin-top: calc(var(--sjp-chrome, 0px) + 16px); }
.sjp-body h4 { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--sjp-brand-dark); margin: 22px 0 4px; scroll-margin-top: calc(var(--sjp-chrome, 0px) + 16px); }
.sjp-body p { margin: 0 0 14px; }
/* ⚠️ DIVI RESETS LISTS SITE-WIDE: style-static.min.css carries
   `ol, ul { list-style: none }`. These pages render inside the theme, so every bullet
   and every number disappeared — including the numbered Criteria for Publication,
   where the numbers are referred to in the text ("a vote to reject should say which
   of these criteria the manuscript does not meet"), so it was a content bug and not
   only a cosmetic one. David, 2026-10-20: "dot points don't show up on either page".
   Our own `.sjp-body ul` rule set the padding but never put the marker back.
   ⚠️ Scoped to .sjp-body on purpose: the contents list and the versions list are
   deliberately unbulleted, and the turnaround tiles are divs rather than list items. */
.sjp-body ul { list-style: disc outside; }
.sjp-body ol { list-style: decimal outside; }
.sjp-body ul ul { list-style: circle outside; }
.sjp-body ul, .sjp-body ol { margin: 0 0 14px; padding-left: 24px; }
.sjp-body li { margin-bottom: 4px; }
/* ⚠️ THE "#" CONTROLS OUTLIVE THEIR STYLESHEET. 0.6.49 stopped the renderer emitting
   them and deleted the rules that used to hide them until hover — but the plugin and
   the app ship on different days, and the HTML already stored in WordPress still
   carries one per heading. With the rules gone they had nothing hiding them, so every
   heading on the live page showed a permanent "#": worse than the hover behaviour
   David asked to remove. This hides any that remain, and costs nothing once the
   re-rendered pages no longer contain them.
   (Found 2026-10-20 by looking at the live page after updating, which is the only
   reason it was caught before he saw it.) */
.sjp-anchor { display: none !important; }

.sjp-top { display: inline-block; margin: 6px 0 0; font-size: 13px; font-weight: 600; text-decoration: none; }

/* Turnaround stat tiles: label on top, "10 days" below — the SAME shape as the fact
   boxes under the page title, so the page has one card pattern (David, 2026-10-07).
   ⚠️ The value is pushed to the bottom of the tile (margin-top:auto) so the numbers
   line up across tiles even when one label wraps to two lines and its neighbour
   doesn't — which is the normal case here ("Time to find reviewers" vs "Desk Check"). */
.sjp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 10px 0 8px; max-width: 72ch; }
.sjp-stat { display: flex; flex-direction: column; background: var(--sjp-tint); border-radius: 8px; padding: 12px 14px; }
.sjp-stat-label { font-size: 12px; line-height: 1.35; color: var(--sjp-muted); }
.sjp-stat-value { margin-top: auto; padding-top: 6px; }
.sjp-stat-num { font-size: var(--sjp-section-size); font-weight: 700; line-height: 1.15; color: var(--sjp-deep); }
.sjp-stat-unit { font-size: 15px; font-weight: 600; color: #4B2F9E; }
.sjp-stats-note { font-size: 13px; line-height: 1.5; color: var(--sjp-muted); margin: 0 0 14px; max-width: 72ch; }

/* Acceptance-threshold table */
.sjp-body table { border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.sjp-body th, .sjp-body td { text-align: left; padding: 8px 16px; border-bottom: 1px solid var(--sjp-line); }
.sjp-body th { background: var(--sjp-tint); color: var(--sjp-deep); font-weight: 700; }

.sjp-footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid #ece8f5; font-size: 14px; }

/* Phones: TOC collapses into a "On this page" bar above the text */
@media (max-width: 860px) {
  .sjp-hero { padding: 26px 18px 22px; }
  .sjp-hero h1 { font-size: 26px; }
  .sjp-layout { grid-template-columns: minmax(0, 1fr); }
  .sjp-fact-wide { grid-column: auto; } /* one column on phones: a span would invent a second one */
  .sjp-toc { position: static; max-height: none; margin: 0; border: 0; border-bottom: 1px solid #ece8f5; border-radius: 0; box-shadow: none; padding: 10px 14px; }
  .sjp-toc[open], .sjp-toc details[open] ul { max-height: 60vh; overflow-y: auto; }
  .sjp-toc .sjp-toc-title { display: none; }
  .sjp-head { position: static; padding-top: 4px; }
  .sjp-toc summary { display: block; }
  /* Without this the bar looks like a label, not a button (seen in the phone render). */
  .sjp-toc summary::after { content: "\25BE"; float: right; font-size: 14px; }
  .sjp-toc details[open] summary::after { content: "\25B4"; }
  .sjp-toc .sjp-toc-l3 { display: none !important; }
  .sjp-body { padding: 22px 18px 40px; }
  .sjp-banner { padding: 12px 18px; }
}

/* Small phones: the boxes stack, one per row. */
@media (max-width: 560px) { .sjp-facts { grid-template-columns: 1fr; } }

/* The gold flash on a search-result jump — the same treatment as the article
   page's contents card, added by stacks-policies.js and removed when its
   FLASH_MS runs out. Drawn with box-shadow rather than a border so the
   element's box never changes and the text cannot twitch sideways. */
/* ⚠️ AN EXACT COPY OF THE ARTICLE'S ANIMATION, in stacks-article.css. Keep
   the two identical: the colour, the 3.2s and the 3px spread are all values
   David settled by looking at the article page, and a policies page that
   flashed differently would read as a bug. It is written out rather than
   shared because the two stylesheets have separate token blocks.
   ⚠️ #FFDE99 IS THE SUBJECT-PILL GOLD, replacing the abstract panel's pale
   cream (#fff8e5) this used to use. David asked for the cream, saw it, and
   reversed: "maybe it should be the same gold as the stacks at the top of the
   page so it stands out more".
   ⚠️ 3.2s AND stacks-policies.js's FLASH_MS MUST AGREE. The script is what
   takes the class off; shorter there and the fade is chopped off mid-way. */
@keyframes sjp-flash-gold {
  0%   { background-color: #FFDE99; box-shadow: 0 0 0 3px #FFDE99; }
  80%  { background-color: #FFDE99; box-shadow: 0 0 0 3px #FFDE99; }
  100% { background-color: transparent; box-shadow: 0 0 0 3px rgba(255, 222, 153, 0); }
}
/* `clone` so a highlighted sentence that wraps gets its background and shadow
   drawn around EVERY line fragment, not once around the whole inline box —
   which would leave the first line's right end and the last line's left end
   unpainted. */
.sjp-policy .sjp-flash {
  animation: sjp-flash-gold 3.2s ease-out 1;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* A flashing block is what this setting exists to prevent. */
@media (prefers-reduced-motion: reduce) { .sjp-policy .sjp-flash { animation: none; } }

/* Printing: the page is cited and filed. Drop navigation, keep the text. */
@media print {
  .sjp-toc, .sjp-top { display: none !important; }
  .sjp-layout { display: block; }
  .sjp-body { padding: 0; }
  .sjp-hero { background: none; border: 0; padding: 0 0 12px; }
  .sjp-body a { color: inherit; }
}