/* ============================================================
   session-viewer.css — Brief 0006/0009 editorial unification
   ============================================================
   Shared SessionViewer paper styles. Used by:
     - src/components/SessionViewer.jsx (in-app rendering, loaded
       via <link> in index.html so the SPA picks up the file)
     - public/technique-note-print.html (PDF print target, loaded
       via <link rel="stylesheet" href="/styles/session-viewer.css">)

   Brief 0009 task 2 extracted these rules out of two duplicate
   homes (src/styles/main.css + the print HTML's inline <style>)
   into this single shared file. Update here only; both surfaces
   inherit. No more drift risk.

   Color tokens (must match the print view exactly):
     cream paper   #faf6ee
     white card    #ffffff
     gold          #d4a857
     gold deep     #8a7239
     charcoal      #2C2C2A
     muted meta    #5F5E5A
     card border   #d9d3c2
   ============================================================ */

/* The editorial paper itself. Cream background, charcoal text,
   inner padding. Max-width keeps line-length readable. */
.svn {
  background: #faf6ee;
  color: #2C2C2A;
  border: 0.5px solid #d9d3c2;
  border-radius: 12px;
  padding: 56px 56px 48px;
  max-width: 820px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ----- Header band ----- */

.svn-header { display: block; margin-bottom: 36px; }

.svn-masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8a7239;
  margin-bottom: 14px;
}
.svn-mast-l, .svn-mast-r {}

.svn-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
/* Logo is white-on-transparent; invert flips to dark-on-cream. */
.svn-logo img { height: 50px; width: auto; filter: invert(1); }

.svn-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8a7239;
  margin-top: 10px;
  text-align: center;
}

.svn-rule {
  width: 70%;
  height: 1px;
  background: #d4a857;
  margin: 18px auto 16px;
}

.svn-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #5F5E5A;
  letter-spacing: 0.04em;
}
.svn-meta > span { flex: 0 0 auto; }
.svn-meta > span:nth-child(2) { flex: 1 1 auto; text-align: center; }
.svn-meta > span:nth-child(3) { text-align: right; }

/* ----- Athlete nameplate ----- */

.svn-athlete { margin-bottom: 36px; }
.svn-athlete-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #2C2C2A;
  margin: 0 0 14px;
}
.svn-athlete-rule {
  width: 60px;
  height: 2px;
  background: #d4a857;
  border-radius: 0;
}

/* ----- Focus areas box (technique only) ----- */

.svn-tech-box {
  background: #2C2C2A;
  border: none;
  border-radius: 4px;
  padding: 24px 28px;
  margin-bottom: 36px;
  color-scheme: only light;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.svn-tech-box-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d4a857;
  margin: 0 0 14px;
}
.svn-tech-topic-item { margin-bottom: 22px; }
.svn-tech-topic-item:last-child { margin-bottom: 0; }
.svn-tech-topic-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.svn-tech-focus-group { margin-bottom: 12px; }
.svn-tech-focus-group:last-child { margin-bottom: 0; }
.svn-tech-focus-name {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  color: #d6c89a;
  margin: 0 0 6px;
}
.svn-tech-faults { display: flex; flex-wrap: wrap; gap: 8px; }
.svn-tech-fault-chip {
  display: inline-block;
  padding: 8px 16px;
  background: #ffffff;
  border: 2.5px solid #d4a857;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2C2C2A;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ----- Body sections (numbered) ----- */

.svn-sections { display: block; }
.svn-section {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  margin-bottom: 32px;
  align-items: start;
}
.svn-section-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  color: #d4a857;
  line-height: 1;
}
.svn-section-content .svn-section-title,
.svn-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #8a7239;
  font-weight: 700;
  margin: 4px 0 14px;
}
.svn-prose {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 14px;
  color: #2C2C2A;
}
.svn-prose:last-child { margin-bottom: 0; }

/* Meet-prep adapters */
.svn-overview { margin-bottom: 32px; }
.svn-closing { font-style: italic; }
.svn-event-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  color: #2C2C2A;
  margin-bottom: 4px;
}
.svn-event-meta {
  font-size: 12px;
  color: #5F5E5A;
  font-family: 'Inter', sans-serif;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

/* Training Set Overview block — pre-formatted text card. */
.svn-set-overview {
  background: #ffffff;
  border-left: 3px solid #d4a857;
  border: 0.5px solid #d9d3c2;
  border-left-width: 3px;
  padding: 14px 18px;
  margin-bottom: 28px;
  border-radius: 4px;
}
.svn-set-overview-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #8a7239;
  font-weight: 700;
  margin-bottom: 8px;
}
.svn-set-overview-text {
  font-family: 'Inter', monospace;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-line;
  color: #2C2C2A;
}

/* ----- Training charts (post-section) ----- */

.svn-charts {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0.5px solid #d9d3c2;
}
.svn-chart-block { margin-bottom: 28px; }
.svn-chart-set-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #2C2C2A;
  margin-bottom: 12px;
}
.svn-chart-svg {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-bottom: 16px;
  background: #ffffff;
  border: 0.5px solid #d9d3c2;
  border-radius: 4px;
  padding: 8px;
}

