/*
 * The port day planner (template-parts/catalog-block.php "dayplan", assets/js/catalog-dayplan.js), on the cruise
 * port guide. Drawn as the Departures board (assets/css/catalog-departures.css): board ink #15191d / #1c2127,
 * rule #2b3139, flap amber #ffbf3c, dim #8b939c, signal blue #1f5aa6. The day is a ribbon: getting off
 * (striped), time ashore (amber), the hour back at the terminal (blue), all-aboard to sailing (grey).
 */

.tgc-dayplan { max-width: 1080px; margin: 0 auto; }
.tgc-dayplan__panel { padding: 18px 18px 14px; border: 1px solid #2b3139; border-radius: 18px 18px 0 0; background: #15191d; color: #e9edf1; }
.tgc-dayplan__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tgc-dayplan__tab { padding: 10px 16px; border: 1px solid #2b3139; border-radius: 999px; background: transparent; font: 700 13px/1 inherit; letter-spacing: .06em; color: #c5ccd3; cursor: pointer; }
.tgc-dayplan__tab[aria-selected="true"] { border-color: #ffbf3c; background: #ffbf3c; color: #15191d; }
.tgc-dayplan__tab:focus-visible { outline: 2px solid #ffbf3c; outline-offset: 2px; }
.tgc-dayplan__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 14px; }
.tgc-dayplan__form[data-dp-form="times"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tgc-dayplan__form[hidden] { display: none; }
.tgc-dayplan__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8b939c; }
.tgc-dayplan__field select, .tgc-dayplan__field input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #2b3139; border-radius: 10px; background: #1c2127; font: 500 16px/1.2 inherit; letter-spacing: 0; text-transform: none; color: #fff; color-scheme: dark; }
.tgc-dayplan__field select:disabled { opacity: .55; }
.tgc-dayplan__field select:focus, .tgc-dayplan__field input:focus { outline: 2px solid #ffbf3c; outline-offset: 1px; border-color: #ffbf3c; }
.tgc-dayplan__more { margin-top: 12px; font-size: 14px; color: #c5ccd3; }
.tgc-dayplan__more summary { display: inline-block; padding: 4px 0; cursor: pointer; color: #ffbf3c; font-weight: 700; }
.tgc-dayplan__more[open] { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: end; gap: 10px 16px; }
.tgc-dayplan__more[open] summary { grid-column: 1 / -1; }
.tgc-dayplan__more p { margin: 0 0 12px; font-size: 13px; color: #8b939c; }

/* ---------------------------------------------------------------- The day */

.tgc-dayplan__out { padding: 22px 22px 24px; border: 1px solid #2b3139; border-top: 0; border-radius: 0 0 18px 18px; background: #1c2127; color: #e9edf1; }
.tgc-dayplan__out:empty { display: none; }
.tgc-dayplan__out:empty + .tgc-note { margin-top: 0; }
.tgc-dayplan__panel:has(+ .tgc-dayplan__out:empty) { border-radius: 18px; }
.tgc-dayplan__call { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 16px; color: #c5ccd3; }
.tgc-dayplan__call strong { font-size: 20px; color: #fff; }
.tgc-dayplan__tag { flex-basis: 100%; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #ffbf3c; }
.tgc-dayplan__inport { margin: 6px 0 16px; font: 700 15px/1.3 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .04em; color: #ffbf3c; }
.tgc-dayplan__track { display: flex; height: 34px; overflow: hidden; border-radius: 8px; background: #2b3139; }
.tgc-dayplan__seg { position: relative; flex: none; height: 100%; }
.tgc-dayplan__seg--off { background: repeating-linear-gradient(135deg, #3a424c 0 6px, #2b3139 6px 12px); }
.tgc-dayplan__seg--ashore { display: grid; place-items: center; background: #ffbf3c; }
.tgc-dayplan__seg--ashore em { font: 700 13px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-style: normal; white-space: nowrap; color: #15191d; }
.tgc-dayplan__seg--buffer { background: #1f5aa6; }
.tgc-dayplan__seg--aboard { background: #59626c; }
.tgc-dayplan__moments { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; }
.tgc-dayplan__m { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 3px solid #59626c; font-size: 13px; line-height: 1.35; color: #c5ccd3; }
.tgc-dayplan__m time { font: 700 17px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: #fff; }
.tgc-dayplan__m--0 { border-top-color: #8b939c; }
.tgc-dayplan__m--1 { border-top-color: #ffbf3c; }
.tgc-dayplan__m--2 { border-top-color: #1f5aa6; }
.tgc-dayplan__m--3, .tgc-dayplan__m--4 { border-top-color: #59626c; }
.tgc-dayplan__sum { margin: 18px 0 0; font-size: 17px; font-weight: 700; color: #fff; }
.tgc-dayplan__sum--short { color: #ffbf3c; }
.tgc-dayplan__fine, .tgc-dayplan__hint { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #8b939c; }
.tgc-dayplan__hint { font-size: 15px; color: #c5ccd3; }
.tgc-dayplan__switch { margin-left: 6px; padding: 0; border: 0; background: none; font: 700 15px/1.4 inherit; color: #ffbf3c; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------------------------------------------------------------- The excursions that fit */

.tgc-dayplan__h { margin: 24px 0 10px; padding-top: 18px; border-top: 1px solid #2b3139; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8b939c; }
.tgc-dayplan__tours { list-style: none; margin: 0; padding: 0; }
.tgc-dayplan__tour { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.1fr) 150px; grid-template-areas: 'chip name fit when' 'chip meta fit when'; align-items: center; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid #2b3139; }
.tgc-dayplan__chip { grid-area: chip; justify-self: start; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; }
.tgc-dayplan__tour--fits .tgc-dayplan__chip { background: #ffbf3c; color: #15191d; }
.tgc-dayplan__tour--tight .tgc-dayplan__chip { border: 1px solid #ffbf3c; color: #ffbf3c; }
.tgc-dayplan__tour--no .tgc-dayplan__chip { border: 1px solid #59626c; color: #8b939c; }
.tgc-dayplan__name { grid-area: name; font-size: 16px; font-weight: 700; color: #fff; text-decoration: none; }
.tgc-dayplan__name:hover { color: #ffbf3c; text-decoration: underline; text-underline-offset: 3px; }
.tgc-dayplan__meta { grid-area: meta; font-size: 13px; color: #8b939c; }
.tgc-dayplan__fit { grid-area: fit; height: 8px; overflow: hidden; border-radius: 4px; background: #2b3139; }
.tgc-dayplan__fit i { display: block; height: 100%; border-radius: 4px; background: #ffbf3c; }
.tgc-dayplan__tour--tight .tgc-dayplan__fit i { background: repeating-linear-gradient(90deg, #ffbf3c 0 6px, #c9952c 6px 10px); }
.tgc-dayplan__tour--no .tgc-dayplan__fit i { background: #59626c; }
.tgc-dayplan__when { grid-area: when; font: 700 13px/1.3 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; text-align: right; color: #c5ccd3; }
.tgc-dayplan__tour--no .tgc-dayplan__name { color: #c5ccd3; }
.tgc-dayplan__longer { margin-top: 6px; }
.tgc-dayplan__longer summary { padding: 12px 0; font-size: 14px; font-weight: 700; color: #8b939c; cursor: pointer; }
.tgc-dayplan__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.tgc-dayplan__wa { background: #25d366; color: #fff; }
.tgc-dayplan__wa:hover { background: #1ebe5b; color: #fff; transform: translateY(-2px); }
.tgc-dayplan__book { border: 1.5px solid #ffbf3c; color: #ffbf3c; }
.tgc-dayplan__book:hover { background: #ffbf3c; color: #15191d; transform: translateY(-2px); }

@media (max-width: 760px) {
	.tgc-dayplan__panel { padding: 14px 12px 12px; }
	.tgc-dayplan__form, .tgc-dayplan__form[data-dp-form="times"] { grid-template-columns: minmax(0, 1fr); }
	.tgc-dayplan__form[data-dp-form="times"] .tgc-dayplan__field:nth-child(-n+2) { grid-column: auto; }
	.tgc-dayplan__more[open] { grid-template-columns: minmax(0, 1fr); }
	.tgc-dayplan__out { padding: 18px 14px 20px; }
	.tgc-dayplan__moments { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.tgc-dayplan__m { flex-direction: row; align-items: baseline; gap: 12px; padding: 9px 0 9px 12px; border-top: 0; border-left: 3px solid #59626c; }
	.tgc-dayplan__m--0 { border-left-color: #8b939c; }
	.tgc-dayplan__m--1 { border-left-color: #ffbf3c; }
	.tgc-dayplan__m--2 { border-left-color: #1f5aa6; }
	.tgc-dayplan__m time { flex: none; min-width: 52px; font-size: 16px; }
	.tgc-dayplan__tour { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name chip' 'meta meta' 'fit fit' 'when when'; gap: 6px 10px; }
	.tgc-dayplan__when { text-align: left; }
	.tgc-dayplan__act .tgc-btn { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.tgc-dayplan__wa:hover, .tgc-dayplan__book:hover { transform: none; }
}