/* ==========================================================================
   AnySync v3 — design alignment layer (Moodboard & UI Kit v2).

   Loaded LAST, after every v2-*.css file. It re-tunes the existing v2
   screens to the approved moodboard without touching their markup:

     • exact Dark tokens (sampled from the adjusted Dark mockups)
     • clean wallpapers per theme (static/design/bg-<theme>-<form>.webp)
     • shared geometry: 200px sidebar, 50px nav items, 16px panels,
       12px rows/cards/hero, pill CTAs with a cyan glow
     • "Right now" hero with a dark-glass stats strip
     • Dark quick-start tiles tinted with their category colour
       (Light / Universe keep the neutral tile + gradient icon chip)

   Rules: semantic tokens only; the layout is identical in all three themes;
   styles.css token blocks stay untouched (test/theme.test.mjs pins them),
   overrides live here so this layer can be removed in one line.
   Reference: AnySync_Moodboard/DESIGN_SPEC.md, tokens/themes.css.
   ========================================================================== */

/* ------------------------------------------------------------ geometry -- */
:root {
  --radius: 16px;           /* section panels, quick-start tiles */
  --radius-lg: 18px;        /* sheets, large panels */
  --v3-radius-row: 12px;    /* rows, event cards, hero, app icons */
  --v3-radius-input: 10px;
  --v3-nav-h: 50px;
  --v3-icon-btn: 46px;
  --v3-cta-glow: 0 0 22px color-mix(in srgb, var(--primary) 38%, transparent);
  --hero-stats-bg: rgba(2, 14, 30, .72);
  /* Category colours: identical in every theme (DESIGN_SPEC §4). */
  --c-video: #7c5cff; --c-chat: #19d3e6; --c-walkie: #2bd67b; --c-pair: #ff6a4d;
  --c-crew: #3b82f6; --c-game: #8b5cf6; --c-heart: #ff4d8d; --c-coffee: #ff8a3d;
  --badge-friends: #7b2cf9;
}

/* --------------------------------------------- Dark: sampled tokens ---- */
:root[data-theme="dark"] {
  --bg: #010e20;
  --bg-2: #021325;
  --surface: #021325;
  --surface-2: #0c1e38;
  --border: #172548;
  --text: #f2f7ff;
  --muted: #a9bad6;
  --brand: #00eef8;
  --brand-strong: #00c9da;
  --brand-soft: rgba(0, 220, 240, .14);
  --on-brand: #02141f;
  --live: #ff1f3d;
  --live-solid: #ff1f3d;
  --glass: rgba(3, 21, 40, .92);
  --glass-strong: rgba(2, 17, 35, .97);
  --glass-border: rgba(40, 70, 120, .55);
  --glow: rgba(0, 230, 245, .30);
  --space-top: #010e20;
  --space-mid: #010e20;
  --space-bottom: #010c1c;
  --nav-active: linear-gradient(90deg, rgba(0, 190, 220, .30), rgba(0, 120, 160, .18));
  --hero-scrim: linear-gradient(90deg, rgba(2, 10, 24, .86) 0%, rgba(2, 10, 24, .55) 40%, rgba(2, 10, 24, .05) 75%);
  --hero-stats-bg: rgba(2, 14, 30, .72);
  --blur: 12px;
}
:root[data-theme="universe"] {
  --brand: #18e4f5;
  --brand-strong: #00c8de;
  --on-brand: #04212a;
  --glass: rgba(12, 28, 70, .36);
  --glass-strong: rgba(10, 22, 60, .62);
  --glass-border: rgba(90, 210, 255, .28);
  --blur: 10px;
  --hero-stats-bg: rgba(4, 12, 40, .45);
}
:root[data-theme="light"] {
  --hero-stats-bg: rgba(20, 22, 50, .40);
}

/* ------------------------------------------------------- wallpapers ---- */
/* The images already contain the planets / stars / clouds, so the CSS-drawn
   decoration (orbit.css + v2-shell.css ::before/::after) is switched off. */
