/* Beyond Rankers — HP Police Constable mock tests.
   Tailwind (CDN) does the layout; this file holds the things Tailwind cannot
   express well: the bilingual question block, the OMR-style option rows, the
   CBT question palette and the generated figures. */

:root {
  --brand:      #1e3a5f;   /* Beyond Rankers blue  */
  --brand-soft: #eef2f9;
  --teal:       #14b8a6;
  --amber:      #f59e0b;
  --red:        #dc2626;
  --line:       #e2e8f0;
  --ink:        #0f172a;
  --muted:      #64748b;
}

/* Devanagari and Latin share a line in almost every question, so both faces
   are declared together and fall back to the system stack. */
body {
  font-family: 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui,
               -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
}
.deva { font-family: 'Noto Sans Devanagari', 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* ── the bilingual question block ─────────────────────────────────────────── */
/* Hindi always sits above English, separated by a hairline, exactly the way the
   real HPPSC paper prints it. */
.qblock + .qblock {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--line);
}
.qtext { font-size: 1.0625rem; line-height: 1.75; font-weight: 600; }
@media (min-width: 640px) { .qtext { font-size: 1.125rem; } }
.qtext u { text-underline-offset: 3px; }
.ovl { text-decoration: overline; }                    /* recurring decimals */
.seq { letter-spacing: .22em; word-spacing: .1em; display: inline-block; margin-top: .45rem; }

/* ── options ──────────────────────────────────────────────────────────────── */
.opt {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left;
  padding: .7rem .85rem; border: 2px solid var(--line); border-radius: .75rem;
  background: #fff; transition: border-color .15s, background .15s;
  font-size: .975rem; line-height: 1.6;
}
.opt:hover { border-color: #94a3b8; background: #f8fafc; }
.opt .badge {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: .8rem; display: grid; place-items: center;
}
.opt.chosen { border-color: var(--brand); background: var(--brand-soft); }
.opt.chosen .badge { background: var(--brand); color: #fff; }
.opt.correct { border-color: #16a34a; background: #f0fdf4; }
.opt.correct .badge { background: #16a34a; color: #fff; }
.opt.wrong { border-color: var(--red); background: #fef2f2; }
.opt.wrong .badge { background: var(--red); color: #fff; }
.opt[disabled] { cursor: default; }

/* ── generated figures ────────────────────────────────────────────────────── */
.brfig { display: block; height: auto; max-width: 100%; }
.figrow {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding: .75rem; background: #f8fafc; border: 1px solid var(--line);
  border-radius: .75rem; margin-top: .75rem; overflow-x: auto;
}
.opt .brfig { width: 94px; }

/* ── question palette ─────────────────────────────────────────────────────── */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr)); gap: .35rem; }
.pal {
  aspect-ratio: 1; border-radius: .45rem; font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
  display: grid; place-items: center; transition: transform .1s;
}
.pal:hover { transform: scale(1.08); }
.pal.answered  { background: #dcfce7; border-color: #16a34a; color: #15803d; }
.pal.marked    { background: #fef3c7; border-color: var(--amber); color: #b45309; }
.pal.answered.marked { background: #fde68a; border-color: var(--amber); color: #92400e; }
.pal.current   { outline: 2.5px solid var(--brand); outline-offset: 1.5px; }

/* ── misc ─────────────────────────────────────────────────────────────────── */
.tnum { font-variant-numeric: tabular-nums; }
.otp-box {
  letter-spacing: .55em; text-indent: .55em; font-weight: 700; font-size: 1.15rem;
  text-align: center; font-variant-numeric: tabular-nums;
}
.locked { filter: grayscale(1) opacity(.55); pointer-events: none; }
.fade-in { animation: fade .3s ease-out both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print {
  .no-print { display: none !important; }
}