/* ============================================================
   AG policy pages layout v1 (2026-10-26) - Fit Camp LA's policy pages, made brand-neutral.
   Quinten: "I love fitcamp la's website policy pages, we need to do that for all clients - just branding will be swapped out".
   Theme it by setting the --pol-* tokens on .pol in the site's own stylesheet (see README.md). No glows: light-themed
   sites stay flat; a dark site may add its own.
   Layout: wide screens = a sticky "On this page" panel on the left (the sections, their parts nested, then the other
   policies as pills) with a line that fills as you read and a dot per section (policy.js); phones = the same list in a
   box at the top that opens and closes. Tables stack into labelled rows on phones. Body text 18px+, links underlined.
   ============================================================ */
.pol {
  --pol-bg: #ffffff;
  --pol-ink: #111111;                  /* body text */
  --pol-soft: rgba(17, 17, 17, .74);   /* meta, labels, sub links */
  --pol-line: rgba(17, 17, 17, .14);   /* borders, the empty track */
  --pol-panel: rgba(17, 17, 17, .035); /* the contents box and the short-version card */
  --pol-accent: #111111;               /* the reading line, dots, top edges, list markers */
  --pol-current: var(--pol-ink);       /* the section you're reading, in the contents */
  --pol-link: var(--pol-ink);          /* links in the text (always underlined) */
  --pol-underline: var(--pol-accent);
  --pol-pill-on-bg: var(--pol-ink);    /* the policy you're on, in "All policies" */
  --pol-pill-on-ink: var(--pol-bg);
  --pol-display: Georgia, serif;       /* headings */
  --pol-body: system-ui, sans-serif;
  --pol-display-case: none;            /* uppercase for sites whose titles are all caps */
  --pol-head: 110px;                   /* the site header's height: sticky offset and anchor landing */
  --pol-radius: 12px;
  --pol-max: 1400px;
  --pol-gutter: clamp(16px, 4vw, 84px);
  background: var(--pol-bg);
  color: var(--pol-ink);
}
.pol__inner {
  max-width: var(--pol-max); margin-inline: auto;
  padding: clamp(56px, 3rem + 3vw, 112px) var(--pol-gutter);
  display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 8fr); column-gap: clamp(35px, 1rem + 4vw, 84px); align-items: start;
}
.pol__body { min-width: 0; max-width: 760px; }
.pol, .pol * { hyphens: manual; -webkit-hyphens: manual; }

/* ---------- the contents panel ---------- */
.pol__toc { position: sticky; top: calc(var(--pol-head) + 14px); }
.pol__toc-box { position: relative; padding: 28px 24px 24px; border: 1px solid var(--pol-line); border-radius: var(--pol-radius); background: var(--pol-panel); }
.pol__toc-box::before { content: ""; position: absolute; top: -1px; left: 21px; right: 21px; height: 2px; border-radius: 2px; background: var(--pol-accent); }
.pol__toc-box summary { list-style: none; cursor: default; margin: 0 0 10px; font-family: var(--pol-display); font-size: 1.25rem; line-height: 1.2;
  text-transform: var(--pol-display-case); color: var(--pol-ink); }
.pol__toc-box summary::-webkit-details-marker { display: none; }
.pol__list, .pol__sub { list-style: none; margin: 0; padding: 0; }
.pol__toc a { display: block; text-decoration: none; font-family: var(--pol-body); text-wrap: balance; transition: color 200ms ease; }
.pol__toc a:focus-visible { outline: 2px solid var(--pol-accent); outline-offset: 2px; border-radius: 2px; }

