/*
 * ═══ ORDEN 162 · LA PUERTA — la caja que te lleva de la mano ═══
 *
 * Transcrito de `mockups/access.html` v3, que es el contrato. Ni una clase
 * inventada: `board`, `board__mark`, `lead`, `verbs`, `field`, `dots`,
 * `already` son las suyas.
 *
 * 🔴 EL TABLERO ES DEL PLUGIN; LA PÁGINA Y EL FONDO SON DE LA CASA. En
 * Spain Passion el shortcode se pega en la página de registro que ya
 * existe; en Caviar la crea el instalador. Por eso la caja lleva su propio
 * blanco y una sombra corta: tiene que sostenerse sobre cualquier fondo,
 * incluida una fotografía a sangre, sin que nadie maquete nada por sitio.
 *
 * ⚠️ Todo cuelga de `.the-spine-access`. Las clases son las de la maqueta,
 * tal cual, pero una regla suelta llamada `.board` en una página pública
 * chocaría con el tema de la casa el primer día. El ancestro sube la
 * especificidad sin cambiarle el nombre a nada (DESIGN-SYSTEM, regla 2).
 */
.the-spine-access {
	--ink: #101012;
	--muted: rgba(16, 16, 18, .72);
	--soft: rgba(16, 16, 18, .42);
	--hair: rgba(16, 16, 18, .10);
	--line: rgba(16, 16, 18, .20);

	color: var(--ink);
	font: 400 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	margin: 0 auto;
	max-width: 560px;
	position: relative;
}

.the-spine-access *,
.the-spine-access *::before,
.the-spine-access *::after {
	box-sizing: border-box;
}

/* ── El tablero ── */
.the-spine-access .board {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 20px 50px rgba(0, 0, 0, .26);
	padding: 36px 40px 30px;
}

.the-spine-access .board__mark {
	margin-bottom: 24px;
}

.the-spine-access .board__mark img {
	display: block;
	height: 22px;
	opacity: .9;
	width: auto;
}

.the-spine-access h1 {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
	margin: 0 0 9px;
	padding: 0;
}

.the-spine-access .lead {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 22px;
	max-width: 46ch;
}

.the-spine-access .lead b {
	color: var(--ink);
	font-weight: 500;
}

/*
 * Los verbos en fila — la gramática de Conscience. Sin botones: quien
 * llega elige diciendo, no pulsando cajas de colores.
 */
.the-spine-access .verbs {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.the-spine-access .verbs a,
.the-spine-access .verbs button {
	appearance: none;
	background: none;
	border: 0;
	color: var(--muted);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	padding: 0;
	text-decoration: none;
}

.the-spine-access .verbs a.on,
.the-spine-access .verbs button.on {
	color: var(--ink);
	font-weight: 500;
}

.the-spine-access .verbs a:hover,
.the-spine-access .verbs button:hover {
	color: var(--ink);
}

.the-spine-access .verbs a.back,
.the-spine-access .verbs button.back {
	color: var(--soft);
	font-size: 12.5px;
	margin-left: auto;
}

/* Los campos: filete, sin caja. */
.the-spine-access .field {
	border-bottom: 1px solid var(--line);
	margin-bottom: 20px;
	padding-bottom: 7px;
}

.the-spine-access .field:last-of-type {
	margin-bottom: 24px;
}

.the-spine-access .field label {
	color: var(--soft);
	display: block;
	font-size: 10px;
	letter-spacing: .09em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.the-spine-access .field .val {
	appearance: none;
	background: none;
	border: 0;
	color: var(--ink);
	display: block;
	font: inherit;
	font-size: 16px;
	outline: none;
	padding: 2px 0;
	width: 100%;
}

.the-spine-access .field .val::placeholder {
	color: var(--soft);
}

.the-spine-access .dots {
	display: flex;
	gap: 5px;
	margin-bottom: 20px;
}

.the-spine-access .dot {
	background: rgba(16, 16, 18, .13);
	border-radius: 99px;
	height: 3px;
	width: 26px;
}

.the-spine-access .dot.on {
	background: #111;
}

.the-spine-access .already {
	border-top: 1px solid var(--hair);
	color: var(--soft);
	font-size: 12.5px;
	margin: 24px 0 0;
	padding-top: 15px;
}

.the-spine-access .already a {
	color: var(--muted);
}

/*
 * Lo que la casa dice cuando algo no puede seguir. No es una alarma: es
 * una frase, en el mismo tono que el resto (GUION §1).
 */
.the-spine-access .said {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 18px;
}

/*
 * ═══ ORDEN 222 §1 · LA PÁGINA DE LA PUERTA: SÓLO LA TARJETA, CENTRADA ═══
 *
 * La página es de la casa —su cabecera, su menú, su fondo— y dentro sólo va
 * la tarjeta (Access_Controller::door_template). Esto es estructura: que la
 * tarjeta quede en el centro de lo que el tema le deja, sobre su fondo. No
 * nombra ningún tema. La piel de lo nuevo de la 222 (las seis cifras, la
 * línea gris de la clave) es de Fable.
 */
.the-spine-door {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 40px 16px;
	width: 100%;
}

.the-spine-door .the-spine-access {
	width: 100%;
}

/* §3 · La línea gris de la clave corta: se enciende mientras se escribe, nunca impide seguir. */
.the-spine-access .said[hidden] {
	display: none;
}

/*
 * ═══ ORDEN 222 · FASE A · LA PIEL DE LO NUEVO (Fable, 25 sept 2026) ═══
 *
 * La tarjeta ya no vive en una plantilla desnuda: vive DENTRO del tema, y
 * el tema trae sus propias reglas para label, input, textarea y date (en
 * Caviar, el rótulo salía en negrita y la casilla con caja). Por eso aquí
 * se sube la especificidad (html body …) y se dice todo lo que un campo es.
 * El marcado de la 222 es `label.field > span + .val` (la 162 era
 * `.field > label`): se visten los dos.
 */
html body .the-spine-access .field {
	display: block;
	margin: 0 0 20px;
	padding: 0 0 7px;
	border: 0;
	border-bottom: 1px solid var(--line);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}
html body .the-spine-access .field > span {
	color: var(--soft);
	display: block;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .09em;
	line-height: 1.4;
	margin: 0 0 6px;
	text-transform: uppercase;
}
html body .the-spine-access .field .val {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ink);
	display: block;
	font: inherit;
	font-size: 16px;
	height: auto;
	line-height: 1.5;
	margin: 0;
	min-height: 0;
	outline: none;
	padding: 2px 0 !important;
	width: 100%;
}
/* Sus palabras: unas líneas, sin asa, crece con lo que escribe. */
html body .the-spine-access .field textarea.val {
	min-height: 72px;
	resize: none;
	field-sizing: content;
}
/* Las fechas: desde y hasta en la misma casilla, lado a lado. */
html body .the-spine-access .field--dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
}
html body .the-spine-access .field--dates > span {
	flex: 0 0 100%;
}
html body .the-spine-access .field--dates .val {
	flex: 1 1 140px;
	width: auto;
	color-scheme: light;
}

