/* ================================================================
   PAGES-SHARED-LATE.CSS — Cross-page rules that must load AFTER the
   individual page files (home.css, login.css, logbook.css) — uniform
   page container padding and the exercise-GIF mobile-enlarge fix both
   need to win against page-specific overrides that come earlier in
   the original file's order, which splitting pages-shared.css into
   "early" and "late" halves preserves correctly.
   ================================================================ */

/* ================================================================
   UNIFORM PAGE PADDING
   ================================================================ */

.home-container,
.track-container,
.edit-container,
.admin-container,
.settings-page {
  padding: 16px;
}

/* ================================================================
   FIX: ENLARGE GIFS ON SMALL SCREENS (exercise library)
   ================================================================ */
/* ================================================================
   APP-WIDE GIF SIZING (feature request)
   ================================================================
   Previously the same exercise GIF rendered at three different sizes
   depending on which surface it appeared in AND on screen width:
   library table 100px desktop / 150px mobile (but the mobile value
   was defeated by a narrower column, so effectively ~64px in
   practice), swap modal 40px desktop / 96px mobile, picker modal 64px
   desktop / 96px mobile. The 96px mobile size was the one that looked
   right, so that's the size applied everywhere now — one rule per
   surface, no media queries, no size diverging between phone and
   desktop. All three surfaces carry !important because each is
   fighting either an inline style attribute on the img itself or a
   more specific id-scoped rule elsewhere; consolidating the size
   decision here means a future change to GIF sizing is one edit, not
   three files.
   ================================================================ */

/* Exercise library table */
#exerciseLibraryTable td:first-child img.exercise-gif {
  /* FIX (feature request: muscle column readability): 96px → 80px.
     Swap modal and picker modal keep the 96px size (see the rules
     below); only the library table gives up a bit so the muscle
     column can be widened from 80px to 100px without the total table
     width growing. Net: exercise names and muscle names both get more
     breathing room; the library GIF is still noticeably bigger than
     the 64px it was before the app-wide sizing pass. */
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

/* Swap modal (exercise info modal, "Swap" tab) */
.modal .swap-thumb {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Exercise picker modal (Add/Edit Exercise in Template Editor) */
.exercise-grid .ex-item img,
.modal .exercise-grid .ex-item img {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  max-height: 96px !important;
  object-fit: contain;
}
/* ── Session pills: fill row, readable on all screens ── */
.session-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: visible !important;
  gap: 4px;
  width: 100%;
}

.session-pill {
  /* FIX (session pill checkmark overflow): the pill label and the
     status icon used to share one flex container, which meant a long
     session name ("Lower 2 (extra)") pushed the status icon off the
     visible width. The icon is now absolutely positioned in the
     pill's top-right corner, so the label can use the full width and
     ellipsize cleanly without ever hiding the icon. The pill needs
     position:relative for that to work. */
  position: relative !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 6px !important;
  /* Reserve right padding so long labels don't collide with the
     absolutely-positioned status badge. */
  padding-right: 16px !important;
  font-size: clamp(0.7rem, 2.8vw, 0.9rem) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  min-height: 40px !important;
  border-radius: var(--radius-xs, 4px) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-variant) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

/* The status icon (checkmark or clock) lives in the top-right corner
   so a long session name can never push it out of view. */
.session-pill .pill-icon {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
}

.session-pill.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.session-pill:hover {
  border-color: var(--accent) !important;
}

/* ── Responsive: larger text on small screens ── */
@media (max-width: 480px) {
  .session-pill {
    font-size: clamp(0.65rem, 3.2vw, 0.8rem) !important;
    padding: 4px 4px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 380px) {
  .session-pill {
    font-size: clamp(0.55rem, 3.5vw, 0.7rem) !important;
    padding: 3px 3px !important;
    min-height: 32px !important;
  }
}
/* ================================================================
   iOS SAFARI — INPUT AUTO-ZOOM FIX
   ================================================================
   iOS Safari zooms the viewport whenever an input whose computed
   font-size is below 16px receives focus. The fix is to make those
   inputs exactly 16px on iOS only — the @supports probe below matches
   iOS Safari specifically (via -webkit-touch-callout) and excludes
   Android Chrome, which uses -webkit- prefixes too but doesn't have
   this zoom behavior.

   !important is required: the inputs across the app carry
   page-specific font-size rules (some ID-scoped, some inline) that
   would beat any selector here on cascade order otherwise.

   Scoped to Track's quick-log form and the plate-calculator inputs —
   the two places the client reported actual zoom friction. Login
   screen and settings inputs are left as-is deliberately: the login
   form's own 13px sizing is part of its typographic intent and
   already behaves acceptably under iOS's zoom; settings inputs are
   short text fields where the zoom is less disruptive. */
@supports (-webkit-touch-callout: none) {
  .quick-log-form input,
  .quick-log-form select,
  .note-editor-area textarea,
  .plate-calc-target-input,
  .plate-calc-option select,
  #editWeight,
  #editReps,
  #editRir,
  #editStack,
  #editExtra,
  #editType {
    font-size: 16px !important;
  }
}