/* TrueStudy — The Card Box
   A Leitner card box on a desk: cream card stock on manila ground, carbon ink,
   one divider-tab red. Typewriter labels (self-hosted Courier Prime), system body. */

@font-face {
	font-family: "Courier Prime";
	src: url("/assets/fonts/courier-prime-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Courier Prime";
	src: url("/assets/fonts/courier-prime-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;
	--desk: #e9e6dc;
	--card: #faf8f3;
	--ink: #26221c;
	--ink-soft: #6f6759;
	--line: #d9d3c4;
	--rule-blue: rgba(58, 90, 201, 0.20);
	--rule-red: rgba(185, 80, 46, 0.40);
	--accent: #b9502e;
	--accent-deep: #9c3f20;
	--olive: #66753f;
	--shadow-lift: 0 1px 2px rgba(38, 34, 28, 0.10), 0 10px 24px -14px rgba(38, 34, 28, 0.45);
	--shadow-rest: 0 1px 0 rgba(38, 34, 28, 0.06), 0 4px 14px -10px rgba(38, 34, 28, 0.35);
	--type: "Courier Prime", "Courier New", monospace;
	--body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }

body {
	font: 15px/1.55 var(--body);
	background: var(--desk);
	color: var(--ink);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	caret-color: var(--accent);
}

::selection { background: var(--accent); color: var(--card); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: #b6ad99 var(--desk); }

a { color: var(--accent-deep); text-underline-offset: 3px; }
h1, h2, h3, .type { font-family: var(--type); }
.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }
.err {
	color: var(--accent-deep);
	background: rgba(185, 80, 46, 0.08);
	border: 1px solid var(--accent);
	padding: 8px 12px;
	margin: 10px 0;
}
.num { font-variant-numeric: tabular-nums; }

/* ---- box lid ---- */
.lid {
	background: var(--ink);
	color: var(--card);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
}
.wordmark {
	font: 700 1.05rem/1 var(--type);
	letter-spacing: 0.14em;
	color: var(--card);
	text-decoration: none;
}
.wordmark .mark { color: #e8b04b; margin-right: 0.35em; }
.lid-meta {
	font: 400 0.78rem/1 var(--type);
	color: #a49a88;
	letter-spacing: 0.08em;
}

/* ---- divider-tab navigation ---- */
.tabs {
	width: min(1060px, 94vw);
	margin: 26px auto 0;
	display: flex;
	gap: 6px;
	padding: 0 14px;
}
.tabs a {
	font: 700 0.82rem/1 var(--type);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	color: var(--ink-soft);
	background: #dfdbcd;
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: 7px 7px 0 0;
	padding: 9px 18px 7px;
	transform: translateY(2px);
	transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s;
}
.tabs a:hover { transform: translateY(0); background: var(--card); color: var(--ink); }
.tabs a[aria-current="page"] {
	background: var(--card);
	color: var(--ink);
	transform: translateY(0);
	border-color: #cfc8b6;
	box-shadow: 0 -3px 8px -6px rgba(38, 34, 28, 0.35);
}
.tabs a[data-accent][aria-current="page"] { color: var(--accent-deep); }

/* ---- ground wrap ---- */
.wrap {
	width: min(1060px, 94vw);
	margin: 0 auto 34px;
	flex: 1;
	border: 1px solid #cfc8b6;
	border-radius: 0 10px 10px 10px;
	background: var(--card);
	box-shadow: var(--shadow-rest);
	padding: 26px 28px 30px;
}
.wrap.narrow { width: min(660px, 94vw); }

/* ---- cards ---- */
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 18px 22px;
	margin-bottom: 18px;
	box-shadow: var(--shadow-rest);
}
.card:last-child { margin-bottom: 0; }

h1 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 4px;
}
h2 {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-soft);
	margin-bottom: 12px;
}

/* index-card ruled texture (red margin + blue rules) */
.ruled {
	background:
		linear-gradient(90deg, transparent 0 2.1em, var(--rule-red) 2.1em calc(2.1em + 1px), transparent calc(2.1em + 1px)),
		repeating-linear-gradient(to bottom, transparent 0 calc(1.75em - 1px), var(--rule-blue) calc(1.75em - 1px) 1.75em),
		var(--card);
}

