/* ===========================================================================
   Round 7 · NAEM-SPEC #3 — the always-on support QR code, both surfaces
   ---------------------------------------------------------------------------
   Companion to inc/round7-support-qr.php (which enqueues this sheet on every
   route), inc/round6-support.php (floating card + tab), inc/round5-home.php
   (static card in the home FAQ aside) and assets/js/round6-support.js.

   Loaded AFTER round6-support.css, so part 1 below only ADDS to the Round 6 tab;
   the measurement that sheet rests on — a 16px docked sliver against an 18px
   content floor — is not touched by anything here.

   NO NEW COLOURS. The QR tile's light and dark are --text and --void baked into
   the SVG; the card is --panel with the theme's hairlines; #59677C is the
   control boundary Round 5 adopted (3.58:1 on the page) and Round 6 reused.

     1. The tab's Round 7 parts (link / label + the "+" button)
     2. The floating card
     3. The static card in the home FAQ aside
     4. Reduced motion, print
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. The tab
   ------------------------------------------------------------------------ */

/* The panel now holds two things side by side: the link (or, with no handle, a
   plain label) and the button that brings the QR card back. */
.r7s .r6s-panel { gap: 4px; padding: 12px 8px 12px 13px; }

.r6s-act {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: var(--r-sm);
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
a.r6s-act:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
}

/* 44x44: the theme's touch floor. A ring, not a filled disc — a solid teal
   circle in a corner is the "live chat is open" signifier Round 5 ruled out, and
   the panel already has one accent (the paper plane). */
.r7s-open,
.r7s-min {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	font: 400 20px/1 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* `display: grid` above would beat the UA's [hidden] rule, and `hidden` is how
   the no-JS page is kept free of a button that cannot act. */
.r7s-open[hidden],
.r7s-card[hidden] { display: none; }

.r7s-open > span,
.r7s-min > span {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border: 1px solid #59677C;
	border-radius: 50%;
	transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.r7s-open:focus-visible,
.r7s-min:focus-visible { outline: none; }
.r7s-open:focus-visible > span,
.r7s-min:focus-visible > span {
	outline: 2px solid var(--accent-bright);
	outline-offset: 2px;
	border-color: var(--accent-bright);
}

/* One control, two sizes: while the card is out the tab is not merely covered,
   it is gone — from the screen, the tab order and the accessibility tree. */
html.r7s-card-open .r6s {
	visibility: hidden;
	pointer-events: none;
}


/* ---------------------------------------------------------------------------
   2. The floating card
   ------------------------------------------------------------------------ */

.r7s-card {
	position: fixed;
	/* Same layer as the tab it replaces: above the page and .grain (150), below
	   every overlay that is allowed to own the screen (compare tray 180, backdrop
	   190, drawer 200, filter sheet 205, search 210, box tray and toast 220,
	   lightbox 260). The script closes the card for those anyway. */
	z-index: 170;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	width: 226px;
	max-width: calc(100vw - 24px);
	/* A landscape phone is ~360px tall and the card is ~350. It scrolls inside
	   itself rather than putting its own minimise button off screen. */
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	/* OPAQUE, for Round 6's reason: a moving field sits behind every route and
	   legibility must not depend on a backdrop-filter an engine may not paint. */
	background: var(--panel);
	color: var(--text);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
	animation: r7s-in 240ms var(--ease) both;
}
@supports (height: 100dvh) {
	.r7s-card { max-height: calc(100dvh - 32px); }
}

/* Opacity and transform only, and it arrives from the edge the tab lives on, so
   minimise/restore reads as one object changing size. */
@keyframes r7s-in {
	from { opacity: 0; transform: translateX(18px); }
	to   { opacity: 1; transform: none; }
}

/* The mix-box tray is full-width bottom chrome at a higher z-index. Same lift
   formula round4-box.css uses for the theme's other fixed chrome, off the tray's
   MEASURED height. (Its build mode, body.p3box-active, closes the card outright;
   that is the script's job and the rule below is the failure path.) */
body.p3box-on .r7s-card {
	bottom: calc(var(--p3box-h, 84px) + clamp(12px, 2.4vw, 26px) + 12px + env(safe-area-inset-bottom, 0px));
}
/* Phones only ever see the card after a deliberate press; if the compare tray
   (mobile.css, min-height 72px, z-index 180) is up, stand above it. */
body.compare-active .r7s-card {
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
body.p3box-on.compare-active .r7s-card {
	bottom: calc(var(--p3box-h, 84px) + 96px + clamp(12px, 2.4vw, 26px) + 12px + env(safe-area-inset-bottom, 0px));
}
/* Failure path: if the script dies with the card open, an overlay still wins. */
body.overlay-open .r7s-card,
html.overlay-open .r7s-card,
body.p3box-active .r7s-card { display: none; }

.r7s-head {
	display: flex;
	align-items: center;
	gap: 8px;
	/* The button's 44px hit area is taller than the row needs to look; the
	   negative inline margin lets its 28px ring sit 12px from the card edge. */
	margin-right: -8px;
	min-height: 48px;
}
.r7s-icon { flex: 0 0 auto; display: block; color: var(--accent-text); }
.r7s-icon svg { display: block; width: 18px; height: 18px; }
.r7s-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--text);
	font: 600 13px/1.3 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .01em;
}

/* The tile. The SVG carries its own light ground, quiet zone and rounded
   corners, so on a dark card it already reads as a chip; the hairline is what
   stops a #ebebec square from glaring against #0a0f1c at its edge. */
.r7s-qr {
	display: block;
	width: 100%;
	border-radius: var(--r-md);
	line-height: 0;
	box-shadow: 0 0 0 1px var(--line-strong);
}
.r7s-code {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-md);
}
a.r7s-qr:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}

