/* Velcro wall treatment — original, offline-safe, texture-backed inflated panels.
   Scope this stylesheet to the existing site, without changing pick semantics or APIs. */

/* Delicate creased-vinyl grain: a bundled SVG asset, no external images or requests. */
.lineup-wall{
  isolation:isolate;
  background-image:url("./assets/vinyl-grain.svg"),
    radial-gradient(ellipse at 52% 0%,#383c47 0,#1c2028 39%,#0f1117 75%,#242831 100%);
  background-size:384px 384px,auto;
  background-repeat:repeat,no-repeat;
  background-blend-mode:screen,normal;
  border-color:#555b66;
  box-shadow:inset 0 9px 14px #ffffff30,inset 0 -17px 22px #000a,
    0 22px 39px #0009,0 0 0 5px #090b10;
}
.lineup-wall:before{border-color:#dadde34a}
.lineup-wall:after{z-index:0}
.lineup-wall > :is(.lineup-wall-heading,.lineup-wall-key,.lineup-board-insert,.lineup-wall-controls){
  position:relative;z-index:1;
}

/* Give the top grommets their own safe region instead of overlapping SHARPIE CHECK. */
.lineup-wall-heading{
  display:block;
  padding:60px 12px 4px;
}
.lineup-wall-heading .section-kicker{
  display:inline-block;
  color:#ffe557;
  font-weight:950;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.lineup-wall-heading h3{
  margin:9px 0 8px;
  font-size:clamp(34px,5.5vw,64px);
  line-height:1;
}
.lineup-wall-heading p{
  max-width:760px;
  color:#d2d5df;
  line-height:1.5;
}
.lineup-wall-heading .toggle-group{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin:22px auto 4px;
  width:min(100%,620px);
  padding:5px;
  gap:0;
  border:2px solid #656a73;
  border-radius:18px;
  background-image:url("./assets/vinyl-grain.svg"),linear-gradient(145deg,#30353e,#181a20);
  background-size:384px 384px,auto;
  box-shadow:inset 0 5px 7px #0007,0 7px 13px #0008,0 0 0 3px #0a0c11;
}
.lineup-wall-heading .toggle-group button{
  min-width:0;
  min-height:47px;
  padding:11px 5px;
  border-radius:13px;
  color:#f6f7fb;
  font-size:clamp(12px,1.4vw,15px);
  font-weight:950;
  letter-spacing:.14em;
  background:transparent;
}
.lineup-wall-heading .toggle-group button.active{
  color:#121318;
  background:linear-gradient(165deg,#ffad4d 0,#ff781e 48%,#e95a0f 100%);
  box-shadow:inset 0 3px 4px #fff5,inset 0 -6px 7px #a8411266,0 4px 8px #0008;
}
.lineup-wall-heading .toggle-group button:focus-visible{outline:3px solid #ffe557;outline-offset:0}

/* Maker's marker key: three compact embossed legend labels. */
.lineup-wall-key{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:20px 12px;
}
.lineup-wall-key span{
  min-width:0;
  min-height:52px;
  padding:8px 11px 8px 41px;
  border:1px solid #626b78;
  border-radius:15px!important;
  color:#f6f7fb;
  font-size:clamp(9px,1.12vw,12px);
  line-height:1.32;
  letter-spacing:.025em;
  background-image:url("./assets/vinyl-grain.svg"),
    linear-gradient(150deg,#30333b,#17191f);
  background-size:280px 280px,auto;
  box-shadow:inset 0 4px 6px #ffffff13,inset 0 -5px 8px #0005,0 4px 10px #0007;
}
.lineup-wall-key .key-must:before{
  top:50%;left:11px;
  transform:translateY(-50%) rotate(-13deg);
}
.lineup-wall-key .key-like:before{top:50%;left:10px;transform:translateY(-10%) rotate(-6deg)}
.lineup-wall-key .key-crowd{
  color:#111318;
  background-image:url("./assets/vinyl-grain.svg"),
    linear-gradient(145deg,#fff09f,#ffe557 64%,#dcba32);
  border-color:#d3b22b!important;
  box-shadow:inset 0 3px 4px #ffffff9c,inset 0 -6px 9px #c4a0278c,0 4px 10px #0007;
}

/* The physical board is BLACK vinyl. White and yellow are removable Velcro name tags,
   not a white sheet placed beneath every band. */
.lineup-board-insert{
  background-image:url("./assets/vinyl-grain.svg"),
    radial-gradient(ellipse at 50% 0%,#252a33,#0b0d11 83%);
  background-size:384px 384px,auto;
  background-repeat:repeat,no-repeat;
  border:2px solid #505663;
  border-radius:27px;
  padding:17px;
  box-shadow:inset 0 5px 10px #ffffff15,inset 0 -12px 19px #0009,
    0 7px 15px #0008;
}
.lineup-board-insert:before{border-color:#d8dce038;z-index:0}
.lineup-wall-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  align-items:stretch;
}

/* A dark microfiber hook-and-loop border extends beyond each removable patch. */
.velcro-mount{
  display:flex;
  min-width:0;
  min-height:112px;
  padding:5px;
  position:relative;
  border-radius:21px;
  border:1px solid #656875;
  background:
    repeating-conic-gradient(from 30deg,#676a73 0% 18%,#31333b 19% 40%,#17191e 42% 55%) 0 0/5px 5px,
    #1d2027;
  box-shadow:inset 0 3px 4px #9ba1ab38,inset 0 -3px 6px #000d,
    0 4px 7px #000a;
}
.velcro-mount:after{
  content:"";
  position:absolute;
  inset:2px;
  border:1px dashed #9ea3ab40;
  border-radius:19px;
  pointer-events:none;
}
.velcro-mount > .lineup-choice{
  flex:1 1 auto;
  min-width:0;
  min-height:99px;
  width:100%;
  position:relative;
  z-index:0;
  overflow:visible;
  padding:21px 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #cbd0d8;
  border-radius:16px;
  color:#121419;
  font:950 clamp(13px,1.45vw,19px)/1.14 Inter,system-ui,sans-serif;
  /* Woven textile micro-lines and cushion highlights inside the removable patch */
  background-image:
    repeating-linear-gradient(88deg,#50586709 0 1px,transparent 1px 4px),
    repeating-linear-gradient(2deg,#46505d08 0 1px,transparent 1px 4px),
    radial-gradient(ellipse at 50% 0%,#fff 0%,#f5f6fa 58%,#dfe2e9 100%);
  box-shadow:inset 0 6px 7px #ffffffed,inset 0 -12px 11px #aeb3bf5c,
    inset -4px 0 7px #aab0bd36,0 4px 6px #0008;
  transform:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.velcro-mount > .lineup-choice:before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed #6168766a;
  border-radius:11px;
  pointer-events:none;
}
.velcro-mount > .lineup-choice:hover{
  transform:translateY(-2px) rotate(-.3deg);
  box-shadow:inset 0 6px 7px #fff,inset 0 -12px 11px #b1b7c75e,0 8px 14px #000a;
}
.velcro-mount > .lineup-choice:focus-visible{
  outline:4px solid #ff781e;
  outline-offset:1px;
}
.velcro-mount > .lineup-choice.crowd{
  border-color:#debd39;
  background-image:
    repeating-linear-gradient(88deg,#765b0c09 0 1px,transparent 1px 4px),
    repeating-linear-gradient(2deg,#624b0e0a 0 1px,transparent 1px 4px),
    radial-gradient(ellipse at 50% 0%,#fff3a5 0%,#ffe557 57%,#e2c344 100%);
  box-shadow:inset 0 5px 7px #ffffff99,inset 0 -11px 10px #b8942b78,0 4px 6px #0008;
}
.lineup-artist-name{
  display:inline-block;
  max-width:100%;
  padding:6px 8px;
  text-wrap:balance;
  overflow-wrap:anywhere;
  font-weight:950;
  position:relative;
  z-index:1;
}
.lineup-choice.long-label .lineup-artist-name{font-size:.9em}
.lineup-choice.very-long-label .lineup-artist-name{font-size:.81em;line-height:1.18}
.lineup-choice.must .lineup-artist-name{
  padding:8px 11px;
}
.lineup-choice.must .lineup-artist-name:after{
  inset:0 -2px;
  border-color:#ff4545;
  border-width:3px;
  border-radius:51% 49% 48% 52% / 57% 53% 47% 43%;
  transform:rotate(-3deg);
  box-shadow:none;
  pointer-events:none;
}
.lineup-choice.like .lineup-artist-name{
  box-shadow:inset 0 -4px #ff781e;
}
.lineup-choice .lineup-priority{
  position:relative;z-index:1;
  font-size:10px;
  letter-spacing:.075em;
  font-weight:900;
}
.lineup-choice .lineup-priority:empty{display:none}
.lineup-choice.must .lineup-priority{
  background:#ff4545;
  color:#fff;
  border-radius:3px;
  padding:4px 8px;
  box-shadow:1px 2px 3px #0004;
}
.lineup-choice.like .lineup-priority{color:#9f3b0a}
.velcro-mount:nth-child(5n+2) > .lineup-choice:not(:hover){transform:rotate(.13deg)}
.velcro-mount:nth-child(7n+4) > .lineup-choice:not(:hover){transform:rotate(-.16deg)}

/* The same material cues extend to navigation and the recap preview frame. */
.page main>.wall-tabs,
.page main>.wall-tabs .wall-tab,
.story-preview-shell,
.report-vinyl{
  background-image:url("./assets/vinyl-grain.svg"),
    linear-gradient(145deg,#30333e,#111318);
  background-size:384px 384px,auto;
}
.page main>.wall-tabs .wall-tab{
  background-image:
    repeating-linear-gradient(88deg,#565b660a 0 1px,transparent 1px 5px),
    url("./assets/vinyl-grain.svg"),
    linear-gradient(145deg,#ffffff,#f1f2f7 58%,#d7dae1);
  background-size:auto,384px 384px,auto;
}
.page main>.wall-tabs .wall-tab.is-active{
  background-image:
    repeating-linear-gradient(88deg,#805b0c11 0 1px,transparent 1px 5px),
    url("./assets/vinyl-grain.svg"),
    linear-gradient(145deg,#fff3aa,#ffe557 62%,#e2c141);
  background-size:auto,384px 384px,auto;
}
/* Optional texture remains decorative and preserves high-contrast copy. */
@media(max-width:850px){
  .lineup-wall-key{grid-template-columns:1fr}
  .lineup-wall-key span{
    width:100%;min-height:44px;
    font-size:11px;
  }
  .lineup-wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .lineup-wall{padding:23px 14px 20px}
  .lineup-wall-heading{padding:58px 7px 0}
  .lineup-wall-heading h3{font-size:clamp(31px,9.2vw,44px);line-height:1.02}
  .lineup-wall-heading .toggle-group{margin:17px auto 0}
  .lineup-wall-key{margin:16px 8px;gap:7px}
  .lineup-board-insert{padding:8px;border-radius:19px}
  .lineup-wall-grid{gap:8px}
  .velcro-mount{min-height:102px;padding:4px;border-radius:15px}
  .velcro-mount:after{border-radius:12px}
  .velcro-mount > .lineup-choice{
    min-height:92px;
    padding:12px 5px;
    font-size:clamp(12px,3.3vw,15px);
    border-radius:11px;
  }
  .velcro-mount > .lineup-choice:before{inset:5px;border-radius:7px}
  .lineup-artist-name{padding:5px}
  .lineup-choice.must .lineup-artist-name{padding:7px 9px}
  .lineup-choice.must .lineup-artist-name:after{border-width:2px}
  .lineup-choice .lineup-priority{font-size:9px}
}
@media(max-width:370px){
  .lineup-wall-grid{grid-template-columns:1fr}
  .lineup-wall-key span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .velcro-mount > .lineup-choice{transition:none}
}

/* Shared header favicon: use the same independent yellow vinyl IR badge
   that the browser tab displays. No additional network fonts or images. */
.brand .brand-emblem{
  display:block;
  box-sizing:border-box;
  flex:0 0 53px;
  width:53px;
  height:53px;
  padding:0;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:rotate(-3deg);
  transition:transform .18s ease;
}
.brand:hover .brand-emblem{transform:rotate(0deg) scale(1.045)}
@media(max-width:700px){
  .brand .brand-emblem{flex-basis:42px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .brand .brand-emblem{transition:none}
}