/* passcode.css — the beta passcode dialog, and its block in the Credits drawer.
 *
 * A real stylesheet rather than styles injected from JavaScript, because both
 * surfaces here are drawn into markup that is already in the page: the block
 * lives in `#credits-beta` in index.html, and the dialog is raised over a page
 * whose stylesheets have long since loaded. Nothing here is theme-specific --
 * every colour is a token from variables.css, so the four skins carry it
 * without a second copy.
 */

/* ── The dialog ───────────────────────────────────────────── */

.beta-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 16px;
}

.beta-box {
	background: var(--bg-secondary);
	color: var(--text-primary);
	border: 1px solid var(--border);
	border-radius: 12px;
	max-width: 420px;
	width: 100%;
	padding: 20px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
	/* The refusal is three sentences and the confirmation is two; on a phone in
	   landscape that is taller than the viewport, and a card that cannot scroll
	   puts its buttons off the bottom of the screen. */
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	box-sizing: border-box;
}

.beta-box h3 {
	margin: 0 0 8px;
	font-size: var(--fs-xl);
}

.beta-box p {
	margin: 0 0 12px;
	font-size: var(--fs-base);
	line-height: 1.45;
	opacity: .85;
}

.beta-label {
	display: block;
	font-size: var(--fs-sm);
	opacity: .85;
	margin: 0 0 4px;
}

/* Monospaced and spaced out, because it is copied character by character off a
   message and the one thing that must not happen is a misread l for a 1. */
.beta-input {
	width: 100%;
	box-sizing: border-box;
	font-family: ui-monospace, monospace;
	font-size: var(--fs-3xl);
	letter-spacing: .1em;
	text-align: center;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--bg-primary);
	color: inherit;
	margin: 0 0 12px;
}

/* The hint inside the empty box is the only instruction for what to type, so it
   is held to the text floor: a named token at full strength, not the browser's
   own washed-out default, which measured 3.92:1. */
.beta-input::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

.beta-err {
	color: var(--danger);
	font-size: var(--fs-sm);
	line-height: 1.4;
	min-height: 1.1em;
	margin: 0 0 8px;
}

.beta-note {
	font-size: var(--fs-xs);
	opacity: .7;
	margin: 8px 0 0;
}

/* "No passcode? Apply." — the foot of the refusal card.
   Its own class rather than `.beta-note`, because that one dims with `opacity`
   and opacity applies to the whole subtree: a link inside it cannot come back
   to full strength, and a way out of a dead end must not be the faintest thing
   on the card. Dimmed here on the TEXT colour instead, so the link is exempt. */
/* `.beta-box p` (0,1,1) outranks a bare `.beta-ask` (0,1,0), so the plain class
   lost its own font size and inherited the card's `opacity: .85` -- dimming the
   sentence a second time on top of `--text-muted`, and dimming the link with it.
   Answered by matching the same element more specifically rather than with
   `!important`: this rule is the one that should win, so it is written to. */
.beta-box p.beta-ask {
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--text-muted);
	opacity: 1;
	margin: 12px 0 0;
}
/* TWO ACCENT TOKENS, AND THEY ARE NOT INTERCHANGEABLE. `--accent` is the accent
   as a FILL or an EDGE -- a button's ground, a border, a focus ring -- and WCAG
   SC 1.4.11 holds it to 3.0 only. `--accent-text` is the accent as INK, held to
   4.5, and every palette sets it a rung further from its own surfaces for that
   reason. This is a sentence, so it takes the ink token; painted with `--accent`
   it measured 4.14:1 and failed. Do not "tidy" the two back into one. */
.beta-apply {
	color: var(--accent-text);
	text-decoration: underline;
	/* A link in a card answered on a phone: it needs a line of its own to be
	   pressed at, which `inline-block` plus the padding gives it without
	   turning the sentence into two paragraphs. */
	display: inline-block;
	padding: 4px 0;
}
.beta-apply:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.beta-row {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.beta-btn {
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	font-size: var(--fs-base);
	/* The thumb's floor. This card is answered on a phone as often as not. */
	min-height: 44px;
}

.beta-btn.ghost {
	background: transparent;
	color: inherit;
}

.beta-btn[disabled] {
	opacity: .6;
	cursor: default;
}

/* ── The block in the Credits drawer ──────────────────────── */

.beta-block:empty {
	display: none;			/* no rule, no gap, on the great majority of devices */
}

.beta-block {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px;
	margin: 0 0 12px;
}

.beta-head {
	font-size: var(--fs-sm);
	font-weight: 600;
	margin: 0 0 6px;
}

.beta-lead {
	font-size: var(--fs-sm);
	line-height: 1.45;
	opacity: .85;
	margin: 0 0 10px;
}

.beta-block .beta-btn {
	width: 100%;
}