/* ============================================================ WDS Prototype Kit — proto.css Shared design foundation for every WDS interactive prototype. The single source of truth for prototype look-and-feel: WDS colour tokens (surface scale, text, phase, booking, functional states), the hub chrome (nav, sub-nav pills, toolbar, filter bar + chips, table header, rows, footer/pager, bulk-select, badges, popovers). Dark-only. Pair with Poppins + Inter + Material Symbols (linked in each prototype's ). Import with: Do not fork per prototype — edit here so every prototype stays in step. ============================================================ */ /* ===================================================================== WDS COLOUR TOKENS — mirrors the canonical registry (Notion: Colour Tokens — Reference). Engineering source of truth: wds-theme-colors (Bruno). Registry locked 31 May 2026. Layers: 1) CANONICAL — raw registry swatches, named exactly as the registry tokens. 2) BINDING — .theme--dark maps canonical → semantic slots (dark-only). 3) PRODUCT — sampled --prod-* chrome ramp. NOT in the registry; a flagged divergence (the live Hub renders chrome on a blue-violet ramp, not registry Zinc). Kept distinct so reconciliation stays visible. BRAND ROLE SPLIT (locked): Primary/Sky is STRUCTURAL only; Rose is INTERACTIVE. If it is clickable, it is Rose. Every active/selected/focus accent below = Rose. ===================================================================== */ :root{ /* ---- 1 · CANONICAL registry swatches ---- */ /* Brand (mode-agnostic) */ --base-colours-primary:#0ea5e9; /* base_colours_primary · Sky 500 · structural */ --base-colours-accent:#fe2767; /* base_colours_accent · Rose · interactive */ /* Surface Scale Light */ --surface-scale-light-white:#ffffff; --surface-scale-light-ssl1:#fafafa; --surface-scale-light-ssl2:#f4f4f5; --surface-scale-light-ssl3:#e4e4e7; --surface-scale-light-ssl4:#d4d4d8; /* Surface Scale Dark */ --surface-scale-dark-black:#000000; --surface-scale-dark-ssd1:#18181b; --surface-scale-dark-ssd2:#27272a; --surface-scale-dark-ssd3:#3f3f46; --surface-scale-dark-ssd4:#52525b; /* Text — mode-specific link role (LM darkened for AA on white) */ --text-light-text-1-lm:#000000; --text-light-text-2-lm:#71717a; --text-light-link-lm:#c4123f; --text-dark-text-1-dm:#ffffff; --text-dark-text-2-dm:#a1a1aa; --text-dark-link-dm:#fe2767; /* Status — live is both the Live phase and the broadcast-live indicator */ --live:#ff0000; /* ---- Event Phase (10) — canonical hues + paired on-fill text (registry v1.0, synced 1 Jun 2026) ---- Tokens are nominal phase_{name} throughout (registry standard); `live` retained as shorthand. */ --phase-ideation:#b5d36a; --phase-setup:#5fb55a; --phase-launch:#1f9d6b; --phase-promotion:#1d6e63; --phase-finalising:#ffa033; --phase-prelive:#cf3a14; --phase-live:#ff0000; --phase-replay:#0284c7; --phase-insight:#7c5cd6; --phase-archive:#273043; /* on-fill text per phase (registry: white not assumed) */ --onfill-ideation:#000; --onfill-setup:#000; --onfill-launch:#000; --onfill-promotion:#fff; --onfill-finalising:#000; --onfill-prelive:#fff; --onfill-live:#000; --onfill-replay:#000; --onfill-insight:#fff; --onfill-archive:#fff; /* ---- Booking Status — four symmetrical groups (registry) ---- */ --booking-provisional:#5c636e; --booking-active:#1f8a7a; --booking-paused:#b85d14; --booking-completed:#000000; --booking-cancelled:#b3322c; --booking-delivered:#000000; /* on-fill text per group (registry AA-normal pairings) */ --onfill-provisional:#fff; --onfill-active:#000; --onfill-paused:#000; --onfill-delivered:#fff; /* ---- Functional states (registry) ---- */ --state-success:#16a34a; --state-warning:#eab308; --state-error:#e23b2e; --state-info:#5470a0; /* ---- 3 · PRODUCT chrome ramp — sampled from the live Events listing. FLAGGED DIVERGENCE: not in the registry. The registry DM base is Zinc SSD1 (#18181b); the live Hub chrome uses this desaturated blue-violet ramp. Kept distinct from the Zinc tokens so the divergence stays visible for reconciliation against wds-theme-colors. Order: deepest → lightest. ---- */ --prod-nav:#161619; /* main navigation */ --prod-header:#1e1d25; /* listing header strip */ --prod-page:#23272f; /* page background */ --prod-band:#2f2e3c; /* second nav / pill strip */ --prod-pill-off:#343341; /* inactive pill fill */ --prod-row:#26252d; /* row background */ --prod-pill-on:#c2c3c5; /* active pill — light grey fill, dark text */ /* ---- WDS-today manual overrides (no semantic system; entered by hand) ---- */ --nav-bar:#121212; /* main navigation bar — full width incl. placeholder area */ --subnav-bar:#2E2E3B; /* sub-nav pill row */ --page-surface:#262630; /* main page surface — backs the title toolbar & filter bar */ --listing-band:#1E1E26; /* listing table header + footer bands */ --row-rest:#2E2E3B; /* event row resting */ --row-hover:#333441; /* event row rollover */ --row-provisional-text:#7a7a86; /* muted title/time for unconfirmed (Enquiry/Pencil) rows */ --row-subrow:#292935; /* expanded Super Event sub-event rows (inset tint) */ --filter-active:#5470a0; /* active filter chip fill — Info slate-blue (setting in effect) */ } /* ---- 2 · BINDING — semantic slots flipped by theme class ---- */ /* DARK. surface-base/elevated bind to the registry Zinc scale (canonical truth); the chrome layer below binds to the flagged --prod-* ramp. Interactive accent = Rose. */ .theme--dark{ --surface-base:var(--surface-scale-dark-ssd1); --surface-elevated:var(--surface-scale-dark-ssd2); --border:var(--surface-scale-dark-ssd3); --border-strong:var(--surface-scale-dark-ssd4); --text-1:var(--text-dark-text-1-dm); --text-2:var(--text-dark-text-2-dm); --link:var(--text-dark-link-dm); /* brand roles: primary=structural Sky · accent/interactive=Rose · rose alias=Rose */ --primary:var(--base-colours-primary); --accent:var(--base-colours-accent); --rose:var(--base-colours-accent); --brand:var(--base-colours-accent); --bg:var(--surface-base); --page:var(--surface-elevated); --txt:var(--text-1); --mut:var(--text-2); --dim:#71717a; --line:var(--border); --line2:rgba(255,255,255,.14); /* console chrome — bound to the flagged PRODUCT ramp (blue-violet, not Zinc) */ --nav:var(--prod-nav); --band:var(--prod-band); --toolbar:var(--prod-page); --thead:var(--prod-header); --pill:var(--prod-pill-on); --pilltxt:var(--prod-nav); --pill-off:var(--prod-pill-off); --skel:var(--prod-row); --add:#ef9f27; --new:#3ec98a; /* phase badge text (DM): canonical tinted-badge text colours, taken verbatim from the rendered registry mirror (Wavecast-Master-Colour-Palette-v1.0). Ideation/Finalising/Live/ Replay/Archive read true; the rest are the registry's lightened tints for AA on dark. */ --t-ideation:#b5d36a; --t-setup:#6fc468; --t-launch:#2bbd82; --t-promotion:#43b8a6; --t-finalising:#ffa033; --t-prelive:#ef6a47; --t-live:#ff5c5c; --t-replay:#38bdf8; --t-insight:#a78fe8; --t-archive:#8b97b0; --ph-tint:13%; --ph-bord:30%; } /* ID-scoped guarantee: the console's own theme class must win over any ancestor theme. */ #console.theme--dark{ --surface-base:var(--surface-scale-dark-ssd1); --surface-elevated:var(--surface-scale-dark-ssd2); --border:var(--surface-scale-dark-ssd3); --border-strong:var(--surface-scale-dark-ssd4); --text-1:var(--text-dark-text-1-dm); --text-2:var(--text-dark-text-2-dm); --link:var(--text-dark-link-dm); --txt:var(--text-1); --mut:var(--text-2); --dim:#71717a; --line:var(--border); --line2:rgba(255,255,255,.14); --nav:var(--prod-nav); --band:var(--prod-band); --toolbar:var(--prod-page); --thead:var(--prod-header); --pill:var(--prod-pill-on); --pilltxt:var(--prod-nav); --pill-off:var(--prod-pill-off); --skel:var(--prod-row); } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--surface-scale-dark-ssd1);color:#fff;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased} .ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;display:inline-block;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;vertical-align:middle;font-size:inherit} .ms.fillicon{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--surface-scale-dark-black);color:var(--txt);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:18px;line-height:1.5;padding:0 0 100px;-webkit-font-smoothing:antialiased} .wrap{max-width:1040px;margin:0 auto;padding:0 40px} .cover{padding:60px 0 8px} .ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;display:inline-block;direction:ltr;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;vertical-align:middle;font-size:inherit} .ms.fillicon{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20} h1{font-family:'Poppins',sans-serif;font-size:54px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--text-1)} .eyebrow{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);margin-bottom:14px} .sub{color:var(--text-2);font-size:21px;font-weight:400;line-height:1.45;margin-top:14px;max-width:800px} .meta{margin-top:18px;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--text-2)} .stdhead{font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:48px 0 12px} .note{color:var(--text-2);font-size:16px;line-height:1.55;margin:6px 2px 18px;max-width:840px} .note b{color:var(--text-1);font-weight:600} .hint{font-size:13px;color:var(--dim);margin:10px 2px 0;display:flex;align-items:center;gap:7px} .hint .ms{font-size:16px} /* prototype-viewer surface switch — page furniture, deliberately not styled like product chrome */ .surfswitch{display:flex;align-items:center;gap:12px;margin:18px 2px 0;flex-wrap:wrap} .surfswitch .ssl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} .ssseg{display:inline-flex;background:#11131a;border:1px solid var(--border);border-radius:9px;padding:3px} .ssseg button{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);background:transparent;border:0;border-radius:7px;padding:7px 14px;cursor:pointer} .ssseg button .ms{font-size:15px} .ssseg button.on{background:var(--surface-elevated);color:#fff} .ssnote{font-size:12px;color:var(--dim);line-height:1.5} /* ============ CONSOLE CHROME ============ */ .pc{background:var(--page-surface,var(--bg));border:1px solid var(--line);border-radius:0;overflow:visible;width:1356px;max-width:calc(100vw - 80px);margin:24px auto 0;margin-left:50%;transform:translateX(-50%);position:relative} .nav{background:var(--nav-bar,#121212);display:flex;align-items:stretch;padding:0;overflow-x:auto} .nav .t{flex:1 1 0;text-align:center;justify-content:center;padding:18px 12px;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--mut);text-transform:uppercase;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;border-left:1px solid rgba(255,255,255,.06)} .nav .t:first-child{border-left:0} .nav .t.on{color:#fff;border-bottom-color:var(--primary);border-bottom-width:3px} .nav .t.ph{opacity:.35;background:transparent} .nav .t.ph::after{content:"";display:inline-block;width:34px;height:9px;border-radius:5px;background:var(--skel)} .subnav{background:var(--subnav-bar,#2E2E3B);display:flex;align-items:center;gap:14px;padding:13px 16px;flex-wrap:wrap} .pill{background:var(--pill-off,transparent);border:1px solid var(--line2);color:var(--mut);font-size:11px;font-weight:600;letter-spacing:.03em;padding:6px 14px;border-radius:20px;text-transform:uppercase;min-width:104px;text-align:center;cursor:pointer} .pill.on{background:var(--pill);color:var(--pilltxt);border-color:var(--pill)} .toolbar{background:transparent;display:flex;align-items:center;gap:9px;padding:14px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line)} .title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;margin-right:auto} .title .ms{color:var(--mut);font-size:18px} .ctl{display:flex;align-items:center;gap:7px;background:var(--nav);border:1px solid var(--line2);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--dim);white-space:nowrap;cursor:pointer} .ctl .ms{font-size:14px;color:var(--mut)} .ctl.search{min-width:150px} .ctl.icon{padding:7px 9px} .ctl.icon .ms{color:var(--mut)} .ctl:hover{border-color:var(--border-strong)} .add{width:32px;height:32px;border-radius:50%;background:#eef0f4;color:#1c1f29;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;cursor:pointer} /* ---------- filter bar ---------- */ .fbar{background:transparent;display:flex;align-items:center;gap:9px;padding:13px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line);position:relative;min-height:62px} .fbar.collapsed{display:none} .ctl.icon.on{border-color:var(--accent);color:var(--accent)} .ctl.icon.on .ms{color:var(--accent)} .fzone{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);align-self:center;user-select:none} .fdiv{width:1px;height:24px;background:var(--line2);margin:0 4px} .chip{display:inline-flex;align-items:center;gap:7px;background:var(--nav);border:1px solid var(--line2);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap;cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit} .chip:hover{border-color:var(--border-strong)} .chip .cn{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:var(--band);color:var(--dim);font-size:10.5px;font-weight:700} .chip.preset{background:var(--surface-elevated);border-color:var(--border-strong);color:var(--txt)} .chip.preset .lead{color:var(--accent)} .chip.preset.on{background:var(--filter-active,#000);border-color:var(--filter-active,#000);color:#fff} .chip.preset.on .cn{background:rgba(255,255,255,.24);color:#fff} .chip.preset.on .lead{color:#fff} .chip.preset.on .val{color:#fff} .chip.preset.off{opacity:1} .chip.preset.off .cn{display:none} .chip .lead{font-size:15px;color:var(--accent);margin-right:-1px} .chip .val{color:var(--txt);font-weight:600} .chip .rm{font-size:14px;color:var(--mut);border-radius:50%;padding:1px;margin-left:1px} .chip .rm:hover{background:var(--line2);color:var(--txt)} .chip.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(254,39,103,.30)} .chip.addf{border-style:dashed;border-color:var(--border-strong);color:var(--mut);background:transparent;font-weight:600} .chip.addf:hover{border-color:var(--rose);color:var(--txt)} .chip.addf .addp{font-size:16px;color:var(--rose);font-weight:700} .chip.clearf{margin-left:auto;border-color:transparent;background:transparent;color:var(--mut)} .chip.clearf .ms{font-size:14px} .chip.clearf:hover{color:var(--accent);border-color:var(--accent);background:transparent} .chip.addf .ms{font-size:15px} .chip.dep{border-color:var(--line2)} .chip.dep .lead{color:var(--accent)} /* Added filter chips are active by presence — black fill, white content (consistent with active presets) */ .chip:not(.preset):not(.addf):not(.clearf){background:var(--filter-active,#000);border-color:var(--filter-active,#000);color:#fff} .chip:not(.preset):not(.addf):not(.clearf) .lead{color:#fff} .chip:not(.preset):not(.addf):not(.clearf) .val{color:#fff} .chip:not(.preset):not(.addf):not(.clearf) .cn{background:rgba(255,255,255,.24);color:#fff} .chip:not(.preset):not(.addf):not(.clearf) .rm{color:rgba(255,255,255,.7)} .chip:not(.preset):not(.addf):not(.clearf) .rm:hover{background:rgba(255,255,255,.18);color:#fff} /* popovers */ .pop{position:absolute;top:calc(100% - 4px);z-index:60;background:var(--toolbar);border:1px solid var(--border-strong);border-radius:11px;box-shadow:0 14px 40px rgba(0,0,0,.55);padding:7px;min-width:208px;max-height:420px;overflow-y:auto;animation:pin .12s ease-out} @keyframes pin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} .ph{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mut);padding:5px 9px 8px;font-weight:600;position:sticky;top:0;background:var(--toolbar)} .ph .op{margin-left:auto;color:var(--txt);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:6px;padding:3px 8px} .ph .dots{margin-left:auto;color:var(--dim);cursor:pointer} .psearch{width:100%;background:var(--nav);border:1px solid var(--accent);border-radius:7px;padding:8px 10px;color:var(--txt);font-size:13px;font-family:inherit;outline:none;margin-bottom:6px} .psearch::placeholder{color:var(--dim)} .grp{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:8px 9px 4px} .opt{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:7px;font-size:13px;color:var(--txt);cursor:pointer} .opt:hover{background:rgba(255,255,255,.05)} .opt .ct{margin-left:auto;color:var(--mut);font-size:11px;font-weight:600;background:var(--surface-base);border:1px solid var(--line2);border-radius:6px;padding:2px 8px;min-width:26px;text-align:center;font-variant-numeric:tabular-nums} .opt .ic{font-size:16px;color:var(--mut);width:18px;min-width:18px;flex:0 0 18px;text-align:center;overflow:hidden} .opt .ph-step{font-size:10px;color:var(--dim);font-weight:700;width:18px;text-align:center;flex:0 0 18px} .opt.disabled{opacity:.35;cursor:not-allowed} .radio{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border-strong);flex:0 0 auto;position:relative} .radio.on{border-color:var(--accent)} .radio.on::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent)} .cb{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border-strong);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center} .cb.on{background:var(--accent);border-color:var(--accent)} .cb.on .ms{font-size:11px;color:#fff} .dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px} .av{width:20px;height:20px;border-radius:50%;flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff} .pfoot{border-top:1px solid var(--line);margin-top:6px;padding:7px 9px 3px;font-size:11px;color:var(--dim);line-height:1.5} /* microtabs — WDS text-link tab pattern. Active = plain text + underline; non-active = accent link. */ .mtabs{display:flex;align-items:center;gap:18px;padding:4px 9px 10px;border-bottom:1px solid var(--line);margin-bottom:6px} .mtab{font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:0;padding:2px 0 6px;cursor:pointer;font-family:inherit;position:relative} .mtab.on{color:var(--txt);cursor:default} .mtab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px} .depnote{font-size:11px;color:var(--mut);padding:2px 9px 6px;display:flex;align-items:center;gap:5px} .depnote .ms{font-size:13px} /* date editor */ .dtabs{display:flex;gap:6px;padding:2px 4px 8px} .dtab{flex:1;text-align:center;padding:7px;border-radius:7px;font-size:12px;font-weight:600;color:var(--mut);background:var(--nav);border:1px solid var(--line2);cursor:pointer} .dtab.on{background:var(--accent);border-color:var(--accent);color:#fff} .dseg{display:flex;gap:7px;padding:2px 4px 10px} .dseg .s{flex:1;background:var(--nav);border:1px solid var(--line2);border-radius:7px;padding:8px 10px;font-size:13px;color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:inherit} .dseg .s .ms{font-size:14px;color:var(--mut)} .cal{padding:0 4px 2px} .calh{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 8px} .calh .m{font-weight:600;font-size:13px} .caln{color:var(--mut);cursor:pointer;font-size:16px;padding:2px 4px;border-radius:5px} .calg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dow{text-align:center;font-size:10.5px;color:var(--dim);padding:4px 0;font-weight:600} .cd{text-align:center;font-size:12px;color:var(--txt);padding:7px 0;border-radius:7px;cursor:pointer} .cd:hover{background:rgba(255,255,255,.06)} .cd.out{color:var(--dim);opacity:.5} .cd.rng{background:rgba(254,39,103,.16);border-radius:0} .cd.rs{background:var(--accent);color:#fff;font-weight:700;border-radius:7px 0 0 7px} .cd.re{background:var(--accent);color:#fff;font-weight:700;border-radius:0 7px 7px 0} .cd.tod{outline:2px solid var(--rose);outline-offset:-2px;border-radius:50%;font-weight:700} /* table header + rows */ .thead{background:var(--listing-band,#1E1E26);display:flex;align-items:center;gap:11px;padding:11px 16px;flex-wrap:wrap} .count{background:var(--nav);border:1px solid var(--line2);border-radius:6px;font-size:11.5px;font-weight:600;color:var(--mut);padding:3px 8px} .clabel{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--dim);text-transform:uppercase} .order{display:flex;align-items:center;gap:7px;background:var(--nav);border:1px solid var(--line2);border-radius:8px;padding:6px 11px;font-size:11.5px;color:var(--dim);white-space:nowrap;margin-left:auto} .order .ms{font-size:13px;color:var(--mut)} .views{display:flex;gap:4px} .vbtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line2);background:var(--nav);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:13px} .vbtn.on{background:#11131a;color:#fff;border-color:#11131a} .vsep{width:1px;height:20px;background:var(--line2);margin:0 2px} .dens{display:flex;gap:4px} .rows{display:flex;flex-direction:column} /* ---- Proposed row: 3-line stack, generous height ---- */ .row{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line);font-size:13px;color:var(--txt);position:relative;transition:background .12s;background:var(--row-rest,var(--surface-elevated))} .row:hover{background:var(--row-hover,#333441)} .row:hover .media .art{transform:scale(1.06)} .row .media .art{transition:transform .25s ease} .row .accent{width:3px;background:transparent;flex:0 0 3px} /* non-confirmed bookings carry a coloured accent rail — make it thicker so it reads as a flag */ .row.flagged .accent{width:5px;flex:0 0 5px} .row .pad{display:flex;align-items:center;gap:16px;padding:20px 18px 20px 15px;flex:1;min-width:0} .row .media{width:112px;height:63px;border-radius:6px;flex:0 0 112px;position:relative;overflow:hidden;background:#0d1830} .row .media .art{position:absolute;inset:0} .row .media .art::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 12%,rgba(255,255,255,.16),transparent 55%);mix-blend-mode:screen} .row .media .ovl{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff} .row .media .ovl.single{background:rgba(255,255,255,.22);color:#fff} .row .media .ovl.m{background:rgba(255,255,255,.22);color:#fff} .row .media .ovl.s{background:rgba(255,255,255,.22);color:#fff} .row .media .ovl.count{background:#e8e8ee;color:#1c1f29;font-size:12px} /* Super Event expand control */ .row .ttl-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row .exptog{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto;width:18px;transition:transform .15s ease} .row .exptog .ms{font-size:16px} .row .exptog.open{transform:rotate(90deg)} .row.superrow:hover .exptog{color:var(--accent)} /* expanded sub-event rows: inset + subtle tint to show nesting */ .row.subrow{background:var(--row-subrow,#292935)} .row.subrow:hover{background:var(--row-hover)} .row .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .row .ttl{display:flex;align-items:center;gap:5px;font-weight:600;font-size:14.5px;color:var(--txt);line-height:1.2;min-width:0} .row .sec{font-size:12.5px;font-weight:600;color:var(--mut);line-height:1.2} .row .sec.upcoming{color:var(--primary)} .row .sec.past{color:var(--mut)} /* Provisional (Enquiry/Pencil): mute title + time to reinforce the accent rail's "not yet confirmed" signal. Overrides the upcoming-Primary date cue. */ .row.provisional .ttl{color:var(--row-provisional-text,#7a7a86)} .row.provisional .sec, .row.provisional .sec.upcoming{color:var(--row-provisional-text,#7a7a86)} .row .supp{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2;margin-top:11px} .row .supp .sdiv{color:#52525b;opacity:.7} .row .supp .si{display:inline-flex;align-items:center;gap:4px} .row .supp .si .ms{font-size:14px;color:var(--mut)} .row .rcluster{display:flex;align-items:center;gap:13px;flex:0 0 auto;margin-left:auto;padding-left:18px} .row .rgrp{display:flex;align-items:center;gap:10px;flex:0 0 auto} .row .rsep{width:1px;height:26px;background:var(--line2);flex:0 0 1px} .row .rteam{display:flex;flex:0 0 auto} .row .rav{position:relative;width:36px;height:36px;border-radius:50%;flex:0 0 36px;margin-left:-5px;border:2px solid var(--row-rest,var(--surface-elevated));overflow:visible;background:var(--band)} .row:hover .rav{border-color:var(--row-hover,#333441)} .row .rav:first-child{margin-left:0} .row .rav-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block} .row .rav-ini{position:absolute;right:-3px;bottom:-3px;min-width:17px;height:16px;padding:0 3px;border-radius:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.02em;color:#fff;background:#000;border:1.5px solid var(--page);line-height:1} .row .rav-more{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--mut);background:var(--band)} .row .svc{position:relative;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:0 0 28px;overflow:visible;cursor:pointer;transition:background .12s} .row .svc .ms{font-size:18px} .row .svc.managed{color:var(--rose)} .row .svc.managed:hover{background:color-mix(in srgb,var(--rose) 16%,transparent)} .row .svc .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#000;color:#fff;font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .1s;z-index:30} .row .svc:hover .tip{opacity:1} /* Badge model (Brand Pack standard): --ph-c = canonical lifecycle hue → drives the DOT and the tint/border (mode-agnostic). --ph-t = label TEXT hue → contrast-tuned per phase, and re-tuned per surface in the light block. Failure modes this solves: deep Post blues unreadable as text on dark; fire/bright-green phases unreadable as text on light. Dot stays canonical on both surfaces. */ .row .phase{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px 5px 9px;border-radius:6px;white-space:nowrap;flex:0 0 auto;min-width:78px;justify-content:flex-start;color:var(--ph-t,var(--ph-c));background:color-mix(in srgb,var(--ph-c) var(--ph-tint),transparent);border:1px solid color-mix(in srgb,var(--ph-c) var(--ph-bord),transparent)} .row .phase .pdot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;background:var(--ph-c)} /* Each phase binds its canonical dot/tint hue (--ph-c) + the theme-resolved text hue (--ph-t). The per-surface text tuning lives once in the .theme--dark binding, not here. */ .row .phase.ph-ideation {--ph-c:var(--phase-ideation); --ph-t:var(--t-ideation)} .row .phase.ph-setup {--ph-c:var(--phase-setup); --ph-t:var(--t-setup)} .row .phase.ph-launch {--ph-c:var(--phase-launch); --ph-t:var(--t-launch)} .row .phase.ph-promotion{--ph-c:var(--phase-promotion); --ph-t:var(--t-promotion)} .row .phase.ph-finalising{--ph-c:var(--phase-finalising);--ph-t:var(--t-finalising)} .row .phase.ph-prelive {--ph-c:var(--phase-prelive); --ph-t:var(--t-prelive)} .row .phase.ph-live {--ph-c:var(--phase-live); --ph-t:var(--t-live)} .row .phase.ph-replay {--ph-c:var(--phase-replay); --ph-t:var(--t-replay)} .row .phase.ph-insight {--ph-c:var(--phase-insight); --ph-t:var(--t-insight)} .row .phase.ph-archive {--ph-c:var(--phase-archive); --ph-t:var(--t-archive)} .row .more{color:var(--mut);flex:0 0 auto;cursor:pointer;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s} .row .more .ms{font-size:18px} .row .more:hover{color:var(--txt);background:var(--line2)} /* compact: hide line 3 + team avatars */ .rows.compact .row .pad{padding:9px 18px 9px 15px} .rows.compact .row .media{width:54px;height:30px;flex:0 0 54px} .rows.compact .row .supp{display:none} .rows.compact .row .rteam{display:none} .rows.compact .row .rsep{display:none} .rows.compact .row .body{gap:2px} /* per-row compact (Super Event sub-rows) — tighter verticals + no supporting text, but thumbnail width and left padding match the standard row so titles/thumbnails line up in one column with the parent listing. */ .row.compact .pad{padding:9px 18px 9px 47px} .row.compact .media{width:80px;height:45px;flex:0 0 80px} .row.compact .supp{display:none} .row.compact .rteam{display:none} .row.compact .rsep{display:none} .row.compact .body{gap:2px} /* children: a subdirectory arrow marks the branch from the parent, and occupies the same title-leading slot as the parent's expand arrow so titles align */ .row .exptog.childmark{color:var(--dim)} /* align the child's date under its title (clear the marker's footprint: 18px + 5px gap) */ .row.subrow .sec{margin-left:23px} .empty{padding:44px 16px;text-align:center;color:var(--dim);font-size:14px} .tfoot{background:var(--listing-band,#1E1E26);display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim)} .tfoot .perpage{display:flex;align-items:center;gap:8px;background:var(--nav);border:1px solid var(--line2);border-radius:8px;padding:5px 11px;color:var(--mut)} .tfoot .disp{color:var(--mut)} .tfoot .pager{display:flex;align-items:center;gap:6px;margin-left:auto} .tfoot .pg{width:26px;height:26px;border-radius:6px;border:1px solid var(--line2);background:var(--nav);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600} .tfoot .pg.on{border-color:var(--brand);color:#fff} /* ===== BOOKINGS-ONLY surface vars (registry tokens live in the canonical head) ===== */ .theme--dark{ --bk-tint:16%; --unread:var(--base-colours-primary); } /* lanestrip lives in the bookings view; reuse events chrome otherwise */ .lanestrip{display:flex;align-items:flex-end;gap:5px;padding:28px 16px 0;background:var(--toolbar);border-bottom:1px solid var(--line)} /* ===== BOOKINGS-ONLY SELECTORS ===== */ .lane{display:inline-flex;align-items:center;gap:8px;background:var(--prod-header);border:1px solid var(--line);border-bottom:0;color:var(--mut);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:11px 16px;border-radius:8px 8px 0 0;cursor:pointer;font-family:inherit;white-space:nowrap;position:relative;top:1px;transition:background .12s,color .12s} .lane:hover{color:var(--txt)} .lane.on{background:var(--surface-elevated);color:var(--txt);border-color:var(--line)} .lane .lc{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:rgba(255,255,255,.10);color:var(--mut);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums} .lane.on .lc{background:rgba(255,255,255,.16);color:var(--txt)} .lane.alert .lc{background:var(--unread);color:#04141d} .lane .ms{font-size:15px} .bulk{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut)} .bulkbtn{display:inline-flex;align-items:center;gap:5px;background:var(--nav);border:1px solid var(--line2);border-radius:7px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--txt);cursor:pointer} .bulkbtn .ms{font-size:14px} .bulkbtn:hover{border-color:var(--border-strong)} .selnote{font-size:11.5px;color:var(--accent);font-weight:600} .brow{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line);position:relative;transition:background .12s;background:var(--row-rest,var(--surface-elevated));cursor:pointer} .brow:hover{background:var(--row-hover,#333441)} .brow.unread{background:linear-gradient(rgba(14,165,233,.05),rgba(14,165,233,.05)),var(--row-rest,var(--surface-elevated))} .brow.unread:hover{background:linear-gradient(rgba(14,165,233,.05),rgba(14,165,233,.05)),var(--row-hover,#333441)} .brow .rail{width:4px;flex:0 0 4px;background:transparent} .brow.flagged .rail{width:5px;flex:0 0 5px} .brow .pad{display:flex;align-items:center;gap:14px;padding:15px 18px 15px 14px;flex:1;min-width:0} .brow .lead{display:flex;align-items:center;gap:11px;flex:0 0 auto} .udot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:transparent} .brow.unread .udot{background:var(--unread)} .rcb{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border-strong);flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .rcb.on{background:var(--accent);border-color:var(--accent)} .rcb.on .ms{font-size:12px;color:#fff} .brow .media{width:96px;height:56px;border-radius:6px;flex:0 0 96px;position:relative;overflow:hidden;background:#0d1830} .brow .media .art{position:absolute;inset:0;transition:transform .25s ease} .brow:hover .media .art{transform:scale(1.06)} .brow .media .art::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 12%,rgba(255,255,255,.16),transparent 55%);mix-blend-mode:screen} .brow .media .ovl{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff} .brow .media .ovl.single{background:rgba(255,255,255,.22);color:#fff} .brow .media .ovl.m{background:rgba(255,255,255,.22);color:#fff} .brow .media .ovl.s{background:rgba(255,255,255,.22);color:#fff} .brow .media .ovl.count{background:#e8e8ee;color:#1c1f29;font-size:12px} .brow .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px} .brow .ttl{display:flex;align-items:center;gap:5px;font-weight:600;font-size:14.5px;color:var(--txt);line-height:1.2;min-width:0} .brow .ttl .ttl-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brow.unread .ttl{font-weight:700} /* Super Event expand control + child subdirectory marker (mirrors events listing) */ .brow .exptog{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 auto;width:18px;transition:transform .15s ease} .brow .exptog .ms{font-size:16px} .brow .exptog.open{transform:rotate(90deg)} .brow .exptog.childmark{color:var(--dim)} /* expanded sub-event rows: inset tint + compact media; align date under title */ .brow.subrow{background:var(--row-subrow,#292935)} .brow.subrow:hover{background:var(--row-hover,#333441)} .brow.subrow .pad{padding:11px 18px 11px 38px} .brow.subrow .media{width:72px;height:42px;flex:0 0 72px} .brow.subrow .stamps{display:none} .brow.subrow .sec{margin-left:23px} .brow .sec{font-size:12.5px;font-weight:600;color:var(--mut);line-height:1.2} .brow .supp{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2} .brow .supp .sdiv{color:#52525b;opacity:.7} .brow .rcluster{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto;padding-left:16px} .brow .stamps{display:flex;flex-direction:column;gap:3px;text-align:right;flex:0 0 auto} .brow .stamp{font-size:11px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px;justify-content:flex-end} .brow .stamp .k{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);opacity:.8} .brow .stamp .v{color:var(--mut)} .brow.unread .stamp.submitted .v{color:var(--txt);font-weight:600} .brow .submitter{display:flex;align-items:center;gap:9px;flex:0 0 auto;width:150px} .brow .submitter .savatar{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em} .brow .submitter .sname{display:flex;flex-direction:column;gap:1px;min-width:0} .brow .submitter .sn{font-size:12.5px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brow .submitter .sr{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)} .brow .more{color:var(--mut);flex:0 0 auto;cursor:pointer;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s} .brow .more .ms{font-size:18px} .brow .more:hover{color:var(--txt);background:var(--line2)} .bk{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:6px;white-space:nowrap;flex:0 0 auto;min-width:104px;justify-content:center} .bk .bd{width:8px;height:8px;border-radius:50%;flex:0 0 8px} .bk.fill{background:var(--bk-c);color:var(--bk-on,#fff);border:1px solid var(--bk-c)} .bk.fill .bd{background:var(--bk-on,#fff)} .bk.outline{background:color-mix(in srgb,var(--bk-c) var(--bk-tint),transparent);color:var(--bk-t);border:1px solid var(--bk-c)} .bk.outline .bd{background:transparent;box-shadow:inset 0 0 0 1.5px var(--bk-c)} /* Completed · Delivered: black fill / white text, fixed both modes, fixed border so it reads on dark panels (registry). The invoice-handoff ledger mark. */ .bk.completedfill{background:#000;color:#fff;border:1px solid #52525b} .bk.completedfill .bd{background:#fff} .qacts{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .12s;flex:0 0 auto} .brow:hover .qacts{opacity:1} .qbtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line2);background:var(--nav);color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer} .qbtn:hover{border-color:var(--border-strong);color:var(--txt)} .qbtn.ok:hover{color:var(--state-success);border-color:var(--state-success)} .qbtn.no:hover{color:var(--booking-cancelled);border-color:var(--booking-cancelled)} .qbtn .ms{font-size:16px} /* ===================== STANDARD WAVECAST REFERENCE-PAGE SHELL ===================== Matched to the canonical reference standard (Master Colour Palette / Event Phases): a single .wrap content container (1376 / no outer gutter), a bordered gradient cover panel as a direct child (gold tag · h1 · sub · meta), then the content, then a .foot rule + summary. No flex stage, no centring frame — straight content flow. Tokens reuse the registry vars already declared in :root. */ .gold-tokens{ --gold:#d8b15a; } .wrap{max-width:1376px;margin:0 auto;padding:56px 0 96px} @media(max-width:640px){.wrap{padding:32px 18px 64px}} .cover{border:1px solid var(--surface-scale-dark-ssd3);border-radius:16px;padding:40px 40px 36px;background:linear-gradient(160deg,#1f1f23,#18181b);position:relative;overflow:hidden;margin-bottom:48px} @media(max-width:640px){.cover{padding:28px 22px}} .cover::after{content:"";position:absolute;top:0;right:0;width:240px;height:100%;background:linear-gradient(90deg,transparent,rgba(254,39,103,.06));pointer-events:none} .goldtag{display:inline-flex;align-items:center;gap:7px;font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(216,177,90,.4);border-radius:100px;padding:5px 13px;margin-bottom:20px} .goldtag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(216,177,90,.8)} .cover h1{font-family:'Poppins',sans-serif;font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:#fff;margin-bottom:14px} .cover .sub{font-size:16px;color:var(--text-dark-text-2-dm);max-width:680px;line-height:1.55} .cover .sub b{color:#fff;font-weight:600} .cover .meta{margin-top:22px;font-size:12.5px;color:var(--text-dark-text-2-dm);font-family:'Inter',sans-serif;display:flex;gap:18px;flex-wrap:wrap} .cover .meta b{color:#fff;font-weight:600} /* footer — top rule + summary paragraphs, matched to the standard .foot */ .foot{margin-top:64px;padding-top:24px;border-top:1px solid var(--surface-scale-dark-ssd3);font-family:'Inter',sans-serif;font-size:12.5px;color:var(--text-dark-text-2-dm);line-height:1.7} .foot b{color:#fff;font-weight:600}