/* ============================================================
   Selene · legal pages (privacy.html, cookies.html)
   Built on inner.css: the hero, .page and .sect grammar of the
   inner pages, plus tables that stack into cards on phones.
   ============================================================ */

.legal-hero { padding-bottom: clamp(2rem, 5vw, 4rem); }
.legal-hero h1 { max-width: 20ch; }
.legal-hero .lede { font-size: var(--d-second, var(--sc-t-lg)); line-height: 1.5; color: color-mix(in oklab, var(--sc-ink) 90%, transparent); max-width: 52ch; }
.legal-meta { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--silver); }

/* one language on screen at a time */
[data-lang-block][hidden] { display: none !important; }

.legal .sect__body ul { margin: 0 0 var(--sc-4); padding-left: 1.1em; }
.legal .sect__body li { margin: 0 0 var(--sc-2); }
.legal .sect__body li::marker { color: var(--gold); }
.legal .sect__body a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--gold); }
.legal .sect__body a:hover { text-decoration-color: var(--sc-ink); }
.legal address { font-style: normal; color: var(--sc-ink); line-height: 1.6; margin: 0 0 var(--sc-4); }

/* the short version, read first */
.legal .sect__body .brief { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); }
.legal .sect__body .brief li { padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink); line-height: 1.5; margin: 0; }
@media (max-width: 700px) { .legal .sect__body .brief { grid-template-columns: 1fr; } }

/* tables span both columns of the section grid */
.legal .sect .wide { grid-column: 1 / -1; min-width: 0; max-width: none; }
.ltable { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); }
.ltable th { text-align: left; font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); padding: 0 var(--sc-4) var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); vertical-align: bottom; }
.ltable td { padding: var(--sc-4) var(--sc-4) var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.ltable td:first-child { color: var(--sc-ink); }
.ltable code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.95em; color: var(--sc-ink); }
@media (max-width: 760px) {
  .ltable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ltable, .ltable tbody, .ltable tr, .ltable td { display: block; width: 100%; }
  .ltable tr { padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); }
  .ltable td { border: 0; padding: 0 0 var(--sc-3); }
  .ltable td::before { content: attr(data-label); display: block; font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); margin-bottom: 2px; }
  .ltable td:first-child::before { content: none; }
  .ltable td:first-child { font-size: var(--sc-t-base); padding-bottom: var(--sc-3); }
}

/* a value Selen still has to supply before launch */
.fill { color: var(--gold); border-bottom: 1px dashed var(--gold); }

/* notes that follow a full-width table sit in the reading column on wide screens */
.legal .sect__after { grid-column: 2; }
@media (max-width: 900px) { .legal .sect__after { grid-column: auto; } }

/* terms.html: three parts on one page, each with its own title */
.legal-toc { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); margin-top: var(--sc-6); }
.legal-toc a { color: var(--sc-ink); font-size: var(--sc-t-sm); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--gold); }
.legal-toc a:hover { text-decoration-color: var(--sc-ink); }
.legal .part + .part { margin-top: clamp(3rem, 6vw, 5rem); }
.legal .part__title { font-family: var(--sc-font-text); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; padding: var(--sect-pad) 0 var(--sc-2); border-top: 1px solid var(--sc-hairline); }
.legal .part .sect { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.legal .sect h3 { font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.25; letter-spacing: -0.005em; margin: 0; text-wrap: balance; }

/* the detailed cookie list, folded under the short table */
.legal details.reg { margin-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.legal details.reg summary { cursor: pointer; color: var(--sc-ink); font-size: var(--sc-t-sm); list-style: none; display: inline-flex; align-items: center; gap: 10px; }
.legal details.reg summary::-webkit-details-marker { display: none; }
.legal details.reg summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 15px; line-height: 1; }
.legal details.reg[open] summary::before { content: "−"; }
.legal details.reg summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.legal details.reg .ltable { margin-top: var(--sc-4); }
.legal .reg__note { margin: var(--sc-3) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }