/* ============================================================================
   medchem.css — styles for the medicinal chemistry widgets.

   Kept separate from theme.css on purpose. theme.css is inherited from the
   stereochemistry course and stays in step with it; everything this course adds
   lives here, so a future chemoinformatics or drug-targets course can take the
   pair and know exactly which half is shared and which half is the fork.

   Every med-chem card is .card--mc with a .mc-stage the engine fills. Sections
   below are grouped by the engine file that renders them, so a change has one
   obvious home. The colour vocabulary is the one the course already uses:
   --good for a correct answer, --bad for a wrong one, --nus-orange for
   "look here", --amber for "the models disagree".
   ========================================================================== */

.card--mc h4 { margin: 0 0 .4rem; font-size: 1.05rem; }
.card--mc .prompt { margin: 0 0 .8rem; }
.mc-stage { margin: .6rem 0; }
.mc-note { color: var(--muted); font-size: .86rem; line-height: 1.5; margin: .5rem 0 0; }
.mc-error { color: var(--bad); font-size: .9rem; }
.mc-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.mc-scroll { overflow-x: auto; }

.mc-feedback { margin-top: .7rem; padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: var(--inset); border-left: 3px solid var(--line-strong); font-size: .92rem; }
.mc-feedback.is-right { background: var(--good-bg); border-left-color: var(--good); }
.mc-feedback.is-wrong { background: var(--bad-bg); border-left-color: var(--bad); }
.mc-feedback p { margin: 0 0 .5rem; }
.mc-feedback p:last-child { margin-bottom: 0; }
.mc-ask { color: var(--nus-blue); }
.mc-disagree { background: #fff8ec; border-left: 3px solid var(--amber);
  padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .88rem;
  margin-top: .5rem; }

/* ---- clickable depictions (mcspot.js) -------------------------------------- */
.mc-pickwrap { max-width: 460px; margin: 0 auto; }
.mc-pickart svg { width: 100%; height: auto; display: block; }
.mc-hot { width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0;
  border-radius: 50%; border: 2px solid transparent; background: transparent;
  cursor: pointer; transition: background .12s, border-color .12s; }
.mc-hot:hover { background: rgba(0,61,124,.10); border-color: var(--line-strong); }
.mc-hot:focus-visible { outline: 2px solid var(--nus-blue); outline-offset: 1px; }
.mc-hot.is-found  { background: rgba(46,163,107,.28); border-color: var(--good); }
.mc-hot.is-wrong  { background: rgba(201,79,79,.25);  border-color: var(--bad); }
.mc-hot.is-reveal { background: rgba(255,107,53,.28); border-color: var(--nus-orange); }
.mc-hot.is-chosen { background: rgba(0,61,124,.20);   border-color: var(--nus-blue); }
.mc-hot.is-alert  { background: rgba(201,79,79,.30);  border-color: var(--bad); }

.mc-target-name { font-size: 1.02rem; margin-bottom: .4rem; }
.mc-target-count { color: var(--muted); font-weight: 400; }
.mc-groupfacts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem;
  margin: .5rem 0 0; font-size: .88rem; }
.mc-groupfacts dt { color: var(--muted); }
.mc-groupfacts dd { margin: 0; }
.mc-done { font-weight: 600; color: var(--good); }

.mc-ringcount { border-left: 3px solid var(--line-strong);
  padding: .1rem 0 .1rem .7rem; margin: .7rem 0; }
.mc-ringcount h5 { margin: 0 0 .2rem; font-size: .92rem; color: var(--nus-blue); }
.mc-pisum { margin: 0 0 .35rem; font-size: .95rem; }
.mc-contrib { margin: .2rem 0; padding-left: 1.1rem; font-size: .87rem;
  color: var(--muted); }
.mc-contrib li { margin: .15rem 0; }

