/* METAMP 96 -- winamp-spoof music extension for the METScape frame (mockup).
   Brand palette: navy #0a1030, lime #00ffa0, amber #ffd400, pink #ff3da8. */
#metamp{position:fixed;top:calc(var(--page-inset-top,0px) + 118px);right:calc(var(--page-inset-right,0px) + 26px);width:292px;z-index:76;font:11px Tahoma,Verdana,sans-serif;color:#cfd6ff;background:#191b2e;border:2px outset #4a4f7a;box-shadow:4px 4px 0 rgba(0,0,0,.45);user-select:none}
/* touch-action:none for the same reason metaeden-v4.css states on .w95 .tb:
   without it a touchscreen decides mid-drag that the gesture is a page scroll
   and cancels the pointer, which is "hard to drag on a touch interface"
   exactly (TASK-1380[Q]). */
#metamp .mptbar{display:flex;align-items:center;gap:6px;height:18px;padding:0 4px 0 6px;background:linear-gradient(#2e3868,#101736);cursor:grab;touch-action:none;border-bottom:1px solid #000}
#metamp .mptbar:active{cursor:grabbing}
#metamp .mplogo{width:9px;height:9px;background:#00ffa0;box-shadow:2px -2px 0 #ff3da8;flex:none}
#metamp .mpname{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font:700 10px Tahoma,Verdana,sans-serif;letter-spacing:.12em;color:#fff}
#metamp .mpname i{font-style:normal;color:#8b93b8;font-weight:400;letter-spacing:.04em}
#metamp .mpshade{flex:none;width:14px;height:12px;border:1px outset #6a6f9e;background:#34375a;color:#cfd6ff;font:700 9px/10px Tahoma;text-align:center;cursor:pointer}
#metamp .mpdisp{display:flex;gap:8px;padding:7px 8px 5px;background:#0a1030;border-bottom:1px solid #000}
#metamp .mptime{flex:none;width:74px;text-align:right;font:700 26px/28px "Courier New",monospace;color:#00ffa0;text-shadow:0 0 6px rgba(0,255,160,.5);background:#041408;border:1px inset #2a2d45;padding:2px 6px 0 0}
#metamp .mpright{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#metamp .mptrack{overflow:hidden;white-space:nowrap;background:#041408;border:1px inset #2a2d45;height:15px}
#metamp .mptrack span{display:inline-block;padding:1px 0 0;font:11px "Courier New",monospace;color:#00ffa0;animation:mpmarq 9s linear infinite;will-change:transform}
@keyframes mpmarq{0%{transform:translateX(292px)}100%{transform:translateX(-100%)}}
#metamp .mpinfo{display:flex;align-items:center;gap:6px;font:9px "Courier New",monospace;color:#8b93b8}
#metamp .mpinfo b{color:#ffd400;font-weight:400}
#metamp .mplight{padding:0 3px;border:1px solid #2a2d45;color:#3a3f66}
#metamp .mplight.on{color:#00ffa0;border-color:#00ffa0}
#metamp .mpvis{display:flex;align-items:flex-end;gap:2px;height:16px}
/* TASK-1367[Q]: THE METER WAS FROZEN BY ITS OWN TRANSITION.
   Reported as "the equalizer stops moving on non-default khz", and that is
   exactly where it bit: the sequencer used to repaint the bars, and at the
   top of the ladder it fires every 25ms -- well inside a 100ms transition, so
   every repaint restarted it from 2px and the height never arrived. steps(3)
   made it worse by holding the FROM value for the whole first third.
   A NOTE FOR WHOEVER MEASURES THIS NEXT, because it cost a while: a HIDDEN
   tab shows the identical symptom for an unrelated and perfectly correct
   reason. setInterval keeps running there but transitions do not advance, so
   inline heights change while the computed height sits at 2px. Check
   document.visibilityState before concluding anything is broken.
   80ms is comfortably inside the 130ms cadence with room to spare, so it
   always finishes. The other half of the fix is in metamp.js: the sequencer no
   longer bumps the bars, so their cadence no longer depends on the tape speed
   -- which is the part the user actually noticed. */
