/* ---------- Routekaart ---------- */
.ko-rmap {
	--rmap-sea: var(--ko-ink);
	--rmap-land: #1d3148;
	--rmap-coast: #3a5673;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--ko-space-7);
	align-items: start;
	margin: var(--ko-space-6) 0;
}
.ko-rmap__map {
	position: relative;
	margin: 0;
	background: var(--rmap-sea);
	border-radius: var(--ko-radius-lg);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--ko-line-ink);
}
.ko-rmap__map svg { display: block; width: 100%; height: auto; }
.ko-rmap__land { fill: var(--rmap-land); stroke: var(--rmap-coast); stroke-width: 0.8; stroke-linejoin: round; }
.ko-rmap__grid path { fill: none; stroke: var(--ko-line-ink); stroke-width: 0.8; stroke-dasharray: 2 6; }
.ko-rmap__grid text { fill: var(--ko-on-ink-muted); font-family: var(--ko-font-mono); font-size: 15px; opacity: 0.7; }
.ko-rmap__countries text { fill: var(--ko-on-ink-muted); font-family: var(--ko-font-display); font-style: italic; font-size: 26px; letter-spacing: 0.04em; opacity: 0.55; }

.ko-rmap__route { fill: none; stroke: var(--ko-fjord-light); stroke-width: 2.4; stroke-dasharray: 7 7; stroke-linecap: round; opacity: 0.6; transition: opacity 0.35s var(--ko-ease), stroke-width 0.35s var(--ko-ease); }
.ko-rmap__route.is-main { stroke: var(--ko-lamp); stroke-dasharray: none; stroke-width: 3.6; opacity: 0.95; }
.ko-rmap__route.is-active { opacity: 1; stroke-width: 4.4; filter: drop-shadow(0 0 6px rgba(140, 195, 196, 0.6)); }
.ko-rmap__route.is-main.is-active { stroke-width: 5; filter: drop-shadow(0 0 8px rgba(242, 169, 59, 0.6)); }
.ko-rmap__route.is-dim { opacity: 0.22; }
.ko-rmap:not([data-active="kiel-oslo"]) .ko-rmap__route.is-main { opacity: 0.45; }
.ko-rmap__hit { fill: none; stroke: transparent; stroke-width: 24; cursor: pointer; pointer-events: stroke; }
.ko-rmap__ship { fill: var(--ko-white); stroke: var(--ko-lamp); stroke-width: 2.5; }
.ko-rmap:not([data-active="kiel-oslo"]) .ko-rmap__ship { opacity: 0.4; }

.ko-rmap__port circle { fill: var(--rmap-sea); stroke: var(--ko-on-ink-muted); stroke-width: 2; transition: fill 0.3s, stroke 0.3s; }
.ko-rmap__port rect { fill: var(--ko-on-ink-muted); }
.ko-rmap__port text { fill: var(--ko-on-ink-muted); font-family: var(--ko-font-mono); font-size: 17px; paint-order: stroke; stroke: var(--rmap-sea); stroke-width: 5px; stroke-linejoin: round; transition: fill 0.3s; }
.ko-rmap__port.is-main text { fill: var(--ko-on-ink); font-size: 21px; }
.ko-rmap__port.is-main circle { stroke: var(--ko-lamp); }
.ko-rmap__port.is-on circle { fill: var(--ko-lamp); stroke: var(--ko-white); }
.ko-rmap__port.is-on text { fill: var(--ko-white); }

.ko-rmap__legend {
	position: absolute;
	left: var(--ko-space-4);
	bottom: var(--ko-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--ko-radius);
	background: rgba(15, 28, 43, 0.85);
	color: var(--ko-on-ink);
	font-family: var(--ko-font-mono);
	font-size: 0.8rem;
}
.ko-rmap__key::before { content: ""; display: inline-block; width: 1.6rem; margin-right: 0.45rem; vertical-align: middle; border-top: 2px dashed var(--ko-fjord-light); }
.ko-rmap__key.is-main::before { border-top: 3px solid var(--ko-lamp); }
.ko-rmap__src { color: var(--ko-on-ink-muted); }

