/* TempoLife privacy.php — v4 reading layer (2026-09-23, token -lg4a).
   Loaded AFTER legal-v3.css and only when lib/legal_v4.php says so, so it is
   purely additive: every v3 rule still applies, and the gate going back to
   '0' restores the v3 page with no deploy. It carries the Guides v4 reader
   vocabulary over to the legal page — cover, short version, number tiles,
   contents, section eyebrows — scoped to the .lv4 <main> so terms.php, which
   shares legal-v3.css, cannot be touched by any of it.

   House rules this file follows (each one has cost a render before):
   - NO color-mix(): the APK's own engine floor is Chrome 91
     (TempoWebViewCompatibility.MINIMUM_MAJOR) and color-mix is Chrome 111, so
     every colour here is a literal or an rgba() that parses everywhere.
   - NO backdrop-filter: app.rest.css kills it inside the APK, so a "frosted"
     surface would render as plain transparency. Sticky surfaces are OPAQUE.
   - NO drop-shadow/bloom on the cover or the tiles (owner rule, 2026-09-22:
     flat metric colours, nothing "highlightish").
   - Single-position gradient stops only (double-position is Chrome 72+ and
     invalidates the whole gradient below that).
   - Tokens are declared in the same four theme blocks legal-v3.css uses, so
     light / dark / black / auto-dark all resolve. */

/* ── v4 tokens (accents + cover ink; the surface and accent set it builds on
      comes from legal-v3.css) ── */
html.tl-app-feel {
  --lv4-a1: #0284C7;  /* blue   — processors, counts */
  --lv4-a2: #059669;  /* green  — the "never" figures */
  --lv4-a3: #D97706;  /* amber  — retention windows */
  --lv4-a4: #7C3AED;  /* violet — Health Connect history */
  --lv4-a5: #0D9488;  /* teal   — short-lived credentials */
  --lv4-cover-1: #12233B;
  --lv4-cover-2: #0B1526;
  --lv4-cover-t: rgba(255,255,255,.84);
  --lv4-cover-m: rgba(255,255,255,.62);
  --lv4-chip: rgba(255,255,255,.10);
  --lv4-art: #4B9BE8;
}
html.tl-app-feel[data-theme="dark"] {
  --lv4-a1: #38BDF8; --lv4-a2: #34D399; --lv4-a3: #FBBF24; --lv4-a4: #B197FC; --lv4-a5: #2DD4BF;
  --lv4-cover-1: #17203A; --lv4-cover-2: #0A0E18;
}
html.tl-app-feel[data-theme="black"] {
  --lv4-a1: #38BDF8; --lv4-a2: #34D399; --lv4-a3: #FBBF24; --lv4-a4: #B197FC; --lv4-a5: #2DD4BF;
  --lv4-cover-1: #171A22; --lv4-cover-2: #0A0B0F;
}
@media (prefers-color-scheme: dark) {
  html.tl-app-feel:not([data-theme-manual])[data-theme="light"],
  html.tl-app-feel[data-theme="auto"] {
    --lv4-a1: #38BDF8; --lv4-a2: #34D399; --lv4-a3: #FBBF24; --lv4-a4: #B197FC; --lv4-a5: #2DD4BF;
    --lv4-cover-1: #17203A; --lv4-cover-2: #0A0E18;
  }
}

/* ── the rail: reading progress, directly under the sticky header ──
   The header is sticky at top:0 with its own safe-area padding, so the rail
   cannot be sticky itself without measuring that height in JS. It is pinned
   to the header's own bottom edge instead, by the header rule below. */
html.tl-app-feel .sup-header { position: sticky; }
html.tl-app-feel .lv4-prog {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; pointer-events: none;
}
html.tl-app-feel .lv4-prog i {
  display: block; height: 100%; width: 0; border-radius: 0 2px 2px 0;
  background: var(--lv4-a1); transition: width .12s linear;
}

