/**
 * QE Sites shared admin stylesheet — "midnight pressroom".
 *
 * Installed into wp-content/mu-plugins/ by the provisioner and enqueued on
 * every admin + login screen by the qe-white-label mu-plugin. To change it
 * fleet-wide, edit this stub in the QE Sites app and run the
 * "Refresh QE mu-plugins" action in the admin site manager.
 *
 * Two jobs, in order:
 *  1. THEME — restyle the whole WordPress admin and login screen to the QE
 *     dark appearance using the shared tokens from qe-theme.css: warm
 *     ink-black paper with an olive cast, ivory type, periwinkle accents,
 *     Fraunces display headings, Hanken Grotesk UI text.
 *     The QE Builder list/settings screens use core wp-admin markup
 *     (.wrap, .wp-list-table, .page-title-action), so theming the core
 *     components themes those screens too.
 *  2. WHITE-LABEL — hide the WordPress chrome and chatter that points away
 *     from QE (bottom of this file, unchanged behaviour).
 *
 * Customers sign in as editors; QE staff sign in as administrators and get a
 * `qe-staff` body class (added by qe-white-label.php). Anything that staff
 * still need to see is scoped with body:not(.qe-staff).
 */

/* Same faces the QE Sites app uses, from the same free host (Bunny Fonts). */
@import url('https://fonts.bunny.net/css?family=fraunces:500,600,700|hanken-grotesk:400,500,600,700|jetbrains-mono:400,500&display=swap');

/* ==========================================================================
 * 1. WordPress admin token aliases. Brand colors live in qe-theme.css.
 * ======================================================================== */
:root {
	/* Core reads these for focus styles and accents in newer components. */
	--wp-admin-theme-color: var(--qe-lime, #8ea2ff);
	--wp-admin-theme-color-darker-10: var(--qe-lime-press, #7286f4);
	--wp-admin-theme-color-darker-20: var(--qe-lime-deep, #5668d8);
}

/* ==========================================================================
 * 2. Base — paper, type, links, selection, scrollbars, focus
 * ======================================================================== */
html,
html.wp-toolbar,
body {
	background: var(--qe-paper) !important;
}

#wpwrap,
#wpcontent,
#wpbody,
#wpbody-content {
	background: var(--qe-paper);
}

body,
#wpcontent,
.wp-core-ui,
.media-frame,
.media-modal {
	font-family: var(--qe-font-sans);
	color: var(--qe-ink);
}

#wpbody-content .wrap,
#wpbody-content .wrap p,
#wpbody-content .wrap label,
#wpbody-content .description,
.form-table th,
.form-table td {
	color: var(--qe-ink-2);
}

.description,
.wp-list-table .description,
#wpbody-content .wrap p.description {
	color: var(--qe-ink-muted);
}

/* Page titles set in the display serif, like the app's headings. */
.wrap > h1,
.wrap h1.wp-heading-inline,
#wpbody-content .wrap > h2:first-of-type {
	font-family: var(--qe-font-display);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: -0.02em;
	color: var(--qe-ink);
}

h2, h3, h4 {
	color: var(--qe-ink);
}

/* Links use the shared accent text colour everywhere else in QE dark. */
#wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title) {
	color: var(--qe-lime);
}
#wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title):hover,
#wpbody-content a:not(.button):not(.button-primary):not(.button-secondary):not(.page-title-action):not(.row-title):focus {
	color: var(--qe-lime-bright);
}

::selection {
	background: var(--qe-lime);
	color: var(--qe-on-lime);
}

code, kbd, pre {
	font-family: var(--qe-font-mono);
	background: var(--qe-paper-3);
	color: var(--qe-ink-2);
}

/* Thin, theme-aware scrollbars — same treatment as the QE Builder editor. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
	background: var(--qe-rule-strong);
	border: 3px solid transparent;
	background-clip: content-box;
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--qe-rule-hover); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--qe-rule-strong) transparent; }

/* Native widgets (date pickers, range, progress) pick up the accent. */
body { accent-color: var(--qe-lime); }

/* Core's spinner gif is drawn for light backgrounds. */
.spinner { filter: invert(1) hue-rotate(180deg); }

