/* Venus — the legal documents (Terms of Service, Privacy Policy). Loaded after site.css; tokens only.
   The same modern sans as the rest of the site: a title block over a graduated rule, then the margin
   column holds a sticky "On this page" index with mono numerals, while the main column carries numbered
   clauses: display-weight titles over text at 17px (18px from 900px) / 1.6 on a measure of about 67
   characters. Nothing is italic: defined terms, run-in heads and dates take weight and ink instead.
   On phones the index folds into a bar that sticks to the top of the screen and opens as a list. */

/* position: sticky needs the page not to be a scroll container; clip paints exactly like hidden. */
.page { overflow: clip; }

:root { --toc-bar: 52px; }  /* the folded index bar on phones; anchors and focus land just under it */
.doc {
  --hang: 0px;          /* the hanging numeral column of each clause, from 900px */
  --text: 30em;         /* the reading measure: the text face averages .45em a character, so ~67 a line */
  --clause: clamp(28px, 3.4vw, 44px);
  --h2: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
}

/* ------------------------------------------------------------------ title block */
.doc__head {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap); align-items: baseline;
  padding: clamp(32px, 5vw, 64px) 0 clamp(34px, 4.4vw, 56px);
  border-bottom: 1px solid var(--rule-strong);
}
.doc__kicker { display: flex; align-items: baseline; gap: 12px; }
.doc__kicker .num { font-size: 1rem; line-height: 1; }
.doc__head h1 {
  margin-top: 14px;
  font-size: clamp(2.6rem, 1rem + 4.8vw, 5.25rem);
  line-height: .96; letter-spacing: var(--track-display);
  text-wrap: balance;
}
/* The effective-date stamp: the date is the line you look for, the coverage sentence reads as a lede */
.stamp {
  margin-top: clamp(20px, 2.4vw, 30px); max-width: 50ch;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem); line-height: 1.5;
  color: var(--ink-2); text-wrap: pretty;
}
.stamp__when { display: block; margin-bottom: 10px; color: var(--ink); line-height: 1.3; }
.stamp__when .dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 12px; vertical-align: .2em;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--glow);
  animation: breathe 4s ease-in-out infinite;
}
.stamp__when .label { color: var(--accent); margin-right: 4px; }
.stamp__when time { font-family: var(--font-mono); font-size: .94em; letter-spacing: -.01em; white-space: nowrap; }
.stamp code { font-size: .86em; color: var(--ink); overflow-wrap: anywhere; }
.doc__head .scale { left: auto; width: min(100%, 432px); }

