/* ============================================================================
   BlinkNBuild GATE ECE portal
   ----------------------------------------------------------------------------
   Loaded after academy-theme.css and academy-layout.css, and reuses their
   tokens, shell, nav, footer, ad rail, callouts and tables. Everything here is
   specific to the question format: subject cards, the option grid, the reveal
   and the derivation list.

   Generated pages come from tools/gen_gate.py - do not hand-edit /gate/.
   ========================================================================== */

/* ------------------------------------------------------- subject grid ---- */

.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0 var(--sp-8);
}

.subject-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.subject-card:hover,
.subject-card:focus-visible {
  transform: translateY(-3px);
  background: var(--bg-card);
  border-color: var(--border-mid);
}

.subject-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.subject-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  font-size: 18px;
  background: rgba(0, 212, 245, 0.10);
  border: 1px solid var(--border-cyan);
  color: var(--cyan-300);
}

.subject-purple  .subject-icon { background: rgba(155,127,232,0.12); border-color: rgba(155,127,232,0.30); color: var(--violet-200); }
.subject-emerald .subject-icon { background: rgba(0,230,118,0.10);   border-color: rgba(0,230,118,0.28);   color: var(--emerald); }
.subject-gold    .subject-icon { background: rgba(245,166,35,0.10);  border-color: rgba(245,166,35,0.28);  color: var(--gold-300); }
.subject-crimson .subject-icon { background: rgba(255,82,82,0.10);   border-color: rgba(255,82,82,0.28);   color: var(--crimson); }

.subject-card h3 {
  margin: 0;
  font-family: var(--font-subheading);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.subject-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

.subject-topics {
  list-style: none;
  margin: auto 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.subject-topics li {
  font-family: var(--font-code);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-faint);
}

/* ------------------------------------------------------- topic chips ----- */

.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.topic-chip {
  font-family: var(--font-code);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}

/* ------------------------------------------------- subject progress ----- */

.q-progress {
  margin: var(--sp-6) 0 var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

.q-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: 13px;
  color: var(--text-tertiary);
}

.q-progress-label b {
  font-family: var(--font-code);
  font-size: 13px;
  color: var(--emerald);
}

/* --------------------------------------------------- question listing --- */

.q-list {
  list-style: none;
  margin: var(--sp-5) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.q-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.q-row:hover,
.q-row:focus-visible {
  background: var(--bg-card);
  border-left-color: var(--cyan-400);
}

.q-row-kind {
  flex-shrink: 0;
  width: 42px;
  text-align: center;
  font-family: var(--font-code);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
}

.q-row-body { flex: 1; min-width: 0; }

.q-row-title {
  display: block;
  font-family: var(--font-subheading);
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.q-row-topic {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-faint);
}

.q-row-state {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-size: 14px;
}

.q-row.is-correct { border-left-color: var(--emerald); }
.q-row.is-correct .q-row-state::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--emerald); }
.q-row.is-wrong   { border-left-color: var(--gold-400); }
.q-row.is-wrong   .q-row-state::before { content: "\f2f1"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold-300); }

/* ----------------------------------------------------- question card ---- */

.q-card { display: block; }

.q-head { margin-bottom: var(--sp-6); }

.q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.q-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.q-card h1 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-subheading);
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.25;
  color: var(--text-primary);
}

