/* Khu vườn văn học — design tokens from explore/design/design-language.md (B5) */

@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/lora-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-vietnamese-400-italic.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--color-bg: #FBF8F1;
	--color-surface: #FFFFFF;
	--color-paper: #F4EEDF;
	--color-text: #2B2A26;
	--color-text-muted: #5E5A50;
	--color-primary: #2F5D46;
	--color-primary-hover: #244A37;
	--color-on-primary: #FFFFFF;
	--color-primary-soft: #E3EDE6;
	--color-accent: #8B5E3C;
	--color-gold: #E9D8A6;
	--color-border: #E4DCCB;
	--color-border-strong: #8F877A;
	--color-focus: #2F5D46;
	--color-danger: #A63D32;
	--color-warning: #8A6D1F;
	--color-success: #2F5D46;

	--font-serif: "Lora", "Noto Serif", Georgia, serif;
	--font-sans: "Be Vietnam Pro", "Noto Sans", system-ui, sans-serif;
	--text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem;
	--text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.9375rem;
	--text-3xl: 2.4375rem; --text-4xl: 3rem;
	--measure: 68ch;
	--poem-line-height: 1.9;

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
	--space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 96px;
	--radius-sm: 6px; --radius-md: 10px; --radius-pill: 999px;
	--container-max: 1200px;
	--gutter: 24px;

	--shadow-1: 0 1px 2px rgb(43 42 38 / 0.06), 0 1px 1px rgb(43 42 38 / 0.04);
	--shadow-2: 0 4px 12px rgb(43 42 38 / 0.08);
	--shadow-3: 0 12px 32px rgb(43 42 38 / 0.12);

	--duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms;
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
	margin: 0; background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7;
	text-rendering: optimizeLegibility; overflow-wrap: anywhere;
	/* Sticky footer: main content grows so the footer always reaches the bottom of short pages. */
	display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.3; margin: 0 0 var(--space-4); color: var(--color-text); }
