/* Web presence record sheet. The screen layout is the site design system;
   the print block below is half the product, because the printed page has
   to work as a paper form with ruled lines where the answers are missing. */

.rs-intro {
  max-width: var(--measure);
  color: var(--text-2);
}

.rs-warning {
  margin-block: var(--s-5);
  padding: var(--s-4) var(--s-5);
  max-width: var(--measure);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-card);
  color: var(--text-1);
  font-weight: 600;
}

.rs-sheet {
  margin: 0;
}

.rs-section {
  margin: 0 0 var(--s-5);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* A legend normally straddles the top border, half of it outside the card.
   Floating it puts it in ordinary flow instead. */
.rs-section__legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0 0 var(--s-4);
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  color: var(--text-1);
}

.rs-grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}

.rs-grid .c-field + .c-field {
  margin-block-start: 0;
}

.rs-field--wide {
  grid-column: 1 / -1;
}

.rs-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.rs-radios {
  clear: both;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border: 0;
  border-block-start: 1px solid var(--line);
}

.rs-radios__legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0 0 var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-1);
}

.rs-radios__row {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.rs-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  color: var(--text-1);
  font-size: var(--t-sm);
  cursor: pointer;
}

.rs-radio:hover {
  background: var(--bg-2);
}

.rs-radio input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.rs-radios__note {
  margin-block-start: var(--s-3);
  max-width: var(--measure);
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* -------------------------------------------------------- the verdict */

.rs-verdict {
  margin-block: var(--s-6);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
}

.rs-verdict__title {
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  margin-block-end: var(--s-3);
}

.rs-verdict__waiting {
  color: var(--text-2);
}

.rs-verdict__word {
  font-size: var(--t-xl);
  font-weight: var(--t-xl-weight);
  color: var(--accent);
  margin-block-end: var(--s-3);
}

.rs-verdict__text {
  max-width: var(--measure);
  color: var(--text-1);
}

.rs-verdict__text + .rs-verdict__text {
  margin-block-start: var(--s-3);
}

.rs-verdict__skipped {
  margin-block-start: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.rs-verdict__gapsTitle {
  margin-block-start: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}

.rs-verdict__gaps {
  margin-block-start: var(--s-3);
  padding-inline-start: var(--s-5);
  color: var(--text-2);
}

.rs-verdict__gaps li + li {
  margin-block-start: var(--s-2);
}

/* -------------------------------------------------------- the controls */

.rs-closing {
  margin-block: var(--s-5);
  color: var(--text-1);
  font-weight: 600;
}

.rs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}

.rs-note:empty {
  display: none;
}

.rs-note {
  margin-block-end: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.rs-confirm {
  margin-block-end: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--fail);
  border-radius: var(--r-card);
}

.rs-confirm__text {
  color: var(--text-1);
}

.rs-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}

.rs-privacy {
  margin-block: var(--s-5);
  color: var(--text-1);
  font-weight: 600;
}

/* ==================================================================== */
/* Print. One page of typical content, black on white, and every empty  */
/* field a ruled line so the sheet works as a paper form as well.       */
/* ==================================================================== */

@media print {
  @page {
    margin: 11mm;
  }

  .rs-intro,
  .rs-actions,
  .rs-note,
  .rs-confirm,
  .rs-privacy,
  .rs-closing,
  .rs-verdict__waiting,
  .rs-verdict--waiting,
  .c-prose,
  .c-quiet,
  .l-lede {
    display: none !important;
  }

  .l-column {
    max-width: none;
    padding: 0;
  }

  h1 {
    font-size: 13pt;
    margin-block-end: 2pt;
  }

  .rs-warning {
    margin: 0 0 5pt;
    padding: 3pt 5pt;
    max-width: none;
    background: #FFFFFF;
    border: 1pt solid #000000;
    border-radius: 0;
    color: #000000;
    font-size: 8pt;
    font-weight: 700;
  }

  /* Two columns of sections, so nine fieldsets fit on one sheet. */
  .rs-sheet {
    columns: 2;
    column-gap: 6mm;
    font-size: 7.6pt;
  }

  .rs-section {
    break-inside: avoid;
    margin: 0 0 3pt;
    padding: 2.5pt 4pt 3pt;
    background: #FFFFFF;
    border: 0.6pt solid #000000;
    border-radius: 0;
  }

  .rs-section__legend {
    padding-block-end: 1.5pt;
    font-size: 8pt;
    font-weight: 700;
    color: #000000;
  }

  .rs-grid {
    display: block;
  }

  /* Label on the left, ruled answer on the right. Two to a line is what
     brings nine sections onto one sheet, and it is how a paper form reads
     anyway. */
  .c-field {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: baseline;
    column-gap: 3pt;
    margin: 0 0 1.5pt;
  }

  .rs-field--wide {
    display: block;
  }

  .c-label {
    margin: 0;
    font-size: 6.4pt;
    font-weight: 600;
    color: #000000;
  }

  .c-hint {
    display: none;
  }

  /* The ruled line. An empty field prints as somewhere to write, and a
     filled one prints the answer on the same line. */
  .c-input,
  .rs-textarea {
    width: 100%;
    min-height: 0;
    padding: 0;
    background: #FFFFFF;
    border: 0;
    border-block-end: 0.5pt solid #666666;
    border-radius: 0;
    color: #000000;
    font-size: 7.6pt;
    line-height: 1.35;
  }

  .rs-textarea {
    min-height: 17pt;
    border: 0.5pt solid #666666;
    resize: none;
  }

  /* The question runs full width and its answers sit on the line under it.
     A narrow column would wrap three choices onto two lines and cost more
     height than it saved. */
  .rs-radios {
    margin: 2pt 0 0;
    padding: 1.5pt 0 0;
    border-block-start: 0.5pt solid #999999;
  }

  .rs-radios__legend {
    padding-block-end: 1pt;
    font-size: 6.4pt;
    font-weight: 600;
    color: #000000;
  }

  .rs-radios__row {
    gap: 6pt;
  }

  .rs-radio {
    min-height: 0;
    padding: 0;
    gap: 2pt;
    border: 0;
    color: #000000;
    font-size: 7pt;
  }

  /* The chosen answer has to survive the printer, so the control keeps its
     own colours instead of being flattened to white. */
  .rs-radio input {
    width: 7pt;
    height: 7pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .rs-radios__note {
    margin-block-start: 2pt;
    max-width: none;
    color: #000000;
    font-size: 6.5pt;
  }

  /* The verdict block runs across the foot of the sheet. */
  .rs-verdict {
    column-span: all;
    margin: 5pt 0 0;
    padding: 4pt 6pt;
    background: #FFFFFF;
    border: 1pt solid #000000;
    border-radius: 0;
    break-inside: avoid;
  }

  .rs-verdict__title {
    font-size: 8.5pt;
    margin-block-end: 2pt;
    color: #000000;
  }

  .rs-verdict__word {
    font-size: 11pt;
    margin-block-end: 2pt;
    color: #000000;
  }

  .rs-verdict__text,
  .rs-verdict__skipped,
  .rs-verdict__gaps,
  .rs-verdict__gapsTitle {
    max-width: none;
    color: #000000;
    font-size: 7.2pt;
  }

  .rs-verdict__gapsTitle {
    margin-block-start: 3pt;
  }

  .rs-verdict__gaps {
    margin-block-start: 2pt;
    padding-inline-start: 10pt;
  }

  .rs-verdict__gaps li + li {
    margin-block-start: 1pt;
  }
}