#metamp .mpvis i{flex:1;background:linear-gradient(#ff3da8,#ffd400 40%,#00ffa0 75%);height:2px;transition:height .08s linear}
#metamp .mpsli{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#191b2e;border-bottom:1px solid #000}
#metamp .mpsli label{font:9px "Courier New",monospace;color:#8b93b8;letter-spacing:.1em}
#metamp input[type=range]{flex:1;height:14px;-webkit-appearance:none;appearance:none;background:transparent}
#metamp input[type=range]::-webkit-slider-runnable-track{height:4px;background:#0a1030;border:1px inset #2a2d45}
#metamp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:14px;margin-top:-6px;background:#34375a;border:2px outset #6a6f9e}
#metamp input[type=range]::-moz-range-track{height:4px;background:#0a1030;border:1px inset #2a2d45}
#metamp input[type=range]::-moz-range-thumb{width:10px;height:12px;border-radius:0;background:#34375a;border:2px outset #6a6f9e}
#metamp .mpsnd{flex:none;font:700 9px "Courier New",monospace;letter-spacing:.08em;padding:2px 5px;border:1px outset #4a4f7a;background:#23253a;color:#00ffa0;cursor:pointer}
#metamp .mpsnd.mut{color:#ff3da8}
#metamp .mprow{display:flex;align-items:center;gap:3px;padding:6px 8px}
#metamp .mpbtn{flex:none;width:30px;height:20px;background:#34375a;border:2px outset #6a6f9e;color:#e8ecff;font:700 10px/15px Tahoma;text-align:center;cursor:pointer;padding:0}
#metamp .mpbtn:active{border-style:inset}
#metamp .mpbtn[aria-pressed="true"]{border-style:inset;background:#23253a;color:#00ffa0}
#metamp .mpmute{flex:1;height:20px;background:#34375a;border:2px outset #6a6f9e;color:#ffd400;font:700 10px/16px Tahoma;letter-spacing:.1em;cursor:pointer}
#metamp .mpmute:active{border-style:inset}
/* min-height, because this strip is the only part of the player whose content
   changes size: the block glyph in "held" draws a shorter line box than the
   triangle in the other two, so the whole window used to shrink 3px whenever
   the music was paused.  13px is the tall case, reserved in every state.  It is
   a floor rather than a fixed height on purpose -- copy that outgrows one line
   should be visible and fixed, not silently clipped.  The budget is 46 visible
   characters at this width; metamp.js's paint() carries the same note. */
#metamp .mpstat{min-height:13px;padding:3px 8px 5px;font:9px "Courier New",monospace;color:#8b93b8;background:#10101c;letter-spacing:.04em}
#metamp .mpstat b{color:#00ffa0;font-weight:400}
#metamp .mpstat b.mut{color:#ff3da8}
/* the third transport state: loaded and pointed at the start, waiting for the
   touch that lets audio out at all.  Amber because it is neither of the other
   two, and it is the amber already on this window (.mpinfo b, .mpmute) rather
   than a new colour.  13.2:1 on the #10101c strip.  Colour only, so nothing
   here can move the line. */
#metamp .mpstat b.cue{color:#ffd400}
#metamp.shade .mpdisp,#metamp.shade .mpsli,#metamp.shade .mprow,#metamp.shade .mpstat{display:none}
/* TASK-1351[Q]: MetWindows writes the shared minimized class, and its own
   sheet only hides .w95 elements. The player is not one, so it needs this
   line or minimizing would set the state, draw the tray button, and leave
   the window sitting there. */
#metamp.mzd{display:none}
/* the extension hides the page's own midi chip: METAMP is that player now */
.tabs .midi{display:none}
/* ---- the hold-the-music ask ---- */
/* THE BACKDROP IS LOAD-BEARING, not decoration (TASK-1242[Q]).  inset:0 is what
   lays a surface over the player, so a pointer cannot reach the transport and
   press MUTE a second time while the ask is up.  metamp.js carries the other two
   halves of the same promise -- it claims the page's focus trap so a keyboard
   cannot get there either, and the transport refuses to move the sound while
   this window is open, whatever reaches it.  Shrink this to .mpwin and the
   pointer half is gone. */
