/* Tap a term + More controls (tutor_tap.py; on the page only with TUTOR_TAP=1 / TUTOR_CONTROLS=1). Only this file's own
   elements and the body classes tp-tap / tp-ctl (set when the viewer turns a switch on) are styled here. */

/* ---------------------------------------------------------------- the two switches */
#qa #tpTapBtn { background: #fff; color: var(--ink); border: 1px solid var(--line); font: 600 14px var(--ui); padding: 0 12px; white-space: nowrap; }
#qa #tpTapBtn[aria-pressed="true"], .ctrl #tpCtlBtn[aria-pressed="true"] { background: #eef4ff; border-color: #2563eb; color: #1d4ed8; }
.ctrl #tpCtlBtn { white-space: nowrap; }
@media (max-width: 640px) {
  #qa #tpTapBtn { padding: 0 10px; font-size: 17px; }
  #qa #tpTapBtn .lbl { display: none; }
}

/* ---------------------------------------------------------------- Tap a term */
body.tp-tap #notes .note:not(.asked):not(.quiz), body.tp-tap #boardTitle, body.tp-tap #fig text { cursor: help; }
body.tp-tap #notes .note:not(.asked):not(.quiz):hover { background: rgba(37, 99, 235, .06); border-radius: 8px; box-shadow: 0 0 0 1px rgba(37, 99, 235, .18); }
body.tp-tap #fig text:hover { text-decoration: underline dotted; }
.tp-hit { background: #fde68a; border-radius: 3px; box-shadow: 0 0 0 2px #fde68a; }
.tp-hitbox { background: rgba(253, 230, 138, .55) !important; border-radius: 8px; }
#fig text.tp-hitbox { background: none !important; fill: #b45309 !important; }
::highlight(tp-hit) { background-color: #fde68a; }

#tpMenu { position: fixed; z-index: 80; width: 300px; max-width: calc(100vw - 16px); background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 14px 40px rgba(17, 24, 39, .22); padding: 10px; font-family: var(--ui); }
#tpMenu[hidden] { display: none; }
#tpMenu .tp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#tpMenu .tp-term { flex: 1; min-width: 0; font: 700 22px/1.2 var(--hand); color: #1d4ed8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tpMenu .tp-term .katex { font-size: 1em; }
#tpMenu .tp-x { border: 0; background: none; font-size: 16px; color: var(--muted); cursor: pointer; padding: 4px 6px; }
#tpMenu .tp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#tpMenu .tp-chips button { font: 600 14px var(--ui); padding: 9px 8px; border-radius: 10px; border: 1px solid #bfd3fb; background: #eef4ff; color: #1d4ed8; cursor: pointer; }
#tpMenu .tp-chips button:hover, #tpMenu .tp-chips button:focus-visible { background: #dbe7fe; outline: none; }
#tpMenu .tp-free { display: flex; gap: 6px; margin-top: 8px; }
#tpMenu .tp-free[hidden] { display: none; }
#tpMenu .tp-free input { flex: 1; min-width: 0; font: 500 16px var(--ui); padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); }
#tpMenu .tp-free button { font: 600 14px var(--ui); padding: 0 14px; border-radius: 10px; border: 0; background: #111827; color: #fff; cursor: pointer; }
@media (max-width: 640px) {  /* a bottom sheet: big targets, never off screen */
  #tpMenu { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #tpMenu .tp-chips button { padding: 12px 8px; font-size: 15px; }
}

#tpToast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: 90; max-width: min(520px, calc(100vw - 24px));
  background: #111827; color: #fff; font: 500 14px/1.35 var(--ui); padding: 10px 14px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; }
#tpToast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- More controls: the bar under the board */
#tpBar { display: flex; align-items: center; gap: 8px; margin: -4px 18px 10px; padding: 6px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; font-family: var(--ui); color: var(--ink); min-width: 0; }
#tpBar[hidden] { display: none; }
#tpBar > button { flex: none; border: 0; background: none; color: inherit; font-size: 16px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; padding: 0; }
#tpBar > button:hover:not(:disabled) { background: #f3f4f6; }
#tpBar > button:disabled { opacity: .35; cursor: default; }
#tpBar #tpRate { width: auto; min-width: 44px; font: 600 13px var(--ui); font-variant-numeric: tabular-nums; border: 1px solid var(--line); }
#tpSteps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#tpTicks { display: flex; gap: 2px; height: 14px; align-items: stretch; cursor: pointer; touch-action: none; }
.tp-tick { position: relative; flex: 1 1 0; min-width: 3px; border: 0; padding: 0; border-radius: 3px; background: #e5e7eb; overflow: hidden; cursor: pointer; }
.tp-tick i { position: absolute; inset: 0; background: #2563eb; transform: scaleX(0); transform-origin: left center; }
.tp-tick.done i { transform: scaleX(1); background: #93b4f5; }
.tp-tick.cur { background: #c7d7fb; }
.tp-tick.qa { background: #fde7c4; }
.tp-tick.qa.done i { background: #f5b961; }
.tp-tick.hov { box-shadow: inset 0 0 0 2px #1d4ed8; }
#tpBar.tp-wait #tpTicks { cursor: default; }
#tpChap { font: 500 12px var(--ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
#tpTime { flex: none; font: 500 13px var(--ui); font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 640px) {
  #tpBar { margin: -2px 8px 8px; padding: 4px 8px; gap: 4px; flex-wrap: wrap; }
  #tpBar > button { width: 36px; height: 34px; }
  #tpSteps { order: 5; flex: 1 1 100%; }
  #tpTime { margin-left: auto; font-size: 12px; }
}
body.videomode #tpBar, body.videomode #tpTapBtn, body.videomode #tpCtlBtn { display: none !important; }