/* Inktober Tracker · Pluffi
   Diseño: negro #141314, blanco, Courier New Bold (como el resto de Pluffi). */

:root {
	--ink: #141314;
	--paper: #fff;
	--gray: #565656;
	--mute: #8c8c8c;
	--f: 'Courier New', 'Courier Prime', Courier, monospace;
	--ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--f);
	font-weight: 700;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}

h1, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nojs { padding: 24px; text-align: center; }

/* ---------- Página ---------- */
.page {
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: clamp(18px, 4vw, 56px) clamp(16px, 5vw, 56px) 56px;
}

/* ---------- Barra superior ---------- */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; min-height: 80px; }

.toast {
	position: relative;
	max-width: 290px;
	padding: 10px 24px 10px 24px;
	background: var(--paper);
	color: var(--ink);
	border-radius: 30px;
	font-size: 12px;
	line-height: 1.25;
	transform: translateX(0);
	transition: transform .8s var(--ease), opacity .5s;
}
.js .toast { transform: translateX(calc(-100% - 140px)); opacity: 0; }
.js .toast.is-in { transform: translateX(0); opacity: 1; }
.toast__x {
	position: absolute; top: -10px; right: -10px;
	display: grid; place-items: center;
	width: 26px; height: 26px; padding: 0 0 2px;
	border: 0; border-radius: 50%;
	background: var(--gray); color: var(--paper);
	font-size: 18px; line-height: 1;
	transition: transform .25s var(--ease), background .25s;
}
.toast__x:hover { transform: rotate(90deg); background: #6e6e6e; }

.top__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.lang { display: inline-flex; border: 1px solid var(--paper); }
.lang button { min-width: 44px; min-height: 40px; padding: 0 10px; background: transparent; border: 0; font-size: 14px; letter-spacing: .1em; }
.lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.btn {
	min-height: 48px; padding: 0 28px;
	background: transparent; border: 1px solid var(--paper);
	font-size: 18px; letter-spacing: .02em; text-transform: uppercase;
	transition: background .25s, color .25s;
}
.btn:hover { background: var(--paper); color: var(--ink); }

/* ---------- Marca ---------- */
.brand { width: min(100%, 700px); margin: clamp(10px, 3vw, 34px) auto clamp(26px, 5vw, 64px); container-type: inline-size; }
.brand__logo { width: 100%; margin: 0; }
.brand__logo svg { display: block; width: 100%; height: auto; fill: var(--paper); }
/* El título se acomoda bajo la P, justo donde el logo ya no tiene trazos */
.brand__title {
	position: relative; margin: -10.5% 0 0; padding-left: 3.5%;
	font-size: clamp(14px, 3.9vw, 34px); font-size: max(13px, 4.7cqw); letter-spacing: 0; line-height: 1.1;
}

/* ---------- Progreso ---------- */
.strip {
	display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: clamp(16px, 3vw, 36px);
	width: min(100%, 1130px); margin: 0 auto 44px;
}
.strip__hint { font-size: 21px; line-height: 1.2; max-width: 22em; }
.strip__label { font-size: 36px; letter-spacing: 0; text-transform: uppercase; }

.bar {
	position: relative; height: 39px; overflow: hidden;
	border: 1px solid var(--paper);
	background: repeating-linear-gradient(-30deg, var(--paper) 0 8px, var(--ink) 8px 28px);
	background-size: 100% 100%;
}
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--paper); transition: width .9s var(--ease); }
.bar__count {
	position: absolute; top: 50%; left: 50%; translate: -50% -50%;
	padding: 1px 12px; background: var(--ink); border: 1px solid var(--paper);
	font-size: 16px; letter-spacing: .08em; white-space: nowrap;
}

/* ---------- Cuadro ---------- */
.board {
	width: min(100%, 714px); margin: 0 auto;
	border-collapse: collapse; table-layout: fixed;
}
.board th {
	height: 67px; padding: 0 14px;
	background: var(--paper); color: var(--ink);
	font-family: var(--f); font-size: 24px; font-weight: 700; text-align: center; letter-spacing: 0; text-transform: uppercase;
}
.board th:first-child { width: 72.5%; }
.board td { height: 44px; padding: 0; border: 1px solid var(--paper); font-size: 21px; }
.board td.prompt { display: table-cell; padding: 0 0 0 20px; text-align: left; white-space: nowrap; }
.board td.prompt label { display: flex; align-items: baseline; gap: 14px; cursor: pointer; }
.n { font-size: 14px; color: var(--mute); min-width: 1.8em; }
.name { position: relative; }
.name::after {
	content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 2px;
	background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}

