/* ============================================================
   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 (Brief 0018: editorial chart-block system) -----
   The full chart system lives in public/charts.js; the SPA loads it
   as a global script and TrainingCharts injects renderAllCharts(data)
   via dangerouslySetInnerHTML. The .chart-block wrapper is the only
   structural CSS — charts sit directly on the cream paper, no card
   frames, no borders, no backgrounds. */

.svn-charts {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0.5px solid #d9d3c2;
}
.svn-charts .svn-section-title {
  /* Eyebrow at top of the performance-data block — editorial small
     caps, gold accent, matches the rest of the section eyebrows. */
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #a8814b;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Brief 0018 chart-block container. Margins only — no background,
   no border, no padding. The chart sits directly on the paper. */
.chart-block {
  margin: 24px 0 28px;
  padding: 0;
  background: transparent;
  border: none;
}
.chart-block__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  color: #2C2C2A;
  margin-bottom: 4px;
}
.chart-block__annotation {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(44, 44, 42, 0.55);
  margin-bottom: 16px;
}
.chart-block__svg {
  width: 100%;
}
.chart-block__svg svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}
.chart-block__set-eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(44, 44, 42, 0.45);
  margin: 18px 0 4px;
}

/* ----- Workout body (Brief 0012) -----
   Output spec: bold ~13px primary line in charcoal, ~11px charcoal
   description below it on its own row, ~14-16px vertical spacing
   between sets, gold section sub-header proportional to the rest of
   the editorial paper. Old workouts (flat entries[] shape) and new
   workouts (sets[]/items[]/rounds) share the same visual treatment;
   the renderer in SessionViewer.jsx WorkoutBody dispatches between
   the two shapes — the CSS doesn't need to. */

.svn-workout-section {
  margin-bottom: 28px;  /* breathing room between Warmup / Preset / Main / Post */
}
.svn-workout-section .svn-section-title {
  /* Section sub-header (WARMUP · 700 YDS) — gold accent, sized
     proportional to the editorial paper's other headers. */
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid rgba(212, 168, 87, 0.4);
  color: #a8814b;
}
.svn-workout-set { margin: 0 0 18px 0; }
.svn-workout-set-headline {
  /* "4 rounds of 200 IM + 50 free EZ" / set label */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2C2C2A;
  margin-bottom: 8px;
}
.svn-workout-item {
  /* One item (or one round-row in the variable-rounds shape).
     Stacked block: primary line on top, optional description /
     equipment / round prefix beneath. */
  margin: 6px 0;
}
.svn-workout-item.svn-workout-item-indent {
  /* Second-and-onward items inside a set — indented under the
     first item's content position so multi-item sets read as a
     block, not as separate sets. */
  padding-left: 16px;
}
.svn-workout-round-prefix {
  display: inline-block;
  min-width: 30px;
  font-weight: 700;
  color: #2C2C2A;
  margin-right: 4px;
}
.svn-workout-primary {
  /* Bold primary line: reps × distance + stroke + effort + interval. */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2C2C2A;
  line-height: 1.5;
}
.svn-workout-desc {
  /* Description on its own line below the primary line. Charcoal
     regular weight per Brief 0012 — replaces the old gray-italic
     7-8pt that read soft in print. */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: #2C2C2A;
  margin-top: 2px;
  line-height: 1.5;
}
.svn-workout-equip {
  font-size: 10px;
  font-style: italic;
  color: #5F5E5A;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* Brief 0013 Part 2: canonical notation tints.
   Effort word color-tinted by category (soft → gray, hard → red,
   default → charcoal which inherits from .svn-workout-primary).
   Equipment italic-parenthetical AT THE END of the primary line
   (inline, not a separate row), so .svn-workout-equip-inline
   restyles the italic look without breaking the primary-line
   layout. */
.svn-workout-effort {
  /* default — charcoal, inherits from .svn-workout-primary */
}
.svn-workout-effort-soft { color: #7A7872; }
.svn-workout-effort-hard { color: #B03A2E; }
.svn-workout-equip-inline {
  font-style: italic;
  font-weight: 400;
  color: #5F5E5A;
  letter-spacing: 0.02em;
}

/* Brief 0013 Part 1: Time Slots / Splits handwriting boxes.
   Inline boxes for Time Slots ride immediately under the item's
   primary line; the labeled `Splits @N:` grid sits on its own
   line below. The visual separation is the photo-extractor fix
   — coach knows exactly which row holds which kind of time. */
.svn-workout-timeslots,
.svn-workout-splits-grid {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  font-family: 'Inter', system-ui, sans-serif;
}
.svn-workout-timeslots-indent,
.svn-workout-splits-indent { padding-left: 16px; }
.svn-workout-ts-label,
.svn-workout-splits-label {
  font-size: 10px;
  font-style: italic;
  color: #5F5E5A;
  letter-spacing: 0.04em;
  margin-right: 4px;
  flex: 0 0 auto;
}
.svn-workout-timeslot-box,
.svn-workout-split-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.svn-workout-box-tag {
  font-size: 9px;
  color: #8a7239;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  white-space: nowrap;
}
.svn-workout-box-line {
  display: block;
  width: 64px;
  height: 14px;
  border-bottom: 0.75px solid #2C2C2A;
}
.svn-workout-split-box .svn-workout-box-line { width: 44px; }
.svn-workout-splits-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
}
.svn-workout-splits-sep {
  color: #8a7239;
  font-weight: 700;
  align-self: center;
  margin: 0 4px;
}
.svn-workout-total {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  margin-top: 16px;
  padding-top: 14px;
  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) -----
   Brief 0021: removed `page-break-inside: avoid` from `.svn-section`. The
   rule was too aggressive for training notes — section bodies span
   600+ words and can't fit on a fresh page, so the avoid rule fought
   against itself and produced blank pages (sections 02-05 of long
   training notes failed to render). Sections now flow naturally
   across page breaks; orphans/widows keep paragraphs together.
   Atomic blocks (signature, technique focus box, Hi-Lo, video
   section) retain the avoid rule — they're widget-sized and
   designed to stay whole on one page. */

@media print {
  .svn { border: 0 !important; padding: 0 !important; background: #faf6ee !important; max-width: none; }
  /* Sections flow naturally; orphans/widows prevent split-line ugliness. */
  .svn-section { orphans: 3; widows: 3; }
  .svn-section-content p { orphans: 3; widows: 3; }
  /* Section number ("01", "02"…) must not orphan at the bottom of a page. */
  .svn-section-num { page-break-after: avoid; break-after: avoid; }
  /* Atomic blocks — keep these whole on one page. */
  .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; break-inside: avoid; }
  .svn-video-section { page-break-inside: avoid; break-inside: avoid; }
  .svn-video-player { display: none; }
  .svn-video-link { color: #2C2C2A; }
}