/* ==========================================================================
   style.css — shared shell for all TCM Formula Study pages
   Copied from herbs/style.css (keep the two visually in sync when the design
   evolves). Design tokens, the top navbar, the settings modal, the quiz
   progress bar, and shared layout containers. Linked with RELATIVE paths —
   this app is self-contained and can live at any URL prefix.
   Page- and quiz-specific styles live in each page's own <style> block.
   ========================================================================== */

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

/* ---------- design tokens ---------- */
:root {
    --bg: #f4f4f9;
    --card: #ffffff;
    --ink: #2b2b2b;
    --muted: #8a8f98;
    --line: #e6e8ec;
    --header-bg: #ffffff;
    --accent: #007bff;
    --accent-hover: #0056b3;
    /* level tones: bg = pill/card, tile = lighter row background */
    --h1-bg: #d3e3d6;   --h1-tile: #eaf3ec;   --h1-ink: #2f5138;
    --h2-bg: #e6e6c8;   --h2-tile: #f4f4e2;   --h2-ink: #575a29;
    --h3-bg: #d6e2ea;   --h3-tile: #eef4f7;   --h3-ink: #2f5566;
    --rand-bg: #f0e0cb; --rand-tile: #f8efe2; --rand-ink: #7d5426;
}
body.dark-mode {
    --bg: #1c1c1c;
    --card: #2a2a2a;
    --ink: #e8e8e8;
    --muted: #9a9ea6;
    --line: #3a3a3a;
    --header-bg: #2a2a2a;
    --accent: #5b9cf5;
    --accent-hover: #7fb3f7;
    --h1-bg: #2c3a30;   --h1-tile: #24302a;   --h1-ink: #b6d6bd;
    --h2-bg: #3a3a2a;   --h2-tile: #2f2f22;   --h2-ink: #d4d59a;
    --h3-bg: #2b3841;   --h3-tile: #232d33;   --h3-ink: #a8cad9;
    --rand-bg: #3e3324; --rand-tile: #322a1e; --rand-ink: #dcb883;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s, color 0.3s;
}

/* ---------- top navbar ---------- */
/* sticky on every page, so back/settings stay reachable while scrolling */
.header-bar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 18px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-left { display: flex; align-items: center; gap: 14px; }
.header-right { display: flex; align-items: center; }
.header-bar .logo { height: 36px; width: auto; display: block; }
.header-bar .logo.dark { display: none; }
body.dark-mode .header-bar .logo.light { display: none; }
body.dark-mode .header-bar .logo.dark { display: block; }

.back-btn {
    font-size: 20px; color: var(--ink); text-decoration: none;
    padding: 8px 5px; line-height: 1; transition: color 0.2s;
}
.back-btn:hover { color: var(--muted); }
.settings-btn {
    font-size: 20px; color: var(--ink); cursor: pointer;
    background: none; border: none; padding: 8px 5px; line-height: 1;
    transition: color 0.2s;
}
.settings-btn:hover { color: var(--muted); }

/* ---------- layout ---------- */
.container { max-width: 600px; margin: 0 auto; padding: 30px 18px 60px; }

.welcome { text-align: center; margin-bottom: 22px; }
.welcome h1 { font-size: 1.9rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.welcome p { font-size: 1.02rem; color: var(--muted); margin: 0; }

/* white card that wraps a running quiz */
.quiz-container {
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 24px;
    max-width: 600px;
    margin: 20px auto;
    transition: background 0.3s;
}

/* ---------- quiz progress bar + timer ---------- */
.progress-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
#timer { color: var(--muted); font-size: 0.8rem; margin-left: 10px; }
#progress-counter { font-weight: 600; font-size: 0.8rem; margin-right: 10px; }
.progress-bar-bg {
    background-color: var(--line);
    border-radius: 10px;
    height: 4px;
}
#progress-bar {
    height: 4px;
    background-color: #999;
    width: 0%;
    border-radius: 10px;
    transition: width 0.4s ease-in-out;
}
body.dark-mode #progress-bar { background-color: #90caf9; }

/* ---------- settings modal ---------- */
.modal { display: none; position: fixed; inset: 0; z-index: 200; }
.modal.open { display: block; }
.modal-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: flex-start;
    padding-top: 90px;
}
.modal-content {
    background: var(--card); color: var(--ink); border-radius: 12px; padding: 22px;
    width: 88%; max-width: 360px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.modal-content h2 { margin: 0 0 14px; font-size: 1.15rem; }
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 14px 0;
}
.switch { position: relative; width: 42px; height: 22px; flex-shrink: 0; }
.switch input { display: none; }
.slider { position: absolute; inset: 0; background: #ccc; border-radius: 22px; cursor: pointer; transition: 0.3s; }
.slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: 0.3s; }
.switch input:checked + .slider { background: #58a06a; }
.switch input:checked + .slider::before { transform: translateX(20px); }
.modal-close {
    display: block; margin: 20px auto 0; background: #333; color: #fff; border: none;
    padding: 9px 18px; border-radius: 8px; font-size: 0.95rem; cursor: pointer;
}
body.dark-mode .modal-close { background: #555; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- mobile ---------- */
@media (max-width: 600px) {
    .container { padding: 22px 14px 40px; }
    .welcome h1 { font-size: 1.6rem; }
    .quiz-container { padding: 16px; margin: 10px auto; }

    /* quiz pages (body.quiz-page): the card fills the screen edge-to-edge —
       body goes card-colored, the card itself loses its chrome */
    body.quiz-page { background: var(--card); }
    body.quiz-page .quiz-container {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 15px 20px;
        margin: 5px auto 0;
    }
}