/*
Theme Name: Journalist Portal
Theme URI: https://github.com/AthleticNet/vinco-dl-virtualmixedzone
Author: Vinco Sport
Author URI: https://www.vincosport.com
Description: The Wanda Diamond League journalist portal theme — editorial, broadcast-room dark by default, angular, Prometo display + Lato body. Built against the WDL Brand Guidelines v1.4 and the Claude Design handoff (2026-04-23).
Version: 0.1.29
Requires at least: 6.2
Requires PHP: 8.1
License: Proprietary
Text Domain: wjp
Tags: custom-logo, custom-menu, responsive-layout
*/

/* =========================================================================
   Wanda Diamond League — Colors & Type (source of truth)
   Mirrors /wanda-diamond-league-design-system/project/colors_and_type.css
   so the theme is self-contained. Tokens ONLY — component styles follow.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

/* Prometo @font-face is owned by the plugin (assets/css/design-tokens.css) —
 * four per-weight declarations with proper file naming. Removed the duplicate
 * single-file declaration from here in 0.1.10 because the file paths were
 * stale (Prometo.woff2 / .woff don't exist) and emitting them caused 404s
 * on every front-end load. The plugin's declarations also use font-display:
 * swap so missing weights fall back gracefully to Lato. */

:root {
	/* Brand (p.21) */
	--wdl-dark-blue: #0E003C;
	--wdl-blue:      #005BAC;
	--wdl-light-blue:#00FFFF;
	--wdl-white:     #FFFFFF;
	--wdl-blue-600:  #004A8C;
	--wdl-blue-400:  #2E7ED0;
	--wdl-cyan-600:  #00C8E8;
	--wdl-cyan-300:  #7DFAFF;

	/* Dark theme (default) */
	--bg-0: #05002A;
	--bg-1: #0E003C;
	--bg-2: #170A4D;
	--bg-3: #221661;
	--bg-4: #2E2175;

	--fg-1: #FFFFFF;
	--fg-2: rgba(255,255,255,0.78);
	--fg-3: rgba(255,255,255,0.56);
	--fg-4: rgba(255,255,255,0.36);
	--fg-disabled: rgba(255,255,255,0.22);

	--border-1: rgba(255,255,255,0.10);
	--border-2: rgba(255,255,255,0.18);
	--border-strong: rgba(255,255,255,0.32);

	--accent: var(--wdl-light-blue);
	--accent-fg: var(--wdl-dark-blue);
	--accent-soft: rgba(0,255,255,0.14);

	--link: var(--wdl-cyan-300);
	--link-hover: var(--wdl-light-blue);

	--live: #FF3B30;
	--live-soft: rgba(255,59,48,0.14);
	--success: #34D399;
	--warning: #F5B544;
	--danger:  #FF5A5F;
	--info:    var(--wdl-light-blue);

	--font-display: 'Prometo', 'Lato', 'Arial Black', system-ui, sans-serif;
	--font-body:    'Lato', 'Prometo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
	--fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px;
	--fs-56: 56px; --fs-80: 80px;

	--lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.5; --lh-loose: 1.65;
	--tracking-tight: -0.01em;
	--tracking-normal: 0;
	--tracking-wide: 0.04em;
	--tracking-wider: 0.12em;
	--tracking-widest: 0.24em;

	--space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
	--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px;

	--radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 6px;
	--radius-4: 10px; --radius-pill: 999px;

	--shadow-1: 0 1px 2px rgba(0,0,0,0.4);
	--shadow-2: 0 4px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
	--shadow-3: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
	--shadow-glow: 0 0 0 2px rgba(0,255,255,0.35);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;
	--dur-slow: 320ms;
}

