/* How SPLASH works — a reading page, not a game screen.
   Generous leading, nothing that moves. The games are dense and animated on
   purpose; this is the opposite and should feel like it. */

/* THE TWO-COLUMN SHELL. A contents rail on the left and the prose in the middle,
   which is the shape every readable specification has had for thirty years: you
   can see how long the thing is, and you can jump. The whole shell is centred in
   the viewport rather than the prose alone -- centring only the text while the
   rail hangs off to one side looks like a mistake. */
.how-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 46rem);
  gap: 3rem;
  justify-content: center;
  align-items: start;
  padding: 1.5rem 1.25rem 5rem;
}

.how-toc {
  position: sticky;
  top: 1.5rem;
  font-size: .9rem;
  /* It must never be taller than the screen, or the bottom entries become
     unreachable -- the failure you only notice on a short laptop. */
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.how-toc__title {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0 0 .6rem;
  border: 0;
  padding: 0;
}
.how-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.how-toc li { counter-increment: toc; margin-bottom: .1rem; }
.how-toc a {
  display: block;
  padding: .3rem .55rem .3rem 1.9rem;
  border-radius: .4rem;
  text-decoration: none;
  opacity: .78;
  position: relative;
  line-height: 1.35;
}
.how-toc a::before {
  content: counter(toc);
  position: absolute;
  left: .55rem;
  opacity: .45;
  font-variant-numeric: tabular-nums;
}
.how-toc a:hover, .how-toc a:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 9%, transparent);
}

/* BELOW 62rem THE RAIL GOES ON TOP, not away. A contents list is most useful on
   the device with the least screen, and hiding it on a phone would remove the
   only way to see how long the page is without scrolling all of it. */
@media (max-width: 62rem) {
  .how-shell { grid-template-columns: minmax(0, 46rem); gap: 1.5rem; }
  .how-toc {
    position: static;
    max-height: none;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: .7rem;
    padding: .8rem .7rem;
  }
  .how-toc ol { columns: 2; column-gap: 1rem; }
}
@media (max-width: 30rem) { .how-toc ol { columns: 1; } }

.how { line-height: 1.62; max-width: 46rem; }

.how h1 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.08;
  margin: .4rem 0 .6rem;
}

.how h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  margin: 2.4rem 0 .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  /* Jumping from the contents must not bury the heading under the sticky
     header; scroll-margin is the whole fix and costs nothing. */
  scroll-margin-top: 1.5rem;
}

.how h3 {
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
  margin: 1.4rem 0 .35rem;
}

.how p { margin: 0 0 .85rem; }
.how__lede { font-size: 1.08rem; opacity: .9; }

/* The test-network flag. First thing on the page, and it should not be possible
   to miss or to mistake for decoration -- somebody arriving from a link needs to
   know within one second that the money is not real. */
.how__flag {
  background: color-mix(in srgb, #F6C945 16%, transparent);
  border: 1px solid color-mix(in srgb, #F6C945 46%, transparent);
  border-radius: .7rem;
  padding: .7rem .85rem;
  margin: 0 0 1.5rem;
  font-size: .96rem;
}

/* The one genuinely dangerous thing on the site: a lost duel secret cannot be
   recovered by anybody. Marked out rather than left in the flow of prose. */
.how__warn {
  background: color-mix(in srgb, #E8623C 14%, transparent);
  border-left: 3px solid #E8623C;
  border-radius: .3rem;
  padding: .65rem .8rem;
  margin: 0 0 .9rem;
}

.how__list, .how__steps { margin: 0 0 1rem; padding-left: 1.25rem; }
.how__list li, .how__steps li { margin-bottom: .5rem; }

.how__contracts { list-style: none; margin: 0 0 1rem; padding: 0; }
.how__contracts li {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .6rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.how__cname { font-weight: 700; }
/* The addresses are 40 characters of base32 and WILL overflow a phone. Breaking
   anywhere is correct here: nobody reads them, they copy them or click them. */
.how__contracts code { font-size: .78rem; word-break: break-all; opacity: .85; }

.how__note { font-size: .92rem; opacity: .82; }
.how__back { margin-top: 2.5rem; font-weight: 700; }

.how code {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-radius: .25rem;
  padding: .05em .35em;
  font-size: .9em;
}