/**
 * Front-end styles for the QSM "Case Study" question type (split-screen layout).
 *
 * @package QSM_APT
 */

.qsm-apt-case-study {
	display: flex;
	gap: 16px;
	align-items: stretch;
	width: 100%;
	margin: 12px 0;
	box-sizing: border-box;
}

.qsm-apt-case-study * {
	box-sizing: border-box;
}

.qsm-apt-cs-pane {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid #d9dde3;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

/* Toolbars ---------------------------------------------------------------- */
.qsm-apt-cs-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px;
	background: #f5f6f8;
	border-bottom: 1px solid #e3e6ea;
}

.qsm-apt-cs-toolbar button {
	cursor: pointer;
	border: 1px solid #cfd4db;
	background: #fff;
	color: #1f2933;
	border-radius: 5px;
	padding: 4px 9px;
	font-size: 13px;
	line-height: 1.4;
	min-width: 30px;
}

.qsm-apt-cs-toolbar button:hover {
	background: #eef1f5;
}

.qsm-apt-cs-search {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 140px;
}

.qsm-apt-cs-search-input {
	flex: 1 1 auto;
	min-width: 90px;
	padding: 4px 8px;
	border: 1px solid #cfd4db;
	border-radius: 5px;
	font-size: 13px;
}

.qsm-apt-cs-search-count {
	font-size: 12px;
	color: #6b7480;
	white-space: nowrap;
}

/* Icon buttons (left-pane toolbar) --------------------------------------- */
.qsm-apt-cs-toolbar button.qsm-apt-cs-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	min-width: 0;
	line-height: 0;
	color: #3a4653;
}

.qsm-apt-cs-iconbtn svg {
	display: block;
}

.qsm-apt-cs-iconbtn.is-active {
	background: #dbe6ff;
	border-color: #9db8ff;
	color: #12263a;
}

.qsm-apt-cs-toolbar-sep {
	width: 1px;
	align-self: stretch;
	margin: 2px 3px;
	background: #d9dde3;
}

.qsm-apt-cs-zoom-level {
	font-size: 12px;
	color: #6b7480;
	min-width: 40px;
	text-align: center;
	white-space: nowrap;
}

/* The search box is collapsed by default; the search icon reveals it. It sits on
   its own row under the icons (flex-wrap). */
.qsm-apt-cs-search {
	flex: 1 1 100%;
	margin-top: 6px;
}

.qsm-apt-cs-search[hidden] {
	display: none;
}

/* Case (left) pane -------------------------------------------------------- */
.qsm-apt-cs-case {
	/* Basis 0: the case text adds no height of its own to the row, so the row is
	   as tall as the ANSWER side and the case box fills exactly that, scrolling
	   inside. (A fixed max-height cap left a blank band under the case whenever
	   the answer side was taller.) */
	flex: 1 1 0;
	padding: 14px 16px;
	overflow: auto;
	min-height: 150px;
	line-height: 1.6;
	color: #1f2933;
	/* The student can drag the bottom-right corner to make the case box taller
	   or shorter; once they do, it keeps their height (see .is-resized). */
	resize: vertical;
	-webkit-user-select: text;
	user-select: text;
}

/* Student annotations ------------------------------------------------------ */

/* Highlight colours. Each maps to a `qsm-apt-cs-hl-<slug>` from
   qsm_apt_cs_highlight_colours() and is used for BOTH the toolbar swatch and the
   applied <mark>. None of them is blue — the search highlighter owns blue, and a
   student's own highlight must never read as a search hit. */
.qsm-apt-cs-case mark.qsm-apt-cs-userhl {
	background: #ffe08a;
	padding: 0 1px;
}

