/* Phase 4A · The wall is the interaction, not a conventional dashboard.
   Original CSS-only patch mechanics; no external assets or dependencies. */

/* An inflated patch rises, catches at its corner, then returns to the Velcro. */
.velcro-mount{
  perspective:850px;
  isolation:isolate;
}
.velcro-mount > .lineup-choice{
  transform-origin:18% 86%;
  backface-visibility:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  touch-action:pan-y;
  transition:
    transform 165ms cubic-bezier(.22,.85,.35,1.15),
    box-shadow 165ms ease,filter 165ms ease;
}
@media(hover:hover) and (pointer:fine){
  .velcro-mount > .lineup-choice:hover{
    transform:translateY(-4px) rotate(-.35deg);
    filter:brightness(1.035);
    box-shadow:inset 0 6px 7px #fff,inset 0 -9px 11px #b1b7c75e,
      0 11px 17px #000c;
  }
}
/* Hover-independent tactile feedback for iPhone and keyboard users. */
.velcro-mount.is-pressed > .lineup-choice,
.velcro-mount > .lineup-choice:active{
  transform:translate3d(-1px,-6px,0) rotate(-1.1deg) scale(1.006)!important;
  box-shadow:inset 0 5px 5px #ffffffb6,inset 0 -8px 11px #aab1bd7d,
    5px 14px 21px #000c;
}
.velcro-mount.is-peeling > .lineup-choice,
.velcro-mount.is-selected > .lineup-choice{
  transform:translate3d(0,-8px,0) rotate(-.75deg) scale(1.008)!important;
  box-shadow:inset 0 6px 7px #fff,inset 0 -11px 11px #aeb4bc7a,
    7px 16px 22px #000b;
}
.velcro-mount.is-selected{
  z-index:2;
  border-color:#ff781e;
  box-shadow:0 0 0 2px #ff781e80,0 7px 16px #000b;
}
.velcro-mount > .lineup-choice::after{
  content:"";
  position:absolute;
  z-index:2;
  right:-1px;
  top:-1px;
  width:35px;height:35px;
  border-radius:0 14px 0 19px;
  background:linear-gradient(227deg,#ffffffee 0%,#ffffffb9 32%,#a6aebb 52%,#30353f 54%,#13161a 100%);
  box-shadow:-3px 4px 7px #0006;
  clip-path:polygon(12% 0,100% 0,100% 100%);
  transform:scale(.6);
  transform-origin:top right;
  opacity:0;
  pointer-events:none;
  transition:opacity 125ms,transform 165ms ease-out;
}
.velcro-mount > .lineup-choice.crowd::after{
  background:linear-gradient(227deg,#fff4a4 0%,#ffe557 33%,#ad841d 52%,#35312b 54%,#13161a 100%);
}
.velcro-mount:is(.is-peeling,.is-selected) > .lineup-choice::after{
  opacity:1;transform:scale(1);
}
.lineup-wall-grid.has-selected-patch > .velcro-mount:not(.is-selected){
  opacity:.75;
  transition:opacity 145ms;
}
.velcro-mount > .lineup-choice:focus-visible{
  outline:4px solid #ff4545;
  outline-offset:3px;
}
.lineup-wall-grid:focus-within .velcro-mount:focus-within{z-index:3}

/* The detail report is attached to the wall: right-side vinyl drawer on desktop,
   bottom sheet on mobile. Native <dialog> handles Escape and focus trapping. */
dialog.band-dialog.wall-detail-sheet{
  position:fixed;
  inset:0 0 0 auto;
  margin:0;
  width:min(520px,100vw);
  max-width:100vw;
  height:100dvh;
  max-height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  box-sizing:border-box;
  border:2px solid #646b76;
  border-right:0;
  border-radius:34px 0 0 34px;
  padding:13px 17px max(20px,env(safe-area-inset-bottom));
  color:#f6f7fb;
  background-image:url("./assets/vinyl-grain.svg"),
    radial-gradient(ellipse at 3% 0%,#3c414d,#191b21 58%,#0c0d11 100%);
  background-size:384px 384px,auto;
  box-shadow:inset 7px 0 13px #ffffff25,inset -8px 0 15px #0007,
    -15px 0 45px #000a;
}
dialog.band-dialog.wall-detail-sheet[open]{
  animation:wall-sheet-from-right 195ms cubic-bezier(.2,.82,.2,1) both;
}
dialog.band-dialog.wall-detail-sheet::backdrop{
  background:#0506089e;
  backdrop-filter:blur(1.5px);
}
.report-grab-handle{
  display:none;
  background:#abb3c588;
  border-radius:99px;
  height:5px;
  width:66px;
  margin:1px auto 12px;
}
.wall-detail-sheet .report-top{
  padding:4px 5px 12px;
  position:sticky;
  top:-13px;
  z-index:5;
  min-height:49px;
  background:#161820f5;
  border-radius:12px;
  backdrop-filter:blur(6px);
}
.wall-detail-sheet .report-kicker{
  font:900 11px/1.25 Inter,system-ui,sans-serif;
  letter-spacing:.095em;
  color:#ffe557;
  max-width:82%;
}
.wall-detail-sheet .report-top button{
  flex:none;
  width:44px;height:44px;
  border:2px solid #6d7380;
  background:linear-gradient(145deg,#404550,#191c23);
  color:#f6f7fb;
  box-shadow:inset 0 3px 4px #ffffff25;
}
.wall-detail-sheet .report-top button:focus-visible{
  outline:3px solid #ffe557;outline-offset:2px;
}
.wall-detail-sheet .report-vinyl{
  padding:14px;
  border:2px solid #5b6371;
  border-radius:25px;
  background-image:url("./assets/vinyl-grain.svg"),
    linear-gradient(145deg,#2c303a,#14171d);
  background-size:384px 384px,auto;
  box-shadow:inset 0 6px 8px #ffffff1b,inset 0 -9px 13px #0008;
}
.wall-detail-sheet .report-patch-header{
  position:relative;
  isolation:isolate;
  padding:20px 20px 17px;
  border:2px solid #d5ba32;
  border-radius:19px;
  color:#101116;
  background-image:
    repeating-linear-gradient(90deg,#65551109 0 1px,transparent 1px 5px),
    url("./assets/vinyl-grain.svg"),
    linear-gradient(142deg,#fff09e,#ffe557 60%,#e4c238);
  background-size:auto,320px 320px,auto;
  box-shadow:inset 0 5px 6px #ffffff90,inset 0 -8px 9px #ba9a2980,0 8px 13px #0008;
}
.wall-detail-sheet .report-patch-header:after{
  content:"";
  position:absolute;inset:7px;
  border:1px dashed #3d3b2d74;
  border-radius:13px;
  pointer-events:none;
}
.wall-detail-sheet .report-patch-header small{
  display:block;
  color:#302910;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.wall-detail-sheet .report-patch-header h2{
  color:#0b0c10;
  font:900 clamp(35px,6vw,65px)/.97 Impact,"Arial Black",sans-serif;
  letter-spacing:.008em;
  margin:14px 0 10px;
  overflow-wrap:anywhere;
}
.wall-detail-sheet .report-rank{
  color:#272015;
  font-weight:950;
  line-height:1.45;
  margin:4px 0 0;
}
.wall-detail-sheet .report-wall-note{
  display:inline-block;
  color:#ff4545;
  font:900 19px/1.25 "Comic Sans MS","Marker Felt",cursive;
  letter-spacing:.03em;
  transform:rotate(-2deg);
  margin:15px 8px 20px;
  text-decoration:underline;
  text-decoration-color:#ff4545;
  text-underline-offset:6px;
}
.wall-detail-sheet .report-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:900 13px/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.10em;
  color:#ffe557;
  margin:0 3px 12px;
}
.wall-detail-sheet .report-section-title span:last-child{
  color:#ff4545;font-size:25px;line-height:1;
}
.wall-detail-sheet .report-stat-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.wall-detail-sheet .report-stat-grid > div{
  position:relative;
  isolation:isolate;
  min-height:105px;
  padding:16px 14px 13px;
  border:2px solid #bdc1cb;
  border-radius:15px;
  color:#121318;
  background-image:
    repeating-linear-gradient(91deg,#343b4b08 0 1px,transparent 1px 5px),
    linear-gradient(140deg,#fff,#e9eaf0 73%,#d1d5df);
  box-shadow:inset 0 5px 6px #ffffffdd,inset 0 -7px 9px #9da4b644,0 6px 10px #0009;
}
.wall-detail-sheet .report-stat-grid > div:after{
  content:"";position:absolute;inset:7px;
  border:1px dashed #5f667952;
  border-radius:9px;pointer-events:none;
}
.wall-detail-sheet .report-stat-grid small{
  display:block;
  font-size:9px;
  letter-spacing:.065em;
  line-height:1.35;
  color:#3a3f4b;
}
.wall-detail-sheet .report-stat-grid strong{
  color:#151618;
  font:900 clamp(28px,5vw,42px)/1 Impact,"Arial Black",sans-serif;
  margin-top:9px;
}
.wall-detail-sheet .report-stat-grid > div:nth-child(2){
  background-image:repeating-linear-gradient(91deg,#463f1208 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#fff09b,#ffe557 67%,#dec044);
  border-color:#d5ba32;
}
.wall-detail-sheet .report-vinyl h3{
  display:inline-block;
  margin:24px 4px 12px;
  padding-bottom:5px;
  border-bottom:4px solid #ff4545;
  font-size:24px;
  line-height:1.15;
}
.wall-detail-sheet .report-history{
  border:1px solid #4d525e;
  border-radius:13px;
  background:#111318;
  box-shadow:inset 0 4px 7px #0007;
}
.wall-detail-sheet .report-vinyl .microcopy{
  font-size:11px;line-height:1.55;color:#c9ced9;
}
.wall-detail-sheet .report-actions{
  position:relative;
  padding:16px 4px 5px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:9px;
}
.wall-detail-sheet .report-actions button{
  padding:11px 8px;
  border-radius:11px;
  font-size:11px;
  min-width:0;
  min-height:48px;
  white-space:normal;
}
.wall-detail-sheet .report-actions .outline-button{
  border:2px solid #a8b0be;
  background:#2c3039;
}
@keyframes wall-sheet-from-right{
  from{transform:translateX(100%);opacity:.7}
  to{transform:translateX(0);opacity:1}
}
@keyframes wall-sheet-from-bottom{
  from{transform:translateY(100%);opacity:.7}
  to{transform:translateY(0);opacity:1}
}
@media(max-width:700px){
  dialog.band-dialog.wall-detail-sheet{
    inset:auto 0 0 0;
    margin:0;
    width:100%;
    height:min(83dvh,810px);
    max-height:89dvh;
    border:2px solid #656b77;
    border-bottom:0;
    border-radius:27px 27px 0 0;
    box-shadow:inset 0 7px 9px #ffffff23,0 -17px 43px #000c;
    padding:8px 12px max(20px,env(safe-area-inset-bottom));
  }
  dialog.band-dialog.wall-detail-sheet[open]{
    animation:wall-sheet-from-bottom 190ms cubic-bezier(.2,.82,.2,1) both;
  }
  .report-grab-handle{display:block}
  .wall-detail-sheet .report-top{top:-8px}
  .wall-detail-sheet .report-vinyl{padding:11px}
  .wall-detail-sheet .report-patch-header{padding:15px}
  .wall-detail-sheet .report-patch-header h2{font-size:clamp(38px,10vw,56px)}
  .wall-detail-sheet .report-stat-grid{gap:7px}
  .wall-detail-sheet .report-stat-grid > div{min-height:96px;padding:13px 10px}
  .wall-detail-sheet .report-wall-note{margin:13px 6px 17px}
  .wall-detail-sheet .report-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .wall-detail-sheet .report-actions{grid-template-columns:1fr}
  .wall-detail-sheet .report-stat-grid strong{font-size:29px}
}
@media(prefers-reduced-motion:reduce){
  .velcro-mount > .lineup-choice,
  .velcro-mount > .lineup-choice::after,
  .lineup-wall-grid.has-selected-patch > .velcro-mount,
  .wall-detail-sheet{transition:none!important;animation:none!important}
  .velcro-mount.is-pressed > .lineup-choice,
  .velcro-mount.is-peeling > .lineup-choice,
  .velcro-mount.is-selected > .lineup-choice{transform:none!important}
}