/* ==========================================================================
   Looks — Schriftdateien und die Mini-Vorschau im Dialog «Darstellung»
   (docs/DESIGN.md §8)

   Diese Datei haengt auf jeder Seite, unabhaengig vom gewaehlten Look.
   Sie enthaelt zwei Dinge und sonst nichts:

     1. die @font-face-Regeln aller Look-Schriften. Sie kosten nichts:
        eine Schriftdatei laedt der Browser erst, wenn wirklich ein
        Zeichen damit gesetzt wird. Instrument Sans steht nicht hier —
        sie ist die Schrift des Nullpunkts und in app.css deklariert.
     2. die Mini-Vorschau der vier Optionen im Dialog. Sie muss jede der
        vier Schriften zeigen koennen, auch wenn gerade eine andere gilt;
        darum gehoert sie hierher und nicht in eine der Look-Dateien.

   Die Look-Dateien selbst setzen ausschliesslich Tokens und ein paar
   gezielte Regeln. app.css bleibt unangetastet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften der Looks

   Alle selbst gehostet unter assets/fonts/, alle SIL Open Font License
   1.1 (Lizenztexte: assets/fonts/LIZENZEN.md). Kein Google-Fonts-Request.
   Statische Schnitte statt variabler Dateien, weil nur drei bis vier
   Gewichte gebraucht werden und die Latin-Teilmenge je Schnitt unter
   25 kB bleibt.
   -------------------------------------------------------------------------- */

/* ---- Source Serif 4 — «Lesesaal» ------------------------------------- */

@font-face {
	font-family: "Source Serif 4";
	src: url("../../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../../fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../../fonts/source-serif-4-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---- Manrope — «Labor» ----------------------------------------------- */

@font-face {
	font-family: "Manrope";
	src: url("../../fonts/manrope-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../../fonts/manrope-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../../fonts/manrope-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---- IBM Plex Sans — «Karte» ----------------------------------------- */

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Der Abschnitt «Look» im Dialog «Darstellung»

   Dieselbe Bauart wie «Layout» (app.css, Abschnitt 37): ein Radio je
   Option, Wort und Erklaerung untereinander. Nur zwei Unterschiede: es
   sind vier statt drei Optionen — darum zwei mal zwei statt einer Reihe —
   und unter der Erklaerung stehen drei Zeilen Text in der Schrift des
   Looks. Keine Bilder: was ein Look aendert, ist Schrift und Mass, und
   genau das zeigen drei Zeilen Text.
   -------------------------------------------------------------------------- */

.theme-segment-look {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 0;
}

/* Der Dialog traegt jetzt drei Abschnitte statt zwei. Untereinander
   waeren die Farben nur noch nach einem Scrollweg zu sehen — also
   nebeneinander: links die beiden Abschnitte, die die Form bestimmen
   (Look, Layout), rechts die Farben. Die Zuordnung geht ueber die
   Reihenfolge im Snippet; die Linie zwischen den Spalten steht damit
   wieder senkrecht. Unterhalb von 900 px bleibt alles wie gehabt
   untereinander. */
@media (min-width: 900px) {
	.darstellung {
		width: min(940px, calc(100vw - 2 * var(--raum-5)));
	}

	.darstellung-korpus {
		display: grid;
		grid-template-columns: 450px minmax(0, 1fr);
		align-items: start;
	}

	.darstellung-korpus > .darstellung-spalte:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.darstellung-korpus > .darstellung-spalte:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
		border-left: 0;
		border-top: 1px solid var(--border);
	}

	.darstellung-korpus > .darstellung-spalte:nth-child(3) {
		grid-column: 2;
		grid-row: 1 / span 2;
		border-top: 0;
		border-left: 1px solid var(--border);
	}
}

/* Die Probe ist Anschauung, kein Text zum Lesen: der Bildschirmleser
   ueberspringt sie (aria-hidden im Snippet), die Farbe bleibt leise. */
.look-probe {
	display: grid;
	gap: 1px;
	width: 100%;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--border);
	font-style: normal;
	font-size: 12px;
	line-height: 1.35;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* Die drei Zeilen sind <span> in einem <label> — und app.css gibt jedem
   <span> in einer Modus-Option Rahmen, Radius und feste Hoehe: das ist
   die Form des Knopfes selbst. Hier sind es Textzeilen, die Form muss
   also zurueckgenommen werden. Deshalb steht vor jeder Regel zu diesen
   Zeilen derselbe lange Pfad: nur so schlaegt sie
   `.theme-segment-layout .theme-modus-option span` sicher. */
.theme-segment-look .theme-modus-option .look-probe span {
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: 400;
	color: inherit;
	white-space: normal;
}

.theme-segment-look .theme-modus-option .look-probe .probe-titel {
	color: var(--text);
	font-weight: 600;
}

.theme-segment-look .theme-modus-option .look-probe .probe-meta {
	font-size: 11px;
	color: var(--text-faint);
}

/* Jede Probe traegt die Schrift ihres Looks — auch die drei, die gerade
   nicht gelten. Die Groessen sind grob die des Looks, damit der
   Unterschied zwischen «Lesesaal» und «Labor» im Dialog sichtbar ist. */
.look-probe[data-probe="instrument"] {
	font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

.look-probe[data-probe="lesesaal"] {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	font-size: 13px;
	line-height: 1.5;
}

.theme-segment-look .theme-modus-option .look-probe[data-probe="lesesaal"] .probe-titel {
	font-weight: 500;
}

.look-probe[data-probe="labor"] {
	font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
	font-size: 11.5px;
	line-height: 1.3;
}

.theme-segment-look .theme-modus-option .look-probe[data-probe="labor"] .probe-meta {
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.look-probe[data-probe="karte"] {
	font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	line-height: 1.45;
}

/* Auf schmalen Fenstern steht der Dialog als ganze Seite; dort ist eine
   Spalte richtig, sonst wird jede Probe zum Schnipsel. */
@media (max-width: 760px) {
	.theme-segment-look {
		grid-template-columns: minmax(0, 1fr);
	}
}