/* ──────────────────────────────────────────────────────────────────────────────
   legal.css — shared styling for /terms.html and /privacy.html.

   These are standalone static documents: no React, no index.css, no design
   tokens. They were last styled in the terracotta era (#d97757 accent on a
   #faf9f5 cream canvas) and never got the blue rebrand, so arriving here from
   the auth screen looked like leaving the product.

   The values below are copied from src/index.css deliberately — a static page
   cannot import them. Keep them in step when the app's palette moves. ONE file
   for both pages, so that is one edit and not two.
────────────────────────────────────────────────────────────────────────────── */

:root {
  --canvas:    #F2F3F5;   /* --bg-canvas  */
  --surface:   #FFFFFF;   /* --bg-surface */
  --ink:       #0C0C0C;   /* --text-primary   */
  --body:      #4A4A4A;   /* --text-secondary */
  --muted:     #6E6E6E;   /* --text-tertiary  */
  --accent:    #0066CC;   /* --accent         */
  --link:      #0066CC;   /* --accent-text    */
  --border:    #E5E5E5;   /* --border-default */
  --shadow:    0 1px 3px rgba(0,0,0,0.06);

  --sans: 'Google Sans Flex', 'Inter', system-ui, -apple-system,
          'Noto Sans Devanagari', 'Noto Sans Kannada', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:  #000000;
    --surface: #1A1A1A;
    --ink:     #F5F5F5;
    --body:    #C7C7C7;
    --muted:   #A0A0A0;
    /* --accent stays #0066CC as a FILL, but as TEXT on black it is 2.4:1 and
       fails. The app solves this with a separate --accent-text; same here. */
    --link:    #3D93E8;
    --border:  #2A2A2A;
    --shadow:  none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* These pages open inside the installed PWA, so they own their safe areas. */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    20px
    calc(env(safe-area-inset-bottom, 0px) + 64px);
}

/* Back — a real 44px target, not a 14px line of text. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin: 0 0 12px -8px;
  padding: 0 8px;
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--accent);
}
@media (prefers-color-scheme: dark) { .brand { color: var(--link); } }

h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 6px 0 4px;
  text-wrap: balance;
}

.updated {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
}

h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 32px 0 8px;
  text-wrap: balance;
}

p, li { font-size: 16px; color: var(--body); }
ul { padding-left: 22px; margin: 8px 0; }
li { margin: 6px 0; }
b, strong { color: var(--ink); font-weight: 650; }

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

.note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  font-size: 15px;
  color: var(--body);
  margin: 24px 0;
}

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

footer {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 32px;
}

/* Two-column data tables (privacy: "How long we keep it"). Same tokens as the
   rest of the page, so light and dark both follow. Wraps on narrow phones
   instead of scrolling sideways. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--body);
  overflow-wrap: anywhere;
}
th { color: var(--ink); font-weight: 650; }
tr:last-child td { border-bottom: none; }