/* Standalone Arthos pages (privacy notice, unsubscribe). Independent of main.css so they
   load fast and work without the app. */
:root {
    --page-bg: #f5f7fb;
    --surface: #ffffff;
    --text: #111827;
    --muted: #4b5563;
    --border: #e5e7eb;
    --accent: #0047eb;
    --accent-text: #ffffff;
    --ok: #047857;
    --error: #b91c1c;
    --focus: #2563eb;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #0b0c10;
        --surface: #171923;
        --text: #f7fafc;
        --muted: #a0aec0;
        --border: #2d3748;
        --accent: #8bb7ff;
        --accent-text: #0b0c10;
        --ok: #6ee7b7;
        --error: #fca5a5;
        --focus: #8bb7ff;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: 'Outfit', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 16px 64px;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.page-header img { width: 40px; height: 40px; }
.page-header .brand { font-size: 1.4rem; font-weight: 700; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 1.2rem; margin: 32px 0 8px; }
p, li { color: var(--text); }
.meta, .muted { color: var(--muted); }
.meta { margin: 0 0 24px; font-size: 0.95rem; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { font-weight: 600; }

.summary {
    border-left: 4px solid var(--accent);
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 0 8px 8px 0;
}

.button {
    display: inline-block;
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.button[disabled] { opacity: 0.6; cursor: progress; }

.status { margin: 16px 0 0; font-weight: 600; }
.status[data-tone="ok"] { color: var(--ok); }
.status[data-tone="error"] { color: var(--error); }

[hidden] { display: none !important; }

@media (max-width: 480px) {
    .card { padding: 20px; }
    h1 { font-size: 1.5rem; }
    table, thead, tbody, tr, th, td { display: block; }
    thead { display: none; }
    td { border-bottom: 0; padding: 4px 0; }
    tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
    td:first-child { font-weight: 600; }
}