/* Base styles - Eye-friendly color scheme */
:root {
    /* Blue theme palette */
    --primary: #4A90E2; /* primary blue */
    --primary-600: #357ABD; /* hover/darker */
    --secondary: #7FB3FF; /* soft secondary blue */
    --accent: #A7C7E7; /* light accent blue */
    --bg: #F5FAFF; /* page background */
    --bg-elev: #ECF4FE; /* elevated surface */
    --text: #243447; /* readable dark */
    --muted: #5E6E7E; /* secondary text */
    --border: #D1E3F8; /* soft border */
    --card: #FFFFFF; /* cards */
    --success: #62D2A2; /* green success */
    --warning: #FFD166; /* yellow warning */
    --error: #F4978E; /* calm error */
}


* { box-sizing: border-box; }
html, body { height: 100%; }
/* Only apply overflow hidden to index page */
[data-page="index"] html,
[data-page="index"] body {
    overflow: hidden;
}

/* Allow scrolling on vision-test page */
[data-page="vision-test"] html,
[data-page="vision-test"] body {
    overflow: auto;
}
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg); /* Simple cream background for eye comfort */
    line-height: 1.6;
}

/* Allow scroll on guidelines page only */
[data-page="guidelines"] html,
[data-page="guidelines"] body {
    overflow: auto;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(1.2) blur(6px);
    background: rgba(74, 144, 226, 0.85); /* primary tint */
    border-bottom: 1px solid var(--border);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
}
.logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
}
.site-nav { display: none; }
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
}
.site-nav a {
    color: var(--muted);
    text-decoration: none;
}
.site-nav a:hover { color: var(--text); }

/* Hero */
/* Mobile landing */
.landing { display: grid; place-items: center; min-height: calc(100dvh - 64px - 64px); padding: 24px 0; }
.landing-inner { display: grid; gap: 20px; width: 100%; max-width: 420px; }
.brand { display: grid; justify-items: center; gap: 6px; margin-bottom: 4px; }
.logo-mark { font-size: 40px; }
.logo-name { font-weight: 700; letter-spacing: 0.3px; }
.landing-note { text-align: center; color: var(--muted); font-size: 12px; }

.options-grid {
    display: grid;
    grid-template-columns: 1fr; /* one per line on mobile */
    gap: 12px;
}
.option-card {
    display: grid;
    gap: 4px;
    place-items: center;
    padding: 18px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    color: var(--text);
    width: 100%;
}
.option-card:active { transform: translateY(1px); }
.option-emoji { font-size: 28px; }
.option-title { font-weight: 600; font-size: 14px; }

.btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--bg-elev);
    text-decoration: none;
}
.btn.primary { background: linear-gradient(180deg, var(--primary), var(--primary-600)); border-color: transparent; color: #ffffff; font-weight: 600; }

/* Sections */
.section { padding: 56px 0; }
.section.alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section h2 { margin: 0 0 16px; font-size: 24px; }

/* Vision test */
.vt-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: grid; gap: 12px; }
.vt-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); }
.distance-ok { color: var(--success); }
.distance-bad { color: var(--error); }
.badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
.badge.ready { background: var(--success); color: #0b1020; border-color: transparent; }
.badge.adjust { background: var(--warning); color: #0b1020; border-color: transparent; }
.vt-camera { position: fixed; top: 72px; right: 12px; width: 120px; height: 90px; display: none; z-index: 60; }
.vt-camera video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.vt-warning { color: var(--warning); min-height: 1.2em; }
.vt-stage { display: grid; gap: 12px; place-items: center; }
.vt-letter { font-weight: 700; font-size: 96px; line-height: 1; transform-origin: 50% 50%; }
.vt-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.vt-actions { display: flex; gap: 8px; }
.vt-result { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }

.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

/* Form */
.form {
    display: grid;
    gap: 12px;
    max-width: 560px;
}
.form label { display: grid; gap: 6px; font-weight: 600; }
.form input, .form textarea {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
}
.form-status { margin: 8px 0 0; color: var(--muted); min-height: 1.2em; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); }

/* Accessibility helpers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Results Table Styles */
.results-table-container {
    margin-top: 20px;
    background: var(--card);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border);
}

.results-table-container h3 {
    color: var(--primary);
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.test-info {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--muted);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-elev);
    border-radius: 6px;
    overflow: hidden;
}

.results-table thead { background: var(--primary); color: #ffffff; }

.results-table th,
.results-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.results-table th {
    font-weight: 600;
    font-size: 0.9rem;
}

.results-table tbody tr:hover { background: rgba(167, 199, 231, 0.08); }

.results-table .overall-result {
    background: var(--bg);
    font-weight: 600;
}

.results-table .overall-result td { border-top: 2px solid var(--accent); padding: 16px; }

.result-summary { margin-bottom: 15px; padding: 15px; background: var(--bg-elev); border-radius: 6px; border-left: 4px solid var(--accent); }

/* Dual Symbols Layout */
.dual-symbols {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.symbol-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: filter 0.3s ease;
}

.symbol-container.blurred {
    filter: blur(3px);
    opacity: 0.4;
}

.eye-label {
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 500;
}

.symbol-container.active .eye-label {
    color: var(--primary);
    font-weight: 600;
}

/* Media queries */
@media (min-width: 768px) {
    .menu-toggle { display: none; }
    .site-nav { display: block; }
    .grid { grid-template-columns: repeat(3, 1fr); }
}