/**
 * MyLTC front-end styles.
 *
 * Two jobs, and both stay out of the theme's way:
 *
 *  - Mark up button states. Only hooks are provided — no colours, no borders,
 *    no font — so an upgraded button keeps looking like the theme's button.
 *    Style `[data-myltc-state]` in the theme to change that.
 *  - Draw the lightbox, which has no theme equivalent to inherit from.
 */

/* A button whose label changed. Deliberately unstyled: the theme owns how its
   buttons look, and a registered visitor's button is still that button. */
.myltc-link[data-myltc-state] {
	/* Hook only. */
}

/* A past event's button, for somebody who holds nothing for it. It keeps the
   theme's own look (a white pill on this site), because the words already say
   it is over. It is no longer a link (the script takes its href away), so the
   only thing left to do here is stop it acting like one: no pointer and no
   hover. It is not dimmed: once it is not a control it is text, and dimming
   this theme's button took it to 2.6:1. */
.myltc-passed {
	cursor: default;
	pointer-events: none;
}

/* A line under a button — today only for an event that registers on somebody
   else's site. Minimal on purpose, like the button hooks above: the theme owns
   its own type, so this sets size and spacing and inherits everything else.
   `currentColor` at reduced opacity keeps it legible on a dark theme as well
   as a light one without naming a colour the theme did not choose. */
.myltc-note {
	margin: 6px 0 0;
	font-size: 0.8125em;
	line-height: 1.5;
	color: currentColor;
	opacity: 0.75;
}

/* The waiting state is NOT here. It is inline in the head
   (myltc_print_early_blanking) because it has to apply before the browser
   paints, and a stylesheet in the head would be a blocking request for a
   rule of a dozen lines. It is a stylesheet rule either way, so it covers a
   link marked later just as well — a calendar view that swapped its markup
   in after load, say. */

/* Geometry copied from MyLTC's own registration dialog
   (components/reg/RegistrationPopup.tsx) so a registration opened from the
   website and one opened from an LTC App table look like the same thing. The
   framed screen is asked for with ?embed=1, which drops the auth shell's
   illustrated panel — that is the "sidebar" — and leaves the screen bare,
   exactly as the popup mounts it.

   The panel is a window and nothing else: no padding, no border. The room
   around the content is given INSIDE the frame, by the screen itself, and
   that is the difference between an embed and a frame — padding out here
   would be a static ring around a scrolling document, so text would slide
   under it and stop, visibly boxed in. Padding inside the scroll container
   scrolls with the content, so text runs to the real edge and clips there.

   The background is only ever seen before the screen paints, and even that
   is matched: #F7F7F9 is the portal's light-theme `--bg`, and the screen
   reports its own on load so JS can set --myltc-surface for the dark one.
   Everything visible after that — the close button included — is the
   portal's own paint. */
.myltc-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5);
}

.myltc-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(600px, 100%);
	/* The popup is content-sized with a 86vh ceiling. A cross-origin iframe
	   cannot measure its content, so this takes the ceiling and a sensible
	   floor instead. */
	height: min(86vh, 44rem);
	background: var(--myltc-surface, #f7f7f9);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	/* Clips the framed screen's own square corners to the rounded window. */
	overflow: hidden;
	/* Safari does not clip an iframe to a rounded parent without one of these;
	   the radius on the iframe itself below is the other half of the fix. */
	isolation: isolate;
}

.myltc-iframe {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	border: 0;
	/* Matches the window it fills, so Safari clips the corners too. */
	border-radius: inherit;
	/* Transparent, so the screen's own background is the only surface and the
	   panel never shows an edge of a colour the portal did not choose. */
	background: transparent;
}

/* Sits behind the frame, so it shows only until the screen paints over it. A
   frame that never paints at all is handled in JS — a blocked iframe paints
   the browser's own error page OVER this, so it cannot be relied on alone. */
.myltc-loading {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2rem;
	font-size: 0.875rem;
	text-align: center;
	/* On the panel's own surface now, not on the scrim. */
	color: #64748b;
}

/* Stop the page behind the lightbox from scrolling under it. */
body.myltc-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.myltc-overlay {
		animation: myltc-fade 120ms ease-out;
	}
}

@keyframes myltc-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}