/* ============================================================
   DXCC · ARI Rivarolo — restyle of dxcc-console in ARI palette
   Adapted by IW1GEU FOR IQ1GP.
   Original code from https://github.com/audric/dxcc-console
   ============================================================ */

:root {
	--bg:           #D6E7F2;
	--panel:        #ffffff;
	--panel-hi:     #eef5fa;
	--border:       #cfe0ee;
	--border-hi:    #b4cce0;
	--ink:          #33475c;
	--ink-soft:     #5a7289;
	--ink-mute:     #7a8b9a;
	--ink-dim:      #a3b1bf;
	--accent:       #004086;
	--accent-hi:    #002a5c;
	--accent-soft:  #e6eef7;
	--ok:           #2a7547;
	--ok-soft:      #e7f3ec;
	--err:          #b13a3a;
	--err-soft:     #fbe9e9;
	--font:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono:         ui-monospace, "SFMono-Regular", "Consolas", monospace;

	--c-AF: #e8a04c;
	--c-AN: #89c4ff;
	--c-AS: #e36ec9;
	--c-EU: #6fc8c8;
	--c-NA: #d7d35a;
	--c-OC: #7ad66a;
	--c-SA: #ff947a;
}

/* ---------- Page-scope baseline (don't touch site-wide body)
   Shared site stylesheet already styles body/main; we only style
   the DXCC content area. ---------- */
main {
	background: var(--bg);
}

.hero, .lookup, .tabs, .panel, .drawer {
	font-family: var(--font);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
}

.hero h1, .hero h2,
.lookup h1, .lookup h2,
.panel h1, .panel h2, .panel h3,
.drawer h2, .drawer h3 {
	font-family: var(--font);
	color: var(--accent);
	margin: 0 0 0.4em;
	font-weight: 700;
}

.hero p, .lookup p, .panel p {
	margin: 0 0 0.8em;
	color: var(--ink);
}

.hero a, .lookup a, .panel a, .drawer a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hero a:hover, .lookup a:hover, .panel a:hover, .drawer a:hover {
	color: var(--accent-hi);
}

.hero code, .lookup code, .panel code, .drawer code {
	font-family: var(--mono);
	font-size: 0.9em;
	background: var(--panel-hi);
	border: 1px solid var(--border);
	padding: 0.05em 0.4em;
	border-radius: 3px;
	color: var(--accent);
}

.hero em, .lookup em, .panel em, .drawer em {
	font-style: italic;
	color: var(--ink-mute);
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.muted { color: var(--ink-mute); }

/* ---------- Container helper ---------- */
.hero .container,
.lookup .container,
.panel .container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1em;
}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */

.hero {
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	padding: 1.2em 0 2em;
}

.hero__bar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.8em;
}

.hero__eyebrow {
	font-size: 0.72em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 600;
	margin-bottom: 0.6em;
}

.hero__title {
	font-size: 2.6em;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.06em;
	margin: 0 0 0.4em;
	line-height: 1;
}
.hero__title span {
	color: var(--ink-mute);
	margin: 0 0.1em;
	font-weight: 400;
}

.hero__sub {
	font-size: 1em;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0 0 1.4em;
}
.hero__sub b {
	color: var(--accent);
	font-weight: 700;
}

/* Stat cards */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.7em;
	margin-top: 1.2em;
}
.stat {
	background: var(--panel-hi);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.8em 0.6em;
	text-align: center;
}
.stat__n {
	font-size: 1.8em;
	font-weight: 700;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 0.4em;
	font-variant-numeric: tabular-nums;
}
.stat__l {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
	font-weight: 600;
}

/* UTC clock + Export button (in hero__bar) */
#utc-clock {
	font-family: var(--mono);
	font-size: 0.8em;
	color: var(--ink-soft);
	background: var(--panel-hi);
	border: 1px solid var(--border);
	padding: 0.3em 0.6em;
	border-radius: 3px;
	letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────
   LOOKUP SECTION
   ───────────────────────────────────────────── */

.lookup {
	background: var(--bg);
	padding: 2em 0;
}
.lookup__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1em;
	gap: 1em;
	flex-wrap: wrap;
}
.lookup__h {
	font-size: 1.15em;
	letter-spacing: 0.05em;
	color: var(--accent);
	margin: 0;
}
.lookup__tag {
	font-size: 0.72em;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
}

