/*
 * Today (vendor-page/today.js), as the Nov 2026 board, on the operator kit
 * (paste/op-shell.css). The kit draws the pieces; this binds the page's own
 * hooks to them (the sign's .v-state / .v-hr / .v-note, the events' .v-ev,
 * the reply box's .d-reply) and settles the older sheets that would win.
 *
 * Everything on paper (.cut, tickets, the bands' cards) stays paper in the
 * dark, so its words are set in the paper's ink, never var(--ink).
 */

.vt { display: block; max-width: 1480px; }
.vt .xsec-head .lede { margin: 0; }
.vt .h2 { overflow-wrap: anywhere; }

/* ── The hero ────────────────────────────────────────────────────────────── */
.vt-hero { margin-top: 0; }
.vt-hero-copy { min-width: 0; }
.vt-hero .xh1.d-title { margin-top: 18px; font-size: clamp(40px, 5.1vw, 80px); line-height: .98; letter-spacing: -.046em; overflow-wrap: anywhere; }
.vt-hero .xh1 .v-inst-state { display: inline-block; }
.vt-hero .v-digest { margin: 24px 0 0; max-width: 36em; }

/* The sign: what is true, how long, and a note. */
.vt-controls { display: block; }
.vt-controls .xlbl.v-label { margin: 0; }
.vt-hero .xtags.vp-states.v-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; margin-top: 14px; padding: 0; background: none; box-shadow: none; }
.vt-hero .xtags.vp-states.v-track:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-hero .xtag.v-state { position: relative; min-width: 0; min-height: 0; border: 0; font: inherit; color: inherit; transition: translate 220ms var(--ease-out), rotate 320ms var(--ease-spring), scale 140ms var(--ease-out); }
.vt-hero .xtag .stamp.v-state-word { max-width: 100%; height: 30px; padding: 0 12px 0 10px; font-size: 14px; gap: 7px; }
.vt-hero .xtag .v-state-why { margin: 0; }
.vt-hero .xtag:active { scale: .98; }
@media (hover: hover) { .vt-hero .xtag:not([aria-pressed="true"]):hover { --tilt: 0deg; translate: 0 -2px; } }
.vt-hero .xtag:disabled { cursor: progress; }

