@import url("/static/css/desktop-glass.css?v=20260929-glass2");

/* Page colour: the owner's own page and text colours on every desktop page.
 *
 * app-colors.js reads the `pageColors` customization ({page, text}) and, only
 * when one is set, puts data-page-color on <html> and two palettes on its
 * style: --pcl-* (light) and --pcd-* (dark: a deep version of the page).
 * This file picks the palette for the current theme (--pc-*) and maps each
 * page's own tokens to it. Without data-page-color nothing here matches, so
 * an app without the setting is exactly its white or black self.
 *
 * Selectors carry :not(#pc) so they outrank each page's
 * :root[data-theme] .tab-x token blocks, and name both :root (a page on its
 * own, whose sheets and menus sit on <body>) and .tab-x (a Split View pane).
 * Photos, video, the TV picture and map tiles keep their own colours: only
 * the frames around them are mapped.
 */

:root[data-page-color] {
  --pc-page: var(--pcl-page); --pc-card: var(--pcl-card); --pc-soft: var(--pcl-soft);
  --pc-hover: var(--pcl-hover); --pc-line: var(--pcl-line); --pc-edge: var(--pcl-edge);
  --pc-strong: var(--pcl-strong); --pc-ink: var(--pcl-ink); --pc-dim: var(--pcl-dim);
  --pc-faint: var(--pcl-faint); --pc-field: var(--pcl-field); --pc-field-ink: var(--pcl-field-ink);
  --pc-field-dim: var(--pcl-field-dim); --pc-field-edge: var(--pcl-field-edge); --pc-veil: var(--pcl-veil);
  --pc-btn: var(--pcl-btn); --pc-on-btn: var(--pcl-on-btn); --pc-hl: var(--pcl-hl);
  --pc-on-hl: var(--pcl-on-hl); --pc-hl-soft: var(--pcl-hl-soft);
  --pc-good: var(--pcl-good); --pc-bad: var(--pcl-bad); --pc-warn: var(--pcl-warn);
}
:root[data-page-color][data-theme="dark"] {
  --pc-page: var(--pcd-page); --pc-card: var(--pcd-card); --pc-soft: var(--pcd-soft);
  --pc-hover: var(--pcd-hover); --pc-line: var(--pcd-line); --pc-edge: var(--pcd-edge);
  --pc-strong: var(--pcd-strong); --pc-ink: var(--pcd-ink); --pc-dim: var(--pcd-dim);
  --pc-faint: var(--pcd-faint); --pc-field: var(--pcd-field); --pc-field-ink: var(--pcd-field-ink);
  --pc-field-dim: var(--pcd-field-dim); --pc-field-edge: var(--pcd-field-edge); --pc-veil: var(--pcd-veil);
  --pc-btn: var(--pcd-btn); --pc-on-btn: var(--pcd-on-btn); --pc-hl: var(--pcd-hl);
  --pc-on-hl: var(--pcd-on-hl); --pc-hl-soft: var(--pcd-hl-soft);
  --pc-good: var(--pcd-good); --pc-bad: var(--pcd-bad); --pc-warn: var(--pcd-warn);
}

/* Split View's own frame. */
:root[data-page-color]:not(#pc) {
  --ws-bg: var(--pc-page); --ws-ink: var(--pc-ink); --ws-dim: var(--pc-dim);
  --ws-line: var(--pc-line); --ws-soft: var(--pc-soft); --ws-grip: var(--pc-edge);
  /* The sponsor pill in the bars. */
  --hp-bg: var(--pc-card); --hp-edge: var(--pc-edge); --hp-hover: var(--pc-ink); --hp-ink: var(--pc-ink);
  --hp-cta-bg: var(--pc-ink); --hp-cta-ink: var(--pc-card); --hp-mark: var(--pc-ink);
}
:root[data-page-color]:not(#pc) .hp-pill {
  --hp-bg: var(--pc-card); --hp-edge: var(--pc-edge); --hp-hover: var(--pc-ink); --hp-ink: var(--pc-ink);
  --hp-cta-bg: var(--pc-ink); --hp-cta-ink: var(--pc-card); --hp-mark: var(--pc-ink);
}

