/* =============================================================================
   SD-1305 part 2 — member-app corner card (site-wide)
   Built to Design's build spec v1 of 5 Nov 2026 (sd-appcard_v1.css,
   md5 a881729804cd192e0e40b06f8fc37106), with the Principal's five rulings
   of 5 Nov: card 352x125 bottom-left on desktop, 66px bar on mobile.

   UNITS: the spec is written in px; this project's standing rule is rem/em only.
   Every length is the spec's own px NUMBER times `--sdac-u`, one token holding
   the rem value of 1px. Read `calc(16 * var(--sdac-u))` as "16px".
   The parent skin has TWO root sizes, not one:
       style.css        html            font-size: 17px
       __responsive.css @media (max-width:767px)  html,body { font-size:16px }
   so a fixed divisor is 6.25% out below 768. The token flips once, at the same
   767px edge as the parent's rule and as this card's own card/bar switch, so
   both formats render at the spec's px. (Same mechanism as snow-guns.css; it was
   SD-1306b follow-up 1 that found the second root.) The breakpoint stays in em
   because in a media query `em` is the INITIAL 16px, so 47.9375em is exactly 767.

   Z-INDEX, the one deviation from the spec: the spec says 900, "above the fixed
   header (500) and below the Mountain Report drawer (1000)". On this site 900 is
   ALREADY the Mountain Report backdrop (sd-header.php:275). At a tie the card
   would paint ABOVE the dimming layer, because wp_footer puts it later in the
   DOM than the backdrop -- the card would sit fully lit beside an open drawer,
   which is the opposite of the spec's stated intent. 800 satisfies the spec's
   sentence and its intent. Flagged to the PD in the return.

   COLOURS are literal, not --sd-* tokens: those are declared on `.sd-page`, and
   this card renders after the footer, outside that subtree, so they would not
   resolve. The hexes are the spec's own.
   ========================================================================== */

.sd-appcard {
	/* 1px at the 17px root this skin applies at >=768. See UNITS above. */
	--sdac-u: 0.05882353rem;
	--sdac-white: #FFFFFF;
	--sdac-navy: #003355;
	--sdac-navy-500: #33556F;
	--sdac-red: #C1121F;
	--sdac-n100: #F4F2EE;
	--sdac-n250: #E1E1DD;

	position: fixed;
	left: calc(24 * var(--sdac-u));
	bottom: calc(24 * var(--sdac-u));
	z-index: 800;
	width: calc(352 * var(--sdac-u));
	box-sizing: border-box;
	display: grid;
	grid-template-columns: calc(48 * var(--sdac-u)) 1fr;
	column-gap: calc(14 * var(--sdac-u));
	align-items: start;
	padding: calc(16 * var(--sdac-u)) calc(48 * var(--sdac-u)) calc(16 * var(--sdac-u)) calc(16 * var(--sdac-u));
	background: var(--sdac-white);
	border: calc(1 * var(--sdac-u)) solid var(--sdac-n250);
	border-radius: 0;
	box-shadow: 0 calc(8 * var(--sdac-u)) calc(24 * var(--sdac-u)) rgba(0, 51, 85, .16);
	/* Hidden state: the `hidden` attribute does the work for assistive tech; these
	   three keep it out of the paint and give the enter transition something to
	   animate from. Never shown on load -- only JS adds .is-visible. */
	opacity: 0;
	transform: translateY(calc(16 * var(--sdac-u)));
	visibility: hidden;
	transition: opacity 240ms cubic-bezier(.2, .8, .2, 1),
	            transform 240ms cubic-bezier(.2, .8, .2, 1),
	            visibility 0s linear 240ms;
}
.sd-appcard.is-visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

/* Hide it outright while the TicketSpice pop-over is open. Our own adapter in
   snow-devils-home.js toggles this class (initTicketModal -> open/close), so this
   also covers the case the spec's JS could not: the pop-over being opened AFTER
   the card is already showing. (0,2,1) beats .sd-appcard.is-visible at (0,2,0),
   so no !important is needed. */
body.sd-modal-open .sd-appcard { opacity: 0; visibility: hidden; pointer-events: none; }

