/* Function graph plotter. Everything is scoped under .grapher; the colours
   are variables so the site can restyle them.
   Every selector starts with .grapher:is(*,#gx#gx#gx): :is() counts as its most
   specific argument (three ids) but matches any element, so these rules beat the
   site's own control styles, e.g. the problem-solver pages' "#middlecont button"
   rules that carry two ids. */

.grapher:is(*,#gx#gx#gx) {
	--g-bg: #ffffff;
	--g-grid: #dde1e6;
	--g-grid-minor: #f0f2f4;
	--g-axis: #4b525a;
	--g-text: #4b525a;
	--g-strip: rgba(255, 255, 255, .88);
	--g-label-bg: #ffffff;
	--g-label-text: #1f2328;
	--g-key: #5f6670;
	--g-line: #d6dade;
	--g-panel: #f6f7f9;
	--g-ink: #1f2328;
	--g-muted: #5f6670;
	--g-accent: #1f6fd1;
	--g-accent-soft: #e7f0fb;
	--g-err: #c92a2a;
	--g-h: max(300px, 55vh);
	position: relative;
	box-sizing: border-box;
	margin: 12px 0 20px;
	min-height: calc(var(--g-h) + 170px);
	color: var(--g-ink);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}
@media (min-width: 900px) {
	.grapher:is(*,#gx#gx#gx) { --g-h: max(420px, min(70vh, 640px)); min-height: var(--g-h); }
}
.grapher:is(*,#gx#gx#gx) *, .grapher:is(*,#gx#gx#gx) *::before, .grapher:is(*,#gx#gx#gx) *::after { box-sizing: border-box; }
.grapher:is(*,#gx#gx#gx) [hidden] { display: none !important; }
.grapher:is(*,#gx#gx#gx) :where(button, input, select, textarea) { margin: 0; min-height: 0; vertical-align: middle; font-family: inherit; }
.grapher:is(*,#gx#gx#gx) button { font: inherit; color: inherit; cursor: pointer; }
.grapher:is(*,#gx#gx#gx) :focus-visible { outline: 2px solid var(--g-accent); outline-offset: 1px; }
.grapher:is(*,#gx#gx#gx) .g-noscript { padding: 16px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-panel); }

/* layout: the graph on top, the list below; side by side from 900 px */
.grapher:is(*,#gx#gx#gx) .g-wrap { display: flex; flex-direction: column; gap: 10px; }
.grapher:is(*,#gx#gx#gx) .g-graph {
	position: relative;
	height: var(--g-h);
	border: 1px solid var(--g-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--g-bg);
}
.grapher:is(*,#gx#gx#gx) .g-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--g-line);
	border-radius: 10px;
	background: var(--g-panel);
}
@media (min-width: 900px) {
	.grapher:is(*,#gx#gx#gx) .g-wrap { flex-direction: row; align-items: stretch; }
	.grapher:is(*,#gx#gx#gx) .g-panel { order: -1; flex: none; width: 320px; height: var(--g-h); overflow-y: auto; }
	.grapher:is(*,#gx#gx#gx) .g-graph { flex: 1; min-width: 0; }
}

/* the graph */
.grapher:is(*,#gx#gx#gx) .g-canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; outline-offset: -3px; }
.grapher:is(*,#gx#gx#gx) .g-canvas canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.grapher:is(*,#gx#gx#gx) .g-toolbar {
	position: absolute; top: 8px; right: 8px;
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;
	max-width: calc(100% - 16px);
}
.grapher:is(*,#gx#gx#gx) .g-tbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: 1px solid var(--g-line); border-radius: 8px;
	background: rgba(255, 255, 255, .94);
	color: var(--g-ink);
}
.grapher:is(*,#gx#gx#gx) .g-tbtn:hover { background: var(--g-accent-soft); border-color: #b9cbe3; }
.grapher:is(*,#gx#gx#gx) .g-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grapher:is(*,#gx#gx#gx) .g-icon .g-fill { fill: currentColor; stroke: none; }
.grapher:is(*,#gx#gx#gx) .g-icon .g-dots { stroke-width: 3.2; }
.grapher:is(*,#gx#gx#gx) .g-coords {
	position: absolute; left: 8px; bottom: 6px;
	font-size: 12px; color: var(--g-muted);
	pointer-events: none; font-variant-numeric: tabular-nums;
}
.grapher:is(*,#gx#gx#gx) .g-note, .grapher:is(*,#gx#gx#gx) .g-toast {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
	padding: 4px 12px; border-radius: 999px;
	font-size: 13px; white-space: nowrap; pointer-events: none;
}
.grapher:is(*,#gx#gx#gx) .g-note { background: rgba(255, 255, 255, .94); border: 1px solid var(--g-line); color: var(--g-muted); }
.grapher:is(*,#gx#gx#gx) .g-toast { bottom: 40px; background: #1f2328; color: #fff; }
.grapher:is(*,#gx#gx#gx) .g-graph > .g-panel-btn { position: absolute; top: 8px; left: 8px; display: none; }
.grapher:is(*,#gx#gx#gx).g-collapsed .g-graph > .g-panel-btn, .grapher:is(*,#gx#gx#gx).g-full .g-graph > .g-panel-btn, .grapher:is(*,#gx#gx#gx).g-fs .g-graph > .g-panel-btn { display: inline-flex; }
.grapher:is(*,#gx#gx#gx).g-collapsed:not(.g-open) .g-panel { display: none; }
.grapher:is(*,#gx#gx#gx).g-collapsed { min-height: var(--g-h); }

/* expression rows */
.grapher:is(*,#gx#gx#gx) .g-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.grapher:is(*,#gx#gx#gx) .g-row {
	display: grid;
	grid-template-columns: 16px 30px minmax(0, 1fr) auto;
	align-items: start;
	gap: 2px 4px;
	padding: 6px 4px 6px 2px;
	border: 1px solid var(--g-line);
	border-left: 4px solid var(--g-line);
	border-radius: 8px;
	background: #fff;
}
.grapher:is(*,#gx#gx#gx) .g-row:focus-within { border-color: #b9cbe3; border-left-color: var(--c); }
.grapher:is(*,#gx#gx#gx) .g-row.g-err { border-left-color: var(--g-err); }
.grapher:is(*,#gx#gx#gx) .g-row.g-dragging { position: relative; z-index: 5; box-shadow: 0 6px 18px rgba(26, 31, 39, .18); opacity: .95; }
.grapher:is(*,#gx#gx#gx) .g-row.g-drop-before { box-shadow: 0 -3px 0 var(--g-accent); }
.grapher:is(*,#gx#gx#gx) .g-handle { display: flex; align-items: center; justify-content: center; height: 36px; color: #a7adb4; cursor: grab; touch-action: none; }
.grapher:is(*,#gx#gx#gx) .g-handle .g-icon { width: 16px; height: 16px; }
.grapher:is(*,#gx#gx#gx) .g-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 36px; padding: 0; border: 0; background: none; }
.grapher:is(*,#gx#gx#gx) .g-dot span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 3px solid var(--c); }
.grapher:is(*,#gx#gx#gx) .g-dot.g-off span { background: #fff; }
.grapher:is(*,#gx#gx#gx) .g-row > .g-body { grid-column: 3 / -1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.grapher:is(*,#gx#gx#gx) .g-input {
	width: 100%; height: 36px; padding: 4px 8px;
	border: 1px solid #b9c0c8; border-radius: 6px;
	background: #fff; color: var(--g-ink);
	font-size: 16px; line-height: 1.3; font-family: inherit;
}
.grapher:is(*,#gx#gx#gx) .g-input:hover { border-color: #8f98a3; }
.grapher:is(*,#gx#gx#gx) .g-input:focus { border-color: var(--g-accent); box-shadow: 0 0 0 2px var(--g-accent-soft); background: #fff; outline: none; }
.grapher:is(*,#gx#gx#gx) .g-under-input { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 0 8px; }
.grapher:is(*,#gx#gx#gx) .g-under-input:has(> [hidden] + [hidden]) { display: none; }
.grapher:is(*,#gx#gx#gx) .g-preview { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-size: 15px; padding: 2px 0; scrollbar-width: thin; }
.grapher:is(*,#gx#gx#gx) .g-preview .katex { font-size: 1.05em; }
.grapher:is(*,#gx#gx#gx) .g-badge {
	flex: none; margin-left: auto;
	padding: 1px 8px; border-radius: 999px;
	background: #eef0f3; color: var(--g-muted);
	font-size: 11px; line-height: 18px; white-space: nowrap;
}
.grapher:is(*,#gx#gx#gx) .g-error { padding: 0 8px; color: var(--g-err); font-size: 13px; }
.grapher:is(*,#gx#gx#gx) .g-adds { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 2px; }
.grapher:is(*,#gx#gx#gx) .g-add-slider {
	padding: 3px 10px; border: 1px solid #b9cbe3; border-radius: 999px;
	background: var(--g-accent-soft); color: #174f96; font-size: 13px;
}
.grapher:is(*,#gx#gx#gx) .g-row > .g-slider { grid-column: 2 / -1; padding: 0 4px 2px 0; }
.grapher:is(*,#gx#gx#gx) .g-prange, .grapher:is(*,#gx#gx#gx) .g-slider { display: flex; align-items: center; gap: 6px; padding: 0 8px 2px; font-size: 14px; color: var(--g-muted); }
.grapher:is(*,#gx#gx#gx) .g-rin, .grapher:is(*,#gx#gx#gx) .g-smin, .grapher:is(*,#gx#gx#gx) .g-smax {
	width: 4.6em; height: 30px; padding: 2px 6px;
	border: 1px solid var(--g-line); border-radius: 6px;
	font-size: 15px; font-family: inherit; color: var(--g-ink); background: #fff;
}
.grapher:is(*,#gx#gx#gx) .g-smin, .grapher:is(*,#gx#gx#gx) .g-smax { width: 3.6em; text-align: center; font-size: 14px; }
.grapher:is(*,#gx#gx#gx) .g-bad { border-color: var(--g-err) !important; }
.grapher:is(*,#gx#gx#gx) .g-range-input { flex: 1; min-width: 60px; accent-color: var(--c, var(--g-accent)); }
.grapher:is(*,#gx#gx#gx) .g-btns { display: flex; }
.grapher:is(*,#gx#gx#gx) .g-ibtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 36px; padding: 0;
	border: 0; border-radius: 6px; background: none; color: var(--g-muted);
}
.grapher:is(*,#gx#gx#gx) .g-ibtn:hover { background: #eef0f3; color: var(--g-ink); }
.grapher:is(*,#gx#gx#gx) .g-play { width: 32px; height: 30px; border: 1px solid var(--g-line); background: #fff; }
.grapher:is(*,#gx#gx#gx) .g-play .g-icon { width: 16px; height: 16px; }

/* under the list */
.grapher:is(*,#gx#gx#gx) .g-under { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grapher:is(*,#gx#gx#gx) .g-btn {
	display: inline-flex; align-items: center; gap: 4px;
	height: 36px; padding: 0 12px;
	border: 1px solid var(--g-line); border-radius: 8px;
	background: #fff; font-size: 14px;
}
.grapher:is(*,#gx#gx#gx) .g-btn:hover { background: var(--g-accent-soft); border-color: #b9cbe3; }
.grapher:is(*,#gx#gx#gx) .g-btn .g-icon { width: 18px; height: 18px; }
.grapher:is(*,#gx#gx#gx) .g-add { font-weight: 600; color: #174f96; }
.grapher:is(*,#gx#gx#gx) .g-clear { margin-left: auto; color: var(--g-muted); }
.grapher:is(*,#gx#gx#gx) .g-btn:disabled { opacity: .5; cursor: default; }
.grapher:is(*,#gx#gx#gx) .g-limit { font-size: 13px; color: var(--g-muted); }

/* popovers */
.grapher:is(*,#gx#gx#gx) .g-pop {
	position: absolute; z-index: 30;
	min-width: 210px; max-width: min(320px, calc(100% - 8px));
	padding: 10px;
	border: 1px solid var(--g-line); border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(26, 31, 39, .16);
	font-size: 14px;
}
.grapher:is(*,#gx#gx#gx) .g-pop-group { margin-bottom: 8px; }
.grapher:is(*,#gx#gx#gx) .g-pop-label { margin: 2px 0 4px; font-size: 12px; font-weight: 600; color: var(--g-muted); text-transform: uppercase; letter-spacing: .03em; }
.grapher:is(*,#gx#gx#gx) .g-pop-row { display: flex; flex-wrap: wrap; gap: 4px; }
.grapher:is(*,#gx#gx#gx) .g-swatch { width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--g-line); }
.grapher:is(*,#gx#gx#gx) .g-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--g-ink); }
.grapher:is(*,#gx#gx#gx) .g-opt { height: 32px; padding: 0 10px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; font-size: 13px; }
.grapher:is(*,#gx#gx#gx) .g-opt[aria-pressed="true"] { background: var(--g-accent-soft); border-color: var(--g-accent); color: #174f96; font-weight: 600; }
.grapher:is(*,#gx#gx#gx) .g-check { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.grapher:is(*,#gx#gx#gx) .g-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--g-accent); }
.grapher:is(*,#gx#gx#gx) .g-window { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.grapher:is(*,#gx#gx#gx) .g-window .g-rin { width: 100%; }
.grapher:is(*,#gx#gx#gx) .g-window span { font-size: 13px; color: var(--g-muted); text-align: center; white-space: nowrap; }
.grapher:is(*,#gx#gx#gx) .g-settings .g-error { padding: 0 0 6px; }
.grapher:is(*,#gx#gx#gx) .g-menu-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; }
.grapher:is(*,#gx#gx#gx) .g-menu-item:hover, .grapher:is(*,#gx#gx#gx) .g-menu-item:focus-visible { background: var(--g-accent-soft); }
.grapher:is(*,#gx#gx#gx) .g-share-url { width: 100%; height: 34px; padding: 4px 8px; border: 1px solid var(--g-line); border-radius: 6px; font-size: 14px; font-family: inherit; }
.grapher:is(*,#gx#gx#gx) .g-hint { margin-top: 6px; font-size: 12px; color: var(--g-muted); }

/* the symbol bar above a phone's keyboard */
.grapher:is(*,#gx#gx#gx) .g-symbols {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001;
	display: flex; gap: 4px; overflow-x: auto;
	padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
	background: #e8eaed; border-top: 1px solid #cfd3d8;
	scrollbar-width: none;
}
.grapher:is(*,#gx#gx#gx) .g-sym {
	flex: none; min-width: 44px; height: 44px; padding: 0 8px;
	border: 0; border-radius: 6px; background: #fff;
	box-shadow: 0 1px 0 #b9bec5; font-size: 17px;
}

/* confirm box: the same look as the test pages' dialog */
.grapher:is(*,#gx#gx#gx) .g-dlg-overlay { position: fixed; inset: 0; z-index: 2147483647; background: rgba(0, 0, 0, .55); }
.grapher:is(*,#gx#gx#gx) .g-dlg {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 90%; max-width: 420px; max-height: 85%; overflow: auto;
	padding: 20px; border: 1px solid #FD7F2F; border-radius: 6px;
	background: #fff; color: #222; box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
	font-size: 16px; line-height: 1.45; text-align: left;
}
.grapher:is(*,#gx#gx#gx) .g-dlg-title { margin-bottom: 12px; color: #FD7F2F; font-size: 18px; font-weight: bold; }
.grapher:is(*,#gx#gx#gx) .g-dlg-text { margin-bottom: 18px; }
.grapher:is(*,#gx#gx#gx) .g-dlg-buttons { text-align: right; }
.grapher:is(*,#gx#gx#gx) .g-dlg-back { margin: 0 8px 0 0; padding: 8px 14px; border: 1px solid #bbb; border-radius: 4px; background: #f2f2f2; color: #222; font-size: 15px; }
.grapher:is(*,#gx#gx#gx) .g-dlg-ok { padding: 9px 15px; border: none; border-radius: 4px; background: #0275d8; color: #fff; font-size: 15px; }
.grapher:is(*,#gx#gx#gx) .g-dlg-ok:hover { background: #025aa5; }

/* screen readers only */
.grapher:is(*,#gx#gx#gx) .g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* touch: bigger targets, no pointer coordinates */
@media (pointer: coarse) {
	.grapher:is(*,#gx#gx#gx) .g-tbtn { width: 44px; height: 44px; }
	.grapher:is(*,#gx#gx#gx) .g-ibtn, .grapher:is(*,#gx#gx#gx) .g-dot { min-height: 44px; }
	.grapher:is(*,#gx#gx#gx) .g-ibtn { width: 40px; }
	.grapher:is(*,#gx#gx#gx) .g-handle { height: 44px; }
	.grapher:is(*,#gx#gx#gx) .g-input { height: 44px; }
	.grapher:is(*,#gx#gx#gx) .g-btn { height: 44px; }
	.grapher:is(*,#gx#gx#gx) .g-coords { display: none; }
	.grapher:is(*,#gx#gx#gx) .g-row { grid-template-columns: 20px 34px minmax(0, 1fr) auto; }
}

/* phones: the toolbar stands in a column at the right edge */
@media (max-width: 560px) {
	.grapher:is(*,#gx#gx#gx) .g-toolbar { flex-direction: column; flex-wrap: nowrap; top: 6px; right: 6px; max-height: calc(100% - 12px); overflow-y: auto; scrollbar-width: none; }
}

/* large text and thick lines */
.grapher:is(*,#gx#gx#gx).g-large { font-size: 17px; }
.grapher:is(*,#gx#gx#gx).g-large .g-input { font-size: 19px; }
.grapher:is(*,#gx#gx#gx).g-large .g-preview { font-size: 18px; }
.grapher:is(*,#gx#gx#gx).g-large .g-badge { font-size: 13px; }
.grapher:is(*,#gx#gx#gx).g-large .g-error { font-size: 15px; }
.grapher:is(*,#gx#gx#gx).g-large .g-coords { font-size: 15px; }

/* full screen (and the fixed overlay where the Fullscreen API is missing) */
.grapher:is(*,#gx#gx#gx).g-full, .grapher:is(*,#gx#gx#gx).g-fs { margin: 0; background: #fff; }
.grapher:is(*,#gx#gx#gx).g-fs { position: fixed; inset: 0; z-index: 2147483000; min-height: 0; }
.grapher:is(*,#gx#gx#gx).g-full .g-wrap, .grapher:is(*,#gx#gx#gx).g-fs .g-wrap { position: relative; height: 100%; display: block; }
.grapher:is(*,#gx#gx#gx).g-full .g-graph, .grapher:is(*,#gx#gx#gx).g-fs .g-graph { height: 100%; border: 0; border-radius: 0; }
.grapher:is(*,#gx#gx#gx).g-full .g-panel, .grapher:is(*,#gx#gx#gx).g-fs .g-panel {
	position: absolute; z-index: 10;
	left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: 50%;
	overflow-y: auto; border-radius: 12px 12px 0 0;
	box-shadow: 0 -6px 24px rgba(26, 31, 39, .16);
	transform: translateY(105%); transition: transform .2s;
}
.grapher:is(*,#gx#gx#gx).g-full .g-panel-btn, .grapher:is(*,#gx#gx#gx).g-fs .g-panel-btn { z-index: 11; }
@media (min-width: 720px) {
	.grapher:is(*,#gx#gx#gx).g-full .g-panel, .grapher:is(*,#gx#gx#gx).g-fs .g-panel {
		top: 0; right: auto; bottom: 0; width: 340px; max-height: none; height: 100%;
		border-radius: 0; transform: translateX(-105%);
		box-shadow: 6px 0 24px rgba(26, 31, 39, .16);
	}
	.grapher:is(*,#gx#gx#gx).g-full.g-open .g-panel-btn, .grapher:is(*,#gx#gx#gx).g-fs.g-open .g-panel-btn { left: 348px; }
}
.grapher:is(*,#gx#gx#gx).g-full.g-open .g-panel, .grapher:is(*,#gx#gx#gx).g-fs.g-open .g-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.grapher:is(*,#gx#gx#gx) .g-panel { transition: none !important; }
}