/* ==========================================================================
   EEF — the travelling toolbar
   A launcher and a dockable panel carrying two tools: an exam-class scientific
   calculator and a circuits-aware plotter. Present on every study page.

   This is a multi-page static site, so the panel is rebuilt on each navigation
   and restores itself from localStorage — "travels with you" means the state
   survives the page change, not that the node does.

   Positioning note: the site's .toast is fixed at bottom-centre, so the dock
   lives in a bottom corner and the panel rises from it. The corner is the
   student's choice and is remembered.
   ========================================================================== */

/* ---------- launcher ---------- */
.eef-dock {
  position: fixed; bottom: 20px; z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 999px;
  background: var(--ink); color: var(--plane);
  border: 1px solid var(--ink); cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 560;
  box-shadow: 0 6px 24px -8px rgba(0,0,0,.45);
  transition: transform .12s, background .12s;
}
.eef-dock:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--plane); }
.eef-dock:active { transform: translateY(1px); }
.eef-dock svg { width: 16px; height: 16px; flex: none; }
.eef-dock[hidden] { display: none; }
.eef-dock.right { right: 20px; }
.eef-dock.left  { left: 20px; }

/* ---------- panel ---------- */
.eef-tools {
  position: fixed; bottom: 20px; z-index: 95;
  width: 380px; max-width: calc(100vw - 32px);
  max-height: min(660px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -18px rgba(0,0,0,.55);
  overflow: hidden;
}
.eef-tools[hidden] { display: none; }
.eef-tools.right { right: 20px; }
.eef-tools.left  { left: 20px; }

.eef-tools-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); flex: none;
}
.eef-tools-tabs { display: flex; gap: 4px; flex: 1; }
.eef-tab {
  font: inherit; font-size: 13px; font-weight: 560;
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ink-2);
}
.eef-tab:hover { background: var(--surface); color: var(--ink); }
.eef-tab[aria-selected="true"] { background: var(--ink); color: var(--plane); border-color: var(--ink); }
.eef-tools-body { overflow-y: auto; padding: 14px; flex: 1; min-height: 0; }
.eef-pane[hidden] { display: none; }

/* ---------- calculator ---------- */
.eef-calc-screen {
  background: #101512; border-radius: 10px; padding: 10px 12px;
  font-family: var(--mono); text-align: right;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.5);
}
.eef-calc-entry {
  font-size: 14px; color: #7ce8b0; opacity: .78; min-height: 20px;
  word-break: break-all; line-height: 1.4;
}
.eef-calc-out {
  font-size: 26px; font-weight: 600; color: #7ce8b0; line-height: 1.25;
  word-break: break-all; font-variant-numeric: tabular-nums; min-height: 33px;
}
.eef-calc-out.err { color: #ff9e9e; font-size: 15px; font-weight: 500; }
.eef-calc-flags {
  display: flex; gap: 10px; justify-content: flex-start;
  font-size: 10.5px; letter-spacing: .08em; color: #4fbf8a; margin-bottom: 4px;
  font-family: var(--sans); font-weight: 600;
}
.eef-calc-flags span { opacity: .35; }
.eef-calc-flags span.on { opacity: 1; }

.eef-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.eef-key {
  font: inherit; font-size: 14px; font-weight: 550;
  padding: 11px 4px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink); min-height: 44px;                 /* touch target */
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, border-color .1s;
}
.eef-key:hover { border-color: var(--border-2); background: var(--surface); }
.eef-key:active { transform: translateY(1px); }
.eef-key.fn  { font-size: 12.5px; color: var(--ink-2); }
.eef-key.op  { background: var(--volt-soft); color: var(--volt); border-color: transparent; font-weight: 640; }
.eef-key.eq  { background: var(--ink); color: var(--plane); border-color: var(--ink); font-weight: 640; }
.eef-key.warn{ background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.eef-key[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1a1a1a; }
.eef-key sup { font-size: .7em; }

.eef-calc-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.45; }

/* ---------- plotter ---------- */
.eef-plot-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-bottom: 7px; align-items: center; }
.eef-plot-row input[type="text"] { font-family: var(--mono); font-size: 13px; padding: 8px 9px; }
.eef-plot-row select { font-size: 12.5px; padding: 8px 6px; }
.eef-plot-del {
  font: inherit; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  display: grid; place-items: center; flex: none;
}
.eef-plot-del:hover { border-color: var(--crit); color: var(--crit); }
.eef-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.eef-range label { font-size: 11.5px; font-weight: 560; color: var(--ink-2); display: block; margin-bottom: 3px; }
.eef-range input { font-size: 13px; padding: 7px 9px; }
.eef-plot-out { margin-top: 12px; display: grid; gap: 12px; }
.eef-plot-err {
  font-size: 12.5px; color: var(--crit); background: var(--crit-soft);
  border-radius: 8px; padding: 8px 10px; font-family: var(--mono);
}
.eef-plot-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 22px 8px; line-height: 1.5; }

/* ---------- phones: the panel takes the bottom of the screen ---------- */
@media (max-width: 560px) {
  .eef-tools {
    left: 8px; right: 8px; bottom: 8px; width: auto;
    max-height: min(78vh, calc(100vh - 16px));
    /* clear the iOS home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .eef-tools.left, .eef-tools.right { left: 8px; right: 8px; }
  .eef-dock { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .eef-key { min-height: 46px; font-size: 15px; }
  .eef-plot-row { grid-template-columns: 1fr auto auto; }
}

/* ---- make room, rather than cover the work -------------------------------
   The panel is a study aid for the exercise underneath it, so overlaying that
   exercise defeats it — with the calculator open you could not click the answer
   box on ch2 e4. Where there is room, the page gives up the width instead and
   nothing is hidden. Below 1024px there is no width to give, so it overlays and
   the student closes it (✕) or flips it to the other side (⇄). */
@media (min-width: 1024px) {
  body.eef-shift-right { padding-right: 420px; }
  body.eef-shift-left  { padding-left: 420px; }
  /* The header and footer are full-bleed bands: padding the body alone would cut
     their background off at the panel edge and leave a seam. Bleeding them back
     out restores the band to the full window while their inner .wrap stays where
     the body padding put it. */
  body.eef-shift-right > .topbar, body.eef-shift-right > footer.site {
    margin-right: -420px; padding-right: 420px;
  }
  body.eef-shift-left > .topbar, body.eef-shift-left > footer.site {
    margin-left: -420px; padding-left: 420px;
  }
}