/**
 * The Intelligence Panel, and the assistant inside it.
 *
 * @package FirstHand
 */

.fh__panel {
	position: relative;
	z-index: 15;
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--fh-panel);
	width: var(--fh-panel);
	background: var(--fh-bg-2);
	border-left: 1px solid var(--fh-line);
	transition: flex-basis 0.22s ease, width 0.22s ease;
}

.fh__panel.is-hidden {
	flex-basis: 0;
	width: 0;
	border-left: 0;
	overflow: hidden;
}

.fh__panel-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--fh-line);
}

.fh__panel.is-hidden .fh__panel-head {
	display: none;
}

.fh__panel-tabs {
	display: flex;
	gap: 4px;
	flex: 1;
}

.fh__panel-tab {
	padding: 5px 10px;
	background: none;
	border: 0;
	border-radius: var(--fh-radius);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__panel-tab.is-active {
	background: var(--fh-bg-3);
	color: var(--fh-ink);
}

.fh__panel-controls {
	display: flex;
	gap: 2px;
}

.fh__panel-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 12px;
}

/* The way back in, when the panel is closed --------------------------- */

.fh__panel-tab-open {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 16;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 7px;
	background: var(--fh-bg-2);
	border: 1px solid var(--fh-line-2);
	border-right: 0;
	border-radius: var(--fh-radius-lg) 0 0 var(--fh-radius-lg);
	color: var(--fh-ink-2);
	box-shadow: var(--fh-shadow);
}

.fh__panel-tab-open:hover {
	color: var(--fh-ink);
	border-color: var(--fh-accent);
}

.fh__panel-tab-chev {
	font-size: 14px;
	line-height: 1;
	color: var(--fh-accent);
}

.fh__panel-tab-word {
	writing-mode: vertical-rl;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Inspector ----------------------------------------------------------- */

.fh__inspect-media {
	position: relative;
	margin: -12px -12px 12px;
	background: #000;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.fh__inspect-media img,
.fh__inspect-frame {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

/* A clip: the player, then its few controls in our own bar. */
.fh__clip-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: -4px 0 12px;
}

.fh__clip-bar a.fh__btn {
	text-decoration: none;
}

.fh__clip-note {
	margin-left: auto;
	font-size: 11px;
}

.fh__inspect-media.is-blank {
	color: var(--fh-ink-3);
	aspect-ratio: 16 / 6;
}

.fh__inspect-title {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.fh__inspect-source {
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--fh-ink-2);
}

.fh__facts {
	margin: 0 0 12px;
	display: grid;
	gap: 4px;
}

.fh__facts-row {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 10px;
	font-size: 12.5px;
}

.fh__facts dt {
	color: var(--fh-ink-3);
}

.fh__facts dd {
	margin: 0;
	font-family: var(--fh-mono);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.fh__inspect-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

/* Short buttons with a mark. */
.fh__btn--ico {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 10px;
}

.fh__ico {
	display: inline-flex;
	width: 14px;
	height: 14px;
	flex: none;
}

.fh__ico svg {
	width: 100%;
	height: 100%;
}

/* The placement trail: a kept render beside a step. */
.fh__trail-step.has-render {
	grid-template-columns: auto auto 1fr auto;
	grid-template-areas: 'n render what use' 'n render facts use';
}

.fh__trail-render {
	grid-area: render;
	width: 56px;
	height: 36px;
	object-fit: cover;
	border-radius: 3px;
	background: #000;
}

/* The review sheet ----------------------------------------------------- */
.fh__review {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 24px;
}

.fh__review-scrim {
	position: absolute;
	inset: 0;
	background: rgba(var(--fh-scrim), 0.72);
}

.fh__review-sheet {
	position: relative;
	width: min(1180px, 100%);
	max-height: 100%;
	overflow: auto;
	padding: 16px 18px 18px;
	background: var(--fh-bg-2);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius-lg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	color: var(--fh-ink-2);
	font-size: 13px;
}

.fh__review-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.fh__review-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--fh-ink);
}

.fh__review-sub {
	margin: 2px 0 0;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__review-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.fh__review-fig {
	margin: 0;
	display: grid;
	gap: 6px;
}

.fh__review-fig img,
.fh__review-none {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	background: #000;
	border-radius: var(--fh-radius);
}

.fh__review-none {
	display: grid;
	place-items: center;
	color: var(--fh-ink-3);
}

.fh__review-fig figcaption {
	font-size: 11.5px;
	color: var(--fh-ink-3);
}

.fh__review-verdict {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--fh-ink);
}

.fh__review-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.fh__review-h {
	margin: 0 0 4px;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__review-list {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 3px;
}

.fh__review-list.is-yes li::marker {
	content: '✓ ';
	color: var(--fh-good);
}

.fh__review-list.is-no li::marker {
	content: '✗ ';
	color: var(--fh-alert);
}

.fh__review-advice {
	margin: 0;
	padding: 8px 10px;
	background: var(--fh-bg-3);
	border-radius: var(--fh-radius);
}

.fh__review-did {
	color: var(--fh-ink);
}

.fh__review-tries {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
}

.fh__review-try-btn {
	display: grid;
	gap: 3px;
	width: 150px;
	padding: 6px;
	background: var(--fh-bg-3);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	color: var(--fh-ink-2);
	font: inherit;
	font-size: 11px;
	text-align: left;
	cursor: pointer;
}

.fh__review-try.is-showing .fh__review-try-btn {
	border-color: var(--fh-accent);
}

.fh__review-try-btn img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 3px;
	background: #000;
}

.fh__review-try-n {
	color: var(--fh-ink);
	font-weight: 600;
}

.fh__review-acts {
	display: flex;
	gap: 6px;
	flex: none;
}

.fh__review-sheet.is-summary {
	width: min(900px, 100%);
}

.fh__review-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.fh__review-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--fh-line);
	border-left-width: 4px;
	border-radius: var(--fh-radius);
}

