/* =============================================================================
   SCLT — main.css  ·  Design system: 字帖 Zìtiě
   Aged Chinese practice-copybook aesthetic.
   All tokens live in :root — do not hardcode values elsewhere.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&family=Noto+Serif+SC:wght@400;700&display=swap");

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────── */
:root {
    /* Backgrounds — aged paper tones */
    --bg-page: #f0e8d5;
    --bg-card: #e8dfc4;
    --bg-nav: #ddd3b8;
    --bg-footer: #d4c9a0;

    /* Text — ink opacity scale */
    --text-primary: #1c1710;
    --text-secondary: rgba(28, 23, 16, 0.8);
    --text-muted: rgba(28, 23, 16, 0.55);
    --text-subtle: rgba(28, 23, 16, 0.38);
    --text-ghost: rgba(28, 23, 16, 0.22);
    --text-whisper: rgba(28, 23, 16, 0.1);

    /* Accent — practice book red */
    --accent: #c0392b;
    --accent-bg: rgba(192, 57, 43, 0.08);
    --accent-border: rgba(192, 57, 43, 0.25);

    /* Borders — ink opacity scale */
    --border-card: rgba(28, 23, 16, 0.12);
    --border-input: rgba(28, 23, 16, 0.18);
    --border-nav: rgba(28, 23, 16, 0.15);
    --border-ghost: rgba(28, 23, 16, 0.1);
    --border-grid: rgba(192, 57, 43, 0.2);
    /* Grid line colours — kept faint so characters read clearly over the grid */
    --grid-green: rgba(58, 112, 45, 0.22); /* faded green outer grid lines */
    --grid-red: rgba(192, 57, 43, 0.13); /* very faded red inner cross lines */

    /* Ghost backgrounds */
    --bg-hover: rgba(28, 23, 16, 0.05);
    --bg-ghost: rgba(28, 23, 16, 0.07);

    /* Status colours — muted to fit paper aesthetic */
    --success: #3d7a2f;
    --success-text: #4a9438;
    --success-bg: rgba(61, 122, 47, 0.1);
    --danger: #c0392b;
    --danger-text: #c0392b;
    --danger-bg: rgba(192, 57, 43, 0.1);
    --info: #2c5f8a;
    --info-text: #3a78ad;
    --info-bg: rgba(44, 95, 138, 0.08);

    /* Typography */
    --font: "Zhi Mang Xing", "STXingkai", "KaiTi", serif;
    --font-body: "Noto Serif SC", "STKaiti", serif;

    /* Spacing */
    --page-x: 24px;
    --page-y: 40px;
    --section-gap: 36px;
    --card-padding: 28px 24px;
    --nav-height: 60px;

    /* Radius — paper-like, not digital */
    --radius-card: 4px;
    --radius-btn: 3px;
    --radius-chip: 3px;
    --radius-input: 3px;
    --radius-tag: 2px;
    --radius-pill: 999px;
}

/* ── GLOBAL RESET ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overscroll-behavior: none;
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-primary);
    background-color: var(--bg-page);
    /* Two-layer paper texture:
       Layer 1 — fine grain (high frequency) simulates paper surface roughness
       Layer 2 — coarse grain (low frequency) simulates paper fiber and age patches */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.10' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23n2)' opacity='0.055'/%3E%3C/svg%3E");
    min-height: 100dvh;
    padding-top: var(--nav-height);
}

/* Links inherit colour, no underline */
a {
    color: inherit;
    text-decoration: none;
}

/* ── LAYOUT ────────────────────────────────────────────────────────────────── */
.container {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--page-y) var(--page-x);
}

.hero {
    padding: var(--page-y) var(--page-x);
}

.page-center {
    min-height: calc(100dvh - var(--nav-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--page-y) var(--page-x);
    text-align: center;
}

/* ── TYPOGRAPHY ────────────────────────────────────────────────────────────── */
.text-display {
    font-family: var(--font);
    font-size: clamp(3rem, 9vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.1;
    color: var(--text-primary);
}

h1,
.text-h1 {
    font-family: var(--font);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--text-primary);
}

h2,
.text-h2 {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--text-primary);
}

h3,
.text-h3 {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
}

.text-body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
}

