/*
 * Shared stylesheet for the Thymeleaf /auth/** surface (api#177 option C).
 *
 * Pre-#177-option-C each auth template embedded an identical-shaped <style> block
 * inline; this file deduplicates them so the SecurityConfig CSP can drop
 * 'unsafe-inline' from style-src. Templates pick a body class (or .card modifier)
 * for the per-page variant rather than redefining the base styles. The email/*
 * templates deliberately keep their inline styles — email clients strip <link>
 * tags and class selectors, so external CSS is impractical there.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.card {
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Status pages (verify / email-change / reset-password success+error) center
   everything in the card; the form page leaves the card left-aligned so form
   labels and the hint text under the password input read correctly. */
.card--centered { text-align: center; }

/* Prose pages (legal/privacy, legal/terms) widen the card and left-align text
   so multi-paragraph long-form content reads naturally. The auth surface's
   420px card is too narrow for legal prose; 720px matches conventional
   long-form web text width. Reuses the same stylesheet so the strict CSP from
   api#177 option C carries over — no inline styles, no per-page <style> blocks.
   Heading and table treatments below are scoped to .card--prose so they don't
   bleed into the auth surface. */
.card--prose {
    max-width: 720px;
    padding: 48px 56px;
    text-align: left;
}

/* On narrow viewports the desktop padding crowds the text; tighten to match
   the auth card's mobile feel. */
@media (max-width: 540px) {
    .card--prose { padding: 32px 24px; }
}

.card--prose h1 {
    font-size: 26px;
    margin-bottom: 8px;
    text-align: left;
}

.card--prose h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 28px 0 10px;
}

.card--prose p {
    text-align: left;
    margin-bottom: 14px;
    color: #333;
}

.card--prose ul {
    margin: 0 0 14px 24px;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

.card--prose li { margin-bottom: 6px; }

.card--prose a { color: #1976d2; }

.card--prose code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    background: #f5f5f5;
    padding: 1px 5px;
    border-radius: 4px;
}

/* "Last updated" meta line under the title. Smaller and muted so it sits
   between the heading and the body without competing for attention. */
.prose-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}

/* TL;DR callout at the top of each legal page. Distinct background so the
   plain-English summary visually separates from the section-numbered body. */
.prose-callout {
    background: #eef4fb;
    border-left: 3px solid #1976d2;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0 0 24px;
}

.prose-callout strong { color: #1976d2; }

/* Subprocessor table in the privacy policy. Borders are subtle so the table
   reads as part of the prose rather than as a data grid. */
.prose-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 14px;
}

.prose-table th,
.prose-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.prose-table th {
    background: #f7f9fc;
    font-weight: 600;
    color: #555;
    font-size: 13px;
}

.icon { margin-bottom: 20px; font-size: 56px; }
.card--form .icon { font-size: 48px; text-align: center; }

/* Brand mark for the welcome / entry pages (invite landing + reset-password form).
   Those two pages are pure brand chrome, so they swap the decorative emoji for the
   real product mark (api#342). The status pages keep their emoji glyph instead,
   because there the icon also carries the success/error/warning signal (paired with
   .heading--success / .heading--error) so it can't be replaced by a logo.

   The asset is the vector favicon (/img/favicon.svg) scaled up — same-origin, so the
   strict default-src 'self' CSP serves it with no img-src relaxation, and CSP forbids
   inline style="..." so the sizing has to live here as a class. display:block + auto
   side margins center it independently of the card's text-align (the .card--form card
   is left-aligned); height-only sizing preserves the mark's near-square aspect ratio. */
.brand-mark { display: block; height: 64px; width: auto; margin: 0 auto 20px; }
.card--form .brand-mark { height: 52px; }

h1 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }

/* Per-status heading color. Conveys success/error with both icon AND color so
   color-blind users still get the signal from the emoji glyph alone — the
   accessibility-equivalent rule from CLAUDE.md § DoseSafetyBadge applies here
   too. */
/* All three status-heading variants are centered to match the centered body
   copy of the cards they sit on. Centering lives here (api#359) — not only on
   .heading--neutral as it used to — so a status heading on a LEFT-aligned
   .card--form (the confirm-delete page) is centered like its paragraphs instead
   of inheriting the card's left alignment. No-op on the .card--centered status
   pages, which already center everything. */
.heading--success,
.heading--error,
.heading--neutral { text-align: center; }
.heading--success { color: #2e7d32; }
.heading--error   { color: #c62828; }
.heading--neutral { color: #1a1a1a; }

p { font-size: 15px; color: #555; line-height: 1.6; }
.card--centered p { margin-bottom: 12px; }
.card--form p { text-align: center; margin-bottom: 24px; }

/* Password-reset post-submit warning ("we'll sign you out of every device").
   Was an inline style="..." on the <p> until #177 option C — moved here so the
   CSP can drop 'unsafe-inline'. */
.warning {
    background: #fff8e1;
    border: 1px solid #ffe0a3;
    color: #7a5d00;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
    margin-bottom: 20px;
}

/* Form fields (reset-password-form only). */
label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
    font-weight: 500;
}

input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 16px;
}

input[type="password"]:focus {
    outline: none;
    border-color: #1976d2;
}

.hint {
    font-size: 12px;
    color: #888;
    margin: -10px 0 16px;
    text-align: left;
}

/* Server-rendered + client-rendered error slot (see reset-password-form.html).
   Shape is identical across both paths so the visual treatment doesn't shift
   based on whether the controller re-rendered the page or the JS match-check
   wrote into the slot. */
.form-error {
    background: #fdeded;
    color: #c62828;
    border: 1px solid #f5c2c2;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

button {
    width: 100%;
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

button:hover { background: #1565c0; }

/* Anchor styled as a primary button — used by the invite landing page (api#274) for the
   best-effort "Open in app" custom-scheme link. The button{} rule above can't apply (this
   is an <a>, not a <button>) and the strict CSP forbids inline styles, so the shared style
   lives here. No /auth or /legal template uses .btn, so adding it is inert for them. */
.btn {
    display: inline-block;
    background: #1976d2;
    color: #fff;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 8px;
}

.btn:hover { background: #1565c0; }

/* Centered hint variant (invite landing page). The base .hint is left-aligned with a
   negative top margin for the reset-password form field; the centered status cards want it
   centered under the button with normal top spacing instead. */
.hint--centered {
    text-align: center;
    margin: 16px 0 0;
}

/* Web footer fragment (fragments/footer.html :: web). The email/* fragment
   keeps inline styles — Outlook strips <style> blocks and many clients ignore
   class selectors, so external CSS is unusable in email bodies. */
.footer {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    text-align: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.footer p { margin: 0 0 4px; }
.footer p:last-child { margin: 0; }
.footer a { color: #888; }