/* * WordPress Syntax Highlighter (wpshl). * * Every colour and size is a custom property, written into the page from * Settings > Syntax Highlighter. The values here are only what is used if that * somehow goes missing. * * WHAT HOLDS WHAT. The outermost element -- the 
, or the .wsh-box around it
 * when there is a header -- is the FRAME: it carries the background colour, the
 * picture and the rounded corners, and it never scrolls. The  inside is the
 * only thing that scrolls. That is why the picture stays still while the text
 * moves over it, and why the language label stays in its corner.
 */

.wsh,
.wsh-box,
.wsh-tabs {
	--wsh-bg: #000f30;
	--wsh-veil: #ffffff;
	--wsh-text: #ffffff;
	--wsh-shadow: #18aaed;
	--wsh-comment: #8fb2d9;
	--wsh-keyword: #ffffff;
	--wsh-type: #a9d6ff;
	--wsh-function: #dcefff;
	--wsh-word: #dcefff;
	--wsh-meta: #9ccaf2;
	--wsh-string: #c4f0ff;
	--wsh-number: #b9dcff;
	--wsh-constant: #eaf6ff;
	--wsh-variable: #cfe4fa;
	--wsh-operator: #ffffff;
	--wsh-punctuation: #ffffff;
	--wsh-tab: 4;
	--wsh-title-size: 22px;
	--wsh-desc-indent: 4em;
	--wsh-max-height: none;
	--wsh-pad: 20px;
	--wsh-edge: 3px;
	--wsh-border: #18aaed;
	--wsh-keyword-weight: 700;
	--wsh-text-shadow: none;
	--wsh-image: none;
	--wsh-scrim: none;
	--wsh-image-min: 600px;
	--wsh-on-text: #000f30;
	--wsh-rule: rgba(255, 255, 255, 0.35);
	--wsh-tint: rgba(255, 255, 255, 0.16);
	--wsh-tabs-hover: rgba(255, 255, 255, 0.34);
	--wsh-tabline-idle: #4d576e;
	--wsh-tabline-hover: #2e3a55;
}

/*
 * The frame. Two background layers over the colour: the overlay (--wsh-scrim)
 * on top, the picture under it. The picture is as wide as the frame but never
 * narrower than --wsh-image-min, and it is pinned to the BOTTOM: a block taller
 * than the picture shows the background colour above it, which the picture's own
 * top edge fades into.
 */
pre.wsh,
pre.wp-block-code.wsh,
.wsh-box {
	border: 0;
	border-radius: 6px;
	background-color: var(--wsh-bg);
	background-image: var(--wsh-scrim), var(--wsh-image);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%, max(100%, var(--wsh-image-min)) auto;
	color: var(--wsh-text);
	text-shadow: var(--wsh-text-shadow);
	/* The window's edge: down the left and along the bottom only, so it seems to
	   stand out of the page. A hard shadow rather than a border, because a border
	   on two sides of a rounded box tapers away to nothing at its corners. */
	box-shadow: calc(var(--wsh-edge) * -1) var(--wsh-edge) 0 0 var(--wsh-border);
}

/* under a header, the box is the frame and the 
 is only a holder */
.wsh-box > pre.wsh,
.wsh-box > pre.wp-block-code.wsh {
	margin: 0;
	border-radius: 0 0 6px 6px;
	background: none;
	box-shadow: none;
}

/*
 * !important, here and on the  below, is deliberate. Nearly every theme has
 * rules of its own for "pre" and "code inside a post" -- no padding, a grey
 * background, a smaller font -- and they load after this file, so they win any
 * tie. These few properties are the STRUCTURE of the box; the colours are not
 * marked, and stay the settings' to decide.
 */
pre.wsh,
pre.wp-block-code.wsh {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	padding: 0 !important;
	overflow: visible !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
	line-height: 1.55;
	text-align: left;
	direction: ltr;
	-moz-tab-size: var(--wsh-tab);
	tab-size: var(--wsh-tab);
	-webkit-hyphens: none;
	hyphens: none;
}

/* The one thing that scrolls: up and down always, sideways only if lines are not wrapped. */
pre.wsh > code,
pre.wp-block-code.wsh > code {
	display: block !important;
	box-sizing: border-box;
	max-height: var(--wsh-max-height);
	margin: 0 !important;
	padding: var(--wsh-pad) !important;
	border: 0 !important;
	border-radius: inherit;
	overflow-x: auto;
	overflow-y: auto;
	background-color: transparent !important;
	box-shadow: none !important;
	color: inherit;
	font: inherit !important;
	text-shadow: inherit;
	white-space: pre;
	word-break: normal;
	overflow-wrap: normal;
	word-wrap: normal;
	scrollbar-width: thin;
	scrollbar-color: var(--wsh-rule) transparent;
}

/* A long line carries on below itself, and there is nothing to scroll sideways to. */
pre.wsh.wsh-wrap > code,
pre.wp-block-code.wsh.wsh-wrap > code {
	overflow-x: hidden !important;
	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
}

pre.wsh > code::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background: transparent;
}

pre.wsh > code::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--wsh-rule);
}

