@charset "UTF-8";
/* ==========================================================================
   checkcif-test.css – a dedicated sheet for the checkCIF upload page
   ==========================================================================

   WHAT IT ASSUMES ABOUT THE MARKUP
   --------------------------------
   The page is one .row holding a .left.column (blurb, upload form, list of
   checks, useful links) and a .right.column (sponsor logos), plus the
   #xspinner div.  Nothing is keyed on position where content will do:

     * the logo paragraph     – the <p> holding the checkCIF image
     * "A service of ..."     – the <p> whose link ends in iucr.org
     * the instruction line   – the <p> holding the red <font>
     * the useful-links list  – the <p> whose <b> contains a <br>
     * the lead paragraph     – the one <p> that is none of those

   The form is treated as what it is: a flat run of <b> group headings,
   radio buttons, bare label text and <br>s, with not one <label>,
   <fieldset> or <ul> in it.

   THE LAYOUT
   ----------
   A centred column, the fixed band above it, then two columns: everything
   the reader acts on (title, lead, instruction, form) on the left, the
   sponsor logos in a sticky rail on the right.  Under the form the list of
   checks and the useful links sit side by side, so the page ends without a
   long single-column tail.

   THE TRICKS, IN ONE PLACE
   ------------------------
   * The band is a fixed pseudo-element on <body> with a frosted backdrop.
     The logo paragraph and the "A service of ..." paragraph are taken out
     of the flow and fixed into it, which is why they no longer take up a
     grid cell.
   * The form stays in NORMAL FLOW – deliberately not flex.  The label text
     after each radio button is a bare text node, and in a flex container a
     long one (the PDF email line) becomes an anonymous flex item that
     wraps onto its own line, leaving its button stranded above it.  In
     normal flow it simply wraps as text.  Row spacing therefore comes from
     line-height rather than from a gap.
   * Runs of two or more <br>s collapse to nothing (br + br together with
     br:has(+ br)), so the space between groups is set here rather than by
     however many <br>s the markup happens to carry.
   * The spinner is hidden by this sheet rather than by the page's
     $(window).on('load') handler, so it no longer shows while the page
     loads.  jQuery's .show() still reveals it on submit, because the
     inline display:block it writes beats a stylesheet.

   LIMITS
   ------
   * One piece of generated English text: the "Checking your CIF ..." line
     under the spinner (section 11).  Drop that ::after rule if the page is
     ever translated.
   * The radio labels cannot be made clickable from CSS – they are text
     nodes, not <label>s – and the logo image cannot be given the alt text
     it lacks.  Both need the page's markup.
   * Uses :has(), color-mix() and backdrop-filter.  An older browser gets a
     plainer page rather than a broken one.
   ========================================================================== */


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

:root {
  color-scheme: light;

  /* checkCIF's own colours, sampled from the logo. */
  --cc-accent:       #962129;
  --cc-accent-dark:  #7a181f;
  --cc-accent-text:  #ffffff;
  --cc-link:         #8f1f27;
  --cc-link-hover:   #b8323c;
  --cc-ink:          #3d1116;   /* headings: the accent taken most of the way down */
  --cc-pale:         #fbf0f1;
  --cc-pale-border:  #ecccd0;

  /* Neutrals, shared with the submission sheet. */
  --cc-text:         #253038;
  --cc-lead:         #47535e;
  --cc-label:        #2f3b46;
  --cc-muted:        #5f6b76;
  --cc-border:       #d5dde4;
  --cc-border-soft:  #e6ecf1;
  --cc-field-border: #b6c3ce;
  --cc-field-hover:  #8fa4b6;
  --cc-page-bg:      #f4f6f8;
  --cc-surface:      #ffffff;
  --cc-surface-2:    #f8fafc;
  --cc-shadow:       rgba(22, 45, 65, 0.06);
  --cc-shadow-lift:  rgba(22, 45, 65, 0.14);

  --cc-radius:    6px;
  --cc-radius-lg: 12px;
  --cc-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --cc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Page frame geometry. */
  --cc-header-h: 60px;
  --cc-col-max:  980px;
  --cc-col-pad:  24px;
  --cc-rail:     232px;   /* the sponsor column */
  /* Left edge of the content column measured from the viewport edge, for
     the two paragraphs that are fixed into the band. */
  --cc-col-edge: max(var(--cc-col-pad), calc(50% - var(--cc-col-max) / 2 + var(--cc-col-pad)));
}

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

