/* /privacy: the plain legal page. Loaded after /css/service.css on this page only.
   service.css sets the plain head and the .legal__body type; these are the few
   things no component does: the contents list, the section label rows, and the
   footer on its own forest band. */

/* 0 · The live subtitle ("Our legal privacy policy description"): the first line
   under the header, above the contents and the text, so it stays with the H1. */
.legal__kicker { margin: 0 0 var(--sc-6); color: var(--sc-ink-soft); }

/* 1 · The text column, and the contents list: stacked above the text on phones and
   tablets (a closed disclosure, see 1c); beside it and sticky on desktop, where it
   is the reader's position cue (a legal page has no chapter bar). */
.legal__grid { display: grid; gap: var(--sc-7); }
@media (min-width: 1080px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .legal__body { grid-column: 1; grid-row: 1; }
  .legal__toc { grid-column: 2; grid-row: 1; position: sticky; top: var(--sc-6); max-height: calc(100vh - 2 * var(--sc-6)); overflow-y: auto; scrollbar-width: thin; }
}

.legal__toc-h { margin: 0; color: var(--sc-ink-soft); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--sc-hairline); }
.legal__toc li { counter-increment: toc; border-bottom: 1px solid var(--sc-hairline); break-inside: avoid; }
.legal__toc a {
  display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: var(--sc-3); align-items: baseline;
  padding: 0.6em 0 0.6em 0.7em; border-inline-start: 2px solid transparent;
  font-size: var(--sc-t-sm); line-height: 1.35; color: var(--sc-ink-soft); text-decoration: none; text-wrap: pretty;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
/* numbered 1–15 as the policy numbers itself ("Section 15"), right-aligned */
.legal__toc a::before { content: counter(toc); justify-self: end; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.legal__toc a[aria-current] { color: var(--sc-ink); border-inline-start-color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--sc-ink); } }
/* tablets: two columns; every label is one line, so the rules stay level */
@media (min-width: 640px) and (max-width: 1079px) { .legal__toc ol { columns: 2; column-gap: var(--sc-6); } }
@media (max-width: 860px) { .legal__toc a { min-height: 44px; align-items: center; padding-left: 0; } }

/* 1c · The disclosure (the /terms-and-conditions pattern). Phones and tablets: one
   "Contents · 15 sections" row, closed, so the policy starts on the first screen.
   Desktop: open and not collapsible (page script), the summary is just the head;
   on a window too short for the list it scrolls itself to keep the current entry
   in view and fades at the edge that has more. */
.legal__toc-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  min-height: 44px; padding-block: var(--sc-2); border-block: 1px solid var(--sc-hairline-strong);
}
.legal__toc-box > summary::-webkit-details-marker { display: none; }
.legal__toc-box > summary .legal__toc-h { color: var(--sc-ink); }
.legal__toc-count { display: inline-flex; align-items: center; gap: 0.75em; font-size: var(--sc-t-xs); letter-spacing: 0.08em; color: var(--sc-ink-soft); }
.legal__toc-count::after {
  content: ''; width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-20%) rotate(45deg); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.legal__toc-box[open] .legal__toc-count::after { transform: translateY(20%) rotate(-135deg); }
.legal__toc-box[open] > summary { border-bottom-color: transparent; }
.legal__toc-box > summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .legal__toc-box > summary:hover .legal__toc-count { color: var(--sc-ink); } }
@media (min-width: 1080px) {
  .legal__toc-box > summary { cursor: default; pointer-events: none; min-height: 0; padding-block: 0 var(--sc-3); border-block: 0; }
  .legal__toc-box > summary .legal__toc-h { color: var(--sc-ink-soft); }
  .legal__toc-count::after { display: none; }
  .legal__toc.is-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); }
  .legal__toc.is-more-above { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem); mask-image: linear-gradient(to bottom, transparent, #000 3rem); }
  .legal__toc.is-more-above.is-more-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
}

/* 1b · The ground's light: the shared wedge runs sun → shade over a section's full
   height, which suits a 2–3 screen chapter; over this 15-screen section it greyed
   the last third of the policy. Here the sun falls off over the first screen and a
   half and the wall stays cream to the end. */
.legal { --wedge: linear-gradient(168deg, rgb(var(--sun) / 0.5) 0, rgb(var(--sun) / 0.15) 70vh, rgb(var(--sun) / 0) 140vh); }

/* 2 · The text. 55ch: about 70 characters a line at 18px in this face (68ch gave
   ~83; 60ch still ~78), so the long verbatim paragraphs don't read as walls. Each section opens on a label row
   standing on a rule (the chapter eyebrow idiom): "Section N" at the left, so the
   fifteen are easy to tell apart when scrolling and "see Section 15" lands on a
   visible 15; below 1080px a "Contents ↑" link at the right goes back to the list.
   The row is a sibling before the h2 (the h2 carries only the live head); anchors
   land with the row clear of the top edge. */
