/* CALIBRE Play - privacy page (/privacy/). Generated from content/src: legal-common.css + privacy.extra.css */
/* Shared long-form layout for the four legal pages (terms, returns, privacy, cookie-policy);
   the same block heads each of their CSS files. The parent templates are untouched: the
   child wrappers (page-terms.php etc.) add nav.play-toc, a section list built from the h2s. */

html body .wrap { width: 100%; max-width: 780px; padding: 28px 22px 96px; font-size: 16px; line-height: 1.7; color: #d9daee; }
html body .wrap > h1 { font-size: clamp(32px, 6vw, 50px); line-height: 1.05; margin: 18px 0 12px; }
html body .wrap > .updated {
  display: inline-block; margin: 0 0 20px; padding: 6px 10px; border-radius: 8px;
  font: 500 12.5px/1.3 var(--f-data); color: var(--play-muted); background: var(--play-card); border: 1px solid var(--play-line);
}
html body .wrap > p, html body .wrap > ul, html body .wrap > .callout { max-width: 68ch; }
html body .wrap > .updated + h2 { margin-top: 12px; }
html body .wrap > h2 {
  font: 800 20px/1.3 var(--f-body); letter-spacing: 0; color: var(--play-ink);
  margin: 38px 0 10px; padding-top: 22px; border-top: 1px solid var(--play-line); scroll-margin-top: 128px;
}
html body .wrap > h3 { font: 800 16.5px/1.35 var(--f-body); color: var(--play-water); margin: 24px 0 6px; }
html body .wrap strong { color: var(--play-ink); font-weight: 800; }
html body .wrap a { color: var(--play-fire-ink); text-underline-offset: 2px; }
html body .wrap a:hover { color: #ffb8a2; }
html body .wrap > ul { list-style: none; padding-left: 0; margin: 10px 0 14px; }
html body .wrap > ul > li { position: relative; padding-left: 22px; margin: 9px 0; }
html body .wrap > ul > li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--play-electric); }
html body .wrap code {
  font: 500 12.5px/1.4 var(--f-data); color: #f0d68a; background: rgba(227, 193, 95, .10);
  border: 1px solid rgba(227, 193, 95, .28); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere;
}
html body .wrap .ph { background: rgba(227, 193, 95, .18); color: var(--play-ink); }
html body .wrap .muted { color: var(--play-muted); }

/* tables (privacy lawful bases, cookie lists) */
html body .wrap > table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0 18px; font-size: 14.5px; line-height: 1.55;
  background: var(--play-card); border: 1px solid var(--play-line); border-radius: 14px; overflow: hidden;
}
html body .wrap > table th {
  background: var(--play-card-2); color: var(--play-muted); font: 800 11.5px/1.3 var(--f-body); letter-spacing: .1em;
  text-transform: uppercase; padding: 11px 14px; text-align: left; border-bottom: 0;
}
html body .wrap > table td { padding: 12px 14px; border-bottom: 0; border-top: 1px solid var(--play-line); vertical-align: top; color: #d9daee; }

/* small links at the end */
html body .legal-nav { margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--play-line); display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 14px; }
html body .wrap .legal-nav a { margin: 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--play-muted); text-decoration: none; font-weight: 600; }
html body .wrap .legal-nav a:hover { color: var(--play-ink); text-decoration: underline; }