#mpAsk{position:fixed;inset:0;z-index:96;display:none;place-items:center;pointer-events:none}
#mpAsk.open{display:grid}
#mpAsk .mpwin{width:430px;max-width:92vw;background:#c0c0c0;border:2px outset #fff;box-shadow:6px 6px 0 rgba(0,0,0,.4);color:#1c1c1c}
#mpAsk .mptb{display:flex;align-items:center;gap:8px;padding:3px 6px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font:700 12px Tahoma,Verdana,sans-serif}
#mpAsk .mptb span{flex:1}
#mpAsk .mptb b{width:16px;height:14px;background:#c0c0c0;color:#000;border:1px outset #fff;font:700 10px/12px Tahoma;text-align:center;cursor:pointer}
#mpAsk .mpbody{padding:14px 16px 12px;font:13px/1.5 Tahoma,Verdana,sans-serif}
#mpAsk .mpbody p{margin:0 0 10px}
#mpAsk .mpopts{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
#mpAsk .mpopts button{align-self:flex-start;font:700 12px Tahoma,Verdana,sans-serif;letter-spacing:.04em;padding:5px 12px;background:#c0c0c0;border:2px outset #fff;cursor:pointer;color:#1c1c1c}
#mpAsk .mpopts button:active{border-style:inset}
#mpAsk .mpopts .mpline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* 12px and a darker green, both deliberately off the mockup's values.  This
   label is the only thing on the dialog that says WHICH option is the safe one,
   so it is body text by CLAUDE.md's rule (12px floor, 4.5:1 floor) rather than
   the glanceable chrome the 9px readouts above are.  The mockup's #00611f on
   the #c0c0c0 window measures 4.23:1, which is under the floor; #00521a is
   5.20:1. */
#mpAsk .mprec{font:italic 12px Georgia,serif;color:#00521a}
#mpAsk #mpAll{color:#5a1010}
#mpAsk .ooc{margin:0;padding:10px 12px;background:#101322;border:1px solid #3a3f66;color:#c3cbe8;font:13px/1.65 "Courier New",monospace}
/* No `.ooc b` rule: the note carries no bold on purpose.  House emphasis is ALL
   CAPS on the one word holding the stake, once, and the note already spends it
   on ALL -- a bolded clause on top of that is the same emphasis twice. */
/* TASK-1306[Q]: NO MODAL BACKING, by design decision -- reported as "all the
   buttons seem like they were cut out of a modal screen and everything else is
   still screened by a modal background; just get rid of the modal backing both
   functional and visually in general."

   These dialogs are 1996 WINDOWS, not modern modals. A window does not dim the
   desktop behind it and does not stop you clicking what it is sitting on top
   of, so the dark rgba backdrop is gone from every one of them and the
   full-window layer they each stretch across no longer swallows pointer events.
   The dialog itself still takes clicks -- that is the `> *` rule -- so only the
   empty space around it becomes transparent to the mouse.

   Checked before landing: none of these seven relies on a backdrop click to
   close (METAMP's ask closes on its own X button, the rest on their own
   controls), so nothing loses a way out. What they DO lose is enforced
   modality: the page behind stays live while one is open. That is the point of
   the request rather than a side effect of it. */
#mpAsk>*{pointer-events:auto}
/* TASK-1352[Q]: the transport on the tray button. Sized to the 1996 chrome it
   sits in rather than to the player, because it is part of that strip now.
   The glyphs are the window's own, so a visitor reads the same two shapes in
   both places. aria-pressed drives the inset look, which is the same signal
   the window uses. */
#mwtrayAmp .mptray{display:inline-flex;gap:3px}
#mwtrayAmp .mptrb{width:20px;height:18px;padding:0;background:#c0c0c0;
  border:2px outset #fff;color:#000;font:9px/1 Tahoma,Verdana,sans-serif;
  cursor:pointer;display:grid;place-items:center}
