/* Portal stylesheet — keep tiny, no framework. Same brand palette as admin. */

:root {
    --brand-red: #8B1A1A;
    --brand-red-light: #a82222;
    --bg-page: #f6f5f3;
    --bg-card: #ffffff;
    --bg-input: #f8f7f5;
    --text-primary: #1a1a1a;
    --text-muted: #6a6a6a;
    --border: #e2dfd9;
    --warn-bg: #fdf3e5;
    --warn-border: #e7b87a;
    --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(139,26,26,0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Reserve scrollbar space ALWAYS so a tall page (step 4) and a short
   page (steps 1-2) render at the exact same usable viewport width.
   Without this the wizard appears to "shrink" when the browser adds
   a scrollbar on tall steps.

   overflow-y: scroll is the universal fallback (Safari, older browsers) —
   always shows a scroll track. scrollbar-gutter: stable is the modern
   equivalent that only shows the track when scrollable but still
   reserves the space. Feature-detect so each browser gets the better
   one it supports. */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
    html { overflow-y: auto; scrollbar-gutter: stable; }
}
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    width: 100%;
}
/* Brand bar — sits ABOVE any card, never inside one. Keeps the logo
   free-floating and avoids the frame-in-frame look when a page renders
   its own card. */
.brand-bar {
    width: 100%;
    text-align: center;
    margin-bottom: 22px;
}
.logo {
    max-width: 220px; max-height: 80px;
    width: auto; height: auto;
}
/* Base card: each page wraps its content in its own .card so width is
   per-page (landing/invalid stay narrow, proposal goes wider). */
.card {
    background: var(--bg-card);
    border-radius: 14px;
    border-top: 4px solid var(--brand-red);
    box-shadow: var(--shadow);
    padding: 40px 44px;
    width: 100%;
    text-align: center;
}
.card-sm { width: 100%; max-width: 560px; }
/* card-lg is the wizard. Lock width so different steps render identically;
   min-width on the page prevents inner content from squeezing it narrower. */
.card-lg {
    width: 100%; max-width: 720px;
    padding: 0; text-align: left;
    min-width: 0;  /* allow flex/grid children to wrap rather than expand parent */
}
.card-lg > * { min-width: 0; }  /* same — children can't push the card wider */
.check-circle {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(46,160,67,0.12); color: #2ea043;
    font-size: 2rem; line-height: 56px;
    margin: 0 auto 14px;
}
.welcome {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    margin: 0 0 14px;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.lede {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 22px;
}
.callout {
    background: rgba(139,26,26,0.04);
    border: 1px solid rgba(139,26,26,0.18);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0 22px;
    text-align: left;
    font-size: 0.95em;
}
.callout strong { color: var(--brand-red); }
.callout-warn {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}
.muted {
    font-size: 0.85em;
    color: var(--text-muted);
    margin: 0;
}
a {
    color: var(--brand-red-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(168,34,34,0.3);
}
a:hover { border-bottom-color: var(--brand-red-light); }
.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 16px auto 22px;
    text-align: left;
    max-width: 360px;
    font-size: 0.92em;
}
.kv dt { color: var(--text-muted); font-weight: 500; }
.kv dd { margin: 0; font-weight: 500; }
.page-footer {
    color: var(--text-muted);
    font-size: 0.78em;
    padding: 22px 18px 28px;
    text-align: center;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 8px;
    letter-spacing: 0.01em;
}
.page-footer .sep { opacity: 0.5; }
.page-footer a {
    color: var(--text-muted);
    border-bottom: 1px dotted rgba(106,106,106,0.35);
}
.page-footer a:hover {
    color: var(--brand-red-light);
    border-bottom-color: var(--brand-red-light);
}
.page-footer .expires {
    font-feature-settings: "tnum";
    font-size: 0.92em;
}

/* Sign & Accept (proposal step 4) */
.terms-box {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 18px;
    max-height: 280px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.88em;
    line-height: 1.55;
}
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    cursor: pointer;
    font-size: 0.93em;
}
.check-row input[type="checkbox"] {
    margin: 3px 0 0 0;
    cursor: pointer;
    flex-shrink: 0;
}
.sign-row { margin-top: 14px; }
.sign-row label {
    display: block;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.sign-row input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.1em;
}
.sign-row input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-red-light);
    box-shadow: 0 0 0 3px rgba(139,26,26,0.12);
}
.sign-meta {
    font-size: 0.78em;
    color: var(--text-muted);
    margin: 8px 0 0;
}
.accept-err {
    color: var(--brand-red-light);
    font-size: 0.88em;
    min-height: 18px;
    margin-top: 10px;
}
.wiz-step-label {
    color: var(--text-muted);
    font-size: 0.82em;
}

@media (max-width: 520px) {
    .card { padding: 28px 22px; border-radius: 10px; }
    .card-lg { padding: 0; }
    .logo { max-width: 180px; }
    .welcome { font-size: 1.4rem; }
}