/* FD-079 job C. Board 15 timeline, board 16 restrained rows; no shell token overrides.
   Scope is the assigned routes only. Board crops are decorative placeholders, never venue photos. */
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]){background:var(--hb-ink);color:var(--hb-body)}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app{
  --cp-text:#cfc9d6; background:radial-gradient(ellipse at 90% 0%,rgba(139,92,246,.10),transparent 42%),var(--hb-ink);
  color:var(--hb-body);min-height:calc(100dvh - 130px);padding-bottom:36px;
}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(.page-title,.nores h3,.card h3){font-family:"Playfair Display",Georgia,serif;color:var(--hb-gold);text-transform:none;letter-spacing:-.025em;line-height:1.13;overflow-wrap:anywhere}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app .page-title{font-size:clamp(34px,5vw,56px);margin:12px 0 0;max-width:24ch}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(.note,.mono-s,.meta,.nores p,.sub,.stage-sub,.stage-s){color:var(--hb-body);line-height:1.55}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app .label{display:flex;align-items:center;gap:10px;color:var(--hb-gold);font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:2px;text-transform:uppercase}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app .label::after{content:"";flex:1;min-width:20px;height:7px;background:radial-gradient(circle at 4px 50%,#f0dcae 0 2px,transparent 3px) left center/15px 7px repeat-x;opacity:.8;max-width:80px;filter:drop-shadow(0 0 3px #b48537)}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(.card,.nores,.cov,.nbq){background:linear-gradient(135deg,rgba(240,220,174,.045),rgba(139,92,246,.035)),var(--hb-ink-2);border:1px solid var(--hb-line);border-radius:14px;color:var(--hb-body);box-shadow:none}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(.cov b,.nbq-q,.nm){color:#fff}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(.btn,.chip,.nbq-c){min-height:44px;white-space:normal;border:1px solid var(--hb-line);background:var(--hb-ink-2);color:var(--hb-gold);border-radius:999px;line-height:1.3;padding:10px 16px}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app .btn.primary{background:linear-gradient(135deg,var(--hb-violet),var(--hb-violet-2));border-color:#b18cff;color:#fff}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(input,select){background:var(--hb-ink-2);color:#fff;border:1px solid #9a8768;border-radius:12px;min-height:44px;max-width:100%;padding:10px 12px}
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app input::placeholder{color:var(--hb-body)}
/* NI-2026-09-16: this used to be a bare outline with no --bg moat, the exact pre-fix shape
   verify-focus-ring-contrast.js (NI-2026-08-26-237 JOB C) already hardened everywhere else --
   found live re-verifying the deploy candidate, real rendered pixels at 390 measured 1.13:1
   against the neighbouring page (fails the WCAG SC 1.4.11 3:1 floor). Same moat technique as
   the shared shell.css :focus-visible rule, keeping --hb-blue so this section's own accent
   still shows, instead of reusing --accent-hot and losing the section's identity. */
body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app :is(button,a,input,select):focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--hb-blue)}
.cp-heading{padding-top:28px;padding-bottom:20px}
/* Each existing stage is one part of a continuous vertical timeline, at every width. */
#app .cp-timeline{margin:18px 16px 24px;padding:10px 0 8px 23px;position:relative;display:block;background:none;border:0}
.cp-timeline::before{content:"";position:absolute;left:8px;top:20px;bottom:28px;width:2px;background:linear-gradient(var(--hb-gold),var(--hb-violet) 50%,var(--hb-blue))}
#app .cp-timeline .stage{--cp-node:var(--hb-gold);position:relative;overflow:visible;margin:0 0 24px;padding:0;background:none;border:0;border-radius:0}
#app .cp-timeline .stage[data-stage="show"]{--cp-node:#b18cff}
#app .cp-timeline .stage[data-stage="encore"]{--cp-node:var(--hb-blue)}
#app .cp-timeline .stage-h{background:none;border:0;padding:0 0 12px;flex-wrap:wrap;gap:8px}
#app .cp-timeline .stage-h .stage-num{position:absolute;left:-23px;top:10px;width:17px;height:17px;background:var(--cp-node);border:2px solid var(--hb-ink);box-shadow:0 0 12px var(--cp-node);font-size:0}
#app .cp-timeline .stage-k{padding:9px 12px;color:var(--cp-node);font:600 12px/1.3 "IBM Plex Mono",monospace;letter-spacing:3px;border:1px solid var(--hb-line);border-radius:5px;background:linear-gradient(transparent 48%,#050408 49% 52%,transparent 53%),repeating-linear-gradient(90deg,transparent 0 16px,rgba(255,255,255,.07) 17px 18px),linear-gradient(#1b1720,#0c0a11)}
#app .cp-timeline .stage-s{font-size:10px}
#app .cp-timeline .stage-row{position:relative;display:flex;flex-wrap:wrap;gap:12px;padding:16px;margin-bottom:10px;background:linear-gradient(120deg,rgba(240,220,174,.05),rgba(139,92,246,.035)),var(--hb-ink-2);border:1px solid var(--hb-line);border-radius:14px;min-height:106px}
#app .cp-timeline .stage-row::before{content:"";display:block;flex:0 0 80px;height:90px;border-radius:9px;background:radial-gradient(ellipse at 25% 15%,var(--cp-node),transparent 75%),#181020;opacity:.8}
#app .cp-board-art .stage[data-stage="opener"] .stage-row::before{background:url('assets/boards/crew-dining.png') center/cover}
#app .cp-board-art .stage[data-stage="show"] .stage-row::before{background:url('assets/boards/stop-show.png') center/cover}
#app .cp-board-art .stage[data-stage="encore"] .stage-row::before{background:url('assets/boards/stop-encore.png') center/cover}
#app .cp-timeline .stage-dot{position:absolute;left:-24px;top:20px;background:var(--cp-node);width:10px;height:10px;box-shadow:0 0 10px var(--cp-node);margin:0}
#app .cp-timeline .stage-b{flex:1 1 120px}
#app .cp-timeline .stage-n{font:600 23px/1.2 "Playfair Display",Georgia,serif;color:#fff;overflow-wrap:anywhere}
#app .cp-timeline .stage-sub{font-size:13px;margin-top:6px}
#app .cp-timeline .anchor-tag{color:#d5c3ff;border-color:var(--hb-line);background:none;position:static}
#app .cp-timeline .stage-gap{color:var(--hb-body);border-color:var(--hb-line);margin:0 0 20px}
#app .cp-check{margin:20px 16px;padding:20px;border:1px solid var(--hb-line);border-left:3px solid var(--hb-gold);border-radius:14px;background:linear-gradient(120deg,rgba(240,220,174,.06),transparent),var(--hb-ink-2)}
#app .cp-check[data-plan-status="INCOMPLETE"]{border-left-color:#b18cff}
#app .cp-check .pc-anchor{font-family:"Playfair Display",Georgia,serif;font-size:22px;color:#fff!important}
#app .cp-check .pc-status{margin-bottom:0}
body[data-view="setlist"] #app :is(.sl-title-edit,.sl-title-label,.js-clear){color:var(--hb-gold)!important}
body[data-view="setlist"] #app :is(.sl-user-tools,.sl-add-more){border-color:var(--hb-line);background:none}
body:is([data-view="setlist"],[data-view="saved"]) #app .sl-row{margin:10px 16px;padding:15px;border:1px solid var(--hb-line);border-radius:14px;background:linear-gradient(110deg,rgba(139,92,246,.055),transparent),var(--hb-ink-2);flex-wrap:wrap}
body:is([data-view="setlist"],[data-view="saved"]) #app .sl-row .nm{white-space:normal;overflow-wrap:anywhere;font:600 20px/1.3 "Playfair Display",Georgia,serif}
body:is([data-view="setlist"],[data-view="saved"]) #app .sl-row .info{min-width:130px}
body[data-view="saved"] #app .sl-row .info{flex:1 1 200px;min-width:0}
body[data-view="saved"] #app .sl-row .sub{white-space:normal;overflow-wrap:anywhere}
body[data-view="saved"] #app .saved-actions{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
body[data-view="saved"] #app .saved-actions .btn{min-height:44px}
body[data-view="setlist"] #app :is(.mv button,.x){color:var(--hb-gold);background:var(--hb-ink-2);min-width:36px;min-height:36px;border-color:var(--hb-line)}
#app .cp-profile .card-top{padding:24px!important;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:baseline}
#app .cp-profile .meta{margin:0!important;font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:2px;text-transform:uppercase}
#app .cp-profile h3{font-size:25px!important}
@media(min-width:900px){
 body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app{max-width:980px;margin-inline:auto;padding:8px 32px 48px}
 #app .cp-timeline{margin-top:26px;padding-left:34px}
 .cp-timeline::before{left:12px}
 #app .cp-timeline .stage-h .stage-num{left:-29px}
 #app .cp-timeline .stage-dot{left:-27px}
 #app .cp-timeline .stage-row{padding:22px;gap:24px;align-items:center}
 #app .cp-timeline .stage-row::before{flex-basis:190px;height:120px}
 #app .cp-timeline .stage-n{font-size:29px}
 #app .cp-timeline .stage-sub{font-size:14px}
}
/* The board 16 light option remains a light surface without changing shared shell tokens. */
[data-palette="LIGHT"] body:is([data-view="setlist"],[data-view="s"],[data-view="ask"],[data-view="saved"],[data-view="me"]) #app{background:var(--hb-ink)}
/* Modules injected after renderSetList retain their hooks, controls and honest states. */
body:is([data-view="setlist"],[data-view="s"]) #app #s0SetListHero{background:none}
body:is([data-view="setlist"],[data-view="s"]) #app :is(.efc-board,.efc-dor){margin:20px 16px;padding:20px;background:var(--hb-ink-2);border:1px solid var(--hb-line);border-radius:14px;color:var(--hb-body)}
body:is([data-view="setlist"],[data-view="s"]) #app :is(.efc-board,.efc-dor) :is(p,span,li){color:var(--hb-body);line-height:1.55}
body:is([data-view="setlist"],[data-view="s"]) #app :is(.efc-kicker,.efc-dor-kicker){color:var(--hb-gold);font:500 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:2px}
body:is([data-view="setlist"],[data-view="s"]) #app :is(.efc-stage-label,.efc-dor-planb-name){font:600 21px/1.3 "Playfair Display",Georgia,serif;color:var(--hb-gold)}
body:is([data-view="setlist"],[data-view="s"]) #app :is(.efc-stage,.efc-dor-planb-item){border-color:var(--hb-line)}
body:is([data-view="setlist"],[data-view="s"]) #app :is(.efc-row,.efc-card){background:var(--hb-ink);border-color:var(--hb-line);color:var(--hb-body)}
body[data-view="ask"] #app .cp-ask-wrap{padding:0 16px 14px}
body[data-view="ask"] #app .ask{margin:0;display:flex;gap:10px;align-items:center;border:1px solid var(--hb-gold-dim);border-radius:999px;padding:6px 6px 6px 16px;background:var(--hb-ink-2)}
body[data-view="ask"] #app .ask input{flex:1;min-width:0;border:0;border-radius:0;background:none;padding:6px 0;font:400 15px/1.4 Inter,sans-serif}
body[data-view="ask"] #app .cp-search{display:flex;color:var(--hb-gold)}
body[data-view="ask"] #app .ask .go{flex:0 0 44px;width:44px;height:44px;border:1px solid #b18cff;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--hb-violet),var(--hb-violet-2));font-size:26px}
body[data-view="ask"] #app .cov p{color:var(--hb-body)}

