/* ==========================================================================
   FILE        assets/edgelit-player.css
   UPLOAD TO   public_html/assets/edgelit-player.css
   WHAT IT IS  The site's soundtrack bar, the home page's film pop-up and its
               film buttons. The bar and the pop-up are AES's (assets/aes.css,
               the "soundtrack player" and "video modal" blocks, REV76), copied
               so the Winamp chassis (aes-skins.css, AES's byte for byte) sits
               on the same base it does on AES.
   VERSION     R19  (2026-10-26)
   CHANGES     R19 (spec 003, FR-8, FR-15): the bar no longer docks at the
               foot of the window. On the home page it sits in the hero
               (edgelit-hero.css); on every other customer page at the foot
               of the content, above the footer (.el-player-foot), with 44 px
               controls on a phone. So the footer's room for a docked bar
               goes. Dragged by its title bar on a computer, it floats over
               the page as on AES.
               R19 (FR-27, Jace, 26 October): the ✕ in the chassis's title bar
               and the header's music button (.nav-music): after the links on
               a computer, left of the menu button on a phone, glowing while a
               song plays. A closed bar (body.player-closed) is hidden; the
               music plays on.
               R18: new. AES's colour names (--steel, --red, --halo, --mute,
               --white) are defined on the bar and the pop-up only, so nothing
               else on the site changes colour.
   ========================================================================== */

/* AES's colours, held on the two elements that use them. The Signal colourway
   (aes-skins.css) repaints the bar itself; these show only before the chassis
   is built, or if its script fails to load. */
#player, .vmodal {
  --steel: #C9D4E0;
  --red:   #D10000;
  --halo:  #FFE3BC;
  --mute:  #8FA3B8;
  --white: #FFFFFF;
}

/* R19: no room kept at the foot of the window: the bar sits in the page now
   (the R18 rule body.has-player footer { padding-bottom: 86px } is gone). */

/* ---------------- R19: the bar at the foot of every other customer page (FR-15) ----------------
   "html body .el-player-foot #player" outranks the chassis's "#player" and the
   fixed dock below, so the bar stays in the page's flow. */
html body .el-player-foot{padding:8px 0 36px}
html body .el-player-foot #player{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none;
  margin:0 auto;width:100%;max-width:460px;z-index:2}
/* Dragged by its title bar on a computer, the chassis floats over the page, placed
   by its own script (left and bottom, inline), as on AES. */
html body .el-player-foot #player.aes-floating{position:fixed;margin:0;z-index:150}
@media (max-width:720px){
  html body .el-player-foot #player{max-width:100%}
  /* Every control at least 44 px tall to a finger (NFR-5), as in the hero. */
  html body .el-player-foot #player button{min-width:44px;min-height:44px}
  html body .el-player-foot #player .aes-wamp-title{height:44px;font-size:10px}
  html body .el-player-foot #player .aes-skinbar-toggle{align-self:stretch;font-size:10px}
}

/* ---------------- R19: closing the bar (FR-27) ----------------
   The ✕ after SKIN, drawn as SKIN is, in the colourway's own colours (aes-skins.css). */
html body #player .aes-wamp-close{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:18px;height:12px;margin-left:3px;padding:0;cursor:pointer;border-radius:1px;
  background:var(--k-btn);border:1px solid var(--k-edge);box-shadow:inset 1px 1px 0 var(--k-bevel-hi);color:var(--k-btn-fg)}
html body #player .aes-wamp-close svg{width:7px;height:7px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
html body #player .aes-wamp-close:hover{background:var(--k-btn-hover);color:var(--k-btn-fg-hi)}
html body #player .aes-wamp-close:focus-visible{outline:2px solid var(--k-accent);outline-offset:1px}
@media (max-width:720px){
  /* On a phone the title bar is 44 px tall (edgelit-hero.css, above), and the ✕ is 44 px to a finger. */
  html body #player .aes-wamp-close{align-self:stretch;width:44px;height:auto;margin-left:4px}
  html body #player .aes-wamp-close svg{width:11px;height:11px}
}
/* Closed: the bar and its room go; the music plays on. */
html body.player-closed #player,
html body.player-closed .el-player-foot{display:none}

