/*
 * main.css — page-specific styles for index.html (MainActivity port).
 * Source of truth: SPEC.md 7.1/7.2 (activity_main.xml portrait/landscape)
 * and Part 2 (functionality, §5 MainActivity.kt). Structural/shared classes
 * (.page, .app-header, .icon-btn, .card, .btn-pill, .status-dot,
 * .progress-track/.progress-fill, .dialog-*, .monospace) come from
 * css/base.css / css/dialog.css and are reused, not redefined, here.
 *
 * SPEC.md 7.2 notes this screen is "a strong candidate for a single
 * responsive layout driven by CSS" instead of two separate XML variants —
 * that's exactly what's done here: one DOM, a landscape media query at the
 * bottom re-flows the two big cards into a row and shrinks a few sizes.
 *
 * Layout note (2026-09-29, SPA + fixed-layout task): `.page`'s own
 * `display:flex; flex-direction:column;` + height used to live here, but is
 * now supplied by the shared `.app-view` / `.app-view--fixed` classes in
 * css/base.css (this view's root carries both `.page.app-view
 * .app-view--fixed`) — `.app-view--fixed` sets `height: 100dvh; overflow:
 * hidden;` instead of the old `min-height: 100vh;`, per the task brief:
 * Android's MainActivity has no ScrollView, so this screen must fill
 * exactly the viewport with no page scroll, not just have a minimum height.
 */

/* ---------------- Start/Stop control (SPEC 7.1 §2) ---------------- */
.start-stop-area {
  position: relative;
  width: 100%;
  height: 84px;
  margin-top: 24px;
  flex-shrink: 0;
}

/*
 * Bug found 2026-09-29 (user report: "contorno negro visible" on the START
 * button): this used to carry `box-shadow: 0 1px 2px rgba(0,0,0,0.35)` to
 * mimic Android's elevation=2dp on bg_button_pill. But every .btn-pill
 * (base.css) is deliberately borderless AND fill-less per SPEC.md 4 ("no
 * relleno en absoluto") — it floats directly on the page texture with no
 * solid backing shape. A drop shadow cast by a fully transparent shape has
 * nothing to "lift off" the page, so instead of reading as elevation it
 * just traced a faint dark outline around the button's rounded-pill
 * silhouette, which is exactly the unwanted black contour reported. This is
 * the only .btn-pill anywhere in the app that had a shadow like this (every
 * other box-shadow in the CSS sits on an element with an actual solid
 * background — dialogs/toasts — where it reads correctly); removed here to
 * match the rest of the borderless/fill-less pill-button design.
 */
.start-stop-btn {
  width: 100%;
  height: 100%;
}

.paused-actions {
  display: flex;
  width: 100%;
  height: 100%;
}

.paused-actions__btn {
  flex: 1;
  height: 100%;
}

#btnResume {
  margin-right: 6px;
}

#btnFinish {
  margin-left: 6px;
}

/* Finish button armed state (SPEC §5.4: swaps to bg_button_pill_danger). */
#btnFinish.is-armed {
  color: var(--color-danger-red);
}

/* Pause (btnStartStop while RUNNING) armed state — warning color per §5.4. */
#btnStartStop.is-armed {
  color: var(--color-warning-yellow);
}

/* Status indicator row (.status-row/.status-row__label, SPEC 7.1 §3) was
   removed 2026-09-29 per explicit user request — the markup that used these
   classes is gone from every HTML shell, so the rules were deleted here too
   (code audit, 2026-09-29). */

/* ---------------- lapCounterCard (SPEC 7.1 §4) ---------------- */
.lap-counter-card {
  margin-top: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 20px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  min-height: 160px;
}

.lap-counter-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Crossfade "ghost overlay" technique (SPEC §5.10): the real element fades
   its own opacity in/out; a cloned ghost is stacked on top via this frame
   and fades the opposite direction, then removed. See main.js crossfadeText(). */
.crossfade-frame {
  position: relative;
  width: 100%;
}

.crossfade-frame__ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 350ms ease;
}

.lap-count {
  width: 100%;
  font-size: clamp(72px, 26vw, 130px);
  font-weight: bold;
  line-height: 1;
  color: var(--color-text-primary);
  transition: opacity 350ms ease;
}

.lap-counter-label {
  margin-top: 4px;
  letter-spacing: 0.25em;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-aqua);
  transition: opacity 350ms ease;
}

/* ---------------- trainingBar (SPEC 7.1 §5) ---------------- */
.training-bar {
  margin-top: 14px;
  padding: 6px 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  flex-shrink: 0;
}

.training-bar__row {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-primary);
}

.training-bar__row span {
  flex: 1;
}

.training-bar__row span:first-child {
  text-align: left;
}

.training-bar__row span:nth-child(2) {
  text-align: center;
}

.training-bar__row span:last-child {
  text-align: right;
}

.training-bar__track {
  margin-top: 6px;
}

.training-bar__next {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-primary);
}

/* ---------------- Session-stats card (SPEC 7.1 §6) ---------------- */
.session-stats-card {
  margin-top: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.stats-label {
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text-muted);
}

/* SPEC §5.9: decorative font has unequal digit widths, causing horizontal
   "dancing" as the time changes; SPEC explicitly allows font-variant-numeric:
   tabular-nums as "the simplest equivalent" web port instead of a manual
   fixed-width-per-character cell technique. */
