/* ==================================================================
 * Land revenue glossary (3.2.0)
 *
 * Loaded only on the glossary page. Everything here is built from the
 * Court File tokens in style.css, with one addition: two inks.
 *
 * A court file carries two pens besides the typewriter: the blue ballpoint
 * of the clerk and the green ink of the gazetted officer. Blue marks an
 * entry from the Punjab list, green one from the Haryana list. Two stripes
 * side by side mean the term is in both. The colour is never the only cue:
 * every entry also carries a stamp that says so in words.
 * ================================================================ */

.glossary-page {
	--ink-pb: #1b4db3;
	--ink-hr: #146c3a;
	--on-stamp: #ffffff;
	--font-indic: "Noto Sans Gurmukhi", "Noto Sans Devanagari", "Gurmukhi MN", "Kohinoor Devanagari", "Mukta Mahee", "Nirmala UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .glossary-page {
		--ink-pb: #8fb4ff;
		--ink-hr: #6fd69c;
		--on-stamp: #111110;
	}
}

:root[data-theme="dark"] .glossary-page {
	--ink-pb: #8fb4ff;
	--ink-hr: #6fd69c;
	--on-stamp: #111110;
}

/* Masthead: the title is a sentence, not a single word, so it is set at
 * heading size rather than at the archive's poster size. */
.glossary-page .entry-title { max-width: 16ch; text-wrap: balance; }
.glossary-page .resource-detail__masthead { border-bottom: 0; padding-bottom: 0; }
.glossary-intro { max-width: 68ch; margin-top: clamp(24px, 3vw, 36px); }

.glossary { margin-top: clamp(28px, 4vw, 44px); }

/* .button and the flex rows set a display, which would otherwise beat [hidden]. */
.glossary [hidden] { display: none !important; }

/* ------------------------------------------------------------------
 * Search bar: stays under the site header while the list scrolls
 * ---------------------------------------------------------------- */
.glossary-bar {
	position: sticky;
	top: var(--header-h);
	z-index: 20;
	display: grid;
	gap: 12px;
	padding: 16px 18px;
	background: var(--sheet);
	border: var(--frame) solid var(--ink);
	box-shadow: var(--shadow);
}

.glossary-bar > *,
.glossary-filters > * { min-width: 0; }

.glossary-search { margin: 0; }
.glossary-search .label { margin-bottom: 8px; }

.glossary-search__row { display: flex; gap: 10px; }

.glossary-search input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 56px;
	padding-inline: 1rem;
	border-width: var(--frame);
	font-family: var(--font-indic);
	font-size: 1.2rem;
	font-weight: 600;
}

.glossary-search input[type="search"]:focus-visible {
	outline: 0;
	background: var(--highlighter);
	color: var(--on-highlight);
}

.glossary-search input[type="search"]:focus-visible::placeholder { color: var(--on-highlight); opacity: 0.6; }

.glossary-search__clear { box-shadow: none; min-height: 56px; }
.glossary-search__clear:hover { transform: none; box-shadow: none; background: var(--highlighter); color: var(--on-highlight); }

.glossary-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.glossary-states { display: flex; flex-wrap: wrap; gap: 8px; }

.glossary-state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 12px;
	background: var(--sheet);
	color: var(--ink);
	border: var(--cell) solid var(--ink);
	border-radius: 0;
	font-family: var(--font-type);
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.glossary-state--pb { border-left: 8px solid var(--ink-pb); }
.glossary-state--hr { border-left: 8px solid var(--ink-hr); }
.glossary-state--both { border-left: 4px solid var(--ink-pb); box-shadow: inset 4px 0 0 var(--ink-hr); }

.glossary-state__n { font-weight: 400; color: var(--muted); }

.glossary-state:hover { background: var(--highlighter); color: var(--on-highlight); }
.glossary-state:hover .glossary-state__n { color: var(--on-highlight); }

