/* =================================================================
   Mock Test Mitra™  |  assets/css/blog-index.css
   The blog index (blog.html) as an exam screen, drawn by
   assets/js/blog-index.js: the latest pair, a search box, then sections,
   numbered questions and a question palette, styled after the
   computer-based test screen aspirants practise on. Loads after blog.css,
   whose sketch colours (.sk) colour the essays' lead sketches.
   ================================================================= */

/* The index is wider than an essay; its opening text keeps the reading width. */
.blog-index > .post-crumbs,
.blog-index > .post-kicker,
.blog-index > h1,
.blog-index > .post-dek,
.blog-index > .blog-follow { max-width: calc(var(--prose-max-width, 72ch) + 40px); }

/* Until blog-index.js has drawn the screen, hold back the card list it
   replaces; if the script has not run within three seconds, show the list. */
html.js:not(.bx-ready) .blog-list {
  max-height: 0;
  overflow: hidden;
  animation: bx-fallback 0s linear 3s forwards;
}
@keyframes bx-fallback { to { max-height: none; overflow: visible; } }

.bx {
  --bx-read: #15803d;      /* white text 5.0:1 */
  --bx-opened: #c2410c;    /* white text 5.2:1 */
  --bx-saved: #7c3aed;     /* white text 5.7:1 */
  --bx-on: #ffffff;
  --bx-bar: #1e3a8a;
  --bx-bar-text: #ffffff;
  --bx-bar-muted: #c7d2fe;
  --bx-panel: var(--surface-alt, #f1f5f9);
  --bx-line: var(--border, #e2e8f0);
  container-type: inline-size;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
[data-theme="dark"] .bx {
  --bx-read: #4ade80;
  --bx-opened: #fb923c;
  --bx-saved: #a78bfa;
  --bx-on: #0a0f1a;
  --bx-bar: #172554;
  --bx-bar-text: #f1f5f9;
  --bx-bar-muted: #a5b4fc;
  --bx-line: #243044;
}

.bx-kicker {
  font-family: var(--post-hand, 'Kalam', cursive);
  color: var(--accent-text, var(--primary));
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
}
.bx-meta { font-size: 0.82rem; color: var(--text-muted); margin: 0; font-variant-numeric: tabular-nums; }

/* ── The latest pair ─────────────────────────────────────────────── */
.bx-latest { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bx-latest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--card-bg);
  border: 1px solid var(--bx-line);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.bx-latest-card:hover { border-color: var(--accent-fill, var(--primary)); }
/* blog.css colours every link in .post; the index's cards and buttons keep their own. */
.bx a.bx-latest-card, .bx a.bx-btn { color: var(--text); text-decoration: none; }
.bx a.bx-btn--go { color: #ffffff; }
[data-theme="dark"] .bx a.bx-btn--go { color: #0a0f1a; }
.bx-latest-text { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; min-width: 0; }
.bx-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.bx-latest-title {
  font-family: var(--post-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
/* On a narrow screen the pair is words only; the question below shows its sketch. */
.bx-thumb { display: none; padding: 10px 12px; background: var(--card-bg); }
.bx-thumb svg, .bx-fig svg { display: block; width: 100%; height: 100%; }
@container (min-width: 700px) {
  .bx-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-thumb { display: block; order: -1; aspect-ratio: 2 / 1; border-bottom: 1px solid var(--bx-line); }
}
@container (min-width: 1000px) {
  .bx-latest-card { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .bx-thumb { order: 0; aspect-ratio: auto; min-height: 150px; border-bottom: 0; border-left: 1px solid var(--bx-line); }
}

/* ── Search ──────────────────────────────────────────────────────── */
.bx-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.bx-search label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bx-search input {
  flex: 1 1 280px;
  min-width: 0;
  font: inherit;
  font-size: 0.98rem;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--bx-line);
  background: var(--card-bg);
  color: var(--text);
}
.bx-search input:focus-visible { outline: 3px solid var(--accent-fill, var(--primary)); outline-offset: 1px; }
.bx-results:empty { display: none; }
.bx-results-h { margin: 0 0 6px; font-size: 0.9rem; color: var(--text-secondary); }
.bx-results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bx-results-list button {
  width: 100%;
  text-align: left;
  font: inherit;
  font-family: var(--post-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.bx-results-list button:hover { background: var(--bx-panel); }
.bx-results-q {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text, var(--primary));
  margin-right: 6px;
  white-space: nowrap;
}
.bx-results-more { margin: 4px 0 0 10px; font-size: 0.82rem; color: var(--text-muted); }

/* ── The exam screen ─────────────────────────────────────────────── */
.bx-screen {
  border: 1px solid var(--bx-line);
  border-radius: 14px;
  background: var(--card-bg);
  overflow: hidden;
}
.bx-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 14px;
  padding: 11px 18px;
  background: var(--bx-bar);
  color: var(--bx-bar-text);
}
.bx-bar-name { font-weight: 600; font-size: 0.95rem; }
.bx-bar-count { font-size: 0.82rem; color: var(--bx-bar-muted); font-variant-numeric: tabular-nums; }
.bx-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--bx-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.bx-tabs button {
  flex: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--bx-panel);
  border: 1px solid var(--bx-line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  padding: 8px 14px;
  cursor: pointer;
}
.bx-tabs button[aria-pressed="true"] {
  color: var(--text);
  background: var(--card-bg);
  position: relative;
  top: 1px;
}
.bx-tab-n { margin-left: 6px; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.bx-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 780px) {
  .bx-body { grid-template-columns: minmax(0, 1fr) 300px; }
}

.bx-pane { display: flex; flex-direction: column; gap: 10px; padding: 20px clamp(16px, 3.4cqi, 30px) 22px; min-width: 0; }
.bx-qhead {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bx-line);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.bx-qhead b { color: var(--text); font-weight: 600; }
.bx-title {
  font-family: var(--post-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.4rem, 3.2cqi, 1.9rem);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.bx-title a { color: var(--text); text-decoration: none; }
.bx-title a:hover { color: var(--accent-text, var(--primary)); }
.bx-fig { height: clamp(160px, 30cqi, 290px); margin: 4px 0; }
.bx-summary {
  font-family: var(--post-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 64ch;
}
.bx-actions, .bx-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-nav { justify-content: space-between; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--bx-line); }
.bx-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid var(--bx-line);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.bx-btn:hover:not([disabled]) { border-color: var(--accent-fill, var(--primary)); }
.bx-btn[disabled] { opacity: 0.45; cursor: default; }
.bx-btn--go { background: var(--accent-fill, var(--primary)); border-color: var(--accent-fill, var(--primary)); }
.bx-btn--read[aria-pressed="true"] { background: var(--bx-read); border-color: var(--bx-read); color: var(--bx-on); }
.bx-btn--save[aria-pressed="true"] { background: var(--bx-saved); border-color: var(--bx-saved); color: var(--bx-on); }

/* The palette: a column beside the question, as on the exam screen, or a band
   above it on a narrow screen, so a number tapped shows its question just below. */
.bx-side {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
  background: var(--bx-panel);
  border-bottom: 1px solid var(--bx-line);
}
@container (min-width: 780px) {
  .bx-side { order: 0; border-bottom: 0; border-left: 1px solid var(--bx-line); }
}
.bx-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.bx-legend li { display: flex; align-items: center; gap: 8px; }
.bx-legend .bx-q { width: 28px; height: 28px; flex: none; font-size: 0.78rem; cursor: default; }
.bx-side-h { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bx-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; }
.bx-q {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--text-muted);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bx-q.is-read { background: var(--bx-read); border-color: var(--bx-read); color: var(--bx-on); }
.bx-q.is-read::after { content: "✓"; position: absolute; top: 1px; right: 3px; font-size: 0.6rem; line-height: 1; }
.bx-q.is-opened { background: var(--bx-opened); border-color: var(--bx-opened); color: var(--bx-on); }
.bx-q.is-saved { background: var(--bx-saved); border-color: var(--bx-saved); color: var(--bx-on); border-radius: 50%; }
.bx-q.is-current { outline: 3px solid var(--accent-fill, var(--primary)); outline-offset: 2px; }
.bx-q.is-dim { opacity: 0.22; }
.bx-q:focus-visible, .bx-tabs button:focus-visible, .bx-btn:focus-visible, .bx-results-list button:focus-visible, .bx-latest-card:focus-visible {
  outline: 3px solid var(--accent-fill, var(--primary));
  outline-offset: 2px;
}
.bx-note { margin: 0; font-size: 0.82rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .bx-latest-card { transition: none; }
}