/**
 * Classica Sinica Medica — component layer.
 * Theme.json owns the tokens (palette, fonts, sizes, spacing, layout);
 * this file owns the components the core blocks do not provide.
 */

:root {
	--csm-paper:    var(--wp--preset--color--paper,   #FBF8F1);
	--csm-paper-2:  var(--wp--preset--color--paper-2, #F3EDDF);
	--csm-paper-3:  var(--wp--preset--color--paper-3, #EFE7D6);
	--csm-ink:      var(--wp--preset--color--ink,     #1F1D19);
	--csm-ink-2:    var(--wp--preset--color--ink-2,   #4A463D);
	--csm-ink-3:    var(--wp--preset--color--ink-3,   #7C766A);
	--csm-cinnabar: var(--wp--preset--color--cinnabar,#9E2B25);
	--csm-stone:    var(--wp--preset--color--stone,   #2F5D62);
	--csm-bamboo:   var(--wp--preset--color--bamboo,  #5C7A4A);
	--csm-line:     var(--wp--preset--color--line,    #DED5C2);
	--csm-han:      var(--wp--preset--font-family--han,   "Noto Serif SC", serif);
	--csm-serif:    var(--wp--preset--font-family--serif, Georgia, serif);
	--csm-sans:     var(--wp--preset--font-family--sans,  system-ui, sans-serif);
}

/* ---------- shell ---------- */
body {
	-webkit-font-smoothing: antialiased;
}
.csm-wrap {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 28px;
}

/* ---------- header / footer ---------- */
.csm-seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 3px;
	background: var(--csm-cinnabar);
	color: var(--csm-paper);
	font-family: var(--csm-han);
	font-size: 17px;
	font-weight: 600;
	flex: none;
}
.csm-brandline {
	display: flex;
	align-items: center;
	gap: 11px;
}
.csm-brand-sub {
	display: block;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--csm-ink-3);
	font-weight: 500;
}
.csm-disclaimer {
	margin-top: 24px;
	background: #fff;
	border: 1px solid var(--csm-line);
	border-radius: 4px;
	padding: 14px 18px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--csm-ink-3);
}

/* ---------- crumbs ---------- */
.csm-crumbs {
	background: var(--csm-paper-2);
	border-bottom: 1px solid var(--csm-line);
	font-size: 13px;
	color: var(--csm-ink-3);
	padding: 13px 0;
}
.csm-crumbs a:hover { color: var(--csm-cinnabar); }
.csm-crumbs .sep { color: var(--csm-line); margin: 0 8px; }

/* ---------- generic blocks ---------- */
.csm-label {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--csm-ink-3);
	font-weight: 600;
	margin: 0 0 8px;
}
.csm-card {
	background: #fff;
	border: 1px solid var(--csm-line);
	border-radius: 4px;
	padding: 15px 17px;
}
.csm-card--accent {
	border-left: 3px solid var(--csm-cinnabar);
	border-radius: 0 4px 4px 0;
}
.csm-note {
	background: #fff;
	border: 1px solid var(--csm-line);
	border-left: 3px solid var(--csm-bamboo);
	border-radius: 0 4px 4px 0;
	padding: 15px 20px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--csm-ink-2);
}
.csm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.csm-chip {
	font-size: 12px;
	background: #fff;
	border: 1px solid var(--csm-line);
	border-radius: 20px;
	padding: 4px 13px;
	color: var(--csm-ink-2);
	line-height: 1.5;
}
.csm-chip:hover { border-color: var(--csm-cinnabar); color: var(--csm-cinnabar); }
.csm-chip--core {
	background: #E2EDEC;
	border-color: rgba(47, 93, 98, .35);
	color: var(--csm-stone);
	font-weight: 500;
}

/* ---------- definition list (meta) ---------- */
.csm-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 12px;
	font-size: 13px;
	margin: 0;
}
.csm-meta dt { color: var(--csm-ink-3); }
.csm-meta dd { margin: 0; color: var(--csm-ink-2); }
.csm-meta .han { font-family: var(--csm-han); }

/* ---------- table ---------- */
.csm-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--csm-line);
	border-radius: 4px;
	overflow: hidden;
	font-size: 13.5px;
}
.csm-table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--csm-ink-3);
	font-weight: 600;
	padding: 11px 16px;
	background: var(--csm-paper-2);
	border-bottom: 1px solid var(--csm-line);
}
.csm-table td {
	padding: 13px 16px;
	border-bottom: 1px solid #F0EADD;
	color: var(--csm-ink-2);
	vertical-align: top;
}
.csm-table tr:last-child td { border-bottom: none; }
.csm-table .work { font-family: var(--csm-serif); font-weight: 600; color: var(--csm-ink); }

