/* Polyfetti - the user guide.
   Built on the tokens in ../style.css. Nothing here introduces a colour; every value is
   --ink, --muted, --paper, --accent and friends, so the guide stays inside AAA Airy.

   The whole page collapses with <details>/<summary> and no JavaScript. That is not
   minimalism for its own sake: this audience is often on a slow connection, and a guide
   that needs a script to open is a guide that sometimes will not. */

.guide-head {
  background: var(--paper);
  padding: 78px max(32px, calc((100vw - 1176px) / 2)) 62px;
  position: relative;
  overflow: hidden;
}
.guide-head:before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .5;
  right: -170px; top: -200px;
}
.guide-head > * { position: relative; z-index: 1; }
.guide-head h1 { font-size: clamp(44px, 6vw, 76px); margin: 0 0 22px; }
.guide-lede { color: var(--muted); font-size: 16px; max-width: 52ch; margin: 0; }

/* --- the jump nav --------------------------------------------------------- */
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 26px max(32px, calc((100vw - 1176px) / 2));
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
}
.guide-nav a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.guide-nav a:hover, .guide-nav a:focus-visible { border-color: var(--accent); color: var(--accent); }

/* --- a section ------------------------------------------------------------ */
.guide-section {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: 48px;
  max-width: 1176px;
  margin: auto;
  padding: 62px 32px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 88px;
}
.section-head h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 8px; }
.section-head .ja { color: var(--muted); font: 12px var(--mono); letter-spacing: .06em; margin: 0 0 14px; }
.section-head .lede { color: var(--muted); font-size: 14px; margin: 0; max-width: 30ch; }

/* --- one question --------------------------------------------------------- */
.qa-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }

.qa > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 19px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
/* Safari still draws its own marker without this. */
.qa > summary::-webkit-details-marker { display: none; }

/* The +/- is drawn rather than typed, so it cannot be read out as "plus" by a screen
   reader and cannot go missing with a font. */
.qa > summary::after {
  content: '';
  flex: none;
  width: 15px; height: 15px;
  margin-left: auto;
  margin-top: 4px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/2px 100% no-repeat;
  transition: transform .18s ease;
}
.qa[open] > summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 0; }
.qa > summary:hover { color: var(--accent); }
.qa > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.qa > summary span { flex: 1; }

.answer { padding: 0 33px 22px 0; }
.answer p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; max-width: 62ch; }

/* A figure the owner has not decided. Visible on purpose - a blank would read as a
   promise of "free" or "instant", and a guessed number is how this whole project once
   ended up with invented prices in a published policy. */
.fill {
  background: var(--accent-tint);
  border-bottom: 1.5px dashed var(--border);
  color: var(--accent-deep);
  font: 12.5px var(--mono);
  padding: 1px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* --- the close ------------------------------------------------------------ */
.guide-foot {
  max-width: 1176px;
  margin: auto;
  padding: 62px 32px 90px;
}
.guide-foot p { font-size: 17px; margin: 0 0 12px; max-width: 54ch; }
.guide-foot .small { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.guide-foot .button { text-decoration: none; }

@media (max-width: 860px) {
  .guide-head { padding: 58px 20px 46px; }
  .guide-nav { padding: 18px 20px; gap: 7px; }
  .guide-section { display: block; padding: 44px 20px; }
  .section-head { margin-bottom: 26px; }
  .section-head .lede { max-width: none; }
  .qa > summary { font-size: 15px; gap: 14px; }
  .answer { padding-right: 0; }
  .guide-foot { padding: 46px 20px 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa > summary::after { transition: none; }
}