/* Styles for the tools hub and the tool pages.

   Kept out of ochem.css because that file is loaded by every lesson and every
   practice page, none of which need any of this. The design vocabulary is the
   same one theme.css sets up — 2px outlines, the flat `lift` shadow, the teal
   accent — so a tool page reads as part of the same product rather than a
   separate app bolted on. */

/* ---- The hub ---------------------------------------------------------- */

.tool-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}

a.tool-tile{
  display:flex;flex-direction:column;gap:9px;
  background:var(--white);border:var(--bw) solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--lift-sm);text-decoration:none;color:inherit;
  transition:border-color .12s ease,transform .08s ease,box-shadow .12s ease;
}
a.tool-tile:hover{border-color:var(--accent);transform:translateY(2px);box-shadow:0 1px 0 var(--line);}
a.tool-tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.tool-tile__mark{
  width:42px;height:42px;border-radius:12px;background:var(--tint-accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:2px;flex:none;
}
.tool-tile__mark svg{width:24px;height:24px;display:block;}
.tool-tile__name{font:900 16.5px var(--font-ui);}
.tool-tile__tag{font:800 13.5px var(--font-ui);color:var(--ink);opacity:.85;}
.tool-tile__blurb{font-size:12.8px;line-height:1.55;color:var(--muted);font-weight:700;}
.tool-tile__foot{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);
  font:900 10.5px var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.tool-tile__go{color:var(--accent);white-space:nowrap;}

/* ---- Tool page chrome -------------------------------------------------- */

.tool-top{margin:0 0 22px;}
.tool-back{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font:900 12px var(--font-ui);color:var(--muted);margin-bottom:14px;
}
.tool-back:hover{color:var(--accent);}
.tool-title{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.tool-title h1{margin:0;font-size:clamp(26px,4vw,34px);}
.tool-title .tool-tile__mark{margin-bottom:0;}
.tool-lede{font-size:15px;line-height:1.6;color:var(--muted);font-weight:700;max-width:62ch;margin:0;}

.tool-switch{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 0;}
.tool-switch a{
  font:900 11.5px var(--font-ui);text-decoration:none;color:var(--muted);
  border:var(--bw) solid var(--line);border-radius:var(--radius-pill);padding:6px 13px;background:var(--white);
}
.tool-switch a:hover{border-color:var(--accent);color:var(--accent);}
.tool-switch a.on{background:var(--navy);color:var(--on-accent);border-color:var(--navy);}

/* ---- Panels ------------------------------------------------------------ */

.tpanel{
  background:var(--white);border:var(--bw) solid var(--line);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--lift-sm);margin-bottom:16px;
}
.tpanel--flat{box-shadow:none;background:var(--paper);}
.tpanel__head{
  font:900 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.tsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.tsplit--wide{grid-template-columns:1.35fr 1fr;}
@media(max-width:820px){ .tsplit,.tsplit--wide{grid-template-columns:1fr;} }

/* ---- Controls ---------------------------------------------------------- */

.tchips{display:flex;flex-wrap:wrap;gap:7px;}
.tchip{
  font:800 12.5px var(--font-ui);padding:7px 13px;border-radius:var(--radius-pill);
  border:var(--bw) solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.tchip:hover{border-color:var(--accent);}
.tchip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent-fill);}
.tchip:disabled{opacity:.45;cursor:default;}
.tchip--ghost.on{background:var(--tint-accent);color:var(--accent);}

.tseg{display:inline-flex;border:var(--bw) solid var(--line);border-radius:var(--radius-pill);overflow:hidden;background:var(--white);}
.tseg button{
  font:900 12px var(--font-ui);padding:8px 16px;border:0;background:transparent;color:var(--muted);cursor:pointer;
}
.tseg button.on{background:var(--navy);color:var(--on-accent);}

.tfield{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.tfield > label{font:900 11px var(--font-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.tselect{
  font:800 13.5px var(--font-ui);padding:9px 12px;border-radius:var(--radius-sm);
  border:var(--bw) solid var(--line);background:var(--white);color:var(--ink);width:100%;
}
.tselect:focus{outline:none;border-color:var(--accent);}

.trange{width:100%;accent-color:var(--accent);height:26px;}
.trow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tcheck{display:flex;align-items:center;gap:7px;font:800 12.5px var(--font-ui);color:var(--muted);cursor:pointer;}
.tcheck input{accent-color:var(--accent);width:16px;height:16px;}

/* ---- Readouts ---------------------------------------------------------- */

.tnote{
  border-radius:var(--radius);padding:13px 15px;font-size:13.4px;line-height:1.6;font-weight:700;
  border:var(--bw) solid var(--line);background:var(--paper);color:var(--ink);margin-bottom:10px;
}
.tnote b{font-weight:900;}
.tnote--good{border-color:var(--good-text);background:var(--tint-good);}
.tnote--bad{border-color:var(--bad-text);background:var(--tint-bad);}
.tnote--warn{border-color:var(--warn);background:var(--tint-warn);}
.tnote--info{border-color:var(--accent);background:var(--tint-accent);}
.tnote__k{
  display:block;font:900 10.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;
}
.tnote--good .tnote__k{color:var(--good-text);}
.tnote--bad .tnote__k{color:var(--bad-text);}
.tnote--warn .tnote__k{color:var(--warn);}
.tnote--info .tnote__k{color:var(--accent);}

.tstat{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.tstat > div{
  flex:1 1 110px;background:var(--paper);border:var(--bw) solid var(--line-soft);
  border-radius:var(--radius);padding:11px 13px;
}
.tstat .k{font:900 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.tstat .v{font:900 19px var(--font-mono);color:var(--ink);margin-top:3px;line-height:1.15;}
.tstat .v small{font-size:12px;font-weight:700;color:var(--muted);}

.tformula{font:900 17px var(--font-mono);color:var(--ink);}
.tmuted{color:var(--muted);font-weight:700;font-size:13px;line-height:1.6;}
.tempty{
  border:2px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;
  color:var(--muted);font-weight:800;font-size:13px;line-height:1.6;
}

/* ---- Tables ------------------------------------------------------------ */

.ttable{width:100%;border-collapse:collapse;font-size:13px;}
.ttable th{
  text-align:left;font:900 10.5px var(--font-ui);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:7px 10px;border-bottom:var(--bw) solid var(--line);
}
.ttable td{padding:9px 10px;border-bottom:1px solid var(--line-soft);font-weight:700;vertical-align:top;}
.ttable tr:last-child td{border-bottom:0;}
.ttable .num{font-family:var(--font-mono);font-weight:800;white-space:nowrap;}
.ttable .win{color:var(--good-text);font-weight:900;}
.ttable .lose{color:var(--muted);}
.ttable-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---- Molecule staging -------------------------------------------------- */

.tstage{background:var(--paper);border:var(--bw) solid var(--line-soft);border-radius:var(--radius);padding:8px 6px;}
.tstage .scene{background:transparent;border:0;padding:10px 6px;margin:0;}
.tstage .omol-caption{margin-top:4px;}
.tarrow-sep{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:900 22px var(--font-mono);color:var(--muted);margin:4px 0;
}

/* A species after the arrows have been applied. */
.tfrags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.tfrag{
  font:900 14px var(--font-mono);padding:7px 12px;border-radius:var(--radius-sm);
  border:var(--bw) solid var(--line);background:var(--white);
}
.tfrag--charged{border-color:var(--accent);background:var(--tint-accent);color:var(--accent);}
.tplus{font:900 15px var(--font-mono);color:var(--muted);}

/* The product split (Reaction Predictor). A bar whose widths are the shares,
   because "70:30" read as two numbers is a fact and read as two widths is a
   picture of how lopsided the competition is. */
.rp-mix{display:flex;gap:4px;margin:4px 0 10px;height:34px;}
.rp-mix__bar{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  min-width:52px;padding:0 9px;border-radius:var(--radius-sm);
  background:var(--track);color:var(--muted);
  font:800 11.5px var(--font-ui);overflow:hidden;white-space:nowrap;
}
.rp-mix__bar b{font:900 12.5px var(--font-mono);}
.rp-mix__bar.is-major{background:var(--accent);color:var(--on-accent-fill);}

/* ---- Both chairs at once (Conformation Lab) ------------------------------ */

.cf-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cf-pair__one{
  border:var(--bw) solid var(--line-soft);border-radius:var(--radius);
  padding:8px;background:var(--paper);
}
.cf-pair__one.is-win{border-color:var(--good-text);background:var(--tint-good);}
.cf-pair__cap{text-align:center;padding:6px 2px 2px;}
.cf-pair__share{font:900 21px var(--font-mono);color:var(--muted);line-height:1.1;}
.cf-pair__share.is-win{color:var(--good-text);}
.cf-pair__kcal{font:800 12px var(--font-mono);color:var(--ink);margin-top:2px;}
.cf-pair__tag{
  font:900 9.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:3px;
}

.cf-torbuild{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.cf-torbuild__k{
  font:900 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.cf-torbuild select{width:100%;margin-bottom:6px;}

@media(max-width:640px){
  .cf-pair{grid-template-columns:1fr;}
  .cf-torbuild{grid-template-columns:1fr;}
}

/* A panel the verdict has picked out. Used by the resonance comparison and
   anywhere else two options are put side by side and one of them wins. */
.tpanel--win{border-color:var(--good-text);background:var(--tint-good);}

/* ---- The mechanism strip (Arrow Pusher) ---------------------------------

   One chip per committed step, each one a way back into it. A mechanism that
   went wrong at step 2 should be edited at step 2, not abandoned. */

.ap-steps{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;
}
.ap-steps:empty{display:none;}
.ap-steps__k{
  font:900 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-right:2px;
}
.ap-step{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:var(--bw) solid var(--line);border-radius:var(--radius-pill);
  background:var(--white);color:var(--ink);cursor:pointer;font:inherit;
}
.ap-step:hover{border-color:var(--accent);}
.ap-step--now{background:var(--tint-accent);border-color:var(--accent);cursor:default;}
.ap-step__n{
  width:17px;height:17px;border-radius:50%;background:var(--track);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font:900 10px var(--font-mono);flex:none;
}
.ap-step--now .ap-step__n{background:var(--accent);color:var(--on-accent-fill);}
.ap-step__f{font:800 12px var(--font-mono);}
.ap-step__arrow{color:var(--muted);font-weight:900;}
.ap-steps__reset{margin-left:auto;}

/* ---- The molecule builder ------------------------------------------------

   Shared by every tool that will take a structure the student made up, so it
   lives here rather than in any one tool's page styles. The canvas keeps the
   same 320x170 coordinate space as molecules.js, which is what lets a library
   structure and a hand-drawn one be the same kind of object. */

.mb{display:flex;flex-direction:column;gap:14px;}
.mb__label{
  display:block;font:900 10px var(--font-ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.mb__typerow{display:flex;gap:8px;align-items:stretch;}
.mb__input{
  flex:1;min-width:0;padding:10px 13px;border:var(--bw) solid var(--line);
  border-radius:var(--radius-sm);background:var(--white);color:var(--ink);
  font:700 14.5px var(--font-mono);
}
.mb__input:focus{outline:none;border-color:var(--accent);}
.mb__build{flex:none;white-space:nowrap;}
.mb__quick,.mb__found{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;
  font-size:12px;font-weight:700;
}
.tchip--mini{padding:4px 9px;font-size:11.5px;}

.mb__canvaswrap{position:relative;width:100%;max-width:560px;}
.mb__canvas{
  width:100%;height:auto;display:block;cursor:crosshair;
  border:var(--bw) solid var(--line);border-radius:var(--radius);
  background:var(--white);touch-action:manipulation;
}
.mb__bg{fill:transparent;}
.mb__blank{font:700 12px var(--font-ui);fill:var(--muted);}
.mb__hint{
  margin-top:7px;min-height:16px;font:700 12px var(--font-ui);color:var(--muted);
}

.mb__bondline{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;}
.mb__bondhit{stroke:transparent;stroke-width:14;cursor:pointer;}
.mb__bond:hover .mb__bondline{stroke:var(--accent);}
.mb__bond:focus{outline:none;}
.mb__bond:focus .mb__bondline{stroke:var(--accent);stroke-width:3.4;}

.mb__atom{cursor:pointer;}
.mb__atomdisc{fill:var(--white);stroke:var(--ink);stroke-width:1.6;}
.mb__atomtext{font:900 13px var(--font-mono);fill:var(--ink);pointer-events:none;}
.mb__charge{font:900 11px var(--font-mono);fill:var(--accent);pointer-events:none;}
.mb__lp{fill:var(--muted);pointer-events:none;}
.mb__atom:hover .mb__atomdisc{stroke:var(--accent);}
.mb__atom.is-sel .mb__atomdisc{stroke:var(--accent);stroke-width:3.2;fill:var(--tint-accent);}
.mb__atom.is-bad .mb__atomdisc{stroke:var(--bad);stroke-width:3;fill:var(--tint-bad);}
.mb__atom.is-warn .mb__atomdisc{stroke:var(--warn);stroke-width:2.6;fill:var(--tint-warn);}
.mb__atom:focus{outline:none;}
.mb__atom:focus .mb__atomdisc{stroke:var(--accent);stroke-width:3.2;}

.mb__tools{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;}
.mb__pal{display:flex;flex-wrap:wrap;gap:5px;}
.mb__el{
  min-width:34px;padding:6px 8px;border:var(--bw) solid var(--line);
  border-radius:var(--radius-sm);background:var(--white);color:var(--ink);
  font:900 13px var(--font-mono);cursor:pointer;
}
.mb__el:hover{border-color:var(--accent);}
.mb__el.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent-fill);}
.mb__acts{display:flex;flex-wrap:wrap;gap:6px;}
.mb__stat{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
.mb__stat > div{
  flex:1 1 110px;padding:9px 12px;border:var(--bw) solid var(--line-soft);
  border-radius:var(--radius-sm);background:var(--paper);
}
.mb__stat .k{font:900 10px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.mb__stat .v{font:900 17px var(--font-mono);color:var(--ink);margin-top:3px;}
.mb__stat .v.win{color:var(--good-text);}
.mb__stat .v.lose{color:var(--bad-text);}

@media(max-width:640px){
  .mb__typerow{flex-direction:column;}
  .mb__stat > div{flex:1 1 44%;}
}

/* ---- Share this setup ---------------------------------------------------- */

.tool-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 2px;}
.tool-share__said{font:700 12px var(--font-ui);color:var(--good-text);}
.tool-share__url{
  flex:1;min-width:200px;padding:6px 10px;border:var(--bw) solid var(--line);
  border-radius:var(--radius-sm);background:var(--white);color:var(--ink);
  font:600 11.5px var(--font-mono);
}

/* ---- Footer link back into the course ---------------------------------- */

.tool-foot{
  margin-top:26px;padding-top:18px;border-top:var(--bw) solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
}
.tool-foot p{margin:0;font-size:13px;font-weight:700;color:var(--muted);max-width:52ch;line-height:1.55;}

@media(max-width:640px){
  .tpanel{padding:16px;}
  .tool-title{gap:10px;}
  .tstat > div{flex:1 1 45%;}
}

/* ---- The opt-in quiz under a tool --------------------------------------- */

/* Visually quieter than the tool it sits under, on purpose: the sandbox is the
   main event and the quiz is the thing you turn to when you want to find out
   whether the playing worked. */
.tquiz{background:var(--paper);}
.tquiz__intro{margin:0 0 6px;font-size:14px;font-weight:800;color:var(--ink);line-height:1.55;}
.tquiz__fine{margin:0 0 14px;font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.55;max-width:60ch;}
.tquiz__count{font:800 11px var(--font-mono);color:var(--muted);}
.tquiz__prompt{font-size:15px;font-weight:800;color:var(--ink);line-height:1.6;margin-bottom:14px;}
.tquiz__prompt .tformula{font-size:16px;}

.tquiz__opts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.tquiz__opt{
  text-align:left;font:800 13.5px var(--font-ui);padding:11px 14px;
  border:var(--bw) solid var(--line);border-radius:var(--radius-sm);
  background:var(--white);color:var(--ink);cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.tquiz__opt:hover:not(:disabled){border-color:var(--accent);}
.tquiz__opt:disabled{cursor:default;}
/* Right and wrong are carried by an icon and a border as well as a fill, so
   the marking does not depend on seeing the difference between two colors. */
.tquiz__opt.is-right{border-color:var(--good-text);background:var(--tint-good);}
.tquiz__opt.is-right::after{content:" ✓";font-weight:900;color:var(--good-text);}
.tquiz__opt.is-wrong{border-color:var(--bad-text);background:var(--tint-bad);}
.tquiz__opt.is-wrong::after{content:" ✕";font-weight:900;color:var(--bad-text);}

.tquiz__after .tnote{margin-bottom:12px;}
.tquiz__after .tnote:focus{outline:2px solid var(--accent);outline-offset:2px;}
.tquiz__tally{margin:0 0 10px;font:900 22px var(--font-ui);color:var(--ink);}
.tquiz__missed{margin:0 0 14px;padding-left:20px;}
.tquiz__missed li{font-size:13.5px;font-weight:700;color:var(--muted);line-height:1.6;margin-bottom:5px;}