/* viewer.css -- media-viewer wrapper (graph-native chrome on white).
   Design of record: md/time-series-viewer-plan.md.
   Section-by-section rationale: team-history/styles/viewer-css.md.
   Source of truth: team-history/styles/viewer.css; deployed copy: Public/viewer.css. */

/* Page */
html, body { margin: 0; background: #fff; }

/* Viewer column -- centred; width from the desktop fill rule below (1120 fallback).
   #262626 == the SVG title colour (Darker[Gray,.7]), so all chrome matches the graph. */
.viewer {
	position: relative;
	container-type: inline-size;         /* size .peers/.nav in cqi (see below) */
	max-width: 1120px;
	margin: 0 auto;
	padding: .4em .4em .8em;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: #262626;
}

/* Graph -- SVG fills the column, height follows aspect ratio.
   position: relative so the chevrons centre on the graph (see below). */
.graph { position: relative; }
.graph img { display: block; width: 100%; height: auto; }

/* Peer switcher -- graph-native caption at the footer-nav size; half a line-height
   below the graph.  Blue on hover (matches squad-history); no underline needed.
   Size in cqi so it tracks the graph (1.4cqi == the SVG title's 14pt/1000 width). */
.peers { text-align: center; font-size: clamp(0.82rem, 1.4cqi, 1.6rem); color: #555;
	margin-top: .6em; margin-top: .5lh; padding-bottom: .1em; }
.peers b { color: #262626; }                         /* active graph, no link */
.peers a { color: #575757; text-decoration: none; }  /* darker than the muted default */
.peers a:hover { color: blue; }

/* Prev/next season -- faint chevrons in the side margin, positioned within .graph.
   top is 24cqw: a fixed offset from the graph TOP (constant per window, unlike the
   graph height), so the chevron does NOT jitter as you step seasons.  24cqw == 24%
   of the column width ~= half a median-aspect graph's height, so it is also roughly
   centred at any window size -- exactly centred only for the median aspect; taller/
   shorter seasons sit a little off, the accepted price of no jitter.
   rem (not em) on the horizontal offset: .step's own font is 2.4em, so an em offset
   would be 2.4x too big; -2rem clears the image by ~1em (past the y-axis title). */
.step { position: absolute; top: 24cqw; transform: translateY(-50%);
	font-size: 2.4em; line-height: 1; color: #bcbcbc; text-decoration: none; }
.step:hover { color: blue; }
.step.prev { left: -2rem; }
.step.next { right: -2rem; }

/* Footer nav -- title-consistent gray on white (no panel), sized near the SVG title;
   earliest/prev in the left corner, next/last in the right, index+season centred. */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
	column-gap: 1em; margin-top: .55em; font-size: clamp(0.82rem, 1.4cqi, 1.6rem); }
.nav .nleft { text-align: left; }
/* center title ~30% larger than the side links.  Header (.nav.top) keeps the
   grid's align-items:baseline, so the larger title shares the bottom line and
   grows upward, away from the graph below it.  Footer aligns tops instead
   (align-items:start), so its larger title grows downward, away from the graph
   above it -- the requested footer treatment. */
.nav .ncenter { text-align: center; font-size: 1.3em; }
.nav .nright { text-align: right; }
.nav:not(.top) { align-items: start; }
.nav a { color: #262626; text-decoration: none; }
.nav a:hover { color: blue; }
/* Header copy of the nav (above the graph): a stationary set of the same season
   links, so navigation never jitters even as the graph height varies. */
.nav.top { margin-top: 0; margin-bottom: .35em; }

/* No accidental selection on the chrome or the graph -- clicking a link or the
   image never needs to select/copy, and the stray orange highlight is noise.
   user-select inherits, so .graph covers the img + chevrons.  Anything NOT listed
   here stays selectable, so a future body-text note added below the footer (for
   data/source notes, with copy-paste use) is selectable by default. */
.nav, .peers, .graph { -webkit-user-select: none; user-select: none; }
.graph img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* Desktop -- fill the window width, but cap the column so the whole graph + nav
   always fits the viewport (no vertical scroll).  The cap is a height budget
   converted to a width via 1.8 < the tallest graph's w/h (1000/536 = 1.86), with
   ~100px reserved for the two nav rows + padding, and an absolute ceiling.
   The vh line is the fallback; the dvh line refines it where supported. */
@media (min-width: 641px) {
	/* the 100vw term always leaves >=2.5em margin each side so the moved-out
	   chevrons (-1.6rem) never clip off-screen when the column fills the window. */
	.viewer { max-width: min(1600px, calc((100vh - 100px) * 1.7), calc(100vw - 5em)); }
	.viewer { max-width: min(1600px, calc((100dvh - 100px) * 1.7), calc(100vw - 5em)); }
}

/* Narrow screens -- viewport-width gate ONLY (never pointer/hover; see viewer-css.md).
   Wide graph scrolls rather than shrinking; chevrons fold; nav stacks centred. */
@media (max-width: 640px) {
	.graph { overflow-x: auto; }
	.graph img { width: auto; min-width: 640px; }
	.step { display: none; }   /* solo chevrons off on mobile; header/footer nav steps seasons */
	.nav { grid-template-columns: 1fr; row-gap: .25em; }
	.nav .nleft, .nav .ncenter, .nav .nright { text-align: center; }
}