/* CSS Document */

#equation-editor, .CCEqnEditor {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 5px;
	background: white;
	color: black;
	position: relative;
}

#equation-editor img, .CCEqnEditor img {
	box-sizing: content-box;
}

#equation-editor .hint, .CCEqnEditor .hint {
	margin-top: 3px;
	font-size: 70%;
}

/* ----- Inputs ----- */

#latexInput, .CCEqnEditor .CCLatexInput {
	text-align: left;

	border:1px solid #003794;
	border-radius: 5px;

	padding:5px;
	margin-top: 2px;

	height: 100px;
	overflow: auto;
	resize: vertical;
	white-space: pre-wrap;  /* Prevent long lines wrapping */
	font-family: "Courier New";
}

#mathview {
	height: 150px;
}


#latexInput:focus, .CCEqnEditor .CCLatexInput:focus {
	outline: 1px solid black;
}

#equation-output, .CCEqnEditor .CCEqnOutput {
	text-align: center;
	margin-top: 5px;
	padding-top: 10px;
	height: 125px;
	background-color: beige;
	width: 100%;
	margin-bottom: 5px;
	border: 1px dashed grey;
	background-color: #eee;
  justify-content: center;
	align-items: center;

	overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#history button, .CCEqnEditor .CCHistory button {
    background-color: transparent;
    border: 0;
}

#history button:hover, .CCEqnEditor .CCHistory button:hover {
	 background-color: #d9d9d9;
}

#export_options, .CCEqnEditor .CCExportOptions {
	display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto;
    column-gap: 3px;

	padding-top: 5px;
	z-index:10;
	margin:1px;
}

#export_options > div:first-child, .CCEqnEditor .CCExportOptions > div:first-child {
	width:104px;
}

#export_options .eOptions, .CCEqnEditor .CCExportOptions .eOptions {
	display: none;
}

#export_options select, #export_options button,
.CCEqnEditor .CCExportOptions select, .CCEqnEditor .CCExportOptions button {
	width:100px;
	height:32px;
	background-color: #003794;
	border: 0px;
	border-radius: 5px;
	padding:5px 0 5px 10px;
	margin:1px;
	color:white;
	text-align: left;
	vertical-align: middle;
	font-size:1.4ex;
}

#export_area, .CCEqnEditor .CCExportArea {
	margin:1px;
	margin-top: 5px;
	padding:5px;
	border:1px dashed #f89a2d;
	background-color: #f89a2d12;
	word-wrap: break-word;
    width: 100%;
}

#exportmessage {
	text-align: left;
	font-size: 70%;
	color:#000;
}

#eqcoderaw {
	border:1px solid #dddddd;
	background: #fefed0;
	color:#000;
	padding:3px 10px;
	font-size: 1.6ex;
	min-height: 70px;
}

#downloadBtn {
	background-color: #0E8324 !important;
}

@media screen and (max-width: 400px) {
    #latexInput, .CCEqnEditor .CCLatexInput {
        height: 100px;
    }
}
/* -------------------------------------------------------------------------
   ---- LaTeX toggle ----
   -------------------------------------------------------------------------
   The maths view is always on screen - it is the equation, and there is never
   a reason to hide it. The only real choice is whether the LaTeX markup shows
   underneath, so there is one control rather than a three-way switch. It is
   still drawn as a pressed/unpressed button rather than a checkbox: it sits
   beside the history buttons and needs to read as part of the same row. */

#editor-bar, .CCEqnEditor .CCEditorBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

/* Sits directly under the equation, as a quiet control on the equation block
   rather than another thing competing with the history buttons above the
   toolbar. The markup it reveals appears above the equation, not below it.
   
   Shares that line with the export buttons: both act on the equation above, and
   a line carrying four small buttons at one end had room for them. margin-right
   pushes everything after it - the toast and the buttons - to the right edge, so
   the switches read from the left and the buttons stay aligned under the
   equation's right edge. */
#view-toggle, .CCEqnEditor .CCViewToggle {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   ---- Switch ----
   -------------------------------------------------------------------------
   Matched to the auto-brackets switch the History menu draws at the other end
   of the same bar: 28x16 track, 12x12 knob, #4caf50 when on. Two controls of
   the same kind on one row should not look like two different things.

   The checkbox is clipped rather than display:none - hiding it outright, as
   the History menu's own switch does, takes it out of the accessibility tree
   and off the keyboard entirely. Clipped, it still focuses and Space still
   toggles it. */

.CCEqnEditor .cc-switch {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	user-select: none;
}

