/* The privacy, terms, delete-my-data and deletion-status pages: the landing page's colour blocks and type up top, and below them
   the words kept plain and easy to read. Builds on styles.css. */

.legal-wrap { position: relative; z-index: 1; width: min(940px, calc(100% - 28px)); margin: 18px auto 40px; }
.legal-nav { gap: 2px; }
.legal-hero { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 14px; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 56px); border-radius: var(--r-l); background: var(--tone, var(--lilac)); box-shadow: var(--shadow); }
.legal-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 10% 0%, rgba(255,255,255,.55), transparent 62%), radial-gradient(50% 60% at 100% 100%, rgba(255,255,255,.28), transparent 60%); }
.s-lilac { --tone: var(--lilac); } .s-lime { --tone: var(--lime); } .s-peach { --tone: var(--peach); } .s-mint { --tone: var(--mint); }
.legal-hero h1 { max-width: 12ch; font-size: clamp(2.9rem, 8.4vw, 5.8rem); line-height: .92; letter-spacing: -0.055em; font-weight: 800; animation: word-up .9s var(--spring) both; }
.legal-hero .meta { margin: 16px 0 0; font-weight: 600; font-size: 1.05rem; opacity: .72; max-width: 34rem; animation: rise .8s .25s var(--glide) both; }
.legal-hero .spk { position: absolute; opacity: .9; animation: twinkle 3.4s ease-in-out infinite; }
.legal-hero .k1 { top: 18%; right: 12%; width: 2.2rem; color: var(--ink); } .legal-hero .k2 { bottom: 22%; right: 26%; width: 1.3rem; color: #fff; animation-delay: -1.2s; } .legal-hero .k3 { top: 52%; right: 6%; width: 1.6rem; color: var(--orange); animation-delay: -2.3s; }
@keyframes word-up { from { opacity: 0; transform: translateY(.6em) rotate(4deg) scale(.92); } }

.legal-card { padding: clamp(24px, 4.4vw, 52px); border-radius: var(--r-l); background: var(--paper-2); box-shadow: var(--shadow); animation: rise .8s .15s var(--glide) both; }
.legal-card > p, .legal-card > ul, .legal-card > h2, .legal-card > form, .legal-card > div { max-width: 70ch; }
.legal-card > table, .legal-card > .callout { max-width: none; }
.legal-card h2 { font-size: 1.55rem; letter-spacing: -0.045em; margin: 38px 0 10px; }
.legal-card > h2:first-child { margin-top: 0; }
.legal-card p, .legal-card li { line-height: 1.68; font-size: 1.02rem; }
.legal-card ul { padding-left: 22px; }
.legal-card li { margin-bottom: 8px; }
.legal-card li::marker { color: var(--orange); }
.legal-card a { color: var(--pink-text); font-weight: 700; text-underline-offset: 3px; }
.legal-card .callout { margin: 0 0 22px; padding: 16px 20px; border-radius: var(--r-l); background: var(--mint); }
.legal-card table { width: 100%; margin: 16px 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--r-l); background: var(--surface); font-size: .95rem; box-shadow: 0 0 0 1.5px rgba(var(--fg-rgb),.08) inset; }
.legal-card th, .legal-card td { text-align: left; padding: 13px 16px; border-bottom: 1px solid rgba(var(--fg-rgb),.07); vertical-align: top; }
.legal-card th { font-family: var(--title); font-weight: 600; background: var(--surface-2); }
.legal-card tr:last-child td { border-bottom: 0; }
.legal-card code, .code { font-family: ui-monospace, Consolas, monospace; background: var(--surface); border-radius: 8px; padding: 2px 8px; font-size: .88em; word-break: break-all; }
.legal-card .btn { margin-top: 10px; }
.legal-card .store-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.store-disabled { cursor: default; }
.store-disabled:hover { transform: none; }
.btn-danger { background: var(--brand-deep); color: #fff; --pop-c: #5B0A6E; }
.btn-danger:hover:not(:disabled) { background: #E400A7; }
.status-ok, .status-bad { border-radius: var(--r-l); padding: 16px 20px; animation: pop .45s var(--spring); }
.status-ok { background: rgba(0,182,255,.12); box-shadow: 0 0 0 1.5px rgba(0,182,255,.5) inset; }
.status-bad { background: rgba(255,0,184,.12); box-shadow: 0 0 0 1.5px rgba(255,0,184,.5) inset; }
.status-ok p, .status-bad p { margin: 0 0 6px; }
.code-input { margin-top: 8px; width: 100%; max-width: 380px; }
.result-box { margin-top: 18px; }

/* headings and boxes ease in as the page is scrolled (legal.js turns this on, unless motion is switched down) */
.anim .legal-card h2:not(.in), .anim .legal-card .callout:not(.in), .anim .legal-card table:not(.in) { opacity: 0; transform: translateY(18px); }
.anim .legal-card h2, .anim .legal-card .callout, .anim .legal-card table { transition: opacity .6s var(--glide), transform .7s var(--spring); }

@media (max-width: 600px) {
  .legal-wrap { margin-top: 12px; }
  .legal-nav .top-link { padding: 8px 9px; font-size: .8rem; }
  .brand span { display: none; }
  .legal-card table { table-layout: fixed; font-size: .88rem; }
  .legal-card th, .legal-card td { overflow-wrap: anywhere; padding: 10px 10px; } /* long permission names must wrap, not widen the page */
}