/* ---------- solver ---------- */
#solver{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.32,.72,0,1)}
#solver.on{opacity:1;pointer-events:auto}
#solver::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--viewer-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#solverBar{position:relative;z-index:2;flex:0 0 auto;margin:22px 22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 20px;border-radius:18px;
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:.5px solid var(--panel-line);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top),inset 0 -1px 0 var(--glass-bot)}
/* Fifteen tabs in a row that could neither wrap nor shrink, inside a bar using
   space-between: the strip simply ran off the end of its container and took the
   close button with it. Three things were missing -- permission to wrap,
   min-width:0 so the flex item is allowed to be narrower than its contents, and
   a bar that aligns to the top once the strip is more than one line tall. */
#solverBar{align-items:flex-start}
#solverMeta{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
#solverKind{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600;flex:0 0 auto;padding-top:9px}
#solverTabs{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:11px;
  background:var(--chip);min-width:0;flex:1 1 auto}
#solverBar .vbtn{flex:0 0 auto;margin-top:3px}

/* The grapher has the same three-tab strip and the same bar; it does not
   overflow today, but it is the same shape and should not start to. */
#grapherMeta{min-width:0}
#grapherTabs{flex-wrap:wrap;min-width:0}

#solverBody{position:relative;z-index:1;flex:1 1 auto;margin:14px 22px 22px;
  display:flex;flex-direction:column;gap:16px;min-height:0;overflow:hidden}
#solverInputWrap{flex:0 0 auto;border-radius:20px;padding:22px 24px;
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:.5px solid var(--panel-line);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top),inset 0 -1px 0 var(--glass-bot)}
#solverInputRow{display:flex;align-items:center;gap:10px}
#solverPrefix{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:17px;
  color:var(--tx-2);flex:0 0 auto;white-space:nowrap}
#solverInput{flex:1;min-width:0;padding:12px 16px;border-radius:12px;
  border:.5px solid var(--chip-line);background:var(--chip);color:var(--tx);
  font-family:'Source Sans 3',monospace;font-size:16px;outline:none}
#solverInput:focus{box-shadow:0 0 0 1.5px var(--accent)}
#solverInput.err{box-shadow:0 0 0 1.5px var(--rival)}
#solverTextarea{width:100%;margin-top:12px;padding:12px 16px;border-radius:12px;
  border:.5px solid var(--chip-line);background:var(--chip);color:var(--tx);
  font-family:'Source Sans 3',monospace;font-size:15px;outline:none;resize:vertical;
  line-height:1.6}
#solverTextarea:focus{box-shadow:0 0 0 1.5px var(--accent)}
#solverTextarea.err{box-shadow:0 0 0 1.5px var(--rival)}
#solverGo{flex:0 0 auto;padding:12px 22px;background:var(--accent);color:#fff;
  border-color:transparent;font-weight:600}
#solverGo:hover{background:var(--accent);opacity:.88}
#solverPreview{margin-top:16px;min-height:34px;font-size:19px;color:var(--tx);
  overflow-x:auto}
#solverHint{margin-top:10px;font-size:12px;color:var(--tx-3);line-height:1.5}

#solverSteps{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;
  gap:12px;padding-right:6px}
#solverSteps::-webkit-scrollbar{width:5px}
#solverSteps::-webkit-scrollbar-thumb{background:var(--chip-line);border-radius:4px}
.step-card{border-radius:16px;padding:18px 22px;background:var(--panel-bg);
  background-image:var(--panel-img);-webkit-backdrop-filter:var(--panel-blur);
  backdrop-filter:var(--panel-blur);border:.5px solid var(--panel-line);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.25),inset 0 1px 0 var(--glass-top)}
.step-num{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;margin-right:10px;flex:0 0 auto}
.step-head{display:flex;align-items:center;font-size:13px;font-weight:600;
  color:var(--tx-2);margin-bottom:12px}
.step-expr{font-size:19px;color:var(--tx);padding-left:32px;overflow-x:auto}
.step-note{font-size:13px;color:var(--tx-3);padding-left:32px;margin-top:8px;line-height:1.5}
.step-card.result{border-color:var(--accent);background:var(--reveal-bg)}
.step-card.result .step-num{background:var(--accent-2)}
.solver-err-box{border-radius:14px;padding:16px 20px;color:var(--rival);
  border:.5px solid var(--rival);background:var(--caution-bg);font-size:14px}

.ctl{position:absolute;top:22px;width:30px;height:30px;border-radius:50%;
  border:.5px solid var(--chip-line);background:var(--chip);display:flex;
  align-items:center;justify-content:center;cursor:pointer;font-size:12.5px;
  color:var(--tx-3);transition:background .3s,transform .3s,color .3s}
.ctl:hover{background:var(--hover);transform:scale(1.08);color:var(--tx)}
.ctl.on{color:#fff;background:var(--accent);border-color:transparent}
#close{right:20px} #edit{right:58px}
/* Back and forward live at the opposite corner from close/edit, so the pair
   that moves you between concepts is never confused with the pair that acts on
   the one you are reading. Forward is absent, not merely disabled, until there
   is somewhere to go forward to. */
#navBack{left:20px} #navFwd{left:58px}
#navFwd{display:none} #navFwd.avail{display:flex}
.ctl.off{opacity:.28;pointer-events:none}

.field{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.swatch{width:10px;height:10px;transition:border-radius .5s;flex:0 0 auto}
.fieldtxt{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600}

h1{font-family:'Fraunces',Georgia,serif;font-size:34px;line-height:1.14;
  font-weight:440;letter-spacing:-.012em;margin-bottom:4px}
.summary{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:440;
  font-size:16.5px;line-height:1.52;color:var(--tx-2);margin-top:14px}
.sec{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-3);font-weight:600;margin:30px 0 11px}
.claim{font-size:16px;line-height:1.62;color:var(--tx-2)}