/*
 * Anvil Story Map -- Karte.
 *
 * ---------------------------------------------------------------------------
 * WARUM EINE FESTE PALETTE UND KEINE ACHT SCHEMA-VARIANTEN
 * ---------------------------------------------------------------------------
 * Alle acht data-scheme-Slugs teilen sich dieselbe helle Basis
 * (--bg-body: #ffffff bzw. #f9f9f8 bei "midnight" -- siehe
 * anvil-of-war-theme-v2/style.css, Zeilen 15-39: "eine einheitliche helle
 * Basis-Palette über alle 8 Schemata hinweg"). Nur der lokale Hero-Bereich
 * (#content .site-hero) geht je Schema dunkel. Eine Palette, die gegen
 * WEISS kontrastgeprüft ist, funktioniert deshalb in allen acht Schemata
 * gleichermaßen -- zwölf verschiedene Paletten wären keine zwölf
 * verschiedenen Antworten, sondern zwölf Kopien derselben.
 *
 * Für den Fall, dass die Karte doch einmal in einem dunklen Container
 * landet (z. B. per Shortcode im Hero-Bereich), liegt unten ein zweiter
 * Satz hinter der Hero-Selektorkette -- hellere Varianten derselben zwölf
 * Farben, nach demselben Muster wie die Hero-Overrides in style.css.
 *
 * Farb-Slugs entsprechen den Werten, die AGL_Taxonomien-Termine (siehe
 * anvil-story-map/includes/class-asm-taxonomien.php, asm_farbe) tragen
 * dürfen. Zwölf Stränge, zwölf Slugs (Bauplan Anhang A) -- mehr braucht
 * 0.1.0/0.2.0 nicht, ein dreizehnter Strang bekäme vorerst die
 * Rückfallfarbe.
 *
 * Kontrastwerte gegen #ffffff (WCAG-Rechnung, alle >= 5.3:1, AA für
 * Fließtext ab 4.5:1):
 *   crimson 7.4 · amber 5.9 · citrine 5.4 · olive 5.9 · emerald 6.5 ·
 *   teal 6.4 · cerulean 7.3 · indigo 9.3 · violet 8.7 · magenta 8.1 ·
 *   slate 7.5 · umber 8.5
 */
:root {
	--asm-crimson:  #a3241f;
	--asm-amber:    #8a5a00;
	--asm-citrine:  #7a6a00;
	--asm-olive:    #5c6b1f;
	--asm-emerald:  #1f6b3a;
	--asm-teal:     #0f6b60;
	--asm-cerulean: #1a5a8a;
	--asm-indigo:   #3a3a9c;
	--asm-violet:   #6a2f8f;
	--asm-magenta:  #8f2266;
	--asm-slate:    #4a5568;
	--asm-umber:    #6b4423;

	--asm-node-r: 14px;
}

/* Hellere Varianten fuer den Fall eines dunklen Containers (siehe oben). */
[data-scheme] #content .site-hero .asm-map {
	--asm-crimson:  #e8776f;
	--asm-amber:    #e0a83a;
	--asm-citrine:  #d4c23a;
	--asm-olive:    #a8c060;
	--asm-emerald:  #5ec488;
	--asm-teal:     #4ac4b4;
	--asm-cerulean: #5ba8e0;
	--asm-indigo:   #8888e0;
	--asm-violet:   #b478d8;
	--asm-magenta:  #d874ac;
	--asm-slate:    #a0aec0;
	--asm-umber:    #c08a58;
}

.asm-map {
	margin: 1.5rem 0;
	color: var(--text-body, var(--text-muted));
}

.asm-map-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: .75rem;
}

.asm-map-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	color: var(--text-muted);
	cursor: pointer;
}

/*
 * Zweispaltig, MIT flex-wrap: nowrap.
 *
 * Media Queries messen die Fensterbreite, nicht den Inhaltsbereich -- auf
 * einer Seite mit Sidebar ist das Fenster breit, der Kasten schmal, und
 * eine max-width-Query griffe dort nicht (siehe
 * anvil-chapter-generator/assets/css/acg-frontend.css, dasselbe Muster).
 * flex-wrap: nowrap zwingt die Seitenleiste erst umzubrechen, wenn der
 * KASTEN selbst zu schmal wird, nicht das Fenster.
 */
.asm-map-layout {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 1.5rem;
}

.asm-map-graph {
	flex: 1 1 28rem;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 6px);
	background: var(--bg-surface);
	overflow: hidden;
}

.asm-map-side {
	flex: 0 1 18rem;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 6px);
	background: var(--bg-card);
	padding: 1rem 1.1rem;
	position: sticky;
	top: 1rem;
}

/* position: sticky wirkt nur mit align-items: flex-start am Elternelement
   (siehe .asm-map-layout oben) -- bei stretch fuellt das Element seinen
   Scrollbereich aus und kann nirgends kleben. */

@media ( max-width: 46rem ) {
	.asm-map-layout {
		flex-direction: column;
	}
	.asm-map-side {
		position: static;
		flex-basis: auto;
		width: 100%;
	}
}

