/* ============================================================
   ts25 — public area styles
   Built on /assets/tokens.css. The .public-* class names are
   preserved from the prior design so templates don't need
   wholesale renaming; the rules below give them the new look.
   ============================================================ */

@import url('/assets/tokens.css');

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.public-layout {
    margin: 0;
    color: var(--fg-2);
    background: var(--bg-page);
    font-family: var(--font-sans);
    font-size: var(--fs-15);
    line-height: var(--lh-15);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.public-layout[data-drawer-open] { overflow: hidden; }

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ============================================================
   Header
   ============================================================ */

.public-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid var(--border);
}

.public-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: 72px;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.public-logo {
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    line-height: 1;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 26px;
    letter-spacing: var(--tracking-tighter);
    color: var(--fg-1);
    text-decoration: none;
}

.public-logo__spark { margin-top: 2px; color: var(--brand-orange); }

.public-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-6);
}

.public-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease);
}

.public-nav a:hover { background: var(--surface-hover); text-decoration: none; }

.public-header__cta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.public-hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: var(--fg-2);
    cursor: pointer;
}

@media (max-width: 880px) {
    .public-nav { display: none; }
    .public-header__cta .public-btn--secondary { display: none; }
    .public-hamburger { display: inline-flex; }
}

/* ============================================================
   Public mobile nav (off-canvas drawer)
   Hidden on desktop entirely; below the same 880px breakpoint
   that hides .public-nav, the hamburger reveals this sheet via
   the body[data-drawer-open] attribute that app.js toggles.
   The matching .member-drawer-backdrop element is rendered by
   header_public.php and styled in member.css (loaded only on
   member layouts) — for the public layout we re-declare the
   minimal backdrop rules here so it works without the member
   stylesheet.
   ============================================================ */

.public-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 60;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    padding: var(--space-4) var(--space-5) var(--space-6);
    gap: var(--space-4);
    overflow-y: auto;
}

.public-mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.public-mobile-nav__close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--fg-2);
    cursor: pointer;
}

.public-mobile-nav__close:hover { background: var(--surface-hover); }

.public-mobile-nav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.public-mobile-nav__links a {
    display: block;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--fg-1);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.public-mobile-nav__links a:hover {
    background: var(--surface-inset);
    text-decoration: none;
}

.public-mobile-nav__ctas {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.member-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    z-index: 55;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

@media (max-width: 880px) {
    .public-mobile-nav { display: flex; }
}

body.public-layout[data-drawer-open] .public-mobile-nav { transform: translateX(0); }
body.public-layout[data-drawer-open] .member-drawer-backdrop { display: block; opacity: 1; }

/* ============================================================
   Main / shells
   ============================================================ */

.public-main { min-height: calc(100vh - 72px - 200px); }

.public-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6);
}

.public-shell--narrow { max-width: 720px; }
.public-shell--medium { max-width: 920px; }

@media (max-width: 720px) {
    .public-shell { padding: var(--space-8) var(--space-4); }
}

/* ============================================================
   Hero (homepage)
   ============================================================ */

.public-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.public-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 85% 0%, rgba(255, 122, 26, 0.08), transparent 60%),
        var(--bg-page-grid);
    pointer-events: none;
}

.public-hero__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-24) var(--space-6) var(--space-20);
    text-align: center;
}

.public-hero h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: var(--tracking-tighter);
    color: var(--fg-1);
    margin: var(--space-5) auto 0;
    max-width: 880px;
    text-wrap: balance;
}

.public-hero h1 em,
.public-hero h1 .accent { color: var(--brand-orange); font-style: normal; }

.public-hero p {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
    color: var(--fg-3);
    margin: var(--space-5) auto 0;
    max-width: 620px;
}

.public-hero-sponsor {
    display: inline-block;
    margin: var(--space-4) auto 0;
    padding: 6px var(--space-3);
    background: var(--brand-orange-50);
    border: 1px solid var(--brand-orange-100);
    border-radius: var(--radius-full);
    font-size: var(--fs-13);
    color: var(--brand-orange-700);
    font-weight: var(--fw-medium);
}

.public-hero-cta {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8) !important;
    flex-wrap: wrap;
}

/* ============================================================
   Buttons
   ============================================================ */

.public-btn,
.public-cta,
.public-nav-cta,
.public-btn--primary,
.public-btn--secondary,
.public-btn--ghost,
.public-main button,
.public-main input[type="submit"],
button.public-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 11px var(--space-5);
    background: var(--brand-orange);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.public-btn:hover,
