/* ==========================================================================
   iucsub6.css – one self-contained sheet for the submission-system pages of
   every journal
   ==========================================================================

   WHAT THIS IS
   ------------
   iucsub4.css rebuilt the modern page frame from the generated markup of the
   journal-s pages, and iucsub5.css layered the extras (sticky header,
   progress bar, view transitions, print) on top of it by @import.  This
   sheet merges the two into ONE file with no @import – so it can be dropped
   into any page, including by hand through the browser's developer tools –
   and generalises it across the pages saved from the live system for the
   other journals:

     * a, b, c, d, e, f, j, s, x  – the stage-1 "new submission" pages,
       including the special-issue and Education and Outreach variants,
       which carry an extra banner table and a subtitle beside the stage line;
     * m (IUCrJ)                  – whose logo is a text wordmark rather than
       an image, whose stage line has eight stages, and whose form has
       extra script-driven boxes;
     * the journal landing pages  – "submit an article to Acta A / Acta E",
       "submit a data article to IUCrData": a welcome card with a section
       chooser or article-type tiles, no stage line;
     * the journal chooser page   – "submit an article to an IUCr journal":
       a plain nested list of links.

   HOW THE PAGES ARE RECOGNISED
   ----------------------------
   Nothing is keyed on the page id alone.  The journal is read from the logo
   file name in the first div's inline style (/logos/b.png ...) or from the
   #jpage_<x> wrapper where there is one; the stage line is the table that
   contains <font size="+3">; the form card is the last .reducedwidth table
   of the form (stage pages) or of the body (other pages); the special-issue
   banner is the .reducedwidth table in the form that is none of the above.

   THE TRICKS, IN ONE PLACE
   ------------------------
   * form { display: contents } (stage-1 pages)   The form's box disappears,
     so the tables inside it become direct grid items of #jpage_<x>.  A grid
     then places the h1, the stage line, the banner, the special-issues box
     and the form card.  The form still submits normally.
   * The header band is a fixed pseudo-element with a frosted backdrop; the
     logo div is re-positioned into it (fixed) and shrunk, or, for IUCrJ,
     left as text; the journal name beside the logo is generated content.
   * The "Stage - 1 - 2 - 3 ..." run of <font> tags becomes a step indicator:
     the cell is a flex row with font-size:0 (hiding the " - " text nodes),
     each <font> is a disc, and flexbox order moves the stage name next to
     the current disc.  Earlier stages are shown as done.
   * The progress bar is body::after, sized by which <font> is the current
     one and how many there are.
   * :has() identifies tables and rows by content, never by position alone.

   SWITCHES
   --------
   Section 0 holds the settings that are meant to be flipped: the
   stage-to-stage animation (off) and the sticky action strip (on).

   LIMITS
   ------
   * Journal names are generated text keyed on the logo file name (section
     2); a journal with a new logo file needs a line there.
   * Generated hint text beside the stage-1 upload button is English only.
   * Uses :has(), display:contents, color-mix(), ::file-selector-button and
     backdrop-filter – all in current browsers; older ones get a plainer page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. SWITCHES
   -------------------------------------------------------------------------- */

/* Stage-to-stage animation (section 10).
     navigation: none  – off: pages change instantly (current setting)
     navigation: auto  – on:  the step indicator, progress bar and title
                         morph and the card slides in between stage pages */
@view-transition {
  navigation: none;
}

/* Sticky action strip on the stage-1 form card (section 6a): on.  To turn it
   off, delete or comment out the block marked "STICKY ACTION STRIP". */


/* --------------------------------------------------------------------------
   1. Tokens, page ground, the content column and base typography
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Journal colour tokens: the defaults are journal s; section 1a sets them
     per journal.  --sub-link is the link colour (dark enough to read) and
     --sub-accent-text the text colour on an accent-filled button or disc. */
  --sub-accent:       #4890cd;
  --sub-accent-dark:  #32669a;
  --sub-accent-text:  #ffffff;
  --sub-link:         #32669a;
  --sub-link-hover:   #4890cd;
  --sub-ink:          #162d41;
  --sub-pale:         #eef5fb;
  --sub-pale-border:  #cfe0ef;

  /* Neutral tokens. */
  --sub-text:         #23303b;
  --sub-heading:      #666666;   /* section headings: grey, not the journal colour  */
  --sub-button-bg:    #003366;   /* NOT used by default: the navy of the filled
                                    "Submit your article" button on
                                    the journal websites; the same on every journal,
                                    so it is safe for the yellow d and lime f       */
  --sub-button-hover: #00284f;
  --sub-button-text:  #ffffff;
  --sub-button-focus: #007766;   /* the focus ring those buttons use                */
  --sub-panel:        #f5f7fa;   /* light NEUTRAL fill for the special-issues box,
                                    the banners and the highlight boxes; put
                                    var(--sub-pale) here for the journal tint  */
  --sub-error:        #c0392b;   /* the stripe on the validation error box      */
  --sub-muted:        #5f6b76;
  --sub-border:       #d5dde4;
  --sub-field-border: #b6c3ce;
  --sub-field-hover:  #8fa4b6;
  --sub-page-bg:      #f4f6f8;
  --sub-surface:      #ffffff;   /* cards, fields, discs                      */
  --sub-surface-2:    #f8fafc;   /* action strip, file control, tiles         */
  --sub-band:         #ffffff;   /* header band (drawn translucent)           */
  --sub-shadow:       rgba(22, 45, 65, 0.06);
  --sub-shadow-lift:  rgba(22, 45, 65, 0.12);
  --sub-radius:       6px;
  --sub-radius-lg:    10px;
  --sub-strip-h:      56px;      /* height of the action strip at the foot of the form card */
  --sub-progress-h:   3px;
  --sub-ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --sub-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Page frame geometry. */
  --sub-header-h: 64px;
  --sub-col-max:  1120px;
  --sub-col-pad:  24px;
  /* Left edge of the content column measured from the viewport edge (for
     the fixed logo). */
  --sub-col-edge: max(var(--sub-col-pad), calc(50% - var(--sub-col-max) / 2 + var(--sub-col-pad)));
}

/* 1a. Per-journal palettes, keyed on the logo file name in the first div's
   inline style, or on the #jpage_<x> wrapper.  Colours come from the
   journals' existing button and tab styles in iucsub.css/static_tabs.css. */
