/*
 * JB Transport. Visual rules from DESIGN.md: one cold structural green, warm gold only as decoration,
 * paper canvas, hairlines, Oswald for times and titles, Jost for text, 44px touch targets.
 * Every colour reads the site token first (--jb-*), so the new child theme can take over.
 */
.jbt {
	--jbt-green: var(--jb-green, #2a4d30);
	--jbt-green-deep: var(--jb-green-deep, #1b2a1e);
	--jbt-green-soft: var(--jb-green-soft, #bfd0c1);
	--jbt-paper: var(--jb-paper, #fbf9f6);
	--jbt-card: var(--jb-card, #ffffff);
	--jbt-ink: var(--jb-ink, #141a16);
	--jbt-soft: var(--jb-ink-soft, #4c5a4f);
	--jbt-gold: var(--jb-gold, #f2c14e);
	--jbt-rule: var(--jb-rule, #d9dcd4);
	--jbt-hl: color-mix(in srgb, var(--jbt-gold) 20%, var(--jbt-card));
	--jbt-display: var(--jb-font-display, "Oswald", "Arial Narrow", sans-serif);
	--jbt-text: var(--jb-font-text, "Jost", ui-sans-serif, system-ui, sans-serif);
	margin: 32px 0;
	color: var(--jbt-ink);
	font-family: var(--jbt-text);
	font-size: 16px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}
.jbt *,
.jbt *::before,
.jbt *::after {
	box-sizing: border-box;
}
/* [class] lifts this above theme rules such as .dynamic-entry-content ol (post content indents lists by 2em). */
.jbt ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jbt li,
.jbt p {
	margin: 0;
}
.jbt strong {
	font-weight: 600;
}
.jbt small {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--jbt-soft);
}
.jbt abbr {
	text-decoration: none;
	border: 0;
}
.jbt :focus-visible {
	outline: 3px solid var(--jbt-gold);
	outline-offset: 2px;
}
.jbt .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.jbt-admin-note {
	padding: 8px 12px;
	border: 1px dashed var(--jbt-soft, #4c5a4f);
	font-size: 13px;
}

/* Site name on the "berangkat berikutnya" card, so a screenshot carries it. */
.jbt-brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: #fff;
}
.jbt-brand::before {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--jbt-gold);
	border-right: 1.5px solid var(--jbt-gold);
	transform: rotate(45deg);
}

/* Above the data: short description, plus the check date while it is recent. The gold triangle is the logo's mountain motif. */
.jbt-intro {
	display: grid;
	justify-items: start;
	gap: 6px;
	margin: 0 0 14px;
}
.jbt-desc {
	font-size: 17px;
	line-height: 1.6;
	color: var(--jbt-ink);
}
.jbt-source {
	font-weight: 500;
	color: var(--jbt-ink);
}
.jbt-checked {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jbt-green);
}
.jbt-checked::before {
	content: "";
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--jbt-gold);
}
.jbt-foot {
	display: grid;
	gap: 6px;
	margin-top: 10px;
	font-size: 13px;
	color: var(--jbt-soft);
}
.jbt-flag {
	display: inline-block;
	margin-right: 6px;
	padding: 0 7px;
	border: 1px solid var(--jbt-soft);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jbt-ink);
}
.jbt-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--jbt-gold);
	color: var(--jbt-green-deep);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ── Berangkat berikutnya: the green strip ─────────────────────────────── */
/* The card sits in full-width content, half-width columns and sidebars, so its layout follows its own width
   (@container jbt-next below), not the viewport. */
.jbt-nextwrap {
	container: jbt-next / inline-size;
}
.jbt-nextbox {
	padding: 20px 16px 14px;
	border-radius: 6px;
	background: var(--jbt-green);
	color: #fff;
}
.jbt-nexthead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	margin-bottom: 10px;
}
.jbt-nexthead .jbt-label {
	flex-basis: 100%;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jbt-gold);
}
.jbt-place {
	font-family: var(--jbt-display);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}
.jbt-clock {
	margin-left: auto;
	font-size: 14px;
	color: var(--jbt-green-soft);
}
.jbt-next {
	display: grid;
}
.jbt-next li {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 12px;
	min-height: 52px;
	padding: 8px 0;
	border-top: 1px solid rgba(191, 208, 193, 0.28);
}
.jbt-next li[hidden] {
	display: none;
}
.jbt-next .jbt-time {
	font-family: var(--jbt-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
}
.jbt-next .jbt-what strong {
	display: block;
	font-size: 16px;
	line-height: 1.25;
}
.jbt-next small {
	color: var(--jbt-green-soft);
}
.jbt-next .jbt-in {
	font-size: 13px;
	color: var(--jbt-green-soft);
	text-align: right;
	white-space: nowrap;
}
.jbt-next li.is-next {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 2px 0 16px;
	border-top: 0;
}
.jbt-next li.is-next .jbt-time {
	font-size: 60px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.jbt-next li.is-next .jbt-in {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--jbt-gold);
	color: var(--jbt-green-deep);
	font-size: 14px;
	font-weight: 600;
}
.jbt-next li.is-next .jbt-what {
	grid-column: 1 / -1;
	padding-top: 6px;
}
.jbt-next li.is-next .jbt-what strong {
	font-size: 20px;
}
.jbt-nextfoot {
	display: grid;
	justify-items: start;
	gap: 2px;
	padding-top: 12px;
	border-top: 1px solid rgba(191, 208, 193, 0.28);
	font-size: 12px;
	line-height: 1.5;
	color: var(--jbt-green-soft);
}

/* ── Cari kereta antar stasiun ─────────────────────────────────────────── */
.jbt-antar {
	padding: 16px;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-paper);
}
.jbt-search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 48px;
	gap: 10px 10px;
	margin: 0 0 16px;
}
.jbt-field {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.jbt-field label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jbt-green);
}
.jbt .jbt-field select {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 40px 0 12px;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%232a4d30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	-webkit-appearance: none;
	appearance: none;
	color: var(--jbt-ink);
	font: 500 17px/1.2 var(--jbt-text);
	transition: border-color 150ms;
}
.jbt .jbt-field select:hover {
	border-color: var(--jbt-green);
}
/* Station combobox (replaces the native select when JavaScript runs). */
.jbt-combo {
	position: relative;
}
.jbt .jbt-combo-input {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 42px 0 12px;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%232a4d30' stroke-width='1.8'/%3E%3Cpath d='m16 16 4.5 4.5' stroke='%232a4d30' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;
	color: var(--jbt-ink);
	font: 500 17px/1.2 var(--jbt-text);
	transition: border-color 150ms;
}
.jbt .jbt-combo-input::placeholder {
	color: var(--jbt-soft);
	font-weight: 400;
}
.jbt .jbt-combo-input:hover,
.jbt .jbt-combo-input:focus {
	border-color: var(--jbt-green);
	background-color: var(--jbt-card);
}
.jbt-combo-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: min(340px, 55vh);
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--jbt-green);
	border-radius: 6px;
	background: var(--jbt-card);
	box-shadow: 0 10px 28px rgba(20, 26, 22, 0.16);
}
.jbt-combo-list[hidden] {
	display: none;
}
.jbt-combo-head {
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jbt-green);
}
.jbt-opt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 11px 14px;
	cursor: pointer;
}
.jbt-opt[aria-selected="true"],
.jbt-opt:hover {
	background: var(--jbt-hl);
}
.jbt-opt-name {
	font-weight: 500;
}
.jbt-opt.is-current .jbt-opt-name {
	font-weight: 600;
	color: var(--jbt-green);
}
.jbt-opt mark {
	padding: 0;
	background: none;
	color: var(--jbt-green);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--jbt-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.jbt-opt-meta {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--jbt-soft);
}
.jbt-combo-none {
	padding: 12px 14px;
	font-size: 14px;
	color: var(--jbt-soft);
}
.jbt .jbt-swap {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 22px 0 0;
	padding: 0;
	border: 1.5px solid var(--jbt-green);
	border-radius: 999px;
	background: var(--jbt-card);
	color: var(--jbt-green);
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
}
.jbt .jbt-swap:hover,
.jbt .jbt-swap:focus-visible {
	background: var(--jbt-green);
	color: #fff;
}
.jbt-count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: 0 0 8px !important;
	font-size: 14px;
	color: var(--jbt-soft);
}
.jbt-count strong {
	font-family: var(--jbt-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--jbt-green);
}
.jbt-results {
	margin-bottom: 14px !important;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card);
	overflow: hidden;
}
.jbt-results li {
	display: grid;
	grid-template-columns: auto minmax(24px, 1fr) auto auto;
	grid-template-areas: "dep line arr dur" "train train train buy";
	align-items: center;
	gap: 6px 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--jbt-rule);
}
.jbt-results li:first-child {
	border-top: 0;
}
.jbt-results .jbt-dep,
.jbt-results .jbt-arr {
	font-family: var(--jbt-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
}
.jbt-results .jbt-dep {
	grid-area: dep;
	color: var(--jbt-green);
}
.jbt-results .jbt-arr {
	grid-area: arr;
}
.jbt-line {
	grid-area: line;
	position: relative;
	height: 1px;
	margin: 0 6px;
	background: var(--jbt-soft);
}
.jbt-line::before,
.jbt-line::after {
	content: "";
	position: absolute;
	top: -3px;
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--jbt-soft);
	border-radius: 50%;
	background: var(--jbt-card);
}
.jbt-line::before {
	left: -6px;
}
.jbt-line::after {
	right: -6px;
}
.jbt-dur {
	grid-area: dur;
	min-width: 5.5em;
	font-size: 13px;
	color: var(--jbt-soft);
	text-align: right;
	white-space: nowrap;
}
.jbt-train {
	grid-area: train;
	font-size: 14px;
	color: var(--jbt-soft);
}
.jbt-train strong {
	color: var(--jbt-ink);
}
.jbt-train small {
	display: inline;
}
.jbt-train small::before {
	content: " · ";
}
.jbt-train .jbt-badge {
	margin-left: 8px;
	vertical-align: 1px;
}
.jbt-results li.is-next {
	background: var(--jbt-hl);
	box-shadow: inset 4px 0 0 var(--jbt-gold);
}
.jbt-results li.is-past .jbt-dep,
.jbt-results li.is-past .jbt-arr {
	color: var(--jbt-soft);
	font-weight: 400;
}
.jbt-empty {
	margin-bottom: 14px !important;
	padding: 16px;
	border: 1px dashed var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card);
	color: var(--jbt-soft);
}
.jbt-empty[hidden] {
	display: none;
}

