/* Desktop web workspace.
   Native Capacitor apps and touch-first tablet layouts intentionally keep the
   mobile/tablet interface above. */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  :root:not(.native-app)[data-app-theme] {
    --web-rail-width: 224px;
    --web-shell-gap: 28px;
    --web-shell-edge: 18px;
    --web-content-max: 1220px;
    --web-header-height: 82px;
  }

  :root:not(.native-app)[data-app-theme] body {
    min-width: 1100px;
    overflow-x: hidden;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .app-dashboard,
    .member-dashboard,
    .coach-dashboard
  ) {
    min-height: 100dvh;
    padding: 0 !important;
  }

  :root:not(.native-app)[data-app-theme] #app .screen-swipe-viewport {
    box-sizing: border-box;
    min-height: 100dvh;
    padding-right: var(--web-shell-gap);
    padding-left: calc(var(--web-rail-width) + var(--web-shell-gap) + var(--web-shell-edge));
    overflow-x: hidden;
  }

  :root:not(.native-app)[data-app-theme] #app .screen-swipe-panel.screen-swipe-panel-current {
    box-sizing: border-box;
    width: min(100%, var(--web-content-max)) !important;
    max-width: var(--web-content-max) !important;
    min-height: 100dvh;
    margin: 0 auto !important;
    padding: var(--web-shell-edge) 0 64px !important;
    gap: 22px !important;
    contain: layout style;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .screen-swipe-panel-previous,
    .screen-swipe-panel-next,
    .screen-swipe-dismiss-underlay
  ) {
    visibility: hidden !important;
  }

  :root:not(.native-app)[data-app-theme] #app .screen-swipe-panel-current > :is(
    .app-topbar,
    .member-native-topbar
  ) {
    position: sticky;
    top: var(--web-shell-edge);
    z-index: 30;
    box-sizing: border-box;
    min-height: var(--web-header-height);
    margin: 0 0 4px !important;
    padding: 18px 22px !important;
    border: 1px solid var(--rvk-hairline) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--theme-text) 4%, transparent), transparent 48%),
      color-mix(in srgb, var(--theme-surface) 93%, transparent) !important;
    box-shadow:
      0 18px 44px color-mix(in srgb, #000 26%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--theme-text) 6%, transparent) !important;
    backdrop-filter: blur(22px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.16) !important;
  }

  :root:not(.native-app)[data-app-theme] #app .app-page-title-button strong,
  :root:not(.native-app)[data-app-theme] #app .app-topbar h1 {
    font-size: clamp(34px, 3.2vw, 44px) !important;
    letter-spacing: -0.045em !important;
  }

  :root:not(.native-app)[data-app-theme] #app .topbar-actions {
    gap: 8px;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .app-header-icon-button,
    .profile-settings-button,
    .workout-search-button,
    .workout-create-button,
    .workout-add-button,
    .home-progress-more-button
  ) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-color: var(--rvk-hairline) !important;
    background: var(--rvk-surface-quiet) !important;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav {
    position: fixed !important;
    top: var(--web-shell-edge) !important;
    right: auto !important;
    bottom: var(--web-shell-edge) !important;
    left: var(--web-shell-edge) !important;
    z-index: 50;
    box-sizing: border-box;
    display: flex !important;
    width: var(--web-rail-width) !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px !important;
    margin: 0 !important;
    padding: 88px 12px 14px !important;
    border: 1px solid var(--rvk-hairline) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 16% 4%, color-mix(in srgb, var(--theme-accent) 9%, transparent), transparent 25%),
      linear-gradient(155deg, color-mix(in srgb, var(--theme-text) 4%, transparent), transparent 42%),
      color-mix(in srgb, var(--theme-surface) 96%, transparent) !important;
    box-shadow:
      0 24px 66px color-mix(in srgb, #000 42%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--theme-text) 7%, transparent) !important;
    backdrop-filter: blur(24px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav::before {
    position: absolute;
    top: 24px;
    left: 22px;
    color: var(--theme-text);
    content: "RVK FITNESS";
    font-size: 16px;
    font-weight: 820;
    letter-spacing: 0.08em;
    line-height: 1;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav::after {
    display: flex;
    min-height: 42px;
    align-items: flex-end;
    margin-top: auto;
    padding: 16px 13px 2px;
    border-top: 1px solid var(--rvk-hairline);
    color: var(--theme-muted);
    content: "MEMBER PORTAL";
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.13em;
    line-height: 1;
  }

  :root:not(.native-app)[data-app-theme] #app .coach-nav::after {
    content: "COACH WORKSPACE";
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav-indicator {
    display: none !important;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav button,
  :root:not(.native-app)[data-app-theme] #app .bottom-nav button.active {
    box-sizing: border-box;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: var(--theme-muted) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 690 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav button:is(:hover, :focus-visible) {
    border-color: var(--rvk-hairline) !important;
    background: var(--rvk-surface-quiet) !important;
    color: var(--theme-text) !important;
    transform: translateX(2px);
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav button.active {
    border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--rvk-hairline)) !important;
    background:
      linear-gradient(90deg, var(--theme-accent-soft), transparent 92%),
      var(--rvk-surface-quiet) !important;
    color: var(--theme-text) !important;
    box-shadow: inset 3px 0 0 var(--theme-accent) !important;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav button .nav-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
    transform: none !important;
  }

  :root:not(.native-app)[data-app-theme] #app .bottom-nav button.active .nav-icon {
    color: var(--theme-accent) !important;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .home-insights-section,
    .feed-section,
    .workout-hub,
    .nutrition-card-reorder-section,
    .member-profile-page,
    .shop-coming-soon
  ) {
    min-width: 0;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-story-page:has(.home-progress-command-card) {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.72fr);
    grid-template-rows: 286px auto !important;
    grid-template-areas:
      "command stats"
      "rhythm rhythm";
    gap: 14px !important;
    align-items: stretch;
    overflow: visible !important;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-story-page:has(.home-progress-command-card) .home-progress-command-card {
    grid-area: command;
    min-height: 286px !important;
    padding: 32px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-story-page:has(.home-progress-command-card) .home-progress-stat-strip {
    display: grid !important;
    grid-area: stats;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-story-page:has(.home-progress-command-card) .home-progress-stat-strip article {
    min-height: 0 !important;
    align-content: center;
    padding: 15px 18px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-story-page:has(.home-progress-command-card) .home-progress-stat-strip article strong {
    margin-top: 6px;
    font-size: 28px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-story-page:has(.home-progress-command-card) .home-progress-rhythm-card {
    grid-area: rhythm;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-command-copy h3 {
    font-size: clamp(46px, 5.2vw, 70px) !important;
  }

  :root:not(.native-app)[data-app-theme] #app .home-progress-score-ring-large {
    width: clamp(132px, 13vw, 164px) !important;
  }

  :root:not(.native-app)[data-app-theme] #app .activity-feed {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    align-items: start;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .program-list,
    .routine-list,
    .pinned-meals-list
  ) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(390px, 100%), 1fr)) !important;
    align-items: stretch;
    gap: 16px !important;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .program-list-card,
    .routine-card,
    .pinned-meal-card
  ) {
    height: 100%;
  }

  :root:not(.native-app)[data-app-theme] #app .workout-mode-switch {
    min-height: 78px;
  }

  :root:not(.native-app)[data-app-theme] #app .workout-mode-switch button {
    min-height: 66px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .member-profile-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  :root:not(.native-app)[data-app-theme] #app .member-chat-column {
    width: min(100%, 860px);
    margin: 0 auto;
  }

  :root:not(.native-app)[data-app-theme] #app .profile-hero-card {
    padding: 28px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .profile-content-grid:not(.profile-calendar-only) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px !important;
  }

  :root:not(.native-app)[data-app-theme] #app .profile-content-grid.profile-calendar-only {
    width: min(100%, 860px);
    justify-self: center;
  }

  :root:not(.native-app)[data-app-theme] #app .shop-coming-soon {
    min-height: calc(100dvh - var(--web-header-height) - 82px);
    border: 1px solid var(--rvk-hairline);
    border-radius: 24px;
    background:
      radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--theme-accent) 7%, transparent), transparent 34%),
      var(--rvk-surface-quiet);
  }

  :root:not(.native-app)[data-app-theme] #app .shop-coming-soon h2 {
    font-size: clamp(64px, 8vw, 112px) !important;
    letter-spacing: -0.065em !important;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .timeline-card,
    .program-list-card,
    .routine-card,
    .pinned-meal-card,
    .profile-timeline-link,
    .settings-list-row
  ):is(:hover, :focus-within) {
    border-color: var(--rvk-hairline-strong) !important;
    transform: translateY(-2px);
    box-shadow:
      0 22px 50px color-mix(in srgb, #000 34%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--theme-text) 7%, transparent) !important;
  }

  :root:not(.native-app)[data-app-theme] #profile-settings-modal {
    box-sizing: border-box;
    display: grid !important;
    place-items: center;
    padding: 24px !important;
    background: color-mix(in srgb, var(--theme-page) 76%, transparent) !important;
    backdrop-filter: blur(20px) saturate(0.92);
    -webkit-backdrop-filter: blur(20px) saturate(0.92);
  }

  :root:not(.native-app)[data-app-theme] #profile-settings-modal[hidden] {
    display: none !important;
  }

  :root:not(.native-app)[data-app-theme] #profile-settings-modal .profile-settings-modal {
    box-sizing: border-box;
    width: min(1080px, 100%) !important;
    height: min(900px, calc(100dvh - 48px)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--rvk-hairline-strong) !important;
    border-radius: 28px !important;
    background: var(--theme-page-art) !important;
    box-shadow: 0 34px 100px color-mix(in srgb, #000 66%, transparent) !important;
  }

  :root:not(.native-app)[data-app-theme] #profile-settings-modal .profile-settings-header {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 84px;
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--rvk-hairline) !important;
    background: color-mix(in srgb, var(--theme-page) 92%, transparent) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }

  :root:not(.native-app)[data-app-theme] #profile-settings-modal .profile-settings-header h2 {
    font-size: 36px !important;
  }

  :root:not(.native-app)[data-app-theme] #profile-settings-modal .member-settings-form {
    box-sizing: border-box;
    width: 100% !important;
    height: calc(100% - 84px);
    max-width: none !important;
    overflow-y: auto;
    padding: 22px 26px 36px !important;
  }

  :root:not(.native-app)[data-app-theme] :is(
    .modal-backdrop,
    .nutrition-goals-modal-backdrop,
    .invoice-modal,
    .app-feedback-backdrop
  ):not(#profile-settings-modal) {
    padding: 24px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  :root:not(.native-app)[data-app-theme] :is(
    .stats-modal,
    .meal-modal,
    .assign-modal,
    .routine-modal,
    .checkin-modal,
    .coach-public-modal,
    .admin-profile-modal,
    .workout-media-modal,
    .nutrition-goals-modal,
    .invoice-modal-card,
    .profile-avatar-modal,
    .profile-progress-settings-modal,
    .app-feedback-dialog
  ) {
    width: min(960px, 100%) !important;
    max-height: calc(100dvh - 48px) !important;
    border: 1px solid var(--rvk-hairline-strong) !important;
    border-radius: 26px !important;
    box-shadow: 0 32px 90px color-mix(in srgb, #000 62%, transparent) !important;
  }

  :root:not(.native-app)[data-app-theme] #app :is(
    .coach-overview-grid,
    .coach-metric-grid,
    .coach-client-grid,
    .coach-settings-grid,
    .coach-category-grid
  ) {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  }

  :root:not(.native-app)[data-app-theme] .auth-layout {
    width: min(1480px, 100%);
    min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(42px, 5vw, 82px) !important;
    gap: clamp(52px, 7vw, 110px) !important;
  }

  :root:not(.native-app)[data-app-theme] .auth-copy {
    align-self: center;
  }

  :root:not(.native-app)[data-app-theme] .auth-panel {
    align-self: center;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }
}