/*
 * The quiz stage.
 *
 * The annotator's chrome, because the two tools are used one after the other
 * by the same people and a different-looking workspace would read as a
 * different dataset. The palette and the rails are its palette and its rails;
 * what changes is what the left one holds -- labels rather than images -- and
 * that the right one is the thing the user actually touches, so the class rows
 * are targets rather than a setting.
 *
 * This file is standalone: `annotator.css` is not loaded on a quiz page, so
 * the shared base is restated here rather than depended on. Everything is
 * scoped to .phnuclei so a theme's rules cannot reach it, and vice versa.
 */

.phnuclei {
	--phnuclei-bg: #1b1b1b;
	--phnuclei-panel: #242424;
	--phnuclei-line: #3a3a38;
	--phnuclei-fg: #e8e8e8;
	--phnuclei-hint: #9a9a9a;
	--phnuclei-button: #333331;
	--phnuclei-button-hover: #444442;
	--phnuclei-accent: #4f7dff;
	--phnuclei-height: min(78vh, 900px);

	/* The colour popover is placed against a swatch, so the stage has to be
	   the containing block for it. */
	position: relative;
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	height: var(--phnuclei-height);
	/* Only the block margin is set here: a full-width stage takes its inline
	   margins from the theme's own alignfull rule, and a shorthand would
	   silently reset those back to zero. */
	margin-block: 1.5rem;
	border: 1px solid var(--phnuclei-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--phnuclei-bg);
	color: var(--phnuclei-fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;

	/* A click that lands between two rail rows must not select the article
	   around the stage. */
	user-select: none;
	-webkit-user-select: none;
}

.phnuclei *,
.phnuclei *::before,
.phnuclei *::after {
	box-sizing: border-box;
}

/* The `hidden` attribute carries only the UA stylesheet's `display: none`,
   which any author `display` here outranks. Everything in the component is
   toggled through `hidden`, so state it once and mean it. */
.phnuclei [hidden] {
	display: none !important;
}

.phnuclei-panel-title {
	margin: 0;
	padding: 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--phnuclei-hint);
}

.phnuclei-panel-hint {
	margin: 4px 14px 8px;
	font-size: 11px;
	color: var(--phnuclei-hint);
}

/* -------------------------------------------------------- the label rail --- */

.phnuclei-films {
	flex: 0 0 248px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 14px 0 0;
	border-right: 1px solid var(--phnuclei-line);
	background: var(--phnuclei-panel);
}

/* How much is done, which is the one number a quiz taker wants. */
.phnuclei-progress {
	flex: 0 0 auto;
	padding: 10px 14px 0;
}

.phnuclei-progress-bar {
	height: 4px;
	border-radius: 2px;
	background: #14141499;
	overflow: hidden;
}

.phnuclei-progress-bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 2px;
	background: var(--phnuclei-accent);
	transition: width 140ms ease-out;
}

.phnuclei-progress-text {
	margin: 5px 0 0;
	font-size: 11px;
	color: var(--phnuclei-hint);
	font-variant-numeric: tabular-nums;
}

.phnuclei-filters {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
	padding: 10px 14px 2px;
}

.phnuclei-filter {
	flex: 1 1 0;
	padding: 4px 6px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var(--phnuclei-button);
	color: var(--phnuclei-hint);
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}

.phnuclei-filter:hover { background: var(--phnuclei-button-hover); }
.phnuclei-filter:focus-visible { outline: 2px solid var(--phnuclei-accent); outline-offset: 1px; }

.phnuclei-filter.is-active {
	border-color: var(--phnuclei-accent);
	background: #2f3550;
	color: var(--phnuclei-fg);
}

.phnuclei-film-list {
	flex: 1 1 auto;
	min-height: 0;
	margin: 8px 0 0;
	padding: 0 8px 8px;
	overflow-y: auto;
	list-style: none;
}

.phnuclei-film-empty {
	padding: 8px 6px;
	color: var(--phnuclei-hint);
	font-size: 12px;
}

/* One heading per image. The rail is a list of regions, and without this
   there is nothing to say which slide the region being judged came off. */