.asm-map-canvas {
	width: 100%;
	min-height: 22rem;
	position: relative;
}

.asm-map-status,
.asm-map-hint {
	padding: 1rem;
	color: var(--text-muted);
	font-size: .9rem;
}

.asm-map-status.is-error {
	color: var(--accent);
}

.asm-map-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Kanten --- */

.asm-edge-fortsetzung {
	stroke: var(--border-hi);
	stroke-width: 2;
	fill: none;
}

.asm-edge-bruecke {
	stroke: var(--gold);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	fill: none;
	opacity: .7;
}

.asm-map.is-bridges-only .asm-edge-fortsetzung {
	display: none;
}

/* --- Knoten --- */

.asm-node-circle {
	stroke: var(--bg-surface);
	stroke-width: 2;
	cursor: pointer;
}

.asm-node-label {
	font-size: 10px;
	font-weight: 600;
	fill: var(--bg-surface);
	pointer-events: none;
	text-anchor: middle;
	dominant-baseline: central;
}

.asm-node.is-dim .asm-node-circle,
.asm-edge.is-dim {
	opacity: .25;
}

.asm-node.is-hover .asm-node-circle,
.asm-node.is-pinned .asm-node-circle {
	stroke: var(--gold);
	stroke-width: 3;
}

.asm-node.is-pinned .asm-node-circle {
	stroke: var(--accent);
}

.asm-edge.is-highlight {
	opacity: 1;
	stroke-width: 3;
}

/* --- Seitenleiste --- */

.asm-side-title {
	margin: 0 0 .35rem;
	color: var(--gold);
	font-size: 1.05rem;
}

.asm-side-meta {
	display: block;
	font-size: .8rem;
	color: var(--text-muted);
	margin-bottom: .6rem;
}

.asm-side-row {
	margin: 0 0 .5rem;
	font-size: .85rem;
}

.asm-side-row strong {
	display: block;
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: .15rem;
}

.asm-side-strand {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin: 0 .4rem .3rem 0;
	font-size: .8rem;
}

.asm-side-strand-dot {
	display: inline-block;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
}

.asm-side-link {
	display: inline-block;
	margin-top: .4rem;
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.asm-side-link:hover {
	text-decoration: underline;
}

/* --- Umschalter ([anvil_story_map_ansichten]) --- */

.asm-ansicht-tabs {
	display: flex;
	gap: .5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.asm-ansicht-tab {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: .5rem .25rem .6rem;
	margin-bottom: -1px;
	font-size: .85rem;
	color: var(--text-muted);
	cursor: pointer;
}

.asm-ansicht-tab.is-aktiv {
	color: var(--text-body, var(--text-muted));
	border-bottom-color: var(--accent);
}

/*
 * Dieselbe Falle wie bei .aga-lupe[hidden] und .ansr-vorschau[hidden]: eine
 * Basisklasse mit display:block/flex ueberstimmt sonst das
 * [hidden]-Attribut, und das versteckte Panel bliebe sichtbar.
 */
.asm-ansicht-panel[hidden] {
	display: none;
}

/* --- Chronologie-Ansicht ([anvil_story_map_zeitachse]) --- */

.asm-timeline {
	margin: 1.5rem 0;
	color: var(--text-body, var(--text-muted));
}

.asm-timeline-canvas {
	min-height: 8rem;
}

/*
 * Grid statt flex-wrap: nowrap -- anders als das Graph+Seitenleiste-Layout
 * oben ist das hier eine Kartenreihe, die UMBRECHEN soll, nicht ein
 * Hauptbereich mit fester Nebenspalte. auto-fit/minmax braucht dafuer
 * keine eigene Media Query.
 */
.asm-timeline-track {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 1.25rem;
	align-items: start;
}

.asm-timeline-epoch {
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 6px);
	background: var(--bg-surface);
	padding: 1rem 1.1rem;
}

.asm-timeline-epoch[data-epoche=""] {
	border-style: dashed;
}

.asm-timeline-epoch-title {
	margin: 0 0 .75rem;
	color: var(--gold);
	font-size: 1rem;
}

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

.asm-timeline-item {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding: .35rem 0;
	border-top: 1px solid var(--border);
	font-size: .85rem;
}

.asm-timeline-item:first-child {
	border-top: none;
}

.asm-timeline-dot {
	flex: 0 0 auto;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	margin-top: .3rem;
}

.asm-timeline-link {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--text-body, var(--text-muted));
	text-decoration: none;
}

a.asm-timeline-link:hover {
	color: var(--accent);
	text-decoration: underline;
}

.asm-timeline-era {
	flex: 0 0 auto;
	color: var(--text-muted);
	font-size: .75rem;
	white-space: nowrap;
}

/* Beide Sprachen liegen gleichzeitig im data-lang-Paar -- die
   allgemeine Regel des Themes blendet die falsche Sprache aus,
   diese Datei muss dafuer nichts Eigenes mitbringen. */