/**
 * Armchair Journal — Bias Visualization Styles
 * Tracks, markers, ticks, gauges, and dimension rows.
 */

/* ─── Bias Bar Component ─── */
.aj-bias-bar-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aj-bias-track {
	position: relative;
	width: 68px;
	height: 4px;
	background-color: var(--aj-color-rule-tick, #ccd3dd);
	display: inline-block;
	flex-shrink: 0;
}

/* The handoff narrows the track to 60px on small screens; everything else holds. */
@media (max-width: 560px) {
	.aj-bias-track {
		width: 60px;
	}
}

.aj-bias-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	transition: left 0.25s ease, width 0.25s ease, background-color 0.25s ease;
}

.aj-bias-center-tick {
	position: absolute;
	left: 50%;
	top: -3px;
	bottom: -3px;
	width: 1px;
	background-color: var(--aj-color-rule-tick, #ccd3dd);
}

.aj-bias-marker {
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 2px;
	background-color: var(--aj-color-ink-heading, #16233a);
	transform: translateX(-1px);
	transition: left 0.25s ease;
}

.aj-bias-label {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: var(--aj-fs-10, 10px);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.25;
	min-width: 0;
	white-space: nowrap;
}

/* ─── Dimension Row Component ─── */
.aj-dimension-row {
	display: block;
	padding: 10px 0 12px;
	border-bottom: 1px solid var(--aj-color-border-light, #f2f4f8);
}

.aj-dim-theme-dark {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.aj-dim-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 7px;
}

.aj-dim-name {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--aj-color-text-primary, #16233a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aj-dim-theme-dark .aj-dim-name {
	color: #ffffff;
}

.aj-dim-readout {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.aj-dim-track-wrap {
	display: block;
	margin-bottom: 5px;
}

.aj-dim-track {
	position: relative;
	display: block;
	height: 4px;
	background-color: var(--aj-color-border-light, #e4e8ef);
}

.aj-dim-theme-dark .aj-dim-track {
	background-color: rgba(255, 255, 255, 0.14);
}

.aj-dim-fill {
	position: absolute;
	top: 0;
	bottom: 0;
}

.aj-dim-center-tick {
	position: absolute;
	left: 50%;
	top: -3px;
	bottom: -3px;
	width: 1px;
	background-color: #ccd3dd;
}

.aj-dim-theme-dark .aj-dim-center-tick {
	background-color: rgba(255, 255, 255, 0.35);
}

.aj-dim-marker {
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 2px;
	background-color: var(--aj-color-navy-dark, #16233a);
	transform: translateX(-1px);
}

.aj-dim-theme-dark .aj-dim-marker {
	background-color: #ffffff;
}

.aj-dim-poles {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
}

.aj-dim-pole-lo,
.aj-dim-pole-hi {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aj-dim-pole-hi {
	text-align: right;
}

/* ─── Bias Gauge / Spread Curve Component ─── */
.aj-bias-gauge {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.aj-gauge-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 7px;
}

.aj-gauge-title {
	font-size: var(--aj-fs-11, 11px);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/* No token matches #6f7a8e; it sits between --aj-color-ink-secondary and -muted. */
	color: #5f697a;
}

.aj-gauge-theme-dark .aj-gauge-title {
	color: rgba(255,255,255,.58);
}

.aj-gauge-shape-badge {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aj-color-red-primary, #c33d29);
	white-space: nowrap;
}

.aj-gauge-theme-dark .aj-gauge-shape-badge {
	color: var(--aj-color-gold-accent, #dcb352);
}

.aj-gauge-curve-wrap {
	position: relative;
	width: 100%;
}

.aj-gauge-svg {
	width: 100%;
	height: 112px;
	display: block;
}

.aj-gauge-theme-dark .aj-gauge-svg {
	height: 124px;
}

.aj-gauge-grid-line {
	stroke: var(--aj-color-rule-track, #e4e8ef);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.aj-gauge-grid-line--inner {
	stroke: var(--aj-color-rule-light, #dfe3ea);
}

.aj-gauge-theme-dark .aj-gauge-grid-line,
.aj-gauge-theme-dark .aj-gauge-grid-line--inner {
	stroke: rgba(255, 255, 255, 0.18);
}

.aj-gauge-stroke {
	stroke: var(--aj-color-ink-heading, #16233a);
	stroke-opacity: 0.5;
}

.aj-gauge-theme-dark .aj-gauge-stroke {
	stroke: rgba(255, 255, 255, 0.7);
	stroke-width: 1.6;
}

.aj-gauge-nine-grid {
	display: grid;
	grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
	gap: 0;
	margin-top: 2px;
	border-top: 1px solid var(--aj-color-rule-tick, #ccd3dd);
}

.aj-gauge-theme-dark .aj-gauge-nine-grid {
	border-top: none;
	margin-top: 8px;
}

.aj-gauge-band-cell {
	display: flex;
	flex-direction: column;
	text-align: center;
	min-width: 0;
	padding: 9px 2px 0;
}

/*
 * --aj-gauge-band-color is set per cell by the template. On paper the percentage
 * wears the band colour and the name stays muted; on navy the name wears it and
 * the percentage steps back — so the property is read by whichever line leads.
 */
.aj-gauge-band-pct {
	order: 1;
	font-size: var(--aj-fs-13, 13px);
	font-weight: 700;
	line-height: 1;
	color: var(--aj-gauge-band-color, var(--aj-color-ink-heading, #16233a));
}

.aj-gauge-theme-dark .aj-gauge-band-pct {
	order: 2;
	font-size: var(--aj-fs-9-5, 9.5px);
	color: rgba(255, 255, 255, 0.62);
	margin-top: 3px;
}

.aj-gauge-band-name {
	order: 2;
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: var(--aj-fs-9, 9px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 5px;
	line-height: 1.2;
	color: var(--aj-color-ink-muted, #616a79);
}

.aj-gauge-theme-dark .aj-gauge-band-name {
	order: 1;
	font-size: 8.5px;
	letter-spacing: 0.03em;
	height: 22px;
	margin-top: 0;
	line-height: 1.25;
	color: var(--aj-gauge-band-color, #ffffff);
}

/* ─── Dimension Row: optional weight readout (Phase 5 tool pages) ─── */
.aj-dim-weight {
	font-family: var(--aj-font-mono, 'IBM Plex Mono', monospace);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aj-color-ink-muted, #616a79);
	white-space: nowrap;
	flex-shrink: 0;
}

.aj-dim-theme-dark .aj-dim-weight {
	color: var(--aj-color-on-navy-muted, #7c94bf);
}

@media (max-width: 560px) {
	.aj-dim-weight {
		display: none;
	}
}