@import url("./base/variables-unified.css?v=20260901-design1");

/* Shared user UI foundation. Opt in with html.user-page or html.tv-page. */
:root {
  --ui-accent: var(--accent);
  --ui-accent-strong: var(--accent-text);
  --ui-nav-active-icon: var(--accent);
  --ui-bg: var(--background-light);
  --ui-surface: var(--card-light);
  --ui-surface-soft: var(--surface-2);
  --ui-text: var(--text-light);
  --ui-text-muted: var(--brand-muted);
  --ui-border: var(--border);
  --ui-focus: #1463ff;
  --ui-shadow-card: 0 12px 32px rgba(20, 29, 48, 0.09);
  --ui-radius-sm: var(--radius-sm);
  --ui-radius-md: var(--radius-lg);
  --ui-radius-lg: var(--radius-xl);
  --ui-control-height: 52px;
  --ui-sidebar-width: 248px;
  --ui-desktop-gutter: 32px;
  --ui-desktop-content-max: 1180px;
  --ui-desktop-aside-width: 320px;
  color-scheme: light;
}

html.dark {
  --ui-bg: var(--background-dark);
  --ui-surface: var(--card-dark);
  --ui-surface-soft: #1d2633;
  --ui-text: var(--text-dark);
  --ui-text-muted: var(--muted-dark);
  --ui-border: var(--border-dark);
  --ui-focus: #73a6ff;
  --ui-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html.tv-page:not(.dark) {
  --tv-bg: #f1f4f8;
  --tv-panel: rgba(255, 255, 255, 0.94);
  --tv-panel-strong: #ffffff;
  --tv-line: rgba(22, 32, 52, 0.15);
  --tv-text: #151923;
  --tv-muted: #5f6b7d;
  --tv-focus: #1463ff;
}

html.tv-page:not(.dark) body {
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 87, 0, 0.15), transparent 30vw),
    radial-gradient(circle at 18% 82%, rgba(45, 118, 255, 0.10), transparent 28vw),
    var(--tv-bg);
}

html.tv-page:not(.dark) .tv-sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 244, 250, 0.96));
  box-shadow: 0 24px 70px rgba(26, 36, 56, 0.14);
}

html.user-page {
  background: var(--ui-bg);
}

html.user-page body {
  color: var(--ui-text);
}

html.user-page :where(.text-primary, .text-primary-color, .text-accent-color, .fitgram-accent, .link-themed) {
  color: var(--accent-text);
}

html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item) {
  color: var(--ui-text-muted) !important;
  font-family: var(--font-sans) !important;
}

html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item).active {
  color: var(--ui-nav-active-icon) !important;
}

/* Keep the bottom-bar icon treatment identical across user pages. */
html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item) > .material-symbols-outlined {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto 5px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* Keep every active bottom-bar icon on the same canonical brand color. */
html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item).active > .material-symbols-outlined {
  color: var(--ui-nav-active-icon) !important;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

html.user-page :where(button, input, select, textarea),
html.tv-page :where(button, input, select, textarea) {
  font: inherit;
}

html.user-page :where(button, a, input, select, textarea, summary, [tabindex]):focus,
html.tv-page :where(button, a, input, select, textarea, summary, [tabindex]):focus {
  outline: none;
}

html.tv-page :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
html.tv-page .ui-remote-focus {
  position: relative;
  z-index: 2;
  outline: 4px solid var(--ui-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
}

/* The large blue ring is for keyboard/remote navigation, not mobile taps. */
@media (min-width: 1024px) {
  html.user-page :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible,
  html.user-page .ui-remote-focus {
    position: relative;
    z-index: 2;
    outline: 4px solid var(--ui-focus) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ui-focus) 24%, transparent) !important;
  }
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--ui-control-height);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  html.user-page :where(button, [role="button"], .ui-button),
  html.user-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: var(--ui-control-height);
  }
}

.ui-button--secondary {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
}

.ui-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.ui-input {
  width: 100%;
  min-height: var(--ui-control-height);
  padding: 0 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-text);
}

html.user-page.ui-modal-open,
html.tv-page.ui-modal-open {
  overflow: hidden !important;
}

