/* Odyse — odyse.app
 *
 * One stylesheet for every page on the apex. No build step, no framework: these
 * pages are read once by a stranger deciding whether to trust a link, so they
 * load in one request and nothing blocks paint.
 *
 * System fonts on purpose. The app is Apple-native and these pages are mostly
 * opened from an iPhone, so -apple-system matches what the reader already has
 * on screen and costs no download. */

:root {
    color-scheme: light dark;

    --bg:            #fbfaf8;
    --bg-raised:     #ffffff;
    --text:          #1c1b19;
    --text-dim:      #6b6862;
    --rule:          #e6e2dc;
    --accent:        #0a6b62;
    --accent-text:   #ffffff;
    --warn-bg:       #fdf6e3;
    --warn-rule:     #e8d9a8;
    --warn-text:     #6b5518;

    --measure:       38rem;
    --radius:        14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #141412;
        --bg-raised:   #1e1d1b;
        --text:        #f2f0ec;
        --text-dim:    #a3a09a;
        --rule:        #33312d;
        --accent:      #4fd1c2;
        --accent-text: #0d2b28;
        --warn-bg:     #2a2410;
        --warn-rule:   #4d4222;
        --warn-text:   #e8d9a8;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 16px 6rem;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--measure); margin: 0 auto; }

/* Masthead ---------------------------------------------------------------- */

header.site {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2rem 0 1rem;
}

header.site a.wordmark {
    font-size: 1.25rem;
    font-weight: 620;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
}

/* Type -------------------------------------------------------------------- */

h1 {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 660;
    margin: 1.5rem 0 0.5rem;
}

h2 {
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    font-weight: 620;
    margin: 2.5rem 0 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

h3 { font-size: 1rem; font-weight: 620; margin: 1.5rem 0 0.25rem; }

p  { margin: 0 0 1rem; }

.lede { font-size: 1.125rem; color: var(--text-dim); margin-bottom: 2rem; }

.meta { font-size: 0.875rem; color: var(--text-dim); }

a { color: var(--accent); text-underline-offset: 2px; }

ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }

li { margin-bottom: 0.4rem; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: 1px 5px;
}

/* Blocks ------------------------------------------------------------------ */

.card {
    background: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.notice {
    background: var(--warn-bg);
    border: 1px solid var(--warn-rule);
    color: var(--warn-text);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.notice :last-child { margin-bottom: 0; }

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 590;
    text-decoration: none;
    padding: 0.7rem 1.4rem;
    border-radius: 980px;
    border: none;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}

.btn.secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--rule);
}

/* The invite token, shown so it can be copied into the app by hand. Breaks
 * anywhere because it is 43 characters of base64url with no natural seam. */
.token {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9375rem;
    word-break: break-all;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 9px;
    padding: 0.75rem;
    display: block;
    margin-bottom: 0.875rem;
}

/* Footer ------------------------------------------------------------------ */

footer.site {
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.875rem;
    color: var(--text-dim);
}

footer.site a { color: var(--text-dim); margin-right: 1rem; }

@media (max-width: 480px) {
    h1 { font-size: 1.625rem; }
    body { font-size: 16px; }
}

/* Draft marker. Used only by /terms and /privacy while they are unreviewed —
 * every occurrence is a decision nobody has made yet, so `grep -c 'class="tbd"'`
 * over public/ is the count of what is still open. Delete the rule when the
 * last one goes. */
.tbd {
    background: var(--warn-bg);
    border-bottom: 2px solid var(--warn-rule);
    color: var(--warn-text);
    padding: 0 3px;
    font-style: normal;
}