/* FD-107: verbatim art-direction CSS, followed by structural integration. */
:root {
  --howie-black: #09090D;
  --stage-black: #0C0B10;
  --stage-2: #15111A;
  --house-cream: #F4F0E8;
  --ink: #18151A;
  --muted-cream: #D7D0C3;
  --gold: #F5A623;
  --gold-hot: #FFC95C;
  --gold-pale: #F7DEA0;
  --violet: #7C3AED;
  --violet-bright: #A855F7;

  --card-radius: 16px;
  --small-radius: 12px;
  --marquee-radius: 17px;

  --rule-gold:
    linear-gradient(90deg,
      rgba(245,166,35,0),
      rgba(255,201,92,.96) 22%,
      rgba(245,166,35,.96) 78%,
      rgba(245,166,35,0));

  --scrim-bottom:
    linear-gradient(180deg,
      rgba(8,8,11,0) 20%,
      rgba(8,8,11,.22) 43%,
      rgba(8,8,11,.84) 100%);

  --scrim-strong:
    linear-gradient(180deg,
      rgba(8,8,11,.10) 0%,
      rgba(8,8,11,.50) 48%,
      rgba(8,8,11,.93) 100%);

  --scrim-left:
    linear-gradient(90deg,
      rgba(8,8,11,.92) 0%,
      rgba(8,8,11,.72) 42%,
      rgba(8,8,11,.12) 100%);
}

.vs-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}

.vi-level-1 .vs-scrim {
  background:
    linear-gradient(90deg, rgba(8,8,11,.42), rgba(8,8,11,.04) 60%),
    linear-gradient(180deg, rgba(8,8,11,.02) 24%, rgba(8,8,11,.88) 100%);
}

.vi-level-4 .vs-scrim {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--dominant) 42%, transparent), transparent 56%),
    var(--scrim-strong);
}

