/* Shared by privacy.html, terms.html, cookies.html and cdr.html.
   One copy, because four inline copies of the same rules is exactly how the
   landing page's claims drifted apart from the app's in the first place.

   Light only, deliberately: index.html declares color-scheme:light and these
   pages are read from its footer. A legal page that flips theme mid-journey
   reads as a different site. */

:root{
  --paper:        oklch(98% 0.004 95);
  --paper-raised: oklch(96% 0.005 95);
  --ink:          oklch(20% 0.015 260);
  --muted:        oklch(45% 0.012 260);
  --line:         oklch(90% 0.005 95);
  --accent:       oklch(48% 0.09 250);
  --warn:         oklch(60% 0.19 28);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:720px;margin:0 auto;padding:48px 22px 96px}

a{color:var(--accent)}
a:hover{text-decoration:none}

.back{
  display:inline-block;font-size:13px;font-weight:600;
  text-decoration:none;margin-bottom:36px;
}
.back:hover{text-decoration:underline}

h1{font-size:31px;font-weight:800;letter-spacing:-.022em;margin:0 0 8px;line-height:1.18}
.sub{color:var(--muted);font-size:14px;margin:0 0 8px}
.dates{color:var(--muted);font-size:12.5px;margin:0 0 34px}

h2{
  font-size:19px;font-weight:700;letter-spacing:-.012em;
  margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line);
  scroll-margin-top:18px;
}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-size:15.5px;font-weight:700;margin:26px 0 8px}

p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 7px}
strong{font-weight:700}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--paper-raised);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;
}

/* Wide tables scroll inside their own box rather than pushing the page
   sideways — same rule the app's screens follow. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:13.5px}
th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line)}
th{font-weight:700;background:var(--paper-raised);white-space:nowrap}
td strong{font-weight:600}

.note,.warn,.pending{
  border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;background:#fff;margin:0 0 20px;
}
.note p:last-child,.warn p:last-child,.pending p:last-child{margin-bottom:0}
.warn{border-color:color-mix(in oklch,var(--warn) 40%,var(--line));background:color-mix(in oklch,var(--warn) 5%,#fff)}
.pending{border-style:dashed;background:var(--paper-raised)}

.tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;margin-bottom:14px;
}
.tag.is-warn{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 45%,var(--line))}

.toc{
  background:var(--paper-raised);border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;margin:0 0 34px;
}
.toc ol{margin:0;padding-left:20px;font-size:13.5px}
.toc li{margin:0 0 4px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

footer{
  margin-top:52px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
footer .fl{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
footer .fl a{text-decoration:none}
footer .fl a:hover{text-decoration:underline}

@media (max-width:520px){
  .wrap{padding:34px 18px 72px}
  h1{font-size:26px}
  h2{font-size:17.5px}
  body{font-size:14.5px}
}

/* Placed last on purpose: the base .toc rule below/above declares margin,
   background, border and radius, and a media query does not raise
   specificity. Sitting earlier in the file, these lost to it. */
/* Sidebar contents.

   The text column is centred in the VIEWPORT and the contents list hangs in
   the left margin beside it. The obvious version — one grid of
   [sidebar | text], centred — is wrong: centring that grid puts the text
   column right of centre by half the sidebar's width, and the page reads as
   if it is leaning.

   So the grid is symmetric, 1fr | 720px | 1fr, and the list is placed in the
   left track, right-aligned against the text. The measure never changes.

   The breakpoint is the width where the list actually fits in that margin.
   The usable gutter is (100vw - 720px) / 2 MINUS the wrap's own 22px side
   padding, and the list needs 200px plus a 48px gap. That is 1264px. Set at
   1280 for margin.

   The first attempt used 1240 by forgetting the padding, and it was off by
   ten pixels: the list did not overflow, it compressed the left track, which
   pushed the text column right and un-centred exactly the thing this layout
   exists to centre. Measure at the breakpoint, not just above it.

   Below it, the list goes back to being a block above the text. */
@media (min-width:1280px){
  .wrap{
    max-width:none;
    display:grid;
    grid-template-columns:1fr minmax(0,720px) 1fr;
    align-items:start;
  }
  .wrap > *{grid-column:2}
  .toc{
    grid-column:1;
    grid-row:2 / span 999;
    justify-self:end;
    width:200px;
    margin:0 48px 0 0;
    position:sticky;
    top:24px;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    background:transparent;
    border:0;
    border-left:2px solid var(--line);
    border-radius:0;
    padding:2px 0 2px 14px;
  }
  .toc::before{
    content:"Contents";
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-3,#6b6b6b);
    margin-bottom:10px;
  }
  .toc ol{padding-left:17px;font-size:12.5px;line-height:1.45}
  .toc li{margin:0 0 7px}
}

/* Revision history. Both documents promise the version and date at the top
   tell you which one you are reading — so when a clause changes, there has to
   be somewhere that says what. A dl because that is what this is: a version,
   and what happened in it. */
.revs{margin:14px 0 0;padding:0}
.revs dt{
  font-weight:700;font-size:13.5px;margin:0 0 3px;
  letter-spacing:.01em;
}
.revs dt + dd{margin:0 0 16px;padding:0 0 0 14px;border-left:2px solid var(--line);
  font-size:14px;color:var(--ink-2,inherit)}
.revs dd:last-child{margin-bottom:0}
.dates a{text-decoration:underline;text-underline-offset:2px}

/* The "you are here" marker in the contents list.
   A rounded rectangle behind the current entry. Both layouts get it: in the
   sidebar it is the only orientation cue on the page, and in the stacked
   layout it still tells you where you left off when you scroll back up.
   Added by legal.js — with no JS the list simply has no marker, which is
   how it behaved before. */
.toc a{
  display:block;
  padding:3px 8px;
  margin-left:-8px;
  border-radius:7px;
  transition:background-color .18s ease, color .18s ease;
}
.toc a.is-current{
  background:var(--ink);
  color:var(--paper);
  font-weight:600;
}
.toc a.is-current:hover{text-decoration:none}
/* The list item marker sits outside the link, so the number would stay dark
   while its label goes light. Dim it instead of leaving it shouting. */
.toc li:has(a.is-current){color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .toc a{transition:none}
}