/* Dual Performance — mobile finish pass
   Loaded last. Every rule is phone-scoped so desktop remains unchanged. */

@media (max-width: 720px) {
  :root {
    --dp-mobile-edge: 12px;
    --dp-mobile-nav-h: 68px;
    --dp-mobile-header-row: 52px;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: calc(var(--dp-mobile-header-row) + var(--dp-safe-top));
    scroll-padding-bottom: calc(var(--dp-mobile-nav-h) + var(--dp-safe-bottom));
  }
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    background:
      radial-gradient(circle at 100% 0, rgba(121,195,232,.075), transparent 24rem),
      var(--bg);
  }

  main,
  [id^="tab-"][id$="-content"],
  .triage-shell,
  .main,
  .plan-section,
  .coaches-section,
  .sync-section,
  .apps-section,
  .notif-section,
  .sched-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  input, select, textarea, button, table, img, svg { max-width: 100%; }

  /* Installed iPhones draw into the status-bar area. Keep every header control
     below the notch instead of forcing a fixed 54px box over the system clock. */
  header,
  body[data-theme="light"] header {
    min-height: calc(var(--dp-mobile-header-row) + var(--dp-safe-top)) !important;
    height: auto !important;
    padding: calc(6px + var(--dp-safe-top)) var(--dp-mobile-edge) 6px !important;
    border-bottom-color: rgba(146,210,237,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }
  header .logo-mark-sm {
    width: 27px !important;
    height: 27px !important;
  }
  header .h-right { gap: 4px !important; }
  header .coach-select {
    max-width: 94px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding-inline: 9px 22px !important;
    border-color: rgba(255,255,255,.11) !important;
    background-color: rgba(255,255,255,.045) !important;
  }
  header #manage-athletes-btn,
  header #refresh-btn,
  header .dp-theme-switch {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex-basis: 32px !important;
    border-color: rgba(255,255,255,.11) !important;
    background: rgba(255,255,255,.045) !important;
  }

  .dp-access-gate {
    align-items: center;
    padding:
      calc(14px + var(--dp-safe-top))
      var(--dp-mobile-edge)
      calc(14px + var(--dp-safe-bottom));
    overflow-y: auto;
  }
  .dp-access-card {
    gap: 8px;
    padding: 22px 18px;
    border-radius: 16px;
    max-height: calc(100dvh - var(--dp-safe-top) - var(--dp-safe-bottom) - 28px);
    overflow-y: auto;
  }
  .dp-access-logo { width: 190px; margin-bottom: 10px; }
  .dp-access-card h1 { font-size: 26px; }
  .dp-access-card p { margin-bottom: 8px; font-size: 13px; }
  .dp-access-card .dp-access-remember {
    min-height: 46px;
    margin-top: 1px;
    padding: 7px 2px;
  }
  .dp-access-card .dp-access-remember input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    flex-basis: 20px;
  }
  .dp-access-remember strong { font-size: 13px; }
  .dp-access-card .dp-access-remember small { font-size: 10.5px; }

  /* Shared mobile rhythm */
  .main,
  .plan-section,
  .coaches-section,
  .sync-section,
  .apps-section,
  .notif-section,
  .sched-section {
    padding-left: var(--dp-mobile-edge) !important;
    padding-right: var(--dp-mobile-edge) !important;
    padding-bottom: calc(var(--dp-mobile-nav-h) + 22px + var(--dp-safe-bottom)) !important;
  }

  .dp-mobile-section-head {
    margin: 16px 0 0 !important;
    padding: 0 var(--dp-mobile-edge) 7px !important;
  }
  .dp-mobile-section-head h1 {
    font-size: clamp(22px, 6.4vw, 26px) !important;
    line-height: 1 !important;
  }
  .dp-mobile-section-head p {
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* The Today screen is the mobile typography reference: Geist for readable
     interface copy and headings, with Geist Mono reserved for dates, metrics
     and small metadata. Legacy tabs previously mixed condensed, mono and UI
     treatments for equivalent controls, which made each destination feel like
     a different product. */
  #tab-athletes-content,
  #tab-planning-content,
  #tab-nut-content,
  #tab-coaches-content,
  #tab-sync-content,
  #tab-apps-content,
  #tab-notif-content,
  #tab-send-content {
    font-family: var(--font-ui) !important;
  }

  .dp-mobile-section-head h1,
  .coach-actions-head h2,
  .coach-action-dialog-head h2,
  .plan-card-title,
  .plan-lib-name,
  .nut-wk,
  .coach-name,
  .sync-name,
  .app-name,
  .fpc-name,
  .week-jump-main {
    font-family: var(--font-ui) !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
    text-transform: none !important;
  }

  .plan-chip,
  .nut-athlete-tab,
  .plan-action-btn,
  .plan-add-btn,
  .nut-save,
  .nut-del,
  .app-accept-btn,
  .app-reject-btn,
  .notif-mark-seen,
  .cn-send-btn,
  .coach-action-new,
  .coach-action-filters button,
  .coach-action-complete,
  .dp-mobile-filter-toggle,
  .sf,
  .fp-back,
  .fp-nav-btn,
  .fpc-act-btn,
  .week-jump-btn {
    font-family: var(--font-ui) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .dp-mobile-section-kicker,
  .plan-week-meta,
  .nut-meta,
  .plan-day-head,
  .app-meta,
  .app-field-lbl,
  .sync-table tbody td::before,
  .nut-table .nut-row td::before,
  .sum-num,
  .cc-score-num,
  .fpc-score-val,
  .sync-score-num,
  .fp-idx {
    font-family: var(--font-data) !important;
    font-variant-numeric: tabular-nums;
  }

  /* Today should feel like a mobile command screen, not a desktop hero squeezed
     into a phone. */
  .triage-page {
    min-height: calc(100dvh - var(--dp-mobile-header-row)) !important;
    padding-bottom: calc(var(--dp-mobile-nav-h) + 18px + var(--dp-safe-bottom)) !important;
  }
  .triage-shell {
    padding: 20px var(--dp-mobile-edge) 24px !important;
  }
  .triage-hero { margin-bottom: 16px !important; }
  .triage-eyebrow { margin-bottom: 6px !important; font-size: 8px !important; }
  .triage-hero h1 {
    max-width: 330px;
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }
  .triage-hero p {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .triage-date {
    margin-top: 10px !important;
    padding: 6px 9px !important;
    font-size: 8px !important;
  }
  .triage-state { min-height: 180px !important; border-radius: 14px !important; }
  .triage-summary { gap: 6px !important; margin-bottom: 10px !important; }
  .triage-stat { min-height: 72px !important; padding: 11px 8px !important; }
  .triage-stat-value { font-size: 21px !important; }
  .triage-stat-label { margin-top: 6px !important; font-size: 8px !important; line-height: 1.25; }
  .triage-row { border-radius: 14px !important; }

  /* Overview filter: one quiet row until the coach asks for more. */
  #filter-bar,
  body[data-theme="light"] #filter-bar {
    margin: 8px var(--dp-mobile-edge) 0 !important;
    padding: 8px !important;
    gap: 7px !important;
    border-radius: 14px !important;
  }
  #filter-bar > .search-input {
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }
  .dp-mobile-filter-toggle {
    min-height: 42px !important;
    flex-basis: 78px !important;
    border-color: rgba(146,210,237,.24) !important;
    background: rgba(146,210,237,.08) !important;
    color: #bde7f8 !important;
    font-size: 9px !important;
  }
  #filter-bar > .filter-label + .sf-group {
    display: none !important;
    margin: 0 !important;
    padding: 2px 10px 2px 0 !important;
  }
  #filter-bar.mobile-expanded > .filter-label + .sf-group {
    display: flex !important;
  }
  #filter-bar .sf {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 10px !important;
  }
  #filter-bar.mobile-expanded > .sort-select {
    min-height: 42px !important;
  }

  /* Overview heading and date read as a single header, not two floating items. */
  .dp-page-intro {
    align-items: center !important;
    margin: 3px 2px 11px !important;
    padding-top: 5px !important;
  }
  .dp-page-title {
    max-width: 70vw;
    font-size: clamp(20px, 5.7vw, 24px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .dp-intro-date {
    color: var(--muted) !important;
    background: var(--surface2) !important;
    border-color: var(--border) !important;
  }

  /* Priority panel: remove the washed-out block and restore metric hierarchy. */
  .cc-panel { overflow: hidden !important; }
  .cc-hero,
  body[data-theme="light"] .cc-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px 8px !important;
    padding: 14px !important;
    color: var(--text) !important;
    background: linear-gradient(155deg, var(--surface), var(--surface2)) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: inset 0 2px 0 rgba(121,195,232,.28) !important;
  }
  .cc-kicker { color: var(--brand-text) !important; }
  .cc-title {
    color: var(--text) !important;
    font-size: 20px !important;
    line-height: 1.03 !important;
  }
  .cc-toggle {
    grid-column: 2;
    grid-row: 1;
    min-height: 32px;
    padding: 6px 9px !important;
    color: var(--brand-text) !important;
    background: var(--brand-bg) !important;
    border-color: var(--brand-border) !important;
    font-family: var(--font-ui) !important;
    font-size: 9px !important;
    letter-spacing: .02em !important;
  }
  .cc-score {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }
  .cc-score-card,
  body[data-theme="light"] .cc-score-card {
    min-height: 62px !important;
    padding: 9px 5px !important;
    color: var(--text) !important;
    background: var(--surface2) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }
  .cc-score-num { font-size: 23px !important; }
  .cc-score-lbl,
  body[data-theme="light"] .cc-score-lbl {
    margin-top: 5px !important;
    color: var(--muted) !important;
    font-family: var(--font-ui) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
  }
  .command-center.collapsed .cc-hero { border-bottom: 0 !important; }
  .cc-body { background: var(--surface) !important; }
  .cc-athlete { padding-inline: 12px !important; }

  /* Coaching action queue: readable warning, stable touch rows, no clipped filters. */
  .coach-actions { border-radius: 14px !important; }
  .coach-actions-head { padding: 14px 13px 11px !important; }
  .coach-actions-head h2 { font-size: 20px !important; }
  .coach-action-new { min-height: 36px; }
  .coach-data-warning,
  body[data-theme="light"] .coach-data-warning {
    margin: 0 13px 11px !important;
    padding: 10px 11px !important;
    color: var(--warn) !important;
    background: color-mix(in srgb, var(--warn) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--warn) 24%, transparent) !important;
    line-height: 1.45 !important;
  }
  .coach-action-filters {
    padding: 0 13px 11px !important;
    scrollbar-width: none;
  }
  .coach-action-filters::-webkit-scrollbar { display: none; }
  .coach-action-filters button { min-height: 32px; }
  .coach-action-row { align-items: stretch !important; }
  .coach-action-main { min-height: 62px; }
  .coach-action-complete { align-self: center; min-height: 34px; }

  /* Athlete cards get clear separation and reliable data contrast. */
  #grid.table-mode .dash-trow {
    gap: 10px 7px !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(15,35,49,.06);
  }

  /* Contain the dense editing and data surfaces. Purposeful chip rails may
     scroll; cards, forms and rows may not push the page wider than the phone. */
  .plan-toolbar,
  .plan-grid,
  .plan-day,
  .plan-card,
  .nut-table-wrap,
  .nut-row,
  .sync-intro,
  .sync-table-wrap,
  .sync-table tbody tr,
  .apps-grid,
  .app-card,
  .coaches-grid,
  .coach-card,
  .cn-composer,
  .cn-row,
  .coach-actions,
  .coach-action-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .plan-card-title,
  .app-name,
  .app-field-val,
  .coach-action-title,
  .coach-action-meta,
  .sync-muted,
  .cn-composer label {
    overflow-wrap: anywhere;
  }
  #grid.table-mode .dash-trow td:not(:first-child)::before {
    color: var(--muted) !important;
    font-family: var(--font-ui) !important;
    letter-spacing: .05em !important;
  }
  #grid.table-mode .tname { font-size: 19px !important; }

  /* Mobile keeps full desktop data parity. Every populated summary field is a
     compact stat tile; empty desktop cells remain visible as an honest dash. */
  #grid.table-mode .dash-trow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #grid.table-mode .dash-trow td:nth-child(n+2):not(:last-child),
  #grid.table-mode .dash-trow td:not(:first-child):not(:last-child):has(> .tdim:only-child) {
    display: flex !important;
    min-height: 52px;
    justify-content: center;
    padding: 7px !important;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 9px;
  }
  #grid.table-mode .dash-trow td:nth-child(n+2):not(:last-child) > * {
    max-width: 100%;
  }
  #grid.table-mode .dash-trow td:first-child {
    position: relative;
    padding-right: 88px !important;
  }
  #grid.table-mode .dash-trow td:first-child::after {
    content: 'Open profile →';
    position: absolute;
    top: 2px;
    right: 0;
    color: var(--brand-text);
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .01em;
    text-transform: none;
  }
  #grid.table-mode .dash-trow td:last-child {
    padding-top: 8px !important;
    border-top: 1px solid var(--border);
  }
  #grid.table-mode .trow-expand {
    display: none !important;
  }

  /* Dedicated athlete screen: no horizontal rails, compact 3-up metrics, and
     a two-row sticky toolbar whose back action never leaves the viewport. */
  #fp-overlay {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior: contain;
  }
  #fp-overlay .fp-topbar {
    position: sticky !important;
    top: 0;
    z-index: 20;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: calc(56px + var(--dp-safe-top)) !important;
    padding: calc(8px + var(--dp-safe-top)) 10px 8px !important;
  }
  #fp-overlay .fp-back {
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #fp-overlay .fp-nav {
    display: grid !important;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 3px !important;
  }
  #fp-overlay .fp-nav-btn {
    min-height: 40px;
    padding: 7px 8px !important;
    font-size: 9px;
  }
  #fp-overlay .fp-idx {
    min-width: 26px !important;
    font-size: 8px;
    text-align: center;
  }
  #fp-overlay .fp-topbar > div:last-child {
    display: none !important;
  }
  #fp-overlay .fp-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 8px calc(24px + var(--dp-safe-bottom)) !important;
    overflow-x: clip;
  }
  #fp-overlay .fpc-hero {
    margin-bottom: 9px !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  #fp-overlay .fpc-name {
    font-size: clamp(28px, 8.6vw, 34px) !important;
    line-height: 1 !important;
  }
  #fp-overlay .fpc-hero-actions {
    gap: 6px !important;
  }
  #fp-overlay .fpc-expand-all {
    display: inline-flex !important;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    color: var(--brand-text);
    background: var(--brand-bg);
    border-color: var(--brand-border);
  }
  #fp-overlay .fpc-section {
    margin-bottom: 9px !important;
    padding: 13px 11px !important;
    border-radius: 12px !important;
  }
  #fp-overlay .fpc-section-title {
    margin-bottom: 11px !important;
    padding-bottom: 9px !important;
    font-size: 9px !important;
  }
  #fp-overlay .fpc-scores {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-inline: -11px !important;
    padding: 8px 11px !important;
  }
  #fp-overlay .fpc-score {
    min-width: 0;
    padding: 10px 4px !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px;
    background: var(--surface2);
  }
  #fp-overlay .fpc-score-lbl {
    margin-bottom: 5px;
    font-size: 7px;
  }
  #fp-overlay .fpc-score-val {
    font-size: 24px !important;
  }
  #fp-overlay .texp-week-switch,
  #fp-overlay .dwn-controls,
  #fp-overlay .week-jump-controls {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #fp-overlay .texp-week-btn,
  #fp-overlay .dwn-btn,
  #fp-overlay .week-jump-btn {
    min-width: 0;
    padding-inline: 4px !important;
    white-space: normal !important;
  }
  #fp-overlay img,
  #fp-overlay svg,
  #fp-overlay table {
    max-width: 100%;
  }
  /* The old phone layer removed day-specific Strava detail entirely. Keep it
     in the one-column timeline, directly below that day's coaching data. */
  #fp-overlay .wd-strava-col {
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  #fp-overlay .wd-strava-col:empty {
    display: none !important;
  }

  /* Long chip rails stay swipeable without clipping the selected athlete. */
  .plan-ath-chips,
  .nut-athlete-tabs {
    scroll-padding-left: 2px;
    scrollbar-width: none;
  }
  .plan-ath-chips::-webkit-scrollbar,
  .nut-athlete-tabs::-webkit-scrollbar { display: none; }
  .plan-chip,
  .nut-athlete-tab { min-height: 38px !important; }

  /* Forms and tables use one type scale on phones. */
  input, select, textarea, button { font-family: var(--font-ui) !important; }
  .cn-composer,
  .plan-toolbar,
  .nut-table-wrap,
  .sync-intro,
  .sync-table-wrap,
  .app-card,
  .coach-card { border-radius: 14px !important; }

  /* Application headers follow the active palette instead of staying black in light mode. */
  body[data-theme="light"] .app-card-head {
    color: var(--text) !important;
    background: linear-gradient(180deg, var(--surface2), var(--surface3)) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body[data-theme="light"] .app-name { color: var(--text) !important; }
  body[data-theme="light"] .app-meta { color: var(--muted) !important; }

  /* Bottom navigation is a true app bar with 48px touch targets. */
  .dp-mobilenav {
    min-height: var(--dp-mobile-nav-h) !important;
    padding: 5px 8px calc(5px + var(--dp-safe-bottom)) !important;
    gap: 2px !important;
    border-top-color: rgba(146,210,237,.14) !important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.32) !important;
  }
  .dp-mnav-item {
    min-height: 48px;
    padding: 4px 2px 3px !important;
    border-radius: 12px !important;
  }
  .dp-mnav-item.active { background: transparent !important; }
  .dp-mnav-ic { width: 25px !important; height: 25px !important; }
  .dp-mnav-ic svg { width: 21px !important; height: 21px !important; }
  .dp-mnav-item.active .dp-mnav-ic::before {
    display: block !important;
    inset: -4px -11px !important;
    background: rgba(121,195,232,.13) !important;
  }
  .dp-mnav-lbl {
    font-family: var(--font-ui) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
  }
  .dp-sheet-cell {
    min-height: 76px;
    padding: 11px 5px !important;
    font-family: var(--font-ui) !important;
    font-weight: 700;
  }
  .dp-sheet {
    padding: 7px var(--dp-mobile-edge) calc(14px + var(--dp-safe-bottom)) !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .dp-sheet-title { margin-bottom: 10px !important; }
  .dp-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }

  /* Never let an app-update notice cover the fixed navigation. */
  body > .dp-app-toast[role="status"] {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--dp-mobile-nav-h) + 10px + var(--dp-safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    justify-content: space-between !important;
    gap: 9px !important;
    padding: 10px 11px !important;
    border-radius: 12px !important;
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
  }
  body > .dp-app-toast[role="status"] button { min-height: 34px; }
}

@media (max-width: 380px) {
  :root { --dp-mobile-edge: 10px; }
  header .coach-select { max-width: 78px !important; }
  .dp-page-title { max-width: 64vw; }
  .cc-score { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cc-score-card { min-height: 58px !important; }
  .cc-score-num { font-size: 21px !important; }
  .coach-actions-head { gap: 8px !important; }
  .coach-action-new { padding-inline: 8px !important; }
  #fp-overlay .fp-back { font-size: 9px; padding-inline: 7px; }
  #fp-overlay .fp-nav-btn { padding-inline: 6px !important; }
  .triage-hero h1 { font-size: 29px !important; }
  .triage-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .dp-mnav-lbl { font-size: 8.5px !important; }
}