/* ── Ringkasan: practical facts box (DESIGN.md "kotak info praktis") ───── */
.jbt-summary {
	padding: 0 16px;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card);
}
.jbt dl,
.jbt dt,
.jbt dd {
	margin: 0;
	padding: 0;
}
.jbt-facts > div {
	display: grid;
	grid-template-columns: minmax(104px, 32%) minmax(0, 1fr);
	gap: 2px 16px;
	padding: 13px 0;
	border-top: 1px solid var(--jbt-rule);
}
.jbt-facts > div:first-child {
	border-top: 0;
}
.jbt-facts dt {
	padding-top: 3px;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jbt-green);
}
.jbt-facts dd {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--jbt-ink);
}
.jbt-facts dd a {
	color: var(--jbt-green);
	text-decoration: underline;
	text-decoration-color: var(--jbt-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.jbt-summary-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 11px 0 13px;
	border-top: 1px solid var(--jbt-rule);
	font-size: 12px;
	color: var(--jbt-soft);
}
@media (max-width: 359px) {
	.jbt-facts > div {
		grid-template-columns: 1fr;
	}
}

/* ── FAQ: native details, hairlines, no JavaScript ─────────────────────── */
.jbt-faq {
	border-top: 1px solid var(--jbt-ink);
}
.jbt-q {
	border-bottom: 1px solid var(--jbt-rule);
}
.jbt-q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding: 14px 2px;
	list-style: none;
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jbt-ink);
	transition: color 150ms;
}
.jbt-q summary::-webkit-details-marker {
	display: none;
}
.jbt-q summary::after {
	content: "";
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid var(--jbt-green);
	border-bottom: 2px solid var(--jbt-green);
	transform: translateY(-3px) rotate(45deg);
}
.jbt-q[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}
.jbt-q summary:hover {
	color: var(--jbt-green);
}
.jbt-a {
	padding: 0 2px 18px;
}
.jbt-a p {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--jbt-ink);
}

