/* styles-tutor.css — Quanta Tutor (app/ui/copilot.js). Owned by the tutor
   agent of the premium UI round. Consumes styles-ds.css tokens and overrides
   the older .copilot-* rules in styles-v2.css (same specificity, later file).

   Design language: an instrument, not a chat app. A Bloch-node mark, a mono
   readout of where you are, a segmented stage track, one probability bar.
   Motion is 150-300ms transform/opacity only, each with a job:
     - launcher lift + quarter-turn of the phase dot on hover (it is live)
     - launcher press scale (it registered)
     - mark → chevron crossfade (the same button now closes)
     - panel grows out of the launcher (where it came from)
     - sections fade in once, 30ms apart (reading order)
   No loops, no particles, no glow, no glass. */

/* ============================================================ launcher */
.copilot-fab{
  position:fixed;z-index:150;
  right:20px;
  bottom:calc(20px + var(--shell-bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px));
  width:56px;height:56px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;opacity:1;
  background:var(--ds-accent-grad);color:var(--on-accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), 0 0 0 1px rgba(16,19,32,.06), var(--ds-shadow-2);
  transition:transform var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease);
  -webkit-tap-highlight-color:transparent;
}
.copilot-fab:hover{transform:translateY(-2px)}
.copilot-fab:active{transform:scale(.96);transition-duration:90ms}
.copilot-fab:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), var(--ds-focus), var(--ds-shadow-2);
}
.qt-fab-face{display:grid;place-items:center;width:100%;height:100%;pointer-events:none}
.qt-fab-face > svg{grid-area:1/1}
.qt-fab-mark{transition:opacity var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-2) var(--ds-ease-out)}
.qt-fab-close{opacity:0;transform:scale(.6) rotate(-90deg);
  transition:opacity var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-2) var(--ds-ease-out)}
.copilot-fab[aria-expanded="true"] .qt-fab-mark{opacity:0;transform:scale(.6) rotate(45deg)}
.copilot-fab[aria-expanded="true"] .qt-fab-close{opacity:1;transform:none}

/* the phase dot + orbital ring turn a quarter on hover — a transition, never a loop */
.qt-mark-svg .qt-orbit{transform-box:view-box;transform-origin:50% 50%;
  transition:transform var(--ds-dur-3) var(--ds-ease-out)}
.copilot-fab:hover .qt-orbit,
.copilot-fab:focus-visible .qt-orbit{transform:rotate(90deg)}

/* real count only (set by copilotNudge) */
.copilot-badge{
  position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--signal);color:#fff;border:2px solid var(--ground);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:700;line-height:1;
}
.copilot-badge[hidden]{display:none}

/* ============================================================ panel */
.copilot-panel{
  position:fixed;z-index:151;
  right:20px;
  bottom:calc(20px + 56px + 12px + var(--shell-bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px));
  width:380px;max-width:calc(100vw - 32px);
  max-height:min(76vh, 660px);
  display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-3);
  box-shadow:var(--ds-shadow-pop);
  transform-origin:bottom right;
  opacity:0;transform:translateY(8px) scale(.92);
  visibility:hidden;pointer-events:none;
  transition:opacity var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease), visibility 0s linear var(--ds-dur-1);
}
.copilot-panel.on{
  opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-out), visibility 0s;
}
.copilot-panel:focus{outline:none}
.copilot-panel :focus-visible{outline:none;box-shadow:var(--ds-focus)}

/* sections fade in once per open, 30ms apart (opacity only) */
.copilot-panel.qt-enter .qt-stag{animation:qt-in var(--ds-dur-2) var(--ds-ease-out) both;
  animation-delay:calc(var(--i, 0) * 30ms)}
@keyframes qt-in{from{opacity:0}to{opacity:1}}

.copilot-scrim{display:none}