/* the reading line: a faint track from the first dot to the last, filled to where you are (--f0, --len, --fill from policy.js) */
.pol__list { position: relative; }
.pol__list::before, .pol__list::after { content: ""; position: absolute; left: 5px; top: var(--f0, 10px); width: 2px; border-radius: 1px; }
.pol__list::before { height: var(--len, 0px); background: var(--pol-line); }
.pol__list::after { height: var(--fill, 0px); background: var(--pol-accent); }
.pol__list a { position: relative; z-index: 1; padding: 7px 0 7px 26px; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--pol-soft); }
.pol__list a::before { content: ""; position: absolute; left: 1px; top: calc(7px + .675em - 5px); width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
  background: var(--pol-bg); border: 2px solid var(--pol-line); transition: background-color 250ms ease, border-color 250ms ease; }
.pol__sub a { padding: 5px 0 5px 40px; font-weight: 500; font-size: .9375rem; }
.pol__sub a::before { left: 3px; width: 6px; height: 6px; top: calc(5px + .675em - 3px); border-width: 1.5px; }
.pol__list a.is-passed::before { background: var(--pol-accent); border-color: var(--pol-accent); }
.pol__list a[aria-current="true"] { color: var(--pol-current); font-weight: 700; }
.pol__list a[aria-current="true"]::before { background: var(--pol-accent); border-color: var(--pol-accent); box-shadow: 0 0 0 3px var(--pol-bg), 0 0 0 4px var(--pol-accent); }
@media (hover: hover) { .pol__list a:hover { color: var(--pol-current); } }

/* "All policies": pills, the one you're on filled */
.pol__toc-label { margin: 24px 0 10px; font-family: var(--pol-display); font-size: 1rem; text-transform: var(--pol-display-case); color: var(--pol-soft); }
.pol__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pol__pages a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--pol-line); border-radius: 999px;
  font-weight: 600; font-size: .9375rem; color: var(--pol-ink); transition: border-color 250ms ease, background-color 250ms ease; }
@media (hover: hover) { .pol__pages a:hover { border-color: var(--pol-accent); } }
.pol__pages a[aria-current="page"] { background: var(--pol-pill-on-bg); border-color: var(--pol-pill-on-bg); color: var(--pol-pill-on-ink); }

/* wide screens: the panel scrolls inside itself (policy.js keeps the line's tip in the middle) with a slim rail */
.pol__scroll { position: relative; }
@media (min-width: 901px) {
  .pol__scroll { max-height: calc(100vh - var(--pol-head) - 150px); overflow-y: auto; overscroll-behavior: contain; padding-right: 21px; margin-right: -8px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
  .pol__scroll::-webkit-scrollbar { width: 0; height: 0; }
  .pol__scroll > .pol__list { padding-top: 12px; }
  .pol__scroll > :last-child { padding-bottom: 12px; }
}
.pol__rail { position: absolute; right: 8px; width: 14px; display: none; cursor: pointer; }
.pol__rail.is-on { display: block; }
.pol__rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 7px; background: var(--pol-line); }
.pol__thumb { position: absolute; top: 0; left: 50%; width: 7px; margin-left: -3.5px; border-radius: 7px; cursor: grab; touch-action: none; background: var(--pol-accent);
  transition: width 300ms cubic-bezier(.22, 1, .36, 1), margin 300ms cubic-bezier(.22, 1, .36, 1); }
.pol__rail:hover .pol__thumb, .pol__rail.is-drag .pol__thumb { width: 11px; margin-left: -5.5px; }
.pol__rail.is-drag .pol__thumb { cursor: grabbing; }