/* ==========================================================================
 * 3. Admin chrome — menu + toolbar (QE staff only; customers never see
 *    them) and the re-login prompt.
 * ======================================================================== */
#adminmenumain,
#adminmenuback,
#adminmenuwrap,
#adminmenu {
	background: var(--qe-paper) !important;
}

#adminmenuback,
#adminmenuwrap {
	border-right: 1px solid var(--qe-rule);
}

#adminmenu a {
	color: var(--qe-ink-muted) !important;
}

#adminmenu div.wp-menu-image:before,
#adminmenu .wp-menu-image img {
	color: var(--qe-ink-subtle) !important;
}

#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
	background: var(--qe-paper-2) !important;
	color: var(--qe-ink) !important;
}
#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
	color: var(--qe-ink) !important;
}

#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu .wp-menu-arrow,
.folded #adminmenu li.current.menu-top {
	background: var(--qe-surface) !important;
	color: var(--qe-lime) !important;
	box-shadow: inset 3px 0 0 var(--qe-lime);
}
#adminmenu li.current a.menu-top div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
	color: var(--qe-lime) !important;
}

#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
	background: var(--qe-paper-2) !important;
}

#adminmenu .wp-submenu a {
	color: var(--qe-ink-muted) !important;
}
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
	color: var(--qe-lime) !important;
}
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-has-current-submenu .wp-submenu li.current a {
	color: var(--qe-ink) !important;
}
#adminmenu .wp-submenu .wp-submenu-head {
	color: var(--qe-ink) !important;
}

#adminmenu li.wp-menu-separator .separator {
	border-color: var(--qe-rule);
}

#collapse-button {
	color: var(--qe-ink-subtle);
}
#collapse-button:hover,
#collapse-button:focus {
	color: var(--qe-lime);
}

/* Toolbar */
#wpadminbar {
	background: var(--qe-paper) !important;
	border-bottom: 1px solid var(--qe-rule);
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
	color: var(--qe-ink-muted) !important;
}
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar #adminbarsearch:before {
	color: var(--qe-ink-subtle) !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item {
	background: var(--qe-paper-2) !important;
	color: var(--qe-lime) !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item .ab-icon:before,
#wpadminbar .ab-top-menu > li:hover > .ab-item:before {
	color: var(--qe-lime) !important;
}
#wpadminbar .ab-sub-wrapper,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .ab-submenu {
	background: var(--qe-paper-2) !important;
	color: var(--qe-ink-muted) !important;
}
#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus {
	color: var(--qe-lime) !important;
}

/* Session-expired re-login prompt */
#wp-auth-check-wrap #wp-auth-check {
	background: var(--qe-surface);
}
#wp-auth-check-wrap .wp-auth-check-close:before {
	color: var(--qe-ink-muted);
}

/* ==========================================================================
 * 4. Buttons — pills, like every button in the QE Sites app. Primary is
 *    periwinkle over ink; secondary is a quiet ghost.
 * ======================================================================== */
.wp-core-ui .button,
.wp-core-ui .button-secondary {
	font-family: var(--qe-font-sans);
	font-weight: 500;
	border-radius: 9999px;
	background: transparent;
	color: var(--qe-ink) !important;
	border-color: var(--qe-rule-strong);
	box-shadow: none;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
	background: var(--qe-paper-3);
	border-color: var(--qe-rule-hover);
	color: var(--qe-ink) !important;
}
.wp-core-ui .button:focus,
.wp-core-ui .button-secondary:focus {
	border-color: var(--qe-lime);
	box-shadow: 0 0 0 4px var(--qe-focus-ring);
	color: var(--qe-ink) !important;
}

.wp-core-ui .button-primary,
.wp-core-ui .button-primary:visited {
	background: var(--qe-lime) !important;
	border-color: var(--qe-lime) !important;
	color: var(--qe-on-lime) !important;
	font-weight: 600;
	text-shadow: none;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, var(--qe-shadow-lime);
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--qe-lime-bright) !important;
	border-color: var(--qe-lime-bright) !important;
	color: var(--qe-on-lime) !important;
}
.wp-core-ui .button-primary:active {
	background: var(--qe-lime-press) !important;
	border-color: var(--qe-lime-press) !important;
}
.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 4px var(--qe-focus-ring);
}

