/*
	tt.css – Text-TV-designsystemet (todo #18).
	Tokens och komponenter. Laddas efter styles.css och texttvpage.css.
*/

:root {
	/* Färger, samma värden som texttvpage.css. */
	--tt-black: #000;
	--tt-blue-bg: #00f; /* Rubrikband. Bara som bakgrund. */
	--tt-blue-fg: #12c; /* Bara inne på Text-TV-sidorna: 2:1 mot svart. */
	--tt-white: rgb(252, 254, 252); /* Brödtext. */
	--tt-yellow: rgb(252, 254, 1); /* Länkar, handlingar, markerad rad. */
	--tt-cyan: #00c8ee; /* Metadata: tid, placering, sidnummer. */
	--tt-red: rgb(252, 3, 4);
	--tt-green: #0f0;
	--tt-magenta: rgb(252, 3, 253);
	--tt-neutral: #9a9a9a; /* Det enda tillägget: annonsetiketter. */

	--tt-font: "Ubuntu Mono", Courier, monospace;

	/* Luft på var sida om Text-TV-sidan på mobil. */
	--tt-gutter: 8px;
}

/*
	Sidans storlek räknas ur utrymmet sidan får, inte ur skärmen, så att
	de 40 tecknen alltid ryms: med sidomenyn öppen, med flera sidor i
	bredd och i liggande läge. Ubuntu Mono är 0,5 em per tecken, så 40
	tecken är 20 em. 10px = sidans egen padding (.li, 5px per sida).
	Taket i rem gör att användarens textstorlek respekteras.
	Delningsbilderna (html.appShare) behåller sina fasta storlekar.
	Utanför #pages finns ingen container, och då räknas cqi mot skärmen.
*/
html:not(.appShare) #pages {
	container-type: inline-size;
}

html:not(.appShare) #pages .one-page,
html:not(.appShare) .tt-sidbredd {
	font-size: clamp(10px, (100cqi - 2 * var(--tt-gutter) - 10px) / 20, 1.375rem);
}

/* styles.css trycker ihop tecknen på iPad i liggande läge (letter-spacing
   -1px) för att två sidor ska rymmas. Det sköter storleken ovan nu, och
   utan nollställningen blir sidan smalare än 40ch och banden runt den. */
html:not(.appShare) #pages .one-page,
html:not(.appShare) .tt-sidbredd {
	letter-spacing: 0;
}

/*
	Brödtexten utanför sidorna. Samma räkning som sidan men mot skärmen,
	14–22 px. Ersätter de gamla brytpunkterna per enhet (iPhone 5/6, iPad).
	Delningsbilderna har egna storlekar i styles.css (.appShare body).
*/
body,
pre {
	font-size: clamp(14px, (100vw - 2 * var(--tt-gutter) - 10px) / 20, 1.375rem);
}

/*
	Ett block som följer Text-TV-sidans bredd: samma teckenstorlek och 40
	tecken, vänsterställt på sidans axel. 10px = sidans padding, så att
	bandet går kant i kant med sidan ovanför.
*/
.tt-sidbredd {
	box-sizing: border-box;
	width: calc(40ch + 10px);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: 5px;
	text-align: left;
	font-family: var(--tt-font);
	line-height: 1.25;
}

