/* ============================================================
   Rengstorff Avenue project timeline -- prototype V2
   ============================================================
   A reversible redesign of the timeline/history section only, reviewed
   side by side with the existing milestone-card timeline ("V1", styled
   in main.css under .evidence-timeline / .timeline-node / .evidence-panel
   -- untouched by this file). Everything here is scoped under .tlv2 so it
   can never leak onto or clash with the rest of the page's styles.

   To remove this prototype: delete this file and its <link> in
   cities/mountainview-ca/rengstorff-green-complete-streets/index.html's
   <head>, plus the matching <script src=".../rengstorff-timeline-v2.js">
   and the .tlv2-toggle / #timeline-v2-wrap markup. V1's own CSS in
   main.css is entirely separate and needs no changes either way.

   Palette reused from the page's existing Green Complete Streets system
   (see main.css's .rengstorff-microsite rules) -- no new colors:
     forest green (headings/major nodes) #193c2b
     brand green  (links/markers/accents) #16704d
     sage         (routine nodes/lines)   #4e9a73 / #8dbb91
     pale sage    (borders)               #c5d6c6
     page bg      (open-node fill)        #f1f4ef
     pale sage bg (pill/emphasis fill)    #e8f1e9
     muted text                           #5a6c60
============================================================ */

/* ---- Temporary review toggle -------------------------------------- */

.tlv2-toggle {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.75rem 0 -0.5rem;
}

.tlv2-toggle__label {
	color: #5a6c60;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tlv2-toggle__button {
	background: #ffffff;
	border: 1px solid #c5d6c6;
	border-radius: 999px;
	color: #33483a;
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
}

.tlv2-toggle__button:hover {
	border-color: #4e9a73;
}

.tlv2-toggle__button:focus-visible {
	outline: 3px solid rgba(22, 112, 77, 0.45);
	outline-offset: 2px;
}

.tlv2-toggle__button[aria-pressed="true"] {
	background: #193c2b;
	border-color: #193c2b;
	color: #ffffff;
}

/* ---- Timeline root -------------------------------------------------- */

/* Light, editorial background (the page's own pale sage/cream, not a
   white dashboard panel). Widened from an earlier 46rem "article measure"
   to 58rem so the content column actually uses the space available in
   the page's ~67rem shell, rather than leaving a large empty band on the
   right of a short 1-2 sentence summary + link row. */
.tlv2 {
	color: #25332b;
	font-family: "Avenir Next", "Helvetica Neue", sans-serif;
	margin-top: 1.5rem;
	max-width: 58rem;
}

/* ---- Continuous event stream -------------------------------------------
   Not nested per-year containers: every year marker and every event is a
   direct sibling in normal flow here, so there's no group boundary for
   the spine to visually restart at. The spine itself is now ONE pair of
   elements (.tlv2-spine / .tlv2-spine--future, see further down) sized
   and positioned by JS (assets/js/rengstorff-timeline-v2.js's
   layoutSpine()) to run from the first milestone node to the last,
   behind every row and every year transition -- not drawn per-row -- so
   there is exactly one seam-free line regardless of how tall any given
   row's content is. position: relative here is what makes this
   container the positioning reference (getBoundingClientRect() math in
   JS) and the stacking context the spine paints behind (see
   .tlv2-event/.tlv2-year-marker's position: relative below, which is
   what keeps every row's own content/border painting in front of it). */
.tlv2-events {
	display: flex;
	flex-direction: column;
	position: relative;
}

/* The global spine itself: absolutely positioned by JS (top/height/left
   set inline after layout), not drawn by any row. Sits behind row
   content (z-index: 0, plus DOM order -- both spine elements are
   inserted as the first children of .tlv2-events, before any row) so
   node circles, year-marker labels, and the horizontal year-boundary
   rules all paint on top of it, per "the line should run behind/through
   the year transitions." Starts hidden (via [hidden]) until JS has
   real measurements to size it with, so there's never a flash of a
   wrongly-sized line at 0,0 before layout runs. */