.vi-level-5 .vs-pattern {
  background:
    linear-gradient(90deg, rgba(245,166,35,.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(245,166,35,.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  opacity: .35;
}

.vi-level-6 .vs-base {
  background:
    radial-gradient(circle at 86% 14%, var(--secondary) 0%, transparent 34%),
    linear-gradient(145deg, var(--dominant), var(--stage-black) 72%);
}

.vi-level-6 .vs-pattern {
  opacity: .32;
  background-image: var(--category-pattern);
}

.vi-level-6 .vs-content::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 10px;
  background: var(--rule-gold);
}

.setlist {
  max-width: 430px;
  padding: 0 16px 104px;
}

.setlist-hero {
  aspect-ratio: 16 / 10;
  margin: 0 -16px 28px;
  padding: 20px 20px 18px;
  border-radius: 0 0 20px 20px;
}

.setlist-hero .eyebrow {
  font: 11px/1.2 var(--font-mono);
  letter-spacing: .14em;
}

.setlist-hero h1 {
  font: 700 32px/.98 "Playfair Display", serif;
  max-width: 330px;
  margin: 10px 0 8px;
}

.setlist-hero .event-line {
  font: 700 17px/1.1 "Playfair Display", serif;
}

.setlist-hero .thesis {
  font: 14px/1.35 var(--font-ui);
  color: var(--muted-cream);
  max-width: 285px;
}

.set-section-label {
  font: 11px/1 var(--font-display);
  letter-spacing: .08em;
  color: var(--gold-pale);
  margin: 26px 0 9px;
}

.set-stop {
  aspect-ratio: 16 / 10.7;
  border-radius: 16px;
  overflow: hidden;
  padding: 16px;
}

@media (min-width: 430px) {
  .setlist { padding-inline: 20px; }
  .setlist-hero h1 { font-size: 36px; }
  .set-stop { min-height: 254px; }
  .set-stop--compact { min-height: 218px; }
}

@media (min-width: 900px) {
  .setlist {
    max-width: 1208px;
    margin: 0 auto;
    padding: 0 0 96px;
  }

  .setlist-hero {
    aspect-ratio: 16 / 6.7;
    padding: 42px 48px 34px;
    border-radius: 20px;
  }

  .setlist-hero h1 {
    font-size: clamp(46px, 5vw, 72px);
    max-width: 760px;
  }

  .setlist-night-grid {
    display: grid;
    grid-template-columns: minmax(230px, .88fr) minmax(390px, 1.38fr) minmax(230px, .88fr);
    gap: 18px;
    align-items: stretch;
    margin-top: 26px;
  }

  .set-stop--opener,
  .set-stop--encore {
    aspect-ratio: 4 / 5;
  }

  .set-stop--anchor {
    aspect-ratio: auto;
    min-height: 430px;
  }
}

.event-card {
  aspect-ratio: 16 / 10.5;
  min-height: 236px;
  border: 1px solid rgba(244,240,232,.15);
  border-radius: 16px;
  overflow: hidden;
  background: var(--stage-2);
}

.event-card__content {
  position: absolute;
  inset: auto 0 0;
  padding: 56px 16px 16px;
  background: var(--scrim-strong);
}

.event-card__meta {
  font: 11px/1.25 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-pale);
}

.event-card__title {
  margin: 7px 0 5px;
  font: 700 25px/1.0 "Playfair Display", serif;
  color: var(--house-cream);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__venue {
  font: 14px/1.25 var(--font-ui);
  color: var(--house-cream);
}

.event-card__reason {
  margin-top: 7px;
  font: 13px/1.3 var(--font-ui);
  color: var(--muted-cream);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 900px) {
  .event-card {
    aspect-ratio: 16 / 7.5;
    min-height: 270px;
  }

  .event-card__content {
    padding: 76px 24px 22px;
  }

  .event-card__title {
    font-size: 32px;
    max-width: 72%;
  }
}

.event-card.is-loading .vs-base {
  background:
    linear-gradient(110deg,
      rgba(255,255,255,.02) 8%,
      rgba(255,255,255,.07) 18%,
      rgba(255,255,255,.02) 33%),
    linear-gradient(145deg, var(--dominant), var(--stage-black));
  background-size: 210% 100%, 100% 100%;
  animation: howie-shimmer 1.6s linear infinite;
}

.judgment-pick { border-top: 2px solid var(--gold-hot); }
.judgment-move { box-shadow: inset 0 -2px 0 rgba(168,85,247,.9); }
.judgment-trip { background-image: linear-gradient(90deg, rgba(245,166,35,.22), transparent 38%); }
.judgment-bucket::after {
  content: "★";
  color: var(--gold-hot);
  font-size: 13px;
  margin-left: 6px;
}
.judgment-planb { opacity: .78; }

/* Structural integration: scoped away from the unchanged Blueberry siblings. */
.visual-slot{position:relative;isolation:isolate;overflow:hidden;background:var(--stage-black);color:var(--house-cream);border-radius:var(--card-radius);width:100%;min-width:0}
/* Full-width identity fallbacks cannot share the legacy portrait's flex row:
   the visual consumes that row and collapses .ev-b to zero width. */
.ev-img:not(.vi-editorial):has(> .visual-slot){flex-direction:column}
.ev-img:not(.vi-editorial):has(> .visual-slot) > .ev-b{width:100%;overflow-wrap:anywhere}
/* This column layout was already the documented intent for a non-editorial visual-slot card,
   but .event-card__content's own generic rule (position:absolute, no scoping) always won
   regardless -- it only positions correctly relative to the card because .vi-editorial ALSO
   sets position:relative on the card itself; remove .vi-editorial (as views.js now does for a
   real matchup identity -- Howard, 2026-09-19: "Mobile version still wrong. Overlapping not
   fixed") and the card loses its own positioning context, so the absolutely-positioned content
   jumps to whatever positioned ancestor is next up the real DOM -- confirmed live, landing
   ~4400px down the page, nowhere near its own card. Restores the flow layout this selector's
   own sibling rule already commits to. */
.ev-img:not(.vi-editorial):has(> .visual-slot) > .event-card__content{position:static;padding:12px 16px 16px;background:none}
.vs-base,.vs-image,.vs-pattern,.vs-scrim{position:absolute;inset:0;pointer-events:none}
.vs-base{background:radial-gradient(circle at 86% 14%,var(--secondary),transparent 34%),linear-gradient(145deg,var(--dominant),var(--stage-black) 72%)}
.vs-scrim{background:var(--scrim-strong)}
.vs-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:end;min-height:100%;padding:20px;overflow-wrap:anywhere}
.vs-title{font:700 25px/1.05 'Playfair Display',serif;color:var(--house-cream);margin:7px 0}
.vs-meta{font:11px/1.25 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-pale)}
.vs-venue{font:14px/1.25 var(--font-ui);color:var(--muted-cream)}
.vs-icon{position:absolute;top:10%;right:9%;width:40px;height:40px;color:var(--identity-accent);opacity:.85}
.vs-marquee{aspect-ratio:16/11}.vs-card{aspect-ratio:16/10.5}.vs-tile{aspect-ratio:4/3}.vs-setlist-hero{aspect-ratio:16/10}.vs-stop{aspect-ratio:16/8.7}
.vs-marquee .vs-icon{width:56px;height:56px}
.visual-slot[data-pattern="spotlight"]{--category-pattern:conic-gradient(from 198deg at 75% -10%,transparent 0deg,rgba(255,255,255,.28) 12deg,transparent 28deg),repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.10) 27px 28px)}
.visual-slot[data-pattern="court"]{--category-pattern:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.3) 20% 20.5%,transparent 20.5% 79.5%,rgba(255,255,255,.3) 79.5% 80%,transparent 80%),linear-gradient(0deg,transparent 49%,rgba(255,255,255,.3) 49% 50%,transparent 50%)}
.visual-slot[data-pattern="curtain"]{--category-pattern:repeating-linear-gradient(90deg,transparent 0 25px,rgba(0,0,0,.6) 38px,rgba(255,255,255,.16) 44px,transparent 52px)}
.visual-slot[data-pattern="ribbon"]{--category-pattern:repeating-linear-gradient(135deg,transparent 0 42px,rgba(249,199,79,.25) 43px 64px,transparent 65px 96px)}
.visual-slot[data-pattern="market-stripe"]{--category-pattern:repeating-linear-gradient(90deg,rgba(245,233,209,.24) 0 18px,transparent 18px 36px)}
.visual-slot[data-pattern="columns"],.visual-slot[data-pattern="grid"]{--category-pattern:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 32px),repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,transparent 1px 32px)}
.visual-slot[data-pattern="footlights"]{--category-pattern:radial-gradient(circle at 4px 4px,rgba(255,201,92,.5) 0 2px,transparent 3px);background-size:24px 24px}
.vs-pattern{background-image:var(--category-pattern);opacity:.32}
.vi-tennis .vs-base{background:radial-gradient(circle at 86% 18%,rgba(217,240,74,.2),transparent 25%),linear-gradient(145deg,#1D5C8E,var(--stage-black) 85%)}
.vi-food .vs-base{background:radial-gradient(circle at 90% 0%,#A63228,transparent 50%),linear-gradient(145deg,#E5A12D,#1B1512 80%)}
.vs-logo{position:absolute;inset:8% 25% auto;width:50%;height:28%;object-fit:contain;z-index:1}.vs-marquee .vs-logo{height:32%}.vs-tile .vs-logo{height:36%}.vs-stop .vs-logo{height:30%}
.vi-level-1.vs-marquee .vs-image{width:62%;left:19%}
.vs-teams.bill-teams{position:absolute;inset:7% 5% 42%;display:grid;grid-template-columns:1fr 32px 1fr;gap:0;margin:0;z-index:1}
.vs-teams .tm{position:relative;min-width:0;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:linear-gradient(145deg,var(--tc1),var(--stage-black) 150%);box-shadow:inset 0 -4px var(--tc2);color:white}
.vs-teams .tm::before{content:'';position:absolute;inset:5%;border:1px solid white;border-radius:50%;opacity:.07}
.vs-teams .tm-city{font:10px/1.2 var(--font-mono);color:#fff}.vs-teams .tm-name{font:22px/1.1 var(--font-display);text-transform:uppercase;color:#fff;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vs-teams .bill-vs-wrap{display:grid;place-items:center;z-index:2}.vs-teams .bill-vs{border:1px solid var(--gold-hot);background:#09090D;color:var(--gold-hot);border-radius:50%;padding:8px 4px;font:11px var(--font-mono)}
#app .vi-marquee{padding:12px;overflow:hidden}.vi-marquee .visual-slot{border-radius:10px}.vi-marquee .vs-content{position:absolute;inset:auto 0 0;min-height:0;text-align:left;padding:22px}
#app .vi-marquee .page-title{color:var(--house-cream);font:700 clamp(27px,5vw,58px)/1.05 'Playfair Display',serif;max-width:100%;margin:8px 0;overflow-wrap:anywhere}
#app .vi-marquee .label{color:var(--gold-pale)}
#app .vi-editorial{display:block;position:relative;padding:0;text-align:left;color:var(--house-cream);width:100%;min-width:0}
#app .vi-editorial.event-card{margin:12px 0;min-height:236px;aspect-ratio:16/10.5;border:1px solid rgba(244,240,232,.15);border-radius:16px;background:var(--stage-2);overflow:hidden}
#app .vi-editorial > .visual-slot{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
#app .vi-editorial .event-card__content{position:absolute;inset:auto 0 0;padding:56px 16px 16px;background:var(--scrim-strong);width:100%;z-index:2}
#app .vi-editorial .event-card__title{font:700 25px/1 'Playfair Display',serif;color:var(--house-cream);margin:7px 0 5px;max-width:100%;text-transform:none}
#app .vi-editorial .event-card__meta{font:11px/1.25 var(--font-mono);color:var(--gold-pale);letter-spacing:.09em}
#app .vi-editorial .event-card__venue{font:14px/1.25 var(--font-ui);color:var(--house-cream);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#app .vi-editorial .event-card__reason{font:13px/1.3 var(--font-ui);color:var(--muted-cream);margin-top:7px}
#app .vi-editorial .cta{color:var(--gold-hot);font:11px var(--font-mono);margin-top:10px}
#app .tile.vi-editorial{aspect-ratio:4/3;min-height:200px}.tile.vi-editorial .tile-b{position:absolute;inset:auto 0 0;z-index:2;background:var(--scrim-strong);padding:45px 12px 12px}
#app .tile.vi-editorial .event-card__title{font-size:20px}.tile.vi-editorial .event-card__venue{font-size:12px}
.visual-slot.is-loading .vs-base{background:linear-gradient(110deg,rgba(255,255,255,.02) 8%,rgba(255,255,255,.07) 18%,rgba(255,255,255,.02) 33%),linear-gradient(145deg,var(--dominant),var(--stage-black));background-size:210% 100%,100% 100%;animation:howie-shimmer 1.6s linear infinite}
@keyframes howie-shimmer{to{background-position:-210% 0,0 0}}
@media(prefers-reduced-motion:reduce){.visual-slot.is-loading .vs-base{animation:none}}
@media(min-width:768px){.vs-marquee,.vs-card{aspect-ratio:16/9}.vs-setlist-hero{aspect-ratio:16/8.2}.vs-stop{aspect-ratio:16/6.7}}
@media(min-width:900px){.vs-marquee{aspect-ratio:16/7.1}.vs-card{aspect-ratio:16/7.5}.vs-setlist-hero{aspect-ratio:16/6.7}.vs-stop{aspect-ratio:16/5.7}#app .vi-editorial.event-card{aspect-ratio:16/7.5;min-height:270px}#app .vi-editorial .event-card__content{padding:76px 24px 22px}#app .vi-editorial .event-card__title{font-size:32px;max-width:72%}.vs-teams .tm-name{font-size:32px}}
.visual-slot .vs-teams.bill-teams{width:auto!important;max-width:none;transform:none;min-height:0}
.vs-setlist-hero .vs-teams{inset:6% 5% 56%}
.vs-stop .vs-teams{inset:6% 5% 56%}
#app.setlist .setlist-hero h1{line-height:.98!important;color:var(--house-cream)!important;text-transform:none!important}
#app.setlist .set-stop .stage-n{text-transform:none!important}
#app.setlist .setlist-hero .sl-headline-sub{font:11px/1.3 var(--font-mono);color:var(--muted-cream)}
/* Multi-day trip headings carry title, city and party context. The legacy 16:10 hero was
   shorter than that real content at 390px, so flex-end pushed the label and first title line
   above its own clipped box and beneath the sticky header. Preserve the visual hero but let
   its content establish the height; min-height keeps the deliberate marquee presence. */
#app.setlist .trip-draft .setlist-hero{aspect-ratio:auto;min-height:260px;height:auto}
#app.setlist .setlist-title-tools{margin:-14px 0 20px}
#app.setlist .setlist-night-grid .set-invitation{position:relative;margin-top:46px;border:0;padding:0}
#app.setlist .set-invitation::before{content:attr(data-role-label);position:absolute;top:-24px;color:var(--gold-pale);font:11px/1 var(--font-display);letter-spacing:.08em}
.judgment-label{display:block;font:10px/1.3 var(--font-mono);letter-spacing:.1em;color:var(--gold-pale);background:none;border:0;border-radius:0}
.judgment-move{border-color:var(--gold-hot)}.judgment-move .judgment-label::after{content:'';display:block;width:64px;height:2px;margin-top:5px;background:linear-gradient(90deg,var(--violet-bright),var(--gold-hot))}
.judgment-bucket .judgment-label{display:inline-block;border:1px solid var(--gold-hot);padding:4px 8px;border-radius:2px}
.judgment-planb .judgment-label{opacity:.7}.judgment-pick::before{content:'✦';margin-right:8px;color:var(--gold-hot)}
@media(min-width:900px){#app.setlist .setlist-chapter .stage[data-stage="show"]{grid-column:1/-1}#app.setlist .setlist-chapter .setlist-night-grid{grid-template-columns:1fr 1fr}#app.setlist .setlist-chapter .set-stop--anchor{min-height:300px}}
#app .card-broadway{position:relative;isolation:isolate;overflow:hidden}
#app .card-broadway>.visual-slot{position:absolute;inset:0 0 auto;height:260px;aspect-ratio:auto;z-index:-1}
#app .card-broadway .card-top{min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:56px 16px 16px;background:var(--scrim-strong)}
#app .card-broadway h3{font:700 25px/1 'Playfair Display',serif;color:var(--house-cream)}
.event-status{font:11px/1.25 var(--font-mono);letter-spacing:.09em;color:var(--gold-pale);background:none;border:0;border-radius:0}
body:is([data-view="setlist"],[data-view="s"]) .wrap{padding-inline:0;max-width:100%}
#app.setlist .trip-placement{color:var(--house-cream);background:var(--stage-black)}
#app.setlist .trip-placement h3{font:700 25px/1.05 'Playfair Display',serif;color:var(--house-cream)}
#app.setlist .trip-placement .visual-slot{position:absolute;inset:0;z-index:-1;height:100%;aspect-ratio:auto}
/* Open stops carry real explanatory copy too; a height cap clips their heading. */
#app.setlist .set-stop--inviting{aspect-ratio:auto;min-height:72px;height:auto;max-height:none;padding:14px}
#app.setlist .set-stop--inviting h3{font-size:18px}
#app.setlist .set-stop--inviting p{font-size:12px;line-height:1.3}
/* Expanded planning cards must size from their in-flow content. The closed
   art ratio plus flex-end otherwise pushes oversized children above the card
   and into its overflow clip. Keep the positioned, isolated decoration and
   closed artwork unchanged; include every stop variant and both hero paths. */
#app.setlist :is(.set-stop,.setlist-hero):has(details[open]){aspect-ratio:auto;height:auto;max-height:none}
@media(min-width:900px){#app.setlist .trip-day [data-locked="true"]{grid-column:1/-1}#app.setlist .trip-day .setlist-night-grid{grid-template-columns:1fr 1fr}}
body:is([data-view="setlist"],[data-view="s"]) .wrap{width:100%;max-width:100%!important;padding-inline:0!important;margin-inline:auto}
body:is([data-view="setlist"],[data-view="s"]) #app.setlist{width:100%;max-width:430px!important}
.setlist-overview{font:14px/1.35 var(--font-ui);color:var(--muted-cream);margin:16px 0 22px}
.vs-teams .tm::after{content:attr(data-initials);position:absolute;right:6px;bottom:0;font:64px/1 var(--font-display);opacity:.08;color:#fff;pointer-events:none}
#app .vi-marquee .bp-event-date{background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
#app .card-broadway .badge-traveler{background:none;border:0;border-radius:0;padding:0;font:11px/1.25 var(--font-mono);color:var(--gold-pale)}
@media(min-width:900px){body:is([data-view="setlist"],[data-view="s"]) #app.setlist{max-width:1208px!important}}