/* ============================================================
   JIIVE — TERMS OF SERVICE (v3 · gold period)
   The companion to the Privacy Policy: a statement opening, then
   an editorial split with a sticky section index on columns 1–3
   and the terms on 5–12, each section with a hanging serif number.
   §3's key sentence is set as a serif pull beside a vital-green
   rule; bracketed placeholders are marked as blank fields so they
   read as unfinished. Header, footer, buttons and the rail come
   from css/home.css so they match the homepage exactly; the grid
   and type roles come from css/page.css. Every value is a token
   from css/tokens.css.
   ============================================================ */

main:focus { outline: none; }

/* ---------- Opening (statement) ---------- */
.tm-intro { padding-top: calc(var(--size-header) + var(--space-section-tight)); }
.tm-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: var(--space-lg);
}
.tm-title {
  grid-column: 1 / span 9;
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
  max-width: var(--measure-head);
}
/* one ink rule runs under the title across both columns, with a tick at each column start */
.tm-meta, .tm-opening {
  position: relative;
  margin-top: var(--space-block);
  padding-top: var(--space-md);
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
}
.tm-meta::before, .tm-opening::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size-hairline);
  height: var(--size-ledger-tick);
  background: var(--color-emerald-ink);
}
.tm-meta {
  grid-column: 1 / span 4;
  margin-right: calc(-1 * var(--grid-gutter));
}
.tm-opening { grid-column: 5 / -1; }
.tm-date { margin: 0; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.tm-date time { white-space: nowrap; }
.tm-draft {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-emerald-deep);
}
.tm-draft strong { font-weight: var(--weight-strong); color: var(--color-emerald-ink); }

/* ---------- Body: index beside the terms ---------- */
.tm-body { padding: var(--space-block) 0 var(--space-section); }

.tm-toc {
  grid-column: 1 / span 3;
  align-self: start;
  position: sticky;
  top: calc(var(--size-header) + var(--space-xl));   /* below the fixed header */
  max-height: calc(100vh - var(--size-header) - 2 * var(--space-xl));
  max-height: calc(100svh - var(--size-header) - 2 * var(--space-xl));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--space-xs);
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  background: linear-gradient(var(--color-emerald-ink), var(--color-emerald-ink)) no-repeat 0 0 / var(--size-hairline) var(--size-ledger-tick);
}
.tm-toc ol { list-style: none; margin: 0; padding: 0; }
.tm-toc a {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-height: var(--size-tap);
  padding: var(--space-sm) 0;
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--color-emerald-deep);
  text-decoration: none;
  text-wrap: pretty;
  transition: color var(--dur-120) var(--ease-out);
}
.tm-toc-n {
  flex: none;
  min-width: var(--space-lg);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  transition: color var(--dur-120) var(--ease-out);
}
.tm-toc a[aria-current="true"], .tm-toc a[aria-current="true"] .tm-toc-n { color: var(--color-vital-green); }

.tm-doc {
  grid-column: 5 / -1;
  position: relative;
  border-top: var(--size-hairline) solid var(--color-emerald-ink);
  border-bottom: var(--size-hairline) solid var(--color-emerald-ink);
}
.tm-doc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size-hairline);
  height: var(--size-ledger-tick);
  background: var(--color-emerald-ink);
}

/* ---------- A section of the terms: hanging number, then the content ---------- */
.tm-sec {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding: var(--space-xl) 0 var(--space-2xl);
  scroll-margin-top: var(--space-lg);
}
.tm-sec + .tm-sec { border-top: var(--size-hairline) solid var(--color-border); }
.tm-sec h2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  font-size: var(--text-title);
  line-height: var(--leading-head);
}
.tm-n {
  grid-column: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-vital-green);
}
.tm-h { grid-column: 2 / -1; }
.tm-content { grid-column: 2 / -1; margin-top: var(--space-lg); }
.tm-content > * { margin: 0; }
.tm-content > p { max-width: var(--measure); }
.tm-content > * + * { margin-top: var(--space-md); }
.tm-content > ul + p, .tm-content > p + ul { margin-top: var(--space-lg); }

.tm-content strong { font-weight: var(--weight-strong); color: var(--color-emerald-ink); }
.tm-link {
  color: var(--color-vital-green);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}
.tm-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* a placeholder still to be confirmed: a blank field on the sheet, not a highlight */
.tm-tbc {
  padding: 0 var(--space-xxs);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 var(--size-hairline) var(--color-border);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tm-draft .tm-tbc { background: var(--color-bg); }

/* §8: the draft flag above the refund terms */
.tm-note {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  border: var(--size-hairline) solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: var(--text-caption);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}
.tm-content > .tm-note + ul { margin-top: var(--space-lg); }

/* ruled list: hairlines between items, no bullets */
.tm-items, .tm-terms { list-style: none; padding: 0; }
.tm-items > li,
.tm-terms > li {
  padding: var(--space-sm) 0;
  border-top: var(--size-hairline) solid var(--color-border);
}
.tm-items > li:last-child,
.tm-terms > li:last-child { border-bottom: var(--size-hairline) solid var(--color-border); }
.tm-items > li { max-width: calc(var(--measure) + var(--space-lg)); }

/* term rows: the term on three columns, its explanation on four */
.tm-terms > li {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: baseline;
}
.tm-terms > li > strong { grid-column: 1 / span 3; line-height: var(--leading-snug); }
.tm-terms > li > span { grid-column: 4 / -1; }

/* §3: the sentence the whole page rests on, set as a serif pull beside a vital-green rule */
.tm-key {
  padding-left: var(--space-lg);
  border-left: var(--size-rule-accent) solid var(--color-vital-green);
}
.tm-key strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-optical-sizing: auto;
  font-size: var(--text-pull);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-emerald-ink);
  text-wrap: balance;
}
.tm-key-after {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .tm-toc a:hover, .tm-toc a:hover .tm-toc-n { color: var(--color-vital-green); }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .tm-title { grid-column: 1 / -1; }
  .tm-meta { grid-column: 1 / -1; margin-right: 0; }
  .tm-opening {
    grid-column: 1 / -1;
    margin-top: var(--space-lg);
    padding-top: 0;
    border-top: 0;
  }
  .tm-opening::before { content: none; }
  .tm-toc {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: var(--space-block);
  }
  .tm-toc ol { columns: 2; column-gap: var(--grid-gutter); }
  .tm-toc li { break-inside: avoid; }
  .tm-doc { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tm-toc ol { columns: 1; }
  .tm-toc a { padding: var(--space-xs) 0; }
  .tm-sec { display: block; padding: var(--space-lg) 0 var(--space-xl); }
  .tm-sec h2 { display: flex; gap: var(--space-sm); }
  .tm-n { flex: none; }
  .tm-content { margin-top: var(--space-md); }
  .tm-terms > li { display: block; }
  .tm-terms > li > strong, .tm-terms > li > span { display: block; }
  .tm-terms > li > strong { margin-bottom: var(--space-xxs); }
  .tm-key { padding-left: var(--space-md); }
}

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