/* =============================================
   PULSE — shared styles for the standalone legal/support pages
   (privacy.html, support.html)

   Deliberately self-contained: no styles.css (that file is app-layout, not
   documents), and no webfont. Both stores require these URLs to be publicly
   reachable, and a privacy page that fetches Google Fonts makes a
   third-party request on a page whose whole point is "we don't do that".
   Palette tracks the app's tokens — see styles.css for the source of truth.
   ============================================= */

:root {
  --bg: #14101d;
  --bg2: #1a1623;
  --text: #ece9f5;
  --text2: #9a92ac;
  --accent: #3cd8e3;
  --accent-text: var(--accent);
  --border: rgba(60, 216, 227, 0.14);
  --border2: rgba(60, 216, 227, 0.34);
  --radius: 12px;
}

:root[data-theme="light"] {
  --bg: #eef1f5;
  --bg2: #ffffff;
  --text: #0f1724;
  --text2: #4a5566;
  --accent: #0db4c9;
  --accent-text: #06707f;
  --border: rgba(15, 23, 36, 0.12);
  --border2: rgba(13, 180, 201, 0.45);
}

* { box-sizing: border-box }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 5rem;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Long-form text on a phone; keep the measure readable */
  max-width: 44rem;
  margin-inline: auto;
  -webkit-text-size-adjust: 100%;
}

header { margin-bottom: 2.5rem }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand img { width: 28px; height: 28px }

h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 1.5rem 0 .4rem;
  letter-spacing: -.01em;
}

h2 {
  font-size: 1.1rem;
  margin: 2.4rem 0 .6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  letter-spacing: .01em;
}

h3 { font-size: .95rem; margin: 1.4rem 0 .3rem }

.updated { color: var(--text2); font-size: .9rem; margin: 0 }

p, li { color: var(--text) }
p { margin: .8rem 0 }
ul { padding-left: 1.2rem; margin: .8rem 0 }
li { margin: .35rem 0 }

a { color: var(--accent-text) }

strong { font-weight: 650 }

.lede {
  font-size: 1.1rem;
  color: var(--text2);
}

/* Plain-language summary above the detail — the part anyone actually reads.
   Set apart by an even accent edge and an accent lead-in, not a side stripe. */
.summary {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
}
.summary p:first-child { margin-top: 0 }
.summary strong:first-child { color: var(--accent-text) }
.summary p:last-child { margin-bottom: 0 }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .95rem;
  display: block;
  overflow-x: auto;   /* narrow phones scroll the table rather than squash it */
}
th, td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th { color: var(--text2); font-weight: 600; white-space: nowrap }

code {
  font: .9em/1 ui-monospace, monospace;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .15em .4em;
}

footer {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: .9rem;
}
footer a { margin-right: 1.1rem }