.tlv2-spine {
	background: #8dbb91;
	position: absolute;
	width: 2px;
	z-index: 0;
}

.tlv2-spine[hidden] {
	display: none;
}

/* The future-facing continuation (from the Aug. 31, 2026 milestone
   onward): dashed instead of solid, positioned as its own separate
   element directly beneath/continuing from .tlv2-spine -- JS sizes it
   to start exactly where the solid spine ends, so the two read as one
   line that changes style partway through rather than two separately
   aligned pieces. */
.tlv2-spine--future {
	background: none;
	border-left: 2px dashed #8dbb91;
	width: 0;
}

/* Year marker: a compact temporal marker inline in the spine, not a
   separate section heading -- no card, no node/dot of its own, just the
   (now global, see .tlv2-spine) spine passing behind its rail column and
   a label sitting close above its year's first event. padding-top
   carries the "between years" gap; the small padding-bottom is what
   keeps the label close to its first event rather than reading as a
   separate section. */
.tlv2-year-marker {
	column-gap: 0.9rem;
	display: grid;
	grid-template-columns: 3.75rem 1.5rem 1fr;
	padding-bottom: 0.65rem;
	padding-top: 3.25rem;
	/* Keeps this row's own content/border painting above the global
	   spine (see .tlv2-events above) -- position: relative alone is
	   enough to enter the same stacking level as the spine, where DOM
	   order (spine first) then puts this row on top. */
	position: relative;
}

.tlv2-year-marker--first {
	padding-top: 0;
}

/* Subtle horizontal rule marking the year boundary -- flush with the top
   of the (now much shorter) gap rather than centered in it, so it reads
   as "previous year's content ends here" without widening the band
   itself. Skipped on the very first marker (2021), which has no
   preceding year to separate from. */
.tlv2-year-marker:not(.tlv2-year-marker--first) {
	border-top: 1px solid #d4ded4;
}

.tlv2-year-marker__date {
	grid-column: 1;
}

/* No line is drawn here any more (see .tlv2-spine on .tlv2-events
   above) -- this column exists purely so the year marker shares the
   same 3-column grid as .tlv2-event and nothing sits in the way of the
   global spine passing behind it. */
.tlv2-year-marker__rail {
	grid-column: 2;
}

.tlv2-year-marker__label {
	color: #193c2b;
	font-size: 1.35rem;
	font-weight: 800;
	grid-column: 3;
	line-height: 1.2;
	padding-top: 0.05rem;
}

.tlv2-year-marker--next .tlv2-year-marker__label {
	color: #4e745c;
}

/* ---- Events ----------------------------------------------------------
   Each event is its own [date | spine+node | content] grid row -- same
   grid-template-columns as .tlv2-year-marker above, so the rail column
   (and the node in it) lines up exactly between the two row types,
   which is what the global spine's single fixed x-position depends on.
   position: relative (like .tlv2-year-marker above) keeps this row's
   own content painting above the spine, which sits behind it. */
.tlv2-event {
	column-gap: 0.9rem;
	display: grid;
	grid-template-columns: 3.75rem 1.5rem 1fr;
	padding-bottom: 2rem;
	position: relative;
}

.tlv2-event:last-child {
	padding-bottom: 0;
}

.tlv2-event__date {
	color: #4e745c;
	font-size: 0.82rem;
	font-weight: 700;
	grid-column: 1;
	padding-top: 0.2rem;
	text-align: right;
}

/* Anchors .tlv2-event__node's position: absolute -- no line is drawn
   here any more (see .tlv2-spine on .tlv2-events above). */
.tlv2-event__rail {
	grid-column: 2;
	position: relative;
}

.tlv2-event__node {
	background: #193c2b;
	border: 2px solid #193c2b;
	border-radius: 50%;
	box-sizing: border-box;
	height: 0.85rem;
	left: 50%;
	position: absolute;
	top: 0.2rem;
	transform: translateX(-50%);
	width: 0.85rem;
	z-index: 1;
}