.fh__review-row.is-good { border-left-color: var(--fh-good); }
.fh__review-row.is-fair { border-left-color: var(--fh-accent); }
.fh__review-row.is-weak { border-left-color: var(--fh-alert); }

.fh__review-row-pics {
	display: flex;
	gap: 4px;
}

.fh__review-row-pics img,
.fh__review-row-pics .fh__review-none {
	width: 96px;
	height: 60px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 3px;
	background: #000;
}

.fh__review-row-words {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.fh__review-row-title {
	color: var(--fh-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fh__review-row-score {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--fh-ink);
}

.fh__review-row-verdict {
	font-size: 12px;
	color: var(--fh-ink-2);
}

@media (max-width: 760px) {
	.fh__review { padding: 8px; }
	.fh__review-row { grid-template-columns: 1fr; }
	.fh__review-pair, .fh__review-cols { grid-template-columns: 1fr; }
}

/* A candidate that came from a person, not the machine. */
.fh__cand-person {
	display: inline-block;
	margin: 0 0 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fh-accent) 18%, transparent);
	color: var(--fh-accent);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fh__cand-voice {
	background: color-mix(in srgb, var(--fh-good) 18%, transparent);
	color: var(--fh-good);
	margin-left: 6px;
}

.fh__hunt-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fh__link-btn {
	padding: 0;
	background: none;
	border: 0;
	color: var(--fh-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--fh-line-2);
}

.fh__link-btn:hover {
	text-decoration-color: var(--fh-accent);
}

/* The tease: a visitor sees what signing in unlocks. */
.fh__gate {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--fh-ink-3);
}

.fh__gate-link {
	color: var(--fh-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fh__gate-register {
	margin-left: 8px;
}

.fh__ask.is-off p {
	margin: 0 0 8px;
	color: var(--fh-ink-2);
}

/* Why this confidence -------------------------------------------------- */

.fh__why {
	padding: 12px;
	margin-bottom: 12px;
	background: var(--fh-bg-3);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius-lg);
}

.fh__why-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
}

.fh__why-score {
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fh-accent);
}

.fh__why-state {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fh-ink-2);
}

.fh__why-author {
	margin-left: auto;
	font-size: 11px;
	color: var(--fh-ink-3);
}

.fh__why-summary {
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--fh-ink-2);
}

.fh__why-toggle {
	padding: 0;
	background: none;
	border: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fh-known);
	text-decoration: underline;
}

.fh__why-body:not(:empty) {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--fh-line);
}

/* The placement trail --------------------------------------------------- */
.fh__trail-wrap {
	margin-top: 10px;
}

.fh__trail-body:not(:empty) {
	margin-top: 8px;
}