/* ------------------------------------------------------------------ Media */
:root[data-page-color][data-pc-home="tv"]:not(#pc), :root[data-page-color]:not(#pc) .tab-tv {
  --paper: var(--pc-page); --paper-2: var(--pc-soft); --ink: var(--pc-ink); --ink-2: var(--pc-ink);
  --line: var(--pc-ink); --dim: var(--pc-dim); --white: var(--pc-card);
  --room: var(--pc-page); --set: var(--pc-card); --set-edge: var(--pc-edge); --cell: var(--pc-card); --cell-line: var(--pc-line);
  --on-room: var(--pc-ink); --room-dim: var(--pc-dim); --room-text-2: var(--pc-ink);
  --track: var(--pc-line); --faint: var(--pc-soft); --set-shadow: rgba(0, 0, 0, 0.08);
  --key-bg: var(--pc-card); --key-edge: var(--pc-edge); --drop-edge: var(--pc-strong);
  --gch-bg: var(--pc-card); --gch-on-bg: var(--pc-ink); --gch-on-fg: var(--pc-card);
  --show-bg: var(--pc-soft); --show-on: var(--pc-hover); --show-time: var(--pc-dim); --show-hover: var(--pc-strong);
  --keys-text: var(--pc-dim); --next-text: var(--pc-dim); --input-bg: var(--pc-field);
  --play-bg: var(--pc-ink); --play-fg: var(--pc-page); --info-box: var(--pc-card);
}

/* -------------------------------------------------------------- Community */
:root[data-page-color][data-pc-home="community"]:not(#pc), :root[data-page-color]:not(#pc) .tab-community {
  --paper: var(--pc-page); --panel: var(--pc-soft); --panel-2: var(--pc-hover); --ink: var(--pc-ink);
  --dim: var(--pc-dim); --line: var(--pc-line); --white: var(--pc-card); --hl-dark: var(--pc-hl);
  --tick-bg: var(--pc-card); --tick-ink: var(--pc-ink);
  --chat: var(--pc-card); --chat-ink: var(--pc-ink); --chat-line: var(--pc-line); --chat-edge: var(--pc-edge);
  --chat-dim: var(--pc-dim); --chat-faint: var(--pc-faint); --chat-sub: var(--pc-soft); --chat-hover: var(--pc-hover);
  --chat-focus: var(--pc-card); --chat-field: var(--pc-field); --chat-hl: var(--pc-hl); --chat-on-hl: var(--pc-on-hl);
  --chat-shadow: inset 0 0 0 1.5px var(--pc-edge);
  --c-ink: var(--pc-ink); --c-page: var(--pc-page); --c-live: var(--pc-good);
}

/* ----------------------------------------------------------------- Market */
:root[data-page-color][data-pc-home="market"]:not(#pc), :root[data-page-color]:not(#pc) .tab-market {
  --ink: var(--pc-ink); --paper: var(--pc-page); --soft: var(--pc-soft); --softer: var(--pc-card);
  --line: var(--pc-line); --rule: var(--pc-line); --dim: var(--pc-dim); --dimmer: var(--pc-faint);
  --white: var(--pc-card); --mid: var(--pc-dim); --hair: var(--pc-line); --menu-hover: var(--pc-dim);
  --veil: var(--pc-veil); --alloc: var(--pc-strong);
}

