/*
 * css/components/session-guard.css
 * Session back-gesture guard — confirmation card styles
 *
 * 28 Sep 2026 v3
 *
 * CHANGELOG
 * 28 Sep 2026 v3 — SMOOTH-P2c. .session-exit-title: the coach's sheet is
 *   a titled dialog ("Leave this session?") with three plain choices.
 * 30 Jul 2026 v2 — Added .session-exit-* styles. Found missing while
 *   fixing the gym exit-guard gap (workout.js, same session): the
 *   on-screen Exit button's coach-voiced confirmation card (a SEPARATE
 *   overlay from this file's own .sg-* back-gesture card, defined locally
 *   in each session view's own showExitConfirm() function) had no CSS
 *   anywhere in the repo. Affected all 7 files that use this pattern —
 *   core-session.js, yoga-session.js, cycle-session.js, running-session.js,
 *   swim-session.js, walk-session.js (all since BUILD-3, 23 Jul), and
 *   workout.js (new this session). Was rendering as unstyled raw HTML —
 *   no backdrop, no card containment, unclear focus boundary. Styled to
 *   match the existing .sg-* card's visual language exactly (same
 *   backdrop, slide-up, coach-row layout, reduced-motion support) for
 *   consistency between the two overlays a user might see in the same
 *   session. Buttons use the app's existing .btn/.btn-primary/.btn-ghost/
 *   .btn-full base classes (already WCAG 2.2 AA touch-target compliant
 *   app-wide) — no separate button sizing needed here.
 * 21 May 2026 v1 — Added .sg-exit-discard styling for third exit option
 *                  ("Exit without saving"). Visually distinct from
 *                  "Exit and save progress" — smaller, muted text, no border.
 *                  Both ghost buttons maintain 48px min touch target.
 * 20 May 2026 v1 — Initial implementation. Backdrop + card slide-up.
 *                  Reduced-motion support. Coach icon row.
 */

/* ── Backdrop ──────────────────────────────────────────────────────────────── */

.sg-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
  animation: sg-fade-in 200ms ease forwards;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.sg-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--color-surface, #1A2332);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 20px 20px 0 0;
  padding: var(--space-4, 1.5rem) var(--space-4, 1.5rem) calc(var(--space-4, 1.5rem) + env(safe-area-inset-bottom));
  animation: sg-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Coach row ─────────────────────────────────────────────────────────────── */

.sg-coach-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1.5rem);
}

.sg-coach-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

.sg-coach-text {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5;
  color: var(--color-text-primary, #FFFFFF);
  margin: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.sg-btn {
  min-height: 48px; /* WCAG 2.2 AA — 44px minimum, 48px preferred */
  margin-bottom: var(--space-2, 0.5rem);
  width: 100%;
}

/* "Exit and save progress" — ghost button, standard colour */
.sg-exit-save {
  color: var(--color-teal, #1A8C8C);
  border-color: var(--color-teal, #1A8C8C);
}

.sg-exit-save:hover,
.sg-exit-save:focus-visible {
  background: rgba(26, 140, 140, 0.08);
}

/* "Exit without saving" — smallest visual weight, muted colour, no border */
/* This is a deliberate downgrade — the option is available but not encouraged */
.sg-exit-discard {
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.5));
  border-color: transparent;
  font-size: var(--font-size-sm, 0.875rem);
  margin-bottom: 0;
}

.sg-exit-discard:hover,
.sg-exit-discard:focus-visible {
  color: var(--color-text-primary, #FFFFFF);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Animations ────────────────────────────────────────────────────────────── */

@keyframes sg-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes sg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Honour prefers-reduced-motion — no animations for users who need it */
@media (prefers-reduced-motion: reduce) {
  .sg-backdrop,
  .sg-card {
    animation: none;
  }
}

/* ── On-screen Exit confirmation overlay ──────────────────────────────────── */
/* Separate from .sg-* above (which handles the back-gesture path only).
 * This is the local showExitConfirm() card each session view renders for
 * its own on-screen Exit/Back button tap. Two options only (Stay / Exit
 * and save) — no "Exit without saving" here by design, matching the
 * simpler on-screen-tap intent vs. the more cautious back-gesture path.
 * Visual language intentionally matches .sg-* exactly. Added 30 Jul 2026. */

.session-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
  animation: sg-fade-in 200ms ease forwards;
}

.session-exit-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--color-surface, #1A2332);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 20px 20px 0 0;
  padding: var(--space-4, 1.5rem) var(--space-4, 1.5rem) calc(var(--space-4, 1.5rem) + env(safe-area-inset-bottom));
  animation: sg-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.session-exit-coach-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1.5rem);
}

.session-exit-coach-text {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5;
  color: var(--color-text-primary, #FFFFFF);
  margin: 0;
}

.session-exit-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .session-exit-overlay,
  .session-exit-card {
    animation: none;
  }
}

/* ── "Exit without saving" in the per-view dialogs (EXIT-1, 12 Aug 2026) ──
   Nine views each built their own two-button exit dialog rather than using
   the shared guard, and none of them offered a discard. So opening a
   session to look at it and backing out ALWAYS wrote a partial entry —
   Graeme's own count reached 7 of 3 from sessions he had not done.

   Matches .sg-exit-discard deliberately: the same option should not look
   like two different things depending on which screen you exit from.

   Smallest visual weight of the three. The option is available, not
   encouraged — somebody who has genuinely done half a session should find
   "Exit and save progress" the obvious choice. */
.session-exit-discard {
  color: var(--color-text-secondary);
  border-color: transparent;
  font-size: var(--text-sm);
}

.session-exit-discard:hover,
.session-exit-discard:focus-visible {
  color: var(--color-text);
  background: var(--color-bg-hover);
}


/* SMOOTH-P2c. The exit sheet's title -- the dialog's accessible name. */
.session-exit-title {
  margin: 0 0 var(--space-4, 1.5rem);
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-text-primary, #FFFFFF);
}