body:has(> div:first-of-type[style*="/logos/a.png"]), body:has(#jpage_a) {
  --sub-accent: #0451a0; --sub-accent-dark: #003366; --sub-link: #003366; --sub-link-hover: #0451a0;
  --sub-ink: #003366; --sub-pale: #e6f2fe; --sub-pale-border: #bcd6ee;
}
body:has(> div:first-of-type[style*="/logos/b.png"]), body:has(#jpage_b), body:has(#jpage_i) {
  --sub-accent: #2b5629; --sub-accent-dark: #1d3d1c; --sub-link: #263a15; --sub-link-hover: #2b5629;
  --sub-ink: #263a15; --sub-pale: #f3faeb; --sub-pale-border: #cfe3bd;
}
body:has(> div:first-of-type[style*="/logos/c.png"]), body:has(#jpage_c) {
  --sub-accent: #df3d01; --sub-accent-dark: #b83000; --sub-link: #b83000; --sub-link-hover: #df3d01;
  --sub-ink: #7a1d00; --sub-pale: #ffece6; --sub-pale-border: #f4c9b8;
}
body:has(> div:first-of-type[style*="/logos/d.png"]), body:has(#jpage_d) {
  --sub-accent: #f8cc00; --sub-accent-dark: #e0b800; --sub-accent-text: #660000;
  --sub-link: #660000; --sub-link-hover: #8a1a00;
  --sub-ink: #660000; --sub-pale: #fff6cc; --sub-pale-border: #efdc8a;
}
body:has(> div:first-of-type[style*="/logos/e.png"]), body:has(#jpage_e) {
  --sub-accent: #a42c78; --sub-accent-dark: #7e1f5b; --sub-link: #7e1f5b; --sub-link-hover: #a42c78;
  --sub-ink: #401434; --sub-pale: #faebf4; --sub-pale-border: #ebc4dc;
}
body:has(> div:first-of-type[style*="/logos/f.png"]), body:has(#jpage_f) {
  --sub-accent: #c4d931; --sub-accent-dark: #a9bd21; --sub-accent-text: #1f481d;
  --sub-link: #1f481d; --sub-link-hover: #4f7a1e;
  --sub-ink: #1f481d; --sub-pale: #f6f9e1; --sub-pale-border: #dde7a3;
}
body:has(> div:first-of-type[style*="/logos/j.png"]), body:has(#jpage_j) {
  --sub-accent: #e97905; --sub-accent-dark: #c26200; --sub-link: #c26200; --sub-link-hover: #e97905;
  --sub-ink: #43260a; --sub-pale: #fef2e6; --sub-pale-border: #f6d3ae;
}
body:has(#jpage_m),
body:has(> div:first-of-type[style*="/logos/x.png"]), body:has(#jpage_x) {
  --sub-accent: #990000; --sub-accent-dark: #700000; --sub-link: #990000; --sub-link-hover: #c00000;
  --sub-ink: #4d0000; --sub-pale: #f7eeee; --sub-pale-border: #e6c5c5;
}
body:has(> div:first-of-type[style*="/logos/s.png"]), body:has(#jpage_s) {
  --sub-accent: #4890cd; --sub-accent-dark: #32669a; --sub-link: #32669a; --sub-link-hover: #4890cd;
  --sub-ink: #162d41; --sub-pale: #eef5fb; --sub-pale-border: #cfe0ef;
}

/* SWITCH: the colour of form labels, tooltip labels, the panel lead text and
   the other non-link run of text.  Declared here, after the palettes, and on
   body rather than :root, so that var(--sub-ink) resolves to the journal
   colour of the page it is used on.

     --sub-label: #2f3b46;          neutral (current setting), so that nothing
                                    unclickable looks like a link
     --sub-label: var(--sub-ink);   the journal colour
   Section headings are separate and stay grey; see --sub-heading above. */
body {
  --sub-label: #2f3b46;
}

/* The page ground (the root element's background covers the whole canvas). */
html {
  background-color: var(--sub-page-bg);
}

/* <body> is the centred content column.  The bgcolor="white" attribute is
   overridden so the ground shows through.  Fluid base size: 12.5px on a
   narrow window, 14px on a wide one. */
body {
  position: relative;
  box-sizing: border-box;
  max-width: var(--sub-col-max);
  margin: 0 auto;
  padding: calc(var(--sub-header-h) + 18px) var(--sub-col-pad) 0;
  font-family: var(--sub-font);
  font-size: clamp(12.5px, 0.35vw + 10px, 14px);
  line-height: 1.45;
  color: var(--sub-text);
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Let everything inherit the page font (iucsub.css pins td/p/input/select
   to Verdana 12px and gives p a 5px padding). */
body td,
body th,
body p,
body input,
body select,
body textarea,
body button,
body fieldset,
body label {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
body p {
  margin: 0 0 10px;
  padding: 0;
}
body b,
body strong {
  font-weight: 600;
}

/* Links: global.css/iucsub.css set a[href] and a.acta<x>:link/:visited/:hover
   at up to (0,2,1); a[href] plus the pseudo-class here is (0,2,2). */
body a[href],
body a[href]:link,
body a[href]:visited {
  color: var(--sub-link);
  text-decoration: none;
}
body a[href]:hover {
  color: var(--sub-link-hover);
  text-decoration: underline;
}

/* [info] icons. */
body img[src$="info.gif"] {
  vertical-align: -3px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
body a:hover > img[src$="info.gif"] {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   2. Header band: frosted, fixed; logo or wordmark + journal name
   -------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sub-header-h);
  z-index: 10;
  background-color: color-mix(in srgb, var(--sub-band) 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--sub-border);
}
@supports not (backdrop-filter: blur(1px)) {
  body::before {
    background-color: var(--sub-band);
  }
}

/* Pages with no logo div (the journal chooser): the band carries a label. */
body:not(:has(> div:first-of-type[style*="float: right"]))::before {
  content: "IUCr Journals";
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: var(--sub-col-edge);
  font: 600 16px/1.2 var(--sub-font);
  color: var(--sub-ink);
}

/* The logo is the first div in body, floated right and entirely
   inline-styled, so every override needs !important.  It is fixed into the
   band at the column's left edge. */
body > div:first-of-type[style*="float: right"] {
  position: fixed !important;
  float: none !important;
  top: 10px !important;
  left: var(--sub-col-edge) !important;
  margin: 0 !important;
  z-index: 11;
  text-align: left !important;
}

/* Image logo (a, b, c, d, e, f, j, s, x): a 60x65 background image shown at
   40x44. */
body > div:first-of-type[style*="float: right"][style*="background"] {
  width: 40px !important;
  height: 44px !important;
  background-size: 40px 44px !important;
  background-repeat: no-repeat !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(22, 45, 65, 0.18) !important;
}

/* Text wordmark (IUCrJ): keep the text, size it to the band. */
body > div:first-of-type[style*="float: right"]:not([style*="background"]) {
  width: auto !important;
  height: 44px !important;
  font-family: var(--sub-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 44px !important;
  color: var(--sub-accent) !important;
  letter-spacing: -0.01em;
}

/* Journal name beside the image logo – generated, keyed on the logo file. */
body > div:first-of-type[style*="float: right"][style*="background"]::after {
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 600 16px/1.2 var(--sub-font);
  color: var(--sub-ink);
}
body > div:first-of-type[style*="/logos/a.png"]::after { content: "Acta Crystallographica Section A"; }
body > div:first-of-type[style*="/logos/b.png"]::after { content: "Acta Crystallographica Section B"; }
body > div:first-of-type[style*="/logos/c.png"]::after { content: "Acta Crystallographica Section C"; }
body > div:first-of-type[style*="/logos/d.png"]::after { content: "Acta Crystallographica Section D"; }
body > div:first-of-type[style*="/logos/e.png"]::after { content: "Acta Crystallographica Section E"; }
body > div:first-of-type[style*="/logos/f.png"]::after { content: "Acta Crystallographica Section F"; }
body > div:first-of-type[style*="/logos/j.png"]::after { content: "Journal of Applied Crystallography"; }
body > div:first-of-type[style*="/logos/s.png"]::after { content: "Journal of Synchrotron Radiation"; }
body > div:first-of-type[style*="/logos/x.png"]::after { content: "IUCrData"; }


/* --------------------------------------------------------------------------
   3. Page title
   The h1 carries an inline margin (or the .usualstyle class), hence the
   !important.  On stage-1 pages it is a grid item (section 5); elsewhere it
   is a plain block at the top of the column.
   -------------------------------------------------------------------------- */

body h1 {
  margin: 0 0 16px !important;
  font: 600 22px/1.2 var(--sub-font);
  letter-spacing: -0.01em;
  color: var(--sub-ink);
}
body h1::first-letter {
  text-transform: uppercase;    /* the generated titles are lower case */
}


/* --------------------------------------------------------------------------
   4. Step indicator, built from the "Stage - 1 - 2 - 3 ..." table
   The stage table is the .reducedwidth table that contains <font size="+3">
   and no other .reducedwidth table.  It is flattened to blocks and the inner
   cell with the <font> run becomes a flex row.  The current stage is the
   <font size="+3">, the others are <font size="-1">, and the stage's name is
   a <font size="-1"><i>...</i></font> after a <br />.  The left-hand cell
   holds a float div that is empty on plain pages and carries a subtitle on
   the special-issue and section variants ("Advances", "research
   communications (...)").
   -------------------------------------------------------------------------- */

table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) {
  display: block;                  /* a shrink-to-fit table would hug the left */
  width: max-content;              /* never narrower than the step row */
  max-width: 100%;
  margin: 0;
  background-color: transparent;   /* cancels the bgcolor="#ffffff" attribute */
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) :is(tbody, tr, td, table) {
  display: block;
  width: auto;
  padding: 0;
}

/* The subtitle div: a muted line above the step row (hidden when empty). */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) td > div[style*="float"] {
  float: none !important;
  margin: 0 0 4px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  color: var(--sub-muted) !important;
  text-align: right;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) td > div[style*="float"]:empty {
  display: none;
}

/* The cell with the <font> run: font-size 0 hides the " - " separators. */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > br {
  display: none;
}
/* Nothing in the row may shrink: a squeezed disc turns into an oval. */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > * {
  flex: none;
}

/* "Stage" – a small caps label at the start. */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font[size="+2"] {
  order: 0;
  margin-right: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sub-muted);
}

/* Discs: every <font> except the "Stage" label and the stage-name label. */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font:not([size="+2"]):not(:has(i)) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-left: 30px;
  border-radius: 50%;
  border: 2px solid var(--sub-border);
  background-color: var(--sub-surface);
  color: var(--sub-muted);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font b {
  font-weight: 600;
}
/* Connector line to the left of every disc but the first. */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font:not([size="+2"]):not(:has(i))::before {
  content: "";
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  width: 22px;
  height: 2px;
  margin-top: -1px;
  background-color: var(--sub-border);
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font[size="+2"] + font {
  margin-left: 0;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font[size="+2"] + font::before {
  display: none;
}

/* Ordering.  Discs before the current one keep their place (order 1) and
   are shown as done, then the current disc (2), then its name label (3),
   then the remaining discs (4) and the [info] link (5). */
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font[size="-1"]:has(~ font[size="+3"]) {
  order: 1;
  border-color: var(--sub-accent);
  background-color: var(--sub-pale);
  color: var(--sub-link);
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font[size="+3"]:not(:has(i)) {
  order: 2;
  background-color: var(--sub-accent);
  border-color: var(--sub-accent);
  color: var(--sub-accent-text);
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font:has(> i) {
  order: 3;
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sub-label);
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font:has(> i) i {
  font-style: normal;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font[size="+3"] ~ font[size="-1"]:not(:has(i)) {
  order: 4;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > a {
  order: 5;
  margin-left: 12px;
  font-size: 12px;
  line-height: 0;
}

/* Later stages, where the stage table directly follows the h1 in <body>:
   pull it up beside the title so the two form one row. */
body > h1 + table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) {
  margin: -34px 0 18px auto;      /* auto left margin: the content-sized block sits at the right */
}
/* Later stages where the stage table sits inside the content card. */
body > table.reducedwidth:last-of-type table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) {
  margin: 0 0 14px auto;
}

/* 4a. Progress bar: a fixed strip along the bottom edge of the band, drawn
   by body::after.  The fonts in the stage cell run: "Stage" label, then one
   per stage, then the stage name last; so with N stages the name is
   font:nth-of-type(N+2) and the current stage K is font:nth-of-type(K+1).
   Six-stage and eight-stage (IUCrJ) lines are covered. */
body::after {
  content: "";
  position: fixed;
  top: calc(var(--sub-header-h) - var(--sub-progress-h));
  left: 0;
  height: var(--sub-progress-h);
  width: 0;
  z-index: 12;
  background-color: var(--sub-accent);
  border-radius: 0 var(--sub-progress-h) var(--sub-progress-h) 0;
  view-transition-name: sub-progress;
}
body:has(font:last-of-type:nth-of-type(8)):has(font[size="+3"]:nth-of-type(2))::after { width: 16.667%; }
body:has(font:last-of-type:nth-of-type(8)):has(font[size="+3"]:nth-of-type(3))::after { width: 33.333%; }
body:has(font:last-of-type:nth-of-type(8)):has(font[size="+3"]:nth-of-type(4))::after { width: 50%; }
body:has(font:last-of-type:nth-of-type(8)):has(font[size="+3"]:nth-of-type(5))::after { width: 66.667%; }
body:has(font:last-of-type:nth-of-type(8)):has(font[size="+3"]:nth-of-type(6))::after { width: 83.333%; }
body:has(font:last-of-type:nth-of-type(8)):has(font[size="+3"]:nth-of-type(7))::after { width: 100%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(2))::after { width: 12.5%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(3))::after { width: 25%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(4))::after { width: 37.5%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(5))::after { width: 50%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(6))::after { width: 62.5%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(7))::after { width: 75%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(8))::after { width: 87.5%; }
body:has(font:last-of-type:nth-of-type(10)):has(font[size="+3"]:nth-of-type(9))::after { width: 100%; }


/* --------------------------------------------------------------------------
   5. Stage-1 pages: the #jpage_<x> grid
   #jpage_<x> holds the h1 and the form.  With the form's box removed
   (display:contents) the grid children are the h1 and the form's tables:
     - an empty table            (parser artefact of <table><table>, hidden)
     - the stage table
     - a banner table            (special-issue variants only: an <h3>)
     - a special-issues table    (has a border attribute; not on every page)
     - the form table            (the last table)
     - a div holding the .cgifields hidden input
   Row 1: h1 left, stage line right (spanning both columns so it is never
   squeezed).  Row 2: the banner, if any, full width.  Then the form card
   and, beside it, the special-issues panel.
   -------------------------------------------------------------------------- */

[id^="jpage_"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px 16px;
  align-items: start;
  padding: 0 0 8px;
}
/* No special-issues panel: the form card takes the full width. */
[id^="jpage_"]:not(:has(> form > table[border])) {
  grid-template-columns: minmax(0, 1fr);
}

[id^="jpage_"] > form {
  display: contents;
}
[id^="jpage_"] > form > table.reducedwidth:empty,
[id^="jpage_"] > form > div {
  display: none;
}

[id^="jpage_"] > h1 {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0 !important;
}
[id^="jpage_"] > form > table.reducedwidth:has(font[size="+3"]) {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
}

/* Banner table (special-issue title). */
[id^="jpage_"] > form > table.reducedwidth:not(:empty):not([border]):not(:last-of-type):not(:has(font[size="+3"])) {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--sub-panel);
  border: 1px solid var(--sub-border);
  border-left: 4px solid var(--sub-accent);
  border-radius: var(--sub-radius-lg);
}
[id^="jpage_"] > form > table.reducedwidth:not(:empty):not([border]):not(:last-of-type):not(:has(font[size="+3"])) td {
  padding: 10px 14px;
}
[id^="jpage_"] > form > table.reducedwidth:not(:empty):not([border]):not(:last-of-type):not(:has(font[size="+3"])) h3 {
  margin: 0;
  font: 600 15px/1.3 var(--sub-font);
  color: var(--sub-text);
}

/* Form card and special-issues panel: row 2, or row 3 under a banner. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type {
  grid-column: 1;
  grid-row: 2;
}
[id^="jpage_"]:not(:has(> form > table[border])) > form > table.reducedwidth:last-of-type {
  grid-column: 1 / -1;
}
[id^="jpage_"] > form > table[border] {
  grid-column: 2;
  grid-row: 2;
}
/* (:has() cannot be nested, so the banner is recognised here by the <h3> it
   holds inside a table that is neither the last nor the bordered one.) */
[id^="jpage_"]:has(> form > table.reducedwidth:not(:last-of-type):not([border]) h3) > form > table.reducedwidth:last-of-type,
[id^="jpage_"]:has(> form > table.reducedwidth:not(:last-of-type):not([border]) h3) > form > table[border] {
  grid-row: 3;
}

/* Special-issues box as a side panel.  Inline border style plus
   border/bordercolor attributes, hence !important. */
[id^="jpage_"] > form > table[border] {
  width: 100%;
  margin: 0;
  border: 1px solid var(--sub-border) !important;
  border-left: 4px solid var(--sub-accent) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--sub-radius-lg);
  /* A light neutral fill rather than the journal tint: in the stronger
     palettes (d, f, m, x) a journal-coloured panel shouts louder than the
     form beside it.  The coloured left stripe still marks it as the
     journal's own. */
  background-color: var(--sub-panel);
}
[id^="jpage_"] > form > table[border] td {
  padding: 12px 14px 13px;
}
[id^="jpage_"] > form > table[border] p {
  margin: 0;
  /* Body colour, not var(--sub-label): the label token follows the journal
     colour (see the SWITCH in section 1), and a paragraph of running text in
     the journal colour reads as though it were a link. */
  color: var(--sub-text);
}
[id^="jpage_"] > form > table[border] ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
[id^="jpage_"] > form > table[border] ul > p {
  display: none;             /* parser artefact: stray </p> inside the list */
}
[id^="jpage_"] > form > table[border] li {
  margin: 5px 0;
}
[id^="jpage_"] > form > table[border] li::marker {
  color: var(--sub-accent);
}


/* --------------------------------------------------------------------------
   5a. Messages above the form
   Two of these turn up on new-submission-errors.html.  The validation summary
   is a <p> before the logo, carrying its own inline style: red text on grey,
   5px of padding and an 80px right margin, so it stops short of the column
   and sits narrower than everything else.  All of that is inline, hence the
   !important.  The red text is left as it is; only the box changes.
   -------------------------------------------------------------------------- */

body > p[style*="color: red"] {
  box-sizing: border-box;
  margin: 0 0 14px !important;
  padding: 12px 16px !important;
  background-color: #efefef !important;   /* the pale grey the box already had */
  border: 1px solid var(--sub-border) !important;
  border-left: 4px solid var(--sub-error) !important;
  border-radius: var(--sub-radius-lg) !important;
  line-height: 1.5;
}

/* A notice table inside the form: not one of the .reducedwidth tables the
   generator normally emits.  It is deliberately NOT dressed like the cards: a
   thin white banner across the foot of the page, the width of the content
   column, with square corners and its message centred, so that it reads as a
   service message and not as part of the form.  The row is set explicitly
   rather than left to auto-placement, which would otherwise drop it into the
   first free cell in the middle of the layout. */
[id^="jpage_"] > form > table:not(.reducedwidth) {
  grid-column: 1 / -1;
  grid-row: 3;
  box-sizing: border-box;
  width: 100% !important;
  margin: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--sub-border) !important;
  border-bottom: 1px solid var(--sub-border) !important;
  border-radius: 0 !important;
  border-collapse: collapse;
  background-color: var(--sub-surface) !important;
}
[id^="jpage_"] > form > table:not(.reducedwidth) td {
  padding: 8px 14px !important;
  text-align: center !important;
}

/* A special-issue banner takes row 2 and pushes the cards to row 3, so the
   notice moves to row 4 to stay below them. */
[id^="jpage_"]:has(> form > table.reducedwidth:not(:last-of-type):not([border]) h3) > form > table:not(.reducedwidth) {
  grid-row: 4;
}


/* --------------------------------------------------------------------------
   6. The card
   Stage-1 pages: the last table in the form; other pages: the last
   .reducedwidth table directly in <body>.
   -------------------------------------------------------------------------- */

[id^="jpage_"] > form > table.reducedwidth:last-of-type,
body > table.reducedwidth:last-of-type {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--sub-surface);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg) !important;   /* the landing pages carry an inline 4px */
  box-shadow: 0 1px 2px var(--sub-shadow);
  overflow: clip;            /* not hidden: hidden makes a scroll container and kills position:sticky */
}


