/* =========================================================
   SKIN · STREAM — 2012, the streaming desktop app
   Brushed dark chrome, a sidebar, rows of songs with a popularity bar,
   the player pinned along the bottom. The green is ours (#8cc63f), not
   anybody's brand colour — see the note in js/skin-stream.js.

   Dark mode is the all-dark app the era ended on; light mode is the
   grey-chrome, pale-page version it started as. Everything is scoped
   to body[data-skin="stream"] or #stream.
   ========================================================= */

/* ---------- an app window over the desk (since 2026-10-11) ----------
   It lives inside .desktop just under the window layer (skin-stream.js),
   so the desk, the menu bar and the dock stay where they are and a dialog
   opened from it still lands on top. The scrim dims the desk and closes
   the app when clicked. */
.st-scrim{position:absolute;inset:0;z-index:90;background:rgba(2,4,16,.42);pointer-events:auto;
  animation:stFade .2s ease both}
body.light .st-scrim{background:rgba(10,30,70,.20)}
body.stream-open > .hint{position:fixed;bottom:110px;z-index:900}
/* the Kid and the sign-up card would sit on the app's player bar */
body.stream-open .kid-float,body.stream-open .signup{display:none!important}
/* on a phone the era switch hangs under the menu bar, over the app's title */
body.stream-open .menubar .mb-era{visibility:hidden}
@keyframes stFade{from{opacity:0}}
@keyframes stPop{from{opacity:0;transform:translateY(10px) scale(.985)}}

