/* =================================================================
   cbse-frontend/css/cbse-paper.css — the board-pattern sample papers
   (/class-10/sample-papers…, scripts/build-cbse-sample-papers.js):
   the question paper, exam bar, marking-scheme gate and the A4 print view.
   Loaded after cbse.css; tokens from css/tokens.css. Only `sp-` classes.
   ================================================================= */
.sp-disclaimer { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--ibm-amber); background: var(--ibm-amber-soft); border-radius: var(--ibm-r); font-size: .94rem; }

/* Exam bar */
.sp-bar { position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; padding: 10px 14px; background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: var(--ibm-r-card); box-shadow: var(--ibm-shadow); }
.sp-bar__time { display: flex; align-items: baseline; gap: 8px; }
.sp-bar__label { font-size: var(--ibm-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ibm-muted); }
.sp-timer { font: 800 1.35rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--ibm-dark); }
.sp-timer.is-low { color: var(--ibm-red); }
.sp-bar__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-bar__acts [hidden] { display: none; }
.sp-bar__msg { flex-basis: 100%; margin: 0; font-size: var(--ibm-text-sm); font-weight: 600; color: var(--ibm-ink-2); }
.sp-bar__msg:empty { display: none; }
.sp-page .cb-tabs { top: 0; }
html.sp-exam .cb-tabs { display: none; }

