/*
 * The html-mode screens' own styles.
 *
 * A file of its own rather than lines in `dashboard/css/dashboard.css`: the
 * global sheet is loaded by every dashboard route on every site, and none of
 * this applies to a component site. It is imported by the components that need
 * it, so it ships with them.
 *
 * Everything here is namespaced (`html-editor__`, `design-panel__`) because a
 * plain `.css` import is global — the same reason the platform prefixes its
 * body classes `cms-`. Colours are taken from the dashboard's own custom
 * properties so these screens follow it rather than drifting alongside it.
 */

/*******************************************************/
/* Editor shell: preview above, code drawer below
/*******************************************************/

/*
 * The left-hand code pane is GONE (Steve, 2026-09-17). The page gets the whole
 * area and the code is a devtools-style drawer along the bottom edge — see
 * `CodePanel.svelte` for the reasoning.
 */
.html-editor {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	background: var(--background, #f5f6fa);
}

/* The preview half. `position:relative` so the corner pill has something to
   anchor to, and `overflow:hidden` so a frame dragged to the stage's own width
   never produces a horizontal scrollbar under the faux browser — which would
   read as part of the page being previewed. */
.html-editor__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* The stage bar that used to sit above the window is gone (Steve, 2026-09-17):
   the address in the faux location bar IS the link to the live page, and the
   "Rendering…" note lives in the window's chrome. */

/* The gutter around the faux browser. */
.html-editor__stage-area {
	flex: 1;
	min-height: 0;
	display: flex;
	/* Even on all four sides, so the window sits ON the stage rather than
	   running off the bottom of it into whatever is underneath. */
	padding: 12px;
	background: #e9eaf0;
}

/* What the faux browser is measured against — the padding is OUTSIDE this, so
   `clientWidth` is the room the window actually has. `align-items:stretch` is
   what makes the frame fill the height at every width. */
.html-editor__stage-inner {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

/*******************************************************/
/* Part tabs
/*******************************************************/

/* THE TAB STRIP, which is the same row in both states.
   COLLAPSED it is all that is left of the code pane: a bar at the foot of the
   editor, which is the foot of the admin, with a border on top because there is
   nothing above it but the preview.
   OPEN it is the head of the pane, sitting above the code it selects, with the
   border underneath instead. */
.html-editor__statusbar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
	/* Room on the right for the open/close toggle, which is positioned rather
	   than laid out — in both states now, so the strip keeps it too. */
	padding: 3px 44px 3px 10px;
	background: #fff;
	border-top: 1px solid var(--border, #e1e2eb);
}

.html-editor__statusbar--open {
	/* The bottom padding is the room an active tab's own border needs; the
	   border moves to the foot of the strip, where the code begins. The room on
	   the right is for the dismiss, which is positioned rather than laid out. */
	padding: 8px 44px 0 10px;
	border-top: none;
	border-bottom: 1px solid var(--border, #e1e2eb);
}

.html-editor__tab {
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
}

.html-editor__tab:hover {
	color: #111827;
}

/* Collapsed there is no active tab at all, so this never applies and every
   label is bare text — which is the point: a tab shape around a label, with no
   code under it to belong to, is chrome describing nothing. */
.html-editor__tab--active {
	color: #111827;
	border-color: var(--border, #e1e2eb);
	background: #fff;
	margin-bottom: -1px;
	padding-bottom: 7px;
}

.html-editor__tab-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--primary, #2f75e6);
	display: inline-block;
}

/*******************************************************/
/* Code drawer
/*******************************************************/

.html-editor__panel {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: #fff;
	border-top: 1px solid var(--border, #e1e2eb);
	box-shadow: 0 -4px 14px rgba(16, 24, 40, .08);
}

/* The top edge. Centred ON the edge (half above, half below) so the whole
   grab area is reachable without hunting for it. */
.html-editor__panel-grip {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 10px;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ns-resize;
	touch-action: none;
	outline: none;
}

.html-editor__panel-grip-bar {
	width: 44px;
	height: 3px;
	border-radius: 100px;
	background: transparent;
	transition: background .15s;
}

.html-editor__panel-grip:hover .html-editor__panel-grip-bar,
.html-editor__panel-grip:focus .html-editor__panel-grip-bar,
.html-editor__panel-grip:active .html-editor__panel-grip-bar {
	background: #9aa1b1;
}

/* Centred on the STRIP, not on the tabs.
   `align-items: center` would centre it on the flex line, which is the tabs —
   and the strip carries 8px of padding above them and none below, so a dismiss
   aligned to the tabs sits low in the white band it actually reads against.
   Positioning it takes the padding out of the question entirely, and survives
   the tabs changing height. */
.html-editor__panel-collapse {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: none;
	border-radius: 4px;
	padding: 4px 6px;
	line-height: 0;
	color: #6b7280;
	cursor: pointer;
}

.html-editor__panel-collapse:hover {
	background: #f3f4f6;
	color: #111827;
}

/* The corner tab the drawer collapses to. */
/*******************************************************/
/* Code area
/*******************************************************/

.html-editor__code {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.html-editor__code-body {
	flex: 1;
	min-height: 0;
	/* The one-dark background, so the gutter and the area below a short document
	   are the editor's colour and not the page's. */
	background: #282c34;
}

/* CodeEditor is a standalone field elsewhere and carries a border and a corner
   radius to prove it. Here it is a whole pane, edge to edge. The extra ancestor
   is for specificity over its own scoped rule. */
.html-editor .html-editor__code-body .code-editor {
	height: 100%;
	border: none;
	border-radius: 0;
}

.html-editor__code-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 6px 16px;
	border-top: 1px solid var(--border, #e1e2eb);
	font-size: 11px;
	color: #6b7280;
	background: #fafafa;
}

.html-editor__hint {
	text-align: right;
}

/*******************************************************/
/* Findings
/*******************************************************/

/* The findings are a TAB of the drawer, so they take the whole body the way
   the code does, rather than a strip under it. */
.html-editor__findings {
	flex: 1;
	min-height: 0;
	overflow: auto;
	background: #fafafa;
	padding: 12px 16px 14px 16px;
}

.html-editor__findings--refused {
	background: #fff5f3;
}

/* The count on the Findings tab: the one thing that says there is something
   to read without opening it. Red while the last save was refused. */
.html-editor__tab-badge {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	color: #fff;
	background: #6b7280;
}

.html-editor__tab--refused .html-editor__tab-badge {
	background: var(--danger, #e23807);
}

.html-editor__tab--refused {
	color: var(--danger, #e23807);
}

.html-editor__findings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	font-size: 12px;
	margin: 0 0 8px 0;
}

.html-editor__findings-empty {
	font-size: 11px;
	color: #6b7280;
	margin: 0;
	line-height: 1.5;
}

.html-editor__findings-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.html-editor__finding {
	margin: 0 0 6px 0;
	padding: 8px 10px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid var(--border, #e1e2eb);
	font-size: 12px;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.html-editor__finding--block {
	border-left: 4px solid var(--danger, #e23807);
}

.html-editor__finding--warn {
	border-left: 4px solid #d99100;
}

.html-editor__finding-severity {
	font-weight: 600;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b7280;
}

.html-editor__finding--block .html-editor__finding-severity {
	color: var(--danger, #e23807);
}

.html-editor__finding-line {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	color: #6b7280;
}

.html-editor__finding-message {
	flex: 1 1 200px;
	min-width: 0;
}

.html-editor__finding-code {
	font-size: 10px;
	color: #6b7280;
	background: #f3f4f6;
	border-radius: 3px;
	padding: 1px 5px;
}

/*******************************************************/
/* Preview
/*******************************************************/

.html-editor__embed {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--border, #e1e2eb);
	background: #fff;
	font-size: 12px;
}

.html-editor__embed-label {
	color: #6b7280;
}

.html-editor__embed-token {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	background: #f3f4f6;
	border-radius: 3px;
	padding: 3px 7px;
	user-select: all;
}

/* The iframe fills the faux browser's body; the WINDOW carries the width. */
.html-editor__frame {
	width: 100%;
	height: 100%;
	border: none;
	background: #fff;
	display: block;
}

.html-editor__preview-empty {
	margin: auto;
	font-size: 13px;
	color: #6b7280;
	padding: 20px;
	text-align: center;
}

/*******************************************************/
/* Design page
/*******************************************************/

/*
 * ONE VARIABLE, ONE LINE.
 *
 * The rows were 820px wide and wrapped: the name input took a whole line to
 * itself and the swatch, the hex, the `var()` label and Remove fell to a
 * second. A list of sixteen colours became thirty-two lines you had to read in
 * pairs, and the thing the eye is actually scanning for — which name holds
 * which colour — was never beside its swatch. The section is as wide as the
 * row needs, and every control on a colour row sits on one line at any normal
 * dashboard width.
 *
 * `max-width` rather than a fixed width, and `flex-wrap: wrap` is KEPT on the
 * row: below ~1100px the line genuinely does not fit, and wrapping is the right
 * answer there. It is only the default that changes.
 */
.design-panel__section {
	margin: 0 0 40px 0;
	max-width: 1100px;
}

.design-panel__section h3 {
	margin: 0 0 4px 0;
}

.design-panel__how {
	font-size: 12px;
	color: #6b7280;
	margin: 0 0 15px 0;
	line-height: 1.5;
}

.design-panel__how code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	background: #f3f4f6;
	border-radius: 3px;
	padding: 1px 5px;
}

.design-panel__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border, #e1e2eb);
	flex-wrap: wrap;
}

.design-panel__row .design-panel__row-name {
	/* Doubly-qualified: the global `.field__input` rule sets `width: 100%`,
	   which is what put the name on a line of its own. */
	width: 200px;
	max-width: 200px;
	flex: 0 0 200px;
}

/*
 * The one control that absorbs the slack — the hex field on a colour row, and
 * the family picker on a font row, which carries this class too. The basis is
 * small enough that the line holds together long before the browser starts
 * wrapping it; a `220px` basis was what pushed everything after it onto a
 * second row at 820px.
 */
.design-panel__row .design-panel__row-value {
	width: auto;
	flex: 1 1 140px;
	min-width: 0;
}

.design-panel__usage {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	color: #6b7280;
	white-space: nowrap;
	flex: 0 0 auto;
}

.design-panel__row .button {
	flex: 0 0 auto;
}

/*
 * THE CONTRAST PILL, on an `on-<name>` row only.
 *
 * A FIXED WIDTH whether or not there is a ratio to show, so the `var()` labels
 * and the Remove buttons line up down the list instead of stepping in and out
 * as the pills appear — the column is what makes sixteen rows scannable.
 *
 * Green/amber/red is the WCAG AA split: 4.5:1 for ordinary text, 3:1 for large
 * text, and below that nothing is readable at any size. The number is in the
 * pill and the whole sentence is in the `title`, because colour alone must not
 * be the only carrier of the meaning — the rule this pill is about.
 */
.design-panel__contrast {
	flex: 0 0 auto;
	width: 62px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	border-radius: 10px;
	white-space: nowrap;
}

.design-panel__contrast--aa {
	background: #dcfce7;
	color: #166534;
}

.design-panel__contrast--aa-large {
	background: #fef3c7;
	color: #92400e;
}

.design-panel__contrast--fail {
	background: #fee2e2;
	color: #991b1b;
}

/* A row that is not half of a pair still holds the column open. */
.design-panel__contrast--none {
	background: none;
}

/*
 * The same sentences `save-design` warns with. A warning, never a refusal:
 * `.design-panel__errors` is what stops a save, and these two must not look
 * alike.
 */
.design-panel__warnings {
	list-style: disc;
	margin: 0 0 15px 0;
	padding: 10px 15px 10px 35px;
	border-left: 3px solid #f59e0b;
	background: #fffbeb;
	color: #92400e;
	font-size: 12px;
	line-height: 1.6;
}

/* The one-button state a site sits in when it has no variables at all. */
.design-panel__empty {
	padding: 20px;
	border: 1px solid var(--border, #e1e2eb);
	border-radius: 6px;
	background: #f9fafb;
}

.design-panel__empty .design-panel__how {
	max-width: 720px;
}

.design-panel__swatch {
	width: 44px;
	height: 38px;
	padding: 2px;
	border: 1px solid var(--input-border, #ccc);
	border-radius: 4px;
	background: #fff;
	flex: 0 0 auto;
}

.design-panel__weights {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 100%;
	font-size: 12px;
	color: #374151;
}

.design-panel__weight {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.design-panel__weight--off {
	opacity: 0.35;
}

/*******************************************************/
/* Google family selector
/*******************************************************/

/*
 * `FontFamilySelect.svelte` only. The popover is positioned against this
 * wrapper, so the wrapper is the one thing here that MUST keep its
 * `position: relative` — the list is `position: absolute` so that 1837 rows do
 * not push the weight checkboxes and the Remove button down the page every time
 * somebody opens it.
 */
.font-select {
	position: relative;
}

.font-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	border: 1px solid var(--input-border, #ccc);
	border-radius: 4px;
	background: #fff;
	color: #111827;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.font-select__button:hover {
	border-color: #9ca3af;
}

.font-select__current {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.font-select__current--empty {
	color: #9ca3af;
}

.font-select__popover {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	min-width: 260px;
	border: 1px solid var(--border, #e1e2eb);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
	overflow: hidden;
}

.font-select__searchbar {
	padding: 8px;
	border-bottom: 1px solid var(--border, #e1e2eb);
}

.font-select__search {
	width: 100%;
}

/*
 * Tall enough to be worth scrolling, short enough to stay on screen.
 *
 * This is the whole of the "show me all 1825" answer: the list is not capped,
 * it is CLIPPED — every family is in the DOM and `overflow-y` is what makes
 * that a scroller instead of a page three metres long. `overscroll-behavior`
 * stops the wheel handing the scroll back to the panel behind at the ends,
 * which in a popover reads as the list jumping away from you.
 */
.font-select__list {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * The two groups: what the browser already has, then what has to be downloaded.
 * The label sticks so you can still tell which half you are in after scrolling
 * a few hundred rows into the Google group.
 */
.font-select__group-label {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	padding: 6px 10px;
	background: #f9fafb;
	border-bottom: 1px solid var(--border, #e1e2eb);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7280;
}

.font-select__option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 6px 10px;
	border: 0;
	background: none;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.font-select__option:hover {
	background: #f3f4f6;
}

/*
 * The arrow-key row. Distinct from `--current` (the family already chosen):
 * walking the list with the keyboard has to be visible even when it passes over
 * the current one, so this is the stronger of the two.
 */
.font-select__option--active {
	background: #e0e7ff;
	outline: 1px solid #6366f1;
	outline-offset: -1px;
}

.font-select__option--current {
	background: #eef2ff;
	font-weight: 600;
}

.font-select__family {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.font-select__meta {
	flex: 0 0 auto;
	font-size: 10px;
	color: #9ca3af;
	white-space: nowrap;
}

.font-select__empty {
	margin: 0;
	padding: 20px 10px;
	font-size: 12px;
	color: #9ca3af;
	text-align: center;
}

/*
 * The specimen. Every line is clipped rather than wrapped: the row it sits in
 * is a flex column a few hundred pixels wide, and a display face at 18px
 * wrapping to four lines would push the rest of the form about as you typed.
 */
.font-select__specimen {
	margin-top: 6px;
}

.font-select__specimen p {
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
	color: #374151;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The two notes under the specimen. Both have to say `font-family: inherit`:
 * they sit inside `.font-select__specimen`, whose `p` rule is what renders the
 * sample in the chosen face, and a warning set in Lobster is a warning nobody
 * reads. Amber is the one that says something may be wrong; grey is the one
 * that just explains what a system family is.
 */
.font-select__specimen .font-select__unknown,
.font-select__specimen .font-select__note {
	margin-top: 4px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	white-space: normal;
}

.font-select__specimen .font-select__unknown {
	color: #9a6b00;
}

.font-select__specimen .font-select__note {
	color: #6b7280;
}

.design-panel__errors {
	list-style: disc;
	margin: 0;
	padding: 0 0 0 20px;
	font-size: 13px;
}

/*******************************************************/
/* Revisions
/*******************************************************/

.html-editor__revisions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 620px;
}

.html-editor__revision {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--border, #e1e2eb);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
}

.html-editor__revision:hover:not(:disabled) {
	border-color: var(--primary, #2f75e6);
}

.html-editor__revision--current {
	border-color: var(--primary, #2f75e6);
	background: #f2f5f9;
	cursor: default;
}

.html-editor__revision-author {
	color: #6b7280;
	font-size: 12px;
	flex: 1;
}

/* A preview that could not be rendered says so IN the pane, rather than leaving
   the last good render on screen with nothing to say it is stale. */
.html-editor__preview-error {
	flex: 0 0 auto;
	padding: 6px 12px;
	font-size: 12px;
	color: #8a1c1c;
	background: #fdecec;
	border-bottom: 1px solid #f3c9c9;
}

/*******************************************************/
/* Design rows, second pass (Steve, 2026-09-17): the
   var() label sits UNDER the name, and the contrast
   pill sits INSIDE the hex field's right edge.
/*******************************************************/

/* Items align to the TOP now that the name column is two lines tall; every
   control on the row is the same 38-40px, so their tops line up. */
.design-panel__row {
	align-items: flex-start;
}

.design-panel__row .design-panel__name {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 200px;
	flex: 0 0 200px;
}

.design-panel__row .design-panel__name .design-panel__row-name {
	width: 100%;
	max-width: none;
	flex: none;
}

.design-panel__row .design-panel__name .design-panel__usage {
	padding-left: 2px;
}

/* The hex field and its pill. The wrapper takes the slack the input used to;
   the input fills it and keeps its text clear of the pill. */
.design-panel__row .design-panel__value {
	position: relative;
	flex: 1 1 140px;
	min-width: 0;
}

.design-panel__row .design-panel__value .design-panel__row-value {
	width: 100%;
	padding-right: 72px;
}

.design-panel__row .design-panel__value .design-panel__contrast {
	/* A block, not an inline span: an inline pill has no box of its own, so
	   the background hugged the glyphs and the rounded ends went ragged. */
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	width: auto;
	min-width: 0;
	height: 20px;
	line-height: 20px;
	padding: 0 9px;
	border-radius: 10px;
}

/* Under the Add colour button rather than above the rows, so the list never
   shifts when a warning appears or clears. */
.design-panel__warnings--below {
	margin: 15px 0 0 0;
}

/*******************************************************/
/* Comments (markup) — a column beside the preview, the html editor's
   counterpart of the page builder's docked Markup panel. */

.html-editor__markup {
	flex: 0 0 320px;
	min-height: 0;
	margin-left: 12px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: 6px;
	overflow: hidden;
}

.html-editor__markup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border-color, #e2e8f0);
	font-size: 13px;
	font-weight: 600;
}

.html-editor__markup-close {
	display: flex;
	padding: 2px;
	border: 0;
	background: none;
	color: var(--text-secondary, #64748b);
	cursor: pointer;
}

.html-editor__markup-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-top: 10px;
}

.html-editor__markup-foot {
	padding: 10px;
	border-top: 1px solid var(--border-color, #e2e8f0);
}