/*
 * theme.css — Human Eye Science Quiz.
 * Direction: an iris under a slit lamp. Deep cobalt as the brand, a hazel
 * amber as the one warm accent, cool clinical whites in light mode and a
 * night-clinic navy in dark. Friendly and studious, like Brilliant.org.
 * Noto Sans Oriya sits in every stack so Odia text renders in a matched face.
 */

:root {
  --canvas: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #e8edf5;
  --border: #d4dce8;
  --border-strong: #9fadc2;
  --ink: #0f1b2d;
  --muted: #4f5d73;
  --accent: #1e40af;
  --accent-hover: #1a3691;
  --accent-ink: #ffffff;
  --accent-text: #1e40af;
  --accent-strong: #1a3480;
  --accent-soft: #dce5fb;
  --accent-border: #a8bcf0;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcf0e3;
  --success-strong: #116432;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f8ead9;
  --warning-strong: #8f4207;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e0e0;
  --danger-strong: #991818;
  --chart-1: #1e40af;
  --chart-2: #d97706;
  --chart-3: #0f766e;
  --chart-4: #7c3aed;
  --chart-5: #be123c;
  --chart-6: #4d7c0f;

  --x-amber: #d97706;
  --x-amber-soft: #fcefd9;
  --x-iris-deep: #1a3480;
  --x-iris-mid: #3b63d6;
  --x-band: #0f1b2d;
  --x-band-ink: #eef2f9;
  --x-band-muted: #a9b5c9;

  --font-display: "Bricolage Grotesque", "Noto Sans Oriya", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", "Noto Sans Oriya", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree", "Noto Sans Oriya", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", "Noto Sans Oriya", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.75rem;
  --btn-weight: 600;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --shadow-raised: 0 12px 40px -12px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] {
  --canvas: #0a1120;
  --surface: #111a2e;
  --surface-2: #18233d;
  --border: #25314d;
  --border-strong: #42537a;
  --ink: #e8eef8;
  --muted: #9eacc4;
  --accent: #8fb0ff;
  --accent-hover: #a9c2ff;
  --accent-ink: #0a1120;
  --accent-text: #9db9ff;
  --accent-strong: #c3d4ff;
  --accent-soft: #1b2a52;
  --accent-border: #34488a;
  --success: #4ade80;
  --success-ink: #052e16;
  --success-soft: #0f2a1b;
  --success-strong: #86efac;
  --warning: #fbbf24;
  --warning-ink: #1f1300;
  --warning-soft: #2e2310;
  --warning-strong: #fcd34d;
  --danger: #f87171;
  --danger-ink: #2a0707;
  --danger-soft: #331416;
  --danger-strong: #fca5a5;
  --chart-1: #8fb0ff;
  --chart-2: #fbbf24;
  --chart-3: #2dd4bf;
  --chart-4: #a78bfa;
  --chart-5: #fb7185;
  --chart-6: #a3e635;

  --x-amber: #f59e0b;
  --x-amber-soft: #2e2310;
  --x-iris-deep: #2c4aa8;
  --x-iris-mid: #6f93f5;
  --x-band: #050a14;
  --x-band-ink: #eef2f9;
  --x-band-muted: #9eacc4;
}

/* app.css — Iris: the ground, the drawn eye, the quiz options, the dial. Tokens only. */

.ground {
  background:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--canvas);
}

.site-bar { border-bottom: 1px solid var(--border); }