.qsm-apt-cs-case mark.qsm-apt-cs-hl-yellow { background: #ffe08a; }
.qsm-apt-cs-case mark.qsm-apt-cs-hl-green  { background: #b7f0b1; }
.qsm-apt-cs-case mark.qsm-apt-cs-hl-pink   { background: #ffc4dd; }
.qsm-apt-cs-case mark.qsm-apt-cs-hl-orange { background: #ffcf99; }
.qsm-apt-cs-case mark.qsm-apt-cs-hl-purple { background: #ddc9ff; }

/* Bold / underline the student applied. Scoped to the case pane so they cannot
   affect the author's own markup elsewhere. */
.qsm-apt-cs-case strong.qsm-apt-cs-userbold {
	font-weight: 700;
}

.qsm-apt-cs-case u.qsm-apt-cs-userline {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Colour swatches in the toolbar. */
.qsm-apt-cs-hl-colours {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0 2px;
}

.qsm-apt-cs-toolbar button.qsm-apt-cs-hl-swatch {
	width: 16px;
	height: 16px;
	min-width: 16px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 50%;
	cursor: pointer;
	line-height: 0;
}

.qsm-apt-cs-toolbar button.qsm-apt-cs-hl-swatch.is-active {
	outline: 2px solid #2b6cb0;
	outline-offset: 1px;
}

.qsm-apt-cs-hl-swatch.qsm-apt-cs-hl-yellow { background: #ffe08a; }
.qsm-apt-cs-hl-swatch.qsm-apt-cs-hl-green  { background: #b7f0b1; }
.qsm-apt-cs-hl-swatch.qsm-apt-cs-hl-pink   { background: #ffc4dd; }
.qsm-apt-cs-hl-swatch.qsm-apt-cs-hl-orange { background: #ffcf99; }
.qsm-apt-cs-hl-swatch.qsm-apt-cs-hl-purple { background: #ddc9ff; }

.qsm-apt-cs-case mark.qsm-apt-cs-hit {
	background: #b5e0ff;
	padding: 0 1px;
}

.qsm-apt-cs-case mark.qsm-apt-cs-hit.is-current {
	background: #ffb347;
}

/* Question title / description (left pane) -------------------------------- */
.qsm-apt-cs-qtitle {
	font-size: 1.05em;
	font-weight: 700;
	color: #12263a;
	margin: 0 0 8px;
}

.qsm-apt-cs-description {
	margin: 0 0 4px;
}

/* Additional info (custom field, e.g. case background) — below the answers. */
.qsm-apt-cs-additional-info {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e3e6ea;
	color: #1f2933;
}

/* Sub-question list (left pane) ------------------------------------------ */
.qsm-apt-cs-subquestions {
	margin-top: 16px;
	padding-top: 14px;
	/* A strong rule so the case reads as clearly separate from the requirement. */
	border-top: 3px solid #000;
}

.qsm-apt-cs-subquestion {
	display: flex;
	gap: 6px;
	margin: 0 0 8px;
	line-height: 1.55;
}

.qsm-apt-cs-subq-text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: justify;
}

.qsm-apt-cs-subq-label {
	font-weight: 600;
	color: #2b3a4b;
	flex: 0 0 auto;
}

.qsm-apt-cs-notes {
	border-top: 1px solid #e3e6ea;
	padding: 10px 12px;
	background: #fcfcfd;
}

.qsm-apt-cs-notes-label {
	display: block;
	font-size: 12px;
	color: #6b7480;
	margin-bottom: 4px;
}

.qsm-apt-cs-notes-area {
	width: 100%;
	resize: vertical;
	border: 1px solid #cfd4db;
	border-radius: 5px;
	padding: 8px;
	font-size: 13px;
	line-height: 1.5;
}

/* Answer (right) pane ----------------------------------------------------- */
.qsm-apt-cs-answer-head {
	padding: 10px 12px;
	font-weight: 600;
	color: #2b3a4b;
	background: #f5f6f8;
	border-bottom: 1px solid #e3e6ea;
}

.qsm-apt-cs-answer-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 8px 0;
}

.qsm-apt-cs-answer-tab {
	cursor: pointer;
	border: 1px solid #cfd4db;
	border-bottom: none;
	background: #eef1f5;
	color: #3a4653;
	border-radius: 6px 6px 0 0;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
}

.qsm-apt-cs-answer-tab.is-active {
	background: #fff;
	color: #12263a;
	box-shadow: inset 0 -2px 0 #3a7afe;
}

.qsm-apt-cs-answer-panels {
	position: relative;
	flex: 1 1 auto;
	padding: 12px;
	overflow: auto;
}

/* Inactive panels are moved off-screen (NOT display:none) so their TinyMCE
   editor still initialises with a real width. */
.qsm-apt-cs-answer-panel:not(.is-active) {
	position: absolute;
	left: -99999px;
	top: 0;
	width: 100%;
}

.qsm-apt-cs-answer-subq {
	text-align: justify;
	margin: 0 0 10px;
	padding: 8px 10px;
	background: #f7f9fc;
	border: 1px solid #e3e6ea;
	border-radius: 6px;
	line-height: 1.5;
	color: #2b3a4b;
}

/* Give the wp_editor a sensible minimum height. */
.qsm-apt-cs-answer-panel .wp-editor-wrap {
	min-height: 220px;
}

/* Plain-textarea fallback (editor unavailable): same default height, draggable. */
.qsm-apt-cs-answer-panel .wp-editor-area,
.qsm-apt-cs-answer-editor {
	min-height: 400px;
	resize: vertical;
}

/* The hidden combined field that actually submits the answer (kept in the DOM so
   QSM's required-field validation can read its value). */
.qsm-apt-cs-combined {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Responsive: stack the two panes on narrow screens. */
@media (max-width: 782px) {
	.qsm-apt-case-study {
		flex-direction: column;
	}

	/* Stacked: there is no answer side alongside to size against, so the case
	   box takes its content height, capped. */
	.qsm-apt-cs-case {
		flex: 0 0 auto;
		max-height: 45vh;
	}
}

/* Once the student has dragged the case box, honour their height: no cap, and no
   flex-grow (which would otherwise stretch it back to fill the pane). */
.qsm-apt-cs-case.is-resized {
	flex: 0 0 auto;
	max-height: none;
}