/* <body> is the centred content column.  The page's own style block sets
   margin-left: 10% and margin-top: 20px, and infoweb.css sets margins and a
   right padding; "html body" outranks all of them whatever the order. */
html body {
  box-sizing: border-box;
  max-width: var(--cc-col-max);
  margin: 0 auto;
  padding: calc(var(--cc-header-h) + 22px) var(--cc-col-pad) 48px;
  font-family: var(--cc-font);
  font-size: clamp(12.5px, 0.35vw + 10px, 14px);
  line-height: 1.5;
  color: var(--cc-text);
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------------------------------------
   2. Base typography
   infoweb.css pins body, p, td, li and pre to Verdana 9pt/12pt; these rules
   hand the whole page back to the page font and the fluid base size.
   -------------------------------------------------------------------------- */

html body p,
html body td,
html body li,
html body ul,
html body div,
html body span,
html body font,
html body b,
html body a,
html body input,
html body select,
html body textarea,
html body button {
  font-family: var(--cc-font);
}
html body p,
html body td,
html body li {
  font-size: inherit;
  line-height: inherit;
}

/* Preformatted text keeps a monospaced face: the checkCIF/PLATON reports set
   out cell parameters, bond precisions and alert listings in <pre> columns
   that only line up in one.  infoweb.css puts pre in Verdana, which is why
   this has to be said rather than left alone. */
html body pre,
html body code,
html body tt,
html body samp,
html body kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}
html body pre {
  max-width: 100%;
  overflow-x: auto;      /* a wide table of numbers scrolls rather than pushing the page sideways */
}
html body p {
  margin: 0 0 12px;
  padding: 0;
}
html body b,
html body strong {
  font-weight: 600;
}

html body a[href],
html body a[href]:link,
html body a[href]:visited {
  color: var(--cc-link);
  text-decoration: none;
}
html body a[href]:hover {
  color: var(--cc-link-hover);
  text-decoration: underline;
}
html body a[href]:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   3. The header band: frosted, fixed, carrying the logo and the IUCr line
   -------------------------------------------------------------------------- */

html body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cc-header-h);
  z-index: 10;
  background-color: color-mix(in srgb, #ffffff 78%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--cc-border);
}
/* Without backdrop-filter the translucent band would show the page sliding
   through it, so make it solid instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body::before {
    background-color: #ffffff;
  }
}

/* The logo paragraph, fixed into the band at the column's left edge. */
.left.column > p:has(> img[src*="checkCIF"]) {
  position: fixed;
  top: 0;
  left: var(--cc-col-edge);
  height: var(--cc-header-h);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 11;
}
/* The image carries inline width/max-width/min-width, hence the !important. */
.left.column > p > img[src*="checkCIF"] {
  display: block;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
}

/* "A service of the International Union of Crystallography", fixed into the
   band beside the logo and set on one line. */
.left.column > p:has(> a[href$="iucr.org"]) {
  position: fixed;
  top: 0;
  left: calc(var(--cc-col-edge) + 68px);
  height: var(--cc-header-h);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 11;
}
.left.column > p > a[href$="iucr.org"] {
  font-size: 12.5px !important;   /* the inline style says 9pt */
  line-height: 1.3;
  color: var(--cc-muted);
}
.left.column > p > a[href$="iucr.org"]:hover {
  color: var(--cc-link);
  text-decoration: none;
}
.left.column > p > a[href$="iucr.org"] > br {
  display: none;                  /* one line in the band, not two */
}
.left.column > p > a[href$="iucr.org"] > b {
  font-weight: 600;
  color: var(--cc-label);
}


/* --------------------------------------------------------------------------
   4. Page title and lead
   The h1 carries inline display:none and font-size:18px, so both need
   !important to be undone.  Showing it gives the page the heading it
   currently has not got – the logo image has no alt text.
   -------------------------------------------------------------------------- */

html body h1 {
  display: block !important;
  margin: 0 !important;
  font-size: 30px !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cc-ink);
}

/* The lead paragraph is the one <p> in the left column that is not the
   logo, the IUCr line, the red instruction or the useful-links list. */
.left.column > p:not(:has(img)):not(:has(font)):not(:has(> b > br)):not(:has(> a[href$="iucr.org"])) {
  max-width: 62ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cc-lead);
}
.left.column > p:not(:has(img)):not(:has(font)):not(:has(> b > br)):not(:has(> a[href$="iucr.org"])) b {
  color: var(--cc-label);
}