/* ---------- title bar */
.qt-top{flex:0 0 auto;border-bottom:1px solid var(--ds-line)}
.qt-handle{display:none}
.qt-bar{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px}
.qt-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--ds-line)}
.qt-word{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.qt-word b{font-size:14.5px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.qt-meta{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copilot-panel .copilot-ai-tag{margin:0;padding:2px 7px;border-radius:var(--ds-radius-pill);
  background:var(--good-soft);color:var(--good);font-size:9.5px!important;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;flex:0 0 auto}
.qt-x{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:var(--ds-radius-2);background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease)}
.qt-x:hover{background:var(--surface-2);color:var(--ink)}

/* ---------- scroll body */
.qt-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 14px 6px;display:flex;flex-direction:column;gap:12px}

/* ---------- the readout (where you are) */
.qt-readout{
  position:relative;padding:12px 12px 12px;border-radius:var(--ds-radius-2);
  border:1px solid var(--ds-line);
  background-color:var(--surface-2);
  background-image:var(--ds-grid);background-size:14px 14px;background-position:-1px -1px;
  display:flex;flex-direction:column;gap:7px;
}
.qt-kicker{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.qt-kicker-sep{opacity:.6}
.qt-title{font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);letter-spacing:-.01em;
  overflow-wrap:anywhere}
.qt-stage{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.qt-stage-n{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--accent);
  padding:1px 6px;border-radius:var(--ds-radius-1);background:var(--accent-soft)}
.qt-stage-t{min-width:0;overflow-wrap:anywhere}
.qt-stage-t b{font-weight:600;color:var(--ink)}

/* segmented stage track */
.qt-seg{display:flex;gap:2px;height:4px;margin-top:1px}
.qt-seg > i{flex:1 1 0;min-width:0;border-radius:2px;background:var(--ds-line-strong);opacity:.55}
.qt-seg > i.is-done{background:var(--accent);opacity:1}
.qt-seg > i.is-now{background:var(--ds-accent-grad);opacity:1}
.qt-seg.is-bar{position:relative;border-radius:2px;background:var(--ds-line);overflow:hidden}
.qt-seg.is-bar > i{position:absolute;left:0;top:0;bottom:0;flex:none;border-radius:2px;background:var(--ds-accent-grad);opacity:1}

/* concept chips with their live mastery band */
.qt-concepts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.qt-cchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:3px 9px 3px 7px;border-radius:var(--ds-radius-pill);
  background:var(--surface);border:1px solid var(--ds-line);font-size:11.5px;color:var(--ink);line-height:1.35}
.qt-cchip > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt-cchip > i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--qt-band, var(--accent))}
.qt-cchip > em{flex:0 0 auto;font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  color:var(--qt-band, var(--ink-3));letter-spacing:.02em}
.qt-cchip.is-new > i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.qt-cchip.is-new > em{color:var(--ink-3)}

/* stat cells */
.qt-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));gap:6px}
.qt-stat{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:var(--ds-radius-1);
  background:var(--surface);border:1px solid var(--ds-line);min-width:0}
.qt-stat b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
.qt-stat span{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* outcome probabilities — one stacked bar, a probability gradient */
.qt-prob{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--ds-line);gap:1px}
.qt-prob > i{display:block;height:100%;background:var(--accent);opacity:calc(1 - var(--k, 0) * .28)}
.qt-prob > i:first-child{background:var(--ds-accent-grad)}
.qt-prob-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--ink-2)}
.qt-prob-legend span{display:inline-flex;align-items:center;gap:5px}
.qt-prob-legend i{width:7px;height:7px;border-radius:2px;background:var(--accent);opacity:calc(1 - var(--k, 0) * .28)}
.qt-flags{display:flex;flex-wrap:wrap;gap:6px}
.qt-flag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--ds-radius-pill);
  background:var(--surface);border:1px solid var(--ds-line);color:var(--ink-2)}
.qt-flag.is-good{color:var(--good);border-color:color-mix(in srgb, var(--good) 35%, transparent);background:var(--good-soft)}
.qt-flag.is-accent{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 35%, transparent);background:var(--accent-soft)}

.qt-rows{display:flex;flex-direction:column;gap:4px}
.qt-readout .qt-row{background:var(--surface)}

/* ---------- sections */
.qt-sec{display:flex;flex-direction:column;gap:6px}
.qt-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:0 2px}
.copilot-panel .copilot-brief{background:none;border:0;border-radius:0;padding:0;margin:0}
.qt-brief-text{margin:0;padding:0 2px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.copilot-panel .copilot-chips{margin:0;flex-wrap:nowrap}
.copilot-panel .copilot-foot{margin:0;padding:8px 0 0;border-top:1px solid var(--ds-line)}
.qt-coach .bcoach-entry{padding:0;margin:0;border:0}

/* ---------- action rows: icon · text · chevron */
.qt-row{
  display:flex;align-items:center;gap:10px;width:100%;min-height:40px;height:auto;margin:0;
  padding:8px 8px 8px 10px;text-align:left;white-space:normal;cursor:pointer;
  font:inherit;font-size:13px;line-height:1.4;color:var(--ink);
  background:transparent;border:1px solid var(--ds-line);border-radius:var(--ds-radius-2);
  transition:background-color var(--ds-dur-1) var(--ds-ease), border-color var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease);
}
.qt-row:hover{background:var(--ds-deck-hover);border-color:var(--ds-line-strong)}
.qt-row:active{transform:scale(.99)}
.qt-row-ic{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--ds-radius-1);
  background:var(--accent-soft);color:var(--accent)}
