/* =======================================================================
   stagecard.css — WHO THAT IS UP THERE

   The look of the card that opens when you click the band on the stage. The
   engine is js/stage-card.js; it builds the markup off js/now-playing.js and
   sets one variable, and everything below dresses it. Same split as
   css/gigboard.css, css/archive.css and css/hud.css: the LOOK lives here,
   the venue only supplies its colour.

   ================= IT IS NOT THE MONTH ON THE WALL =================
   css/gigboard.css dresses a cheap printed calendar tacked up by the queue
   for the drinks - flat paper, tack heads, a curl at one edge, about nights
   that have not happened yet. This is the opposite moment: a band is playing
   IN FRONT OF YOU, now, and the card is lit the way the stage is - dark,
   with the venue's own colour burning through it. Sharing one sheet between
   them would have made a live set and a printed month the same object.

   ================= A WASH, NOT A FILL =================
   Inherited from the book, the board and the pool table, and for the same
   reason: the room you are standing in stays visible behind it. You have
   walked up to the front of the stage and are looking at the band - you have
   not left for a page.
   ======================================================================= */

.sc{
  --sc-accent:#f2c11c;          /* the venue's own colour, set by the host */
  --sc-ink:#f4e6dd;
  --sc-dim:rgba(244,230,221,.62);
  --sc-faint:rgba(244,230,221,.38);
  --sc-panel:rgba(14,10,14,.92);
  --sc-rule:rgba(244,230,221,.16);

  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  /* THE HOTTEST POINT IS THE STAGE, not the middle of the screen: the wash
     is brightest where the band is and falls away into the room, so the card
     reads as lit BY the stage rather than pasted over it. */
  background:radial-gradient(ellipse at 50% 38%,
              rgba(10,6,10,.48) 0%, rgba(4,3,6,.90) 76%);
  font-family:"Courier New", Courier, monospace;
  color:var(--sc-ink);
  opacity:0; transition:opacity .22s ease;
}
.sc.is-in{ opacity:1; }

.sc__sheet{
  position:relative;
  width:min(560px, 100%);
  max-height:min(88vh, 780px);
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:26px 26px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%),
    var(--sc-panel);
  border:1px solid var(--sc-rule);
  /* the glow the accent throws, so the card belongs to this room's light */
  box-shadow:0 0 0 1px rgba(0,0,0,.6),
             0 24px 70px rgba(0,0,0,.72),
             0 0 90px -30px var(--sc-accent);
  transform:translateY(10px) scale(.985);
  transition:transform .24s cubic-bezier(.2,.9,.3,1);
}
.sc.is-in .sc__sheet{ transform:none; }

.sc__x{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; padding:0;
  background:transparent; border:1px solid var(--sc-rule);
  color:var(--sc-dim); font:inherit; font-size:15px; line-height:1;
  cursor:pointer;
}
.sc__x:hover, .sc__x:focus-visible{ color:var(--sc-ink); border-color:var(--sc-accent); }

.sc__head{ margin:0 44px 16px 0; }
.sc__venue{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sc-faint);
}

/* ================= WHO IS ON ================= */
.sc__label{
  margin:0 0 6px; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--sc-accent);
}
/* THE LIVE DOT. The one moving thing on the card, because the claim it is
   making is the only one on any sheet in this stack that is about RIGHT NOW.
   Off for anyone who has asked their machine to stop animating things. */
.sc__label::before{
  content:""; display:inline-block; width:7px; height:7px; margin-right:8px;
  border-radius:50%; background:var(--sc-accent); vertical-align:middle;
  animation:sc-pulse 2.4s ease-in-out infinite;
}
@keyframes sc-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){
  .sc, .sc__sheet{ transition:none; }
  .sc__label::before{ animation:none; }
}

.sc__act{
  margin:0 0 8px;
  font-family:Impact, "Arial Narrow", Haettenschweiler, sans-serif;
  font-size:clamp(28px, 8vw, 44px); line-height:1.02;
  letter-spacing:.01em;
  /* THE BOOK STORES SOME ACT NAMES LOWERCASE because Austin Independent
     Music renders everything lowercase and the real capitalisation is
     unknown. They are cased UP HERE, in CSS, and never in the data - the
     rule at the top of js/gig-answer.js. */
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 26px rgba(255,255,255,.14);
}
.sc__act--quiet{
  font-size:clamp(20px, 5vw, 28px);
  color:var(--sc-dim); text-shadow:none;
}
.sc__time{
  margin:0 0 10px; font-size:14px; letter-spacing:.08em;
  color:var(--sc-accent);
}
.sc__meta{ margin:0 0 12px; font-size:12px; color:var(--sc-dim); }

