/* CourtOracle Page-Specific Styles */

/* ─── Home Page: Activity Grid (fills width, larger dots, aligned months) ─── */
.home-activity {
  width: 100%;
  max-width: 520px;
}
.activity-grid {
  display: grid;
  grid-template-columns: repeat(13, 32px);
  grid-template-rows: repeat(4, 32px);
  gap: 6px;
  grid-auto-flow: column;
}
.activity-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(102, 102, 102, 0.15);
}
.activity-dot.active {
  background: var(--tj-primary);
}
.activity-months {
  display: grid;
  grid-template-columns: repeat(13, 32px);
  gap: 6px;
  margin-bottom: var(--space-1);
}
.activity-months span {
  font-size: var(--text-label-tiny);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tj-muted-foreground);
  text-align: center;
  line-height: 1;
}

/* ─── Home Page: Coach Quote (iOS: left orange accent + italic text) ─── */
.coach-quote-block {
  display: flex;
  gap: var(--space-4);
  padding-left: var(--space-2);
}
.quote-accent {
  width: 2px;
  background: rgba(217, 119, 6, 0.5);
  border-radius: 1px;
  flex-shrink: 0;
}
.quote-content {
  padding: var(--space-1) 0;
}

/* ─── Home Page: Today's Focus Ellipse (iOS: 340×200pt dashed, centered) ─── */
/* Layout (matches HomePage.swift:535-577 todaysFocusSection):
 *   .focus-container holds the ellipse + howSection vertically stacked.
 *   The "How" details element renders BELOW the dashed oval, never inside it.
 *   Gap is intentionally larger than iOS's 16pt because the web ellipse's
 *   curved bottom edge visually approaches closer than the bounding-rect
 *   would suggest (Kaden 2026-04-22: "how section not on top of the graphic
 *   of the circle"). */
.focus-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  max-width: 560px;
  margin: 0 auto;
}
.focus-ellipse {
  border: 2px dashed rgba(217, 119, 6, 0.3);
  border-radius: 50%;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 500px;
  width: 100%;
  aspect-ratio: 1.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.focus-how-section {
  width: 100%;
  max-width: 500px;
  text-align: left;
  padding: 0 var(--space-2);
}
.focus-how-summary {
  cursor: pointer;
  color: var(--tj-muted-foreground);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  user-select: none;
}
.focus-how-summary::-webkit-details-marker { display: none; }
.focus-how-summary::before {
  content: '▶';
  display: inline-block;
  font-size: 8px;
  color: var(--tj-muted-foreground);
  transition: transform var(--transition-fast);
}
.focus-how-section[open] > .focus-how-summary::before { transform: rotate(90deg); }
.focus-how-body { margin-top: var(--space-2); }

/* ─── Sessions Page: Timeline ─── */
.sessions-timeline {
  position: relative;
  padding-left: var(--space-8);
}
.sessions-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tj-border);
}
.session-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  position: relative;
}
.session-row:hover { background: var(--tj-secondary); }

.session-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--tj-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  background: white;
  position: relative;
  z-index: 1;
}
.session-marker.win { border-color: var(--tj-primary); color: var(--tj-primary); }
.session-marker.loss { border-color: rgba(45, 45, 45, 0.3); color: rgba(45, 45, 45, 0.5); }

.session-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── Session Detail ─── */
.session-detail-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--tj-muted-foreground);
  text-decoration: none;
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-4);
  cursor: pointer;
}
.session-detail-back:hover { color: var(--tj-primary); }

.coach-card {
  background: var(--tj-card);
  border: 1px solid var(--tj-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.coach-card summary::-webkit-details-marker { display: none; }
.coach-card summary { list-style: none; }
.coach-card[open] summary svg:last-child { transform: rotate(180deg); }
.coach-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.coach-name {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
}

/* ─── Analytics: Insight Cards ─── */
.insight-card {
  background: rgba(102, 102, 102, 0.03);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.insight-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.insight-bullet::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.insight-bullet.strength::before { background: #16a34a; }
.insight-bullet.area::before { background: var(--tj-primary); }

/* ─── Record Page ─── */
.record-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-12) 0;
}
.record-btn-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tj-primary);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.record-btn-large:hover { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.15); }
.record-btn-large.recording { animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
  50% { box-shadow: 0 0 0 16px rgba(217, 119, 6, 0); }
}
.record-timer {
  font-family: var(--font-mono);
  font-size: var(--text-heading-lg);
  color: var(--tj-foreground);
}