.r7s-chat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	margin-top: 12px;
	padding: 8px 12px;
	border: 1px solid var(--accent);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--accent) 10%, var(--panel));
	color: var(--text);
	font: 600 12px/1.3 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
}
.r7s-chat-link:hover { border-color: var(--accent-bright); }
.r7s-chat-link:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.r7s-caption,
.r7s-note {
	margin: 10px 0 0;
	text-align: center;
	font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* #a7b0bc on #0a0f1c: 8.6:1. */
.r7s-caption { color: var(--muted); font-size: 13px; line-height: 1.45; }
/* #7e8ca0 on #0a0f1c: 5.6:1 — quiet, and still past 4.5:1 at 11.5px. */
.r7s-note { margin-top: 6px; color: var(--quiet); font-size: 11.5px; line-height: 1.4; }

@media (max-height: 460px) {
	.r7s-qr { width: 132px; margin-inline: auto; }
}
@media (max-width: 420px) {
	.r7s-card { right: calc(12px + env(safe-area-inset-right, 0px)); }
}

@media (hover: hover) and (pointer: fine) {
	.r7s-open:hover > span,
	.r7s-min:hover > span { border-color: var(--accent); color: var(--accent-bright); }
	a.r7s-qr { transition: box-shadow 180ms var(--ease); }
	a.r7s-qr:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
}


/* ---------------------------------------------------------------------------
   3. The static card (home FAQ aside)
   ---------------------------------------------------------------------------
   Sits where Round 5's pill sat, at the foot of .faq-echo-aside. Above 900px the
   aside is a 280-360px sticky column, so the card stacks: label, code, caption.
   At and below 900px the aside becomes a full-width block and a stacked 202px
   code would be a very tall thing to scroll past on a phone, so it turns into a
   row — code left, words right.
   ------------------------------------------------------------------------ */

.r7q-slot { margin-top: var(--s2); }

.r7q {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	background: var(--panel);
	color: inherit;
	text-decoration: none;
}
.r7q-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	font: 600 12px/1.3 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.r7q-icon { display: block; color: var(--accent-text); }
.r7q-icon svg { display: block; width: 18px; height: 18px; }

.r7q-tile {
	display: block;
	width: min(202px, 100%);
	border-radius: var(--r-md);
	line-height: 0;
	box-shadow: 0 0 0 1px var(--line-strong);
}
.r7q-code {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-md);
}
.r7q-caption {
	max-width: 28ch;
	color: var(--muted);
	font: 400 14px/1.5 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: center;
}
.r7q-note {
	margin: 10px 0 0;
	color: var(--quiet);
	font: 400 12px/1.45 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: center;
}

