/* Track Santa · TrackSanta.dc.html */

.trk-head__inner { padding-block: 48px 24px; display: flex; flex-direction: column; gap: 22px; }
.trk-head .scs-back { align-self: flex-start; font-size: 16px; }
.trk-title { font-size: clamp(42px, 2.6vw + 26px, 64px); line-height: 1; }

/* Development preview switcher (editors / non-production only) */
.trk-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: var(--scs-ink); color: var(--scs-cream); border-radius: 18px; }
.trk-preview__label { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--scs-sun); }
.trk-preview__btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--scs-pill);
	font-family: var(--scs-font-display); font-weight: 600; font-size: 15px; text-decoration: none;
	background: transparent; color: var(--scs-cream); border: 2px solid rgba(255, 245, 229, .45);
}
.trk-preview__btn:hover { color: var(--scs-cream); border-color: var(--scs-cream); }
.trk-preview__btn[aria-current="true"] { background: var(--scs-sun); color: var(--scs-ink); border-color: var(--scs-sun); }
.trk-preview__reset { color: var(--scs-cream); font-size: 15px; font-weight: 700; padding: 0 6px; }
.trk-preview__reset:hover { color: var(--scs-sun); }
.trk-preview :focus-visible { outline-color: var(--scs-sun); }

/* Map + side panel */
.trk-main { padding-block: 8px 80px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.trk-map { flex: 999 1 620px; min-width: 0; position: relative; border: var(--scs-border); border-radius: 18px; overflow: hidden; background: #E4EEE7; }
.trk-map .eve-map__svg, .trk-map__img { display: block; width: 100%; height: auto; }
.trk-map__caption { position: absolute; left: 16px; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
.trk-map__tag { background: var(--scs-paper); border: var(--scs-border); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.trk-map__demo { background: var(--scs-ink); color: var(--scs-cream); border-radius: var(--scs-pill); padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trk-marker.is-frozen { opacity: .95; }
.trk-pulse { animation: trk-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes trk-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }

.trk-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.trk-status { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: var(--scs-border); border-radius: 20px; box-shadow: 5px 7px 0 var(--scs-ink); }
.trk-status--cream { background: var(--scs-paper); color: var(--scs-ink); }
.trk-status--green { background: var(--scs-green); color: var(--scs-on-dark); }
.trk-status--warn { background: var(--scs-paper-2); color: var(--scs-ink); border-style: dashed; }
.trk-status__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.trk-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #A9A397; }
.trk-dot--sun { background: var(--scs-sun); }
.trk-dot--go { background: #3FBF7F; box-shadow: 0 0 0 3px rgba(63, 191, 127, .3); }
.trk-dot--warn { background: #E8803A; }
.trk-status__h { font-size: clamp(26px, 1vw + 20px, 34px); line-height: 1.08; }
.trk-status__body { font-size: 17px; line-height: 1.55; }
.trk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; font-size: 16px; }
.trk-facts dt { font-weight: 700; }
.trk-status__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trk-status__checked { font-size: 14px; opacity: .85; }
.trk-status--green .scs-ph { color: var(--scs-ph-ink); }
.trk-status--green a:not(.scs-btn) { color: var(--scs-on-dark); }

.trk-stops { display: flex; flex-direction: column; gap: 8px; }
.trk-stops__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.trk-stops__h { font-size: 22px; }
.trk-stops__head a { font-weight: 700; font-size: 15px; }
.trk-stops__list { list-style: none; margin: 0; padding: 0; }
.trk-stop { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding-block: 6px; border-bottom: 1px dashed var(--scs-rule); font-size: 16px; }
.trk-stop__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trk-stop__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--scs-cream); font-family: var(--scs-font-display); font-weight: 700; background: var(--scs-ink); }
.trk-stop__status { flex: none; font-size: 14px; color: var(--scs-ink-soft); text-align: right; }
.trk-stop.is-visited .trk-stop__n { background: var(--scs-green); }
.trk-stop.is-visited .trk-stop__status { color: var(--scs-green); font-weight: 700; }
.trk-stop.is-current .trk-stop__n, .trk-stop.is-unconfirmed .trk-stop__n { background: var(--scs-red); }
.trk-stop.is-current .trk-stop__status { color: var(--scs-red-text); font-weight: 700; }
.trk-stop.is-unconfirmed .trk-stop__status { color: #8A4A12; font-weight: 700; }

/* How it will work + organizer concept */
.trk-how { background: var(--scs-paper); border-top: 2px dashed var(--scs-rule-soft); }
.trk-how__inner { padding-block: 88px; display: grid; grid-template-columns: minmax(0, 760px); gap: 56px; align-items: start; }
.trk-how__inner.has-concept { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.trk-how__copy { display: flex; flex-direction: column; gap: 18px; }
.trk-how__h { font-size: clamp(32px, 1.6vw + 22px, 44px); line-height: 1.05; }
.trk-how__lead { font-size: 18px; line-height: 1.6; }
.trk-how__list { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.55; }
.trk-concept { display: flex; flex-direction: column; gap: 14px; }
.trk-concept__cap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; }
.trk-concept__card {
	align-self: flex-start; width: 340px; max-width: 100%; box-sizing: border-box; padding: 22px;
	border: var(--scs-border); border-radius: 28px; background: var(--scs-cream);
	display: flex; flex-direction: column; gap: 14px; box-shadow: 4px 6px 0 rgba(32, 60, 59, .25);
}
.trk-concept__h { font-family: var(--scs-font-display); font-weight: 600; font-size: 22px; }
.trk-concept__meta { font-size: 15px; }
.trk-concept__state { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.trk-concept__card .scs-btn { width: 100%; }
.trk-concept__note { font-size: 14px; line-height: 1.5; color: var(--scs-ink-soft); }

@media (max-width: 639px) {
	.trk-head__inner { padding-block: 28px 16px; gap: 16px; }
	.trk-preview { padding: 12px; gap: 8px; }
	.trk-preview__label { flex-basis: 100%; padding: 0; }
	.trk-preview__btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
	.trk-main { padding-block: 0 56px; gap: 24px; }
	.trk-map { border-radius: 14px; }
	.trk-map__caption { left: 8px; top: 8px; right: 8px; }
	.trk-map__tag { font-size: 12px; padding: 5px 8px; }
	.trk-map__demo { font-size: 10px; }
	.trk-status { padding: 22px 18px; box-shadow: 4px 6px 0 var(--scs-ink); }
	.trk-status__actions .scs-btn { width: 100%; }
	.trk-how__inner { padding-block: 56px; gap: 40px; }
}

/* Concept card buttons: shown in their design colors, but they are a non-interactive mock. */
.trk-concept__btn { cursor: default; pointer-events: none; }