:root[data-theme="dark"]:has(body.ui-v2) {
  background: #010e20 url("/design/bg-dark-desktop.webp") center / cover fixed no-repeat;
}
:root[data-theme="light"]:has(body.ui-v2) {
  background: #e6eafb url("/design/bg-light-desktop.webp") center / cover fixed no-repeat;
}
:root[data-theme="universe"]:has(body.ui-v2) {
  background: #050c26 url("/design/bg-universe-desktop.webp") center / cover fixed no-repeat;
}
:root[data-theme="light"] body.ui-v2::before, :root[data-theme="light"] body.ui-v2::after,
:root[data-theme="universe"] body.ui-v2::before, :root[data-theme="universe"] body.ui-v2::after,
:root[data-theme="dark"] body.ui-v2::before, :root[data-theme="dark"] body.ui-v2::after { display: none; }
@media (prefers-color-scheme: dark) {
  /* "System" while the OS is dark = Universe. */
  :root:not([data-theme]):has(body.ui-v2) {
    background: #050c26 url("/design/bg-universe-desktop.webp") center / cover fixed no-repeat;
  }
  :root:not([data-theme]) body.ui-v2::before, :root:not([data-theme]) body.ui-v2::after { display: none; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]):has(body.ui-v2) {
    background: #e6eafb url("/design/bg-light-desktop.webp") center / cover fixed no-repeat;
  }
  :root:not([data-theme]) body.ui-v2::before, :root:not([data-theme]) body.ui-v2::after { display: none; }
}
@media (max-width: 599px), (orientation: portrait) and (max-width: 1023px) {
  :root[data-theme="dark"]:has(body.ui-v2) { background-image: url("/design/bg-dark-mobile.webp"); background-attachment: scroll; }
  :root[data-theme="light"]:has(body.ui-v2) { background-image: url("/design/bg-light-mobile.webp"); background-attachment: scroll; }
  :root[data-theme="universe"]:has(body.ui-v2) { background-image: url("/design/bg-universe-mobile.webp"); background-attachment: scroll; }
}
@media (max-width: 599px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]):has(body.ui-v2) { background-image: url("/design/bg-universe-mobile.webp"); background-attachment: scroll; }
}
@media (max-width: 599px) and (prefers-color-scheme: light) {
  :root:not([data-theme]):has(body.ui-v2) { background-image: url("/design/bg-light-mobile.webp"); background-attachment: scroll; }
}

/* ------------------------------------------------------ navigation ----- */
/* Phone tab bar: active tab glows in the primary colour. */
body.ui-v2 .dock-tab.is-active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 70%, transparent)); }

