/* /scenarios/: the catalogue. Index, the anatomy of a file, then one record per scenario.
   Records are generated by scripts/build-site.mjs (scenarioDetails). Tokens and components
   come from site.css; page-only classes start with scen- or brief-. */

/* ---------- Title: lede and tally on the left, actions in columns 9 to 12 (.title-row) ---------- */
.scen-title-text .tally {
  margin-top: var(--s4);
  color: var(--ink-soft);
}
.scen-title-acts .onward {
  margin-top: var(--s2);
}

/* ---------- What a scenario file holds ---------- */
.scen-anatomy thead th:nth-child(1) {
  width: 11rem;
}
.scen-anatomy thead th:nth-child(2) {
  width: 8rem;
}
.scen-who {
  font-weight: 650;
  font-stretch: 88%;
}
@media (max-width: 700px) {
  /* section | who, then what it does */
  .scen-anatomy tbody th {
    grid-column: span 4;
  }
  .scen-anatomy td.scen-who {
    grid-column: span 2;
    text-align: right;
  }
  .scen-anatomy td.scen-who::before {
    content: none;
  }
  .scen-anatomy td:last-child {
    padding-top: 0;
  }
}

/* ---------- Records ---------- */
/* The first record follows a part, so it takes the part gap. */
.wrap > .part + .record {
  margin-top: var(--part-gap);
}
.record-back {
  margin-top: var(--s5);
}
.record .record-side .note {
  margin-top: calc(-1 * var(--s3));
}

/* Briefing messages: a canary slip each. A page keeps the red rule and the bold alert;
   a person's message is typed at regular weight, as it would be read. */
.briefing {
  max-width: none;
}
.briefing > p,
.briefing > ul {
  max-width: var(--measure);
}
/* who and how: as many cells as the message has, each as wide as it needs */
.brief-head {
  display: flex;
  flex-wrap: wrap;
}
.brief-head > .cell {
  flex: 1 1 auto;
}
.brief-slip:not(.slip--page) .message .typed {
  font-weight: 400;
}
.brief-slip .message {
  padding-bottom: 14px;
}
/* addresses and URLs in a message break rather than run out of the slip */
.brief-text {
  overflow-wrap: anywhere;
}
.brief-text > * + * {
  margin-top: 0.7em;
}
.brief-text code {
  font-size: 1em;
  overflow-wrap: anywhere;
}
.brief-text em {
  font-style: normal;
}
.brief-text strong {
  font-weight: 700;
}
/* an email quoted inside a message */
.briefing .brief-text blockquote {
  max-width: none;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 2px solid var(--carbon);
  background: none;
}
.briefing .brief-text blockquote > * + * {
  margin-top: 0.7em;
}
.brief-slip .row .typed {
  overflow-wrap: anywhere;
}
/* how to play this briefing in each mode: a note, not part of the story */
.brief-mode {
  padding-top: 8px;
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
  font-size: var(--t-small);
}

/* ---------- Order ---------- */
.scen-order .onward {
  margin-top: var(--s3);
}