/* FD-107 composed Set List. Keep the model and existing action hooks. */
body:is([data-view="setlist"],[data-view="s"]) #app.setlist{max-width:430px;margin:0 auto;padding:0 16px 104px}
#app.setlist .setlist-hero{position:relative;isolation:isolate;aspect-ratio:16/10;margin:0 -16px 28px;padding:20px 20px 18px;border-radius:0 0 20px 20px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
#app.setlist .setlist-hero>.visual-slot{position:absolute;inset:0;z-index:-1;height:100%;aspect-ratio:auto}
#app.setlist .setlist-hero h1{font:700 32px/.98 'Playfair Display',serif;max-width:330px;margin:10px 0 8px;color:var(--house-cream)}
#app.setlist .setlist-hero .eyebrow{font:11px/1.2 var(--font-mono);letter-spacing:.14em;color:var(--gold-pale)}
#app.setlist .setlist-hero .sl-title-wrap{position:relative}
#app.setlist .setlist-night-grid{padding:0;margin:0 0 24px;background:none}
#app.setlist .setlist-night-grid::before{display:none}
#app.setlist .setlist-night-grid .stage{min-width:0;margin:0 0 24px}
#app.setlist .set-section-label{font:11px/1 var(--font-display);letter-spacing:.08em;color:var(--gold-pale);margin:26px 0 9px;padding:0}
#app.setlist .stage-k{border:0;padding:0;background:none;color:var(--gold-pale);font:11px/1 var(--font-display);letter-spacing:.08em}
#app.setlist .stage-h .stage-num,#app.setlist .stage-dot{display:none}
/* D-147: bottom-aligned copy must determine card height. A fixed aspect ratio plus
   overflow clipping pushes long titles above the card, especially on narrow trips. */