/* --------------------------------------------------------------------------
   6a. Stage-1 pages: the form table's rows as sections
   The generated table mixes rows of (label, field), rows of three or four
   cells (author lists) and single cells that sometimes carry a colspan and
   sometimes do not (the e and x pages' upload rows).  Rather than trust
   colspan, every row is laid out as a grid: a lone cell spans the row, two
   cells are label + field, three or four cells share the row.  Section
   headings are an <h3> or a colspan="4" cell whose only element is a <b>.
   -------------------------------------------------------------------------- */

[id^="jpage_"] > form > table.reducedwidth:last-of-type,
[id^="jpage_"] > form > table.reducedwidth:last-of-type > tbody {
  display: block;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(> td:nth-child(3)) {
  grid-template-columns: 220px repeat(2, minmax(0, 1fr));
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(> td:nth-child(4)) {
  grid-template-columns: 220px repeat(3, minmax(0, 1fr));
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type td {
  display: block;
  width: auto;               /* cancels width="40%" and the like on the cells */
  padding: 4px 20px;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type td:only-child {
  grid-column: 1 / -1;
}

/* Section heading rows: a divider above and room below.  The row before a
   heading row, and the row before the action strip, get extra bottom
   padding so each section is evenly framed. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(h3),
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(> td[colspan="4"] > b:only-of-type) {
  border-top: 1px solid var(--sub-border);
  padding-top: 10px;
  padding-bottom: 2px;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:first-child {
  border-top: 0;
  padding-top: 0;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(+ tr h3),
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(+ tr > td[colspan="4"] > b:only-of-type),
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(+ tr:last-child) {
  padding-bottom: 12px;
}

[id^="jpage_"] > form > table.reducedwidth:last-of-type h3,
[id^="jpage_"] > form > table.reducedwidth:last-of-type td[colspan="4"] > b:only-of-type {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font: 600 15px/1.3 var(--sub-font);
  color: var(--sub-heading);
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type h3 {
  margin-bottom: 6px;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type h3 img {
  margin-left: 6px;
}
/* Heading cells that start with a <br />. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type td > br:first-child {
  display: none;
}

/* Label cells (align="right"): left-aligned in the fixed first column. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type td[align="right"] {
  text-align: left;
  padding-right: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sub-label);
}

/* Explanatory text beside a label. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type td[colspan="3"][align="left"]:not(:has(input, select, textarea, a)) {
  color: var(--sub-muted);
}

/* Script-driven boxes that live in the label column: the co-editor code
   (addenda), the waiver number, the structure questions (IUCrJ, d, f).
   Their display is toggled by the scripts, so it is not set here; the
   contents are stacked. */
#ADbox b,
#PAYbox b {
  display: block;
  margin-bottom: 4px;
}
#ADbox input[type="text"],
#PAYbox input[type="text"] {
  width: 100%;
  max-width: 180px;
}
#Structboxno select,
#Structboxyes select,
#STRUCTbox select {
  display: block;
  margin-top: 4px;
}
#Structboxno,
#Structboxyes,
#STRUCTbox,
#PAYbox {
  padding: 4px 0;
}