/*
 * El número: UNA casilla (pegarlo la llena entera, como en el teléfono),
 * pintada como las seis de la maqueta: seis filetes de 38 px separados 10,
 * y cada cifra en el suyo. `ch` + monoespaciadas de sistema para que las
 * cifras caigan en su sitio.
 */
html body .the-spine-access .code {
	margin: 4px 0 24px;
}
html body .the-spine-access .code .val {
	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(var(--line), var(--line)) 0 100% / 38px 1px repeat-x !important;
	background-image: repeating-linear-gradient(to right, var(--line) 0 38px, transparent 38px 48px) !important;
	background-size: 288px 1px !important;
	background-position: 0 100% !important;
	background-repeat: no-repeat !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ink);
	font: 500 22px/1 ui-monospace, "SF Mono", Menlo, monospace;
	font-variant-numeric: tabular-nums;
	letter-spacing: calc(48px - 1ch);
	outline: none;
	padding: 6px 0 6px calc((38px - 1ch) / 2) !important;
	/* Fable, 17 oct: 288 no bastaba (6 × 48 + el padding de la izquierda ≈ 296): al escribir la sexta cifra la casilla
	   se desplazaba y la primera desaparecía (Samuel lo vio en el alta). Las seis rayas siguen midiendo 288 (fondo). */
	box-sizing: content-box;
	width: calc(288px + 12px);
	max-width: 100%;
}

/* La línea gris de la clave corta: una frase suave, pegada al campo. */
html body .the-spine-access .said--weak {
	color: var(--soft);
	font-size: 12.5px;
	margin: -12px 0 18px;
}

/* Los verbos son botones: el tema no les pone caja, color ni mayúsculas. */
html body .the-spine-access .verbs button {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	letter-spacing: 0 !important;
	line-height: 1.55 !important;
	min-height: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
}

/* ═══ ORDEN 220 · FASE D · LOS TÉRMINOS EN LA PUERTA (Fable, 26 sept 2026) ═══
   Una línea que se despliega para leer y una casilla para decir que sí, en la voz de la tarjeta:
   nada de triángulos de navegador, la casilla en tinta y el texto a 13. */
html body .the-spine-access .terms{margin:4px 0 22px}
html body .the-spine-access .terms__texto summary{list-style:none;cursor:pointer;font-size:13px;color:var(--ink);font-weight:500;padding:4px 0}
html body .the-spine-access .terms__texto summary::-webkit-details-marker{display:none}
html body .the-spine-access .terms__texto summary::marker{content:""}
html body .the-spine-access .terms__texto summary::after{content:" \203A";color:var(--soft)}
html body .the-spine-access .terms__texto[open] summary::after{content:" \2039"}
html body .the-spine-access .terms__texto > div{max-height:220px;overflow:auto;margin:6px 0 10px;padding:12px 16px;background:#f7f7f7;font-size:12.5px;line-height:1.6;color:var(--muted)}
html body .the-spine-access .terms__texto > div p{margin:0 0 8px}
html body .the-spine-access .terms__si{display:flex!important;align-items:flex-start;gap:10px;margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer;text-transform:none;letter-spacing:0}
html body .the-spine-access .terms__si input{-webkit-appearance:auto;appearance:auto;margin:2px 0 0;width:15px;height:15px;flex:0 0 auto;accent-color:#111}

/* La entrada (0c) · «Keep me signed in»: la casilla nativa de 16 en el negro de la casa, alineada con su frase,
   y aire antes del verbo (antes se pegaba a Enter). */
.the-spine-access .keep {
	align-items: center;
	color: var(--muted);
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 10px;
	margin: 22px 0 26px;
}

.the-spine-access .keep input[type="checkbox"] {
	accent-color: #101012;
	flex: 0 0 16px;
	height: 16px;
	margin: 0;
	width: 16px;
}