.input-box {
	display: flex;
	align-items: stretch;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	overflow: hidden;
}
.input-box:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-box__prompt {
	display: flex;
	align-items: center;
	padding: 0 0.8em;
	color: var(--accent);
	background: var(--panel-hi);
	border-right: 1px solid var(--border);
	font-weight: 700;
	font-family: var(--mono);
}
.input-box input {
	flex: 1;
	border: none;
	outline: none;
	padding: 0.7em 0.8em;
	font-family: var(--font);
	font-size: 1em;
	color: var(--ink);
	background: transparent;
	letter-spacing: 0.02em;
}
.input-box input::placeholder { color: var(--ink-dim); }
.input-box__go {
	border: none;
	background: var(--accent);
	color: #fff;
	font-family: var(--font);
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0 1.4em;
	cursor: pointer;
	font-size: 0.9em;
	transition: background 0.15s, box-shadow 0.15s;
}
.input-box__go:hover {
	background: var(--accent-hi);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.input-box__go:active { background: #001f44; }

/* History / suggestions / result panel */
.history, .suggestions, #result-panel {
	margin-top: 1em;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.8em 1em;
}
.suggestions:empty { display: none; padding: 0; border: none; }
.history[hidden], #result-panel[hidden] { display: none; }
.history__label {
	font-size: 0.7em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	margin-right: 0.6em;
	font-weight: 600;
}
.history__chip,
.suggest {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.85em;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid var(--border-hi);
	padding: 0.25em 0.7em;
	margin: 0.15em 0.25em 0.15em 0;
	border-radius: 3px;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.history__chip:hover,
.suggest:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* Result panel internals */
.result {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}
.result__head {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.6em;
}
.result__label {
	font-size: 0.7em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 600;
}
.result__call {
	font-family: var(--mono);
	font-size: 1.4em;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.04em;
}
.result__portable {
	font-size: 0.7em;
	color: var(--ink-mute);
	margin-left: 0.2em;
}
.status {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	font-weight: 700;
	padding: 0.2em 0.6em;
	border-radius: 2px;
	margin-left: auto;
}
.status--current { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
.status--deleted { background: var(--err-soft); color: var(--err); border: 1px solid var(--err); }
.status--unknown { background: var(--panel-hi); color: var(--ink-mute); border: 1px solid var(--border); }

.result__hint {
	color: var(--ink-soft);
	font-size: 0.95em;
}

.result__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1em;
	align-items: start;
}
@media (max-width: 600px) {
	.result__grid { grid-template-columns: 1fr; }
}
.result__entity {
	font-size: 1.2em;
	color: var(--accent);
	font-weight: 700;
	margin-bottom: 0.4em;
}
.result__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	font-size: 0.88em;
	color: var(--ink-soft);
	margin-bottom: 0.6em;
}
.result__meta .meta { display: inline-flex; align-items: center; gap: 0.3em; }
.result__side {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	align-items: flex-end;
}
.result__zones {
	display: flex;
	gap: 0.4em;
	align-items: center;
	flex-wrap: wrap;
}
.result__pills { display: flex; gap: 0.3em; flex-wrap: wrap; }

.result__shape {
	font-size: 0.85em;
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.7em;
	border-radius: 3px;
	margin: 0;
}
.result__shape.ok  { background: var(--ok-soft); color: var(--ok); }
.result__shape.bad { background: var(--err-soft); color: var(--err); }
.result__shape .dot {
	width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor;
	display: inline-block;
}

.result__sub {
	background: var(--panel-hi);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.7em 0.9em;
}
.result__sub-head {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
	font-weight: 600;
	margin-bottom: 0.4em;
}
.result__sub-grid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
}
.result__sub-name {
	color: var(--ink);
	font-weight: 600;
}
.result__sub-tags { display: flex; gap: 0.3em; }
.result__sub-note {
	margin: 0.4em 0 0;
	font-size: 0.85em;
	color: var(--ink-soft);
	line-height: 1.4;
}