/* ---- Language switch ---- */
.lang-switch {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  height: 1.9rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.lang-opt:hover { color: var(--ink); text-decoration: none; }
.lang-opt[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.lang-opt:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Odia typesetting: conjuncts need air, not negative tracking ---- */
.lang-or h1, .lang-or h2, .lang-or h3, .lang-or .font-display { letter-spacing: 0; }
.lang-or h1, .lang-or h2 { line-height: 1.3; }
.lang-or p, .lang-or .option { line-height: 1.7; }

/* ---- The drawn iris ---- */
.iris { display: block; max-width: 100%; height: auto; }
.iris-sclera { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.iris-base { fill: var(--x-iris-deep); }
.iris-fibres line { stroke: var(--x-iris-mid); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.iris-collar { fill: none; stroke: var(--x-amber); stroke-width: 10; opacity: 0.9; stroke-dasharray: 3 2.2; }
.iris-limbus { fill: none; stroke: var(--x-iris-deep); stroke-width: 5; filter: brightness(0.7); }
.iris-pupil { fill: var(--x-band); transform-box: fill-box; transform-origin: center; }
.iris-glint { fill: white; opacity: 0.85; }

.iris-live .iris-pupil { animation: pupil 7s ease-in-out infinite; }
@keyframes pupil {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.32); }
  60% { transform: scale(1.32); }
}
html.reduced-motion .iris-live .iris-pupil { animation: none; }

.brand-mark { display: inline-flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; }

.hero-eye {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border-radius: 999px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--x-amber) 18%, transparent), transparent);
}
.hero-eye .iris { width: min(100%, 26rem); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18)); }
@media (width < 48rem) { .hero-eye .iris { width: min(70%, 18rem); } }

.hero-accent { color: var(--accent-text); }

/* ---- Bands ---- */
.band-soft { background: var(--surface-2); border-block: 1px solid var(--border); }
.band-dark { background: var(--x-band); color: var(--x-band-ink); }
.band-muted { color: var(--x-band-muted); }
.band-accent { color: var(--x-amber); }

/* ---- Quiz picker ---- */
.topic-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.topic-card:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: var(--shadow-raised); }
.topic-card:focus-visible { outline: none; box-shadow: var(--ring); }
.topic-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.topic-icon .icon { width: 1.4rem; height: 1.4rem; }
.topic-icon-warm { background: var(--x-amber); color: var(--x-band); }

.class10-card, .mixed-card {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  transition: transform 160ms ease;
}
.class10-card:hover, .mixed-card:hover { transform: translateY(-2px); }
.class10-card:focus-visible, .mixed-card:focus-visible { outline: none; box-shadow: var(--ring); }

.class10-card {
  padding: 2rem;
  background:
    radial-gradient(28rem 14rem at 100% 0%, color-mix(in srgb, var(--x-amber) 28%, transparent), transparent 70%),
    var(--accent);
  color: var(--accent-ink);
}
.class10-tag {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
}

.mixed-card { padding: 1.4rem 1.75rem; background: var(--x-band); color: var(--x-band-ink); }

.card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-weight: 700;
}
.card-go-warm { color: var(--x-amber); }
@media (width < 40rem) {
  .class10-card, .mixed-card { flex-direction: column; align-items: flex-start; }
  .class10-card { padding: 1.5rem; }
}

/* ---- Quiz ---- */
.quiz-card, .result-card { box-shadow: var(--shadow-raised); }

.option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
button.option:hover { border-color: var(--accent); background: var(--accent-soft); }
button.option:active { transform: scale(0.99); }
button.option:focus-visible { outline: none; box-shadow: var(--ring); }
button.option.htmx-request { opacity: 0.6; pointer-events: none; }
.option-key {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}
.option-key .icon { width: 1.05rem; height: 1.05rem; }
.option[aria-disabled="true"] { cursor: default; }
.option.is-right { border-color: var(--success); background: var(--success-soft); color: var(--success-strong); }
.option.is-right .option-key { background: var(--success); color: var(--success-ink); }
.option.is-wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-strong); }
.option.is-wrong .option-key { background: var(--danger); color: var(--danger-ink); }
.option.is-dim { opacity: 0.55; }

.verdict { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: 1rem; border-left: 4px solid; }
.verdict-right { background: var(--success-soft); border-color: var(--success); }
.verdict-right > div:first-child { color: var(--success-strong); }
.verdict-wrong { background: var(--x-amber-soft); border-color: var(--x-amber); }
.verdict-wrong > div:first-child { color: var(--ink); }

/* ---- Result dial ---- */
.dial { position: relative; width: 168px; height: 168px; margin-inline: auto; }
.dial-track { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.dial-fill { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; }
.dial-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.review-mark {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
}
.review-right { background: var(--success-soft); color: var(--success-strong); }
.review-wrong { background: var(--danger-soft); color: var(--danger-strong); }