.CCEqnEditor .cc-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.CCEqnEditor .cc-switch-track {
	display: inline-block;
	width: 28px;
	height: 16px;
	background: #ccc;
	border-radius: 8px;
	position: relative;
	transition: background 0.2s;
	vertical-align: middle;
	flex: 0 0 auto;
}

.CCEqnEditor .cc-switch-knob {
	display: block;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: left 0.2s;
}

.CCEqnEditor .cc-switch input:checked + .cc-switch-track { background: #4caf50; }
.CCEqnEditor .cc-switch input:checked + .cc-switch-track .cc-switch-knob { left: 14px; }

.CCEqnEditor .cc-switch input:focus-visible + .cc-switch-track {
	outline: 2px solid #003794;
	outline-offset: 2px;
}

.CCEqnEditor .cc-switch-label {
	font-size: 11px;
	color: #54647c;
	white-space: nowrap;
}

.CCEqnEditor .cc-switch input:checked ~ .cc-switch-label { color: #003794; font-weight: 600; }

/* The MathView's own wrapper (.CCMathViewWrap) carries the border and padding,
   so this container only has to control whether it is in the flow at all. */
#mathview, .CCEqnEditor .CCMathViewHost { margin-top: 2px; }

#equation-editor[data-latex="off"] #latexInput,
.CCEqnEditor[data-latex="off"] .CCLatexInput { display: none; }

/* -------------------------------------------------------------------------
   ---- The equation row: maths view, with its download buttons beside it ----
   -------------------------------------------------------------------------
   A flex row rather than buttons absolutely positioned inside the view: a
   wide equation would slide underneath them otherwise. min-width:0 on the
   view itself so a long equation scrolls within its own box instead of
   pushing the buttons off the edge. */

/* The equation, then its buttons underneath on the right.
   
   They used to sit in a column beside it, which cost the equation their whole width for the
   life of the page whether anybody exported anything or not. Below it they cost one line, and
   the equation gets the full width of the editor - which is what a long integral wanted. */
.mathview-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* The single spacing between the equation and the controls under it. */
	gap: 6px;
	margin-top: 2px;
	/* And the separation from whatever follows the block, which the maths view's own bottom
	   margin used to provide before that margin was turned off inside this row. */
	margin-bottom: 10px;
}

/* The two panes and the suggestion panel side by side.
   
   The panel is a fixed rail rather than a share of the width: it holds one equation per row and
   a column that grew with the window would leave each row mostly empty, while the equation being
   written is the thing that actually wants the space. minmax(0,1fr) on the panes so a long
   equation scrolls inside its own box instead of widening the grid and squeezing the rail. */
.editor-with-predictor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 12px;
	/* Deliberately not align-items:start. The rail has to stretch to the row's height, which
	   is what gives the panel inside it something to be bounded by. */
}

.editor-with-predictor > .editor-panes { min-width: 0; }

/* The panes decide how tall this row is, and the suggestions live within it.
   
   The rail is the grid item and is empty as far as layout is concerned; the panel inside is
   absolutely positioned, so a list of twenty suggestions contributes nothing to the row height
   and the column beside the equation can never be taller than the equation. The panel then
   fills the rail, and its own list scrolls - see .CCPredictor in the bundle, which carries the
   min-height:0 that lets it. */
.predictor-rail {
	position: relative;
	min-height: 0;

	/* A grey ground, and nothing else. The suggestions are white cards with a pale border of
	   their own, and on a white page they had nothing to sit on and no edge the eye could find;
	   a tint is enough to say where the panel is. A border as well was one line too many next to
	   the maths view's own.

	   Deliberately here and not in the bundle: a host page frames the panel to match its own
	   design, and the editor should not arrive with an opinion about it.

	   border-box is on for everything (style.css), so the 250px track still measures 250px and
	   the panel gets what is left inside.

	   The gap has to be said twice, because the panel is laid out two different ways. Below
	   720px it is in the flow and this padding insets it. Above, it is absolute, and an absolute
	   child's containing block is its parent's *padding* box - the area inside the border,
	   padding included - so inset:0 covered the padding and the grey closed right up against the
	   suggestions. Measured: 1px inset where 9 was meant. Hence the custom properties, and the
	   matching inset on the rule below.

	   Less room above than around: what sits at the top is the search label, which is small,
	   floats over the list and reads as a tab of the panel rather than as content needing a
	   margin. The sides and bottom keep the full gap, where real cards meet the edge. */
	--predictor-frame-gap: 8px;
	--predictor-frame-gap-top: 3px;
	background: #f5f7fa;
	border-radius: 4px;
	padding: var(--predictor-frame-gap-top) var(--predictor-frame-gap) var(--predictor-frame-gap);
}