.mc-alertlist { list-style: none; padding: 0; margin: .5rem 0; }
.mc-alertlist li { padding: .35rem .5rem; border-radius: var(--radius-sm); cursor: default; }
.mc-alertlist li:hover, .mc-alertlist li:focus { background: var(--bad-bg); outline: none; }
.mc-cat { display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; background: var(--nus-blue); color: #fff;
  padding: .05rem .4rem; border-radius: var(--radius-pill); margin-right: .4rem; }
.mc-ok { color: var(--good); }

/* ---- calculators (mccalc.js) ----------------------------------------------- */
.mc-quizfig svg, .mc-panelfig svg, .mc-pkafig svg, .mc-torsfig svg {
  width: 100%; height: auto; }
.mc-quizfig { max-width: 320px; margin: 0 auto .6rem; }
.mc-quizform { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mc-quizform label { font-size: .9rem; color: var(--muted); }
.mc-numin { width: 8rem; padding: .45rem .6rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font: inherit; }
.mc-unit { color: var(--muted); font-size: .88rem; }
.mc-hint, .mc-work, .mc-crit-detail { margin-top: .6rem; font-size: .88rem; }
.mc-hint summary, .mc-work summary, .mc-crit-detail summary {
  cursor: pointer; color: var(--nus-blue); }

.mc-pkatop { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 1rem; align-items: start; }
@media (max-width: 640px) { .mc-pkatop { grid-template-columns: 1fr; } }
.mc-phnow { font-size: 1.3rem; font-weight: 700; color: var(--nus-blue); }
.mc-ph { width: 100%; margin: .5rem 0 .2rem; }
.mc-phmarks { display: flex; gap: .4rem; flex-wrap: wrap; }
.mc-phmark { font: inherit; font-size: .78rem; padding: .2rem .55rem; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--inset);
  border-radius: var(--radius-pill); color: var(--muted); }
.mc-phmark:hover { background: #fff; color: var(--nus-blue); }
.mc-centres { list-style: none; padding: 0; margin: .5rem 0; }
.mc-centres li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem;
  margin-bottom: .5rem; font-size: .86rem; }
.mc-clabel { font-weight: 600; }
.mc-ckind { color: var(--muted); text-align: right; }
.mc-bar { grid-column: 1 / -1; height: 7px; background: var(--tabbar);
  border-radius: var(--radius-pill); overflow: hidden; }
