/* ============================================================
   Latest Stories — the chronological all-desk archive.

   Loads ONLY on the posts page, on top of category.css. Everything that
   draws a story — the row grid, the media slot, the placeholder, the
   kicker, the verdict, the pager and every breakpoint — comes from that
   sheet unchanged. This file adds the two things a chronological
   register needs and a section archive does not, and nothing else.

   Every rule below is scoped to `.tsp-ls-wrap`, so no category archive
   can be reached from here.
   ============================================================ */

/* ---------------- opener ---------------- */

/* Tighter measure than a category description: this is one orienting
   sentence, not a section's standing blurb.

   62ch was measured wrong and shipped an orphan at every width from 320 to
   1920. The sentence sets to 470px on one line and 62ch computes to 473px,
   so the last word had 3px of slack and lost it to the full stop — the
   opener read "…across every" / "desk." on two lines. 68ch gives it ~50px
   of headroom, and `text-wrap: pretty` keeps the last line from stranding a
   single word at the narrow widths where it must wrap anyway. */
.tsp-ls-wrap .tsp-ls__standfirst {
	max-width: 68ch;
	text-wrap: pretty;
}

/* ---------------- rail panel ---------------- */

/* The sidebar module ships as a self-contained CARD — its own 1px #e8e5de
   border, 10px radius, 14px/16px padding and white ground. That is right on
   the homepage, where it stands alone. Inside `.tsp-cat__panel`, which is the
   same card, it rendered boxed twice: one rounded rectangle immediately
   inside another, 34px apart. Only visible when you zoom the rail — the
   full-page screenshot reads as a single panel.

   The module keeps its card everywhere else; it is unwrapped only here, where
   the outer panel already provides one and carries the heading the module
   deliberately does not render. */
.tsp-ls-wrap .tsp-ls__rail-panel .tsp-sidebar-wrap,
.tsp-ls-wrap .tsp-ls__rail-panel .tsp-sidebar {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	max-width: none;
	margin: 0;
}

/* ---------------- day rule ---------------- */

/* Orientation, not a section heading. It is an <h2> so the page still has
   a navigable outline for assistive technology, but it is sized and
   coloured as furniture — 10.5px, muted, uppercase — so the eye reads the
   headlines and only glances at the date. Anything larger would compete
   with .tsp-cat__row-title at 18px and turn a register into a set of
   stacked sections. */
.tsp-ls-wrap .tsp-ls__day {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--ts-ui);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsp-cat-muted);
}

/* The rule runs from the label to the right edge. It replaces the border
   .tsp-cat__rows would otherwise draw, rather than adding a second line
   directly beneath it. */
.tsp-ls-wrap .tsp-ls__day::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--tsp-cat-line);
}

.tsp-ls-wrap .tsp-ls__group + .tsp-ls__group { margin-top: 26px; }

.tsp-ls-wrap .tsp-ls__group .tsp-cat__rows {
	margin-top: 10px;
	border-top: 0;
}

/* A group with no label still needs its top boundary — day_label() returns
   '' only if a timestamp is unreadable, which should not happen, but the
   row set should not lose its rule if it ever does. */
.tsp-ls-wrap .tsp-ls__group > .tsp-cat__rows:first-child {
	margin-top: 0;
	border-top: 1px solid var(--tsp-cat-line);
}

/* ---------------- narrow ---------------- */

@media (max-width: 520px) {
	.tsp-ls-wrap .tsp-ls__day {
		font-size: 10px;
		gap: 10px;
	}

	.tsp-ls-wrap .tsp-ls__group + .tsp-ls__group { margin-top: 20px; }
}

/* ---------------- row composition at phone widths ---------------- */

/* THE APPROVED 390 ARTBOARD IS A ROW, NOT A STACK.

   `category.css` turns the row into a full-bleed stack below 520 — image
   above text at 16/9 — and says why: at that width a thumbnail leaves too
   little headline. That is the right call for a section archive and it stays
   untouched; every category page is frozen and already approved.

   Latest Stories was designed differently and the artboard is explicit: at
   390 it is `132px | 1fr`, gap 13, media 4/3. The reason is the one that
   makes this page a register rather than a section index — it is the whole
   site in one chronological list, so a reader scans it for what is new
   across every desk. A stack gives roughly one story per phone screen; the
   thumbnail row gives three or four, and the desk kicker beside each
   headline is what makes the scan worth anything. Stacking here would also
   undo the very thing this page exists to fix: a story with no image and no
   excerpt becomes a full-width 16/9 gradient over two lines of text.

   WHY THE 361px FLOOR, and not a bare `max-width:520px`. Below 360
   `category.css` already returns the row to `96px | 1fr` at 96/70 — it
   reverses its own stack at the narrowest widths. That rule is
   `.tsp-cat__row` (0,1,0); every rule here is `.tsp-ls-wrap .tsp-cat__row`
   (0,2,0) in a sheet that loads afterwards, so an unbounded override would
   win at 320 too and replace a proven treatment with a thumbnail 36px wider
   than the one that width was tuned for. The floor leaves ≤360 alone.

   The result is a single monotonic progression, which the shared sheet on
   its own does not have: 190px 16/10 → 150px 4/3 → 132px 4/3 → 96px 96/70.
   The thumbnail only ever shrinks, and the row never becomes a stack.

   `align-items:start` follows the ≤360 block rather than the desktop one:
   it pins the media to the top of the row so it keeps its ratio instead of
   stretching to the height of a long Telugu headline beside it. */
@media (min-width:361px) and (max-width:520px) {
	.tsp-ls-wrap .tsp-cat__row {
		grid-template-columns: 132px minmax(0, 1fr);
		gap: 13px;
		padding: 14px 0;
		align-items: start;
	}

	.tsp-ls-wrap .tsp-cat__row-media {
		aspect-ratio: 4 / 3;
	}
}


/* v1.10.619 — the story count on the day rule.
 *
 * `order: 1` puts it AFTER `.tsp-ls__day::after`, the flexed hairline. A
 * generated ::after is the last child by definition, so a span appended in the
 * markup would otherwise land between the label and the rule and split the line
 * in two. Ordering it explicitly keeps the markup order honest — label, count —
 * while the rule still runs between them on screen.
 *
 * The label's own uppercase/letter-spacing is undone here: this is a number and
 * a noun, not a rubric, and tracking a numeral out is what makes a count read as
 * a heading rather than as data.
 *
 * It renders only where the number is verifiable — see
 * Latest_Stories_Template::group_is_complete() — so a day whose stories continue
 * onto another page carries no chip at all rather than a page-local count.
 */
.tsp-ls-wrap .tsp-ls__day-n {
	order: 1;
	flex: none;
	font-family: var(--ts-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tsp-cat-muted);
	background: #f6f6f4;
	border: 1px solid var(--tsp-cat-line);
	border-radius: 999px;
	padding: 4px 9px;
	white-space: nowrap;
}