.phnuclei-rail-heading {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 10px 0 4px;
	padding: 4px 6px;
	background: var(--phnuclei-panel);
	color: var(--phnuclei-hint);
	font-size: 11px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phnuclei-rail-heading:first-child { margin-top: 0; }

.phnuclei-film { margin: 0 0 4px; }

.phnuclei-film-button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: none;
	color: var(--phnuclei-fg);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.phnuclei-film-button:hover { background: #2c2c2c; }
.phnuclei-film-button:focus-visible { outline: 2px solid var(--phnuclei-accent); outline-offset: -2px; }

.phnuclei-film.is-current .phnuclei-film-button {
	border-color: var(--phnuclei-accent);
	background: #2f3550;
}

.phnuclei-film-thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 4px;
	background: #141414;
	object-fit: cover;
}

.phnuclei-film-thumb.is-missing { opacity: 0.25; }

.phnuclei-film-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.phnuclei-film-name {
	font-size: 12px;
	line-height: 1.25;
	color: var(--phnuclei-hint);
	font-variant-numeric: tabular-nums;
}

/* The answer, carried by its class colour rather than only by its name: at
   this size the colour is what is read, and it is the same colour the box is
   outlined in on the stage. */
.phnuclei-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phnuclei-chip::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--chip, transparent);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.phnuclei-chip.is-empty {
	color: var(--phnuclei-hint);
	font-style: italic;
}

/* ------------------------------------------------------------- the stage --- */

.phnuclei-stage {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	background: #141414;
}

.phnuclei-canvas {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	cursor: default;
}

.phnuclei-canvas { cursor: grab; }
.phnuclei-canvas.is-panning { cursor: grabbing; }
.phnuclei-canvas:focus { outline: none; }
.phnuclei-canvas:focus-visible { outline: 2px solid var(--phnuclei-accent); outline-offset: -2px; }

.phnuclei-arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.6);
	color: var(--phnuclei-fg);
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 120ms ease-out;
}

.phnuclei-arrow:hover { opacity: 1; }
.phnuclei-arrow:focus-visible { opacity: 1; outline: 2px solid var(--phnuclei-accent); }
.phnuclei-arrow svg { width: 20px; height: 20px; }
.phnuclei-prev { left: 10px; }
.phnuclei-next { right: 10px; }

/* The canvas draws this message too; the element is what a screen reader
   hears, and it is announced rather than painted. */
.phnuclei-flash {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------- the panel --- */

.phnuclei-panel {
	flex: 0 0 236px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 14px 0;
	border-left: 1px solid var(--phnuclei-line);
	background: var(--phnuclei-panel);
}

.phnuclei-classes {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 10px;
	overflow-y: auto;
	list-style: none;
}

/* A class row is a target here, not a setting: it is what the user clicks
   several hundred times, so it gets a hit area and a hover of its own rather
   than the annotator's tighter line. */
.phnuclei-class {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 3px 0;
	padding: 5px 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
}

.phnuclei-class:hover { background: #2c2c2c; }

.phnuclei-class.is-chosen {
	border-color: var(--phnuclei-accent);
	background: #2f3550;
}

/* The swatch is a button so recolouring is one click, as in the annotator. */
.phnuclei-swatch {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.phnuclei-swatch:focus-visible { outline: 2px solid var(--phnuclei-fg); outline-offset: 2px; }
.is-readonly .phnuclei-swatch { cursor: default; }

.phnuclei-class-label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
	color: var(--phnuclei-fg);
}

.phnuclei-class-label input { margin: 0; flex: 0 0 auto; accent-color: var(--phnuclei-accent); }
.phnuclei-class-name { overflow-wrap: anywhere; }
.phnuclei-class-count { color: var(--phnuclei-hint); font-variant-numeric: tabular-nums; }

/* The shortcut, shown as the key it is. This is the control most people end
   up using, so it is legible rather than a footnote. */
.phnuclei-class-key {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border: 1px solid var(--phnuclei-line);
	border-radius: 4px;
	background: #1b1b1b;
	font-size: 11px;
	line-height: 1;
	color: var(--phnuclei-hint);
}

.phnuclei-class.is-chosen .phnuclei-class-key {
	border-color: var(--phnuclei-accent);
	color: var(--phnuclei-fg);
}

/* How much tissue is shown around the box. Not a zoom: it reframes every
   question at once, so the set stays comparable. */
.phnuclei-context {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 4px 8px;
	padding: 12px 14px 0;
	margin-top: 8px;
	border-top: 1px solid var(--phnuclei-line);
}

.phnuclei-context-label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--phnuclei-hint);
}