/* Open-access choice on the e/m/x pages: bare radio buttons with text and a
   <br /> between, not in labels. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type td > input[type="radio"] {
  margin: 4px 8px 4px 0;
}

/* STICKY ACTION STRIP: the last row, holding the Upload / Continue button,
   stays at the bottom of the window while the form scrolls. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:last-child {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 8px 0;
  background-color: var(--sub-surface-2);
  border-top: 1px solid var(--sub-border);
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:last-child td {
  padding: 4px 20px;
}
/* The button's cell spans the row; any cell in the button row that holds no
   control is dropped, so the button sits at the left. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:last-child td:has(input, button) {
  grid-column: 1 / -1;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:last-child td:not(:has(input, button)) {
  display: none;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:last-child input {
  margin: 0;
}
/* The hint beside the upload button. */
[id^="jpage_"] > form > table.reducedwidth:last-of-type tr:last-child td:has(> input[value="Upload file"])::after {
  content: "Your file is uploaded and checked at the next stage.";
  margin-left: 14px;
  font-size: 12px;
  color: var(--sub-muted);
}


/* --------------------------------------------------------------------------
   6b. Later stages and landing pages: free-form content inside the card
   -------------------------------------------------------------------------- */

body > table.reducedwidth:last-of-type > tbody > tr > td {
  padding: 16px 20px 18px;
  vertical-align: top;
}