/* The paper */
.sp-paper { margin-top: 18px; }
.sp-print-head { display: none; }
.sp-section { margin: 0 0 28px; scroll-margin-top: 80px; }
.sp-section > h2 { font-size: 1.3rem; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--ibm-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.sp-section__m { font-size: var(--ibm-text-sm); color: var(--ibm-muted); font-weight: 700; }
.sp-section__i { color: var(--ibm-ink-2); font-size: .95rem; margin: 8px 0 12px; }
.sp-ins { background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: var(--ibm-r-card); padding: 6px 18px 6px 8px; font-size: .95rem; }
.sp-ins li { margin: 4px 0; }

.sp-q { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 2em; gap: 0 10px; padding: 14px 0; border-top: 1px solid var(--ibm-line); scroll-margin-top: 80px; }
.sp-q__num { font-weight: 800; color: var(--ibm-dark); }
.sp-q__marks { text-align: right; font-weight: 700; color: var(--ibm-muted); font-size: var(--ibm-text-sm); }
.sp-q__main { min-width: 0; overflow-wrap: anywhere; }
.sp-q__body > p:first-child { margin-top: 0; }
.sp-q__body p { margin: 0 0 8px; }
.sp-q__body ol[type="i"] { padding-left: 1.6em; }
.sp-q__body ol[type="i"] > li { margin: 6px 0; }
.sp-q__body table.data { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; max-width: 100%; }
.sp-q__body table.data td, .sp-q__body table.data th { border: 1px solid var(--ibm-line-strong); padding: 5px 10px; text-align: center; }
.sp-q__body mjx-container[display="true"], .sp-ms mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.sp-q__main mjx-container { max-width: 100%; }
/* set by cbse-paper.js on inline maths wider than its column */
.sp-paper mjx-container.sp-wide { display: block; width: fit-content; max-width: 100%; overflow-x: auto; overflow-y: hidden; margin: 2px 0; padding-bottom: 2px; }
.sp-opts { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.sp-opts--ar { grid-template-columns: minmax(0, 1fr); }
.sp-opts li { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sp-opts__l { flex: none; font-weight: 700; }
.sp-or { text-align: center; font-weight: 800; letter-spacing: .1em; margin: 10px 0; color: var(--ibm-dark); }
.sp-q__links { margin: 8px 0 0; font-size: var(--ibm-text-xs); color: var(--ibm-muted); }
.sp-q__links a { font-weight: 700; }
.sp-q__sep { color: var(--ibm-line-strong); }

/* Schemes */
.sp-ms { margin-top: 10px; border: 1px solid var(--ibm-line); border-top: 3px solid var(--ibm-primary); border-radius: var(--ibm-r); background: #fbfcfe; }
.sp-ms > summary { cursor: pointer; padding: 8px 12px; font-weight: 800; font-size: var(--ibm-text-sm); color: var(--ibm-primary); }
.sp-ms__body { padding: 0 14px 10px; }
.sp-ms__body p { margin: 0 0 8px; }
.sp-ms__key { font-weight: 800; color: var(--ibm-green); }
.sp-ms__or { font-weight: 800; margin-top: 10px !important; padding-top: 8px; border-top: 1px dashed var(--ibm-line); }
.sp-free { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--ibm-r-pill); background: var(--ibm-green-soft); color: var(--ibm-green); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.sp-topper { margin: 8px 0 0 !important; padding: 8px 12px; background: var(--ibm-amber-soft); border-radius: var(--ibm-r); font-size: .94rem; }
html.sp-exam .sp-ms, html.sp-exam .sp-keywrap, html.sp-exam .sp-q__links { display: none; }
html.sp-exam .sp-marking > :not(h2) { display: none; }
html.sp-exam .sp-marking::after { content: "The answer key and marking scheme are hidden until you finish the exam."; display: block; color: var(--ibm-muted); }

/* Gate */
.sp-gate { margin: 14px 0; padding: 16px 18px; border: 1px dashed var(--ibm-primary); border-radius: var(--ibm-r-card); background: var(--ibm-primary-soft); }
.sp-gate[hidden], .sp-open[hidden] { display: none; }
.sp-gate h3 { margin: 0 0 6px; font-size: 1.08rem; }
.sp-gate p { margin: 0 0 10px; }
.sp-gate--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; }
.sp-gate--inline p { margin: 0; flex: 1 1 260px; font-size: .94rem; }
.sp-open { margin: 14px 0; padding: 10px 14px; border-radius: var(--ibm-r-card); background: var(--ibm-green-soft); }
.sp-open p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-key th, .sp-key td { text-align: center; padding: 6px 8px; white-space: nowrap; }
.sp-units { max-width: 420px; }
.sp-marking h3 { font-size: 1.05rem; margin: 18px 0 8px; }

/* Hub */
.cb-callout h2.sp-callout-h { margin: 0 0 4px; font-size: 1.05rem; }
.sp-card__u { font-size: var(--ibm-text-xs); color: var(--ibm-muted); }
.sp-faq { margin: 0 0 10px; padding: 10px 14px; background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: var(--ibm-r); }
.sp-faq > summary { width: auto; }
.sp-faq p { margin: 8px 0 0; }

@media (max-width: 560px) {
  .sp-opts { grid-template-columns: minmax(0, 1fr); }
  .sp-q { grid-template-columns: 1.9em minmax(0, 1fr); }
  .sp-q__marks { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .sp-q__main { grid-column: 2; grid-row: 1; padding-right: 1.6em; }
  .sp-timer { font-size: 1.15rem; }
}

/* A4 print view: the question paper as a board paper; schemes only when
   "Print with scheme" was pressed (html.sp-print-ms). */
@page { size: A4; margin: 14mm 14mm 16mm; }
@media print {
  html, body.cb { background: #fff !important; }
  body.cb { font-size: 10.5pt; line-height: 1.4; color: #000; }
  nav.topnav, footer, .site-footer, .ibm-crumbs, .cb-tabs, .cb-noprint, .sp-bar, .sp-gate, .sp-open, .cb-head .cb-lede, .cb-head .cb-facts, .cb-head .cb-eyebrow, .sp-disclaimer, [data-testid="cookie-consent-banner"], [class*="sibling-sites"] { display: none !important; }
  .cb-wrap, .cb-narrow { max-width: none; padding: 0; }
  .cb-main { padding: 0; }
  .cb-head { padding: 0; }
  .cb-head h1 { display: none; }
  .sp-print-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; border-bottom: 1.5pt solid #000; padding-bottom: 6pt; margin-bottom: 8pt; font-size: 11pt; }
  .sp-print-head span { font-size: 9.5pt; }
  .sp-paper { margin: 0; }
  .sp-section { margin: 0 0 10pt; }
  .sp-section > h2 { font-size: 12pt; border-bottom: 1pt solid #000; break-after: avoid; page-break-after: avoid; color: #000; }
  .sp-section__i { font-size: 9.5pt; font-style: italic; color: #000; margin: 4pt 0 6pt; }
  .sp-ins { border: 0; padding: 0; font-size: 9.5pt; }
  .sp-q { padding: 6pt 0; border-top: 0.5pt solid #bbb; break-inside: avoid; page-break-inside: avoid; grid-template-columns: 2em minmax(0, 1fr) 2em; }
  .sp-q__main { padding-right: 0; grid-column: auto; grid-row: auto; }
  .sp-q__marks { grid-column: auto; grid-row: auto; color: #000; }
  .sp-q__body table.data td, .sp-q__body table.data th { border-color: #000; }
  .sp-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-opts--ar { grid-template-columns: minmax(0, 1fr); }
  a { color: #000 !important; text-decoration: none !important; }
  mjx-container { overflow: visible !important; }
  /* Question paper only (the default, and "Print paper") */
  .sp-ms, .sp-marking, .sp-page > .cb-wrap > .cb-section:not(.sp-marking), .sp-page nav.cb-cta, .sp-page .cb-wrap > p.cb-muted { display: none !important; }
  /* "Print with scheme" */
  html.sp-print-ms .sp-ms { display: block !important; border: 0.5pt solid #999; border-top: 1.5pt solid #000; background: #fff; break-inside: avoid; }
  html.sp-print-ms .sp-ms > summary { color: #000; padding: 3pt 6pt; list-style: none; }
  html.sp-print-ms .sp-marking { display: block !important; break-before: page; page-break-before: always; }
  html.sp-print-ms .sp-marking .cb-sub { color: #000; }
  .sp-topper { background: #fff; border: 0.5pt dashed #999; }
  .sp-free { background: none; color: #000; }
}