/* Privacy pages: the site's glass skin for long reading. A glass hero, section pills, the short
   version in its own card, then one glass reading panel. Colours come from home.css (Coded Dreams)
   or ih-glass.css (Islam Habits). */

.legal { padding-block: var(--s5) var(--s6); }
.legal .wrap { display: grid; gap: var(--s4); }
.legal .wrap > * { min-width: 0; } /* let the data table scroll inside its frame instead of widening the page */

.legal-hero { padding: var(--s5) var(--s4); border-radius: 32px; }
.legal-hero .eyebrow { color: var(--muted); margin-bottom: var(--s2); }
.legal-hero .app-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.legal-hero .app-row span.name { font-family: var(--font-display); font-size: 1.5rem; }
.legal-hero h1 { margin-bottom: var(--s1); }
.legal-hero .updated { color: var(--muted); font-size: 0.9375rem; margin-bottom: var(--s3); }
.legal-hero .intro { font-size: 1.125rem; line-height: 1.65; max-width: 68ch; margin: 0; }

/* Contents: glass pills to each section */
.legal-toc { display: flex; flex-wrap: wrap; gap: var(--s1); padding: 0; margin: 0; list-style: none; }
.legal-toc a {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.legal-toc a:hover { color: var(--link); }

.legal-card { padding: var(--s4); border-radius: 28px; }
.legal-card > h2:first-child { margin-top: 0; }

/* Reading panel */
.legal-body { padding: var(--s5) var(--s4); border-radius: 32px; }
.legal-body > * { max-width: 72ch; }
.legal-body h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); margin: var(--s5) 0 var(--s2);
  scroll-margin-top: calc(var(--stack-top, 110px) + var(--s2));
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li, .legal-card li { line-height: 1.7; }
.legal-body ul { padding-left: 1.25em; margin: 0 0 var(--s2); }
.legal-body li { margin-bottom: 6px; }
.legal-body a, .legal-card a { color: var(--link); overflow-wrap: anywhere; }
.legal-body code {
  font-size: 0.875em; padding: 1px 7px; border-radius: 6px;
  background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.legal-card h2 { scroll-margin-top: calc(var(--stack-top, 110px) + var(--s2)); }

/* "The Short Version": highlighted where the policy puts it, tinted with the page's gradient */
.legal-callout {
  max-width: 72ch; margin: var(--s4) 0; padding: var(--s3) var(--s4); border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--grad-a) 16%, transparent), color-mix(in srgb, var(--grad-b) 10%, transparent));
}
.legal-callout h2 { margin-top: 0; }
.legal-callout ul { margin-bottom: 0; }

/* Data table: scrolls sideways inside its own frame on phones, never the page */
.legal-table { max-width: 100%; overflow-x: auto; margin: 0 0 var(--s3); border-radius: 18px; }
.legal-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.9375rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 16px; line-height: 1.55; }
.legal-table th { font-weight: 700; background: var(--glass-fill); }
.legal-table tr + tr td, .legal-table thead + tbody tr:first-child td {
  border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
}

/* App policy cards on the Coded Dreams page */
.policy-links { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.policy-link { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border-radius: 24px; color: var(--text); text-decoration: none; }
.policy-link strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; }
.policy-link span.sub { color: var(--muted); font-size: 0.9375rem; }

/* Footer pointer to the other policy */
.legal-note { color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 640px) {
  .legal { padding-block: var(--s3) var(--s5); }
  .legal-hero, .legal-body { padding: var(--s4) var(--s3); border-radius: 24px; }
  .legal-card { padding: var(--s3); border-radius: 24px; }
  /* the phone header wraps to two rows */
  .legal-body h2, .legal-card h2 { scroll-margin-top: 172px; }
}