/* The site's glue for glisse (npm "glisse"; vendor/glisse.css is the
   component's own stylesheet, vendor/glisse.js the React side, built by
   scripts/build-glisse-switch.mjs).
     - Theme: the site is dark unless :root has .light-mode, whatever the OS
       says, so glisse's colours follow that class, not prefers-color-scheme.
     - <Switch>: the account page's switches (GlisseSwitch).
     - <Button>: every app button (glisse-buttons.js). */

/* ── Theme ─────────────────────────────────────────────────────────────── */
:root:not(.light-mode) {
  --lg-foreground: rgb(255 255 255);
  --lg-muted: rgb(235 235 245 / 0.6);
  --lg-glass: rgb(40 40 40 / 0.62);
  --lg-glass-active: rgb(70 70 70 / 0.62);
  --lg-edge: rgb(255 255 255 / 0.08);
  --lg-drop: transparent;
  --lg-destructive: #ff4245;
  --lg-track: rgb(235 235 245 / 0.3);
  --lg-on: #30d158;
  --lg-fill: #0091ff;
  --lg-ring: rgb(255 255 255 / 0.5);
  --lg-lens-shine: 1;
  --lg-rim-shine: 0.13;
}

:root.light-mode {
  --lg-foreground: rgb(0 0 0 / 0.88);
  --lg-muted: rgb(60 60 67 / 0.6);
  --lg-glass: rgb(255 255 255 / 0.6);
  --lg-glass-active: rgb(236 236 240 / 0.85);
  --lg-edge: rgb(0 0 0 / 0.08);
  --lg-drop: rgb(0 0 0 / 0.06);
  --lg-destructive: #ff383c;
  --lg-track: rgb(59 59 66 / 0.3);
  --lg-on: #34c759;
  --lg-fill: #0088ff;
  --lg-ring: rgb(0 0 0 / 0.4);
  --lg-lens-shine: -1.5;
  --lg-rim-shine: 0.3;
}

/* ── Switch ────────────────────────────────────────────────────────────── */

/* The original control stays in the page as the state, out of sight. */
.glisse-native { display: none !important; }

.glisse-host {
  --lg-thumb-frost: 0.5px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  /* Room for the thumb's lens, which grows past the switch while held. */
  padding: 4px 6px;
}

/* Position FDR and notification rows: words on the left, switch on the right,
   as in iOS Settings. */
.acct-position-fdr-row .glisse-host { margin-left: auto; }
.acct-notify-row { align-items: center; }
.acct-notify-row .glisse-host { order: 2; margin-left: auto; }

/* Fixture kits: the pill button becomes a labelled switch. */
.glisse-switch-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  cursor: pointer;
}
.glisse-switch-text {
  color: var(--text-secondary, #c7c7cb);
  font-size: 0.78rem;
  font-weight: 700;
  user-select: none;
}

/* ── Button ────────────────────────────────────────────────────────────────
   glisse's own .lg-button rules, re-stated so they win. Many of the site's
   button rules use !important, some on #ids, so these do too, and the
   :is(#lg-a#lg-b#lg-c, .lg-button) part lifts them to three-id specificity
   (it matches every .lg-button; the ids only count towards specificity).
   Display and position are left alone, so hidden buttons stay hidden and
   placed ones stay placed. */
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) {
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 20px !important;
  color: var(--lg-foreground) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  cursor: pointer;
  background-color: var(--lg-glass) !important;
  background-image: var(--lg-rim, none) !important;
  background-size: 100% 100% !important;
  -webkit-backdrop-filter: blur(var(--lg-blur, 3px)) var(--lg-filter, saturate(1.5)) !important;
  backdrop-filter: blur(var(--lg-blur, 3px)) var(--lg-filter, saturate(1.5)) !important;
  box-shadow: inset 0 0 0 0.5px var(--lg-edge), 0 1px 3px var(--lg-drop) !important;
  transition: background-color 200ms ease !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-rim] {
  box-shadow: 0 1px 3px var(--lg-drop) !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)::before { display: none !important; }
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: radial-gradient(circle 240px at var(--lg-x, 50%) var(--lg-y, 50%), rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.025) 50%, transparent) !important;
  mix-blend-mode: normal !important;
  opacity: 0 !important;
  transition: opacity 220ms ease-in-out !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-pressed]::after {
  opacity: 1 !important;
  transition-duration: 0s !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-icon] { padding-left: 12px !important; }
