/* VTuber Smash: page styles for Privacy, Terms, Community Guidelines and Takedowns.
   Linked after site.css on those four pages only. The shared look (page head, panels, pills,
   badges, notices, contact lists, prose) comes from site.css and STYLEGUIDE.md; every colour
   comes from the tokens on :root in site.css.

   Layout: a stream scene for long text. The summary dock ("The short version") comes first,
   then the contents dock, then the full text. From 960px the contents dock sticks beside the
   text like an OBS scene list. Each section heading carries a scene dot; the dot rings when
   the section is the link target. No motion on these pages.

   Sections
    1 page head stamp   2 layout   3 summary dock   4 contents dock   5 sections
    6 data lists and visibility badges   7 statements and placeholders   8 print */

/* 1. Page head stamp ------------------------------------------------------- */

/* "Last updated: ..." sits under the lead as an overlay label. */
.page-head .legal-updated {
  justify-self: start;
  flex-wrap: wrap;
  max-width: 100%;
  white-space: normal;
}

/* 2. Layout ---------------------------------------------------------------- */

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "summary"
    "toc"
    "doc";
  gap: 2rem;
  align-items: start;
}
.legal-layout > * { min-width: 0; }

.legal-summary { grid-area: summary; max-width: calc(var(--measure) + 2.5rem); }
.legal-toc { grid-area: toc; }
.legal-doc { grid-area: doc; }

@media (min-width: 960px) {
  .legal-layout {
    grid-template-columns: minmax(13.5rem, 16.5rem) minmax(0, 1fr);
    grid-template-areas:
      "toc summary"
      "toc doc";
    column-gap: clamp(2.5rem, 4vw, 4rem);
    row-gap: 2.75rem;
  }

  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.25rem);
    max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px) - 2.5rem);
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* The contents dock stays in view, so the end-of-page link isn't needed. */
  .legal-back { display: none; }
}

/* 3. Summary dock ---------------------------------------------------------- */

.legal-summary .panel-body { padding: 1.1rem 1.25rem 1.25rem; }

.legal-points { display: grid; gap: 0.6rem; margin: 0; padding-left: 1.25rem; }
.legal-points li { padding-left: 0.15rem; }
.legal-points li::marker { color: var(--sakura); }

.legal-note { color: var(--mist); font-size: var(--step--1); }

/* 4. Contents dock (an OBS-style scene list) ------------------------------ */

.legal-toc .panel-body { padding: 0.35rem 0 0.5rem; }

.legal-toc-list { display: grid; margin: 0; padding: 0; list-style: none; }

.legal-toc-list a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.5rem;
  padding: 0.3rem 1rem;
  color: var(--mist);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.legal-toc-list a::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--mist);
  border-radius: 50%;
}
.legal-toc-list a:hover { color: var(--moon); background: color-mix(in srgb, var(--haze) 45%, transparent); }
.legal-toc-list a:hover::before { border-color: var(--sakura); background: var(--sakura); box-shadow: 0 0 6px var(--sakura); }
.legal-toc-list a:focus-visible { outline-offset: -3px; }

/* Two columns on mid-size screens, read down each column like a contents page. */
@media (min-width: 560px) and (max-width: 959.98px) {
  .legal-toc-list { display: block; columns: 2; column-gap: 0; }
  .legal-toc-list li { break-inside: avoid; }
}

/* 5. Sections -------------------------------------------------------------- */

.legal-section { padding-block: 2.25rem; border-top: 1px solid var(--haze); }
.legal-section:first-child { padding-top: 0; border-top: 0; }
.legal-section:last-of-type { padding-bottom: 0; }

/* Section headings use the body face at 800: the display face stays on the h1. */
.legal-section > h2 {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: 0;
}
.legal-section > h2::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.32em;
  border-radius: 50%;
  background: var(--sakura);
  box-shadow: 0 0 0 2px var(--struct), 0 0 10px color-mix(in srgb, var(--sakura) 55%, transparent);
}
.legal-section:target > h2::before {
  box-shadow: 0 0 0 3px var(--struct), 0 0 0 5px var(--sakura), 0 0 16px 2px color-mix(in srgb, var(--sakura) 70%, transparent);
}

.legal-section h3 { font-size: var(--step-1); }

.legal-section .notice { max-width: var(--measure); }

.legal-back { margin-top: 2.25rem; font-size: var(--step--1); }

/* 6. Data lists and visibility badges -------------------------------------- */

.legal-dl { margin: 0; }
.legal-dl dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-top: 1.25rem;
  font-weight: 800;
  color: var(--moon);
}
.legal-dl dt:first-child { margin-top: 0; }
.legal-dl dd { margin: 0.3rem 0 0; max-width: var(--measure); }
.legal-dl dd > * + * { margin-top: 0.6rem; }

/* Who can see a kind of information: words first, colour second. */
.badge-public { --tone: var(--lantern); }
.badge-private { --tone: var(--firefly); }
.badge-device { --tone: var(--mist); }

/* 7. Statements and placeholders ------------------------------------------ */

/* Wording a notice must include, quoted as a block. Square, like a lower third. */
.legal-statement {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.9rem;
  border-left: 3px solid var(--sakura);
  background: var(--dusk);
  color: var(--moon);
}
.legal-statement p { margin: 0; }

/* Text in square brackets marks a placeholder to fill soon. */
.legal-fill {
  padding: 0 0.3em;
  border: 1px dashed color-mix(in srgb, var(--lantern) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--lantern) 10%, transparent);
  color: var(--lantern);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 8. Print: legal text is the one thing people print, so print it dark on white. --- */

@media print {
  body { background: #fff; color: #000; }
  #app {
    --night: #fff;
    --dusk: #fff;
    --haze: #999;
    --moon: #000;
    --mist: #333;
    --sakura: #000;
    --lantern: #000;
    --firefly: #000;
    --struct: #fff;
    --strip-bg: #fff;
    background: #fff;
    color: #000;
  }
  body::before,
  .skip-link,
  .site-header,
  .footer-nav,
  .addr-list,
  .legal-toc,
  .legal-back,
  .copy-btn,
  .addr-mail,
  [data-preview-banner] { display: none !important; }
  .page-head { padding-block: 0 1rem; background: none; border: 0; }
  .page-head h1 { text-shadow: none; }
  .band { padding-block: 0.5rem; }
  .legal-layout { display: block; }
  .legal-summary { margin-bottom: 1.5rem; }
  .legal-section { break-inside: auto; }
  .legal-section > h2 { break-after: avoid; }
  .legal-section > h2::before { display: none; }
  a { color: #000; }
}