:root {
  --bg: #0a0c11; --panel: #141c29; --panel2: #1d2a3c; --line: #475e7b;
  --text: #e8ecf4; --muted: #b6c2d5; --faint: #a9b8cf;
  --section-header: #26374f; --section-open: #2c425f; --control-line: #718bac;
  --accent: #5b8cff;
  --danger: #ff5d5d; --warn: #ffa53a; --good: #46d18c; --dim: #6b7280;
  --r: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid #adc8ff; outline-offset: 3px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- chrome ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
header h1 { margin: 0; font-size: 16px; letter-spacing: -.2px; }
.sub { color: var(--faint); font-size: 11.5px; }
.headright { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; max-width: 100%; }
.pill {
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.pill [data-status-age] { font-variant-numeric: tabular-nums; }
.pill.connection-error { white-space: normal; max-width: 32ch; color: var(--warn); }
#appRetry, #authRetry { min-height: 32px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.ok { background: var(--good); box-shadow: 0 0 7px var(--good); }
.dot.warn { background: var(--warn); box-shadow: 0 0 7px var(--warn); }
.bad { background: var(--danger); box-shadow: 0 0 7px var(--danger); }

.tabs { position: relative; display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 11px 15px; cursor: pointer;
  font-size: 13px; font-weight: 600; border-radius: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tabpane { display: none; }
/* minmax(0,…) stops a wide table from stretching the whole page sideways;
   without it the nowrap cells force every panel past the viewport edge. */
.tabpane.active { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }

.loading-progress {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 22px; border-bottom: 1px solid rgba(91,140,255,.45);
  background: rgba(10,12,17,.96); color: var(--muted);
  font-size: 11px; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}
.loading-progress-track {
  height: 5px; overflow: hidden; border-radius: 999px;
  background: var(--panel2);
}
.loading-progress-bar {
  position: relative; width: 0; height: 100%; overflow: hidden;
  border-radius: inherit; background: linear-gradient(90deg, #5b8cff, #8aabff);
  box-shadow: 0 0 10px rgba(91,140,255,.5);
  transition: width 180ms ease-out;
}
.loading-progress-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: loading-progress-sweep 1s linear infinite;
}
.loading-progress.complete .loading-progress-bar {
  background: var(--good); box-shadow: 0 0 10px rgba(70,209,140,.45);
}
.loading-progress.complete .loading-progress-bar::after { animation: none; opacity: 0; }
.loading-progress span { white-space: nowrap; }
@keyframes loading-progress-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .loading-progress-bar { transition: none; }
  .loading-progress-bar::after { animation: none; }
}

.section-loader {
  display: flex; justify-content: center; align-items: center;
  width: 100%; min-height: 82px; padding: 12px;
}
.section-loader.compact {
  display: inline-flex; width: auto; min-height: 0; padding: 4px 8px;
  vertical-align: middle;
}
.section-loader-ring {
  --section-progress: 0%;
  position: relative; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  color: var(--text); font-size: 10px; font-weight: 750;
  font-variant-numeric: tabular-nums;
  background: conic-gradient(var(--accent) var(--section-progress), var(--panel2) 0);
  box-shadow: 0 0 12px rgba(91,140,255,.28);
  transition: background 180ms ease-out, box-shadow 180ms ease-out;
  animation: section-loader-pulse 1.4s ease-in-out infinite;
}
.section-loader-ring::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--panel); border: 1px solid rgba(91,140,255,.22);
}
.section-loader-ring > span { position: relative; z-index: 1; }
.section-loader.compact .section-loader-ring { width: 38px; height: 38px; font-size: 8px; }
@keyframes section-loader-pulse {
  0%, 100% { box-shadow: 0 0 7px rgba(91,140,255,.22); }
  50% { box-shadow: 0 0 16px rgba(91,140,255,.52); }
}
@media (prefers-reduced-motion: reduce) {
  .section-loader-ring { animation: none; transition: none; }
}

main { padding: 18px 22px 70px; max-width: 1500px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; min-width: 0; }
.panel > h2 {
  margin: 0 0 13px; font-size: 12px; color: var(--text);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; }
.stat { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; }
.stat b { display: block; font-size: 20px; line-height: 1.1; }
.stat span { display: block; color: var(--faint); font-size: 11px; margin-top: 4px; }

