/*
 * Counter popup — a self-contained, page-agnostic card describing one
 * counter. Used by the counter browser today and (later) by the map, the
 * pools tab, scrapping and deployment, which is why it carries no
 * dependency on any page's stylesheet.
 *
 * Everything is namespaced under `.wif-cp` and every colour is a custom
 * property redefined for the dark theme, so the same widget sits happily on
 * the light site pages and inside the dark full-screen game client. Pick
 * with `theme: 'light' | 'dark' | 'auto'` at init (auto follows the OS).
 */

.wif-cp {
	--cp-bg:      #ffffff;
	--cp-fg:      #1a1a1a;
	--cp-muted:   #6d6d6d;
	--cp-rule:    #e2ded4;
	--cp-sunken:  #f7f5f0;
	--cp-accent:  #c0392b;
	--cp-shadow:  0 6px 28px rgba(0, 0, 0, .18);
	--cp-chip-bg: #f2efe8;

	position: fixed;
	z-index: 9000;
	width: 360px;
	max-width: calc(100vw - 16px);
	max-height: min(72vh, 620px);
	display: flex;
	flex-direction: column;
	overflow: hidden;

	background: var(--cp-bg);
	color: var(--cp-fg);
	border: 1px solid var(--cp-rule);
	border-radius: 8px;
	box-shadow: var(--cp-shadow);

	font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: left;

	opacity: 0;
	transform: translateY(-3px);
	transition: opacity .1s ease, transform .1s ease;
}

.wif-cp[hidden] { display: none; }
.wif-cp.is-open { opacity: 1; transform: none; }

.wif-cp[data-theme="dark"] {
	--cp-bg:      #1e1e1e;
	--cp-fg:      #dddddd;
	--cp-muted:   #8f8f8f;
	--cp-rule:    #343434;
	--cp-sunken:  #171717;
	--cp-accent:  #9bd;
	--cp-shadow:  0 6px 28px rgba(0, 0, 0, .55);
	--cp-chip-bg: #262626;
}

@media (prefers-color-scheme: dark) {
	.wif-cp[data-theme="auto"] {
		--cp-bg:      #1e1e1e;
		--cp-fg:      #dddddd;
		--cp-muted:   #8f8f8f;
		--cp-rule:    #343434;
		--cp-sunken:  #171717;
		--cp-accent:  #9bd;
		--cp-shadow:  0 6px 28px rgba(0, 0, 0, .55);
		--cp-chip-bg: #262626;
	}
}

/* ── Header: name + kind badge + close ─────────────────────────────── */

.wif-cp-head {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: 8px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--cp-rule);
}
.wif-cp-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.wif-cp-kind {
	flex: 0 0 auto;
	font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
	color: var(--cp-muted);
	background: var(--cp-chip-bg);
	border-radius: 9px;
	padding: 1px 8px;
}
.wif-cp-close {
	flex: 0 0 auto;
	background: none; border: 0; padding: 0 2px;
	color: var(--cp-muted); font: inherit; font-size: 16px; line-height: 1;
	cursor: pointer;
}
.wif-cp-close:hover { color: var(--cp-accent); }

/* ── Body: Front / Back / Metadata as one aligned table ─────────────
 * A single grid — face art | label | value — shared by all three
 * sections (each is display:contents), so the label column is sized
 * once and every value starts at the same x. Metadata has no art and
 * simply leaves the first column empty. */

.wif-cp-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

.wif-cp-grid {
	display: grid;
	grid-template-columns: 75.5px max-content minmax(0, 1fr);
	grid-auto-flow: row;
	column-gap: 10px;
	row-gap: 2px;
	padding: 10px 12px;
	align-items: start;
}

.wif-cp-section { display: contents; }

/* Rule between sections. The gap after the previous section's rows
 * is the top margin; the next section's rows start after the bottom one. */
.wif-cp-divider {
	grid-column: 1 / -1;
	height: 0;
	margin: 12px 0 8px;
	border-top: 1px solid var(--cp-rule);
}

/* The face sections lead with that face's art, at the map's counter scale. */
.wif-cp-face {
	grid-column: 1;
	display: block;
	width: 75.5px; height: 75.5px;
	border-radius: 3px;
	background: var(--cp-sunken);
}
.wif-cp-face.is-missing { visibility: hidden; }

.wif-cp-section dt { grid-column: 2; margin: 0; color: var(--cp-muted); white-space: nowrap; }
.wif-cp-section dd { grid-column: 3; margin: 0; overflow-wrap: anywhere; }
.wif-cp-section dt.has-hint,
.wif-cp-section dd.has-hint { cursor: help; text-decoration: underline dotted var(--cp-rule); text-underline-offset: 2px; }

/* Markers, option gates and the like, as chips. */
.wif-cp-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wif-cp-tag {
	font-size: 11px; line-height: 1.35;
	padding: 1px 8px;
	border: 1px solid var(--cp-rule);
	border-radius: 10px;
	background: var(--cp-chip-bg);
	cursor: help;
}
.wif-cp-tag[data-tone="option-in"]  { border-color: #8ab89a; color: #2b7a4b; }
.wif-cp-tag[data-tone="option-out"] { border-color: #d3a3a3; color: #a33b3b; }
.wif-cp-tag[data-tone="note"]       { border-color: #cbb68a; color: #86691f; }

.wif-cp[data-theme="dark"] .wif-cp-tag[data-tone="option-in"]  { color: #8fd0a6; }
.wif-cp[data-theme="dark"] .wif-cp-tag[data-tone="option-out"] { color: #e29a9a; }
.wif-cp[data-theme="dark"] .wif-cp-tag[data-tone="note"]       { color: #d9c184; }

@media (prefers-color-scheme: dark) {
	.wif-cp[data-theme="auto"] .wif-cp-tag[data-tone="option-in"]  { color: #8fd0a6; }
	.wif-cp[data-theme="auto"] .wif-cp-tag[data-tone="option-out"] { color: #e29a9a; }
	.wif-cp[data-theme="auto"] .wif-cp-tag[data-tone="note"]       { color: #d9c184; }
}

/* ── Transient states ──────────────────────────────────────────────── */

.wif-cp-state { padding: 18px 12px; text-align: center; color: var(--cp-muted); }