/*! Go2Trip Split-Flap Flight Board — all selectors scoped under .gt-sf */
.gt-sf {
	--gt-sf-accent: #f4a51c;
	--gt-sf-char: #f1efe8;
	--gt-sf-tile: #171717;
	--gt-sf-bg: #0b0b0b;
	--gt-sf-gap: 2px;
	--gt-sf-font: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", "Liberation Sans Narrow", "Nimbus Sans Narrow", "sans-serif-condensed", Arial, sans-serif;
	--w: 20px;            /* tile width — set by JS */
	--h: 44px;            /* tile height — set by JS */
	--gg: 12px;           /* gap between column groups */
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	color: var(--gt-sf-char);
	font-family: var(--gt-sf-font);
	-webkit-font-smoothing: antialiased;
	line-height: 1.2;
	text-align: left;
}
.gt-sf *, .gt-sf *::before, .gt-sf *::after { box-sizing: border-box; }

/* ---------- controls ---------- */
.gt-sf-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 10px;
	padding: 8px 10px;
	background: var(--gt-sf-bg);
	border: 1px solid #000;
	border-radius: 6px;
	font-family: inherit;
}
.gt-sf-days { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gt-sf button.gt-sf-btn,
.gt-sf .gt-sf-date {
	appearance: none;
	min-height: 40px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid #333;
	border-radius: 4px;
	background: #141414;
	color: var(--gt-sf-char);
	font: 600 15px/1 var(--gt-sf-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
}
.gt-sf .gt-sf-date { text-transform: none; color-scheme: dark; padding: 6px 8px; }
.gt-sf button.gt-sf-btn:hover { border-color: var(--gt-sf-accent); }
.gt-sf button.gt-sf-btn[aria-pressed="true"] {
	background: var(--gt-sf-accent);
	border-color: var(--gt-sf-accent);
	color: #111;
}
.gt-sf button.gt-sf-btn:focus-visible,
.gt-sf .gt-sf-date:focus-visible { outline: 2px solid var(--gt-sf-accent); outline-offset: 2px; }
.gt-sf-upd {
	margin-left: auto;
	color: #a9a69e;
	font-size: 14px;
	letter-spacing: .02em;
}
.gt-sf button.gt-sf-snd { padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; }
.gt-sf-snd svg { width: 18px; height: 18px; fill: currentColor; }

.gt-sf-msg {
	margin: 0 0 10px;
	padding: 8px 12px;
	border-left: 4px solid var(--gt-sf-accent);
	background: #1a1611;
	color: #f3e3c3;
	font-size: 15px;
	border-radius: 0 4px 4px 0;
}
.gt-sf-msg[hidden], .gt-sf-demo[hidden], .gt-sf-sr[hidden] { display: none; }
.gt-sf-demo {
	display: inline-block;
	margin: 0 0 10px;
	padding: 5px 10px;
	border: 2px dashed var(--gt-sf-accent);
	color: var(--gt-sf-accent);
	font: 700 14px/1.2 var(--gt-sf-font);
	letter-spacing: .08em;
	border-radius: 4px;
	background: var(--gt-sf-bg);
}

/* ---------- tabs (single-board mode) ---------- */
.gt-sf-tabs { display: none; gap: 6px; margin: 0 0 8px; }
.gt-sf--single .gt-sf-tabs { display: flex; }
.gt-sf-tabs .gt-sf-btn { flex: 1 1 0; }

/* ---------- boards ---------- */
.gt-sf-boards { display: flex; gap: 10px; align-items: stretch; }
.gt-sf--single .gt-sf-board:not(.is-active) { display: none; }
.gt-sf-board {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: calc(var(--w) * .55) calc(var(--w) * .6) calc(var(--w) * .5);
	background:
		linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 30%),
		var(--gt-sf-bg);
	border: 3px solid #050505;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px #1c1c1c, inset 0 0 24px rgba(0,0,0,.9), 0 6px 22px rgba(0,0,0,.35);
	overflow: hidden;
}
.gt-sf--scroll .gt-sf-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gt-sf-head {
	display: flex;
	align-items: center;
	gap: calc(var(--w) * 1.1);
	padding: calc(var(--h) * .12) calc(var(--w) * .5) calc(var(--h) * .3);
	border-bottom: 1px solid #262626;
}
.gt-sf-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: calc(var(--h) * 1.55);
	height: calc(var(--h) * 1.55);
	background: var(--gt-sf-accent);
	border-radius: calc(var(--h) * .1);
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.gt-sf-icon svg { width: 76%; height: 76%; fill: #141414; }
.gt-sf-title {
	margin: 0;
	padding: 0;
	color: var(--gt-sf-accent);
	font: 700 calc(var(--h) * .98)/1 var(--gt-sf-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 0;
}
.gt-sf-sub {
	display: block;
	margin-top: calc(var(--h) * .16);
	color: var(--gt-sf-accent);
	font: 600 calc(var(--h) * .56)/1 var(--gt-sf-font);
	letter-spacing: .08em;
	white-space: nowrap;
}

.gt-sf-cols,
.gt-sf-row {
	display: flex;
	gap: var(--gg);
	white-space: nowrap;
}
.gt-sf-cols {
	padding: calc(var(--h) * .28) 0 calc(var(--h) * .22);
	margin-bottom: calc(var(--h) * .18);
	border-bottom: 1px solid #262626;
}
.gt-sf-col { flex: 0 0 auto; overflow: hidden; }
.gt-sf-col b {
	display: block;
	color: var(--gt-sf-accent);
	font: 600 calc(var(--h) * .5)/1.05 var(--gt-sf-font);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.gt-sf-col small {
	display: block;
	margin-top: calc(var(--h) * .08);
	color: var(--gt-sf-accent);
	opacity: .92;
	font: 500 calc(var(--h) * .36)/1.05 var(--gt-sf-font);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.gt-sf-rows { display: flex; flex-direction: column; gap: calc(var(--h) * .2); }
.gt-sf-row { align-items: center; }

/* A group of tiles = one column cell; slightly recessed slot like the reference. */
.gt-sf-cell {
	flex: 0 0 auto;
	display: flex;
	gap: var(--gt-sf-gap);
	padding: 2px;
	margin: -2px;
	background: #050505;
	border-radius: 3px;
}

/* ---------- tile ---------- */
.gt-sf-t {
	position: relative;
	flex: 0 0 auto;
	width: var(--w);
	height: var(--h);
	perspective: calc(var(--h) * 5);
	color: var(--gt-sf-char);
	font: 600 calc(var(--h) * .86)/1 var(--gt-sf-font);
	contain: layout style;
}
.gt-sf-cell.is-accent .gt-sf-t { color: var(--gt-sf-accent); }
.gt-sf-u, .gt-sf-l, .gt-sf-ff, .gt-sf-fb {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	overflow: hidden;
	background: var(--gt-sf-tile);
}
.gt-sf-u, .gt-sf-ff {
	top: 0;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gt-sf-tile) 88%, #fff) 0%, var(--gt-sf-tile) 100%);
}
.gt-sf-l, .gt-sf-fb {
	bottom: 0;
	border-radius: 0 0 2px 2px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gt-sf-tile) 80%, #000) 0%, var(--gt-sf-tile) 35%, color-mix(in srgb, var(--gt-sf-tile) 70%, #000) 100%);
}
.gt-sf-fb { top: 0; bottom: auto; transform: rotateX(180deg); }
.gt-sf-u b, .gt-sf-l b, .gt-sf-ff b, .gt-sf-fb b {
	display: block;
	height: var(--h);
	line-height: var(--h);
	text-align: center;
	font-weight: inherit;
	text-shadow: 0 1px 1px rgba(0,0,0,.6);
	transform: scaleX(var(--sx, 1));
}
.gt-sf-l b, .gt-sf-fb b { margin-top: calc(var(--h) * -.5); }
.gt-sf-t b.w { transform: scaleX(calc(var(--sx, 1) * .74)); }

/* flap: upper-half box hinged on its bottom edge, two faces */
.gt-sf-f {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	visibility: hidden;
	z-index: 2;
	will-change: transform;
}
.gt-sf-f.is-on { visibility: visible; }
.gt-sf-ff, .gt-sf-fb { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gt-sf-ff::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35));
}
/* shadow the falling flap casts on the lower half */
.gt-sf-sh {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.15));
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}
/* hinge line + axle stubs */
.gt-sf-t::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - 1px);
	height: 2px;
	background: #000;
	box-shadow: 0 1px 0 rgba(255,255,255,.05);
	z-index: 3;
}
.gt-sf-t::before {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	left: 0;
	right: 0;
	height: 4px;
	border-left: 1px solid #050505;
	border-right: 1px solid #050505;
	z-index: 3;
}

.gt-sf-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-height: 32px;
	margin-top: calc(var(--h) * .25);
	color: #8f8b82;
	font-size: 13px;
	letter-spacing: .06em;
}
.gt-sf-foot[hidden] { display: none; }
.gt-sf button.gt-sf-pg { min-height: 32px; padding: 4px 12px; font-size: 13px; }

.gt-sf-note { margin: 8px 2px 0; color: #77746d; font-size: 12px; }
.gt-sf-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.gt-sf-noscript, .gt-sf-admin-note { padding: 12px; background: #111; color: #eee; }

@media (max-width: 600px) {
	.gt-sf-bar { padding: 8px; }
	.gt-sf-days { flex: 1 1 100%; }
	.gt-sf-days .gt-sf-btn { flex: 1 1 0; padding-left: 6px; padding-right: 6px; }
	.gt-sf .gt-sf-date { flex: 1 1 auto; }
	.gt-sf-upd { margin-left: 0; flex: 1 1 0; }
	.gt-sf button.gt-sf-btn, .gt-sf .gt-sf-date { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.gt-sf-f { will-change: auto; }
}