/* --------------------------------------------------- Booking, Shop, Map */
:root[data-page-color][data-pc-home="booking"]:not(#pc), :root[data-page-color]:not(#pc) .tab-booking,
:root[data-page-color][data-pc-home="shop"]:not(#pc), :root[data-page-color]:not(#pc) .tab-shop,
:root[data-page-color][data-pc-home="map"]:not(#pc), :root[data-page-color]:not(#pc) .tab-map {
  --paper: var(--pc-page); --panel: var(--pc-soft); --edge: var(--pc-edge); --field: var(--pc-line);
  --ink: var(--pc-ink); --dim: var(--pc-dim); --faint: var(--pc-faint); --off: var(--pc-strong);
  --white: var(--pc-card);
}
:root[data-page-color][data-pc-home="shop"]:not(#pc), :root[data-page-color]:not(#pc) .tab-shop {
  /* The black cards (FEATURED, tickets) take the text colour, inverted. */
  --card: var(--pc-ink); --card-ink: var(--pc-page); --card-dim: var(--pc-page); --hl-on-card: var(--pc-page);
}
:root[data-page-color][data-pc-home="map"]:not(#pc), :root[data-page-color]:not(#pc) .tab-map {
  --ground: var(--pc-soft);
}
/* The owner dashboards shared by Booking, Shop and You. */
:root[data-page-color]:not(#pc) .bo, :root[data-page-color]:not(#pc) .bd-drawer {
  --d-edge: var(--pc-edge); --d-line: var(--pc-line); --d-soft: var(--pc-soft); --d-hover: var(--pc-hover);
  --d-ink: var(--pc-ink); --d-dim: var(--pc-dim); --d-faint: var(--pc-faint);
}

/* ---------------------------------------------------------------- Stream
   Dark on its own, so it reads the deep palette (--pcd-*) unless the viewer
   turned it light. */
:root[data-page-color][data-pc-home="stream"]:not(#pc), :root[data-page-color]:not(#pc) .tab-stream {
  --page: var(--pcd-page); --bar: var(--pcd-page); --panel: var(--pcd-card); --edge: var(--pcd-edge);
  --line: var(--pcd-line); --ink: var(--pcd-ink); --dim: var(--pcd-dim); --faint: var(--pcd-faint);
  --card: var(--pcd-card); --pill-bg: var(--pcd-ink); --pill-ink: var(--pcd-page);
  --set: var(--pcd-card); --set-edge: var(--pcd-edge);
}
:root[data-page-color][data-theme="light"][data-pc-home="stream"]:not(.ws-on):not(#pc),
:root[data-page-color][data-theme="light"]:not(.ws-on):not(#pc) .tab-stream {
  --page: var(--pcl-page); --bar: var(--pcl-page); --panel: var(--pcl-card); --edge: var(--pcl-edge);
  --line: var(--pcl-line); --ink: var(--pcl-ink); --dim: var(--pcl-dim); --faint: var(--pcl-dim);
  --card: var(--pcl-card); --pill-bg: var(--pcl-ink); --pill-ink: var(--pcl-page);
  --set: var(--pcl-card); --set-edge: var(--pcl-edge);
}

/* ------------------------------------------------ You, Explore, Campaign */
:root[data-page-color][data-pc-home="you"]:not(#pc), :root[data-page-color]:not(#pc) .tab-you,
:root[data-page-color][data-pc-home="explore"]:not(#pc), :root[data-page-color]:not(#pc) .tab-explore,
:root[data-page-color][data-pc-home="campaign"]:not(#pc), :root[data-page-color]:not(#pc) .tab-campaign {
  --paper: var(--pc-page); --white: var(--pc-card); --soft: var(--pc-soft); --hover: var(--pc-hover);
  --edge: var(--pc-edge); --line: var(--pc-line); --ink: var(--pc-ink); --dim: var(--pc-dim);
  --faint: var(--pc-faint); --off: var(--pc-strong); --shadow: none;
}

/* ------------------------------------------------------------------ Email */
:root[data-page-color][data-pc-home="email"]:not(#pc), :root[data-page-color]:not(#pc) .tab-email {
  --bg: var(--pc-page); --ink: var(--pc-ink); --dim: var(--pc-dim); --faint: var(--pc-faint);
  --off: var(--pc-strong); --line: var(--pc-line); --edge: var(--pc-edge); --hover: var(--pc-hover);
  --act: var(--pc-btn); --on-act: var(--pc-on-btn);
}

/* ------------------------------------------------- Log in / join sheet */
:root[data-page-color]:not(#pc) #desktop-auth {
  --da-bg: var(--pc-page); --da-ink: var(--pc-ink); --da-mute: var(--pc-dim); --da-faint: var(--pc-faint);
  --da-line: var(--pc-line); --da-line-strong: var(--pc-strong);
}
:root[data-page-color]:not(#pc) body.da-page { background: var(--pc-page); }

/* ------------------------------------------------------------ fields
   Typing fields stay near-white with dark text on any page colour, so they
   read as fields. A field drawn as a box around a bare input (search boxes,
   the log-in fields, the market amount) takes the field colours as a whole,
   with its own tokens pointed at them so labels and icons inside read. */
:root[data-page-color]:not(#pc) :is(input:not([type=checkbox], [type=radio], [type=color], [type=range], [type=file], [type=submit], [type=button], [type=reset], [type=hidden]), textarea, select) {
  background-color: var(--pc-field);
  color: var(--pc-field-ink);
}
:root[data-page-color]:not(#pc) :is(input, textarea)::placeholder { color: var(--pc-field-dim); opacity: 1; }
:root[data-page-color]:not(#pc) :is(.mk-amt, .mp-search__box, .ex-search, .yu-search, .bd-search, .st-chat__form input) {
  background: var(--pc-field);
  color: var(--pc-field-ink);
  --ink: var(--pc-field-ink); --dim: var(--pc-field-dim); --dimmer: var(--pc-field-dim); --faint: var(--pc-field-dim);
  --soft: #efeff1; --d-ink: var(--pc-field-ink); --d-dim: var(--pc-field-dim); --d-faint: var(--pc-field-dim);
}
:root[data-page-color]:not(#pc) :is(.mk-amt, .mp-search__box, .ex-search, .yu-search, .bd-search) :is(input, textarea) { background-color: transparent; }
:root[data-page-color]:not(#pc) #desktop-auth .da-field {
  --da-bg: var(--pc-field); --da-ink: var(--pc-field-ink); --da-mute: var(--pc-field-dim); --da-faint: var(--pc-field-dim);
  border-color: var(--pc-field-edge);
  color: var(--pc-field-ink);
}
:root[data-page-color]:not(#pc) #desktop-auth .da-field input { background-color: transparent; }

/* ------------------------------------------------------ Media, in detail */
/* The room's highlight: tv.js swaps a too-pale or too-dark one for black or
   white against the plain room; on a page colour the palette's safe
   highlight already reads on it. */
:root[data-page-color]:not(#pc) .tv-room { --room-hl: var(--pc-hl) !important; --room-on-hl: var(--pc-on-hl) !important; }
/* The remote: a card-coloured column (light) or tinted glass (dark). */
:root[data-page-color]:not(#pc) .tv-remote {
  background: color-mix(in srgb, var(--pc-page) 62%, transparent);
  color: var(--pc-ink);
  --on-room: var(--pc-ink); --key-bg: transparent; --key-edge: color-mix(in srgb, var(--pc-ink) 22%, transparent);
  --dim: var(--pc-dim); --room: color-mix(in srgb, var(--pc-ink) 9%, transparent);
  --play-bg: var(--pc-ink); --play-fg: var(--pc-page); --faint: color-mix(in srgb, var(--pc-ink) 12%, transparent);
}
:root[data-page-color][data-theme="light"]:not(#pc) .tv-remote {
  background: var(--pc-card); box-shadow: inset 1px 0 0 var(--pc-edge);
  --key-bg: var(--pc-card); --key-edge: var(--pc-edge); --room: var(--pc-soft); --play-fg: var(--pc-card); --faint: var(--pc-soft);
}
:root[data-page-color]:not(#pc) .tv-tap__n { border-color: var(--pc-page); background: var(--pc-ink); color: var(--pc-page); }

/* ------------------------------------------------------- Shop, in detail */
:root[data-page-color]:not(#pc) .sh-feature__go { background: var(--pc-page); color: var(--pc-ink); }
:root[data-page-color]:not(#pc) .sh-feature__go:hover { background: var(--pc-card); color: var(--pc-ink); }
:root[data-page-color]:not(#pc) .sh-tile__chip { background: var(--pc-card); color: var(--pc-ink); }

/* ----------------------------------------------------- Stream, in detail */
:root[data-page-color][data-theme="light"]:not(.ws-on):not(#pc) :is(.st-date, .st-rp__thumb) { background: var(--pcl-card); box-shadow: inset 0 0 0 1.5px var(--pcl-edge); }
:root[data-page-color][data-theme="light"]:not(.ws-on):not(#pc) .st-sec__head { border-bottom-color: var(--pcl-ink); }
:root[data-page-color][data-theme="light"]:not(.ws-on):not(#pc) .st-act:not(.is-on) { background: var(--pcl-card); color: var(--pcl-ink); border-color: var(--pcl-ink); }
:root[data-page-color][data-theme="light"]:not(.ws-on):not(#pc) .st-act:not(.is-on):hover { background: var(--pcl-ink); color: var(--pcl-page); }

/* Media: the dark bar (it redefines the page's tokens locally) and the menus. */
:root[data-page-color]:not(#pc) .tv-bar,
:root[data-page-color]:not(#pc) .tv-bar .tv-menu {
  --paper: var(--pc-page); --ink: var(--pc-ink); --line: var(--pc-ink); --white: var(--pc-card);
  color: var(--pc-ink);
}
:root[data-page-color]:not(#pc) .tv-bar { border-bottom-color: var(--pc-line); }
:root[data-page-color]:not(#pc) :is(.tv-menu__app, .tv-menu__who, .tv-menu__theme) { border-color: var(--pc-line); }
:root[data-page-color]:not(#pc) :is(.tv-menu__app small, .tv-menu a small) { color: var(--pc-dim); }
:root[data-page-color]:not(#pc) :is(.tv-menu a[aria-current="page"] small, .tv-menu a[aria-current="page"]::after) { color: var(--pc-card); opacity: 0.7; }
:root[data-page-color]:not(#pc) .tv-overlay { background: color-mix(in srgb, var(--pc-page) 97%, transparent); }
:root[data-page-color]:not(#pc) .tv-dotmenu { background: var(--pc-card); color: var(--pc-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 1px var(--pc-edge); }

/* Community: the dark theme's own literal colours. */
:root[data-page-color]:not(#pc) .tab-community,
:root[data-page-color][data-pc-home="community"]:not(#pc) { --card: var(--pc-card); --card-edge: var(--pc-edge); }
:root[data-page-color][data-theme="dark"][data-pc-home="community"]:not(.ws-on):not(#pc) body,
:root[data-page-color][data-theme="dark"]:not(#pc) .ws-body.tab-community,
:root[data-page-color][data-theme="dark"]:not(#pc) :is(.cm-side, .cm-around, .cm-chat, .cm-chip, .cm-around__room, .cm-sheet, .cm-pop__card, .cm-sheet__cancel, .cm-roomform__preview, .cm-compose__attach, .cm-roomform__opt, .cm-gate, .cm-menu, .cm-hot) { color: var(--pc-ink); }
:root[data-page-color][data-theme="dark"]:not(#pc) :is(.cm-id, .cm-chip--new, .cm-around__new, .cm-pill) { border-color: var(--pc-ink); color: var(--pc-ink); }
:root[data-page-color][data-theme="dark"]:not(#pc) :is(.cm-sheet, .cm-pop__card, .cm-menu, .cm-roomform__preview, .cm-compose__attach, .cm-roomform__opt) { border-color: var(--pc-edge); }
:root[data-page-color][data-theme="dark"]:not(#pc) .cm-sheet__bar { border-color: var(--pc-line); }
:root[data-page-color]:not(#pc) :is(.cm-id__check, .cm-menu-btn, .cm-hint, .cm-pill--ink, .cm-roomform__opt.is-on, .cm-around__new:hover, .cm-chip[aria-current="true"], .cm-around__room.is-on, .cm-around__room.is-on:hover) {
  background: var(--pc-ink); color: var(--pc-page); border-color: var(--pc-ink);
}
:root[data-page-color]:not(#pc) .cm-menu-btn:hover { background: var(--pc-dim); }
:root[data-page-color]:not(#pc) .cm-chip[aria-current="true"] .cm-chip__bars span { background: var(--pc-page); }
:root[data-page-color]:not(#pc) .cm-around__room.is-on .cm-around__when { color: var(--pc-page); }
:root[data-page-color]:not(#pc) .cm-around__when.is-quiet { color: var(--pc-faint); }
:root[data-page-color][data-theme="dark"]:not(#pc) .cm-side__rule { background: var(--pc-ink); }
:root[data-page-color][data-theme="dark"]:not(#pc) :is(.cm-gate__line, .cm-roomform__pdesc, .cm-compose__label) { color: var(--pc-dim); }
:root[data-page-color]:not(#pc) :is(.cm-dropdown__who small, .cm-dropdown__item small, .cm-card__src, .cm-compose__label, .cm-roomform__pdesc, .cm-gate__line) { color: var(--pc-dim); }
:root[data-page-color]:not(#pc) :is(.cm-dropdown__item.is-on small) { color: var(--pc-card); opacity: 0.7; }
:root[data-page-color]:not(#pc) .cm-dropdown__item.is-on::after { background: var(--pc-card); }
:root[data-page-color]:not(#pc) :is(.cm-compose__attach em, .cm-compose__hint) { color: var(--pc-faint); }
:root[data-page-color]:not(#pc) .cm-compose__attach { border-color: var(--pc-edge); }
/* The room's search box and composer are fields: field colours as a whole,
   the bare inputs inside clear. */
:root[data-page-color]:not(#pc) :is(.cm-find, .cm-composer) {
  background: var(--pc-field); color: var(--pc-field-ink);
  --c-ink: var(--pc-field-ink); --c-dim: var(--pc-field-dim); --c-faint: var(--pc-field-dim);
  --c-edge: var(--pc-field-edge); --c-soft: rgba(0, 0, 0, 0.05);
}
:root[data-page-color]:not(#pc) :is(.cm-find, .cm-composer) :is(input, select) { background: transparent; color: var(--pc-field-ink); }
:root[data-page-color]:not(#pc) .cm-tap__n:not(.cm-vbtn .cm-tap__n) { border-color: var(--pc-page); background: var(--pc-ink); color: var(--pc-page); }

/* Market: the dark theme's inverted pieces. */
:root[data-page-color]:not(#pc) :is(.mk-menubtn, .mk-id__check, .mk-hold__glyph, .mk-wrow__icon--hold, .mk-port__close:hover) { background: var(--pc-ink); color: var(--pc-page); }
:root[data-page-color]:not(#pc) :is(.mk-alloc__sol, .mk-mcbar__fill, .mk-chart__cross) { background: var(--pc-ink); }
:root[data-page-color]:not(#pc) :is(.mk-menu__item.is-on, .mk-hint) { color: var(--pc-card); }
:root[data-page-color]:not(#pc) .mk-menu__item.is-on .mk-menu__num { color: var(--pc-card); opacity: 0.6; }
:root[data-page-color]:not(#pc) .mk-walletpill__dot { background: var(--pc-faint); }
:root[data-page-color][data-theme="dark"]:not(#pc) .mk-side.is-on { background: var(--pc-hover); }

/* Booking, Shop, Map: small literal pieces. */
:root[data-page-color]:not(#pc) .bk-modal__head p { color: var(--pc-dim); }
:root[data-page-color]:not(#pc) .sh-tag { background: var(--pc-ink); color: var(--pc-page); }
:root[data-page-color]:not(#pc) :is(.sh-tag--out, .sh-ev__chips span) { background: var(--pc-card); color: var(--pc-ink); }
:root[data-page-color]:not(#pc) :is(.mp-hint, .mp-sel__tag) { background: var(--pc-ink); color: var(--pc-page); }
:root[data-page-color]:not(#pc) .mp-sel__x { background: var(--pc-card); color: var(--pc-ink); }

/* Stream's menu and sheets, on Stream's own (deep) palette. */
:root[data-page-color]:not(#pc) .st-dropdown { background: var(--card); color: var(--ink); border-color: var(--edge); }
:root[data-page-color]:not(#pc) :is(.st-dropdown__who, .st-dropdown__foot) { border-color: var(--edge); }
:root[data-page-color]:not(#pc) :is(.st-dropdown__who small, .st-dropdown__item small) { color: var(--dim); }
:root[data-page-color]:not(#pc) :is(.st-dropdown__item, .st-dropdown__me) { color: var(--ink); }
:root[data-page-color]:not(#pc) :is(.st-dropdown__item:hover, .st-dropdown__me:hover) { background: var(--line); }
:root[data-page-color]:not(#pc) :is(.st-dropdown__item[aria-current="page"], .st-dropdown__signin, .st-solid) { background: var(--ink); color: var(--page); }
:root[data-page-color]:not(#pc) .st-dropdown__item[aria-current="page"] small { color: var(--page); }
:root[data-page-color]:not(#pc) .st-dropdown__rule { background: var(--edge); }
:root[data-page-color]:not(#pc) :is(.st-x, .st-login) { background: var(--card); color: var(--ink); }
:root[data-page-color]:not(#pc) .st-go__link input, :root[data-page-color]:not(#pc) .st-field input { border-color: var(--pc-field-edge); }

/* The sponsor pill's dot, on a dark bar. */
:root[data-page-color]:not(#pc) .hp-pill__dot { background: var(--pc-hl); }

/* Status chips (up/down, paid, live, errors): solid pale chips, so green,
   amber and red read on any page colour. */
:root[data-page-color]:not(#pc) :is(.bd-delta.is-up, .bd-pill.is-confirmed, .bd-pill.is-shipped, .bd-pill.is-live, .cp-note.is-ok, .cp-status.is-live, .em-chip.is-sent, .em-chip.is-completed, .mk-sheet__chg.mk-up) { background: #e7f6ec; color: #15803d; }
:root[data-page-color]:not(#pc) :is(.bd-delta.is-down, .bd-pill.is-refunded, .bd-note.is-bad, .cp-note.is-bad, .cp-banner.is-bad, .em-chip.is-bad, .em-chip.is-no-show, .mk-sheet__chg.mk-down) { background: #fdeaea; color: #b91c1c; }
:root[data-page-color]:not(#pc) :is(.bd-pill.is-pending, .bd-pill.is-open, .cp-status.is-draft, .em-chip.is-warn) { background: #fdf3d7; color: #92400e; }


/* Status colours as text on the page: up/down, open, errors. */
:root[data-page-color]:not(#pc), :root[data-page-color]:not(#pc) :is(.tab-market, .tab-booking, .tab-shop, .tab-map, .tab-you, .tab-explore, .tab-campaign, .tab-email) {
  --up: var(--pc-good); --down: var(--pc-bad); --open: var(--pc-good); --bad: var(--pc-bad); --good: var(--pc-good); --warn: var(--pc-warn); }
:root[data-page-color]:not(#pc) :is(.bo, .bd-drawer) { --d-good: var(--pc-good); --d-bad: var(--pc-bad); --d-warn: var(--pc-warn); }

/* Owner dashboards (Booking, Shop, You): cards and the pressed segment sit
   one shade off the page. */
:root[data-page-color]:not(#pc) :is(.bd-card, .bd-tile, .bd-search__drop, .so-pcard, .so-pin form, .so-type, .so-pv__card, .bo-pv__page) { background: var(--pc-card); }

/* What is selected in a list or menu: the palette's pale highlight fill,
   solid and clearly off the page. */
:root[data-page-color]:not(#pc) :is(.bo-nav[aria-current="true"], .bo-nav[aria-current="page"]) { background: var(--pc-hl-soft); }
/* A pressed segment (7d / 30d, Dashboard / Booking page) inverts. */
:root[data-page-color]:not(#pc) :is(.bd-seg button[aria-pressed="true"], .bo-switch button[aria-pressed="true"], .ex-seg button[aria-selected="true"]) { background: var(--pc-ink); color: var(--pc-page); }
:root[data-page-color]:not(#pc) :is(.mk-seg--light .mk-pill.is-on, .mk-tab.is-on, .mk-side.is-on, .sh-switch button[aria-pressed="true"], .bk-fmt button[aria-pressed="true"]) { background: var(--pc-ink); color: var(--pc-page); box-shadow: none; }
/* The booking's confirmed tick keeps its own green disc. */
:root[data-page-color]:not(#pc) .bk-done__mark:not(.bk-step.is-cancelled .bk-done__mark) { background: #16a34a; color: #ffffff; }
:root[data-page-color]:not(#pc) :is(.mk-amt__impact, .mk-amt__conv.is-error) { color: var(--pc-bad); }
:root[data-page-color]:not(#pc) .cm-blip-to select { background: transparent; color: inherit; }
:root[data-page-color]:not(#pc) .cm-bc textarea.cm-bc__cap { background: transparent; color: var(--pc-ink); }
:root[data-page-color]:not(#pc) .cm-bc textarea.cm-bc__cap::placeholder { color: var(--pc-faint); }

/* With a page colour set, light and dark draw the same palette (app-colors.js
   palette(pc) for both), so the viewer's Dark mode switch would do nothing
   visible: every desktop MENU hides it until the page colour is cleared. */
:root[data-page-color]:not(#pc) [data-theme-toggle] { display: none !important; }