/* ---------- the document ---------- */
.pol__meta { margin: 0 0 21px; font-family: var(--pol-body); font-size: 1rem; line-height: 1.6; color: var(--pol-soft); }
.pol__doc h2 { margin: 56px 0 14px; scroll-margin-top: calc(var(--pol-head) + 21px); font-family: var(--pol-display); font-weight: 600;
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem); line-height: 1.1; text-transform: var(--pol-display-case); color: var(--pol-ink); }
.pol__doc > .pol__meta + h2, .pol__doc > .pol__meta + p + h2, .pol__doc > .pol__meta + .pol__short { margin-top: 35px; }
.pol__doc h3 { margin: 35px 0 10px; scroll-margin-top: calc(var(--pol-head) + 21px); font-family: var(--pol-body); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--pol-ink); }
.pol__doc p, .pol__doc li, .pol__doc td, .pol__doc th { font-family: var(--pol-body); font-weight: 400; font-size: max(18px, 1.125rem); line-height: 1.65; color: var(--pol-ink); text-wrap: pretty; }
.pol__doc p { margin: 0 0 14px; max-width: 68ch; }
.pol__doc strong { font-weight: 700; }
.pol__doc ul, .pol__doc ol { margin: 0 0 14px; padding-left: 1.3em; display: grid; gap: 8px; max-width: 68ch; }
.pol__doc ul ul { margin: 8px 0 4px; gap: 4px; }
.pol__doc li::marker { color: var(--pol-accent); }
.pol__doc a, .pol__reveal { color: var(--pol-link); text-decoration: underline; text-decoration-color: var(--pol-underline); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .pol__doc a:hover, .pol__reveal:hover { text-decoration-thickness: 2px; } }
.pol__doc a:focus-visible, .pol__reveal:focus-visible { outline: 2px solid var(--pol-accent); outline-offset: 3px; border-radius: 2px; }
.pol__reveal { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }   /* tap-to-show email / phone buttons that read as links */
.pol__out { display: block; }
.pol__out:empty { display: none; }
.pol__top { margin: 21px 0 0 !important; }
.pol__top a { font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--pol-soft); }
.pol__top a::before { content: "\2191\00a0"; }
@media (hover: hover) { .pol__top a:hover { color: var(--pol-ink); text-decoration: underline; } }

/* the short version: a card with the accent along its top */
.pol__short { margin: 28px 0 0; padding: 28px; border: 1px solid var(--pol-line); border-radius: var(--pol-radius); background: var(--pol-panel); box-shadow: inset 0 2px 0 var(--pol-accent); }
.pol__short h2 { margin-top: 0; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); }
.pol__short ul { margin-bottom: 0; }

/* tables */
.pol__table { width: 100%; margin: 7px 0 21px; border-collapse: collapse; }
.pol__table th, .pol__table td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pol-line); overflow-wrap: normal; word-break: normal; }
.pol__table thead th { padding-bottom: 10px; font-family: var(--pol-display); font-weight: 600; font-size: 1rem; text-transform: var(--pol-display-case); color: var(--pol-soft); border-bottom-color: var(--pol-accent); text-wrap: balance; }
.pol__table tbody th { font-weight: 700; width: 30%; }

/* ---------- phones and narrow tablets ---------- */
@media (max-width: 900px) {
  .pol__inner { grid-template-columns: minmax(0, 1fr); row-gap: 42px; }
  .pol__toc { position: static; }
  .pol__toc-box { padding: 0; }
  .pol__toc-box summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; margin: 0; padding: 0 20px; cursor: pointer; }
  .pol__toc-box summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--pol-ink); border-bottom: 2px solid var(--pol-ink);
    transform: translateY(-3px) rotate(45deg); transition: transform 250ms ease; }
  .pol__toc-box[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .pol__toc-box .pol__list { margin: 0 20px; padding: 0 0 6px; }
  .pol__list a { padding-block: 9px; }
  .pol__toc-label, .pol__pages { margin-inline: 20px; }
  .pol__pages { padding-bottom: 20px; }
  .pol__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pol__table, .pol__table tbody, .pol__table tr, .pol__table th, .pol__table td { display: block; width: 100%; }
  .pol__table tr { padding: 14px 0; border-bottom: 1px solid var(--pol-line); }
  .pol__table th, .pol__table td { padding: 2px 0; border: 0; }
  .pol__table td::before { content: attr(data-label) ": "; display: block; font-size: .9375rem; font-weight: 600; color: var(--pol-soft); }
  .pol__short { padding: 21px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pol__toc a, .pol__list a::before, .pol__pages a, .pol__thumb, .pol__toc-box summary::after { transition: none; }
}