/* The star in the spot details panel's title row (#1001), built by public/modules/spotStar.js.
   Linked from index.html after style.css, which is frozen for new features.

   Same look as radio's star (#1000, ui/map/radio/RadioApp.jsx StarButton): a spot with any
   stars is a solid gold pill with a dark star and raised count, the same for everyone; the
   viewer's own star is the filled star inside it; with none it is a grey outline star. The gold
   values are the design system's (--cs-gold / --cs-on-gold in ui/styles.css), repeated here
   because the details panel is not a React island and follows :root[data-theme] instead. The
   dark text is 8.5:1 on the light gold and 9.0:1 on the dark one. */
:root,
:root[data-theme='light'] {
	--spot-star-gold: #ffc21a;
	--spot-star-on-gold: #3d2a00;
}

:root[data-theme='dark'] {
	--spot-star-gold: #ffc94d;
	--spot-star-on-gold: #3d2a00;
}

/* Beside the close button (#details-closer, absolute at top 5px, right 2px, 2.5em wide as a
   Font Awesome stack). font-size: inherit keeps the button's em the closer's. */
#details-panel > .spot-star-btn {
	position: absolute;
	top: 5px;
	right: calc(2px + 2.5em + 2px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 2em;
	min-width: 2em;
	padding: 0 7px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--details-label-color);
	font-family: var(--mainfont);
	font-size: inherit;
	line-height: 1;
	cursor: pointer;
}

#details-panel > .spot-star-btn[hidden] {
	display: none;
}

#details-panel > .spot-star-btn i {
	font-size: 15px;
}

#details-panel > .spot-star-btn:hover {
	background: var(--calendar-indicator-bg-hover);
}

#details-panel > .spot-star-btn[data-starred='true'] {
	background: var(--spot-star-gold);
	color: var(--spot-star-on-gold);
}

#details-panel > .spot-star-btn:focus-visible {
	outline: 2px solid var(--purple);
	outline-offset: 2px;
}

#details-panel > .spot-star-btn[aria-busy='true'] {
	cursor: progress;
}

/* The raised number, like an exponent: ★⁵. */
#details-panel > .spot-star-btn .spot-star-count {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	vertical-align: baseline;
}

#details-panel > .spot-star-btn .spot-star-count[hidden] {
	display: none;
}

/* Keep a long title clear of the star and the close button. */
#details-panel.has-spot-star > h1 {
	padding-right: 84px;
}

/* The sign-in prompt (.spot-sign-in-prompt, styled in style.css) or a failure, under the title
   row and above the spot's fields. */
#details-panel > .spot-star-notice:empty {
	display: none;
}

#details-panel > .spot-star-notice .spot-star-error {
	margin: 6px 0 8px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--details-subtle-text-color);
}