/* Alternative matches — runners-up from the prefix lookup. */
.result__alts {
	background: var(--panel-hi);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.7em 0.9em;
	margin-top: 0.4em;
}
.result__alts-head {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
	font-weight: 600;
	margin-bottom: 0.5em;
}
.result__alts-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.result__alt {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0.7em;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.1s;
	font-size: 0.92em;
}
.result__alt:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
}
.result__alt:active { transform: translateY(1px); }
.result__alt-prefix {
	font-family: var(--mono);
	font-weight: 700;
	color: var(--accent);
	background: var(--accent-soft);
	border: 1px solid var(--border);
	padding: 0.1em 0.5em;
	border-radius: 2px;
	font-size: 0.88em;
	min-width: 3.2em;
	text-align: center;
}
.result__alt-entity {
	flex: 1;
	color: var(--ink);
	font-weight: 500;
}
.result__alt-arrow {
	color: var(--ink-mute);
	font-size: 1.2em;
	font-weight: 700;
	transition: color 0.15s, transform 0.15s;
}
.result__alt:hover .result__alt-arrow {
	color: var(--accent);
	transform: translateX(2px);
}
.result__alt .status {
	margin-left: 0;
}

.result__notes { margin: 0.4em 0; }
.result__note {
	background: var(--panel-hi);
	border-left: 3px solid var(--accent);
	padding: 0.6em 0.9em;
	margin: 0.4em 0;
	font-size: 0.9em;
	color: var(--ink-soft);
	border-radius: 0 3px 3px 0;
}
.result__note-n {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--accent);
	font-weight: 700;
	margin-right: 0.4em;
}

/* QSL block */
.result__qsl {
	background: var(--panel-hi);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.7em 0.9em;
	margin-top: 0.4em;
}
.qsl-head {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
	font-weight: 600;
	margin-bottom: 0.5em;
}
.qsl-line {
	padding: 0.3em 0;
	font-size: 0.92em;
	color: var(--ink-soft);
	line-height: 1.4;
}
.qsl-line--on  { color: var(--ok); }
.qsl-tick {
	display: inline-block;
	width: 1.2em;
	font-weight: 700;
	margin-right: 0.3em;
}
.qsl-line--off .qsl-tick { color: var(--ink-mute); }
.qsl-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.6em;
}
/* a.qsl-btn / a.ext — explicit anchor selector beats the .lookup a / .panel a
   base rule's specificity (0,1,1) so the hover color flips to white as
   intended, instead of inheriting --accent-hi from the link base rule. */
a.qsl-btn, a.ext {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.85em;
	padding: 0.35em 0.75em;
	background: var(--panel);
	border: 1px solid var(--border-hi);
	border-radius: 3px;
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
a.qsl-btn:hover, a.ext:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
	box-shadow: 0 1px 4px rgba(0, 64, 134, 0.25);
	text-decoration: none;
}
a.qsl-btn:hover .ext__arrow, a.ext:hover .ext__arrow { opacity: 1; color: #fff; }
.ext__arrow { font-size: 0.85em; opacity: 0.7; }

.result__links {
	margin-top: 0.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}
.result__links-label {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--ink-mute);
	font-weight: 600;
	margin-right: 0.3em;
}

/* ─────────────────────────────────────────────
   TABS
   ───────────────────────────────────────────── */

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	padding: 0 1em;
	max-width: 1100px;
	margin: 0 auto;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 2px 6px rgba(20, 36, 60, 0.06);
}
.tab {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	font-family: var(--font);
	font-size: 0.95em;
	color: var(--ink-soft);
	padding: 0.9em 1.1em;
	cursor: pointer;
	font-weight: 500;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover {
	color: var(--accent);
	background: var(--accent-soft);
	border-bottom-color: var(--border-hi);
}
.tab.tab--active,
.tab.tab--active:hover {
	color: var(--accent);
	background: transparent;
	border-bottom-color: var(--accent);
	font-weight: 600;
}

/* ─────────────────────────────────────────────
   PANELS
   ───────────────────────────────────────────── */

.panel {
	background: var(--bg);
	padding: 1.5em 0 2.5em;
	scroll-margin-top: 60px;
}
.panel[hidden] { display: none; }

.panel__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.4em;
	gap: 1em;
	flex-wrap: wrap;
}
.panel__title {
	font-size: 1.3em;
	color: var(--accent);
	margin: 0;
}
.panel__count {
	font-family: var(--mono);
	font-size: 0.85em;
	color: var(--ink-mute);
	background: var(--panel-hi);
	border: 1px solid var(--border);
	padding: 0.2em 0.6em;
	border-radius: 3px;
}
.panel__desc {
	color: var(--ink-soft);
	font-size: 0.92em;
	margin-bottom: 1.2em;
	max-width: 70ch;
}

