/* ============================================================================
   Legal pages: /privacy, /delete, /terms (page agent: legal)
   Builds on style.css: .page-hero, .panel, .prose, .toc, .doc, .checks,
   .steps, .note/.tip/.warn, .table-wrap. Only page-group pieces live here.

   1. Hero: meta chips, the three-page switch, the app identity strip (/delete)
   2. The short version box
   3. Doc layout: sticky TOC that scrolls itself, numbered section headings
   4. Tables that stack into labelled blocks on phones (.stack-table)
   5. Way cards (/delete), odds table, related pages
   ============================================================================ */


/* 1. Hero ------------------------------------------------------------------ */
.legal-hero .page-hero-art { width: min(44%, 170px); }
@media (min-width: 900px) {
  .legal-hero .page-hero-art { width: 250px; margin-right: clamp(0px, 3vw, 40px); }
}
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.legal-meta .chip { white-space: normal; min-height: 34px; padding: .4em 1em; font-size: .9375rem; box-shadow: inset 0 0 0 2px var(--panel-border), 0 3px 0 var(--panel-shadow); }

/* the three legal pages as candy pills; the current one is the highlight */
.legal-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.legal-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(43, 111, 216, .55);
  color: var(--ink);
  font: 700 1rem/1 var(--font-display);
  letter-spacing: .03em;
  text-decoration: none;
  transition: transform .12s ease, background-color .12s ease;
}
.legal-switch a:hover { background: #fff; transform: translateY(-1px); }
.legal-switch a[aria-current="page"] {
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-border), 0 3px 0 var(--highlight-border);
}

/* /delete: the app and developer, as Play shows them */
.app-id {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 10px 20px 10px 12px;
  border: 2px solid var(--panel-border);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 4px 0 var(--panel-shadow);
  color: var(--ink);
}
.app-id img { flex: none; width: 48px; height: auto; }
.app-id-text { min-width: 0; }
.app-id-name { display: block; font: 700 clamp(1.125rem, 1rem + .6vw, 1.375rem)/1.2 var(--font-display); }
.app-id-pkg { display: block; margin-top: 2px; font-size: 1rem; color: var(--muted); overflow-wrap: anywhere; }
.app-id-pkg code { font: 700 .95em var(--font-mono); color: var(--ink); }


/* 2. The short version ----------------------------------------------------- */
.legal-short { margin-inline: auto; }
.legal-short .panel-title { display: flex; align-items: center; gap: 10px; }
.legal-short .panel-title img { width: 30px; height: 30px; flex: none; }
.short-list { display: grid; gap: 14px 40px; }
.short-list > li + li { margin-top: 0; }
@media (min-width: 860px) {
  .short-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.short-list strong { font-weight: 800; }
.legal-short-foot { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--panel-border); }
.legal-short-foot a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }
.legal-short .cluster { margin-top: 18px; }


/* 3. Doc layout ------------------------------------------------------------ */
.legal-doc { padding-top: clamp(32px, 5vw, 64px); }
@media (min-width: 1024px) {
  /* a long TOC scrolls inside itself instead of running off the screen */
  .legal-doc .doc-aside .toc {
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-shadow) transparent;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  /* a grid, not columns: items run 1|2, 3|4... so row 1 is the only row without a separator */
  .legal-doc .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .legal-doc .toc li:nth-child(2) { border-top: 0; }
}
.legal-doc .toc li { font-size: 1rem; }
/* phones and tablets: style.css's 44px rows. The TOC discs cycle the same candy
   colours as the section numbers. White digits only on the darker blue (style.css,
   4.7:1+); green, amber, pink and cyan carry ink (4.6:1+). */
