/*
 * The ribbon that replaces the site header on an annotator page, and the
 * spacing the theme no longer needs once the header and footer are gone.
 *
 * The stage is sized to whatever is left of the viewport, so the page holds
 * still: an application that scrolls its own workspace off the bottom of the
 * window is worse than one that simply fits.
 */

/* One source of truth for the strip's height: the stage subtracts it, and the
   two drifting apart would leave a gap or a scrollbar. */
body.phnuclei-page {
	--phnuclei-ribbon-height: 44px;
	--phnuclei-admin-bar: 0px;
}

body.phnuclei-page.admin-bar { --phnuclei-admin-bar: 32px; }

@media screen and (max-width: 782px) {
	body.phnuclei-page.admin-bar { --phnuclei-admin-bar: 46px; }
}

.phnuclei-ribbon {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	box-sizing: border-box;
	height: var(--phnuclei-ribbon-height, 44px);
	padding: 0 16px;
	background: #161616;
	border-bottom: 1px solid #3a3a38;
	color: #e8e8e8;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	line-height: 1;
}

.phnuclei-ribbon-user {
	color: #9a9a9a;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.phnuclei-ribbon-button {
	flex: 0 0 auto;
	padding: 6px 14px;
	border: 1px solid #4a4a48;
	border-radius: 4px;
	background: #333331;
	color: #e8e8e8;
	font: inherit;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease;
}

.phnuclei-ribbon-button:hover,
.phnuclei-ribbon-button:focus-visible {
	background: #444442;
	border-color: #6a6a68;
	color: #ffffff;
	text-decoration: none;
}

/* ------------------------------------------------------ reclaimed space --- */

/*
 * The page template spaces `main` away from a header that is no longer there,
 * with an inline style, so this has to be `!important` to reach it.
 */
.phnuclei-page .wp-site-blocks > main {
	margin-top: 0 !important;
}

.phnuclei-page .wp-site-blocks > main > .wp-block-group {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/*
 * Fill what is left of the window rather than a fraction of it.
 *
 * `body` is in the selector to outrank the `.phnuclei-page .phnuclei` rule in
 * annotator.css, which sets the same variable. Both stylesheets belong to this
 * plugin, but which one WordPress prints second depends on when the shortcode
 * runs, and a layout should not rest on that.
 */
body.phnuclei-page .phnuclei {
	--phnuclei-height: calc(100vh - var(--phnuclei-ribbon-height) - var(--phnuclei-admin-bar));
	--phnuclei-height: calc(100dvh - var(--phnuclei-ribbon-height) - var(--phnuclei-admin-bar));
	margin-block: 0;
	border-block: 0;
}

@media (prefers-reduced-motion: reduce) {
	.phnuclei-ribbon-button { transition: none; }
}