/* Support and policies: calm reading pages that still belong to Dave. DESIGN.md §9. */

html { background: var(--napkin); }
body {
  background: var(--napkin);
  color: var(--dave-ink);
  font-family: ui-serif, var(--text);
  --focus: var(--pencil);
}
::selection { background: var(--lemon); color: var(--dave-ink); }

.skip { font-style: normal; }

/* The only colour: a strip of the eight games, in menu order. */
.strip { display: flex; height: 6px; }
.strip span { flex: 1; }
.strip span:nth-child(1) { background: var(--pimento); }
.strip span:nth-child(2) { background: var(--lemon); }
.strip span:nth-child(3) { background: var(--plum); }
.strip span:nth-child(4) { background: var(--sky); }
.strip span:nth-child(5) { background: var(--cobalt); }
.strip span:nth-child(6) { background: var(--guava); }
.strip span:nth-child(7) { background: var(--peel); }
.strip span:nth-child(8) { background: var(--mint); }

a { color: var(--dave-ink); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }

.doc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 64rem;
  margin: 0 auto;
  padding: 18px 20px 0;
  font-family: var(--dave-ui);
}
.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 900 20px/1 var(--dave-display);
}
.doc-brand img { width: 32px; height: 32px; border-radius: 22.5%; }
.doc-nav { display: flex; gap: 20px; font: 600 16px/1 var(--dave-ui); }
.doc-nav [aria-current="page"] { text-decoration-thickness: 3px; }

.doc-main {
  max-width: calc(64ch + 40px);
  margin: 0 auto;
  padding: 7vh 20px 12vh;
  font-size: 18px;
  line-height: 1.6;
}
.doc-mascot { display: block; width: 120px; margin-bottom: 18px; rotate: -4deg; }
.doc-mascot img { width: 100%; }
.doc-label { font: 600 17px/1.2 var(--dave-ui); color: var(--dave-ink-soft); }
.doc-main h1 {
  margin-top: 8px;
  font: 900 clamp(40px, 6vw, 64px)/1.02 var(--dave-display);
  letter-spacing: -0.01em;
}
.updated, .doc-line { margin-top: 12px; font-style: italic; color: var(--dave-ink-soft); }
.doc-line { font-style: normal; font-size: 20px; color: var(--dave-ink); }

.toc {
  margin-top: 30px;
  padding: 16px 0;
  border-top: 1.5px dashed rgb(34 23 42 / .25);
  border-bottom: 1.5px dashed rgb(34 23 42 / .25);
}
.toc-title { font: 600 16px/1.2 var(--dave-ui); color: var(--dave-ink-soft); }
.toc ol { margin-top: 8px; columns: 2 14em; column-gap: 32px; list-style: decimal inside; }
.toc li { padding: 3px 0; break-inside: avoid; }

.doc-body { margin-top: 18px; }
.doc-body h2 {
  margin-top: 42px;
  font: 900 clamp(24px, 3vw, 30px)/1.15 var(--dave-display);
  scroll-margin-top: 20px;
}
.doc-body h2 a { text-decoration: none; }
.doc-body h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.doc-body h3 { margin-top: 26px; font: 700 20px/1.3 var(--dave-display); }
.doc-body p, .doc-body ul, .doc-body ol { margin-top: 14px; max-width: 64ch; }
.doc-body ul { list-style: disc; padding-left: 1.3em; }
.doc-body ol { list-style: decimal; padding-left: 1.3em; }
.doc-body li + li { margin-top: 6px; }

.policy-list { margin-top: 30px; }
.policy-list li { padding: 22px 0; border-bottom: 1.5px dashed rgb(34 23 42 / .25); }
.policy-list h2 { font: 900 clamp(26px, 3.2vw, 34px)/1.1 var(--dave-display); }
.policy-list p { margin-top: 6px; }

/* Support: questions, with a marker stroke on the open one. */
.faq { margin-top: 30px; }
.faq details { border-bottom: 1.5px dashed rgb(34 23 42 / .25); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 36px 14px 0;
  cursor: pointer;
  list-style: none;
  font: 700 20px/1.3 var(--dave-display);
  isolation: isolate;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -52%;
  font: 600 26px/1 var(--dave-ui);
  transition: rotate 200ms var(--ease-out);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq .q { position: relative; z-index: 1; }
.faq-marker {
  position: absolute;
  left: -8px;
  top: 50%;
  width: calc(100% + 16px);
  height: 1.6em;
  translate: 0 -50%;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.faq-marker path {
  fill: none;
  stroke: var(--lemon);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.5;
  transition: stroke-dashoffset 420ms var(--ease-out);
}
.faq details[open] .faq-marker path { stroke-dashoffset: 0; }
.faq details p { padding: 0 0 20px; max-width: 64ch; }

.write { margin-top: 48px; }
.write h2 { font: 900 clamp(26px, 3.2vw, 34px)/1.1 var(--dave-display); }
.write p { margin-top: 10px; }

/* Footer, as on /dave. */
.dave-foot {
  background: var(--night);
  color: var(--napkin);
  padding: 44px 20px max(44px, env(safe-area-inset-bottom));
  font-family: var(--dave-ui);
  --focus: var(--lemon);
}
.dave-foot a { color: var(--napkin); }
@media (min-width: 900px) { .dave-foot { padding: 48px 6vw; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 600 17px/1.4 var(--dave-ui); }
.foot-small { margin-top: 18px; font: 500 15px/1.5 var(--dave-ui); color: rgb(255 244 226 / .72); }

@media (prefers-reduced-motion: reduce) {
  .faq-marker path, .faq summary::after { transition: none; }
}