@media (min-width: 600px) {
  body.ui-v2 .dock-tab { border-radius: var(--v3-radius-row); }
  body.ui-v2 .dock-tab.is-active {
    background: var(--nav-active);
    border-color: color-mix(in srgb, var(--primary) 85%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 18px color-mix(in srgb, var(--primary) 28%, transparent);
  }
}
@media (min-width: 1200px) {
  :root { --v2-nav-w: 200px; }
  body.ui-v2 .orbit-dock { padding: 22px 14px 18px; gap: 6px; }
  .dock-brand { padding: 4px 8px; margin-bottom: 22px; gap: 10px; }
  .dock-brand img { width: 46px; }
  .dock-brand-name { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
  body.ui-v2 .dock-tab { min-height: var(--v3-nav-h); padding: 0 14px; gap: 14px; font-size: .90625rem; }
  body.ui-v2 .dock-tab:not(.is-active) svg { color: var(--muted); }
  body.ui-v2 .dock-tab.is-active { font-weight: 600; color: var(--foreground); }
  body.ui-v2 .dock-tab.is-active svg { color: var(--foreground); filter: none; }
}

/* ---------------------------------------------------------- header ----- */
@media (min-width: 600px) {
  .app-header-btn { width: var(--v3-icon-btn); height: var(--v3-icon-btn); }
  .app-header-btn svg { width: 21px; height: 21px; }
}
.app-header-actions { gap: 10px; }
.app-header-btn:not(.is-avatar) { background: color-mix(in srgb, var(--surface-2) 88%, transparent); }
.app-header-btn.is-avatar { border-color: color-mix(in srgb, var(--primary) 30%, var(--glass-border)); }
/* Friend-request count = purple pill, notifications = red (DESIGN_SPEC §2). */
.app-header-btn.is-requests .app-header-badge { background: var(--badge-friends); color: #fff; }
.app-header-badge { min-width: 18px; height: 18px; padding: 0 5px; font-size: .6875rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg); }
.app-header-dot { background: var(--live); box-shadow: 0 0 0 2px var(--bg); }

/* -------------------------------------------------------- sections ----- */
@media (min-width: 600px) {
  .v2-home .v2-section,
  .v2-screen .v2-card:not(.v2-home-rightnow-card) { border-radius: var(--radius); }
  .v2-home .v2-section { padding: 12px 14px 14px; gap: 10px; }
}
.v2-section-title { font-size: 1.125rem; font-weight: 600; }
@media (max-width: 599px) { .v2-section-title { font-size: 1rem; } }
.v2-dot { width: 18px; height: 18px; }
.v2-link { font-size: .8125rem; }

/* ---------------------------------------------------------- buttons ---- */
.v2-btn { border-radius: 999px; }
.v2-btn.is-primary { box-shadow: var(--v3-cta-glow); }
.v2-btn.is-primary:hover { filter: brightness(1.06); }
:root[data-theme="light"] .v2-btn.is-primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); }
/* Row action ("Join"): soft cyan, 10px corners, cyan border + text. */
.v2-btn.is-soft.size-sm {
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--v3-radius-input);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary) 65%, transparent);
  color: var(--primary);
}