/* --------------------------------------------------------------------------
   5. The two-column layout
   -------------------------------------------------------------------------- */

html body > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cc-rail);
  gap: 28px;
  align-items: start;
}
.row > .column {
  float: none;
  width: auto;
  min-width: 0;
}

/* Inside the left column: the title, lead, instruction and form run the
   full width; the list of checks and the useful links share the row under
   the form, one panel each. */
.row > .left.column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 18px;
  align-items: start;
}
.row > .left.column > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.row > .left.column > .collapsable {
  grid-column: 1;
}
.row > .left.column > p:has(> b > br) {
  grid-column: 2;
}
/* The rule under the form is now the gap between the cards. */
.left.column > hr {
  display: none;
}


/* --------------------------------------------------------------------------
   6. The instruction line: a tinted callout with the help icon as a chip
   -------------------------------------------------------------------------- */

.left.column > p:has(> font[color="red"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  background-color: var(--cc-pale);
  border: 1px solid var(--cc-pale-border);
  border-radius: var(--cc-radius-lg);
}
/* Red on a tinted ground reads as an error; the instruction is not one. */
.left.column > p > font[color="red"] {
  flex: 0 1 auto;
  color: var(--cc-ink);
  font-weight: 600;
}
.left.column > p > a:has(> img[src$="info.gif"]) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-pale-border);
  border-radius: 50%;
  transition: border-color 0.15s var(--cc-ease), box-shadow 0.15s var(--cc-ease);
}
.left.column > p > a:has(> img[src$="info.gif"]):hover {
  border-color: var(--cc-accent);
  box-shadow: 0 1px 5px var(--cc-shadow);
}
html body img[src$="info.gif"] {
  display: block;
  opacity: 0.85;
}


/* --------------------------------------------------------------------------
   7. The upload form as a card
   Section 8 does the controls; this section is the card and the runs of
   <br>s that stand in for its structure.
   -------------------------------------------------------------------------- */

.left.column > form {
  margin: 0;
  padding: 20px 24px 24px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 1px 2px var(--cc-shadow), 0 16px 32px -28px var(--cc-shadow-lift);
  /* The option rows are <br>-separated lines of a single block, so their
     spacing is line-height and nothing else. */
  line-height: 2;
}

/* A run of two or more <br>s carries no meaning here: the space between the
   groups is set by the headings below.  This collapses a run to its first
   <br>, which still ends the line it is on. */
.left.column > form br + br {
  display: none;
}
/* Next to a block there is nothing left for a <br> to do, because the block
   ends the line itself - so the <br>s before and after a group heading, and
   those around the file field and the submit button, go completely.  The
   repeated :has() steps cover runs of one, two and three <br>s, which is
   what this markup uses. */
.left.column > form > b + br,
.left.column > form input[type="submit"] + br,
.left.column > form br:has(+ b),
.left.column > form br:has(+ br + b),
.left.column > form br:has(+ br + br + b),
.left.column > form br:has(+ input[type="file"]),
.left.column > form br:has(+ br + input[type="file"]),
.left.column > form br:has(+ input[type="submit"]),
.left.column > form br:has(+ br + input[type="submit"]) {
  display: none;
}

/* "File name:" – the only <span> in the form, and its first label. */
.left.column > form > span {
  display: block;
  margin: 0 0 5px;
  font-size: 14px !important;     /* the inline style says 9pt */
  font-weight: 600;
  line-height: 1.35;
  color: var(--cc-ink);
}

/* The four group headings, each opening a section of the card. */
.left.column > form > b {
  display: block;
  margin: 18px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--cc-border-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cc-ink);
}


/* --------------------------------------------------------------------------
   8. Controls
   -------------------------------------------------------------------------- */

/* The CIF file, as a drop-zone-shaped control. */
html body input[type="file"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cc-muted);
  background-color: var(--cc-surface-2);
  border: 1px dashed var(--cc-field-border);
  border-radius: var(--cc-radius);
  cursor: pointer;
  transition: border-color 0.15s var(--cc-ease), background-color 0.15s var(--cc-ease);
}
html body input[type="file"]:hover {
  border-color: var(--cc-accent);
  background-color: var(--cc-pale);
}
html body input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-right: 12px;
  padding: 5px 14px;
  color: var(--cc-ink);
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-field-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s var(--cc-ease), color 0.15s var(--cc-ease);
}
html body input[type="file"]:hover::file-selector-button {
  border-color: var(--cc-accent);
  color: var(--cc-link);
}
html body input[type="file"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cc-accent) 35%, transparent);
  outline-offset: 2px;
}

