/* NTA-style exam interface.
   Deliberately NOT the NCERT TRAPS brand: this screen imitates the real NTA
   software, down to the flat grey chrome and the cramped palette. Familiarity
   is the product - a prettier screen would be a worse rehearsal. */

:root{
  --e-bg:#EDEFF1; --e-panel:#FFFFFF; --e-line:#C9CFD6; --e-ink:#14181D;
  --e-muted:#5B6570; --e-head:#1F4E79; --e-head-2:#2C6299;
  --e-unseen:#FFFFFF; --e-unseen-edge:#6E7A87;
  --e-unans:#D93025; --e-ans:#146C2E; --e-mark:#7B1FA2;
  --e-accent:#B0122A;
}

.exam{
  position:fixed;inset:0;z-index:200;display:none;
  background:var(--e-bg);color:var(--e-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.5;overflow:hidden;
}
.exam.on{display:grid;grid-template-rows:auto 1fr auto}
body.exam-open{overflow:hidden}

/* ---------- header ---------- */
.e-head{background:var(--e-head);color:#fff;display:flex;align-items:center;
  gap:16px;padding:9px 16px;flex-wrap:wrap}
.e-head h1,.e-head h2{font-size:.98rem;margin:0;font-weight:600;letter-spacing:.01em}
.e-timer{margin-left:auto;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.14);padding:6px 13px;border-radius:3px;
  font-variant-numeric:tabular-nums}
.e-timer b{font-size:1.12rem;letter-spacing:.02em}
.e-timer.low{background:var(--e-unans)}
.e-timer span{font-size:.74rem;opacity:.85;text-transform:uppercase;letter-spacing:.09em}

/* ---------- body ---------- */
.e-body{display:grid;grid-template-columns:minmax(0,1fr) 288px;overflow:hidden;position:relative}

/* Short screens: smaller number tiles so more of the paper fits at a glance. */

.e-main{overflow-y:auto;min-height:0;padding:18px 20px 26px;background:var(--e-panel);
  border-right:1px solid var(--e-line)}
.e-qhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--e-line);padding-bottom:9px;margin-bottom:16px;flex-wrap:wrap}
.e-qno{font-weight:700;font-size:1.02rem}
.e-qmeta{font-size:.78rem;color:var(--e-muted)}
.e-marks{font-size:.78rem;color:var(--e-muted)}
.e-marks b{color:var(--e-ans)}
.e-marks i{color:var(--e-unans);font-style:normal}

.e-stem{font-size:1.02rem;margin:0 0 6px;max-width:74ch}
.e-sub{margin:10px 0;padding-left:14px;border-left:3px solid var(--e-line);max-width:74ch}
.e-sub b{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--e-muted);margin-bottom:2px}
.e-cap{display:inline-block;border:1px dashed var(--e-muted);color:var(--e-muted);
  padding:9px 14px;margin:10px 0;font-size:.9rem;border-radius:3px}
.e-match{border-collapse:collapse;margin:12px 0;font-size:.93rem}
.e-match td{border:1px solid var(--e-line);padding:6px 12px}
.e-match tr:first-child td{background:var(--e-bg);font-weight:600}