/* ── section list: phones get a sticky "Sections" bar with a drop-down list */
html body .play-toc { position: sticky; top: 67px; z-index: 30; margin: -28px -22px 0; }
html body .play-toc ol { list-style: none; margin: 0; padding: 0; }
html body .play-toc li { margin: 0; padding: 0; }
html body .play-toc a { text-decoration: none; }
html body .play-toc .n { flex: none; min-width: 1.7em; font: 500 13px/1.45 var(--f-data); color: var(--play-muted); }
html body .play-toc-d { display: none; }
html body .play-toc-m > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px;
  background: var(--play-bg); border-bottom: 1px solid var(--play-line); box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .6);
}
html body .play-toc-m > summary::-webkit-details-marker { display: none; }
html body .play-toc-m > summary:focus-visible { outline-offset: -3px; }
html body .play-toc-m .lbl {
  flex: none; font: 800 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--play-electric);
  padding: 6px 9px; border: 1.5px solid color-mix(in srgb, var(--play-electric) 55%, transparent); border-radius: 999px;
}
html body .play-toc-m .cur { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14.5px/1.2 var(--f-body); color: var(--play-ink); }
html body .play-toc-m > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0; border-right: 2.5px solid var(--play-muted);
  border-bottom: 2.5px solid var(--play-muted); transform: rotate(45deg); transition: transform .2s ease;
}
html body .play-toc-m[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
html body .play-toc-m > ol {
  position: absolute; left: 0; right: 0; top: 100%; max-height: min(70vh, calc(100vh - 170px)); overflow: auto; padding: 6px 0;
  background: var(--play-card); border-bottom: 1px solid var(--play-line); box-shadow: 0 22px 34px rgba(0, 0, 0, .55);
}
html body .play-toc-m li a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 22px; color: var(--play-ink); font-size: 15px; line-height: 1.4; }
html body .play-toc-m li a:hover { background: rgba(255, 255, 255, .04); }
html body .play-toc a.on { background: rgba(227, 193, 95, .10); }
html body .play-toc a.on .n { color: var(--play-electric); }

/* ── wide screens: the list sits in a sticky column on the left */
@media (min-width: 1100px) {
  html body .wrap { max-width: 1100px; padding-left: 322px; position: relative; }
  html body .play-toc { position: absolute; top: 28px; bottom: 96px; left: 22px; width: 256px; margin: 0; z-index: 1; }
  html body .play-toc-m { display: none; }
  html body .play-toc-d { display: block; position: sticky; top: 92px; max-height: calc(100vh - 140px); overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
  html body .play-toc-h { margin: 6px 0 10px 14px; font: 800 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--play-muted); }
  html body .play-toc-d li a {
    display: flex; gap: 8px; align-items: baseline; padding: 7px 12px; border-left: 2px solid var(--play-line);
    color: var(--play-muted); font-size: 14px; line-height: 1.4;
  }
  html body .play-toc-d li a:hover { color: var(--play-ink); border-left-color: var(--play-muted); }
  html body .play-toc-d li a.on { color: var(--play-ink); border-left-color: var(--play-electric); background: linear-gradient(90deg, rgba(227, 193, 95, .12), transparent); }
  html body .wrap > h1 { margin-top: 0; }
  html body .wrap > h2 { scroll-margin-top: 92px; }
}
@media (max-width: 480px) {
  html body .wrap { font-size: 15.5px; }
  html body .wrap > h2 { font-size: 19px; margin-top: 32px; padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { html body .play-toc-m > summary::after { transition: none; } }

/* privacy: the two-column "lawful bases" table stacks into cards on phones */
html body .wrap > table td:last-child { color: var(--play-ink); font-weight: 600; }
@media (max-width: 600px) {
  html body .wrap > table thead { display: none; }
  html body .wrap > table, html body .wrap > table tbody, html body .wrap > table tr, html body .wrap > table td { display: block; width: 100%; }
  html body .wrap > table tr { padding: 13px 14px; border-top: 1px solid var(--play-line); }
  html body .wrap > table tr:first-child { border-top: 0; }
  html body .wrap > table td { padding: 0; border: 0; }
  html body .wrap > table td + td {
    display: inline-block; width: auto; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: 13px; line-height: 1.45;
    background: color-mix(in srgb, var(--play-grass) 14%, var(--play-card)); border: 1px solid color-mix(in srgb, var(--play-grass) 45%, var(--play-card));
  }
  html body .wrap > table td + td::before { content: "Lawful basis: "; color: var(--play-muted); font-weight: 600; }
}