.predictor-rail > #predictor {
	position: absolute;
	/* Not 0 - see the note on --predictor-frame-gap above. */
	inset: var(--predictor-frame-gap-top) var(--predictor-frame-gap) var(--predictor-frame-gap);
}

/* Under the equation on a narrow screen, where a 250px rail beside it would leave neither
   enough room. The panel's own grid then fills the width with as many columns as fit, which is
   what auto-fill is for - see .CCPredictor in the bundle.
   
   Back into the flow here: there is no column beside it to match, so it is given a height of
   its own rather than inheriting one, and scrolls at that. */
@media (max-width: 720px) {
	.editor-with-predictor { grid-template-columns: 1fr; }
	.predictor-rail { position: static; }
	.predictor-rail > #predictor { position: static; max-height: 320px; }
}

/* The equation sits in the middle of its box rather than against the top of it. The box is
   96px at least and usually more, so a one-line equation was floating at the top with a hand's
   width of blank under it. A column flex with justify-content:center does the centring; the
   view keeps its full width, so clicking anywhere in the box still lands in the editable
   rather than beside it. */
.mathview-row > #mathview,
.mathview-row > .CCMathViewHost {
	flex: 1 1 auto;
	min-width: 0;
	/* Both margins off inside this row. The bottom one was separating the view from whatever
	   came after it when the buttons sat alongside; now they are under it, and it stacked with
	   the row's own gap and the actions' margin to put 16px between the box and its buttons. */
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mathview-row > #mathview > .CCMathView,
.mathview-row > .CCMathViewHost > .CCMathView {
	width: 100%;
}

.mathview-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	/* Buttons against the right edge, under the right edge of the equation; the switches take
	   the left of the same line via their own margin-right:auto. Wraps as a whole when the two
	   groups no longer fit, rather than letting either overflow. */
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px 10px;
	/* No top margin: the row's gap is the one spacing between the equation and its controls. */
}

/* Two by two rather than a column of four: it stays inside the maths view's
   own 96px minimum height, so the row does not grow taller than the equation
   it belongs to. There is no "Download" label above the grid: the tinted fill
   marks the four as one group of actions, and each button says what it gives. */
/* Four across rather than two by two, now that there is a row's width to put them in. Flex
   rather than grid so they wrap instead of overflowing when the editor is narrow, and wrap
   towards the right so the group stays against the edge it is aligned to. */
.mathview-actions-grid {
	order: 1;                 /* last on the line, whatever the markup order - see #cc-toast */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px;
}

.mathview-actions-grid button {
	font-size: 1.2ex;
	line-height: 1.3;
	padding: 4px 8px;
	margin: 0;
	border: 1px solid #b7c8e3;
	border-radius: 3px;
	background: #e4ecf9;
	color: #003794;
	cursor: pointer;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
}

.mathview-actions-grid button:hover {
	background: #c5d8f2;
	border-color: #003794;
}

.mathview-actions-grid button:active { background: #a9c3ea; }

/* Confirmation, in place. A clipboard write is invisible - without this the only
   evidence anything happened is finding out later whether the paste worked. The
   label is swapped for ~1.4s, so the width is held steady to stop the 2x2 grid
   twitching as "LaTeX" becomes "Press Ctrl+C". */
.mathview-actions-grid button.is-done {
	background: #1f8b57;
	border-color: #1f8b57;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The one that is not a clipboard action. A file is a different promise from a
   paste, and the arrow is the cheapest way to say so without a second word. */
.mathview-actions-grid button.is-save::after {
	content: " \2193";
	opacity: .65;
	font-weight: 700;
}
.mathview-actions-grid button.is-save.is-done::after { content: none; }

/* Three switches now, not one, and sharing a line with the export buttons - so a little
   closer together than when they had the width to themselves. */
#view-toggle, .CCEqnEditor .CCViewToggle { gap: 6px 14px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   ---- Export, behind a disclosure ----
   -------------------------------------------------------------------------
   Export sits with the download buttons because it is the same kind of act -
   taking the equation somewhere else - and spans both columns so it reads as
   the wider, less common one of the five. */

#export-toggle {
	grid-column: 1 / -1;
}

#export-toggle:after {
	content: " \25be";        /* filled down-pointing triangle */
	display: inline-block;
	margin-left: 2px;
}

