/* ============================================================
   primae-supervisor.css — "the night shift".
   One wide stage. A night clock runs 22:00 → 06:00 while the
   ambient tone drifts dusk → deep night → dawn. Your branch is a
   solid ink rail; below it a dashed SHADOW rail carries five
   experiment capsules, each with a live score meter notched at
   the 0.84 baseline. Four fizzle into ghost stubs tagged
   "discarded"; one climbs to 0.91 and reads "▲ improved". A score
   track plots every result against the baseline. Only then does a
   suggestion card slide in with a real Accept button; at dawn the
   shadow work merges and a toast reads "merged — revertable".
   Type floor for this component is 14px — nothing smaller.
   Every class, including state classes, is prefixed pm-sup-.
   ============================================================ */
.pm-sup-wrap { margin: var(--space-lg, 36px) auto 0; max-width: 1060px; }

.pm-sup-cap {
  margin-top: 16px; text-align: center;
  font-family: var(--font-mono, monospace); font-size: 14px;
  letter-spacing: .01em; line-height: 1.6; color: var(--color-muted, #6c6b61);
}
.pm-sup-cap strong { color: var(--color-text, #1a1a17); font-weight: 600; }

.pm-sup-panel {
  border: 1px solid var(--color-border, #e0ddd1);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--color-bg, #f5f4ef);
  font-family: var(--font-sans, sans-serif);
  color: var(--color-text, #1a1a17);
}

/* ---- stage --------------------------------------------------- */
.pm-sup-stage {
  position: relative; height: 470px; overflow: hidden;
  background: var(--color-bg, #f5f4ef);
  -webkit-font-smoothing: antialiased;
}
/* scrub / rewind with transitions off */
.pm-sup-stage.pm-sup-snap * { transition: none !important; animation: none !important; }

/* ---- ambient: sky, stars, dawn glow, loop veil --------------- */
.pm-sup-sky { position: absolute; inset: 0; z-index: 0; }
.pm-sup-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pm-sup-star { position: absolute; display: block; border-radius: 50%; background: #3b3a33; opacity: 0; }
.pm-sup-glow {
  position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(46% 62% at 6% 6%, rgba(217, 149, 60, .30), rgba(217, 149, 60, 0) 70%),
    radial-gradient(70% 90% at 50% 0%, rgba(232, 200, 140, .16), rgba(232, 200, 140, 0) 72%);
}
.pm-sup-veil { position: absolute; inset: 0; z-index: 10; background: var(--color-bg, #f5f4ef); opacity: 0; pointer-events: none; }

/* ---- rails (SVG) --------------------------------------------- */
.pm-sup-svg { position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none; }
.pm-sup-l-main { fill: none; stroke: var(--color-text, #1a1a17); stroke-width: 2.2; stroke-linecap: round; }
.pm-sup-dot { fill: var(--color-text, #1a1a17); opacity: 0; }
.pm-sup-dot-f { stroke: var(--color-bg, #f5f4ef); stroke-width: 2; }
.pm-sup-shadow-g { }
.pm-sup-l-shadow { fill: none; stroke: var(--color-muted, #6c6b61); stroke-width: 1.6; stroke-linecap: round; }
.pm-sup-stem { fill: none; stroke: var(--color-muted, #6c6b61); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .55; }
.pm-sup-snode { fill: var(--color-muted, #6c6b61); opacity: .8; }
.pm-sup-l-merge { fill: none; stroke: var(--accent, #d9542b); stroke-width: 2.4; stroke-linecap: round; }
.pm-sup-mdot { opacity: 0; }
.pm-sup-mdot circle { fill: var(--accent, #d9542b); }
.pm-sup-mdot text { fill: var(--color-bg, #f5f4ef); font: 700 15px var(--font-mono, monospace); }

/* ---- HUD: clock · counters · score track --------------------- */
.pm-sup-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px 26px; flex-wrap: wrap;
  padding: 12px 18px 10px;
  pointer-events: none;
}
.pm-sup-clockbox { display: flex; align-items: flex-start; gap: 11px; }
.pm-sup-orbs { position: relative; display: block; width: 30px; height: 32px; flex: 0 0 auto; }
.pm-sup-orb {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 25px; line-height: 1; color: var(--color-text, #1a1a17);
}
.pm-sup-orb-sun { color: #b8791c; opacity: 0; }
.pm-sup-clockcol { display: flex; flex-direction: column; }
.pm-sup-clock {
  font: 600 30px/1 var(--font-mono, monospace);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: var(--color-text, #1a1a17);
}
.pm-sup-phase {
  margin-top: 6px;
  font: 500 14px/1.1 var(--font-mono, monospace);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-muted, #6c6b61);
}
.pm-sup-counts { display: flex; gap: 24px; padding-top: 2px; }
.pm-sup-stat { display: flex; flex-direction: column; }
.pm-sup-stat-n {
  font: 600 25px/1 var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; color: var(--color-text, #1a1a17);
}
.pm-sup-stat-l {
  margin-top: 6px; font: 500 14px/1.1 var(--font-mono, monospace);
  font-style: normal; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-muted, #6c6b61);
}
.pm-sup-stat-acc .pm-sup-stat-n { color: var(--accent, #d9542b); }
.pm-sup-pop { animation: pm-sup-pop .42s cubic-bezier(.34, 1.5, .5, 1); }
@keyframes pm-sup-pop { 0% { transform: translateY(-3px) scale(1.16); } 100% { transform: none; } }

.pm-sup-track { flex: 0 1 420px; min-width: 268px; }
.pm-sup-track-t {
  display: block; margin-bottom: 3px;
  font: 500 14px/1.1 var(--font-mono, monospace);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-muted, #6c6b61);
}
.pm-sup-chart { display: block; width: 100%; height: 88px; overflow: visible; }
.pm-sup-ct { font: 500 14px var(--font-mono, monospace); fill: var(--color-muted, #6c6b61); }
.pm-sup-ct-b { fill: var(--color-text, #1a1a17); }
.pm-sup-ctick { font: 500 14px var(--font-mono, monospace); fill: var(--color-muted, #6c6b61); opacity: .8; }
.pm-sup-cbase { stroke: var(--color-text, #1a1a17); stroke-width: 1.3; stroke-dasharray: 5 4; opacity: .5; }
.pm-sup-caxis { stroke: var(--color-text, #1a1a17); stroke-width: 1; opacity: .14; }
.pm-sup-cdrop { stroke: var(--color-muted, #6c6b61); stroke-width: 1.2; opacity: .4; }
.pm-sup-cpt { opacity: 0; }
.pm-sup-cpt circle { fill: var(--color-bg, #f5f4ef); stroke: var(--color-muted, #6c6b61); stroke-width: 1.7; }
.pm-sup-cpt-ok circle { fill: var(--accent, #d9542b); stroke: var(--accent, #d9542b); }
.pm-sup-cpt-ok .pm-sup-cdrop { stroke: var(--accent, #d9542b); opacity: .7; }
.pm-sup-cval { font: 600 15px var(--font-mono, monospace); fill: var(--accent, #d9542b); }

/* ---- rail labels (JS-positioned, height measured by the JS) --- */
.pm-sup-rlab {
  position: absolute; z-index: 2; opacity: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}
.pm-sup-rlab b {
  font: 600 17px/1.4 var(--font-sans, sans-serif);
  letter-spacing: -.01em; color: var(--color-text, #1a1a17);
}
.pm-sup-rlab i {
  margin-left: 8px; font-style: normal;
  font: 500 14px/1.4 var(--font-mono, monospace);
  letter-spacing: .02em; color: var(--color-muted, #6c6b61);
}
.pm-sup-rlab-shadow b { font-size: 15px; font-family: var(--font-mono, monospace); font-weight: 500; letter-spacing: .02em; color: var(--color-muted, #6c6b61); }
.pm-sup-rlab-shadow i { color: var(--color-muted, #6c6b61); opacity: .82; }

/* ---- experiment capsules (real buttons) ---------------------- */
.pm-sup-exps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pm-sup-exp {
  position: absolute; box-sizing: border-box; display: block; text-align: left;
  padding: 9px 10px 10px;
  background: var(--color-bg, #f5f4ef);
  border: 1px solid rgba(26, 26, 23, .22);
  border-radius: 9px;
  box-shadow: 0 6px 18px -14px rgba(26, 26, 23, .5);
  opacity: 0; pointer-events: none; cursor: default;
  font-family: var(--font-mono, monospace);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.pm-sup-exp-live { pointer-events: auto; cursor: pointer; }
.pm-sup-exp-hd {
  display: flex; gap: 5px; overflow: hidden; white-space: nowrap;
  font: 500 14px/1.2 var(--font-mono, monospace); letter-spacing: .01em;
}
.pm-sup-exp-hd b { font-weight: 600; color: var(--color-text, #1a1a17); }
.pm-sup-exp-hd i { font-style: normal; color: var(--color-muted, #6c6b61); overflow: hidden; text-overflow: ellipsis; }
.pm-sup-exp-meter {
  position: relative; display: block; height: 8px; margin: 9px 0 8px;
  background: rgba(26, 26, 23, .09); border-radius: 4px; overflow: hidden;
}
.pm-sup-exp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--color-muted, #6c6b61); border-radius: 4px;
}
.pm-sup-exp-fill-over { background: var(--accent, #d9542b); }
.pm-sup-exp-base { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: rgba(26, 26, 23, .55); }
.pm-sup-exp-num {
  display: block; font: 600 23px/1 var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--color-text, #1a1a17);
}
.pm-sup-exp-st {
  display: block; margin-top: 6px; font-style: normal;
  font: 500 14px/1.2 var(--font-mono, monospace); letter-spacing: .01em;
  color: var(--color-muted, #6c6b61); white-space: nowrap; overflow: hidden;
}
.pm-sup-exp-ghost { display: none; }

/* running */
.pm-sup-exp-run { border-color: rgba(26, 26, 23, .34); }
.pm-sup-exp-run .pm-sup-exp-st { animation: pm-sup-throb 1.2s ease-in-out infinite; }
@keyframes pm-sup-throb { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }

/* the moment the meter crosses the baseline, the number turns */
.pm-sup-exp-over .pm-sup-exp-num { color: var(--accent, #d9542b); }

/* improved — the one accent moment on the shadow rail */
.pm-sup-exp-win {
  border-color: var(--accent, #d9542b);
  box-shadow: 0 10px 26px -16px rgba(217, 84, 43, .8);
}
.pm-sup-exp-win .pm-sup-exp-num { color: var(--accent, #d9542b); }
.pm-sup-exp-win .pm-sup-exp-st { color: var(--accent, #d9542b); font-weight: 600; }

/* discarded — the capsule collapses to a legible ghost stub */
.pm-sup-exp-dead {
  border-style: dashed; border-color: rgba(26, 26, 23, .2);
  background: rgba(234, 231, 221, .55); box-shadow: none;
  transition: border-color .3s, background-color .3s;
}
.pm-sup-exp-dead .pm-sup-exp-meter,
.pm-sup-exp-dead .pm-sup-exp-num,
.pm-sup-exp-dead .pm-sup-exp-st { display: none; }
.pm-sup-exp-dead .pm-sup-exp-hd b,
.pm-sup-exp-dead .pm-sup-exp-hd i { color: var(--color-muted, #6c6b61); }
.pm-sup-exp-dead .pm-sup-exp-ghost { display: block; margin-top: 8px; }
.pm-sup-exp-gv {
  display: block; font: 500 17px/1 var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; color: var(--color-muted, #6c6b61);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.pm-sup-exp-gx {
  display: inline-block; margin-top: 8px; font-style: normal;
  font: 500 14px/1 var(--font-mono, monospace); letter-spacing: .02em;
  color: var(--color-muted, #6c6b61);
  border: 1px dashed rgba(26, 26, 23, .26); border-radius: 999px;
  padding: 4px 8px; white-space: nowrap;
}
.pm-sup-exp-live:hover, .pm-sup-exp-live:focus-visible {
  border-color: var(--color-text, #1a1a17);
  background: var(--color-bg, #f5f4ef);
  box-shadow: 0 10px 26px -16px rgba(26, 26, 23, .7);
}
.pm-sup-exp-live:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.pm-sup-exp-win.pm-sup-exp-live:hover { border-color: var(--accent, #d9542b); }

/* two-row stagger: the status line steps aside so the rows stay clear */
.pm-sup-exp-tight { padding: 8px 10px 9px; }
.pm-sup-exp-tight .pm-sup-exp-st { display: none; }
.pm-sup-exp-tight .pm-sup-exp-meter { margin: 8px 0 7px; }
.pm-sup-exp-tight .pm-sup-exp-ghost { margin-top: 7px; }

/* compact slots: the name detail and the pill chrome step aside */
.pm-sup-exp-sm { padding: 8px 8px 9px; }
.pm-sup-exp-sm .pm-sup-exp-hd i { display: none; }
.pm-sup-exp-sm .pm-sup-exp-num { font-size: 20px; }
.pm-sup-exp-sm .pm-sup-exp-gx { border: 0; padding: 0; margin-top: 7px; }

/* ---- why-it-was-discarded tooltip ---------------------------- */
.pm-sup-tip {
  position: absolute; z-index: 7; max-width: 344px; box-sizing: border-box;
  padding: 10px 12px 11px;
  background: var(--color-text, #1a1a17); color: #f2f0e8;
  border-radius: 9px; box-shadow: 0 16px 34px -18px rgba(26, 26, 23, .8);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.pm-sup-tip-on { opacity: 1; transform: none; }
.pm-sup-tip-h {
  display: block; font: 600 16px/1.25 var(--font-sans, sans-serif);
  letter-spacing: -.01em; color: #faf8f2;
}
.pm-sup-tip-b {
  display: block; margin-top: 5px;
  font: 400 15px/1.35 var(--font-mono, monospace); letter-spacing: .01em;
  color: rgba(242, 240, 232, .78);
}
.pm-sup-tip-b2 { color: rgba(242, 240, 232, .95); }
.pm-sup-tip-acc .pm-sup-tip-b2 { color: #ff9166; }
.pm-sup-tip-ar {
  position: absolute; bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--color-text, #1a1a17); transform: rotate(45deg);
}

/* ---- status line: what the supervisor has to say before it has anything - */
.pm-sup-status {
  position: absolute; z-index: 2; opacity: 0;
  font: 400 16px/1.35 var(--font-mono, monospace); letter-spacing: .01em;
  color: var(--color-muted, #6c6b61);
}

/* ---- suggestion card ----------------------------------------- */
.pm-sup-card {
  position: absolute; right: 18px; bottom: 14px; z-index: 6;
  width: 486px; max-width: calc(100% - 36px); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px 14px;
  padding: 12px 15px 11px;
  background: var(--color-bg, #f5f4ef);
  border: 1px solid var(--color-text, #1a1a17);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-md, 0 10px 30px -12px rgba(26, 26, 23, .12));
  opacity: 0;
}
.pm-sup-card-main { flex: 1 1 220px; min-width: 0; }
.pm-sup-card-t {
  display: block;
  font: 700 21px/1.15 var(--font-sans, sans-serif); letter-spacing: -.02em;
  color: var(--color-text, #1a1a17);
}
.pm-sup-card-d {
  display: block; margin-top: 5px;
  font: 400 16px/1.35 var(--font-sans, sans-serif);
  color: var(--color-muted, #6c6b61);
}
.pm-sup-card-side { flex: 0 0 auto; padding-top: 4px; }
.pm-sup-card-note {
  flex: 1 1 100%; margin-top: 0; padding-top: 9px;
  border-top: 1px solid rgba(26, 26, 23, .14);
  font: 400 14px/1.3 var(--font-mono, monospace); letter-spacing: .02em;
  color: var(--color-muted, #6c6b61);
}
.pm-sup-accept {
  font: 600 16px/1 var(--font-sans, sans-serif); letter-spacing: -.01em;
  color: var(--color-bg, #f5f4ef); background: var(--color-text, #1a1a17);
  border: 1px solid var(--color-text, #1a1a17); border-radius: 999px;
  padding: 11px 20px; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s, transform .12s;
}
.pm-sup-accept:hover { background: var(--accent, #d9542b); border-color: var(--accent, #d9542b); }
.pm-sup-accept:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 3px; }
.pm-sup-accept-hit { transform: scale(.93); }
.pm-sup-accept-on,
.pm-sup-accept-on:hover {
  background: var(--accent, #d9542b); border-color: var(--accent, #d9542b);
  color: var(--color-bg, #f5f4ef); cursor: default;
}
.pm-sup-card-done { border-color: var(--accent, #d9542b); }

/* ---- rings, toast, cursor ------------------------------------ */
.pm-sup-ring {
  position: absolute; z-index: 5; width: 54px; height: 54px; margin: -29px 0 0 -29px;
  border: 2px solid var(--accent, #d9542b); border-radius: 50%;
  opacity: 0; pointer-events: none; transform: scale(.3);
}
.pm-sup-toast {
  position: absolute; z-index: 6;
  font: 500 16px/1.2 var(--font-mono, monospace); letter-spacing: .01em;
  color: var(--accent, #d9542b); background: #fbf1ea;
  border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 55%, transparent);
  border-radius: 999px; padding: 8px 15px; white-space: nowrap; opacity: 0;
  box-shadow: 0 10px 24px -18px rgba(217, 84, 43, .9);
}
.pm-sup-toast b { font-weight: 700; }
.pm-sup-cursor {
  position: absolute; left: 0; top: 0; z-index: 8; width: 19px; height: 19px;
  opacity: 0; pointer-events: none;
}
.pm-sup-cursor svg { display: block; width: 100%; height: 100%; }

/* ---- timeline controls --------------------------------------- */
.pm-sup-ctl {
  position: absolute; left: 18px; bottom: 16px; z-index: 6;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.pm-sup-btn {
  font: 500 14px/1 var(--font-mono, monospace); letter-spacing: .04em;
  color: var(--color-muted, #6c6b61);
  background: var(--color-bg, #f5f4ef);
  border: 1px solid var(--color-border, #e0ddd1); border-radius: 999px;
  padding: 8px 13px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.pm-sup-btn:hover { color: var(--accent, #d9542b); border-color: var(--accent, #d9542b); }
.pm-sup-btn:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 2px; }
.pm-sup-btn[aria-pressed="true"] { color: var(--accent, #d9542b); border-color: var(--accent, #d9542b); }

.pm-sup-scrub {
  -webkit-appearance: none; appearance: none;
  width: 168px; height: 20px; background: transparent; cursor: pointer;
}
.pm-sup-scrub:focus-visible { outline: 2px solid var(--accent, #d9542b); outline-offset: 3px; border-radius: 4px; }
.pm-sup-scrub::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: rgba(26, 26, 23, .2);
}
.pm-sup-scrub::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(26, 26, 23, .2); }
.pm-sup-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-bg, #f5f4ef); border: 2px solid var(--accent, #d9542b);
}
.pm-sup-scrub::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--accent, #d9542b);
  background: var(--color-bg, #f5f4ef);
}

/* screen-reader running commentary */
.pm-sup-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pm-sup-exp, .pm-sup-tip, .pm-sup-accept, .pm-sup-btn { transition: none; }
  .pm-sup-exp-run .pm-sup-exp-st, .pm-sup-pop { animation: none; }
}

/* ---- responsive ---------------------------------------------- */
@media (max-width: 940px) {
  .pm-sup-counts { gap: 18px; }
  .pm-sup-card { width: 430px; }
}
@media (max-width: 800px) {
  .pm-sup-track { flex: 1 1 100%; max-width: none; }
  .pm-sup-card { left: 16px; right: 16px; width: auto; max-width: none; }
  .pm-sup-ctl { left: 16px; right: 16px; }
}
@media (max-width: 620px) {
  .pm-sup-stage { height: 700px; }
  .pm-sup-phase { white-space: normal; max-width: 104px; }
  .pm-sup-chart { height: 76px; }
  .pm-sup-counts { gap: 12px; }
  .pm-sup-hud { padding: 12px 14px 10px; gap: 12px 18px; }
  .pm-sup-clock { font-size: 27px; }
  .pm-sup-stat-n { font-size: 22px; }
  .pm-sup-counts .pm-sup-stat:first-child { display: none; }
  .pm-sup-rlab-main i { display: none; }
  .pm-sup-rlab-shadow { white-space: normal; }
  .pm-sup-rlab-shadow b, .pm-sup-rlab-shadow i { display: block; margin-left: 0; }
  .pm-sup-rlab-shadow i { margin-top: 2px; }
  .pm-sup-card { left: 12px; right: 12px; bottom: 12px; padding: 11px 13px 10px; }
  .pm-sup-card-t { font-size: 20px; }
  .pm-sup-ctl { left: 12px; right: 12px; gap: 8px; }
  .pm-sup-scrub { flex: 1 1 100%; width: auto; min-width: 0; }
  .pm-sup-tip { max-width: 250px; }
  .pm-sup-status { display: none; }
}
@media (max-width: 440px) {
  .pm-sup-counts { gap: 14px; }
  .pm-sup-stat-l { letter-spacing: .04em; }
  .pm-sup-btn { padding: 8px 11px; }
}