/* Icon and words: one row, as wide as its content, as <Button icon>Label</Button>
   renders — never squeezed into a fixed icon-sized box. */
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-icon=""] {
  flex-direction: row !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-right: 16px !important;
  white-space: nowrap !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-icon=""] > :is(svg, img) {
  flex: none;
  width: 20px !important;
  height: 20px !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) .familiar-action-label {
  font-size: 14px !important;
  line-height: 1.2 !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-icon="only"] {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}
/* Phones: in the chat composer the row is tight, so Dictate / Call keep the
   icon above a small label, sized to their content. */
@media (max-width: 720px) {
  html body .chat-composer :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-icon=""] {
    flex-direction: column !important;
    gap: 2px !important;
    min-height: 44px !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
  }
  html body .chat-composer :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) .familiar-action-label {
    font-size: 10px !important;
    line-height: 1 !important;
  }
  html body .chat-composer :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-icon=""] > :is(svg, img) {
    width: 18px !important;
    height: 18px !important;
  }
}
/* "Analyze my team": filled with the Kyoto gradient. The rim light (--lg-rim)
   stays layered on top, as on every glisse button. */
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-brand] {
  color: #fff !important;
  background-color: #c21500 !important;
  background-image: var(--lg-rim, none), var(--brand-gradient, linear-gradient(90deg, #c21500, #ffc500)) !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.3) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-brand]:hover {
    background-color: #c21500 !important;
    filter: brightness(1.08);
  }
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-brand]:is(:active, [data-pressed]) {
  background-color: #c21500 !important;
  filter: brightness(0.9);
}

/* My Team's Manager ID / Upload screenshot / Build manually: glisse buttons
   in a row with no rule underneath (the selected one is filled). */
html body .familiar-tabs:is(#lg-a#lg-b#lg-c, .familiar-tabs) {
  gap: 8px !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 2px 2px 6px !important;
}
html body .familiar-tabs > :is(button).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) {
  border-bottom: 0 !important;
}

/* ── Tab bar (mobile dock) ─────────────────────────────────────────────────
   vendor/glisse.js mounts glisse's <TabBar> in nav.main-tabs (#glisseDock);
   up to 1099px it replaces the old dock, whose buttons stay as the targets.
   Wider, the sidebar is unchanged and the TabBar is not shown. */
.glisse-dock { display: none; }

