/* ─────────────────────────────────────────────────────────────────────
   /phone-banking/directions — how to use the dialer.

   A long read that people arrive at from an email, usually minutes
   before their shift, often on a phone. So: a table of contents that
   jumps, generous type, and figures that are drawn rather than
   photographed.

   The figures are the interesting part. The campaign's original
   instructions linked to photographs of a laptop screen stored in Google
   Drive — which meant a permission wall in the middle of a set of
   instructions, a stranger's bookmarks bar visible in the corner, and
   something unreadable on a phone. They are redrawn here in the site's
   own type and colours. Being approximate is fine and arguably better:
   what someone needs is where to look and what the thing is called, and
   a clean drawing says that more plainly than a photograph of a screen
   with dust on it.
   ───────────────────────────────────────────────────────────────────── */

.dir { padding-bottom: 60px; }

/* ── Jumping around ────────────────────────────────────────────────── */

.dir__toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 34px;
  padding: 16px 18px;
  background: #faf8fc;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.dir__toc a {
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
  text-decoration: none;
  color: var(--ink-soft);
}
.dir__toc a:hover { border-color: var(--teal); color: var(--teal); }

/* ── Sections ──────────────────────────────────────────────────────── */

.dir__sec { max-width: 720px; margin: 0 0 44px; scroll-margin-top: 24px; }
.dir__sec h2 {
  font-family: Montserrat, Roboto, sans-serif;
  font-size: clamp(22px, 3vw, 27px);
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rule);
}
.dir__sec h3 {
  font-family: Montserrat, Roboto, sans-serif;
  font-size: 17px; color: var(--ink);
  margin: 26px 0 8px;
}
.dir__sec p { font-size: 16px; line-height: 1.65; margin: 0 0 12px; }

/* The one section that is read before anything is done. */
.dir__sec--lead {
  padding: 22px 24px;
  background: #f6f2fa;
  border-left: 4px solid var(--lav);
  border-radius: 0 12px 12px 0;
}
.dir__sec--lead h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }

.dir__sec--help {
  padding: 20px 24px;
  background: #faf8fc;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.dir__sec--help h2 { border-bottom: 0; padding-bottom: 0; }

/* ── Lists and steps ───────────────────────────────────────────────── */

.dir__list { margin: 0 0 14px; padding-left: 22px; }
.dir__list li { font-size: 16px; line-height: 1.6; margin: 0 0 9px; }

.dir__steps, .dir__script { margin: 0; padding-left: 0; list-style: none; counter-reset: none; }
.dir__steps > li, .dir__script > li {
  position: relative;
  padding-left: 46px;
  margin: 0 0 22px;
  font-size: 16px; line-height: 1.65;
}
/* The steps run 1..9 across three sections, and the figures name them
   ("Step 5 — Leads on the top bar"). A CSS counter ignores <ol start>,
   so each list passes its own starting point in --from. */
.dir__steps { counter-reset: step var(--from, 0); }
.dir__steps > li { counter-increment: step; }
.dir__steps > li::before { content: counter(step); }
.dir__script { counter-reset: line; }
.dir__script > li { counter-increment: line; }
.dir__script > li::before { content: counter(line); }

.dir__steps > li::before, .dir__script > li::before {
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal); color: #fff;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 14px;
}

/* A step's own fine print — the "if it doesn't work" line that belongs
   with the step rather than after all of them. */
.dir__aside {
  margin: 8px 0 0 !important;
  font-size: 14.5px !important;
  color: var(--ink-soft);
}

.dir__quote {
  margin: 10px 0;
  padding: 11px 16px;
  background: #f6f2fa;
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  font-size: 16px; line-height: 1.55;
}

.dir__case {
  margin: 0 0 6px;
  padding: 2px 0 14px;
  border-bottom: 1px dashed var(--rule);
}
.dir__case:last-child { border-bottom: 0; }
.dir__case h3 { margin-top: 18px; }

/* A button name, set so it reads as a thing on screen. */
.dir__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em;
  white-space: nowrap;
}

/* ── Screenshots ───────────────────────────────────────────────────
   Real captures, cropped hard to the one region that matters.

   Cropping is doing two jobs at once. It keeps the browser chrome out —
   these were taken on a working machine, and the tabs and bookmarks bar
   are nobody's business — and it is also the only way these are legible
   on a phone, which is where they are read. A 5344px capture of a dense
   application scaled to 390px is a grey smear; the top bar alone, or the
   leadstream list alone, is readable anywhere.

   Nothing here shows a contact. The one screen with voters on it is the
   folder view, and that view is in the instructions only to say "not
   this one" — which the folder column says by itself. */

.shot { margin: 14px 0 4px; }
.shot img {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

/* The tall ones are mostly a narrow column; letting them run the full
   width of the text makes a list of folders the size of a poster. */
.shot img { max-width: 420px; }

/* The dial-session bar is a 5:1 strip. Squeezed into the 720px reading
   column its labels are about eight pixels tall, which is no use to
   anybody — so it is allowed out of the column into the empty space
   beside it, and capped at the viewport on a phone. */
.shot--wide img { max-width: min(980px, calc(100vw - 48px)); }

.shot figcaption {
  margin: 8px 2px 0;
  max-width: 560px;
  font-size: 13.5px; color: var(--ink-soft);
}

@media (max-width: 640px) {
  .dir__steps > li, .dir__script > li { padding-left: 38px; }
  .dir__steps > li::before, .dir__script > li::before { width: 26px; height: 26px; font-size: 13px; }
  .dir__sec--lead { padding: 18px; }
}