.qt-row-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qt-row-label{overflow-wrap:anywhere}
.qt-row-sub{font-size:11.5px;color:var(--ink-3);line-height:1.4;overflow-wrap:anywhere}
.qt-row-go{flex:0 0 auto;display:grid;place-items:center;color:var(--ink-3);
  transition:transform var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease)}
.qt-row:hover .qt-row-go{transform:translateX(2px);color:var(--accent)}
.qt-row.is-primary{border-color:color-mix(in srgb, var(--accent) 40%, var(--ds-line));background:var(--accent-soft);font-weight:600}
.qt-row.is-primary .qt-row-ic{background:var(--ds-accent-grad);color:var(--on-accent)}
.qt-row.is-primary:hover{border-color:var(--accent)}
.qt-row.is-quiet{border-color:transparent;color:var(--ink-2);min-height:34px;padding:5px 8px}
.qt-row.is-quiet .qt-row-ic{background:transparent;color:var(--ink-3);width:22px;height:22px}
.qt-row.is-quiet:hover{border-color:var(--ds-line);color:var(--ink)}

/* ---------- answers: annotated notes, not chat bubbles */
.copilot-panel .copilot-answer{display:flex;flex-direction:column;gap:8px}
.copilot-panel .copilot-answer:empty{display:none}
.qt-ans-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.copilot-panel .copilot-a-badge{margin:0;border-radius:var(--ds-radius-1)}
.qt-src{font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.qt-ans-q{margin:0;padding:0 2px;font-size:12.5px;color:var(--ink-2);font-style:italic}
.qt-ans-q::before{content:"Q  ";font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
.qt-note{position:relative;padding:8px 10px 9px 12px;border-radius:var(--ds-radius-1);
  background:var(--surface-2);border:1px solid var(--ds-line)}
.qt-note::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--qt-note, var(--ds-line-strong))}
.qt-note.is-summary{--qt-note:var(--accent)}
.qt-note.is-good{--qt-note:var(--good)}
.qt-note.is-warn,.qt-note.is-coach{--qt-note:var(--warn)}
.qt-note.is-error{--qt-note:var(--signal)}
.qt-note.is-reference{--qt-note:var(--ink-3)}
.qt-note-k{display:block;margin-bottom:3px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.copilot-panel .qt-note .copilot-a-text{margin:0;font-size:13px;line-height:1.55;color:var(--ink)}
.copilot-panel .qt-note .copilot-a-text + .copilot-a-text{margin-top:7px}
.copilot-panel .qt-note .copilot-a-text strong{font-weight:650;color:var(--ink)}
.copilot-panel .qt-note .copilot-a-text code{font-size:.92em;padding:0 4px;border-radius:4px;background:var(--surface-3)}
.copilot-panel .qt-ref{font-size:9.5px;line-height:0;margin-left:1px;padding:0 3px;border-radius:3px;color:var(--accent);background:var(--accent-soft);vertical-align:super}
.qt-note-lines{margin:2px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.qt-note-lines .mono{font-size:10.5px;color:var(--ink-3)}
.qt-note-items{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--ink)}
.qt-cite{display:block;margin-top:5px;font-size:11px;color:var(--ink-3);text-decoration:none;overflow-wrap:anywhere}
a.qt-cite:hover{color:var(--accent);text-decoration:underline}
.qt-pending{font-size:11.5px;color:var(--ink-3);padding:6px 2px}

/* ---------- the ask field, pinned to the bottom */
.copilot-panel .qt-ask{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;margin:0;
  padding:10px 12px 12px;border-top:1px solid var(--ds-line);background:var(--surface)}
.qt-ask-field{display:flex;align-items:center;gap:4px;padding:3px 3px 3px 12px;
  border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-2);background:var(--surface-2);
  transition:border-color var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease)}
.qt-ask-field:focus-within{border-color:var(--accent);box-shadow:var(--ds-focus)}
.copilot-panel .copilot-input{flex:1;min-width:0;height:34px;padding:0;margin:0;border:0;background:transparent;
  font:inherit;font-size:13px;color:var(--ink);box-shadow:none;outline:none}