@media (max-width: 1099px) {
  html.glisse-dock-on nav.main-tabs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none;
  }
  html.glisse-dock-on nav.main-tabs::before,
  html.glisse-dock-on nav.main-tabs::after { display: none !important; }
  html.glisse-dock-on #proNavTabs { display: none !important; }

  html.glisse-dock-on .glisse-dock {
    display: flex;
    justify-content: center;
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  .glisse-dock .lg-tab-bar {
    pointer-events: auto;
    /* Five equal tabs across the screen (capped on wide tablets). */
    --lg-tab-width: calc((min(100vw, 560px) - 16px - 8px) / var(--lg-tabs, 5));
    --lg-tab-height: 54px;
    --lg-tab-selected: var(--lg-foreground);
    /* Readable over any page behind the floating bar. */
    --lg-glass: rgb(28 28 30 / 0.78);
  }
  :root.light-mode .glisse-dock .lg-tab-bar { --lg-glass: rgb(250 250 252 / 0.82); }
  .glisse-dock :is(.lg-tab, .lg-tab-copy) { font-size: 9.5px; letter-spacing: -0.02em; }
  /* A long label ("Supercomputer") may run a few pixels past its tab into
     the space its short-labelled neighbours leave, rather than be cut. */
  .glisse-dock .lg-tab-label { white-space: nowrap; overflow: visible; }
  .glisse-dock :is(.tabbar-icon, .tabbar-fab-icon) { display: grid; place-items: center; }
  .glisse-dock :is(.tabbar-icon, .tabbar-fab-icon) :is(svg, img) { width: 24px; height: 24px; object-fit: contain; }

  /* My Team: the raised Kyoto-gradient circle. It sits beside the TabBar (in
     .glisse-dock-inner, over the middle slot), so glisse's press mask over the
     tab labels never clips it; the slot keeps an empty icon space. */
  .glisse-dock .glisse-dock-inner { position: relative; pointer-events: none; }
  .glisse-dock .tabbar-fab-slot { display: block; width: 24px; height: 24px; }
  .glisse-dock .tabbar-fab {
    position: absolute;
    z-index: 5;
    top: -22px;
    left: 50%;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-gradient, linear-gradient(90deg, #c21500, #ffc500));
    color: #fff;
    box-shadow: 0 0 0 4px var(--nav-bg, #0d0d0f), 0 10px 22px rgb(194 21 0 / 0.35);
    transform: translateX(-50%);
  }
  :root.light-mode .glisse-dock .tabbar-fab { box-shadow: 0 0 0 4px #f4f4f2, 0 10px 22px rgb(194 21 0 / 0.25); }
  .glisse-dock .tabbar-fab svg { width: 26px; height: 26px; stroke: #fff; color: #fff; }
  .glisse-dock .tabbar-fab img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 0.75px rgb(255 255 255 / 0.95)) drop-shadow(0 0 0.75px rgb(255 255 255 / 0.95)) drop-shadow(0 3px 4px rgb(0 0 0 / 0.5));
  }
  .glisse-dock .tabbar-fab.is-selected {
    box-shadow: 0 0 0 4px var(--nav-bg, #0d0d0f), 0 0 0 6px rgb(255 197 0 / 0.55), 0 10px 24px rgb(194 21 0 / 0.45);
  }
  /* With My Team selected, the halo is the selection: no pill over the
     circle (it still appears while a drag lifts it into a lens). */
  .glisse-dock .lg-tab-bar.is-myteam:not([data-lifted]) .lg-tab-lens { opacity: 0 !important; }
  .glisse-dock .tabbar-fab .myteam-shirt { width: 30px; height: 30px; }
  .glisse-dock .tabbar-fab:active { transform: translateX(-50%) scale(0.94); }
  @media (prefers-reduced-motion: reduce) { .glisse-dock .tabbar-fab:active { transform: translateX(-50%); } }
}

/* Sign-in with Google / Apple / X: the wrappers drew a dark bar behind each
   button; the glisse button is the whole control now, full width. */
html body .google-btn-wrapper:is(#lg-a#lg-b#lg-c, .google-btn-wrapper) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .google-btn-wrapper > :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) {
  width: 100% !important;
  max-width: none !important;
}

/* One surface, as <Button> has: parts inside a button (a label chip, an arrow
   tile) drop their own fills. Counters and status dots keep theirs. */
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) > :not(svg):not(img):not([class*="badge"]):not([class*="count"]):not([class*="dot"]) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button) > svg {
  flex: none;
  width: 20px;
  height: 20px;
}

html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button):is(:active, [data-pressed]) {
  background-color: var(--lg-glass-active) !important;
  transition-duration: 0s !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button):hover {
    background-color: var(--lg-glass-active) !important;
  }
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button):disabled {
  background-color: var(--lg-glass) !important;
  opacity: 0.35 !important;
  cursor: default;
}

html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-destructive]:not([data-tint]) {
  --lg-tint: var(--lg-destructive);
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button):is([data-tint], [data-destructive]) {
  color: var(--lg-tint) !important;
}

html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-variant="filled"] {
  --lg-button-fill: var(--lg-tint, var(--lg-fill));
  color: #fff !important;
  background-color: var(--lg-button-fill) !important;
}
html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-variant="filled"]:is(:active, [data-pressed]) {
  background-color: color-mix(in srgb, var(--lg-button-fill) 85%, #000) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-variant="filled"]:hover {
    background-color: color-mix(in srgb, var(--lg-button-fill) 88%, #fff) !important;
  }
  html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button)[data-variant="filled"]:hover:is(:active, [data-pressed]) {
    background-color: color-mix(in srgb, var(--lg-button-fill) 85%, #000) !important;
  }
}

html body :is(button, a).lg-button:is(#lg-a#lg-b#lg-c, .lg-button):focus-visible {
  outline: 2px solid var(--lg-ring) !important;
  outline-offset: 2px !important;
}