.ko-rmap__panel { position: sticky; top: 6rem; display: grid; gap: var(--ko-space-4); }
.ko-rmap__hint { margin: 0; font-family: var(--ko-font-mono); font-size: 0.8rem; color: var(--ko-muted); }
.ko-band--ink .ko-rmap__hint { color: var(--ko-on-ink-muted); }
.ko-rmap__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.ko-prose .ko-rmap__list li { margin: 0; }
.ko-prose .ko-rmap__list li::marker { content: none; }
.ko-rmap__pick {
	width: 100%;
	display: grid;
	gap: 0.1rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--ko-line);
	border-radius: var(--ko-radius);
	background: var(--ko-white);
	color: var(--ko-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}
.ko-rmap__pick:hover { border-color: var(--ko-fjord); }
.ko-rmap__pick.is-main { border-color: var(--ko-lamp-deep); }
.ko-rmap__pick-route { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.ko-rmap__pick-time { font-family: var(--ko-font-mono); font-size: 0.8rem; color: var(--ko-muted); }
.ko-rmap__pick[aria-pressed="true"] { background: var(--ko-ink); border-color: var(--ko-ink); color: var(--ko-on-ink); }
.ko-rmap__pick[aria-pressed="true"] .ko-rmap__pick-time { color: var(--ko-lamp); }
.ko-band--ink .ko-rmap__pick { background: var(--ko-ink-2); border-color: var(--ko-line-ink); color: var(--ko-on-ink); }
.ko-band--ink .ko-rmap__pick-time { color: var(--ko-on-ink-muted); }
.ko-band--ink .ko-rmap__pick[aria-pressed="true"] { background: var(--ko-lamp); border-color: var(--ko-lamp); color: var(--ko-ink); }
.ko-band--ink .ko-rmap__pick[aria-pressed="true"] .ko-rmap__pick-time { color: var(--ko-ink); }

.ko-rmap__card {
	padding: var(--ko-space-5);
	border-radius: var(--ko-radius-lg);
	background: var(--ko-white);
	color: var(--ko-text);
	box-shadow: 0 18px 40px -22px rgba(15, 28, 43, 0.45);
	animation: ko-card-in 0.35s var(--ko-ease);
}
.ko-rmap__card[hidden] { display: none; }
@keyframes ko-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ko-rmap__region { margin: 0 0 0.3rem; font-family: var(--ko-font-mono); font-size: 0.8rem; color: var(--ko-fjord); }
.ko-rmap .ko-rmap__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; margin: 0 0 var(--ko-space-3); font-size: var(--ko-step-2); line-height: 1.25; color: var(--ko-text); }
.ko-rmap__mark { width: 2.2rem; color: var(--ko-lamp-deep); }
.ko-rmap__facts { display: flex; flex-wrap: wrap; gap: var(--ko-space-2) var(--ko-space-5); margin: 0 0 var(--ko-space-3); padding: var(--ko-space-3) 0; border-block: 1px dashed var(--ko-line); }
.ko-rmap__facts dt { font-size: 0.8rem; color: var(--ko-muted); }
.ko-rmap__facts dd { margin: 0; font-family: var(--ko-font-mono); font-size: 0.9rem; }
.ko-rmap__text { margin: 0 0 var(--ko-space-4); color: var(--ko-text); }
.ko-rmap__card .ko-btn { width: 100%; justify-content: center; }
.ko-band--ink .ko-rmap__card .ko-micro { color: var(--ko-muted); }

@media (max-width: 960px) {
	.ko-rmap { grid-template-columns: 1fr; gap: var(--ko-space-5); }
	.ko-rmap__panel { position: static; }
	.ko-rmap__list { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; scroll-snap-type: x mandatory; }
	.ko-rmap__list li { flex: 0 0 auto; scroll-snap-align: start; }
	.ko-rmap__pick { width: auto; white-space: nowrap; }
	.ko-rmap__legend { position: static; border-radius: 0; }
}

