/* ============================================================================
 * Host dashboard shell + analytics widgets.
 * Mature graphite console with rainbow reserved for interaction/attention states.
 * ========================================================================== */

.app-sidebar, .app-mobilebar, .app-scrim { display: none; }
html[data-theme="host"] .app-sidebar { display: flex; }
html[data-theme="host"] .tsn-nav { display: none; }
html[data-theme="host"] body { padding-top: 0; }
html[data-theme="host"] #main { margin-left: 236px; min-height: 100vh; }

@property --rainbow-angle { syntax: "<angle>"; initial-value: 0deg; inherits: true; }

/* ---- sidebar -------------------------------------------------------------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: 236px; z-index: 60;
  flex-direction: column; gap: 4px; padding: 18px 12px;
  border-right: 1px solid var(--border);
  background: #101113;
  box-shadow: none;
  overflow-x: hidden; overflow-y: auto;
}
.app-brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 2px 8px 18px; max-width: 100%; overflow: hidden;
}
.app-brand img { height: 15px; display: block; flex: none; opacity: .94; }
.app-brand span {
  color: var(--text); font-family: var(--font-display); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; border-left: 1px solid var(--border-2);
  padding-left: 8px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--faint);
  font-weight: 700; padding: 12px 12px 6px;
}
.app-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 600; position: relative;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.app-nav-item:hover { color: var(--text); background: rgba(255,255,255,.035); border-color: var(--border); }
.app-nav-item.active { color: var(--text); background: #17191b; border-color: var(--border); }
.app-nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
.app-nav-item svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; }
.app-side-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.app-account {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  padding: 6px; border-radius: 7px; border: 1px solid transparent;
}
.app-account:hover { background: rgba(255,255,255,.035); border-color: var(--border); }
.app-account-email { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-logout {
  background: #151619 !important; color: var(--muted) !important; border: 1px solid var(--border) !important;
  border-radius: 7px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; width: 100%;
}
.app-logout:hover { color: var(--text) !important; background: var(--surface-2) !important; }

/* ---- mobile top bar + drawer scrim --------------------------------------- */
.app-mobilebar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 50; align-items: center; gap: 12px;
  padding: 0 14px; border-bottom: 1px solid var(--border); background: #101113;
}
.app-burger { background: none !important; border: none !important; padding: 6px !important; color: var(--text) !important; display: inline-flex; }
.app-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.app-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.56); border: none; }

/* ---- content container ---------------------------------------------------- */
.app-content { max-width: 1160px; margin: 0 auto; padding: 26px clamp(16px, 3vw, 32px) 88px; }
.app-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.app-head .shell-head { margin: 0; }
.app-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.app-back:hover { color: var(--text); }

[data-theme="host"] .app-head .ts-btn--primary,
[data-theme="host"] [data-open-newevent].ts-btn--primary,
#createBtn {
  overflow: hidden;
}
[data-theme="host"] .app-head .ts-btn--primary::after,
[data-theme="host"] [data-open-newevent].ts-btn--primary::after,
#createBtn::after {
  content: ""; position: absolute; inset: auto 8px 5px; height: 2px; border-radius: 999px;
  background: var(--rainbow); opacity: 0; transform: scaleX(.2); transform-origin: left;
  transition: opacity var(--t-base), transform var(--t-base);
}
[data-theme="host"] .app-head .ts-btn--primary:hover::after,
[data-theme="host"] .app-head .ts-btn--primary:focus-visible::after,
[data-theme="host"] [data-open-newevent].ts-btn--primary:hover::after,
[data-theme="host"] [data-open-newevent].ts-btn--primary:focus-visible::after,
#createBtn:hover::after,
#createBtn:focus-visible::after {
  opacity: 1; transform: scaleX(1);
}