/* The sentence a one-string do512 bill requires, and the three different
   kinds of empty stage. Indented behind a rule so it reads as the card
   qualifying itself rather than as more billing. */
.sc__hedge{
  margin:0 0 14px; padding-left:12px;
  border-left:2px solid var(--sc-rule);
  font-size:12px; line-height:1.65; color:var(--sc-dim);
}

/* ================= THE PLAYER ================= */
.sc__sound{
  margin:16px 0 14px; padding:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--sc-rule);
}
.sc__play{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 14px; margin:0 0 12px;
  background:var(--sc-accent); border:0; cursor:pointer;
  color:#12080a; font:inherit; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
.sc__play:hover{ filter:brightness(1.1); }
.sc__play.is-on{
  background:transparent; color:var(--sc-accent);
  box-shadow:inset 0 0 0 1px var(--sc-accent);
}
.sc__playicon{ font-size:11px; }

/* THE SLOT IS AN EMPTY BOX ON PURPOSE. js/stage-sound.js lays its one
   iframe over this rect from a fixed dock - the iframe is never moved into
   the DOM here, because re-parenting an iframe reloads it and the music
   would restart every time this card opened. Anything drawn inside would sit
   under the player. 152px is Spotify's own compact embed height. */
.sc__slot{ height:152px; }

.sc__sound--none{ background:none; border:0; padding:0; }
.sc__nolink{ margin:0 0 8px; font-size:12px; color:var(--sc-dim); }
.sc__search{
  display:inline-block; font-size:12px; letter-spacing:.1em;
  color:var(--sc-accent); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px;
}
.sc__search:hover{ border-bottom-color:var(--sc-accent); }
.sc__fineprint{
  margin:10px 0 0; font-size:10.5px; line-height:1.6; color:var(--sc-faint);
}

/* THE ARTIST'S OWN COVER, on a card that has no embed to draw one. The box is
   held at its full size by width/height on the element itself, so the card
   does not jump when the picture lands a moment after the text - the same
   reason .sc__slot is a fixed 152px. object-fit keeps a non-square cover from
   stretching; Spotify's are square but nothing here relies on that. */
.sc__sleeve{
  display:block; width:72px; height:72px; margin:0 0 9px;
  border-radius:3px; object-fit:cover; background:var(--sc-rule);
}

/* HOW A LINK THAT THE BOARD DID NOT PUBLISH WAS COME BY. It sits directly
   under the player, above the embed's own fine print, and it is a size up
   from that on purpose: this is the sentence that keeps a found link from
   reading as a booked one, and it is not a disclaimer to be skimmed past. */
.sc__found{
  margin:9px 0 0; font-size:11px; line-height:1.6; color:var(--sc-dim);
  padding-left:9px; border-left:1px solid var(--sc-rule);
}

/* ================= THINGS YOU DO FOR THE ACT =================
   FOLLOW and SAVE THIS BILL. Deliberately quieter than .sc__play: that button
   is what the card is for, and these two sit beside it without competing with
   it. Both are outlined rather than filled for the same reason. */
.sc__follow{
  display:inline-block; margin:9px 0 0; padding:5px 10px;
  font:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sc-accent); background:none; cursor:pointer;
  border:1px solid var(--sc-rule); border-radius:3px;
}
.sc__follow:hover{ border-color:var(--sc-accent); }
/* SAID, NOT PRESSED. Once it is done the control stops being a button and
   becomes a statement, so it loses the border and the pointer with it. */
.sc__follow.is-on{
  color:var(--sc-dim); border-color:transparent; cursor:default; padding-left:0;
}
.sc__follow.is-bad{ color:var(--sc-dim); border-color:transparent; padding-left:0; }
/* the per-row one on a multi-act bill, where six of them stacked would drown
   the names they belong to */
.sc__follow--row{
  margin:0 0 0 8px; padding:2px 7px; font-size:9.5px; letter-spacing:.08em;
  vertical-align:middle;
}