/* Rep cards */
.svn-rep-cards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.svn-rep-card {
  background: #ffffff;
  border: 0.5px solid #d9d3c2;
  border-radius: 4px;
  padding: 8px 12px;
  text-align: center;
  min-width: 60px;
}
.svn-rep-num {
  font-size: 10px;
  color: #8a7239;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.svn-rep-time {
  font-family: 'Inter', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #2C2C2A;
}
.svn-rep-hr {
  font-size: 11px;
  color: #5F5E5A;
  margin-top: 2px;
}

/* Hi-Lo recovery */
.svn-hilo {
  background: #ffffff;
  border: 0.5px solid #d9d3c2;
  border-radius: 4px;
  padding: 16px 20px;
  margin-top: 16px;
}
.svn-hilo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  text-align: center;
  margin-bottom: 10px;
}
.svn-hilo-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #8a7239;
  font-weight: 700;
  margin-bottom: 4px;
}
.svn-hilo-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: #2C2C2A;
}
.svn-hilo-good { color: #2d7a2d; }
.svn-hilo-building { color: #b88a1c; }
.svn-hilo-text {
  font-size: 12px;
  color: #5F5E5A;
  text-align: center;
}

/* ----- Workout body ----- */

.svn-workout-section { margin-bottom: 20px; }
.svn-workout-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 14px;
  color: #2C2C2A;
}
.svn-workout-reps { font-weight: 700; font-family: 'Inter', monospace; }
.svn-workout-stroke { color: #2C2C2A; }
.svn-workout-effort {
  color: #8a7239;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.svn-workout-interval { color: #5F5E5A; font-size: 13px; }
.svn-workout-desc { color: #5F5E5A; font-size: 12px; font-style: italic; }
.svn-workout-total {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid #d9d3c2;
  color: #2C2C2A;
}

/* ----- Video references ----- */

.svn-video-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0.5px solid #d9d3c2;
}
.svn-video-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
.svn-video-item {
  background: #ffffff;
  border: 0.5px solid #d9d3c2;
  border-radius: 4px;
  padding: 16px;
}
.svn-video-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8a7239;
  margin-bottom: 10px;
}
.svn-video-player {
  width: 100%;
  border-radius: 4px;
  background: #000;
  margin-bottom: 8px;
}
.svn-video-link {
  font-size: 12px;
  color: #8a7239;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.svn-video-link:hover { text-decoration: underline; }

/* ----- Signature block ----- */

.svn-signature {
  margin-top: 48px;
  padding-top: 32px;
  text-align: center;
}
.svn-signature-rule-top {
  width: 60px;
  height: 1px;
  background: #d4a857;
  margin: 0 auto 24px;
}
.svn-signature-row {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.svn-signature-monogram {
  width: 56px; height: 56px;
  border: 2px solid #d4a857;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #2C2C2A;
  flex: 0 0 auto;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.svn-signature-col { width: 240px; text-align: left; }
.svn-signature-mark {
  /* SVG signature slot. Brief 0009 task 4 — element is an <img>
     pointing to /assets/chase-kalisz-signature.svg. The placeholder
     SVG renders italic Fraunces "Chase Kalisz" at 200×32 viewBox; we
     pin the height (~28px to match the prior text line) and let the
     width auto-scale from the SVG's intrinsic ratio. A real signature
     drop-in with different dimensions may want a one-line nudge here. */
  display: block;
  height: 28px;
  width: auto;
}
.svn-signature-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #2C2C2A;
  margin-top: 8px;
  white-space: nowrap;
}
.svn-signature-sep { color: #d4a857; margin: 0 6px; }

/* ----- Footer ----- */

.svn-footer {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #5F5E5A;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-top: 18px;
  border-top: 0.5px solid #d9d3c2;
  margin-top: 36px;
}

/* ----- Mobile (≤720px per Brief 0006) ----- */

@media (max-width: 720px) {
  .svn { padding: 28px 22px 24px; }
  .svn-section { grid-template-columns: 48px 1fr; gap: 14px; margin-bottom: 22px; }
  .svn-section-num { font-size: 32px; }
  .svn-prose { font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
  .svn-tech-topic-name { font-size: 16px; }
  .svn-event-name { font-size: 17px; }
  .svn-video-list { grid-template-columns: 1fr; }
}

/* ----- Print (browser Print / Save PDF + Puppeteer-rendered PDF) ----- */

@media print {
  .svn { border: 0 !important; padding: 0 !important; background: #faf6ee !important; max-width: none; }
  .svn-section { page-break-inside: avoid; break-inside: avoid; }
  .svn-signature { page-break-inside: avoid; break-inside: avoid; }
  .svn-tech-box { page-break-inside: avoid; break-inside: avoid; }
  .svn-hilo { page-break-inside: avoid; }
  .svn-video-section { page-break-inside: avoid; }
  .svn-video-player { display: none; }
  .svn-video-link { color: #2C2C2A; }
}