/* =========================================================
   Timetables (Figma: "Time tables" 3418:6597 empty state / 3418:5773 results
   / 3418:5999 one service). Two pages: timetables.html is the search and its
   results, timetable.html is a single service.

   The hero, the search bar, the fields and the buttons are the homepage's -
   homepage.css and site.css already draw those - so this file is only the
   parts the timetable pages add.
   ========================================================= */

/* The design's hero here is half the homepage's, and the search bar below
   overlaps it by less because of it. */
.sypn-hero--compact {
	min-height: 317px;
	gap: var(--sypn-space-xs);
}

.sypn-planner--search {
	margin-top: -62px;
}

.sypn-planner--search .sypn-btn {
	width: 210px;
}

/* =========================================================
   The two-column body: the rail of related links, and the results
   ========================================================= */

.tt-layout {
	display: flex;
	align-items: flex-start;
	gap: var(--sypn-space-md);
	padding: var(--sypn-space-sm) var(--sypn-gutter) var(--sypn-space-lg);
	background: var(--sypn-white);
}

.tt-rail {
	display: flex;
	flex: 0 0 247px;
	flex-direction: column;
	gap: var(--sypn-space-md);
}

.tt-main {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	gap: var(--sypn-space-sm);
}

.tt-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--sypn-space-xs);
	border-radius: var(--sypn-radius-md);
	/* Asphalt Grey 25. Same literal as the journey result cards' border in
	   planner-results.css - the palette in variables.css has no name for it. */
	background: #d9d8da;
}

/* The first card in the rail is only links, and is a shade lighter for it */
.tt-card--links {
	background: var(--sypn-charcoal-25);
}

.tt-card h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--sypn-ink);
}

.tt-card p {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--sypn-ink);
}

/* Full width so the arrows line up down the card, rather than each link's own width */
.tt-card .sypn-btn--link {
	justify-content: space-between;
	width: 100%;
	min-height: 32px;
	color: var(--sypn-ink);
}

/* =========================================================
   Notices - "Timetables shown are valid from ..."
   ========================================================= */

.tt-notice {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 60px;
	padding: var(--sypn-space-xxs);
	border-radius: var(--sypn-radius-md);
	background: rgba(230, 231, 230, 0.2);
	font-size: 18px;
	line-height: 28px;
	color: var(--sypn-ink);
}

/* Every icon in this file is a Figma export carrying preserveAspectRatio="none",
   so each one is pinned to both dimensions - left to a flex item's own devices
   they stretch to the box and distort. */
.tt-notice img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.tt-count {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-grey);
}

/* =========================================================
   "Find a timetable" - what stands where the results go before a search
   ========================================================= */

.tt-panel {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-sm);
	padding: var(--sypn-space-md);
	border: 1px solid var(--sypn-charcoal-25);
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-white);
}

.tt-panel h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--sypn-ink);
}

.tt-panel h2 img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.tt-panel p,
.tt-panel li {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--sypn-ink);
}

.tt-panel hr {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--sypn-charcoal-25);
	opacity: 1;
}

.tt-panel ul {
	margin: var(--sypn-space-xxs) 0 0;
	padding-left: var(--sypn-space-sm);
}

/* =========================================================
   A search result - one service
   ========================================================= */

.tt-results {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xxs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-result {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-sm);
	padding: var(--sypn-space-xs);
	border: 1px solid var(--sypn-charcoal-25);
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-white);
}

/* The route badge carries the operator's colour, so that is set per badge in the
   markup rather than here - the same way the departures board does it. */
.tt-badge {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--sypn-white);
}

.tt-result__names {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
}

.tt-result__name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sypn-ink);
}

.tt-result__via {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-grey);
}

.tt-result__mode {
	display: flex;
	flex: 0 0 78px;
	align-items: center;
	gap: var(--sypn-space-xxs);
	font-size: 16px;
	line-height: 24px;
	color: #000;
}

.tt-result__mode img {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
}

.tt-result__actions {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
}

/* The design draws the download icon beside the link rather than inside it;
   one control is easier to hit, so the icon is part of the link here. */
.tt-download img {
	width: 24px;
	height: 24px;
}

/* =========================================================
   One service - timetable.html
   ========================================================= */

.tt-breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	min-height: 32px;
	padding: 0 var(--sypn-gutter);
	background: var(--sypn-ink);
}

.tt-breadcrumbs a,
.tt-breadcrumbs span {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: var(--sypn-white);
	text-decoration: none;
}

.tt-breadcrumbs a:hover {
	text-decoration: underline;
}

.tt-breadcrumbs img {
	width: 24px;
	height: 24px;
}

.tt-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-sm) var(--sypn-gutter);
	background: var(--sypn-white);
}

.tt-head h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: var(--sypn-ink);
}

.tt-head p {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	/* Asphalt Black 75 */
	color: #505051;
}

/* The arrow points back, and the export only draws it pointing forward */
.tt-back img {
	transform: rotate(180deg);
}

/* =========================================================
   The route map. A live OpenStreetMap, drawn by planner-map.js the same way
   the journey results and departures maps are - the design has a flat export.
   ========================================================= */

