/* The Privacy Policy and Terms of Use pages (/privacy-policy/, /terms/). Loaded after the site stylesheet, on these
   two pages only. scripts/build-legal.mjs publishes it as /assets/legal.<hash>.css. Sizes are declared for the
   site's body zoom (0.75 from 1100px wide): 21px declared renders at about 15.75px there. */

/* ── Header ─────────────────────────────────────────────────────────────────────────────────── */
.legal-head .wrap { padding-bottom: 40px; }
.legal-head h1 { max-width: none; }
/* Counsel's "PHINEAS" above "Terms of Use": part of the title, set apart from the crumbs above it. */
.legal-head .kicker {
  display: block; margin: 1.75em 0 .4em;
  font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .2em; color: var(--navy);
}
.legal-date {
  margin: .8em 0 0; font-family: var(--body); font-weight: 600; color: var(--navy); font-size: 17px; line-height: 1.4;
}
.legal-alt { margin: .9em 0 0; font-size: .94em; color: #46547a; }
@media (min-width: 1100px) {
  .legal-head .crumbs { font-size: 15px; }
  .legal-head .kicker { font-size: 15px; }
  .legal-head .legal-date { font-size: 21px; }
  .legal-alt { font-size: 19px; }
}

/* ── Layout: contents column and the text ───────────────────────────────────────────────────── */
.legal-wrap {
  width: min(100% - 40px, var(--wrap)); margin: 0 auto; padding: 8px 0 96px;
  font-size: 17px; line-height: 1.6; color: var(--ink);
}
@media (min-width: 1100px) {
  .legal-wrap {
    font-size: 21px;
    display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 72px; align-items: start;
  }
}

/* Contents: a collapsed list on a phone, a sticky column on a wide screen. */
.toc-wrap { margin: 0 0 1.5em; }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none;
  font-family: var(--mono); font-weight: 500; font-size: .6875em; letter-spacing: .2em; text-transform: uppercase; color: #46547a;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: ""; width: 8px; height: 8px; margin-right: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.toc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc ol ol { padding-left: .9em; }
.toc a {
  display: block; padding: .65em 0 .65em .9em; border-left: 2px solid var(--line);
  font-family: var(--body); font-weight: 500; font-size: .94em; line-height: 1.35; color: var(--navy); text-decoration: none;
  transition: border-color .18s, color .18s;
}
.toc ol ol a { font-size: .9em; }
.toc a[aria-current="location"] { font-weight: 600; border-left-color: #E9A93D; }
@media (hover: hover) { .toc a:hover { border-left-color: var(--navy); } }
.toc a:active { border-left-color: var(--navy); }
/* Every entry is a full 44px target on a phone. */
@media (max-width: 1099px) {
  .toc a { display: flex; align-items: center; min-height: 44px; padding-block: .5em; }
}
@media (min-width: 1100px) {
  .toc-wrap {
    position: sticky; top: 104px; margin: 0;
    max-height: calc((100svh - 128px) * 1.3333); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .toc summary { cursor: default; border-top: 0; min-height: 0; padding-bottom: .9em; font-size: 15px; }
  .toc summary::after { display: none; }
  .toc a { font-size: .8125em; padding: .45em 0 .45em .9em; }
  .toc ol ol a { font-size: .8125em; }
  .toc ol ol { padding-left: .9em; }
}

/* The floating "Contents" button on a phone, once the list has scrolled away. */
.toc-pill {
  position: fixed; right: 16px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 50;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: var(--paper); font-family: var(--body); font-weight: 600; font-size: .875rem;
  box-shadow: 0 10px 26px -12px rgba(14, 27, 62, .7);
  transition: transform .1s cubic-bezier(.22, 1, .36, 1);
}
.toc-pill:active { transform: scale(.97); }
.toc-pill[hidden] { display: none; }
@media (min-width: 1100px) { .toc-pill { display: none; } }

/* ── The text ───────────────────────────────────────────────────────────────────────────────── */
.legal { min-width: 0; hyphens: manual; }
.legal p { max-width: 36em; margin: 0 0 1em; text-wrap: pretty; }
.legal strong { font-weight: 700; color: var(--navy); }
.legal em { font-style: italic; }

.legal h2, .legal h3, .legal h4 { color: var(--navy); }
.legal .t-part {
  font-family: var(--disp); font-weight: 500; font-size: 1.875em; line-height: 1.12; letter-spacing: -.018em; max-width: 22em;
  margin: 3.5em 0 .6em; padding-top: 1.1em; border-top: 2px solid var(--navy);
}
.legal .t-section {
  font-family: var(--disp); font-weight: 500; font-size: 1.375em; line-height: 1.22; letter-spacing: -.015em; max-width: 26em;
  text-wrap: balance; margin: 2.5em 0 .7em; padding-top: 1.3em; border-top: 1px solid var(--line);
}
.legal .t-part + .legal-date { margin: -.2em 0 1.4em; font-size: 1em; }
.legal .t-part + .legal-date + .t-section, .legal .t-part + .t-section { margin-top: 1.4em; border-top: 0; padding-top: 0; }
.legal .t-sub {
  font-family: var(--body); font-weight: 700; font-size: 1.0625em; line-height: 1.35; letter-spacing: 0; color: var(--navy);
  margin: 1.9em 0 .5em;
}
.legal .t-section + .t-sub { margin-top: .9em; }

/* Lists: the site's gold dash. */
.legal ul { list-style: none; max-width: 36em; margin: .25em 0 1.1em; padding: 0; }
.legal li { position: relative; padding-left: 1.35em; }
.legal li + li { margin-top: .5em; }
.legal li::before { content: ""; position: absolute; left: 0; top: .76em; width: 7px; height: 2px; background: #E9A93D; }
.legal li ul { margin: .5em 0 0; }
.legal li li::before { width: 5px; background: #5A678C; }

/* Notices: the all-caps paragraphs and the health notice, between two navy rules. Counsel's capitals and bold already
   make them conspicuous; borders survive print and forced colours, where a tinted panel would not. */
.legal-notice {
  border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); padding: 1.1em 0; margin: 1.8em 0; max-width: 36em;
}
.legal-notice > :last-child { margin-bottom: 0; }
.legal-notice p.caps {
  font-weight: 500; font-size: .9375em; letter-spacing: .025em; line-height: 1.7; max-width: 34em;
}
.legal .legal-notice .notice-title {
  font-family: var(--body); font-weight: 700; font-size: .875em; letter-spacing: .06em; line-height: 1.45;
  margin: 0 0 .7em; padding: 0; border: 0; max-width: none;
}
.legal h2.t-section + .legal-notice { margin-top: 1.6em; }
.legal .legal-notice + .t-section { border-top: 0; padding-top: 0; margin-top: 2em; }

/* Definitions. */
.legal .defs { max-width: 48em; margin: .6em 0 1.6em; }
.legal .defs > div { padding: .9em 0; border-bottom: 1px solid var(--line); }
.legal .defs > div:first-child { border-top: 1px solid var(--line); }
.legal .defs dt { font-weight: 700; color: var(--navy); margin-bottom: .2em; }
.legal .defs dd { margin: 0; }
@media (min-width: 760px) {
  .legal .defs > div { display: grid; grid-template-columns: 11em 1fr; gap: 0 1.75em; }
  .legal .defs dt { margin: 0; }
}

.legal address { font-style: normal; margin: 1em 0 1.4em; line-height: 1.6; }

/* ── Tables ─────────────────────────────────────────────────────────────────────────────────── */
.legal-table { margin: 1.2em 0 2.2em; }
.legal-table table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; font-size: .8125em; line-height: 1.5; }
.legal-table thead th {
  font-weight: 700; color: var(--navy); padding: 0 1em .7em 0; border-bottom: 2px solid var(--navy);
}
.legal-table tbody th, .legal-table tbody td { padding: .85em 1em .85em 0; border-bottom: 1px solid var(--line); }
.legal-table tbody th { font-weight: 600; color: var(--navy); }
/* On a wide screen the charts read at a size close to the text's; the row names step down so counsel's own bold
   inside them still shows. */
@media (min-width: 760px) {
  .legal-table th, .legal-table td { font-size: .875em; }
  .legal-table tbody th { font-weight: 500; }
}
.legal-table p { max-width: none; margin: 0 0 .5em; }
.legal-table p:last-child { margin-bottom: 0; }
.legal-table .cell-label { display: none; }
.legal-table .cols-4 th:nth-child(1), .legal-table .cols-4 td:nth-child(1) { width: 22%; }
.legal-table .cols-4 th:nth-child(2), .legal-table .cols-4 td:nth-child(2) { width: 38%; }
.legal-table .cols-4 th:nth-child(3), .legal-table .cols-4 td:nth-child(3) { width: 12%; }
.legal-table .cols-4 th:nth-child(4), .legal-table .cols-4 td:nth-child(4) { width: 28%; }
/* The disclosure-recipients chart has short middle columns and a long last one. */
.legal-table [aria-labelledby$="purposes-chart"] th:nth-child(1), .legal-table [aria-labelledby$="purposes-chart"] td:nth-child(1) { width: 24%; }
.legal-table [aria-labelledby$="purposes-chart"] th:nth-child(2), .legal-table [aria-labelledby$="purposes-chart"] td:nth-child(2) { width: 22%; }
.legal-table [aria-labelledby$="purposes-chart"] th:nth-child(3), .legal-table [aria-labelledby$="purposes-chart"] td:nth-child(3) { width: 16%; }
.legal-table [aria-labelledby$="purposes-chart"] th:nth-child(4), .legal-table [aria-labelledby$="purposes-chart"] td:nth-child(4) { width: 38%; }
.legal-table .cols-3 th:nth-child(1), .legal-table .cols-3 td:nth-child(1) { width: 52%; }
.legal-table .cols-3 th:nth-child(2), .legal-table .cols-3 td:nth-child(2) { width: 18%; }
.legal-table .cols-3 th:nth-child(3), .legal-table .cols-3 td:nth-child(3) { width: 30%; }

/* On a phone each row stacks, every value under its column's name. Screen only: a printed page is narrow too,
   and on paper the real table is the better reading. */
@media screen and (max-width: 759px) {
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto !important; }
  .legal-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .legal-table tbody tr { padding: 1.1em 0; border-bottom: 1px solid var(--line); }
  .legal-table tbody tr:first-child { border-top: 2px solid var(--navy); }
  .legal-table tbody th, .legal-table tbody td { padding: 0; border: 0; }
  .legal-table tbody th { font-size: 1.0625em; font-weight: 700; line-height: 1.35; }
  .legal-table tbody td { margin-top: .75em; font-size: .9375em; }
  .legal-table td:empty { display: none; }
  .legal-table .cell-label {
    display: block; margin-bottom: .2em;
    font-family: var(--mono); font-weight: 500; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #46547a;
  }
}

/* ── Links and focus ────────────────────────────────────────────────────────────────────────── */
.legal a, .legal-alt a {
  color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: rgba(14, 27, 62, .45);
}
.legal a:hover, .legal-alt a:hover { text-decoration-thickness: 2px; text-decoration-color: #E9A93D; }
.legal a[href^="mailto:"], .legal a[href^="http"] { overflow-wrap: anywhere; }
/* A heading reached from a link lands a little below the nav rather than against it. */
.legal [id] { scroll-margin-top: .75em; }
.legal a:focus-visible, .legal-alt a:focus-visible, .toc a:focus-visible, .toc summary:focus-visible, .toc-pill:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 3px;
}
.toc-pill:focus-visible { outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .toc a, .toc-pill { transition: none; }
}

/* ── Print ──────────────────────────────────────────────────────────────────────────────────── */
@media print {
  @page { margin: 18mm 16mm; }
  body { zoom: 1 !important; background: #fff !important; color: #000; print-color-adjust: economy; -webkit-print-color-adjust: economy; }
  .nav, footer, .glow, .toc-wrap, .toc-pill, .legal-alt, .crumbs, .cell-label { display: none !important; }
  .pagehead { padding: 0 !important; }
  .legal-head .wrap, .legal-wrap { width: auto !important; padding: 0 !important; display: block !important; }
  .legal-head h1 { font-size: 22pt !important; }
  .legal-head .kicker { font-size: 8pt; }
  .legal-date { font-size: 11pt !important; }
  .legal-wrap { font-size: 10.5pt !important; line-height: 1.45; }
  .legal p, .legal ul, .legal-notice, .legal .defs { max-width: none; }
  .legal .t-part { font-size: 16pt; margin-top: 0; }
  .legal .t-section { font-size: 13.5pt; margin-top: 1.6em; }
  .legal .t-sub { font-size: 11pt; }
  .legal h2, .legal h3, .legal h4 { break-after: avoid; }
  .legal tr, .legal-notice, .legal .defs > div, .legal address { break-inside: avoid; }
  .legal p { orphans: 3; widows: 3; }
  #california, #accessibility, #copyright { break-before: page; }
  .legal-table thead { display: table-header-group; }
  .legal-table th, .legal-table td { font-size: 9pt; }
  .legal a { color: inherit; text-decoration: underline; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; }
  .legal a[href^="/"]::after { content: " (phineaschat.com" attr(href) ")"; }
  .legal a[data-bare]::after { content: none; }
  .legal-notice { border-color: #000; padding: 8pt 0; max-width: none; }
  .legal-head { margin-bottom: 16pt; }
  .legal .legal-notice p.caps, .legal .t-section, .legal .t-part { max-width: none; }
  /* Paper drops backgrounds, so the list dash is a border there. */
  .legal li::before, .legal li li::before { background: none; height: 0; border-top: 1.2pt solid currentColor; }
  .rv { opacity: 1 !important; transform: none !important; }
}