.glossary-state[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.glossary-state[aria-pressed="true"] .glossary-state__n { color: var(--ground); }

.glossary-topic { flex: 1 1 220px; max-width: 320px; margin-left: auto; }

.glossary-topic select {
	min-height: 42px;
	padding-block: 0.3rem;
	font-family: var(--font-type);
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.glossary-status {
	margin: 0;
	font-family: var(--font-type);
	font-size: var(--t-label);
	color: var(--muted);
}

/* ------------------------------------------------------------------
 * Often looked up, legend, A to Z
 * ---------------------------------------------------------------- */
.term__key {
	margin-right: 8px;
	font-family: var(--font-type);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.glossary-popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
}

.glossary-popular a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 10px;
	background: var(--sheet);
	color: var(--ink);
	border: var(--cell) solid var(--ink);
	font-size: var(--t-small);
	font-weight: 700;
	text-decoration: none;
}

.glossary-popular a:hover { background: var(--highlighter); color: var(--on-highlight); }

.glossary-legend {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--sheet);
	border: var(--cell) solid var(--ink);
}

.glossary-legend ul {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: var(--t-small);
}

.glossary-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.glossary-legend__note { max-width: 78ch; margin: 0; font-family: var(--font-read); font-size: var(--t-small); color: var(--muted); }

.is-searching .glossary-popular,
.is-searching .glossary-legend { display: none; }

.glossary-az {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 20px;
}

.glossary-az[hidden] { display: none; }

.glossary-az a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	background: var(--sheet);
	color: var(--ink);
	border: var(--cell) solid var(--ink);
	font-family: var(--font-type);
	font-weight: 700;
	text-decoration: none;
}

.glossary-az a:hover { background: var(--highlighter); color: var(--on-highlight); }

/* ------------------------------------------------------------------
 * Stamps
 * ---------------------------------------------------------------- */
.stamp {
	display: inline-block;
	padding: 3px 8px 2px;
	color: var(--on-stamp);
	font-family: var(--font-type);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.stamp--pb { background: var(--ink-pb); }
.stamp--hr { background: var(--ink-hr); }

/* ------------------------------------------------------------------
 * The list
 * ---------------------------------------------------------------- */
.glossary-list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	background: var(--sheet);
	border: var(--frame) solid var(--ink);
	box-shadow: var(--shadow);
}

.glossary-list > li + li { border-top: var(--cell) solid var(--ink); }
.glossary-list > li[hidden] { display: none; }

.glossary-letter {
	padding: 6px 18px;
	background: var(--ink);
	color: var(--ground);
	font-family: var(--font-type);
	font-weight: 700;
	letter-spacing: 0.08em;
	scroll-margin-top: calc(var(--header-h) + 230px);
}

.term {
	display: grid;
	grid-template-columns: minmax(200px, 30%) minmax(0, 1fr);
	border-left: 10px solid var(--ink);
	scroll-margin-top: calc(var(--header-h) + 230px);
}

.term--pb { border-left-color: var(--ink-pb); }
.term--hr { border-left-color: var(--ink-hr); }
.term--both { border-left: 5px solid var(--ink-pb); box-shadow: inset 5px 0 0 var(--ink-hr); }

.term:target { background: var(--quiet); }

.term__head { min-width: 0; padding: 18px 18px 18px 20px; border-right: 1px solid var(--ink); }
.term__body { min-width: 0; padding: 18px 20px; }

.term__name {
	margin: 0;
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
	font-stretch: 100%;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.term__name dfn { font-style: normal; }

.term__scripts {
	display: grid;
	gap: 2px;
	margin: 10px 0 12px;
	font-family: var(--font-indic);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.5;
}

.term__stamps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.term__meanings { margin: 0; }

.term__meaning {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
}

.term__meaning + .term__meaning { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--muted); }