/* Only the variant that IS a link behaves like one. */
.r7q--link:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
	.r7q--link { transition: border-color 180ms var(--ease); }
	.r7q--link:hover { border-color: var(--accent); }
}

@media (max-width: 900px) {
	.r7q {
		grid-template-columns: 132px minmax(0, 1fr);
		grid-template-areas: "tile label" "tile caption";
		grid-template-rows: auto 1fr;
		justify-items: start;
		align-items: start;
		column-gap: 16px;
		row-gap: 8px;
	}
	.r7q-tile { grid-area: tile; width: 132px; }
	.r7q-label { grid-area: label; align-self: end; padding-top: 4px; }
	.r7q-caption { grid-area: caption; max-width: none; text-align: left; }
	.r7q-note { text-align: left; }
}
@media (max-width: 380px) {
	.r7q { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
	.r7q-tile { width: 112px; }
	.r7q-label { letter-spacing: .06em; }
}


/* ---------------------------------------------------------------------------
   3b. The same static card in the footer's Information column
   ---------------------------------------------------------------------------
   Every inner route prints it (functions.php, peptpro_telegram_support_button).
   The column it lands in is the narrowest the card ever gets — the footer grid
   gives it roughly 220-280px at 1440 — so the code comes down to 124px and the
   words go left-aligned with the links above them rather than centred like the
   homepage card, which sits alone in a 280-360px aside.

   The ROW layout the base rule switches to at 900px is not overridden: below
   that width the footer is a single stacked column and there is room for it.
   ------------------------------------------------------------------------ */

.r7q-slot--footer { margin-top: var(--s3); max-width: 300px; min-width: 0; }

.r7q--footer { justify-items: start; gap: 12px; padding: 14px; min-width: 0; }
.r7q--footer .r7q-tile { width: min(124px, 100%); }
.r7q--footer .r7q-caption { max-width: none; text-align: left; font-size: 13px; }
.r7q-slot--footer .r7q-note { text-align: left; }

/* The footer column is NOT the homepage aside, and below 900px the base rule
   turns the card into a row: a 132px fixed tile column plus a text column. The
   footer grid at 375px is two 164.5px columns, and a 112-132px fixed track plus
   this card's padding has a min-content width larger than that — measured, the
   page grew 53px wider than the viewport and scrolled sideways. So the footer
   copy of the card keeps the stacked layout at every width and lets the tile
   shrink with the column it is in. */
@media (max-width: 900px) {
	.r7q--footer {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: none;
		grid-template-rows: none;
		column-gap: 0;
		row-gap: 12px;
	}
	.r7q--footer .r7q-label,
	.r7q--footer .r7q-tile,
	.r7q--footer .r7q-caption { grid-area: auto; }
	.r7q--footer .r7q-label { align-self: auto; padding-top: 0; }
}
@media (max-width: 380px) {
	.r7q--footer { padding: 14px; }
	.r7q--footer .r7q-tile { width: min(124px, 100%); }
}

/* Half-deployed theme: the label with no code (see the helper's doc block). */
.r7q-fallback {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--s3) 0 0;
	color: var(--muted);
	font: 600 12px/1.3 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   4. Reduced motion, print
   ------------------------------------------------------------------------ */

@media print {
	.r7s-card { display: none; }
}

/* Not faster — not at all. Last block in the sheet so ordering alone carries it. */
@media (prefers-reduced-motion: reduce) {
	.r7s-card { animation: none; }
	.r7s-open > span,
	.r7s-min > span,
	a.r7s-qr,
	.r7s-chat-link,
	.r7q--link { transition: none; }
}