[data-theme="light"] {
	--bg-0: #F4F5F8;
	--bg-1: #FFFFFF;
	--bg-2: #F8F9FC;
	--bg-3: #EEF0F5;
	--bg-4: #E2E5EE;
	--fg-1: #0E003C;
	--fg-2: rgba(14,0,60,0.72);
	--fg-3: rgba(14,0,60,0.54);
	--fg-4: rgba(14,0,60,0.36);
	--border-1: rgba(14,0,60,0.08);
	--border-2: rgba(14,0,60,0.14);
	--border-strong: rgba(14,0,60,0.28);
	--accent: var(--wdl-blue);
	--accent-fg: #FFFFFF;
	--accent-soft: rgba(0,91,172,0.10);
	--link: var(--wdl-blue);
	--link-hover: var(--wdl-dark-blue);
	--shadow-1: 0 1px 2px rgba(14,0,60,0.08);
	--shadow-2: 0 4px 12px rgba(14,0,60,0.10), 0 0 0 1px rgba(14,0,60,0.04);
	--shadow-3: 0 12px 32px rgba(14,0,60,0.14), 0 0 0 1px rgba(14,0,60,0.06);
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
	background: var(--bg-0);
	color: var(--fg-1);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--fs-14);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

/* Semantic type (mirror of `.wdl-*` in design-system) */
.wdl-display { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.wdl-h1      { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-40); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.wdl-h2      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-32); line-height: var(--lh-snug); }
.wdl-h3      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-snug); }
.wdl-h4      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-18); line-height: var(--lh-snug); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.wdl-kicker, .wdl-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-12); line-height: 1; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); }
.wdl-lead    { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-20); line-height: var(--lh-body); color: var(--fg-2); }
.wdl-body    { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-14); line-height: var(--lh-body); }
.wdl-body-strong { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-14); line-height: var(--lh-body); }
.wdl-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-12); line-height: var(--lh-body); color: var(--fg-3); }
.wdl-micro   { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11); line-height: 1; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }
.wdl-mono    { font-family: var(--font-mono); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.wdl-stat    { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-56); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }

/* =========================================================================
   Buttons
   ========================================================================= */
.wdl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); white-space: nowrap; text-decoration: none; }
.wdl-btn-primary   { background: var(--wdl-light-blue); color: var(--wdl-dark-blue); }
.wdl-btn-primary:hover { background: #7DFAFF; box-shadow: 0 0 0 2px rgba(0,255,255,.25); }
.wdl-btn-primary:active { transform: translateY(1px); }
.wdl-btn-secondary { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.wdl-btn-secondary:hover { background: var(--bg-3); border-color: var(--fg-2); }
.wdl-btn-ghost     { background: transparent; color: var(--fg-2); }
.wdl-btn-ghost:hover { color: #fff; background: var(--bg-3); }
.wdl-btn-danger    { background: #FF3B30; color: #fff; }
.wdl-btn-danger:hover { background: #FF5A5F; }
.wdl-btn-live      { background: #FF3B30; color: #fff; }
.wdl-btn-small     { padding: 6px 12px; font-size: 11px; }
.wdl-btn-icon      { padding: 9px; width: 36px; height: 36px; justify-content: center; }
.wdl-btn[disabled], .wdl-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Chips */
.wdl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; }
.wdl-chip-live { background: #FF3B30; color: #fff; }
.wdl-chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #fff; animation: wdlPulse 1.2s infinite; }
@keyframes wdlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.wdl-chip-emb    { background: rgba(245,181,68,.15); color: #F5B544; border: 1px solid rgba(245,181,68,.4); }
.wdl-chip-ok     { background: rgba(52,211,153,.12); color: #34D399; border: 1px solid rgba(52,211,153,.4); }
.wdl-chip-final  { background: var(--wdl-blue); color: #fff; }
.wdl-chip-tag    { background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--border-2); }
.wdl-chip-credit { background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.1); }
.wdl-chip-count  { background: var(--wdl-light-blue); color: var(--wdl-dark-blue); min-width: 18px; height: 18px; padding: 0 6px; justify-content: center; border-radius: 999px; font-size: 10px; letter-spacing: 0; }

/* Inputs */
.wdl-label   { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 6px; }
.wdl-input, .wdl-select, .wdl-textarea { background: var(--bg-2); border: 1px solid var(--border-2); color: var(--fg-1); padding: 10px 12px; font-family: var(--font-body); font-weight: 300; font-size: 13px; border-radius: 4px; outline: none; width: 100%; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.wdl-input:focus, .wdl-textarea:focus, .wdl-select:focus { border-color: var(--wdl-light-blue); box-shadow: 0 0 0 2px rgba(0,255,255,.25); }
.wdl-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.wdl-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.wdl-search { position: relative; }
.wdl-search .wdl-input { padding-left: 36px; }
.wdl-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }

/* Cards */
.wdl-card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 6px; overflow: hidden; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); display: block; }
.wdl-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-2); }
.wdl-card-body  { padding: 16px; }
.wdl-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-3); }
.wdl-card-media img { width: 100%; height: 100%; object-fit: cover; }
.wdl-card-meta  { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--fg-3); margin-top: 6px; font-variant-numeric: tabular-nums; }
.wdl-card-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--fg-1); text-wrap: pretty; }