/* The music button in the header bar. After the links on a computer: the links
   take the free space before them, so the two sit together on the right. On a
   phone the links fold away behind the menu button, and the music button takes
   the free space instead, so it sits just left of the menu button. */
html body .nav-music{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;margin:0;padding:0;cursor:pointer;border-radius:50%;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  transition:color .2s,border-color .2s,box-shadow .2s}
html body .nav-music[hidden]{display:none}
html body .nav-music svg{width:17px;height:17px;fill:currentColor}
html body .nav-music:hover{color:#FFFFFF;border-color:var(--edge-a)}
html body .nav-music:focus-visible{outline:2px solid var(--edge);outline-offset:2px}
/* While a song plays: lit cool white, as the orbitals and the panels' edges are. */
html body .nav-music.is-playing{color:#FFFFFF;border-color:rgba(169,210,255,.9);
  box-shadow:0 0 14px rgba(169,210,255,.55),inset 0 0 9px rgba(169,210,255,.35)}
html body .nav-music.is-playing svg{filter:drop-shadow(0 0 4px rgba(220,235,255,.9))}
@media (min-width:901px){html body header.nav .nav-links{margin-left:auto}}
@media (max-width:900px){html body .nav-music{width:44px;height:44px;margin-left:auto}}
@media (prefers-reduced-motion:reduce){html body .nav-music{transition:none}}

/* ---------------- the soundtrack bar (AES aes.css, REV76) ---------------- */
.player{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:150;
  display:flex;align-items:center;gap:12px;
  width:min(760px,calc(100vw - 24px));
  background:rgba(10,22,34,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:14px;padding:10px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.pbtn{background:none;border:1px solid var(--line);border-radius:8px;color:var(--steel);cursor:pointer;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:none;
  transition:color .2s,border-color .2s}
.pbtn:hover{color:var(--white);border-color:rgba(201,212,224,.35)}
.pbtn.pplay{background:var(--red);border-color:var(--red);color:#fff;width:42px;height:42px}
.pbtn.pplay:hover{background:#E5303A}
.pbtn svg{width:14px;height:14px;fill:currentColor}
.pcore{flex:1;min-width:0}
.pline{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.ptitle{font-family:"Share Tech Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:var(--halo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptime{font-family:"Share Tech Mono",monospace;font-size:10.5px;color:var(--mute);white-space:nowrap}
.pseek{height:5px;border-radius:3px;background:rgba(201,212,224,.14);position:relative;cursor:pointer}
.pseek-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--red);width:0}
.psel{background:rgba(21,40,56,.9);border:1px solid var(--line);border-radius:8px;color:var(--steel);
  font-family:"Share Tech Mono",monospace;font-size:11px;letter-spacing:.06em;padding:9px 8px;max-width:180px}
.pvolwrap{display:flex;align-items:center;gap:8px;flex:none}
.pvol{width:78px;accent-color:var(--red)}
@media(max-width:700px){.pvolwrap,.psel{display:none}}

/* ---------------- the film pop-up (AES aes.css, REV76) ---------------- */
.vmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(6,12,20,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:28px}
.vmodal.open{display:flex}
.vmodal-in{position:relative;width:min(960px,96vw)}
.vmodal video{display:block;width:100%;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 0 60px rgba(169,210,255,.15),0 30px 80px rgba(0,0,0,.7);background:#000}
.vclose{position:absolute;top:-46px;right:0;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--steel);font-family:"Share Tech Mono",monospace;font-size:12px;letter-spacing:.16em;
  padding:9px 16px;cursor:pointer}
.vclose:hover{color:var(--white);border-color:rgba(201,212,224,.4)}

/* ---------------- the two film buttons in the hero ---------------- */
/* EdgelitCV's own outline button (.btn.ghost, edgelit.css) with a play mark.
   Jace asked for the outline squared off; that waits for his example and
   comes in the next stage, for every button at once. */
.cta.films{gap:12px}
.vbtn{gap:10px}
.vbtn svg{width:12px;height:12px;fill:currentColor;flex:none}