.public-cta:hover,
.public-nav-cta:hover,
.public-btn--primary:hover,
.public-main button:hover,
.public-main input[type="submit"]:hover,
button.public-btn:hover {
    background: #FF8B33;
    box-shadow: var(--shadow-glow);
    color: #fff;
    text-decoration: none;
}

.public-btn:active,
.public-btn--primary:active { transform: scale(0.98); }

.public-btn--secondary {
    background: #fff;
    color: var(--fg-1);
    border-color: var(--border-strong);
}

.public-btn--secondary:hover {
    background: var(--surface-hover);
    box-shadow: none;
    color: var(--fg-1);
}

.public-btn--ghost {
    background: transparent;
    color: var(--fg-2);
    border-color: transparent;
}

.public-btn--ghost:hover {
    background: var(--surface-hover);
    box-shadow: none;
    color: var(--fg-1);
}

.public-btn--lg {
    padding: 14px var(--space-6);
    font-size: var(--fs-16);
    border-radius: var(--radius-lg);
}

.public-btn--sm {
    padding: 7px var(--space-3);
    font-size: var(--fs-13);
    border-radius: var(--radius-sm);
}

.public-btn--block { width: 100%; }

.public-nav-cta { padding: 8px var(--space-4); font-size: var(--fs-13); }

.public-btn[disabled],
.public-btn--primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   Cards / surfaces
   ============================================================ */

.public-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.public-card + .public-card { margin-top: var(--space-4); }

.public-card__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* ============================================================
   Headings inside content
   ============================================================ */

.public-content h1,
.public-shell h1,
.public-main > h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-36);
    line-height: var(--lh-36);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

.public-content h2,
.public-shell h2,
.public-main h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-24);
    line-height: var(--lh-24);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
    margin: var(--space-8) 0 var(--space-3);
}

.public-content h3,
.public-shell h3,
.public-main h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-20);
    line-height: var(--lh-20);
    color: var(--fg-1);
    margin: var(--space-6) 0 var(--space-2);
}

.public-content p,
.public-shell p,
.public-main p {
    font-size: var(--fs-15);
    line-height: 1.65;
    color: var(--fg-2);
    margin: 0 0 var(--space-4);
}

.public-content ul,
.public-shell ul,
.public-main ul:not(.bare) { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.public-content ul li,
.public-shell ul li,
.public-main ul li { margin: var(--space-1) 0; }

/* ============================================================
   Three-pillar block (used on home + about pages)
   ============================================================ */

.public-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.public-pillars > * {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.public-pillars h3 { margin-top: var(--space-3); }
.public-pillars p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
    .public-pillars { grid-template-columns: 1fr; }
}

/* ============================================================
   Tables
   ============================================================ */

.public-table,
.public-main table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.public-main thead th,
.public-table thead th {
    background: var(--surface-inset);
    color: var(--fg-4);
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-align: left;
    padding: var(--space-3) var(--space-4);
}

.public-main td,
.public-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--fg-2);
    font-size: var(--fs-14);
}

.public-row-special td { background: var(--brand-orange-50); }

/* ============================================================
   Forms
   ============================================================ */

.public-form { max-width: 520px; }

.public-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.public-form__row label {
    font-family: var(--font-sans);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    color: var(--fg-3);
}

.public-form__row .required { color: var(--brand-orange); margin-left: 2px; }

.public-form__row input[type="text"],
.public-form__row input[type="email"],
.public-form__row input[type="password"],
.public-form__row input[type="number"],
.public-form__row select,
.public-form__row textarea,
.public-main input[type="text"],
.public-main input[type="email"],
.public-main input[type="password"],
.public-main select,
.public-main textarea {
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    color: var(--fg-1);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.public-form__row textarea,
.public-main textarea {
    height: auto;
    min-height: 96px;
    padding: var(--space-3);
    line-height: 1.5;
}

.public-form__row input:focus,
.public-form__row select:focus,
.public-form__row textarea:focus,
.public-main input:focus,
.public-main select:focus,
.public-main textarea:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18);
}

.public-form__row small { color: var(--fg-4); font-size: var(--fs-12); }

.public-form__hint { color: var(--danger) !important; }

.public-form__row--captcha { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.public-form__row--captcha label { width: 100%; }
.public-form__row--captcha input { width: 120px; }

.public-form__row--checks { gap: var(--space-2); }
.public-form__row--checks label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--fg-2);
    font-weight: var(--fw-regular);
}

.public-form__row--submit { margin-top: var(--space-6); }