#app.setlist .set-stop{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:auto;min-height:226px;border-radius:16px;overflow:hidden;padding:16px;gap:8px}
#app.setlist .set-stop::before{display:none}
#app.setlist .set-stop>.visual-slot{position:absolute;inset:0;height:100%;aspect-ratio:auto;z-index:-1}
#app.setlist .set-stop .stage-b{flex:0 0 auto;width:100%}
#app.setlist .set-stop .stage-n{font:700 25px/1.05 'Playfair Display',serif;color:var(--house-cream)}
#app.setlist .set-stop .anchor-tag{font:10px/1 var(--font-mono);letter-spacing:.14em;padding:0;border:0;border-radius:0;align-self:flex-start;color:var(--gold-pale)}
#app.setlist .set-invitation-card{position:relative;display:block;height:72px;width:100%;padding:0;border:1px solid rgba(244,240,232,.15);border-radius:12px;overflow:hidden;text-align:left}
#app.setlist .set-invitation-card .visual-slot{height:72px;aspect-ratio:auto}
#app.setlist .set-invitation-card .vs-content{padding:10px 16px;justify-content:center;gap:4px;font:13px/1.2 var(--font-ui)}
#app.setlist .set-invitation-card strong{font:700 18px/1.1 'Playfair Display',serif}
#app.setlist .set-invitation-card .vs-content::before{display:none}
#app.setlist .set-invitation-card .vs-icon{width:28px;height:28px;opacity:.35}
#app.setlist .stage[data-stage="opener"] .set-section-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-hot);display:inline-block;margin-right:7px}
#app.setlist .stage[data-stage="encore"] .set-section-label::before{content:'';width:6px;height:6px;border-radius:50%;background:linear-gradient(var(--violet-bright),var(--gold-hot));display:inline-block;margin-right:7px}
@media(min-width:430px){body:is([data-view="setlist"],[data-view="s"]) #app.setlist{padding-inline:20px}#app.setlist .setlist-hero h1{font-size:36px}#app.setlist .set-stop{min-height:254px}#app.setlist .set-stop--compact{min-height:218px}}
@media(min-width:900px){
 body:is([data-view="setlist"],[data-view="s"]) #app.setlist{max-width:1208px;margin:0 auto;padding:0 0 96px}
 #app.setlist .setlist-hero{aspect-ratio:16/6.7;padding:42px 48px 34px;border-radius:20px;margin:0 0 28px}
 #app.setlist .setlist-hero h1{font-size:clamp(46px,5vw,72px);max-width:760px}
 #app.setlist .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}
 #app.setlist .set-stop--opener,#app.setlist .set-stop--encore{aspect-ratio:auto}
 #app.setlist .set-stop--anchor{aspect-ratio:auto;min-height:430px}
 #app.setlist .set-stop--anchor .vs-teams{bottom:46%}
}
/* At 900px the art-direction's 886px minimum grid needs the full viewport room. */
/* D2: sports identity and plan copy occupy separate vertical bands, including the
   recipient's edit button. Content height, not a fixed aspect ratio, sets the lower band. */
#app.setlist :is(.setlist-hero,.set-stop):has(> .vi-sports){
  aspect-ratio:auto;min-height:340px;padding-top:174px;padding-bottom:42px;
}
#app.setlist :is(.setlist-hero,.set-stop) > .vi-sports .vs-teams.bill-teams{
  top:24px;bottom:auto;
}
#app.setlist :is(.setlist-hero,.set-stop) > .vi-sports .vs-scrim{
  background:linear-gradient(180deg,rgba(5,6,9,.08) 80px,rgba(5,6,9,.88) 170px,rgba(5,6,9,.96) 100%);
}
@media(min-width:900px) and (max-width:980px){body[data-view="setlist"] .wrap{max-width:100%;padding-inline:0}}
body[data-view="ask"] #app .nbq-badge{background:var(--hb-ink);color:var(--hb-gold);border:1px solid var(--hb-line);border-radius:999px}
body[data-view="setlist"] #app .sl-row button{background:var(--hb-ink-2);color:var(--hb-gold);border-color:var(--hb-line)}
body[data-view="setlist"] #app .sl-swap :is(summary,.sl-swap-menu){background:var(--hb-ink-2);color:var(--hb-gold);border:1px solid var(--hb-line)}
body[data-view="setlist"] #app .sl-swap summary{border-radius:999px;min-height:44px;padding:0 12px}
body[data-view="setlist"] #app .sl-swap summary:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--hb-blue)}

