/* Website emergency guide, project 20.

   Document first. Every scenario is in the served HTML and every view is
   visible until guide.mjs sets data-enhanced on the root and takes over. That
   ordering is the whole architecture: with no JavaScript, or with a module
   that failed to load, the page is a long readable document and every option
   is an anchor that lands on the right section. Nothing here hides content
   unless the script that can show it again is running.

   The register is a calm clinic. No red panels, no countdowns, no pulsing, no
   alarm iconography. Urgency lives in the words, and the words are already
   written. */

.eg {
  padding-block: var(--s-6) var(--s-9);
}

.eg h1 {
  font-size: var(--t-xxl);
  font-weight: var(--t-xxl-weight);
  margin-block-end: var(--s-5);
  max-width: var(--measure);
}

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

/* The two hero paragraphs after the lede. p is margin zero site wide, so
   without this they read as one block. */
.eg-hero {
  margin-block-end: var(--s-3);
}

/* --text-3 is documented for 16px and up only, so the privacy line takes
   --text-2 at the small size rather than the caption colour. */
.eg-privacy {
  margin-block-start: var(--s-5);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.eg-blockTitle {
  margin-block: var(--s-7) var(--s-4);
  font-size: var(--t-xl);
  font-weight: var(--t-xl-weight);
}

/* ------------------------------------------------------- view switching */

/* Only ever under data-enhanced. Without it these rules do not exist and the
   whole document reads top to bottom. */
[data-enhanced] .eg-view,
[data-enhanced] .eg-scenario {
  display: none;
}

[data-enhanced] .eg-view.is-active,
[data-enhanced] .eg-scenario.is-active {
  display: block;
}

/* The printable cards are never on screen. A class rather than the hidden
   attribute, because site.css makes hidden non-negotiable with an !important
   and print.css has to be able to bring these back. */
.eg-card {
  display: none;
}

/* Two controls only work with script behind them, so they are not shown to a
   reader who does not have it. Everything else on the page is an anchor. */
.eg-back,
.eg-print {
  display: none;
}

[data-enhanced] .eg-back {
  display: inline-flex;
}

[data-enhanced] .eg-print {
  display: block;
}

/* ---------------------------------------------------------- the chooser */

.eg-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-block: var(--s-5) var(--s-6);
  padding: 0;
  list-style: none;
}

@media (max-width: 480px) {
  .eg-choices { grid-template-columns: minmax(0, 1fr); }
}

.eg-choices li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: background-color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease);
}

.eg-choices li:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}

.eg-choice {
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  color: var(--text-1);
  text-decoration: none;
}

.eg-choice::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* The title is the link and its pseudo element covers the card, so the
   description is not part of the accessible name. The focus ring has to move
   with it, onto the card the visitor actually sees. */
.eg-choices li:has(.eg-choice:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.eg-choice__line {
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* ------------------------------------------------------ scenario views */

.eg-scenario__title {
  margin-block: var(--s-6) var(--s-5);
  font-size: var(--t-xl);
  font-weight: var(--t-xl-weight);
  max-width: var(--measure);
}

.eg-scenario__title:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.eg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-5);
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--line);
}

.eg-question {
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  margin-block: var(--s-5) var(--s-4);
}

.eg-options {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg-option {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  color: var(--text-1);
  text-decoration: none;
}

.eg-option:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}

.eg-open {
  color: var(--text-2);
}

.eg-branch {
  margin-block: 0 var(--s-5);
}

.eg-continue {
  margin-block-start: var(--s-5);
}

/* The card that hands a reader to another scenario. Same shape as a chooser
   card, so arriving at one is not a new thing to learn. */
.eg-jump {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: var(--measure);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line-control);
  border-radius: var(--r-card);
  text-decoration: none;
}

.eg-jump:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}

.eg-jump__title {
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  color: var(--text-1);
}

.eg-jump__line {
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* --------------------------------------------------- the main document */

.eg-steps {
  margin-block: var(--s-6);
  padding: 0;
  list-style: none;
  counter-reset: eg-step;
}

.eg-step {
  position: relative;
  counter-increment: eg-step;
  padding-inline-start: var(--s-7);
  margin-block-end: var(--s-6);
}

.eg-step::before {
  content: counter(eg-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-sm);
}

.eg-step__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
  line-height: 1.3;
}

.eg-step p {
  margin: 0;
  color: var(--text-2);
}

.eg-lead {
  margin-block: var(--s-5) var(--s-3);
  font-weight: 600;
}

.eg-dont,
.eg-collect,
.eg-now {
  margin-block: 0 var(--s-5);
  padding-inline-start: var(--s-5);
  color: var(--text-2);
  max-width: var(--measure);
}

.eg-dont li,
.eg-collect li,
.eg-now li {
  margin-block-end: var(--s-2);
}

.eg-close {
  margin-block: var(--s-6) var(--s-4);
  padding: var(--s-5);
  background: var(--bg-1);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-control);
  color: var(--text-1);
}

.eg-links {
  color: var(--text-2);
  font-size: var(--t-sm);
}

.eg-print {
  margin-block: var(--s-6) var(--s-2);
}

.eg-printLine {
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* ------------------------------------------------------------------ faq */

.eg-faq__item {
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}

.eg-faq__q {
  margin: 0 0 var(--s-2);
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
}

.eg-faq__a {
  margin: 0;
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  .eg-choices li,
  .eg-option,
  .eg-jump {
    transition: none;
  }
}