.sc__save{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--sc-rule); }
.sc__savebill{
  display:block; width:100%; padding:10px 12px;
  font:inherit; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sc-accent); background:none; cursor:pointer;
  border:1px solid var(--sc-rule); border-radius:3px;
}
.sc__savebill:hover{ border-color:var(--sc-accent); }
.sc__savebill[disabled]{ opacity:.55; cursor:default; }
.sc__saveout{ margin:8px 0 0; font-size:11px; line-height:1.6; color:var(--sc-dim); }
.sc__saveout a{ color:var(--sc-accent); }
/* the reconnect offer, inline in whichever line is explaining why a press did
   not land - a link in prose, not a second big button competing with the one
   just pressed */
.sc__reconnect{
  font:inherit; font-size:inherit; color:var(--sc-accent);
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.2);
  padding:0; cursor:pointer;
}
.sc__reconnect:hover{ border-bottom-color:var(--sc-accent); }

/* ================= THE REST OF THE NIGHT ================= */
.sc__rest{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--sc-rule); }
.sc__rest h3{
  margin:0 0 8px; font-size:10.5px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--sc-faint);
}
.sc__rest ul{ margin:0; padding:0; list-style:none; }
.sc__rest li{
  display:flex; align-items:baseline; gap:10px;
  padding:5px 0; font-size:13px;
}
.sc__t{ min-width:64px; color:var(--sc-accent); font-size:12px; }
.sc__who{ text-transform:uppercase; }
.sc__out{ color:var(--sc-accent); text-decoration:none; font-size:11px; }
/* the way OUT to a name nothing was found for, held back from the accent so a
   row that can be played and a row that can only be searched do not look like
   the same offer */
.sc__out--look{ color:var(--sc-faint); }

/* ================= THE NAMES ON A ONE-STRING BILL =================
   A LISTENING LIST, NOT A RUNNING ORDER - js/stage-card.js's billHTML(). The
   name takes the free space and the control sits at the end of the row, so a
   bill of three reads down its names rather than down its buttons. */
.sc__bill li{ flex-wrap:wrap; }
.sc__bill .sc__who{ flex:1 1 auto; }
.sc__billplay{
  flex:0 0 auto; width:26px; height:26px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1; cursor:pointer;
  color:var(--sc-accent); background:none;
  border:1px solid var(--sc-rule); border-radius:50%;
}
.sc__billplay:hover{ border-color:var(--sc-accent); }
.sc__billplay.is-on{ color:#0b0b0b; background:var(--sc-accent); border-color:var(--sc-accent); }
/* the evidence for a found link, on its own line under the name it belongs
   to - the row version of .sc__found, and never dropped for the same reason */
.sc__foundtip{
  flex:1 0 100%; font-size:10.5px; line-height:1.55;
  color:var(--sc-faint); text-transform:none;
}
/* the one place a borrowed record is SHOWN - directly under the name it
   belongs to. The row is a plain block so the fixed dock gets the full width
   to measure itself against.

   WRITTEN AS `li.sc__billnow` FOR THE SPECIFICITY AND NOT FOR THE READING.
   `.sc__rest li` above sets display:flex and scores 0,1,1; a bare
   `.sc__billnow` scores 0,1,0 and loses, which leaves the slot a flex item
   with no basis - measured at zero pixels wide, so the dock laid the iframe
   out at width 0 and the record played into a gap where a player should be. */
li.sc__billnow{ display:block; padding:0 0 4px; }

.sc__when{
  margin:16px 0 0; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sc-faint);
}
.sc__links{ margin:12px 0 0; font-size:11.5px; }
.sc__links a{ color:var(--sc-accent); text-decoration:none; }
.sc__links a:hover{ text-decoration:underline; }

/* Where it came from and the day it was read, on every sheet in this stack.
   Smallest thing on the card and never absent. */
.sc__src{
  margin:10px 0 0; padding-top:10px; border-top:1px solid var(--sc-rule);
  font-size:10.5px; line-height:1.6; color:var(--sc-faint);
}
.sc__none{ margin:0; font-size:13px; color:var(--sc-dim); }

/* A PHONE GETS THE SAME CARD, not a cut-down one - it is one act and one
   bill, which fits. Only the padding and the slot give way. */
@media (max-width:430px){
  .sc__sheet{ padding:20px 16px 18px; }
  .sc__slot{ height:80px; }        /* Spotify's own short-embed height */
}