/* ─── Account Page: Expandable Sections ─── */
/* ─── Account: Expandable Sections (matches iOS ReadOnlySection) ─── */
.expandable-section {
  border: none;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: visible;
  background: rgba(102, 102, 102, 0.03);
  padding: 0;
}
.expandable-section summary { list-style: none; }
.expandable-section summary::-webkit-details-marker { display: none; }
.expandable-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
}
.expandable-header:hover { opacity: 0.8; }
.expandable-header .section-icon { width: 14px; height: 14px; stroke: var(--tj-primary); flex-shrink: 0; stroke-width: 1; }
.expandable-header span { font-size: var(--text-label) !important; font-weight: var(--weight-regular) !important; text-transform: uppercase; letter-spacing: 0.2em; color: var(--tj-muted-foreground); }
.expandable-header .expand-chevron { margin-left: auto; transition: transform var(--transition-fast); }
.expandable-section[open] .expand-chevron { transform: rotate(180deg); }
.expandable-content {
  padding: 0 var(--space-4) var(--space-4);
}

/* ─── Account: Editable Profile Row (matches iOS EditableProfileRow) ─── */
.profile-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--tj-border);
  position: relative;
}
.profile-edit-row:last-child { border-bottom: none; }
.profile-edit-row .row-label { font-size: var(--text-body-sm); color: var(--tj-muted-foreground); }

/* ─── Improvement Areas Dropdown (fixed to viewport, appended to body) ─── */
.ia-dropdown {
  position: fixed;
  z-index: 99999;
  min-width: 220px;
  background: white;
  border: 1px solid var(--tj-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
/* ─── Account: Inline Select Dropdown (matches iOS Menu + chevron.down) ─── */
.profile-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  font-family: var(--font-serif);
  font-size: var(--text-body-sm);
  color: var(--tj-foreground);
  text-align: right;
  cursor: pointer;
  padding: 4px 20px 4px 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' fill='none' stroke='%23666' stroke-width='1.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
  max-width: 200px;
}
.profile-select:focus { outline: none; color: var(--tj-primary); }

/* ─── Opponent Detail ─── */
.h2h-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.h2h-wins { font-size: var(--text-display-md); color: var(--tj-primary); }
.h2h-separator { font-size: var(--text-heading-md); color: var(--tj-muted-foreground); }
.h2h-losses { font-size: var(--text-display-md); color: var(--tj-loss); }

/* ─── Improvement Areas: match visual weight of .profile-select ─── */
/* Kaden 2026-04-22: IA row rendered "bolder" than the sibling select rows.
 * Native <select> inherits font-weight: normal (400) whereas a <span>
 * inherits the EB Garamond default 500 we declared in @font-face. Force
 * both to the same regular weight so they visually align. */
.profile-select,
.profile-select option,
.ia-trigger,
.ia-display {
  font-weight: 400;
}

/* ─── Mobile sizing — all pages except Account (Kaden 2026-04-22) ─── */
/* Account page uses its own .profile-edit-row, .expandable-*, .ia-* styling
 * which is already tuned for mobile. Everything ELSE scales down under 768px.
 * Scoped to page containers + element classes, so Account inside #app-content
 * is unaffected because its rows are not listed below. */
@media (max-width: 768px) {
  /* Shrink global page header across non-account routes */
  .tj-page-header h1 { font-size: 26px; }
  .tj-page-header .tj-body { font-size: 14px; }

  /* Home activity grid — smaller dots so all 52 weeks fit at ≤390px */
  .activity-grid {
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(4, minmax(18px, 1fr));
    gap: 4px;
  }
  .activity-dot { width: auto; height: auto; min-height: 18px; }
  .activity-months {
    grid-template-columns: repeat(13, 1fr);
    gap: 4px;
  }

  /* Home focus ellipse — down from 500x aspect 1.7 to 300-ish */
  .focus-ellipse { padding: var(--space-5) var(--space-4); }
  .focus-how-section { max-width: none; padding: 0; }
  /* Extra breathing room between ellipse curve and HOW on mobile, where the
   * oval is proportionally larger. Kaden 2026-04-22 flagged the ellipse
   * visually touching the HOW line. */
  .focus-container { gap: var(--space-10); }

  /* Home goals — reduce section padding + card padding */
  .home-goals .tj-section-label { font-size: 11px; }
  .home-goals .tj-card { padding: 12px; }

  /* Coach quote — slightly smaller italic */
  .coach-quote-block .tj-body-italic { font-size: 14px; line-height: 1.5; }

  /* Sessions page — tighter timeline */
  .sessions-timeline { padding-left: var(--space-6); }
  .session-row .tj-heading-sm { font-size: 15px; }

  /* Analytics — smaller insight cards */
  .insight-card { padding: 12px !important; }

  /* Opponent detail — smaller H2H numbers */
  .h2h-wins, .h2h-losses { font-size: 32px; }
  .h2h-separator { font-size: 16px; }

  /* Section labels (used everywhere) — tighter letter-spacing on mobile */
  .tj-section-label { font-size: 11px; letter-spacing: 0.18em; }
}

/* ─── Home Page: Goals (iOS TJGoalRow + HomePage.swift:780-870) ─── */
.tj-goal-more-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--tj-muted-foreground);
  font-family: var(--font-serif);
  font-size: var(--text-body-sm);
  cursor: pointer;
}
.tj-goal-more-btn:hover { color: var(--tj-primary); }
.tj-goal-card:hover { border-color: var(--tj-primary) !important; }
.tj-goal-content:focus-visible { outline: 2px solid var(--tj-primary); outline-offset: 2px; border-radius: 8px; }
.tj-goal-badge:hover { background: rgba(217, 119, 6, 0.08) !important; }
.tj-goal-badge:focus-visible { outline: 2px solid var(--tj-primary); outline-offset: 2px; }