.wp-core-ui .button:disabled,
.wp-core-ui .button[disabled],
.wp-core-ui .button.disabled,
.wp-core-ui .button-primary:disabled,
.wp-core-ui .button-primary[disabled],
.wp-core-ui .button-primary.disabled {
	background: var(--qe-paper-3) !important;
	border-color: var(--qe-rule) !important;
	color: var(--qe-ink-subtle) !important;
	box-shadow: none;
	text-shadow: none;
}

.wp-core-ui .button-link {
	color: var(--qe-lime);
}
.wp-core-ui .button-link:hover,
.wp-core-ui .button-link:focus {
	color: var(--qe-lime-bright);
}

/* "Add new" next to page titles */
.wrap .page-title-action,
.wrap .page-title-action:active {
	font-family: var(--qe-font-sans);
	font-weight: 600;
	border-radius: 9999px;
	background: transparent;
	border: 1px solid var(--qe-rule-strong);
	color: var(--qe-ink);
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.wrap .page-title-action:hover,
.wrap .page-title-action:focus {
	background: var(--qe-lime);
	border-color: var(--qe-lime);
	color: var(--qe-on-lime);
}

/* ==========================================================================
 * 5. Forms — surfaces and focus states from the app's .qe-input
 * ======================================================================== */
#wpcontent input[type="text"],
#wpcontent input[type="search"],
#wpcontent input[type="email"],
#wpcontent input[type="url"],
#wpcontent input[type="number"],
#wpcontent input[type="tel"],
#wpcontent input[type="password"],
#wpcontent input[type="date"],
#wpcontent input[type="datetime-local"],
#wpcontent input[type="time"],
#wpcontent textarea,
#wpcontent select,
.media-frame input[type="text"],
.media-frame input[type="search"],
.media-frame input[type="url"],
.media-frame input[type="number"],
.media-frame textarea,
.media-frame select {
	font-family: var(--qe-font-sans);
	background: var(--qe-surface);
	border: 1px solid var(--qe-rule-strong);
	border-radius: 8px;
	color: var(--qe-ink);
	box-shadow: none;
}
#wpcontent input:focus,
#wpcontent textarea:focus,
#wpcontent select:focus,
.media-frame input:focus,
.media-frame textarea:focus,
.media-frame select:focus {
	border-color: var(--qe-lime);
	box-shadow: 0 0 0 4px var(--qe-focus-ring);
	outline: none;
	color: var(--qe-ink);
}
#wpcontent ::placeholder,
.media-frame ::placeholder {
	color: var(--qe-ink-subtle);
}

input[type="checkbox"],
input[type="radio"] {
	background: var(--qe-surface);
	border-color: var(--qe-rule-strong);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--qe-lime);
	border-color: var(--qe-lime);
}
input[type="checkbox"]:checked::before {
	/* Core draws the check as a dashicon glyph; ink on accent like the app. */
	filter: none;
	color: var(--qe-on-lime);
}
input[type="radio"]:checked::before {
	background-color: var(--qe-on-lime);
}

.form-table th {
	color: var(--qe-ink-2);
	font-weight: 600;
}

/* ==========================================================================
 * 6. List tables — the core of every screen customers use. Column headers
 *    become the app's uppercase tracked micro-labels.
 * ======================================================================== */
/* Core paints the table white via `table.widefat`, whose element qualifier
 * outranks a lone class — match it so even (non-striped) rows go dark too. */
table.widefat,
.wp-list-table,
.widefat {
	background: var(--qe-surface);
	border: 1px solid var(--qe-rule);
	border-radius: 12px;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--qe-shadow-card);
	color: var(--qe-ink-2);
}

.widefat thead td,
.widefat thead th,
.widefat tfoot td,
.widefat tfoot th {
	background: var(--qe-surface);
	border-color: var(--qe-rule);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--qe-ink-muted);
}
.widefat thead th a,
.widefat thead td a,
.wp-list-table thead .sorted a,
.wp-list-table thead .sortable a {
	color: var(--qe-ink-muted) !important;
}
.wp-list-table thead .sortable a:hover,
.wp-list-table thead .sorted a:hover {
	color: var(--qe-ink) !important;
}
.wp-list-table .sorting-indicators span {
	color: var(--qe-ink-subtle);
}