/* ---------- Routekaarten met mini-kaart ---------- */
.ko-routes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--ko-space-5); }
.ko-route { position: relative; padding: 0; overflow: hidden; gap: 0; border: 0; box-shadow: 0 1px 2px rgba(15, 28, 43, 0.08), 0 14px 32px -18px rgba(15, 28, 43, 0.35); transition: transform 0.3s var(--ko-ease), box-shadow 0.3s var(--ko-ease); }
.ko-route:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 28, 43, 0.1), 0 22px 40px -18px rgba(15, 28, 43, 0.45); }
.ko-route__mini { display: block; aspect-ratio: 16 / 9; background: var(--ko-ink); }
.ko-route__mini svg { display: block; width: 100%; height: 100%; }
.ko-route__mini .ko-rmap__land { stroke-width: 0.6; }
.ko-route__mini .ko-rmap__route { opacity: 1; stroke-dasharray: none; stroke-width: 3.2; }
.ko-route__mini .ko-rmap__route.is-context { stroke: var(--ko-on-ink-muted); stroke-dasharray: 4 5; stroke-width: 1.6; opacity: 0.45; }
.ko-route__mini .ko-route__dot { fill: var(--ko-white); stroke: var(--ko-lamp); stroke-width: 2.5; }
.ko-route__body { display: flex; flex-direction: column; gap: var(--ko-space-3); padding: var(--ko-space-5); flex: 1; }
.ko-route__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.ko-route__badges div { display: inline-flex; gap: 0.35rem; align-items: baseline; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--ko-paper-2); }
.ko-route__badges dt { font-size: 0.78rem; color: var(--ko-muted); }
.ko-route__badges dd { margin: 0; font-family: var(--ko-font-mono); font-size: 0.85rem; color: var(--ko-text); }
.ko-route .ko-btn { align-self: stretch; justify-content: center; margin-top: auto; }
.ko-route__none { margin-top: auto; font-size: 0.85rem; color: var(--ko-muted); }
.ko-route.is-main .ko-route__region { color: var(--ko-lamp-deep); }
.ko-route__mini * { vector-effect: non-scaling-stroke; }
.ko-route__mini { --rmap-land: #1d3148; --rmap-coast: #3a5673; }
.ko-rmap__legend { position: static; border-radius: 0; background: var(--ko-ink-2); padding: 0.7rem var(--ko-space-4); }
.ko-rmap__map svg { overflow: hidden; }
.ko-rmap__key { color: var(--ko-on-ink); }

/* ---------- Uit ons logboek ---------- */
.ko-logtip {
	position: relative;
	margin: var(--ko-space-7) 0;
	padding: var(--ko-space-6) var(--ko-space-5) var(--ko-space-5);
	background: var(--ko-white);
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(15, 28, 43, 0.08), 0 16px 34px -20px rgba(15, 28, 43, 0.4);
	transform: rotate(-0.4deg);
}
.ko-logtip::before {
	content: "";
	position: absolute;
	top: -0.7rem;
	left: 2rem;
	width: 5.5rem;
	height: 1.4rem;
	background: var(--ko-tape);
	transform: rotate(-3deg);
}
.ko-logtip__label { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 var(--ko-space-3); font-family: var(--ko-font-mono); font-size: 0.8rem; color: var(--ko-lamp-deep); }
.ko-logtip__mark { width: 2rem; color: var(--ko-lamp-deep); }
.ko-logtip__body { font-family: var(--ko-font-display); font-size: var(--ko-step-1); line-height: 1.5; color: var(--ko-text); }
.ko-logtip__body > :last-child { margin-bottom: 0; }
.ko-logtip__cta { margin: var(--ko-space-4) 0 0; }
.ko-logtip__cta .ko-link-arrow { font-size: 1rem; }