/*
  Shared styling for /privacy.html, /terms.html, /about.html.
  Lives in /public/ so Firebase Hosting serves it verbatim — required
  because the CSP in firebase.json (style-src 'self' ...) blocks inline
  <style> blocks. Mirrors a minimal subset of styles/tokens.css; values
  are intentionally hard-coded so these standalone pages don't depend on
  the bundled CSS hash. If a token changes upstream (very rare) update
  here too — kept narrow on purpose.
*/

:root {
    --clr-primary:        #2978f0;
    --clr-ink:            #0c1f3d;
    --clr-ink-soft:       #4a5d7c;
    --clr-surface:        #ffffff;
    --clr-bg-top:         #f5f9ff;
    --clr-bg-bottom:      #eaf2ff;
    --clr-subtle-text:    #9aabba;
    --clr-warning-bg:     #fff6e0;
    --clr-warning-border: #d6a93a;
    --clr-warning-text:   #7c5a00;
    --r-md:               12px;
    --r-bubble:           22px;
    --r-pill:             999px;
    --shadow-bubble-2:    0 2px 0 var(--clr-ink);
    --font-body:          'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--clr-ink);
    background: linear-gradient(180deg, var(--clr-bg-top), var(--clr-bg-bottom));
    line-height: 1.6;
    min-height: 100vh;
}

.legal-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 20px 96px;
}

a {
    color: var(--clr-primary);
    font-weight: 700;
}

a:hover {
    text-decoration: underline;
}

.back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    padding: 8px 14px;
    background: var(--clr-surface);
    border: 2px solid var(--clr-ink);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-bubble-2);
    color: var(--clr-ink);
    font-size: 0.85em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.back:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.back:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--clr-ink);
}

h1 {
    font-size: 1.8em;
    font-weight: 900;
    margin: 0 0 4px;
    color: var(--clr-ink);
}

h2 {
    font-size: 1.05em;
    font-weight: 800;
    margin: 32px 0 8px;
    color: var(--clr-ink);
}

p {
    margin: 0 0 12px;
    color: var(--clr-ink-soft);
}

ul {
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--clr-ink-soft);
}

li {
    margin-bottom: 4px;
}

em {
    color: var(--clr-subtle-text);
    font-style: normal;
    font-size: 0.92em;
}

.updated {
    color: var(--clr-subtle-text);
    font-size: 0.82em;
    margin-bottom: 28px;
}

.lang-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.lang-btn {
    background: var(--clr-surface);
    border: 2px solid var(--clr-ink);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 0.95em;
    font-weight: 700;
    color: var(--clr-ink);
    cursor: pointer;
    box-shadow: var(--shadow-bubble-2);
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn:hover {
    transform: translateY(-1px);
}

.lang-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--clr-ink);
}

.lang-btn.active {
    background: var(--clr-primary);
    color: var(--clr-surface);
}

/* about.html specifics — colofon grid + placeholder warning. Unused on
   privacy.html / terms.html, no-op there. */
.colofon-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
    margin: 12px 0 16px;
    padding: 20px 22px;
    background: var(--clr-surface);
    border: 2px solid var(--clr-ink);
    border-radius: var(--r-bubble);
    box-shadow: var(--shadow-bubble-2);
}

.colofon-grid dt {
    margin: 0;
    font-weight: 800;
    color: var(--clr-ink);
}

.colofon-grid dd {
    margin: 0;
    color: var(--clr-ink-soft);
}

.placeholder-warning {
    background: var(--clr-warning-bg);
    border: 2px solid var(--clr-warning-border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin: 16px 0 28px;
    font-size: 0.9em;
    color: var(--clr-warning-text);
    box-shadow: 0 2px 0 var(--clr-warning-border);
}