/* ---------------------------------------------------------------------
   MUSIC APP CSS — structural layout for music.html only. Loaded by
   music.html itself (inside its iframe), same pattern as wiggle.css:
   this file doesn't touch the parent shell, and the shell doesn't carry
   any of these rules.

   Same player structure as the CD-player widget originally sent (cover
   box, track-select, seek row, transport buttons) — restyled with plain
   borders instead of the Win98 skin, and with the widget's own fake
   titlebar removed (the real window this loads into already has one).
   No hex colors, no gradients, no @font-face, no hotlinked images.
   --------------------------------------------------------------------- */

:root{
  --player-image: none; /* set your own cover art: --player-image: url('cover.jpg'); */
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;display:flex;align-items:center;justify-content:center;}

/* Same button/focus reset used everywhere else on the site: native button
   chrome + a default focus outline drawn outside the border produces a
   double-outline look. The custom border is the only border; focus is
   shown by thickening it instead. */
button{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:none;
  font:inherit;
  outline:none;
  cursor:pointer;
  border:1px solid;
}
button:focus-visible{border-width:2px;}

input[type="range"]{width:100%;}
select{font:inherit;border:1px solid;padding:4px 6px;width:100%;}

#musicplayer{width:260px;border:1px solid;padding:10px;}

.player-flex{display:flex;gap:8px;}

.player-icon-holder{width:80px;height:80px;flex-shrink:0;border:1px solid;}
.player-icon{
  width:100%;
  height:100%;
  background-image:var(--player-image);
  background-size:cover;
  background-position:center;
}

.player-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}

.now-playing{font-size:11px;text-align:right;}

.seeking{display:flex;align-items:center;gap:6px;}
.seeking .current-time, .seeking .total-duration{font-variant-numeric:tabular-nums;font-size:11px;min-width:32px;}
.seeking input[type="range"]{flex:1;}

/* .win-btn is now only the transport buttons (prev/play/next) — the
   titlebar controls that used to share this class are gone. */
.win-btn{min-width:20px;min-height:18px;padding:0;font-size:11px;line-height:1;}
.player-buttons{display:flex;gap:6px;}
.player-buttons .win-btn{flex:1;min-height:auto;padding:6px;display:flex;align-items:center;justify-content:center;}