/* Länkar: gul och understruken. Hover och fokus inverterar (beslut 1). */
.tt-link,
.tt-linkrow a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tt-yellow);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* En knapp som ser ut som en länk ("Dela →"). */
button.tt-link {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.tt-link:hover,
.tt-linkrow a:hover,
.tt-list a:hover,
.tt-link:focus-visible,
.tt-linkrow a:focus-visible,
.tt-list a:focus-visible {
	background: var(--tt-yellow);
	color: var(--tt-black);
	text-decoration: none;
	opacity: 1;
}

.tt-link:focus-visible,
.tt-linkrow a:focus-visible,
.tt-list a:focus-visible {
	outline: 2px solid var(--tt-white);
	outline-offset: 2px;
}

/* Rubrikband i full bredd. */
.tt-band {
	display: block;
	margin-block: 0;
	padding: .15em 1ch;
	background: var(--tt-blue-bg);
	color: var(--tt-white);
	font-family: inherit;
	font-weight: normal;
}

/* Lista med en kolumn för metadata (placering, tid, sidnummer) i cyan och
   hängande indrag. Bredden på kolumnen sätts med --tt-list-meta. */
.tt-list {
	display: grid;
	grid-template-columns: var(--tt-list-meta, 2ch) 1fr;
	row-gap: .3em;
	margin: .5em 0 0;
	padding: 0;
	list-style: none;
}

.tt-list > li {
	display: contents;
}

/* Lite luft runt varje rad, så att rubrikerna blir lättare att träffa. */
.tt-list__meta,
.tt-list a {
	padding-block: .2em;
}

.tt-list__meta {
	color: var(--tt-cyan);
}

.tt-list a {
	color: var(--tt-white);
	text-decoration: none;
}

/* Rubriknivå 2: dubbelhög text som på Text TV, i gult. */
.tt-h2 {
	display: block;
	height: 2.5em;
	margin: 1em 0 .25em;
	font: inherit;
	line-height: 1.25;
	color: var(--tt-yellow);
}

.tt-h2 > span {
	display: inline-block;
	transform: scaleY(2);
	transform-origin: top left;
}

/* Rad med länkar som bryts snyggt. */
.tt-linkrow {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2ch;
}

/* Gårdagens länkar under sidan (views/day_archive_link.php). På startsidan
   en ruta i raden bredvid sida 100, lika bred som en sida. */
.day-archive-link {
	margin-block: 1em;
}

.day-archive-link--inline {
	display: inline-block;
	vertical-align: top;
}

/* Raden under sidan: tid i cyan till vänster, "Dela →" till höger. */
.pageshare {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block: .5em;
}

.pageshare__updated {
	margin: 0;
	color: var(--tt-cyan);
}

/* Annonsetiketten. Annonsens egen bredd lämnas orörd (intäkterna). */
.ad-header {
	font-family: var(--tt-font);
	font-size: .875rem;
	text-transform: none;
	color: var(--tt-neutral);
}

/* Senaste nyheterna och sportnyheterna: en kolumn i sidans bredd på mobil,
   två bredvid varandra när de får plats. */
.latest-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 2ch;
	padding: 0;
	font-family: var(--tt-font);
}

.latest-pages .latest-pages-list {
	float: none;
	margin: 0 0 1.5em;
	--tt-list-meta: 6ch;
}

.latest-pages h2 {
	display: block;
	margin-bottom: .25em;
}

/*
	Appramen (views/controls.php). Svart och i sidans bredd, två rader på
	44 px. Höjden (cirka 100 px) är densamma som förut, så #pages och
	.breadcrumbs behåller sin margin-top i styles.css.
*/
.controls {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	padding: 4px 0;
	background: var(--tt-black);
	border-bottom: 2px solid var(--tt-blue-bg);
	color: var(--tt-white);
	line-height: 1.25;
}

/* Sidomenyn står alltid framme från 700 px, och ramen börjar efter den. */
@media only screen and (min-width: 700px) {
	.controls {
		left: 250px;
	}
}

.controls__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 44px;
}

/* Föregående, sökfältet och nästa: fältet i mitten även när en pil saknas. */
.controls__row--pages {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: 1ch;
}

.controls__next {
	justify-self: end;
}

.controls__home {
	display: inline-flex;
	align-items: center;
	gap: 1ch;
	min-height: 44px;
	color: var(--tt-white);
	text-decoration: none;
}

.controls__home svg {
	width: 1.5em;
	height: 1.5em;
}

.controls__home:hover,
.controls__home:focus-visible {
	background: var(--tt-yellow);
	color: var(--tt-black);
}

.controls__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* "Gå till sida": blått fält med vit text, som ett rubrikband. */
.controls-topnav-form {
	margin: 0;
}

.controls-topnav-search-input {
	box-sizing: border-box;
	width: 14ch;
	height: 36px;
	margin: 0;
	padding: 0 1ch;
	border: 0;
	border-radius: 0;
	background: var(--tt-blue-bg);
	color: var(--tt-white);
	font: inherit;
	text-align: center;
}

.controls-topnav-search-input::placeholder {
	color: var(--tt-white);
	opacity: 1;
}

.controls-topnav-search-input:focus {
	outline: 2px solid var(--tt-yellow);
	outline-offset: 2px;
}

.controls-topnav-search-input:focus::placeholder {
	color: transparent;
}

/* Sidans h1 ovanför Text-TV-sidan: ett band kant i kant med sidan. */
.pages-headline {
	margin-block: .5em 0;
	padding-inline: .5ch; /* 39 tecken ryms: "SVT Text TV - Nyheter och Sportresultat" */
}

/*
	Flera sidor (startsidan, /100,300): från 900 px i #pages står två sidor
	bredvid varandra utan mellanrum, 2 × (40ch + 10px) vid 22 px. Bandet och
	ramen spänner då över båda. 1150px = 900 + sidomenyn på 250.
*/
@container (min-width: 900px) {
	.page-multiple .pages-headline {
		width: calc(2 * (40ch + 10px));
	}
}

@media only screen and (min-width: 1150px) {
	.page-multiple .controls__inner {
		width: calc(2 * (40ch + 10px));
	}
}