/* Zenji — the agenda. One quiet list, grouped by day. The flat row language of
   DESIGN.md: hairlines, one amber dot for must-see, a ticking clock the only
   motion. No cards, no washes, no left-stripes, no chips, no chevrons, no emoji
   in the chrome. Each row answers only: when · what · where to watch. */

/* ── Live now: a quiet line at the very top, only when something is on ─────── */
.live-now { margin: 18px 0 4px; }
.live-now .live-label {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--live); font-weight: 700;
	margin-bottom: 6px;
}
.live-item {
	display: flex; align-items: baseline; gap: 12px;
	padding: 6px 0;
	font-size: 15px;
}
.live-item .live-score { font-weight: 600; font-variant-numeric: tabular-nums; }
.live-item .live-meta { color: var(--fg-2); font-size: 13px; margin-left: auto; white-space: nowrap; }

/* Live golf/F1: a quiet line — leader on the right, your athletes' live position
   under the name — that expands to the top of the leaderboard on tap. */
.live-body { display: flex; flex-direction: column; min-width: 0; }
.live-you { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; overflow-wrap: anywhere; }
.live-you .live-pos { color: var(--fg-3); }
.live-item.live-expand { cursor: pointer; }
.live-detail { padding: 6px 0 8px 15px; display: grid; gap: 3px; }
.lb-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.lb-pos { color: var(--fg-3); font-variant-numeric: tabular-nums; text-align: right; }
.lb-name { color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-x { color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-row.mine .lb-name, .lb-row.mine .lb-x { color: var(--accent); font-weight: 600; }
.live-out { color: var(--live); font-style: italic; font-size: 11.5px; }
.lb-cut { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-3); font-style: italic; }

/* The live marker — a small static block in the live colour (no pulsing: the
   clock's tick is the app's only continuous motion). */
.live-dot {
	width: 5px; height: 13px;
	background: var(--live); display: inline-block; flex-shrink: 0;
	align-self: center;
}

/* ── Day groups — an amber uppercase label over flat, hairline-separated rows ─
   28pt of air before the header, 10pt after (the DESIGN.md rhythm). */
.day { margin-top: 28px; }
.day:first-of-type { margin-top: 14px; }
.day-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);          /* day headers are one of the five amber uses */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}

/* Row wrapper — the hairline lives here, below every row (incl. the day's last). */
.ev-wrap { border-bottom: 1px solid var(--line); }

/* Event row — [dot] [time] [what + meta] [ⓘ]. Flat. Scanned by rhythm, not boxes.
   The whole row is tappable; that's signalled by rhythm + hover, never a chevron. */
.ev {
	display: grid;
	grid-template-columns: 14px var(--time-col) 1fr auto;
	column-gap: 12px;
	align-items: start;
	padding: 12px 0;
}
.ev.expandable { cursor: pointer; }
.ev.expandable:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ev.expandable:hover .ev-title { color: var(--accent); }

/* Must-see: the amber dot, left of the time — the whole language. No wash, no
   stripe, no amber text (never two amber elements in one row). */
.ev-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--accent);
	margin: 8px auto 0;
}

.ev-time {
	font-variant-numeric: tabular-nums;
	font-size: 16px;
	font-weight: 600;
	color: var(--fg);
	line-height: 1.35;
	overflow-wrap: break-word;   /* a multi-day window may wrap; a HH:MM never does */
}

.ev-main { min-width: 0; }
/* Titles are never truncated — they wrap to as many lines as they need. */
.ev-title {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: var(--fg);
	line-height: 1.3;
	overflow-wrap: break-word;
}
/* One muted meta line: tournament · round · where-to-watch (or status/result). */
.ev-meta {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	color: var(--fg-2);
	line-height: 1.4;
	overflow-wrap: break-word;
}
.ev-sep { color: var(--fg-3); }
.ev-round { color: var(--fg-2); }

/* ⓘ — mono, dempet, ONLY on AI-research rows; opens provenance in the detail. */
.ev-info {
	color: var(--fg-3);
	font-size: 15px;
	line-height: 1.35;
	margin-top: 1px;
	justify-self: end;
}
.ev.expandable:hover .ev-info { color: var(--accent); }

/* Where to watch — quiet, inline in the meta line. Faint dash when unknown. */
.ev-where { color: var(--fg-2); }
.ev-where a { border-bottom: 1px dotted var(--fg-3); }
.ev-where a:hover { border-bottom: 1px solid var(--accent); color: var(--accent); }
.ev-where.unknown { color: var(--fg-3); }
.ev-where.tentative { color: var(--fg-3); font-style: italic; }
.ev-where-more { color: var(--fg-3); font-size: 12px; margin-left: 3px; }

/* Cancelled/postponed: stays on the board, clearly faded (never the live colour). */
.ev.cancelled { opacity: 0.55; }
.ev.cancelled .ev-title { text-decoration: line-through; text-decoration-color: var(--fg-3); }
.ev-status { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2); white-space: nowrap; }
/* Finished: stays briefly with its result, gently dimmed (it happened). */
.ev.done { opacity: 0.7; }
.ev-done { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); white-space: nowrap; }
.ev-done-score { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; margin-left: 5px; }
/* Live in-progress: the score in the live colour. */
.ev-live { color: var(--live); font-variant-numeric: tabular-nums; font-weight: 600; }
.d-v .tbd { color: var(--fg-3); font-style: italic; }