/* ── Papan stasiun ─────────────────────────────────────────────────────── */
.jbt-rows {
	border-top: 1px solid var(--jbt-ink);
}
.jbt-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: baseline;
	gap: 4px 12px;
	min-height: 44px;
	padding: 12px 8px;
	border-bottom: 1px solid var(--jbt-rule);
}
.jbt-row .jbt-time {
	font-family: var(--jbt-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--jbt-green);
}
.jbt-row .jbt-what strong {
	display: block;
	font-size: 17px;
	line-height: 1.3;
}
.jbt-row .jbt-end {
	margin-top: 2px;
	font-weight: 500;
	color: var(--jbt-ink);
}
.jbt-row .jbt-tag {
	grid-column: 2;
	justify-self: start;
	padding: 1px 8px;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--jbt-soft);
}
.jbt-row.is-extra .jbt-tag {
	border-style: dashed;
}
.jbt-row.is-arr .jbt-time,
.jbt-row.is-arr .jbt-what strong {
	color: var(--jbt-soft);
	font-weight: 500;
}
.jbt-row.is-next {
	background: var(--jbt-hl);
	box-shadow: inset 4px 0 0 var(--jbt-gold);
}
.jbt-row .jbt-badge {
	margin-left: 8px;
	vertical-align: 2px;
}

