/* 2SO Wrapped: the public recap page (/wrapped.html). Served as /wrapped.css
   (scripts/build-public.sh), loaded after /site.css. Every figure and chart is
   computed in the page from the ops-owned /gigs.json; nothing here holds data. */

/* ---------- Page head + season switcher ---------- */
.wr-head{padding:64px 0 40px}
.wr-head h1{margin:16px 0 8px}
.wr-scope-name{display:block;color:var(--accent)}
.wr-head .lede{margin-top:24px}
.wr-scope{position:sticky;top:var(--nav-h);z-index:20;background:var(--nav);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wr-scope .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.wr-scope .wrap>.lbl{flex:none;color:var(--ink-muted)}
.seasons{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 0}
.seasons::-webkit-scrollbar{display:none}
.seasons button{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px;border:1px solid var(--line-input);background:transparent;color:var(--ink);transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.seasons button:hover{border-color:var(--accent)}
.seasons button[aria-checked="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.seasons .n{color:var(--ink-muted);font-weight:400}
.seasons button[aria-checked="true"] .n{color:var(--accent)}

/* ---------- Headline figures ---------- */
.wr-stats{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wr-stat{display:flex;flex-direction:column;gap:14px;padding:36px 24px;border-left:1px solid var(--line)}
.wr-stat:first-child{padding-left:0;border-left:0}
.wr-stat .num{font-size:88px}
.wr-stat:first-child .num{font-size:140px;color:var(--accent)}
.wr-stat .bsm{margin-top:auto}

/* ---------- Column charts (by month, by night of the week) ---------- */
.wr-charts{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px}
.wr-panel{padding:32px;display:flex;flex-direction:column;gap:24px}
.wr-panel .t-st{font-size:30px}
.colchart{position:relative;height:240px;margin:12px 0 36px 28px}
.colchart .grid{position:absolute;inset:0;pointer-events:none}
.colchart .grid span{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.colchart .grid span:first-child{border-top-color:var(--line-strong)}
.colchart .grid i{position:absolute;right:calc(100% + 10px);top:-8px;font:400 12px/16px var(--mono);font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.cols{position:relative;height:100%;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.col{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;outline-offset:-2px}
.col:focus-visible{outline:2px solid var(--accent)}
.stem{position:relative;display:flex;justify-content:center;width:100%}
.bar{display:block;width:min(24px,62%);height:100%;background:var(--accent);border-radius:4px 4px 0 0;transition:background-color .2s ease}
.col.zero .bar{display:none}
.col:hover .bar,.col:focus-visible .bar{background:var(--ink)}
.cap{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font:400 20px/1 var(--display);color:var(--ink)}
.tick{position:absolute;top:calc(100% + 10px);left:0;right:0;text-align:center;font:600 12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.col.peak .tick{color:var(--ink)}
.tip{position:absolute;bottom:calc(100% + 12px);left:50%;z-index:5;width:max-content;max-width:220px;padding:12px 14px;border:1px solid var(--line-strong);background:var(--surface-alt);box-shadow:0 12px 32px rgba(0,0,0,.5);transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none;text-align:left}
.col.tl .tip{left:0;transform:none}
.col.tr .tip{left:auto;right:0;transform:none}
.col:hover .tip,.col:focus-visible .tip{opacity:1;visibility:visible}
.tip strong{display:block;font:600 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tip span{display:block;margin-top:6px;font-size:13px;line-height:19px;color:var(--ink-soft)}
.chart-note{margin-top:-8px}

/* ---------- Ranked lists (venues, crews) ---------- */
.wr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:start}
.home-room{padding:32px;display:flex;flex-direction:column;gap:18px}
.home-room .t-md{overflow-wrap:anywhere}
.rank{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rank li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) 44px;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.rank-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.rank-name .bst{overflow-wrap:anywhere}
.rank-track{height:16px}
.rank-bar{display:block;height:100%;min-width:6px;background:var(--accent);border-radius:0 4px 4px 0}
.rank li:not(:first-child) .rank-bar{background:rgba(0,239,209,.55)}
.rank-n{font:400 28px/1 var(--display);text-align:right}
.rank-foot{margin-top:16px}

/* ---------- Cities ---------- */
.wr-cities{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.splitbar{display:flex;gap:2px;height:20px;margin-bottom:24px}
.splitbar span{display:block;min-width:6px;background:rgba(255,255,255,.34)}
.splitbar span:first-child{background:var(--accent);border-radius:4px 0 0 4px}
.splitbar span:last-child{border-radius:0 4px 4px 0}
.splitbar span:only-child{border-radius:4px}
.legend{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.legend li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.legend .sw{width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,.34)}
.legend li:first-child .sw{background:var(--accent)}
.legend .meta{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Map (drawn from venue coordinates; no tiles) ---------- */
.wr-map-card{margin-top:56px;padding:32px;display:flex;flex-direction:column;gap:24px}
.wr-map-card[hidden]{display:none}
.wr-map-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.map{min-width:0}
.map-frame{position:relative;background:#0a0a0a;border:1px solid var(--line)}
.map-frame svg{display:block;width:100%;height:auto;overflow:visible}
.map-frame .gl{stroke:rgba(255,255,255,.07);stroke-width:1}
.map-frame .scale line,.map-frame .north line,.map-frame .north path{stroke:var(--ink-muted);stroke-width:1.5;fill:none}
.map-frame .sc{font:600 11px var(--mono);letter-spacing:.08em;fill:var(--ink-muted)}
.map-frame .ghost{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5}
.map-frame .pin{cursor:pointer;outline:none}
.map-frame .pin .dot{fill:var(--accent);stroke:#0a0a0a;stroke-width:2;transition:fill .2s ease}
.map-frame .pin .halo{fill:transparent;stroke:transparent;stroke-width:2}
.map-frame .pin:hover .dot,.map-frame .pin:focus-visible .dot{fill:var(--ink)}
.map-frame .pin .hit{fill:transparent;stroke:none}
.map-frame .pin:hover .hit,.map-frame .pin:focus-visible .hit{fill:rgba(255,255,255,.06)}
.map-frame .pin:focus-visible .halo{stroke:var(--accent)}
.map-frame .hull circle:first-child{fill:rgba(0,239,209,.08);stroke:var(--accent);stroke-width:1.5}
.map-frame .hull.off circle:first-child{fill:none;stroke:rgba(255,255,255,.3)}
.map-frame .hull .mini{fill:var(--accent);stroke:none}
.map-frame .hull .mini.ghost{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1}
.map-frame .lab{font:600 13px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#0a0a0a;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.map-tip{position:absolute;z-index:5;width:max-content;max-width:240px;padding:12px 14px;border:1px solid var(--line-strong);background:var(--surface-alt);box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none}
.map-tip.on{opacity:1;visibility:visible}
.map-tip strong{display:block;font:600 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.map-tip span{display:block;margin-top:6px;font-size:13px;line-height:19px;color:var(--ink-soft)}
.map-side{display:flex;flex-direction:column;gap:24px;min-width:0}
.map-inset .lbl{display:block;margin-bottom:10px}
.map-facts{margin:0;display:grid;border-top:1px solid var(--line)}
.map-facts>div{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-bottom:1px solid var(--line)}
.map-facts dd{margin:0}
.js .draw .map-frame svg{opacity:0}
.js .draw.in .map-frame svg{opacity:1;transition:opacity .8s ease}

/* ---------- Bill ---------- */
.bill{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.bill[hidden]{display:none}
.bill .chips{display:flex;flex-wrap:wrap;gap:8px}
.bill .chips span{padding:9px 12px;border:1px solid var(--line-input);font:600 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* ---------- Milestones ---------- */
.moments{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.moment.span2{grid-column:span 2}
.moment{min-height:220px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
a.moment:hover{color:var(--ink)}
.moment .t-sm{overflow-wrap:anywhere}
.moment .stack{display:flex;flex-direction:column;gap:8px}
.moment-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

/* ---------- Closing call ---------- */
.wr-cta{padding:56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.wr-cta .t-lg{margin-top:16px}
.wr-cta .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}

.wr-state{padding:48px 0 96px}
[data-wr][hidden]{display:none}

/* Motion: bars draw in once, from the baseline, when the charts scroll into view. */
.js .draw .bar{clip-path:inset(100% 0 0 0)}
.js .draw .rank-bar,.js .draw .splitbar span{clip-path:inset(0 100% 0 0)}
.js .draw.in .bar,.js .draw.in .rank-bar,.js .draw.in .splitbar span{clip-path:inset(0 0 0 0);transition:clip-path .8s cubic-bezier(.2,.8,.2,1)}
.js .draw.in .col:nth-child(n) .bar{transition-delay:calc(var(--i,0) * 40ms)}

/* ---------- Tablet (900px and below) ---------- */
@media (max-width:900px){
  .wr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wr-stat{padding:28px 20px}
  .wr-stat:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}
  .wr-stat:nth-child(2),.wr-stat:nth-child(4){padding-left:0;border-left:0}
  .wr-stat:nth-child(2),.wr-stat:nth-child(3){border-bottom:1px solid var(--line)}
  .wr-charts,.wr-split,.wr-cities,.wr-cta,.wr-map-grid{grid-template-columns:1fr}
  .moments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moments .moment:only-child{grid-column:1/-1}
  .wr-cta .actions{justify-content:flex-start}
}

/* ---------- Phone (620px and below) ---------- */
@media (max-width:620px){
  .wr-head{padding:48px 0 32px}
  .wr-scope .wrap{min-height:64px;gap:14px}
  .wr-scope .wrap>.lbl{display:none}
  .wr-stat{padding:24px 14px}
  .wr-stat .num{font-size:56px}
  .wr-stat:first-child .num{font-size:96px}
  .wr-panel,.home-room,.wr-map-card{padding:22px 18px}
  .wr-map-card{margin-top:40px}
  .wr-panel .t-st{font-size:24px}
  .colchart{height:200px;margin-left:22px}
  .tick{font-size:11px;letter-spacing:0}
  .cap{font-size:17px}
  .rank li{grid-template-columns:minmax(0,1fr) 40px;row-gap:10px;column-gap:14px}
  .rank-name{grid-column:1/-1}
  .rank-n{font-size:24px}
  .wr-cities{gap:28px}
  .moments{grid-template-columns:1fr;gap:10px}
  .moment.span2{grid-column:auto}
  .moment{min-height:0;padding:22px 18px}
  .wr-cta{padding:32px 20px;gap:28px}
  .wr-cta .actions{display:grid}
  .wr-cta .actions .button{min-height:56px}
}

@media (prefers-reduced-motion:reduce){
  .js .draw .bar,.js .draw .rank-bar,.js .draw .splitbar span{clip-path:none}
  .js .draw .map-frame svg{opacity:1}
}