/* ── cover ── */
html.tl-app-feel .lv4 { padding-top: 14px; }
/* The header CTA hands its job to the cover. At 375px the v3 header wrapped
   onto a second sticky row (back + logo + four language pills + "Open the
   app" do not fit), so it ate ~120px of every screen for the whole read. The
   cover carries the same link as a proper cover CTA instead — the Guides v4
   reader does exactly this — and the header stays one row on every phone.
   Inside the APK both are hidden: you are already in the app. */
html.tl-app-feel body.lv4-on .sup-open { display: none; }
html.tl-app-feel .lv4-cover-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 7px;
  min-height: 42px; padding: 0 15px 0 17px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; font-weight: 800; color: #0B1220; background: #fff;
}
html.tl-app-feel .lv4-cover-cta i {
  width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--lv4-i-go) center / contain no-repeat; mask: var(--lv4-i-go) center / contain no-repeat;
}
html.tl-app-feel .lv4-cover-cta:active { transform: scale(.97); }
html.tl-app-feel.is-apk .lv4-cover-cta { display: none; }
html.tl-app-feel .lv4-cover {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  padding: 0 20px 20px; margin-bottom: 14px; border-radius: 28px; overflow: hidden; isolation: isolate;
  color: #fff; background-image: linear-gradient(158deg, var(--lv4-cover-1), var(--lv4-cover-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
html.tl-app-feel .lv4-cover-art {
  position: relative; display: block; margin: 0 -20px 0; height: 128px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}
html.tl-app-feel .lv4-cover-art svg { display: block; width: 100%; height: 100%; }
html.tl-app-feel .lv4-cover-art .lv4-art-l { fill: none; stroke: var(--lv4-art); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; }
html.tl-app-feel .lv4-cover-art .lv4-art-s { fill: none; stroke: #fff; stroke-opacity: .2; stroke-width: 9; stroke-linecap: round; }
html.tl-app-feel .lv4-cover-art .lv4-art-d { fill: #fff; opacity: .3; }
html.tl-app-feel .lv4-cover-art .lv4-art-k { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.tl-app-feel .lv4-kick {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: -26px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.86);
}
html.tl-app-feel .lv4-kick i { width: 8px; height: 8px; border-radius: 50%; background: var(--lv4-art); }
html.tl-app-feel .lv4-cover h1 {
  margin: 2px 0 0; font-size: 29px; font-weight: 800; line-height: 1.08; letter-spacing: -.035em;
  color: #fff; text-wrap: balance;
}
html.tl-app-feel .lv4-dek { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lv4-cover-t); }
html.tl-app-feel .lv4-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 12px; font-weight: 650; color: var(--lv4-cover-m); font-variant-numeric: tabular-nums;
}
html.tl-app-feel .lv4-meta span {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--lv4-chip); color: rgba(255,255,255,.8);
}

/* ── the short version ── */
html.tl-app-feel .lv4 .lv4-card {
  background: var(--v3s-card-grad), var(--v3s-card); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow);
  padding: 20px 20px 18px; margin-bottom: 14px;
}
html.tl-app-feel .lv4-h2s {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--v3s-t1);
}
html.tl-app-feel .lv4-h2s .lv4-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 22px;
  padding: 0 7px; border-radius: 999px; background: var(--v3s-card-2); color: var(--v3s-t3);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
html.tl-app-feel .lv4-short { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
html.tl-app-feel .lv4-short li { margin: 0; }
html.tl-app-feel .lv4-short a {
  display: flex; align-items: flex-start; gap: 12px; padding: 9px 2px; text-decoration: none;
  font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--v3s-t2);
}
html.tl-app-feel .lv4-short li + li a { border-top: 1px solid var(--v3s-line-2); }
html.tl-app-feel .lv4-short a::before {
  content: ""; flex: none; width: 19px; height: 19px; margin-top: 2px; border-radius: 50%;
  background-color: rgba(5,150,105,.14); background-image: var(--lv4-i-tick);
  background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
}
html.tl-app-feel .lv4-short a > em {
  flex: none; margin-left: auto; padding-left: 8px; font-style: normal;
  font-size: 11.5px; font-weight: 800; color: var(--v3s-t4); font-variant-numeric: tabular-nums;
}
html.tl-app-feel .lv4-short a > span { flex: 1; min-width: 0; }
html.tl-app-feel .lv4-short a:hover > span { text-decoration: underline; }
html.tl-app-feel .lv4-short b { font-weight: 700; color: var(--v3s-t1); }
html.tl-app-feel .lv4-h2-out { margin: 22px 2px 10px; font-size: 19px; letter-spacing: -.035em; }
html.tl-app-feel .lv4-note {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--v3s-line-2);
  font-size: 12.5px; line-height: 1.5; color: var(--v3s-t3);
}