.legal-doc .toc li:nth-child(5n+2)::before { background: linear-gradient(var(--primary-top), var(--primary-bottom)); color: var(--ink); }
.legal-doc .toc li:nth-child(5n+3)::before { background: linear-gradient(#FFD75E, #FFB300); color: var(--ink); }
.legal-doc .toc li:nth-child(5n+4)::before { background: linear-gradient(#FF8AC8, #F27BBF); color: var(--ink); }
.legal-doc .toc li:nth-child(5n+5)::before { background: linear-gradient(#8CEBFF, #4FD8FF); color: var(--ink); }
@media (min-width: 1024px) {
  /* desktop (a mouse): compact rows, so the long TOC fits its sticky column */
  .legal-doc .toc li { align-items: flex-start; padding: 5px 0; line-height: 1.3; }
  .legal-doc .toc li::before { width: 24px; height: 24px; margin-top: 1px; font-size: .8125rem; }
  .legal-doc .toc a { display: inline; min-height: 0; padding: 0; }
}

/* the article: full panel width for tables, a readable measure for text */
.legal-body.prose { max-width: none; }
.legal-body > :is(p, ul, ol, h3, h4, dl, .note, .tip, .warn, blockquote) { max-width: 72ch; }
.legal-body h2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
  line-height: 1.15;
}
.legal-body h2:not(:first-child) { margin-top: 2.2em; padding-top: 1.3em; border-top: 3px dashed var(--panel-border); }
.sec-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  margin-top: -.12em;
  border-radius: 50%;
  background: linear-gradient(var(--secondary-bottom), var(--secondary-lip));
  box-shadow: 0 3px 0 #163C8C, 0 0 0 3px var(--keyline);
  color: #fff;
  font-size: .78em;
  text-shadow: 0 2px 0 #163C8C;
}
.legal-body h2:nth-of-type(5n+2) .sec-num { background: linear-gradient(var(--primary-top), var(--primary-bottom)); box-shadow: 0 3px 0 var(--primary-lip), 0 0 0 3px var(--keyline); color: var(--ink); text-shadow: none; }
.legal-body h2:nth-of-type(5n+3) .sec-num { background: linear-gradient(#FFD75E, #FFB300); box-shadow: 0 3px 0 #C98600, 0 0 0 3px var(--keyline); color: var(--ink); text-shadow: none; }
.legal-body h2:nth-of-type(5n+4) .sec-num { background: linear-gradient(#FF8AC8, #F27BBF); box-shadow: 0 3px 0 #B8407F, 0 0 0 3px var(--keyline); color: var(--ink); text-shadow: none; }
.legal-body h2:nth-of-type(5n+5) .sec-num { background: linear-gradient(#8CEBFF, #4FD8FF); box-shadow: 0 3px 0 #1E9FCB, 0 0 0 3px var(--keyline); color: var(--ink); text-shadow: none; }
.legal-body h3 { color: var(--ink); }
.legal-body .note, .legal-body .tip, .legal-body .warn { margin-top: 1.2em; }
.legal-body .steps, .legal-body .checks { padding-left: 0; }
.legal-body .steps > li + li, .legal-body .checks > li + li { margin-top: 0; }
.legal-body .steps > li { background: #FFFDF8; }
@media (max-width: 479.98px) {
  .legal-body .steps > li { padding: 12px 14px 12px 60px; }
  .legal-body .steps > li::before { left: 12px; width: 36px; height: 36px; font-size: 1.125rem; }
}
/* the narrowest phones: a slimmer number gutter and panel padding, so step text keeps its width */
@media (max-width: 359.98px) {
  .legal-doc .panel { --pad: 14px; }
  .legal-body .steps > li { padding-left: 50px; }
  .legal-body .steps > li::before { left: 10px; width: 30px; height: 30px; font-size: 1rem; }
}
.legal-body .checks { display: grid; gap: .55em; }
.legal-body .btn { text-decoration: none; }
.legal-body code { white-space: nowrap; }
.legal-body .say {  /* on-screen words from the game */
  font: 700 .95em/1.3 var(--font-display);
  letter-spacing: .02em;
}
.legal-body .contact-card { padding: 16px 18px; border-radius: var(--radius); background: var(--well); border: 2px solid var(--well-border); }
.legal-body .contact-card p + p { margin-top: .4em; }


/* 4. Tables that stack on phones --------------------------------------------
   <table class="stack-table"> with data-label on every <td>; the first cell of a
   row is its title. The article is a size container: whenever it is under 720px
   wide (phones, and 640-1240px viewports with the TOC beside or above it) each row
   becomes a labelled block, so no column is ever squeezed to ~90px. */
.legal-body { container-type: inline-size; }
.legal-body .table-wrap { margin-top: 1em; }
.legal-body h3 + .table-wrap { margin-top: .6em; }
.stack-table td:first-child { font-weight: 800; }
.stack-table td:first-child .sub { display: block; margin-top: 2px; font-weight: 600; }
.stack-table th { white-space: nowrap; }
@container (min-width: 720px) {
  .stack-table.cols-4, .stack-table.cols-3, .stack-table.cols-2 { table-layout: fixed; }
  .cols-4 th:nth-child(1) { width: 31%; } .cols-4 th:nth-child(2) { width: 24%; }
  .cols-4 th:nth-child(3) { width: 24%; } .cols-4 th:nth-child(4) { width: 21%; }
  .cols-3 th:nth-child(1) { width: 38%; } .cols-3 th:nth-child(2) { width: 34%; } .cols-3 th:nth-child(3) { width: 28%; }
  .cols-2 th:nth-child(1) { width: 34%; }
}
@container (max-width: 719.98px) {
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack-table tbody tr { padding: 12px 14px 14px; border-bottom: 2px solid var(--panel-border); }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table tbody tr:nth-child(even) { background: rgba(255, 246, 230, .9); }
  .stack-table tbody tr:first-child { border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
  .stack-table tbody tr:last-child { border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
  .prose .stack-table td, .prose .stack-table tbody tr:nth-child(even) td { padding: 0; border: 0; background: transparent; }
  .stack-table td + td { margin-top: 6px; }
  .prose .stack-table td.num { text-align: left; white-space: normal; }
  .stack-table td:first-child { font: 700 1.0625rem/1.3 var(--font-display); }
  .stack-table td:first-child .sub { font: 600 1rem/1.5 var(--font-body); }
  .stack-table td:not(:first-child)::before {
    content: attr(data-label);
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--well);
    box-shadow: inset 0 0 0 1.5px var(--well-border);
    font: 700 .75rem/1.35 var(--font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    vertical-align: 1px;
  }
}


/* 5. Way cards, odds, related pages --------------------------------------- */
.ways { display: grid; gap: 18px; margin-top: 22px; }
@media (min-width: 760px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way { display: flex; flex-direction: column; gap: 10px; }
.way .card-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.way-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 -2px 0 rgba(43, 47, 74, .12);
  font: 700 1rem/1 var(--font-display);
}
.way-1 .card-strip { background: linear-gradient(180deg, #8EEFA6, #5FD67F); }
.way-2 .card-strip { background: linear-gradient(180deg, #9CC8FF, #74AEFF); }
.way.card p, .way.card p + p { margin: 0; }  /* beats style.css .card p + p: the 10px flex gap alone sets the rhythm */
.way .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 479.98px) { .way .btn { align-self: stretch; } }
.way-path { font: 700 1.0625rem/1.5 var(--font-display); }

.legal-body .table-wrap { position: relative; }  /* keeps visually-hidden text inside the scroller */
.odds-table th:not(:first-child), .prose .odds-table td { text-align: center; }
.prose .odds-table th, .prose .odds-table td { vertical-align: middle; }
.prose .odds-table tbody th { font: 700 1rem/1.3 var(--font-display); text-align: left; text-transform: none; letter-spacing: .02em; border-bottom: 1px solid var(--panel-border); }
.prose .odds-table tbody tr:last-child th { border-bottom: 0; }
.prose .odds-table tbody tr:nth-child(even) th { background: rgba(255, 246, 230, .9); }
.odds-table .closed { font: 600 1rem/1.3 var(--font-body); color: var(--muted); }
.odds-cards { max-width: 520px; }
@media (max-width: 479.98px) {
  .prose .odds-table th, .prose .odds-table td { padding: 9px 6px; }
  .prose .odds-table th:first-child { padding-left: 10px; }
  .prose .odds-table thead th { font-size: .8125rem; letter-spacing: .02em; white-space: normal; }
  .odds-table .pill { padding: .25em .6em; font-size: .75rem; letter-spacing: .03em; }
}


.legal-more { padding-block: clamp(36px, 5vw, 64px); }
.legal-more > .hills:last-child { margin-bottom: calc(-1 * clamp(36px, 5vw, 64px)); }
.legal-more .grid { --min: 240px; }
.legal-more a.card { display: flex; align-items: center; gap: 16px; }
.legal-more a.card img { flex: none; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(43, 47, 74, .12)); }
.legal-more .more-title { display: block; font: 700 1.1875rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.legal-more .more-text { display: block; margin-top: 4px; font-size: 1rem; color: var(--muted); }
.legal-more .section-head { margin-bottom: 22px; }