/* /ops dashboard stylesheet — promoted from /ops/lab sandbox. Two-layer color tokens (variant palette + semantic role aliases) with intent-named component classes. Old pre-migration stylesheet preserved at old-styles.css for reference. */ :root { /* Surface */ --bg: #131313; --surface: #1c1b1b; --surface-2: #201f1f; --surface-3: #2a2a2a; --border: rgba(255, 255, 255, 0.1); --border-weak: rgba(255, 255, 255, 0.05); /* Text */ --text: #e5e2e1; --text-muted: #b9cbb9; --text-dim: #9a9aa4; --text-fade: #74747d; /* ─── Color tokens — Layer 1 (variant palette, the actual hex values) ─── */ --color-green: #00ff88; --color-cyan: #00e5ff; --color-purple: #7000ff; --color-amber: #FFB300; --color-orange: #FF3D00; --color-crimson: #FF0033; /* ─── Color tokens — Layer 2a (state roles — data condition) ─── */ --success: var(--color-green); --info: var(--color-purple); --warning: var(--color-amber); --danger: var(--color-orange); --critical: var(--color-crimson); /* ─── Color tokens — Layer 2b (brand roles — UI hierarchy) ─── */ --primary: var(--color-green); --secondary: var(--color-cyan); --electric: #2b50ff; /* deep neon blue — Price trajectory accent */ --tertiary: var(--color-purple); /* Brand-color variants (preserved for buttons, gradients, on-color text) */ --primary-dim: #00e479; --on-primary: #003919; --secondary-dim: #00b8cc; --on-secondary: #003640; --tertiary-dim: #5700c9; --tertiary-soft: #d1bcff; --on-tertiary: #ffffff; --fuchsia: #ff2ec7; /* neon fuchsia — Get-in price accent */ --neon-orange: #ff6a1a; /* Sphere seating accent */ --neon-yellow: #eaff00; /* bright neon yellow — Archive accent */ /* Type */ --font-body: "Figtree", -apple-system, system-ui, sans-serif; --font-data: "Space Grotesk", system-ui, -apple-system, sans-serif; /* True monospace for ASCII boxes + code — kept separate from the now proportional --font-data so the number-reflow fix can't break box-drawing alignment. */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Sizes from new scale */ --fs-headline-xl: 40px; --fs-headline-md: 24px; --fs-body: 16px; --fs-body-sm: 14px; --fs-data: 14px; --fs-label: 12px; /* Spacing */ --stack-sm: 8px; --stack-md: 16px; --stack-lg: 32px; --gutter: 24px; /* Radius */ --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; } /* ─── Lighter theme — true warm-light (cool · vivid · soft) ────────── A genuine light theme (this replaces the former soft-charcoal). The palette is lifted from the lighter-mode study the operator approved: "cool" warmth — a blue-grey canvas with near-black ink — plus "vivid" accents re-derived in oklch so every tile keeps its hue identity but reads on a light base. The raw neons (#00ff88, #eaff00, …) go illegible on off-white, so each is restated here at a legible lightness/chroma. Only color *values* change: layout, spacing, and fonts are untouched. Overriding the Layer-1 hexes + the direct accent hexes is enough — the semantic/brand aliases (--success/--info/--primary/…) and the per-tile --kpi-accent map all cascade from these. Known long-tail: ~60 components hard-code rgba(255,255,255,X) tints (zebra rows, hovers, subtle fills) that fade out on a light canvas — those are polish, not layout, and get remediated incrementally. Opt-in via [data-theme="light"] on (early-paint script in the page , persisted under localStorage 'qx-theme'). */ html[data-theme="light"] { /* warmth — cool: blue-grey canvas; surfaces lighten as they elevate (bg < surface < surface-2 < surface-3), inverse of the dark ramp. */ --bg: #dde2eb; --surface: #eef1f6; --surface-2: #f4f6fa; --surface-3: #fafbfd; --border: rgba(14, 18, 32, 0.13); --border-weak: rgba(14, 18, 32, 0.07); /* ink — near-black; ramp stays monotonic (text > muted > dim > fade). */ --text: #0c1020; --text-muted: #48506a; --text-dim: #6a7186; --text-fade: #99a0b2; /* vivid accents, re-derived in oklch for the light base. Overriding the Layer-1 hexes + direct hexes cascades to every alias + --kpi-accent. */ --color-green: oklch(0.62 0.20 145); /* attractions · success · primary */ --color-cyan: oklch(0.62 0.16 215); /* festivals · secondary */ --color-purple: oklch(0.56 0.22 285); /* lifetime · info · tertiary */ --color-amber: oklch(0.72 0.17 85); /* shows · warning */ --color-orange: oklch(0.65 0.20 50); /* danger */ --color-crimson: oklch(0.60 0.21 30); /* outliers · critical */ --electric: oklch(0.58 0.20 250); /* price trajectory */ --fuchsia: oklch(0.58 0.22 340); /* get-in price */ --neon-orange: oklch(0.65 0.20 50); /* sphere seating */ --neon-yellow: oklch(0.70 0.15 95); /* archive */ /* brand variants — keep solid fills + on-color text legible on the lighter accents (white reads on the mid-tone purple/green/blue/ fuchsia fills used by nav-active + pills; --tertiary-soft darkens so it works as both a tile accent and as hover text on a tint). */ --primary-dim: oklch(0.56 0.19 145); --on-primary: #06210f; /* dark ink — green/amber fills are light here */ --secondary-dim: oklch(0.56 0.15 215); --on-secondary: #06222a; --tertiary-dim: oklch(0.50 0.22 285); --tertiary-soft: oklch(0.50 0.20 285); --on-tertiary: #ffffff; } /* Elevation companion: lift the main panels off the canvas with a solid fill (--surface, a step above --bg) + a soft, warm-neutral shadow so cards read as floating depth on the light canvas. (The old charcoal theme used heavy black shadows that look like soot on off-white.) */ html[data-theme="light"] .kpi-tile, html[data-theme="light"] .glass-card { background: var(--surface); box-shadow: 0 1px 2px rgba(14, 18, 32, 0.06), 0 6px 16px rgba(14, 18, 32, 0.08); } html[data-theme="light"] .page-header { background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 6px 16px rgba(14, 18, 32, 0.07); } /* ── Lighter theme — modals, sheets & overlays ───────────────────── The tap-to-reveal detail sheets (.qx-sheet-body), the htmx confirm modal, and the hamburger panel all share a near-black glass fill (rgba(20,20,20,.95)) with white-tint interiors + heavy black shadows — all dark-assuming. Restate them on the light canvas: light glass surface, soft shadow, dark-tint interior fills + scrollbar, and a lighter blue-ink scrim. (Scoped to [data-theme=light]; dark untouched.) */ html[data-theme="light"] .menu-panel, html[data-theme="light"] dialog#hx-modal .dialog-body, html[data-theme="light"] .qx-sheet-body { background: rgba(244, 246, 250, 0.97); } html[data-theme="light"] .qx-sheet-body { box-shadow: 0 12px 40px rgba(14, 18, 32, 0.20); } /* keep a scrim to focus the card, but lighter + blue-tinted (not soot) */ html[data-theme="light"] dialog#hx-modal::backdrop, html[data-theme="light"] dialog.qx-sheet::backdrop { background: rgba(14, 18, 32, 0.42); } /* sheet data-table sticky header: near-black → light (stays opaque) */ html[data-theme="light"] .qx-data-tbl th { background: rgba(238, 241, 246, 0.98); } /* sheet interior fills that fade out on light → dark tints */ html[data-theme="light"] .qx-stat { background: rgba(14, 18, 32, 0.03); } html[data-theme="light"] .qx-rank-track { background: rgba(14, 18, 32, 0.06); } /* sheet charts: the neutral "rest" elements use white tints that vanish on light. Distribution bars (shows-per-month, night strip) take a light accent tint so the secondary bars read as colour — peak/best stay full --qx-accent. The sphere bowl keeps its rest zones neutral-dark (by design the active zone is the only coloured one), with a soft section divider. */ html[data-theme="light"] .qx-bar, html[data-theme="light"] .qx-strip-bar { fill: color-mix(in oklch, var(--qx-accent) 35%, transparent); } html[data-theme="light"] .qx-bowl-cell { fill: rgba(14, 18, 32, 0.10); stroke: rgba(14, 18, 32, 0.18); } html[data-theme="light"] .qx-bowl-stage { fill: rgba(14, 18, 32, 0.12); stroke: rgba(14, 18, 32, 0.20); } /* hamburger menu-item hover (the panel is light now) */ html[data-theme="light"] .menu-item:hover { background: rgba(14, 18, 32, 0.05); } /* sheet scrollbar thumb: white → dark on the light fill */ html[data-theme="light"] .qx-sheet-scroll { scrollbar-color: rgba(14, 18, 32, 0.25) transparent; } html[data-theme="light"] .qx-sheet-scroll::-webkit-scrollbar-thumb { background: rgba(14, 18, 32, 0.20); } html[data-theme="light"] .qx-sheet-scroll::-webkit-scrollbar-thumb:hover { background: rgba(14, 18, 32, 0.32); } /* ── Lighter theme — chrome buttons (nav · hamburger · toggles) ───── These utility buttons fill with rgba(white) tints and brighten their border/text toward white on hover — all invisible on the light canvas. Restate the resting fills + hovers as dark tints, and fix the hamburger's open state (it was #fff bg + light text = invisible). */ html[data-theme="light"] .nav-btn:not(.active), html[data-theme="light"] .menu-trigger, html[data-theme="light"] .kpi-theme-toggle { background: rgba(14, 18, 32, 0.03); } /* Inactive nav text: solid + legible (dark-mode --text-dim washes out on light). Active buttons keep their per-button solid accent fill + correct on-color text — the :not(.active) scope above no longer clobbers it (the generic .nav-btn fill out-specified .nav-btn-x.active and blanked it, leaving white-on-near-white). */ html[data-theme="light"] .nav-btn:not(.active) { color: var(--text-muted); } html[data-theme="light"] .menu-trigger:hover, html[data-theme="light"] .kpi-theme-toggle:hover, html[data-theme="light"] .kpi-sort-toggle:hover, html[data-theme="light"] .kpi-sort-toggle.is-active { background: rgba(14, 18, 32, 0.06); border-color: rgba(14, 18, 32, 0.22); color: var(--text); } html[data-theme="light"] .menu[open] > .menu-trigger { background: var(--text); border-color: var(--text); color: var(--bg); } /* Reset minimal — scoped via body class */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.5; min-height: 100vh; } body * { box-sizing: border-box; } body h1, body h2, body h3, body h4 { margin: 0; font-weight: 600; } body p { margin: 0; } body code { font-family: var(--font-mono); } body a { color: inherit; text-decoration: none; } body button { font: inherit; cursor: pointer; } main { padding: 24px 0 64px; } @media (min-width: 768px) { main { padding: 32px 0 80px; } } /* Public surface — short pages, tighten the footer gap so the ASCII * signature block doesn't float in empty space above the footer. * The /ops surface keeps the larger default spacing (many widgets, * benefits from the breathing room). */ body.public-surface main { padding-bottom: 0; } body.public-surface .site-footer { margin-top: 16px; } /* Layout container — responsive */ .main { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--stack-lg); } @media (min-width: 768px) { .main { max-width: 720px; } } @media (min-width: 1024px) { .main { max-width: 1200px; } } @media (min-width: 768px) { body { padding: 32px 24px 80px; } } .section { display: flex; flex-direction: column; gap: var(--stack-md); } .section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; } .section-title { font-family: var(--font-data); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); } .section-note { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.08em; color: var(--text-fade); text-transform: uppercase; } /* Glass card pattern */ .glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; } .glass-card-tight { padding: 16px; } /* Typography helpers */ .label-caps { font-family: var(--font-data); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: var(--text-dim); } .data-mono { font-family: var(--font-data); font-size: var(--fs-data); font-weight: 500; line-height: 1; } .data-mono-xs { font-family: var(--font-data); font-size: 10px; font-weight: 500; line-height: 1; } .headline-md { font-size: var(--fs-headline-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .headline-xl { font-size: var(--fs-headline-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .text-muted { color: var(--text-muted); } .text-dim { color: var(--text-dim); } .text-fade { color: var(--text-fade); } /* Status pills (small inline) */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid; background: rgba(0, 0, 0, 0.4); font-family: var(--font-data); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .status-pill-dot { width: 6px; height: 6px; border-radius: var(--radius-full); } .status-pill.success { color: var(--success); border-color: rgba(0, 255, 136, 0.3); } .status-pill.success .status-pill-dot { background: var(--success); box-shadow: 0 0 8px rgba(0, 255, 136, 0.6); } .status-pill.secondary { color: var(--secondary); border-color: rgba(0, 229, 255, 0.3); } .status-pill.secondary .status-pill-dot { background: var(--secondary); box-shadow: 0 0 8px rgba(0, 229, 255, 0.6); } .status-pill.info { color: var(--tertiary-soft); border-color: rgba(112, 0, 255, 0.4); } .status-pill.info .status-pill-dot { background: var(--tertiary); box-shadow: 0 0 8px rgba(112, 0, 255, 0.6); } .status-pill.warning { color: var(--warning); border-color: rgba(255, 179, 0, 0.35); } .status-pill.warning .status-pill-dot { background: var(--warning); box-shadow: 0 0 8px rgba(255, 179, 0, 0.55); } .status-pill.danger { color: var(--danger); border-color: rgba(255, 61, 0, 0.4); } .status-pill.danger .status-pill-dot { background: var(--danger); box-shadow: 0 0 8px rgba(255, 61, 0, 0.6); } .status-pill.critical { color: var(--critical); border-color: rgba(255, 0, 51, 0.45); } .status-pill.critical .status-pill-dot { background: var(--critical); box-shadow: 0 0 8px rgba(255, 0, 51, 0.65); } /* Filled pill (for KPI badges) */ .kpi-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); background: rgba(0, 255, 136, 0.15); color: var(--primary); border: 1px solid rgba(0, 255, 136, 0.3); font-family: var(--font-data); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 0 15px rgba(0, 255, 136, 0.3); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 600; text-transform: lowercase; cursor: pointer; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; background: transparent; color: var(--text); } .btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background: var(--secondary); color: var(--on-secondary); border-color: var(--secondary); } .btn-secondary:hover { opacity: 0.85; } .btn-tertiary { background: var(--tertiary); color: var(--on-tertiary); border-color: var(--tertiary); } .btn-tertiary:hover { opacity: 0.85; } .btn-warning { background: var(--warning); color: #1a1100; border-color: var(--warning); } .btn-warning:hover { opacity: 0.85; } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { opacity: 0.85; } .btn-critical { background: var(--critical); color: #fff; border-color: var(--critical); } .btn-critical:hover { opacity: 0.85; } .btn-outlined { background: transparent; color: var(--text); border-color: var(--border); } .btn-outlined:hover { border-color: var(--primary); color: var(--primary); background: rgba(0, 255, 136, 0.06); } .btn-outlined:active, .btn-outlined.htmx-request { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .btn-glass { background: rgba(255, 255, 255, 0.05); border-color: rgba(0, 255, 136, 0.3); color: var(--primary); } .btn-glass:hover { background: rgba(0, 255, 136, 0.1); } .btn .material-symbols-outlined { font-size: 18px; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Pipeline card */ .pipeline-card { display: flex; flex-direction: column; gap: 16px; } .pipeline-head { display: flex; align-items: flex-start; justify-content: space-between; } .pipeline-state-big { font-family: var(--font-data); font-size: 28px; font-weight: 700; letter-spacing: 0.05em; color: var(--primary); text-shadow: 0 0 12px rgba(0, 255, 136, 0.5); text-transform: uppercase; } .pipeline-state-paused { color: var(--warning); text-shadow: 0 0 12px rgba(255, 179, 0, 0.45); } .pipeline-meta { display: flex; align-items: center; gap: 12px; } /* 2-up status cards. On mobile the grid collapses to one column; the vertical gap matches the parent stack (--stack-lg) so the page reads with consistent rhythm. On desktop the cards sit side-by-side and a tighter 12px horizontal gap looks right. */ .bento-2 { display: grid; grid-template-columns: 1fr; gap: var(--stack-lg); align-items: start; } @media (min-width: 768px) { .bento-2 { grid-template-columns: 1fr 1fr; gap: 12px; } } .bento-3 { display: grid; grid-template-columns: 1fr; gap: var(--stack-lg); } @media (min-width: 768px) { .bento-3 { grid-template-columns: repeat(3, 1fr); gap: 12px; } } .bento-4 { display: grid; grid-template-columns: 1fr; gap: var(--stack-lg); } @media (min-width: 768px) { .bento-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (min-width: 1100px) { .bento-4 { grid-template-columns: repeat(4, 1fr); } } .bento-5 { display: grid; grid-template-columns: 1fr; gap: var(--stack-lg); } @media (min-width: 768px) { .bento-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (min-width: 1100px) { .bento-5 { grid-template-columns: repeat(5, 1fr); } } .split-1-2 { display: grid; grid-template-columns: 1fr; gap: var(--stack-lg); align-items: start; } @media (min-width: 768px) { .split-1-2 { grid-template-columns: 1fr 2fr; gap: 12px; } } /* Pause toggle switch (replaces pause button) */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); } .toggle-row-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .toggle-switch input { position: absolute; opacity: 0; pointer-events: none; } .toggle-track { position: relative; display: inline-block; width: 52px; height: 28px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--border); border-radius: var(--radius-full); transition: background 0.2s ease, box-shadow 0.2s ease; } .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; } .toggle-switch input:checked + .toggle-track { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 12px rgba(0, 255, 136, 0.4); } .toggle-switch input:checked + .toggle-track::after { transform: translateX(24px); } .toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; } /* KPI strip — 4-up tiles with left accent stripe + faded bg icon */ .kpi-strip { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kpi-strip { grid-template-columns: repeat(4, 1fr); } } .kpi-tile { position: relative; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 120px; } .kpi-tile::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--kpi-accent, var(--primary)); box-shadow: 0 0 8px var(--kpi-accent, var(--primary)); } .kpi-tile-bg-icon { position: absolute; top: 14px; right: 14px; font-size: 36px !important; opacity: 0.15; color: var(--text); pointer-events: none; } .kpi-tile-value { font-size: 26px; font-weight: 600; line-height: 1; display: flex; align-items: baseline; gap: 6px; margin-top: auto; } .kpi-tile-unit { font-size: 14px; color: var(--text-dim); font-weight: 400; } /* Categorical state line that sits between the big value and the data * sub-line on a KPI tile. Used by the Mac thermal cell to display * 'nominal' / 'fair' / 'serious' / 'critical' beneath the state * integer without forcing a baseline-shared inline span (which mixes * font families on a single line). Sized between value and sub so it * reads as a subtitle to the number above it. */ .kpi-tile-state { font-family: var(--font-data); /* match the data sub-line below */ font-size: 13px; color: var(--text-dim); font-weight: 400; line-height: 1.1; margin-top: -4px; /* tighten the flex-gap so it sits close to value */ } .kpi-tile-sub { font-family: var(--font-data); font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; padding-right: 26px; /* clear the play affordance pinned bottom-right */ } .kpi-tile-bar { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-full); overflow: hidden; } .kpi-tile-bar-fill { height: 100%; background: var(--kpi-accent, var(--primary)); box-shadow: 0 0 6px var(--kpi-accent, var(--primary)); transition: width 0.3s ease; } /* ── Marquee hero tile — pinned at position 1 ───────────────────────── Reuses the modal's featured-card component (.qx-mq-feature / -poster / -cap) so the hero is identical to the modal card: a MARQUEE header, the next-upcoming poster in a bordered 4:5 frame, then the full caption. Mapping --qx-accent to the tile accent lets the reused .qx-mq-* rules pick up the crimson chip. Spans four rows to fit the 4:5 poster. */ .kpi-tile-hero { /* Span the same rows the data tiles fill (3 across cols 2-4) so the hero ends flush with the strip instead of overhanging a 4th, empty row. */ grid-row: span 3; --qx-accent: var(--kpi-accent); gap: 10px; } /* Tight label + subtext group at the top of the hero (the 10px tile gap then spaces the group from the poster). */ .kpi-tile-hero-head { display: flex; flex-direction: column; gap: 3px; } .kpi-tile-hero-sub { color: var(--text-dim); } /* Brand-role accents (UI hierarchy) */ .kpi-tile.accent-primary { --kpi-accent: var(--primary); } .kpi-tile.accent-secondary { --kpi-accent: var(--secondary); } .kpi-tile.accent-electric { --kpi-accent: var(--electric); } .kpi-tile.accent-tertiary { --kpi-accent: var(--tertiary-soft); } /* State-role accents (data condition) */ .kpi-tile.accent-success { --kpi-accent: var(--success); } .kpi-tile.accent-info { --kpi-accent: var(--info); } .kpi-tile.accent-warning { --kpi-accent: var(--warning); } .kpi-tile.accent-danger { --kpi-accent: var(--danger); } .kpi-tile.accent-critical { --kpi-accent: var(--critical); } .kpi-tile.accent-fuchsia { --kpi-accent: var(--fuchsia); } .kpi-tile.accent-orange { --kpi-accent: var(--neon-orange); } .kpi-tile.accent-yellow { --kpi-accent: var(--neon-yellow); } /* ─── Dial tile (thermostat-style ring gauge) ─── */ .dial-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; min-height: 180px; } .dial-graphic { position: relative; width: 110px; height: 110px; } .dial-svg { width: 100%; height: 100%; display: block; } .dial-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 8; } .dial-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; } .dial-fill.fill-success { stroke: var(--success); filter: drop-shadow(0 0 6px var(--success)); } .dial-fill.fill-warning { stroke: var(--warning); filter: drop-shadow(0 0 6px var(--warning)); } .dial-fill.fill-danger { stroke: var(--danger); filter: drop-shadow(0 0 6px var(--danger)); } .dial-fill.fill-neutral { stroke: var(--text-fade); } .dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .dial-value { font-family: var(--font-data); font-size: 28px; font-weight: 600; line-height: 1; color: var(--text); } .dial-value-unit { font-size: 14px; color: var(--text-dim); font-weight: 500; } .dial-sub { font-family: var(--font-data); font-size: 10px; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.05em; } .dial-label { margin-top: 14px; font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; } /* Compact variant — sized to match a kpi-tile row (e.g., dashboard header strip). Smaller dial, smaller value text, tighter padding. */ .dial-tile.compact { padding: 12px; min-height: 0; } .dial-tile.compact .dial-graphic { width: 80px; height: 80px; } .dial-tile.compact .dial-bg, .dial-tile.compact .dial-fill { stroke-width: 9; } .dial-tile.compact .dial-value { font-size: 22px; } .dial-tile.compact .dial-value-unit { font-size: 11px; } .dial-tile.compact .dial-sub { font-size: 9px; margin-top: 4px; } .dial-tile.compact .dial-label { margin-top: 8px; font-size: 10px; } /* Alert feed (horizontal cards — for audit_feed-style chronological events) */ .alert-feed { display: flex; flex-direction: column; gap: 10px; } .alert-feed-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; /* Stretch so all cards in a row reach the same height even when content lengths differ; keeps the three columns visually balanced. */ align-items: stretch; } /* `minmax(0, 1fr)` (not `1fr`, which is shorthand for `minmax(auto, 1fr)`) prevents a row whose content min-content exceeds 1/3 of the container from expanding past 1/3 — without this, a long event title pushes its column wider than the others and the rightmost cards overflow the parent card. Combined with `min-width: 0` on .alert-feed-body, the title gets truncated cleanly inside the cell instead. */ @media (min-width: 640px) { .alert-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .alert-feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .alert-feed-row { display: flex; align-items: center; gap: 14px; padding: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: background 0.15s ease; } .alert-feed-row:hover { background: rgba(255, 255, 255, 0.05); } .alert-feed-row.row-fade { opacity: 0.6; } .alert-feed-icon { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.3); color: var(--primary); } .alert-feed-icon-dot { position: absolute; bottom: -4px; right: -4px; width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--bg); background: var(--primary); box-shadow: 0 0 8px var(--primary); } .alert-feed-row.row-success .alert-feed-icon { background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.3); color: var(--success); } .alert-feed-row.row-success .alert-feed-icon-dot { background: var(--success); box-shadow: 0 0 8px var(--success); } .alert-feed-row.row-secondary .alert-feed-icon { background: rgba(0, 229, 255, 0.1); border-color: rgba(0, 229, 255, 0.3); color: var(--secondary); } .alert-feed-row.row-secondary .alert-feed-icon-dot { background: var(--secondary); box-shadow: 0 0 8px var(--secondary); } .alert-feed-row.row-warning .alert-feed-icon { background: rgba(255, 179, 0, 0.12); border-color: rgba(255, 179, 0, 0.3); color: var(--warning); } .alert-feed-row.row-warning .alert-feed-icon-dot { background: var(--warning); box-shadow: 0 0 8px var(--warning); } .alert-feed-row.row-danger .alert-feed-icon { background: rgba(255, 61, 0, 0.12); border-color: rgba(255, 61, 0, 0.3); color: var(--danger); } .alert-feed-row.row-danger .alert-feed-icon-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .alert-feed-row.row-info .alert-feed-icon { background: rgba(112, 0, 255, 0.12); border-color: rgba(112, 0, 255, 0.4); color: var(--tertiary-soft); } .alert-feed-row.row-info .alert-feed-icon-dot { background: var(--tertiary); box-shadow: 0 0 8px var(--tertiary); } .alert-feed-row.row-fade .alert-feed-icon { background: rgba(113, 113, 122, 0.08); border-color: rgba(113, 113, 122, 0.25); color: var(--text-dim); } .alert-feed-row.row-fade .alert-feed-icon-dot { display: none; } .alert-feed-body { flex: 1; min-width: 0; } .alert-feed-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-feed-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-feed-time { font-family: var(--font-data); font-size: 10px; font-weight: 600; color: var(--text-fade); text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; } .alert-feed-row.row-danger .alert-feed-time { color: var(--danger); } .status-card { display: flex; flex-direction: column; gap: 12px; min-height: 140px; padding: 18px; } .status-card-head { display: flex; align-items: flex-start; justify-content: space-between; } .status-icon-box { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--secondary); } .status-icon-box.icon-primary { color: var(--primary); } .status-icon-box.icon-tertiary { color: var(--tertiary-soft); } .status-card-value { font-size: 22px; font-weight: 600; line-height: 1; } .status-card-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; } /* ─── Stat stack (label/value pairs in a glass-card, like the Mac chain widget) ─── */ .stat-stack { display: flex; flex-direction: column; gap: 18px; } .stat-stack-item { display: flex; flex-direction: column; gap: 6px; } .stat-stack-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-data); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .stat-stack-label .material-symbols-outlined { font-size: 14px; } .stat-stack-value { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); } .stat-stack-clock { font-family: var(--font-data); font-size: 11px; color: var(--text-fade); letter-spacing: 0.04em; } .progress-bar { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-full); overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--primary); box-shadow: 0 0 8px var(--primary); transition: width 0.3s ease; } .progress-bar-fill.fill-secondary { background: var(--secondary); box-shadow: 0 0 8px var(--secondary); } .progress-bar-fill.fill-tertiary { background: var(--tertiary); box-shadow: 0 0 8px var(--tertiary); } .progress-bar-fill.fill-warning { background: var(--warning); box-shadow: 0 0 8px var(--warning); } .progress-bar-fill.fill-danger { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .progress-bar-fill.fill-critical { background: var(--critical); box-shadow: 0 0 8px var(--critical); } /* Alert signals icon grid — responsive 3 / 6 cols */ .alert-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .alert-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .alert-grid { grid-template-columns: repeat(7, 1fr); } } .alert-tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 12px; min-height: 140px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-top-width: 2px; text-align: center; } .alert-tile.tile-success { border-top-color: rgba(0, 255, 136, 0.4); } .alert-tile.tile-secondary { border-top-color: rgba(0, 229, 255, 0.4); } .alert-tile.tile-info { border-top-color: rgba(112, 0, 255, 0.4); } .alert-tile.tile-warning { border-top-color: rgba(255, 179, 0, 0.45); } .alert-tile.tile-danger { border-top-color: rgba(255, 61, 0, 0.45); } .alert-tile.tile-critical { border-top-color: rgba(255, 0, 51, 0.5); } .alert-tile-icon-wrap { position: relative; display: inline-flex; } .alert-tile-icon { font-size: 32px; font-variation-settings: 'FILL' 1; } .alert-tile.tile-success .alert-tile-icon { color: var(--success); } .alert-tile.tile-secondary .alert-tile-icon { color: var(--secondary); } .alert-tile.tile-info .alert-tile-icon { color: var(--info); } .alert-tile.tile-warning .alert-tile-icon { color: var(--warning); } .alert-tile.tile-danger .alert-tile-icon { color: var(--danger); } .alert-tile.tile-critical .alert-tile-icon { color: var(--critical); } .alert-tile-icon-dot { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: var(--radius-full); border: 2px solid var(--bg); } .alert-tile.tile-success .alert-tile-icon-dot { background: var(--success); box-shadow: 0 0 6px var(--success); } .alert-tile.tile-secondary .alert-tile-icon-dot { background: var(--secondary); box-shadow: 0 0 6px var(--secondary); } .alert-tile.tile-info .alert-tile-icon-dot { background: var(--info); box-shadow: 0 0 6px var(--info); } .alert-tile.tile-warning .alert-tile-icon-dot { background: var(--warning); box-shadow: 0 0 6px var(--warning); } .alert-tile.tile-danger .alert-tile-icon-dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); } .alert-tile.tile-critical .alert-tile-icon-dot { background: var(--critical); box-shadow: 0 0 6px var(--critical); } .alert-tile-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; } .alert-tile-title { font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.2; } .alert-tile-status { font-family: var(--font-data); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; line-height: 1; } .alert-tile-time { font-family: var(--font-data); font-size: 10px; color: var(--text-fade); line-height: 1.2; margin-top: 2px; } /* Jobs KPI sparkline */ .kpi-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .kpi-card-title-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .kpi-card-icon { color: rgba(0, 255, 136, 0.4); font-size: 24px; } .sparkline { display: flex; align-items: flex-end; gap: 2px; height: 96px; } .sparkline-bar { flex: 1; background: rgba(255, 255, 255, 0.06); border-radius: 2px 2px 0 0; min-height: 2px; } .sparkline-bar.is-hot { background: var(--primary); filter: drop-shadow(0 0 4px var(--primary)); } /* Hourly cadence grid (Jobs cadence widget) — 24 cells in a row, each with a vertical bar that fills proportional to expected vs completed. Bar color is set inline via CSS variable so the view layer can drive it (success/warning/danger/info/fade). */ /* Jobs cadence chart — y-axis labels on the left, plot on the right. The plot stacks the bars area (with overlaid expected-reference line) above the x-axis labels. */ .jobs-cadence-chart { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; } .jobs-cadence-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; text-align: right; padding-bottom: 18px; /* aligns yaxis bottom with bars-area bottom */ min-width: 16px; } .jobs-cadence-plot { display: flex; flex-direction: column; } .jobs-cadence-bars-area { position: relative; height: 110px; } .jobs-cadence-expected-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.18); pointer-events: none; z-index: 1; } .hour-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; align-items: end; height: 100%; position: relative; z-index: 2; } .hour-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; height: 100%; } .hour-bar-track { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.04); border-radius: 2px; position: relative; overflow: hidden; } .hour-bar-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 2px; transition: height 0.3s ease; } .hour-cell.is-future .hour-bar-track { background: rgba(255, 255, 255, 0.02); } /* Tick variant — each cell holds N small horizontal bars stacked from bottom up, where N = the hour's job count. Each tick is sized as 1/scale_max of the bars-area height (--scale-max set inline via the parent .jobs-cadence-bars-area). */ .hour-tick-stack { display: flex; flex-direction: column-reverse; /* anchor at bottom */ height: 100%; width: 100%; gap: 2px; } .hour-tick { /* Each tick gets a fixed slice of the parent height; gaps eat into the slice budget so visual density matches the y-axis. */ flex: 0 0 calc((100% - (var(--scale-max) - 1) * 2px) / var(--scale-max)); min-height: 2px; border-radius: 1px; } .hour-xaxis-row { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; margin-top: 6px; font-size: 9px; letter-spacing: 0.04em; } .hour-label-slot { text-align: left; white-space: nowrap; min-height: 12px; } /* Timeline */ .timeline { position: relative; display: flex; flex-direction: column; gap: 18px; } .timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.08); } .timeline-row { position: relative; padding-left: 26px; } .timeline-dot { position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border-radius: var(--radius-full); border: 2px solid var(--bg); } .timeline-row.dot-success .timeline-dot { background: var(--primary); box-shadow: 0 0 8px rgba(0, 255, 136, 0.6); } .timeline-row.dot-info .timeline-dot { background: var(--tertiary); box-shadow: 0 0 8px rgba(112, 0, 255, 0.6); } .timeline-row.dot-danger .timeline-dot { background: var(--danger); box-shadow: 0 0 8px rgba(255, 61, 0, 0.6); } .timeline-row.dot-fade .timeline-dot { background: rgba(255, 255, 255, 0.2); border: none; } .timeline-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .timeline-row-title { font-weight: 600; color: var(--text); font-size: var(--fs-body-sm); } .timeline-row.dot-success .timeline-row-title { color: var(--primary); } .timeline-row-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; } /* Upcoming captures (compact list) */ .upcoming-list { display: flex; flex-direction: column; gap: 12px; } .upcoming-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .upcoming-row.is-faded { opacity: 0.55; } .upcoming-event { font-family: var(--font-data); font-size: var(--fs-body-sm); color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .due-now-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; background: var(--primary); color: var(--on-primary); font-family: var(--font-data); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 12px rgba(0, 255, 136, 0.5); } /* Search input */ .search { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); color: var(--text); } .search input { background: transparent; border: 0; outline: 0; color: inherit; font: inherit; flex: 1; } .search input::placeholder { color: var(--text-fade); } /* Form input */ .input { width: 100%; padding: 10px 14px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-family: inherit; font-size: var(--fs-body-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15); } /* Style reference */ .swatch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .swatch { border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; } .swatch.swatch-green { background: linear-gradient(135deg, var(--color-green), var(--primary-dim)); color: var(--on-primary); } .swatch.swatch-cyan { background: linear-gradient(135deg, var(--color-cyan), var(--secondary-dim)); color: var(--on-secondary); } .swatch.swatch-purple { background: linear-gradient(135deg, var(--color-purple), var(--tertiary-dim)); color: var(--on-tertiary); } .swatch.swatch-amber { background: var(--color-amber); color: #1a1100; } .swatch.swatch-orange { background: var(--color-orange); color: #fff; } .swatch.swatch-crimson { background: var(--color-crimson); color: #fff; } .swatch.swatch-neutral { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .swatch-name { font-weight: 700; } .swatch-hex { font-family: var(--font-data); font-size: 11px; opacity: 0.85; } .swatch-role { font-size: 11px; opacity: 0.85; margin-top: 4px; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; } .type-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 4px; } .type-sample { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .type-sample-label { color: var(--text-dim); font-size: 11px; } /* ─── Tables ─── */ .table-wrap { overflow-x: auto; margin: 0 -4px; } /* Caps a table's vertical height so it scrolls inside the widget instead of growing it. Used by recent_capture_cycles + recent_normalize_runs when their query window expands beyond what fits in the half-width widget. ``thead`` becomes sticky so column headers stay visible while the body scrolls. The opaque bg on the sticky thead overrides the semi-transparent default so scrolled rows don't bleed through. */ .table-scroll-24h { max-height: 320px; overflow-y: auto; } .table-scroll-24h thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body-sm); } .table thead th { font-family: var(--font-data); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); white-space: nowrap; } .table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-weak); color: var(--text); vertical-align: top; } .table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); } .table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); } .table tbody tr:last-child td { border-bottom: 0; } .table th.num, .table td.num { font-family: var(--font-data); font-feature-settings: "tnum" 1; text-align: right; white-space: nowrap; } .table td.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-empty { padding: 28px 12px; text-align: center; color: var(--text-dim); font-size: var(--fs-body-sm); } /* ─── Scroll tray (horizontal snap-scroll cards with prev/next arrows) ─── */ .scroll-tray { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scroll-tray::-webkit-scrollbar { display: none; } .scroll-tray > .scroll-item { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; } /* ─── Tracked-event group internals (used inside scroll-item) ─── */ .show-group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; margin-bottom: 12px; } .show-group-artist { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .show-group-venue { font-family: var(--font-data); font-size: 11px; color: var(--text-dim); white-space: nowrap; } .show-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .show-list::-webkit-scrollbar { width: 6px; } .show-list::-webkit-scrollbar-track { background: transparent; } .show-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .show-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; } .show-row-date { font-family: var(--font-data); font-size: 11px; color: var(--text-dim); white-space: nowrap; text-align: left; } .show-row-stats { font-family: var(--font-data); font-size: 11px; color: var(--text); white-space: nowrap; text-align: right; font-feature-settings: "tnum" 1; } .scroll-controls { display: inline-flex; align-items: center; gap: 6px; } .scroll-arrow { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-dim); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .scroll-arrow:hover { color: var(--primary); border-color: var(--primary); background: rgba(0, 255, 136, 0.06); } .scroll-arrow .material-symbols-outlined { font-size: 16px; } .scroll-arrow:disabled { opacity: 0.3; cursor: not-allowed; color: var(--text-fade); border-color: var(--border-weak); background: transparent; } .scroll-counter { min-width: 38px; text-align: center; font-feature-settings: "tnum" 1; } /* ─── Chrome: header / nav / footer / hx-modal (used by base.html) ─── */ .page-header-shell { max-width: 480px; margin: 16px auto 0; padding: 0 16px; position: sticky; top: 16px; z-index: 50; } @media (min-width: 768px) { .page-header-shell { max-width: 720px; padding: 0 24px; } } @media (min-width: 1024px) { .page-header-shell { max-width: 1200px; } } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border); } @media (min-width: 768px) { .page-header { padding: 12px 24px; } } .brand { display: inline-flex; align-items: center; gap: 10px; height: 36px; color: var(--text); } .brand svg { height: 18px; width: auto; display: block; } .brand svg .cls-1 { fill: var(--text) !important; } /* tickets — white */ .brand svg .cls-2 { fill: var(--tertiary) !important; } /* quantixx. — purple */ .brand svg .cls-3 { fill: var(--primary) !important; } /* lo.fi. — green */ .brand-prefix { font-family: var(--font-data); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--tertiary); text-shadow: 0 0 12px rgba(112, 0, 255, 0.4); } .header-actions { display: flex; align-items: center; gap: 12px; } .nav-buttons { display: none; gap: 6px; } @media (min-width: 768px) { .nav-buttons { display: inline-flex; } } .nav-btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Per-button accent colors. Each nav button has its own brand color for hover (glass tint + bright outline) and active (solid fill). .active:hover gets a small opacity dim while keeping the active color — prevents the colors from "flashing" when hovering an already-selected button. */ .nav-btn-dashboard:hover { background: rgba(112, 0, 255, 0.1); border-color: rgba(112, 0, 255, 0.5); color: var(--tertiary-soft); } .nav-btn-dashboard.active { background: var(--tertiary); border-color: var(--tertiary); color: var(--on-tertiary); font-weight: 600; } .nav-btn-controls:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: var(--text); } .nav-btn-controls.active { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; } .nav-btn-reports:hover { background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.5); color: var(--primary); } .nav-btn-reports.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; } .nav-btn-docs:hover { background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.5); color: var(--primary); } .nav-btn-docs.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; } .nav-btn.active:hover { opacity: 0.85; } /* Hamburger overflow menu (always visible — covers mobile + provides extra surface anywhere) */ .menu { position: relative; } .menu-trigger { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .menu-trigger::-webkit-details-marker { display: none; } .menu-trigger > svg { width: 20px; height: 20px; } .menu-trigger:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); color: #fff; } .menu[open] > .menu-trigger { background: #fff; border-color: #fff; color: var(--bg); } .menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-lg); z-index: 60; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-md); background: none; border: 0; -webkit-appearance: none; appearance: none; color: var(--text); text-decoration: none; font-family: inherit; font-size: 13px; text-align: left; text-transform: lowercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .menu-item:hover { background: rgba(255, 255, 255, 0.06); } .menu-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dim); } /* Footer */ .site-footer { margin-top: 48px; padding: 24px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .site-footer-twitter { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 360px; } .footer-border { flex: 1; height: 1px; background: var(--border); } .footer-twitter-icon { color: var(--text-dim); transition: color 0.15s ease; } .footer-twitter-icon:hover { color: var(--primary); } .footer-links { display: flex; flex-direction: column; gap: 8px; align-items: center; } .footer-links-row { display: inline-flex; align-items: center; gap: 10px; color: var(--text-dim); } .footer-links-row a { color: var(--text-dim); text-decoration: none; font-size: 12px; letter-spacing: 0.02em; transition: color 0.15s ease; } .footer-links-row a:hover { color: var(--primary); } .footer-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-fade); } .site-copyright { margin: 0; font-size: 14px; color: var(--text-fade); } /* hx-modal dialog (driven by the inline JS in base.html) */ dialog#hx-modal { border: none; padding: 0; background: transparent; color: var(--text); max-width: 480px; } dialog#hx-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); } dialog#hx-modal .dialog-body { background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 20px; } #hx-modal-message { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ─── qx detail sheets — tap-to-reveal on KPI tiles (public + /ops) ─── Native opened via showModal() (focus trap + Esc free). On phones it's a bottom sheet; ≥768px a centered modal. The visible card is .qx-sheet-body; the dialog box itself is a transparent full-viewport click-catcher (clicking outside the body closes — wired in the inline JS in partials/reports_kpi_strip.html). Same visual language as the hx-modal .dialog-body above (glass blur, border, radius) so it reads as part of the same system. */ dialog.qx-sheet { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; border: 0; padding: 12px; /* gutter so the rounded card never touches the edge */ box-sizing: border-box; background: transparent; color: var(--text); align-items: flex-end; /* card near the bottom on phones */ justify-content: center; --qx-accent: var(--success); /* default; per-sheet modifier overrides */ } /* Per-tile accent — keeps each sheet's stripe + icons matched to the KPI tile that opened it (Artists green, Festivals cyan, …). */ dialog.qx-sheet.qx-sheet--success { --qx-accent: var(--success); } dialog.qx-sheet.qx-sheet--secondary { --qx-accent: var(--secondary); } dialog.qx-sheet.qx-sheet--electric { --qx-accent: var(--electric); } dialog.qx-sheet.qx-sheet--info { --qx-accent: var(--info); } dialog.qx-sheet.qx-sheet--warning { --qx-accent: var(--warning); } dialog.qx-sheet.qx-sheet--danger { --qx-accent: var(--danger); } dialog.qx-sheet.qx-sheet--tertiary { --qx-accent: var(--tertiary-soft); } dialog.qx-sheet.qx-sheet--fuchsia { --qx-accent: var(--fuchsia); } dialog.qx-sheet.qx-sheet--orange { --qx-accent: var(--neon-orange); } dialog.qx-sheet.qx-sheet--yellow { --qx-accent: var(--neon-yellow); } dialog.qx-sheet.qx-sheet--critical { --qx-accent: var(--critical); } dialog.qx-sheet[open] { display: flex; } dialog.qx-sheet::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Lock background scroll while a sheet is open (showModal() makes the page inert but iOS still rubber-band-scrolls it otherwise). */ html:has(dialog.qx-sheet[open]) { overflow: hidden; } /* Same surface language as a .glass-card / the hx-modal .dialog-body — dark, blurred, bordered, fully rounded — so the sheet reads as one of our widgets rather than a system dialog. Opaque-ish fill (not the 0.03 card alpha) because it floats over the blurred backdrop. */ .qx-sheet-body { position: relative; overflow: hidden; /* clip the accent stripe to the radius */ box-sizing: border-box; width: 100%; max-width: 560px; max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; background: rgba(20, 20, 20, 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55); } /* Green left accent stripe — same recipe as .kpi-tile::before, so the sheet reads as the Artists (accent-success) widget expanded. */ .qx-sheet-body::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--qx-accent); box-shadow: 0 0 8px var(--qx-accent); } .qx-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .qx-sheet-head-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Small green "reverse play" glyph (mirrored play_arrow), no box — visual inverse of the green play affordance that opened the sheet. */ .qx-sheet-close { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 4px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--qx-accent); -webkit-text-fill-color: currentColor; opacity: 0.9; transition: opacity 0.15s ease, transform 0.15s ease; } .qx-sheet-close:hover, .qx-sheet-close:focus-visible { opacity: 1; transform: scale(1.08); outline: none; } .qx-sheet-close .material-symbols-outlined { font-size: 19px !important; } .qx-sheet-scroll { overflow-y: auto; /* Pin vertical-only. With overflow-y non-visible, an unset overflow-x computes to `auto`, so any too-wide child (the Sphere bowl sheet) makes the sheet scroll — and drift — horizontally. Explicit hidden prevents it. */ overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 20px; padding-top: 16px; padding-right: 6px; /* gutter so the thumb never sits on the prices */ /* Light scrollbar: transparent track (no abrupt full-height line) + a thin, faint, rounded thumb. Standard props (Safari 18.2+, Chrome, Firefox) with a WebKit fallback; older iOS keeps its native auto-hiding overlay, which is already subtle. */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.08) transparent; } /* This is a flex column AND the scroll container. Without this, a child with overflow≠visible (e.g. .qx-stats, overflow:hidden → flex min-height:0) gets shrunk to zero when content overflows instead of scrolling — collapsed the Lifetime stat grid when the data table expanded. Scroll children keep natural size; the container scrolls. */ .qx-sheet-scroll > * { flex-shrink: 0; } .qx-sheet-scroll::-webkit-scrollbar { width: 4px; } .qx-sheet-scroll::-webkit-scrollbar-track { background: transparent; } .qx-sheet-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 999px; } .qx-sheet-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); } .qx-sheet-group { display: flex; flex-direction: column; } /* Single merged header row per group: group label (e.g. "Sphere · 8 artists", doubling as the artist-column header) on the left, "Average price" on the right — one line, no separate stacked group title. */ .qx-sheet-colhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11px; padding: 2px 0 8px; } /* Collapsible month groups (Events schedule) — native
, no JS. Summary reuses .qx-sheet-colhead for the header look; these rules add the disclosure behaviour and a rotating chevron. Scoped to the summary so the div-based .qx-sheet-colhead (Artists) is untouched. */ .qx-month { border: 0; } .qx-month-sum { list-style: none; cursor: pointer; align-items: center; -webkit-tap-highlight-color: transparent; } .qx-month-sum::-webkit-details-marker { display: none; } .qx-month-sum:focus-visible { outline: 2px solid var(--qx-accent); outline-offset: 2px; } .qx-month-chev { font-size: 18px !important; color: var(--text-dim); transition: transform 0.15s ease; flex-shrink: 0; } .qx-month[open] .qx-month-chev { transform: rotate(180deg); } /* "Show the data" disclosure (shared qx_data_table.html) — native
; the table scrolls horizontally so wide tables survive an iPhone. Accent-tinted icon ties it to the sheet that owns it. */ .qx-data { border: 0; margin-top: 16px; border-top: 1px solid var(--border-weak); padding-top: 14px; } .qx-data-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; } .qx-data-sum::-webkit-details-marker { display: none; } .qx-data-sum:focus-visible { outline: 2px solid var(--qx-accent); outline-offset: 2px; } .qx-data-ico { font-size: 18px !important; color: var(--qx-accent); } .qx-data-meta { margin-left: auto; } .qx-data-cap { margin: 10px 0 6px; } .qx-data-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-weak); border-radius: var(--radius-md); margin-top: 8px; } .qx-data-tbl { border-collapse: collapse; width: max-content; min-width: 100%; font-family: var(--font-data); font-size: 11px; } .qx-data-tbl th, .qx-data-tbl td { text-align: left; padding: 7px 10px; white-space: nowrap; border-bottom: 1px solid var(--border-weak); } .qx-data-tbl th { color: var(--text-fade); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; position: sticky; top: 0; background: rgba(20, 20, 20, 0.98); } .qx-data-tbl td { color: var(--text-muted); } .qx-data-tbl tr:last-child td { border-bottom: 0; } /* Name column (first col): cap at ~20 chars with an ellipsis; full value stays available via the cell title. Inner span so truncation is reliable regardless of the max-content table layout. */ .qx-data-name span { display: inline-block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Two-line row (matches the /ops reports top-metrics pattern): line 1 is Artist + the headline avg price; line 2 is a quiet meta sub-line. No rigid column grid — nothing to crowd on a narrow iPhone. */ .qx-sheet-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--border-weak); } .qx-sheet-row:last-child { border-bottom: 0; } .qx-sheet-row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .qx-sheet-artist { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-sheet-price { color: var(--text); flex-shrink: 0; } .qx-sheet-row-sub { color: var(--text-dim); } /* Festivals sheet: a block per festival — name + "City, State · dates" header, then a tight ticket-type list (type left, $avg + count right). */ .qx-sheet-fest { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--border-weak); } .qx-sheet-fest:last-child { border-bottom: 0; } .qx-sheet-fest-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; } .qx-sheet-fest-name { color: var(--text); } .qx-sheet-fest-meta { letter-spacing: 0.02em; } .qx-sheet-trow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0 3px 10px; } .qx-sheet-ttype { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-sheet-tmeta { flex-shrink: 0; white-space: nowrap; } /* ── Marquee sheet: attraction master-detail ───────────────────────── One large 4:5 featured poster + caption, then a tap-to-feature list. The poster is a background-image (a missing/404 URL degrades to the dark fill, not a broken-image icon); the 4:5 frame means an owned poster fills it exactly while a TM landscape fallback cover-crops to centre. */ .qx-mq-feature { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .qx-mq-poster { aspect-ratio: 4 / 5; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.16); background-color: var(--surface-3); /* fill while loading / on 404 */ background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; transition: opacity 0.48s ease; /* soft fade for the idle hero rotation */ } .qx-mq-poster--blank { background-image: linear-gradient(150deg, color-mix(in srgb, var(--qx-accent) 38%, transparent), color-mix(in srgb, var(--qx-accent) 6%, transparent)); } .qx-mq-cap { display: flex; flex-direction: column; gap: 3px; } /* Keep the hero caption's wrapping lines clear of the play affordance pinned bottom-right (right:16 + ~20px glyph). */ .kpi-tile-hero .qx-mq-when, .kpi-tile-hero .qx-mq-where { padding-right: 26px; } /* Reserve the venue line at two lines so the tile height doesn't jump when a short (Sphere) venue fits one line but a longer (festival) venue wraps to two — otherwise the idle rotation bobs the tile up/down a line. */ .kpi-tile-hero .qx-mq-where { min-height: 2lh; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .qx-mq-name { color: var(--text); font-family: var(--font-data); font-weight: 700; font-size: 18px; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-mq-when { color: var(--text); } /* Tap-to-feature list — the scrolling body of the drawer (flex:1 so it fills under the fixed grip + toggles; the poster shows through behind it). */ .qx-mq-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 14px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .qx-mq-list::-webkit-scrollbar { width: 4px; } .qx-mq-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; } .qx-mq-item { appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border-weak); color: var(--text); display: flex; flex-direction: column; gap: 1px; padding: 9px 6px; transition: background 0.12s ease; } .qx-mq-item:last-child { border-bottom: 0; } .qx-mq-item.is-sel { background: color-mix(in srgb, var(--qx-accent) 13%, transparent); } .qx-mq-item-name { font-family: var(--font-data); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .qx-mq-item:hover { background: rgba(255, 255, 255, 0.04); } } /* ── Marquee modal: full poster + below-poster filter / list drawer ─── The marquee sheet diverges from the hero tile (which keeps the static .qx-mq-feature card). The featured poster shows whole in a 4:5 frame that scales to fit; below it sit the Show filter + an "Attraction list" button. That button pops the list up over the poster in a frosted drawer; the grip or a row tap drops it again. */ .qx-mq-body { height: 85vh; height: 85dvh; padding: 0; } .qx-mq-body .qx-sheet-head { padding: 16px 18px 12px; flex-shrink: 0; } .qx-mq { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Poster stage — poster pinned to the top (just under the header), the stat row in the space below it; the drawer pops up over both. */ .qx-mq-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; overflow: hidden; padding: 12px 16px 0; } /* Bordered 4:5 poster card — the "baseball card" frame (pairs with the sheet's accent strip). Sized to the largest 4:5 box that fits, leaving room for the stat row below; owned posters are 4:5 so they fill it whole (no crop). */ .qx-mq-frame { position: relative; flex-shrink: 0; aspect-ratio: 4 / 5; width: 100%; max-height: calc(100% - 66px); /* reserve the stat row + gap */ border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } /* Stat row under the poster — 4 compact metrics, repainted by JS on feature. */ .qx-mq-stats { flex-shrink: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .qx-mq-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qx-mq-stat-v { font-family: var(--font-data); font-weight: 600; font-size: 15px; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qx-mq-stat-k { font-size: 9px; } /* Featured poster fills the frame (cover = whole for a 4:5 source). A missing URL degrades to the accent wash, not a broken-image icon. */ .qx-mq-img { position: absolute; inset: 0; background-color: var(--surface-3); background-size: cover; background-position: center; background-repeat: no-repeat; } .qx-mq-img--blank { background-image: linear-gradient(150deg, color-mix(in srgb, var(--qx-accent) 38%, transparent), color-mix(in srgb, var(--qx-accent) 6%, transparent)); } /* Swipe-to-navigate: a swipe/drag on the poster steps to the next/prev attraction and the new poster slides in (left = next, in from the right; right = prev, in from the left). touch-action: pan-y lets vertical page scroll through while reserving horizontal pans for the gesture. */ .qx-mq-frame, .kpi-tile-hero .qx-mq-poster { touch-action: pan-y; } @keyframes qx-mq-slidein-r { from { transform: translateX(22px); opacity: 0.25; } to { transform: translateX(0); opacity: 1; } } @keyframes qx-mq-slidein-l { from { transform: translateX(-22px); opacity: 0.25; } to { transform: translateX(0); opacity: 1; } } .qx-mq-slidein-r { animation: qx-mq-slidein-r 0.24s ease; } .qx-mq-slidein-l { animation: qx-mq-slidein-l 0.24s ease; } /* Modal header detail — the featured attraction's identity lives in the sheet header (moved off the poster); JS repaints name + meta as you feature. */ .qx-mq-hd-eyebrow { color: var(--text-dim); } .qx-mq-hd-name { color: var(--text); font-family: var(--font-data); font-weight: 700; font-size: 17px; line-height: 1.2; margin-top: 1px; } .qx-mq-hd-meta { color: var(--text-dim); } /* Frosted list drawer — hidden until the Attraction list button pops it up over the poster; the list inside scrolls, the poster shows through. */ .qx-mq-drawer { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden; pointer-events: none; display: flex; flex-direction: column; background: linear-gradient(to top, rgba(10, 10, 12, 0.95), rgba(10, 10, 12, 0.82)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45); transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .qx-mq-drawer.is-open { height: 82%; pointer-events: auto; } /* Grip — drops the drawer. */ .qx-mq-handle { appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: transparent; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 9px 0 7px; } .qx-mq-handle:focus-visible { outline: none; } .qx-mq-grip { width: 38px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.32); transition: background 0.15s ease; } .qx-mq-handle:hover .qx-mq-grip, .qx-mq-handle:focus-visible .qx-mq-grip { background: rgba(255, 255, 255, 0.5); } /* Below-poster bar — one row: the Attraction list menu button (left), the Show filter (right). Wraps on very narrow widths. */ .qx-mq-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 12px 16px 16px; } /* Show-filter toggles (All / Festivals / Sphere). */ .qx-mq-toggles { display: flex; align-items: center; gap: 10px; } .qx-mq-seg { display: inline-flex; gap: 2px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 9px; padding: 2px; } .qx-mq-tg { appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); font-family: var(--font-data); font-size: 12px; padding: 4px 10px; display: inline-flex; align-items: baseline; gap: 5px; transition: background 0.12s ease, color 0.12s ease; } .qx-mq-tg:hover { color: var(--text); } .qx-mq-tg.is-on { background: color-mix(in srgb, var(--qx-accent) 24%, transparent); color: var(--text); } .qx-mq-tg-n { font-size: 10px; opacity: 0.6; } .qx-mq-tg.is-on .qx-mq-tg-n { opacity: 0.85; } /* "all attractions" trigger — a compact menu-bar button on the lower left, sized to match the Show segmented control beside it. */ .qx-mq-listbtn { appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: var(--font-data); font-size: 12px; padding: 6px 12px; transition: background 0.12s ease, border-color 0.12s ease; } .qx-mq-listbtn:hover { background: rgba(255, 255, 255, 0.09); border-color: color-mix(in srgb, var(--qx-accent) 45%, var(--border)); } .qx-mq-listbtn-chev { font-size: 16px; color: var(--text-dim); transition: transform 0.22s ease; } .qx-mq-listbtn[aria-expanded="true"] .qx-mq-listbtn-chev { transform: rotate(180deg); } /* ── Lifetime Dataset sheet: chart, toggles, volume strip, stat grid ── */ .qx-sec { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 14px; } .qx-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; } .qx-life-toggles { display: inline-flex; gap: 2px; flex-shrink: 0; } .qx-life-tg { appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-dim); -webkit-text-fill-color: currentColor; font: inherit; font-size: 11px; line-height: 1; padding: 5px 9px; border-radius: var(--radius-md); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .qx-life-tg.on { color: var(--qx-accent); border-color: color-mix(in srgb, var(--qx-accent) 55%, transparent); background: color-mix(in srgb, var(--qx-accent) 12%, transparent); } @media (hover: hover) and (pointer: fine) { .qx-life-tg:hover { color: var(--text); border-color: var(--text-dim); } .qx-life-tg.on:hover { color: var(--qx-accent); } } /* Taller than a sparkline: gives the growth curve more vertical resolution and brings the Lifetime sheet's height ~in line with the list-based sheets so the data-table nudge feels consistent. Lifetime-only (Events bars use .qx-bars), so no cross-sheet effect. */ .qx-life-chart { width: 100%; height: 200px; display: block; } .qx-bars { width: 100%; height: 64px; display: block; } .qx-life-area { fill: color-mix(in srgb, var(--qx-accent) 16%, transparent); stroke: none; } .qx-life-line { fill: none; stroke: var(--qx-accent); stroke-width: 1.75; vector-effect: non-scaling-stroke; } .qx-life-dot { fill: var(--qx-accent); } .qx-bar { fill: rgba(255, 255, 255, 0.16); } .qx-bar.peak { fill: var(--qx-accent); } .qx-bar.last { fill: color-mix(in srgb, var(--qx-accent) 60%, transparent); } /* Get-in residency strip — one bar per night, taller = better value, self-normalized per artist; the best night(s) take the sheet accent (fuchsia). Same fixed-viewBox static-SVG idiom as .qx-bars. */ .qx-strip { width: 100%; height: 40px; display: block; margin-top: 6px; } .qx-strip-bar { fill: rgba(255, 255, 255, 0.16); } .qx-strip-bar.best { fill: var(--qx-accent); } .qx-strip-key { color: var(--qx-accent); } .qx-strip-nights { margin-top: 4px; } .qx-strip-nights > summary { list-style: none; cursor: pointer; color: var(--text-dim); padding: 2px 0; } .qx-strip-nights > summary::-webkit-details-marker { display: none; } .qx-strip-night { display: flex; justify-content: space-between; color: var(--text-dim); padding: 1px 0; } .qx-strip-night.best { color: var(--qx-accent); } .qx-life-axis { display: flex; justify-content: space-between; gap: 12px; } .qx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-weak); border: 1px solid var(--border-weak); border-radius: var(--radius-md); overflow: hidden; margin-top: 6px; } .qx-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: rgba(255, 255, 255, 0.02); } .qx-stat-v { color: var(--text); font-family: var(--font-data); font-size: 18px; line-height: 1; } .qx-stat-s { line-height: 1.3; } .qx-life-breadth { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-weak); line-height: 1.5; } @media (min-width: 480px) { .qx-stats { grid-template-columns: repeat(4, 1fr); } } /* Ranked horizontal bars — the Attractions "listings by attraction" leaderboard (reusable for any single-series ranking). Two-line rows: name + value, then a proportional track. Server-rendered, no JS; the fill picks up the sheet's --qx-accent. A min-width keeps a shallow tail (a 12-listing attraction) a visible sliver rather than nothing — honest "present but thin", not vanished. */ .qx-rank { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; } .qx-rank-row { display: flex; flex-direction: column; gap: 4px; } .qx-rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .qx-rank-name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-rank-val { color: var(--text); flex-shrink: 0; } .qx-rank-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .qx-rank-fill { height: 100%; min-width: 2px; border-radius: 3px; background: var(--qx-accent); } /* Tier-spread dumbbell — Festivals "price spread". Two-line rows: name + weighted avg on top, then a self-normalized track ($low … bar with the avg dot … $high). The bar is always full width — the $ labels carry the real scale — so a cheap festival's spread stays legible beside a $5k-Platinum one (a shared axis would crush it). Server- rendered, no JS; the dot + the header key both pick up the sheet's --qx-accent (cyan on the Festivals sheet). */ .qx-dumb { display: flex; flex-direction: column; gap: 13px; margin-top: 2px; } .qx-dumb-row { display: flex; flex-direction: column; gap: 6px; } .qx-dumb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .qx-dumb-name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-dumb-meta { color: var(--text-dim); flex-shrink: 0; } .qx-dumb-scale { display: flex; align-items: center; gap: 8px; } .qx-dumb-end { color: var(--text-dim); flex-shrink: 0; } .qx-dumb-track { position: relative; flex: 1 1 auto; min-width: 48px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--qx-accent) 18%, transparent); } .qx-dumb-mark { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--qx-accent); transform: translate(-50%, -50%); } /* Legend key in the chart head — the ● matching the track's avg dot. */ .qx-dumb-key { color: var(--qx-accent); } /* ── Sphere seating map (reports_sphere_seatmap) ──────────────────── Real traced Sphere geometry (IP-clean), 10 zones, fixed-viewBox static SVG (renders while the dialog is display:none). Sections stay visible at rest (the detailed chart look) with every zone's current listing count overlaid; hover / tap / keyboard-focus a zone → its cells take the single sheet --qx-accent AND a same-colour stroke, so the internal section seams dissolve into one solid shape (the count reads cleanly) and the other zones dim. One colour per modal. */ .qx-sheet [hidden] { display: none !important; } .qx-bowl { display: block; width: 100%; height: auto; margin: 4px 0 8px; } .qx-bowl-zone { cursor: pointer; } .qx-bowl-zone:focus-visible { outline: none; } .qx-bowl-cell { fill: rgba(255, 255, 255, 0.085); /* neutral gray, rest */ stroke: rgba(9, 9, 11, 0.85); stroke-width: 1; /* section divider */ transition: fill .12s ease, opacity .12s ease; } /* Collapse: accent fill + same-colour stroke bridges the sub-pixel trace seams between adjacent sections → one solid shape. */ .qx-bowl-zone:hover .qx-bowl-cell, .qx-bowl-zone:focus-visible .qx-bowl-cell, .qx-bowl-zone.is-active .qx-bowl-cell { fill: var(--qx-accent); stroke: var(--qx-accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .qx-bowl.has-active .qx-bowl-zone:not(.is-active) .qx-bowl-cell { opacity: .32; } .qx-bowl-stage { fill: rgba(255, 255, 255, 0.20); stroke: rgba(255, 255, 255, 0.30); stroke-width: 1; } .qx-bowl-stage-lab { fill: var(--text-dim); font-family: var(--font-data); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-anchor: middle; dominant-baseline: central; } /* Per-zone count — bold value over a small label, with a dark halo (paint-order:stroke set on the element) so it stays legible over the busy sections at rest and over the accent fill when collapsed. */ .qx-bowl-num { fill: #c5c6cc; stroke: rgba(9, 9, 11, 0.92); stroke-width: 3; font-family: var(--font-data); font-weight: 700; pointer-events: none; dominant-baseline: middle; } .qx-bowl-num-v { font-size: 18px; } .qx-bowl-zone.is-empty .qx-bowl-num { opacity: .5; } .qx-bowl-zone.is-active .qx-bowl-num-v { font-size: 19px; } /* Show identity */ .qx-bowl-show { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px; } .qx-bowl-show-artist { font-size: 15px; font-weight: 700; color: var(--text); } .qx-bowl-show-meta { letter-spacing: .2px; } .qx-bowl-show-med { color: var(--qx-accent); letter-spacing: .2px; margin-top: 1px; } .qx-bowl-h { margin: 2px 0 4px; } .qx-bowl-cap { margin-top: 4px; min-height: 1.2em; } .qx-bowl-cap-label { color: var(--text-dim); font-family: var(--font-data); } /* L2 — one zone's price detail */ .qx-bowl-l2 { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--qx-accent) 7%, transparent); } .qx-bowl-l2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .qx-bowl-l2-zone { color: var(--qx-accent); font-size: 13px; } .qx-bowl-l2-back { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 2px 4px; } .qx-bowl-l2-back:hover { color: var(--text); } .qx-bowl-l2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; } .qx-bowl-l2-stats > div { display: flex; flex-direction: column; gap: 2px; } .qx-bowl-l2-stats b { font-size: 15px; color: var(--text); font-weight: 700; } .qx-bowl-l2-stats span { font-size: 9px; } .qx-bowl-l2-rows { max-height: 300px; overflow-y: auto; } /* Listing table — header + rows share one 5-col grid so Section / Row / Price / vs-median dot / Since stay aligned. */ .qx-bowl-lh, .qx-bowl-lr { display: grid; grid-template-columns: 1fr 0.7fr 1fr 34px 0.9fr; align-items: center; gap: 6px; } .qx-bowl-lh { padding: 0 2px 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border); } .qx-bowl-lr { padding: 6px 2px; border-bottom: 1px solid var(--border); } .qx-bowl-lr:last-child { border-bottom: 0; } .qx-bowl-lr-sec { color: var(--text); font-weight: 700; } .qx-bowl-lr-row { color: var(--text-muted); } .qx-bowl-lr-p { color: var(--text); font-weight: 700; } .qx-bowl-lr-since { color: var(--text-dim); } .qx-bowl-lr-d { width: 9px; height: 9px; border-radius: 50%; justify-self: center; background: var(--text-dim); } .qx-bowl-lr-d.above { background: var(--danger); } .qx-bowl-lr-d.at { background: var(--warning); } .qx-bowl-lr-d.below { background: var(--success); } .qx-bowl-l2-empty { padding: 10px 2px; } /* Month picker + show list */ .qx-bowl-pick { margin-top: 10px; } /* Two even rows, no horizontal scroll — columns = ceil(months/2), set inline per render so it always lands in exactly two rows. */ .qx-bowl-months { display: grid; gap: 6px; } .qx-bowl-mo { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 6px 8px; font-size: 12px; cursor: pointer; font-family: var(--font-data); white-space: nowrap; } .qx-bowl-mo:hover { color: var(--text); } .qx-bowl-mo.is-sel { color: var(--qx-accent); border-color: color-mix(in srgb, var(--qx-accent) 55%, transparent); background: color-mix(in srgb, var(--qx-accent) 12%, transparent); } .qx-bowl-shows-h { margin: 16px 0 7px; } .qx-bowl-shows { display: flex; flex-direction: column; } .qx-bowl-si { display: flex; flex-direction: column; gap: 1px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 8px 4px; cursor: pointer; width: 100%; } .qx-bowl-si:last-child { border-bottom: 0; } .qx-bowl-si-a { color: var(--text-muted); font-size: 13px; font-weight: 600; } .qx-bowl-si:hover .qx-bowl-si-a { color: var(--text); } .qx-bowl-si.is-sel .qx-bowl-si-a { color: var(--qx-accent); } .qx-bowl-si.is-sel { background: color-mix(in srgb, var(--qx-accent) 7%, transparent); } /* ── Price trajectory sheet (reports_price_trajectory) ────────────── Static per-row sparkline (server-computed ) + a slope verdict chip. Heating (price rising) = danger, cooling = success, flat/new = dim — consistent with the seat-map vs-median dot. */ .qx-traj-note { margin: 2px 0 12px; line-height: 1.4; } .qx-traj-row { padding: 10px 2px; border-bottom: 1px solid var(--border); } .qx-traj-row:last-of-type { border-bottom: 0; } .qx-traj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .qx-traj-artist { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-traj-now { color: var(--text-muted); font-weight: 700; } .qx-traj-spark { display: block; width: 100%; height: 30px; margin: 6px 0 5px; } .qx-traj-spark polyline, .qx-traj-spark line { fill: none; stroke: var(--qx-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .qx-traj-spark line { stroke: var(--text-dim); } .qx-traj-sub { display: flex; align-items: center; gap: 8px; } .qx-traj-chip { font-weight: 700; text-transform: uppercase; letter-spacing: .4px; font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; } .qx-traj-up { color: var(--danger); } .qx-traj-down { color: var(--success); } .qx-traj-flat { color: var(--text-dim); } .qx-traj-new { color: var(--text-fade); } /* Entrance animation — a plain @keyframes that plays when the dialog becomes [open]. Deliberately NOT @starting-style / discrete transitions: those are too new for the iOS Safari baseline we target, and a partial implementation can strand the body translated off-screen (the white/wrong-render class of bug). A keyframe on open is robust everywhere; close is instant (snappy, no exit jank). */ @media (prefers-reduced-motion: no-preference) { dialog.qx-sheet[open] .qx-sheet-body { animation: qx-sheet-in 0.26s cubic-bezier(0.32, 0.72, 0, 1); } } @keyframes qx-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } /* ≥768px: vertically centered instead of bottom-anchored (sizing + rounding already live on the base .qx-sheet-body rule). */ @media (min-width: 768px) { dialog.qx-sheet { align-items: center; } } /* ─── Tappable KPI tile (button reset) + tap affordance ─────────────── */ .kpi-tile-tappable { appearance: none; -webkit-appearance: none; font: inherit; text-align: left; /* iOS renders