/* ─────────────────────────────────────────────
   BROWSER (filters + table)
   ───────────────────────────────────────────── */

.browser {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.5em;
	margin-top: 1em;
	align-items: start;
}
@media (max-width: 760px) {
	.browser { grid-template-columns: 1fr; }
}

.filters {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 1em;
}
.filters h3 {
	font-size: 0.72em;
	letter-spacing: 0.12em;
	color: var(--ink-mute);
	font-weight: 600;
	margin: 1em 0 0.5em;
	text-transform: uppercase;
}
.filters h3:first-child { margin-top: 0; }

.search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 0.7em;
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font);
	font-size: 0.9em;
	color: var(--ink);
	background: var(--panel);
}
.search-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-soft);
}

.filters__continents,
.filters__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
}
.filters__continents .check,
.filters__flags .check {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.78em;
	background: var(--panel-hi);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.25em 0.55em;
	cursor: pointer;
	user-select: none;
	color: var(--ink-soft);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filters__continents .check:hover,
.filters__flags .check:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}
.filters__continents .check input,
.filters__flags .check input { accent-color: var(--accent); }
.filters__continents .check:has(input:checked),
.filters__flags .check:has(input:checked) {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.filters__clear {
	margin-top: 1em;
	width: 100%;
	padding: 0.55em;
	background: var(--panel-hi);
	border: 1px solid var(--border-hi);
	border-radius: 3px;
	color: var(--ink);
	font-family: var(--font);
	font-size: 0.85em;
	cursor: pointer;
	font-weight: 500;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filters__clear:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* Data table */
.table-wrap {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	overflow-x: auto;
}
.dxtable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}
.dxtable thead th {
	background: var(--panel-hi);
	color: var(--ink-mute);
	font-size: 0.72em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.7em 0.8em;
	text-align: left;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.dxtable tbody td {
	padding: 0.55em 0.8em;
	border-bottom: 1px solid var(--border);
	color: var(--ink);
	vertical-align: middle;
	font-family: var(--font);
}
.dxtable tbody tr:nth-child(even) td { background: var(--panel-hi); }
.dxtable tbody tr:hover td {
	background: var(--accent-soft);
	cursor: pointer;
	color: var(--ink);
}
.dxtable tbody tr:hover .c-itu,
.dxtable tbody tr:hover .c-cq { color: var(--ink); }
.dxtable tbody tr:last-child td { border-bottom: none; }

.dxtable .c-prefix { font-family: var(--mono); font-weight: 600; color: var(--accent); white-space: nowrap; }
.dxtable .c-entity { font-weight: 500; }
.dxtable .c-itu, .dxtable .c-cq { font-family: var(--mono); color: var(--ink-soft); white-space: nowrap; }
.dxtable .c-code  code { background: transparent; border: none; padding: 0; color: var(--ink-mute); }
.dxtable .c-arrow, .dxtable .c-old code, .dxtable .c-now code { font-family: var(--mono); }
.dxtable .c-arrow { color: var(--ink-mute); text-align: center; }
.dxtable .c-zone-label code { background: transparent; border: none; padding: 0; color: var(--accent); font-weight: 600; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.dxtable .c-alloc .star { color: var(--accent); font-weight: 700; margin-right: 0.3em; }
.dxtable .c-alloc .starstar { color: var(--err); font-weight: 700; margin-right: 0.3em; }
.dxtable .row--flag td { background: var(--accent-soft); }
.dxtable .row--flag:hover td { background: var(--accent-soft); }

/* Continent badges (functional category color) */
.badge--cont {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.18em 0.5em;
	border-radius: 2px;
	color: #1a2c3d;
	font-family: var(--mono);
}
.badge--cont.badge--AF { background: var(--c-AF); }
.badge--cont.badge--AN { background: var(--c-AN); }
.badge--cont.badge--AS { background: var(--c-AS); }
.badge--cont.badge--EU { background: var(--c-EU); }
.badge--cont.badge--NA { background: var(--c-NA); }
.badge--cont.badge--OC { background: var(--c-OC); }
.badge--cont.badge--SA { background: var(--c-SA); }

/* Pills (third-party, qsl bureau) */
.pill {
	display: inline-block;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.18em 0.5em;
	border-radius: 2px;
	margin-right: 0.3em;
	border: 1px solid var(--border);
	color: var(--ink-soft);
	background: var(--panel-hi);
}
.pill--third { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.pill--qsl   { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok); }
.pill--note  { background: var(--panel-hi);    color: var(--ink-mute); }

.sub-tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.72em;
	letter-spacing: 0.04em;
	color: var(--ink-mute);
	padding: 0.1em 0.45em;
	border: 1px solid var(--border);
	border-radius: 2px;
	margin-right: 0.3em;
	background: var(--panel);
}
.sub-tag--iota { color: var(--accent); border-color: var(--accent); }

/* Search bar (used by ITU, xref) */
.search-bar {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.8em;
	flex-wrap: wrap;
}
.search-bar .search-input { flex: 1; min-width: 220px; }
.search-bar__count {
	font-family: var(--mono);
	font-size: 0.85em;
	color: var(--ink-mute);
	background: var(--panel-hi);
	border: 1px solid var(--border);
	padding: 0.2em 0.6em;
	border-radius: 3px;
}
.itu-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	font-size: 0.85em;
	color: var(--ink-soft);
	margin: 0 0 0.8em;
}
.itu-legend b { color: var(--accent); }
.itu-legend i { color: var(--err); font-style: normal; font-weight: 700; }

/* Cross-ref grid */
.xref-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 1.5em;
	margin-top: 1em;
	align-items: start;
}
@media (max-width: 760px) {
	.xref-grid { grid-template-columns: 1fr; }
}
.xref-h {
	font-size: 0.72em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 600;
	margin: 0 0 0.7em;
	text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   MAP
   ───────────────────────────────────────────── */

.map-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	margin-top: 1em;
}
#map, .map {
	width: 100%;
	height: 60vh;
	min-height: 400px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--panel);
}
.map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: 0.8em;
}
.map-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.3em 0.6em;
	cursor: pointer;
	color: var(--ink-soft);
	font-family: var(--font);
	font-size: 0.85em;
	transition: opacity 0.15s, background 0.15s;
}
.map-chip:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}
.map-chip:hover .map-chip__name { color: var(--accent); }
.map-chip--off { opacity: 0.45; background: var(--panel-hi); }
.map-chip__dot {
	width: 0.7em; height: 0.7em; border-radius: 50%;
	display: inline-block;
}
.map-chip__name { color: var(--ink); font-weight: 500; }
.map-chip__n {
	font-family: var(--mono);
	font-style: normal;
	color: var(--ink-mute);
	font-size: 0.85em;
}
.map-attrib {
	font-size: 0.78em;
	color: var(--ink-mute);
	margin-top: 0.4em;
}
.map-attrib a { color: var(--accent); }
.leaflet-container {
	font-family: var(--font);
}
.leaflet-popup-content-wrapper {
	background: var(--panel);
	color: var(--ink);
	border-radius: 4px;
	border: 1px solid var(--border);
	box-shadow: 0 4px 12px rgba(20, 36, 60, 0.15);
}
.leaflet-popup-tip {
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}
.map-tip {
	background: var(--panel);
	color: var(--ink);
	border: 1px solid var(--border);
	font-size: 0.85em;
	padding: 0.3em 0.6em;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(20, 36, 60, 0.12);
}
.map-tip code { background: var(--accent-soft); border-color: var(--accent); }