/* Expanded detail — the "nice extra", quiet, only on demand. Indented under the
   title column; same flat row language, no card-in-a-card. */
.ev-detail {
	padding: 4px 0 16px calc(14px + 12px + var(--time-col) + 12px);
	display: grid;
	gap: 6px;
	font-size: 13.5px;
}
.ev-detail .d-row { display: flex; gap: 10px; align-items: baseline; }
.ev-detail .d-k { color: var(--fg-3); min-width: 62px; flex-shrink: 0; }
.ev-detail .d-v { color: var(--fg-2); }
.ev-detail a { color: var(--accent); border-bottom: 1px solid transparent; }
.ev-detail a:hover { border-bottom-color: var(--accent); }
/* Collapsed stage race (e.g. Tour de France): past stages dimmed when expanded */
.ev-detail .d-row.stage.past { opacity: 0.45; }

/* Detail actions — quiet flat text buttons, no pills. */
.d-actions { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.ev-act { font-size: 12.5px; color: var(--fg-2); background: none; border: none; padding: 0; cursor: pointer; border-bottom: 1px solid transparent; }
.ev-act:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Quiet "show the rest of the fortnight" control — flat text, no pill, no arrow. */
.agenda-more {
	display: block;
	margin: 26px auto 0;
	padding: 8px;
	font-size: 13px;
	color: var(--fg-2);
	background: none;
	border: none;
}
.agenda-more:hover { color: var(--accent); }

.empty { color: var(--fg-2); font-size: 15px; padding: 40px 0; text-align: center; }

/* ── "Dine neste": the compact top glance ─────────────────────────────────
   A quiet borderless list under a muted label — flat rows, one hairline + air
   below to set it apart from the schedule. Upcoming-only. */
.next-up { margin: 20px 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.nu-label {
	font-size: 12px; font-weight: 600; color: var(--fg-2);
	letter-spacing: 0.08em; text-transform: uppercase;
	margin: 0 0 6px 0;
}
.next-up .fn-row { padding: 7px 0; }
.nu-more { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--fg-2); background: none; border: none; padding: 2px 0; cursor: pointer; }
.nu-more:hover { color: var(--accent); }

/* ── "Neste" index rows — one quiet row per followed athlete/team ──────────
   name · relative day; tap to expand when·what·where; honest gap when empty. */
.follow-next { list-style: none; margin: 0; padding: 0; }
.fn-item { border-top: 1px solid var(--line); }
.fn-item:first-child { border-top: none; }
.fn-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; }
.fn-item.has-event .fn-row { cursor: pointer; }
.fn-item.has-event .fn-row:hover .fn-name { color: var(--accent); }
.fn-name { font-size: 15px; color: var(--fg); min-width: 0; overflow-wrap: break-word; }
.fn-sub { display: block; font-size: 12px; color: var(--fg-3); font-style: italic; margin-top: 1px; }
.fn-when { font-size: 13px; color: var(--fg-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-detail { padding: 2px 0 12px 0; display: grid; gap: 6px; font-size: 13px; }
.fn-detail .d-row { display: flex; gap: 10px; align-items: baseline; }
.fn-detail .d-k { color: var(--fg-3); min-width: 52px; flex-shrink: 0; }
.fn-detail .d-v { color: var(--fg-2); }
.fn-detail .tbd { color: var(--fg-3); font-style: italic; }
.fn-detail a { color: var(--accent); border-bottom: 1px solid transparent; }
.fn-detail a:hover { border-bottom-color: var(--accent); }

/* ── "Hva vi følger" — one quiet disclosure at the very bottom ─────────────── */
.followed {
	margin-top: 40px;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}
.followed summary {
	font-size: 14px;
	color: var(--fg-2);
	cursor: pointer;
	list-style: none;
}
.followed-edit-top { margin-left: 14px; font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.followed-edit-top:hover { text-decoration: underline; }
.followed summary::-webkit-details-marker { display: none; }
.followed summary::before { content: "▸ "; color: var(--fg-3); }
.followed[open] summary::before { content: "▾ "; }
.followed-body { margin-top: 14px; }
.followed-layer { margin-bottom: 22px; }
.chip-group { margin-bottom: 14px; }
.chip-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: 6px; }
/* Tournaments read as a quiet dot-separated line, not pills. */
.chips-row { margin-bottom: 0; line-height: 1.9; }
.chip-follow { font-size: 13px; color: var(--fg); }
.chip-follow:not(:last-child)::after { content: " · "; color: var(--fg-3); }
.followed-hint { font-size: 12.5px; color: var(--fg-3); font-style: italic; margin-top: 10px; }
.followed-hint .followed-edit { color: var(--accent); font-style: normal; }

/* ── Phones: keep the title (what's on) winning the width ─────────────────── */
@media (max-width: 460px) {
	:root { --time-col: 112px; }
	.ev { column-gap: 10px; }
	.ev-time { font-size: 15px; }
	.ev-title { font-size: 15.5px; }
	.ev-meta { font-size: 13px; }
}