.session-time-digits {
  margin-top: 4px;
  font-size: 64px;
  font-weight: bold;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.pace-section {
  margin-top: 18px;
}

.pace-label {
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: bold;
  color: var(--color-text-muted);
  transition: opacity 350ms ease, color 350ms ease;
}

.pace-value {
  margin-top: 4px;
  font-size: 34px;
  font-weight: bold;
  color: var(--color-aqua);
  transition: opacity 350ms ease, color 350ms ease;
}

/* Gold = "personal best" convention app-wide (SPEC §5.10). */
.pace-value.is-best,
.pace-label.is-best {
  color: var(--color-gold);
}

/* signalLogCard (.signal-log-card/.debug-line/.signal-history/
   .signal-history__text, SPEC 7.1 §7) was removed 2026-09-29 along with the
   rest of developer mode, per explicit user request — see
   DEVELOPER_MODE_RESTORE.md at the project root for how to bring it back. */

/* ---------------- trainingExpandedOverlay (SPEC 7.1 §8) ---------------- */
.training-expanded-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
}

/*
 * Bug found 2026-09-29 (user report the panel "todavía no me aparece" —
 * see js/pages/main.js's toggleTrainingBarExpanded() comment for the full
 * writeup). This used to be positioned with `margin-top: 20vh` inside a
 * flex-centered overlay, which just anchors it near the top of the SCREEN,
 * regardless of where the training bar itself actually is — unlike
 * Android's showTrainingExpandedOverlay() (MainActivity.kt), which
 * measures the bar's real on-screen position and centers the panel ON TOP
 * of it. Switched to `position: fixed` with `top` set dynamically by that
 * same JS function, matching Android; `left`/`right` + `margin: 0 auto`
 * keep the same horizontal centering/max-width this always had.
 */
.training-expanded-panel {
  position: fixed;
  left: 20px;
  right: 20px;
  margin: 0 auto;
  max-width: 440px;
  max-height: 55vh;
  overflow-y: auto;
  background-color: var(--color-card-bg);
  background-image: var(--bg-texture-image);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.training-expanded-title {
  margin-bottom: 12px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text-primary);
}

.training-interval-row {
  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.training-interval-row--current {
  font-weight: bold;
  color: var(--color-aqua);
}

/* User request 2026-09-29: completed intervals should look "a bit more
   transparent" than pending ones, on top of the existing muted-color
   differentiation (see .training-interval-row--completed's own JS-side
   comment for how this compares to the Android original). */
.training-interval-row--completed {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* ---------------- trainingFlashOverlay (SPEC 7.1 §9) ---------------- */
.training-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--color-aqua);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  animation: training-flash-blink 950ms ease-in-out infinite alternate;
}

@keyframes training-flash-blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}

.training-flash-overlay__label {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--color-bg-top);
}

.training-flash-overlay__next {
  margin-top: 14px;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-bg-top);
}

.training-flash-overlay__tap {
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-bg-top);
}

/* ---------------- sessionSavedToast (SPEC 7.1 §10) ---------------- */
.session-saved-toast {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 16px;
  border-radius: 20px;
  background: var(--color-card-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 200ms ease;
  max-width: 440px;
  margin: 0 auto;
}

.session-saved-toast.is-visible {
  opacity: 1;
}

.session-saved-toast__logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  /* Same mask-image + background-color fix as .app-header__logo in
     base.css (2026-09-29) — ic_app_logo.png is a solid-white+alpha image,
     invisible as a plain <img> in light theme. Tinted var(--color-aqua)
     here too, even though this toast's card background doesn't change with
     theme, for consistency with every other use of this logo. */
  display: block;
  background-color: var(--color-aqua);
  mask-image: url('../assets/images/ic_app_logo.png');
  -webkit-mask-image: url('../assets/images/ic_app_logo.png');
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

#tvSessionSavedMessage {
  font-size: 15px;
  color: var(--color-text-primary);
}

/* ---------------- Generic toast (not in original Android layout — see
   main.js showToast(), used for camera-permission / "no active session" /
   visibility-auto-pause notices that the native app shows as
   Toast.makeText()). Styled like a small dialog box per the task brief. --- */
.generic-toast {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 1200;
  margin: 0 auto;
  max-width: 440px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 200ms ease;
}

.generic-toast.is-visible {
  opacity: 1;
}

/* ---------------- Landscape responsive re-flow (SPEC 7.2) ---------------- */
@media (orientation: landscape) and (max-height: 500px) {
  .page {
    padding: 8px 12px;
  }

  .app-header--main {
    height: 38px;
  }

  .app-header--main .app-header__logo {
    width: 20px;
    height: 20px;
  }

  .app-header--main .app-header__title {
    font-size: 14px;
  }

  .start-stop-area {
    height: 38px;
    margin-top: 0;
  }

  .start-stop-btn {
    font-size: 14px;
  }

  .lap-counter-card,
  .session-stats-card {
    margin-top: 8px;
  }

  .signal-log-card {
    margin-top: 8px;
    padding: 8px;
  }

  .signal-history {
    height: 52px;
  }

  .signal-history__text {
    font-size: 10px;
  }
}