/* ─────────────────────────────────────────────
   DRAWER
   ───────────────────────────────────────────── */

#drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 36, 60, 0.4);
	backdrop-filter: blur(2px);
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.drawer.drawer--open ~ #drawer-backdrop,
body:has(.drawer.drawer--open) #drawer-backdrop {
	opacity: 1;
	pointer-events: auto;
}

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(540px, 100%);
	height: 100vh;
	background: var(--panel);
	border-left: 1px solid var(--border);
	box-shadow: -4px 0 20px rgba(20, 36, 60, 0.15);
	z-index: 101;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	font-family: var(--font);
	color: var(--ink);
}
.drawer.drawer--open { transform: translateX(0); }

.drawer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 1.4em;
	border-bottom: 1px solid var(--border);
	background: var(--panel-hi);
}
.drawer__top .tag {
	font-size: 0.72em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 600;
	text-transform: uppercase;
}
#drawer-close {
	background: var(--panel);
	border: 1px solid var(--border-hi);
	color: var(--ink-soft);
	width: 2em;
	height: 2em;
	border-radius: 3px;
	cursor: pointer;
	font-size: 1.3em;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#drawer-close:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

#drawer-body { padding: 1.4em 1.4em 2em; }

.drawer__eyebrow {
	font-family: var(--mono);
	font-size: 0.72em;
	letter-spacing: 0.12em;
	color: var(--ink-mute);
	font-weight: 600;
	margin-bottom: 0.6em;
}
.drawer__title {
	font-size: 1.5em;
	color: var(--accent);
	margin: 0 0 0.4em;
	font-weight: 700;
}
.drawer__prefix {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9em;
	color: var(--ink-soft);
	margin-bottom: 1em;
}
.drawer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9em;
	margin: 1em 0;
}
.drawer__cell {
	background: var(--panel-hi);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0.7em 0.8em;
}
.drawer__k {
	font-size: 0.7em;
	letter-spacing: 0.12em;
	color: var(--ink-mute);
	font-weight: 600;
	margin: 0.6em 0 0.3em;
	text-transform: uppercase;
}
.drawer__cell .drawer__k { margin-top: 0; }
.drawer__v { color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 0.4em; }