/* ---- KPI stat strip: one segmented ledger -------------------------------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  margin-bottom: 24px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: #151719; overflow: hidden; box-shadow: var(--ring-top);
}
.stat-card {
  background: transparent; border: 0; border-right: 1px solid var(--border);
  border-radius: 0; box-shadow: none; padding: 15px 16px 13px; min-width: 0;
  transition: background var(--t-fast);
}
.stat-card:last-child { border-right: 0; }
.stat-card:hover { background: rgba(255,255,255,.025); }
.stat-card .k { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted); font-weight: 650; }
.stat-card .ico {
  width: 26px; height: 26px; border-radius: 6px; background: #202226; color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--border);
}
.stat-card .ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.stat-card .v { font-size: 30px; font-weight: 760; letter-spacing: 0; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.stat-card .sub { font-size: 12px; color: var(--faint); margin-top: 6px; min-height: 16px; }
.stat-card .spark { color: var(--accent-2); height: 34px; margin-top: 8px; }
.stat-card.is-empty .v { color: var(--muted); }

/* ---- events grid + contact-sheet cards ----------------------------------- */
/* The gap has to clear the fan, not just separate the cards. The deepest sheet reaches
 * 26px left and 13px up at rest and 42px/21px on hover, so a tight grid has stacks
 * lying across their neighbours — which reads as a layout bug rather than as depth. */
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 30px 34px; }

/* ==========================================================================
 * THE POLAROID
 *
 * The event card is a sheet of instant film: a square window at the top and a
 * deep chin under it carrying the name and the numbers. That is the anatomy the
 * card already had — image slot, then a text block — so this is the card being
 * honest about what it always was rather than a costume put on it.
 *
 * Behind the front sheet, one more per further photo, fanned. Depth stays
 * HONEST: the sheet count is the real approved-photo count, capped at three.
 * One photo is one sheet with nothing behind it; an event with no photos gets an
 * unexposed sheet, which keeps every card in the grid the same shape.
 *
 * WHY THE FAN ROTATES INSTEAD OF SLIDING. A real stack of prints offset sideways
 * shows nothing of the ones underneath but white frame — which would make the
 * back sheets' photographs bytes spent on paper. Rotated about a pivot low in the
 * stack, what clears the front sheet is each one's top CORNER: white edge and a
 * wedge of the photograph. The images earn their place.
 *
 * THE GROUND SHIFTS AND THAT IS THE POINT. Everything else in this console is
 * matte graphite; the cards are now the one bright object in it, which is what
 * makes a wall of them read as photographs on a dark table rather than as rows in
 * a database. The frame is off-white, never #fff — instant film stock is warm and
 * a pure white would glare against #0f1011.
 * ====================================================================== */

.event-card {
  display: block; position: relative;
  /* The sheet carries the surface now. The card is only a positioning context, and
   * it must NOT clip: the fanned sheets deliberately break its box. */
  background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
  text-decoration: none; color: inherit;
  transition: transform var(--t-fast) var(--ease-standard);
}
.event-card:hover, .event-card:focus-visible { transform: translateY(-3px); outline: none; }
.event-card:focus-visible .ec-sheet--front { outline: 2px solid var(--accent); outline-offset: 3px; }

.ec-sheet {
  display: block;
  background: #f2f1ec;
  border-radius: 3px;
  padding: 13px 13px 0;
  /* Light from above: a hairline highlight on the top edge, shadow below. */
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.ec-sheet--front { position: relative; z-index: 1; }

/* The stack sits in the card's box and the sheets fan out of it. Sized by inset:0
 * against the card, which the front sheet has already given a height — so the back
 * sheets are always exactly as tall as the one in front, whatever the chin holds. */
.ec-stack { position: absolute; inset: 0; z-index: 0; }
.ec-sheet--back {
  position: absolute; inset: 0;
  /* A shade darker than the front, so the stack reads as depth and not as one wide
   * sheet with corners sticking out. */
  background: #e6e5df;
  /* A narrower border than the front sheet, and deliberately so. Only the outer few
   * millimetres of these are ever visible, and at the front sheet's 13px frame that
   * sliver was entirely white card — the photographs behind were paying for paper.
   * At 7px the same offset clears the border and lands on picture. */
  padding: 7px 7px 0;
  transform-origin: 50% 88%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .42);
  overflow: hidden;
}

/* The fan, keyed off the TOPMOST back sheet so one sheet and two both read from one
 * rule set — measured down from the front, never up from the bottom.
 *
 * TRANSLATE AND ROTATE, not rotate alone. Rotation alone was measured and rejected:
 * at a readable angle the top corner clears the front sheet by ~15px, and the front
 * sheet's own frame is 13px, so what showed was two pixels of photograph behind
 * thirteen of white card. The translate is what carries each sheet past that frame;
 * the rotation is what keeps it from reading as a flat offset. Up as well as left,
 * because a stack shifted purely sideways hides its corners behind the chin. */
