/* View layout and overrides on top of style.css. */

.view-switch {
	align-self: center;
}

.view-switch .tab-btn {
	text-decoration: none;
}

.view-section {
	min-height: 12rem;
}

.card-detail-row {
	display: flex;
	gap: 0.5rem;
}

.entry-ipa-value {
	font-size: calc(0.8125rem * var(--kc-entry-ipa-scale, 1));
}

.card-detail-label {
	opacity: 0.7;
	min-width: 6rem;
}

.audio-player {
	width: 100%;
	margin-top: 0.25rem;
}

.audio-provenance {
	font-size: 0.75rem;
	color: var(--kc-text-muted);
	margin: 0.25rem 0 0;
}

/* Entry detail modal — inline flowing paragraph */
.entry-inline {
	margin: 0;
	padding: 0 0.5rem 0 0.75rem;
	line-height: 1.7;
	font-size: 0.9375rem;
}

.entry-inline-desc {
	color: var(--kc-text-muted);
	font-size: calc(0.9375rem * var(--kc-entry-desc-scale, 1));
}

.entry-inline-gloss {
	color: var(--kc-text);
	font-size: calc(0.9375rem * var(--kc-entry-gloss-scale, 1));
}

/* Real ", " separator nodes (see openEntryModal) — CSS-generated separators
   left no word boundary in the DOM, so double-click selection bled from the
   word class into the first gloss. */
.entry-inline-sep {
	color: var(--kc-text-faint);
	user-select: none;
}

/* Word-type labels that jump to the cheat sheet. The entry-modal variant is a
   real <button>; reset its chrome so it flows like the span it replaces.
   font-size restated because `font: inherit` would override .entry-inline-desc's. */
button.entry-inline-desc {
	background: none;
	border: none;
	color: inherit;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: calc(0.9375rem * var(--kc-entry-desc-scale, 1));
	text-align: inherit;
	cursor: pointer;
}

/* Results-card variant is also a real <button>; reset its chrome so it keeps
   the .card-desc geometry. The card is a flex column whose items stretch, so
   align-self keeps the hit area at text width — a click beside the label must
   open the entry, not the cheat sheet.
   No color here: this rule outranks .card-desc, which owns the faint color.
   font-size restated because `font: inherit` would override .card-desc's. */
button.card-desc {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: calc(0.625rem * var(--kc-card-desc-scale, 1));
	text-align: inherit;
	cursor: pointer;
}

.wordclass-link {
	cursor: pointer;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

.wordclass-link:hover {
	color: var(--kc-accent);
}

.wordclass-link:focus-visible {
	outline: 2px solid var(--kc-accent);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* ── Entry modal: robust detail layout ─────────────────────────────────────
   Inserts (IPA row, Sumut.dk audio + provenance, notes, links) arrive in any
   combination; a fixed label column and min-width:0 values keep the card's
   geometry stable no matter which of them render. */
#entry-modal .modal-body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

#entry-modal .entry-inline {
	margin-bottom: 0.25rem;
}

#entry-modal .card-detail-row {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 0.25rem 0.5rem;
	align-items: baseline;
	margin: 0;
}

#entry-modal .card-detail-row > :last-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

#entry-modal .card-detail-label {
	min-width: 0;
}

/* Media/link inserts span the full card width below their label. */
#entry-modal .card-detail-row:has(.audio-player) {
	grid-template-columns: 1fr;
}

#entry-modal .override-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
}

#entry-modal .audio-provenance {
	margin: 0;
}

/* ── Entry modal: copy-to-clipboard (experimental) ──────────────────────── */
/* The bookmark star (.entry-star, below) always renders and always sits
   last in this row, so it alone owns the auto margin that pins the close
   button to the right — copy/debug never need to. */
.entry-copy {
	flex-shrink: 0;
	margin-left: 0.5rem;
	color: var(--kc-text-muted);
}

.entry-copy svg {
	width: 1rem;
	height: 1rem;
}

.entry-copy--done {
	color: var(--kc-accent);
}

/* ── Word-type cheat sheet ─────────────────────────────────────────────── */
.wordclass-row {
	padding: 0.5rem 0.625rem;
	border-radius: 0.5rem;
	/* Same tint language as result cards: colored left edge per word class. */
	border-left: 3px solid var(--wordclass-border, transparent);
}

.wordclass-row + .wordclass-row {
	margin-top: 0.125rem;
}

.wordclass-row--active {
	background: var(--kc-bg-input);
	outline: 1px solid var(--kc-accent);
}

.wordclass-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
}

.wordclass-kal {
	font-weight: 600;
	color: var(--wordclass-text, inherit);
}

.wordclass-en {
	color: var(--kc-text-muted);
}

.wordclass-abbr {
	margin-left: auto;
	font-size: 0.75rem;
	color: var(--kc-text-faint);
	font-family: ui-monospace, monospace;
	white-space: nowrap;
}

.wordclass-desc {
	margin: 0.25rem 0 0;
	font-size: calc(0.8125rem * var(--kc-wordclass-desc-scale, 1));
	color: var(--kc-text-muted);
}