.e-opts{list-style:none;margin:16px 0 0;padding:0;max-width:74ch}
.e-opts li{margin:0 0 9px}
.e-opts label{display:flex;gap:11px;align-items:flex-start;padding:10px 13px;
  border:1px solid var(--e-line);border-radius:3px;cursor:pointer;background:#fff}
.e-opts label:hover{background:#F4F7FA;border-color:var(--e-head-2)}
/* style.css sets input{width:100%} for the shop forms; a radio must not
   inherit that or it stretches the row and shunts the option text right. */
.e-opts input[type="radio"]{width:auto;flex:0 0 auto;margin:3px 0 0;accent-color:var(--e-head)}
.e-opts label > span:last-child{flex:1 1 auto;min-width:0}
.e-opts .n{font-weight:700;color:var(--e-muted);flex:0 0 auto}
.e-opts label.sel{border-color:var(--e-head);background:#EAF2F9}

/* ---------- floating palette trigger ---------- */
/* Lives in the question's grid cell, pinned bottom-right of it. Placed with
   grid-area rather than absolute positioning: an absolutely positioned grid
   item resolves against its own grid area, which is how earlier attempts
   ended up in the wrong row. */
.e-fab{
  grid-area:1 / 1;align-self:end;justify-self:end;margin:0 14px 14px;z-index:6;
  display:none;align-items:center;gap:8px;cursor:pointer;
  background:var(--e-head);color:#fff;border:0;border-radius:28px;
  padding:12px 18px;font-family:inherit;font-size:.88rem;font-weight:600;
  box-shadow:0 6px 18px rgba(16,22,28,.32);
}
.e-fab-dots{font-size:1.15rem;line-height:1;letter-spacing:.08em}
.e-fab:active{transform:translateY(1px)}

/* ---------- right rail ---------- */
.e-rail{background:var(--e-bg);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.e-legend{padding:12px 14px;border-bottom:1px solid var(--e-line);background:var(--e-panel);
  flex:0 0 auto}
.e-close{display:none;width:calc(100% - 28px)}
.e-legend div{display:flex;align-items:center;gap:9px;font-size:.79rem;margin:0 0 6px}
.e-legend div:last-child{margin-bottom:0}
.e-key{width:25px;height:23px;flex:0 0 auto;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:#fff}
.k-unseen{background:var(--e-unseen);border:1.5px solid var(--e-unseen-edge);color:var(--e-ink);border-radius:2px}
.k-unans{background:var(--e-unans);border-radius:2px 2px 12px 12px}
.k-ans{background:var(--e-ans);border-radius:12px 12px 2px 2px}
.k-mark{background:var(--e-mark);border-radius:50%}
.k-both{background:var(--e-mark);border-radius:50%;position:relative}
.k-both::after{content:"";position:absolute;right:-2px;bottom:-1px;width:10px;height:10px;
  border-radius:50%;background:var(--e-ans);border:1.5px solid var(--e-bg)}

.e-palette{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px;
  -webkit-overflow-scrolling:touch}
.e-palette p{margin:0 0 9px;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--e-muted)}
.e-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:7px}
.e-grid button{height:34px;border:1.5px solid var(--e-unseen-edge);background:var(--e-unseen);
  color:var(--e-ink);font-weight:700;font-size:.82rem;cursor:pointer;border-radius:2px;
  font-variant-numeric:tabular-nums;padding:0}
.e-grid button.unans{background:var(--e-unans);color:#fff;border-color:var(--e-unans);border-radius:2px 2px 13px 13px}
.e-grid button.ans{background:var(--e-ans);color:#fff;border-color:var(--e-ans);border-radius:13px 13px 2px 2px}
.e-grid button.mark{background:var(--e-mark);color:#fff;border-color:var(--e-mark);border-radius:50%}
.e-grid button.both{background:var(--e-mark);color:#fff;border-color:var(--e-mark);border-radius:50%;position:relative}
.e-grid button.both::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:var(--e-ans);border:1.5px solid var(--e-bg)}
.e-grid button.cur{outline:3px solid var(--e-head);outline-offset:1px}

/* ---------- footer controls ---------- */
.e-foot{background:var(--e-panel);border-top:1px solid var(--e-line);
  padding:11px 16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.e-btn{border:1px solid var(--e-line,#C9CFD6);background:#fff;color:var(--e-ink,#14181D);
  font-size:.88rem;font-weight:600;padding:9px 15px;border-radius:3px;cursor:pointer;
  font-family:inherit}
.e-btn:hover{background:var(--e-bg)}
.e-btn.primary{background:var(--e-head,#1F4E79);border-color:var(--e-head,#1F4E79);color:#fff}
.e-btn.primary:hover{background:var(--e-head-2,#2C6299)}
.e-btn.danger{background:var(--e-accent,#B0122A);border-color:var(--e-accent,#B0122A);color:#fff;margin-left:auto}
.e-btn:disabled{opacity:.45;cursor:not-allowed}
/* Scoped to the footer: unscoped, flex:1 also caught the palette's close
   button, which sits in a column flex and grew to fill the panel. */

/* ---------- discourage copying ----------
   Applies to the questions, the options and the worked explanations only.
   Form fields stay selectable, or the shop would feel broken. This is a
   deterrent, not protection: it cannot stop a screenshot or a determined
   reader, and nothing here is a substitute for the answers never leaving
   the server until a paper is submitted. */
.exam .e-main, .exam .e-stem, .exam .e-sub, .exam .e-opts,
.exam .e-match, .exam .e-cap, .exam .e-qhead,
#cbt-review, #cbt-result .card{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.exam input, .exam select, .exam textarea{
  -webkit-user-select:auto;user-select:auto;
}

/* ---------- dialogs ---------- */
/* The exam screen is a replica of the real NTA software and does not follow
   the site's light/dark theme - a prettier or darker screen would be a worse
   rehearsal. It is also not enough to leave it alone: these panels are white
   and take their TEXT colour by inheritance from <body>, which the dark theme
   turns nearly white. The confirm dialog came out white on white, measured at
   1.16:1.
   So the exam subtree pins the site's tokens back to their light values. Any
   shared component that appears inside it - an error message, a button - then
   renders in light, which is correct, because it is part of this replica and
   not part of the page behind it. */
.exam,.e-veil{
  --bone:#14181D; --muted:#5B6570; --dim:#5B6570;
  --ink:#EDEFF1; --ink-2:#FFFFFF; --ink-3:#EDEFF1; --line:#C9CFD6;
  --brand:#0E5C55; --brand-lift:#12766D; --brand-soft:#DCE9E6; --on-brand:#fff;
  --red:#C0271A; --red-lift:#A8200F; --red-soft:#F9E5E1; --on-red:#fff;
  --paper:#fff;
  color:var(--e-ink);
}

.e-veil{position:fixed;inset:0;background:rgba(10,14,18,.62);display:none;
  place-items:center;z-index:220;padding:20px}
.e-veil.on{display:grid}
.e-card{background:var(--e-panel);border-radius:4px;max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;padding:26px 28px}
.e-card h2{margin:0 0 12px;font-size:1.25rem}
.e-card table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
.e-card td{padding:7px 0;border-bottom:1px solid var(--e-line,#C9CFD6)}
.e-card td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.e-card .row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.e-card .row .e-btn{flex:1 1 auto;min-width:140px;padding:13px 18px;font-size:.95rem}
@media(max-width:860px){
  .e-card .row{flex-direction:column}
  .e-card .row .e-btn{width:100%}
}

/* ===================================================================
   Media queries live at the end on purpose. When they sat above the
   base rules, any base declaration of the same specificity won and the
   query silently did nothing - which is how the close button, the
   palette trigger and the palette itself all failed to hide or show.
   =================================================================== */

@media(max-width:860px){
  .e-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .e-rail{display:none}
  .e-fab{display:flex}

  /* A compact header. Two wrapped rows of title, button and timer were eating
     the screen before a single question had been read. */
  .e-head{padding:8px 12px;gap:10px;flex-wrap:nowrap}
  .e-head h1,.e-head h2{font-size:.82rem;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .e-timer{padding:5px 10px;gap:6px}
  .e-timer b{font-size:1rem}
  .e-timer span{display:none}

  .e-main{grid-area:1 / 1;padding:14px 16px 84px}
  .e-qhead{padding-bottom:7px;margin-bottom:12px}
  .e-stem{font-size:.97rem}
  .e-opts label{padding:9px 12px}

  /* The palette is a SCREEN, not a panel over the question.
     Sheets and overlays kept covering what the student was navigating to, and
     every attempt to size one against the question failed on a real phone.
     Showing one or the other removes the whole class of problem: nothing can
     overlap when only one thing is displayed. */
  .exam.pal-open .e-main{display:none}
  .exam.pal-open .e-fab{display:none}
  .exam.pal-open .e-rail{grid-area:1 / 1;display:flex;min-height:0}

  .e-close{
    display:block;margin:0;width:100%;border:0;border-radius:0;
    background:var(--e-head);color:#fff;font-size:.9rem;font-weight:600;
    padding:12px;text-align:left;
  }
  .e-foot{padding:9px 12px;gap:7px}
}

@media(max-width:860px) and (max-height:660px){
  .e-grid{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:5px}
  .e-grid button{height:29px;font-size:.76rem}
  .e-main{padding:12px 14px 74px}
  .e-foot{padding:7px 10px;gap:6px}
  .e-foot .e-btn{padding:8px 8px;font-size:.78rem}
}

@media(min-width:861px){ .e-fab{display:none} }

@media(max-width:860px){.e-foot .e-btn{flex:1 1 auto;font-size:.82rem;padding:9px 10px}
  .e-foot .e-btn.danger{margin-left:0}
  .e-close{flex:0 0 auto}}

/* Diagram questions carry a figure. It is the question, not decoration: the
   stem says "the cell shown", so it has to be legible at phone width and it
   must not push the options below the fold on a small screen. A white plate
   keeps the line art readable when the page is in dark mode. */
.q-fig{display:block;max-width:100%;height:auto;margin:12px 0 6px;
  background:#fff;border:1px solid var(--e-line,#d7d2c8);border-radius:4px;
  padding:8px;box-sizing:border-box}
@media (max-width:640px){.q-fig{padding:5px}}
/* With a real figure above it the caption is a caption, not the dashed
   placeholder box it used to be when there was nothing to caption. */
.q-fig + .e-cap, .q-fig + .ln-pg{display:block;border:0;padding:0;margin:0 0 10px;
  font-size:.86rem;font-style:italic}