.widefat td,
.widefat th {
	border-color: var(--qe-rule);
	color: var(--qe-ink-2);
}

.striped > tbody > :nth-child(odd),
ul.striped > :nth-child(odd),
.alternate {
	background: var(--qe-paper-2);
}
.wp-list-table tbody tr:hover {
	background: var(--qe-paper-3);
}

#wpbody-content .wp-list-table a.row-title {
	color: var(--qe-ink);
	font-weight: 600;
}
#wpbody-content .wp-list-table a.row-title:hover {
	color: var(--qe-lime);
}

.row-actions {
	color: var(--qe-ink-subtle);
}
#wpbody-content .row-actions .trash a,
#wpbody-content .row-actions .delete a,
#wpbody-content a.submitdelete {
	color: var(--qe-tomato) !important;
}

.tablenav {
	color: var(--qe-ink-muted);
}
.tablenav .tablenav-pages .displaying-num,
.tablenav .tablenav-pages .paging-input {
	color: var(--qe-ink-muted);
}
.tablenav .tablenav-pages .tablenav-pages-navspan {
	background: var(--qe-paper-3);
	border-color: var(--qe-rule);
	color: var(--qe-ink-subtle);
}

.subsubsub {
	color: var(--qe-ink-subtle);
}
.subsubsub a {
	color: var(--qe-ink-muted) !important;
}
.subsubsub a.current {
	color: var(--qe-ink) !important;
	font-weight: 600;
}
.subsubsub a:hover {
	color: var(--qe-lime) !important;
}
.subsubsub .count {
	color: var(--qe-ink-subtle);
}

.view-switch a:before {
	color: var(--qe-ink-subtle);
}
.view-switch a.current:before,
.view-switch a:hover:before {
	color: var(--qe-lime);
}

/* ==========================================================================
 * 7. Cards & panels — postboxes, dashboard widgets, settings tabs
 * ======================================================================== */
.postbox,
.stuffbox,
.health-check-accordion,
.welcome-panel {
	background: var(--qe-surface);
	border: 1px solid var(--qe-rule);
	border-radius: 12px;
	box-shadow: var(--qe-shadow-card);
	color: var(--qe-ink-2);
}

.postbox .hndle,
.postbox .postbox-header,
.stuffbox .hndle {
	border-bottom: 1px solid var(--qe-rule);
	color: var(--qe-ink);
}
.postbox .hndle,
.postbox-header h2,
.stuffbox .hndle {
	font-family: var(--qe-font-sans);
	font-weight: 600;
}
.postbox .handlediv,
.postbox .handle-order-higher,
.postbox .handle-order-lower,
.postbox .toggle-indicator:before {
	color: var(--qe-ink-subtle);
}
.postbox .inside {
	color: var(--qe-ink-2);
}

.welcome-panel {
	border-left: 3px solid var(--qe-lime);
}
.welcome-panel h2 {
	font-family: var(--qe-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--qe-ink);
}
.welcome-panel .about-description,
.welcome-panel p {
	color: var(--qe-ink-muted);
}

.nav-tab {
	background: var(--qe-paper-2);
	border-color: var(--qe-rule);
	color: var(--qe-ink-muted);
}
.nav-tab:hover,
.nav-tab:focus {
	background: var(--qe-paper-3);
	color: var(--qe-ink);
}
.nav-tab-active,
.nav-tab-active:hover,
.nav-tab-active:focus {
	background: var(--qe-surface);
	border-bottom-color: var(--qe-surface);
	color: var(--qe-lime);
}
.nav-tab-wrapper,
h1.nav-tab-wrapper,
h2.nav-tab-wrapper {
	border-bottom-color: var(--qe-rule);
}

/* Card pattern used on Site Health / about pages */
.card {
	background: var(--qe-surface);
	border: 1px solid var(--qe-rule);
	border-radius: 12px;
	box-shadow: var(--qe-shadow-card);
}

/* ==========================================================================
 * 8. Notices — QE staff still see them; customers have them hidden below.
 *    Dark cards with the app's status colours on the spine.
 * ======================================================================== */