/* Single-glance verdict at the top of the Data tab. */
.banner { border-radius: var(--r); padding: 15px 17px; border: 1px solid; }
.banner-main { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.banner-sub { font-size: 12.5px; margin-top: 3px; opacity: .85; }
.banner.up { background: rgba(70,209,140,.09); border-color: rgba(70,209,140,.35); color: var(--good); }
.banner.down { background: rgba(255,93,93,.10); border-color: rgba(255,93,93,.4); color: var(--danger); }
/* Deliberate pause: not a fault, but nothing is being collected either. */
.banner.warn { background: rgba(240,180,60,.10); border-color: rgba(240,180,60,.4); color: var(--warn, #f0b43c); }
.banner.mid { background: rgba(255,165,58,.09); border-color: rgba(255,165,58,.35); color: var(--warn); }
.banner.neutral { background: var(--panel2); border-color: var(--line); color: var(--muted); }
.vstrip {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--dim);
  border-radius: 8px; background: var(--panel2);
}
.vstrip.up { border-left-color: var(--good); background-image: linear-gradient(90deg, rgba(70,209,140,.12), transparent); }
.vstrip.mid { border-left-color: var(--warn); background-image: linear-gradient(90deg, rgba(255,165,58,.12), transparent); }
.vstrip.down { border-left-color: var(--danger); background-image: linear-gradient(90deg, rgba(255,93,93,.12), transparent); }
.vstrip.neutral { border-left-color: var(--dim); }
.vs-action {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.vstrip.up .vs-action { color: var(--good); }
.vstrip.mid .vs-action { color: var(--warn); }
.vstrip.down .vs-action { color: #ff9999; }
.vstrip.neutral .vs-action { color: var(--muted); }
.vstrip > .retail-history { margin: 12px -10px 0; }
.primary-data-warning { margin: 12px 0 0; }

/*
 * When the show is, ahead of everything else. Fri/Sat carry most of this
 * market's volume, so the weekday is not decoration — it is the first thing
 * that sets what a ticket is worth. Rendered in the venue's timezone.
 */
.ewhen {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 9px;
}
.ewhen-day { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.ewhen-rest { font-size: 13px; color: var(--muted); }
.ewhen-out {
  font-size: 11px; font-weight: 700; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}

/* Bid history, shown only for tiers actually held. */
.mine-chart { margin-top: 12px; }
.bid-history-note { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.bid-history-plot { position: relative; height: 240px; }

.read-why { margin-top: 8px; }
.signal-reasoning { padding: 4px 0; min-width: 0; overflow-wrap: anywhere; }
.signal-main-reason { margin: 6px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.read-why .signal-factors { list-style: none; display: grid; gap: 8px; margin: 8px 0 0; padding: 0; }
.read-why .signal-factors li { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
/* Which tiers are worth holding — the answer to "what should I be buying". */
.holds-label {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .8px; font-weight: 700; margin-right: 2px;
}

/* ---------- action cards: the primary view ---------- */
.cards { display: grid; gap: 10px; }
.card {
  position: relative; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px 13px 17px; overflow: hidden;
}
/* Colour stripe carries the verdict, so no label is needed to scan it. */
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--dim);
}
.card.v-DUMP_NOW::before, .card.v-SELL_NOW::before { background: var(--danger); }
.card.v-SELL_SOON::before { background: var(--warn); }
.card.v-HOLD::before { background: var(--good); }
.card.v-DUMP_NOW, .card.v-SELL_NOW { background-image: linear-gradient(90deg, rgba(255,93,93,.07), transparent 55%); }
.card.v-SELL_SOON { background-image: linear-gradient(90deg, rgba(255,165,58,.06), transparent 55%); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.card-title { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.card-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pl { text-align: right; line-height: 1.15; white-space: nowrap; }
.pl-big { font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.pl-sub { font-size: 11px; color: var(--faint); }
.pos { color: var(--good); } .neg { color: var(--danger); }

/* Two sell prices side by side: the ask you should post, and the bid you could
   take right now. Showing one number alone is what made "bid" read as a price. */
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.price { background: #0e131c; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.price-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.price-val { font-size: 19px; font-weight: 700; letter-spacing: -.4px; margin-top: 2px; }
.price-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.price:first-child .price-val { color: var(--good); }

/* ---------- venue toggle + event rows ---------- */
.venue-chips {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 11px;
  margin-bottom: 11px; border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.venue-chips::-webkit-scrollbar { display: none; }
.vchip {
  background: #0e131c; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.vchip:hover { color: var(--text); }
.vchip.on { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 700; }
.past-events-list { display: grid; gap: 10px; }
.past-event { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.past-event > div { flex: 1 1 240px; min-width: 0; }
.past-event h3, .archived-event-banner h2 { margin: 4px 0; font-size: 16px; }
.past-event p, .archived-event-banner p, .archived-note { margin: 6px 0; font-size: 12px; color: var(--muted); }
.past-event-state { color: #a0acc0; font-size: 11px; font-weight: 650; }
.archived-event-banner { margin-bottom: 14px; overflow-wrap: anywhere; }
.archived-tier .tnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Header above the tier cards. */
.sales-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 14px 0 8px;
}
.sales-sub { font-size: 11.5px; color: var(--muted); }

/*
 * Last 24 hours of a tier's price.
 *
 * Replaced a box plot, which showed the spread of past sales -- 0-4% wide on
 * nearly every tier -- while saying nothing about direction. Over the same day
 * a tier can move 25%, and direction is what decides sell-now-or-wait.
 */
.tsold {
  margin-top: 12px; padding: 14px 14px 12px; border-radius: 12px;
  background: #151d28; border: 1px solid #293445;
}
.tsold-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.tsold-top b {
  font-size: 24px; color: var(--text); letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.tsold-top span {
  font-size: 10px; color: #a0acc0; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 600;
}
.tsold-top em {
  font-style: normal; margin-left: auto; font-size: 11px; color: #97a4b8;
}
.tsold-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); }

.section-heading, .holding-shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.section-heading h1 { margin: 0 0 12px; font-size: 24px; }
.section-disclosure > summary {
  cursor: pointer; color: var(--text); font-weight: 600; padding: 8px 0;
}
.section-disclosure[open] > summary { margin-bottom: 12px; }
.section-disclosure.panel { padding: 12px 16px; }
.section-disclosure > .panel { margin: 12px 0 0; }
.holding-shortcut { margin: 14px 0; font-size: 13px; color: var(--muted); }
.holding-shortcut button { min-height: 44px; }
.price-history { margin-top: 8px; }
.site-guide-trigger { display: inline-flex; align-items: center; align-self: center; gap: 7px; margin-left: auto; min-height: 44px; padding: 8px 10px; color: #c5d1e5; border: 0; background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.site-guide-trigger svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-guide-trigger:hover, .site-guide-trigger[aria-expanded="true"] { color: #fff; background: var(--panel2); }
.site-guide-popover { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; color: var(--muted); background: var(--panel); border: 1px solid #647b9c; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow-y: auto; }
.site-guide-popover::backdrop { background: rgba(5,9,16,.78); }
.site-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-guide-popover h2 { margin: 0 0 6px; color: var(--text); font-size: 17px; text-transform: none; letter-spacing: normal; }
.site-guide-heading h2 { margin: 0; }
.site-guide-heading button { min-height: 44px; padding: 8px 12px; }
.site-guide-lead { margin: 14px 0 10px; font-size: 13px; line-height: 1.5; }
.site-guide-lead strong { color: var(--text); }
.site-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.site-guide-grid p { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.site-guide-grid strong, .site-guide-grid span { display: block; }
.site-guide-grid strong { margin-bottom: 6px; color: var(--text); font-size: 14px; }
.site-guide-grid span { line-height: 1.55; font-size: 13px; }
.site-guide-grid em { display: inline-block; margin-top: 7px; color: #a9c0ee; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.site-guide-note { margin: 10px 0 0; line-height: 1.45; }
.site-guide-note strong { color: var(--text); }
@media (max-width: 760px) {
  .site-guide-trigger { padding-inline: 7px; gap: 5px; font-size: 11px; }
  .site-guide-popover { padding: 18px; }
  .site-guide-grid { grid-template-columns: 1fr; }
}
.focus-summary-row { display: grid; gap: 8px; min-width: 0; margin-bottom: 8px; }
#tkSummary { margin: 0; color: var(--muted); font-size: 14px; }
#focusAnalysisStatus { margin: 0; }
#focusAnalysisStatus .section-loader {
  position: static; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 40px; padding: 4px 0;
}
#focusAnalysisStatus .section-loader::after {
  content: attr(data-loading-label); color: var(--muted); font-size: 12px;
}
#focusAnalysisStatus .section-loader-ring { flex: none; width: 32px; height: 32px; font-size: 8px; }
#tab-insights #leadCurves { grid-template-columns: minmax(0, 1fr); }

.spark { --chart-bg: #101720; position: relative; margin-top: 8px; }
/* Gridlines sit behind the bars; the left gutter holds their price labels. */
.plot-area { position: relative; padding-left: 38px; }
.grid { position: absolute; inset: 0 0 0 38px; pointer-events: none; }
.grid-line {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgba(120,132,156,.22);
}
.grid-line span {
  position: absolute; right: 100%; top: -6px; padding-right: 6px;
  font-size: 9.5px; color: var(--faint); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spark-svg { display: block; width: 100%; height: 60px; overflow: visible; position: relative; }
/* The bar is the low-to-high range that period traded in. */
.rng-bar { fill: rgba(70,209,140,.32); stroke: rgba(70,209,140,.6); stroke-width: .5; }
/* The notch across it is the average, drawn wider so it reads as a level. */
.rng-avg { stroke: var(--good); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Averages written out: reading a number off an axis by eye was the problem. */
.avg-cols { position: relative; height: 34px; margin: 3px 0 0 38px; }
.avg-col {
  position: absolute; transform: translateX(-50%); text-align: center;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.avg-val {
  font-size: 12px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.avg-rng {
  font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.avg-none { font-size: 12px; color: var(--faint); }
.avg-hour { font-size: 9px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.history-help { margin: 6px 0 10px; color: #a5aec0; font-size: 11px; }
.history-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 0 8px; scrollbar-width: thin; scrollbar-color: #46546a var(--chart-bg); }
.history-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.history-scroll::-webkit-scrollbar-track { background: var(--chart-bg); }
.history-scroll::-webkit-scrollbar-thumb { background: #46546a; border: 2px solid var(--chart-bg); border-radius: 8px; }
.history-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.focus-tier-history, .focus-tier-history .price-history { min-width: 0; max-width: 100%; }
.history-line-frame { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); max-width: 100%; overflow: hidden; border: 1px solid #2d3d55; border-radius: 10px; background: radial-gradient(circle at 70% 20%, rgba(91,140,255,.08), transparent 45%), var(--chart-bg); }
.sale-line-y-axis { position: relative; z-index: 3; background: rgba(16,23,32,.96); border-right: 1px solid #34445c; box-shadow: 5px 0 12px rgba(0,0,0,.18); }
.sale-line-y-axis span { position: absolute; right: 8px; transform: translateY(-50%); color: #aebbd0; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-line-chart { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 0; overflow-x: auto; border: 0; border-radius: 0; background: transparent; }
.history-line-chart[data-pinch-zoom="true"] { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.history-zoom-controls {
  display: inline-flex; align-items: stretch; overflow: hidden;
  min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2);
}
.history-zoom-controls button {
  min-width: 40px; min-height: 38px; padding: 5px 10px; border: 0; border-radius: 0;
  color: var(--text); background: transparent; font: inherit; font-weight: 750; cursor: pointer;
}
.history-zoom-controls button + *, .history-zoom-controls * + button { border-left: 1px solid var(--line); }
.history-zoom-controls button:hover:not(:disabled), .history-zoom-controls button:focus-visible {
  color: #fff; background: rgba(91,140,255,.2);
}
.history-zoom-controls button:disabled { color: #637086; cursor: default; }
.history-zoom-level {
  display: inline-grid; min-width: 45px; place-items: center; padding: 0 8px;
  color: var(--muted); font-size: 11px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.recent-sale-pills {
  display: flex; gap: 6px; max-width: 100%; padding: 8px 2px 2px; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.recent-sale-pills::-webkit-scrollbar { display: none; }
.recent-sale-pill {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px;
  min-height: 44px; padding: 4px 9px; border: 1px solid #34445c; border-radius: 999px;
  color: #b8c8df; background: rgba(16,23,32,.72); font: inherit; cursor: pointer;
  scroll-snap-align: start;
}
.recent-sale-pill strong { color: #e5eefc; font-size: 11px; font-variant-numeric: tabular-nums; }
.recent-sale-pill span { color: #8795aa; font-size: 9px; white-space: nowrap; }
.recent-sale-pill .recent-sale-stamp { display: grid; gap: 2px; text-align: left; line-height: 1.2; }
.recent-sale-date { color: #bdcbe1; font-size: 9px; font-weight: 650; letter-spacing: .025em; }
.recent-sale-pill.latest { border-color: rgba(142,224,193,.58); }
.recent-sale-pill:hover, .recent-sale-pill:focus-visible, .recent-sale-pill.on {
  border-color: #8eb5ff; background: rgba(91,140,255,.16); outline: none;
}
.sale-line-svg { display: block; width: 100%; height: 220px; overflow: visible; }
.sale-line-grid { stroke: #42526d; stroke-width: 1.2; stroke-dasharray: 3 5; }
.sale-line-grid-time { stroke: #384a65; stroke-width: 1.15; stroke-dasharray: 2 6; }
.sale-line-axis-label { fill: #aab8cd; font-size: 9px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sale-price-area { fill: rgba(111,157,241,.14); }
.sale-price-range { stroke: #8eb5ff; stroke-width: 1.5; stroke-opacity: .4; }
.sale-line-point.summary > circle:not(.sale-line-point-halo) { stroke-width: 1.5; }
.history-summary-note { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sale-price-line {
  fill: none; stroke: #8eb5ff; stroke-width: 3.25; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(126,174,255,.42));
}
.sale-line-point-halo { fill: rgba(111,157,241,.12); stroke: none !important; }
.sale-line-point > circle:not(.sale-line-point-halo) { fill: #101720; stroke: #7da9f5; stroke-width: 3; }
.sale-line-point.latest > circle:not(.sale-line-point-halo) { fill: #8ee0c1; stroke: #d9fff1; }
.sale-line-point.latest .sale-line-point-halo { fill: rgba(142,224,193,.2); }
.sale-line-point { cursor: pointer; outline: none; }
.sale-line-point.on > circle:not(.sale-line-point-halo), .sale-line-point:focus > circle:not(.sale-line-point-halo) { fill: #fff; stroke: #8ee0c1; }
.sale-line-tooltip { position: fixed; inset: auto; margin: 0; z-index: 60; display: grid; align-content: start; grid-auto-rows: max-content; gap: 4px; width: max-content; height: max-content; min-height: 0; box-sizing: border-box; max-width: min(250px, calc(100vw - 16px)); max-height: min(260px, calc(100svh - 16px)); padding: 10px 12px; color: #f3f7ff; background: #0b1220; border: 1px solid #7896c1; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 12px; line-height: 1.4; overflow: auto; pointer-events: none; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .sale-line-tooltip { pointer-events: auto; }
}
.sale-line-tooltip strong { color: #dce8ff; font-size: 14px; font-variant-numeric: tabular-nums; }
.sale-line-tooltip-time { color: #b8c8df; font-weight: 650; }
.sale-line-tooltip-facts { color: #9eb5d7; }
.sale-line-tooltip small { color: #a5b1c4; font-size: 10px; line-height: 1.4; }
.history-scroll .spark-svg { height: 100px; }
.history-scroll .avg-cols { height: 58px; margin-top: 8px; }
.history-scroll .avg-col { width: 74px; }
.history-scroll .avg-hour { font-size: 10px; margin-top: 4px; }
.avg-date { font-size: 10px; color: var(--muted); margin-top: 2px; }
.history-trees { max-height: 340px; overflow-y: auto; padding: 0; border: 1px solid #263244; border-radius: 9px; background: var(--chart-bg); }
.distribution-plot { display: flex; position: relative; }
.distribution-axis { position: sticky; left: 0; z-index: 2; flex: 0 0 64px; background: var(--chart-bg); border-right: 1px solid #263244; box-shadow: 5px 0 12px rgba(0,0,0,.12); }
.distribution-axis span { position: absolute; right: 9px; transform: translateY(-50%); color: #a5b1c4; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.distribution-data { position: relative; flex: 1; min-width: 0; }
.distribution-data .grid { inset: 0; }
.distribution-data .grid-line { border-top: 1px solid rgba(143,163,190,.09); }
.history-trees .avg-cols { margin-left: 64px; position: sticky; bottom: 0; height: 64px; background: var(--chart-bg); border-top: 1px solid #293547; padding-top: 4px; z-index: 3; }
.history-trees .avg-hour { color: #a5b1c4; }
.history-trees .avg-date, .history-trees .avg-rng { color: #8593a9; }
.distribution-corner { position: sticky; left: 0; bottom: 0; width: 64px; height: 64px; margin-top: -64px; background: var(--chart-bg); border-top: 1px solid #293547; z-index: 4; pointer-events: none; }
.tree-stem { stroke: rgba(165,174,192,.16); stroke-width: 1; }
.tree-bar { fill: rgba(80,200,164,.3); stroke: rgba(99,215,181,.55); stroke-width: .6; transition: fill .15s ease, stroke .15s ease; }
.tree-count { fill: #eef8f5; stroke: rgba(16,23,32,.65); stroke-width: 2px; stroke-linejoin: round; paint-order: stroke; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tree-level:hover .tree-bar { fill: rgba(80,200,164,.55); stroke: #8ce3c6; }
.history-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; color: #b5c0d1; font-size: 11px; }
.history-window { padding: 2px 7px; border: 1px solid #334155; border-radius: 999px; font-size: 10px; color: #a5b1c4; }
.history-nav-hint { margin-left: auto; font-size: 10px; color: #96a4b9; }
.tree-key { display: inline-flex; align-items: center; gap: 7px; color: #a5b1c4; }
.tree-key i { width: 15px; height: 6px; border-radius: 3px; background: rgba(80,200,164,.45); border: 1px solid rgba(99,215,181,.55); }
.spark .spark-foot { margin-top: 10px; }
.history-source { font-size: 10px; color: #96a4b9; line-height: 1.6; margin: 7px 0; }
.history-method { font-size: 11px; color: #96a4b9; margin-top: 6px; }
.spark .history-method > summary, .spark .history-method[open] > summary { width: fit-content; padding: 8px 0; color: var(--muted); background: transparent; border: 0; font-size: 12px; font-weight: 400; }
.history-method summary { cursor: pointer; width: fit-content; padding: 3px 0; }
.history-method summary:hover { color: #d5deed; }
.history-method p { margin: 6px 0 0; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .tree-bar { transition: none; } }

.spark-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px; font-size: 10.5px; color: var(--faint);
}
.spark-key { display: flex; align-items: center; gap: 4px; }
.spark-key i { display: inline-block; }
.spark-key i.k-bar {
  width: 7px; height: 10px; border-radius: 2px;
  background: rgba(70,209,140,.32); border: 1px solid rgba(70,209,140,.6);
}
.spark-key i.k-avg { width: 10px; height: 2px; background: var(--good); margin-left: 5px; }

/* Hours / days switch, sitting with the section heading. */
.hmode { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line); }
.hmode button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 44px; min-width: 44px;
  padding: 5px 11px; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.hmode button.on { background: var(--accent); color: #06101f; }

/* Compact facts row replaces sentences */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: #0e131c; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.chip b { color: var(--text); font-weight: 600; }
.chip.hot { border-color: rgba(255,93,93,.4); color: #ffb3b3; background: rgba(255,93,93,.08); }
.chip.cool { border-color: rgba(70,209,140,.35); color: #a7e9c9; background: rgba(70,209,140,.07); }

/* Countdown to a hard expiry */
.timer { margin-top: 11px; }
.timer-row { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; }
.timer-label { color: var(--muted); }
.timer-val { font-weight: 700; }
.bar { height: 5px; border-radius: 3px; background: #0b0f16; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; transition: width .4s ease; }

/* Reasons hidden until asked for */
.why { margin-top: 10px; }
.why > summary {
  cursor: pointer; list-style: none; color: var(--faint); font-size: 11.5px;
  display: inline-flex; align-items: center; gap: 5px; user-select: none;
}
.why > summary::-webkit-details-marker { display: none; }
.why > summary::before { content: "▸"; font-size: 9px; }
.why[open] > summary::before { content: "▾"; }
.why > summary:hover { color: var(--muted); }
.why ul { margin: 8px 0 0; padding-left: 16px; color: var(--muted); font-size: 12px; }
.why li { margin-bottom: 3px; }

.card-actions { display: flex; gap: 6px; margin-top: 11px; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; margin: 0 -3px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--faint); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; }
tbody tr:hover { background: #182030; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.sub2 { display: block; color: var(--faint); font-size: 11px; font-weight: 400; }

/* ---------- badges ---------- */
.tag {
  display: inline-block; padding: 2.5px 8px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
}
.DUMP_NOW, .SELL_NOW { background: rgba(255,93,93,.16); color: var(--danger); }
.SELL_SOON { background: rgba(255,165,58,.16); color: var(--warn); }
.HOLD { background: rgba(70,209,140,.15); color: var(--good); }
.TOO_EARLY, .NO_DATA, .NO_ASK, .EXPIRED { background: rgba(107,114,128,.18); color: var(--dim); }

.note { background: rgba(255,165,58,.08); border: 1px solid rgba(255,165,58,.25);
  color: #ffd39c; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 11px; }
.muted { color: var(--muted); font-size: 12px; }
.empty { color: var(--faint); font-size: 13px; padding: 6px 0; }

/* ---------- controls ---------- */
button {
  background: #1b2231; color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 12.5px;
}
button:hover { border-color: var(--accent); }
button.primary, a.primary { background: var(--accent); border: 1px solid var(--accent); color: #06101f; font-weight: 700; }
button.danger-action { color: #ffadad; border-color: rgba(255,93,93,.55); background: rgba(255,93,93,.08); }
button.danger-action:hover { color: #fff; border-color: var(--danger); background: rgba(255,93,93,.18); }
:is(button, a, input, select, textarea):focus-visible { outline: 2px solid #adc8ff; outline-offset: 3px; }
button:disabled { opacity: .6; cursor: default; }
button.mini { padding: 3px 9px; font-size: 11.5px; }
button.link { background: none; border: 0; color: var(--accent); font-size: 12.5px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .7px; font-weight: 700; }
.input-hint { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 6px; text-transform: none;
  letter-spacing: 0; font-size: 12px; font-weight: 400; color: var(--muted); padding-bottom: 6px; }
label.inline { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
select, input[type="search"], input[type="number"], input[type="text"],
input[type="email"], input[type="password"] {
  background: var(--panel2); color: var(--text); border: 1px solid var(--control-line);
  border-radius: 7px; padding: 6px 9px; font-size: 13px; min-width: 108px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
select:focus, input:focus { outline: none; border-color: var(--accent); }
/* WebKit's native single-line select ignores min-height in some grid rows. */
select:not([multiple]):not([size]) { height: 44px; max-width: 100%; overflow: hidden; }
#p-event, #e-event { min-width: 290px; }
canvas { max-height: 260px; max-width: 100%; }
/* The event chart carries five tier lines plus trade markers, so it needs more
   vertical room than the summary charts or the plot collapses into a band. */
#eventChart { max-height: 340px; }

/* ---------- sign-in ---------- */
.gate { position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(89,130,246,.11), transparent 34%), var(--bg);
  display: flex; align-items: flex-start; justify-content: center; padding: 22px; z-index: 50; overflow-y: auto; }
.authcard { width: 100%; max-width: 400px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 24px; margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.24); display: flex; flex-direction: column; gap: 14px; }
.auth-kicker { margin: 0; color: #8fb3ff; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.authcard h1 { margin: -3px 0 0; font-size: 24px; letter-spacing: -.02em; }
.authcard > .sub { margin: 0 0 4px; line-height: 1.45; }
.authcard label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.authcard input { width: 100%; min-height: 44px; padding: 10px 11px; border-color: #52627c; background: #1b2638; }
.authcard select { width: 100%; min-width: 0; min-height: 44px; }
.authcard button.primary { min-height: 44px; padding: 10px; margin-top: 3px; }
.auth-mode { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line);
  border-radius: 9px; background: rgba(6,10,17,.42); }
.auth-mode button { min-height: 44px; border: 0; background: transparent; color: var(--muted); font-weight: 700; }
.auth-mode button[aria-selected="true"] { background: #28364c; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.24); }
#signin-google-actions { display: grid; gap: 10px; }
#signin-google-actions[hidden], .auth-provider[hidden] { display: none; }
.auth-provider { display: grid; gap: 7px; }
.auth-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.authcard .auth-remember { display: flex; flex-direction: row; align-items: center; gap: 8px;
  min-height: 44px; color: var(--muted); font-size: 12px; font-weight: 400; cursor: pointer; }
.authcard .auth-remember[hidden] { display: none; }
.authcard .auth-remember input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.authcard .auth-reveal { min-height: 44px; background: transparent; border-color: transparent;
  color: var(--muted); font-size: 12px; font-weight: 500; }
.authcard .auth-reveal:hover { color: #fff; border-color: #8fb3ff; background: rgba(77,124,217,.08); }
.profile-credentials { display: grid; gap: 11px; }
.profile-credentials[hidden] { display: none; }
.signup-options { display: grid; gap: 10px; }
.signup-options[hidden] { display: none; }
.signup-options .auth-hint { margin-top: 9px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.signup-intro { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.signup-options .primary { width: 100%; }
.signup-email-choice { margin: 0; padding: 0; border: 0; display: grid; gap: 7px; }
.signup-email-choice legend { margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
.authcard .signup-email-choice label {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start;
  padding: 9px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.authcard .signup-email-choice input { width: 16px; height: 16px; min-height: 0; margin: 1px 0 0; }
.authcard .signup-email-choice label[hidden] { display: none; }
.authcard #authRetry { min-height: 44px; }
.signup-email-choice span { display: grid; gap: 2px; }
.signup-email-choice b { font-size: 11.5px; }
.signup-email-choice small { color: var(--faint); font-size: 10.5px; font-weight: 400; }
.signup-email-choice label:has(input:disabled) { opacity: .65; cursor: not-allowed; border-style: dashed; }
.email-setup-visual { margin: 16px 0 0; padding: 14px; border: 1px dashed var(--line);
  border-radius: 10px; background: var(--panel2); display: grid; gap: 10px; }
.email-setup-visual figcaption { font-size: 11px; color: var(--muted); line-height: 1.5; }
.email-visual-field { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; overflow-wrap: anywhere; }
.email-visual-field small { color: var(--muted); }
.email-visual-field strong { font-size: 13px; }
.email-visual-action { justify-self: start; padding: 8px 12px; background: var(--accent); color: #071226; border-radius: 6px; font-size: 12px; }
#providerPasswordGuide h3 { margin: 0 0 10px; }
#providerPasswordGuide li { margin-bottom: 10px; line-height: 1.5; font-size: 13px; }
#providerPasswordGuide li > :is(a,button) { display: inline-flex; align-items: center; margin-top: 8px; }
#providerPasswordGuide li > a { padding: 8px 12px; text-decoration: none; border-radius: 8px;
  color: #071226; font-weight: 700; }
.authmsg { font-size: 12.5px; color: var(--danger); text-align: center; }
.authmsg:empty { display: none; }
.fineprint { color: var(--faint); font-size: 11px; text-align: center; margin: 0; line-height: 1.5; }
.policy-links a { color: #a9c4ff; text-decoration-color: rgba(169,196,255,.45); text-underline-offset: 2px; }
.policy-links a:hover { color: #d2e0ff; }

@media (max-height: 760px) {
  .gate { align-items: flex-start; }
}

@media (max-width: 640px) {
  main { padding: 14px 13px 60px; }
  header, .tabs { padding-left: 13px; padding-right: 13px; }
  .pl-big { font-size: 19px; }
  /* Tabs must not wrap on a phone; let them scroll sideways instead. */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 11px 12px; white-space: nowrap; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 6px; }
  .stat { padding: 9px 10px; }
  .stat b { font-size: 17px; }
  .banner-main { font-size: 17px; }
  th, td { padding: 7px 8px; }
}

/* ================= home: the ten-second phone check ================= */
/*
 * Deliberately plain: one column, large type, no tables and no charts. Every
 * card is a button, because on a phone the useful next step is always "show me
 * more about this one" and a tap target the size of a card cannot be missed.
 */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 84px; }

.hsec {
  margin: 12px 2px 0; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* Status earns one line, and only shouts when something is actually wrong. */
.hstat {
  padding: 9px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel); justify-self: start;
}
.hstat.ok { color: var(--good); border-color: rgba(70,209,140,.3); background: rgba(70,209,140,.08); }
.hstat.warn { color: var(--warn); border-color: rgba(255,165,58,.35); background: rgba(255,165,58,.09); }
.hstat.bad { color: var(--danger); border-color: rgba(255,93,93,.4); background: rgba(255,93,93,.1); }

/* ---- events: verdict first, price second, reasoning only when live ---- */
.hv {
  display: block; width: 100%; min-width: 0; container-type: inline-size; text-align: left; cursor: pointer;
  padding: 13px 15px; border-radius: var(--r);
  background: linear-gradient(145deg, rgba(29,42,60,.72), rgba(20,28,41,.98) 42%);
  border: 1px solid rgba(71,94,123,.72); color: var(--text);
  font: inherit; border-left-width: 4px; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hv:hover { border-color: rgba(105,132,169,.78); box-shadow: 0 11px 28px rgba(0,0,0,.22); }
.hv:active { transform: scale(.992); }
.hv.good { border-left-color: var(--good); }
.hv.mixed { border-left-color: var(--warn); }
.hv.poor { border-left-color: var(--danger); }
.hv.unknown { border-left-color: var(--dim); }
.hv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hv-title { display: grid; gap: 3px; min-width: 0; }
.hv-name { font-size: 15px; font-weight: 750; line-height: 1.22; }
.hv-when {
  flex: none; padding: 4px 7px; border-radius: 999px;
  background: rgba(120,132,156,.11); border: 1px solid rgba(120,132,156,.13);
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.hv-action { font-size: 13px; margin-top: 4px; font-weight: 600; }
.hv-subject { font-weight: 400; color: var(--muted); }
.hv-why { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.hv-none { margin-top: 8px; font-size: 12px; color: var(--faint); }

/* ---- pinned shortcut to your own tickets ---- */
.fab {
  position: fixed; right: 14px; z-index: 40;
  /* Clear of the iOS home indicator, which otherwise swallows the tap. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-radius: 999px;
  background: var(--accent); color: #06101f; border: 0;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fab:active { transform: scale(.96); }
.fab-icon { flex: none; display: block; }
.fab-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(6,16,31,.22); color: #06101f;
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}

#upcomingEventPicker { container-type: inline-size; padding: 18px; }
.eventpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.eventpick-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
.eventpick-actions #viewSelectedEvent { flex: 1; min-width: 0; max-width: 220px; min-height: 44px; padding: 10px 14px; }
.eventpick-actions .pinbtn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 76px; height: 44px; padding: 10px 12px; gap: 7px; font-size: 12px; font-weight: 600; border-radius: 8px; }
.eventpick-actions .pinbtn svg { flex-shrink: 0; }
.eventpick .inline { min-width: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 8px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.eventpick-preview { min-width: 0; overflow-wrap: anywhere; }
.eventpick-preview h2 { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.3px; text-transform: none; }
.eventpick-preview p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.event-source-badge { color: #b8d0ff; font-size: 12px; font-weight: 600; }
.official-event { padding-bottom: 12px; }
.official-event h2 { font-size: 18px; margin: 8px 0; }
.official-event p { overflow-wrap: anywhere; }
.official-event-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.official-event-actions :is(a, button) { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.eventpick #e-event { min-width: 0; width: 100%; max-width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 9px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.eventpick :is(select, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#upcomingEventPicker > .cvm-message { padding-top: 10px; border-top: 1px solid var(--line); }
@container (min-width: 680px) {
  .eventpick { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; }
  .eventpick > .inline { grid-column: 1 / -1; }
  .eventpick-actions { justify-content: flex-end; }
  .eventpick-actions #viewSelectedEvent { flex: none; }
}
@container (max-width: 360px) {
  .eventpick-actions #viewSelectedEvent { flex-basis: 100%; max-width: none; }
  .eventpick-actions .pinbtn, .eventpick-actions #eventWatchControl { flex: 1; }
  .eventpick-actions #eventWatchControl button { width: 100%; }
}
.pinbtn {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--faint);
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.pinbtn svg { transform: rotate(-45deg); transition: transform .15s ease; }
.pinbtn:active { transform: scale(.94); }
.pinbtn.on {
  background: rgba(91,140,255,.14); border-color: rgba(91,140,255,.55);
  color: var(--accent);
}
.pinbtn.on svg { transform: rotate(0deg); }

/* Your own tickets for the selected event, in place of the "avoid" list. */
.mine { display: grid; gap: 7px; margin-top: 10px; }
.mine-row {
  padding: 11px 13px; border-radius: var(--r);
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
}
.mine-row.v-SELL_NOW, .mine-row.v-DUMP_NOW { border-left-color: var(--danger); }
.mine-row.v-SELL_SOON { border-left-color: var(--warn); }
.mine-row.v-HOLD { border-left-color: var(--good); }
.mine-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.mine-tier { font-weight: 700; font-size: 13.5px; }
.mine-prices { display: grid; gap: 3px; font-size: 13px; }
.mine-now, .mine-list {
  display: flex; align-items: baseline; gap: 7px;
  font-variant-numeric: tabular-nums;
}
.mine-now span, .mine-list span { color: var(--muted); font-size: 12px; min-width: 84px; }
.mine-now b { font-size: 17px; color: var(--good); }
.mine-now.none b { font-size: 13px; color: var(--faint); font-weight: 500; }
.mine-list b { font-size: 14px; }
.mine-now i, .mine-list i { font-style: normal; font-size: 11.5px; color: var(--faint); }
.mine-when { margin-top: 7px; font-size: 12.5px; }
.mine-when b { color: var(--text); }
.mine-pl { margin-top: 5px; font-size: 12.5px; font-weight: 700; }
.mine-pl.pos { color: var(--good); }
.mine-pl.neg { color: var(--danger); }

/*
 * Tier numbers as fixed columns.
 *
 * They were pills in a wrapping row, so on a phone the primary status regularly
 * landed alone on a second line, reading as an afterthought rather than the
 * thing that caps the price. Four columns always fit and always line up, so the
 * eye can compare the same figure down a stack of cards.
 */
.tnums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin-top: 9px;
}
.tnum { min-width: 0; }
.tnum span {
  display: block; font-size: 9px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 700;
}
.tnum b {
  display: block; font-size: 13.5px; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A caption under the figure: how long ago a sale happened, what a bid or ask
   is for, or how a price compares to the vendor's. These say what the number
   means, which the old bare grid left to be inferred. */
.tnum em {
  display: block; margin-top: 1px; font-style: normal;
  font-size: 9px; font-weight: 600; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Green carries one meaning across the whole app: this price has cleared what
   the vendor charges, so the tier is selling above face. */
.tnum.good b, .tnum.good em { color: var(--good); }

/*
 * Whether the box office still competes, in the same place on every card.
 * Sold out is green because for a seller it is good news: nobody can undercut
 * you at face. Still on sale is amber for the opposite reason.
 */
.tavail {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px; font-size: 12px; font-weight: 600;
}
.tavail::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.tavail.waitlisted { color: var(--good); }
.tavail.waitlisted::before { box-shadow: 0 0 0 3px rgba(70,209,140,.2); }
.tavail.sold-out, .tavail.not-listed { color: var(--good); }
.tavail.on-sale { color: var(--warn); }
.tavail.unknown { color: var(--faint); font-weight: 500; }

/* Keep the date above the cards so the phone's full width belongs to its tiers. */
.night {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center;
  gap: 10px; margin-bottom: 12px;
}
.night-date {
  width: 38px; padding: 5px 0; border-radius: 9px;
  background: #161e2b; border: 1px solid #303c50;
  display: flex; flex-direction: column; align-items: center; align-self: flex-start;
}
.nd-dow {
  font-size: 9px; font-weight: 800; letter-spacing: .8px; color: var(--faint);
  text-transform: uppercase;
}
.nd-num { font-size: 18px; font-weight: 800; line-height: 1.1; }
.night-body {
  grid-column: 1 / -1; min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px;
}
.night-label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; font-weight: 650; color: var(--text);
}
.night-label span { font-size: 12px; font-weight: 400; color: var(--faint); }

/*
 * Straight to this event on CrowdVolt. A plain https link rather than a custom
 * scheme: iOS and Android hand these to the installed app through universal
 * links, and fall back to the browser when it is not installed, where a
 * crowdvolt:// URL would simply fail.
 */
.elink {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 0 10px; padding: 7px 13px; border-radius: 999px;
  background: rgba(91,140,255,.13); border: 1px solid rgba(91,140,255,.45);
  color: var(--accent); text-decoration: none;
  font-size: 12px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.elink:active { transform: scale(.97); }

/* Tier order follows entry access; each row keeps its own market advice. */
.hv-tiers { margin-top: 7px; display: grid; }
.hvt {
  display: grid; align-items: center;
  gap: 8px; padding: 7px 0; border-top: 1px solid rgba(120,132,156,.11);
  font-size: 12.5px; color: var(--muted);
}
.hvt:first-child { border-top: 0; padding-top: 2px; }
.hvt:last-child { padding-bottom: 0; }
.hvt-name { font-size: 12.5px; }
.hvt.r0 .hvt-name { color: var(--text); font-weight: 600; }
.hvt.r2 { opacity: .55; }
.hvt-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* The vendor price stacks under the resale price rather than sitting beside the
   name: it is the number the resale price has to be read against, and putting
   it inline shortened tier names to "GA (Be..." on a phone.

   The two must not read as peers. The large figure is what the ticket actually
   fetches on resale — your money. The small one is what the vendor still
   charges for the same tier, so it is context rather than an alert: it is
   labelled "vs vendor" and set in grey, because orange already means "vendor
   still selling" on the dot and repeating it here said the same thing twice in
   a louder voice. Colour never carries the difference on its own; both numbers
   are readable in greyscale because each is labelled. */
.hvt-prices {
  display: grid; justify-items: end; align-content: center;
  line-height: 1.15;
}
/* Price and its timestamp share one line: a sale price means little without
   knowing whether it happened an hour ago or last week, but putting the time on
   its own row made every tier three lines tall on a phone. */
.hvt-lead { display: flex; align-items: baseline; gap: 5px; }
.hvt-when {
  font-size: 9.5px; font-weight: 600; color: var(--faint);
  white-space: nowrap; letter-spacing: .2px;
}
.hvt-face {
  font-size: 10px; font-weight: 600;
  color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-top: 1px;
}
/* The price is what the row exists to show, so it is the largest thing on it. */
.hvt-price {
  font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700;
  color: var(--text);
}
/* Green means exactly one thing on this screen: the price has cleared what the
   vendor charges. It used to also mark the night's strongest tier, which put it
   on 19 of 30 rows — at that density it read as decoration, and it swallowed
   the handful of rows that had actually beaten face. Rank is already carried by
   a brighter name and the fading of weak tiers, neither of which competes
   with a colour that now signals one specific, actionable fact. */
.hvt.r2 .hvt-price { font-size: 13px; font-weight: 600; }
/* Shown only in the unlikely case that a tier has neither a confirmed sale nor
   a bid while its action badge does not already say NO BID — stated in words,
   since a bare dash reads as missing data rather than as a fact. */
.hvt-price.none {
  font-size: 11px; font-weight: 600; color: var(--faint);
  letter-spacing: .2px;
}
/* Sold out and waitlisted are green: nobody can undercut you at face. */
.hvt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.hvt-dot.sold-out, .hvt-dot.waitlisted { background: var(--good); }
.hvt-dot.on-sale { background: var(--warn); }

/* What the tier dots mean, said once rather than on every card. */
.dotkey {
  display: grid; gap: 5px; margin: 0 2px 11px;
  font-size: 11.5px; color: var(--muted); line-height: 1.35;
}
.dotkey b { color: var(--text); font-weight: 700; }
/* Swatch in its own column so the description stays one flowing paragraph.
   These rows were flex containers, which made every bold phrase a separate
   flex item — "top bid" was pushed to the far right of its own line, and
   "Vendor is / Vendor was" broke into three pieces. */
.dotkey-row {
  display: grid; grid-template-columns: 14px 1fr; gap: 7px; align-items: start;
}
.dotkey-row > i { margin-top: 4px; }

/* Which room it is in: two shows on one night are usually different venues. */
.hv-venue { font-size: 11px; color: var(--muted); }
.hv.hv-upcoming {
  padding: 0; border: 1px solid #303b4d; border-radius: 16px;
  background: #141b27; box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.hv-upcoming .hv-top { align-items: center; gap: 14px; padding: 17px 16px 15px; }
.hv-upcoming .hv-title { flex: 1; gap: 5px; }
.hv-upcoming .hv-name { font-size: 19px; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.hv-upcoming .hv-venue { font-size: 12px; color: #abb9cd; }
.hv-upcoming .hv-when { padding: 0; border: 0; background: none; font-size: 12px; color: #9baac1; }
.hv-poster { flex: none; }
.hv-poster .focus-event-artwork {
  width: 64px; height: 64px; border: 1px solid rgba(167,185,211,.2); border-radius: 10px;
}
.hv-upcoming .event-source-badge { margin: 0 16px 12px; }
.hv-official {
  display: grid; margin: 0 10px 12px; padding: 12px 13px 10px;
  border: 1px solid rgba(167,185,211,.2); border-left: 3px solid #91a1ba;
  border-radius: 10px; background: rgba(8,12,19,.28);
  color: var(--muted); font-size: 12px; line-height: 1.35;
}
.hv-official-head, .hv-official-tier {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hv-official-head { flex-wrap: wrap; gap: 4px 10px; padding-bottom: 7px; }
.hv-official-source, .hv-resale-head > span {
  display: inline-flex; align-items: center; gap: 7px;
  color: #bbc8db; font-size: 10.5px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase;
}
.hv-source-logo {
  position: relative; display: grid; place-items: center; flex: none; width: 23px; height: 23px;
  overflow: hidden;
  border-radius: 6px; font-size: 8px; line-height: 1; letter-spacing: 0; font-weight: 800;
}
.hv-source-logo::after {
  content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.hv-source-logo.crowdvolt {
  width: 27px; height: 27px;
  color: #dfeaff; background: #242544; border: 1px solid rgba(126,91,255,.65);
}
.hv-source-logo.crowdvolt::after {
  inset: 3px; background-image: url("/retailer-crowdvolt.png"); background-size: contain;
}
.hv-source-logo.official { color: #19202e; background: #c0cad9; border: 1px solid #e0e6ef; }
.hv-source-logo.dice::after { background-image: url("/retailer-dice.png"); }
.hv-source-logo.pacha {
  width: 27px; height: 27px;
  background: #f1f3f6; border-color: rgba(255,255,255,.55);
}
.hv-source-logo.pacha::after {
  inset: 3px; background-image: url("/retailer-pacha.png"); background-size: contain;
}
.hv-official-head > small { color: #9baac1; font-size: 11px; }
.hv-official-tier { min-height: 35px; padding: 6px 0; }
.hv-official-tier + .hv-official-tier { border-top: 1px solid rgba(147,166,195,.07); }
.hv-official-name { display: grid; flex: 1; gap: 2px; min-width: 0; color: #dee6f2; overflow-wrap: anywhere; }
.hv-official-name small { color: #9baac1; font-size: 11px; }
.hv-official-quote { display: grid; justify-items: end; flex: 0 0 auto; max-width: 45%; gap: 3px; text-align: right; }
.hv-official-price { color: var(--text); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hv-official-price.unavailable { color: var(--faint); font-size: 10.5px; font-weight: 400; }
.hv-official-price-note { color: #9baac1; font-size: 10px; }
.hv-official-state {
  padding: 3px 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 600; text-align: right;
  background: rgba(120,132,156,.08);
}
.hv-official-state:is(.sold-out,.waitlisted) {
  color: #7ddbb0; background: rgba(70,209,140,.07);
}
.hv-official-state.on-sale {
  color: #edc28b; background: rgba(255,165,58,.06);
}
.hv-official-state.unknown { color: var(--faint); }
.hv-resale {
  margin: 0 10px 12px; padding: 12px 13px 10px;
  border: 1px solid rgba(91,140,255,.3); border-left: 3px solid var(--accent);
  border-radius: 10px; background: linear-gradient(135deg, rgba(91,140,255,.1), rgba(8,12,19,.12) 55%);
}
.hv-resale-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.hv-resale-head small { color: #9baac1; font-size: 11px; text-align: right; }
.hv-upcoming .hvt {
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  grid-template-areas: "name prices" "action prices";
  align-items: start; gap: 4px 12px; padding: 10px 0;
}
.hv-upcoming .hvt-dot { display: none; }
.hv-upcoming .hvt-name { grid-area: name; color: #dee6f2; font-size: 12.5px; font-weight: 500; }
.hv-upcoming .hvt-act {
  grid-area: action; justify-self: start; padding: 0; border-radius: 0;
  background: none; font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: normal;
}
.hv-upcoming .hvt-act.HOLD { color: #9baac1; background: none; }
.hv-upcoming .hvt-prices {
  grid-area: prices; min-width: 0; justify-items: end; gap: 3px;
}
.hv-upcoming .hvt-lead { flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.hv-upcoming .hvt-price { font-size: 19px; line-height: 1; letter-spacing: -.025em; }
.hvt-above .hvt-price { color: var(--good); }
.hvt-below .hvt-price { color: var(--danger); }
.hv-upcoming .hvt-when, .hv-upcoming .hvt-face { font-size: 10.5px; font-weight: 400; color: #9baac1; white-space: normal; }
.hv-upcoming .hvt-price.none { font-size: 11px; line-height: 1.35; letter-spacing: 0; }
.hv-upcoming .hvt-unpriced { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "action" "prices"; }
.hv-upcoming .hvt-unpriced .hvt-prices, .hv-upcoming .hvt-unpriced .hvt-lead { justify-items: start; align-items: flex-start; text-align: left; }
.hv-upcoming .hvt.r2 { opacity: 1; }
.hv-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 6px 12px; padding: 10px 16px 12px; border-top: 1px solid rgba(147,166,195,.1);
}
.hv-footer > small { flex: 1 1 180px; color: #9baac1; font-size: 10.5px; }
.hv-footer > span { margin-left: auto; color: #c9d9f5; font-size: 11px; font-weight: 600; }
.hv-footer > span > span { padding-left: 4px; }
@media (min-width: 720px) {
  .night-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (hover: hover) {
  .hv.hv-upcoming:hover { background: #172030; border-color: #647ea4; }
}
@media (prefers-reduced-motion: reduce) {
  .hv { transition: none; }
  .hv:active { transform: none; }
}

/* Each tier's own call, so the action is never separated from what it covers. */
.hvt { grid-template-columns: 8px 1fr auto auto; }
.hvt-act {
  font-size: 8.5px; font-weight: 800; letter-spacing: .6px;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(120,132,156,.16); color: var(--muted);
}
.hvt-act.SELL_NOW, .hvt-act.DUMP_NOW { background: rgba(255,93,93,.18); color: var(--danger); }
.hvt-act.SELL_SOON { background: rgba(255,165,58,.18); color: var(--warn); }
.hvt-act.HOLD { background: rgba(70,209,140,.16); color: var(--good); }
@container (max-width: 300px) {
  .hvt { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .hvt-name { white-space: normal; overflow-wrap: anywhere; }
  .hvt-prices { grid-column: 2 / -1; justify-items: start; }
  .hvt-lead { flex-wrap: wrap; }
}

/* ---------------- my tickets ---------------- */
/*
 * Where the whole position stands, above the per-ticket cards. Replaced a
 * seven-column table that repeated the cards directly beneath it.
 */
.tksum {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px;
}
.tksum:empty { display: none; }
.tksum-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tksum-cell { min-width: 0; }
.tksum-cell span {
  display: block; font-size: 9.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .7px; font-weight: 700;
}
.tksum-cell b {
  display: block; font-size: 14px; margin-top: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tksum-flag {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--warn);
}

/* The two ways out, side by side, each with what it actually pays. */
.tk-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.tk-left { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.opt {
  padding: 9px 11px; border-radius: 9px; min-width: 0;
  background: var(--panel2); border: 1px solid var(--line);
}
/* The better payout is marked, so the choice does not need working out. */
.opt.best { background: rgba(70,209,140,.09); border-color: rgba(70,209,140,.4); }
.opt-label {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .6px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.opt-net {
  font-size: 18px; font-weight: 800; margin-top: 3px; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.opt-net span { font-size: 9.5px; font-weight: 600; color: var(--faint); margin-left: 4px; }
.opt.best .opt-net { color: var(--good); }
.opt-pl { font-size: 12px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.opt-pl.pos { color: var(--good); }
.opt-pl.neg { color: var(--danger); }
.opt-sub { font-size: 10px; color: var(--faint); margin-top: 3px; }
.opt-none {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: var(--panel2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.tk-facts { margin-top: 9px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.add-intro { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.addform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.addform > :is(label:first-of-type, #eventListRefresh, #tierSelectWrap, #tierOptionsProgress,
  #tierManualToggle, #tierOptionsNotice, #customTierWrap, label:last-of-type, .add-actions) { grid-column: 1 / -1; }
.addform select, .addform input { width: 100%; min-height: 44px; }
.addform > .link { justify-self: start; min-height: 34px; padding-inline: 0; }
.add-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.add-actions button { min-height: 44px; }
#tierOptionsProgress .section-loader { justify-content: flex-start; padding-left: 0; }
.tier-options-notice {
  margin: 0; padding: 10px 12px; border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0; background: rgba(255,165,58,.08);
  color: var(--muted); font-size: 12px; line-height: 1.5;
}

/* Sold: the realised total leads, then one line per sale. */
.soldtotal {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 9px; margin-bottom: 9px;
  background: var(--panel2); border: 1px solid var(--line);
}
.soldtotal b { font-size: 21px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.soldtotal.pos b { color: var(--good); }
.soldtotal.neg b { color: var(--danger); }
.soldtotal span { font-size: 11.5px; color: var(--muted); }
.sold-events { display: grid; gap: 18px; }
.sold-event { padding: 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.sold-event-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 12px; }
.sold-event-heading > div { min-width: 0; }
.sold-event-heading h3 { margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.sold-event-heading p { margin: 0; font-size: 11px; color: var(--muted); }
.sold-event-heading button { flex: none; min-height: 44px; }
.sold-events .recorded-outcome { margin: 6px 0 0; padding: 12px; gap: 12px; }
.sold-events .recorded-outcome [data-edit-tickets] { margin: 0; min-height: 44px; }
.sold-events .soldrow-main { flex: 1; overflow-wrap: anywhere; }
.sold-events .soldrow-sub { margin: 5px 0 0; line-height: 1.5; }
.soldrow-amount { display: grid; gap: 5px; text-align: right; font-size: 11px; color: var(--muted); }
@media (max-width: 480px) {
  .sold-events .soldrow { flex-wrap: wrap; }
  .sold-events .soldrow-main { flex-basis: calc(100% - 80px); }
  .soldrow-amount { flex: 1; text-align: left; }
}

.dice-import { margin-top: 18px; }
.dice-import-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dice-import-choices article, .dice-import-setup, .dice-import-pending form {
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2);
}
.dice-import-choices h3, .dice-import-setup h3, .dice-import-pending h3 { margin-top: 0; }
.dice-import-setup, .dice-import-pending { margin-top: 14px; }
.dice-import-setup code { overflow-wrap: anywhere; }
.dice-import-pending form { display: grid; gap: 10px; margin-top: 10px; }
.dice-import-pending form > small { color: var(--muted); }
.import-workflow, .import-sync, .import-connected, .ticket-editor-heading {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.import-workflow, .import-simple-intro { margin: 12px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.import-method-tag { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.dice-import-choices article { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dice-import-choices article p, .dice-import-choices ul { margin: 0; line-height: 1.6; font-size: 13px; }
.dice-import-choices article button { margin-top: auto; }
.dice-import-choices ul { padding-left: 18px; padding-bottom: 10px; }
.import-method-current { padding: 16px; border: 1px solid #526b94; border-radius: 12px;
  background: linear-gradient(145deg, rgba(51,77,117,.22), rgba(22,31,46,.92)); }
.import-method-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.import-method-heading h3 { margin: 0 0 5px; }
.import-method-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.import-method-heading > strong { color: var(--good); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.import-method-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.import-method-actions button { min-height: 44px; }
.import-method-current > small { display: block; margin-top: 10px; color: var(--muted); line-height: 1.5; }
.import-privacy, .import-consent p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.import-connected strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.gmail-review { display: grid; gap: 8px; padding: 12px 0; }
.gmail-review p, .gmail-review small { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.gmail-review button { justify-self: start; }
.import-scan { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.import-scan button { justify-self: start; min-height: 44px; }
.import-scan p, .import-scan small { margin: 0; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.import-scan small { color: var(--muted); }
.import-consent { padding: 10px 0; }
.import-consent details { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.import-consent summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.import-consent details[open] { display: grid; gap: 10px; }
.import-consent label { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.import-consent input { flex: none; margin-top: 4px; }
.receipt-welcome { width: min(680px, calc(100vw - 24px)); max-height: 88dvh; padding: 20px; overflow-y: auto; }
.receipt-welcome h2 { margin: 0; }
.receipt-review-card { display: grid; gap: 10px; padding: 14px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.receipt-review-heading strong { font-size: 16px; }
.receipt-review-heading { min-width: 0; overflow-wrap: anywhere; }
.receipt-review-card p { margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.receipt-ticket-line { color: var(--muted); }
.receipt-transfer-fields { display: grid; gap: 12px; min-width: 0; }
.receipt-transfer-fields label { display: grid; gap: 6px; font-size: 13px; min-width: 0; }
.receipt-transfer-fields input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--control-line); border-radius: 7px; padding: 10px; background: var(--panel); color: var(--text); font: inherit; }
.receipt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.receipt-price span { color: var(--muted); }
.receipt-price strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.receipt-extra { min-width: 0; }
.receipt-extra summary { min-height: 44px; padding: 12px 0; box-sizing: border-box;
  cursor: pointer; color: var(--muted); font-size: 12px; }
.receipt-extra[open] > p { margin-top: 6px; }
.receipt-source { color: var(--faint); font-size: 11px !important; }
.dice-import-setup label { display: grid; gap: 6px; margin-top: 10px; }
.dice-import-setup input { width: 100%; min-width: 0; min-height: 44px; }
.dice-import-setup select { width: 100%; min-width: 0; min-height: 44px; }
.email-connection { width: min(540px, calc(100% - 28px)); max-height: calc(100dvh - 40px);
  box-sizing: border-box; padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text); overflow: auto; }
.email-connection::backdrop { background: rgba(0,0,0,.65); }
.email-proof-label { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; }
.email-proof-label :is(input, select) { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box;
  padding: 10px; border: 1px solid var(--control-line); border-radius: 7px; background: var(--panel2); color: var(--text); font: inherit; }
#emailProof > p { margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.email-proof-account { margin-top: 14px !important; font-size: 13px; color: var(--muted); }
.email-proof-account strong { color: var(--text); }
.email-proof-steps { display: grid; gap: 12px; padding-left: 22px; margin: 18px 0; font-size: 14px; line-height: 1.5; }
.email-proof-steps li::marker { color: var(--accent); font-weight: 750; }
#emailProof .email-proof-compose, .email-proof-finish { display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; box-sizing: border-box; border-radius: 8px; padding: 12px; text-decoration: none; font-weight: 700; }
#emailProof .email-proof-compose { color: #071226; }
.email-proof-manual { margin: 14px 0; }
.email-proof-manual summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); font-size: 12px; }
.email-proof-manual p { font-size: 13px; }
.email-proof-confirmed { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.email-proof-confirmed > span { display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; background: #173d2c; color: #a4efc3; font-size: 22px; }
#emailProofMessage:empty { display: none; }
#emailProofMessage[role="alert"] { color: var(--danger, #ff8e8e); }
#emailProofCheck { margin-bottom: 8px; }
.email-proof-browser { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; font-size: 12px; }
.forward-guide-progress { margin-bottom: 8px !important; color: var(--accent); font-size: 12px; font-weight: 700; }
#ticketForwardGuide > p { margin: 10px 0; font-size: 14px; }
.forward-guide-steps { display: grid; gap: 16px; margin: 20px 0; padding-left: 24px; font-size: 15px; line-height: 1.5; }
.forward-guide-steps li { padding-left: 4px; }
.forward-guide-steps li::marker { color: var(--accent); font-weight: 750; }
.forward-guide-actions { display: flex; gap: 8px; margin: 14px 0; }
.forward-guide-actions .primary { flex: 1; }
#ticketForwardGuide .email-proof-compose { display: flex; justify-content: center; align-items: center; min-height: 48px;
  padding: 10px 14px; border-radius: 8px; color: #071226; text-decoration: none; font-weight: 700; }
#ticketForwardGuide .email-proof-compose[data-done="true"] { background: var(--panel2); color: var(--text); border: 1px solid var(--control-line); }
#forwardGuideCopyStatus:empty, #forwardGuideMessage:empty { display: none; }
#forwardGuideMessage[role="alert"] { color: #ff8e8e; }
#ticketEmailSetup > p { margin: 12px 0; font-size: 14px; line-height: 1.5; }
#ticketEmailSetupChoices > button { margin-bottom: 10px; }
#ticketEmailSetupMessage:empty { display: none; }
#ticketEmailSetupMessage[role="alert"] { color: #ff8e8e; }
.email-connection form { display: grid; gap: 12px; min-width: 0; }
.email-connection h2, .email-connection p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.email-connection label { display: grid; gap: 6px; }
.email-connection label[hidden] { display: none; }
.email-connection input, .email-connection select { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; }
.email-connection a { color: #a9c4ff; min-height: 44px; align-content: center; overflow-wrap: anywhere; }
.email-connection button { min-height: 44px; }
.email-connection .ticket-edit-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.email-password-guide { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.email-password-guide[hidden] { display: none; }
.email-password-notice { padding: 12px; margin-bottom: 16px; border-left: 3px solid var(--accent);
  border-radius: 6px; background: var(--panel2); font-size: 13px; line-height: 1.5; }
.email-password-notice p { margin-top: 6px; }
.email-password-guide ol { margin: 0; padding-left: 22px; }
.email-password-guide li + li { margin-top: 16px; }
.email-password-guide li p { margin: 6px 0; font-size: 13px; }
.email-password-guide li small { display: block; color: var(--muted); margin-top: 4px; }
.email-password-guide a.primary { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 8px;
  color: #071226; text-decoration: none; font-weight: 700; }
.email-connection label { text-transform: none; letter-spacing: normal; font-size: 13px; }
.email-connection summary { cursor: pointer; min-height: 44px; align-content: center; font-size: 13px; }
.email-connection .email-rule-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.email-connection .email-rule-check input { width: 20px; min-height: 20px; flex: none; }
#signupForwardSteps li { margin-bottom: 10px; }
.dice-import-setup .import-setup-check { display: flex; flex-direction: row; align-items: center;
  gap: 10px; min-height: 44px; color: var(--text); text-transform: none; letter-spacing: normal; }
.dice-import-setup .import-setup-check input { width: 18px; height: 18px; min-height: 0;
  margin: 0; flex: none; accent-color: var(--accent); }
.dice-import-setup a { display: inline-flex; align-items: center; min-height: 44px; color: #a9c4ff; }
.import-action-notice { padding: 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel2); color: var(--text); line-height: 1.5; }
:is(.dice-import, .receipt-welcome) button { min-height: 44px; }
.receipt-review-card .ticket-edit-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt-review-card .ticket-edit-buttons .primary { flex: 1; }
.receipt-review-card .ticket-edit-buttons .mini { min-width: 80px; }
@media (max-width: 620px) {
  .dice-import-choices { grid-template-columns: 1fr; }
  .import-method-heading { display: grid; }
  .import-method-actions { display: grid; }
}
.soldrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 5px;
  background: var(--panel2); border: 1px solid var(--line);
}
.soldrow-main { min-width: 0; }
.soldrow-ev {
  font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.soldrow-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.soldrow-pl {
  font-size: 14px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.soldrow-pl.pos { color: var(--good); }
.soldrow-pl.neg { color: var(--danger); }
.recorded-outcome { margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.recorded-outcome .soldrow { border-bottom: 0; }
.recorded-outcome [data-edit-tickets] { min-height: 44px; margin-top: 8px; padding: 9px 12px; }
.outcome-analysis { margin: 0 10px; min-width: 0; }
.outcome-analysis > [data-outcome-result] { padding-top: 16px; }
.outcome-analysis p { line-height: 1.5; font-size: 12px; overflow-wrap: anywhere; }
.outcome-status { margin: 12px 0; }
.outcome-status button { min-height: 44px; margin: 6px; }
.outcome-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.outcome-context > strong { min-width: 0; overflow-wrap: anywhere; }
.outcome-metrics, .outcome-portfolio-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin: 14px 0;
}
.outcome-metrics > div, .outcome-portfolio-stats > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.outcome-metrics dt, .outcome-portfolio-stats dt { color: var(--muted); font-size: 11px; }
.outcome-metrics dd, .outcome-portfolio-stats dd { margin: 5px 0 0; font-size: 17px; font-weight: 650; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.outcome-caveat { color: var(--muted); }
.outcome-chart-heading, .outcome-chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.outcome-chart-heading { justify-content: space-between; margin-top: 22px; }
.outcome-chart-heading h3 { margin: 0; font-size: 15px; }
.outcome-chart-controls button { min-height: 44px; }
.outcome-price-history { min-width: 0; }
.hsec-note { margin: 0 2px 9px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
/* Stands in for a faded row in the key, so the dimming is explained not guessed. */
.dotkey-dim {
  flex: none; width: 14px; height: 7px; border-radius: 2px;
  background: var(--dim); opacity: .55;
}
/* Swatches for the two prices, sized like the type they stand for so the key
   shows the hierarchy rather than only describing it. */
.dotkey-price {
  flex: none; width: 14px; height: 9px; border-radius: 2px;
  background: var(--text);
}
.dotkey-face {
  flex: none; width: 14px; height: 5px; border-radius: 2px;
  background: var(--faint);
}

/* ================= wider screens ================= */
/*
 * The phone layout is the baseline and stays exactly as it is. Everything here
 * is additive: a single column of cards stretched to 1400px is not a desktop
 * layout, it is a phone layout with the air let out of it. Width is spent on
 * showing more at once — more nights, more tiers, more holdings side by side —
 * rather than on longer lines of the same text.
 */
@media (min-width: 900px) {
  main { padding: 24px 28px 80px; }
  header, .tabs { padding-left: 28px; padding-right: 28px; }
  header h1 { font-size: 18px; }
  .tab { padding: 13px 16px; font-size: 14px; }

  /* Cards stop growing past the width at which they are comfortably scanned;
     beyond that the space is better spent on a second and third column. */
  .livegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .hv { border-left-width: 5px; }

  /* Tier cards read as a comparison at this width, so show them as one. */
  .cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }

  /* Long prose is the one thing that gets worse with width, so cap it. */
  .vs-why, .hsec-note, .dotkey, .note, .read-why ul { max-width: 70ch; }

  /* Room to see the shape of a night without the labels crowding. */
  .spark-svg { height: 84px; }
  .avg-val { font-size: 13.5px; }
  .avg-rng { font-size: 11px; }
  .avg-hour { font-size: 10.5px; }

  /* The verdict can sit beside the date rather than under it. */
  .ewhen { gap: 12px; }
  .ewhen-day { font-size: 20px; }

  /* Sold rows have room for comfortable spacing rather than phone density. */
  .soldrow { padding: 11px 14px; }
}

@media (min-width: 1280px) {
  /* Three nights across before the cards start to look sparse. */
  .night-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .livegrid { grid-template-columns: repeat(3, 1fr); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .home { gap: 12px; }

  /* Timing curves are the one place a genuinely large chart helps. */
  #deadlineChart, #hourChart { min-height: 300px; }
}

.livegrid { display: grid; gap: 10px; }

/* Chart chooser: why this shape was drawn, and what to show when a chart
   would misrepresent the evidence. */
.why {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: #8b93a7;
  font-style: italic;
}
.chartnote {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px dashed #2c3346;
  border-radius: 10px;
  background: #171b27;
  font-size: 13px;
  line-height: 1.5;
  color: #c3cad9;
}
.chartnote strong { color: #e7ebf3; }

/* Price, next action and history lead; supporting evidence stays behind details. */
#tab-focus { max-width: 1120px; margin-inline: auto; }
#tab-focus.ticket-view-mode { max-width: 820px; row-gap: 0; }
.ticket-view-mode .focus-heading,
.ticket-view-mode .focus-legend { display: none; }
.ticket-view-mode #tkSummary { display: none; }
.ticket-view-mode .focus-summary-row { min-height: 0; margin: 0; }
.ticket-view-mode .focus-summary-row:has(#focusAnalysisStatus[hidden]) { display: none; }
.ticket-view-mode #focusAnalysisStatus { padding: 0 9px 10px; }
main:has(> .ticket-view-mode.active) { padding-top: 10px; background: #000; }
.ticket-wallet-overview {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 12px;
  margin: 0 30px 12px; color: #b3b3b3; font-size: 12px;
}
.ticket-wallet-overview strong { color: #f5f5f7; font-size: 13px; }
.ticket-wallet-overview span + :is(strong, span)::before { content: "·"; margin-right: 12px; color: #646a74; }
.ticket-wallet-list { display: grid; gap: 3px; }
.ticket-wallet-event { min-width: 0; color: #f5f5f5; background: #000; }
.ticket-wallet-event:not([open]) { margin-inline: 9px; }
.ticket-wallet-event[open] { margin-bottom: 0; }
.ticket-wallet-list:has(> [open]) > :not([open]) { display: none; }
#focusBody:has(.ticket-wallet-event[open]) .ticket-wallet-overview { display: none; }
.ticket-wallet-pass {
  position: relative; display: block; aspect-ratio: 1; min-height: 0;
  overflow: hidden; border: 1px solid #4b4b4b; border-radius: 11px;
  cursor: pointer; list-style: none; color: #fff; background: #1b1b1b;
}
.ticket-wallet-pass::-webkit-details-marker { display: none; }
.ticket-wallet-art, .ticket-wallet-art > .focus-event-artwork {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0;
}
.ticket-wallet-art .focus-event-artwork img { width: 100%; height: 100%; object-fit: cover; }
.ticket-wallet-art .focus-artwork-unavailable { display: grid; place-items: center; width: 100%; height: 100%; font-size: 14px; }
.ticket-wallet-art-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 72% 22%, #3b5687, transparent 34%),
    linear-gradient(145deg, #25334c, #101217 72%);
}
.ticket-wallet-art-fallback .focus-event-calendar { transform: scale(1.65); }
.ticket-wallet-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 24%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.54) 72%, #000 100%);
}
.ticket-wallet-pass::before, .ticket-wallet-pass::after {
  content: ""; position: absolute; z-index: 3; left: 50%; width: 26px; height: 13px;
  transform: translateX(-50%); border: 1px solid #555; background: #000; pointer-events: none;
}
.ticket-wallet-pass::before { top: -1px; border-top: 0; border-radius: 0 0 13px 13px; }
.ticket-wallet-pass::after { bottom: -1px; border-bottom: 0; border-radius: 13px 13px 0 0; }
.ticket-wallet-event-copy {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 52px;
  display: grid; gap: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.ticket-wallet-event-copy strong { font-size: clamp(20px, 3.5vw, 30px); font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.ticket-wallet-event-copy > span { font-size: clamp(18px, 3vw, 24px); line-height: 1.25; }
.ticket-wallet-tier {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; max-width: calc(100% - 94px);
  padding: 1px 3px; border: 1px solid #454545; border-radius: 3px;
  color: #f0f0f0; background: rgba(0,0,0,.75); font-size: 11px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-wallet-event[open] .ticket-wallet-tier { display: none; }
.ticket-wallet-stub {
  position: absolute; z-index: 2; right: 13px; bottom: 13px; display: flex;
  width: calc(36px + var(--stack-depth)); height: 36px;
}
.ticket-wallet-count-face { flex: 0 0 36px; width: 36px; height: 36px; overflow: visible; }
.ticket-wallet-count-face path { fill: #333; stroke: #5b5b5b; stroke-width: .5px; }
.ticket-wallet-count-face text { fill: #f5f5f5; font-weight: 650; }
.ticket-wallet-stack-edges {
  width: var(--stack-depth); height: 36px;
  background: linear-gradient(to right, transparent 0 25%, #606060 25% 33%, #333 33% 92%, #606060 92%);
  background-size: var(--stack-step) 100%; background-repeat: repeat-x;
  border-radius: 1px;
}
.ticket-wallet-detail-toolbar {
  position: sticky; top: 0; z-index: 20; display: none; justify-content: flex-end; align-items: flex-start;
  height: 0; padding-right: 9px; transform: translateY(9px);
}
#focusBody:has(.ticket-wallet-event[open]) .ticket-wallet-detail-toolbar { display: flex; }
#loadingProgress:not([hidden]) + main .ticket-wallet-detail-toolbar { top: 32px; }
.ticket-wallet-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(0,0,0,.45);
}
.ticket-wallet-close svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.2; }
.ticket-wallet-event[data-wallet-transition] > .ticket-wallet-pass { view-transition-name: ticket-artwork; }
.ticket-wallet-event[data-wallet-transition] .ticket-wallet-event-copy { view-transition-name: ticket-copy; }
.ticket-wallet-event[data-wallet-transition] .ticket-wallet-stub { view-transition-name: ticket-count; }
html.ticket-wallet-transition #app > header { view-transition-name: ticket-header; }
html.ticket-wallet-transition #app > .tabs { view-transition-name: ticket-navigation; }
html.ticket-wallet-transition::view-transition-group(*) {
  animation-duration: 380ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
html.ticket-wallet-transition::view-transition-old(root),
html.ticket-wallet-transition::view-transition-new(root) { animation-duration: 220ms; }
html.ticket-wallet-transition::view-transition-group(ticket-header),
html.ticket-wallet-transition::view-transition-group(ticket-navigation),
html.ticket-wallet-transition::view-transition-new(ticket-header),
html.ticket-wallet-transition::view-transition-new(ticket-navigation) { animation: none; }
html.ticket-wallet-transition::view-transition-old(ticket-header),
html.ticket-wallet-transition::view-transition-old(ticket-navigation) { display: none; }
html.ticket-wallet-transition::view-transition-old(ticket-copy),
html.ticket-wallet-transition::view-transition-old(ticket-count) { animation: ticket-wallet-fade-out 90ms both; }
html.ticket-wallet-transition::view-transition-new(ticket-copy),
html.ticket-wallet-transition::view-transition-new(ticket-count) { animation: ticket-wallet-fade-in 150ms 200ms both; }
html.ticket-wallet-transition::view-transition-old(ticket-artwork),
html.ticket-wallet-transition::view-transition-new(ticket-artwork) {
  height: 100%; object-fit: fill; animation-duration: 220ms;
}
@keyframes ticket-wallet-fade-out { to { opacity: 0; } }
@keyframes ticket-wallet-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.ticket-wallet-transition::view-transition-group(*),
  html.ticket-wallet-transition::view-transition-old(*),
  html.ticket-wallet-transition::view-transition-new(*) { animation: none; }
}
.ticket-wallet-body { padding-top: 1px; }
.ticket-wallet-actions { margin: 0 0 20px; border-radius: 10px; background: #1b1b1b; }
.ticket-wallet-action {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; min-height: 53px; width: calc(100% - 28px); margin: 0 14px; padding: 9px 0;
  border: 0; border-bottom: 1px solid #454545; border-radius: 0;
  color: inherit; background: transparent; font-family: inherit; text-decoration: none; text-align: left;
}
.ticket-wallet-action:last-child { border-bottom: 0; }
.ticket-wallet-action:is(a, button):hover { background: #242424; }
.ticket-wallet-action-icon { width: 20px; height: 24px; fill: none; stroke: #f3f3f3; stroke-width: 1.3; stroke-linejoin: round; }
.ticket-wallet-action.crowdvolt-market-link { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; min-height: 64px; }
.ticket-wallet-action.crowdvolt-market-link .crowdvolt-market-mark { width: 36px; height: 36px; border-radius: 9px; }
.ticket-wallet-action.crowdvolt-market-link strong { font-weight: 650; }
.ticket-wallet-action > span:nth-child(2) { min-width: 0; }
.ticket-wallet-action strong, .ticket-wallet-action small { display: block; }
.ticket-wallet-action strong { color: #f4f4f4; font-size: 14px; font-weight: 400; line-height: 1.3; }
.ticket-wallet-action small { margin-top: 2px; color: #b7b7b7; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.ticket-wallet-action > b { color: #b7b7b7; font-size: 11px; font-weight: 400; white-space: nowrap; }
.ticket-wallet-action > .ticket-wallet-paid {
  display: grid; gap: 3px; max-width: 140px; text-align: right;
  white-space: normal; overflow-wrap: anywhere;
}
.ticket-wallet-guidance, .ticket-wallet-how { padding: 0 6px 24px; }
.ticket-wallet-guidance { scroll-margin-top: 42px; }
.ticket-wallet-guidance > h2, .ticket-wallet-how > h2 { margin: 0 0 12px; font-size: 21px; font-weight: 400; }
.ticket-wallet-guidance > p { margin: 0 0 16px; color: #b7b7b7; font-size: 13px; line-height: 1.45; }
.ticket-view-mode .ticket-wallet-analysis-card { padding: 18px; border-color: #3b3d43; background: #141518; }
.ticket-wallet-analysis-card > .focus-prices { margin-top: 0; padding-top: 0; border-top: 0; }
.ticket-wallet-analysis-card button { min-width: 44px; min-height: 44px; }
.ticket-wallet-how ul { display: grid; gap: 14px; padding: 0; margin: 26px 0 0; list-style: none; }
.ticket-wallet-how li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; }
.ticket-wallet-how li > span { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #777; border-radius: 50%; font-size: 11px; }
.ticket-wallet-how p, .ticket-wallet-how strong { margin: 0; display: block; }
.ticket-wallet-how p { color: #b7b7b7; font-size: 14px; line-height: 1.4; }
.ticket-wallet-how strong { margin-bottom: 3px; color: #f2f2f2; font-size: 14px; font-weight: 400; }
.ticket-wallet-event-links button,
#tab-focus.ticket-view-mode > :is(#monitoringPanel, #soldPanel) > summary {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px;
  margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #454545; border-radius: 0;
  color: #f4f4f4; background: transparent; font-size: 14px; font-weight: 400; text-align: left;
  list-style: none; cursor: pointer;
}
.ticket-wallet-event-links button span { color: #aaa; font-size: 22px; }
#tab-focus.ticket-view-mode > :is(#monitoringPanel, #soldPanel) {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
}
#tab-focus.ticket-view-mode > :is(#monitoringPanel, #soldPanel) > summary::-webkit-details-marker { display: none; }
#tab-focus.ticket-view-mode > :is(#monitoringPanel, #soldPanel) > summary::after {
  content: "\203a"; flex: none; margin-left: 12px; color: #aaa; font-size: 22px; line-height: 1;
  transform: rotate(90deg);
}
#tab-focus.ticket-view-mode > :is(#monitoringPanel, #soldPanel)[open] > summary::after { transform: rotate(-90deg); }
#tab-focus.ticket-view-mode > :is(#monitoringPanel, #soldPanel) > :not(summary) { padding-block: 16px 20px; }
.ticket-view-preference { display: grid; gap: 16px; margin-top: 26px; }
.ticket-view-preference h2 { margin: 2px 0 6px; font-size: 18px; }
.ticket-view-kicker { margin: 0; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ticket-view-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ticket-view-options button {
  min-height: 78px; padding: 13px; border: 1px solid var(--control-line); border-radius: 11px;
  color: var(--text); background: var(--panel2); text-align: left;
}
.ticket-view-options button.selected { border-color: #9bb9ff; box-shadow: inset 0 0 0 1px #9bb9ff; background: #253550; }
.ticket-view-options strong, .ticket-view-options span { display: block; }
.ticket-view-options strong { font-size: 14px; }
.ticket-view-options span { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
#ticketViewPreferenceStatus { min-height: 18px; margin: 0; }
.focus-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin: 12px 0 8px; }
.focus-heading h1 { font-size: 24px; margin: 0 0 8px; letter-spacing: -.5px; }
.focus-heading p, .focus-footnote { color: #a5aec0; font-size: 13px; line-height: 1.5; margin: 0; }
.focus-heading button { flex: none; }
.focus-tone-profit { --signal: var(--good); --signal-bg: rgba(70, 209, 140, .08); }
.focus-tone-danger { --signal: var(--danger); --signal-bg: rgba(255, 93, 93, .08); }
.focus-tone-warning { --signal: var(--warn); --signal-bg: rgba(255, 165, 58, .08); }
.focus-tone-info { --signal: #94b7ff; --signal-bg: rgba(91, 140, 255, .08); }
.focus-tone-neutral { --signal: #a5aec0; --signal-bg: rgba(165, 174, 192, .05); }
.focus-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -8px 0 20px; color: #a5aec0; font-size: 12px; }
.focus-legend span { display: inline-flex; align-items: center; gap: 7px; }
.focus-legend span::before, .focus-freshness::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
.focus-event-index { margin-bottom: 14px; }
.focus-event-index-heading {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 0;
}
.focus-event-index-heading > div:first-child strong,
.focus-event-index-heading > div:first-child span { display: block; }
.focus-event-index-heading > div:first-child strong { font-size: 14px; }
.focus-event-index-heading > div:first-child span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.focus-event-index-heading > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.focus-event-jump { display: grid; gap: 4px; min-width: 0; max-width: 400px; flex: 1; color: var(--muted); font-size: 12px; }
.focus-event-jump select { min-width: 0; width: 100%; min-height: 44px; font-size: 13px; }
.focus-event-index-heading button { min-height: 44px; }
.focus-event-list { display: grid; gap: 16px; }
.focus-event-group {
  min-width: 0; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(20,28,41,.72); overflow: clip; scroll-margin-top: 18px;
}
.focus-event-group > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content 16px;
  align-items: center; gap: 13px; min-height: 70px; padding: 12px 15px;
  cursor: pointer; list-style: none; background: var(--panel2);
}
.focus-event-group > summary::-webkit-details-marker { display: none; }
.focus-event-group > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); justify-self: center; }
.focus-event-group[open] > summary { background: var(--panel2); border-bottom: 1px solid var(--line); }
.focus-event-group[open] > summary::after { transform: rotate(225deg); }
.focus-event-summary-main, .focus-event-summary-side { min-width: 0; }
.focus-event-summary-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.focus-event-summary-main strong, .focus-event-summary-main small,
.focus-event-summary-side strong, .focus-event-summary-side small { display: block; }
.focus-event-summary-main strong { font-size: 16px; overflow-wrap: anywhere; }
.focus-event-summary-main small, .focus-event-summary-side small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.focus-event-summary-side { text-align: right; }
.focus-event-summary-side strong { font-size: 13px; white-space: nowrap; }
.focus-event-group > .focus-grid { padding: 16px; }
.focus-grid { display: grid; gap: 20px; }
.focus-card { container: holding / inline-size; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-width: 0; }
.focus-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "identity" "links" "ownership";
  align-items: start;
  gap: 14px;
  padding: 0;
  border: 0;
}
.focus-event-identity { grid-area: identity; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.focus-event-artwork { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.focus-event-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; }
.focus-event-artwork img[hidden] { display: none; }
.focus-artwork-unavailable { padding: 5px; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.3; }
.focus-event-summary-identity .focus-event-artwork { flex-basis: 56px; width: 56px; height: 56px; border-radius: 8px; }
.focus-event-calendar { display: grid; flex: 0 0 50px; overflow: hidden; border: 1px solid #526b91; border-radius: 9px; background: #17243a; text-align: center; box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.focus-event-calendar span { padding: 3px 4px; color: #f4f7ff; background: #557fca; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.focus-event-calendar b { padding-top: 4px; color: #f4f7ff; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.focus-event-calendar small { padding: 2px 4px 5px; color: #aebbd0; font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.focus-ticket-heading { min-width: 0; }
.focus-ticket-note { overflow-wrap: anywhere; }
.focus-card h2 { font-size: 20px; line-height: 1.3; text-transform: none; letter-spacing: -.3px; margin: 0 0 8px; overflow-wrap: anywhere; }
.focus-card header p { color: #a5aec0; font-size: 13px; line-height: 1.5; margin: 3px 0; overflow-wrap: anywhere; }
.focus-event-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 8px; }
.focus-event-links a { display: inline-flex; align-items: center; text-decoration: none; }
.focus-event-links :is(a, button) { min-height: 44px; padding: 10px 13px; font-size: 12px; }
.focus-event-links .focus-market-link { gap: 5px; color: #fff; background: #376fc9; border: 1px solid #7fa8e9; border-radius: 7px; font-weight: 750; box-shadow: 0 4px 12px rgba(30, 75, 145, .34); }
.focus-event-links .focus-market-link:hover { background: #3264b5; border-color: #a9c7f3; }
.focus-event-links .focus-market-link:focus-visible { outline: 2px solid #c4d8ff; outline-offset: 2px; }
.focus-event-links .crowdvolt-market-link { gap: 9px; background: linear-gradient(135deg, #493698, #292747); border-color: #9982d9; }
.focus-event-links .crowdvolt-market-link:hover { background: #493698; border-color: #c1aaff; }
.crowdvolt-market-mark { flex: none; box-sizing: border-box; border-radius: 6px; background: #242544; }
.focus-event-links .focus-market-link span { color: inherit; font-size: 12px; }
.focus-ownership { grid-area: ownership; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-self: start; min-width: 0; color: #eef4ff; background: linear-gradient(135deg, #233b60, #192c49); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); box-shadow: inset 0 0 0 1px #6381ae; }
.focus-ownership::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(171,199,241,.52); border-radius: 5px; pointer-events: none; }
.focus-ownership-main { display: grid; gap: 3px; min-width: 0; padding: 13px 10px 13px 16px; }
.focus-ownership-main > span { color: #a9c7f3; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.focus-ownership-main strong { color: #f2f6ff; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.focus-ownership-main strong b { color: #b6d0fa; font-variant-numeric: tabular-nums; }
.focus-ownership-main small { color: #b3c0d4; font-size: 10px; line-height: 1.35; }
.focus-ownership-stub { display: grid; place-content: center; justify-items: center; gap: 3px; min-width: 0; margin: 8px 7px 8px 0; padding-inline: 8px; border-left: 1px dashed rgba(171,199,241,.62); color: #c9daf5; }
.focus-ownership-stub b { max-width: 100%; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.focus-ownership-stub b.focus-paid-range { font-size: 16px; line-height: 1.25; }
.focus-ownership-stub span { font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; }
@container holding (max-width: 479px) {
  .focus-card header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity links" "ownership ownership";
    column-gap: 10px;
  }
  .focus-event-links { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-self: end; }
  .focus-event-links :is(a, button) { justify-content: center; padding-inline: 9px; font-size: 11px; }
  .focus-event-links .crowdvolt-market-link { gap: 4px; }
  .focus-event-links .crowdvolt-market-mark { width: 23px; height: 23px; }
  .focus-event-identity { gap: 9px; }
  .focus-event-identity .focus-event-artwork { flex-basis: 50px; width: 50px; height: 50px; border-radius: 8px; }
}
@container holding (max-width: 279px) {
  .focus-card header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "links" "ownership"; }
  .focus-event-links { flex-direction: row; flex-wrap: wrap; justify-self: stretch; justify-content: flex-end; }
}
@container holding (min-width: 600px) {
  .focus-card header { grid-template-columns: minmax(0, 1fr) minmax(230px, 290px); grid-template-areas: "identity ownership" "links ownership"; }
}
.focus-decision { border-left: 3px solid var(--signal); background: var(--signal-bg); border-radius: 0 8px 8px 0; padding: 12px 14px; margin: 20px 0; }
.focus-decision strong { font-size: 16px; color: var(--signal); }
.focus-decision p { font-size: 13px; color: #a5aec0; line-height: 1.5; margin: 5px 0 0; }
.focus-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.focus-prices-primary { grid-template-columns: minmax(0, 1fr); }
.focus-prices > div { min-width: 0; }
.focus-prices > .focus-price { background: var(--signal-bg); border-top: 2px solid var(--signal); border-radius: 8px; padding: 12px; }
.focus-price > span, .focus-price > small { display: block; color: var(--muted); line-height: 1.5; font-size: 12px; }
.focus-price-amount > b { display: block; font-size: 32px; line-height: 1.2; margin: 7px 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.focus-price-amount { display: flex; align-items: baseline; gap: 7px; }
.focus-price-amount em { color: #a5aec0; font-size: 11px; font-style: normal; font-weight: 600; }
.focus-prices small.pos { color: var(--good); }
.focus-prices small.neg { color: var(--danger); }
.focus-price > span:first-child, .focus-price > b { color: var(--signal); }
.focus-return { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.focus-return > span > strong { color: var(--text); font-variant-numeric: tabular-nums; }
.focus-prices .focus-pnl { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--signal); font-weight: 600; }
.focus-prices .focus-pnl strong { color: inherit; font-size: 13px; }
.focus-prices > .focus-decision { margin: 0; }
.focus-freshness { color: #a5aec0; font-size: 12px; line-height: 1.5; }
.focus-freshness::before { margin-right: 7px; vertical-align: 1px; }
.focus-warning { color: var(--warn); }
#dayPlanError, #dayPlanHoldingsError, #ticketMutationStatus { overflow-wrap: anywhere; }
.focus-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.focus-controls a { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; padding: 10px 14px; border-radius: 9px; }
.focus-controls button { min-height: 44px; }
.focus-controls small { width: 100%; color: var(--muted); font-size: 12px; }
.tracked-sales h3 { font-size: 14px; margin: 14px 0 8px; }
.tracked-sale-list { list-style: none; padding: 0; }
.tracked-sale-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tracked-sale-list li > div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tracked-sale-list li > p { margin: 5px 0; font-size: 12px; }
.tracked-sale-list small { color: var(--muted); }
.weak-sale-evidence > summary { font-size: 12px; padding: 9px 0; }
#focusAnalysisRetry { justify-self: start; min-height: 36px; }
.focus-history { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; }
.focus-history summary { cursor: pointer; color: #a5aec0; padding: 5px 0; }
.focus-history p { color: #a5aec0; line-height: 1.5; }
.focus-history ul { list-style: none; padding: 0; }
.focus-history li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.focus-history time { display: block; margin-top: 3px; color: #a5aec0; font-size: 12px; }
.focus-card-reasoning { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,23,32,.35); }
.focus-card-reasoning > summary {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 12px 14px; list-style: none;
}
.focus-card-reasoning > summary::-webkit-details-marker { display: none; }
.focus-card-reasoning > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.reasoning-summary-icon {
  display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 8px;
  color: #9cbef4; background: rgba(91,140,255,.1); font-size: 20px; font-weight: 500;
}
.reasoning-summary-copy { flex: 1; min-width: 0; }
.reasoning-summary-copy strong { display: block; color: #d9e3f2; font-size: 12px; font-weight: 650; line-height: 1.5; }
.reasoning-summary-copy small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.reasoning-summary-chevron { width: 7px; height: 7px; flex-shrink: 0; border-right: 1.5px solid #8593a9; border-bottom: 1.5px solid #8593a9; transform: rotate(45deg); }
.focus-card-reasoning[open] .reasoning-summary-chevron { transform: rotate(225deg); }
.reasoning-body { display: grid; gap: 14px; padding: 0 14px 14px; }
.reasoning-body > section { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.reasoning-section-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.reasoning-section-heading h3 { margin: 0; font-size: 12px; text-transform: none; letter-spacing: 0; color: #d9e3f2; }
.reasoning-chip { color: #a4b4ca; border: 1px solid #33435a; border-radius: 99px; font-size: 9px; padding: 3px 7px; line-height: 1.3; }
.reasoning-chip-warning { color: #dec499; border-color: #645039; }
.reasoning-tier { font-size: 11px; overflow-wrap: anywhere; }
.reasoning-price-flow, .reasoning-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.reasoning-price-flow > div, .reasoning-metrics > div { min-width: 0; padding: 10px; border-radius: 8px; background: rgba(91,140,255,.055); }
.reasoning-body dt { color: #95a5bb; font-size: 10px; line-height: 1.5; }
.reasoning-body dd { margin: 5px 0 0; color: #e2ebf8; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.reasoning-metrics dd { font-size: 15px; }
.reasoning-body .reasoning-caption { margin: 8px 0; color: #8f9fb6; font-size: 10px; line-height: 1.6; }
.reasoning-source-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; font-size: 10px; color: #95a5bb; }
.reasoning-source-row strong { color: #c0ccdc; font-weight: 550; }
.reasoning-sale-list { margin: 10px 0 0; padding: 0; list-style: none; }
.reasoning-sale-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reasoning-sale-list strong { color: #cbdaf0; font-size: 12px; }
.reasoning-sale-list small { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }
.reasoning-sale-time { max-width: 60%; color: #9facbf; font-size: 10px; text-align: right; line-height: 1.5; }
.reasoning-ledger { margin: 12px 0; }
.reasoning-ledger > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.reasoning-ledger dd { margin: 0; font-size: 13px; }
.reasoning-ledger-total { border-top: 1px solid var(--line); margin-top: 4px; }
.reasoning-ledger-total dt, .reasoning-ledger-total dd { color: #c6d9fa; font-weight: 650; }
.reasoning-deadline { padding: 12px; border-left: 2px solid #6f91c4; border-radius: 0 8px 8px 0; background: rgba(91,140,255,.055); }
.reasoning-deadline > * { display: block; }
.reasoning-deadline span, .reasoning-deadline small { font-size: 10px; color: #98a9c0; line-height: 1.5; }
.reasoning-deadline strong { color: #dce7f7; font-size: 13px; margin: 5px 0; }
.reasoning-manage { padding-top: 8px; }
@container holding (min-width: 640px) {
  .reasoning-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .reasoning-price { grid-column: 1 / -1; }
}
@container holding (max-width: 360px) {
  .reasoning-price-flow, .reasoning-metrics { gap: 4px; }
  .reasoning-price-flow > div, .reasoning-metrics > div { padding: 8px 6px; }
  .reasoning-price-flow dd { font-size: 16px; }
  .reasoning-metrics dd { font-size: 13px; }
}
.focus-tier-history { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.focus-history-heading { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.focus-history-heading h3 { margin: 0; }
.focus-history-heading-actions { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.chart-refresh { min-height: 44px; min-width: 76px; white-space: nowrap; }
.chart-refresh:disabled { cursor: wait; opacity: .7; }
.chart-refresh-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chart-refresh-status.focus-warning { color: var(--warn); }
.focus-history-heading .hmode button { min-height: 40px; padding-inline: 12px; }
.history-update-badge { position: absolute; bottom: calc(100% + 4px); right: 0; padding: 3px 7px; color: #dff9ef; background: #183e34; border: 1px solid rgba(142,224,193,.55); border-radius: 999px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.sale-history-updated .history-line-frame { animation: sale-history-frame-update 1.4s ease-out; }
.sale-history-updated .sale-price-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sale-history-line-draw 1.2s ease-out forwards; }
.sale-history-updated .sale-line-point.latest:not(.possible) { transform-box: fill-box; transform-origin: center; animation: sale-history-point-pulse 1.5s ease-out; }
.sale-history-updated .history-update-badge { animation: sale-history-badge-in 350ms ease-out; }
@keyframes sale-history-frame-update {
  0%, 100% { border-color: #2d3d55; box-shadow: none; }
  35% { border-color: #8ee0c1; box-shadow: 0 0 0 3px rgba(142,224,193,.13); }
}
@keyframes sale-history-line-draw { to { stroke-dashoffset: 0; } }
@keyframes sale-history-point-pulse {
  0% { transform: scale(.65); opacity: .35; }
  45% { transform: scale(1.65); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes sale-history-badge-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sale-history-updated .history-line-frame,
  .sale-history-updated .sale-price-line,
  .sale-history-updated .sale-line-point.latest:not(.possible),
  .sale-history-updated .history-update-badge { animation: none; }
  .sale-history-updated .sale-price-line { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.focus-tier-history .price-history { margin-top: 12px; }
.evidence-tape { list-style: none; padding: 0; margin: 12px 0; }
.evidence-tape li { overflow-wrap: anywhere; }
.evidence-tape span, .evidence-tape small { color: #a5aec0; font-size: 12px; }
.evidence-tape small { display: block; margin-top: 4px; line-height: 1.5; }
.evidence-tape .evidence-label { display: inline-block; margin-top: 6px; font-weight: 600; }
.evidence-tape .evidence-strong { color: #94b7ff; }
.focus-empty { padding: 26px 24px; border: 1px solid #405474; border-radius: 16px; background: linear-gradient(145deg, rgba(91,140,255,.09), rgba(18,27,42,.25)); }
.focus-empty-eyebrow { margin: 0 0 5px !important; color: #94b7ff !important; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.focus-empty h2 { margin: 0 0 7px; font-size: 22px; text-transform: none; letter-spacing: normal; }
.focus-empty > p { max-width: 700px; margin: 0; line-height: 1.6; color: #a5aec0; }
.focus-empty ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.focus-empty li { display: flex; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,16,26,.35); }
.focus-empty li > b { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; color: #dce8ff; background: #376fc9; border-radius: 50%; font-size: 11px; }
.focus-empty li span, .focus-empty li strong { display: block; }
.focus-empty li strong { margin-bottom: 4px; color: var(--text); font-size: 12px; }
.focus-empty li span { color: #a5aec0; font-size: 11px; line-height: 1.45; }
.focus-empty > small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }
@media (max-width: 760px) {
  .focus-empty ol { grid-template-columns: minmax(0, 1fr); }
}
.focus-footnote { margin: 24px 0; }
.sell-timing { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 16px 0; min-width: 0; overflow-wrap: anywhere; }
.sell-timing h2 { margin: 0 0 12px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.sell-timing-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.sell-timing-filters label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); flex: 1 1 180px; min-width: 0; max-width: 380px; }
.sell-timing-filters select { width: 100%; min-width: 0; min-height: 44px; padding: 9px; color: var(--text); background: var(--panel2); border: 1px solid var(--control-line); border-radius: 7px; font: inherit; font-size: 13px; }
.sell-timing p, .sell-timing li { font-size: 12px; line-height: 1.5; margin: 8px 0; }
.sell-timing .sell-timing-note { color: var(--muted); }
.sell-timing-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 12px; }
.sell-timing-verdict > strong { font-size: 15px; }
.sell-timing-target { flex: 1 1 280px; min-width: 0; }
.sell-timing-target strong { display: block; font-size: 18px; line-height: 1.35; color: #94b7ff; }
.sell-timing-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.sell-timing-window { color: #94b7ff; }
.sell-timing-confidence { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sell-timing-estimates { font-variant-numeric: tabular-nums; }
.sell-timing-error { color: var(--danger); }
.sell-timing details { margin-top: 10px; color: var(--muted); }
.sell-timing summary { cursor: pointer; font-size: 12px; width: fit-content; min-height: 44px; padding: 12px 0; box-sizing: border-box; }
.sell-timing details p, .sell-timing details ul { max-width: 90ch; }
.sell-timing details ul { padding-left: 18px; }
.sell-timing :is(select, summary, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.retail-history { margin: 12px 0 16px; overflow-wrap: anywhere; }
.retail-history p { font-size: 12px; line-height: 1.5; }
.retail-history-group { margin: 18px 0; }
.retail-history-group h3 { font-size: 13px; margin: 0 0 8px; }
.retail-grid-scroll { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.retail-grid-mobile-hint { display: none; }
@media (max-width: 640px) {
  .retail-grid-scroll { max-height: min(300px, 42svh); overflow: auto; overscroll-behavior: contain; }
  .retail-grid-mobile-hint { display: block; margin: 0 0 8px; color: var(--muted); font-size: 11px; }
  .retail-grid-scroll .retail-price-grid { min-width: max(360px, calc(130px + var(--retail-grid-columns, 2) * 92px)); }
  .retail-grid-scroll .retail-price-grid thead th { position: sticky; top: 0; z-index: 3; }
  .retail-grid-scroll .retail-price-grid tr > :first-child { position: sticky; left: 0; width: 130px; z-index: 2; }
  .retail-grid-scroll .retail-price-grid thead th:first-child { z-index: 4; }
}
.retail-price-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.retail-fit-label { display: block; position: relative; min-width: 0; overflow: hidden; }
.retail-fit-measure { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; }
.retail-price-grid caption { text-align: left; padding: 10px; color: var(--muted); }
.retail-price-grid th, .retail-price-grid td { padding: 10px 4px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; vertical-align: middle; }
.retail-price-grid td { padding-inline: 2px; }
.retail-price-grid th { text-transform: none; letter-spacing: normal; }
.retail-price-grid tr > :last-child { border-right: 0; }
.retail-price-grid thead th { font-size: 11px; color: var(--muted); background: var(--panel2); }
.retail-price-grid tr > :first-child { width: 25%; text-align: left; background: var(--panel); }
.retail-price-grid td:not(.retail-grid-empty) { background: var(--panel2); }
.retail-price-grid .retail-grid-empty { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.3; }
.retail-grid-stage { white-space: normal; }
.retail-price-grid small { display: block; color: var(--muted); font-weight: normal; margin-top: 4px; }
.retail-grid-price { display: block; font-weight: 650; }
.retail-grid-price + .retail-grid-price { margin-top: 5px; }
.retail-grid-price sup { color: var(--warn); }
.retail-price-grid td.retail-grid-unavailable { background: #173d2c; color: #a4efc3; box-shadow: inset 0 0 0 1px #4bd08b; }
.retail-price-grid td.retail-grid-unavailable small { color: #a4efc3; }
#retailHistoryDetails > summary { min-height: 44px; padding: 12px 0; box-sizing: border-box; cursor: pointer; font-size: 12px; color: var(--muted); }
.retail-history-table { min-width: 640px; font-size: 12px; }
.retail-history-table th { white-space: normal; }
.retail-history-table td { vertical-align: top; white-space: normal; }
.retail-history-table small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.retail-history-caveat { color: var(--warn); }
.retail-history-error { color: var(--danger); }
.event-tiers { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--control-line); border-radius: var(--r); background: var(--panel); min-width: 0; }
.event-tiers > .sales-head { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.event-tiers h2 { margin: 0 auto 0 0; font-size: 16px; color: var(--text); letter-spacing: normal; text-transform: none; }
#tab-events.event-classic-view { max-width: 1120px; margin-inline: auto; }
#tab-events :is(.vchip, #browseEvents) { min-height: 44px; }
.event-classic-view #eventDetail { padding: 0; border: 0; background: transparent; }
.event-classic-view .eventpick-preview { display: none; }
.event-classic-summary { margin-bottom: 16px; }
.event-classic-summary > header {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "identity" "links";
}
.event-classic-summary .focus-event-links { flex-direction: row; flex-wrap: wrap; justify-self: stretch; }
.event-classic-view .event-tiers { padding: 0; border: 0; background: transparent; }
.event-classic-view .event-tiers > .cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.event-tier-card .card-title { font-size: 18px; }
.event-tier-card .tsold { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.event-tier-timing { min-height: 44px; margin: 14px 0; }
.event-classic-view .sell-timing { padding: 22px; border-radius: 14px; }
.event-classic-view #monitoringEvent { margin-top: 0; }
@media (min-width: 760px) {
  .event-classic-summary > header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity links";
  }
  .event-classic-summary .focus-event-links { justify-self: end; }
}
.retail-history :is(select, summary, button, .scroll, .retail-grid-scroll):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:is(.section-disclosure, .why, .focus-history, .history-method, .sell-timing details, #retailHistoryDetails) > summary {
  width: 100%; min-height: 44px; padding: 10px 12px;
  color: var(--text); background: var(--section-header);
  border: 1px solid var(--control-line); border-radius: 8px;
  font-size: 13px; font-weight: 600;
}
:is(.section-disclosure, .why, .focus-history, .history-method, .sell-timing details, #retailHistoryDetails)[open] > summary {
  background: var(--section-open); border-color: #8eadcf;
}
:is(.section-disclosure, .why, .focus-history, .history-method, .sell-timing details, #retailHistoryDetails) > summary:focus-visible {
  outline: 2px solid #adc8ff; outline-offset: 3px;
}
.ticket-editor { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; width: min(720px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; box-sizing: border-box; }
.ticket-editor::backdrop { background: rgba(0, 0, 0, .72); }
.ticket-editor :is(button, input:not([type="checkbox"]), select, textarea) { min-height: 44px; }
.ticket-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ticket-editor-heading h2 { margin: 0; }
.ticket-editor > p, .ticket-edit-hint { color: #a5aec0; font-size: 13px; line-height: 1.5; }
.sale-record-form, .ticket-edit-form { display: grid; gap: 12px; }
.sale-record-form > p { margin: 0; color: #a5aec0; font-size: 13px; line-height: 1.5; }
.ticket-split-confirm { padding: 16px; border: 1px solid var(--control-line); border-radius: 10px; background: var(--panel2); }
.ticket-split-confirm h3 { margin: 0 0 7px; font-size: 16px; }
.ticket-split-confirm p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#ticketEditorForms { display: grid; gap: 10px; margin-top: 14px; }
.ticket-edit-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel2); }
.ticket-edit-card > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 54px; padding: 11px 14px; cursor: pointer; list-style: none;
}
.ticket-edit-card > summary::-webkit-details-marker { display: none; }
.ticket-edit-card > summary > span:first-child { min-width: 0; }
.ticket-edit-card > summary strong, .ticket-edit-card > summary small { display: block; }
.ticket-edit-card > summary small { margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.ticket-edit-card[open] > summary { border-bottom: 1px solid var(--line); background: var(--section-open); }
.ticket-edit-form { padding: 16px; margin: 0; background: var(--panel); }
.ticket-edit-state { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 11px; color: var(--good); background: rgba(70,209,140,.12); }
.ticket-edit-state.sold { color: var(--accent); background: rgba(91,140,255,.14); }
.ticket-edit-state.used { color: var(--danger); background: rgba(255,107,107,.12); }
.sale-record-form label, .ticket-edit-form label { display: grid; gap: 6px; font-size: 13px; }
.sale-record-form input, .ticket-edit-form input, .ticket-edit-form select, .ticket-edit-form textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); padding: 10px; border-radius: 7px; }
.sale-details { display: grid; gap: 12px; }
.ticket-used-choice { padding: 12px; border: 1px solid var(--control-line); border-radius: 9px; background: var(--panel2); }
.ticket-used-choice > span { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.sale-record-form .ticket-used-choice input, .ticket-edit-form .ticket-used-choice input { width: auto; padding: 0; accent-color: var(--accent); }
.ticket-used-choice small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.ticket-sale-fields { display: grid; gap: 12px; margin: 2px 0; padding: 14px; border: 1px solid var(--control-line); border-radius: 9px; }
.ticket-sale-fields legend { padding: 0 6px; color: var(--text); font-size: 12px; font-weight: 700; }
.ticket-edit-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.ticket-edit-result { font-size: 13px; line-height: 1.5; margin: 0; }
.ticket-edit-result .link { min-height: 44px; margin-left: 5px; }

/* My Tickets keeps purchase entry one tap away without occupying the itinerary. */
#addPanel.addwrap {
  position: fixed; right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom)); z-index: 45;
  width: auto; max-width: calc(100vw - 24px); margin: 0; padding: 0;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none;
}
#addPanel.addwrap > summary {
  display: inline-flex; align-items: center; gap: 9px; width: auto;
  min-height: 48px; padding: 10px 16px; border: 1px solid #8fb0ff; border-radius: 12px;
  list-style: none; cursor: pointer; color: #06101f; background: var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
#addPanel.addwrap > summary::-webkit-details-marker { display: none; }
.add-fab-icon { position: relative; display: grid; place-items: center; width: 20px; height: 20px; }
.add-fab-plus-only::before, .add-fab-plus-only::after {
  content: ""; position: absolute; width: 18px; height: 2px;
  border-radius: 999px; background: currentColor;
}
.add-fab-plus-only::after { transform: rotate(90deg); }
.add-fab-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.add-fab-close { display: none; }
#addPanel.addwrap:not([open]) > summary:hover { transform: translateY(-2px); }
#addPanel.addwrap[open] {
  width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 36px);
  overflow-y: auto; padding: 15px; border: 1px solid var(--control-line);
  border-radius: 16px; background: var(--panel);
  box-shadow: 0 18px 55px rgba(0,0,0,.68);
}
#addPanel.addwrap[open] > summary {
  position: sticky; top: -15px; z-index: 2; display: flex; justify-content: flex-start;
  gap: 10px; width: 100%; height: auto; min-height: 48px; margin: 0 0 14px;
  padding: 8px 11px; border-color: var(--control-line); border-radius: 10px;
  color: var(--text); background: var(--section-header); box-shadow: 0 5px 12px rgba(0,0,0,.3);
}
#addPanel.addwrap[open] .add-fab-icon { width: 29px; height: 29px; }
#addPanel.addwrap[open] .add-fab-plus-only::before,
#addPanel.addwrap[open] .add-fab-plus-only::after { width: 23px; height: 2.5px; }
#addPanel.addwrap[open] .add-fab-label {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip-path: none; font-size: 15px; font-weight: 750;
}
#addPanel.addwrap[open] .add-fab-close {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  min-height: 34px; padding: 5px 7px 5px 10px;
  border: 1px solid rgba(255,255,255,.42); border-radius: 9px;
  color: #fff; background: rgba(255,255,255,.10);
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase;
}
#addPanel.addwrap[open] .add-fab-close b {
  display: grid; place-items: center; width: 23px; height: 23px;
  border-radius: 50%; background: rgba(255,255,255,.18);
  font-size: 20px; font-weight: 400; line-height: 1;
}
#addPanel.addwrap[open] > summary:hover .add-fab-close {
  border-color: #fff; background: rgba(255,255,255,.18);
}
@media (max-width: 640px) {
  main:has(> .ticket-view-mode.active) {
    padding-left: max(9px, env(safe-area-inset-left));
    padding-right: max(9px, env(safe-area-inset-right));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .ticket-wallet-event-copy strong { font-size: 20px; }
  .ticket-wallet-event-copy > span { font-size: 18px; }
}
@media (max-width: 450px) {
  .ticket-view-options { grid-template-columns: minmax(0, 1fr); }
  .addform { grid-template-columns: minmax(0, 1fr); }
  .addform > * { grid-column: 1 !important; }
  .add-actions { display: grid; }
  .focus-event-index-heading { align-items: stretch; flex-wrap: wrap; }
  .focus-event-jump { flex-basis: 100%; }
  .focus-event-group > summary {
    grid-template-columns: minmax(0, 1fr) max-content 12px; gap: 8px;
  }
  .focus-event-summary-main strong { font-size: 15px; }
  .focus-event-group > .focus-grid { padding: 12px; }
  #addPanel.addwrap {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  #addPanel.addwrap[open] {
    right: 8px; bottom: 8px; width: calc(100vw - 16px);
    max-width: none; max-height: calc(100dvh - 16px);
  }
  .focus-heading { flex-direction: column; gap: 10px; }
  .focus-card { padding: 14px; }
  .focus-prices { gap: 12px; }
  .focus-prices > .focus-price { padding: 10px; }
  .tabs { gap: 0; padding-inline: 8px; }
  .tab { padding-inline: 10px; font-size: 12px; }
  .site-guide-trigger { font-size: 10px; padding-inline: 5px; }
  .site-guide-trigger svg { width: 16px; }
  .addform :is(input, select), .ticket-edit-form :is(input, select, textarea), .sale-record-form input { font-size: 16px; }
}