/* WinkView app navigation styles (25 Oct 2026): the colours every app uses, and the one product switcher, Managed
   button, trial chip, account menu and logo drawn from public/nav-model.mjs. Used by Posting (a byte-identical copy in
   the autoposter repo, src/ui/nav/), Briefing and S4S (imported into studio/app/globals.css), Engagement (cloud.html)
   and Managed (fullstack.html). Change it here and run scripts/sync-nav.mjs. No important-overrides and no colours outside
   the tokens below. */
:root {
  /* Design v2 palette (autoposter src/ui/theme.css "Design v2" block and its WinkView brand block; test/nav.test.ts there
     checks the values match). */
  --wv-bg: #0c0b0b; --wv-surface: #141213; --wv-surface-2: #1c191a; --wv-surface-3: #232021;
  --wv-border: #2a2627; --wv-border-strong: #3a3435; --wv-text: #f4efea; --wv-text-muted: #9b928d; --wv-muted: #6d6562;
  --wv-accent: #FF2E74; --wv-accent-hover: #ff5b92; --wv-accent-text: #161311; --wv-accent-tint: #2a1017; --wv-accent-deep: #ff6b9a;
  --wv-success: #4fd08a; --wv-warning: #e2a53c; --wv-warning-bg: #33260f; --wv-danger: #ef6a5f; --wv-danger-bg: #33161a;
  --wv-sidebar-bg: #0c0b0b; --wv-sidebar-hover: #1a1718; --wv-sidebar-active: #221e1f; --wv-sidebar-border: #211d1e;
  --wv-sidebar-text: #e8e1db; --wv-sidebar-muted: #857c77;
  --wv-gold-1: #f6d27a; --wv-gold-2: #e2a93b; --wv-gold-ink: #1d1407;
  --wv-scrim: rgba(0, 0, 0, .5); --wv-shadow-pop: 0 12px 36px rgba(0, 0, 0, .5);
  --wv-radius: 10px;
  --wv-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* One size for every app's chrome. Phones: below 900px (nav-model.mjs BREAKPOINT). */
  --wv-side-w: 244px; --wv-top-h: 60px; --wv-top-h-phone: 56px; --wv-brand-w: 34px; --wv-brand-h: 33px;
}

/* ---- the bar: products left, Managed / trial / account right ---- */
.wvn-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 auto; min-width: 0; font-family: var(--wv-font); }
.wvn-left { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.wvn-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; min-width: 0; }
.wvn-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wvn-ico.filled { fill: currentColor; stroke: none; }

.wvn-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--wv-surface); border: 1px solid var(--wv-border); border-radius: 9px; }
.wvn-item { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 6px; font: 550 13.5px/1.3 var(--wv-font); color: var(--wv-text-muted); text-decoration: none; white-space: nowrap; }
.wvn-item:hover { color: var(--wv-text); background: var(--wv-surface-2); }
.wvn-item[aria-current="page"] { background: var(--wv-surface-3); color: var(--wv-text); box-shadow: inset 0 0 0 1px var(--wv-border-strong); }
.wvn-item[aria-current="page"] .wvn-ico { color: var(--wv-accent); }
.wvn-item:focus-visible, .wvn-pick:focus-visible, .wvn-row:focus-visible, .wvn-managed:focus-visible, .wvn-trial:focus-visible, .wvn-menu-btn:focus-visible, .wvn-menu-item:focus-visible, .wvn-brand:focus-visible { outline: 2px solid var(--wv-accent); outline-offset: 2px; }
/* A number on a product sits on its corner, so one that arrives later never moves anything. */
.wvn-count { position: absolute; top: -7px; right: -5px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--wv-accent); color: var(--wv-accent-text); font: 700 11px/17px var(--wv-font); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--wv-bg); pointer-events: none; }
.wvn-count.bad { background: var(--wv-danger); color: var(--wv-accent-text); }

/* Phones: the product you are in, as one button; the list of products opens from it. */
.wvn-pick-wrap { display: none; }
.wvn-bar .wvn-sheet, .wvn-bar .wvn-scrim { display: none; }