/* Live feed / items */
.wdl-live-item { display: flex; gap: 14px; padding: 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-left: 2px solid transparent; border-radius: 4px; margin-bottom: 10px; }
.wdl-live-item.is-live { border-left-color: #FF3B30; background: var(--bg-3); }
.wdl-avatar { width: 44px; height: 44px; flex: none; background: var(--wdl-blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; color: #fff; border-radius: 4px; font-size: 14px; letter-spacing: .04em; }
.wdl-header .wdl-avatar { width: 32px; height: 32px; font-size: 12px; border-radius: 50%; overflow: hidden; }
.wdl-live-body { flex: 1; min-width: 0; }
.wdl-live-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.wdl-live-name   { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.wdl-live-event  { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
.wdl-live-text   { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin: 4px 0 8px; }
.wdl-live-time   { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

/* Live-stream tiles (Mixed Zone, Dashboard, PiP) */
.wdl-stream-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wdl-stream-grid.is-focus { grid-template-columns: 1fr 220px; }
.wdl-stream-grid.is-focus .wdl-stream-tile:not(.is-focus) { aspect-ratio: 16/9; }
.wdl-stream-tile { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--border-1); overflow: hidden; cursor: pointer; transition: border-color var(--dur-fast); }
.wdl-stream-tile:hover { border-color: var(--wdl-light-blue); }
.wdl-stream-tile.is-focus { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 16/9; border-color: var(--wdl-light-blue); box-shadow: 0 0 0 1px var(--wdl-light-blue); }
.wdl-stream-overlay { position: absolute; inset: 0; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 25%, transparent 65%, rgba(0,0,0,.8) 100%); pointer-events: none; }
.wdl-stream-top    { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.wdl-stream-bottom { pointer-events: auto; }
.wdl-stream-athlete { font-family: var(--font-display); font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: #fff; line-height: 1.1; }
.wdl-stream-tile.is-focus .wdl-stream-athlete { font-size: 22px; }
.wdl-stream-event  { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-top: 2px; }
.wdl-stream-meta   { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.75); }
.wdl-stream-wave   { position: absolute; bottom: 32px; left: 10px; right: 10px; display: flex; gap: 2px; align-items: flex-end; height: 18px; opacity: .7; }
.wdl-stream-wave i { flex: 1; background: var(--wdl-light-blue); animation: wdlWave 1s ease-in-out infinite; height: 30%; }
.wdl-stream-wave i:nth-child(2) { animation-delay: .10s; height: 70%; }
.wdl-stream-wave i:nth-child(3) { animation-delay: .20s; height: 45%; }
.wdl-stream-wave i:nth-child(4) { animation-delay: .15s; height: 85%; }
.wdl-stream-wave i:nth-child(5) { animation-delay: .25s; height: 55%; }
.wdl-stream-wave i:nth-child(6) { animation-delay: .05s; height: 40%; }
.wdl-stream-wave i:nth-child(7) { animation-delay: .30s; height: 75%; }
.wdl-stream-wave i:nth-child(8) { animation-delay: .18s; height: 50%; }
@keyframes wdlWave { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* Mixed zone layout: rail · center · ask */
.wdl-mz-grid { display: grid; grid-template-columns: 220px 1fr 340px; gap: 20px; align-items: start; }
.wdl-mz-rail, .wdl-mz-ask { align-self: stretch; }
.wdl-mz-center { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wdl-mz-panel  { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 6px; padding: 14px 16px; }
@media (max-width: 1200px) {
	.wdl-mz-grid { grid-template-columns: 1fr; }
}

/* On-deck rail */
.wdl-ondeck { display: flex; flex-direction: column; gap: 6px; }
.wdl-ondeck-row { display: flex; gap: 10px; padding: 10px; background: var(--bg-2); border: 1px solid var(--border-1); border-left: 2px solid transparent; border-radius: 4px; cursor: pointer; align-items: center; font-size: 12px; }
.wdl-ondeck-row:hover { background: var(--bg-3); }
.wdl-ondeck-row.is-live   { border-left-color: #FF3B30; }
.wdl-ondeck-row.is-ondeck { border-left-color: var(--wdl-light-blue); }
.wdl-ondeck-row.is-done   { opacity: .6; }
.wdl-ondeck-time  { font-family: var(--font-mono); color: var(--fg-3); width: 44px; flex: none; }
.wdl-ondeck-body  { flex: 1; min-width: 0; }
.wdl-ondeck-name  { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.wdl-ondeck-event { font-size: 11px; color: var(--fg-3); margin-top: 1px; }

/* Inline ask form */
.wdl-ask-inline { background: var(--bg-2); border: 1px solid var(--border-1); padding: 14px; border-radius: 4px; border-top: 2px solid var(--wdl-light-blue); }
.wdl-ask-target { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-1); }
.wdl-ask-target-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; }
.wdl-ask-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-left: auto; }

/* Queue */
.wdl-q-group { margin-bottom: 18px; }
.wdl-q-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 4px; margin-bottom: 8px; align-items: flex-start; }
.wdl-q-row.is-onair { border-left: 2px solid var(--wdl-light-blue); background: rgba(0,255,255,.04); }
.wdl-q-pos { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--fg-3); line-height: 1; }
.wdl-q-row.is-onair .wdl-q-pos { color: var(--wdl-light-blue); }
.wdl-q-text { font-size: 14px; line-height: 1.5; color: var(--fg-1); text-wrap: pretty; }
.wdl-q-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); }

/* Admin bar (interviewer only) */
.wdl-admin-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(90deg, rgba(255,59,48,.15), transparent); border: 1px solid rgba(255,59,48,.35); border-radius: 4px; margin-bottom: 18px; font-size: 12px; color: var(--fg-2); }
.wdl-admin-bar b { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: #FF8A80; }

/* Tables */
.wdl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wdl-table th { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); padding: 10px 12px; border-bottom: 1px solid var(--border-2); }
.wdl-table td { padding: 12px; border-bottom: 1px solid var(--border-1); vertical-align: middle; }
.wdl-table tr:hover td { background: var(--bg-2); }
.wdl-pos { font-family: var(--font-display); font-weight: 900; color: var(--fg-2); width: 32px; }
.wdl-pos.is-gold   { color: #F5B544; }
.wdl-pos.is-silver { color: #C0C7D6; }
.wdl-pos.is-bronze { color: #CD853F; }
.wdl-time-cell { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* App layout */
.wdl-app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto auto 1fr; min-height: 100vh; grid-template-areas: "sidebar header" "sidebar crumbs" "sidebar main"; }
.wdl-sidebar { grid-area: sidebar; background: var(--bg-1); border-right: 1px solid var(--border-1); padding: 20px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.wdl-header  { grid-area: header; display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--border-1); background: rgba(14,0,60,.85); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 10; }
/* 0.1.22 — breadcrumbs row sits between the topbar and the page hero.
   No background of its own — inherits the page surface. Border-bottom
   provides a subtle hairline so the row reads as a separator. */
.wjp-crumbs-bar { grid-area: crumbs; padding: 10px 28px; border-bottom: 1px solid var(--border-1); }
.wjp-crumbs-bar .wdl-breadcrumb { margin: 0; }
.wdl-main    { grid-area: main; padding: 24px 28px 64px; max-width: 100%; min-width: 0; }
.wdl-sb-brand{ display: flex; align-items: center; gap: 10px; padding: 0 20px 20px; border-bottom: 1px solid var(--border-1); margin-bottom: 12px; }
.wdl-sb-brand img { height: 40px; width: auto; }
.wdl-sb-group{ padding: 12px 20px 6px; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-4); }
.wdl-sb-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--fg-2); text-decoration: none; font-size: 13px; font-weight: 400; border-left: 2px solid transparent; cursor: pointer; }
.wdl-sb-link:hover { background: var(--bg-2); color: #fff; }
.wdl-sb-link.is-active { color: var(--wdl-light-blue); border-left-color: var(--wdl-light-blue); background: rgba(0,255,255,.06); }
.wdl-sb-link .wdl-chip-count { margin-left: auto; }

.wdl-breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.wdl-breadcrumb .current { color: #fff; }
.wdl-event-tag { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.wdl-page-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wdl-page-title { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; margin: 4px 0 0; }
.wdl-page-sub { font-size: 14px; color: var(--fg-3); margin-top: 6px; }
.wdl-page-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Schedule card (dashboard B5) */
.vmz-schedule-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.vmz-schedule-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.vmz-schedule-list li .wdl-mono { min-width: 64px; color: var(--fg-3); font-size: 12px; }
.vmz-schedule-list li.wdl-empty { color: var(--fg-4); justify-content: center; padding: 12px 0; }

.wdl-filterbar { display: flex; gap: 10px; align-items: center; padding: 12px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.wdl-filterbar .wdl-search { flex: 1; min-width: 220px; }
.wdl-filterbar .wdl-select { width: auto; min-width: 140px; }

.wdl-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; }
.wdl-stat-card { background: var(--bg-2); border: 1px solid var(--border-1); padding: 16px 18px; border-radius: 6px; position: relative; overflow: hidden; }
.wdl-stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,255,255,.4), transparent); }
.wdl-stat-label { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.wdl-stat-value { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.wdl-stat-delta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 4px; }
.wdl-stat-delta.up { color: #34D399; }

/* Modal */
.wdl-modal-scrim { position: fixed; inset: 0; background: rgba(5,0,42,.64); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.wdl-modal { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px; width: min(560px,92vw); max-height: 86vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.wdl-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border-1); display: flex; justify-content: space-between; align-items: center; }
.wdl-modal-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.wdl-modal-body { padding: 20px 22px; overflow-y: auto; }
.wdl-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border-1); display: flex; gap: 10px; justify-content: flex-end; }

/* =========================================================================
   0.1.28 — Notifications page (vmz-notifications)
   Status bar with live unread count, date-grouped sections, unread items
   carry a cyan dot + soft accent border so journalists can scan for what's
   new at a glance.
   ========================================================================= */
.vmz-notifications__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: var(--bg-2);
	border: 1px solid var(--border-1);
	border-radius: 6px;
}
.vmz-notifications__count {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.vmz-notifications__count.is-active { color: var(--wdl-light-blue); }
.vmz-notifications__group {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-3);
	margin: 18px 0 8px;
}
.vmz-notifications__group:first-of-type { margin-top: 4px; }
.vmz-notifications__list { gap: 8px; }
.wdl-live-item.is-unread {
	border-left-color: var(--wdl-light-blue);
	background: rgba(0,255,255,0.04);
}
.vmz-notifications__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wdl-light-blue);
	box-shadow: 0 0 0 3px rgba(0,255,255,0.18);
	margin: 0 4px;
	flex-shrink: 0;
}

