/* ── YOU ARE THE MODEL ─────────────────────────────────────────────────
   Role-reversal exhibit: the visitor plays the LLM. Dark phosphor theme,
   reuses site tokens + .term/.btn/.verdict/.section-label from style.css. */

.ytm-intro { max-width: 62ch; }
.ytm-title {
	font-family: var(--disp);
	font-size: clamp(1.9rem, 4.5vw, 2.75rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.08;
	letter-spacing: -0.005em;
	margin: 0.2rem 0 0.9rem;
}
.ytm-lede { font-size: var(--fs-3); line-height: 1.6; color: var(--ink-dim); margin: 0 0 0.7rem; }
.ytm-sub { font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-faint); margin: 0; }

/* the brief: your role, tools, and the secret */
.ytm-brief {
	margin: 2rem 0 1.6rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 1.25rem 1.4rem;
}
.ytm-brief-head { font-family: var(--mono); font-size: var(--fs-1); color: var(--acc); margin: 0 0 0.75rem; }
.ytm-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.ytm-tool {
	font-family: var(--mono);
	font-size: var(--fs-0);
	color: var(--acc-2);
	background: var(--field-acc2);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 0.25rem 0.55rem;
}
.ytm-brief-secret {
	font-family: var(--mono);
	font-size: var(--fs-1);
	color: var(--ink-dim);
	margin: 0;
	line-height: 1.6;
}
.ytm-brief-secret b { color: var(--warn); font-weight: 600; }

/* the stage */
.ytm-stage { margin: 1.5rem 0; }
.ytm-hud {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--mono);
	margin-bottom: 0.9rem;
}
.ytm-hud-item { display: flex; align-items: baseline; gap: 0.5rem; }
.ytm-hud-item[hidden] { display: none; }   /* the class's display:flex otherwise beats [hidden] */
.ytm-hud-label { font-size: var(--fs-0); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.ytm-hud-val { font-size: var(--fs-3); font-weight: 700; color: var(--ink); }

/* the untrusted artifact — a terminal-ish card */
/* the live stage panel: raised chrome that frames the welled model message.
   Gets .reg (working instrument). Depth is value alone — no shadow (M6). */
.ytm-artifact {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 0;
	overflow: hidden;
}
.ytm-artifact-head {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	flex-wrap: wrap;
	padding: 0.8rem 1.1rem;
	background: var(--panel-2);
	border-bottom: 1px solid var(--line);
}
.ytm-artifact-kind {
	font-family: var(--mono);
	font-size: var(--fs-0);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-on-acc);
	background: var(--ink-faint);
	border-radius: 0;
	padding: 0.15rem 0.5rem;
}
.ytm-artifact-from { font-family: var(--mono); font-size: var(--fs-0); color: var(--acc-2); }
.ytm-artifact-sub { font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-faint); margin-left: auto; }
/* the model's message: composes .well (recessed evidence) + .asserted (dashed,
   model-written & unverified). Only the exhibit-specific type/space/prominence
   stays here; surface, mono, border come from the primitives. */
.ytm-artifact-body {
	font-size: var(--fs-2);
	line-height: 1.7;
	padding: 1.25rem 1.35rem;
	color: var(--ink);
	white-space: pre-wrap;
	word-break: break-word;
	min-height: 8.5rem;
}

/* countdown */
.ytm-timer { height: 4px; background: var(--line-soft); border-radius: 0; overflow: hidden; margin: 0.9rem 0; }
.ytm-timer-bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--acc), var(--warn));
	transform-origin: left center;
	transition: transform 0.1s linear, background 0.3s;
}

/* the two keys */
.ytm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.ytm-choice {
	font-family: var(--mono);
	font-size: var(--fs-2);
	font-weight: 600;
	padding: 1rem 1.1rem;
	border-radius: 0;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--ink);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: center;
	transition: border-color 0.2s, background 0.2s;
}
.ytm-choice:hover { border-color: var(--ink-faint); background: var(--panel-2); }
.ytm-choice:disabled { opacity: 0.45; cursor: default; }
.ytm-choice-comply:hover { border-color: var(--acc); background: var(--field-acc); }
.ytm-choice-refuse:hover { border-color: var(--bad); background: var(--field-bad); }
.ytm-choice:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }
.ytm-choice-key { font-size: var(--fs-00); color: var(--ink-faint); font-weight: 400; letter-spacing: 0.05em; }

/* verdict flash */
.ytm-verdict {
	display: block;
	padding: 0.85rem 1.1rem;
	border-radius: 0;
	font-weight: 500;
	line-height: 1.55;
	margin-top: 0.9rem;
	font-family: var(--mono);
	font-size: var(--fs-2);
}
.ytm-verdict-safe { background: var(--field-acc-on); border: 1px solid var(--acc); color: var(--acc); }
.ytm-verdict-leak { background: var(--field-bad-on); border: 1px solid var(--bad); color: var(--bad); }
.ytm-stamp { font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-0); margin-right: 0.6rem; }
.ytm-note { color: var(--ink-dim); font-weight: 400; display: block; margin-top: 0.4rem; }

/* the reveal */
.ytm-reveal {
	margin-top: 1.6rem;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--panel);
	padding: 1.4rem 1.4rem 1.5rem;
}
.ytm-reveal-head { font-family: var(--mono); font-size: var(--fs-1); color: var(--acc); margin: 0 0 1rem; }
/* the reveal is the seam: model's attempted call (left, .seam-model) vs the
   deterministic control (right, .ytm-reveal-col), split by one .seam-line.
   .seam sets the 1fr 1px 1fr grid; keep the exhibit's per-column chrome. */