/* ── Tabel rute ────────────────────────────────────────────────────────── */
.jbt-scroll {
	position: relative; /* keeps visually hidden cell text inside the scroller, so the page never overflows */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card);
}
.jbt .jbt-matrix table,
.jbt-matrix table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	line-height: 20px; /* whole-pixel rows, so the sticky station column never shows seams */
}
.jbt-matrix th,
.jbt-matrix td {
	padding: 9px 14px;
	border: 0;
	border-bottom: 1px solid var(--jbt-rule);
	background: var(--jbt-card);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}
.jbt-matrix td {
	font-weight: 500;
}
.jbt-matrix thead th {
	padding-top: 11px;
	padding-bottom: 11px;
	border-bottom: 0;
	background: var(--jbt-green);
	color: #fff;
	vertical-align: bottom;
}
.jbt-ka {
	display: block;
	font-family: var(--jbt-display);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.15;
}
.jbt-to {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--jbt-green-soft);
}
.jbt-matrix th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	font-weight: 500;
	box-shadow: 1px 0 0 var(--jbt-rule);
}
.jbt-matrix thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jbt-gold);
}
.jbt-code {
	margin-left: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--jbt-soft);
}
.jbt-matrix tbody tr:last-child > * {
	border-bottom: 0;
}
.jbt-matrix tr.is-blitar > * {
	background: var(--jbt-hl);
}
.jbt-matrix tr.is-blitar th[scope="row"] {
	font-weight: 600;
	box-shadow: inset 4px 0 0 var(--jbt-gold), 1px 0 0 var(--jbt-rule);
}
.jbt-cell-arr {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--jbt-soft);
}
.jbt-cell-dep {
	display: block;
}
.jbt-pass {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--jbt-soft);
}
.jbt-none::before {
	content: "–";
	color: var(--jbt-rule);
}
.jbt-hint {
	margin-top: 6px !important;
	font-size: 12px;
	color: var(--jbt-soft);
}
.jbt-hint-swipe {
	display: none;
}
.jbt-matrix.is-scrollable .jbt-hint-swipe {
	display: inline;
}

/* Zebra rows, Blitar rows in gold, and one train column marked on tap or hover. */
.jbt-matrix {
	--jbt-zebra: color-mix(in srgb, var(--jbt-green) 5%, var(--jbt-card));
	--jbt-col: color-mix(in srgb, var(--jbt-green) 13%, var(--jbt-card));
	--jbt-hl-2: color-mix(in srgb, var(--jbt-gold) 30%, var(--jbt-card));
}
.jbt-matrix tbody tr:nth-child(even) > * {
	background: var(--jbt-zebra);
}
.jbt-matrix tbody tr.is-blitar:nth-child(even) > * {
	background: var(--jbt-hl-2);
}
.jbt-matrix td,
.jbt-matrix thead th:not(:first-child) {
	cursor: pointer;
}
.jbt-matrix.jbt-matrix tbody > tr > td.is-col {
	background: var(--jbt-col);
	font-weight: 600;
}
.jbt-matrix.jbt-matrix thead th.is-col {
	background: var(--jbt-green-deep);
	box-shadow: inset 0 -3px 0 var(--jbt-gold);
}

@media (max-width: 600px) {
	.jbt-matrix th,
	.jbt-matrix td {
		padding: 8px 10px;
		font-size: 14px;
	}
	.jbt-code {
		display: none;
	}
}

/* Long-distance trains carry "lewat …"; in a narrow card the countdown moves under the text so the line keeps its width. */
@container jbt-next (width < 600px) {
	.jbt-next li:not(.is-next) {
		grid-template-columns: 58px minmax(0, 1fr);
	}
	.jbt-next li:not(.is-next) .jbt-time {
		align-self: start;
		padding-top: 2px;
	}
	.jbt-next li:not(.is-next) .jbt-in {
		grid-column: 2;
		text-align: left;
	}
	.jbt-next li:not(.is-next) .jbt-in:empty {
		display: none;
	}
}