/* ------------------------------------------------------------------ the index (On this page) */
.toc { min-width: 0; }
.toc__bar { list-style: none; }
.toc__bar::-webkit-details-marker { display: none; }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list a {
  display: flex; align-items: baseline; gap: 12px;
  color: var(--ink-2); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.toc__list .num { flex: none; min-width: 2ch; font-size: .75rem; line-height: 1; }
.toc__list a:hover { color: var(--ink); }
.toc__list a[aria-current="true"] { color: var(--ink); }

/* ------------------------------------------------------------------ clauses */
.doc__text { min-width: 0; font-size: 1.0625rem; line-height: 1.6; }
.doc__text section { padding-top: var(--clause); }
.doc__text section + section { margin-top: var(--clause); border-top: 1px solid var(--rule); }
.doc__text h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: var(--h2);
  line-height: 1.05; letter-spacing: -.022em;
}
.doc__text h2 > span:last-child { text-wrap: balance; }
.doc__text h2 .num { flex: none; min-width: 2ch; font-size: .875rem; line-height: 1; letter-spacing: 0; }
.doc__text p { max-width: var(--text); }
.doc__text p, .doc__text li { color: var(--ink-2); text-wrap: pretty; }
.doc__text h2 + * { margin-top: 18px; }
.doc__text p + p, .doc__text p + ul, .doc__text ul + p { margin-top: 1em; }
.doc__text a { color: var(--ink); }
.doc__text a[href^="mailto:"] { font-family: var(--font-mono); font-size: .9em; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* Dates and product names ("Tempo 1", "25 March 2027") never split across a line */
.doc__text time, .nb, .name, cite { white-space: nowrap; }

/* Lists are hairline-ruled clauses with an accent tick, like the marks on the horizon scale. As on the
   home page's steps, the rules run the width of the column while the words keep to the measure. */
.ruled { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.ruled li { position: relative; padding: 11px max(0px, 100% - var(--text)) 11px 28px; border-top: 1px solid var(--rule); }
.ruled li::before {
  content: ""; position: absolute; left: 2px; top: calc(11px + .8em);
  width: 12px; height: 1px; background: var(--accent);
}

/* Defined terms, run-in heads, product names and dates stand out by weight and ink, never by slant.
   Browsers set dfn and cite in italic, which the type system does not use. */
dfn, cite { font-style: normal; }
dfn, .term, .name { font-weight: 600; color: var(--ink); }
cite, .doc__text time { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.doc__text code { font-size: .875em; color: var(--ink); background: var(--bg-2); padding: 1px 4px; border-radius: 4px; }

/* ------------------------------------------------------------------ phones and tablets: a sticky bar */
@media (max-width: 899px) {
  html { scroll-padding-top: calc(var(--toc-bar) - 1px); }
  .toc { position: sticky; top: 0; z-index: 20; }
  .toc__fold { position: relative; }
  .toc__bar {
    position: relative; z-index: 0;
    display: flex; align-items: center; gap: 14px;
    height: var(--toc-bar);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* The bar's paper runs to the screen edges so text never shows beside it once it sticks */
  .toc__bar::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--bg); }
  .toc__bar:focus-visible { outline-offset: -2px; }
  .toc__title { flex: none; }
  .toc__now {
    flex: 1; min-width: 0;
    display: flex; align-items: baseline; gap: 10px;
    white-space: nowrap; overflow: hidden;
    font-size: .9375rem; font-weight: 500; color: var(--ink);
  }
  .toc__now > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .toc__now .num { font-size: .75rem; }
  .toc__now .mono { color: var(--ink-3); font-weight: 400; }
  .toc__chev {
    flex: none; width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    color: var(--ink-2);
    transition: transform var(--t-fast) var(--ease);
  }
  .toc__fold[open] .toc__chev { transform: rotate(180deg); }
  .toc__list {
    position: absolute; top: 100%; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
    padding: 6px var(--gutter) 14px;
    max-height: calc(100dvh - var(--toc-bar) - 24px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg);
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: 0 28px 40px -30px rgba(0, 0, 0, .45);
  }
  .toc__list li + li a { border-top: 1px solid var(--rule); }
  .toc__list a { align-items: center; min-height: 48px; padding: 8px 0; font-size: 1rem; }
  .toc__list a[aria-current="true"] { font-weight: 500; }
  .doc__text section:first-child { padding-top: 28px; }
}

/* ------------------------------------------------------------------ from 900px: two columns */
@media (min-width: 900px) {
  .doc { --hang: 4.25rem; }
  .doc__head { grid-template-columns: var(--col) minmax(0, 1fr); }
  .doc__kicker { grid-column: 1; grid-row: 1; }
  .doc__head h1, .stamp { grid-column: 2; }
  .doc__head h1 { margin-top: 0; }

  .doc__body { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: 0 var(--gap); align-items: start; }
  .toc {
    position: sticky; top: 0;
    max-height: 100vh; max-height: 100dvh; overflow-y: auto; scrollbar-width: thin;
    padding: var(--clause) 6px 32px; margin-inline: -6px;
  }
  /* Open beside the text even before doc.js runs; the summary is only the caption here */
  .toc__fold::details-content { content-visibility: visible; }
  /* The caption shares a baseline with the first clause title beside it: an invisible strut set at the
     title's size and leading puts the baseline exactly where the title's falls. */
  .toc__bar { display: flex; align-items: baseline; padding-bottom: 8px; cursor: default; }
  .toc__bar::after { content: "\200b"; font-family: var(--font-display); font-size: var(--h2); line-height: 1.05; }
  .toc__now, .toc__chev { display: none; }
  .toc__list { border-left: 1px solid var(--rule); }
  .toc__list a { position: relative; padding: 7px 0 7px 18px; font-size: .875rem; line-height: 1.4; }
  .toc__list a::before {
    content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 2px;
    background: transparent; transition: background-color var(--t-fast) var(--ease);
  }
  .toc__list a:hover::before { background: var(--rule-strong); }
  .toc__list a[aria-current="true"]::before { background: var(--accent); }

  .doc__text { font-size: 1.125rem; }
  .doc__text section { padding-left: var(--hang); }
  .doc__text h2 { gap: 0; margin-left: calc(-1 * var(--hang)); }
  .doc__text h2 .num { width: var(--hang); min-width: 0; }
}

/* ------------------------------------------------------------------ print: the text, nothing else */
@media print {
  :root:root:root { --bg: #fff; --bg-2: #f2f2f2; --ink: #000; --ink-2: #1c1c1c; --ink-3: #444; --rule: #bbb; --rule-strong: #555; --accent: #000; --glow: transparent; --glow-foot: transparent; }
  .skip, .mast .nav, .theme, .toc, .foot nav, .doc__head .scale, .stamp__when .dot { display: none !important; }
  .page { overflow: visible; }
  .doc__body { display: block; }
  .doc__text section { padding-left: 0; break-inside: auto; }
  .doc__text h2 { margin-left: 0; gap: 12px; break-after: avoid; }
  .doc__text h2 .num { width: auto; }
  .foot { margin-top: 32px; padding-bottom: 0; }
}