/* paper.css — ONE reading format for every page where students read our questions and notes (owner, 2026-10-23:
   "keep it one format, the ideal one every test app does, like a textbook page — white page and black text").
   Loaded AFTER app.css by pages with <html class="paper">: mock, pyq, test, challenge, current, news, practice, g, kit,
   notes. White page + black text in light AND dark phone settings; options like a test app (letter circle, selected =
   blue, correct = green, wrong = red). Selectors are prefixed html.paper so they win over each page's own styles. */

html.paper.paper:root, html.paper.paper:root:not([data-theme="light"]) {
  color-scheme: light;
  --paper: #f4f5f7; --card: #ffffff; --text: #111111; --muted: #5f6368; --line: #dadce0;
  --amber-soft: #eef3fd; --green: #137333; --green-soft: #e6f4ea; --red: #c5221f; --red-soft: #fce8e6;
  --blue: #1a56db; --blue-soft: #eef3fd;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
}
html.paper body { background: #f4f5f7; color: #111; }

/* the question */
html.paper .qcard, html.paper .qq, html.paper .rv {
  background: #fff; border: 1px solid #dadce0; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); color: #111;
}
html.paper .qtext, html.paper .qq .t, html.paper .rv .q, html.paper .rv-q, html.paper .rv > b, html.paper .q > b {
  color: #111; font-family: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: 0;
}

/* the options */
html.paper .opt, html.paper .qq .o {
  background: #fff; border: 1.5px solid #dadce0; border-radius: 10px; box-shadow: none; color: #111;
  font-size: 16.5px; font-weight: 500; line-height: 1.5; padding: 12px 14px; transform: none;
}
html.paper .opt:hover, html.paper .qq .o:hover { border-color: #9aa0a6; }
html.paper .opt .k {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1.5px solid #9aa0a6;
  color: #3c4043; font-weight: 700; font-size: 14px;
}
/* selected (before checking) */
html.paper .opt[aria-pressed="true"], html.paper .opt.sel, html.paper .qq .o[aria-pressed="true"] {
  border-color: #1a56db; background: #eef3fd; color: #111;
}
html.paper .opt[aria-pressed="true"] .k, html.paper .opt.sel .k { background: #1a56db; border-color: #1a56db; color: #fff; }
/* after checking: right / wrong */
html.paper .opt.ok, html.paper .qq .o.right { border-color: #137333; background: #e6f4ea; color: #0d3d1f; }
html.paper .opt.ok .k { background: #137333; border-color: #137333; color: #fff; }
html.paper .opt.no, html.paper .qq .o.wrong { border-color: #c5221f; background: #fce8e6; color: #5c1210; }
html.paper .opt.no .k { background: #c5221f; border-color: #c5221f; color: #fff; }

/* answers / review */
html.paper .rv.ok { border-left: 4px solid #137333; }
html.paper .rv.no { border-left: 4px solid #c5221f; }
html.paper .rv.skip { border-left: 4px solid #9aa0a6; }
html.paper .rv .a, html.paper .why, html.paper .exp, html.paper .qq .x { color: #3c4043; line-height: 1.6; }

/* numbers, timers and progress stay neutral */
html.paper .timer { background: #fff; border: 1px solid #dadce0; color: #111; }
html.paper .timer.low { background: #fce8e6; border-color: #c5221f; color: #c5221f; }
html.paper .dot { background: #fff; border-color: #dadce0; color: #3c4043; }
html.paper .dot.ans { background: #1a56db; border-color: #1a56db; color: #fff; }