/* dist/rugbyanimator/app/session.css
   Shared training-session page (/s/<code>). Dark-first "Deep Pitch" tokens,
   matched to the app + web editor. Includes a print stylesheet so "Print to
   PDF" yields a usable one-pager (players freeze on the first frame, controls
   hide). */

:root {
  --canvas:#08291C; --surface:#0E3826; --surface2:#154A32; --elevated:#1B5C40;
  --line:rgba(255,255,255,0.10); --lineStrong:rgba(255,255,255,0.20);
  --textPrimary:#EAF3EE; --textDim:#8FB6A2; --textFaint:#7FA890;
  --green:#5BD08A; --onGreen:#08291C; --danger:#E74C3C;
  --radius:12px;
}

* { box-sizing:border-box; }

html, body {
  margin:0; padding:0;
  background:var(--canvas); color:var(--textPrimary);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
.mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }

#ra-session-root {
  max-width:640px;
  margin:0 auto;
  padding:24px 18px 8px;
}

/* ---- loading / empty ---- */
.ra-loading { text-align:center; color:var(--textDim); padding-top:80px; }
.ra-empty {
  text-align:center; padding:64px 20px; color:var(--textDim);
}
.ra-empty h1 { color:var(--textPrimary); font-size:22px; margin:0 0 8px; }
.ra-empty p { margin:0; }

/* ---- session header ---- */
.ra-session-head { margin-bottom:20px; }
.ra-session-title {
  font-size:26px; line-height:1.2; font-weight:800; margin:0 0 8px;
  letter-spacing:-0.01em;
}
.ra-session-meta { margin:0 0 4px; color:var(--textDim); font-size:15px; }
.ra-session-total { margin:0; color:var(--green); font-size:13px; font-weight:600; letter-spacing:.2px; }
.ra-session-notes {
  margin:14px 0 0; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--textPrimary); font-size:14px; line-height:1.5; white-space:pre-wrap;
}

/* ---- blocks ---- */
.ra-blocks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ra-block {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px;
}
.ra-block-drill { background:var(--surface); }
.ra-block-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ra-block-time { color:var(--textPrimary); font-size:13px; font-weight:700; }
.ra-block-dur {
  color:var(--textFaint); font-size:12px;
  background:var(--surface2); border-radius:999px; padding:2px 8px;
}
.ra-block-title { font-size:17px; font-weight:700; margin:0; flex:1 1 auto; min-width:0; }
.ra-block-notes {
  margin:10px 0 0; color:var(--textDim); font-size:14px; line-height:1.5; white-space:pre-wrap;
}

/* ---- inline drill player ---- */
.ra-block-player { margin-top:12px; }
.ra-player { display:flex; flex-direction:column; gap:8px; }
.ra-player-stage {
  position:relative;                 /* anchors the coaching-note overlay */
  display:flex; justify-content:center; align-items:center;
  background:var(--canvas); border-radius:10px; overflow:hidden;
  min-height:120px;
}
.ra-player-canvas { display:block; border-radius:8px; touch-action:none; }
/* Coaching note. Overlaid on the canvas rather than sitting in flow, and kept
   mounted at all times so it fades instead of popping — the same approach as
   PlaybackNoteCaption in the iOS app and the caption burned into exported video
   by VideoExporter.drawNoteCaption.

   In flow it changed height between beats (notes run 1-3 lines) and vanished
   entirely on beats carrying no note, which moved the transport controls and
   everything below them. Out of flow, nothing can shift. */
.ra-player-notes {
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  margin:0; padding:8px 10px;
  background:rgba(21,74,50,0.92);    /* --surface2 at 92% */
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  color:var(--textPrimary); font-size:12.5px; line-height:1.45; white-space:pre-wrap;
  text-align:center;
  /* Cap at 3 lines, matching .lineLimit(3) on iOS. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .2s ease-in-out;
}
.ra-player-notes.is-visible { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .ra-player-notes { transition:none; }
}
.ra-player-controls { display:flex; align-items:center; gap:10px; }
.ra-player-play {
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--green); color:var(--onGreen); border:none; cursor:pointer;
  font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.ra-player-play:hover { filter:brightness(1.05); }
.ra-player-scrub { flex:1 1 auto; min-width:0; accent-color:var(--green); cursor:pointer; }
.ra-player-time { flex:0 0 auto; color:var(--textDim); font-size:12px; }

/* ---- footer / App Store badge ---- */
.ra-footer { max-width:640px; margin:24px auto 0; padding:20px 18px 40px; text-align:center; }
.ra-appstore {
  display:inline-flex; flex-direction:column; gap:2px; align-items:center;
  text-decoration:none; padding:14px 22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.ra-appstore-kicker { color:var(--textFaint); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.ra-appstore-name { color:var(--textPrimary); font-size:18px; font-weight:800; }
.ra-appstore-cta { color:var(--green); font-size:13px; font-weight:600; margin-top:2px; }

/* ---- print: a clean one-pager. Drills freeze on their first frame. ---- */
@media print {
  :root { --canvas:#fff; }
  html, body { background:#fff; color:#111; }
  #ra-session-root { max-width:none; padding:0; }
  .ra-session-title, .ra-block-title, .ra-empty h1 { color:#111; }
  .ra-session-meta, .ra-session-total, .ra-block-time, .ra-block-dur,
  .ra-block-notes, .ra-session-notes, .ra-player-notes { color:#222; }
  .ra-block, .ra-session-notes, .ra-player-notes {
    background:#fff; border:1px solid #ccc; break-inside:avoid;
  }
  .ra-player-controls { display:none; }          /* no play/scrub in print */
  /* The caption is an absolute overlay on screen; restore it to flow for print
     so the one-pager reads as pitch-then-note rather than note-over-pitch. */
  .ra-player-notes {
    position:static; opacity:1; pointer-events:auto;
    display:block; -webkit-line-clamp:none; overflow:visible;
    backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
    margin-top:8px; text-align:left;
  }
  /* The caption lives inside the stage and is an absolute overlay on screen.
     For print, stack the stage vertically and return the caption to flow so the
     one-pager reads pitch-then-note instead of note-over-pitch. */
  .ra-player-stage {
    background:#fff; flex-direction:column; overflow:visible; min-height:0;
  }
  .ra-footer { display:none; }
}