/* ---------------------------------------------------- Right now hero --- */
.v2-home-carousel { border-radius: var(--v3-radius-row); }
.v2-home-hero { border-radius: var(--v3-radius-row); }
@media (min-width: 600px) {
  .v2-home-hero { min-height: 196px; padding: 16px 18px 0; gap: 10px; }
  .v2-home-hero-title { font-size: 1.625rem; font-weight: 600; }
  .v2-home-hero-sub { font-size: .9375rem; }
  /* The bottom becomes a full-width dark-glass stats strip with the CTA at its end. */
  .v2-home-hero-bottom {
    margin: 0 -18px;
    padding: 10px 14px 10px 18px;
    gap: 10px;
    background: var(--hero-stats-bg);
    border-top: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .v2-home-hero-bottom .v2-progress { display: none; }
  .v2-home-hero-row { flex-wrap: nowrap; align-items: center; }
  .v2-home-hero-stats { flex-wrap: nowrap; gap: 0; }
  .v2-home-hero-stat { padding: 0 22px; }
  .v2-home-hero-stat:first-child { padding-left: 0; }
  .v2-home-hero-stat + .v2-home-hero-stat { border-left: 1px solid rgba(255, 255, 255, .14); }
  .v2-home-hero-stat > svg { color: var(--primary); }
  .v2-home-hero-stat-value { font-size: 1.125rem; }
  .v2-home-hero-stat-label { font-size: .71875rem; }
  .v2-home-hero-cta { min-height: 46px; }
}
@media (max-width: 599px) {
  .v2-home-carousel, .v2-home-hero { border-radius: var(--v3-radius-row); }
  .v2-home-hero .v2-home-hero-stat > svg { color: var(--primary); }
}

/* -------------------------------------------------- Quick start -------- */
.v2-home-quick-tile { border-radius: var(--radius); }
@media (min-width: 600px) { .v2-home-quick-tile { min-height: 132px; } }
@media (max-width: 599px) { .v2-home-quick-tile { border-radius: var(--v3-radius-row); } }
/* Dark: category-tinted tiles with a coloured glyph (no chip). */
:root[data-theme="dark"] .v2-home-quick-tile .v2-icon-tile {
  background: none;
  box-shadow: none;
  color: color-mix(in srgb, var(--tile-a) 70%, #ffffff);
}
:root[data-theme="dark"] .v2-home-quick-tile .v2-icon-tile > svg { width: 36px; height: 36px; filter: none; }
@media (max-width: 599px) {
  :root[data-theme="dark"] .v2-home-quick-tile .v2-icon-tile > svg { width: 30px; height: 30px; }
}

/* ------------------------------------------- event cards / app rows ---- */
.v2-home-event { border-radius: var(--v3-radius-row); }
.v2-home-event-media .v2-art { border-radius: 0; }
.v2-home-app { border-radius: var(--v3-radius-row); }
.v2-home-app .v2-icon-tile, .v2-icon-tile.size-lg { border-radius: var(--v3-radius-row); }
.v2-home-app-sub svg { color: var(--green); }

/* --------------------------------------------- shared form controls ---- */
.v2-chip { min-height: 32px; }
.v2-search, input[type="search"].v2-input { border-radius: var(--v3-radius-input); }

@media (prefers-reduced-motion: reduce) {
  .v2-btn.is-primary, body.ui-v2 .dock-tab.is-active { transition: none; }
}

/* ==========================================================================
   v3.1 — shell fidelity (DESIGN_SPEC §2–3): breakpoints, content width,
   desktop top bar, sidebar Collapse, compact empty states.
   ========================================================================== */

/* ------------------------------------------------ breakpoints / width -- */
/* tablet 600–1023: 76px icon rail · desktop ≥1024: 200px sidebar · content ≤1240. */
:root { --v2-content-max: 1240px; }
@media (min-width: 600px) and (max-width: 1023px) { :root { --v2-nav-w: 76px; } }
@media (min-width: 1024px) {
  :root { --v2-nav-w: 200px; --v2-gutter: 26px; }
  body.ui-v2 .orbit-dock { padding: 22px 14px 18px; gap: 6px; }
  .dock-brand { justify-content: flex-start; padding: 4px 8px; margin-bottom: 22px; gap: 10px; }
  .dock-brand img { width: 46px; }
  .dock-brand-name { display: inline; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
  body.ui-v2 .dock-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: var(--v3-nav-h);
    padding: 0 14px;
    font-size: .90625rem;
    font-weight: 500;
    letter-spacing: -.01em;
  }
  body.ui-v2 .dock-tab svg { width: 24px; height: 24px; }
  body.ui-v2 .dock-tab:not(.is-active) svg { color: var(--muted); }
  body.ui-v2 .dock-tab.is-active { font-weight: 600; color: var(--foreground); }
  body.ui-v2 .dock-tab.is-active svg { color: var(--foreground); filter: none; }
}

/* ------------------------------------------------- sidebar: Collapse --- */
.dock-collapse { display: none; }
@media (min-width: 1024px) {
  .dock-collapse {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--v3-radius-row);
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
  }
  .dock-collapse svg { flex: none; width: 20px; height: 20px; }
  .dock-collapse:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 6%, transparent); }
  .dock-collapse:focus-visible { outline: none; box-shadow: var(--ring); }

  /* Collapsed = the 76px icon rail. */
  body.is-dock-collapsed { --v2-nav-w: 76px; }
  body.is-dock-collapsed .orbit-dock { padding-left: 10px; padding-right: 10px; }
  body.is-dock-collapsed .dock-brand { justify-content: center; padding: 4px 0; }
  body.is-dock-collapsed .dock-brand-name,
  body.is-dock-collapsed .dock-tab span,
  body.is-dock-collapsed .dock-collapse span { display: none; }
  body.is-dock-collapsed.ui-v2 .dock-tab,
  body.is-dock-collapsed .dock-collapse { justify-content: center; padding: 0; }
}

/* ------------------------------------------------------ top bar -------- */
.app-header-search,
.app-header-divider,
.app-header-btn.is-location,
.app-header-name,
.app-header-btn.is-avatar > .orbit-icon { display: none; }
.app-header-pip {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--primary);
}
.app-header-pip[hidden] { display: none; }
/* Phones: Scan QR · Friend requests · Notifications · Avatar (search lives in the pages). */
@media (max-width: 599px) { .app-header-btn.is-search { display: none; } }

