/* ---------- Light glassmorphic theme — UnderStand UPSC ---------- */
/* Brand navy: #1e2a8f · Saffron accent: #f59e0b · Sky accent: #0ea5e9 */

html, body {
  /* Belt + suspenders to kill horizontal scroll on mobile.
     overflow-x: clip is preferred (allows position:sticky to still work) but
     Safari < 16 doesn't support it, so fall back to hidden. */
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
html { scroll-behavior: smooth; }
body {
  background-color: #f6f8ff;
  color: #0f172a;
}

/* Soft noise to take the plasticy edge off the gradient blobs */
.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gradient text helper — navy → saffron */
.text-gradient {
  background: linear-gradient(110deg, #1e2a8f 0%, #3b4ec2 35%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary button — flat brand navy */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  border-radius: 14px;
  background: #1e2a8f;
  box-shadow:
    0 8px 22px -10px rgba(30, 42, 143, .55),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .15s ease, background-color .15s ease, box-shadow .25s ease;
}
.btn-primary:hover  { transform: translateY(-1px); background: #172075; box-shadow: 0 12px 28px -10px rgba(30, 42, 143, .65); }
.btn-primary:active { transform: translateY(0); background: #101759; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; background: #1e2a8f; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.4rem;
  font-weight: 500;
  color: #1e2a8f;
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid #dde2f9;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.btn-ghost:hover { background: #ffffff; border-color: #b6c0f0; transform: translateY(-1px); }

/* Glass card — white tint over the gradient background */
.glass {
  /* min-width: 0 so wide content (data tables, code blocks) inside a .glass
     can't blow the card out beyond its grid/flex parent on mobile.
     Pair with overflow-x: auto on the inner table wrapper. */
  min-width: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(30, 42, 143, 0.08);
  border-radius: 22px;
  box-shadow:
    0 18px 48px -22px rgba(30, 42, 143, .25),
    0 2px 8px -2px rgba(15, 23, 42, .06),
    inset 0 1px 0 0 rgba(255, 255, 255, .85);
}

/* Input style baseline — applies uniformly to <input>, <select>, <textarea> */
.input {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #dde2f9;
  border-radius: 12px;
  padding: .75rem .9rem;
  color: #0f172a;
  font: inherit;
  line-height: 1.25;
  transition: border-color .15s ease, background .15s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: #94a3b8; }
.input:focus {
  outline: none;
  border-color: #3b4ec2;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 78, 194, .14);
}
/* Custom dropdown caret for selects (native appearance is suppressed above) */
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px;
  padding-right: 2.25rem;
}
/* Date inputs: hide native calendar icon offset so it lines up with the row */
input[type="date"].input { min-height: 2.85rem; }

/* Option pill (used on answer page) */
.opt-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 12px;
  font-weight: 600; font-size: .85rem;
  color: #334155;
  background: rgba(255,255,255,.85);
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all .12s ease;
  user-select: none;
}
.opt-pill:hover {
  background: #ffffff;
  color: #1e2a8f;
  border-color: #b6c0f0;
  transform: translateY(-1px);
}
.opt-pill.is-active {
  background: #1e2a8f;
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 0 0 3px rgba(30,42,143,.12),
    0 6px 14px -6px rgba(30,42,143,.45);
}

.q-card {
  background: rgba(255,255,255,.78);
  border: 1.5px solid #e6e9f5;
  border-radius: 18px;
  padding: 1rem .9rem .9rem;
  transition: border-color .15s ease, transform .12s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.q-card:hover { border-color: #b6c0f0; transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(30,42,143,.25); }
.q-card.is-answered {
  background: linear-gradient(180deg, rgba(238,240,252,.95) 0%, rgba(255,255,255,.85) 100%);
  border-color: rgba(59,78,194,.35);
}
.q-card.is-review   { box-shadow: 0 0 0 2px rgba(245,158,11,.55), 0 6px 18px -10px rgba(245,158,11,.4); }

/* Scrollbar polish (light) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(30, 42, 143, .15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(30, 42, 143, .28); background-clip: padding-box; }

/* Confetti (used on result reveal) */
.confetti {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30;
}
.confetti span {
  position: absolute; top: -10vh;
  width: 10px; height: 14px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--x,0px), 110vh, 0) rotate(720deg); opacity: 0; }
}

.ring-track    { stroke: rgba(30,42,143,.10); }
.ring-progress { transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }

[x-cloak] { display: none !important; }

/* Mobile niceties */
@media (max-width: 640px) {
  .btn-primary { padding: .85rem 1.2rem; }
}