/* ---- stamps (buttons & state marks) ---- */
.stamp {
	display: inline-block;
	font: 700 0.85rem/1 var(--type);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent-deep);
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 3px;
	padding: 9px 16px 8px;
	cursor: pointer;
	text-decoration: none;
	transform: rotate(-1deg);
	transition: background 0.15s, color 0.15s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.stamp:hover { background: var(--accent-deep); color: var(--card); transform: rotate(-1deg) translateY(-1px); }
.stamp:active { transform: rotate(-1deg) translateY(0); }
.stamp.big { font-size: 1.05rem; padding: 13px 26px 12px; }
.stamp.small { font-size: 0.72rem; padding: 6px 10px 5px; border-width: 1.5px; letter-spacing: 0.1em; }
.stamp.filled { background: var(--accent-deep); color: var(--card); }
.stamp.filled:hover { background: var(--ink); border-color: var(--ink); }
.stamp.olive { color: var(--olive); }
.stamp.olive:hover { background: var(--olive); color: var(--card); }
.stamp.ghost { color: var(--ink-soft); }
.stamp.ghost:hover { background: var(--ink-soft); color: var(--card); }
.stamp[disabled] { opacity: 0.45; cursor: default; }
.stamp[disabled]:hover { background: transparent; color: var(--accent-deep); transform: rotate(-1deg); }

.mark-badge {
	display: inline-block;
	font: 700 0.68rem/1 var(--type);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	padding: 3px 7px 2px;
	transform: rotate(-2deg);
}
.mark-badge.due { color: var(--accent-deep); }
.mark-badge.done { color: var(--olive); }
.mark-badge.plain { color: var(--ink-soft); border-style: dashed; }

button[type="submit"] { margin-top: 10px; }
.linklike {
	background: none;
	border: 0;
	color: var(--ink-soft);
	cursor: pointer;
	font: 400 0.85rem var(--body);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0;
}
.linklike:hover { color: var(--ink); }
.linklike.danger:hover { color: var(--accent-deep); }
.inline { display: inline; }