.vt-hero .xhold .v-for { display: contents; }
.xroot .vt-hero .xhold .v-for .xchip.v-hr {
  height: 40px; min-width: 0; padding: 0 16px; border-radius: 99px; border: 0;
  background: var(--ground2); color: var(--ink2); box-shadow: none; font: 650 16px/1 var(--f);
  transition: background-color 160ms ease, color 160ms ease, scale 140ms var(--ease-out);
}
.xroot .vt-hero .xhold .v-for .xchip.v-hr[aria-pressed="true"] { background: var(--ink); color: var(--ground); font-weight: 750; }
@media (hover: hover) { .xroot .vt-hero .xhold .v-for .xchip.v-hr:not([aria-pressed="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, var(--ground2)); } }
.xroot .vt-hero .xhold .v-for .xchip.v-hr:active { scale: .97; }

.xroot .vt-hero .xnote .xfield { gap: 12px; cursor: text; transition: box-shadow 160ms ease; }
.xroot .vt-hero .xnote .xfield:focus-within { box-shadow: inset 0 0 0 2px var(--accent), var(--ring); }
.xroot .vt-hero .xnote input.v-note {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; outline: 0; color: var(--ink); font: 500 17px/1.2 var(--f);
}
.xroot .vt-hero .xnote input.v-note::placeholder { color: var(--ink3); opacity: 1; }
.xroot .vt-hero .xnote .v-note-count { flex: none; margin-left: 0; font-variant-numeric: tabular-nums; }
.xroot .vt-hero .xnote .v-note-save { white-space: nowrap; }
.xroot .vt-hero .xnote .v-note-save:disabled { opacity: 1; background: transparent; color: var(--ink3); box-shadow: inset 0 0 0 1.5px var(--rule2); cursor: default; }
.xroot .vt-hero .xnote .v-note-save:disabled .dot { background: currentColor; opacity: .55; box-shadow: none; }
.vt-hero .xclear b { color: var(--ink); font-weight: 750; }
.vt-hero .xclear .link { font-size: inherit; }
@media (hover: none) { .vt-keys { display: none; } }
.vt-hero .v-status-notice { margin-top: 10px; font-size: 15px; }

/* Without the plan: the sign, locked. */
.vt-locked { display: grid; justify-items: start; gap: 12px; max-width: 560px; padding: 24px 24px 26px; --tilt: -.6deg; text-align: left; }
.vt-locked b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.vt-locked p { margin: 0; font-size: 16px; color: var(--ink2); max-width: 32em; }
.vt-locked .btn { margin-top: 6px; }

/* The stage: the marker in the place's own colour. */
.vt-hero .xstage { min-width: 0; }
.xroot .xmarker .tile { background: var(--pc, #EF7A2C); }
.xroot .xmarker .tile::after { background: var(--pc, #EF7A2C); }
.xroot .xmarker .tile > svg { width: 28px; height: 28px; }
.xroot .xmarker .tile.has-logo { background: #fff; }
.xroot .xmarker .tile.has-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; }
.xroot .xmarker .beacon { background: radial-gradient(closest-side, color-mix(in srgb, var(--pc, #EF7A2C) 45%, transparent), color-mix(in srgb, var(--pc, #EF7A2C) 12%, transparent) 70%, transparent); }
.xroot .xpin .cover { background: #E9E1CF; }
.xroot .xpin .pp-live { gap: 0; }
.xroot .xpin .say .mk { font-weight: 650; }
.xroot .xpin .acts .btn { pointer-events: none; }
.xroot .xpin .acts .btn.quiet { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px rgba(29,31,34,.3); }

/* ── 01 How it is going ──────────────────────────────────────────────────── */
.xroot .vt-chart .cap .link { color: #1D1F22; font-size: inherit; }
.vt-chart .vt-soon { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 26px; }
.vt-chart .vt-soon i { display: block; height: 46px; border-radius: 6px; background: rgba(29,31,34,.05); outline: 1.5px dashed rgba(29,31,34,.28); outline-offset: -2px; }
.vt-chart .vt-soon i.on { background: #1D1F22; outline: 0; }
.vt-chart .top + .cap { margin-top: 12px; }

.xroot button.xspec { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.xroot .xspec .n { color: var(--ink); }
.xroot .xspec .up { color: var(--ink); }
@media (hover: hover) { .xroot button.xspec:hover .k { color: var(--ink); } .xroot button.xspec:hover .n span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; } }
.xroot .xclean .stamp.lg { --st: #2E6B47; }

/* ── 02 What people said ─────────────────────────────────────────────────── */
.vt-said .xrevs.is-empty { min-height: 380px; }
.xroot .xrev { color: #1D1F22; }
.xroot .xrev .by, .xroot .xrev .when { color: #67625A; }
.xroot .xrev.r1:has(.d-reply-editor:not([hidden])) { z-index: 4; }
.vt-reply { margin-top: 12px; padding: 10px 12px 12px; border-radius: 10px; background: #FBF6EA; font-size: 15.5px; line-height: 1.4; color: #3A3934; }
.vt-reply b { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #67625A; }
.xroot .vt-reply-box .xreply { width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: text; }
.xroot .vt-reply-box .xreply .xfield { margin: 0; color: #67625A; }
.xroot .vt-reply-box .xreply .btn { cursor: pointer; }
.vt-reply-box:has(.d-reply-editor:not([hidden])) .xreply { display: none; }
.xroot .vt-reply-box .d-reply-editor { display: grid; gap: 10px; margin-top: 14px; }
.xroot .vt-reply-box .d-reply-input { width: 100%; min-height: 96px; padding: 12px 14px; border: 0; border-radius: 12px; background: #FBF6EA; color: #1D1F22; box-shadow: inset 0 0 0 1.5px rgba(29,31,34,.18); font: 500 16px/1.45 var(--f); }
.xroot .vt-reply-box .d-reply-input:focus { box-shadow: inset 0 0 0 2px var(--accent), var(--ring); outline: 0; }
.xroot .vt-reply-box .d-reply-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.xroot .vt-reply-box .d-reply-count { margin-right: auto; font-size: 14px; color: #67625A; }
.xroot .vt-reply-box .v-btn { --bh: 44px; height: 44px; padding: 0 18px; border-radius: 99px; font: 700 16px/1 var(--f); }
.xroot .vt-reply-box .d-reply-cancel { background: transparent; color: #1D1F22; box-shadow: inset 0 0 0 1.5px rgba(29,31,34,.3); }
.xroot .vt-reply-box .d-reply-save { background: #1D1F22; color: #FBF8F1; box-shadow: none; }
.xroot .vt-reply-box .d-reply-public { margin: 0; font-size: 15px; color: #67625A; }
.xroot .vt-reply-box .d-reply-notice { margin-top: 8px; font-size: 15px; color: #3A3934; }

/* ── 03 Your listing ─────────────────────────────────────────────────────── */
.vt-listing .xprog { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.vt-listing .xstep b { overflow-wrap: anywhere; }
.vt-listing .xlist .h2 { margin-top: 18px; font-size: clamp(34px, 3.7vw, 58px); }
.vt-listing .xlist .lede { margin-top: 20px; max-width: 30em; font-size: 18.5px; }
.vt-card { color: #1D1F22; }
.xroot .vt-card h3 { color: #1D1F22; overflow-wrap: anywhere; }
.xroot .vt-card .sub { color: #67625A; }
.vt-cover { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.vt-cover img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 2px; }
.xroot .vt-card .xslot { border: 0; background-color: transparent; color: #3A3934; font: inherit; font-size: 15.5px; }
.xroot .vt-card .xslot > span:last-child { min-width: 0; }
.xroot .vt-card .xslot b { color: #1D1F22; }
.xroot .vt-card .xslot .plus svg.i { width: 18px; height: 18px; }
.xroot .vt-card .xslot.cover { background: linear-gradient(rgba(247,240,224,.86), rgba(247,240,224,.86)), var(--art, none) center / cover, rgba(70,98,146,.06); }
.xroot .vt-card .xslot.cover.next { background: linear-gradient(rgba(240,226,160,.82), rgba(240,226,160,.82)), var(--art, none) center / cover; }
.xroot .vt-card .xslot.cover .plus svg.i { width: 22px; height: 22px; }
.xroot .vt-card .xslot.vt-filled { outline: 0; background: #FBF6EA; }
.xroot .vt-card .xslot.vt-filled .plus { background: rgba(29,31,34,.08); color: #1D1F22; }
.xroot .vt-card .xslot.vt-filled > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.xroot .vt-card .xslot { transition: background-color 160ms ease, scale 140ms var(--ease-out); }
.xroot .vt-card .xslot:active { scale: .99; }
@media (hover: hover) { .xroot .vt-card .xslot:not(.next):not(.vt-filled):hover { background-color: rgba(70,98,146,.08); } .xroot .vt-card .xslot.vt-filled:hover { background: #F4EDDC; } }
.xroot .vt-menu .k { color: #67625A; }
.xroot .vt-menu .row { min-height: 0; margin-top: 6px; padding: 0; border-radius: 0; background: none; color: #1D1F22; }
.xroot .vt-menu .row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xroot .vt-menu .row span:last-child { color: #3A3934; }

/* ── 04 What is on: tickets ──────────────────────────────────────────────── */
.vt-evs { display: block; }
.xroot .xtickets .xticket.v-ev,
.xroot .xtickets .xticket.v-ev-new,
.xroot .xtickets .xticket.v-ev-idea {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: #1D1F22; font: inherit; font-size: 16px; text-align: left; min-width: 0;
}
.xroot .xticket .v-ev-title { display: block; color: #1D1F22; font-size: 24px; font-weight: 800; overflow-wrap: anywhere; }
.xroot .xticket.v-ev .low { flex-wrap: wrap; }
.xroot .xticket .v-ev-cancel { padding: 0; font-size: 15px; font-weight: 650; color: rgba(29,31,34,.78); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .xroot .xticket .v-ev-cancel:hover { color: #AE2A31; } }
.xroot button.xticket { transition: rotate 320ms var(--ease-spring), translate 220ms var(--ease-out); }
@media (hover: hover) { .xroot button.xticket:hover { rotate: 0deg; translate: 0 -3px; background: none; } }
.xroot button.xticket:active { translate: 0 1px; }
.vt-evs .xempty .link { font-size: inherit; color: var(--ink); }
.vt-evs .xempty:has(.v-ev-add[hidden]) { display: none; }

.vt-evs .v-ev-form { max-width: 920px; margin: 0 0 28px; padding: 24px 24px 26px; border-radius: 16px; background: var(--sheet); box-shadow: var(--shadow); }
.vt-evs .v-ev-form .v-input { background: var(--ground2); }
@media (min-width: 900px) {
  .vt-on .v-ev-form:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
  .vt-on .v-ev-form > .v-form-foot, .vt-on .v-ev-form > .v-notice { grid-column: 1 / -1; }
}

/* ── 05 Sponsored, and the plan ──────────────────────────────────────────── */
.xroot .xcoupon { color: #1D1F22; }
.xroot .xcoupon .kick { color: #67625A; }
.xroot .xcoupon .price span, .xroot .xcoupon p { color: #3A3934; }
.xroot .xcoupon .line .tile { background: var(--pc, #EF7A2C); }
.xroot .xcoupon .line .tile svg { width: 20px; height: 20px; }
.xroot .xcoupon .line > span { min-width: 0; }
.xroot .xcoupon .line span span { color: #3A3934; }

/* Without the plan: the QR, and what the plan adds. */
.vt-free-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px 40px; align-items: start; }
/* Without the plan: the poster as a ticket with its code on the stub (the
   QR & share board's), and Insights as a taped paper slip with a print. */
.vt-free .k { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vt-poster .vt-poster-t { margin-top: 12px; font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.vt-poster .note { max-width: 30em; }
.vt-poster .qr-sends { margin-top: 20px; }
.xroot button.vt-teaser { position: relative; display: grid; justify-items: start; gap: 0; margin-top: 18px; padding: 26px 26px 28px; border: 0; font: inherit; color: #1D1F22; text-align: left; cursor: pointer; --tilt: 1.4deg; }
.vt-teaser .k { color: #5F5A52; padding-right: 92px; }
.vt-teaser .vt-teaser-t { display: block; margin-top: 12px; padding-right: 92px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.vt-teaser .vt-teaser-why { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; color: #47443E; }
.vt-teaser .vt-teaser-go { display: inline-block; margin-top: 16px; font-size: 16px; font-weight: 750; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vt-teaser .vt-teaser-art { position: absolute; right: -14px; top: -26px; width: 104px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: 6deg; box-shadow: 0 16px 24px -14px rgba(0,0,0,.55); }
@media (max-width: 760px) { .vt-teaser .vt-teaser-art { right: -2px; width: 88px; } .vt-teaser .k, .vt-teaser .vt-teaser-t { padding-right: 74px; } }
@media (hover: hover) { .xroot button.vt-teaser:hover { --tilt: .4deg; } }
.xroot button.vt-teaser:active { scale: .99; }

/* ── Narrower columns: the board's two columns stack before they crowd ──── */
@media (max-width: 1180px) {
  .vt-hero.xhero, .vt .xgoing { grid-template-columns: minmax(0, 1fr); }
  .vt-hero .xstage { width: 100%; max-width: 680px; min-height: 700px; margin-top: 8px; }
  .vt .xtickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .vt .xlist, .vt .xband .in, .vt .xband.short .in, .vt .xsec-head, .vt-free-row { grid-template-columns: minmax(0, 1fr); }
  .vt .xcoupon { justify-self: start; }
}

/* ── The band bleeds to the column's own gutter ──────────────────────────── */
.xroot .vt .xband { margin-left: calc(12px - var(--xg)); margin-right: calc(12px - var(--xg)); }

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vt-hero .xh1.d-title { font-size: 42px; }
  .vt-hero .xtags.vp-states.v-track,
  .vt-hero .xtags.vp-states.v-track:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .vt-hero .xtag.v-state { padding: 14px 12px 16px; }
  .xroot .vt-hero .xnote .v-note-save { width: 100%; }
  .vt-hero .xstage { min-height: 640px; }
  .xroot .vt .xband { margin-left: -8px; margin-right: -8px; }
  .xroot .xtickets .xticket .v-ev-title { font-size: 20px; }
  .xroot .vt-reply-box .d-reply-bar .v-btn { flex: 1 1 auto; }
}
@media (max-width: 359px) {
  .vt-hero .xh1.d-title { font-size: 36px; }
  .vt-hero .xtag .stamp.v-state-word { font-size: 12.5px; padding: 0 9px 0 8px; letter-spacing: .06em; }
  .vt .xtickets { gap: 16px 10px; }
  .xroot .xtickets .xticket { padding: 14px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-hero .xtag.v-state, .xroot button.xticket, .xroot .vt-card .xslot, .xroot .vt-hero .xhold .v-for .xchip.v-hr { transition: none; }
  .vt-hero .xtag:not([aria-pressed="true"]):hover, .xroot button.xticket:hover { translate: none; }
}