/* ===========================================================================
   GovExam — light CBT theme + site shell for /exams/* mock-test pages.
   Loaded AFTER /assets/govexam.css (a pre-compiled Tailwind bundle), so plain
   single-class rules here win on source order — no !important needed except
   where the original inline styles already used it.

   Why this file exists: the 228 exam pages used to carry an identical inline
   <style> block with a dark navy/glass look. That block is now replaced by a
   link to this file, so the whole portal restyles from one place and every
   page ships ~2KB less HTML.

   Design target: the white/blue TCS iON CBT screen candidates actually sit in
   front of on exam day.
   =========================================================================== */

:root {
  /* Same brand tokens as portal.css, so the exam screens and the marketing
     pages are visibly one product rather than two sites glued together. */
  --gx-page: #eef3f9;
  --gx-card: #ffffff;
  --gx-card-soft: #f4f7fb;
  --gx-line: #c5d0dc;
  --gx-line-soft: #e2e8f0;
  --gx-ink: #12233a;
  --gx-ink-soft: #435468;
  --gx-ink-faint: #5a6b7d;
  --gx-navy: #0b2a4a;
  --gx-navy-2: #123a63;
  --gx-blue: #0b5fbf;
  --gx-blue-soft: #eef5ff;
  --gx-orange: #c44d00;
  --gx-green: #0a7a45;
  --gx-red: #b42318;
  --gx-amber: #a25400;
  --gx-shadow: 0 1px 2px rgba(15, 34, 58, .06), 0 6px 18px rgba(15, 34, 58, .07);
}

/* ---------- base ---------- */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--gx-page);
  color: var(--gx-ink);
  min-height: 100vh;
}

.hi { font-family: 'Noto Sans Devanagari', 'Segoe UI', sans-serif; }

/* Card surface — was a translucent dark "glass" panel. */
.glass {
  background: var(--gx-card);
  border: 1px solid var(--gx-line);
  box-shadow: var(--gx-shadow);
  backdrop-filter: none;
}