.text-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.text-caption {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.text-muted {
    color: var(--text-muted);
}
.text-subtle {
    color: var(--text-subtle);
}
.text-ghost {
    color: var(--text-ghost);
}
.text-accent {
    color: var(--accent);
}
.text-center {
    text-align: center;
}

/* ── CARDS ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: var(--card-padding);
}

/* 田字格 tiánzìgé — practice grid card
   The grid lives in ::before as a separate layer so a displacement filter
   can make lines look organically uneven without affecting the text above. */
.grid-card {
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid rgba(58, 112, 45, 0.18);
    border-radius: var(--radius-card);
    padding: var(--card-padding);
    overflow: hidden;
}

/* Grid overlay — sits below text content */
.grid-card::before {
    content: "";
    position: absolute;
    /* Extend slightly beyond edges so displacement filter
       doesn't leave blank strips at the borders */
    inset: -6px;
    background-image:
        /* Green major lines — 64px grid */
        linear-gradient(var(--grid-green) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-green) 1px, transparent 1px),
        /* Red inner subdivision lines — 16px grid, very faint */
        linear-gradient(var(--grid-red) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-red) 1px, transparent 1px);
    background-size:
        64px 64px,
        64px 64px,
        16px 16px,
        16px 16px;
    /* Displacement filter: turbulence makes lines slightly wobbly and
       patchy — like an old notebook where ink has worn unevenly */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.018 0.035' numOctaves='2' seed='7' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='2.5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E%23d");
    pointer-events: none;
    z-index: 0;
}

/* All direct children of grid-card sit above the grid overlay */
.grid-card > * {
    position: relative;
    z-index: 1;
}

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
button,
.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition:
        opacity 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

/* Primary — near-black ink on aged paper, stamp-like */
.btn-primary {
    width: 100%;
    padding: 16px 48px;
    background: var(--text-primary);
    color: var(--bg-page);
}
.btn-primary:hover {
    opacity: 0.85;
}

/* Secondary — card bg, muted border */
.btn-secondary {
    padding: 14px 32px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-card);
}
.btn-secondary:hover {
    background: var(--bg-hover);
}

/* Outline — transparent, ink-line border */
.btn-outline {
    padding: 14px 32px;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border-card);
}
.btn-outline:hover {
    background: var(--bg-hover);
}

/* Danger */
.btn-danger {
    padding: 14px 32px;
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--accent-border);
}

/* Ghost / text button */
.btn-text {
    background: none;
    border: none;
    color: var(--text-ghost);
    font-size: 0.9rem;
    padding: 8px 4px;
}
.btn-text:hover {
    color: var(--text-muted);
}

.btn-full {
    width: 100%;
}

/* ── FORM ELEMENTS ─────────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 20px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    width: 100%;
    background: var(--bg-ghost);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    color: var(--text-primary);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    outline: none;
    transition: border-color 0.15s ease;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder {
    color: var(--text-subtle);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus {
    border-color: var(--accent-border);
}

.upload-box {
    display: block;
    border: 1.5px dashed var(--border-input);
    border-radius: var(--radius-card);
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    color: var(--text-subtle);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition:
        border-color 0.15s ease,
        color 0.15s ease;
}
.upload-box:hover {
    border-color: var(--border-card);
    color: var(--text-muted);
}

.photo-preview {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: var(--radius-card);
    margin-top: 12px;
    display: none;
    border: 1px solid var(--border-card);
}

.consent-section {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-ghost);
    margin-top: 12px;
    display: none;
}
.consent-section a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

input[type="checkbox"] {
    accent-color: var(--accent);
    margin-right: 6px;
}

/* ── CHIPS & BADGES ────────────────────────────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-chip);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.chip-accent {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}
.chip-success {
    background: var(--success-bg);
    color: var(--success-text);
}
.chip-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}
.chip-info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* ── NAVIGATION ────────────────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-nav);
    display: flex;
    align-items: center;
    padding: 0 var(--page-x);
    z-index: 100;
}

.nav-logo {
    font-family: var(--font);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    transition: opacity 0.2s ease;
}
.nav-logo:hover {
    opacity: 0.65;
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 1.1rem;
    margin-bottom: 28px;
    transition: color 0.15s ease;
}
.back-link:hover {
    color: var(--text-primary);
}

/* ── PROGRESS BAR ──────────────────────────────────────────────────────────── */
.progress-bar {
    width: 100%;
    height: 3px;
    background: var(--bg-ghost);
    overflow: hidden;
    margin-bottom: var(--section-gap);
}
/* Red underline — like a practice guide mark */
.progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}

/* ── UTILITY ───────────────────────────────────────────────────────────────── */
.mt-sm {
    margin-top: 12px;
}
.mt-md {
    margin-top: 20px;
}
.mt-lg {
    margin-top: var(--section-gap);
}
.mb-sm {
    margin-bottom: 12px;
}
.mb-md {
    margin-bottom: 20px;
}
.mb-lg {
    margin-bottom: var(--section-gap);
}
.gap-sm {
    gap: 12px;
}
.gap-md {
    gap: 20px;
}

.divider {
    border: none;
    border-top: 1px solid var(--border-card);
    margin: var(--section-gap) 0;
}

/* ── SPINNER ───────────────────────────────────────────────────────────────── */
.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--accent-bg);
    border-top-color: var(--accent);
    border-radius: var(--radius-pill);
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── ANIMATIONS ────────────────────────────────────────────────────────────── */
.page-fade {
    animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slow-reveal {
    animation: slowFade 1.2s ease-in-out forwards;
}

@keyframes slowFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}