/* Routine milestones: an outlined (not solid-filled) node -- same green,
   lighter weight, per "major decisions filled / routine outlined." */
.tlv2-event--outline .tlv2-event__node {
	background: #f1f4ef;
}

/* Future milestones: an open node in the lighter sage tone (rather than
   the outline state's dark-green border), distinct from both the filled
   (major/decided) and plain-outline (routine/decided) states -- nothing
   here has happened yet. The node's own border stays solid rather than
   dashed: a dashed stroke on a circle this small (~14px) renders as a
   messy pinwheel of short dashes rather than a clean ring, so "not yet
   happened" is instead carried by the dashed .tlv2-spine--future segment
   of the global spine (see .tlv2-events above), which reads clearly at
   any size. */
.tlv2-event--open .tlv2-event__node {
	background: #f1f4ef;
	border-color: #8dbb91;
}

/* ---- Current decision point (Aug. 31, 2026) --------------------------
   Visually emphasized without a heavy card: a brighter accent ring around
   its (still open/dashed, since it hasn't happened) node, and a small
   "Upcoming decision" pill beside its marker -- no background box, no
   shadow, no color outside the page's existing green palette. */
.tlv2-event--emphasis .tlv2-event__node {
	border-color: #16704d;
	box-shadow: 0 0 0 4px rgba(22, 112, 77, 0.18);
}

.tlv2-event__tag {
	background: #e8f1e9;
	border: 1px solid #cfe0d0;
	border-radius: 999px;
	color: #16704d;
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-left: 0.6rem;
	padding: 0.15rem 0.55rem;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ---- Event content ---------------------------------------------------- */

.tlv2-event__body {
	grid-column: 3;
	min-width: 0;
	padding-top: 0.05rem;
}

/* SEMANTIC PROJECT MARKER -- the primary scanning element of this
   design, same small-caps treatment as the page's existing
   .evidence-category/.timeline-agenda labels, just a size up since it
   carries more weight here. */
.tlv2-event__marker {
	color: #16704d;
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.3;
	margin: 0 0 0.3rem;
	text-transform: uppercase;
}

.tlv2-event__summary {
	color: #25332b;
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0 0 0.5rem;
}

.tlv2-event__meta {
	color: #5a6c60;
	font-size: 0.82rem;
	margin: 0 0 0.4rem;
}

.tlv2-event__sources {
	column-gap: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	row-gap: 0.3rem;
}

/* Same dotted-underline text-link convention used sitewide (see
   .card-evidence-link, .grant-source-item in main.css) -- not a filled
   button, not an arrow glyph. */
.tlv2-event__source {
	border-bottom: dotted 1px #16704d;
	color: #16704d;
	font-size: 0.84rem;
	font-weight: 600;
	text-decoration: none;
}

.tlv2-event__source:hover,
.tlv2-event__source:focus-visible {
	border-bottom-color: transparent;
}

.tlv2-event__source--pending {
	border-bottom-style: dashed;
	color: #65736a;
	cursor: default;
}

/* ---- Responsive --------------------------------------------------------
   Below 720px, both row types (year marker and event) narrow their date
   and spine columns in step so they keep lining up with each other --
   the chronology stays a single left-aligned column, spine on the left,
   with no horizontal scrolling. The year marker keeps the same "inline
   temporal marker" shape it has on desktop (date column empty, spine
   passing through, label in the content column) rather than switching to
   a different mobile-only treatment. */
@media screen and (max-width: 720px) {
	.tlv2-year-marker,
	.tlv2-event {
		column-gap: 0.7rem;
		grid-template-columns: 3rem 1.35rem 1fr;
	}

	.tlv2-year-marker {
		padding-top: 2.25rem;
	}

	.tlv2-event {
		padding-bottom: 1.6rem;
	}

	.tlv2-event__date {
		font-size: 0.76rem;
	}

	.tlv2-event__marker {
		font-size: 0.86rem;
	}

	.tlv2-event__summary {
		font-size: 0.94rem;
	}
}