/* ILO FLOW — standalone policy pages (privacy.html, terms.html, contact.html).
   ---------------------------------------------------------------------------
   These three pages are deliberately NOT part of the single-page app.

   The AdSense site review is performed by a crawler that does not run the
   router, and "we could not find a privacy policy" is one of the most common
   rejection reasons there is — including on sites that have one, behind a
   client-side route. So each policy is a real document at a real URL that
   returns real text to anything that asks, with no JavaScript required to read
   a single word of it.

   They load tokens.css for the palette so they cannot drift away from the
   product's look, and then this file instead of the app's twelve stylesheets:
   a legal page has no drag targets, no ledger and no mentor, and pulling in
   5,700 lines of CSS to render prose would be the slowest page on the site. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  /* max(16px, ...) stops iOS Safari zooming the viewport, the same guard the
     app's own polish.css applies to inputs. */
  font-size: max(16px, 1rem);
  line-height: 1.7;
}

.legal-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
}

/* --- masthead ------------------------------------------------------------- */

.legal-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

.legal-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--parchment);
  text-decoration: none;
}
.legal-wordmark img { width: 28px; height: 28px; border-radius: 6px; }
.legal-wordmark b { font-weight: 600; }
.legal-wordmark span { color: var(--entrust); font-weight: 500; }

.legal-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--parchment-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.legal-back:hover, .legal-back:focus-visible {
  color: var(--entrust);
  border-bottom-color: var(--entrust);
}

/* --- document ------------------------------------------------------------- */

.legal-eyebrow {
  margin: var(--sp-7) 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--entrust);
}

h1 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.legal-meta {
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--parchment-dim);
}

.legal-lede {
  font-size: 17.5px;
  color: var(--parchment);
}

h2 {
  margin: var(--sp-7) 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  /* scroll-margin so an in-page anchor does not land the heading flush against
     the top edge of the viewport, cut off by the browser chrome. */
  scroll-margin-top: var(--sp-5);
}

h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--entrust);
}

p, li { color: var(--parchment-dim); }
p { margin: 0 0 var(--sp-4); }

strong { color: var(--parchment); font-weight: 600; }

a { color: var(--entrust); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--entrust);
  outline-offset: 3px;
  border-radius: 2px;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }

/* --- table of contents ---------------------------------------------------- */

.legal-toc {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ledger);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.legal-toc h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.legal-toc ol { margin: 0; padding-left: var(--sp-5); }
.legal-toc li { margin-bottom: var(--sp-1); font-size: 14.5px; }

/* --- callout -------------------------------------------------------------- */
/* Used for the few statements a reader most needs to actually find: what is
   never collected, and how to withdraw ad consent. */

.legal-note {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--ledger);
  border-left: 3px solid var(--entrust);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-note p:last-child { margin-bottom: 0; }

/* --- data table ----------------------------------------------------------- */

.legal-table-wrap { overflow-x: auto; margin: 0 0 var(--sp-5); }
table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
th, td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  border-bottom-color: var(--rule);
}
td { color: var(--parchment-dim); }

/* --- footer --------------------------------------------------------------- */

.legal-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--parchment-dim);
}
.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.legal-footer nav a, .legal-footer nav button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.legal-footer button {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--entrust);
  text-decoration: underline; cursor: pointer;
}

/* --- preferences ---------------------------------------------------------- */

@media (prefers-contrast: more) {
  p, li, td, .legal-meta, .legal-footer { color: var(--parchment); }
}

@media (forced-colors: active) {
  .legal-note { border-left: 3px solid CanvasText; }
  .legal-toc { border: 1px solid CanvasText; }
}

/* A policy is a document people print and keep. */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .legal-top, .legal-footer nav, .legal-back, .legal-toc { display: none; }
  h1, h2, h3, p, li, td, th, strong { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .legal-note { border-left: 2px solid #000; background: none; }
  h2 { page-break-after: avoid; }
}


/* --- skip link -------------------------------------------------------------
   The app styles .skip-link in css/polish.css, which these pages do not load —
   polish.css is the cascade's final layer for the product's twelve stylesheets
   and pulling it in here would drag the rest with it. So the rule is repeated,
   deliberately and only here. If the app's version changes, this one does not
   have to: the two pages have different neighbours and the shared contract is
   only "off screen until focused".

   That contract is the point. A keyboard user landing on the privacy policy
   otherwise tabs through a masthead and a thirteen-item table of contents before
   reaching the first paragraph. */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--entrust);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .18s var(--ease);
}
.skip-link:focus {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}