/* Player light and dark themes. /theme.js sets data-theme on <html>.
   /api/brand.css sets the brand tokens for both themes: --paper (page),
   --card (raised surface), --soft (quiet fill), --ink (text), --muted,
   --accent, --yes, --no and the --on-* text colours for those fills.
   Load this file after every other player stylesheet. */

/* Fallbacks only; zero specificity so /api/brand.css always wins. */
:where(:root) {
  --on-accent: #ffffff;
  --on-yes: #ffffff;
  --on-no: #ffffff;
}

:root {
  /* Filled controls drawn in the text colour, such as dark buttons. */
  --inverse: var(--ink);
  --on-inverse: #ffffff;
  --input-bg: var(--card);
  --skeleton: var(--soft);
  --focus-ring: var(--accent);
  --scrim: rgba(19, 20, 18, 0.42);
  /* Stylesheets write light-theme literals as
     color-mix(in srgb, <literal> var(--tint-*), var(--card) | var(--ink)).
     At 100% the light theme keeps the literal; dark mode keeps only a tint. */
  --tint-fill: 100%;
  --tint-line: 100%;
  --tint-text: 100%;
  /* Near-white page and panel literals mix with var(--paper) or var(--soft).
     Dark mode drops the literal so text keeps its verified contrast. */
  --tint-surface: 100%;
  /* Named light-theme colours from the older sheets. Each keeps its exact
     light value and becomes the matching brand token in dark mode. */
  --social-apple-fill: #000;
  --pagination-ink: #181614;
  --skip-link-fill: #191914;
  --account-ink: #191c1d;
  --social-auth-ink: #1f1f1f;
  --form-ink: #242c2e;
  --avatar-ink: #292d2e;
  --inverse-hover: #2b2620;
  --sell-line: #c8d4cc;
  --step-line: #cfc8c0;
  --form-line: #dce3e4;
  --upload-line: #e0e5e5;
  --avatar-line: #e2e5e5;
  --summary-line: #e6e8e8;
  --row-line: #eceeee;
  --avatar-edit-ring: #fff;
  --summary-surface: #fafbfb;
  --chart-surface: #fffcf8;
  --ticket-surface: #fffdf9;
  --ring-ink: rgb(23, 20, 15);
  --edge-ink: rgb(23, 21, 17);
  --landing-edge-ink: rgb(23, 24, 21);
  --empty-state-tint: rgb(243, 238, 255);
  --empty-state-card: rgb(255, 255, 255);
  --wallet-on-inverse: rgb(245, 243, 240);
  --topbar-surface: rgb(245, 244, 239);
  --app-bar-surface: rgb(255, 250, 245);
  --nav-surface: rgb(255, 254, 250);
}

/* html[...] outranks the :root literals in older sheets but not the
   :root[data-theme] block from /api/brand.css. */
html[data-theme="dark"] {
  --tint-fill: 14%;
  --tint-line: 28%;
  --tint-text: 40%;
  --tint-surface: 0%;
  --social-apple-fill: var(--inverse);
  --pagination-ink: var(--ink);
  --skip-link-fill: var(--inverse);
  --account-ink: var(--ink);
  --social-auth-ink: var(--ink);
  --form-ink: var(--ink);
  --avatar-ink: var(--ink);
  --inverse-hover: var(--inverse);
  --sell-line: var(--line);
  --step-line: var(--line);
  --form-line: var(--line);
  --upload-line: var(--line);
  --avatar-line: var(--line);
  --summary-line: var(--line);
  --row-line: var(--line);
  --avatar-edit-ring: var(--line);
  --summary-surface: var(--card);
  --chart-surface: var(--card);
  --ticket-surface: var(--card);
  --ring-ink: var(--ink);
  --edge-ink: var(--ink);
  --landing-edge-ink: var(--ink);
  --empty-state-tint: var(--paper);
  --empty-state-card: var(--card);
  --wallet-on-inverse: var(--on-inverse);
  --topbar-surface: var(--paper);
  --app-bar-surface: var(--card);
  --nav-surface: var(--card);
  --on-inverse: var(--paper);
  --scrim: rgba(0, 0, 0, 0.62);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--card));
  --yes-soft: color-mix(in srgb, var(--yes) 16%, var(--card));
  --no-soft: color-mix(in srgb, var(--no) 16%, var(--card));
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.5);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  /* refined-flow.css */
  --rf-page: var(--paper);
  --rf-surface: var(--card);
  --rf-muted: var(--muted);
  --rf-muted-strong: var(--muted);
  --rf-line: var(--line);
  --rf-soft: var(--soft);
  --rf-soft-2: var(--soft);
  --rf-yes-soft: var(--yes-soft);
  --rf-no-soft: var(--no-soft);
  --rf-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line);
  /* meridian.css (landing, policy and FAQ pages) */
  --bg: var(--paper);
  --surface: var(--card);
  --surface-strong: var(--card);
  --positive: var(--yes);
}