.fh__trail {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.fh__trail-step {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: 'n what use' 'n facts use';
	gap: 2px 8px;
	align-items: center;
	padding: 6px 8px;
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	font-size: 12px;
}

.fh__trail-step.is-current {
	border-color: var(--fh-accent);
}

.fh__trail-n {
	grid-area: n;
	font-variant-numeric: tabular-nums;
	color: var(--fh-ink-3);
}

.fh__trail-what {
	grid-area: what;
	color: var(--fh-ink);
}

.fh__trail-facts {
	grid-area: facts;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.fh__trail-step .fh__btn {
	grid-area: use;
}

.fh__why-group {
	margin: 8px 0 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__why-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.fh__why-list li {
	display: grid;
	gap: 2px;
	font-size: 12.5px;
}

.fh__why-type {
	font-family: var(--fh-mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: var(--fh-known);
}

.fh__why-src {
	font-size: 11px;
}

.fh__prov-title {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

/* Assistant ----------------------------------------------------------- */

.fh__ask {
	padding-top: 12px;
	border-top: 1px solid var(--fh-line);
}

.fh__ask-title {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

/* A proposal is never applied on its own; it waits here for a decision. */

.fh__proposal {
	padding: 10px 12px;
	margin-bottom: 8px;
	background: var(--fh-accent-soft);
	border: 1px solid var(--fh-accent);
	border-radius: var(--fh-radius-lg);
}

.fh__proposal-what {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
}

.fh__proposal-why {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--fh-ink-2);
}

.fh__proposal-acts {
	display: flex;
	gap: 6px;
}

.fh__thread {
	display: grid;
	gap: 10px;
	margin-bottom: 12px;
}

.fh__turn-body {
	padding: 8px 11px;
	border-radius: var(--fh-radius-lg);
	font-size: 13px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.fh__turn.is-user .fh__turn-body {
	background: var(--fh-bg-3);
	margin-left: 28px;
}

.fh__turn.is-assistant .fh__turn-body {
	background: var(--fh-known-soft);
	border: 1px solid rgba(61, 143, 184, 0.28);
	margin-right: 14px;
}

.fh__ask-composer {
	display: flex;
	gap: 6px;
	align-items: flex-end;
}

.fh__ask-input {
	flex: 1;
	padding: 9px 11px;
	background: var(--fh-bg-3);
	color: var(--fh-ink);
	border: 1px solid var(--fh-line-2);
	border-radius: var(--fh-radius);
	font: inherit;
	font-size: 13px;
	resize: vertical;
}

.fh__ask-send {
	width: 34px;
	height: 34px;
	background: var(--fh-accent);
	color: #12140f;
	border: 0;
	border-radius: var(--fh-radius);
	font-weight: 700;
}

.fh__ask-suggest {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

/* Phone: a bottom sheet, not a sidebar -------------------------------- */

@media (max-width: 820px) {
	.fh__stage {
		flex-direction: column;
	}

	.fh__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		flex-basis: auto;
		max-height: 82%;
		border-left: 0;
		border-top: 1px solid var(--fh-line-2);
		border-radius: var(--fh-radius-lg) var(--fh-radius-lg) 0 0;
		box-shadow: var(--fh-shadow);
	}

	.fh__panel.is-hidden {
		max-height: 0;
		border-top: 0;
	}

	/* On a phone the sheet slides down, so the tab belongs along the bottom. */
	.fh__panel-tab-open {
		top: auto;
		bottom: 0;
		right: 50%;
		transform: translateX(50%);
		flex-direction: row;
		padding: 7px 16px;
		border: 1px solid var(--fh-line-2);
		border-bottom: 0;
		border-radius: var(--fh-radius-lg) var(--fh-radius-lg) 0 0;
	}

	.fh__panel-tab-word {
		writing-mode: horizontal-tb;
	}
}

/*
 * A picture that could not be fetched. Says which of "gone" or "unreachable
 * from here" it is, and offers the source, rather than a broken-image icon.
 */
.fh__inspect-broken {
	display: grid;
	gap: 6px;
	place-content: center;
	padding: 20px;
	text-align: center;
	color: var(--fh-ink-3);
	font-size: 13px;
}

.fh__inspect-broken p {
	margin: 0;
	max-width: 34ch;
}

/* Evidence Hunt: what is missing, and what turned up ------------------- */

.fh__hunt {
	display: grid;
	gap: 14px;
}

.fh__hunt-head {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__gap-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

/*
 * A gap is a claim about the reconstruction, so it is typed and legible rather
 * than a sentence of prose: the reader should be able to see at a glance
 * whether it is about footage, sources, time or direction.
 */
.fh__gap {
	display: grid;
	gap: 2px;
	padding: 8px 10px;
	background: var(--fh-bg-3);
	border-left: 2px solid var(--fh-alert);
	border-radius: 0 var(--fh-radius) var(--fh-radius) 0;
}

.fh__gap-type {
	font-family: var(--fh-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fh-alert);
}

.fh__gap-text {
	font-size: 12.5px;
	color: var(--fh-ink-2);
}

.fh__cand-list {
	display: grid;
	gap: 10px;
}

.fh__cand {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 10px;
	padding: 9px;
	background: var(--fh-bg-3);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius-lg);
}

.fh__cand-shot {
	position: relative;
	width: 84px;
	height: 62px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--fh-bg);
	border-radius: var(--fh-radius);
}

.fh__cand-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fh__cand-kind {
	font-size: 11px;
	color: var(--fh-ink-3);
}

.fh__cand-play {
	position: absolute;
	font-size: 14px;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.fh__cand-body {
	min-width: 0;
	display: grid;
	gap: 3px;
	align-content: start;
}

.fh__cand-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.fh__cand-meta {
	margin: 0;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--fh-ink-3);
}

/* Why it was offered — the gap it was found for. */
.fh__cand-why {
	margin: 2px 0 0;
	font-size: 11.5px;
	color: var(--fh-ink-2);
}

.fh__cand-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}

.fh__cand-acts .fh__btn {
	padding: 5px 9px;
	font-size: 12px;
}

.fh__hunt-run {
	justify-self: start;
}

.fh__hunt-note {
	margin: 0;
	font-size: 11.5px;
	color: var(--fh-ink-3);
}

/* Add Evidence: paste a link or upload a file ------------------------- */

/* Opens upward from the strip it adds to. */
.fh__add-panel {
	position: absolute;
	bottom: calc(100% - 2px);
	right: 18px;
	width: 460px;
	max-width: calc(100vw - 28px);
	display: grid;
	gap: 10px;
	padding: 14px;
	background: var(--fh-glass);
	border: 1px solid var(--fh-line-2);
	border-radius: var(--fh-radius-lg);
	box-shadow: var(--fh-shadow);
	backdrop-filter: blur(8px);
	z-index: 25;
}

.fh__add-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.fh__add-label {
	flex: 0 0 100%;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__add-input {
	flex: 1;
	min-width: 140px;
	padding: 8px 10px;
	background: var(--fh-bg-3);
	color: var(--fh-ink);
	border: 1px solid var(--fh-line-2);
	border-radius: var(--fh-radius);
	font: inherit;
	font-size: 13px;
}

.fh__add-hint,
.fh__add-note {
	margin: 0;
	font-size: 11.5px;
	color: var(--fh-ink-3);
}

.fh__add-note:not(:empty) {
	color: var(--fh-ink-2);
	padding-top: 6px;
	border-top: 1px solid var(--fh-line);
}

.fh__add-panel input[type='file'] {
	flex: 1;
	min-width: 160px;
	font-size: 12px;
	color: var(--fh-ink-2);
}

/* View width ---------------------------------------------------------- */

.fh__fov {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 0 2px;
	font-size: 12px;
	color: var(--fh-ink-2);
}

.fh__fov-range {
	width: 100%;
	accent-color: var(--fh-accent);
}

.fh__fov-value {
	min-width: 3.5ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--fh-ink);
}

/* When it was taken ----------------------------------------------------- */

.fh__when {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 8px;
	align-items: center;
	margin: 6px 0 12px;
	font-size: 12px;
	color: var(--fh-ink-2);
}

.fh__when-label {
	grid-column: 1 / -1;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__when-input {
	min-width: 0;
	padding: 5px 8px;
	background: var(--fh-bg-3);
	border: 1px solid var(--fh-line-2);
	border-radius: var(--fh-radius);
	color: var(--fh-ink);
	font: inherit;
	font-variant-numeric: tabular-nums;
	color-scheme: dark;
}

.fh__root[data-fh-theme="light"] .fh__when-input {
	color-scheme: light;
}

.fh__when-note {
	grid-column: 1 / -1;
	min-height: 1em;
}

/* Height: a vantage to pick, a number for those who know. */
.fh__height {
	grid-template-columns: 1fr auto;
}

.fh__height-select {
	min-width: 0;
}

.fh__height-num {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fh__height-input {
	width: 5.5em;
}

/* Adjust: every correction, folded away ------------------------------- */

.fh__adjust {
	margin-top: 16px;
	border-top: 1px solid var(--fh-line);
}

.fh__adjust-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px 0;
	background: none;
	border: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fh-ink-2);
	text-align: left;
}

.fh__adjust-toggle:hover {
	color: var(--fh-ink);
}

.fh__adjust-chev {
	display: inline-block;
	font-size: 16px;
	transition: transform 0.15s ease;
}

.fh__adjust-toggle.is-open .fh__adjust-chev {
	transform: rotate(90deg);
}

.fh__adjust-body {
	display: grid;
	gap: 10px;
	padding-bottom: 12px;
}

.fh__adjust-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fh__adjust-hint {
	margin: 0;
	font-size: 12px;
	color: var(--fh-ink-3);
}

.fh__inspect-source a {
	color: var(--fh-known);
}

/* Ask, laid out like a chat -------------------------------------------- */

.fh__panel-body.is-chat {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.fh__panel-body.is-chat .fh__ask {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding-top: 0;
	border-top: 0;
}

.fh__panel-body.is-chat .fh__thread {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	align-content: start;
	margin: 0;
	padding: 12px;
	scrollbar-width: thin;
}

.fh__thread-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fh-ink-3);
}

/* Docked: proposals, suggestions and the composer never scroll away. */
.fh__ask-dock {
	flex: 0 0 auto;
	padding: 10px 12px 12px;
	background: var(--fh-bg-2);
	border-top: 1px solid var(--fh-line);
}

.fh__ask-dock .fh__ask-suggest {
	margin: 0 0 8px;
}

/* The one place to type: darker than the panel, deeper than the bubbles, lit when focused. */
.fh__ask-input {
	background: var(--fh-bg);
	border: 1px solid var(--fh-line-2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
	min-height: 42px;
}

.fh__ask-input::placeholder {
	color: var(--fh-ink-3);
}

.fh__ask-input:focus {
	outline: none;
	border-color: var(--fh-accent);
	box-shadow: 0 0 0 3px var(--fh-accent-soft), inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.fh__root[data-fh-theme="light"] .fh__ask-input {
	box-shadow: inset 0 1px 2px rgba(23, 27, 34, 0.12);
}

/* About the event --------------------------------------------------- */
.fh__about-summary {
	margin: 10px 0 8px;
	font-size: 13.5px;
	line-height: 1.5;
}

.fh__about-counts {
	margin: 0 0 14px;
	font-family: var(--fh-mono);
	font-size: 11.5px;
	color: var(--fh-ink-2);
}

.fh__about-head {
	margin: 14px 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__about-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-size: 12.5px;
	line-height: 1.45;
}

.fh__about-when {
	display: inline-block;
	min-width: 3.6em;
	font-family: var(--fh-mono);
	color: var(--fh-accent);
}

.fh__about-hint {
	margin-top: 16px;
}

/* Facts: the words, then the numbers small. */
.fh__facts-row.is-small dd {
	font-family: var(--fh-mono);
	font-size: 11px;
	color: var(--fh-ink-3);
}

/* Findings in view, and the map check. */
.fh__why-top {
	margin: 8px 0 6px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 5px;
}

.fh__why-finding {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.4;
}

.fh__why-check {
	margin: 8px 0 2px;
	font-size: 12.5px;
	line-height: 1.45;
}

.fh__why-advice {
	color: var(--fh-accent);
	font-weight: 600;
}

/* A count on the Ask tab when a proposal is waiting. */
.fh__tab-badge {
	display: inline-block;
	min-width: 1.5em;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--fh-accent);
	color: #12140f;
	font-size: 10.5px;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
}

/* The landmark register in About. */
.fh__landmarks {
	margin-top: 14px;
}

.fh__landmarks .fh__btn {
	margin-top: 8px;
}

.fh__landmark-name {
	font-weight: 600;
}

/* Tell what you saw --------------------------------------------------- */

.fh__witness {
	width: 520px;
}

.fh__witness-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--fh-ink);
}

.fh__witness-medium {
	display: inline-flex;
	gap: 4px;
}

.fh__witness-medium .fh__btn.is-on {
	background: var(--fh-accent);
	color: #fff;
	border-color: transparent;
}

.fh__witness-clock {
	font-family: var(--fh-mono);
	font-size: 12px;
	color: var(--fh-ink-3);
	min-width: 3.5ch;
}

.fh__witness-preview {
	display: grid;
	place-items: center;
	min-height: 48px;
	background: #000;
	border-radius: var(--fh-radius);
	overflow: hidden;
}

.fh__witness-live {
	width: 100%;
	max-height: 240px;
	background: #000;
}

.fh__witness-audio {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
}

.fh__witness-listening {
	padding: 14px;
	color: #f4f5f8;
	font-size: 13px;
	animation: fh-witness-pulse 1.4s ease-in-out infinite;
}

.fh__witness-send {
	justify-content: flex-start;
}

@keyframes fh-witness-pulse {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.fh__witness-listening { animation: none; }
}

.fh__inspect-audio {
	aspect-ratio: auto;
	padding: 18px 12px 12px;
	gap: 10px;
	grid-auto-flow: row;
}

.fh__inspect-audio-mark {
	color: #f4f5f8;
	font-size: 13px;
}

.fh__inspect-audio audio {
	width: 100%;
}

/* GPT10 — task-first Evidence inspector ------------------------------- */
.fh__inspect-heading {
	margin: 0 0 9px;
}

.fh__inspect-heading .fh__inspect-title {
	margin-bottom: 2px;
	font-size: 14px;
	line-height: 1.28;
}

.fh__inspect-heading .fh__inspect-source {
	margin-bottom: 0;
	font-size: 11.5px;
	line-height: 1.35;
}

/* Media can still run edge-to-edge, but no longer pulls above its title. */
.fh__inspect-media {
	margin: 0 -12px 8px;
}

.fh__clip-bar.fh__media-controls {
	justify-content: flex-start;
	gap: 4px;
	margin: -1px 0 5px;
}

.fh__media-icon {
	display: inline-grid;
	place-items: center;
	width: 31px;
	height: 31px;
	padding: 0;
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
	background: var(--fh-bg-2);
	color: var(--fh-ink-2);
	cursor: pointer;
	text-decoration: none;
}

.fh__media-icon:hover,
.fh__media-icon.is-on {
	border-color: var(--fh-line-2);
	background: var(--fh-bg-3);
	color: var(--fh-ink);
}

.fh__media-icon svg {
	width: 17px;
	height: 17px;
}

.fh__section-kicker,
.fh__details-subhead {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fh-ink-3);
}

.fh__placement {
	margin: 10px 0 8px;
	padding: 10px 0 11px;
	border-bottom: 1px solid var(--fh-line);
}

.fh__placement-main {
	margin: 0 0 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--fh-ink);
}