/* ---------- glyph box (glossary head) ---------- */
.csm-glyph {
	width: 132px;
	height: 132px;
	background: #fff;
	border: 1px solid var(--csm-line);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}
.csm-glyph::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(199, 188, 164, .55);
	border-radius: 2px;
}
.csm-glyph .zh { font-family: var(--csm-han); font-size: 60px; font-weight: 600; line-height: 1; }
.csm-glyph .alt { font-size: 11.5px; color: var(--csm-ink-3); margin-top: 7px; }

/* ---------- prev / next ---------- */
.csm-pn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.csm-pn > * {
	background: #fff;
	border: 1px solid var(--csm-line);
	border-radius: 4px;
	padding: 16px 20px;
}
.csm-pn .lbl {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--csm-ink-3);
	font-weight: 600;
	margin-bottom: 6px;
}
.csm-pn .t { font-family: var(--csm-serif); font-size: 17px; font-weight: 600; }
.csm-pn .t .han { font-family: var(--csm-han); font-size: 15px; color: var(--csm-ink-3); margin-left: 6px; }

/* ---------- pending marker ---------- */
.csm-pending {
	font-size: 10.5px;
	background: var(--csm-paper-3);
	color: var(--csm-ink-3);
	border-radius: 2px;
	padding: 1px 6px;
	white-space: nowrap;
}

/* ---------- Chinese text defaults ---------- */
.csm-zh-inline { font-family: var(--csm-han); }
.csm-py { letter-spacing: .03em; color: var(--csm-ink-3); }

/* ---------- sticky header ---------- */
.csm-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 248, 241, .94);
	backdrop-filter: saturate(160%) blur(8px);
}
.csm-site-header > div > div { min-height: 66px; }
.admin-bar .csm-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .csm-site-header { top: 46px; } }

/* ---------- chapter title ---------- */
.csm-chapter-zh {
	font-family: var(--csm-han);
	font-size: 38px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.25;
	color: var(--csm-ink);
}
@media (max-width: 820px) { .csm-chapter-zh { font-size: 30px; } }

/* ---------- senses list (glossary) ---------- */
.csm-sense-list {
	border: 1px solid var(--csm-line);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.csm-sense {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	padding: 15px 20px;
	border-bottom: 1px solid #F0EADD;
}
.csm-sense:last-child { border-bottom: 0; }
.csm-sense-n {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--csm-paper-2);
	border: 1px solid var(--csm-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csm-ink-2);
}
.csm-sense-t { font-family: var(--csm-serif); font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.csm-sense-d { font-size: 13.5px; color: var(--csm-ink-2); line-height: 1.65; }
.csm-sense-x { font-size: 13px; color: var(--csm-ink-3); margin-top: 6px; font-family: var(--csm-han); }

/* ---------- compounds grid (glossary) ---------- */
.csm-comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
.csm-comp {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 13px;
	padding: 12px 2px;
	border-bottom: 1px solid #F0EADD;
	align-items: baseline;
}
.csm-comp-z { font-family: var(--csm-han); font-size: 21px; font-weight: 600; min-width: 44px; }
.csm-comp-p { font-size: 11.5px; color: var(--csm-ink-3); }
.csm-comp-e { font-family: var(--csm-serif); font-size: 15.5px; font-weight: 600; margin: 1px 0 2px; }
.csm-comp-d { font-size: 12.5px; color: var(--csm-ink-3); line-height: 1.55; }

@media (max-width: 1000px) {
	.csm-term-head { grid-template-columns: auto 1fr !important; }
	.csm-comp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
	.csm-pn { grid-template-columns: 1fr; }
	.csm-wrap { padding-inline: 20px; }
}
@media (max-width: 600px) {
	.csm-term-head { grid-template-columns: 1fr !important; gap: 20px !important; }
	.csm-glyph { width: 104px; height: 104px; }
	.csm-glyph .zh { font-size: 48px; }
	.csm-comp-grid { grid-template-columns: 1fr; }
}