#export-toggle[aria-expanded="true"] {
	background: #003794;
	border-color: #003794;
	color: #fff;
}

#export-toggle[aria-expanded="true"]:after { content: " \25b4"; }

/* The panel picks up the same quiet bordered-box treatment the rest of the
   page uses, rather than the dashed orange it had - that colour was carrying
   "this is the export bit" on its own when the button above now says so. */
#export-panel {
	margin-top: 8px;
	border: 1px solid #dbe2ec;
	border-radius: 5px;
	overflow: hidden;
}

.export-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 10px;
	background: #f2f6fc;
	border-bottom: 1px solid #dbe2ec;
}

.export-head label {
	font-size: 9px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #54647c;
	font-weight: 700;
	margin: 0;
}

.export-head select {
	height: 28px;
	padding: 0 8px;
	margin: 0;
	border: 1px solid #c3d0e2;
	border-radius: 3px;
	background: #fff;
	color: #003794;
	font-size: 1.3ex;
	width: auto;
	min-width: 130px;
}

#export-copy {
	margin: 0 0 0 auto;
	padding: 4px 14px;
	border: 1px solid #c3d0e2;
	border-radius: 3px;
	background: #fff;
	color: #003794;
	font-size: 1.2ex;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
}

#export-copy:hover { background: #e4ecf9; border-color: #003794; }

#export-copy.is-copied {
	background: #0e8324;
	border-color: #0e8324;
	color: #fff;
}

#export_area, .CCEqnEditor .CCExportArea {
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #1c2530;
	font-family: "Courier New", monospace;
	font-size: 1.3ex;
	line-height: 1.6;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	width: 100%;
	cursor: pointer;
	min-height: 2.6em;
}

#export_area:hover { background: #f7f9fd; }

/* -------------------------------------------------------------------------
   ---- Inside a host editor's dialog (CKEditor 5 balloon, TinyMCE modal) ----
   ------------------------------------------------------------------------- */

/* MathView adds .CCMathViewWrap to the container it is given (and nothing
   else - not .CCMathViewHost - so the selector must not require both). The
   API injects its own rule for this at load time, which sits earlier in the
   cascade than a host dialog's reset; restated here at a weight the reset
   cannot beat. */
.CCEqnEditor .CCMathViewWrap {
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	padding: 14px 12px;
	/* 96px rather than the API's own 64px: on this page the maths view is the
	   thing the visitor came to try, and a taller panel gives a fraction or an
	   integral room to breathe. */
	min-height: 96px;
}

/* A balloon is sized to its contents, and the equation editor is a wide thing
   inside a narrow column. Give it a usable working width without letting it
   push past a phone's viewport. */
.ck-eqneditor-form .CCEqnEditor {
	width: min(760px, 92vw);
	box-sizing: border-box;
	flex: 1 0 100%;
	margin-bottom: 6px;
}

/* CKEditor lays a form's children out in a row by default, which put two
   icon-sized buttons beside a 760px editor. A column with the buttons on
   their own right-aligned row reads as a dialog. */
.ck-eqneditor-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	padding: 10px;
}

.ck-eqneditor-form > .ck-button-save,
.ck-eqneditor-form > .ck-button-cancel {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   ---- Confirmation for the copy buttons ----
   -------------------------------------------------------------------------
   Small green text beside the buttons, not a banner across the editor. A
   clipboard write is invisible, so something has to say it happened - but the
   saying of it should not move anything.

   Hence visibility rather than display: an empty message still occupies its
   place in the row, so the buttons do not shuffle sideways when one appears or
   clears. It used to sit under the buttons in their column and reserve two
   lines of height for the same reason; in a row it reserves width instead, and
   the height it was taking from the maths view comes back. */
#cc-toast {
	visibility: hidden;
	/* Between the switches and the buttons: a message about what was just pressed belongs
	   beside them, and putting it after would push the buttons off the right edge they are
	   aligned to. Ordering the buttons last rather than the toast first, because an empty
	   toast still takes a gap - in front of everything it indented the switches away from the
	   equation's left edge, and in the middle that gap falls where the spare width already is. */
	order: 0;
	margin: 0;
	font-size: 10.5px;
	line-height: 1.25;
	font-weight: 600;
	color: #136b42;
	text-align: right;
}

#cc-toast.is-shown {
	visibility: visible;
	animation: cc-toast-in .18s ease-out;
}

@keyframes cc-toast-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#cc-toast.is-shown { animation: none; }
}