/* The language's name, in the corner (when there is no header to put it in). */
pre.wsh.wsh-labelled[data-wsh-label]::before {
	content: attr(data-wsh-label);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 0.2em 0.75em;
	border-radius: 0 6px 0 6px;
	background: var(--wsh-tint);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/*
 * Line numbers are drawn by CSS, so they are never part of what gets copied.
 * They sit in the 's left padding, OUT of the flow of the text: a number
 * that took up room on the line would shift every tab stop on it. A wrapped line
 * has one number, beside its first row.
 *
 * The rule between numbers and code is a background on the , not a border
 * on each number: it runs the full height whatever wraps, and like the picture it
 * stays put while the code scrolls.
 */
pre.wsh.wsh-numbered > code,
pre.wp-block-code.wsh.wsh-numbered > code {
	position: relative;
	/* the space around the code, then the numbers, then the rule, then the code */
	padding-left: calc(var(--wsh-pad) + 3.4em) !important;
	counter-reset: wsh-line;
	background-image: linear-gradient(var(--wsh-rule), var(--wsh-rule)) !important;
	background-repeat: no-repeat !important;
	background-position: calc(var(--wsh-pad) + 2.5em) 0 !important;
	background-size: 1px 100% !important;
}

pre.wsh.wsh-numbered .wsh-line::before {
	counter-increment: wsh-line;
	content: counter(wsh-line);
	position: absolute;
	left: 0;
	box-sizing: content-box;
	width: calc(var(--wsh-pad) + 1.85em);
	color: var(--wsh-text);
	font-weight: 400;
	font-style: normal;
	text-align: right;
	opacity: 0.6;
	-webkit-user-select: none;
	user-select: none;
}

/*
 * SELECTED TEXT. A browser's own highlight is a blue, and over a blue picture, behind
 * white letters, it cannot be seen: a reader dragging over a few lines to copy them
 * saw nothing happen. So the window has a highlight of its own: a slab of the TEXT
 * colour, the letters in the colour worked out to stand out from it (--wsh-on-text,
 * the Download button's two colours), and no shadow. It shows on any picture and in
 * every look. Every part inside the window is named (*), because a part's own
 * colour and shadow would otherwise win over what it inherits.
 */
pre.wsh::selection,
pre.wsh *::selection,
.wsh-box .wsh-header *::selection,
.wsh-box .wsh-footer *::selection,
.wsh-tabs .wsh-tab::selection {
	background-color: var(--wsh-text);
	color: var(--wsh-on-text);
	text-shadow: none;
}

/*
 * The parts of the code. `.wpshl-paint` is the editor's picture of the code, which
 * is the same HTML. The COLOUR OF EACH PART'S SHADOW is not here: it differs by
 * language, and is written into the page by WSH_Settings::shadow_css().
 */
.wsh .wsh-comment,
.wpshl-paint .wsh-comment { color: var(--wsh-comment); font-style: italic; }
.wsh .wsh-keyword,
.wpshl-paint .wsh-keyword { color: var(--wsh-keyword); font-weight: var(--wsh-keyword-weight); }
.wsh .wsh-type,
.wpshl-paint .wsh-type { color: var(--wsh-type); }
.wsh .wsh-function,
.wpshl-paint .wsh-function { color: var(--wsh-function); }
.wsh .wsh-word,
.wpshl-paint .wsh-word { color: var(--wsh-word); }
.wsh .wsh-meta,
.wpshl-paint .wsh-meta { color: var(--wsh-meta); }
.wsh .wsh-string,
.wpshl-paint .wsh-string { color: var(--wsh-string); }
.wsh .wsh-number,
.wpshl-paint .wsh-number { color: var(--wsh-number); }
.wsh .wsh-constant,
.wpshl-paint .wsh-constant { color: var(--wsh-constant); }
.wsh .wsh-variable,
.wpshl-paint .wsh-variable { color: var(--wsh-variable); }
.wsh .wsh-operator,
.wpshl-paint .wsh-operator { color: var(--wsh-operator); }
.wsh .wsh-punctuation,
.wpshl-paint .wsh-punctuation { color: var(--wsh-punctuation); }

/*
 * A block with a title, a description or a download link is wrapped in a box,
 * and the header sits on top of the 
:
 *
 *     .wsh-box > .wsh-header > .wsh-header-top > .wsh-title
 *                                              > .wsh-header-side > .wsh-langname, a.wsh-download
 *                            > .wsh-description
 *              > pre.wsh
 *
 * The header's words are in the site's own font; only the code is monospace.
 */
/* No band of colour and no line under it: the header is simply the top of the window. */
.wsh-box > .wsh-header {
	padding: var(--wsh-pad) var(--wsh-pad) 0;
	border: 0;
	background: none;
	line-height: 1.35;
	text-align: left;
}

.wsh-box .wsh-header-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 1em;
}

.wsh-box .wsh-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--wsh-title-size);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.wsh-box .wsh-header-side {
	display: flex;
	/* on a phone the name and the two buttons are wider than the window: they go onto a
	   second row, to the right, rather than out through the window's side */
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5em 0.8em;
	margin-left: auto;
}

.wsh-box .wsh-langname {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/*
 * The two buttons. !important throughout, as with the box's structure: themes
 * style every link and every