.sd-appcard__mark { width: calc(48 * var(--sdac-u)); height: calc(48 * var(--sdac-u)); display: block; }
.sd-appcard__title {
	margin: 0;
	font-family: Outfit, sans-serif;
	font-weight: 600;
	font-size: calc(16 * var(--sdac-u));
	line-height: 1.25;
	color: var(--sdac-navy);
}
.sd-appcard__line {
	margin: calc(4 * var(--sdac-u)) 0 0;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: calc(13 * var(--sdac-u));
	line-height: 1.45;
	color: var(--sdac-navy-500);
}
.sd-appcard__link {
	display: inline-flex;
	align-items: center;
	gap: calc(6 * var(--sdac-u));
	margin-top: calc(8 * var(--sdac-u));
	font-family: Outfit, sans-serif;
	font-weight: 600;
	font-size: calc(14 * var(--sdac-u));
	line-height: 1.2;
	color: var(--sdac-red);
	text-decoration: none;
}
/* The whole card is the link target (spec §2). The card is position:fixed, so it
   is the containing block for this and for the × button. */
.sd-appcard__link::after { content: ""; position: absolute; inset: 0; }
.sd-appcard__link svg { width: calc(12 * var(--sdac-u)); height: calc(12 * var(--sdac-u)); transition: transform 160ms ease; }

.sd-appcard:hover { border-color: var(--sdac-navy); box-shadow: 0 calc(10 * var(--sdac-u)) calc(28 * var(--sdac-u)) rgba(0, 51, 85, .22); }
.sd-appcard:hover .sd-appcard__link { text-decoration: underline; text-underline-offset: calc(3 * var(--sdac-u)); }
.sd-appcard:hover .sd-appcard__link svg { transform: translateX(calc(2 * var(--sdac-u))); }

.sd-appcard:focus-within { outline: calc(3 * var(--sdac-u)) solid var(--sdac-red); outline-offset: calc(2 * var(--sdac-u)); }
.sd-appcard__link:focus { outline: none; }   /* the ring is drawn on the card */

.sd-appcard__close {
	position: absolute;
	top: calc(6 * var(--sdac-u));
	right: calc(6 * var(--sdac-u));
	z-index: 1;                               /* above the link's ::after layer */
	width: calc(32 * var(--sdac-u));
	height: calc(32 * var(--sdac-u));
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--sdac-navy-500);
	cursor: pointer;
}
.sd-appcard__close svg { width: calc(14 * var(--sdac-u)); height: calc(14 * var(--sdac-u)); }
.sd-appcard__close:hover { background: var(--sdac-n100); color: var(--sdac-navy); }
.sd-appcard__close:focus-visible { outline: calc(2 * var(--sdac-u)) solid var(--sdac-navy); outline-offset: calc(2 * var(--sdac-u)); }

/* ---------- MOBILE BAR (spec §3: max-width 767px) ---------- */
@media (max-width: 47.9375em) {
	.sd-appcard {
		/* The parent skin drops the root to 16px here, so 1px is 1/16rem. */
		--sdac-u: 0.0625rem;
		left: calc(12 * var(--sdac-u));
		right: calc(52 * var(--sdac-u));        /* clears "Go to Top" by 12 at 390 */
		bottom: calc(12 * var(--sdac-u) + env(safe-area-inset-bottom, 0rem));
		width: auto;
		min-height: calc(60 * var(--sdac-u));
		grid-template-columns: calc(36 * var(--sdac-u)) 1fr;
		column-gap: calc(10 * var(--sdac-u));
		align-items: center;
		padding: calc(10 * var(--sdac-u)) calc(44 * var(--sdac-u)) calc(10 * var(--sdac-u)) calc(10 * var(--sdac-u));
	}
	.sd-appcard__mark { width: calc(36 * var(--sdac-u)); height: calc(36 * var(--sdac-u)); }
	.sd-appcard__title { font-size: calc(14 * var(--sdac-u)); }
	.sd-appcard__line { display: none; }
	.sd-appcard__link { margin-top: calc(2 * var(--sdac-u)); font-size: calc(13 * var(--sdac-u)); }
	.sd-appcard__close {
		top: 50%;
		right: 0;
		width: calc(44 * var(--sdac-u));        /* 44 hit area, spec §3 */
		height: calc(44 * var(--sdac-u));
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-appcard, .sd-appcard.is-visible { transition: none; transform: none; }
	.sd-appcard__link svg { transition: none; }
}