/* ─── Opponent Detail — profile card + tappable H2H (iOS parity) ─── */
.opp-profile-card {
  background: var(--tj-card);
  border: 1px solid var(--tj-border);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0 24px;
}
.opp-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.opp-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(217, 119, 6, 0.18);
  color: var(--tj-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
}
.opp-profile-divider {
  height: 1px;
  background: var(--tj-border);
  margin: 12px 0;
}
.opp-profile-rows .profile-edit-row { padding: 8px 0; }

.opp-h2h-section { margin: 0 0 32px; }
.opp-h2h-stats {
  display: flex;
  align-items: stretch;
  background: var(--tj-card);
  border: 1px solid var(--tj-border);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 12px;
}
.opp-h2h-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.opp-h2h-stat:hover { background: rgba(217, 119, 6, 0.06); }
.opp-h2h-stat:focus-visible { outline: 2px solid var(--tj-primary); outline-offset: -2px; }
.opp-h2h-num {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.opp-h2h-stat.wins .opp-h2h-num { color: var(--tj-primary); }
.opp-h2h-stat.losses .opp-h2h-num { color: rgba(45, 45, 45, 0.5); }
.opp-h2h-sep { width: 1px; background: var(--tj-border); }

/* Mobile adjustments */
@media (max-width: 768px) {
  .opp-profile-card { padding: 16px; border-radius: 12px; }
  .opp-avatar { width: 52px; height: 52px; font-size: 24px; }
  .opp-h2h-num { font-size: 32px; }
  .opp-h2h-stat { padding: 16px 8px; }
}

/* Match bundle split-pane (session-detail). Kaden 2026-04-23:
   - Desktop: 2 columns with draggable divider (inline styles set from JS)
   - <=900px: collapse to single column; hide divider; video stacks below.

   Right column is sticky at the top so the user can scroll the audio
   content on the left without losing the video on the right. It is
   capped at 100vh so videos never clip off the bottom edge of the
   browser — when the user's match + a coaching clip are both showing,
   the column scrolls INTERNALLY rather than pushing past the viewport.

   Both videos use aspect-ratio: 16/9 + width: 100% so they scale fluidly
   as the divider drags left/right. There's no min-height: the 16:9 box
   is driven purely by the column width, which lets the user see the
   entire player including controls at any divider position. */
.match-bundle-root {
  min-height: calc(100vh - 120px);
}
.match-bundle-root .mb-right {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  align-self: start;
}
.match-bundle-root .mb-video-fill {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 0 !important;
  max-width: 100%;
}
.match-bundle-root .mb-video-wrapper {
  width: 100%;
}
.match-bundle-root .mb-coaching-slot:empty {
  display: none;
}

@media (max-width: 900px) {
  .match-bundle-root {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0;
  }
  .match-bundle-root .mb-left { padding-right: 0 !important; }
  .match-bundle-root .mb-right {
    padding-left: 0 !important;
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    margin-top: 32px;
  }
  .match-bundle-root .mb-divider { display: none !important; }
}