/* Woggli accent for the shared legal-page layout.
 *
 * The legal pages under /legal/<app>/ all render with `privacy-policy.css`, which is painted in
 * the studio's brown and orange. Woggli has its own palette, so this file repaints the accents
 * for its four pages only. Everything is scoped to `body.legal-woggli`, which is emitted by
 * mb-woggli/scripts/generate_legal_html.mjs and appears on no other page, so the seven micro-app
 * legal pages are untouched.
 *
 * Loaded after privacy-policy.css. Selector specificity is identical (body.class + .class), so
 * these rules win on source order alone — including inside the mobile media query of the base
 * sheet, which is why the tints here are single values rather than per-breakpoint ones.
 *
 * Palette mirrors mb-woggli/src/theme/tokens.ts: purple #5B2D8E, deep #2E1A4A, golden #FFB400,
 * coral #FF4F2B, cream #FFF3DD.
 */

body.legal-woggli {
  --color-primary: #2e1a4a;
  --color-primary-dark: #241239;
  --color-primary-light: #3d2461;
  --color-accent: #5b2d8e;
  --color-accent-light: #7b4bb0;
  --color-accent-dark: #5b2d8e;
  --color-accent-darker: #40205f;
  --color-accent-orange: #ff4f2b;

  /* The tint the base sheet hardcodes as rgba(235, 146, 56, a). */
  --woggli-tint-soft: rgba(91, 45, 142, 0.09);
  --woggli-tint: rgba(91, 45, 142, 0.13);
  --woggli-line: rgba(91, 45, 142, 0.24);
  --woggli-line-strong: rgba(91, 45, 142, 0.42);
}

/* The woggle knot above the document title. Same mark as the app icon, so a reviewer who
   arrives here from the store listing sees the thing they just clicked. */
body.legal-woggli .pp-app-mark {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 6px 16px rgba(46, 26, 74, 0.22));
}

body.legal-woggli .pp-badge {
  background: var(--woggli-tint-soft);
  border-color: var(--woggli-line);
  color: #5b2d8e;
}

body.legal-woggli .pp-section-number {
  background: var(--woggli-tint);
  border-color: var(--woggli-line-strong);
  color: #5b2d8e;
}

body.legal-woggli .toc-link:hover,
body.legal-woggli .toc-link:focus-visible {
  background: var(--woggli-tint);
  border-color: var(--woggli-line);
}

body.legal-woggli .pp-toc-number {
  border-bottom-color: var(--woggli-line);
}

/* Coral is the app's call-to-action colour, so it lands on the one control that is a call to
   action here: the link to the sibling document. */
body.legal-woggli .pp-back-btn:hover,
body.legal-woggli .pp-back-btn:focus-visible {
  background: #ff4f2b;
  border-color: #ff4f2b;
  color: #fff3dd;
}

body.legal-woggli .pp-policy-text a {
  color: #5b2d8e;
  text-decoration-color: rgba(91, 45, 142, 0.4);
}

body.legal-woggli .pp-policy-text a:hover {
  color: #ff4f2b;
  text-decoration-color: currentColor;
}

@media print {
  /* The mark is decoration; a printed policy does not need it and it wastes the top of page 1. */
  body.legal-woggli .pp-app-mark {
    display: none;
  }
}