/* ── key numbers ── */
html.tl-app-feel .lv4-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
html.tl-app-feel .lv4-num {
  position: relative; display: block; padding: 14px 14px 13px 17px; border-radius: 18px;
  overflow: hidden; text-decoration: none;
  background: var(--v3s-card-grad), var(--v3s-card);
  box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow);
}
html.tl-app-feel .lv4-num::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--lv4-a1);
}
html.tl-app-feel .lv4-num.c2::before { background: var(--lv4-a2); }
html.tl-app-feel .lv4-num.c3::before { background: var(--lv4-a3); }
html.tl-app-feel .lv4-num.c4::before { background: var(--lv4-a4); }
html.tl-app-feel .lv4-num.c5::before { background: var(--lv4-a5); }
html.tl-app-feel .lv4-num b {
  display: block; font-size: 22px; font-weight: 800; line-height: 1.12; letter-spacing: -.035em;
  color: var(--v3s-t1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
html.tl-app-feel .lv4-num span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.42; color: var(--v3s-t3); }
html.tl-app-feel .lv4-num:active { transform: scale(.985); }

/* ── contents + find ── */
html.tl-app-feel .lv4-find-w { position: relative; margin: 0 0 6px; }
html.tl-app-feel .lv4-find {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 14px 0 40px;
  border: 0; border-radius: 14px; background: var(--v3s-card-2); color: var(--v3s-t1);
  font: inherit; font-size: 14.5px; box-shadow: 0 0 0 1px var(--v3s-line-2);
}
html.tl-app-feel .lv4-find::placeholder { color: var(--v3s-t4); }
html.tl-app-feel .lv4-find:focus { outline: 0; box-shadow: 0 0 0 2px var(--lv4-a1); }
html.tl-app-feel .lv4-find-w::before {
  content: ""; position: absolute; left: 14px; top: 13px; width: 16px; height: 16px;
  background-color: var(--v3s-t4); -webkit-mask: var(--lv4-i-find) center / contain no-repeat;
          mask: var(--lv4-i-find) center / contain no-repeat;
}
html.tl-app-feel .lv4-toc { margin: 0; padding: 0; list-style: none; counter-reset: none; }
html.tl-app-feel .lv4-toc li + li { border-top: 1px solid var(--v3s-line-2); }
html.tl-app-feel .lv4-toc a { display: flex; align-items: center; gap: 12px; padding: 11px 2px; text-decoration: none; }
html.tl-app-feel .lv4-toc-n {
  flex: none; min-width: 26px; font-size: 12px; font-weight: 800; color: var(--v3s-t4);
  font-variant-numeric: tabular-nums;
}
html.tl-app-feel .lv4-toc-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--v3s-t1); }
html.tl-app-feel .lv4-toc a.on .lv4-toc-t { color: var(--lv4-a1); }
html.tl-app-feel .lv4-toc a.on .lv4-toc-n { color: var(--lv4-a1); }
html.tl-app-feel .lv4-none { margin: 10px 2px 2px; font-size: 13.5px; color: var(--v3s-t3); }