/* ---- Managed: its own gold button, separate from the self-serve products ---- */
.wvn-managed { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, var(--wv-gold-1), var(--wv-gold-2)); color: var(--wv-gold-ink); font: 700 13.5px/1 var(--wv-font); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px color-mix(in srgb, var(--wv-gold-1) 35%, transparent), 0 4px 14px color-mix(in srgb, var(--wv-gold-2) 22%, transparent); flex: 0 0 auto; }
.wvn-managed:hover { filter: brightness(1.06); }
.wvn-managed[aria-current="page"] { box-shadow: 0 0 0 2px var(--wv-text), 0 4px 14px color-mix(in srgb, var(--wv-gold-2) 30%, transparent); }
.wvn-managed .wvn-ico { width: 15px; height: 15px; }

/* ---- trial chip (owners and managers) ---- */
.wvn-trial-slot { display: contents; }
.wvn-trial { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font: 650 13px/1 var(--wv-font); text-decoration: none; white-space: nowrap; border: 1px solid var(--wv-border); color: var(--wv-text); background: var(--wv-surface); }
.wvn-trial .wvn-ico { width: 14px; height: 14px; }
.wvn-trial.accent { color: var(--wv-accent); border-color: color-mix(in srgb, var(--wv-accent) 45%, transparent); background: color-mix(in srgb, var(--wv-accent) 10%, transparent); }
.wvn-trial.bad { color: var(--wv-danger); border-color: color-mix(in srgb, var(--wv-danger) 45%, transparent); background: color-mix(in srgb, var(--wv-danger) 10%, transparent); }
.wvn-trial.muted { color: var(--wv-text-muted); }

/* ---- account menu ---- */
.wvn-menu { position: relative; }
.wvn-menu-btn { display: flex; align-items: center; gap: 9px; max-width: 240px; padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; font: 600 13px/1.2 var(--wv-font); color: var(--wv-text); cursor: pointer; }
.wvn-menu-btn:hover, .wvn-menu-btn[aria-expanded="true"] { background: var(--wv-surface-2); border-color: var(--wv-border); }
.wvn-avatar { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--wv-accent); color: var(--wv-accent-text); display: grid; place-items: center; font-weight: 650; font-size: 12px; }
.wvn-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wvn-chev { width: 14px; height: 14px; color: var(--wv-text-muted); }
.wvn-menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 6px; background: var(--wv-surface); border: 1px solid var(--wv-border); border-radius: 11px; box-shadow: var(--wv-shadow-pop); }
.wvn-menu-pop[hidden] { display: none; }
.wvn-menu-who { padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--wv-border); }
.wvn-menu-pop .wvn-menu-who strong { display: block; font-size: 14px; font-weight: 650; color: var(--wv-text); overflow: hidden; text-overflow: ellipsis; }
.wvn-menu-who span { display: block; font-size: 12px; color: var(--wv-text-muted); overflow: hidden; text-overflow: ellipsis; }
.wvn-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: none; font: 500 14px/1.3 var(--wv-font); color: var(--wv-text); text-align: left; text-decoration: none; cursor: pointer; }
.wvn-menu-item:hover { background: var(--wv-surface-2); }
.wvn-menu-item .wvn-ico { color: var(--wv-text-muted); }
.wvn-menu-sep { height: 1px; margin: 6px 4px; background: var(--wv-border); }

/* ---- the logo: eye mark + WinkView, links to Home ---- */
.wvn-brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--wv-text); text-decoration: none; }
.wvn-brand img { width: var(--wv-brand-w); height: var(--wv-brand-h); flex: 0 0 var(--wv-brand-w); border-radius: 8px; object-fit: contain; }
.wvn-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.wvn-brand .wvn-brand-text strong { font: 700 18px/1.1 var(--wv-font); letter-spacing: -.3px; color: var(--wv-text); }
.wvn-brand-text small { margin-top: 2px; font: 600 11.5px/1.2 var(--wv-font); letter-spacing: .2px; color: var(--wv-accent); }

/* ---- a page header without a sidebar (Managed, Engagement setup, Account) ---- */
.wvn-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: var(--wv-top-h); padding: 0 28px; background: var(--wv-bg); border-bottom: 1px solid var(--wv-border); font-family: var(--wv-font); box-sizing: border-box; }
.wvn-top:empty { display: none; }

