/* Marine ECDIS Lab public pages (privacy, account deletion, help). Static; deployed with docs/play/site/wrangler.toml. */
:root {
  --bg: #f4f6f8; --surface: #ffffff; --ink: #0d1b2a; --muted: #4b5d70; --line: #d5dde5; --accent: #9a5b00;
  --hero-bg: #08131d; --hero-ink: #e8eef4; --hero-muted: #9db0c3; --route: #ffb454; --danger: #b4232c;
  --display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #07111a; --surface: #0d1820; --ink: #e6edf4; --muted: #9db0c3; --line: #1f3347; --accent: #ffb454; --danger: #ff6b6b; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #07111a; --surface: #0d1820; --ink: #e6edf4; --muted: #9db0c3; --line: #1f3347; --accent: #ffb454; --danger: #ff6b6b; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
a { color: var(--accent); overflow-wrap: anywhere; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 600px) { .wrap { padding-inline: 32px; } }
.top { background: var(--hero-bg); color: var(--hero-ink); }
.top .wrap { max-width: 1040px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 12px; }
.brand { color: var(--route); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: 0.12em; text-transform: uppercase; }
.top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 16px; }
.top nav a { color: var(--hero-muted); font-size: 14px; text-decoration: none; }
.top nav a[aria-current="page"] { color: var(--hero-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--route); }
header.lead { background: var(--hero-bg); color: var(--hero-ink); padding-block: clamp(28px, 6vw, 64px); }
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--route); margin: 0 0 12px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 6vw, 56px); text-transform: uppercase; letter-spacing: 0.02em; }
h2 { font-size: clamp(24px, 3.4vw, 30px); text-transform: uppercase; margin: 40px 0 12px; }
h3 { font-size: 19px; text-transform: uppercase; margin: 22px 0 8px; }
header.lead p { color: var(--hero-muted); font-size: 18px; margin: 18px 0 0; max-width: 60ch; }
main { padding-block: clamp(24px, 5vw, 48px); }
main p, main ul, main ol { margin: 0 0 14px; }
main ul, main ol { padding-left: 1.3em; }
main li { margin-bottom: 6px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(16px, 4vw, 24px); margin: 0 0 16px; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }
.warn { border-left: 4px solid var(--danger); }
.btn { display: inline-block; font-weight: 600; padding: 13px 20px; border-radius: 6px; text-decoration: none; background: var(--route); color: #101820; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.scroll { overflow-x: auto; }
.muted { color: var(--muted); }
footer { border-top: 1px solid var(--line); padding-block: 22px 40px; color: var(--muted); font-size: 14px; }