.phnuclei-context-name {
	grid-column: 2;
	font-size: 11px;
	color: var(--phnuclei-hint);
}

.phnuclei-context-range {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	margin: 0;
	accent-color: var(--phnuclei-accent);
	cursor: pointer;
}

.phnuclei-panel-buttons {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 10px 0;
}

.phnuclei-panel-buttons button,
.phnuclei-popover button {
	padding: 6px 10px;
	border: 0;
	border-radius: 4px;
	background: var(--phnuclei-button);
	color: var(--phnuclei-fg);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.phnuclei-panel-buttons button:hover:not(:disabled),
.phnuclei-popover button:hover { background: var(--phnuclei-button-hover); }

.phnuclei-panel-buttons button:disabled { opacity: 0.4; cursor: default; }
.is-readonly .phnuclei-panel-buttons { display: none; }
.is-readonly .phnuclei-context { border-top: 0; margin-top: 0; }

/* ----------------------------------------------------------- the palette --- */

.phnuclei-popover {
	position: absolute;
	z-index: 20;
	padding: 12px;
	border: 1px solid var(--phnuclei-line);
	border-radius: 8px;
	background: var(--phnuclei-panel);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.phnuclei-swatches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.phnuclei-swatches button {
	width: 38px;
	height: 30px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	color: #000;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.phnuclei-swatches button[aria-pressed="true"] { border-color: var(--phnuclei-fg); }

.phnuclei-popover-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.phnuclei-custom {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--phnuclei-fg);
	cursor: pointer;
}

.phnuclei-custom input {
	width: 28px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--phnuclei-line);
	border-radius: 4px;
	background: none;
	cursor: pointer;
}

/* ------------------------------------------------------------- the page --- */

/* Let the stage use the window when the page is only there to hold it. */
.phnuclei-page .phnuclei { --phnuclei-height: min(86vh, 1100px); }

/*
 * Full width.
 *
 * A block theme constrains every child of `.is-layout-constrained` to the
 * content size and centres it; `alignfull` on the element is what releases it,
 * and the theme's own rule cancels the wrapper's global padding too. All this
 * has to add is dropping the max-width for a classic theme, which has no such
 * rule, and the side borders, which look like a mistake edge to edge.
 */
.phnuclei.is-full {
	/* `width: auto`, not 100%: the theme stretches the box with negative inline
	   margins, and an explicit width over-constrains the box model, so the
	   element would slide left and overflow rather than widen. */
	width: auto;
	max-width: none;
	border-inline: 0;
	border-radius: 0;
}

/* A classic theme has no alignfull rule, so its fixed-width container needs
   the viewport escape instead: `width="breakout"` on the shortcode. It is not
   the default because 100vw includes the scrollbar, which costs a horizontal
   one on any page long enough to scroll. */
.phnuclei.is-full.is-breakout {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

@media (max-width: 900px) {
	/* The rail turns into a strip along the top, so the stage keeps its width.
	   The rows go horizontal with it: at this size the thumbnail and the
	   answer chip are the row, and the box dimensions are not worth the
	   height they cost. */
	.phnuclei { flex-wrap: wrap; }

	.phnuclei-films {
		flex: 1 0 100%;
		max-height: 132px;
		padding: 8px 10px 0;
		border-right: 0;
		border-bottom: 1px solid var(--phnuclei-line);
	}

	.phnuclei-films .phnuclei-panel-title { display: none; }
	.phnuclei-progress { padding: 0 0 2px; }
	.phnuclei-filters { padding: 6px 0 0; }

	.phnuclei-film-list {
		display: flex;
		gap: 6px;
		margin: 6px 0 0;
		padding: 0 0 6px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.phnuclei-rail-heading { display: none; }
	.phnuclei-film { margin: 0; }
	.phnuclei-film-button { flex-direction: column; width: auto; gap: 4px; }
	.phnuclei-film-meta { max-width: 68px; }
	.phnuclei-film-name { display: none; }
	.phnuclei-chip { font-size: 11px; }

	.phnuclei-stage { flex: 1 1 60%; min-height: 300px; }
	.phnuclei-panel { flex: 1 1 236px; }
}