/* Existing mobile navigation becomes the app sidebar on desktop/TV-sized screens. */
@media (min-width: 1024px) {
  html.user-page:not(.workout-document) body {
    min-width: 0;
    background: var(--ui-bg);
  }

  html.user-page :where(.bottom-nav, .figma-bottom-nav) {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    transform: none !important;
    width: var(--ui-sidebar-width) !important;
    max-width: none !important;
    height: 100dvh !important;
    padding: 32px 18px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-border) !important;
    background: var(--ui-surface) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    box-shadow: var(--ui-shadow-card);
  }

  html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item) {
    width: 100% !important;
    min-height: 64px;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    display: flex !important;
    align-items: center;
    gap: 14px;
    color: var(--ui-text-muted);
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item).active {
    background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-surface));
    color: var(--ui-accent);
  }

  html.user-page :where(.bottom-nav, .figma-bottom-nav) .material-symbols-outlined {
    margin: 0 !important;
    font-size: 28px !important;
  }

  html.user-page :where(.bottom-nav, .figma-bottom-nav) :where(.nav-item, .figma-nav-item)::after {
    display: none !important;
  }

  html.user-page:not(.workout-document):has(:where(.bottom-nav, .figma-bottom-nav)) body {
    padding-left: var(--ui-sidebar-width) !important;
  }

  html.user-page :where(.phone, .fitgram-shell, .messages-shell, .chat-view-shell, .profile-shell, body.plan-page > main) {
    width: min(var(--ui-desktop-content-max), calc(100vw - var(--ui-sidebar-width) - (2 * var(--ui-desktop-gutter)))) !important;
    max-width: var(--ui-desktop-content-max) !important;
    margin-inline: auto !important;
  }

  html.user-page body.profile-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html.user-page body.plan-page > header {
    left: auto;
    width: 100%;
    padding-inline: max(var(--ui-desktop-gutter), calc((100% - var(--ui-desktop-content-max)) / 2)) !important;
  }

  html.user-page body.plan-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: clip;
  }

  html.user-page body.plan-page > main,
  html.user-page .profile-main {
    padding-inline: var(--ui-desktop-gutter) !important;
  }

  html.user-page .profile-main {
    width: 100% !important;
    max-width: none !important;
  }

  html.user-page body.workout-page :where(#workoutMain, #workoutFooter > div) {
    max-width: 760px !important;
  }

  html.user-page body:not(.plan-page):not(.profile-page):not(.workout-page) > div[class*="max-w-md"] {
    max-width: 1040px !important;
  }

  /* Reusable desktop composition: main column plus an optional supporting rail. */
  html.user-page .ui-desktop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--ui-desktop-aside-width));
    gap: 24px;
    align-items: start;
  }

  html.user-page .ui-desktop-main {
    min-width: 0;
  }

  html.user-page .ui-desktop-aside {
    position: sticky;
    top: 24px;
    min-width: 0;
  }

  /* Home uses the wider canvas instead of preserving a 390px phone strip. */
  html.user-page .phone > :where(.topbar, .search-wrap) {
    width: 100%;
  }

  html.user-page .phone > .content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    gap: 24px;
    align-items: start;
  }

  html.user-page .phone > .content > .promo-carousel {
    grid-column: 1 / -1;
  }

  /* Community gets a true feed + supporting rail composition. */
  html.user-page body.fitgram-body .fitgram-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--ui-desktop-aside-width));
    grid-template-rows: auto auto auto 1fr;
    gap: 20px 24px;
    align-items: start;
    overflow: visible;
    background: transparent;
  }

  html.user-page body.fitgram-body .fitgram-header {
    grid-column: 1 / -1;
  }

  html.user-page body.fitgram-body .fitgram-feed {
    grid-column: 1;
    grid-row: 2 / span 3;
    min-width: 0;
  }

  html.user-page body.fitgram-body :where(.fitgram-stories, .fitgram-clubs, .fitgram-club-profile) {
    grid-column: 2;
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
  }

  html.user-page body.fitgram-body .fitgram-stories {
    grid-row: 2;
  }

  html.user-page body.fitgram-body .fitgram-clubs {
    grid-row: 3;
  }

  html.user-page body.fitgram-body .fitgram-club-profile {
    grid-row: 4;
  }

  html.user-page .athlete-shell {
    width: min(900px, calc(100vw - 64px)) !important;
    max-width: 900px !important;
    border-radius: var(--ui-radius-lg);
    margin-block: 32px;
  }

  html.user-page body.user-auth-page > div[class*="max-w-md"] {
    width: min(560px, calc(100vw - 64px)) !important;
    max-width: 560px !important;
  }

  html.user-page body.user-auth-page :where(.rounded-3xl, form) {
    font-size: 18px;
  }

  html.user-page body:has(> main[class*="max-w-md"]) > main {
    width: min(760px, calc(100vw - 64px)) !important;
    max-width: 760px !important;
    margin-block: 32px;
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    box-shadow: var(--ui-shadow-card);
  }
}

@media (min-width: 1400px) and (min-height: 760px) {
  :root { --ui-control-height: 60px; }
  html.user-page body { font-size: 18px; }
  html.user-page h1 { font-size: clamp(30px, 2.2vw, 44px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.user-page *, html.tv-page * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}