.mini-map {
	width: 100%;
	height: 220px;
	border: 1px solid var(--border);
	border-radius: 3px;
	margin-bottom: 0.5em;
	background: var(--panel-hi);
}

.drawer__prefixes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
}
.pchip {
	font-family: var(--mono);
	font-size: 0.85em;
	background: var(--accent-soft);
	color: var(--accent);
	border: 1px solid var(--border);
	padding: 0.2em 0.55em;
	border-radius: 3px;
	font-weight: 600;
}
.drawer__pills {
	margin: 1em 0 0.6em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
}

.drawer__notes h3 {
	font-size: 0.72em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 600;
	margin: 1em 0 0.4em;
	text-transform: uppercase;
}
.drawer__note {
	background: var(--panel-hi);
	border-left: 3px solid var(--accent);
	padding: 0.6em 0.9em;
	margin: 0.4em 0;
	font-size: 0.9em;
	color: var(--ink-soft);
	border-radius: 0 3px 3px 0;
	line-height: 1.4;
}
.badge--note {
	font-size: 0.7em;
	letter-spacing: 0.1em;
	color: var(--accent);
	font-weight: 700;
	margin-right: 0.4em;
	font-family: var(--mono);
}

/* ─────────────────────────────────────────────
   ABOUT PANEL
   ───────────────────────────────────────────── */

.about-container { max-width: 780px; }

.about-lede {
	max-width: none;
	font-size: 1em;
	line-height: 1.6;
}
.about-lede strong {
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4em;
	margin-top: 1.4em;
}
@media (max-width: 600px) {
	.about-grid { grid-template-columns: 1fr; }
}
.about-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 1.2em;
}
.about-h {
	font-size: 0.72em;
	letter-spacing: 0.18em;
	color: var(--ink-mute);
	font-weight: 600;
	margin: 0 0 0.7em;
	text-transform: uppercase;
}
.about-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.9em;
	color: var(--ink-soft);
	line-height: 2;
}
.about-list code {
	font-family: var(--mono);
	background: var(--accent-soft);
	color: var(--accent);
	border-color: var(--border);
	font-weight: 600;
}

.about-coda {
	margin-top: 2em;
	padding: 1em 1.2em;
	background: var(--panel);
	border-left: 3px solid var(--accent);
	border-radius: 0 3px 3px 0;
	color: var(--ink-soft);
	font-size: 0.95em;
	line-height: 1.6;
}