.ec-sheet--back:nth-last-child(1) { transform: translate(-15px, -12px) rotate(-3.5deg); }
.ec-sheet--back:nth-last-child(2) { transform: translate(-30px, -23px) rotate(-7deg); }

/* The window. Square, because that is the shape instant film prints. */
.ec-window {
  display: block; position: relative;
  aspect-ratio: 1 / 1;
  background: #1c1e21; overflow: hidden;
}
.ec-window img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.94) contrast(1.04);
}

/* An event with no photos: an unexposed sheet. Not the hatched "missing image"
 * placeholder — nothing is missing, the pool is simply empty, and a blank frame
 * says that without crying about it. */
.ec-window--empty {
  display: flex; align-items: center; justify-content: center; font-size: 0;
  background: linear-gradient(160deg, #24262a, #191b1e 60%);
  color: rgba(255, 255, 255, .30);
}
.ec-window--empty svg { width: 26px; height: 26px; }

/* Fade in on decode rather than pop (DESIGN_PLAN §6.8). VISIBLE IS THE DEFAULT and
 * hidden is the opt-in — the only arrangement that fails safe. Authored the other way
 * round, a cached image (which never fires `load`), a decode error, or any throw
 * between creating the <img> and binding its handler leaves a card permanently blank.
 * Only cards.js deliberately marking an image in-flight can hide it, and only while
 * motion is welcome. */

/* ---- the chin ----------------------------------------------------------
 * Dark ink on the film's own stock. Every colour here is scoped under .event-card
 * so the console's other pills, bars and lists keep their dark-ground styling. */
.event-card-body { padding: 11px 1px 13px; display: flex; flex-direction: column; gap: 7px; }
.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.event-card .name { font-weight: 700; font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em;
  color: #16181c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-card .slug { font-size: 11px; color: #8d9096; margin-top: 2px; }
.event-card-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6d7076; flex-wrap: wrap; }
.event-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #a8abb0; }
.event-card-cap { display: flex; flex-direction: column; gap: 5px; }
.event-card-cap .caplabel { display: flex; justify-content: space-between; font-size: 10.5px; color: #8d9096; }
.event-card .pp-capbar { background: rgba(10, 12, 16, .09); }

/* The state chip, re-mixed for a light ground. The console's own pills are
 * translucent white-on-dark and would wash out to nothing on film stock. */
.event-card .pill.live { background: rgba(17, 122, 72, .10); color: #0f7245; border: 1px solid rgba(17, 122, 72, .26); }
.event-card .pill.draft { background: rgba(10, 12, 16, .045); color: #6d7076; border: 1px solid rgba(10, 12, 16, .13); }
.event-card .pill.suspended { background: rgba(150, 100, 10, .11); color: #8a5c07; border: 1px solid rgba(150, 100, 10, .26); }
.event-card .pill.ended, .event-card .pill.archived { background: rgba(178, 59, 50, .09); color: #a83a32; border: 1px solid rgba(178, 59, 50, .22); }
.event-card .pill.role { background: rgba(76, 125, 240, .10); color: #3560c8; border: 1px solid rgba(76, 125, 240, .26); }

/* The attention hairline moves onto the sheet — the card itself has no edge now. */
.event-card--suspended .ec-sheet--front::before,
.event-card--near-capacity .ec-sheet--front::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--rainbow); border-radius: 3px 3px 0 0;
}

/* ---- the riffle ---------------------------------------------------------
 * Written inside `no-preference` as the ENABLING condition, never as a `reduce`
 * override bolted on after — seam.css §15 and neon.css §17 are explicit that this is
 * the house discipline, because it fails safe: a missed query means no animation
 * rather than unwanted animation. The reduce allowlist at the bottom of this file
 * would NOT have covered these selectors.
 *
 * Reduced motion keeps the STATE and drops only the TRAVEL (seam.css §13): the fan
 * above still renders, because how many photos an event has is information, not
 * decoration. It simply never spreads.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ec-sheet--back { transition: transform var(--t-fast) var(--ease-standard); }
  .ec-window img { transition: opacity var(--t-base) var(--ease-standard); }
  .ec-window img.is-loading { opacity: 0; }

  .event-card:hover .ec-sheet--back:nth-last-child(1),
  .event-card:focus-visible .ec-sheet--back:nth-last-child(1) { transform: translate(-21px, -11px) rotate(-6deg); }
  .event-card:hover .ec-sheet--back:nth-last-child(2),
  .event-card:focus-visible .ec-sheet--back:nth-last-child(2) { transform: translate(-42px, -21px) rotate(-11deg); }
}

.event-card--live:hover .pp-capbar-fill,
.event-card--live:focus-visible .pp-capbar-fill,
.event-card--suspended .pp-capbar-fill,
.event-card--near-capacity .pp-capbar-fill {
  background: var(--rainbow) !important; background-size: 220% 100% !important;
  animation: pp-rainbow-slide 1.3s linear infinite;
}
.cd { font-variant-numeric: tabular-nums; color: #16181c; }

/* ---- per-event widget grid ------------------------------------------------ */
.widget-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.widget-card {
  grid-column: span 12; background: #161719; border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--ring-top); padding: 16px;
}
.widget-card > h3 { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.widget-figure { font-size: 33px; font-weight: 760; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.widget-sub { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.widget-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 720px) {
  .w-3 { grid-column: span 3; } .w-4 { grid-column: span 4; } .w-5 { grid-column: span 5; }
  .w-6 { grid-column: span 6; } .w-7 { grid-column: span 7; } .w-8 { grid-column: span 8; }
}

.top-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.top-photos .tp { position: relative; width: 72px; height: 72px; border-radius: 7px; overflow: hidden; background: var(--surface-2); flex: none; }
.top-photos .tp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-photos .tp .hc { position: absolute; left: 4px; bottom: 4px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.58); border-radius: 5px; padding: 1px 6px; }

.ent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ent-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--ring-top); }
.ent-item .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ent-item .v { font-size: 14px; font-weight: 650; margin-top: 3px; }
.ent-item .v.on { color: var(--ok); } .ent-item .v.off { color: var(--muted); }

/* ---- chart primitives ----------------------------------------------------- */
.pp-chart { display: block; width: 100%; }
.pp-spark { height: 34px; }
.pp-area, .pp-bars { height: 120px; }
#wUploads { color: var(--accent-2); }
.pp-ring { width: 132px; height: 132px; margin: 4px auto 2px; }
.pp-gauge { width: 150px; height: 96px; margin: 0 auto; overflow: visible; }
.pp-ring-num { font-size: 21px; font-weight: 750; }
.pp-ring-sub { font-size: 10px; }
.pp-capbar { height: 5px; border-radius: 999px; background: #24262a; overflow: hidden; }
.pp-capbar-fill { display: block; height: 100%; border-radius: 999px; transition: width var(--t-base) var(--ease-standard); }
@keyframes pp-rainbow-slide { to { background-position: 220% 0; } }

/* ---- create/claim sheet --------------------------------------------------- */
.ts-sheet-scrim[hidden] { display: none; }
.ts-sheet-scrim { background: rgba(0,0,0,.62); }
.sheet-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.sheet-tab {
  flex: 1; padding: 9px; border-radius: 7px; background: var(--surface-2) !important; color: var(--muted) !important;
  border: 1px solid transparent !important; font-weight: 650; font-size: 13px;
}
.sheet-tab.active { background: #151719 !important; border-color: var(--border-2) !important; color: var(--text) !important; }
.sheet-pane[hidden] { display: none; }
.sheet-title { margin: 2px 0 12px; font-size: 17px; font-weight: 700; }
#sheetDialog {
  position: relative; z-index: 3; background: transparent !important; border: none !important;
  box-shadow: none !important; overflow: visible; padding: 0 !important;
}
.sheet-inner {
  position: relative; z-index: 1; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow), var(--ring-top);
  padding: 12px 18px calc(24px + var(--safe-b)); max-height: 72vh; overflow-y: auto;
}
.sheet-aura {
  position: absolute; inset: -3px; z-index: 0; pointer-events: none; --rainbow-angle: 0deg;
  border-radius: calc(var(--r-lg) + 3px); background: var(--rainbow-conic);
  opacity: 0; filter: saturate(1.2); transition: opacity var(--t-base);
}
.ts-sheet.is-celebrating .sheet-aura {
  opacity: 1; animation: sheet-flow .9s linear infinite, sheet-aura-out 1.6s ease-out .5s forwards;
}
.ts-sheet.is-celebrating .sheet-inner { border-color: transparent; }
@keyframes sheet-flow { to { --rainbow-angle: 360deg; } }
@keyframes sheet-aura-out { to { opacity: 0; } }
@media (min-width: 720px) {
  .ts-sheet-scrim { align-items: center; }
  .ts-sheet { max-width: 520px; margin: 0 auto; animation: ts-fade var(--t-base) var(--ease-standard) both; }
  .sheet-inner { border-radius: var(--r-lg); }
  .ts-sheet-handle { display: none; }
}

/* ---- billing / receipts --------------------------------------------------- */
.orders-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.orders-table th, .orders-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.orders-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.orders-table td { font-variant-numeric: tabular-nums; }
.orders-table td.r, .orders-table th.r { text-align: right; }
.orders-table tr:last-child td { border-bottom: none; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 12px; }
.section-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.section-head a { font-size: 13px; font-weight: 600; color: var(--accent-2); }

/* ---- share & print + whitelabel designer --------------------------------- */
.share-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.share-qr { background: #fff; border-radius: 12px; padding: 12px; flex: none; line-height: 0; }
.share-body { min-width: 220px; flex: 1; }
textarea { width: 100%; padding: 12px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 15px; font-family: inherit; outline: none; resize: vertical; }
textarea:focus { border-color: var(--accent); }
.designer { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 14px; }
@media (min-width: 760px) { .designer { grid-template-columns: 1fr 280px; } }
.designer-colors { display: flex; gap: 12px; margin-top: 4px; }
.designer-colors > div { flex: 1; }
.designer-colors input[type="color"] { width: 100%; height: 40px; padding: 4px; cursor: pointer; }
.designer-preview { align-self: start; }
.mini-poster { background: var(--p-bg, #fff); color: var(--p-fg, #111); border: 1px solid var(--border); border-radius: 10px; padding: 22px 18px; text-align: center; }
.mp-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 700; color: var(--p-accent, #2467e5); }
.mp-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; text-transform: uppercase; margin: 4px 0 3px; line-height: 1.05; }
.mp-headline { font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.mp-qr { background: #fff; border-radius: 10px; padding: 8px; display: inline-block; line-height: 0; }
.mp-qr img { width: 110px; height: 110px; image-rendering: pixelated; display: block; }
.mp-sub { font-size: 10px; margin-top: 12px; opacity: .8; line-height: 1.4; }
.mp-brand { margin-top: 14px; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 979px) {
  html[data-theme="host"] #main { margin-left: 0; padding-top: 52px; }
  html[data-theme="host"] .app-mobilebar { display: flex; }
  .app-sidebar { transform: translateX(-100%); transition: transform var(--t-room) var(--ease-standard); box-shadow: var(--shadow); }
  html.nav-open .app-sidebar { transform: none; }
  html.nav-open .app-scrim { display: block; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card:nth-child(2) { border-right: 0; }
  .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 620px) {
  .app-content { padding-inline: 14px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-card { border-right: 0; border-bottom: 1px solid var(--border); }
  .stat-card:last-child { border-bottom: 0; }
  .events-grid { grid-template-columns: 1fr; }
  .row { flex-direction: column; align-items: stretch; }
  .row > div, .row > div[style] { max-width: none !important; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .event-card, .pp-capbar-fill, .sheet-aura { transition: none !important; animation: none !important; }
  /* The pile is authored entirely inside `no-preference`, so both the riffle and the
   * fade are already absent here and there is nothing to switch off. Listed anyway,
   * because this allowlist is where the next person will look. */
  .ec-sheet--back, .ec-window img { transition: none !important; }
  .event-card--live:hover .pp-capbar-fill,
  .event-card--live:focus-visible .pp-capbar-fill,
  .event-card--suspended .pp-capbar-fill,
  .event-card--near-capacity .pp-capbar-fill { background: var(--accent) !important; }
  .ts-sheet.is-celebrating .sheet-aura { opacity: .8; }
}