.done { text-align: center; }
.done label { display: grid; place-items: center; width: 100%; height: 44px; cursor: pointer; }
.done input { position: absolute; opacity: 0; pointer-events: none; }
.box {
	position: relative; display: block; width: 22px; height: 22px;
	border: 2px solid var(--paper); transition: background .2s;
}
.box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.box path { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--ease) .05s; }
.done input:checked + .box { background: var(--paper); }
.done input:checked + .box path { stroke-dashoffset: 0; }
.done input:focus-visible + .box { outline: 3px solid var(--paper); outline-offset: 3px; }
tr.is-done .name { opacity: .55; }
tr.is-done .name::after { transform: scaleX(1); }
tr.is-done .n { opacity: .5; }
.board tbody tr:hover td { background: rgba(255, 255, 255, .06); }

/* Máquina de escribir */
.off { visibility: hidden; }
.caret { display: inline-block; width: .6ch; height: 1.05em; margin-left: 2px; vertical-align: -0.12em; background: currentColor; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Pie ---------- */
.foot { margin-top: 36px; text-align: center; font-size: 18px; }
.foot__note { line-height: 1.4; }
.foot__by { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.foot__by svg { display: block; height: 30px; width: auto; aspect-ratio: 734 / 312; fill: var(--paper); }
.foot__by a { display: inline-flex; text-decoration: none; }

/* ---------- Loader de bienvenida ---------- */
.loader {
	position: fixed; inset: 0; z-index: 100;
	display: none; align-items: center; justify-content: center;
	background: var(--ink);
	transition: opacity .8s ease, visibility .8s;
}
.js .loader { display: flex; }
.loader.is-out { opacity: 0; visibility: hidden; }
/* Logo y título juntos, igual que en la página: el título queda pegado bajo la P */
.loader__brand { width: min(74vw, 560px); container-type: inline-size; }
.loader__logo { display: block; width: 100%; height: auto; overflow: visible; }
.loader__logo path {
	fill: transparent; stroke: var(--paper); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
	animation: draw 1.25s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * .13s) forwards, fillin .6s ease 1.75s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill: var(--paper); stroke-width: 0; } }
.loader__title { margin: -10.5% 0 0; padding-left: 3.5%; min-height: 1.2em; font-size: clamp(11px, 3.4vw, 27px); font-size: max(10px, 4.2cqw); letter-spacing: 0; line-height: 1.1; }

/* ---------- Salpicaduras de tinta ---------- */
.ink { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; pointer-events: none; opacity: .12; filter: blur(2.5px); }
.ink.is-fade { opacity: 0; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
	.strip { grid-template-columns: 1fr; gap: 14px; }
	.strip__hint { max-width: none; font-size: 18px; }
	.strip__label { font-size: 28px; }
}

@media (max-width: 640px) {
	.top { flex-direction: column; align-items: stretch; gap: 22px; }
	.toast { max-width: none; margin-right: 14px; }
	.top__tools { margin-left: 0; justify-content: space-between; }
	.btn { padding: 0 18px; font-size: 15px; min-height: 44px; }
	.brand__title { padding-left: 2.5%; }
	.board th { height: 54px; font-size: 14px; padding: 0 8px; }
	.board th:first-child { width: 66%; }
	.board td { height: 48px; font-size: 18px; }
	.board td.prompt { padding-left: 14px; }
	.board td.prompt label { gap: 10px; }
	.done label { height: 48px; }
	.foot { font-size: 15px; }
	.foot__by svg { height: 26px; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
	.js .toast { transform: none; opacity: 1; transition: none; }
	.loader, .ink { display: none !important; }
	.caret { animation: none; }
	.bar__fill, .name::after, .box path, .toast__x { transition: none; }
}

/* Móvil: el logo del loader más pequeño; el título queda a la izquierda de la «f», sin tocarla */
@media (max-width: 640px) {
	.loader__brand { width: min(54vw, 260px); }
}

/* Móvil: la palabra PROGRESS más pequeña */
@media (max-width: 640px) {
	.strip__label { font-size: 20px; }
}

/* PROGRESS en negrita reforzada (Courier New solo trae una negrita; el trazo la hace más gruesa) */
.strip__label { font-weight: 700; -webkit-text-stroke: .7px currentColor; paint-order: stroke fill; }