/* =======================================================================
   austin-sheet.css — AUSTIN MUSIC's sheet, map and gift strip (austin.html)

   MOVED FROM css/tonight.css on 2026-10-29, when tonight.html redirected to
   austin.html (the owner: "austin.html plus the PLAY dome's AUSTIN MUSIC
   screen stay"). These are tonight's own rules for the handbill, PLAN MY
   NIGHT's questions and answer, the listen controls, the map and the gift
   strip, kept under their tn__ / lmap__ names because js/austin-night.js,
   js/live-map.js and js/tonight-listen.js draw those names. The only rule
   rewritten is where the sheet sits: a bottom sheet over the app's list on
   a phone, a right-hand panel on a wide screen. Tokens are css/austin.css's.
   ======================================================================= */

/* ---- the gift strip ---- */
/* ---- the strip over the rooms: this week's events, one line each ---- */
.tn__gifts{ display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.tn__gift{
  display: flex; align-items: baseline; gap: 8px; min-width: 0; width: 100%;
  text-align: left; cursor: pointer;
  font-family: var(--pixel); font-size: 15px; line-height: 1.2;
  color: var(--ice-white);
  background: linear-gradient(180deg, rgba(77,219,255, .16), rgba(77,219,255, .06));
  border: 1px solid rgba(77,219,255, .55);
  border-radius: 6px; padding: 5px 8px;
}
.tn__giftday{ flex: 0 0 auto; color: var(--gold); letter-spacing: .06em; }
.tn__giftroom{ flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn__giftwhat{
  flex: 1 1 auto; min-width: 0; color: var(--ice-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ---- the map (js/live-map.js) ---- */
.lmap__scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                   /* the map PANS here; the page never moves */
  background: #151f2a;
}
.lmap__frame{ position: relative; width: 100%; }
.lmap__img{
  display: block;
  width: 100%;
  height: auto;
  /* THE BAKED SVG IS ALREADY THE NIGHT (#101216 ground, pale streets) —
     the frost look keeps it dark and pushes it BLUE. A bare hue-rotate
     turned the already-cool ground olive (rotating blue away, and the
     river went khaki — seen, not guessed): near-greys carry no hue to
     rotate. So FULL sepia first gives every tone one warm hue (a partial sepia left the river's baked blue to rotate into mud), and the rotate
     carries that to ice — the sepia+rotate trick, re-inked in the
     viewing, never in the artefact. */
  filter: sepia(1) hue-rotate(175deg) saturate(1.7) brightness(1.08) contrast(1.04);
}
.lmap__marks{ position: absolute; inset: 0; }

/* the pins — GTA-map blips (the owner's ask), in frost colours: gold for a
   bill tonight (frost.html's own tonight-gold), ice-bright for a room
   that is ON this minute, and the hot pink saved for the one HOT thing —
   a camera live right now. Dim rooms stay small dots on purpose: 121
   full-size blips would bury the lit ones, GTA's own move with inactive
   marks. Glyphs ride ::before so js/live-map.js stays untouched; its "●"
   text for live pins hides under font-size:0. */
.lmap__pin{
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #06111f;
  background: var(--gold);
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(184,236,255, .35), 0 2px 4px rgba(0, 0, 0, .6);
}
.lmap__pin::before{
  content: "\266A";                /* ♪ — the book filed music here */
  font: 700 13px/1 Georgia, "Times New Roman", serif;
  color: #062036;
}
.lmap__pin--on{
  width: 30px; height: 30px;
  background: var(--ice-bright);
  box-shadow: 0 0 0 1px rgba(234,252,255, .5), 0 0 10px rgba(56,230,255, .8), 0 2px 4px rgba(0, 0, 0, .6);
}
.lmap__pin--on::before{
  font-size: 17px;
  color: #062036;
}
.lmap__pin--live{
  width: 32px; height: 32px;
  background: var(--warm);
  animation: tn-pulse 1.6s ease-in-out infinite;
}
.lmap__pin--live::before{
  content: "\25B6";                /* ▶ — watchable right now */
  font-size: 14px;
  color: #ffffff;
  padding-left: 3px;
}
.lmap__pin--dim{
  width: 9px; height: 9px;
  background: var(--frost-4);
  border: 1px solid transparent;
  opacity: .55;
  box-shadow: none;
}
.lmap__pin--dim::before{ content: ""; }
@keyframes tn-pulse{
  0%,100% { box-shadow: 0 0 0 2px rgba(255, 45, 149, .55), 0 2px 4px rgba(0,0,0,.6); }
  50%     { box-shadow: 0 0 0 9px rgba(255, 45, 149, .12), 0 2px 4px rgba(0,0,0,.6); }
}

/* the map's one strip: zoom, caption, the ODbL credit that travels with it */
.lmap__bar{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  /* the fast-travel MAP sticker (hud.css) pins over this strip's left
     corner — the zoom chip starts clear of it */
  padding: 4px 10px 4px 96px;
  background: rgba(5,20,34, .9);
  border-top: 2px solid var(--ice-mid);
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--frost-3);
  white-space: nowrap;
  overflow: hidden;
}
.lmap__zoom{
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .05em;
  color: #062036;
  background: linear-gradient(180deg, var(--ice-white), var(--ice-light));
  border: 2px outset var(--line);
  border-radius: 5px;
  padding: 1px 9px;
  cursor: pointer;
}
.lmap__zoom:active{ border-style: inset; }
.lmap__zoom[aria-pressed="true"]{ background: var(--ice-bright); }
.lmap__cap{ overflow: hidden; text-overflow: ellipsis; }
.lmap__attr{ margin-left: auto; color: var(--frost-4); text-decoration: none; }

/* ===================== the bill — an ice panel ===================== */

/* ---- the sheet ---- */
.tn__bill{
  position: absolute;
  z-index: 40;
  color: var(--ice-white);
  background: linear-gradient(180deg, #0c3247 0%, var(--ice-deep2) 55%, #07253c 100%);
  border: 2px outset var(--line);
  border-radius: 10px;
  box-shadow: inset 0 0 60px rgba(56,230,255, .06), 0 10px 30px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  /* a wide screen: a panel at the right of the app; a phone: the bottom sheet below */
  top: 8px; right: 8px; bottom: 8px;
  width: min(46%, 400px);
}
.tn__bill[hidden]{ display: none; }
@media (max-width: 640px){
  .tn__bill{
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto;
    max-height: 72%;
  }
}
.tn__billhead{
  flex: 0 0 auto;
  padding: 8px 12px 6px;
  border-bottom: 2px solid var(--ice-mid);
  background: rgba(56,230,255, .07);
}
.tn__venue{
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .04em;
  line-height: 1.15;
  color: var(--ice-white);
  text-shadow: 0 0 12px rgba(56,230,255, .35), 0 2px 0 rgba(3, 12, 22, .8);
  padding-right: 26px;
}
.tn__where{
  margin: 2px 0 0;
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--frost-3);
}
.tn__close{
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  font-family: var(--pixel);
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #ff86c2, #c00e63);
  border: 2px outset #ffd7ec;
  border-radius: 50%;
  cursor: pointer;
}
.tn__close:active{ border-style: inset; }

/* the nights — beveled ice chips; the shown night is the lit one */
.tn__nights{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--ice-mid);
  background: rgba(5,20,34, .45);
  overflow-x: auto;
}
.tn__night, .tn__step{
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--ice-light);
  background: rgba(14,74,110, .55);
  border: 2px outset var(--frost-4);
  border-radius: 5px;
  padding: 1px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.tn__night:active, .tn__step:active{ border-style: inset; }
.tn__night.is-on{
  color: #062036;
  background: var(--ice-bright);
  border-color: var(--ice-light);
}
.tn__step:disabled{ opacity: .35; cursor: default; }

/* the bill itself — the acts */
.tn__acts{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;                 /* last-resort guard; a normal bill fits */
  padding: 7px 12px;
}
.tn__actrow{ padding: 6px 0; border-bottom: 1px solid rgba(75,180,216, .25); }
.tn__actrow:last-child{ border-bottom: 0; }
.tn__acthead{ display: flex; align-items: baseline; gap: 9px; }
.tn__time{
  flex: 0 0 auto;
  font-family: var(--pixel);
  font-size: 15px;
  color: var(--gold);
  min-width: 52px;
}
.tn__act{
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--ice-white);
}
/* a band with a page of its own (artist.html) — the listing's own words,
   made a door; the dotted rule is the only change to the name */
