/**
 * Headwaters: the console on the front end.
 *
 * admin.css assumes wp-admin: a known reset, a known font stack, a container
 * that is already full width, and no theme with opinions about what an <h2>
 * inside a <div> should look like. On the front end none of that holds, and
 * the theme is loaded first and is not going to be changed.
 *
 * So this file does two jobs and no others:
 *
 *   1. Gets the console out of the theme's content column, which is usually
 *      680px wide and cannot hold a roster.
 *   2. Overrides the handful of things a theme reliably breaks, heading
 *      sizes, table borders, button styling, link colors inside cards.
 *
 * Everything is scoped under .hw-portal or .hw-root. Nothing here touches the
 * theme's own markup: a plugin that restyles the page it is dropped onto is a
 * plugin that gets removed.
 */

/* ─── Breaking out of the content column ────────────────────────── */

/*
 * Most themes wrap page content in something with a max-width. The console
 * needs the width of the screen, so it walks out of the column without needing
 * to know what the theme called it.
 *
 * --hw-vw, not 100vw. This is the whole bug in one line: 100vw is the viewport
 * *including* the vertical scrollbar, while a block's 100% is the space inside
 * it. Break out with 100vw on a page tall enough to scroll and the console ends
 * up roughly 15px wider than the window, which is a horizontal scrollbar, a
 * cut-off right-hand column, and a page that jiggles sideways as you scroll.
 *
 * admin.js measures the real width and sets --hw-vw. The 100vw fallback is what
 * applies for the one frame before that runs, and on the rare page with no
 * scrollbar it is exactly right anyway.
 */
:root { --hw-vw: 100vw; }

/*
 * Belt and braces. overflow-x: clip rather than hidden, clip does not make
 * the body a scroll container, so a theme's sticky header keeps working.
 */
body.hw-has-portal { overflow-x: clip; max-width: 100%; }