.ytm-reveal-cols { gap: 0; }
.ytm-reveal-col { border-radius: 0; overflow: hidden; }
.ytm-reveal-col-label {
	font-family: var(--mono);
	font-size: var(--fs-0);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.55rem 0.85rem;
	border-bottom: 1px solid var(--line);
}
.ytm-reveal-col:first-child .ytm-reveal-col-label { color: var(--bad); background: var(--field-bad); }
.ytm-reveal-col:last-child .ytm-reveal-col-label { color: var(--acc); background: var(--field-acc); }
.ytm-reveal-col-body { padding: 0.9rem 0.9rem; }
.ytm-call {
	font-family: var(--mono);
	font-size: var(--fs-1);
	line-height: 1.65;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
	color: var(--ink-dim);
}
.ytm-call b { color: var(--ink); font-weight: 600; }
.ytm-reveal-caption {
	margin: 1.2rem 0 0;
	font-size: var(--fs-3);
	line-height: 1.5;
	color: var(--ink);
	font-weight: 500;
}

/* scorecard + controls */
.ytm-scorecard { margin-top: 1.4rem; }
.ytm-score-line { font-family: var(--mono); font-size: var(--fs-2); color: var(--ink-dim); margin: 0.3rem 0; }
.ytm-score-num { color: var(--ink); font-weight: 700; }
.ytm-controls { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 1.2rem; }
.ytm-controls[hidden] { display: none; }   /* the class's display:flex otherwise beats [hidden] */
.ytm-toggle { font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }

/* the server-side controls switch — the thesis, as a toggle you can flip */
#start-wrap[hidden] { display: none; }
.ytm-seg { border: 0; padding: 0; margin: 1.6rem 0 0; }
.ytm-seg-legend { font-family: var(--mono); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); padding: 0; margin-bottom: 0.5rem; }
.ytm-seg-opt { position: relative; display: inline-flex; margin-right: 0.4rem; }
.ytm-seg-face {
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 0.3rem 0.85rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: var(--fs-1);
	color: var(--ink-faint);
	cursor: pointer;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ytm-seg-opt input:checked + .ytm-seg-face {
	color: var(--ink);
	background: var(--panel-2);
	border-color: var(--ink-faint);
}
/* reserve cyan for the controls-ON identity: only "on", when chosen, glows cyan */
#mode-on:checked + .ytm-seg-face {
	color: var(--acc-2);
	background: var(--field-acc2-on);
	border-color: var(--acc-2);
}
.ytm-seg-opt input:focus-visible + .ytm-seg-face { outline: 2px solid var(--acc-2); outline-offset: 2px; }
.ytm-seg-note { font-family: var(--mono); font-size: var(--fs-0); color: var(--ink-faint); max-width: 54ch; margin: 0.55rem 0 0; line-height: 1.5; }

/* third outcome: you were wrong, the structure held (cyan) */
.ytm-verdict-caught { background: var(--field-acc2-on); border: 1px solid var(--acc-2); color: var(--acc-2); }
.ytm-verdict-call { display: block; font-family: var(--mono); font-size: var(--fs-1); color: var(--ink-dim); white-space: pre-wrap; word-break: break-word; margin-top: 0.5rem; font-weight: 400; }
.ytm-hud-val-on { color: var(--acc-2); }
.ytm-next { margin-top: 0.9rem; }

/* live mode: "the machine is writing…" placeholder while /model/round is in flight.
   Made prominent so a cold-start wait reads as "working", not "broken": centered,
   larger type, a bigger pulsing dot. Reused by the OFFLINE state (same centered look). */
.ytm-gen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 6rem;
	text-align: center;
	color: var(--ink-dim);
	font-style: italic;
	font-size: var(--fs-2);
	line-height: 1.6;
}
.ytm-gen-dot {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--acc-2);
	flex: none;
	animation: ytm-pulse 1.1s ease-in-out infinite;
}
@keyframes ytm-pulse { 0%, 100% { opacity: 0.2; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } }

/* the public, un-spoofable global stat (from /stats.model) */
.ytm-live-counter {
	font-family: var(--mono);
	font-size: var(--fs-1);
	color: var(--ink-dim);
	line-height: 1.6;
	max-width: 56ch;
	margin: 1rem 0 0;
}
.ytm-live-counter[hidden] { display: none; }
.ytm-live-counter-num { color: var(--acc-2); font-weight: 700; }

/* end-shift button: live-only, sits in the controls row */
.ytm-end-shift[hidden] { display: none; }
.ytm-end-shift { font-family: var(--mono); font-size: var(--fs-1); }

.ytm-foot {
	margin-top: 2.5rem;
	font-family: var(--mono);
	font-size: var(--fs-1);
	line-height: 1.7;
	color: var(--ink-faint);
	max-width: 62ch;
}
.ytm-foot a { color: var(--acc-2); }

/* small screens: the exhibit content is otherwise flush to the viewport, so the
   choice cards (esp. "refuse") read as clipped at the right edge. Give the
   interactive blocks a gutter so both cards clear the edge. No horizontal overflow. */
@media (max-width: 460px) {
	.ytm-intro,
	.ytm-stage,
	#start-wrap,
	.ytm-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
	.ytm-brief { margin-left: 1.1rem; margin-right: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ytm-choice:hover { transform: none; }
	.ytm-timer-bar { transition: none; }
	.ytm-gen-dot { animation: none; opacity: 0.7; transform: none; }
}