.tt-map {
	position: relative;
	height: 330px;
	overflow: hidden;
	background: #f2f0ec;
}

/* Over the viewport rather than :fullscreen - see the note in timetables.js. The
   height above has to go with it, or the map stays a 330px strip on a black screen. */
.tt-map.is-full {
	position: fixed;
	inset: 0;
	height: auto;
	/* Over the sticky header, which sits below Bootstrap's modals at 1055 */
	z-index: 1040;
}

.tt-map__canvas {
	position: absolute;
	inset: 0;
}

.tt-map__full {
	position: absolute;
	top: 30px;
	right: var(--sypn-gutter);
	/* Leaflet's panes and controls run to z-index 1000 */
	z-index: 1000;
}

.tt-map__full img {
	width: 24px;
	height: 24px;
}

.tt-body {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-sm);
	padding: var(--sypn-space-sm) var(--sypn-gutter) var(--sypn-space-lg);
	background: var(--sypn-white);
}

/* =========================================================
   The filter row above the table
   ========================================================= */

.tt-filters {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sypn-space-xs);
	align-items: start;
	padding: var(--sypn-space-xxs);
	border: 1px solid var(--sypn-charcoal-25);
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-white);
}

.tt-filters .sypn-field {
	border-radius: var(--sypn-radius-md);
}

/* Direction is the one filter the design draws as a value rather than a control -
   the switch link below it is how it changes - so its label is not a <label> */
.sypn-field-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sypn-ink);
}

.tt-direction {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-grey);
}

/* A native select, so the options, the keyboard and the touch pickers come free.
   The caret is the design's, and the native one is dropped for it. */
.tt-filters select,
.tt-filters input[type="date"] {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-grey);
}

.tt-filters select {
	appearance: none;
	background-image: url("/icons/timetables/caret-down.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 24px 24px;
	padding-right: 24px;
}

.tt-filters input[type="date"]::-webkit-calendar-picker-indicator {
	margin: 0;
}

.tt-switch {
	grid-column: 1;
	justify-self: start;
	gap: var(--sypn-space-xxs);
	min-height: 32px;
	font-size: 14px;
	line-height: 20px;
	color: var(--sypn-ink);
}

.tt-switch img {
	width: 16px;
	height: 16px;
}

/* =========================================================
   Day tabs and the timetable itself
   ========================================================= */

.tt-tabs {
	display: flex;
	/* The tabs only cover part of the width; the rule carries on under the rest */
	border-bottom: 1px solid var(--sypn-steam);
}

.tt-tab {
	height: 48px;
	padding: var(--sypn-space-xxs) var(--sypn-space-xs);
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: var(--sypn-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sypn-ink);
	cursor: pointer;
}

.tt-tab[aria-selected="true"] {
	border-bottom-color: var(--sypn-orange);
}

.tt-note {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--sypn-ink);
}

/* Seven columns of times do not fit a phone, and the page must not scroll sideways */
.tt-table-scroll {
	overflow-x: auto;
}

.tt-table {
	width: 100%;
	border-collapse: collapse;
}

.tt-table th {
	padding: 9px var(--sypn-space-xs);
	background: var(--sypn-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	color: var(--sypn-white);
	text-align: left;
	white-space: nowrap;
}

/* The stop names take a third of the table and the times share the rest */
.tt-table th:first-child {
	width: 32%;
}

.tt-table td {
	padding: 10px var(--sypn-space-xs);
	border-bottom: 1px solid var(--sypn-grey-25);
	font-size: 14px;
	line-height: 20px;
	color: var(--sypn-ink);
	white-space: nowrap;
}

/* Set once the last departure of the day is on screen and there is nothing later */
.tt-table-actions .sypn-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.tt-table-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sypn-space-xs);
}

.tt-cards {
	display: flex;
	gap: var(--sypn-space-sm);
	padding: var(--sypn-space-md) 0;
}

.tt-cards .tt-card {
	flex: 1 1 0;
	min-width: 0;
}

/* =========================================================
   Narrow screens
   ========================================================= */

@media (max-width: 991.98px) {
	.tt-layout {
		flex-direction: column;
	}

	.tt-rail {
		flex: 0 0 auto;
		width: 100%;
	}

	.tt-filters {
		grid-template-columns: repeat(2, 1fr);
	}

	.tt-cards {
		flex-direction: column;
	}
}

@media (max-width: 767.98px) {
	.sypn-planner--search {
		margin-top: var(--sypn-space-xs);
	}

	.sypn-planner--search .sypn-planner-body {
		flex-direction: column;
		align-items: stretch;
		border-radius: var(--sypn-radius-md);
	}

	.sypn-planner--search .sypn-btn {
		width: 100%;
	}

	.tt-result {
		flex-wrap: wrap;
	}

	.tt-result__names {
		flex: 1 1 100%;
		order: -1;
	}

	.tt-filters {
		grid-template-columns: 1fr;
	}

	.tt-switch {
		grid-column: auto;
	}

	.tt-map__full {
		right: var(--sypn-space-xs);
	}
}