.mc-bar i { display: block; height: 100%; background: var(--nus-orange); }
.mc-cpct { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.mc-netcharge, .mc-logd { margin-top: .4rem; font-size: .95rem; }
.mc-given { margin-bottom: .6rem; }

.mc-letable, .mc-fgtable { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mc-letable th, .mc-letable td, .mc-fgtable th, .mc-fgtable td {
  padding: .38rem .5rem; text-align: left; border-bottom: 1px solid var(--line); }
.mc-letable th, .mc-fgtable th { color: var(--muted); font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.mc-letable .mc-name { font-weight: 600; }
.mc-letable .is-good { color: var(--good); font-weight: 600; }
.mc-letable .is-poor { color: var(--bad); }
.mc-guides { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem;
  font-size: .85rem; margin: .6rem 0 0; }
.mc-guides dt { font-weight: 700; color: var(--nus-blue); }
.mc-guides dd { margin: 0; }

/* plots are inline SVG, built by the engines so they need no chart library */
.mc-plotbox { margin: .8rem 0; }
.mc-plot { width: 100%; height: auto; }
.mc-plot .ax { stroke: var(--line-strong); stroke-width: 1; }
.mc-plot .tick, .mc-plot .axl { fill: var(--muted); font-size: 10px; }
.mc-plot .axl { font-size: 11px; }
.mc-plot .guide { stroke: var(--nus-orange); stroke-width: 1.3; stroke-dasharray: 5 4; }
.mc-plot .gl { fill: var(--nus-orange); font-size: 10px; }
.mc-plot .curve { fill: none; stroke: var(--nus-blue); stroke-width: 2.2; }
.mc-plot .pt { fill: var(--nus-blue); }
.mc-plot .ptl { fill: var(--ink); font-size: 10px; }

/* ---- panels and tables (mcprops.js) ---------------------------------------- */
.mc-panelwrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  gap: 1rem; align-items: center; }
@media (max-width: 640px) { .mc-panelwrap { grid-template-columns: 1fr; } }
.mc-proplist { display: grid; grid-template-columns: auto 1fr; gap: .18rem .8rem;
  margin: 0; font-size: .9rem; }
.mc-proplist dt { color: var(--muted); }
.mc-proplist dd { margin: 0; font-weight: 600; }

.mc-fgname { display: flex; align-items: center; gap: .5rem; min-width: 12rem; }
.mc-fgart svg { width: 62px; height: auto; display: block; }
.mc-fglabel { font-weight: 600; }
.mc-fgsel { font: inherit; font-size: .82rem; padding: .2rem .3rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  max-width: 12rem; }
.mc-fgtable td.is-right { background: var(--good-bg); }
.mc-fgtable td.is-wrong { background: var(--bad-bg); }
.mc-fgnotes { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .86rem; }

.mc-tautrow, .mc-biorow, .mc-mmprow { display: flex; gap: .8rem; flex-wrap: wrap;
  align-items: center; justify-content: center; }
.mc-tautcell, .mc-biocell, .mc-mmpcell { margin: 0; text-align: center; max-width: 240px; }
.mc-tautcell svg, .mc-biocell svg, .mc-mmpcell svg { width: 100%; height: auto; }
.mc-tautcell.is-canon { outline: 2px solid var(--nus-orange); outline-offset: 4px;
  border-radius: var(--radius-sm); }
.mc-tautcell figcaption, .mc-biocell figcaption, .mc-mmpcell figcaption {
  font-size: .8rem; color: var(--muted); display: flex; flex-direction: column;
  gap: .1rem; }
.mc-tautprop b { color: var(--ink); }
.mc-tautflag { color: var(--nus-orange); font-weight: 600; }
.mc-bioarrow { font-size: 1.5rem; color: var(--nus-orange); }
.mc-biopair { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }
.mc-biopair:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.mc-biofacts { display: grid; grid-template-columns: auto 1fr; gap: .18rem .7rem;
  font-size: .87rem; margin: .6rem 0 .4rem; }
.mc-biofacts dt { color: var(--muted); }
.mc-biofacts dd { margin: 0; }
.mc-act { color: var(--nus-blue); font-weight: 600; }
.mc-delta { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.mc-dchip { font-size: .76rem; padding: .12rem .45rem;
  border-radius: var(--radius-pill); background: var(--inset);
  border: 1px solid var(--line); }
.mc-dchip.is-up { color: var(--bad); }
.mc-dchip.is-down { color: var(--good); }
.mc-dchip.is-flat { color: var(--muted); }

.mc-cmpd { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1rem;
  border-top: 1px solid var(--line); padding: .8rem 0; align-items: start; }
.mc-cmpd:first-child { border-top: 0; }
.mc-cmpdfig { margin: 0; max-width: 200px; }
.mc-cmpdfig svg { width: 100%; height: auto; }
.mc-cmpdfig figcaption { font-weight: 600; font-size: .88rem; text-align: center; }
.mc-cmpdfacts { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem,1fr));
  gap: .2rem .6rem; margin: 0; font-size: .82rem; }
.mc-cmpdfacts dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.mc-cmpdfacts dd { margin: 0 0 .3rem; font-weight: 600; }
.mc-choose { grid-column: 2; display: flex; gap: .4rem; }
.mc-decide.is-on { background: var(--nus-blue); color: #fff; border-color: var(--nus-blue); }
.mc-cmpdverdict { grid-column: 1 / -1; }
.mc-filterblock { margin: .5rem 0; }
.mc-filterblock h6 { margin: 0 0 .2rem; font-size: .85rem; }
.mc-filterblock h6.is-pass { color: var(--good); }
.mc-filterblock h6.is-fail { color: var(--bad); }
.mc-crit { list-style: none; padding: 0; margin: 0; font-size: .83rem; }
.mc-crit li { padding: .1rem 0 .1rem .9rem; position: relative; }
.mc-crit li::before { position: absolute; left: 0; }
.mc-crit li.is-ok::before { content: "\2713"; color: var(--good); }
.mc-crit li.is-bad::before { content: "\2717"; color: var(--bad); }
.mc-rule { color: var(--muted); }
.mc-yourcall { font-size: .88rem; margin: .4rem 0 0; }

/* ---- three-dimensional widgets (mcinteract.js) ----------------------------- */
.mc-imapsplit, .mc-confsplit { display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 1rem; }
@media (max-width: 760px) {
  .mc-imapsplit, .mc-confsplit { grid-template-columns: 1fr; }
}
.mc-imapview, .mc-confview { position: relative; width: 100%; height: 340px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.mc-imaphead { font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; }
.mc-imaplist { max-height: 340px; overflow-y: auto; }
.mc-contact { border-bottom: 1px solid var(--line); padding: .45rem .3rem;
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .5rem; }
.mc-contact.is-right { background: var(--good-bg); }
.mc-contact.is-wrong { background: var(--bad-bg); }
.mc-cswatch { width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; }
.mc-cdesc { font-size: .85rem; }
.mc-cdist { color: var(--muted); margin-left: .4rem; font-size: .8rem; }
.mc-csel { grid-column: 2; font: inherit; font-size: .8rem; padding: .18rem .3rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  max-width: 100%; }
.mc-cwhy { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); }
.mc-cwhy p { margin: .25rem 0; }
.mc-imapkey { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.mc-keychip { font-size: .76rem; display: inline-flex; align-items: center;
  gap: .3rem; padding: .12rem .5rem; border: 1px solid var(--line);
  border-radius: var(--radius-pill); }
.mc-keychip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.mc-temprow { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 .2rem; }
.mc-temprow label { font-size: .85rem; color: var(--muted); }
.mc-temp { flex: 1; }
.mc-tval { font-weight: 700; color: var(--nus-blue); min-width: 4rem; }
.mc-conflist { max-height: 340px; overflow-y: auto; }
.mc-confrow { display: grid; grid-template-columns: auto 1fr auto; gap: .1rem .5rem;
  width: 100%; text-align: left; font: inherit; font-size: .8rem; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: .4rem .2rem; }
.mc-confrow.is-on { background: var(--inset); }
.mc-confrow .mc-bar { grid-column: 1 / -1; }
.mc-confe { color: var(--muted); }
.mc-confp { font-weight: 600; }
.mc-torsfacts { font-size: .9rem; margin: .4rem 0 0; }

/* ---- the module switcher, grouped by part ---------------------------------- */
/* 23 modules is too many for a flat list, so build_module.py emits a .navgroup
   heading per part. The heading is inert text: only the links are focusable, so
   the keyboard path through the menu is no longer than the list itself. */
.navgroup { display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: .6rem .8rem .2rem;
  border-top: 1px solid var(--line); margin-top: .2rem; }
.navgroup:first-child { border-top: 0; margin-top: 0; }
.navlink__pri { font-size: .68rem; color: var(--nus-orange); font-weight: 700;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  padding: 0 .25rem; margin-left: .3rem; }

/* ---- the hub, grouped by part ---------------------------------------------- */
.hub-part { margin: 2rem 0 .6rem; }
.hub-part h2 { margin: 0 0 .15rem; font-size: 1.05rem; color: var(--nus-blue); }
.hub-part p { margin: 0; color: var(--muted); font-size: .9rem; }
.rung__pri { font-size: .68rem; color: var(--nus-orange); font-weight: 700;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  padding: 0 .3rem; margin-left: .4rem; vertical-align: middle; }
.rung.optional .rung__num { opacity: .55; }