/* Narrow computers: the bar measures its own width (the sidebar and Briefing's "Saved" take room), so the products,
   Managed, the trial chip and the account never run into each other. First the account shows as its avatar, then the
   products other than the one you are in show their icon (the name stays in the tooltip and for screen readers).
   Computers only: on a phone the bar holds a fixed-position list, which a size container would trap. */
@media (min-width: 900px) {
  .wvn-bar { container: wvbar / inline-size; }
  @container wvbar (max-width: 1119px) {
    .wvn-menu-name, .wvn-menu-btn > .wvn-chev { display: none; }
    .wvn-menu-btn { padding: 4px; }
  }
  @container wvbar (max-width: 959px) {
    .wvn-item { padding: 6px 9px; }
    .wvn-item:not([aria-current="page"]) .wvn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .wvn-right { gap: 8px; }
  }
  @container wvbar (max-width: 759px) { .wvn-trial { display: none; } }
}
@media (max-width: 899px) {
  .wvn-switch { display: none; }
  .wvn-pick-wrap { display: flex; min-width: 0; }
  .wvn-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 0; max-width: 100%; padding: 0 12px 0 11px; border: 1px solid var(--wv-border); border-radius: 10px; background: var(--wv-surface); font: 650 15px/1 var(--wv-font); color: var(--wv-text); cursor: pointer; }
  .wvn-pick .wvn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wvn-pick > .wvn-ico:first-child { width: 17px; height: 17px; color: var(--wv-accent); }
  .wvn-pick[aria-expanded="true"] .wvn-chev { transform: rotate(180deg); }
  .wvn-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--wv-accent); box-shadow: 0 0 0 2px var(--wv-bg); }
  .wvn-bar .wvn-scrim { display: block; position: fixed; inset: 0; z-index: 2147482990; background: var(--wv-scrim); }
  .wvn-bar .wvn-sheet { display: flex; position: fixed; top: calc(env(safe-area-inset-top, 0px) + var(--wv-top-h-phone) + 6px); left: 12px; right: 12px; z-index: 2147482991; flex-direction: column; gap: 2px; padding: 6px; background: var(--wv-surface); border: 1px solid var(--wv-border); border-radius: 14px; box-shadow: var(--wv-shadow-pop); }
  .wvn-bar .wvn-sheet[hidden], .wvn-bar .wvn-scrim[hidden] { display: none; }
  /* The list is drawn inside the header; while it is open the header goes above everything else on the page. */
  :has(> .wvn-bar .wvn-pick[aria-expanded="true"]) { z-index: 2147482990; }
  .wvn-row { display: flex; align-items: center; gap: 13px; min-height: 50px; padding: 0 14px; border-radius: 10px; color: var(--wv-text); font: 600 16px/1.2 var(--wv-font); text-decoration: none; }
  .wvn-row:hover { background: var(--wv-surface-2); }
  .wvn-row .wvn-ico { width: 20px; height: 20px; color: var(--wv-text-muted); }
  .wvn-row[aria-current="page"] { background: var(--wv-surface-3); }
  .wvn-row[aria-current="page"] .wvn-ico { color: var(--wv-accent); }
  .wvn-row .wvn-label { flex: 1 1 auto; min-width: 0; }
  .wvn-row .wvn-count { position: static; height: 22px; min-width: 22px; padding: 0 7px; font-size: 12px; line-height: 22px; box-shadow: none; }
  .wvn-right { gap: 8px; }
  .wvn-managed { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .wvn-menu-name, .wvn-menu-btn > .wvn-chev { display: none; }
  .wvn-menu-btn { padding: 4px; }
  .wvn-top { height: var(--wv-top-h-phone); padding: 0 12px; gap: 10px; }
  .wvn-top .wvn-brand-text { display: none; }
}
@media (max-width: 640px) { .wvn-trial { height: 30px; padding: 0 10px; font-size: 12px; } .wvn-trial .wvn-ico { display: none; } }
/* Small phones: no room next to the product button; trial days stay in Billing. Managed keeps its label. */
@media (max-width: 480px) { .wvn-trial { display: none; } }
@media (max-width: 400px) { .wvn-managed { padding: 0 9px; gap: 5px; font-size: 12px; } .wvn-pick { padding: 0 10px 0 9px; font-size: 14px; } }