/* Inner tables. */
body > table.reducedwidth:last-of-type table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background-color: transparent;       /* bgcolor="#ffffff" attributes */
}
body > table.reducedwidth:last-of-type table td {
  padding: 4px 8px;
  vertical-align: middle;
}
body > table.reducedwidth:last-of-type table td[align="right"] {
  font-weight: 600;
  color: var(--sub-label);
  white-space: nowrap;
}
/* A header row of bold-only cells (a files list). */
body > table.reducedwidth:last-of-type table tr:has(> td > b:only-child):not(:has(input, select, textarea, a)) td {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sub-border);
  color: var(--sub-label);
}

/* Section headings in any of their forms: <h2>, <h3>, and the accordion
   <p class="headings"> bars that iucsub.css paints solid. */
body > table.reducedwidth:last-of-type h2,
body > table.reducedwidth:last-of-type h3,
body > table.reducedwidth:last-of-type p.headings {
  margin: 16px 0 8px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--sub-border);
  font: 600 15px/1.3 var(--sub-font);
  color: var(--sub-heading);
  background: none;
  cursor: default;
}
body > table.reducedwidth:last-of-type h3 + h3 {
  margin-top: 0;
  border-bottom: 0;
}
body > table.reducedwidth:last-of-type > tbody > tr > td > :is(h2, h3, p.headings):first-child,
body > table.reducedwidth:last-of-type .layer1:first-child p.headings {
  margin-top: 0;
}
body > table.reducedwidth:last-of-type .contents {
  padding: 0;
  background-color: transparent;
}
body > table.reducedwidth:last-of-type .layer1 {
  margin: 0;
}
body > table.reducedwidth:last-of-type .layer1 + br {
  display: none;
}
body > table.reducedwidth:last-of-type fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Inline-styled highlight boxes (stage 6's summary; the landing pages'
   "select a section" box). */
