/* Support page: this page's own rules. The shared stylesheet, /styles.css,
   carries the header, the footer, the grounds, the tiers, the buttons and
   the layouts every section uses (the reading row, the columns, the band,
   the chapter); /mock.css carries the drawn pane, the report, the plate and
   the scene controls. Nothing here redefines them.

   The page opens on the night ground the home page opens on, with its one
   fact said large: the address, with the lead beside it on a wide screen.
   Then what to check before writing, in two columns, then what to put in
   a message beside a drawing of the message the button opens, then where
   the Isolation report's Copy button is, and it closes on the dark band
   with the security address. The report
   itself is rendered once, on the home page, which this page links to. */

/* The opening: the page's name and its address as one pair at one size,
   the name heavy, the address light and underlined. The size follows the
   screen's width so that the address, the one long unbroken string on the
   page, stays on one line on a 360px screen (about 9.7em of text at 30px
   is about 290px, inside the 328px column). If a larger default text size
   still pushes it wider, it breaks rather than scrolls. The section's
   padding is its tier, set in the markup. */

.intro {
  --fs-address: clamp(1.875rem, 8.2vw, 4.5rem);   /* 30 to 72px */
}

.intro h1,
.address {
  font-size: var(--fs-address);
  line-height: 1.08;
}

.intro h1 {
  font-weight: 650;
  letter-spacing: -0.03em;
}

.address {
  max-width: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* An underline in proportion to the large type, thicker on hover; the
   focus ring is the night ground's own, from the shared stylesheet. */
.address a {
  text-decoration-thickness: max(2px, 0.04em);
  text-underline-offset: 0.14em;
}

.address a:hover {
  text-decoration-thickness: max(3px, 0.07em);
}

.intro-foot {
  display: grid;
  gap: var(--s3);
  margin-top: clamp(var(--s6), 3.5vw, var(--s7));
}

/* On a wide screen the name and the address keep the width they need on
   the left, and the lead with its note takes the right, its last line on
   the address's baseline, so the opening no longer leaves half the band
   empty. Under 80em the address at its full size would leave the right
   column too narrow for the lead (about 200px at 1024px), so the two stay
   stacked there. */
@media (min-width: 80em) {
  .intro > .wrap {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(var(--s7), 5vw, 6rem);
  }

  .intro h1 {
    grid-column: 1;
    grid-row: 1;
  }

  .intro .address {
    grid-column: 1;
    grid-row: 2;
  }

  .intro-foot {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
    padding-bottom: 0.35em;
  }
}

/* A lead keeps the lead's measure inside the reading row, where the
   shared rule for the row's paragraphs would widen it to the prose
   measure */
.reading-body > .lead {
  max-width: var(--measure-lead);
}

/* Check these first: four checks in two columns, each a plain statement
   at the sub-heading size with its reason and its chapter of the guide
   under it, then the short answers from the FAQ in three columns at the
   size of the site's notes. */
.sp-checks > li {
  display: flex;
  flex-direction: column;
}

.sp-checks h3 {
  max-width: var(--measure-h3);
}

.sp-checks p {
  max-width: var(--measure);
  color: var(--quiet);
}

/* The guide link sits at the foot of its cell, so the links of a row
   line up */
.sp-checks .sp-link,
.sp-quick .sp-link {
  margin-top: auto;
  padding-top: var(--s3);
}

.sp-link {
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* The short answers are a second, lighter list, so they stand a step
   further from the checks than the row gap alone */
.sp-quick {
  margin-top: var(--s6);
}

.sp-quick-h {
  font-size: var(--fs-label);
  line-height: 1.35;
}

.sp-quick .cols {
  margin-top: var(--s4);
}

.sp-quick .cols > li {
  display: flex;
  flex-direction: column;
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* Each short answer opens with its question, the link to the FAQ, in ink */
.sp-q a {
  color: var(--ink);
  font-weight: 600;
}

.sp-quick p {
  max-width: var(--measure);
}

/* The parts of a message as run-in statements, then the one rule that
   must not be missed under the heavier 2px ink rule the home page uses for
   a stronger break, then the button. */
.parts {
  display: grid;
  gap: var(--s4);
  padding: 0;
  list-style: none;
}

.parts li {
  max-width: var(--measure);
  color: var(--quiet);
}

.parts strong,
.never-send strong {
  color: var(--ink);
}

.band-text .never-send {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}

.never-send strong {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--fs-label);
  line-height: 1.35;
}

.band-text .actions {
  margin-top: var(--s5);
}

/* The drawn message: a new e-mail as a mail program shows it, drawn light
   because it is not MaeVae's window. It fills its column, and the body
   keeps the room a message is written in, so the drawing reads as the
   window the button opens rather than six loose lines. It holds what the
   button puts in a new message: the address, an empty subject and the
   six lines. */
.sheet {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.sheet-row {
  display: flex;
  align-items: baseline;
  gap: 1em;
  min-height: 2.8em;
  padding: 0.65em 1em;
  border-bottom: 1px solid var(--line);
}

.sheet-k {
  flex: none;
  width: 4.5em;
  color: var(--quiet);
}

.sheet-v {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sheet-body {
  display: grid;
  align-content: start;
  gap: 0.3em;
  min-height: 15em;
  padding: 1em 1em 2.4em;
}

/* Three steps, a real sequence, so they carry small numerals */
.report-steps {
  display: grid;
  gap: var(--s3);
  padding: 0;
  list-style: none;
}

.report-steps li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s3);
  max-width: var(--measure);
  color: var(--ink);
}

.rs-n {
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 700;
}

#report .band-text > p:not(.limit):not(.sp-link) {
  color: var(--quiet);
}

#report .band-text strong {
  color: var(--ink);
}

/* While the scene plays, the pane stands over its report, as it does in
   the app before the badge is clicked; it fades when the report opens.
   At rest it is not there, so the drawing is the report alone. */
.report-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--m-term);
}

/* The badge as it is clicked, filled the way a pressed button is */
.report-press {
  border-radius: 3px;
  background: var(--m-select);
  outline: 0.25em solid var(--m-select);
}

/* The page's own ring on the Copy button, in the drawing's ink: it says
   "here", and it is not one of the app's colors */
.report-ring {
  outline: 2px solid var(--m-ink);
  outline-offset: 3px;
}

/* The security address, set large on one side of the dark band, with its
   rule at the lead's size and the button on the other */
.sp-security .chapter-art > * + * {
  margin-top: var(--s5);
}

.security-say {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

@media (forced-colors: active) {
  .report-ring {
    outline-color: Highlight;
  }

  .sheet {
    border-color: CanvasText;
  }
}