.copilot-panel .copilot-input:focus-visible{box-shadow:none}
.copilot-panel .copilot-input::placeholder{color:var(--ink-3)}
.copilot-panel .copilot-input:disabled{cursor:not-allowed;opacity:.6}
.qt-ask-go{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;cursor:pointer;
  border-radius:var(--ds-radius-1);background:var(--ds-accent-grad);color:var(--on-accent);
  transition:transform var(--ds-dur-1) var(--ds-ease), opacity var(--ds-dur-1) var(--ds-ease)}
.qt-ask-go:hover{transform:translateX(1px)}
.qt-ask-go:active{transform:scale(.94)}
.qt-ask-go:disabled{opacity:.4;cursor:not-allowed;transform:none}
.qt-ask-note{margin:0;padding:0 2px;font-size:10px;color:var(--ink-3);letter-spacing:.02em}
.copilot-panel .copilot-note{margin:0;padding:0 2px;font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* ---------- dark theme: the light accent gradient needs a darker ring */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .copilot-fab{
    box-shadow:inset 0 0 0 1px rgba(11,13,20,.28), 0 0 0 1px rgba(255,255,255,.06), var(--ds-shadow-2);
  }
}
:root[data-theme="dark"] .copilot-fab{
  box-shadow:inset 0 0 0 1px rgba(11,13,20,.28), 0 0 0 1px rgba(255,255,255,.06), var(--ds-shadow-2);
}

/* ============================================================ bottom sheet (≤760px) */
@media (max-width:760px){
  .copilot-fab{
    right:16px;width:48px;height:48px;opacity:1;
    bottom:calc(16px + var(--shell-bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px));
  }
  .copilot-fab .qt-fab-mark{width:23px;height:23px}
  .copilot-fab:hover{transform:none}
  .copilot-fab:active{transform:scale(.96)}

  .copilot-panel{
    left:0;right:0;bottom:0;width:100%;max-width:none;
    max-height:80vh;max-height:80dvh;z-index:401;
    border-radius:18px 18px 0 0;border-bottom:0;border-left:0;border-right:0;
    transform-origin:bottom center;
    transform:translateY(100%);opacity:1;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    transition:transform var(--ds-dur-1) var(--ds-ease), visibility 0s linear var(--ds-dur-1);
  }
  .copilot-panel.on{transform:none;
    transition:transform var(--ds-dur-3) var(--ds-ease-out), visibility 0s}
  .copilot-panel.qt-dragging{transition:none}

  .copilot-scrim{
    display:block;position:fixed;inset:0;z-index:400;
    background:rgba(8,10,18,.38);opacity:0;visibility:hidden;
    transition:opacity var(--ds-dur-2) var(--ds-ease), visibility 0s linear var(--ds-dur-2);
  }
  .copilot-scrim.on{opacity:1;visibility:visible;transition:opacity var(--ds-dur-2) var(--ds-ease), visibility 0s}

  .qt-handle{display:flex;justify-content:center;align-items:center;width:100%;height:20px;padding:0;margin:0;
    border:0;background:transparent;cursor:grab;touch-action:none}
  .qt-handle i{display:block;width:40px;height:4px;border-radius:2px;background:var(--ds-line-strong)}
  .qt-handle:active{cursor:grabbing}
  .qt-bar{padding-top:2px}
  .qt-scroll{padding:12px 16px 8px}
  .copilot-panel .qt-ask{padding:10px 16px 12px}
}

/* ============================================================ reduced motion
   The OS preference is caught globally in styles.css; the in-app override
   (Settings > Accessibility) stamps :root[data-reduced-motion] — cover every
   tutor element for it here. State still changes instantly. */
:root[data-reduced-motion="true"] .copilot-fab,
:root[data-reduced-motion="true"] .copilot-fab *,
:root[data-reduced-motion="true"] .copilot-panel,
:root[data-reduced-motion="true"] .copilot-panel *,
:root[data-reduced-motion="true"] .copilot-scrim{transition:none!important;animation:none!important}
:root[data-reduced-motion="true"] .copilot-fab:hover{transform:none}
:root[data-reduced-motion="true"] .copilot-fab:hover .qt-orbit{transform:none}
@media (prefers-reduced-motion:reduce){
  .copilot-fab:hover,.copilot-fab:hover .qt-orbit{transform:none}
  .copilot-panel.qt-enter .qt-stag{animation:none}
}