/* --- The menu guide ----------------------------------------------------------
   `core/menu_guide.html`: the example menu with its parts numbered, then each
   part beside the screen in the editor where it is set.

   The rings and pins are drawn over the pictures from percentages that
   `menus.guide` hands over as `--x`, `--y`, `--w` and `--h`. The mark is one
   colour in both themes on purpose: it is drawn on a screenshot, and the
   screenshots are always of the light page. It is dark enough for the white
   numbers on it to read (5.2:1). */
.guide { --guide-mark: #c2410c; }

.guide-head { padding-bottom: 34px; }
.guide-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 6px 0 12px; }
.guide-tips {
  list-style: none; margin: 22px 0 26px; padding: 0;
  display: grid; gap: 10px; max-width: 64ch;
}
.guide-tips li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: var(--brand-tint); border: 1px solid var(--brand-light);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--brand-dark);
}
.guide-tips .icon { flex: none; margin-top: 0.2em; }

/* The number a part carries everywhere it appears: in the list, on the pin,
   on the ring, and beside the heading of its own section. */
.guide-num {
  display: inline-grid; place-items: center; flex: none;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px;
  background: var(--guide-mark); color: #fff;
  font-size: 0.78rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The map: both phones side by side, the numbered list under them. */
.guide-map { display: grid; gap: 40px; }
.guide-heroes {
  display: grid; gap: 40px; justify-content: center;
  grid-template-columns: repeat(2, minmax(0, 340px));
}
.guide-hero { margin: 0; }
.guide-hero figcaption {
  margin-top: 12px; text-align: center;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-muted);
}

.guide-shot {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.guide-shot img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 1px); }
.guide-shot.is-phone { border-radius: 20px; container-type: inline-size; }
.guide-shot.is-phone img { border-radius: 19px; }

/* A pin is a share of the phone's width, not pixels: the shooter spaced them
   on a 402px screen, and a phone drawn smaller has to shrink them with it. */
.guide-pin {
  position: absolute; z-index: 1;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 7cqw; height: 7cqw; min-width: 18px; min-height: 18px;
  border: 2px solid #fff; border-radius: 999px;
  background: var(--guide-mark); color: #fff;
  font-size: max(10px, 3.4cqw); font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  transition: transform 0.12s ease;
}
.guide-pin:hover, .guide-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.18); text-decoration: none;
}

.guide-ring {
  position: absolute; pointer-events: none;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border: 3px solid var(--guide-mark); border-radius: 10px;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), inset 0 0 0 1px rgb(255 255 255 / 0.6);
}
.guide-ring .guide-num {
  position: absolute; top: -13px; left: -13px;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

.guide-contents h2 { font-size: 1.3rem; margin-bottom: 4px; }
.guide-contents-groups { columns: 3 250px; column-gap: 36px; }
.guide-contents-group { break-inside: avoid; padding-top: 14px; }
.guide-contents h3,
.guide-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-faint);
}
.guide-contents h3 { margin: 0 0 6px; }
.guide-contents ol { list-style: none; margin: 0; padding: 0; }
.guide-contents a {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; margin-inline: -8px;
  border-radius: var(--radius-sm); color: var(--ink);
}
.guide-contents a:hover { background: var(--brand-wash); text-decoration: none; }

/* One part: its words, then the menu and the editor side by side. */
.guide-group-title { font-size: 1.7rem; margin: 0 0 8px; }
.guide-spot {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--sticky-top) + 12px);
}
.guide-group-title + .guide-spot { border-top: 0; padding-top: 18px; }
.guide-spot:last-child { padding-bottom: 0; }
.guide-spot-head { display: flex; align-items: center; gap: 12px; }
.guide-spot-head h3 { margin: 0; font-size: 1.3rem; }
.guide-spot-head .guide-num { min-width: 32px; height: 32px; font-size: 0.95rem; }
.guide-text { max-width: 70ch; margin: 10px 0 0; line-height: 1.6; }
.guide-warning {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 70ch; margin: 14px 0 0; padding: 10px 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--warn-ink);
}
.guide-warning .icon { flex: none; margin-top: 0.2em; }

.guide-pair {
  display: grid; gap: 22px; align-items: start; margin-top: 22px;
  grid-template-columns: minmax(0, 300px) auto minmax(0, 1fr);
}
.guide-pair.is-editor-only { grid-template-columns: minmax(0, 1fr); }
.guide-pair.is-editor-only .guide-in-editor { max-width: 820px; }
.guide-arrow { align-self: center; color: var(--guide-mark); font-size: 1.7rem; line-height: 0; }
.guide-in-editor { display: grid; gap: 24px; }
.guide-figure { margin: 0; }
.guide-figure figcaption { margin-bottom: 10px; }
.guide-label { display: inline-flex; align-items: center; gap: 6px; }
.guide-on-menu .guide-label { margin-bottom: 10px; }
.guide-path {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; row-gap: 2px;
  font-size: 0.9rem; color: var(--ink-muted);
}
.guide-path li + li::before { content: "›"; margin: 0 7px; color: var(--ink-faint); }
.guide-path li:last-child { font-weight: 700; color: var(--ink); }
.guide-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 0.86rem; }

@media (max-width: 860px) {
  /* Stacked: the menu, an arrow pointing down at the editor, the editor. */
  .guide-pair { grid-template-columns: minmax(0, 1fr); }
  .guide-on-menu { max-width: 340px; }
  .guide-arrow { justify-self: start; margin-left: 150px; transform: rotate(90deg); }
}
@media (max-width: 700px) {
  .guide-heroes { grid-template-columns: minmax(0, 340px); gap: 28px; }
}
@media (max-width: 560px) {
  .guide-arrow { margin-left: calc(50% - 14px); }
  .guide-spot-head h3 { font-size: 1.15rem; }
}