.question-card { transition: all .3s ease; }
.option-btn { transition: all .2s ease; background: var(--gx-card); }
.option-btn:hover { transform: translateX(4px); border-color: #9db6d6; background: #f7fafd; }

.option-selected { background: #fff3e6; border-color: var(--gx-orange) !important; }
.option-correct  { background: #e9f8ee; border-color: #16a34a !important; }
.option-wrong    { background: #fdecec; border-color: #dc2626 !important; }

.timer-warning { animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Terminal blocks stay dark on purpose — several papers ask candidates to read
   real CLI output, and a black console is the honest rendering of that. */
pre {
  background: #0f172a; color: #4ade80; padding: 12px;
  border-radius: 6px; overflow-x: auto; font-size: 13px;
}

.certificate { font-family: 'Georgia', serif; }
.no-select { user-select: none; -webkit-user-select: none; }

.gradient-text {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--gx-navy); font-weight: 700;
}

.india-bar { background: linear-gradient(90deg, #f97316 0%, #ffffff 50%, #16a34a 100%); height: 3px; }

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}

/* ---------- question palette pills ---------- */
.nav-pill {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--gx-line); background: var(--gx-card);
  color: var(--gx-ink-soft); transition: all .15s;
}
.nav-pill:hover { border-color: #9db6d6; }
.nav-pill.answered { background: #e6f7ec; border-color: #16a34a; color: #14532d; }
.nav-pill.marked   { background: #fff4d6; border-color: #d97706; color: #7c2d12; }
.nav-pill.current  { background: var(--gx-blue); border-color: var(--gx-blue); color: #fff; }

/* ===========================================================================
   Tailwind dark-utility remap.
   The page markup keeps its original class names; these rules re-point the
   dark slate surfaces at light equivalents and darken the accent inks so they
   still clear WCAG AA contrast on white.
   `text-white` is deliberately NOT remapped — it sits on ~40 gradient buttons
   where white lettering is correct. The <body> simply no longer carries it.
   =========================================================================== */

/* Surfaces. The full set below is the exact list of slate utilities in use
   across public/exams/*.html and daily.html — regenerate with:
     grep -ho 'class="[^"]*"' public/exams/*.html public/daily.html \
       | grep -o '\(hover:\)\?\(bg\|text\|border\)-slate-[0-9]\+\(\\\?/[0-9]\+\)\?' | sort -u
   Anything missed here renders as a dark patch on a light page. */
/* bg-slate-900/95 is deliberately NOT remapped: its only use is the AI-tutor
   hover tooltip, which pairs it with text-white. Tooltips read as dark chips on
   a light page, and lightening it would make that label invisible. */
.bg-slate-950, .bg-slate-950\/50,
.bg-slate-900, .bg-slate-900\/50, .bg-slate-900\/60 { background-color: var(--gx-card-soft); }
.bg-slate-800, .bg-slate-800\/40, .bg-slate-800\/50, .bg-slate-800\/60, .bg-slate-800\/70 { background-color: var(--gx-card); }
.bg-slate-700 { background-color: #e8eef6; }
.bg-slate-600 { background-color: #dde6f0; }
.hover\:bg-slate-700:hover { background-color: #dde6f0; }
.hover\:bg-slate-600:hover { background-color: #cfdbe9; }

/* borders */
.border-slate-900, .border-slate-800, .border-slate-700 { border-color: var(--gx-line); }
.border-slate-600 { border-color: #c3d2e3; }

/* body/secondary text — text-slate-900 is left alone: it was already dark and
   stays correct on a light surface. */
.text-slate-200, .text-slate-300 { color: var(--gx-ink); }
.hover\:text-slate-200:hover { color: var(--gx-ink); }
.text-slate-400 { color: var(--gx-ink-soft); }
.text-slate-500 { color: var(--gx-ink-faint); }

/* accent inks — the 300/400 shades are unreadable on white, so each maps to
   the 600/700 step of the same hue */
.text-orange-300, .text-orange-400 { color: var(--gx-orange); }
.text-amber-300, .text-amber-400, .text-yellow-400 { color: var(--gx-amber); }
.text-green-400, .text-emerald-200, .text-emerald-300, .text-emerald-300\/80 { color: var(--gx-green); }
.text-blue-200, .text-blue-400 { color: var(--gx-blue); }
.text-cyan-300 { color: #0e7490; }
.text-violet-100, .text-violet-200, .text-violet-300, .text-violet-300\/80 { color: #6d28d9; }
.text-red-400 { color: var(--gx-red); }
.hover\:text-red-400:hover { color: var(--gx-red); }

/* tinted info banners */
.bg-blue-900\/40    { background-color: #eaf1ff; }
.bg-emerald-900\/40 { background-color: #e9f8ee; }
.bg-violet-900\/40  { background-color: #f3eeff; }
.bg-amber-900\/40   { background-color: #fff6e5; }
.bg-red-900\/40     { background-color: #fdecec; }
.border-blue-500\/40    { border-color: #9dbcf5; }
.border-emerald-500\/40 { border-color: #86d3a3; }
.border-violet-500\/40, .border-violet-500\/30 { border-color: #c0a9f0; }
.border-cyan-500\/40, .border-cyan-500\/30 { border-color: #7dd3e0; }
.border-orange-500\/40, .border-orange-500\/30 { border-color: #f5b183; }
.hover\:bg-orange-500\/10:hover { background-color: #fff3e6; }
.hover\:bg-cyan-500\/10:hover { background-color: #e6f7fa; }

/* ===========================================================================
   Site shell — header, breadcrumb and the crawlable footer injected into every
   exam page. All classes are gx-prefixed so nothing depends on which Tailwind
   utilities happen to exist in the pre-built bundle.
   =========================================================================== */

.gx-bar {
  background: var(--gx-navy);
  color: #fff;
  border-bottom: 3px solid var(--gx-orange);
}
.gx-bar-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.gx-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: #fff; }
.gx-brand strong { font-size: 1.15rem; font-weight: 800; letter-spacing: .2px; }
.gx-brand span { font-size: .72rem; opacity: .82; }
.gx-bar nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.gx-bar nav a {
  color: #dbe6f4; text-decoration: none; font-size: .86rem; font-weight: 600;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
}
.gx-bar nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gx-bar nav a[aria-current="page"] { background: var(--gx-orange); color: #fff; }

/* Breadcrumb strip */
.gx-crumb {
  background: var(--gx-card); border-bottom: 1px solid var(--gx-line);
  font-size: .82rem; color: var(--gx-ink-faint);
}
.gx-crumb ol {
  max-width: 1180px; margin: 0 auto; padding: 8px 16px;
  list-style: none; display: flex; gap: 6px; flex-wrap: wrap;
}
.gx-crumb a { color: var(--gx-blue); text-decoration: none; }
.gx-crumb a:hover { text-decoration: underline; }
.gx-crumb li + li::before { content: "›"; margin-right: 6px; color: #94a3b8; }

/* Footer SEO / navigation block */
.gx-seo { background: var(--gx-card); border-top: 1px solid var(--gx-line); margin-top: 40px; }
.gx-seo-in { max-width: 1180px; margin: 0 auto; padding: 28px 16px 34px; }
.gx-seo h2 {
  font-size: 1.05rem; font-weight: 700; color: var(--gx-navy);
  margin: 0 0 4px;
}
.gx-seo .gx-sub { font-size: .86rem; color: var(--gx-ink-faint); margin: 0 0 14px; }
.gx-seo section + section { margin-top: 26px; }

.gx-links { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gx-links a {
  display: block; padding: 9px 12px; border: 1px solid var(--gx-line-soft);
  border-radius: 8px; text-decoration: none; color: var(--gx-ink);
  font-size: .88rem; font-weight: 600; background: var(--gx-card-soft);
}
.gx-links a:hover { border-color: var(--gx-blue); background: var(--gx-blue-soft); }
.gx-links a small { display: block; font-weight: 400; color: var(--gx-ink-faint); font-size: .78rem; margin-top: 2px; }

.gx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-tags a {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gx-line);
  background: var(--gx-card-soft); color: var(--gx-navy);
  text-decoration: none; font-size: .84rem; font-weight: 600;
}
.gx-tags a:hover { border-color: var(--gx-blue); background: var(--gx-blue-soft); }

/* Exam-pattern fact table. These rules live here rather than in govexam-ui.css
   because the exam pages load govexam-cbt.css and not the marketing stylesheet. */
.gx-facts { margin: 0 0 18px; overflow-x: auto; }
.gx-facts table { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 420px; }
.gx-facts th, .gx-facts td {
  border: 1px solid var(--gx-line); padding: 8px 12px;
  text-align: left; vertical-align: top;
}
.gx-facts th {
  background: var(--gx-card-soft); color: var(--gx-navy);
  font-weight: 650; white-space: nowrap; width: 210px;
}
.gx-facts td { background: var(--gx-card); }

.gx-seo p { font-size: .92rem; line-height: 1.65; color: var(--gx-ink-soft); margin: 0 0 12px; }
.gx-seo p strong { color: var(--gx-ink); }

.gx-howto { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.gx-howto li { font-size: .92rem; line-height: 1.6; color: var(--gx-ink-soft); }
.gx-howto li strong { color: var(--gx-navy); }
.gx-howto a { color: var(--gx-blue); }

.gx-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.gx-foot-nav a { color: #9ec5f5; font-weight: 600; text-decoration: none; }
.gx-foot-nav a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .gx-facts th { width: auto; }
}

.gx-faq { display: grid; gap: 10px; }
.gx-faq details {
  border: 1px solid var(--gx-line-soft); border-radius: 8px;
  background: var(--gx-card-soft); padding: 10px 14px;
}
.gx-faq summary { cursor: pointer; font-weight: 650; font-size: .9rem; color: var(--gx-navy); }
.gx-faq p { margin: 8px 0 2px; font-size: .87rem; color: var(--gx-ink-soft); line-height: 1.55; }

.gx-foot {
  background: var(--gx-navy); color: #c9d8ea;
  font-size: .82rem; line-height: 1.6;
}
.gx-foot-in { max-width: 1180px; margin: 0 auto; padding: 18px 16px 24px; display: grid; gap: 6px; }
.gx-foot a { color: #9ec5f5; }

/* While a timed test is running, the marketing/nav furniture gets out of the
   way. :has() is progressive — browsers without it simply keep it visible. */
body:has(#examScreen:not(.hidden)) .gx-hide-in-test { display: none; }

/* The login card was sized to the full viewport; it now shares space with the
   header, so trim its minimum height to match. */
#loginScreen.min-h-screen { min-height: calc(100vh - 108px); }

@media (max-width: 640px) {
  .gx-bar-in { gap: 10px; padding: 8px 12px; }
  .gx-bar nav { margin-left: 0; width: 100%; overflow-x: auto; }
  .gx-brand strong { font-size: 1.05rem; }
}