/* TASK-1360[Q]: THE PAUSE MARK IS DRAWN, NOT TYPED.  The user: "the pause
   glyph doesn't look centered with the box it's in at all, in fact it's
   probably way too big for the box it's in to even have a chance at being
   properly aligned."  Measured, at the 9px this button uses:

     U+25B6 play    ink 7px tall, 0px below the baseline
     U+258C pause   ink 11px tall, 3px below the baseline

   ...in a line box of 9px and a content box of 14px. place-items:center
   centres the LINE BOX, and both buttons centre identically -- the pause
   just draws two pixels taller than the box being centred and three pixels
   lower than the play glyph beside it.
     The cause is that U+258C is a BLOCK ELEMENT, drawn to tile a character
   cell edge to edge with no side bearing and no leading, and Tahoma does not
   have one: every pixel of it comes from whatever font the platform
   substitutes, whose metrics this stylesheet has never seen. Tuning a
   font-size against one machine's fallback would be tuning against a font
   that is not named here and differs on the next platform.
     Two rules cannot be mis-measured. The SHAPE is unchanged -- a pause mark
   is two bars either way, which is the property the shared-glyph note above
   is about -- and the button keeps its name for a screen reader, which the
   glyph never gave it. */
#mwtrayAmp .mptrb.mppause{position:relative}
#mwtrayAmp .mptrb.mppause::before,#mwtrayAmp .mptrb.mppause::after{
  content:"";position:absolute;top:50%;width:2px;height:8px;
  background:currentColor;transform:translateY(-50%)}
#mwtrayAmp .mptrb.mppause::before{left:5px}
#mwtrayAmp .mptrb.mppause::after{right:5px}
#mwtrayAmp .mptrb:active{border-style:inset}
#mwtrayAmp .mptrb[aria-pressed="true"]{border-style:inset;background:#a8a8a8}
#mwtrayAmp .mptrb:focus-visible{outline:2px solid #00807f;outline-offset:1px}
/* TASK-1366[Q]: THE CLOCK COMING APART, kept rather than fixed.
   The field is 74px of 26px Courier -- four characters -- and a third minute
   digit does not fit. The user asked to lean into that, so past a hundred
   minutes the readout tears instead of merely spilling.
   TRANSFORM AND TEXT-SHADOW ONLY, which is not a detail: this repo forbids
   state changes that move layout, and a glitch is the most tempting place to
   break that. Neither property reflows, so nothing beside the clock so much
   as twitches while it falls apart. overflow:visible lets the extra digit out
   of its box on purpose -- that IS the bug, now on display.
   steps() rather than a smooth ease, because a tearing readout does not
   glide. And a pointer, which is the only hint that it can be pressed. */
@keyframes mpGlitch{
  0%,100%{transform:translate(0,0);text-shadow:0 0 6px rgba(0,255,160,.5)}
  20%{transform:translate(-2px,1px);
    text-shadow:2px 0 0 rgba(255,61,168,.9),-2px 0 0 rgba(0,200,255,.85)}
  40%{transform:translate(2px,-1px);
    text-shadow:-3px 0 0 rgba(255,61,168,.9),3px 0 0 rgba(0,200,255,.85)}
  60%{transform:translate(-1px,0);
    text-shadow:1px 0 0 rgba(255,212,0,.85),-2px 0 0 rgba(0,200,255,.85)}
  80%{transform:translate(1px,2px);text-shadow:0 0 10px rgba(255,61,168,.9)}
}
#metamp .mptime.glitch{animation:mpGlitch .32s steps(2,end) infinite;
  overflow:visible;cursor:pointer}
/* Reduced motion keeps the SPLIT and drops the movement: the readout still
   reads as broken, and as pressable, without anything jumping. */
@media (prefers-reduced-motion:reduce){
  #metamp .mptime.glitch{animation:none;
    text-shadow:2px 0 0 rgba(255,61,168,.9),-2px 0 0 rgba(0,200,255,.85)}}
/* TASK-1366[Q]: the hidden control. No title, no label, no colour of its own --
   it is a sample-rate readout doing what a readout does until somebody hovers
   it. The cursor is the whole of the invitation. */
#metamp .mpinfo #mpKhz{cursor:pointer}