.fh__placement-meta {
	margin: 0 0 8px;
	font-family: var(--fh-mono);
	font-size: 10.5px;
	color: var(--fh-ink-3);
}

.fh__placement-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.fh__placement-actions .fh__btn {
	min-height: 30px;
}

.fh__view-adjust {
	margin-top: 9px;
	padding: 9px;
	background: var(--fh-bg-3);
	border: 1px solid var(--fh-line);
	border-radius: var(--fh-radius);
}

.fh__view-adjust[hidden] { display: none; }

.fh__view-adjust .fh__fov,
.fh__view-adjust .fh__height {
	margin: 0 0 8px;
}

.fh__view-adjust .fh__height:last-child { margin-bottom: 0; }

/* Verification is a status line until someone asks for the reasoning. */
.fh__verify {
	margin: 7px 0 2px;
	border-top: 1px solid var(--fh-line);
	border-bottom: 1px solid var(--fh-line);
}

.fh__verify-toggle {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 0;
	border: 0;
	background: none;
	color: var(--fh-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fh__verify-check {
	font-size: 14px;
	font-weight: 700;
	color: var(--fh-good);
}

.fh__verify-label {
	font-size: 12.5px;
	font-weight: 600;
}

.fh__verify-author {
	font-size: 10.5px;
	color: var(--fh-ink-3);
	white-space: nowrap;
}

.fh__verify-chev {
	font-size: 16px;
	color: var(--fh-ink-3);
	transition: transform .15s ease;
}

.fh__verify-toggle.is-open .fh__verify-chev { transform: rotate(90deg); }

.fh__verify-body {
	display: grid;
	gap: 8px;
	padding: 0 0 10px 21px;
}

.fh__verify-body[hidden] { display: none; }
.fh__verify-body .fh__why-summary,
.fh__verify-body .fh__why-check,
.fh__verify-body .fh__why-top { margin-block: 0; }

/* Details replaces the old permanent facts + Adjust form. */
.fh__details {
	margin-top: 0;
	border-top: 0;
}

.fh__details-body {
	gap: 9px;
}

.fh__details-body .fh__facts {
	margin-bottom: 3px;
}

.fh__details-subhead {
	margin-top: 5px;
	padding-top: 8px;
	border-top: 1px solid var(--fh-line);
}

.fh__details .fh__adjust-toggle {
	padding: 9px 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12.5px;
}

.fh__details .fh__facts-row {
	grid-template-columns: 70px 1fr;
	font-size: 11.5px;
}

.fh__details .fh__facts dd {
	font-size: 11px;
}

/* GPT11 — keep placement status/history together; destructive action last. */
.fh__placement-history {
	display: grid;
	gap: 4px;
	margin: 2px 0 8px;
	padding: 0 0 9px;
	border-bottom: 1px solid var(--fh-line);
}

.fh__placement-history .fh__restore-placement {
	justify-self: start;
}

.fh__placement-history .fh__trail-wrap {
	margin-top: 0;
}

.fh__inspect-remove {
	margin-top: 14px;
	padding-top: 10px;
	border-top: 1px solid var(--fh-line);
}

.fh__inspect-remove .fh__btn--danger {
	font-size: 11px;
}

/* GPT12 — one persistent Intelligence edge tab, open or closed. */
.fh__panel-edge-tab {
	position: absolute;
	top: 8px;
	right: 0;
	z-index: 26;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 29px;
	padding: 0 9px;
	border: 1px solid var(--fh-line-2);
	border-right: 0;
	border-radius: 7px 0 0 7px;
	background: var(--fh-bg-2);
	color: var(--fh-ink-2);
	box-shadow: var(--fh-shadow);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: right .22s ease, color .15s ease, border-color .15s ease;
}

.fh__panel-edge-tab.is-panel-open {
	right: var(--fh-panel);
}

.fh__panel-edge-tab:hover {
	color: var(--fh-ink);
	border-color: var(--fh-accent);
}

.fh__panel-edge-tab .fh__icon {
	width: 14px;
	height: 14px;
}

/* Old vertical reopen rail is retired in favour of the persistent edge tab. */
.fh__panel-tab-open { display: none !important; }

/* GPT12 — height uses the same direct-manipulation language as FOV. */
.fh__height-control {
	display: grid;
	gap: 8px;
	width: 100%;
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--fh-ink-2);
}

.fh__height-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fh__height-value {
	font-variant-numeric: tabular-nums;
	color: var(--fh-ink);
}

.fh__height-slider-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
}