.notice,
div.updated,
div.error,
.notice-info {
	background: var(--qe-surface);
	border: 1px solid var(--qe-rule);
	border-left-width: 4px;
	border-radius: 8px;
	color: var(--qe-ink-2);
	box-shadow: var(--qe-shadow-card);
}
.notice p,
div.updated p,
div.error p {
	color: var(--qe-ink-2);
}
.notice-success,
div.updated {
	border-left-color: var(--qe-mint-fill);
}
.notice-error,
div.error {
	border-left-color: var(--qe-tomato-fill);
}
.notice-warning {
	border-left-color: var(--qe-amber-fill);
}
.notice-info {
	border-left-color: var(--qe-lime);
}
.notice .notice-dismiss:before {
	color: var(--qe-ink-subtle);
}
.notice .notice-dismiss:hover:before {
	color: var(--qe-ink);
}

/* ==========================================================================
 * 9. Media — library grid, the uploader, and the select-media modal that
 *    opens inside the QE Builder editor.
 * ======================================================================== */
.media-modal,
.media-modal-content {
	background: var(--qe-paper);
	box-shadow: var(--qe-shadow-pop);
}
.media-modal-backdrop {
	background: var(--qe-scrim);
}
.media-modal-close .media-modal-icon:before {
	color: var(--qe-ink-muted);
}
.media-modal-close:hover .media-modal-icon:before {
	color: var(--qe-ink);
}

.media-frame-title,
.media-frame-router,
.media-frame-menu,
.media-frame-content,
.media-frame-toolbar,
.media-toolbar {
	background: var(--qe-paper);
	border-color: var(--qe-rule);
	color: var(--qe-ink);
}
.media-frame-title h1 {
	font-family: var(--qe-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--qe-ink);
}

.media-menu {
	background: var(--qe-paper);
	border-right-color: var(--qe-rule);
}
.media-menu .media-menu-item {
	color: var(--qe-ink-muted);
}
.media-menu .media-menu-item:hover {
	background: var(--qe-paper-2);
	color: var(--qe-ink);
}
.media-menu .media-menu-item.active {
	background: var(--qe-surface);
	color: var(--qe-lime);
	font-weight: 600;
}

.media-router .media-menu-item {
	color: var(--qe-ink-muted);
}
.media-router .media-menu-item.active,
.media-router .media-menu-item.active:last-child {
	background: var(--qe-surface);
	color: var(--qe-ink);
	border-color: var(--qe-rule);
}

.attachments-browser .media-toolbar,
.media-frame.mode-grid .media-toolbar {
	background: var(--qe-paper);
	border-bottom: 1px solid var(--qe-rule);
}

.attachment .thumbnail {
	background: var(--qe-paper-3);
	box-shadow: 0 0 0 1px var(--qe-rule);
}
.attachment .thumbnail .centered img {
	background: var(--qe-paper-3);
}
.attachment.selected .thumbnail,
.attachment.details .thumbnail {
	box-shadow: 0 0 0 3px var(--qe-lime) !important;
}
.attachment .check {
	background: var(--qe-lime);
	box-shadow: 0 0 0 1px var(--qe-on-lime);
}
.attachment .check .media-modal-icon {
	filter: brightness(0);
}
.attachment .filename {
	background: var(--qe-surface);
	color: var(--qe-ink-2);
	box-shadow: inset 0 1px 0 var(--qe-rule);
}

.media-sidebar,
.attachment-details,
.attachment-info {
	background: var(--qe-paper-2);
	border-left-color: var(--qe-rule);
	color: var(--qe-ink-2);
}
.media-sidebar h2,
.attachment-details h2 {
	color: var(--qe-ink);
}
.media-sidebar .setting span,
.media-sidebar .setting .name,
.attachment-details .setting span,
.attachment-details .setting .name,
.attachment-info .details,
.attachment-info .filename,
.attachment-info .uploaded,
.attachment-info .file-size,
.attachment-info .dimensions {
	color: var(--qe-ink-muted);
}
.attachment-info {
	border-bottom-color: var(--qe-rule);
}
.details-image {
	background: var(--qe-paper-3);
}