/* =========================================================================
   0.1.26 — PWA install banner (footer-pinned)
   Shown by wjp-pwa-install.js when Chromium fires beforeinstallprompt or
   when iOS Safari is detected. Hidden via [hidden] otherwise. Pinned to
   the bottom of the viewport on phones; floats on desktop browsers (rare —
   most install paths are mobile, but Chrome desktop also surfaces the
   install banner so we render there too).
   ========================================================================= */
.wjp-pwa-banner {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 65;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--bg-2);
	border: 1px solid var(--wdl-light-blue);
	border-radius: 8px;
	box-shadow: var(--shadow-3);
	max-width: 520px;
	margin: 0 auto;
}
.wjp-pwa-banner[hidden] { display: none; }
.wjp-pwa-banner__icon img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: block;
}
.wjp-pwa-banner__copy { flex: 1; min-width: 0; }
.wjp-pwa-banner__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: #fff;
}
.wjp-pwa-banner__hint {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fg-2);
}
.wjp-pwa-banner__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.wjp-pwa-banner { flex-wrap: wrap; }
	.wjp-pwa-banner__icon { display: none; }
	.wjp-pwa-banner__actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* Toasts */
.wdl-toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; max-width: 380px; }
.wdl-toast { display: flex; gap: 12px; padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--border-2); border-left: 3px solid var(--wdl-light-blue); border-radius: 4px; align-items: center; box-shadow: var(--shadow-3); animation: wdlToastIn .3s var(--ease-out); }
@keyframes wdlToastIn { from { transform: translateX(20px); opacity: 0; } }
.wdl-toast.ok   { border-left-color: #34D399; }
.wdl-toast.warn { border-left-color: #F5B544; }
.wdl-toast-body { flex: 1; font-size: 13px; color: var(--fg-2); }
.wdl-toast-body b { color: #fff; font-weight: 700; }

/* Empty state */
.wdl-empty { padding: 60px 20px; text-align: center; color: var(--fg-3); border: 1px dashed var(--border-2); border-radius: 6px; }

/* Video player */
.wdl-player { background: #000; aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; }
.wdl-player-play { width: 72px; height: 72px; border-radius: 999px; background: rgba(0,255,255,.15); border: 2px solid var(--wdl-light-blue); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--wdl-light-blue); }
.wdl-player-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); display: flex; gap: 12px; align-items: center; color: #fff; font-size: 12px; }
.wdl-progress { flex: 1; height: 3px; background: rgba(255,255,255,.2); position: relative; }
.wdl-progress::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 38%; background: var(--wdl-light-blue); }

/* Transcript */
.wdl-transcript { max-height: 380px; overflow-y: auto; padding: 14px 18px; background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 6px; font-size: 13px; line-height: 1.65; }
.wdl-transcript-row { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--border-1); }
.wdl-transcript-time { font-family: var(--font-mono); color: var(--fg-3); flex: none; width: 60px; }
.wdl-transcript-text { color: var(--fg-2); }
.wdl-transcript-speaker { color: var(--wdl-light-blue); font-weight: 700; font-family: var(--font-display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-right: 8px; }

/* Layout utilities */
.wdl-row { display: flex; gap: 12px; align-items: center; }
.wdl-col { display: flex; flex-direction: column; gap: 12px; }
.wdl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wdl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wdl-grid-2 { display: grid; grid-template-columns: 1fr 360px; gap: 20px; }
.wdl-divider { height: 1px; background: var(--border-1); margin: 16px 0; }
.wdl-spacer { flex: 1; }
.wdl-hidden { display: none !important; }

/* 0.1.21 — partner logos sit at the far left of the topbar, BEFORE
   the crumbs (Wanda · Omega · WA). The block sizes to its content
   width — the wdl-spacer after the crumbs absorbs the slack and keeps
   the right-side elements right-aligned. SVGs render at 0.85 opacity
   so they feel like a watermark rather than a competing brand element. */
.wjp-header-logos {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}
.wjp-header-logo {
	height: 24px;
	width: auto;
	max-width: 120px;
	opacity: 0.85;
	transition: opacity 120ms ease;
}
.wjp-header-logo:hover {
	opacity: 1;
}
/* 0.1.24 — keep partner logos visible on mobile (operator request: title
   sponsor presence must persist across screen sizes). Shrink height + cap
   width so they coexist with the hamburger, notifications pill and avatar. */
@media (max-width: 900px) {
	.wjp-header-logos { gap: 8px; }
	.wjp-header-logo  { height: 18px; max-width: 72px; }
}
/* On the narrowest phones the topbar can't fit all three logos alongside
   the hamburger + pill + avatar — keep only the WDL title sponsor (the
   first logo) and hide the Omega + WA marks until there's room. */
@media (max-width: 600px) {
	.wjp-header-logo:nth-of-type(2),
	.wjp-header-logo:nth-of-type(3) { display: none; }
}

/* Placeholder gradients — used until real S3 imagery lands on a given post. */
.ph-track   { background: linear-gradient(135deg, #FF6B35 0%, #D23F1F 40%, #4A1810 100%); }
.ph-stadium { background: linear-gradient(160deg, #0E003C 0%, #005BAC 60%, #00C8E8 100%); }
.ph-runner  { background: linear-gradient(150deg, #221661 0%, #00AEEF 60%, #00FFFF 110%); }
.ph-podium  { background: linear-gradient(135deg, #F5B544 0%, #D23F1F 50%, #0E003C 100%); }
.ph-closeup { background: linear-gradient(170deg, #2E2175 0%, #0E003C 100%); }
.ph-night   { background: linear-gradient(180deg, #05002A 0%, #170A4D 60%, #005BAC 100%); }
.ph-crowd   { background: linear-gradient(145deg, #F5B544 0%, #FF6B35 40%, #2E2175 100%); }
.ph-ribbon  { background: linear-gradient(90deg, #FF3B30, #F5B544, #34D399); }
.ph { position: relative; overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 50%), radial-gradient(circle at 70% 80%, rgba(0,0,0,.3), transparent 50%); mix-blend-mode: overlay; }

/* Pagination */
.wdl-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 20px 0 0; }
.wdl-pagination a, .wdl-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 3px; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--fg-2); text-decoration: none; }
.wdl-pagination .current { background: var(--wdl-light-blue); color: var(--wdl-dark-blue); border-color: var(--wdl-light-blue); }

/* Login hero */
.wdl-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.wdl-login-panel { display: flex; flex-direction: column; justify-content: center; padding: 64px; }
.wdl-login-hero  { position: relative; background: linear-gradient(170deg, var(--bg-1) 0%, var(--wdl-blue) 100%); overflow: hidden; }
.wdl-login-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(60deg, transparent 48%, rgba(0,255,255,.1) 48% 52%, transparent 52%), linear-gradient(-60deg, transparent 48%, rgba(0,255,255,.06) 48% 52%, transparent 52%); background-size: 80px 140px; opacity: .5; }
@media (max-width: 900px) { .wdl-login { grid-template-columns: 1fr; } .wdl-login-hero { display: none; } }

/* =========================================================================
   0.1.24 — Mobile drawer (hamburger + slide-in sidebar)
   The sidebar previously vanished entirely below 900px; users on phones had
   no way to navigate. The toggle and X button are inline-flex only on mobile;
   everything else here is gated to ≤900px so desktop chrome is unchanged.
   ========================================================================= */
.wjp-nav-toggle, .wjp-nav-close { display: none; }
.wjp-nav-scrim                  { display: none; }

/* Responsive app shell */
@media (max-width: 900px) {
	.wdl-app { grid-template-columns: 1fr; grid-template-areas: "header" "crumbs" "main"; }
	.wjp-crumbs-bar { padding: 8px 16px; }
	/* 0.1.24 — claw back horizontal room so the hamburger, partner logos,
	   notifications pill and avatar all fit on phone-width screens without
	   overflow. */
	.wdl-header { padding: 10px 14px; gap: 10px; }

	/* Sidebar becomes a fixed-position drawer. Default off-screen; slides
	   in when body.wjp-nav-open is set by the toggle JS. Width is capped
	   so it doesn't dominate small phones (80vw) but still reads as a
	   navigation panel on tablets (280px). */
	.wdl-sidebar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(280px, 80vw);
		z-index: 60;
		transform: translateX(-100%);
		transition: transform 220ms var(--ease-standard);
		box-shadow: var(--shadow-3);
		padding-top: 56px; /* leaves room for the close button */
	}
	body.wjp-nav-open .wdl-sidebar { transform: translateX(0); }

	.wjp-nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(5,0,42,.55);
		backdrop-filter: blur(4px);
		z-index: 55;
		opacity: 0;
		pointer-events: none;
		transition: opacity 200ms var(--ease-standard);
	}
	body.wjp-nav-open .wjp-nav-scrim { opacity: 1; pointer-events: auto; }

	/* Lock body scroll while the drawer is open so the page behind doesn't
	   slide independently when the user pans on the scrim. */
	body.wjp-nav-open { overflow: hidden; }

	/* Hamburger in the topbar — leading element so thumb-reach is natural. */
	.wjp-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		background: transparent;
		border: 1px solid var(--border-2);
		border-radius: 4px;
		color: var(--fg-1);
		cursor: pointer;
		flex-shrink: 0;
	}
	.wjp-nav-toggle:hover { background: var(--bg-3); }

	/* Close button inside the drawer — top-right within the padding-top
	   reserve we added above. */
	.wjp-nav-close {
		display: inline-flex;
		position: absolute;
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 1px solid var(--border-2);
		border-radius: 4px;
		color: var(--fg-2);
		cursor: pointer;
	}
	.wjp-nav-close:hover { color: #fff; background: var(--bg-3); }

	.wdl-main { padding: 16px; }
	.wdl-stats { grid-template-columns: repeat(2, 1fr); }
	.wdl-grid-2, .wdl-grid-3, .wdl-grid-4 { grid-template-columns: 1fr; }
	.wdl-stream-grid, .wdl-stream-grid.is-focus { grid-template-columns: 1fr; }
	.wdl-page-title { font-size: 28px; }

	/* 0.1.24 — Photo single: surface the download CTA above the
	   licence/EXIF cards on mobile. Desktop layout unchanged because
	   wdl-grid-2 there is two real columns. */
	.vmz-photo-detail .wdl-col { order: 2; }
	.vmz-photo-detail > aside  { order: 1; }

	/* 0.1.24 — Dashboard mobile order: feed → ask → more. The two cols
	   are flattened via display:contents so their three section wrappers
	   become direct grid items of .vmz-dashboard-grid (which is 1fr at
	   this breakpoint), then `order` interleaves them. Desktop keeps the
	   real two-column layout because this rule is gated to ≤900px. */
	.vmz-dashboard-grid .vmz-dashboard-col { display: contents; }
	.vmz-dashboard-feed { order: 1; }
	.vmz-dashboard-ask  { order: 2; }
	.vmz-dashboard-more { order: 3; }
}