/* ── the sections themselves ── */
html.tl-app-feel .lv4 .legal-card { scroll-margin-top: 78px; }
html.tl-app-feel .lv4 .legal-card [id] { scroll-margin-top: 78px; }
html.tl-app-feel .lv4-secn {
  display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--v3s-t4); font-variant-numeric: tabular-nums;
}
html.tl-app-feel .lv4 .legal-card h2 {
  margin: 0 0 14px; padding-bottom: 11px; font-size: 20px; line-height: 1.22; letter-spacing: -.03em;
}
html.tl-app-feel .lv4 .legal-card h3 { font-size: 15.5px; margin: 20px 0 8px; }
html.tl-app-feel .lv4 .legal-card p, html.tl-app-feel .lv4 .legal-card li { font-size: 15px; line-height: 1.68; }
html.tl-app-feel .lv4 .legal-card > ul { padding-left: 20px; }
/* A 55-character URL and Finnish compounds ("aktiivisuuden/unen/paaston/…")
   pushed a few list rows past the card edge at 375px. Pre-existing in v3; it
   is fixed here because a scoped rule cannot reach terms.php, which shares
   legal-v3.css. Tables keep their own overflow-x scroll. */
html.tl-app-feel .lv4 .legal-card :is(p, li, h3) { overflow-wrap: anywhere; }
html.tl-app-feel .lv4 .legal-card li::marker { color: var(--v3s-t4); }
/* The filter hides whole sections. ONE mechanism only: a class that sets
   display out-ranks the UA sheet's [hidden] rule, so mixing the two leaves an
   empty row behind (it cost the Settings layer a 16px gap on every signup). */
html.tl-app-feel .lv4 .lv4-off { display: none !important; }

/* ── back to top ── */
html.tl-app-feel .lv4-top {
  position: fixed; right: 14px; z-index: 30; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; color: var(--v3s-t1); opacity: 0; visibility: hidden;
  background: var(--v3s-card-grad), var(--v3s-card);
  box-shadow: 0 0 0 1px var(--v3s-line), var(--v3s-shadow);
  transition: opacity .16s ease, visibility .16s ease;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
html.tl-app-feel.is-apk .lv4-top { bottom: calc(18px + max(env(safe-area-inset-bottom, 0px), var(--tl-safe-bottom, 0px))); }
html.tl-app-feel .lv4-top.on { opacity: 1; visibility: visible; }
html.tl-app-feel .lv4-top::before {
  content: ""; position: absolute; inset: 13px; background: currentColor;
  -webkit-mask: var(--lv4-i-up) center / contain no-repeat; mask: var(--lv4-i-up) center / contain no-repeat;
}
html.tl-app-feel .lv4-top:active { transform: scale(.92); }

/* ── icons (data URIs, so the page adds no request) ── */
html.tl-app-feel {
  --lv4-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --lv4-i-find: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --lv4-i-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --lv4-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}
html.tl-app-feel[data-theme="dark"], html.tl-app-feel[data-theme="black"] {
  --lv4-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html.tl-app-feel:not([data-theme-manual])[data-theme="light"],
  html.tl-app-feel[data-theme="auto"] {
    --lv4-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}
html.tl-app-feel[data-theme="dark"] .lv4-short a::before,
html.tl-app-feel[data-theme="black"] .lv4-short a::before { background-color: rgba(52,211,153,.16); }
@media (prefers-color-scheme: dark) {
  html.tl-app-feel:not([data-theme-manual])[data-theme="light"] .lv4-short a::before,
  html.tl-app-feel[data-theme="auto"] .lv4-short a::before { background-color: rgba(52,211,153,.16); }
}

/* ── narrow phones ── */
@media (max-width: 600px) {
  html.tl-app-feel .lv4-cover { border-radius: 22px; padding: 0 16px 18px; }
  html.tl-app-feel .lv4-cover-art { margin: 0 -16px 0; height: 112px; }
  html.tl-app-feel .lv4-cover h1 { font-size: 25px; }
  html.tl-app-feel .lv4 .lv4-card { padding: 17px 16px 15px; border-radius: 16px; }
  html.tl-app-feel .lv4 .legal-card h2 { font-size: 18px; }
  html.tl-app-feel .lv4-num { border-radius: 15px; padding: 13px 12px 12px 15px; }
  html.tl-app-feel .lv4-num b { font-size: 20px; }
}
@media (max-width: 360px) {
  html.tl-app-feel .lv4-nums { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html.tl-app-feel .lv4-prog i { transition: none; }
  html.tl-app-feel .lv4-top { transition: none; }
  html.tl-app-feel .lv4-top:active, html.tl-app-feel .lv4-num:active { transform: none; }
}