/* Drag-and-drop targets */
.upload-ui h2,
.uploader-inline h2 {
	color: var(--qe-ink);
	font-family: var(--qe-font-display);
	font-weight: 600;
}
.uploader-inline,
.uploader-editor {
	background: var(--qe-paper);
}
.upload-php .media-frame.mode-grid .uploader-inline {
	border: 2px dashed var(--qe-rule-strong);
	background: var(--qe-paper-2);
}
#drag-drop-area {
	border: 2px dashed var(--qe-rule-strong);
	background: var(--qe-paper-2);
}
.drag-drop #drag-drop-area.drag-over,
.uploader-inline.drag-over {
	border-color: var(--qe-lime);
}
.drag-drop .drag-drop-inside p,
.uploader-inline .upload-ui p {
	color: var(--qe-ink-muted);
}

.media-progress-bar {
	background: var(--qe-paper-3);
	border-color: var(--qe-rule-strong);
}
.media-progress-bar div {
	background: var(--qe-lime);
}

/* ==========================================================================
 * 10. Block editor — staff-only surface here (customers build pages in the
 *     QE Builder). A compact pass: dark chrome, accent colour, content canvas
 *     left alone so the page being edited renders true.
 * ======================================================================== */
body.block-editor-page {
	--wp-components-color-background: var(--qe-surface);
	--wp-components-color-foreground: var(--qe-ink);
	--wp-components-color-foreground-inverted: var(--qe-on-lime);
	--wp-components-color-accent: var(--qe-lime);
	--wp-components-color-accent-darker-10: var(--qe-lime-press);
	--wp-components-color-accent-darker-20: var(--qe-lime-deep, #5668d8);
	--wp-components-color-accent-inverted: var(--qe-on-lime);
}
body.block-editor-page .interface-interface-skeleton {
	background: var(--qe-paper);
	color: var(--qe-ink);
}
body.block-editor-page .interface-interface-skeleton__header,
body.block-editor-page .interface-interface-skeleton__footer,
body.block-editor-page .edit-post-header,
body.block-editor-page .editor-header {
	background: var(--qe-paper);
	border-color: var(--qe-rule);
	color: var(--qe-ink);
}
body.block-editor-page .interface-interface-skeleton__sidebar,
body.block-editor-page .interface-interface-skeleton__secondary-sidebar {
	background: var(--qe-surface);
	border-color: var(--qe-rule);
	color: var(--qe-ink);
}
body.block-editor-page .interface-interface-skeleton__content {
	background: var(--qe-paper-2);
}
body.block-editor-page .components-button.is-primary {
	color: var(--qe-on-lime) !important;
}

/* ==========================================================================
 * 11. Login — the front door, and the one screen everybody meets. Dark
 *     paper, a faint accent aurora, print grain, and the form rising in.
 * ======================================================================== */
body.login {
	background:
		radial-gradient(1100px 520px at 50% -8%, rgba(142, 162, 255, 0.1), transparent 60%),
		radial-gradient(rgba(241, 239, 226, 0.035) 1px, transparent 1px) 0 0 / 22px 22px,
		var(--qe-paper) !important;
	font-family: var(--qe-font-sans);
	color: var(--qe-ink-2);
}

.login h1 a {
	/* Image + size come from qe-white-label.php's inline style. */
	filter: drop-shadow(0 8px 24px rgba(142, 162, 255, 0.2));
}

.login form {
	background: var(--qe-surface);
	border: 1px solid var(--qe-rule);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 1px 0 0 var(--qe-inset-highlight) inset, 0 24px 60px rgba(0, 0, 0, 0.55);
}

.login label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--qe-ink-muted);
}
.login form .forgetmenot label {
	/* "Remember me" reads as a sentence, not a heading. */
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--qe-ink-2);
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	font-family: var(--qe-font-sans);
	background: var(--qe-paper-3);
	border: 1px solid var(--qe-rule-strong);
	border-radius: 10px;
	color: var(--qe-ink);
	box-shadow: none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--qe-lime);
	box-shadow: 0 0 0 4px var(--qe-focus-ring);
	outline: none;
}

.login .button.wp-hide-pw {
	color: var(--qe-ink-subtle);
}
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
	color: var(--qe-ink);
	background: transparent;
	border-color: transparent;
}