/* Q53: the existing next action belongs beside the answer, before the tall board. */
body #app .q53-next-action{margin:12px 16px;max-width:calc(100% - 32px)}
body #app .pb-truth .q53-next-action{margin:12px 0;max-width:100%}
body #app .q53-next-action .jq-primary{min-height:44px;max-width:100%;white-space:normal;border-radius:999px;padding:10px 16px;line-height:1.3}
@media(min-width:900px){body:is([data-view="event"],[data-view="setlist"]) #app > .q53-next-action{margin-top:76px}}
body[data-view="home"] #app:has(.q53-next-action) #askgo{background:var(--hb-ink-2);color:var(--hb-gold);border:1px solid var(--hb-line)}
/* Device layout contract (Y3, Fable r2): the brand row and the horizon chips fit their row;
   the tile rails (.hb-tiles, .rail-s) and the event category chip rail (#catrow) stay the designed
   horizontal carousels with scroll-snap; the sticky header stays sticky and clears the notch. */
#app .hb-brandrow { flex-wrap:wrap; }
#app .hb-chips.horizon-chips { flex-wrap:wrap; overflow:visible; min-width:0; }
#app .hb-chips .hb-chip.horizon-chip { flex:1 1 145px; min-width:0; max-width:100%; white-space:normal; }
/* The browser supplies the inset: the page starts below it and the sticky header sticks below it too. */
/* Safe-area top ownership is mobile-only. Applying this after the desktop
   navigation media query reset every wide view to zero top clearance. */
@media (max-width:899px) {
  body[data-view] { padding-top:env(safe-area-inset-top,0px); }
  body[data-view] .ghead { top:env(safe-area-inset-top,0px); }
} /* desktop keeps the primary navigation row and shell header offset */
html { scroll-padding-top:env(safe-area-inset-top,0px); }
/* C4 / FD-148 #24-25: reserve the raised dock plus the saved-plan strip,
   including breathing room at enlarged text sizes. Never suppress zoom. */
body.has-plan{padding-bottom:calc(140px + 7em + env(safe-area-inset-bottom,0px))}
body.has-plan:has(.home-plan-board:not([hidden])){padding-bottom:calc(140px + 7em + env(safe-area-inset-bottom,0px))}
html{scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
body.has-plan #app :is(button,input,a,summary){scroll-margin-bottom:calc(140px + 7em)}
#app :is(.hb-city-window,.trip-radar-list) > *{min-width:0}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:100;pointer-events:none}
/* At tablet width the 430px shell still needs the two-row phone header. */
@media (min-width:768px) and (max-width:899px) {
  body[data-view] .ghead { flex-wrap:wrap; }
  body[data-view] .ghead .gh-ctx { flex:1 0 100%; white-space:normal; overflow:visible; }
}

/* Q62: held night choices, using the board's existing tokens. */
.nb-night { border-top: 1px solid var(--hb-gold); }
.nb-stage { margin: 18px 0; }
.nb-choice { padding: 16px; border: 1px solid var(--hb-gold); border-radius: 8px; margin: 10px 0; overflow-wrap: anywhere; }
.nb-choice h3 { margin: 8px 0; }
.nb-choice p { line-height: 1.5; margin: 8px 0; }
.nb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.nb-meal-swap summary { cursor: pointer; padding: 12px 0; }
/* Scoped to [open]: any author rule setting display on a <details> child
   (regardless of selector specificity) beats the UA stylesheet's own
   details:not([open]) > *:not(summary){display:none} rule, since author
   origin always wins over user-agent origin for a non-!important
   declaration. An unscoped display:block here silently defeated native
   collapse, leaving every meal's every swap option laid out and
   clickable on the page at once, all the time. */
.nb-meal-swap[open] button { display: block; margin: 8px 0; }
.nb-swaps[hidden] { display: none; }