.fh__height-range {
	width: 100%;
	accent-color: var(--fh-accent);
}

.fh__height-control .fh__height-input {
	width: 4.8em;
}

.fh__height-control .fh__height-select {
	width: 100%;
}

.fh__view-adjust .fh__height-control {
	margin-bottom: 0;
}

/* GPT16 — Intelligence is an edge rail, not another horizontal toolbar tab. */
.fh__panel-edge-tab {
	top: 8px;
	width: 64px;
	height: 164px;
	padding: 12px 12px;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	border-radius: 8px 0 0 8px;
}

.fh__panel-edge-tab .fh__edge-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	letter-spacing: .06em;
	font-size: 12px;
}

.fh__panel-edge-tab .fh__icon {
	width: 13px;
	height: 13px;
	flex: none;
}

/* GPT33 — tighter Intelligence rail; move it below historical compare when open. */
.fh__panel-edge-tab {
	top: 8px;
	width: 40px;
	height: 138px;
	padding: 6px 4px;
	gap: 4px;
	border-radius: 7px 0 0 7px;
}

.fh__panel-edge-tab .fh__edge-label {
	font-size: 11px;
	letter-spacing: .045em;
}

.fh__panel-edge-tab .fh__icon {
	width: 11px;
	height: 11px;
}

.fh__panel-edge-tab.is-compare-open {
	top: 104px;
}