@container jbt-next (width >= 480px) {
	.jbt-nextbox {
		padding: 24px 24px 16px;
	}
}

/* Wide card: big next time on the left, the following trains on the right. */
@container jbt-next (width >= 680px) {
	.jbt-nextbox {
		padding: 28px 32px 20px;
	}
	.jbt-place {
		font-size: 32px;
	}
	.jbt-next {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		column-gap: 40px;
	}
	.jbt-next li {
		grid-column: 2;
	}
	.jbt-next li.is-next {
		grid-column: 1;
		grid-row: 1 / span 6;
		align-content: start;
		align-self: start;
	}
	.jbt-next li.is-next .jbt-time {
		font-size: 76px;
	}
}

@media (min-width: 720px) {
	.jbt-antar {
		padding: 24px;
	}
	.jbt-search {
		grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
		align-items: end;
	}
	.jbt-field:nth-of-type(2) {
		grid-column: 3;
		grid-row: 1;
	}
	.jbt .jbt-swap {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}
	.jbt .jbt-swap svg {
		transform: rotate(90deg);
	}
	.jbt-results li {
		grid-template-columns: 64px minmax(40px, 1fr) 64px 88px minmax(0, 1.7fr) auto;
		grid-template-areas: "dep line arr dur train buy";
		padding: 14px 18px;
	}
	.jbt-train small {
		display: block;
	}
	.jbt-train small::before {
		content: none;
	}
	.jbt-row {
		grid-template-columns: 84px minmax(0, 1fr) auto;
		align-items: center;
		padding: 12px 14px;
	}
	.jbt-row .jbt-tag {
		grid-column: 3;
		justify-self: end;
	}
}

/* ── Tombol tiket (papan, cari antar stasiun, [jb_tiket]) ──────────────── */
.jbt .jbt-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--jbt-green);
	border-radius: 6px;
	background: var(--jbt-green);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.jbt .jbt-buy:hover {
	background: var(--jbt-green-deep);
	border-color: var(--jbt-green-deep);
	color: #fff;
}
.jbt-results .jbt-buy {
	grid-area: buy;
	justify-self: end;
}
/* On the board it is a secondary action under the train and its tag, outlined and smaller. */
.jbt-row .jbt-buy {
	grid-column: 2;
	justify-self: start;
	min-height: 32px;
	margin-top: 2px;
	padding: 0 12px;
	background: var(--jbt-card);
	color: var(--jbt-green);
	font-size: 13px;
}
.jbt .jbt-tickets-note {
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 1.5;
}