html body input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0 9px 0 1px;
  padding: 0;
  vertical-align: -2px;
  accent-color: var(--cc-accent);
  cursor: pointer;
}
html body input[type="radio"]:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 3px;
}

html body input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cc-text);
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-field-border);
  border-radius: var(--cc-radius);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s var(--cc-ease), box-shadow 0.15s var(--cc-ease);
}
html body input[type="text"]:hover {
  border-color: var(--cc-field-hover);
}
html body input[type="text"]:focus {
  outline: none;
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 22%, transparent);
}

/* The email address box, shown by the page's own script when the PDF email
   option is picked.  Its display is written inline by that script, so only
   the things around display are set here. */
html body #EMAILbox {
  margin: 8px 0 2px;
  padding: 12px 14px;
  background-color: var(--cc-pale);
  border: 1px solid var(--cc-pale-border);
  border-radius: var(--cc-radius);
  line-height: 1.5;
}
html body #EMAILbox > br {
  display: none;
}
html body #EMAILbox > b {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cc-ink);
}

/* The one action on the page, so it is the one filled button. */
html body input[type="submit"] {
  display: block;          /* its own line: every <br> beside it is hidden above */
  width: fit-content;
  min-width: 220px;
  margin: 24px 0 0;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--cc-accent-text);
  background-color: var(--cc-accent);
  border: 1px solid transparent;
  border-radius: var(--cc-radius);
  box-shadow: 0 1px 2px var(--cc-shadow), 0 6px 16px -10px var(--cc-shadow-lift);
  cursor: pointer;
  transition: background-color 0.15s var(--cc-ease), box-shadow 0.15s var(--cc-ease),
              transform 0.12s var(--cc-ease);
}
html body input[type="submit"]:hover {
  background-color: var(--cc-accent-dark);
  box-shadow: 0 2px 4px var(--cc-shadow), 0 12px 22px -12px var(--cc-shadow-lift);
}
html body input[type="submit"]:active {
  transform: translateY(1px);
}
html body input[type="submit"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cc-accent) 40%, transparent);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   9. The two panels under the form: what is checked, and the useful links
   -------------------------------------------------------------------------- */

.left.column > .collapsable,
.left.column > p:has(> b > br) {
  margin: 0;
  padding: 16px 18px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 1px 2px var(--cc-shadow);
}

/* The list of checks is one paragraph of bullet characters and <br>s: the
   blank line after its opening sentence is the <br><br> in the markup. */
.left.column > .collapsable > p {
  margin: 0;
  line-height: 1.85;
  color: var(--cc-text);
}

/* The useful links: a column of rows, each with a chevron. */
.left.column > p:has(> b > br) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.45;
}
.left.column > p:has(> b > br) > br,
.left.column > p:has(> b > br) > b > br {
  display: none;
}
.left.column > p:has(> b > br) > b {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink);
}
.left.column > p:has(> b > br) > a[href] {
  display: block;
  position: relative;
  padding: 6px 8px 6px 22px;
  border-radius: var(--cc-radius);
  transition: background-color 0.15s var(--cc-ease), color 0.15s var(--cc-ease);
}
.left.column > p:has(> b > br) > a[href]::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}
.left.column > p:has(> b > br) > a[href]:hover {
  background-color: var(--cc-pale);
  color: var(--cc-link-hover);
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   10. The sponsor rail
   -------------------------------------------------------------------------- */

.row > .right.column {
  position: sticky;
  top: calc(var(--cc-header-h) + 20px);
  align-self: start;
}
.right.column > p {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 1px 2px var(--cc-shadow);
}
.right.column br {
  display: none;
}
.right.column > p > span {
  margin: 0 0 2px;
  font-size: 11.5px !important;   /* the inline style says 9pt */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--cc-muted);
}
.right.column > p > span > b {
  font-weight: 600;
  color: var(--cc-label);
}
/* Each sponsor gets the same tile whatever the shape of its logo, with the
   logo ranged left inside it.  Left rather than centred because the logo
   files are not all trimmed to their artwork - crystals-print.png is 3018px
   wide with its right-hand 40.6% empty - and a file with empty space on its
   right reads as extra gap before the tile edge when everything is ranged
   left, but as one logo pushed out of line when everything is centred. */