.legal__body { max-width: 55ch; font-size: var(--sc-t-base); line-height: 1.7; }
.legal__body h2 { text-wrap: balance; scroll-margin-top: 5rem; }
.legal__sechead {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4);
  margin: var(--sc-7) 0 var(--sc-2); padding-bottom: 0.95em; border-bottom: 1px solid var(--sc-hairline-strong);
}
.legal__sechead + h2 { margin-top: 0; }
.legal__body .legal__eyebrow { margin: 0; color: var(--sc-ink-soft); line-height: 1.4; }
/* the back link: label type, a 44px tap row drawn out of padding (negative margins
   keep the rule where it is); desktop has the sticky list instead */
.legal__body .legal__back {
  display: inline-block; line-height: 1.4; padding: 0.95rem 0 0.95rem 1rem; margin: -0.95rem 0 -0.95rem -1rem;
  color: var(--sc-ink-soft); text-decoration: none; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .legal__body .legal__back:hover { color: var(--sc-ink); } }
@media (min-width: 1080px) { .legal__body .legal__back { display: none; } }
/* phones: the heads a step down (the /terms-and-conditions phone size), so the
   longest ("Your Consent to the Collection, Use, and Disclosure …") takes 3 lines,
   not 4 */
@media (max-width: 640px) { .legal__body h2 { font-size: 1.4rem; line-height: 1.26; } }
.legal__body a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.legal__body li::marker { color: var(--sc-ink-soft); }
.legal__terms strong { font-weight: 600; }
/* the all-caps consent paragraph: a ruled note (the same left rule as the Privacy
   Officer's address, the page's one "set apart" mark), a size down so the caps
   don't shout; no rules above/below, which doubled the next section's rule */
.legal__caps { font-size: var(--sc-t-sm); line-height: 1.75; letter-spacing: 0.02em; padding-inline-start: var(--sc-5); border-inline-start: 2px solid var(--sc-hairline-strong); }
/* the Privacy Officer's address, as the live page sets it: one line each */
.legal__address { font-style: normal; display: grid; gap: 0.1em; padding-inline-start: var(--sc-5); border-inline-start: 2px solid var(--sc-hairline-strong); }
.legal__address a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 3 · The footer: on the forest ground it is drawn for (cream wordmark), as on every
   other page, instead of inside the cream text section. */
.legal-foot { padding-block: var(--sc-8) var(--sc-7); }
.legal-foot .foot { margin-top: 0; padding-top: 0; border-top: 0; }

/* 4 · Phones and tablets (< 1080px): the reading-position bar (the
   /terms-and-conditions pattern, ported here). Below 1080 the contents list is a
   disclosure at the top, and 20+ screens down on a phone nothing said which of the
   fifteen sections you were in or took you back to the list (desktop's sticky list
   does both; the per-section "Contents ↑" link only helps at a section's own top).
   A small bar at the bottom right shows where you are, in two rows: "SECTION 4 OF
   15" in label caps (the same words as the label on the rule above the head), then
   the section's Contents title in the text face; beside it, a square olive
   "Contents" button like the chapter bar's "Book". The whole bar is one link to
   the list, which the page script opens. Hidden over the footer. */
.legal__where { display: none; }
@media (max-width: 1079px) {
  .legal__where {
    display: block; position: fixed; z-index: var(--sc-z-chrome);
    /* Sept 23: docked full width, on a solid ground with a hairline above, not a
       translucent card floating over the text. Floating, the lines scrolling under
       it showed on all four sides of it and read as copy cut through; docked, the
       text simply runs under the chrome edge, as it does under the masthead. */
    left: 0; right: 0; bottom: 0;
    padding: var(--sc-2) var(--sc-gutter) calc(var(--sc-2) + env(safe-area-inset-bottom, 0px));
    background: var(--cream); box-shadow: 0 -1px 0 var(--sc-hairline-strong);
    visibility: hidden; opacity: 0; transform: translateY(100%);
    transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
  }
  .legal__where.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .legal__where { transform: none; } }
@media print { .legal__where { display: none !important; } }
/* the docked bar is ~64px: focus and in-page jumps stop above it, not under it */
@media (max-width: 1079px) { html { scroll-padding-bottom: 5rem; } }
.legal__where-a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); min-height: 48px; padding: 0;
  color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-text);
}
.legal__where-a:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.legal__where-at { display: grid; gap: 0.15rem; min-width: 0; }
.legal__where-c { color: var(--sc-ink-soft); line-height: 1.2; white-space: nowrap; }
.legal__where-t { min-width: 0; font-size: var(--sc-t-sm); font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* before section 1 (the preamble) there is no section to show: just the button */
.legal__where:not(.is-sec) .legal__where-at { display: none; }
.legal__where:not(.is-sec) .legal__where-a { justify-content: flex-end; }
.legal__where-go {
  flex: none; display: inline-flex; align-items: center; gap: 0.55em; align-self: stretch; padding: 0 0.85em;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase;
}
/* an up-chevron: the list is above you */
.legal__where-go::after {
  content: ''; width: 0.45em; height: 0.45em; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: translateY(0.15em) rotate(45deg);
}
@media (hover: hover) and (pointer: fine) { .legal__where-a:hover .legal__where-go { background: color-mix(in oklab, var(--sc-accent) 84%, var(--sc-ink)); } }