/* ── Debug console ─────────────────────────────────────────────────────── */
.debug-console-section + .debug-console-section {
	margin-top: 1rem;
}

.debug-console-field {
	margin: 0.25rem 0;
	font-size: 0.8125rem;
	font-family: ui-monospace, monospace;
	color: var(--kc-text-muted);
}

/* ── Debug inspector (per-entry provenance/raw-data drilldown) ───────────── */
.debug-badge {
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--kc-border);
	border-radius: 50%;
	background: none;
	color: var(--kc-text-faint);
	font: 600 0.6875rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	cursor: pointer;
	padding: 0;
}

.debug-badge:hover {
	color: var(--kc-accent);
	border-color: var(--kc-accent);
}

.debug-badge:focus-visible {
	outline: 2px solid var(--kc-accent);
	outline-offset: 2px;
}

/* Inline placement next to the entry-modal headword: sits in the same flex
   row as the copy button and close button (see .entry-copy above). */
.entry-debug {
	margin-left: 0.5rem;
}

/* Bookmark star in the entry modal header: reuses .card-star's color/hover/
   focus/active-fill styling (same base class, see docs/dictionary.js) but
   overrides its absolute corner-of-the-card positioning for this plain flex
   row, sized like .entry-copy/.debug-badge. Always the last icon before the
   close button, so it alone owns the auto margin pinning that button right. */
.entry-star {
	position: static;
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	margin-left: 0.5rem;
	margin-right: auto;
}

/* Absolute top-right placement on morpheme cards, mirroring .card-star.
   padding-right reserves space so text never runs under the badge. */
.morpheme-card--debug {
	position: relative;
}
.morpheme-card--debug .debug-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}
.morpheme-card--debug .card-word {
	padding-right: 2rem;
}

.debug-inspect-json {
	margin: 0.25rem 0 0;
	padding: 0.5rem;
	max-height: 14rem;
	overflow: auto;
	font-size: 0.72rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	background: var(--kc-bg-input);
	border-radius: 0.375rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.open-in-builder {
	margin-top: 0.5rem;
	background: none;
	border: 1px solid currentColor;
	color: inherit;
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	cursor: pointer;
}

.experimental-banner {
	border: 1px solid var(--kc-danger, #f87171);
	color: var(--kc-danger, #f87171);
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

/* ── Results Border (Experimental) ──────────────────────────────────────────── */
#dict-results[data-results-border] {
	border: 1px solid var(--kc-border, rgba(128, 128, 128, 0.3));
	border-radius: 0.5rem;
	padding: 0.25rem;
}

/* ── Book Layout (Experimental) ─────────────────────────────────────────────── */
#dict-results[data-layout="book"] {
	grid-template-columns: 1fr;
	gap: 0;
}

.preview-card[data-layout="book"] .preview-lexemes {
	flex-direction: column;
	gap: 0;
}

.preview-card[data-layout="book"] .preview-col {
	min-height: 0;
}

.preview-card[data-layout="book"] .preview-col:last-child {
	display: flex;
}

#dict-results[data-layout="book"] .preset-card,
.preview-card[data-layout="book"] .preset-card {
	display: block;
	padding: 0.2rem 0.5rem;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	transform: none;
}

#dict-results[data-layout="book"] .preset-card:hover,
.preview-card[data-layout="book"] .preset-card:hover {
	background: color-mix(in srgb, var(--kc-bg-card) 50%, transparent);
}

#dict-results[data-layout="book"] .card-word,
#dict-results[data-layout="book"] .card-desc,
#dict-results[data-layout="book"] .card-gloss,
.preview-card[data-layout="book"] .card-word,
.preview-card[data-layout="book"] .card-desc,
.preview-card[data-layout="book"] .card-gloss {
	display: inline;
	font-size: 0.9375rem;
}

#dict-results[data-layout="book"] .card-word,
.preview-card[data-layout="book"] .card-word {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	padding-right: 0;
}

#dict-results[data-layout="book"] .card-word::after,
.preview-card[data-layout="book"] .card-word::after {
	content: " ● ";
	font-size: 0.45em;
	color: var(--preset-border, var(--kc-text-faint));
	vertical-align: middle;
}

#dict-results[data-layout="book"] .card-desc,
.preview-card[data-layout="book"] .card-desc {
	color: var(--kc-text-muted);
}

#dict-results[data-layout="book"] .card-gloss,
.preview-card[data-layout="book"] .card-gloss {
	color: var(--kc-text);
}

#dict-results[data-layout="book"] .card-desc:not(:empty) ~ .card-gloss:not(:empty)::before,
.preview-card[data-layout="book"] .card-desc:not(:empty) ~ .card-gloss:not(:empty)::before {
	content: ", ";
	color: var(--kc-text-faint);
}

#dict-results[data-layout="book"] .card-star,
#dict-results[data-layout="book"] .card-meta,
.preview-card[data-layout="book"] .card-star,
.preview-card[data-layout="book"] .card-meta { display: none; }