/* Note Recall — legal document styles
   privacy-policy.html and terms-of-use.html only.

   These are NOT generic 43rd Element documents; they govern Note Recall, and
   they are presented as Note Recall's. The header names the app, and the
   design follows the main site (assets/site.css): the same geometric type,
   the same navy near-black and dark blue, the same wide radii.

   Two things this file deliberately does NOT copy from site.css:

   * There is no site nav. The app loads these pages in a web view, and a
     floating "All apps / Support" pill inside that web view would let someone
     wander out of the document and into the marketing site with no way back.
     Navigation lives at the foot of the page instead — see the note there.
   * It stays self-contained. This stylesheet is copied into the app bundle
     next to the two documents by Scripts/refresh_legal.sh, so it cannot
     @import or reference anything outside its own folder.

   Class names are shared with the document HTML and must not be renamed
   without editing both files. */

:root {
  --ink-0: #080B14;
  --paper: #FFFFFF;
  --surface: #F2F2F2;

  --on-dark: #FFFFFF;
  --on-dark-muted: #A9B6CC;
  --text: #151515;
  --text-muted: #5C5C5C;
  --line: #E4E4E4;

  --accent: #1B3F91;         /* links and numerals — 9.7:1 on white */
  --accent-lift: #A8C2F7;    /* accent text on the dark header */
  --code-bg: #EEF1F7;

  --font: "Avenir Next", Avenir, "Century Gothic", Futura, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */

.legal-header {
  background: var(--ink-0);
  color: var(--on-dark);
  padding: 64px 24px 56px;
  text-align: center;
}

/* The app name, set as a kicker — these documents belong to Note Recall. */
.legal-header .brand {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: 16px;
}

/* The old theme's amber dot. The kicker carries the branding now. */
.legal-header .brand .dot { display: none; }

.legal-header h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.legal-header .dates {
  margin: 20px 0 0;
  font-size: 0.84rem;
  color: var(--on-dark-muted);
}

.legal-header .dates span { display: inline-block; margin: 0 8px; }
.legal-header .dates strong { color: var(--on-dark); font-weight: 600; }

/* ---- Document ---- */

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 24px;
}

.legal-card {
  background: var(--paper);
  padding: 56px 0 0;
}

.intro {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--line);
  padding-bottom: 32px;
  margin: 0 0 8px;
}

h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  scroll-margin-top: 20px;
}

h2 .num { color: var(--accent); margin-right: 10px; }

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 26px 0 8px;
}

p { margin: 14px 0; }
ul { margin: 14px 0; padding-left: 22px; }
li { margin: 9px 0; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 63, 145, 0.32);
}

a:hover { border-bottom-color: var(--accent); }

strong { color: var(--text); font-weight: 600; }

code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* All-caps warranty / liability blocks */
.legal-block {
  background: var(--surface);
  border-left: 3px solid #9AA3B2;
  border-radius: 0;
  padding: 18px 20px;
  font-size: 0.86rem;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  margin: 18px 0;
}

.callout {
  border-left: 3px solid var(--accent);
  background: rgba(30, 64, 175, 0.06);
  border-radius: 0;
  padding: 16px 20px;
  margin: 20px 0;
}

.callout.emergency {
  border-left-color: #B42318;
  background: rgba(180, 35, 24, 0.06);
}

.card-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---- Foot navigation ----
   On the web this carries three links: the sibling document, the Note Recall
   page, and the site root. Scripts/refresh_legal.sh strips the two that point
   outside this folder when it bundles these pages into the app, leaving only
   the cross-link between the two documents — the one that still resolves
   there. Both states have to look right. */

.doc-nav {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 20px;
  text-align: center;
}

.doc-nav a {
  display: inline-block;
  margin: 0 6px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid rgba(21, 21, 21, 0.18);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text);
}

.doc-nav a:hover { border-color: var(--text); }

.site-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.84rem;
  padding: 44px 20px 56px;
}

.site-footer a { color: var(--text); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .legal-header { padding: 48px 20px 44px; }
  main { padding: 0 18px 20px; }
  .legal-card { padding-top: 40px; }
  .intro { font-size: 1.02rem; }
  h2 { font-size: 1.22rem; margin-top: 36px; }
  .doc-nav a { display: block; margin: 8px 0; }
}