/* ============================================================
   AVANO — Legal page styles
   Terms, Privacy and Consumer Health Data policies (js/data/legal.js): the in-app page
   (#legal-screen) and the public pages (terms.html, privacy.html, health-privacy.html,
   support.html), which share this markup.
   ============================================================ */

/* In the app: a full page above everything it can be opened from, including the plans screen,
   checkout and the AI consent question */
#legal-screen{
  position:fixed; inset:0; z-index:560; background:var(--bg);
  overflow-y:auto; overscroll-behavior:contain;
}
#legal-screen.hidden{ display:none; }

.legal-page{ max-width:720px; margin:0 auto; padding:0 1rem 4rem; }
.legal-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0 1rem; margin-bottom:1.5rem;
  position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--border);
}
.legal-head h1{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text);
}
.legal-back{
  flex-shrink:0; background:none; color:var(--text-dim); cursor:pointer; text-decoration:none;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.5rem 0.75rem; border-radius:8px; border:1px solid var(--border);
}
.legal-back:hover{ color:var(--text); border-color:var(--border-strong); }
/* In the app the head is a .page-head (css/base.css): back in a circle, title centered */
#legal-screen .legal-head{ display:grid; padding:1rem 0 0.85rem; }
#legal-screen .legal-head h1{ font-size:18px; letter-spacing:0.08em; }

#legal-content{ color:var(--text-dim); font-size:14px; line-height:1.8; }
#legal-content p{ margin:0 0 0.6rem; }
#legal-content ul{ margin:0 0 0.6rem; padding-left:1.2rem; }
#legal-content li{ margin-bottom:0.3rem; }
#legal-content strong{ color:var(--text); font-weight:600; }
#legal-content a{ color:var(--accent-text); text-decoration:underline; overflow-wrap:anywhere; }
#legal-content .legal-updated{ margin-bottom:1.5rem; font-size:12px; color:var(--text-faint); }
.legal-intro{
  margin-bottom:1.5rem; padding:0.9rem 1rem 0.3rem; border-radius:12px;
  background:var(--bg-elev); border:1px solid var(--border-strong);
}
.legal-section{ margin-bottom:1.5rem; }
.legal-section h3{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--text); margin-bottom:0.5rem;
}

/* Links to these pages in the AI consent and updated-terms questions (app.html) */
.legal-modal a{ color:var(--accent-text); text-decoration:underline; }

/* Public pages only: links to the other documents at the bottom */
.legal-links{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; margin-top:2rem; padding-top:1rem;
  border-top:1px solid var(--border); font-size:13px;
}
.legal-links a{ color:var(--text-dim); }
.legal-links a:hover{ color:var(--text); }