/* a band with its own page is a door: the word is lit, never underlined (no underline bars) */
a.tn__act--page{ color: var(--ice-bright); text-decoration: none; }
a.tn__act--page:hover{ color: var(--ice-bright); }
.tn__artists{
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--frost-3);
}
.tn__artists a{ color: var(--ice-bright); text-decoration: none; }
.tn__onnow{
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: .08em;
  color: #062036;
  background: var(--ice-bright);
  border-radius: 4px;
  padding: 0 6px;
  box-shadow: 0 0 8px rgba(56,230,255, .55);
}
.tn__meta, .tn__note{
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--frost-3);
}
.tn__empty{
  padding: 18px 2px;
  color: var(--ice-light);
  opacity: .8;
}

/* the bill's feet — glossy Y2K pills, css/style.css's own button recipe */
.tn__feet{
  flex: 0 0 auto;
  padding: 7px 12px;
  border-top: 2px solid var(--ice-mid);
  background: rgba(5,20,34, .5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tn__go, .tn__watch{
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 14px;
  border: 2px solid var(--ice-white);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(0,40,60,.4), 0 3px 0 #0a2740;
}
.tn__go{
  color: #062036;
  background: linear-gradient(180deg, #9be0ff, #1587c9);
}
.tn__watch{
  color: #fff;
  background: linear-gradient(180deg, #ff86c2, #c00e63);
  border-color: #ffd7ec;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.tn__go:active, .tn__watch:active{ transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 1px 0 #0a2740; }
.tn__src{
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--frost-3);
}
.tn__src a{ color: var(--frost-3); }

/* ===================== LISTEN — js/tonight-listen.js ===================== */
.listen{ margin-top: 5px; }
.listen__btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: #062036;
  background: linear-gradient(180deg, var(--ice-white), #8ed9f5);
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,40,60,.35), 0 2px 0 #0a2740;
}
.listen__btn:active{ transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 #0a2740; }
.listen__btn.is-on{
  color: #fff;
  background: linear-gradient(180deg, #ff86c2, #c00e63);
  border-color: #ffd7ec;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.listen__ico{ font-size: 9px; line-height: 1; }
.listen__out{
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--ice-bright);
}
.listen__not, .listen__how, .listen__off{
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--frost-3);
}
.listen__off{ margin: 0 0 8px; font-family: var(--pixel); font-size: 14px; }
/* the box the ONE iframe is laid over — empty by contract; it reserves the
   embed's compact height or the dock measures a hairline */
.listen__slot{
  margin-top: 7px;
  height: 80px;
  border-radius: 8px;
  background: rgba(3, 12, 22, .55);
  border: 1px solid var(--ice-mid);
}

/* landscape: the bill takes the left 48%, so the selector keeps to the
   free half rather than running under the sheet's edge */

   ROADMAP-LIVE.md §PLAN MY NIGHT, v1. The owner's rule for these screens
   (2026-09-08, memory feedback-ui-mockups-obvious): one big question, big
   tiles, the picked one solid gold with a tick, ONE big gold button that
   names the action, BACK / SKIP small and grey on purpose, and the entry
   point the only gold thing on the list. The sheet is .tn__bill's — the
   handbill's own panel — with these modifiers on it. */
.tn__planrow{ margin: 0 0 8px; }
.tn__planbtn{
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 12px 9px;
  border-radius: 8px;
  color: #002e3a;
  background: linear-gradient(180deg, #9aebff 0%, var(--gold) 55%, #00b8e6 100%);
  border: 2px outset #b8f1ff;
  box-shadow: 0 0 14px rgba(77,219,255, .35);
}
.tn__planbtn:active{ border-style: inset; }
.tn__planbtn b{
  display: block;
  font-family: var(--display); font-weight: 400; font-size: 21px;
  letter-spacing: .05em; line-height: 1;
}
.tn__planbtn small{
  display: block; margin-top: 3px;
  font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: #00485a;
}
/* the strip that stands in for the button once a night exists */
.tn__planstrip{ display: flex; align-items: center; gap: 6px; }
.tn__planopen{
  flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
  font-family: var(--pixel); font-size: 15px; letter-spacing: .05em; line-height: 1.2;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(77,219,255, .18), rgba(77,219,255, .07));
  border: 1px solid rgba(77,219,255, .7);
  border-radius: 6px; padding: 7px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn__planx{
  flex: 0 0 auto; width: 28px; height: 28px;
  font-family: var(--pixel); font-size: 16px; line-height: 1; color: #fff;
  background: linear-gradient(180deg, #ff86c2, #c00e63);
  border: 2px outset #ffd7ec; border-radius: 50%; cursor: pointer;
}

/* ---- the sheet, asking ---- */
.tn__askhead{ padding-right: 34px; }
.tn__askeyebrow{
  margin: 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .08em;
  color: var(--frost-3);
}
.tn__dots{ display: inline-flex; gap: 5px; margin-top: 5px; }
.tn__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ice-mid); }
.tn__dot.is-on{ background: var(--gold); box-shadow: 0 0 6px rgba(77,219,255, .7); }
.tn__ask{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 8px; }
.tn__askq{
  margin: 0 0 3px;
  font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.02;
  letter-spacing: .03em; color: #fff;
  text-shadow: 0 0 12px rgba(56,230,255, .35), 0 2px 0 rgba(3, 12, 22, .8);
}
.tn__askq--small{ font-size: 19px; margin-top: 6px; }
.tn__asksub{ margin: 0 0 10px; font-family: var(--pixel); font-size: 15px; letter-spacing: .03em; color: var(--ice-light); }
.tn__tiles{ display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.tn__tiles--row{ flex-direction: row; flex-wrap: wrap; }
.tn__tile{
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 36px 8px 11px;
  border-radius: 7px;
  color: var(--ice-white);
  background: rgba(56,230,255, .08);
  border: 1px solid var(--line);
}
.tn__tiles--row .tn__tile{ width: auto; flex: 1 1 auto; text-align: center; padding: 8px 26px 8px 10px; }
.tn__tile b{ display: block; font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .04em; line-height: 1.05; }
.tn__tile small{ display: block; margin-top: 2px; font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--ice-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn__tile.is-on{ background: var(--gold); border-color: var(--gold); color: #002e3a; box-shadow: 0 0 10px rgba(77,219,255, .35); }
.tn__tile.is-on small{ color: #00485a; }
.tn__tile.is-on::after{
  content: "\2713"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--pixel); font-size: 22px; line-height: 1;
}
.tn__tile.is-dim{ opacity: .42; cursor: default; }
.tn__askline{ margin: 0 0 8px; font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--frost-3); }
.tn__askfoot{
  flex: 0 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 8px 12px 10px;
  border-top: 2px solid var(--ice-mid);
  background: rgba(56,230,255, .07);
}
.tn__askgo{
  font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .06em; line-height: 1;
  color: #002e3a;
  background: linear-gradient(180deg, #9aebff 0%, var(--gold) 55%, #00b8e6 100%);
  border: 2px outset #b8f1ff; border-radius: 8px;
  padding: 9px 10px; cursor: pointer;
  box-shadow: 0 0 12px rgba(77,219,255, .35);
}
.tn__askgo:active{ border-style: inset; }
.tn__asksmall{
  font-family: var(--pixel); font-size: 14px; letter-spacing: .05em;
  color: var(--frost-3); background: none; border: 0; padding: 4px 2px; cursor: pointer;
  white-space: nowrap;
}

/* ---- the answer ---- */
.tn__plansub{ margin: 2px 0 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .06em; color: var(--gold); }
.tn__stops{ list-style: none; margin: 0; padding: 0; }
.tn__stop{
  display: grid; grid-template-columns: 62px 1fr 26px; gap: 0 8px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid rgba(56,230,255, .15);
}
.tn__stoptime{ grid-column: 1; font-family: var(--pixel); font-size: 16px; letter-spacing: .03em; color: var(--gold); }
.tn__stopname{
  grid-column: 2; text-align: left;
  font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .03em; line-height: 1.1;
  color: var(--ice-white); background: none; border: 0; padding: 0; cursor: pointer;
}
.tn__stop.is-food .tn__stopname{ color: var(--ice-bright); cursor: default; }
.tn__stopx{
  grid-column: 3; grid-row: 1 / span 3; align-self: start; justify-self: end;
  width: 24px; height: 24px;
  font-family: var(--pixel); font-size: 15px; line-height: 1; color: #fff;
  background: linear-gradient(180deg, #ff86c2, #c00e63);
  border: 2px outset #ffd7ec; border-radius: 50%; cursor: pointer;
}
.tn__stopact{ grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--ice-light); }
.tn__stopwhy{ grid-column: 2; font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--frost-3); }
.tn__leg{
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 4px 70px;
  font-family: var(--pixel); font-size: 14px; letter-spacing: .06em; color: var(--ice-light);
}
.tn__leg::before{ content: "\2193"; color: var(--line); }
.tn__uber{
  font-family: var(--pixel); font-size: 13px; letter-spacing: .08em; text-decoration: none;
  color: var(--ice-white); background: rgba(56,230,255, .10);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px;
}
.tn__planempty{ margin: 8px 0 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .02em; color: var(--gold); }
.tn__credit{ margin: 10px 0 0; font-family: var(--pixel); font-size: 12px; letter-spacing: .02em; color: var(--frost-3); }
/* the handbill's own way into the night */
.tn__addplan{
  font-family: var(--pixel); font-size: 15px; letter-spacing: .06em;
  color: #002e3a;
  background: linear-gradient(180deg, #9aebff 0%, var(--gold) 55%, #00b8e6 100%);
  border: 2px outset #b8f1ff; border-radius: 7px; padding: 5px 10px; cursor: pointer;
}
.tn__addplan.is-in{ color: var(--gold); background: rgba(77,219,255, .12); border: 1px solid rgba(77,219,255, .7); }

/* the gift on the handbill's night, in the events book's own words */
.tn__giftline{ flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--gold); }
.tn__planbtn{ width: 100%; }