/* "On this flight" section of the spot details panel (#766), built by
   public/modules/onThisFlight.js. Linked from index.html after style.css, which is
   frozen for new features, and uses only the details panel's existing tokens so it
   follows light and dark themes.

   Dividers: the section draws only a bottom line. What sits above it already ends in
   one (the spec grid's border-bottom, a detail block that is no longer :last-child, or
   the staff "Posted by" section), so a top border here doubled it. Below, the
   event-graph section is usually hidden and "Know something" has no top border, so
   without a bottom line here nothing separated them. A visible event-graph section
   right after this one drops its own top border so the two do not double up. The two
   full-width note rows have no divider of their own, so the section draws its top
   line again in the rare case one of them comes straight before it. */
#details-panel .on-this-flight-section {
	/* Fixed time column, so every description starts at the same x. */
	--on-this-flight-entry-pad: 4px;
	--on-this-flight-time-width: 64px; /* fits the widest time, "12:59pm" (62px) */
	--on-this-flight-column-gap: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--details-divider-color);
}

#details-panel .details-context-note-row + .on-this-flight-section {
	border-top: 1px solid var(--details-divider-color);
}

#details-panel .on-this-flight-section + .event-graph-link-section {
	border-top: none;
}

/* The heading also carries .event-graph-link-heading, so its font, colour, gap and purple
   icon come from that rule in style.css and stay paired with "Linked event". Only the
   h3's default margin needs clearing. */
#details-panel .on-this-flight-heading {
	margin: 0;
}

#details-panel .on-this-flight-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each entry is a quiet tappable row, like the media row: time, description, chevron. */
#details-panel .on-this-flight-entry {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: baseline;
	gap: var(--on-this-flight-column-gap);
	width: 100%;
	margin: 0;
	padding: 7px var(--on-this-flight-entry-pad);
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--details-value-color);
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background var(--transition-fast);
}

/* Pointer devices only: on a phone a tap would leave the row shaded. */
@media (hover: hover) {
	#details-panel .on-this-flight-entry:hover {
		background: rgba(120, 88, 184, 0.1);
	}
}

#details-panel .on-this-flight-entry:focus-visible,
#details-panel .on-this-flight-more:focus-visible {
	outline: 2px solid var(--purple);
	outline-offset: 2px;
}

#details-panel .on-this-flight-time {
	flex: 0 0 var(--on-this-flight-time-width);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

#details-panel .on-this-flight-description {
	min-width: 0;
	overflow-wrap: anywhere;
}

#details-panel .on-this-flight-chevron {
	flex: none;
	margin-left: auto;
	color: var(--details-label-color);
	font-size: 12px;
}

/* An entry with an area note gets a thin purple strip (3px, --purple) down its whole left
   side, beside the time row and the note. Every entry reserves the same strip width,
   transparent when there is no note, so all the times line up. */
#details-panel .on-this-flight-item {
	padding-left: 5px;
	border-left: 3px solid transparent;
}

#details-panel .on-this-flight-item.has-note {
	border-left-color: var(--purple);
}

/* Same muted italic voice as the panel's own area note. Full width, lined up with the
   time: indenting it to the description column squeezed long notes into a narrow column. */
#details-panel .on-this-flight-note {
	margin: 0;
	padding: 0 var(--on-this-flight-entry-pad) 6px;
	color: var(--details-subtle-text-color);
	font-size: 13px;
	font-style: italic;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

#details-panel .on-this-flight-more {
	appearance: none;
	-webkit-appearance: none;
	align-self: flex-start;
	margin: 0;
	padding: 4px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--purple);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* "This leg" section (#810), built by public/modules/flightLegs.js right after "On this
   flight". Same dividers as that section; its leg rows reuse the entry styles above. The
   end markers repeat the map's trail markers (public/modules/trailEnds.js): a filled red
   dot for a landing, a hollow one for a take-off, and a faded red dotted stroke for a lost
   signal, like the trail's faded tail. */
#details-panel .flight-legs-section {
	/* The entry styles read these; same values as "On this flight". */
	--on-this-flight-entry-pad: 4px;
	--on-this-flight-column-gap: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--details-divider-color);
}

#details-panel .details-context-note-row + .flight-legs-section {
	border-top: 1px solid var(--details-divider-color);
}

#details-panel .flight-legs-section + .event-graph-link-section {
	border-top: none;
}

#details-panel .flight-legs-heading {
	margin: 0;
}

#details-panel .flight-legs-ends {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0 4px;
	list-style: none;
}

#details-panel .flight-legs-end {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--details-value-color);
	font-size: 14px;
}

/* A fixed 18px column so the three kinds' text lines up. */
#details-panel .flight-legs-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

#details-panel .flight-legs-icon.is-landing::before,
#details-panel .flight-legs-icon.is-takeoff::before {
	content: '';
	width: 8px;
	height: 8px;
	border: 2px solid #ff0000;
	border-radius: 50%;
	background: #ffffff;
}

#details-panel .flight-legs-icon.is-landing::before {
	background: #ff0000;
}

#details-panel .flight-legs-icon.is-last-seen::before {
	content: '';
	width: 16px;
	border-top: 2px dashed rgba(255, 0, 0, 0.45);
}

#details-panel .flight-legs-list {
	gap: 0;
}