body > table.reducedwidth:last-of-type div[style*="box-shadow"] {
  margin: 12px 0 14px !important;
  padding: 12px 16px !important;
  background-color: var(--sub-panel) !important;
  box-shadow: none !important;
  border: 1px solid var(--sub-border);
  border-left: 4px solid var(--sub-accent);
  border-radius: var(--sub-radius-lg);
}
body > table.reducedwidth:last-of-type div[style*="box-shadow"] table[align="left"] {
  float: none;
}
body > table.reducedwidth:last-of-type div[style*="box-shadow"] > br {
  display: none;
}
body > table.reducedwidth:last-of-type div[style*="box-shadow"] hr {
  height: 1px !important;
  border: 0 !important;
  margin: 12px 0 !important;
  background-color: var(--sub-pale-border) !important;
}

/* Landing-page section headings: float divs with an inline 16pt colour and
   a span with the strapline. */
body > table.reducedwidth:last-of-type div[style*="float: left"][style*="16pt"],
body > div[style*="float: left"][style*="16pt"] {
  float: none !important;
  margin: 10px 0 4px;
  font: 600 15px/1.3 var(--sub-font) !important;
  color: var(--sub-heading) !important;
}
body > table.reducedwidth:last-of-type div[style*="float: left"][style*="16pt"] > span,
body > div[style*="float: left"][style*="16pt"] > span {
  font-size: 13px !important;
  font-weight: 400;
  color: var(--sub-muted) !important;
}
body > table.reducedwidth:last-of-type form > p {
  margin: 6px 0 10px;
}
body > br {
  display: none;               /* stray line breaks between blocks */
}

/* Landing pages: the cover image and the welcome text beside it. */
body > table.reducedwidth:last-of-type img[alt="[Cover image]"] {
  float: none;
  display: block;
  margin: 0 auto !important;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
body > table.reducedwidth:last-of-type td[width="200"] {
  vertical-align: top;
  padding: 8px 16px 8px 4px;
}
body > table.reducedwidth:last-of-type td > ul {
  margin: 4px 0 0;
  padding-left: 1.2em;
}
body > table.reducedwidth:last-of-type td > ul li::marker,
body > table.reducedwidth:last-of-type ul li::marker {
  color: var(--sub-accent);
}

/* IUCrData landing: the two article-type boxes become side-by-side tiles. */
body > table.reducedwidth:last-of-type #main_bot {
  display: grid;             /* the second box is nested inside the first, so this nests too */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0;
}
body > table.reducedwidth:last-of-type #main_bot > div[style] {
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid var(--sub-border) !important;
  border-radius: var(--sub-radius-lg) !important;
  background-color: var(--sub-surface-2);
}
body > table.reducedwidth:last-of-type #main_bot h3[style] {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0;
  font: 600 16px/1.3 var(--sub-font) !important;
  color: var(--sub-heading) !important;
}
body > table.reducedwidth:last-of-type #main_bot img {
  display: block;
  margin: 8px 0 10px !important;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* A rule the parser has pushed to the top of a landing card, and the pair of
   breaks after a float heading. */
body > table.reducedwidth:last-of-type > tbody > tr > td > hr {
  display: none;
}
body > table.reducedwidth:last-of-type div[style*="16pt"] + br,
body > table.reducedwidth:last-of-type div[style*="16pt"] + br + br {
  display: none;
}

/* The "context-sensitive help" note after a landing card. */
body > table.reducedwidth:last-of-type + p {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--sub-muted);
}


/* --------------------------------------------------------------------------
   6c. The journal chooser page: a nested list of links straight in <body>
   (each journal as a list item, its special issues in a sub-list headed by
   a <b>).  Also used for the special-issues list on the IUCrData page.
   -------------------------------------------------------------------------- */