.term__meaning dt {
	font-family: var(--font-type);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.term__meaning--pb dt { color: var(--ink-pb); }
.term__meaning--hr dt { color: var(--ink-hr); }

.term__meaning dd { margin: 0; font-family: var(--font-read); font-size: var(--t-read); line-height: 1.5; }

.term__printed {
	display: block;
	margin-top: 4px;
	font-family: var(--font-type);
	font-size: var(--t-label);
	line-height: 1.6;
	color: var(--muted);
}

.term__printed [lang="hi"] { font-family: var(--font-indic); font-size: 0.95rem; color: var(--ink); }

.term__aka,
.term__update,
.term__basis { margin: 12px 0 0; font-size: var(--t-small); line-height: 1.5; }

.term__update { padding: 8px 10px; background: var(--quiet); }
.term__update [lang="pa"] { font-family: var(--font-indic); font-weight: 600; }

.term__basis { color: var(--muted); font-size: var(--t-label); }

.term__topic {
	display: inline-block;
	margin-left: 4px;
	padding: 0 6px;
	border: 1px solid var(--muted);
	font-family: var(--font-type);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.term__link { margin-left: 6px; padding: 0 4px; color: var(--muted); font-family: var(--font-type); text-decoration: none; }
.term__link:hover { background: var(--highlighter); color: var(--on-highlight); }

.glossary-empty {
	margin-top: 20px;
	padding: 24px;
	background: var(--sheet);
	border: var(--cell) dashed var(--ink);
}

.glossary-empty p { margin: 0 0 8px; }
.glossary-empty p:last-child { margin-bottom: 0; }
.glossary-suggest .button--link { margin-right: 6px; }

/* ------------------------------------------------------------------
 * Sections under the list
 * ---------------------------------------------------------------- */
.glossary-section {
	margin-top: clamp(48px, 7vw, 88px);
	padding-top: clamp(24px, 3vw, 36px);
	border-top: var(--frame) solid var(--ink);
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.glossary-section h2 { max-width: 28ch; margin: 0 0 20px; font-size: var(--t-h2); line-height: 1.02; text-wrap: balance; }
.glossary-section h3 { margin: 32px 0 12px; font-size: var(--t-h3); }
.glossary-section > p { max-width: 68ch; font-family: var(--font-read); font-size: var(--t-read); }
.glossary-section .notice-strip { margin: 0 0 20px; max-width: 78ch; }
.glossary-section .notice-strip:last-child { margin: 28px 0 0; }
.glossary-caution { border-left-color: var(--red-tape); }

.glossary-notes,
.glossary-sources { max-width: 72ch; padding-left: 1.2em; font-family: var(--font-read); }

.glossary-notes li,
.glossary-sources li { margin-bottom: 8px; }

.glossary-sources a { overflow-wrap: anywhere; }

.glossary-table-wrap {
	margin-top: 24px;
	overflow-x: auto;
	background: var(--sheet);
	border: var(--frame) solid var(--ink);
	box-shadow: var(--shadow);
}

.glossary-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--t-small); }

.glossary-table th {
	padding: 10px 14px;
	background: var(--ink);
	color: var(--ground);
	font-family: var(--font-type);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.glossary-table td { padding: 10px 14px; border-top: 1px solid var(--ink); vertical-align: top; }
.glossary-table td + td { border-left: 1px solid var(--ink); }
.glossary-table [lang="pa"] { display: block; font-family: var(--font-indic); font-size: 1.05rem; font-weight: 600; }
.glossary-table__roman { display: block; font-family: var(--font-type); font-size: var(--t-label); color: var(--muted); }

/* ------------------------------------------------------------------
 * Narrow screens
 * ---------------------------------------------------------------- */
@media (max-width: 760px) {
	/* On a phone the bar would cover a third of the screen, so it scrolls away. */
	.glossary-bar { position: static; padding: 12px; gap: 10px; }
	.glossary-search .label { font-size: 0.7rem; }
	.glossary-search input[type="search"],
	.glossary-search__clear { min-height: 50px; }
	.glossary-states { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
	.glossary-state { flex: 0 0 auto; }
	.glossary-topic { max-width: none; margin-left: 0; }

	.term { grid-template-columns: minmax(0, 1fr); }
	.term__head { padding: 16px 16px 0; border-right: 0; }
	.term__body { padding: 12px 16px 16px; }
	.term__scripts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 10px; }
	.term__meaning { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.term,
	.glossary-letter { scroll-margin-top: calc(var(--header-h) + 12px); }
}

@media (max-height: 620px) {
	.glossary-bar { position: static; }
	.term,
	.glossary-letter { scroll-margin-top: calc(var(--header-h) + 12px); }
}

@media print {
	.glossary-bar,
	.glossary-popular,
	.glossary-az,
	.term__link { display: none; }
	.glossary-list,
	.glossary-table-wrap { box-shadow: none; }
	.term { break-inside: avoid; }
	.glossary .term[hidden] { display: grid !important; }
}