#stream{
  --st-green:#8cc63f;
  --st-green-d:#6fa52a;
  --st-side:#1b1c1e;
  --st-side-ink:#b4b7bd;
  --st-side-on:#fff;
  --st-top:linear-gradient(180deg,#3a3c40,#26282b);
  --st-main:#181a1c;
  --st-row:#1f2124;
  --st-row-alt:#1b1d20;
  --st-ink:#e8e9eb;
  --st-dim:#8c9097;
  --st-line:#2d3034;
  --st-bar-bg:linear-gradient(180deg,#34363a,#1f2023);
  --st-bar:74px;
  position:absolute;z-index:95;pointer-events:auto;display:grid;
  /* clear of the icon column on the right (and the same on the left, so
     it sits centred): its edge cut through the icons' names */
  top:calc(var(--menubar-h) + 18px);bottom:100px;left:136px;right:136px;
  border-radius:10px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.55);
  animation:stPop .24s cubic-bezier(.22,1,.36,1) both;
  grid-template-columns:220px 1fr;grid-template-rows:28px 48px 1fr var(--st-bar);
  grid-template-areas:"title title" "side top" "side main" "bar bar";
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;color:var(--st-ink);
  background:var(--st-main);
}
body.light #stream{
  --st-side:#dcdddf;
  --st-side-ink:#45484e;
  --st-side-on:#111;
  --st-top:linear-gradient(180deg,#f2f2f3,#d4d5d8);
  --st-main:#f4f4f5;
  --st-row:#fff;
  --st-row-alt:#f6f7f8;
  --st-ink:#1d1f22;
  --st-dim:#6b6f76;
  --st-line:#dfe0e3;
  --st-bar-bg:linear-gradient(180deg,#e9e9eb,#c9cacd);
}
#stream button{font:inherit;color:inherit}

@media (max-width:1100px){ #stream{left:20px;right:20px} }

/* ---------- the title bar: the window's one way out ---------- */
.st-title{grid-area:title;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#3d3f43,#2a2c2f);border-bottom:1px solid rgba(0,0,0,.6);color:#c9ccd1;
  font-size:12px;letter-spacing:.04em;user-select:none}
body.light .st-title{background:linear-gradient(180deg,#ececee,#d2d3d6);color:#45484e;border-bottom-color:rgba(0,0,0,.25)}
.st-close{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#ff7a6f,#e0443a);border:1px solid rgba(0,0,0,.35);
  display:grid;place-items:center;padding:0;cursor:pointer}
.st-close span{font-size:12px;line-height:1;color:rgba(80,0,0,.75);opacity:0;transition:opacity .15s}
.st-close:hover span,.st-close:focus-visible span{opacity:1}
.st-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* a bigger target than the 14px dot it looks like */
.st-close::before{content:'';position:absolute;inset:-8px}

/* ---------- sidebar ---------- */
.st-side{grid-area:side;background:var(--st-side);color:var(--st-side-ink);display:flex;flex-direction:column;
  padding:14px 0 0;border-right:1px solid rgba(0,0,0,.35);min-height:0;overflow:auto}
.st-brand{margin:0 16px 16px;font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--st-side-on)}
.st-brand span{color:var(--st-green)}
.st-head{margin:18px 16px 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.st-nav,.st-lists{display:flex;flex-direction:column}
.st-nav button,.st-lists button{display:flex;align-items:center;gap:10px;padding:6px 16px;text-align:left;
  border-left:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-nav button:hover,.st-lists button:hover{color:var(--st-side-on)}
.st-nav button.on{color:var(--st-side-on);border-left-color:var(--st-green);
  background:linear-gradient(90deg,rgba(140,198,63,.16),transparent)}
.st-nav i{font-style:normal;width:16px;text-align:center;opacity:.8}
/* the cover of what is playing, bottom left, as the app kept it */
.st-now{margin-top:auto;padding:0;display:block;border-top:1px solid rgba(0,0,0,.3)}
.st-now img{width:100%;aspect-ratio:1;object-fit:cover}

/* ---------- top bar ---------- */
.st-top{grid-area:top;position:relative;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--st-top);border-bottom:1px solid rgba(0,0,0,.45);color:var(--st-ink)}
.st-arrows{display:flex}
.st-arrows button{width:28px;height:24px;font-size:20px;line-height:1;border:1px solid rgba(0,0,0,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02));color:var(--st-ink)}
.st-arrows button:first-child{border-radius:4px 0 0 4px}
.st-arrows button:last-child{border-radius:0 4px 4px 0;border-left:0}
.st-arrows button:disabled{opacity:.35;cursor:default}
.st-search{position:relative;display:flex;align-items:center;gap:6px;height:26px;width:min(260px,22vw);padding:0 10px;
  border-radius:13px;background:#fff;color:#555;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.st-search input{border:0;outline:0;background:none;width:100%;font:13px 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#111}
.st-results{position:absolute;left:0;top:30px;min-width:100%;z-index:5;display:flex;flex-direction:column;
  background:#fff;color:#111;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden}
.st-results button{display:flex;justify-content:space-between;gap:14px;padding:8px 12px;text-align:left;color:#111!important}
.st-results button:hover{background:var(--st-green);color:#fff!important}
.st-results i{font-style:normal;opacity:.6;font-size:11px}
.st-none{padding:8px 12px;color:#666}
/* the era switch: one segmented control, the way that app grouped its
   buttons, and the current era wears the green. In the flow, centred in
   the gap between the search box and the chips: at the bar's true centre
   it ran into the search box on a laptop. */
#stream .st-era{margin:0 auto;
  padding:0;gap:0;border-radius:5px;border:1px solid rgba(0,0,0,.45);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02))}
#stream .st-era button{border-radius:0;padding:4px 10px;opacity:.8;border-left:1px solid rgba(0,0,0,.35)}
#stream .st-era button:first-child{border-left:0}
#stream .st-era button:hover{background:rgba(255,255,255,.08)}
#stream .st-era button[aria-current="true"]{background:var(--st-green);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.st-top-r{margin-left:auto;display:flex;gap:6px}
#stream .st-era ~ .st-top-r{margin-left:0}   /* the switch's own auto margins do the spacing */
.st-chip{min-width:30px;height:24px;padding:0 7px;border-radius:4px;border:1px solid rgba(0,0,0,.4);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));font-size:11px;font-weight:700;display:grid;place-items:center}
.st-chip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.st-chip .ic-sun circle{fill:currentColor;stroke:none}
.st-chip .ic-moon{fill:currentColor;stroke:none;display:none}
body.light .st-chip .ic-sun{display:none}
body.light .st-chip .ic-moon{display:block}


/* ---------- the page ---------- */
.st-main{grid-area:main;overflow:auto;min-height:0;background:var(--st-main)}
.st-hero{display:flex;align-items:flex-end;gap:22px;padding:26px 28px 22px;
  background:linear-gradient(180deg,rgba(140,198,63,.20),transparent);border-bottom:1px solid var(--st-line)}
.st-hero img{width:170px;height:170px;object-fit:cover;box-shadow:0 10px 28px rgba(0,0,0,.5)}
.st-hero h1{margin:2px 0 6px;font:700 clamp(26px,4vw,44px)/1.05 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em}
.st-type{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--st-dim)}
.st-by{margin:0 0 14px;color:var(--st-dim)}
.st-a{text-decoration:underline;color:var(--st-ink)!important}
.st-actions{display:flex;gap:8px}
.st-play{padding:7px 26px;border-radius:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;
  color:#fff!important;background:linear-gradient(180deg,#9fd752,var(--st-green-d));border:1px solid #4f7d18;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.35)}
.st-play:hover{filter:brightness(1.07)}
.st-ghost{padding:7px 18px;border-radius:16px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--st-dim);color:var(--st-ink)}
.st-ghost:hover{border-color:var(--st-green);color:var(--st-green)!important}
.st-hero-artist{min-height:260px;background-size:cover;background-position:50% 28%;position:relative;color:#fff}
.st-hero-artist::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.75))}
.st-hero-artist > div{position:relative}
.st-hero-artist .st-type,.st-hero-artist .st-by{color:rgba(255,255,255,.8)}
.st-hero-artist .st-ghost{color:#fff!important;border-color:rgba(255,255,255,.7)}
.st-hero-plain{background:none;padding-bottom:14px;flex-direction:column;align-items:flex-start;gap:0}

/* the views, dressed for the app */
.st-page{color:var(--st-ink)}
#stream .pad{padding:16px 28px}
#stream .eyebrow{color:var(--st-dim)}
#stream .muted{color:var(--st-dim)}
#stream .btn{border-radius:16px;background:linear-gradient(180deg,#9fd752,var(--st-green-d));border-color:#4f7d18;color:#fff}

/* the album: rows, a header strip, and the popularity bar of the time */
.st-p-album .album-hero{display:none}
.st-p-album .tracks{padding:0}
/* the column name comes from I18N through --st-col (paint() in skin-stream.js):
   a word written here stayed English in Spanish */
.st-p-album .tracks::before{content:'#\2003\2003\2003 ' var(--st-col,'Song');display:block;padding:6px 28px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--st-dim);border-bottom:1px solid var(--st-line)}
.st-p-album li:nth-child(odd) .trk{background:var(--st-row)}
.st-p-album li:nth-child(even) .trk{background:var(--st-row-alt)}
.st-p-album .trk{padding:6px 28px;gap:14px;border:0!important}
.st-p-album .trk:hover{background:rgba(140,198,63,.14)!important}
.st-p-album .trk.is-playing{background:rgba(140,198,63,.22)!important}
.st-p-album .trk.is-playing .trk-t{color:var(--st-green)}
.st-p-album .trk-art{width:28px;height:28px;border-radius:0}
.st-p-album .trk-t{font-size:13px;font-weight:400}
.st-p-album .trk-s,.st-p-album .trk-n,.st-p-album .trk-time{color:var(--st-dim)}
.st-p-album .trk-go{background:none;width:24px;height:24px}
.st-p-album .trk:hover .trk-go{background:var(--st-green);color:#fff}
/* popularity: ten notches, full for the one that is out, empty for the rest */
.st-p-album .trk-r::before{content:'';width:44px;height:8px;margin-right:6px;
  background:repeating-linear-gradient(90deg,var(--st-dim) 0 2px,transparent 2px 4.4px);opacity:.35}
.st-p-album .trk:not(.locked) .trk-r::before{background:repeating-linear-gradient(90deg,var(--st-green) 0 2px,transparent 2px 4.4px);opacity:1}

#stream .about-top{padding:18px 28px 0}
#stream .about-top > img,#stream .about-head .hd{display:none}
#stream .about-head{justify-content:flex-start}
#stream .about-p{color:var(--st-ink);max-width:68ch}
#stream .facts{background:var(--st-line);border-color:var(--st-line)}
#stream .fact{background:var(--st-main)}
#stream .fact b{color:var(--st-dim)}
#stream .soc{color:var(--st-dim);--ac:var(--st-green)}

.st-p-gallery .gal{columns:4;column-gap:10px;padding:18px 28px}
.st-p-gallery .gal figure{border-radius:3px}
.st-p-gallery .gal-tabs{margin:18px 28px 0;background:var(--st-line)}
.st-p-gallery .gal-tab{color:var(--st-dim)}
.st-p-gallery .gal-tab[aria-selected="true"]{background:var(--st-ink);color:var(--st-main)}
.st-p-gallery .bts{padding:18px 28px}
.st-p-gallery .bts-empty,.st-p-gallery .bts-empty b{color:var(--st-dim)}
#stream .sku{background:var(--st-row);border-color:var(--st-line);color:var(--st-ink)}
#stream .sku p,#stream .store-note{color:var(--st-dim)}
#stream .store-grid{padding:18px 28px}
#stream .store-note{padding:0 28px 24px}
#stream .tr-marcas,#stream .tr-bloque{padding-left:28px;padding-right:28px}
#stream .tr-marca{background:#fff;border-color:var(--st-line)}
#stream .tr-hecho,#stream .tr-fila{border-color:var(--st-line)}
#stream .tr-d{color:var(--st-dim)}
#stream .tr-a{color:var(--st-green)}
#stream .gb-form{background:var(--st-row);border-color:var(--st-line);padding:16px 28px}
#stream .gb-form input,#stream .gb-form textarea{background:#fff;color:#111;border-radius:4px}
#stream .gb-item{padding:12px 28px;border-color:var(--st-line)}
#stream .gb-msg::before{color:var(--st-green)}
#stream .gb-meta,#stream .gb-note,#stream .gb-count{color:var(--st-dim)}
.st-p-ficha{padding:0 12px 12px}
.st-p-ficha .scene-wrap{height:auto}

/* ---------- the player, laid flat along the bottom ---------- */
.st-bar{grid-area:bar;background:var(--st-bar-bg);border-top:1px solid rgba(0,0,0,.5);color:var(--st-ink);min-width:0}
.st-bar .mount-body{height:100%}
.st-bar .player{display:grid;height:100%;align-items:center;column-gap:16px;padding:0 16px;background:none;
  grid-template-columns:auto minmax(120px,220px) 1fr minmax(0,160px);grid-template-areas:"art meta ctrl viz"}
.st-bar .pl-art{grid-area:art;padding:0;min-height:0}
.st-bar .pl-art img{width:52px;filter:none}
.st-bar .pl-meta{grid-area:meta;text-align:left;padding:0;color:var(--st-ink);min-width:0}
.st-bar .pl-t{--hand-acc:none;font:700 13px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar .pl-a{font-size:11px;letter-spacing:0;text-transform:none;color:var(--st-dim)}
.st-bar .pl-ctrl{grid-area:ctrl;padding:0;color:var(--st-ink);display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"btns bar" "btns times";column-gap:18px;align-items:center}
.st-bar .pl-btns{grid-area:btns;margin:0;gap:8px}
.st-bar .pl-btns button{width:30px;height:30px;color:var(--st-ink)}
.st-bar .pl-play{width:40px!important;height:40px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)!important;
  background:linear-gradient(180deg,#9fd752,var(--st-green-d))!important;border:1px solid #4f7d18}
.st-bar .pl-play svg{width:16px;height:16px}
.st-bar .pl-bar{grid-area:bar;height:16px}
/* the bottom bar has no row for it; 2012 changes songs from its pages */
.st-bar .pl-skip{display:none}
.st-bar .pl-bar-t{height:5px;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.st-bar .pl-bar-f{height:5px;background:var(--st-green)}
.st-bar .pl-bar-h{width:11px;height:11px}
.st-bar .pl-times{grid-area:times;color:var(--st-dim);margin:0}
.st-bar .pl-note{display:none}
.st-bar .pl-viz{grid-area:viz;height:30px;padding:0;gap:2px}
.st-bar .pl-viz i{background:var(--st-green);border-radius:0}
/* a locked song in the bar: its line and the way back to the album */
.st-bar .pl-ctrl[style]{display:flex!important;align-items:center;gap:14px;text-align:left!important}
.st-bar .pl-ctrl[style] p{margin:0!important;font-size:12px!important;color:var(--st-dim)!important}
.st-bar .pl-ctrl[style] .btn{padding:5px 14px;color:var(--st-ink)!important}

/* ---------- a phone ---------- */
@media (max-width:840px),(max-height:500px) and (hover:none){
  #stream{--st-bar:66px;grid-template-columns:1fr;grid-template-rows:38px auto auto 1fr var(--st-bar);
    grid-template-areas:"title" "top" "side" "main" "bar";
    top:calc(var(--menubar-h) + env(safe-area-inset-top));bottom:var(--dock-total);left:0;right:0;border-radius:12px 12px 0 0}
  .st-close{width:26px;height:26px;left:8px}
  .st-close span{opacity:1;font-size:17px}
  .st-side{flex-direction:row;padding:0;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(0,0,0,.35)}
  .st-brand,.st-head,.st-lists,.st-now{display:none}
  .st-nav{flex-direction:row}
  .st-nav button{border-left:0;border-bottom:3px solid transparent;padding:10px 12px}
  .st-nav button.on{border-bottom-color:var(--st-green);background:none}
  .st-nav i{display:none}
  .st-top{flex-wrap:wrap;padding:8px 10px;gap:8px}
  .st-arrows{display:none}
  .st-search{flex:1 1 100%;width:auto;order:3}
  .st-hero{padding:18px 16px;gap:14px}
  .st-hero img{width:96px;height:96px}
  .st-p-album .trk,#stream .pad,#stream .gb-item,#stream .gb-form{padding-left:16px;padding-right:16px}
  .st-p-album .trk-r::before{display:none}
  .st-p-gallery .gal{columns:2;padding:12px 16px}
  .st-bar .player{grid-template-columns:auto 1fr auto;grid-template-areas:"art meta ctrl";column-gap:10px;padding:0 10px calc(env(safe-area-inset-bottom))}
  .st-bar .pl-viz,.st-bar .pl-bar,.st-bar .pl-times,.st-bar .pl-btns button:not(.pl-play){display:none}
  .st-bar .pl-ctrl{display:block}
  .st-bar .pl-art img{width:44px}
  .st-p-ficha .scene-stage{overflow:auto}
}
/* a phone on its side: ~330 px under the bar, so the search shares the
   top row instead of taking one of its own */
@media (max-height:500px) and (hover:none) and (orientation:landscape) and (min-width:560px){
  #stream{--st-bar:58px}
  .st-top{flex-wrap:nowrap;padding:6px 10px}
  .st-search{flex:1 1 auto;order:-1}
  .st-hero{padding:12px 16px}
}

/* the album row's download pill */
#stream .trk-dl{color:var(--st-dim);border-color:var(--st-line)}
#stream .trk-dl:hover,#stream .trk-dl:focus-visible{background:var(--st-ink);border-color:var(--st-ink);color:var(--st-main)}