body > p {
  margin: 0 0 12px;
}
body > ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 20px;
  background-color: var(--sub-surface);
  border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius-lg);
  box-shadow: 0 1px 2px var(--sub-shadow);
}
body > ul > p {
  display: none;               /* parser artefact: stray </p> inside the list */
}
body > ul > li {
  padding: 10px 0;
  border-top: 1px solid var(--sub-border);
}
body > ul > li:first-of-type {
  padding-top: 2px;
  border-top: 0;
}
body > ul > li > a {
  font-size: 15px;
  font-weight: 600;
}
body > ul > ul {
  list-style: none;
  margin: -4px 0 8px;
  padding: 0 0 0 18px;
}
body > ul > ul > b {
  display: block;
  margin: 2px 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sub-muted);
}
body > ul > ul > li {
  padding: 2px 0;
}
/* On the chooser page each link keeps its journal's colour. */
body > ul a.actaa[href] { color: #003366; }
body > ul a.actab[href] { color: #263a15; }
body > ul a.actac[href] { color: #b83000; }
body > ul a.actad[href] { color: #660000; }
body > ul a.actae[href] { color: #7e1f5b; }
body > ul a.actaf[href] { color: #1f481d; }
body > ul a.actaj[href] { color: #c26200; }
body > ul a.actam[href] { color: #990000; }
body > ul a.actas[href] { color: #32669a; }
body > ul a.actax[href] { color: #990000; }


/* --------------------------------------------------------------------------
   7. Controls
   -------------------------------------------------------------------------- */

body input[type="text"],
body textarea,
body select {
  box-sizing: border-box;
  max-width: 100%;
  padding: 5px 10px;
  line-height: 1.3;
  color: var(--sub-text);
  background-color: var(--sub-surface);
  border: 1px solid var(--sub-field-border);
  border-radius: var(--sub-radius);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body input[type="text"]:hover,
body textarea:hover,
body select:hover {
  border-color: var(--sub-field-hover);
}
body input[type="text"]:focus,
body textarea:focus,
body select:focus {
  outline: none;
  border-color: var(--sub-accent);
  box-shadow: 0 0 0 3px rgba(72, 144, 205, 0.25);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sub-accent) 25%, transparent);
}

/* Widths keyed on the size="" attributes the generator emits.  Rows that
   are columns of inputs (authors, referees) fill their cells. */
body tr:has(> td:nth-child(2) input[type="text"]):has(> td:nth-child(3) input[type="text"]) input[type="text"] {
  width: 100%;
}
body input[type="text"][size="30"] {
  width: 100%;
  max-width: 360px;
}
body input[type="text"][size="60"] {
  width: 100%;
  max-width: 620px;
}
body input[type="text"][size="80"] {
  width: 100%;
}
body textarea {
  display: block;
  width: 100%;
  max-width: 720px;
  min-height: 3.5em;
  resize: vertical;
}

body select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 6em;
  padding-right: 34px;
  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 d='M1 1l5 5 5-5' fill='none' stroke='%235f6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
}
body select[name="Qcat"],
body select[name="Ucountry"],
body select[name="Qlang"],
body select[name="Utitle"],
body select[name="Qstruct"],
body select[name="Qprimary"],
body select[name="Qsecondary"],
body select[name="Qstructtype"] {
  min-width: 14em;
}
body select + a {
  margin-left: 8px;
  vertical-align: middle;
}

/* Checkboxes and radio buttons (iucsub.css gives every input a border and
   left padding, which is wrong for these). */
body input[type="checkbox"],
body input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 10px 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--sub-accent);
  vertical-align: -3px;
  cursor: pointer;
}
/* Labels that start with a box or a button become rows: the control sits in
   a gutter (absolute, so text with inline links still wraps as one block). */
body label:has(> input[type="checkbox"]),
body label:has(> input[type="radio"]) {
  display: block;
  position: relative;
  padding: 3px 0 3px 26px;
  max-width: 70em;
  cursor: pointer;
}
body label:has(> input[type="checkbox"]) > input[type="checkbox"],
body label:has(> input[type="radio"]) > input[type="radio"] {
  position: absolute;
  left: 0;
  top: 5px;
  margin: 0;
}
/* A label followed by an [info] link keeps the link on its line. */
body label:has(> input[type="checkbox"]):has(+ a),
body label:has(> input[type="radio"]):has(+ a) {
  display: inline-block;
  margin-right: 6px;
  vertical-align: top;
}
/* The <br /> that the markup puts after each such label is now redundant. */
body label:has(> input[type="checkbox"]) + br,
body label:has(> input[type="radio"]) + br {
  display: none;
}

/* Tooltip labels (.tip / .tip_m). */
body span.tip,
body span.tip_m {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sub-label);
  border-bottom: 1px dotted var(--sub-muted);
  cursor: help;
}
body label span.tip,
body label span.tip_m,
body p span.tip {
  font-weight: 400;
  color: inherit;
}

body input[type="file"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 4px 0 8px;
  padding: 5px;
  color: var(--sub-muted);
  background-color: var(--sub-surface-2);
  border: 1px dashed var(--sub-field-border);
  border-radius: var(--sub-radius);
}
body input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  padding: 4px 12px;
  margin-right: 12px;
  color: var(--sub-label);
  background-color: var(--sub-surface);
  border: 1px solid var(--sub-field-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body input[type="file"]:hover::file-selector-button {
  border-color: var(--sub-accent);
  color: var(--sub-link);
}

/* Secondary buttons ("Add more authors"): outlined. */
body input[type="button"] {
  display: inline-block;
  margin: 2px 0;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sub-label);
  background-color: var(--sub-surface);
  border: 1px solid var(--sub-field-border);
  border-radius: var(--sub-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body input[type="button"]:hover {
  border-color: var(--sub-field-hover);
  color: var(--sub-label);
}

/* Primary button: any submit input, or the journal-keyed #<x>_button ids
   that iucsub.css styles with a gradient.  Listing the ids inside :is()
   outranks iucsub.css without !important. */
body input[type="submit"],
body :is(#a_button, #b_button, #c_button, #d_button, #e_button,
        #f_button, #i_button, #j_button, #m_button, #s_button,
        #x_button, #aa_button, #bb_button, #cc_button, #dd_button,
        #ee_button, #ff_button, #ii_button, #jj_button, #mm_button,
        #ss_button, #xx_button) {
  /* The geometry of the "Submit your article" button on the journal websites
     (journals/www/a/services/submit.html), but as an outline: a white face
     with the journal colour as frame and text.  An outline works for every
     journal, including the yellow d and the lime f, which cannot carry white
     text on a filled face.  For the filled navy those sites use instead, put
     var(--sub-button-text) / var(--sub-button-bg) in the three lines below. */
  display: inline-block;
  margin: 4px 0;
  padding: 0.65em 1.3em;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--sub-link);
  background: var(--sub-surface);
  border: 1px solid var(--sub-link);
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
body input[type="submit"]:hover,
body :is(#a_button, #b_button, #c_button, #d_button, #e_button,
        #f_button, #i_button, #j_button, #m_button, #s_button,
        #x_button, #aa_button, #bb_button, #cc_button, #dd_button,
        #ee_button, #ff_button, #ii_button, #jj_button, #mm_button,
        #ss_button, #xx_button):hover {
  color: var(--sub-link-hover);
  background: #f2f6fa;
  background: color-mix(in srgb, var(--sub-accent) 10%, white);
  border-color: var(--sub-accent);
  box-shadow: none;
}
body input[type="submit"]:focus-visible,
body :is(#a_button, #b_button, #c_button, #d_button, #e_button,
        #f_button, #i_button, #j_button, #m_button, #s_button,
        #x_button, #aa_button, #bb_button, #cc_button, #dd_button,
        #ee_button, #ff_button, #ii_button, #jj_button, #mm_button,
        #ss_button, #xx_button):focus-visible {
  outline: 3px solid rgba(72, 144, 205, 0.4);
  outline: 3px solid color-mix(in srgb, var(--sub-accent) 40%, transparent);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   7a. STICKY ACTION BUTTON on the later stages
   Stages 1-2 have a real action row (section 6a).  On stages 3-5 the final
   button is either the last child of its form (stages 4 and 5) or the only
   thing in a cell of the last form's table (stage 3), so the button itself is
   made sticky.  Only the FINAL button floats: stage 3's "Upload file" button,
   which belongs to the upload form higher up the page, stays where it is.
   To switch this off, delete this section.
   -------------------------------------------------------------------------- */

/* What sticks: on stages 4 and 5 the button itself, because it is the last
   child of a form tall enough to slide within.  On stage 3 the button is
   alone in a cell of its own small table, which gives it nowhere to slide, so
   the element that sticks is that form: a "bare action form", holding a
   button and no data fields, whose parent is the cell holding the whole page.
   width: fit-content keeps the sticky box from covering the full width and
   swallowing clicks meant for the content behind it. */
body > table.reducedwidth:last-of-type form > :is(input[type="button"], input[type="submit"]):last-child,
body > table.reducedwidth:last-of-type form:last-of-type:has(input[type="button"], input[type="submit"]):not(:has(input[type="text"], input[type="file"], textarea, select)) {
  position: sticky;
  bottom: 16px;
  z-index: 3;
  width: fit-content;
}

/* The shadow always goes on the button, whichever of the two is sticking, so
   that it lifts off whatever it covers.  The card clips it (overflow: clip),
   so it never spills outside the card. */
body > table.reducedwidth:last-of-type form > :is(input[type="button"], input[type="submit"]):last-child,
body > table.reducedwidth:last-of-type form:last-of-type:has(input[type="button"], input[type="submit"]):not(:has(input[type="text"], input[type="file"], textarea, select)) :is(input[type="button"], input[type="submit"]) {
  box-shadow: 0 6px 16px -4px rgba(22, 45, 65, 0.28);
}

/* Keep a focused field from scrolling underneath the floating button. */
html {
  scroll-padding-bottom: 72px;
}


/* --------------------------------------------------------------------------
   8. Footer: the rule goes; the inline-styled footer divs (org line + the
   five links, and on most pages a description line) stay at the foot of the
   page, restyled.  !important because of the inline styles.
   -------------------------------------------------------------------------- */

body > hr {
  display: none;
}
body > div[style*="8pt"] {
  box-sizing: border-box;
  width: auto !important;
  margin: 0 auto !important;
  padding: 0;
  font-family: var(--sub-font) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--sub-muted);
}
body > div[style*="8pt"]:has(a) {
  margin-top: 18px !important;
  font-weight: 600;
  color: var(--sub-text);
}
body > div[style*="8pt"]:has(a) a {
  font-weight: 400;
  margin-left: 14px !important;
  color: var(--sub-ink) !important;
}
body > div[style*="8pt"]:has(a) a:first-of-type {
  margin-left: 0 !important;
}
body > div[style*="8pt"]:has(a) a:hover {
  color: var(--sub-link) !important;
  text-decoration: underline !important;
}
body > div[style*="8pt"]:not(:has(a)) {
  margin-top: 2px !important;
}
body > div[style*="8pt"]:last-child {
  padding-bottom: 20px;
}


/* --------------------------------------------------------------------------
   9. Motion touches (all off for people who ask for reduced motion)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [id^="jpage_"] > form > table.reducedwidth:last-of-type,
  body > table.reducedwidth:last-of-type {
    transition: box-shadow 200ms var(--sub-ease);
  }
  [id^="jpage_"] > form > table.reducedwidth:last-of-type:hover,
  body > table.reducedwidth:last-of-type:hover {
    box-shadow: 0 6px 18px -8px var(--sub-shadow-lift), 0 1px 2px var(--sub-shadow);
  }
  body input[type="submit"]:active,
  body input[type="button"]:active {
    transform: translateY(1px);
  }
  table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td > font {
    transition: background-color 200ms ease, border-color 200ms ease;
  }
  body a[href] {
    transition: color 120ms ease;
  }
}


/* --------------------------------------------------------------------------
   10. Cross-document view transitions between the stage pages
   Elements with the same view-transition-name on the old and new page are
   morphed; everything else cross-fades.  Whether they run at all is set by
   the switch in section 0.
   -------------------------------------------------------------------------- */

body > div:first-of-type[style*="float: right"] {
  view-transition-name: sub-logo;
}
body h1 {
  view-transition-name: sub-title;
}
table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) {
  view-transition-name: sub-stage;
}
[id^="jpage_"] > form > table.reducedwidth:last-of-type,
body > table.reducedwidth:last-of-type {
  view-transition-name: sub-card;
}
body > div[style*="8pt"]:has(a) {
  view-transition-name: sub-footer;
}
@keyframes sub-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sub-card-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
::view-transition-old(sub-card) {
  animation: 160ms var(--sub-ease) both sub-card-out;
}
::view-transition-new(sub-card) {
  animation: 280ms var(--sub-ease) both sub-card-in;
}
::view-transition-group(sub-stage),
::view-transition-group(sub-progress),
::view-transition-group(sub-title) {
  animation-duration: 320ms;
  animation-timing-function: var(--sub-ease);
}
::view-transition-group(sub-logo) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   11. Narrower windows
   -------------------------------------------------------------------------- */

/* Single column: title, stage line, banner, notice, then the form card,
   in markup order. */
@media (max-width: 959px) {
  [id^="jpage_"],
  [id^="jpage_"]:not(:has(> form > table[border])) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  [id^="jpage_"] > h1,
  [id^="jpage_"] > form > table.reducedwidth,
  [id^="jpage_"] > form > table[border] {
    grid-column: 1;
    grid-row: auto;
  }
  [id^="jpage_"] > form > table.reducedwidth:has(font[size="+3"]) {
    justify-self: start;
  }
  table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td {
    justify-content: flex-start;
  }
  table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) td > div[style*="float"] {
    text-align: left;
  }
  body > h1 + table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) {
    margin: 0 0 14px;
  }
  body > table.reducedwidth:last-of-type table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) {
    margin-left: 0;
  }
}

/* Phones: label above field on the stage-1 form. */
@media (max-width: 640px) {
  :root {
    --sub-col-pad: 14px;
  }
  [id^="jpage_"] > form > table.reducedwidth:last-of-type tr,
  [id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(> td:nth-child(3)),
  [id^="jpage_"] > form > table.reducedwidth:last-of-type tr:has(> td:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }
  [id^="jpage_"] > form > table.reducedwidth:last-of-type td {
    padding-left: 14px;
    padding-right: 14px;
  }
  [id^="jpage_"] > form > table.reducedwidth:last-of-type td[align="right"] {
    padding-bottom: 0;
  }
  body > table.reducedwidth:last-of-type > tbody > tr > td {
    padding: 12px 14px;
  }
  body input[type="text"][size="30"] {
    max-width: none;
  }
  table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)) table td {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}


/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */

@media print {
  html {
    background: #fff;
  }
  body {
    max-width: none;
    padding: 0;
    color: #000;
    font-size: 11pt;
  }
  body::before,
  body::after,
  body > div:first-of-type[style*="float: right"],
  table.reducedwidth:has(font[size="+3"]):not(:has(table.reducedwidth)),
  body > div[style*="8pt"]:has(a),
  body input[type="submit"],
  body input[type="button"] {
    display: none !important;
  }
  [id^="jpage_"] > form > table.reducedwidth:last-of-type,
  body > table.reducedwidth:last-of-type {
    border: 0;
    box-shadow: none;
    background-image: none;
  }
  body > table.reducedwidth:last-of-type div[style*="box-shadow"] {
    background: #fff !important;
    border: 1px solid #999;
    border-left-width: 4px;
  }
  body a[href] {
    color: #000;
    text-decoration: underline;
  }
}