h1 { font-size: var(--text-3xl); line-height: 1.2; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--color-border); }
code { font-size: var(--text-sm); background: var(--color-paper); padding: 0 var(--space-1); border-radius: 4px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-gold); border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { top: var(--space-2); color: var(--color-on-primary); }
.muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.hint { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); }
.eyebrow { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em; color: var(--color-accent); margin-bottom: var(--space-2); }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container-reading { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.page { padding-top: var(--space-6); padding-bottom: var(--space-9); }
.page-narrow { max-width: 820px; }
.section { margin-top: var(--space-8); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.section-title { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.section-head .section-title { margin: 0; }
.section-link { font-weight: 500; white-space: nowrap; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head h1 { margin-bottom: var(--space-2); }
.two-col { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
.stack { display: grid; gap: var(--space-4); }
.row-gap { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Buttons ---------- */
.btn {
	white-space: nowrap;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
	font: 500 var(--text-sm)/1 var(--font-sans); text-decoration: none; cursor: pointer;
	border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast), border-color var(--duration-fast);
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-soft); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary-soft); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-google { background: #fff; color: var(--color-text); border-color: var(--color-border-strong); gap: var(--space-3); }
.btn-google:hover { background: var(--color-paper); color: var(--color-text); }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-4) 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.btn-danger:hover { background: #8A3229; color: #fff; }
.danger-zone { border-color: #E8C4BE; }
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-base); }
.btn-sm { min-height: 36px; padding: 0 var(--space-4); }
.btn-block { width: 100%; }
.link-button { background: none; border: 0; padding: var(--space-1) 0; color: var(--color-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-danger { color: var(--color-danger); }
.inline-form { display: inline; margin: 0; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; line-height: 1.6; background: var(--color-paper); color: var(--color-text-muted); }
.badge-teacher { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-draft { background: #F6EFD9; color: var(--color-warning); }
.badge-hidden { background: #EEECE7; color: var(--color-text-muted); }
.badge-lock { background: #F3E9E0; color: var(--color-accent); }
.badge-pin { background: var(--color-gold); color: var(--color-text); }
.tag { font-size: var(--text-xs); color: var(--color-accent); margin-right: var(--space-2); }

/* ---------- Header ---------- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: var(--space-5); min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.brand-leaf { width: 28px; height: 28px; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); flex: 1; }
.nav-list { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-list a { display: block; white-space: nowrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.nav-list a:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-list a.active { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.nav-search { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin-left: auto; min-width: 44px; min-height: 44px; border-radius: var(--radius-pill); color: var(--color-text-muted); text-decoration: none; }
.nav-search:hover, .nav-search.active { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-search svg { width: 22px; height: 22px; }
.nav-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-account { display: flex; gap: var(--space-2); }
.account-menu { position: relative; }
.account-menu summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); min-height: 44px; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--color-primary-soft); }
.account-name { font-size: var(--text-sm); font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-list { position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px; list-style: none; margin: 0; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.menu-list a, .menu-button { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font: inherit; font-size: var(--text-sm); background: none; border: 0; cursor: pointer; }
.menu-list a:hover, .menu-button:hover { background: var(--color-primary-soft); }

/* ---------- Avatar & author ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: var(--text-sm); }
.avatar-lg { width: 88px; height: 88px; font-size: var(--text-2xl); }
.author-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.author-chip a { color: var(--color-text); font-weight: 500; text-decoration: none; }
.author-chip a:hover { color: var(--color-primary); text-decoration: underline; }

/* ---------- Flash & notices ---------- */
.flash-area { margin-top: var(--space-4); }
.flash-area:empty { display: none; }
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid; margin: 0 0 var(--space-3); font-size: var(--text-sm); transition: opacity var(--duration-slow); }
.flash-success { background: var(--color-primary-soft); border-color: var(--color-success); color: var(--color-primary-hover); }
.flash-error { background: #F8E7E4; border-color: var(--color-danger); color: var(--color-danger); }
.flash.fade { opacity: 0; }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.notice-draft { background: #F6EFD9; color: var(--color-warning); border: 1px solid #E8DBB2; }
.notice-lock { background: #F3E9E0; color: var(--color-accent); }

/* ---------- Hero & home ---------- */
.hero { background: linear-gradient(180deg, var(--color-paper), var(--color-bg)); border-bottom: 1px solid var(--color-border); }
.hero-inner { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-top: var(--space-8); padding-bottom: var(--space-8); align-items: center; }
.hero h1 { font-size: 2.125rem; max-width: 18ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero-art svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.grade-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grade-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-1); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
.grade-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--color-primary); }
.grade-number { font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 600; color: var(--color-primary); line-height: 1; }
.about-band { background: var(--color-paper); border-radius: var(--radius-md); padding: var(--space-6); }
.about-band p { max-width: var(--measure); margin: 0; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--color-primary-soft); color: var(--color-primary); text-decoration: none; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-paper { background: linear-gradient(135deg, var(--color-paper), var(--color-primary-soft)); flex-direction: column; gap: var(--space-1); }
.card-media-label { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 600; }
.card-media-mark { font-size: var(--text-xs); color: var(--color-accent); letter-spacing: 0.04em; }
.card-media-play { font-size: var(--text-3xl); }
.card-duration { position: absolute; right: var(--space-2); bottom: var(--space-2); background: rgb(43 42 38 / 0.8); color: #fff; font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: 4px; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.card-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.card-meta-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; }
.card-meta-link:hover, .card-meta-link:focus-visible { color: var(--color-primary); text-decoration-color: currentColor; }
.card-title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.card-title a { color: var(--color-text); text-decoration: none; }
.card-title a:hover { color: var(--color-primary); }
.card-title a::after { content: ""; }
.card-text { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { margin: auto 0 0; padding-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.card-work { background: var(--color-paper); }
.card-excerpt { font-family: var(--font-serif); font-style: italic; color: var(--color-text); font-size: var(--text-base); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-excerpt.is-poem { white-space: pre-line; }
.card-likes { float: right; color: var(--color-accent); }
.genre-label { color: var(--color-accent); font-weight: 500; }

/* ---------- Filters, tabs, pagination ---------- */
.filter-toggle { display: none; margin-bottom: var(--space-3); }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.filter-inline { background: transparent; border: 0; padding: 0; }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); min-width: 0; }
.filter-bar .field { margin-bottom: 0; }
.field-grow { flex: 1 1 240px; }
.field-actions { flex-direction: row; gap: var(--space-2); }
/* Desktop: all filter fields and the Lọc / Xóa lọc buttons share one row; dropdowns shrink instead of wrapping. */
@media (min-width: 1024px) {
	.filter-bar { flex-wrap: nowrap; }
	.filter-bar .field { flex: 1 1 130px; min-width: 0; }
	.filter-bar .field-grow { flex: 2 1 200px; }
	.filter-bar .field-actions { flex: 0 0 auto; }
	.filter-bar select { text-overflow: ellipsis; }
}
.field-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.field-check { flex-direction: row; align-items: flex-start; gap: var(--space-2); }
.field-check input { margin-top: 6px; width: 18px; height: 18px; }
label { font-size: var(--text-sm); font-weight: 500; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
	width: 100%; font: inherit; font-size: var(--text-base); color: var(--color-text); background: var(--color-surface);
	border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); min-height: 44px;
}
textarea { line-height: 1.6; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); }
.field-error { color: var(--color-danger); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.form-errors { background: #F8E7E4; color: var(--color-danger); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.form-errors p { margin: 0; }
.result-count { color: var(--color-text-muted); font-size: var(--text-sm); }
.filter-region { transition: opacity var(--duration-fast) var(--ease-out); scroll-margin-top: 80px; }
.filter-region.htmx-request { opacity: 0.6; }
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); }
.tabs a { padding: var(--space-2) var(--space-4); text-decoration: none; color: var(--color-text-muted); font-weight: 500; font-size: var(--text-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--color-primary); }
.tabs a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tabs-scroll { overflow-x: auto; scrollbar-width: thin; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); }
.pagination a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; background: var(--color-surface); }
.pagination a.current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

/* ---------- Empty / skeleton ---------- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.empty-state svg { width: 48px; height: 48px; color: var(--color-accent); margin-bottom: var(--space-2); }
.empty-state p { margin-bottom: var(--space-3); }
.skeleton-card { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); max-width: 360px; }
.skeleton-card span { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--color-paper), #fff, var(--color-paper)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton-card span:first-child { height: 120px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Reader (lessons) ---------- */
.breadcrumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumbs a { color: var(--color-text-muted); }
.reader-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.reader { max-width: var(--measure); min-width: 0; }
.reader-head { margin-bottom: var(--space-5); }
.reader-meta, .book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.reader-actions, .book-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }
.toc-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.toc-box summary { font-family: var(--font-serif); font-weight: 600; cursor: pointer; }
.toc-box ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.toc-box li { margin-bottom: var(--space-1); }
.toc-sub { margin-left: var(--space-4); list-style: circle; }
.objectives { background: var(--color-primary-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.objectives h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.objectives ul { margin: 0; padding-left: var(--space-5); }
.prose { line-height: 1.7; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-7); scroll-margin-top: 90px; }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-5); scroll-margin-top: 90px; }
.prose blockquote { margin: var(--space-5) 0; padding: var(--space-2) var(--space-5); border-left: 3px solid var(--color-accent); font-family: var(--font-serif); font-style: italic; color: var(--color-text); background: var(--color-paper); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--text-sm); display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.prose th { background: var(--color-paper); }
.prose img { border-radius: var(--radius-md); }
.attachments { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.attachments h2, .attachments-editor h2 { font-size: var(--text-lg); }

/* ---------- Video ---------- */
.video-player { position: relative; aspect-ratio: 16 / 9; background: #1d1c19; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-5); }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-missing { display: flex; align-items: center; justify-content: center; text-align: center; color: #f4eedf; padding: var(--space-5); background: linear-gradient(135deg, #2F5D46, #244A37); }
.video-missing p { margin: 0; max-width: 40ch; }
.summary-box { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-5); max-width: var(--measure); }
.summary-box h2 { font-size: var(--text-lg); }

/* ---------- Book (works) ---------- */
.book { max-width: calc(var(--measure) - 12ch); margin: var(--space-6) auto; padding: var(--space-7) var(--space-6); background: var(--color-paper); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.book-head { text-align: center; }
.book-head .book-meta { justify-content: center; }
.book-desc { color: var(--color-text-muted); font-style: italic; margin-top: var(--space-3); }
.book-rule { width: 64px; margin: var(--space-5) auto; border-top: 1px solid var(--color-accent); }
.poem { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--poem-line-height); white-space: pre-wrap; padding-left: 1.5em; text-indent: -1.5em; max-width: 40ch; margin: 0 auto; }
.book-prose { font-family: var(--font-serif); font-size: var(--text-lg); }
.book-actions { justify-content: center; }
.poem-input { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--poem-line-height); white-space: pre-wrap; }

/* ---------- Discussion ---------- */
.thread { margin-top: var(--space-8); max-width: var(--measure); }
.thread h2 { font-size: var(--text-xl); }
.thread-invite { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; background: var(--color-paper); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.thread-invite p { margin: 0; }
.thread-closed { color: var(--color-text-muted); font-size: var(--text-sm); }
.comment-form { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.comment-form button { justify-self: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comments, .replies { list-style: none; margin: 0; padding: 0; }
.comment { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); scroll-margin-top: 90px; }
.comment.is-pinned > .comment-body { background: #FBF6E6; border-radius: var(--radius-sm); padding: var(--space-3); }
.replies { margin-left: var(--space-6); margin-top: var(--space-3); border-left: 2px solid var(--color-border); padding-left: var(--space-4); }
.replies .comment { border-top: 0; padding: var(--space-2) 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.comment-text { white-space: pre-line; margin: var(--space-2) 0; }
.comment-deleted { color: var(--color-text-muted); font-style: italic; }
.comment-edited { font-size: var(--text-xs); }
.comment-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.reply-form { margin: var(--space-3) 0 0 var(--space-6); }
.report summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.report summary::-webkit-details-marker { display: none; }
.report-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-width: 260px; }
.report-form button { justify-self: start; }

/* ---------- Forum ---------- */
.topic-list { list-style: none; margin: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.topic-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
.topic-row:first-child { border-top: 0; }
.topic-main { min-width: 0; flex: 1 1 320px; }
.topic-title { font-size: var(--text-lg); margin: 0; }
.topic-title a { color: var(--color-text); text-decoration: none; }
.topic-title a:hover { color: var(--color-primary); }
.topic-flags { margin: 0; display: flex; gap: var(--space-2); }
.topic-flags:empty { display: none; }
.topic-tags { margin: var(--space-1) 0 0; }
.topic-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; align-items: center; }
.topic-count { font-weight: 600; color: var(--color-accent); }
.topic-content { white-space: pre-line; font-size: var(--text-base); }
.admin-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }

/* ---------- Search ---------- */
.search-form { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); max-width: 720px; }
.search-group { margin-top: var(--space-6); }
.search-group h2 { font-size: var(--text-lg); }
.hit-list { list-style: none; margin: 0; padding: 0; }
.hit-list li { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.hit-list a { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); text-decoration: none; }
.hit-meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.hit-list p { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Editor ---------- */
.editor-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.editor-status { color: var(--color-text-muted); font-size: var(--text-sm); }
.editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); }
.rich-editor { min-height: 320px; background: var(--color-surface); font-size: var(--text-base); }
.ql-toolbar.ql-snow { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-color: var(--color-border-strong); font-family: var(--font-sans); }
.ql-container.ql-snow { border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-color: var(--color-border-strong); font-family: var(--font-sans); font-size: var(--text-base); }
.ql-editor { min-height: 300px; line-height: 1.7; }
.ql-snow .ql-table { width: auto; padding: 0 6px; font-size: var(--text-xs); }
.attachments-editor { margin-top: var(--space-6); }
.attachments-editor ul { padding-left: var(--space-5); }
.upload-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.upload-form label { flex-basis: 100%; }

/* ---------- Auth & account ---------- */
.page-auth { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 460px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-1); }
.profile-head { display: flex; gap: var(--space-5); align-items: center; margin-bottom: var(--space-6); flex-wrap: wrap; }
.profile-head h1 { margin-bottom: var(--space-1); }
.simple-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.simple-list li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }

/* ---------- Tables & admin ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.data-table th, .data-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.data-table th { background: var(--color-paper); font-weight: 600; }
.data-table td.actions { white-space: nowrap; }
.data-table td.actions .inline-form + .inline-form { margin-left: var(--space-3); }
.data-table p { margin: 0; }
.row-muted td { color: var(--color-text-muted); background: #FAF8F3; }
.admin-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.admin-main { min-width: 0; }
.admin-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); align-content: flex-start; }
.admin-nav-title { width: 100%; font-family: var(--font-serif); font-weight: 600; margin: 0 0 var(--space-2); }
.admin-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); }
.admin-nav a:hover { background: var(--color-primary-soft); }
.admin-nav a.active { background: var(--color-primary); color: var(--color-on-primary); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat { display: flex; flex-direction: column; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); }
.stat-value { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--color-primary); font-weight: 600; }
.role-form { display: flex; gap: var(--space-2); align-items: center; }
.role-form select { min-width: 140px; min-height: 36px; padding: 0 var(--space-2); }
.catalogue-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.panel h2 { font-size: var(--text-lg); }
.inline-add { display: grid; gap: var(--space-2); }
.inline-add-wide { grid-template-columns: 1fr; }
.inline-add-wide .field { margin: 0; }
.check { display: flex; gap: var(--space-2); align-items: center; font-weight: 400; }

/* ---------- Error, dev ---------- */
.error-page { text-align: center; max-width: 640px; }
.error-code { font-family: var(--font-serif); font-size: 4.5rem; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-4); }
.error-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.diacritics-serif { font-family: var(--font-serif); font-size: var(--text-xl); }
.diacritics-sans { font-size: var(--text-lg); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch { display: inline-flex; align-items: flex-end; width: 96px; height: 64px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); border: 1px solid var(--color-border); }
.sw-bg { background: var(--color-bg); } .sw-paper { background: var(--color-paper); }
.sw-primary { background: var(--color-primary); color: #fff; } .sw-accent { background: var(--color-accent); color: #fff; }
.sw-gold { background: var(--color-gold); } .sw-danger { background: var(--color-danger); color: #fff; }

/* ---------- Footer ---------- */
body > main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; margin-top: var(--space-9); background: var(--color-primary-hover); color: #EDE6D3; padding: var(--space-7) 0; }
.footer-inner { display: grid; gap: var(--space-3); }
.footer-brand { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 600; color: #fff; margin: 0; }
.footer-tagline { margin: 0; font-style: italic; font-family: var(--font-serif); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer a { color: #EDE6D3; font-size: var(--text-sm); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--color-gold); }
.label-short { display: none; }

/* Phones: hero buttons share one row; footer links on one row with short labels. */
@media (max-width: 600px) {
	.hero-actions { flex-wrap: nowrap; gap: var(--space-2); }
	.hero-actions .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 var(--space-2); font-size: var(--text-sm); white-space: normal; text-align: center; line-height: 1.25; }
	.site-footer nav { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-3); }
	.site-footer nav a { white-space: nowrap; }
	.site-footer .label-long { display: none; }
	.site-footer .label-short { display: inline; }
}
@media (max-width: 420px) {
	.site-footer nav { gap: var(--space-2); }
	.site-footer nav a { font-size: var(--text-xs); }
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
	.field-row { grid-template-columns: 1fr 1fr; }
	.inline-add-wide { grid-template-columns: 1fr 1fr 2fr 100px auto; align-items: end; }
}
@media (min-width: 1024px) {
	.card-grid { grid-template-columns: repeat(3, 1fr); }
	.hero-inner { grid-template-columns: 3fr 2fr; }
	.hero h1 { font-size: var(--text-4xl); }
	.two-col { grid-template-columns: 1fr 1fr; }
	.reader-layout { grid-template-columns: 240px minmax(0, 1fr); }
	.toc { position: sticky; top: 90px; align-self: start; }
	.admin-layout { grid-template-columns: 220px minmax(0, 1fr); }
	.admin-nav { flex-direction: column; flex-wrap: nowrap; }
	.catalogue-grid { grid-template-columns: 1fr 1fr; }
	.panel-wide { grid-column: 1 / -1; }
}
/* Mid widths: tighter spacing keeps the header on one row. */
@media (min-width: 1101px) and (max-width: 1279px) {
	.header-inner { gap: var(--space-4); }
	.site-nav { gap: var(--space-3); }
	.nav-list a { padding: var(--space-2); }
}
/* Below 1100px the navigation moves into the menu panel (hamburger). */
@media (max-width: 1100px) {
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-nav { display: none; position: fixed; inset: 68px 0 0 0; background: var(--color-surface); flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-5) var(--gutter); overflow-y: auto; box-shadow: var(--shadow-3); }
	.site-nav.open { display: flex; animation: slideIn var(--duration-slow) var(--ease-out); }
	.nav-list { flex-direction: column; }
	.nav-list a { padding: var(--space-3) var(--space-2); font-size: var(--text-base); }
	.nav-list a.active { box-shadow: inset 3px 0 0 var(--color-primary); }
	.nav-search { margin-left: 0; justify-content: flex-start; padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); font-weight: 500; color: var(--color-text); }
	.nav-search-label { position: static; width: auto; height: auto; clip: auto; }
	.account-menu summary { padding-left: 0; }
	.menu-list { position: static; box-shadow: none; border: 0; padding: 0; }
	body.nav-open { overflow: hidden; }
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
	:root { --gutter: 16px; }
	h1 { font-size: var(--text-2xl); }
	.hero h1 { font-size: 2.125rem; }
	.filter-toggle { display: inline-flex; }
	.filter-bar[data-filter-panel] { display: none; }
	.filter-bar[data-filter-panel].open { display: flex; }
	.filter-bar .field { flex: 1 1 100%; }
	.book { padding: var(--space-6) var(--space-4); margin: var(--space-4) var(--gutter); }
	.poem { font-size: var(--text-base); }
	.replies { margin-left: var(--space-3); }
	.reply-form { margin-left: var(--space-3); }
	.grade-shortcuts { gap: var(--space-2); }
	.grade-card { padding: var(--space-4) var(--space-2); }
	.search-form { flex-direction: column; }
}