/* Cornerstone Preprints
   ---------------------
   Design brief, written down so the next person can argue with it.

   A repository is a publication, not a database front end. SSRN and bioRxiv
   look like the latter and read like it; eLife and PLOS look like the former.
   The target is the former, and the way there is not "more white space" — the
   first attempt at this file was pale, uniform and forgettable, which is what
   happens when a page has type and nothing else.

   So: a masthead with real weight, a warm paper ground rather than clinical
   white, one colour per subject used as a spine so the eye can navigate by
   hue, and a contents page rather than a list of divs.

   Two families. A serif carries anything anybody actually reads. A sans
   carries anything anybody scans. No framework, no webfont, one request. */

/* Palette and type taken from the August 2026 interface prototype in
   design-review/, which is the design this site is being brought in line with.
   The ground is a warm cream rather than white, the blue is a shade brighter
   and the navy a shade deeper, and the neutrals lean slightly cool against
   them. The masthead is the one thing that does not follow the prototype: it
   stays navy here rather than white. */
:root {
  --navy:       #071a2f;
  --navy-deep:  #04121f;
  --navy-soft:  #0d2947;
  --gold:       #d59c2f;
  --gold-lift:  #e8b84a;
  --gold-wash:  #fff9e9;

  --cream:      #f7f4ed;
  --paper:      #ffffff;
  --paper-deep: #eef4f7;
  --card:       #ffffff;

  --ink:        #152334;
  --ink-soft:   #617080;
  --ink-faint:  #7d8b99;
  --rule:       #dce2e5;
  --rule-soft:  #edf0f2;

  --link:       #1267a5;
  --link-lift:  #0b568c;

  --shadow:     0 20px 60px rgba(7,26,47,.1);

  /* The page shell. The masthead used to begin fifty pixels from the edge of a
     1280 screen, which reads as an indent rather than as the edge of the page. */
  --shell:      1320px;
  --gutter:     22px;

  --measure:    66ch;
  --serif: 'Source Serif 4', 'Iowan Old Style', Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* one hue per subject, used as a spine so a reader can navigate by colour */
  --s1: #277c6f;  --s2: #824778;  --s3: #a96122;  --s4: #315da1;
  --s5: #69772d;  --s6: #a1463e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-lift); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }

/* ── the notice ───────────────────────────────────────────────────────────
   The most important sentence on the site. It gets the top of the page and a
   dark ground so it reads as a statement of what this is, not as a cookie
   banner somebody will learn to skip. */
.notice { background: var(--navy-deep); color: #d9c79a; font-size: 13.5px;
  letter-spacing: .01em; }
.notice .wrap { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding-top: 9px; padding-bottom: 9px; }
.notice b { color: var(--gold-lift); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: 11.5px; }
.notice span { color: #a9b4c8; }

/* ── masthead ───────────────────────────────────────────────────────────
   The nav links sat in a row of plain text at one colour and one weight, and
   read as a single run-on link rather than as four. They are targets now: each
   one padded, each one lighting up on its own, the current section marked in
   gold. Whitespace alone was never going to do it.

   On a phone the whole bar used to wrap into a stack of everything the desktop
   shows. Below 900px it is a brand and a button. */
/* The bar was navy and so is the banner under it, so the two ran together into
   one dark block with no edge between them. It takes the brand's gold instead:
   the notice above it is near-black, the banner below it is navy, and the gold
   band between them is the line that says where the site's furniture ends and
   the page begins. Text on it is navy, which clears contrast comfortably. */
.masthead { background: var(--gold); color: var(--navy); position: relative;
  box-shadow: inset 0 -1px 0 rgba(7,26,47,.16); }

.masthead .bar { display: flex; align-items: center; gap: 26px;
  padding-block: 18px 16px; }
.brand { text-decoration: none; line-height: 1; display: block;
  flex: 0 1 auto; min-width: 0; }
.brand .name { font-family: var(--serif); font-size: 25px; letter-spacing: -.01em;
  color: var(--navy); white-space: nowrap; }
.brand .name b { font-weight: 600; }
.brand .name span { color: #6b4a05; font-style: italic; }
.brand .sub { display: block; margin-top: 5px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #4a3203;
  overflow: hidden; text-overflow: ellipsis; }

.masthead .menu { display: contents; }

.masthead nav { display: flex; align-items: center; gap: 4px; font-size: 14.5px; }
.masthead nav a { color: #221805; text-decoration: none; padding: 9px 14px;
  border-radius: 7px; white-space: nowrap; line-height: 1;
  transition: background-color .12s ease, color .12s ease; }
.masthead nav a:hover { color: var(--navy); background: rgba(255,255,255,.42); }
.masthead nav a[aria-current] { color: #fff; font-weight: 650;
  background: var(--navy); }

.masthead .right { margin-left: auto; display: flex; align-items: center; gap: 12px;
  min-width: 0; }
.masthead .right form { min-width: 0; }
.masthead input {
  font: inherit; font-size: 14px; padding: 9px 16px; width: 13.5rem; min-width: 0;
  border: 1px solid rgba(7,26,47,.22); border-radius: 999px;
  background: rgba(255,255,255,.62); color: var(--navy);
}
.masthead input::placeholder { color: #5d4d2a; }
.masthead input:focus { outline: 2px solid var(--navy); outline-offset: 1px;
  background: #fff; }
.masthead .acct { color: #221805; text-decoration: none; font-size: 14.5px;
  padding: 9px 12px; border-radius: 7px; white-space: nowrap; font-weight: 600; }
.masthead .acct:hover { color: var(--navy); background: rgba(255,255,255,.42); }
.masthead .acct.quiet { color: #4a3203; font-weight: 500; }
.masthead .cta { background: var(--navy); color: #fff; font-weight: 650;
  font-size: 14px; padding: 10px 18px; border-radius: 7px; text-decoration: none;
  white-space: nowrap; }
.masthead .cta:hover { background: var(--navy-soft); }

/* the button, and the panel it opens */
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 10px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--navy); cursor: pointer;
  background: rgba(255,255,255,.5); border: 1px solid rgba(7,26,47,.22);
  border-radius: 9px; padding: 10px 14px; }
.menu-toggle:hover { background: #fff; }
.menu-toggle .bars { display: grid; gap: 4px; width: 17px; }
.menu-toggle .bars i { display: block; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s ease, opacity .15s ease; }

@media (max-width: 900px) {
  .masthead .bar { flex-wrap: wrap; gap: 0 16px; padding-block: 14px; }
  .brand .name { font-size: 20px; }
  .brand .sub { display: none; }
  .menu-toggle { display: inline-flex; }

  .masthead .menu { display: block; order: 3; width: 100%; }
  /* Without JavaScript the panel simply stays open and the links stay
     reachable; the script adds .js and takes over from there. */
  .masthead.js .menu { display: none; }
  .masthead.js.open .menu { display: block; }

  .masthead .menu { border-top: 1px solid rgba(7,26,47,.18); margin-top: 12px;
    padding-top: 12px; padding-bottom: 6px; }
  .masthead nav { flex-direction: column; align-items: stretch; gap: 0;
    font-size: 16px; }
  .masthead nav a { padding: 15px 4px; border-radius: 0;
    border-bottom: 1px solid rgba(7,26,47,.13); }
  .masthead nav a:hover, .masthead nav a[aria-current] { background: none; }
  .masthead nav a[aria-current] { color: var(--navy); font-weight: 750;
    text-decoration: underline; text-underline-offset: 5px; }

  .masthead .right { margin-left: 0; width: 100%; flex-direction: column;
    align-items: stretch; gap: 12px; padding-top: 16px; }
  .masthead .right form { width: 100%; }
  .masthead input { width: 100%; }
  .masthead .acct { padding: 13px 4px; }
  .masthead .cta { text-align: center; padding: 14px 18px; font-size: 15px; }
}

@media (max-width: 380px) {
  .brand .name { font-size: 18px; }
  .menu-toggle { padding: 10px 12px; }
  .menu-toggle .label { display: none; }
}

/* ── the banner ───────────────────────────────────────────────────────────
   Ported from the August 2026 interface prototype in design-review/, values
   kept as they were set there: a 1.1fr/0.9fr split at an 80px gutter over a
   520px floor, a 70px serif headline with the last word in italic sky blue, a
   white search card lifted off the navy on a deep shadow, and a row of four
   figures under it on white.

   The one departure is the ground. The prototype puts this banner under a
   white masthead; here the masthead is navy, so the banner takes the site's
   own navy rather than the prototype's slightly darker one. Two nearly equal
   darks stacked on each other read as a seam, which is worse than a shade. */
.hero { background: var(--navy); color: #fff; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; width: 720px; height: 720px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 50%;
  right: -320px; top: -360px; pointer-events: none;
  box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.018); }

.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px;
  align-items: center; min-height: 520px; padding-block: 72px;
  position: relative; z-index: 1; }
.hero-inner > * { min-width: 0; }

.hero .eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11px;
  font-weight: 800; color: var(--gold); margin: 0 0 18px; }
.hero h1 { font-family: var(--serif); font-weight: 400;
  font-size: clamp(43px, 5.5vw, 70px); line-height: .98; letter-spacing: -.035em;
  max-width: 760px; margin: 0; color: #fff; }
.hero h1 em { color: #9ed2ea; font-style: italic; }
.hero .lede { max-width: 630px; color: #b9c9d7; font-family: var(--serif);
  font-size: 19px; line-height: 1.55; margin: 25px 0 30px; }
.hero .buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-find { background: #fff; color: var(--ink); padding: 30px; border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0,0,0,.2); width: 100%; }
.hero-find h2 { font-family: var(--serif); font-weight: 600; font-size: 25px;
  margin: 0 0 4px; letter-spacing: -.01em; }
.hero-find > p { color: var(--ink-soft); font-size: 13px; margin: 0 0 19px; }
.hero-find form { display: flex; border: 1px solid #bfcbd2; border-radius: 8px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(7,26,47,.06); }
.hero-find input { min-width: 0; flex: 1; border: 0; padding: 14px 15px;
  font: inherit; font-size: 15px; outline: none; background: #fff; color: var(--ink); }
.hero-find input:focus { outline: 2px solid var(--link); outline-offset: -2px; }
.hero-find button { border: 0; background: var(--gold); padding: 0 17px;
  font: inherit; font-size: 14px; font-weight: 800; color: #2f2105; cursor: pointer; }
.hero-find button:hover { background: var(--gold-lift); }
.hero-find .popular { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0;
  align-items: center; }
.hero-find .popular span { font-size: 11px; padding: 7px 0; color: var(--ink-soft); }
.hero-find .popular a { font-size: 11px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--rule); padding: 6px 9px; border-radius: 999px;
  color: var(--ink-soft); }
.hero-find .popular a:hover { border-color: var(--link); color: var(--link); }

/* the four figures, on white, directly under the banner */
.stats { background: #fff; border-bottom: 1px solid var(--rule); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-row div { padding: 23px 26px; border-right: 1px solid var(--rule); }
.stat-row div:first-child { padding-left: 0; }
.stat-row div:last-child { border-right: 0; }
.stat-row b { display: block; font-family: var(--serif); font-weight: 600;
  font-size: 23px; color: var(--navy); letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums; }
.stat-row span { font-size: 11px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 42px; }
  .hero-find { max-width: 620px; }
}
@media (max-width: 620px) {
  .hero-inner { padding-block: 52px; min-height: 0; }
  .hero h1 { font-size: 40px; overflow-wrap: anywhere; }
  .hero h1 em { display: block; }
  .hero .lede { font-size: 17px; overflow-wrap: anywhere; }
  .hero-find { padding: 24px 20px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row div { padding: 17px 10px; }
  .stat-row div:first-child { padding-left: 10px; }
  .stat-row div:nth-child(2) { border-right: 0; }
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { font: inherit; font-size: 15px; font-weight: 620; padding: 13px 26px;
  border-radius: 7px; text-decoration: none; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease; }
.btn.primary { background: var(--link); color: #fff;
  box-shadow: 0 6px 18px rgba(10,92,168,.24); }

.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(16,32,58,.28); }
.btn.gold { background: var(--gold); color: #1a1204;
  box-shadow: 0 6px 18px rgba(200,144,31,.28); }
.btn.gold:hover { background: var(--gold-lift); transform: translateY(-1px); }
.btn.quiet { border-color: var(--rule); color: var(--ink-soft); background: var(--card); }
.btn.quiet:hover { border-color: var(--link); color: var(--link); }
.btn.light { background: #fff; color: var(--navy); font-weight: 700; }
.btn.light:hover { background: #eef3f7; }
.btn.ghost { background: transparent; color: #fff; border-color: #52697e;
  font-weight: 700; }
.btn.ghost:hover { border-color: #8ba4ba; background: rgba(255,255,255,.06); }

/* ── subject shelf ────────────────────────────────────────────────────── */
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 54px 0 18px; }
.shelf-head .eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11px;
  font-weight: 800; color: var(--gold); margin: 0 0 10px; }
.shelf-head h2, .section-head h2 { font-family: var(--serif); font-weight: 600;
  font-size: 27px; letter-spacing: -.015em; margin: 0; }
.shelf-head a, .section-head a { font-size: 14px; color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.shelf-head a:hover, .section-head a:hover { color: var(--link-lift); border-color: var(--link); }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px; padding-bottom: 20px; }
.shelf a { background: var(--card); border: 1px solid var(--rule);
  border-radius: 10px; padding: 22px 22px 20px; text-decoration: none;
  display: block; position: relative; overflow: hidden;
  transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease; }
.shelf a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--spine, var(--gold)); }
.shelf a:hover { transform: translateY(-2px); border-color: var(--link);
  box-shadow: 0 12px 30px rgba(16,32,58,.10); }
.shelf b { font-family: var(--serif); font-size: 19px; font-weight: 600;
  display: block; margin-bottom: 6px; letter-spacing: -.01em; color: var(--ink); }
.shelf span { font-size: 13.5px; color: var(--ink-faint); line-height: 1.5;
  display: block; }
.shelf .n { margin-top: 12px; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--spine, var(--gold)); }

/* ── the contents page ────────────────────────────────────────────────────
   A journal's table of contents, not a stack of cards. Three columns: the
   number, the paper, and the facts about it. The first version ran the row to
   the full width but capped the text at a reading measure, which left a third
   of every row empty and made the page look unfinished. The facts now live in
   that space, where they can be scanned down the page in a straight line. */
.section-head { display: flex; align-items: baseline; justify-content: space-between;
  padding: 52px 0 8px; border-bottom: 2px solid var(--navy); margin-bottom: 4px; }

.contents { list-style: none; margin: 0; padding: 0; }
.contents li { display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 200px);
  gap: 0 26px; padding: 28px 0 26px; border-bottom: 1px solid var(--rule-soft);
  position: relative; align-items: start; }
.contents li::before { content: ""; position: absolute; left: 0; top: 28px;
  bottom: 26px; width: 3px; background: var(--spine, var(--gold)); border-radius: 2px; }
.contents .idx { font-family: var(--serif); font-size: 15px; color: var(--ink-faint);
  padding-left: 16px; font-variant-numeric: tabular-nums; padding-top: 5px; }
.contents h3 { font-family: var(--serif); font-weight: 600; font-size: 22px;
  line-height: 1.3; letter-spacing: -.012em; margin: 0 0 9px; }
.contents h3 a { text-decoration: none; color: var(--ink); }
.contents h3 a:hover { color: var(--link); }
.contents .who { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 10px; }
.contents .abstract { font-family: var(--serif); font-size: 16.5px; line-height: 1.58;
  color: var(--ink-soft); margin: 0; }

/* the facts column, read down the page rather than across each row */
.contents .aside { display: flex; flex-direction: column; gap: 9px;
  padding-top: 4px; align-items: flex-start; }
.contents .aside .when { font-size: 13px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; }
.contents .aside .ref { font-size: 12.5px; color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.contents .aside .vs { font-size: 12px; color: var(--ink-faint); }

.tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; padding: 4px 10px; border-radius: 4px; text-decoration: none;
  background: var(--spine, var(--gold)); color: #fff; }

.chip { display: inline-block; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 4px;
  background: var(--paper-deep); color: var(--ink-soft); text-decoration: none; }
.chip.gold { background: var(--gold-wash); color: #8a6210; }
.chip.withdrawn { background: #fbe9e9; color: #9b2c2c; }


/* ── one paper ────────────────────────────────────────────────────────── */
.paper-head { background: var(--paper-deep); border-bottom: 1px solid var(--rule);
  padding: 42px 0 36px; }
.paper-head .kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.paper-head h1 { font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 3.9vw, 44px); line-height: 1.13; letter-spacing: -.02em;
  margin: 0 0 22px; }
.byline { font-size: 17px; line-height: 1.75; margin: 0 0 4px;
  max-width: var(--measure); }
.byline .sup { font-size: 10.5px; vertical-align: super; color: var(--gold);
  font-weight: 700; }
.affil { font-size: 13.5px; color: var(--ink-faint); margin: 3px 0 0;
  max-width: var(--measure); }

.facts { display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0;
  border-top: 1px solid var(--rule); }
.facts div { padding: 14px 28px 12px 0; margin-right: 28px;
  border-right: 1px solid var(--rule); }
.facts div:last-child { border-right: 0; }
.facts b { display: block; font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
  margin-bottom: 4px; }
.facts span { font-size: 14.5px; }
.actions { display: flex; flex-wrap: wrap; gap: 11px; margin: 26px 0 0; }

.abstract-block { padding: 40px 0 10px; }
.abstract-block h2, article .section h2 { font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
  margin: 0 0 16px; }
.abstract-block p { font-family: var(--serif); font-size: 19.5px; line-height: 1.68;
  max-width: var(--measure); margin: 0 0 1em; }
.abstract-block p:first-of-type::first-letter {
  /* One flourish, in the one place a reader always starts. */
  font-size: 3.1em; float: left; line-height: .84; padding: .06em .09em 0 0;
  color: var(--link); font-weight: 600;
}
.section { padding: 30px 0; border-top: 1px solid var(--rule-soft); }

.versions { list-style: none; margin: 0; padding: 0; }
.versions li { display: flex; gap: 14px; align-items: baseline; padding: 11px 0;
  font-size: 14.5px; border-bottom: 1px solid var(--rule-soft); }
.versions li:last-child { border-bottom: 0; }
.versions .n { font-family: var(--serif); font-weight: 600; min-width: 2.2em;
  font-variant-numeric: tabular-nums; }
.versions .now { color: var(--gold); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .09em; }

.cite { background: var(--paper-deep); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 20px 24px; font-family: var(--serif);
  font-size: 16px; line-height: 1.62; max-width: var(--measure); }

.tomb { background: #fbe9e9; border: 1px solid #efc9c9; color: #7b2020;
  border-radius: 10px; padding: 22px 24px; margin: 28px 0; max-width: var(--measure); }

.tomb h2 { font-family: var(--serif); font-size: 21px; margin: 0 0 8px;
  font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
.tomb p { margin: 0; font-size: 15.5px; }

/* ── paging, empties, footer ──────────────────────────────────────────── */
.pager { display: flex; gap: 12px; justify-content: center; align-items: center;
  padding: 40px 0; font-size: 14.5px; }
.pager a, .pager span { padding: 10px 18px; border: 1px solid var(--rule);
  border-radius: 7px; text-decoration: none; color: var(--ink-soft);
  background: var(--card); }
.pager a:hover { border-color: var(--link); color: var(--link); }
.pager .current { background: var(--paper-deep); color: var(--ink); font-weight: 600; }

.empty { padding: 74px 0; text-align: center; }
.empty p { font-family: var(--serif); font-size: 21px; color: var(--ink-soft);
  margin: 0 0 8px; }
.empty .small { font-family: var(--sans); font-size: 15px; color: var(--ink-faint); }

footer.site { background: var(--navy-deep); color: #9fadc4; margin-top: 0;
  padding: 58px 0 34px; font-size: 15.5px; }
footer.site .cols { display: grid; grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: 40px; }
footer.site .brand .name { font-size: 24px; }
footer.site h3 { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #8496af; margin: 0 0 14px; font-weight: 700; }
footer.site p { max-width: 42ch; font-size: 15px; line-height: 1.7; margin: 14px 0 0; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { padding: 4px 0; }
footer.site a { color: #b9c6dd; text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline;
  text-decoration-color: var(--gold); }
footer.site .fine { margin-top: 34px; padding-top: 20px;
  border-top: 1px solid #1b2740; font-size: 13.5px; color: #8496af; }

/* ── prose ────────────────────────────────────────────────────────────── */
.prose { max-width: var(--measure); padding: 46px 0 20px; }
.prose h1 { font-family: var(--serif); font-weight: 400; font-size: 42px;
  letter-spacing: -.025em; margin: 0 0 12px; line-height: 1.1; }
.prose .lede { font-family: var(--serif); font-size: 21px; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 32px; }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: 24px;
  margin: 38px 0 12px; letter-spacing: -.01em; }
.prose p, .prose li { font-size: 17px; line-height: 1.72; }
.prose ul { padding-left: 1.15em; }
.prose li { margin: 8px 0; }
.prose .meta { font-size: 13.5px; color: var(--ink-faint); }

/* The university's full name wants about 440px on one line, and the bar only
   has that to spare on a wide screen. Rather than truncate it with an ellipsis
   — which is worse than not showing it — it appears where it fits and the
   wordmark stands alone where it does not. The footer carries it either way. */
@media (min-width: 901px) and (max-width: 1379px) { .brand .sub { display: none; } }
@media (min-width: 1380px) { .brand .sub { white-space: nowrap; } }
@media (max-width: 1040px) {
  .hero .split { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 1040px) {
  .contents li { grid-template-columns: 44px minmax(0, 1fr); }
  .contents .aside { grid-column: 2; flex-direction: row; flex-wrap: wrap;
    gap: 6px 16px; margin-top: 12px; align-items: center; }
}
@media (max-width: 900px) {
  .hero { padding-top: 52px; }
  .stats { margin-top: 42px; }
  .stats div { border-right: 0; border-bottom: 1px solid var(--rule);
    flex: 1 1 45%; padding: 16px 20px; }
  .contents li { grid-template-columns: 1fr; gap: 0; padding-left: 18px; }
  .contents .idx { display: none; }
  .contents li::before { top: 24px; bottom: 22px; }
  .facts div { border-right: 0; padding-right: 0; margin-right: 22px; }
  footer.site .cols { grid-template-columns: 1fr; gap: 28px; }
  body { font-size: 16px; }
}

/* ── forms, panels and the author's side ──────────────────────────────────
   Lost when this file was rewritten for the redesign, which left every page
   except the home and browse pages unstyled. Rewritten here to the palette the
   rest of the site now uses rather than pasted back from the old one. */

.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px 26px; margin: 22px 0; }
.panel summary { cursor: pointer; font-weight: 600; font-size: 15.5px;
  color: var(--link); list-style: none; display: flex; align-items: center; gap: 9px; }
.panel summary::-webkit-details-marker { display: none; }
.panel summary::before { content: "+"; font-family: var(--serif); font-size: 19px;
  line-height: 1; color: var(--link); }
.panel[open] summary::before { content: "\2013"; }
.panel[open] summary { margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft); }

.field { margin: 0 0 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px;
  color: var(--ink); }
.field .req { font-weight: 500; color: var(--ink-faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=url], .field input[type=file], .field textarea, .field select {
  font: inherit; font-size: 15.5px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--paper);
  color: var(--ink);
}
.field textarea { line-height: 1.58; resize: vertical; min-height: 8em; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
.field input[type=checkbox] { width: auto; margin-right: 9px; }
.field input[type=file] { padding: 10px 12px; background: var(--paper-deep); }
.help { font-size: 13px; color: var(--ink-faint); margin: 7px 0 0; line-height: 1.5; }
.err { font-size: 13.5px; color: #b3261e; margin: 7px 0 0; }

.callout { background: var(--paper-deep); border-left: 3px solid var(--link);
  padding: 17px 22px; border-radius: 0 8px 8px 0; margin: 22px 0; font-size: 15.5px;
  line-height: 1.6; }
.callout.warn { background: var(--gold-wash); border-left-color: var(--gold); }
.callout.good { background: #edf6f1; border-left-color: #1f7a5a; }
.callout b { color: var(--ink); }

.messages { list-style: none; margin: 0; padding: 0; }
.messages li { margin: 0 0 12px; }

.worklist { list-style: none; margin: 26px 0; padding: 0; }
.worklist li { padding: 20px 0; border-bottom: 1px solid var(--rule-soft); }
.worklist li:last-child { border-bottom: 0; }
.worklist a { text-decoration: none; }
.worklist b { font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--ink); }
.worklist a:hover b { color: var(--link); }
.worklist .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px;
  color: var(--ink-faint); margin: 8px 0 0; align-items: center; }

.state { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
  background: var(--paper-deep); color: var(--ink-soft); }
.state-submitted { background: #e7f0fb; color: #14508f; }
.state-returned, .state-rejected { background: #fbe9e9; color: #9b2c2c; }
.state-awaiting_payment { background: var(--gold-wash); color: #8a6210; }
.state-posted { background: #e6f4ec; color: #1a6a4a; }
.state-withdrawn { background: #f0f0f0; color: #5f5f5f; }

.authorlist { padding-left: 1.3em; margin: 18px 0; }
.authorlist li { margin: 12px 0; }
.authorlist b { font-size: 16px; }
.authorlist .meta { display: block; font-size: 13.5px; color: var(--ink-faint);
  margin-top: 2px; }

.decision { border-left: 3px solid var(--rule); padding: 6px 0 6px 20px;
  margin: 18px 0; }
.decision .meta { font-size: 13px; color: var(--ink-faint); margin: 0 0 6px; }
.decision p { margin: 0; }

.linky { background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--ink-faint); text-decoration: underline; cursor: pointer; }
.linky:hover { color: #b3261e; }

.prose .panel summary { font-size: 16px; }
.prose .meta a { color: var(--link); }

/* ── policy pages ─────────────────────────────────────────────────────────
   From design-review/screening.html and styles.css. A navy cover, a 230px
   sticky contents column, and one 700px measure of serif. Every policy page is
   built from the same template, so the six of them read as one document. */

.policy-cover { background: var(--navy); color: #fff; padding: 66px 0; }
.policy-cover .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 18px; }
.policy-cover h1 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(42px, 5vw, 64px); line-height: 1; letter-spacing: -.035em;
  margin: 0; max-width: 850px; color: #fff; }
.policy-cover .lede { font-family: var(--serif); font-size: 20px; line-height: 1.55;
  color: #b9c9d7; max-width: 700px; margin: 20px 0 0; }

.policy-layout { display: grid; grid-template-columns: 230px minmax(0, 700px);
  gap: 85px; padding-block: 55px 80px; align-items: start; }

.toc { position: sticky; top: 26px; align-self: start; }
.toc h2 { font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  margin: 0 0 10px; font-weight: 700; color: var(--ink-soft); }
.toc a { display: block; text-decoration: none; color: var(--ink-soft);
  font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.toc a:hover { color: var(--link); }

.policy-copy { max-width: 100%; overflow-wrap: anywhere; }
.policy-copy h2 { font-family: var(--serif); font-weight: 600; font-size: 28px;
  margin: 0 0 13px; letter-spacing: -.015em; }
.policy-copy h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.policy-copy p, .policy-copy li { font-family: var(--serif); font-size: 17px;
  line-height: 1.7; color: #3f4e5d; }
.policy-copy p { margin: 0 0 14px; }
.policy-copy p:last-child { margin-bottom: 0; }
.policy-copy ul, .policy-copy ol { padding-left: 1.15em; margin: 0 0 14px; }
.policy-copy li { margin: 8px 0; }
.policy-copy b { color: var(--ink); }
.policy-copy a { color: var(--link); }
.policy-copy section { padding-bottom: 32px; margin-bottom: 32px;
  border-bottom: 1px solid var(--rule); }
.policy-copy section:last-of-type { border-bottom: 0; }

.checks, .nochecks, .outcomes { list-style: none; padding: 0; margin: 0 0 14px; }
.checks li, .nochecks li, .outcomes li { padding: 12px 0 12px 30px; position: relative;
  border-bottom: 1px solid var(--rule); margin: 0; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: #39755d;
  font-family: var(--sans); font-weight: 700; font-size: 16px; }
.nochecks li::before { content: "✕"; position: absolute; left: 0; color: #ad453a;
  font-family: var(--sans); font-weight: 700; font-size: 15px; }
.outcomes li::before { content: "→"; position: absolute; left: 0;
  color: var(--ink-faint); font-family: var(--sans); font-weight: 700; font-size: 15px; }

.quote { border-left: 3px solid var(--gold); padding: 3px 0 3px 20px;
  font-style: italic; }
.pricebox { display: inline-grid; grid-template-columns: auto auto; align-items: end;
  background: #fff; border: 1px solid var(--rule); padding: 22px 28px; margin: 10px 0 14px; }
.pricebox strong { font-family: var(--serif); font-weight: 600; font-size: 45px;
  line-height: 1; }
.pricebox span { font-size: 12px; font-weight: 800; margin: 0 0 5px 8px;
  font-family: var(--sans); color: var(--ink-soft); }

.updated { font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
  padding: 24px 0 0; }

@media (max-width: 900px) {
  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 35px; }
  .toc { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .toc a { display: inline-block; border: 1px solid var(--rule); border-radius: 999px;
    padding: 7px 14px; margin: 0 6px 6px 0; }
}
@media (max-width: 620px) {
  .policy-cover { padding: 45px 0; }
  .policy-cover h1 { font-size: 38px; }
}

/* ── the paper record ─────────────────────────────────────────────────────
   From design-review/styles.css. A white banner carrying breadcrumbs, the
   flags, the title and the byline, then the paper in a 720px column with a
   310px rail beside it. The reader notice sits at the top of the article
   rather than in the banner, which is where somebody about to read the thing
   will actually see it. */

.paper-hero { background: #fff; border-bottom: 1px solid var(--rule);
  padding: 58px 0 47px; }
.breadcrumbs { font-size: 11px; color: var(--ink-soft); margin-bottom: 25px; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.paper-hero .flags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.paper-hero .tag { display: inline-flex; border-radius: 999px; text-transform: none;
  letter-spacing: 0; background: color-mix(in srgb, var(--accent) 10%, white);
  color: var(--accent); font-size: 10px; font-weight: 800; padding: 6px 9px; }
.status { font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; background: #fff2d8; color: #79520c; padding: 6px 9px;
  border-radius: 3px; }
.status.reviewed { background: #e7f3ec; color: #256045; }
.status.withdrawn { background: #fbe9e7; color: #8c2f26; }
.paper-hero h1 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(39px, 5vw, 60px); line-height: 1.05; letter-spacing: -.035em;
  max-width: 1000px; margin: 18px 0; }
.paper-hero h1.long-title { font-size: clamp(37px, 4.2vw, 52px);
  max-width: 1080px; }
.big-authors { font-family: var(--serif); font-size: 18px; color: var(--link);
  margin: 0; line-height: 1.5; }
.big-authors sup { font-size: 11px; }
.affiliation { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }
.affiliation.published { margin-top: 14px; font-size: 13px; }
.affiliation.published b { color: var(--ink); }

.paper-layout { display: grid; grid-template-columns: minmax(0, 720px) 310px;
  gap: 95px; padding-block: 48px 80px; align-items: start; }
.article h2 { font-family: var(--serif); font-weight: 600; font-size: 28px;
  margin: 0 0 15px; letter-spacing: -.015em; }
.article p { font-family: var(--serif); font-size: 18px; line-height: 1.72;
  color: #344454; margin: 0; }
.article p + p { margin-top: 14px; }
.article section { padding-bottom: 38px; margin-bottom: 34px;
  border-bottom: 1px solid var(--rule); }
.article section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.article .under { font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  margin-top: 11px; }
.article .version-line { font-family: var(--sans); font-size: 14px; margin: 0 0 8px; }
.article .version-line .note { display: block; font-size: 13px; color: var(--ink-soft);
  margin-top: 2px; }

.keywords { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 11px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--rule); padding: 6px 9px; border-radius: 999px;
  color: var(--ink-soft); background: #fff; display: inline-flex;
  align-items: center; font-family: var(--sans); cursor: pointer; }
a.pill:hover, button.pill:hover { border-color: var(--link); color: var(--link); }

.citebox { background: #fff; border: 1px solid var(--rule); padding: 20px;
  border-radius: 7px; font-family: var(--serif); font-size: 14px; line-height: 1.6; }
.copy { float: right; border: 0; background: #eaf1f5; color: var(--link);
  padding: 6px 9px; border-radius: 4px; font-family: var(--sans); font-size: 11px;
  font-weight: 700; cursor: pointer; margin-left: 12px; }
.copy:hover { background: #dbe8f0; }

.rail { position: sticky; top: 26px; align-self: start; }
.download-card { background: var(--navy); color: #fff; padding: 23px;
  border-radius: 9px; box-shadow: var(--shadow); }
.download-card h2 { font-family: var(--serif); font-weight: 600; font-size: 21px;
  margin: 0 0 5px; color: #fff; }
.download-card p { font-size: 12px; color: #b7c7d4; margin: 0 0 17px;
  font-family: var(--sans); }
.download-card .button { width: 100%; }

.detail-card { background: #fff; border: 1px solid var(--rule); border-radius: 9px;
  padding: 20px; margin-top: 15px; }
.detail-card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 14px; font-weight: 700; }
.detail-card dl { margin: 0; }
.detail-card dl > div { padding: 9px 0; border-top: 1px solid #edf0f2; }
.detail-card dl > div:first-of-type { border: 0; }
.detail-card dt { font-size: 10px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .08em; }
.detail-card dd { font-size: 13px; margin: 2px 0 0; font-weight: 650; }
.detail-card dd.link a { color: var(--link); text-decoration: none; }
.detail-card .share { display: flex; gap: 8px; flex-wrap: wrap; }

.disclaimer { border: 1px solid #ead5a7; background: #fff9e9; color: #6c531b;
  padding: 14px 16px; font-size: 12px; margin-bottom: 20px; font-family: var(--sans);
  line-height: 1.6; }
.disclaimer.reviewed { border-color: #bcdcc8; background: #eef7f1; color: #2b5a44; }
.disclaimer.withdrawn-note { border-color: #e6b3ac; background: #fdf1ef; color: #8c2f26; }
.disclaimer.older { border-color: #b9cfe2; background: #eef5fb; color: #1d4d75; }

@media (max-width: 900px) {
  .paper-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; padding-top: 30px; }
  .rail { position: static; }
}
@media (max-width: 620px) {
  .paper-hero { padding: 38px 0 34px; }
  .paper-hero h1 { font-size: 32px; }
  .paper-hero h1.long-title { font-size: 30px; }
  .article p { font-size: 17px; }
}

/* ── signing in and signing up ────────────────────────────────────────────
   From design-review/signin.html and join.html. Two halves that reach the edge
   of the window: the reason to have an account on navy, the form on white. The
   padding is computed so the copy lines up with the 1180 measure the rest of
   the prototype uses, however wide the window is. */

.auth-shell { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; }

.auth-story { background: var(--navy); color: #fff;
  padding: 75px 70px 75px max(45px, calc((100vw - 1180px) / 2)); }
.auth-story .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 18px; }
.auth-story h1 { font-family: var(--serif); font-weight: 600; font-size: 49px;
  line-height: 1.04; margin: 0 0 18px; letter-spacing: -.025em; color: #fff; }
.auth-story > p { color: #b9c9d7; font-size: 15.5px; line-height: 1.6;
  margin: 0; max-width: 44ch; }

.auth-list { list-style: none; padding: 20px 0 0; margin: 0; counter-reset: a; }
.auth-list li { counter-increment: a; display: grid; grid-template-columns: 38px 1fr;
  gap: 15px; margin: 23px 0; }
.auth-list li::before { content: counter(a); display: grid; place-items: center;
  width: 36px; height: 36px; border: 1px solid #60768a; border-radius: 50%;
  color: var(--gold); font-family: var(--serif); font-size: 15px; font-weight: 600; }
.auth-list b { display: block; font-size: 15px; font-weight: 650; }
.auth-list span { display: block; font-size: 12px; color: #9fb1c1; margin-top: 3px;
  line-height: 1.5; }

.form-side { background: #fff;
  padding: 65px max(45px, calc((100vw - 1180px) / 2)) 65px 70px;
  display: flex; align-items: center; }
.form-card { max-width: 500px; width: 100%; }
.form-card .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 12px; }
.form-card h2 { font-family: var(--serif); font-weight: 600; font-size: 32px;
  margin: 0 0 25px; letter-spacing: -.02em; }

.field { margin: 0 0 18px; }
.field label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 7px;
  color: var(--ink); }
.field label .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #becbd3;
  border-radius: 7px; background: #fff; padding: 12px 13px; font-family: var(--sans);
  font-size: 14px; color: var(--ink); }
.field textarea { line-height: 1.55; resize: vertical; min-height: 8em; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid #9bc7e0; border-color: var(--link); }
.field input[type=checkbox] { width: auto; }
.field small { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 5px; }
.field small.err { color: #ad453a; font-weight: 600; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: #ad453a; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

small.err.block { display: block; color: #ad453a; font-weight: 600; font-size: 12px;
  margin-bottom: 14px; }
.button.block { width: 100%; }
.form-alt { text-align: center; font-size: 12px; color: var(--ink-soft);
  margin: 16px 0 0; }
.form-alt a { color: var(--link); }

/* These two screens run edge to edge into the footer, so the footer's usual
   top margin would otherwise leave a cream strip under the panels. */


@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-story, .form-side { padding: 50px 28px; }
  .form-card { max-width: none; }
  .auth-story h1 { font-size: 39px; }
}
@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .auth-story h1 { font-size: 34px; }
  .auth-list { display: none; }
  .auth-story { padding-block: 34px; }
  .auth-story .eyebrow { margin-bottom: 12px; }
  .auth-story h1 { margin-bottom: 12px; }
  .form-side { padding-block: 40px; }
}

/* ── dropdowns and date pickers ───────────────────────────────────────────
   A native select renders its own arrow in its own place, and putting a second
   arrow behind it is how a form ends up with two carets pointing at each
   other. So the native one is switched off and exactly one is drawn here, with
   room reserved for it so a long country name cannot run underneath it.

   Date inputs get the same treatment: the calendar is the browser's, which
   knows the reader's locale and works on a phone without loading anything, but
   the box around it matches every other field on the page. */

.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.field select::-ms-expand { display: none; }
.field select:disabled { color: var(--ink-faint); cursor: not-allowed; }
.field select optgroup { font-style: normal; font-weight: 700; color: var(--ink-faint);
  font-size: 13px; }
.field select option { color: var(--ink); font-weight: 400; }

.field input[type=date], .field input[type=month], .field input[type=time] {
  font: inherit; font-size: 15.5px; width: 100%; padding: 11px 14px;
  border: 1px solid var(--rule); border-radius: 7px; background: var(--paper);
  color: var(--ink); }
.field input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; padding: 4px; border-radius: 4px; }
.field input[type=date]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: var(--paper-deep); }
.field input[type=date]:focus-within { border-color: transparent; }

/* ── footer links ─────────────────────────────────────────────────────────
   The lists ran together into a paragraph of blue text. Each one is its own
   row now, with space around it and a rule under it, so five links look like
   five links. */
footer.site ul li { padding: 7px 0; border-bottom: 1px solid #1b2740; }
footer.site ul li:last-child { border-bottom: 0; }
footer.site ul a { display: inline-block; padding: 1px 0; font-size: 15px; }

/* the permanent reference, labelled so it is not mistaken for a stray hash */
.ref .k { font-family: var(--sans); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }

/* A paper that was reviewed and published elsewhere, archived here. Built to
   the same pill the prototype uses for subjects, so the two sit together in a
   listing row rather than competing. */
.chip.peer { background: #e7f3ec; color: #1a5c3a; border: 1px solid #bcdcc8;
  font-weight: 650; }
.paper-meta .chip.peer { display: inline-flex; border-radius: 999px;
  background: #eaf4ee; color: #2c6a4c; border: 0; font-size: 10px;
  font-weight: 800; padding: 6px 9px; text-transform: none; letter-spacing: 0; }
.published { font-size: 14.5px; color: var(--ink-soft); margin: 14px 0 0; }
.published b { color: var(--ink); font-weight: 600; }

/* ── sections, subject cards and listing rows ─────────────────────────────
   Ported from design-review/styles.css, which is the design this site is being
   brought in line with. Values kept as they were set there. */

.section { padding: 68px 0; }
.section.white { background: #fff; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; padding: 0; border-bottom: 0; }
.section-head h2 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em;
  margin: 0; }
.section-head .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 10px; }
.textlink { font-size: 14px; font-weight: 700; color: var(--link);
  text-decoration: none; white-space: nowrap; }
.textlink:hover { text-decoration: underline; }

.subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.subject-card { background: #fff; border: 1px solid var(--rule); padding: 21px 22px;
  border-radius: 9px; text-decoration: none; position: relative; overflow: hidden;
  min-height: 148px; color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease; }
.subject-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--accent); }
.subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.subject-card svg { width: 25px; height: 25px; color: var(--accent); }
.subject-card h3 { font-family: var(--serif); font-weight: 600; font-size: 19px;
  line-height: 1.2; margin: 12px 0 7px; }
.subject-card p { font-size: 12px; color: var(--ink-soft); margin: 0; }
.subject-card > span { position: absolute; right: 18px; top: 18px; font-size: 11px;
  font-weight: 800; color: var(--ink-soft); }

.paper-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.paper-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 185px; gap: 25px;
  padding: 27px 0; border-bottom: 1px solid var(--rule); position: relative; }
.paper-row::before { content: ""; position: absolute; left: 0; top: 27px; width: 3px;
  height: 42px; background: var(--accent); }
.paper-date { padding-left: 17px; color: var(--ink-soft); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.paper-date strong { display: block; font-family: var(--serif); font-weight: 600;
  font-size: 25px; line-height: 1; color: var(--ink); letter-spacing: 0; }
.paper-main h3 { font-family: var(--serif); font-weight: 600; font-size: 21px;
  line-height: 1.27; margin: 0 0 7px; }
.paper-main h3 a { text-decoration: none; color: var(--ink); }
.paper-main h3 a:hover { color: var(--link); }
.paper-main .authors { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.paper-main .abstract { font-family: var(--serif); font-size: 14px; line-height: 1.55;
  color: var(--ink-soft); margin: 0; }
.paper-meta { text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 9px; }
.paper-meta .tag { display: inline-flex; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, white); color: var(--accent);
  font-size: 10px; font-weight: 800; padding: 6px 9px; text-decoration: none;
  text-align: center; text-transform: none; letter-spacing: 0; }
.paper-meta .vs { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.paper-meta .ref { display: block; color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  letter-spacing: 0; }
.paper-meta .ref .k { display: none; }

@media (max-width: 900px) {
  .subjects { grid-template-columns: repeat(2, 1fr); }
  .paper-row { grid-template-columns: 70px minmax(0, 1fr); }
  .paper-meta { grid-column: 2; align-items: flex-start; text-align: left;
    flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
}
@media (max-width: 620px) {
  .section { padding: 48px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .subjects { grid-template-columns: 1fr; }
  .subject-card { min-height: 130px; }
  .paper-row { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
  .paper-date { display: none; }
  .paper-meta { grid-column: 1; }
}

/* ── for researchers ──────────────────────────────────────────────────────
   Ported from design-review/styles.css. Two columns: the case for submitting
   on the left with the fee rule under it, the three steps on the right joined
   by a line so they read as a sequence rather than as three separate claims. */
.process { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px;
  align-items: start; }
.process > div > .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 14px; }
.process h2 { font-family: var(--serif); font-weight: 600; font-size: 38px;
  line-height: 1.08; letter-spacing: -.025em; margin: 0 0 15px; }
.process > div > p { color: var(--ink-soft); margin: 0 0 22px; }

.steps { counter-reset: steps; }
.step { counter-increment: steps; display: grid; grid-template-columns: 44px 1fr;
  gap: 18px; padding: 0 0 27px; position: relative; }
.step::before { content: counter(steps); width: 42px; height: 42px; display: grid;
  place-items: center; border: 1px solid #9db2c1; border-radius: 50%;
  font-family: var(--serif); font-weight: 600; font-size: 17px; background: #fff;
  position: relative; z-index: 1; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 21px;
  top: 42px; bottom: 0; border-left: 1px solid #b9c8d2; }
.step h3 { margin: 5px 0; font-size: 15px; font-weight: 700; }
.step p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

.notice-box { background: #edf5f2; border-left: 3px solid #39755d;
  padding: 14px 18px; font-size: 13px; line-height: 1.55; color: #315948;
  margin-top: 20px; }
.notice-box b { color: #24503d; }

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

/* ── the browse screen ────────────────────────────────────────────────────
   From design-review/styles.css. A pale blue page head carrying the search and
   the subject chips, then a 210px filter column beside the results. The
   prototype's controls filter in the browser; here they are a real form, so a
   filtered view is a link and the filters survive turning the page. */

.page-head { background: #e8f0f4; padding: 54px 0 38px;
  border-bottom: 1px solid #d4dfe4; }
.page-head .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 14px; }
.page-head h1 { font-family: var(--serif); font-weight: 600; font-size: 46px;
  line-height: 1; letter-spacing: -.03em; margin: 0 0 12px; }
.page-head > .wrap > p { color: var(--ink-soft); margin: 0; }

/* The prototype puts the search and the subject chips on one line, which works
   for its five short labels and not for these, where "Business & Management
   Science" and "Education & Social Science" wrap into a crowded second row and
   squeeze the search box. Two rows: the search at a sensible width, the chips
   given the full measure underneath. */
.browse-tools { display: grid; gap: 16px; margin-top: 27px; }
.browse-tools .searchbox { max-width: 520px; }

.searchbox { display: flex; border: 1px solid #bfcbd2; border-radius: 8px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(7,26,47,.06); background: #fff; }
.searchbox input { min-width: 0; flex: 1; border: 0; padding: 14px 15px;
  font: inherit; font-size: 15px; outline: none; background: transparent;
  color: var(--ink); }
.searchbox input:focus { outline: 2px solid var(--link); outline-offset: -2px; }
.searchbox button { border: 0; background: var(--gold); padding: 0 17px;
  font: inherit; font-size: 14px; font-weight: 800; color: #2f2105; cursor: pointer; }
.searchbox button:hover { background: var(--gold-lift); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters a { font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  border: 1px solid #c5d1d8; background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 9px 14px; text-decoration: none;
  line-height: 1.1; }
.filters a:hover { border-color: var(--link); color: var(--link); }
.filters a.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.browse-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 50px; padding-block: 48px 70px; align-items: start; }
.sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 4px; font-weight: 700; }
.sidebar label { display: flex; gap: 9px; align-items: center; font-size: 13px;
  margin: 12px 0; color: var(--ink-soft); cursor: pointer; }
.sidebar input[type=checkbox] { width: auto; margin: 0; flex: none; }
.sidebar hr { border: 0; border-top: 1px solid var(--rule); margin: 25px 0; }
.sidebar .none { font-size: 13px; color: var(--ink-faint); margin: 12px 0; }
.sidebar .apply { width: 100%; margin-top: 22px; }
.sidebar .clear { display: block; text-align: center; margin-top: 10px;
  font-size: 12px; color: var(--ink-soft); }

.results-head { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 13px; }
.results-head strong { font-family: var(--serif); font-weight: 600; font-size: 20px; }
.results-head select { border: 1px solid var(--rule); background: #fff;
  border-radius: 6px; padding: 7px; font: inherit; font-size: 12px; color: var(--ink); }
.sortform { display: flex; gap: 8px; align-items: center; }

.button { display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-decoration: none; border: 1px solid transparent;
  border-radius: 7px; padding: 11px 17px; font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; }
.button.primary { background: var(--link); color: #fff;
  box-shadow: 0 8px 22px rgba(18,103,165,.2); }
.button.primary:hover { background: var(--link-lift); }
.button.light { background: #fff; color: var(--navy); }
.button.light:hover { background: #eef3f7; }
.button.outline { border: 1px solid #c6d2da; background: #fff; color: var(--navy);
  border-radius: 7px; padding: 11px 17px; font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; text-decoration: none; }
.button.outline:hover { border-color: var(--link); color: var(--link); }

@media (max-width: 900px) {
  .browse-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
  .sidebar hr { display: none; }
  .sidebar h2 { grid-column: 1 / -1; margin-top: 16px; }
  .sidebar .apply, .sidebar .clear { grid-column: 1 / -1; }
  .browse-tools { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .page-head { padding: 38px 0 30px; }
  .page-head h1 { font-size: 38px; }
}

/* ── the author workspace ─────────────────────────────────────────────────
   From design-review/dashboard.html, new-submission.html and submission.html.
   A pale ground so the white cards read as cards, a 220px account column, and
   the submissions as a table because a table is what somebody with a dozen
   papers wants to scan. */

.workspace { background: #edf2f4; min-height: 650px; padding: 45px 0 75px; }
.workspace-head { display: flex; justify-content: space-between; align-items: center;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.workspace-head .eyebrow { text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; font-weight: 800; color: var(--gold); margin: 0 0 10px; }
.workspace-head h1 { font-family: var(--serif); font-weight: 600; font-size: 38px;
  margin: 0; letter-spacing: -.025em; }
.workspace-head .welcome { color: var(--ink-soft); margin: 5px 0 0; font-size: 14px; }

.workspace-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 30px; align-items: start; }
.account-nav { background: #fff; border: 1px solid var(--rule); border-radius: 9px;
  padding: 12px; align-self: start; }
.account-nav a { display: block; text-decoration: none; font-size: 13px;
  font-weight: 650; padding: 10px; border-radius: 5px; color: var(--ink); }
.account-nav a:hover { background: #f2f6f8; }
.account-nav a.active { background: #e9f1f5; color: var(--link); }

.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 18px; }
.metric { background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 17px; }
.metric strong { font-family: var(--serif); font-weight: 600; font-size: 27px;
  display: block; line-height: 1.1; }
/* Block, with a line-height of its own. Left inline, a 10px label is laid out
   on line boxes struck by the 16px card around it, so "FCFA outstanding"
   wrapping onto a second line on a narrow screen opened a 25px gap between two
   lines of 10px type and the label read as two unrelated words. */
.metric span { display: block; font-size: 10px; line-height: 1.35;
  text-transform: uppercase; color: var(--ink-soft);
  letter-spacing: .08em; font-weight: 700; }

.dash-card { background: #fff; border: 1px solid var(--rule); border-radius: 9px;
  padding: 24px; }
.table-scroll { overflow-x: auto; }
.submission-table { width: 100%; border-collapse: collapse; }
.submission-table th { text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); padding: 10px;
  border-bottom: 1px solid var(--rule); font-weight: 700; }
.submission-table td { padding: 16px 10px; border-bottom: 1px solid var(--rule);
  font-size: 12px; vertical-align: top; }
.submission-table tr:last-child td { border-bottom: 0; }
.submission-table td a { color: var(--ink); text-decoration: none; font-weight: 650;
  font-size: 14px; }
.submission-table td a:hover { color: var(--link); }
.submission-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft); }

.state { display: inline-flex; font-family: var(--sans); font-weight: 800;
  font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
  border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
.state.draft { background: #edf0f2; color: #5d6972; }
.state.submitted, .state.screening { background: #e6f0f7; color: #27618b; }
.state.returned { background: #fbe8e4; color: #974236; }
.state.rejected { background: #fbe8e4; color: #974236; }
.state.awaiting_payment, .state.payment { background: #fff0cf; color: #7b560b; }
.state.posted { background: #e5f3eb; color: #2b6a4e; }
.state.withdrawn { background: #edf0f2; color: #5d6972; }

.section-card { background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 22px; margin: 16px 0; }
.section-card h2 { font-family: var(--serif); font-weight: 600; font-size: 22px;
  margin: 0 0 16px; }
.upload { border: 1px dashed #9eb2c0; border-radius: 8px; background: #f7fafb;
  padding: 28px; text-align: center; }
.upload strong { display: block; font-family: var(--serif); font-weight: 600;
  font-size: 18px; }
.upload .hint { font-size: 12px; color: var(--ink-soft); display: block; margin-top: 4px; }
.upload input[type=file] { margin-top: 14px; }

.status-banner { padding: 17px 19px; border-radius: 7px; background: #eaf1f5;
  border-left: 3px solid var(--link); font-size: 13px; line-height: 1.6;
  margin-bottom: 22px; }
.status-banner.warn { background: #fff6e3; border-left-color: var(--gold); color: #6c531b; }
.status-banner.good { background: #eaf4ee; border-left-color: #39755d; color: #2b5a44; }
.status-banner.bad { background: #fbe9e7; border-left-color: #ad453a; color: #8c2f26; }

.actionbar { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px;
  flex-wrap: wrap; }
.empty.small-empty { padding: 40px 0; }

@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .account-nav { display: flex; overflow-x: auto; }
  .account-nav a { white-space: nowrap; }
}
@media (max-width: 620px) {
  .workspace-head h1 { font-size: 30px; }
  .actionbar { flex-direction: column; }
  .actionbar .button { width: 100%; }
}

/* ── the tables become cards on a phone ───────────────────────────────────
   .submission-table is the author's list of papers and the moderator's list
   of charges: four columns and seven. Both fit a desktop and neither fits a
   390px screen, where the only way through them was to swipe sideways inside
   .table-scroll -- and by the time you reached the last column the heading
   row had gone with it, so the value you were looking at had nothing naming
   it.

   Stacked, one card per row: the paper heads the card and every other value
   sits under its own label, taken from the data-label the template writes on
   each cell. Nothing moves and nothing is off screen. */
@media (max-width: 620px) {
  /* Nothing left to scroll once a row is no wider than the screen. */
  .table-scroll { overflow-x: visible; }

  .submission-table,
  .submission-table tbody,
  .submission-table td { display: block; }

  /* Moved off screen rather than removed. The visible labels below are
     generated content, which a screen reader may or may not read out, so the
     real heading cells stay in the page to keep naming each column. */
  .submission-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .submission-table tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
    border: 1px solid var(--rule); border-radius: 9px;
    padding: 15px 16px 16px; margin-bottom: 12px;
  }
  .submission-table tr:last-child { margin-bottom: 0; }

  .submission-table td,
  .submission-table tr:last-child td {
    padding: 0; border-bottom: 0; font-size: 13px; }

  /* The paper heads its own card, across the full width and without a label:
     a title does not need to be told that it is one. */
  .submission-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 13px; border-bottom: 1px solid var(--rule-soft); }
  .submission-table td:first-child::before { content: none; }
  .submission-table td:first-child a { display: block; font-size: 15px;
    line-height: 1.42; }

  /* The payer and the reference each carry a second line underneath, so they
     take the width rather than half of it and leave the pairs to line up. */
  .submission-table td.full,
  .submission-table td.mono { grid-column: 1 / -1; }

  .submission-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ink-soft); }

  /* A status pill refuses to wrap, which is right in a table cell it can
     make as wide as it likes and wrong in half a card: "Waiting for the
     payer" ran straight out through the side. In here it wraps. */
  .submission-table .state { white-space: normal; }

  /* These cards sit inside .dash-card, and a second 24px of padding around
     them spends a fifth of a narrow screen on nothing. */
  .dash-card { padding: 15px; }
}

/* ── the submission workspace ─────────────────────────────────────────────
   From design-review/submission.html. The bar of five stages, the order lines
   under a charge, and the small disclosures that keep a long form from
   arriving all at once. */

.stagebar { display: flex; align-items: center; margin: 20px 0 30px; }
.stage { flex: 1; position: relative; color: #8b979f; font-size: 10px;
  text-transform: uppercase; font-weight: 800; letter-spacing: .06em;
  padding-top: 25px; }
.stage::before { content: ""; position: absolute; top: 0; left: 0; width: 12px;
  height: 12px; border-radius: 50%; background: #bdc8ce; z-index: 1; }
.stage::after { content: ""; position: absolute; top: 5px; left: 5px; right: -5px;
  height: 2px; background: #bdc8ce; }
.stage:last-child::after { display: none; }
.stage.done::before, .stage.done::after { background: #39755d; }
.stage.done { color: #39755d; }
.stage.current::before { background: var(--gold); box-shadow: 0 0 0 5px #faedcf; }
.stage.current { color: #7b560b; }

.order-line { display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.order-total { font-size: 19px; font-weight: 800; border-bottom: 0; }

.fineprint { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 10px 0 0; }
.quote { border-left: 3px solid var(--gold); padding: 3px 0 3px 20px;
  font-style: italic; margin: 10px 0; }

.authorlist { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: au; }
.authorlist li { counter-increment: au; padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 14px; }
.authorlist li:last-child { border-bottom: 0; }
.authorlist li::before { content: counter(au) ". "; color: var(--ink-faint);
  font-weight: 700; }
.authorlist small, .versionlist small { display: block; color: var(--ink-soft);
  font-size: 12px; margin-top: 3px; }
.authorlist .inline { display: inline; }
.linky { border: 0; background: none; color: var(--link); font: inherit;
  font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

.versionlist { list-style: none; margin: 0 0 16px; padding: 0; }
.versionlist li { padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 14px; }
.versionlist li:last-child { border-bottom: 0; }
.versionlist .n { font-family: var(--serif); font-weight: 600; margin-right: 10px; }

/* a long form should not arrive all at once */
.reveal { margin-top: 6px; }
.reveal > summary { list-style: none; display: inline-flex; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal[open] > summary { margin-bottom: 16px; }

/* mobile money, from design-review/payment.html */
.method { display: flex; align-items: center; gap: 12px; border: 2px solid var(--rule);
  background: #fff; border-radius: 8px; padding: 15px; margin: 13px 0; cursor: pointer; }
.method:has(:checked) { border-color: var(--link); background: #f5fafc; }
.method-logo { width: 38px; height: 38px; border-radius: 50%; background: #ffcc00;
  display: grid; place-items: center; font-size: 10px; font-weight: 900; flex: none; }
.method.orange .method-logo { background: #ff7900; color: #fff; }
.method small { display: block; color: var(--ink-soft); }

.order { background: #fff; border: 1px solid var(--rule); border-radius: 9px;
  padding: 25px; }
.pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 50px;
  padding: 55px 0 80px; align-items: start; }
@media (max-width: 900px) { .pay-layout { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 620px) {
  .stage { font-size: 0; }
  .stage::before { width: 14px; height: 14px; }
}

/* ── the moderator's screens ──────────────────────────────────────────────
   From design-review/moderation.html and moderation-detail.html: the queue as
   cards with the subject's colour on top, and one submission with the decision
   held beside it. */

.queue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.queue-card { background: #fff; border: 1px solid var(--rule);
  border-top: 3px solid var(--accent); border-radius: 7px; padding: 19px;
  text-decoration: none; color: var(--ink); display: block;
  transition: transform .14s ease, box-shadow .2s ease; }
.queue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.queue-card h2 { font-family: var(--serif); font-weight: 600; font-size: 18px;
  line-height: 1.3; margin: 8px 0; }
.queue-card p { font-size: 11px; color: var(--ink-soft); margin: 0; }
.queue-card .ref { display: block; margin-top: 12px; font-size: 11px;
  color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px;
  align-items: start; }
.review-title { font-family: var(--serif); font-weight: 600; font-size: 38px;
  line-height: 1.1; margin: 8px 0 18px; letter-spacing: -.025em; }
.section-card .serif { font-family: var(--serif); font-size: 17px; line-height: 1.7;
  color: #3f4e5d; }
.section-card small { color: var(--ink-soft); }

.decision-panel { background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 20px; position: sticky; top: 26px; align-self: start; }
.decision-panel h2 { font-family: var(--serif); font-weight: 600; font-size: 23px;
  margin: 0 0 16px; }
.decision-panel .check { display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; margin: 10px 0; color: var(--ink-soft); cursor: pointer; }
.decision-panel .check input { width: auto; margin: 2px 0 0; flex: none; }
.decision-buttons { display: grid; gap: 8px; margin-top: 6px; }
.decision-buttons button { padding: 11px; border-radius: 6px;
  border: 1px solid var(--rule); background: #fff; font: inherit; font-size: 14px;
  font-weight: 750; cursor: pointer; color: var(--ink); }
.decision-buttons button:hover:not(:disabled) { border-color: var(--link); }
.decision-buttons button:disabled { opacity: .45; cursor: not-allowed; }
.decision-buttons .pass { background: #39755d; color: #fff; border-color: #39755d; }
.decision-buttons .pass:hover:not(:disabled) { background: #2f6350; border-color: #2f6350; }
.decision-buttons .reject { color: #ad453a; border-color: #e4b8b2; }

/* an automated check that did not pass should not look like one that did */
.checks li.failed::before { content: "✕"; color: #ad453a; }
.checks li.failed { color: #8c2f26; }

.submission-table td.num { font-variant-numeric: tabular-nums; font-weight: 650; }
.submission-table td small { display: block; color: var(--ink-faint); font-size: 11px;
  margin-top: 2px; }

@media (max-width: 900px) {
  .queue-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .decision-panel { position: static; }
}
@media (max-width: 620px) { .queue-grid { grid-template-columns: 1fr; } }

/* ── ORCID ────────────────────────────────────────────────────────────────
   The mark is ORCID's own green with the iD beside it. An authenticated iD
   carries the mark; a typed one does not, because the mark is precisely the
   claim that it was checked. */
.orcid-card { display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.orcid-card h2 { font-family: var(--serif); font-weight: 600; font-size: 20px;
  margin: 0 0 8px; }
.orcid-id { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap; }
.orcid-id a { color: var(--link); text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.orcid-mark { width: 15px; height: 15px; border-radius: 50%; background: #a6ce39;
  display: inline-block; flex: none; position: relative; }
.orcid-mark::after { content: "iD"; position: absolute; inset: 0;
  color: #fff; font: 700 8px/15px var(--sans); text-align: center;
  letter-spacing: -.02em; }
.button.orcid-button { background: #a6ce39; color: #1b2b06; border-color: #a6ce39;
  gap: 9px; white-space: nowrap; }
.button.orcid-button:hover { background: #94b833; }
.button.orcid-button .orcid-mark { background: #fff; }
.button.orcid-button .orcid-mark::after { color: #6f8c1f; }
.orcid-link { display: inline-flex; align-items: center; margin-left: 4px;
  vertical-align: baseline; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the iD on the sign-up form, once ORCID has confirmed it */
.orcid-confirmed { display: flex; align-items: center; gap: 9px;
  border: 1px solid #cfe0a8; background: #f6faec; border-radius: 7px;
  padding: 12px 13px; font-size: 14px; }
.orcid-confirmed .id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.orcid-or { display: flex; align-items: center; gap: 12px; margin: 12px 0;
  color: var(--ink-faint); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; }
.orcid-or::before, .orcid-or::after { content: ""; flex: 1;
  border-top: 1px solid var(--rule); }
.field .button.orcid-button.block { width: 100%; }

/* ── notifications ────────────────────────────────────────────────────────
   These used to be a band wedged between the masthead and the page, indented
   to a measure that lined up with nothing and pushing the whole layout down.
   They are notifications, so they sit over the page, out of the corner of the
   eye, and leave on their own. An error stays until it is dismissed. */

/* Clears the masthead rather than sitting on top of it. The offset is
   measured from the real header, because its height differs between the
   desktop bar and the collapsed mobile one. */
.toasts { position: fixed; top: var(--toast-top, 18px); right: 18px; z-index: 60;
  display: grid; gap: 10px; width: min(400px, calc(100vw - 36px));
  pointer-events: none; }

.toast { pointer-events: auto; display: grid;
  grid-template-columns: 5px auto minmax(0, 1fr) auto; align-items: start;
  gap: 0 12px; padding: 0; background: #fff; border: 1px solid var(--rule);
  border-radius: 9px; box-shadow: 0 14px 40px rgba(7,26,47,.18);
  overflow: hidden;
  opacity: 0; transform: translateX(14px);
  transition: opacity .22s ease, transform .22s ease; }
.toast.here { opacity: 1; transform: none; }
.toast.going { opacity: 0; transform: translateX(14px); }

/* the spine says what kind of message this is before a word is read */
.toast::before { content: ""; grid-column: 1; align-self: stretch;
  background: var(--ink-faint); }
.toast.good::before { background: #39755d; }
.toast.warn::before { background: var(--gold); }
.toast.bad::before  { background: #ad453a; }
.toast.info::before { background: var(--link); }

.toast .mark { grid-column: 2; width: 20px; height: 20px; border-radius: 50%;
  margin: 15px 0 0; display: grid; place-items: center; font-size: 12px;
  font-weight: 800; color: #fff; }
.toast.good .mark { background: #39755d; }
.toast.warn .mark { background: var(--gold); color: #2f2105; }
.toast.bad  .mark { background: #ad453a; }
.toast.info .mark { background: var(--link); }
.toast.good .mark::after { content: "\2713"; }
.toast.warn .mark::after { content: "!"; }
.toast.bad  .mark::after { content: "!"; }
.toast.info .mark::after { content: "i"; font-style: italic; }

.toast p { grid-column: 3; margin: 0; padding: 14px 0; font-size: 14px;
  line-height: 1.5; color: var(--ink); }
.toast .close { grid-column: 4; border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-faint); padding: 12px 14px 12px 6px; }
.toast .close:hover { color: var(--ink); }

@media (max-width: 620px) {
  .toasts { top: 10px; right: 10px; left: 10px; width: auto; }
  .toast p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; opacity: 1; transform: none; }
}

/* ── the submission form ──────────────────────────────────────────────────
   The screen where somebody hands over work they spent months on. It was two
   plain boxes of fields. */

.section-card .card-head { margin: 0 0 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-soft); }
.section-card .card-head h2 { margin: 0 0 5px; }
.section-card .card-head p { margin: 0; font-size: 13px; color: var(--ink-soft);
  line-height: 1.6; }

.field .counter { display: block; text-align: right; font-size: 11px;
  color: var(--ink-faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.field .counter.over { color: #ad453a; font-weight: 700; }

/* the drop area, which is a label so the whole thing is the control */
label.upload { display: block; cursor: pointer; border: 1.5px dashed #9eb2c0;
  border-radius: 10px; background: #f7fafb; padding: 30px 24px; text-align: center;
  transition: border-color .15s ease, background-color .15s ease; }
label.upload:hover, label.upload.over { border-color: var(--link); background: #eef6fb; }
label.upload:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
label.upload .upload-mark { display: block; width: 38px; height: 38px; margin: 0 auto 12px;
  border-radius: 50%; background: #e4eef4; position: relative; }
label.upload .upload-mark::after { content: ""; position: absolute; inset: 0;
  background: var(--link); clip-path: polygon(
    46% 20%, 54% 20%, 54% 46%, 68% 46%, 50% 66%, 32% 46%, 46% 46%);
  opacity: .8; }
label.upload strong { display: block; font-family: var(--serif); font-weight: 600;
  font-size: 18px; }
label.upload .hint { display: block; font-size: 12px; color: var(--ink-soft);
  margin-top: 5px; }
label.upload input[type=file] { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
label.upload .chosen[hidden] { display: none; }
label.upload .chosen { display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: #e5f3eb;
  color: #2b6a4e; font-size: 13px; font-weight: 700; }
label.upload .chosen::before { content: "\2713"; }

.reveal-on-other[hidden] { display: none; }
.reveal-on-other { border-left: 3px solid var(--gold); padding-left: 16px;
  margin: 0 0 18px; }

/* a consent that matters should not look like a preference */
.field.consent { border: 1px solid var(--rule); border-radius: 8px;
  background: #f7fafb; padding: 16px 18px; margin-top: 22px; }
.field.consent.bad { border-color: #ad453a; background: #fdf1ef; }
.field.consent label { display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; font-weight: 600; cursor: pointer; margin: 0; }
.field.consent input { width: auto; margin: 2px 0 0; flex: none; }
.field.consent small { margin-top: 9px; }
.reveal-on-value[hidden] { display: none; }
.reveal-on-value { border-left: 3px solid var(--gold); padding-left: 16px;
  margin: 0 0 18px; }
.field label .req { font-weight: 500; color: #ad453a; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; margin-left: 7px; }

/* declarations, on the record and in front of the moderator */
.declarations { margin: 0; }
.declarations > div { display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.declarations > div:first-child { border-top: 0; padding-top: 0; }
.declarations dt { font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 700; padding-top: 3px; }
.declarations dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.declarations dd.missing { color: #ad453a; font-weight: 650; }
@media (max-width: 620px) {
  .declarations > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ── the submission stepper ───────────────────────────────────────────────
   Three steps rather than one scroll of twelve fields. Hidden until the
   script runs, because without it every step is on the page at once and a
   row of numbers claiming otherwise would be a lie. */

.stepper[hidden] { display: none; }
.stepper { list-style: none; display: grid; grid-auto-flow: column;
  grid-auto-columns: 1fr; gap: 0; margin: 0 0 26px; padding: 0; }
.stepper li { position: relative; padding-top: 26px; cursor: pointer;
  color: #8b979f; font-size: 12px; font-weight: 700; }
.stepper li::after { content: ""; position: absolute; top: 9px; left: 12px;
  right: -12px; height: 2px; background: #bdc8ce; }
.stepper li:last-child::after { display: none; }
.stepper .n { position: absolute; top: 0; left: 0; width: 22px; height: 22px;
  border-radius: 50%; background: #bdc8ce; color: #fff; display: grid;
  place-items: center; font-family: var(--serif); font-size: 12px;
  font-weight: 600; z-index: 1; }
.stepper li.done .n { background: #39755d; }
.stepper li.done::after { background: #39755d; }
.stepper li.done { color: #39755d; }
.stepper li.on .n { background: var(--gold); color: #2f2105;
  box-shadow: 0 0 0 5px #faedcf; }
.stepper li.on { color: var(--ink); }
.stepper .l { display: block; }

.back-link { margin: 0 0 14px; }
.step-form { max-width: 780px; }
.step-form [data-step][hidden] { display: none; }
.actionbar [data-back] { margin-right: auto; }

/* The step heading is focused when a step opens so a screen reader is told
   where it now is. That is not a place the user tabbed to, so it should not
   draw a ring; keyboard focus still does. */
.step-form h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

@media (max-width: 620px) {
  /* Numbers only. The card heading names the step, so the labels would be
     saying it twice in a space that has room for neither. */
  .stepper .l { display: none; }
  .stepper li { padding-top: 24px; }
}
label.upload.bad { border-color: #ad453a; background: #fdf1ef; }
[data-file-error][hidden] { display: none; }
/* an error is an error wherever it is written, not only inside a .field */
small.err { display: block; color: #ad453a; font-weight: 600; font-size: 12.5px;
  margin-top: 8px; }
.panel-rule { border: 0; border-top: 1px solid var(--rule); margin: 22px 0; }
.decision-panel .button.block { width: 100%; }

/* ── the account menu ─────────────────────────────────────────────────────
   Signed in, the bar used to carry Screening, Your work and Sign out as three
   more links beside the search box. With a moderator signed in it ran out of
   room and the first of them sat underneath the search field, and "Screening"
   meant two different things in the same row. They live behind the account
   name now, which is where things you do to your own account belong. */

.account { position: relative; flex: none; }
.account-button { display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(7,26,47,.22); background: rgba(255,255,255,.5);
  border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 650; color: var(--navy); }
.account-button:hover, .account.open .account-button { background: #fff; }
.account-button .initials { width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-family: var(--serif); font-size: 13px; font-weight: 600; flex: none; }
.account-button .who { white-space: nowrap; }
.account-button .caret { width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  flex: none; }
.account.open .account-button .caret { transform: rotate(225deg) translate(-1px, -1px); }

.account-menu[hidden] { display: none; }
.account-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50;
  min-width: 230px; background: #fff; border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 18px 44px rgba(7,26,47,.18); padding: 8px;
  display: grid; gap: 1px; }
.account-menu .signed-in-as { margin: 4px 10px 8px; font-size: 11.5px;
  color: var(--ink-soft); line-height: 1.5; }
.account-menu .signed-in-as b { color: var(--ink); font-weight: 650;
  word-break: break-all; }
.account-menu a { display: block; padding: 9px 10px; border-radius: 6px;
  text-decoration: none; font-size: 14px; color: var(--ink); font-weight: 600; }
.account-menu a:hover { background: #eef4f7; color: var(--link); }
.account-menu hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 6px 0; }

@media (max-width: 900px) {
  /* In the phone panel it is a plain list; a menu inside a menu helps nobody. */
  .account { width: 100%; }
  .account-button { display: none; }
  .account-menu, .account-menu[hidden] { display: grid; position: static;
    border: 0; box-shadow: none; background: none; padding: 0; min-width: 0; }
  .account-menu .signed-in-as { color: #4a3203; margin-left: 4px; }
  .account-menu .signed-in-as b { color: var(--navy); }
  .account-menu a { color: #221805; padding: 13px 4px; border-radius: 0;
    border-bottom: 1px solid rgba(7,26,47,.13); }
  .account-menu a:hover { background: none; }
  .account-menu hr { display: none; }
}

/* ── the moderator's queue ────────────────────────────────────────────────
   Four figures that are links to the thing they count rather than numbers
   sitting there, then the queue as rows a person can scan. */

.crumbs { font-size: 12px; color: var(--ink-soft); margin: 0 0 18px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.crumbs span { margin: 0 6px; color: var(--ink-faint); }
.crumbs b { color: var(--ink); font-weight: 650; }

.segmented { display: inline-flex; background: #fff; border: 1px solid var(--rule);
  border-radius: 999px; padding: 4px; gap: 2px; }
.segmented a { padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.segmented a:hover { color: var(--ink); }
.segmented a.on { background: var(--navy); color: #fff; }
.segmented .count { display: inline-grid; place-items: center; min-width: 18px;
  height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: rgba(255,255,255,.22); font-size: 11px; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 18px; }
.tile { position: relative; display: block; padding: 18px 20px; border-radius: 11px;
  border: 1px solid var(--rule); background: #fff; text-decoration: none;
  color: var(--ink); transition: transform .14s ease, box-shadow .2s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile .mark { display: block; width: 34px; height: 34px; border-radius: 9px;
  margin-bottom: 12px; }
.tile strong { display: block; font-family: var(--serif); font-weight: 600;
  font-size: 27px; line-height: 1.1; }
.tile .label { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 800; color: var(--ink-soft); margin-top: 4px; }
.tile .under { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.tile::after { content: "›"; position: absolute; right: 16px; top: 20px;
  color: var(--ink-faint); font-size: 20px; line-height: 1; }
.tile.amber  { background: #fdf8ee; border-color: #f0e2c4; }
.tile.amber  .mark { background: #f6e4bd; }
.tile.blue   { background: #f1f7fb; border-color: #cfe1ee; }
.tile.blue   .mark { background: #d3e6f4; }
.tile.green  { background: #f1f8f4; border-color: #cde3d6; }
.tile.green  .mark { background: #cfe7d9; }
.tile.violet { background: #f7f4fb; border-color: #ded3ec; }
.tile.violet .mark { background: #e2d8f2; }

.card-head.split { display: flex; justify-content: space-between;
  align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.queue-tools { display: flex; gap: 10px; align-items: center; }
.queue-tools select { border: 1px solid var(--rule); background: #fff;
  border-radius: 7px; padding: 9px 10px; font: inherit; font-size: 13px; }
.searchbox.small { display: inline-flex; border: 1px solid var(--rule);
  border-radius: 7px; overflow: hidden; background: #fff; box-shadow: none; }
.searchbox.small input { border: 0; padding: 9px 12px; font: inherit;
  font-size: 13px; outline: none; width: 11rem; min-width: 0; }
.searchbox.small button { border: 0; background: #eef4f7; color: var(--navy);
  padding: 0 14px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.searchbox.small button:hover { background: #e0ebf1; }

.queue-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 190px;
  gap: 20px; align-items: center; padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft); position: relative; }
.queue-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.queue-row::before { content: ""; position: absolute; left: -24px; top: 20px;
  bottom: 20px; width: 3px; background: var(--accent); border-radius: 2px; }
.queue-row .filemark { height: 78px; border-radius: 8px; background: #f4f7f9;
  border: 1px solid var(--rule); display: grid; place-items: center; }
.queue-row .filemark span { font-family: var(--sans); font-size: 12px;
  font-weight: 900; letter-spacing: .06em; color: #ad453a; }
.queue-row .waited { display: inline-block; font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; background: #e6f0f7;
  color: #27618b; border-radius: 999px; padding: 4px 9px; margin-bottom: 8px; }
.queue-row h3 { font-family: var(--serif); font-weight: 600; font-size: 19px;
  line-height: 1.3; margin: 0 0 6px; }
.queue-row h3 a { text-decoration: none; color: var(--ink); }
.queue-row h3 a:hover { color: var(--link); }
.queue-row .who { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 4px; }
.queue-row .facts { font-size: 11.5px; color: var(--ink-faint); margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.queue-row .side { text-align: right; }
.queue-row .when { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px;
  line-height: 1.5; }
.queue-row .when span { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint); font-weight: 700; }
.button.gold { background: var(--gold); color: #2f2105; border-color: var(--gold); }
.button.gold:hover { background: var(--gold-lift); }

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .queue-row { grid-template-columns: 64px minmax(0, 1fr); }
  .queue-row .filemark { height: 60px; }
  .queue-row .side { grid-column: 2; text-align: left; display: flex;
    align-items: center; gap: 16px; flex-wrap: wrap; }
  .queue-row .when { margin: 0; }
  .queue-row::before { left: -14px; }
}
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .card-head.split { flex-direction: column; align-items: stretch; }
  .queue-tools { flex-direction: column; align-items: stretch; }
  .searchbox.small input { width: auto; flex: 1; }
}
.tile .mark { display: grid; place-items: center; }
.tile .mark svg { width: 18px; height: 18px; }
.tile.amber  .mark svg { color: #8a6410; }
.tile.blue   .mark svg { color: #1d5c86; }
.tile.green  .mark svg { color: #2b6a4e; }
.tile.violet .mark svg { color: #5b4291; }

/* ── one submission, from the author's side ───────────────────────────────
   Built to the screen the founder sent: the journey across the top, what is
   waiting on whom in a sentence, then the three things an author manages. */

.record-head { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.record-title { font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.025em;
  margin: 0 0 10px; max-width: 22ch; }
.record-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-soft); margin: 0 0 28px; }
.record-facts b { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.record-facts .dot { color: var(--ink-faint); }
.record-facts .doc { width: 14px; height: 16px; border: 1.5px solid var(--ink-faint);
  border-radius: 2px; display: inline-block; }
.vchip { display: inline-block; background: #e6f0f7; color: #27618b; font-size: 10.5px;
  font-weight: 800; border-radius: 4px; padding: 2px 6px; letter-spacing: .03em; }

/* the journey */
.journey { list-style: none; display: grid; grid-auto-flow: column;
  grid-auto-columns: 1fr; margin: 0 0 26px; padding: 0; }
.journey li { position: relative; padding-top: 52px; text-align: left;
  color: var(--ink-faint); }
.journey li::after { content: ""; position: absolute; top: 19px; left: 40px;
  right: 0; height: 2px; background: #cfd8de; }
.journey li:last-child::after { display: none; }
.journey .ring { position: absolute; top: 0; left: 0; width: 38px; height: 38px;
  border-radius: 50%; display: grid; place-items: center; background: #eef2f4;
  color: #94a2ac; border: 1px solid #d7dee3; z-index: 1; }
.journey .ring svg { width: 17px; height: 17px; }
.journey .name { display: block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; }
.journey .says { display: block; font-size: 12px; margin-top: 3px; }
.journey li.done { color: #2b6a4e; }
.journey li.done .ring { background: #2b6a4e; color: #fff; border-color: #2b6a4e; }
.journey li.done::after { background: #2b6a4e; }
.journey li.current { color: #8a6410; }
.journey li.current .ring { background: var(--gold); color: #2f2105;
  border-color: var(--gold); box-shadow: 0 0 0 5px #faedcf; }
.journey li.current .name { color: var(--ink); }

/* what is waiting on whom */
.notice-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  align-items: start; background: #eef5fa; border: 1px solid #cfe1ee;
  border-left: 4px solid var(--link); border-radius: 10px; padding: 18px 20px;
  margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; }
.notice-card b { color: var(--ink); }
.notice-card .mark { width: 26px; height: 26px; border-radius: 50%; display: block;
  position: relative; }
.notice-card .mark::after { position: absolute; inset: 0; display: grid;
  place-items: center; color: #fff; font: 800 14px/1 var(--sans); }
.notice-card .mark.info { background: var(--link); }
.notice-card .mark.info::after { content: "i"; font-style: italic; }
.notice-card .mark.good { background: #39755d; } .notice-card .mark.good::after { content: "\2713"; }
.notice-card .mark.warn { background: var(--gold); } .notice-card .mark.warn::after { content: "!"; color: #2f2105; }
.notice-card .mark.bad  { background: #ad453a; } .notice-card .mark.bad::after  { content: "!"; }
.notice-card.good { background: #f0f7f3; border-color: #cde3d6; border-left-color: #39755d; }
.notice-card.warn { background: #fdf8ee; border-color: #f0e2c4; border-left-color: var(--gold); }
.notice-card.bad  { background: #fdf1ef; border-color: #e6b3ac; border-left-color: #ad453a; }

/* the cards an author manages */
.record-card { background: #fff; border: 1px solid var(--rule); border-radius: 11px;
  padding: 24px 26px; margin: 0 0 16px; }
.record-card.quiet { background: #fbfcfd; }
.record-card > header { display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px; align-items: start; padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft); }
.record-card > header h2 { font-family: var(--serif); font-weight: 600; font-size: 21px;
  margin: 0 0 3px; }
.record-card > header p { margin: 0; font-size: 13px; color: var(--ink-soft);
  line-height: 1.55; }
.record-card .icon { width: 40px; height: 40px; border-radius: 11px; display: block; }
.record-card .icon.amber  { background: #f9edd6; }
.record-card .icon.blue   { background: #dceaf5; }
.record-card .icon.violet { background: #e7dff5; }
.record-card .icon.green  { background: #d9ede2; }
.record-card .icon.grey   { background: #e8edf0; }

.people, .files { list-style: none; margin: 0 0 16px; padding: 0; }
.people li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.people li:last-child { border-bottom: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold);
  color: #2f2105; display: grid; place-items: center; font-family: var(--serif);
  font-weight: 600; font-size: 15px; }
.person b { font-size: 15px; }
.person small { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.chip.corresponding { background: #f9edd6; color: #8a6410; font-size: 9.5px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  border-radius: 4px; padding: 3px 7px; margin-left: 9px; }

.files li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.files li:last-child { border-bottom: 0; }
.pdfmark { width: 42px; height: 48px; border-radius: 6px; background: #fdecea;
  border: 1px solid #f3cdc7; display: grid; place-items: center;
  font: 800 11px var(--sans); color: #ad453a; }
.files .what b { font-size: 15px; word-break: break-all; }
.files .what small { display: block; font-size: 12.5px; color: var(--ink-soft);
  margin-top: 3px; line-height: 1.5; }
.files .acts { display: flex; gap: 8px; }
.files .acts .button { padding: 8px 14px; font-size: 13px; }

.record-card .decided { font-size: 14px; margin: 0 0 6px; }

/* the strip along the bottom */
.record-strip { display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--rule); border-radius: 11px;
  margin-top: 22px; overflow: hidden; }
.record-strip > div { padding: 18px 20px; border-right: 1px solid var(--rule-soft); }
.record-strip > div:last-child { border-right: 0; }
.record-strip .k { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-faint); font-weight: 800; margin-bottom: 6px; }
.record-strip b { display: block; font-size: 15px; }
.record-strip b.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.record-strip small { display: block; font-size: 12px; color: var(--ink-soft);
  margin-top: 2px; }

@media (max-width: 900px) {
  .journey { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .journey li { padding: 0 0 22px 52px; }
  .journey li::after { top: 38px; bottom: 0; left: 18px; right: auto;
    width: 2px; height: auto; }
  .record-strip { grid-template-columns: repeat(2, 1fr); }
  .record-strip > div:nth-child(2) { border-right: 0; }
  .files li, .people li { grid-template-columns: 44px minmax(0, 1fr); }
  .files .acts { grid-column: 2; }
}
@media (max-width: 620px) {
  .record-strip { grid-template-columns: 1fr; }
  .record-strip > div { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .record-card { padding: 20px 18px; }
}
.record-card .icon { display: grid; place-items: center; }
.record-card .icon svg { width: 20px; height: 20px; }
.record-card .icon.amber  svg { color: #8a6410; }
.record-card .icon.blue   svg { color: #1d5c86; }
.record-card .icon.violet svg { color: #5b4291; }
.record-card .icon.green  svg { color: #2b6a4e; }
.record-card .icon.grey   svg { color: #5d6972; }


/* ── the shell gutter is an invariant ─────────────────────────────────────
   Three layouts carried `padding: 48px 0 70px` on the same element as .wrap.
   A padding shorthand replaces all four sides, so each of them silently set
   the horizontal padding to zero and put the page hard against the edge of a
   phone. It went unnoticed because a horizontal-overflow check cannot see it:
   nothing overflowed, the text simply had no margin.

   This is declared last on purpose. It has the same specificity as those
   layout rules, so being later means it wins, and the next person to write a
   padding shorthand on a .wrap element gets their block padding and keeps the
   page's margins. Anything that genuinely needs to reach the edge sets
   padding-inline itself, after this. */
.wrap { padding-inline: var(--gutter); }

@media (max-width: 620px) {
  /* Slightly more room on a phone than on a desktop, not less: a hand grips
     the edge of the screen, and a line that starts under the thumb reads as
     cramped even when nothing is clipped. */
  :root { --gutter: 24px; }
}