/* ---- forms: writing on the card ---- */
input, textarea {
	width: 100%;
	padding: 7px 2px;
	border: 0;
	border-bottom: 1.5px solid var(--line);
	background: transparent;
	color: var(--ink);
	font: 400 0.95rem var(--body);
	margin-top: 4px;
	transition: border-color 0.15s;
}
input:focus, textarea:focus {
	outline: none;
	border-bottom-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: #9a9284; }
textarea { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); padding: 9px 10px; font-family: var(--body); }
label { display: block; margin-bottom: 12px; font: 700 0.78rem var(--type); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
label input, label textarea { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.rowform { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rowform input { flex: 1; min-width: 170px; margin-top: 0; }
.rowform button { margin-top: 0; }

/* ---- dashboard: the box face-on ---- */
.boxgrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: stretch; }
.boxgrid > .card { margin-bottom: 18px; }
.duecard {
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 20px 24px 20px 3em;
	transform: rotate(-1.1deg);
	box-shadow: var(--shadow-lift);
	margin: 14px 6px 18px 0;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.duecard:hover { transform: rotate(-1.1deg) translateY(-3px); box-shadow: 0 2px 3px rgba(38,34,28,0.10), 0 18px 34px -16px rgba(38,34,28,0.5); }
.duecount { font: 700 2.5rem/1 var(--type); letter-spacing: -0.01em; }
.duecount .num { font-variant-numeric: tabular-nums; }
.dueline { font: 400 0.8rem/1.75 var(--body); color: var(--ink-soft); }
.todayempty { margin: 16px 0 20px; color: var(--ink-soft); }

.focusrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#pomo-time { font: 700 2rem/1 var(--type); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
#pomo-phase { font: 400 0.78rem var(--type); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
#pomo-phase.running { color: var(--accent-deep); }
.pomowidget { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

.weekrail { display: flex; gap: 8px; align-items: flex-end; height: 74px; margin-top: 16px; }
.barcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.bar { width: 100%; min-height: 2px; background: var(--ink); opacity: 0.85; border-radius: 1px; }
.bar.zero { min-height: 6px; background: var(--line); opacity: 1; }
.barlabel { font: 400 0.68rem var(--type); color: var(--ink-soft); }

/* decks as box dividers */
.decklist { list-style: none; padding: 0; }
.decklist li { border-bottom: 1px solid var(--line); }
.decklist li:last-child { border-bottom: 0; }
.decklist a { text-decoration: none; }
.deckrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 6px;
	transition: background 0.15s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.deckrow:hover { background: #f2efe6; transform: translateX(3px); }
.deckname { font: 700 1rem var(--type); color: var(--ink); }
.deckmeta { font: 400 0.78rem var(--type); color: var(--ink-soft); white-space: nowrap; }
.deckrow .linklike { margin-left: 4px; }

/* tape-deck strip */
.tape {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: var(--ink);
	color: #cfc8b8;
	border-radius: 3px;
	padding: 12px 18px;
}
.tape .type { font: 700 0.85rem var(--type); letter-spacing: 0.1em; color: var(--card); }
.tape a { color: #e8b04b; font: 400 0.8rem var(--type); text-decoration: none; }
.tape a:hover { text-decoration: underline; }

/* ---- review: the card that lifts out ---- */
#review-card { min-height: 260px; display: flex; flex-direction: column; }
#review-content { flex: 1; }
#review-content .front {
	font: 400 1.35rem/1.75 var(--body);
	margin: 6px 0 18px;
}
#review-content .back {
	font: 400 1.1rem/1.6 var(--body);
	border-top: 1.5px solid var(--rule-red);
	margin-top: 14px;
	padding-top: 14px;
	animation: cardlift 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardlift {
	from { transform: translateY(10px) rotate(-0.6deg); opacity: 0.4; box-shadow: 0 14px 20px -14px rgba(38,34,28,0.5); }
	to { transform: none; opacity: 1; }
}
.grades { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.grade-btn {
	flex: 1;
	min-width: 86px;
	font: 700 0.8rem/1 var(--type);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 3px;
	padding: 11px 8px 10px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.grade-again { color: var(--accent-deep); }
.grade-hard { color: #8a5a22; }
.grade-good { color: var(--ink); }
.grade-easy { color: var(--olive); }
.grade-btn:hover { background: var(--ink-soft); color: var(--card); }

/* ---- radio ---- */
#player { width: 100%; margin: 12px 0 14px; }
#nowplaying { font: 400 0.82rem var(--type); letter-spacing: 0.06em; }
.track.current { font-weight: 700; }
.track { font: 400 0.92rem var(--type); }

/* ---- auth: one card on the desk ---- */
.authwrap { flex: 1; display: grid; place-items: center; padding: 48px 0 32px; }
.auth { width: min(430px, 92vw); padding: 30px 32px 26px; }
.auth h1 { text-align: center; font-size: 1.25rem; letter-spacing: 0.16em; }
.auth h1 .mark { color: #e8b04b; margin-right: 0.3em; }
.auth form { margin-top: 18px; }
.auth button[type="submit"] { width: 100%; text-align: center; }
.auth .footline { text-align: center; margin-top: 16px; }

/* ---- page heads ---- */
.pagehead { margin-bottom: 22px; }
.pagehead h1 { margin-bottom: 2px; }
.pagehead p { color: var(--ink-soft); }

/* ---- footer ---- */
.boxfoot {
	width: min(1060px, 94vw);
	margin: 0 auto 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.footnote { font: 400 0.72rem var(--type); color: #968d7b; letter-spacing: 0.06em; }
.footmeta { display: flex; align-items: center; gap: 14px; }
a.sync {
	font: 400 0.68rem/1 var(--type);
	color: #a89f8c;
	text-decoration: none;
	letter-spacing: 0.22em;
}
a.sync:hover { color: var(--ink); }

/* ---- empty states ---- */
.empty {
	font: 400 0.92rem/1.75 var(--body);
	color: var(--ink-soft);
	padding: 10px 0 16px;
}

/* ---- responsive ---- */
@media (max-width: 820px) {
	.boxgrid { grid-template-columns: 1fr; }
	.wrap, .wrap.narrow { padding: 20px 18px 24px; }
	.tabs { padding: 0 6px; overflow-x: auto; }
	.tabs a { white-space: nowrap; }
	.duecard { margin-right: 0; }
	.lid { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}