/* ============================================================
   Grexi TV — brand override layer for the Neko v3 client
   Spec: myPKA/Deliverables/2026-07-28-grexi-tv-brand-direction.md (Iris)
   Tokens SSOT: 2026-07-02-grexi-liquid-glass-design-spec §1/§4
   Loaded AFTER css/app.*.css; unscoped selectors beat Vue's
   [data-v-*] scoping via specificity + !important where needed.
   Color-token remap of the stock bundles (teal/greys) happens in
   apply-branding.sh; this file carries structure, type, and the
   doorway moments (gate, loading ring, toolbar signature).
   ============================================================ */

/* ---- fonts (self-hosted, SIL OFL — LAN appliance works offline) ---- */
@font-face { font-family: "Exo 2"; font-weight: 700; font-display: swap;
  src: url(fonts/exo2-700.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 800; font-display: swap;
  src: url(fonts/exo2-800.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap;
  src: url(fonts/nunito-400.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap;
  src: url(fonts/nunito-600.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap;
  src: url(fonts/nunito-700.woff2) format("woff2"); }

:root {
  --grexi-teal: #2dd4bf;
  --grexi-pink: #ff2d78;
  --grexi-duo: linear-gradient(105deg, #2dd4bf 0%, #ff2d78 100%);
  --bg-deep: #070c16;
  --bg-base: #0b1220;
  --surface-solid: #141e30;
  --surface-raised: #1d2a40;
  --hairline: rgba(255,255,255,0.14);
  --text: #f2f6fa;
  --text-dim: #9fb0c3;
}

/* ---- theater ground: everything touching the video (§2 recede rule) ---- */
html, body, .neko-main, .video-container, .player-container, .player {
  background: var(--bg-deep) !important;
}

/* ================= 3.2 THE GATE (connect screen) ================= */

.connect {
  background:
    radial-gradient(ellipse at top left, rgba(45,212,191,0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(255,45,120,0.08), transparent 55%),
    var(--bg-base) !important;
}

.connect .window {
  position: relative;
  width: 360px !important;
  max-width: calc(100vw - 32px);
  background: var(--surface-solid) !important;
  border: 1px solid var(--hairline);
  border-radius: 20px !important;
  padding: 28px 24px 24px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); /* inner-top specular */
  overflow: hidden;
}
/* the one duo hairline on screen: card top edge */
.connect .window::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--grexi-duo);
}

/* lockup: the shipped logo.svg IS the full lockup; kill the n.eko text span */
.connect .window .logo { cursor: default !important; }
.connect .window .logo img {
  height: 104px !important;  /* ≈48px rendered wordmark inside glow-padded SVG */
  margin: 0 !important;
}
.connect .window .logo span,
.unsupported .window .logo span,
.about .window .loading .logo span { display: none !important; }

/* copy: friendly doorway, not a server login (§3.2) */
.connect .window .message span {
  font-size: 0 !important;         /* hides "Please Log In"/invite string */
  line-height: 0 !important;
  text-transform: none !important;
}
.connect .window .message span::before {
  content: "Movie night starts here";
  display: block;
  font: 700 20px/1.35 "Nunito", sans-serif;
  color: var(--text);
  text-align: center;
  padding-top: 4px;
}
.connect .window .message span::after {
  content: "Ask Greg & Lexi for the family password";
  display: block;
  font: 400 14px/1.5 "Nunito", sans-serif;
  color: var(--text-dim);
  text-align: center;
  padding: 2px 0 12px;
}

.connect .window .message input {
  background: var(--surface-solid) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 10px !important;
  min-height: 44px;
  padding: 10px 14px !important;
  font: 600 16px/1.3 "Nunito", sans-serif !important;
  color: var(--text) !important;
}
.connect .window .message input::placeholder { color: var(--text-dim); }
.connect .window .message input:focus {
  outline: none;
  border-color: var(--grexi-teal) !important;
  box-shadow: 0 0 0 2px rgba(45,212,191,0.35);
}

/* CTA: the one sanctioned duo-gradient control (§1.3.5) */
.connect .window .message button {
  font-size: 0 !important;         /* hides "Connect" */
  background: var(--grexi-duo) !important;
  color: var(--bg-base) !important;
  min-height: 56px;
  border-radius: 14px !important;
  margin-top: 10px !important;
}
.connect .window .message button::before {
  content: "Start watching";
  font: 700 17px/1 "Exo 2", sans-serif;
  color: var(--bg-base);
  letter-spacing: 0.01em;
  text-transform: none; /* stock button is uppercase; CTA is sentence case */
}
.connect .window .message button:hover { filter: brightness(1.08); }
.connect .window .message button:focus-visible {
  outline: 2px solid var(--grexi-teal);
  outline-offset: 2px;
}

/* ================= 3.3 TUNING-IN RING (the cat's replacement) ================= */

.connect .window .loader,
.about .window .loading .loader {
  width: 48px !important;
  height: 48px !important;
  position: relative;
  margin: 28px auto 44px !important;
  animation: grexi-breathe 2.4s ease-in-out infinite alternate;
}
.loader .bounce1, .loader .bounce2 { display: none !important; }

.connect .window .loader::before,
.about .window .loading .loader::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* track + 270° duo arc, teal head -> pink tail */
  background:
    conic-gradient(from 0deg, #2dd4bf 0deg, #ff2d78 270deg, transparent 270deg),
    conic-gradient(var(--hairline) 0 360deg);
  background-blend-mode: normal;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  /* faint duo glow (Iris review fix 2) */
  filter: drop-shadow(0 0 6px rgba(45,212,191,0.35)) drop-shadow(0 0 6px rgba(255,45,120,0.35));
  animation: grexi-spin 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.connect .window .loader::after {
  content: "Tuning in…";
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 600 14px/1 "Nunito", sans-serif;
  color: var(--text-dim);
}

@keyframes grexi-spin { to { transform: rotate(360deg); } }
@keyframes grexi-breathe { from { opacity: 0.7; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .connect .window .loader::before,
  .about .window .loading .loader::before { animation: none; }
  /* opacity-breathe stays */
}

/* ================= 3.4 IN-PLAYER CHROME ================= */

/* top bar: deep ground, duo hairline on the edge facing the video (60%) */
.neko-main .header {
  background: rgba(7, 12, 22, 0.92) !important;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(105deg, rgba(45,212,191,0.6), rgba(255,45,120,0.6)) 1;
}
/* toolbar lockup ~18px wordmark, inside chrome only */
.header .neko img { height: 40px !important; margin-right: 0 !important; }
.header .neko span { display: none !important; }
.header .neko { width: auto !important; }

/* icons: dim -> ink -> teal (greys/teal come from the token remap; assist here) */
.header .menu li i { color: var(--text-dim); }
.header .menu li i:hover { color: var(--text); }

/* side panel ground */
.neko-menu { background: var(--bg-deep) !important; }

/* teal keyboard-focus everywhere */
:focus-visible { outline: 2px solid var(--grexi-teal); outline-offset: 1px; }

/* member/avatar chips: Neko seeds an rgb() from the username INLINE —
   !important outranks the non-important inline style. Uniform raised chip
   with teal ring per Iris review 2026-07-28; presence dot untouched. */
.avatar {
  background-color: var(--surface-raised) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 2px var(--grexi-teal);
  font-family: "Nunito", sans-serif;
  font-weight: 700;
}

/* toasts ("Connected", etc.): raised surface + teal functional edge,
   never the stock notification green; errors keep a semantic red edge */
.vue-notification {
  background: var(--surface-raised) !important;
  border-left: 3px solid var(--grexi-teal) !important;
  color: var(--text) !important;
  font-family: "Nunito", sans-serif !important;
  border-radius: 8px;
  margin: 8px 8px 0 !important;
}
.vue-notification.error, .vue-notification.warn {
  border-left-color: #f27474 !important;
}

/* body copy defaults toward Nunito on chat/menus, keep FA icons intact */
.neko-menu .page-container, .connect { font-family: "Nunito", "Whitney", sans-serif; }