.right.column > p > a[href] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  padding: 8px 12px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border-soft);
  border-radius: 8px;
  transition: border-color 0.15s var(--cc-ease), box-shadow 0.15s var(--cc-ease),
              transform 0.15s var(--cc-ease);
}
.right.column > p > a[href]:hover {
  border-color: var(--cc-pale-border);
  box-shadow: 0 2px 10px var(--cc-shadow);
  transform: translateY(-1px);
}
.right.column img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 46px;
  border: 0 !important;   /* the IUCr Journals banner carries an inline border */
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   11. The submit spinner
   The page shows #xspinner when the form is submitted and hides it again in a
   load handler.  display: none must stay free of !important, or the inline
   display: block that jQuery's .show() writes would no longer reveal it.

   Deliberately small, and click-through.  A load handler does NOT run when a
   page comes back from the browser's back/forward cache, so after a check the
   Back button restores this page with the spinner still showing and nothing
   left to hide it.  As a full-screen overlay that made the form unreachable:
   press Back, get a spinner, press Back again and you are off the site - and
   the file name and choices the cache had restored are lost with it.  As a
   small badge that cannot receive pointer events it covers nothing and blocks
   nothing, so a stale spinner is only cosmetic.

   The real fix is one word in the page: make that handler listen for pageshow
   rather than load, since pageshow fires on a cache restore as well.  Once
   that is done this can go back to being a full overlay.
   -------------------------------------------------------------------------- */