.hw-portal {
	width: var( --hw-vw );
	max-width: var( --hw-vw );
	margin-left: calc( 50% - var( --hw-vw ) / 2 );
	margin-right: calc( 50% - var( --hw-vw ) / 2 );
	padding: 0 clamp( 12px, 3vw, 40px ) 60px;
	box-sizing: border-box;

	/* Nothing inside may widen the page. Wide things scroll in their own
	   wrapper, see .hw-tablewrap, rather than pushing the body sideways. */
	overflow-x: clip;

	/* A theme's body font is fine for an article and wrong for a data table. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
	text-align: left;

	background: var( --hw-page, transparent );
}

/* On a phone the theme's own padding is usually right, so take less. */
@media ( max-width: 600px ) {
	.hw-portal { padding-left: 10px; padding-right: 10px; }
}

/*
 * Nothing in the console gets to be wider than the console.
 *
 * A single long word in a card title, an unbroken URL in a note, or a table
 * with nine columns will each happily widen a grid track and take the whole
 * layout with it. minmax(0,1fr) is what stops a grid item's min-content width
 * from overriding the track.
 */
.hw-portal .hw-quick,
.hw-portal .hw-statgrid,
.hw-portal .hw-grid-2,
.hw-portal .hw-grid-3 { max-width: 100%; }

.hw-portal .hw-quick > *,
.hw-portal .hw-statgrid > *,
.hw-portal .hw-grid-2 > *,
.hw-portal .hw-grid-3 > *,
.hw-portal .hw-card,
.hw-portal .hw-panel { min-width: 0; max-width: 100%; }

.hw-portal .hw-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The tab strip scrolls sideways on a narrow screen instead of wrapping into
   three ragged rows or pushing the page out. */
.hw-portal .hw-tabs {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.hw-portal .hw-tabs::-webkit-scrollbar { display: none; }
.hw-portal .hw-tab { flex: 0 0 auto; }

/* Below this the icons alone carry the tabs, as they already do in wp-admin. */
@media ( max-width: 960px ) {
	.hw-portal .hw-tab-label { display: none; }
}

/* ─── Undoing the theme ─────────────────────────────────────────── */

.hw-portal *,
.hw-portal *::before,
.hw-portal *::after { box-sizing: border-box; }

/*
 * Heading sizes. A theme that renders every h1 at 48px turns the console's
 * card titles into billboards. These match what admin.css already sets, stated
 * again at a specificity the theme cannot beat.
 */
.hw-portal h1 { font-size: 22px; line-height: 1.25; margin: 0; letter-spacing: 0; text-transform: none; }
.hw-portal h2 { font-size: 17px; line-height: 1.3; margin: 0 0 4px; letter-spacing: 0; text-transform: none; }
.hw-portal h3 { font-size: 15px; line-height: 1.3; margin: 18px 0 8px; letter-spacing: 0; text-transform: none; }
.hw-portal h1::after, .hw-portal h2::after, .hw-portal h3::after,
.hw-portal h1::before, .hw-portal h2::before, .hw-portal h3::before { content: none; }

.hw-portal p { margin: 0 0 10px; }
.hw-portal ul, .hw-portal ol { margin: 0 0 10px; padding-left: 20px; }
.hw-portal li { margin: 0 0 4px; list-style-position: outside; }

/* Themes love a decorative table. This is a spreadsheet, not a feature. */
.hw-portal table { width: 100%; border-collapse: collapse; margin: 0; font-size: inherit; background: none; }
.hw-portal th, .hw-portal td { background: none; }
.hw-portal caption { display: none; }

/* Links inside the console are the console's blue, not the theme's. */
.hw-portal a { color: var( --hw-primary ); text-decoration: underline; box-shadow: none; }
.hw-portal a:hover { color: var( --hw-primary-dark ); }
.hw-portal .hw-btn,
.hw-portal .hw-tab,
.hw-portal .hw-subtab,
.hw-portal .hw-sectionnav-link,
.hw-portal .hw-help-tab { text-decoration: none; }

/*
 * Buttons. This is where themes do the most damage, global rules for
 * `button` and `input[type=submit]` with their own colors, radii, uppercase
 * transforms and full-width behaviour. admin.css already styles .hw-btn; the
 * job here is to stop the theme's button rules from winning.
 */
.hw-portal button,
.hw-portal input[type="submit"] {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	width: auto;
}

.hw-portal .hw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	line-height: 1.2;
}

/* Form controls, restated: a theme that sets its own input height and border
   makes the console look like two different applications stitched together. */
.hw-portal input[type="text"],
.hw-portal input[type="email"],
.hw-portal input[type="tel"],
.hw-portal input[type="url"],
.hw-portal input[type="number"],
.hw-portal input[type="date"],
.hw-portal input[type="time"],
.hw-portal input[type="search"],
.hw-portal input[type="password"],
.hw-portal select,
.hw-portal textarea {
	width: 100%;
	max-width: 100%;
	min-height: 38px;
	margin: 0;
	padding: 7px 11px;
	border: 1px solid var( --hw-line );
	border-radius: 6px;
	background: #fff;
	color: var( --hw-ink );
	/* 16px on a phone, because anything smaller makes iOS zoom the page on
	   focus and the coordinator loses their place in the roster. */
	font-size: 16px;
	font-family: inherit;
	box-shadow: none;
}

@media ( min-width: 783px ) {
	body:not(.hw-theme-light) .hw-portal input[type="text"],
	body:not(.hw-theme-light) .hw-portal input[type="email"],
	body:not(.hw-theme-light) .hw-portal input[type="tel"],
	body:not(.hw-theme-light) .hw-portal input[type="url"],
	body:not(.hw-theme-light) .hw-portal input[type="number"],
	body:not(.hw-theme-light) .hw-portal input[type="date"],
	body:not(.hw-theme-light) .hw-portal input[type="time"],
	body:not(.hw-theme-light) .hw-portal input[type="search"],
	body:not(.hw-theme-light) .hw-portal input[type="password"],
	body:not(.hw-theme-light) .hw-portal select,
	body:not(.hw-theme-light) .hw-portal textarea { font-size: 14px; }
}

.hw-portal input[type="checkbox"],
.hw-portal input[type="radio"] { width: auto; min-height: 0; margin-right: 6px; }

/* Dashicons are an icon font. A theme that sets a global font-family on
   pseudo-elements turns every icon into a stray letter. */
.hw-portal .dashicons,
.hw-portal .dashicons-before::before {
	font-family: dashicons !important;
	text-decoration: none;
	speak: never;
}

/* The sign-out link in the header sits on the blue gradient. */
.hw-topbar-link,
.hw-portal .hw-topbar-link { color: #fff; text-decoration: underline; font-size: 13px; opacity: .9; }
.hw-portal .hw-topbar-link:hover { color: #fff; opacity: 1; }

/* The modal has to clear a theme's sticky header, and any z-index it invented. */
.hw-portal .hw-modal-root,
.hw-modal-root { z-index: 999999; }

/* ─── The gate ──────────────────────────────────────────────────── */

/*
 * Sign-in and the no-access message. Uses the public design tokens rather than
 * the admin ones, because a logged-out visitor never loads admin.css.
 */
.hw-portal-gate { display: flex; justify-content: center; padding: 24px 0 48px; }

.hw-gate-card {
	width: 100%;
	max-width: 420px;
	padding: 28px;
	border: 1px solid var( --hw-line, #d5dae1 );
	border-radius: 12px;
	background: var( --hw-surface, #fff );
	box-shadow: 0 1px 3px rgba( 15, 23, 42, .06 );
}

.hw-gate-card h1 { margin: 0 0 4px; font-size: 21px; line-height: 1.25; }
.hw-gate-sub { margin: 0 0 20px; color: var( --hw-muted, #4b5563 ); }

/* wp_login_form() emits its own class names and no styling of its own. */
.hw-gate-card .login-username,
.hw-gate-card .login-password { margin: 0 0 14px; }
.hw-gate-card .login-username label,
.hw-gate-card .login-password label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 14px;
}
.hw-gate-card .login-remember { margin: 0 0 18px; font-size: 14px; }
.hw-gate-card .login-remember label { display: flex; align-items: center; gap: 7px; }
.hw-gate-card .login-remember input { width: auto; min-height: 0; }

.hw-gate-card input[type="text"],
.hw-gate-card input[type="password"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --hw-line, #d5dae1 );
	border-radius: 8px;
	background: #fff;
	color: var( --hw-ink, #1f2933 );
	font-size: 16px;
	box-sizing: border-box;
}

.hw-gate-card .login-submit input[type="submit"] {
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 0;
	border-radius: 8px;
	background: var( --hw-primary, #0e6ba8 );
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.hw-gate-card .login-submit input[type="submit"]:hover { background: var( --hw-primary-dark, #094f7d ); }

.hw-gate-foot { margin: 16px 0 0; font-size: 14px; }
.hw-gate-note {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var( --hw-line-soft, #e8ecf1 );
	color: var( --hw-muted, #4b5563 );
	font-size: 14px;
}

/* ─── Dark ──────────────────────────────────────────────────────── */

/*
 * A theme in dark mode would otherwise put white cards on a black page with
 * the console's dark text on them. The tokens are re-pointed rather than
 * individual rules overridden, so anything admin.css adds later follows.
 */
/*
 * The same three-way choice the public forms follow, driven by the same class
 * on <body>. The first version of this file honoured only the device
 * preference, so an administrator who set the forms to Light still got a dark
 * console card on a white page, the exact mismatch the setting exists to
 * prevent, reproduced one file over.
 */
@media ( prefers-color-scheme: dark ) {
	body:not(.hw-theme-light) .hw-portal,
	body:not(.hw-theme-light) .hw-portal-gate {
		--hw-ink: #e7edf3;
		--hw-muted: #a8b4c0;
		--hw-line: #3a4654;
		--hw-line-soft: #2b3542;
		--hw-surface: #1c2530;
		--hw-surface-2: #232e3a;
		--hw-page: #141c25;
		--hw-primary: #6fb5e6;
		--hw-primary-dark: #9acdf0;
		--hw-primary-soft: #1e3444;
		/*
		 * Foregrounds, not only the -soft backgrounds behind them.
		 *
		 * The first version re-pointed the backgrounds to dark and left these at
		 * their light-mode values, so the advanced-mode notice rendered #92400e
		 * on #3a2f1a: 1.85:1, dark brown on dark brown. Measured now:
		 * warn 7.82:1, danger 7.85:1, success 7.88:1.
		 */
		--hw-danger: #f7a6a6;
		--hw-danger-soft: #3a1f1f;
		--hw-warn: #f0c07a;
		--hw-warn-soft: #3a2f1a;
		--hw-success: #7fd6ac;
		--hw-success-soft: #14332a;
		color-scheme: dark;
		color: var( --hw-ink );
	}

	body:not(.hw-theme-light) .hw-portal input[type="text"],
	body:not(.hw-theme-light) .hw-portal input[type="email"],
	body:not(.hw-theme-light) .hw-portal input[type="tel"],
	body:not(.hw-theme-light) .hw-portal input[type="url"],
	body:not(.hw-theme-light) .hw-portal input[type="number"],
	body:not(.hw-theme-light) .hw-portal input[type="date"],
	body:not(.hw-theme-light) .hw-portal input[type="time"],
	body:not(.hw-theme-light) .hw-portal input[type="search"],
	body:not(.hw-theme-light) .hw-portal input[type="password"],
	body:not(.hw-theme-light) .hw-portal select,
	body:not(.hw-theme-light) .hw-portal textarea,
	body:not(.hw-theme-light) .hw-gate-card input[type="text"],
	body:not(.hw-theme-light) .hw-gate-card input[type="password"] {
		background: #0f151c;
		color: var( --hw-ink );
		border-color: var( --hw-line );
	}

	body:not(.hw-theme-light) .hw-portal .hw-modal-panel { background: var( --hw-surface ); }
}

/* Forced dark, whatever the device says. */
body.hw-theme-dark .hw-portal,
	body.hw-theme-dark .hw-portal-gate {
		--hw-ink: #e7edf3;
		--hw-muted: #a8b4c0;
		--hw-line: #3a4654;
		--hw-line-soft: #2b3542;
		--hw-surface: #1c2530;
		--hw-surface-2: #232e3a;
		--hw-page: #141c25;
		--hw-primary: #6fb5e6;
		--hw-primary-dark: #9acdf0;
		--hw-primary-soft: #1e3444;
		/*
		 * Foregrounds, not only the -soft backgrounds behind them.
		 *
		 * The first version re-pointed the backgrounds to dark and left these at
		 * their light-mode values, so the advanced-mode notice rendered #92400e
		 * on #3a2f1a: 1.85:1, dark brown on dark brown. Measured now:
		 * warn 7.82:1, danger 7.85:1, success 7.88:1.
		 */
		--hw-danger: #f7a6a6;
		--hw-danger-soft: #3a1f1f;
		--hw-warn: #f0c07a;
		--hw-warn-soft: #3a2f1a;
		--hw-success: #7fd6ac;
		--hw-success-soft: #14332a;
		color-scheme: dark;
		color: var( --hw-ink );
	}

	body.hw-theme-dark .hw-portal input[type="text"],
	body.hw-theme-dark .hw-portal input[type="email"],
	body.hw-theme-dark .hw-portal input[type="tel"],
	body.hw-theme-dark .hw-portal input[type="url"],
	body.hw-theme-dark .hw-portal input[type="number"],
	body.hw-theme-dark .hw-portal input[type="date"],
	body.hw-theme-dark .hw-portal input[type="time"],
	body.hw-theme-dark .hw-portal input[type="search"],
	body.hw-theme-dark .hw-portal input[type="password"],
	body.hw-theme-dark .hw-portal select,
	body.hw-theme-dark .hw-portal textarea,
	body.hw-theme-dark .hw-gate-card input[type="text"],
	body.hw-theme-dark .hw-gate-card input[type="password"] {
		background: #0f151c;
		color: var( --hw-ink );
		border-color: var( --hw-line );
	}

	body.hw-theme-dark .hw-portal .hw-modal-panel { background: var( --hw-surface ); }

/* Explicit theme switches beat the media query in both directions. */
:root[data-theme="dark"] .hw-portal,
:root[data-theme="dark"] .hw-portal-gate {
	--hw-ink: #e7edf3;
	--hw-muted: #a8b4c0;
	--hw-line: #3a4654;
	--hw-line-soft: #2b3542;
	--hw-surface: #1c2530;
	--hw-surface-2: #232e3a;
	--hw-page: #141c25;
	--hw-primary: #6fb5e6;
	--hw-primary-dark: #9acdf0;
	--hw-primary-soft: #1e3444;
	/*
	 * Foregrounds, not only the -soft backgrounds behind them.
	 *
	 * The first version re-pointed the backgrounds to dark and left these at
	 * their light-mode values, so the advanced-mode notice rendered #92400e
	 * on #3a2f1a: 1.85:1, dark brown on dark brown. Measured now:
	 * warn 7.82:1, danger 7.85:1, success 7.88:1.
	 */
	--hw-danger: #f7a6a6;
	--hw-danger-soft: #3a1f1f;
	--hw-warn: #f0c07a;
	--hw-warn-soft: #3a2f1a;
	--hw-success: #7fd6ac;
	--hw-success-soft: #14332a;
	color-scheme: dark;
	color: var( --hw-ink );
}

:root[data-theme="light"] .hw-portal,
:root[data-theme="light"] .hw-portal-gate {
	--hw-ink: #1f2933;
	--hw-muted: #4b5563;
	--hw-line: #d5dae1;
	--hw-line-soft: #e8ecf1;
	--hw-surface: #fff;
	--hw-surface-2: #f6f8fa;
	--hw-page: transparent;
	--hw-primary: #0e6ba8;
	--hw-primary-dark: #094f7d;
	--hw-primary-soft: #eaf3fa;
	--hw-danger: #b91c1c;
	--hw-danger-soft: #fef2f2;
	--hw-warn: #92400e;
	--hw-warn-soft: #fffbeb;
	--hw-success: #12694a;
	--hw-success-soft: #ecfdf5;
	color-scheme: light;
	color: var( --hw-ink );
}

/* ─── Print ─────────────────────────────────────────────────────── */

@media print {
	.hw-portal { width: auto; margin: 0; padding: 0; }
	.hw-topbar, .hw-tabs, .hw-subtabs, .hw-card-tools, .hw-filterbar, .hw-pager { display: none !important; }
}