@media (min-width: 600px) {
  /* In the flow above the content, like the mockup: no icons floating over panels. */
  .app-header { position: relative; min-height: 58px; padding-top: 14px; padding-bottom: 8px; }
}
@media (min-width: 1024px) {
  .app-header-btn.is-search { display: none; }
  .app-header-btn.is-location { display: inline-grid; }
  .app-header-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(460px, 42%);
    height: 46px;
    margin-right: auto;
    padding: 0 10px 0 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--v3-radius-input);
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    color: var(--muted);
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: text;
  }
  .app-header-search > .orbit-icon { flex: none; width: 18px; height: 18px; }
  .app-header-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header-search kbd {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 26px; padding: 0 6px;
    border: 1px solid var(--glass-border); border-radius: 7px;
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
    color: var(--muted); font: inherit; font-size: .6875rem; font-weight: 600;
  }
  .app-header-search:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-border)); }
  .app-header-search:focus-visible { outline: none; box-shadow: var(--ring); }
  .app-header-demo:not([hidden]) { margin-right: 4px; }

  .app-header-divider { display: block; width: 1px; height: 30px; margin: 0 4px; background: var(--glass-border); }

  /* Profile pill: avatar + full name + chevron. */
  .app-header-btn.is-avatar {
    width: auto; height: 50px;
    display: inline-flex; gap: 10px;
    padding: 0 14px 0 4px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  }
  .app-header-btn.is-avatar .v2-avatar { --size: 40px; }
  .app-header-name { display: inline; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84375rem; font-weight: 500; }
  .app-header-btn.is-avatar > .orbit-icon { display: inline-block; width: 16px; height: 16px; color: var(--muted); }
}

/* ------------------------------------------ compact empty states ------ */
/* An empty Home panel is one quiet row (icon · text · action), not a poster. */
.v2-home .v2-card:has(> .v2-empty) { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.v2-home .v2-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon title action" "icon body action";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 14px 16px;
  text-align: left;
  border: 1px dashed color-mix(in srgb, var(--glass-border) 90%, transparent);
  border-radius: var(--v3-radius-row);
  background: color-mix(in srgb, var(--surface-2) 35%, transparent);
}
.v2-home .v2-empty > .v2-icon-tile {
  grid-area: icon;
  width: 44px; height: 44px; border-radius: var(--v3-radius-row);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: none;
  color: var(--primary);
}
.v2-home .v2-empty > .v2-icon-tile > svg { width: 22px; height: 22px; filter: none; }
.v2-home .v2-empty-title { grid-area: title; align-self: end; font-size: .9375rem; }
.v2-home .v2-empty-body { grid-area: body; align-self: start; max-width: none; font-size: .8125rem; }
.v2-home .v2-empty:not(:has(.v2-empty-body)) .v2-empty-title { grid-row: 1 / span 2; align-self: center; }
.v2-home .v2-empty > .v2-btn { grid-area: action; }
@media (max-width: 599px) {
  .v2-home .v2-empty { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon body" ". action"; }
  .v2-home .v2-empty > .v2-btn { justify-self: start; margin-top: 8px; }
}

/* Dark Quick start: the kit's tinted tile (.qs-tile) — dark base, 34 → 12 %
   category tint, 60 % category border; not a saturated gradient. */
:root[data-theme="dark"] .v2-home-quick-tile {
  background: linear-gradient(140deg, color-mix(in srgb, var(--tile-a) 34%, #071629), color-mix(in srgb, var(--tile-a) 12%, #071629));
  border-color: color-mix(in srgb, var(--tile-a) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-theme="dark"] .v2-home-quick-tile:hover { border-color: var(--tile-a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 18px color-mix(in srgb, var(--tile-a) 30%, transparent); }
:root[data-theme="dark"] .v2-home-quick-tile .v2-icon-tile { color: color-mix(in srgb, var(--tile-a) 75%, #ffffff); }