html body #xspinner {
  display: none;
  position: fixed;
  left: 50%;
  top: calc(var(--cc-header-h) + 14px);
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;   /* cannot swallow a click, even if left showing */
  padding: 9px 18px 9px 40px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  box-shadow: 0 2px 12px var(--cc-shadow-lift);
  font: 600 13px/1.4 var(--cc-font);
  color: var(--cc-ink);
  white-space: nowrap;
}
html body #xspinner .wBall {
  display: none;          /* the five orbiting dots, replaced by the ring below */
}
html body #xspinner::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid var(--cc-pale-border);
  border-top-color: var(--cc-accent);
  border-radius: 50%;
  animation: cc-spin 0.9s linear infinite;
}
/* The one piece of text this sheet adds to the page. */
html body #xspinner::after {
  content: "Checking your CIF\2026";   /* escaped, not a literal ellipsis: the
                                        page decides this file's encoding, and
                                        a literal would show as … on a page
                                        that is not UTF-8 */
}
@keyframes cc-spin {
  to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   12. Narrower windows
   -------------------------------------------------------------------------- */

/* Below this the sponsor rail has nowhere to sit beside the form, so it
   goes underneath as a row of tiles. */
@media (max-width: 900px) {
  html body > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .row > .right.column {
    position: static;
  }
  .right.column > p {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  .right.column > p > span {
    grid-column: 1 / -1;
  }
}

/* Below this the two panels stack. */
@media (max-width: 680px) {
  :root {
    --cc-col-pad: 16px;
  }
  .row > .left.column {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Both panels have to give up their explicit columns as well, or the one
     asking for column 2 would be placed in an implicit track of its own and
     take the width with it. */
  .row > .left.column > .collapsable,
  .row > .left.column > p:has(> b > br) {
    grid-column: 1 / -1;
  }
  html body h1 {
    font-size: 25px !important;
  }
  .left.column > form {
    padding: 16px 16px 20px;
  }
}

/* Below this the IUCr line goes back to the two lines of the markup, so
   that it still fits in the band beside the logo. */
@media (max-width: 520px) {
  .left.column > p > img[src*="checkCIF"] {
    height: 32px !important;
  }
  .left.column > p:has(> a[href$="iucr.org"]) {
    left: calc(var(--cc-col-edge) + 56px);
    right: var(--cc-col-pad);
  }
  .left.column > p > a[href$="iucr.org"] {
    font-size: 10.5px !important;
    line-height: 1.25;
  }
  .left.column > p > a[href$="iucr.org"] > br {
    display: inline;
  }
}


/* --------------------------------------------------------------------------
   13. Reduced motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html body a,
  html body input {
    transition: none !important;
  }
  .right.column > p > a[href]:hover {
    transform: none;
  }
  /* A pulse rather than a spin: it still says "working" without rotating. */
  html body #xspinner::before {
    border-color: var(--cc-accent);
    animation: cc-pulse 1.6s ease-in-out infinite;
  }
  @keyframes cc-pulse {
    50% { opacity: 0.25; }
  }
}

/* --------------------------------------------------------------------------
   14. The checkCIF/PLATON result pages
   The page that checkcif_hkl.pl streams back after an upload has none of the
   upload page's structure: no .row, no columns, no form - just <h1>s, <hr>s,
   paragraphs and (in a real report) tables and <pre> blocks.  So it is
   recognised here by what it does NOT have, and needs nothing added to it
   beyond the same <link> the upload page carries.

   What this section does NOT touch: the report's own tables, colours and
   alert blocks.  The only result page available while this was written is
   the 612-byte upload-error one, which contains none of them, and styling
   them unseen would be guesswork.  Everything they inherit from sections 1
   and 2 - the ground, the page font, the link colours - is an improvement
   already, and nothing here can break their layout.
   -------------------------------------------------------------------------- */

/* The report itself becomes the white sheet, since it has no wrapper element
   of its own to make one from. */
html body:not(:has(> div.row)) {
  margin: calc(var(--cc-header-h) + 22px) auto 48px;
  padding: 24px 28px 32px;
  background-color: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: 0 1px 2px var(--cc-shadow);
}

/* There is no logo paragraph on these pages to fix into the band, so the
   band would otherwise be empty.  The logo goes in as a pseudo-element
   instead, protocol-relative so that it works on both http and https, and
   absolute because a relative URL would resolve against this sheet's own
   home on journals.iucr.org rather than against checkcif.iucr.org.  If the
   file is ever renamed - it is versioned - the band goes plain rather than
   broken. */
html body:not(:has(> div.row))::after {
  content: "";
  position: fixed;
  top: 9px;
  left: var(--cc-col-edge);
  width: 58px;
  height: 42px;
  z-index: 11;
  background-image: url("//checkcif.iucr.org/checkCIF_v2.5.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* The report's headings.  The base h1 rule in section 4 carries !important
   because of the upload page's inline style, so these have to as well. */
html body:not(:has(> div.row)) h1 {
  margin: 0 0 14px !important;
  font-size: 24px !important;
}
/* The first of the two <h1>s is the "checkCIF (file) running" status line
   rather than a title, so it is demoted - but only where a second one
   follows to be the title, so a report with a single heading keeps it. */
html body:not(:has(> div.row)) h1:first-of-type:has(~ h1) {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--cc-muted);
}
html body:not(:has(> div.row)) hr {
  height: 0;
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--cc-border-soft);
}
/* The rule between the status line and the title separates nothing. */
html body:not(:has(> div.row)) h1:first-of-type:has(~ h1) + hr {
  display: none;
}


@media print {
  html {
    background: #ffffff;
  }
  /* The report frame.  The page's own script writes the checkCIF report
     into <iframe id="checkcif-report">, laid over the front page as a fixed,
     viewport-sized overlay.  Printed as it stands, that gives one screenful
     of the report on page 1 and the whole of the front page on the pages
     after it.  So while the frame is showing - the script writes
     display: block inline - print the frame alone: everything else in body
     hidden, the frame back in the flow at full width.

     Its HEIGHT cannot come from here: an iframe cannot size itself to its
     contents.  A beforeprint handler in the page is expected to measure the
     report and set an inline height - using an !important inline width while
     it measures, because the width below is !important.  Without that
     handler these rules print a single clean page that may be cut short,
     which is why they are not to be published on their own. */
  html body:has(> #checkcif-report[style*="display: block"]) > :not(#checkcif-report) {
    display: none !important;
  }
  html body:has(> #checkcif-report[style*="display: block"]) {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  html body > #checkcif-report[style*="display: block"] {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 100vh;
    border: 0;
    background: #ffffff;
    z-index: auto;
  }
  /* On paper the report is just the text: no card, no band. */
  html body:not(:has(> div.row)) {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: #ffffff;
  }
  html body {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 10pt;
  }
  html body::before,
  html body::after,
  html body #xspinner {
    display: none !important;
  }
  /* The band cannot be fixed on paper, so its two paragraphs come back into
     the flow at the top of the page. */
  .left.column > p:has(> img[src*="checkCIF"]),
  .left.column > p:has(> a[href$="iucr.org"]) {
    position: static;
    height: auto;
    display: block;
  }
  html body > .row,
  .row > .left.column {
    display: block;
  }
  .left.column > form,
  .left.column > .collapsable,
  .left.column > p:has(> b > br),
  .right.column > p {
    box-shadow: none;
    break-inside: avoid;
  }
}