/* AI Coding Class Student Survey — vanilla CSS, matches research.css teal palette */

:root {
    --teal-700: #0f6b66;
    --teal-500: #1a8d87;
    --teal-100: #d6efed;
    --teal-50:  #effaf9;
    --ink-900:  #14252a;
    --ink-700:  #314549;
    --ink-500:  #5b6f74;
    --ink-300:  #a5b3b7;
    --line:     #d9e1e3;
    --bg:       #f6f9fa;
    --shadow:   0 6px 18px rgba(20, 37, 42, 0.06);
    --radius:   10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink-900);
    background: var(--bg);
    line-height: 1.6;
}

/* Top bar */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow);
}
.topbar-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand {
    font-weight: 600;
    font-size: 16px;
    color: var(--teal-700);
}
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
}
.lang-btn {
    background: transparent;
    border: none;
    color: var(--ink-500);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.lang-btn:hover { background: var(--teal-50); }
.lang-btn.active { color: var(--teal-700); background: var(--teal-100); }
.lang-divider { color: var(--ink-300); }

/* Main container */
.container {
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.intro h1 {
    margin: 0 0 8px;
    font-size: 28px;
    color: var(--ink-900);
}
.intro p {
    margin: 0 0 24px;
    color: var(--ink-700);
    font-size: 16px;
}

/* Anonymity notice — uses the project's signature accent-bar style */
.anonymity {
    border-left: 5px solid var(--teal-500);
    background: linear-gradient(180deg, var(--teal-50) 0%, #ffffff 100%);
    padding: 14px 18px;
    border-radius: var(--radius);
    margin: 0 0 32px;
    color: var(--ink-700);
    box-shadow: var(--shadow);
    font-size: 15px;
}

/* Questions */
.question {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius);
    padding: 20px 22px;
    margin: 0 0 18px;
    box-shadow: var(--shadow);
}
.q-title {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 12px;
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-900);
    line-height: 1.5;
}
.q-title .en,
.q-title .zh {
    padding: 0;
}
.q-num {
    color: var(--teal-700);
    margin-right: 4px;
}
.radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.radios label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
    transition: background 0.1s;
}
.radios label:hover { background: var(--teal-50); }
.radios input[type="radio"] {
    accent-color: var(--teal-500);
    width: 18px;
    height: 18px;
}

textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    font: inherit;
    color: var(--ink-900);
    background: #fff;
    resize: vertical;
    min-height: 90px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
textarea:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: 0 0 0 3px var(--teal-100);
}

/* Submit button */
.submit-row {
    margin-top: 28px;
    text-align: center;
}
.submit-btn {
    background: var(--teal-700);
    color: #fff;
    border: none;
    padding: 14px 36px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    box-shadow: var(--shadow);
}
.submit-btn:hover { background: var(--teal-500); }
.submit-btn:active { transform: translateY(1px); }
.submit-btn:disabled {
    background: var(--ink-300);
    cursor: not-allowed;
}

.status {
    margin-top: 18px;
    text-align: center;
    font-size: 15px;
    min-height: 22px;
}
.status.success { color: var(--teal-700); font-weight: 600; }
.status.error { color: #b23a48; }

.footer {
    margin-top: 40px;
    font-size: 13px;
    color: var(--ink-500);
    text-align: center;
}

/* ----- Language switching -----
   HARD RULE: every .en and .zh element is hidden by default. The active language's
   matching class is then made visible with the appropriate display value.
   This guarantees the inactive language can NEVER leak through. */

/* Step 1: hide every language-tagged element. */
.en, .zh { display: none !important; }

/* Step 2: inline spans (question titles, brand bar) — use display:inline */
body[data-lang="en"] .en,
body:not([data-lang]) .en { display: inline !important; }
body[data-lang="zh"] .zh { display: inline !important; }

/* Step 3: block-level wrappers (.intro, .anonymity, .footer) */
body[data-lang="en"] .intro.en,
body[data-lang="en"] .anonymity.en,
body[data-lang="en"] .footer.en,
body:not([data-lang]) .intro.en,
body:not([data-lang]) .anonymity.en,
body:not([data-lang]) .footer.en { display: block !important; }
body[data-lang="zh"] .intro.zh,
body[data-lang="zh"] .anonymity.zh,
body[data-lang="zh"] .footer.zh { display: block !important; }

/* Step 4: radio groups (display:flex column) */
body[data-lang="en"] .radios.en,
body:not([data-lang]) .radios.en { display: flex !important; }
body[data-lang="zh"] .radios.zh { display: flex !important; }

/* Step 5: submit buttons */
body[data-lang="en"] .submit-btn.en,
body:not([data-lang]) .submit-btn.en { display: inline-block !important; }
body[data-lang="zh"] .submit-btn.zh { display: inline-block !important; }