/* ============================================================
   site.css — shared layout for the landing hub + section pages.
   Uses core.css design tokens; no hard-coded colors.
   ============================================================ */

/* dvh = the VISIBLE viewport on phones (100vh includes the space behind the
   mobile address bar, pushing footers under the chrome). Older browsers skip
   the dvh line and keep the vh fallback. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-lg); }

/* ── Header ── */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--panel); background-image: var(--panel-gradient);
    position: sticky; top: 0; z-index: var(--z-dropdown);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.site-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-md); padding-bottom: var(--space-md);
}
.header-actions { display: flex; gap: var(--space-md); align-items: center; }
.header-actions #auth-slot { display: inline-flex; align-items: center; gap: var(--space-md); }
.header-actions .who {
    font-size: 0.85rem; color: var(--text-muted);
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wordmark {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--brand-text); text-decoration: none; display: flex; align-items: baseline; gap: 10px;
}
.wordmark .sub { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body); }

/* ── Hero ── */
.hero { text-align: center; padding: var(--space-2xl) 0 var(--space-lg); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.12; color: var(--brand-text); margin: 0 0 var(--space-sm); }
.hero .tagline { font-size: 1.05rem; color: var(--text-muted); margin: 0 0 var(--space-sm); }
.hero .motto { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--brand-sec); margin: 0 0 var(--space-md); }
.hero p.lede { max-width: 620px; margin: 0 auto; font-size: 1.02rem; line-height: 1.6; color: var(--text-muted); }
.rule { width: 80px; height: 2px; margin: var(--space-lg) auto 0; background: linear-gradient(90deg, transparent, var(--brand-sec), transparent); border: 0; }

/* ── Breadcrumb (section pages) ── */
.crumb { padding: var(--space-lg) 0 0; font-size: 0.85rem; color: var(--text-muted); }
.crumb a { color: var(--text-muted); }
.page-head { padding: var(--space-md) 0 var(--space-lg); }
.page-head h1 { font-family: var(--font-display); font-size: 2rem; color: var(--brand-text); margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--text-muted); }

/* ── Grid + cards ── */
.section-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: var(--space-xl) 0 var(--space-md); }
.grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding-bottom: var(--space-2xl); }

.app-card {
    display: flex; flex-direction: column;
    background: var(--panel); background-image: var(--panel-gradient);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-lg); text-decoration: none; color: var(--text);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative; overflow: hidden;
}
.app-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-sec); opacity: 0; transition: opacity var(--transition); }
.app-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.app-card:hover::before { opacity: 1; }

.app-card.locked { opacity: 0.92; }
.app-card.locked .go { color: var(--text-muted); }
.app-card.soon { cursor: default; }
.app-card.soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
.app-card.soon:hover::before { opacity: 0; }

.chip {
    align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--brand-text); background: var(--accent-muted);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: 3px 10px; margin-bottom: var(--space-md);
}
.chip.muted { color: var(--text-muted); background: var(--muted); }
.app-card h3 { font-family: var(--font-display); font-size: 1.22rem; margin: 0 0 6px; color: var(--brand-text); }
.app-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.app-card .go { margin-top: var(--space-md); font-size: 0.85rem; font-weight: 600; color: var(--brand-text); }

/* ── Notice banner (e.g. awaiting approval) ── */
.notice {
    display: flex; gap: var(--space-sm); align-items: flex-start;
    margin: var(--space-lg) 0 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--accent-muted);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    color: var(--text); font-size: 0.92rem; line-height: 1.5;
}
.notice .notice-ico { font-size: 1.1rem; line-height: 1.3; }
.notice strong { color: var(--brand-text); }

/* ── Footer ── */
.site-footer { margin-top: auto; border-top: 1px solid var(--border); background: var(--panel); font-size: 0.85rem; color: var(--text-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.site-footer a { color: var(--text-muted); }

/* ── Login gate (shared by every gated app page) ──
   Hidden by default; the app's chrome-init script adds .show when the
   tier check fails. Without these rules the gate markup would render
   as a plain block at the bottom of the page. */
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.auth-gate.show { display: flex; }
body.gated { overflow: hidden; }

.auth-gate-card {
    background: var(--panel);
    background-image: var(--panel-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-xl);
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.auth-gate-card h2 { margin: 0 0 var(--space-sm); color: var(--brand-text); }
.auth-gate-card p { color: var(--text-muted); margin: 0 0 var(--space-lg); }
.auth-gate-logo {
    font-family: var(--font-display, serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-text);
    margin-bottom: var(--space-md);
}
.auth-gate-back {
    display: inline-block;
    margin-top: var(--space-md);
    font-size: 0.88rem;
    color: var(--text-muted);
}