.public-form__row--submit button { padding: 12px var(--space-6); font-size: var(--fs-15); }

/* ============================================================
   Tonal callouts (errors, warnings, asides)
   ============================================================ */

.public-error {
    background: var(--danger-bg);
    border: 1px solid #FCA5A5;
    color: var(--danger-fg);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.public-error ul { margin: var(--space-2) 0 0 var(--space-5); }

.public-aside {
    color: var(--fg-4);
    font-size: var(--fs-13);
}

/* ============================================================
   Footer
   ============================================================ */

.ts25-footer {
    background: var(--fg-1);
    color: #fff;
    padding: var(--space-16) var(--space-6) var(--space-8);
}

.ts25-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-12);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--slate-800);
}

.ts25-footer__brand p {
    color: var(--slate-400);
    font-size: var(--fs-14);
    line-height: 1.6;
    margin: var(--space-4) 0 0;
    max-width: 280px;
}

.ts25-footer__col-title {
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--slate-400);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-4);
}

.ts25-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ts25-footer ul li { margin: 0; }
.ts25-footer ul a { color: var(--slate-300); font-size: var(--fs-14); text-decoration: none; }
.ts25-footer ul a:hover { color: #fff; text-decoration: none; }

.ts25-footer__bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--slate-500);
    font-size: var(--fs-13);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ts25-footer__version { font-family: var(--font-mono); }

.ts25-footer__bottom-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ts25-footer__bottom-links a { color: var(--slate-500); }
.ts25-footer__bottom-links a:hover { color: #fff; }

@media (max-width: 880px) {
    .ts25-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 560px) {
    .ts25-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   Login surface (split screen)
   ============================================================ */

.login-shell {
    min-height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-page);
}

.login-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
}

.login-form-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.login-form-card h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-30);
    line-height: var(--lh-30);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
    margin: var(--space-3) 0 var(--space-5);
}

.login-form-card p { margin: 0 0 var(--space-4); }

.login-form-card .public-form { max-width: none; }

.login-form-card .public-form__row--submit button { width: 100%; }

.login-marketing-pane {
    background: var(--fg-1);
    color: #fff;
    padding: var(--space-12) var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-marketing-pane::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 500px at 80% 30%, rgba(255, 122, 26, 0.16), transparent 60%);
    pointer-events: none;
}

.login-marketing-pane > * { position: relative; }

.login-marketing-pane h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-36);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: #fff;
    margin: var(--space-4) 0;
    max-width: 420px;
    text-wrap: balance;
}

.login-marketing-pane p { color: var(--slate-300); font-size: var(--fs-15); line-height: 1.6; max-width: 420px; }

.login-marketing-pane .ts-eyebrow { color: var(--brand-orange); }

.login-stats {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding: var(--space-4) var(--space-5);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    width: fit-content;
}

.login-stats__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
}

.login-stats span { color: var(--slate-300); font-size: var(--fs-13); }
.login-stats strong { color: #fff; font-family: var(--font-mono); font-weight: var(--fw-semibold); }

.login-divider {
    margin: var(--space-5) 0;
    border: none;
    border-top: 1px solid var(--border);
}

@media (max-width: 880px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-marketing-pane { display: none; }
}

/* ============================================================
   Splash variants (fast first paint - keep minimal)
   ============================================================ */
/* See public/splash.php — that template ships its own inline styles. */

/* ============================================================
   Required-asterisk for register form
   ============================================================ */
.required { color: var(--brand-orange); font-weight: var(--fw-semibold); }

/* ============================================================
   Content shell — used by every legacy `<section class="public-content">`
   so they get the design-system padding + max-width without per-file
   edits. Visual parity with `.public-shell--narrow`.
   ============================================================ */

.public-content {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--space-12) var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.public-content > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.public-content > *:first-child { margin-top: 0; }
.public-content > .public-table,
.public-content > table { max-width: 100%; }

.public-content--narrow { max-width: 640px; }
.public-content--narrow > * { max-width: 480px; }

@media (max-width: 880px) {
    .public-content {
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
        padding: var(--space-8) var(--space-5);
        max-width: calc(100% - var(--space-8));
    }
}

/* ============================================================
   FAQ definition list (about/works.php pattern)
   ============================================================ */

.public-faq dt {
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    margin-top: var(--space-4);
}

.public-faq dd {
    margin: 6px 0 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--brand-orange);
    color: var(--fg-2);
}

/* ============================================================
   Misc
   ============================================================ */

code, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--surface-inset);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}