/* Text on fixed colour fills. */
.toast.error {
  color: #ffffff;
}
/* meridian-app.css forces the accent fill on .primary-action. */
.account-screen
  :is(.account-password-form, .account-trading-panel)
  .primary-action {
  color: var(--on-accent);
}
html[data-theme="dark"]
  :is(
    .wallet-overview > span,
    .wallet-open-positions,
    .wallet-bonus-breakdown small
  ) {
  color: color-mix(in srgb, var(--on-inverse) 78%, transparent);
}

/* Light/dark switch */
.theme-toggle {
  position: relative;
  display: inline-grid;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
/* Extends the tap target to 44px without changing the layout. */
.theme-toggle::after {
  position: absolute;
  inset: -5px;
  content: "";
}
.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.theme-toggle .theme-toggle-sun,
html[data-theme="dark"] .theme-toggle .theme-toggle-moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle .theme-toggle-sun {
  display: block;
}

/* Landing header: brand, links, actions, switch. */
.landing-nav {
  grid-template-columns: 1fr auto 1fr auto;
  column-gap: 10px;
}
.policy-header {
  gap: 16px;
}
.policy-header > .meridian-brand {
  margin-right: auto;
}
/* Keeps the header as tall as the brand row. */
.policy-header > .theme-toggle {
  margin-block: -5px;
}
.policy-header > a:not(.meridian-brand) {
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
@media (max-width: 880px) {
  .landing-nav {
    grid-template-columns: 1fr auto auto;
  }
}
@media (max-width: 680px) {
  .account-cluster .theme-toggle {
    width: 32px;
    height: 32px;
  }
  .account-cluster .theme-toggle::after {
    inset: -6px;
  }
}
/* Signed-out phones: make room for the switch so the tenant name keeps
   the width it had before the switch was added. */
@media (max-width: 420px) {
  .topbar .account-cluster:has(> .avatar.signed-out) {
    gap: 4px;
  }
  .account-cluster:has(> .avatar.signed-out) .theme-toggle {
    width: 28px;
  }
  /* 36 x 44 tap target. */
  .account-cluster:has(> .avatar.signed-out) .theme-toggle::after {
    inset: -6px -4px;
  }
  .account-cluster:has(> .avatar.signed-out) .player-language {
    width: 50px;
  }
  .account-cluster:has(> .avatar.signed-out) .player-language::after {
    right: 5px;
  }
  .account-cluster:has(> .avatar.signed-out) .player-language select {
    padding: 0 12px 0 4px;
  }
  .topbar
    .account-cluster:has(> .avatar.signed-out)
    :is(.avatar.signed-out, .topbar-auth-signup) {
    padding-inline: 6px;
  }
}
/* Signed-in phones at 340px and below: compact the cluster so the tenant
   name stays in full. */
@media (max-width: 340px) {
  .topbar .account-cluster:not(:has(> .avatar.signed-out)) {
    gap: 2px;
  }
  .account-cluster:not(:has(> .avatar.signed-out)) .theme-toggle {
    width: 26px;
  }
  /* 36 x 44 tap target. */
  .account-cluster:not(:has(> .avatar.signed-out)) .theme-toggle::after {
    inset: -6px -5px;
  }
  .account-cluster:not(:has(> .avatar.signed-out)) > .avatar {
    width: 26px;
    min-width: 26px;
  }
  .account-cluster:not(:has(> .avatar.signed-out)) .player-language {
    width: 48px;
  }
  .account-cluster:not(:has(> .avatar.signed-out)) .player-language::after {
    right: 4px;
  }
  .account-cluster:not(:has(> .avatar.signed-out)) .player-language select {
    padding: 0 11px 0 4px;
  }
}