.q-source {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.q-source i { color: var(--emerald); margin-right: 4px; }
.q-source strong { color: var(--text-tertiary); font-weight: 600; }

.q-stem {
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cyan-400);
  border-radius: var(--r-md);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.q-stem p:first-child { margin-top: 0; }
.q-stem p:last-child  { margin-bottom: 0; }
.q-stem ul { margin: var(--sp-3) 0; padding-left: var(--sp-6); }
.q-stem li { margin: var(--sp-2) 0; }

.q-figure {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  background: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.q-figure svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- options ------ */

.q-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.q-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.q-option:hover { border-color: var(--border-mid); background: var(--bg-card); }

.q-option-letter {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  font-family: var(--font-code);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-tertiary);
}

.q-option-text { flex: 1; min-width: 0; overflow-x: auto; }

.q-option.is-picked {
  border-color: var(--cyan-400);
  background: rgba(0, 212, 245, 0.07);
}
.q-option.is-picked .q-option-letter { background: rgba(0,212,245,0.18); color: var(--cyan-200); }

.q-option.is-correct {
  border-color: var(--emerald);
  background: rgba(0, 230, 118, 0.08);
}
.q-option.is-correct .q-option-letter { background: rgba(0,230,118,0.20); color: var(--emerald); }

.q-option.is-incorrect {
  border-color: var(--crimson);
  background: rgba(255, 82, 82, 0.07);
}
.q-option.is-incorrect .q-option-letter { background: rgba(255,82,82,0.20); color: var(--crimson); }

/* ---------------------------------------------- numerical answer box ---- */

.q-nat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.q-nat-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-code);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-code);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.q-nat-input:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(0, 212, 245, 0.14);
}

.q-nat-check {
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-subheading);
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-0);
  background: var(--cyan-400);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out);
}

.q-nat-check:hover { filter: brightness(1.1); }

.q-nat-verdict { font-size: 14px; font-family: var(--font-code); }
.q-nat-verdict.is-correct   { color: var(--emerald); }
.q-nat-verdict.is-incorrect { color: var(--crimson); }

/* ---------------------------------------------------------- reveal ------ */

.q-reveal {
  margin: var(--sp-6) 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
  overflow: hidden;
}

.q-reveal > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-subheading);
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan-200);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.q-reveal > summary::-webkit-details-marker { display: none; }
.q-reveal > summary:hover { background: rgba(0, 212, 245, 0.06); }
.q-reveal[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.q-reveal[open] > summary i::before { content: "\f070"; }

.q-reveal-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.q-reveal-body h2 {
  margin: var(--sp-6) 0 var(--sp-4);
  font-size: 18px;
  color: var(--text-primary);
}

/* ---------------------------------------------------------- answer ------ */

.q-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.28);
  border-radius: var(--r-md);
}

.q-answer-label {
  font-family: var(--font-subheading);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald);
}

.q-answer-value {
  font-family: var(--font-code);
  font-size: 17px;
  font-weight: 600;
  color: var(--emerald);
}

.q-answer-note { font-size: 12.5px; color: var(--text-faint); }

/* ------------------------------------------------------------ steps ----- */

.q-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: qstep;
}

.q-step {
  position: relative;
  counter-increment: qstep;
  padding: var(--sp-4) 0 var(--sp-4) 46px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.q-step:last-child { border-bottom: none; }

.q-step::before {
  content: counter(qstep);
  position: absolute;
  left: 0;
  top: var(--sp-4);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  font-family: var(--font-code);
  font-size: 12px;
  background: rgba(0, 212, 245, 0.10);
  border: 1px solid var(--border-cyan);
  color: var(--cyan-300);
}

/* Display math inside a step scrolls rather than pushing the page wide. */
.q-step .katex-display {
  margin: var(--sp-3) 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.q-stem .katex-display { margin: var(--sp-3) 0; overflow-x: auto; overflow-y: hidden; }

/* ------------------------------------------------------------- trap ----- */

.q-trap {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: rgba(245, 166, 35, 0.07);
  border: 1px solid rgba(245, 166, 35, 0.26);
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.q-trap-icon { flex-shrink: 0; font-size: 17px; color: var(--gold-300); line-height: 1.4; }

.q-trap-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-subheading);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 640px) {
  .q-stem       { padding: var(--sp-4); font-size: 15px; }
  .q-reveal-body{ padding: var(--sp-4); }
  .q-step       { padding-left: 38px; font-size: 14.5px; }
  .q-step::before { width: 24px; height: 24px; font-size: 11px; }
  .q-options    { grid-template-columns: 1fr; }
  .q-row        { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .q-row-kind   { width: 36px; font-size: 9.5px; }
  .q-row-title  { font-size: 14px; }
}

/* KaTeX inherits the page colour rather than its own near-black default. */
.katex { color: inherit; font-size: 1.05em; }
.katex-display > .katex { white-space: normal; }