.login .message,
.login .notice,
.login .success {
	background: var(--qe-surface);
	border-left: 4px solid var(--qe-lime);
	border-radius: 8px;
	color: var(--qe-ink-2);
}
.login #login_error {
	background: var(--qe-surface);
	border-left: 4px solid var(--qe-tomato-fill);
	border-radius: 8px;
	color: var(--qe-ink-2);
}
.login #login_error a,
.login .message a {
	color: var(--qe-lime);
}

.login #nav,
.login #backtoblog {
	color: var(--qe-ink-subtle);
}
.login #nav a,
.login #backtoblog a {
	color: var(--qe-ink-muted);
}
.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--qe-lime);
}

.login .privacy-policy-page-link a {
	color: var(--qe-ink-subtle);
}

/* Entrance: the card and links rise like a sheet coming off the press. */
@media (prefers-reduced-motion: no-preference) {
	.login h1,
	.login form,
	.login #nav,
	.login .privacy-policy-page-link {
		animation: qe-login-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.login form { animation-delay: 80ms; }
	.login #nav { animation-delay: 160ms; }
	.login .privacy-policy-page-link { animation-delay: 220ms; }
}
@keyframes qe-login-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
 * 12. White-label: hide WordPress chrome and chatter (behaviour unchanged)
 * ======================================================================== */

/* --------------------------------------------------------------------------
 * Update nags and version chatter (everyone, staff included — updates are
 * handled centrally from the QE Sites app, never from inside a site).
 * ------------------------------------------------------------------------ */
.update-nag,
#wp-admin-bar-updates,
.theme-update-message,
.update-message,
#menu-plugins .update-plugins,
.plugin-count,
#footer-upgrade {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Admin chrome that points away from QE: the footer credit line and the
 * contextual help / screen-options tabs that document WordPress itself.
 * ------------------------------------------------------------------------ */
#wpfooter,
#screen-meta,
#screen-meta-links {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * The WordPress sidebar menu and toolbar are hidden for customers entirely —
 * their navigation is the QE Sites manage sidebar, which is an allowlist.
 * Hiding whole chrome (rather than pruning items) means a plugin update can
 * never expose a new screen by accident. The toolbar markup is already
 * removed server-side by qe-white-label.php; the #wpadminbar rule here is a
 * safety net. QE staff keep the full menu for support.
 * ------------------------------------------------------------------------ */
body:not(.qe-staff) #adminmenumain,
body:not(.qe-staff) #wpadminbar {
	display: none !important;
}

body:not(.qe-staff) #wpcontent,
body:not(.qe-staff) #wpfooter {
	margin-left: 0 !important;
}

/* Dashboard pages hardcode class="wp-toolbar" on <html>, whose padding
 * reserves space for the (now absent) toolbar. The staff marker lives on
 * <body>, so reach the root element through :has(). */
html.wp-toolbar:has(body:not(.qe-staff)) {
	padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
 * Notice noise. Plugin update banners, upsells, and review begging mean
 * nothing to customers; QE staff keep them for debugging.
 * ------------------------------------------------------------------------ */
body:not(.qe-staff) .notice,
body:not(.qe-staff) .updated,
body:not(.qe-staff) .error,
body:not(.qe-staff) .update-php,
body:not(.qe-staff) .wp-core-ui .notice.is-dismissible {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Dashboard widgets that surface WordPress internals to customers.
 * ------------------------------------------------------------------------ */
body:not(.qe-staff) #dashboard_site_health,
body:not(.qe-staff) #dashboard_right_now,
body:not(.qe-staff) #dashboard_quick_press {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Block editor: hide the welcome tour and the "open in new tab" plugin
 * directory hints that lead to wordpress.org.
 * ------------------------------------------------------------------------ */
.edit-post-welcome-guide,
.block-directory-downloadable-blocks-panel,
.block-editor-inserter__media-tabs-container .block-editor-inserter__media-panel-search,
.nux-dot-tip {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Login screen: drop the links that lead away from the brand. The logo image
 * itself is swapped by qe-white-label.php.
 * ------------------------------------------------------------------------ */
.login #nav .wp-login-register,
.login .language-switcher,
.login #backtoblog {
	display: none !important;
}