/* ── Hotel ([jb_hotel]) ────────────────────────────────────────────────── */
.jbt-hotel-list {
	display: grid;
	gap: 12px;
}
.jbt-hotel {
	display: grid;
	align-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--jbt-rule);
	border-radius: 6px;
	background: var(--jbt-card);
}
.jbt-hotel-main {
	display: grid;
	gap: 4px;
}
.jbt .jbt-hotel-name {
	margin: 0;
	font-family: var(--jbt-display);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--jbt-ink);
}
.jbt .jbt-hotel-name a {
	color: inherit;
	text-decoration-color: var(--jbt-gold);
	text-underline-offset: 3px;
}
.jbt-hotel-meta {
	font-size: 13px;
	color: var(--jbt-soft);
}
.jbt-hotel-note {
	font-size: 15px;
	line-height: 1.5;
}
.jbt-hotel-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jbt .jbt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--jbt-green);
	border-radius: 6px;
	background: var(--jbt-card);
	color: var(--jbt-green);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms, color 150ms;
}
.jbt .jbt-btn:first-child {
	background: var(--jbt-green);
	color: #fff;
}
.jbt .jbt-btn:hover {
	background: var(--jbt-green-deep);
	border-color: var(--jbt-green-deep);
	color: #fff;
}
/* On a phone the buttons share the row, or stack full width when the card is too narrow for both. */
@media (max-width: 479px) {
	.jbt .jbt-btn {
		flex: 1 1 auto;
	}
}
@media (min-width: 720px) {
	.jbt-hotel-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ── Jadwal bus ([jb_bus]): departures by part of the day ─────────────── */
/* Deliberately not the hour grid mblitar.net uses for the same data. */
.jbt-busfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.jbt-busfilter[hidden],
.jbt-buspart[hidden],
.jbt-bustimes li[hidden] {
	display: none;
}
.jbt .jbt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var(--jbt-green);
	border-radius: 6px;
	background: var(--jbt-card);
	color: var(--jbt-green);
	font: 600 15px/1.2 var(--jbt-text);
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
}
.jbt .jbt-chip[aria-pressed="true"] {
	background: var(--jbt-green);
	color: #fff;
}
.jbt .jbt-chip:hover {
	background: var(--jbt-green-deep);
	border-color: var(--jbt-green-deep);
	color: #fff;
}
.jbt-chip-n {
	font-weight: 500;
}
.jbt-busday {
	border-top: 1px solid var(--jbt-ink);
}
.jbt-buspart {
	display: grid;
	gap: 6px 16px;
	padding: 12px 0 14px;
	border-bottom: 1px solid var(--jbt-rule);
}
.jbt-partname {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jbt-green);
}
.jbt-partspan {
	margin-left: 6px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--jbt-soft);
}
.jbt-bustimes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 2px 8px;
}
.jbt-bustimes.is-wide {
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.jbt-bustimes li {
	min-height: 44px;
	padding: 6px 4px;
	border-radius: 6px;
}
.jbt-bustimes .jbt-time {
	display: block;
	font-family: var(--jbt-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--jbt-green);
}
.jbt-bustimes li.is-next {
	background: var(--jbt-hl);
	box-shadow: inset 0 -3px 0 var(--jbt-gold); /* a bottom bar: a left one would need padding the narrow cells lack */
}
.jbt-bustimes .jbt-badge {
	margin-top: 4px;
	padding: 1px 7px;
	letter-spacing: 0.04em;
}
@media (min-width: 720px) {
	.jbt-buspart {
		grid-template-columns: 136px minmax(0, 1fr);
		align-items: start;
	}
	.jbt-partname {
		padding-top: 8px;
	}
	.jbt-partspan {
		display: block;
		margin: 2px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jbt * {
		transition: none !important;
	}
}

/* ── Tarif bus ([jb_tarif]) ─────────────────────────────────────────────── */
.jbt .jbt-tarif-head {
	margin: 24px 0 8px;
	font-family: var(--jbt-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--jbt-ink);
}
.jbt .jbt-tarif-head:first-child {
	margin-top: 0;
}
.jbt .jbt-tarif table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	line-height: 1.35;
}
.jbt-tarif th,
.jbt-tarif td {
	padding: 10px 14px;
	border: 0;
	border-bottom: 1px solid var(--jbt-rule);
	background: var(--jbt-card);
	text-align: left;
	vertical-align: top;
}
.jbt-tarif tbody tr:last-child > * {
	border-bottom: 0;
}
.jbt-tarif thead th {
	padding-top: 9px;
	padding-bottom: 9px;
	background: var(--jbt-green);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.jbt-tarif th[scope="row"] {
	font-weight: 500;
}
.jbt-tarif td {
	color: var(--jbt-soft);
}
.jbt-tarif .jbt-price {
	text-align: right;
	white-space: nowrap;
	color: var(--jbt-ink);
	font-weight: 600;
}
.jbt-tarif thead .jbt-price {
	color: #fff;
}
.jbt-tarif-po {
	border-bottom: 1px solid var(--jbt-rule);
}
.jbt-tarif-po:first-child {
	border-top: 1px solid var(--jbt-ink);
}
.jbt-tarif-po summary {
	display: flex;
	align-items: center;
	gap: 4px 12px;
	flex-wrap: wrap;
	min-height: 52px;
	padding: 12px 28px 12px 2px;
	position: relative;
	list-style: none;
	cursor: pointer;
	font-size: 17px;
	line-height: 1.35;
}
.jbt-tarif-po summary::-webkit-details-marker {
	display: none;
}
.jbt-tarif-po summary small {
	display: inline;
	font-size: 14px;
}
.jbt-tarif-po summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--jbt-green);
	border-bottom: 2px solid var(--jbt-green);
	transform: translateY(-70%) rotate(45deg);
}
.jbt-tarif-po[open] summary::after {
	transform: translateY(-20%) rotate(-135deg);
}
.jbt-tarif-po summary:hover strong {
	color: var(--jbt-green);
}
.jbt-tarif-po .jbt-scroll {
	margin-bottom: 16px;
}