/* ============================================================================
   MrChemCoach - the reading section under every bench
   © Mr ChemCoach EdTech Pvt Ltd. All rights reserved.

   A simulator on its own is a blank page to a search engine, and a blank page
   to anyone who arrived wanting to know what the experiment is. This is the
   part of each lab that can be read: what it shows, how it is done, what to
   look for, and where marks are lost.

   It reads the page's own tokens where they exist and falls back to the
   house palette where they do not, so it sits correctly on every bench.
   ========================================================================== */
.mcc-read{
  --r-bg:var(--surface,#0d1117);
  --r-bg2:var(--surface-2,#121821);
  --r-line:var(--line,rgba(255,255,255,.09));
  --r-tx:var(--text,#e9eff4);
  --r-tx2:var(--text-2,#96a4b2);
  --r-tx3:var(--text-3,#7d8b99);
  --r-ac:var(--accent,#ff3e7f);
  --r-aq:var(--accent-2,#39e7c4);
  box-sizing:border-box;display:block;width:100%;
  padding:34px clamp(14px,4vw,24px) 10px;
  background:var(--r-bg);color:var(--r-tx);
  font-family:var(--f-body,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
.mcc-read *{box-sizing:border-box}
.mcc-read-in{max-width:var(--maxw,1280px);margin:0 auto}

.mcc-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 18px;
  font-family:var(--f-mono,ui-monospace,SFMono-Regular,monospace);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--r-tx3)}
.mcc-crumb a{color:var(--r-tx2);text-decoration:none;border-bottom:1px solid transparent}
.mcc-crumb a:hover{color:var(--r-tx);border-bottom-color:var(--r-line)}
.mcc-crumb span[aria-current]{color:var(--r-tx)}
.mcc-crumb i{font-style:normal;opacity:.5}

.mcc-read h2{margin:26px 0 10px;font-family:var(--f-display,Sora,system-ui,sans-serif);
  font-weight:600;font-size:1.12rem;letter-spacing:-.02em;color:var(--r-tx);line-height:1.3}
.mcc-read h2:first-of-type{margin-top:0}
.mcc-read p{margin:0 0 12px;color:var(--r-tx2);max-width:74ch}
.mcc-read p b,.mcc-read li b{color:var(--r-tx);font-weight:600}
.mcc-read ul,.mcc-read ol{margin:0 0 12px;padding-left:22px;color:var(--r-tx2);max-width:74ch}
.mcc-read li{margin:0 0 6px}
.mcc-read li::marker{color:var(--r-tx3)}

.mcc-read .eq{display:inline-block;margin:2px 0 16px;padding:9px 14px;border-radius:9px;
  border:1px solid var(--r-line);background:var(--r-bg2);color:var(--r-tx);
  font-family:var(--f-mono,ui-monospace,monospace);font-size:.94rem;letter-spacing:.01em}

.mcc-read .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:0 30px}

.mcc-read h3{margin:24px 0 6px;font-family:var(--f-display,Sora,system-ui,sans-serif);
  font-weight:600;font-size:.98rem;letter-spacing:-.01em;color:var(--r-tx)}
.mcc-read ul.cat{list-style:none;padding:0;margin:0 0 4px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.mcc-read ul.cat li{margin:0}
.mcc-read ul.cat a{display:block;padding:11px 13px;border-radius:10px;
  border:1px solid var(--r-line);background:var(--r-bg2);color:var(--r-tx2);
  text-decoration:none;font-size:.86rem;line-height:1.5;transition:.16s}
.mcc-read ul.cat a b{color:var(--r-tx);font-weight:600}
.mcc-read ul.cat a:hover{border-color:var(--r-ac);background:var(--r-bg)}

.mcc-read dl{margin:0}
.mcc-read dt{margin:14px 0 5px;font-family:var(--f-display,Sora,system-ui,sans-serif);
  font-weight:600;font-size:.98rem;color:var(--r-tx)}
.mcc-read dd{margin:0;color:var(--r-tx2);max-width:74ch}

.mcc-read .next{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.mcc-read .next li{margin:0}
.mcc-read .next a{display:inline-block;padding:9px 14px;border-radius:100px;
  border:1px solid var(--r-line);background:var(--r-bg2);color:var(--r-tx2);
  text-decoration:none;font-size:.86rem;transition:.16s}
.mcc-read .next a:hover{color:var(--r-tx);border-color:var(--r-ac);background:var(--r-bg)}

.mcc-read .fine{margin-top:22px;padding-top:16px;border-top:1px solid var(--r-line);
  font-size:.8rem;color:var(--r-tx3);max-width:74ch}
.mcc-read .fine a{color:var(--r-tx2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--r-line)}
.mcc-read .fine a:hover{color:var(--r-tx);text-decoration-color:currentColor}

/* light pages */
:root[data-theme="light"] .mcc-read{--r-bg:#ffffff;--r-bg2:#f3f7fb;
  --r-line:rgba(13,24,38,.12);--r-tx:#0d1620;--r-tx2:#3d4c5c;--r-tx3:#5b6b7b}

/* inside the Digital Lab console the bench is a frame, not a page */
.mcc-embed .mcc-read{display:none !important}
@media print{.mcc-read{background:#fff;color:#000}}