/*
 * The way back to the desk, for anyone signed in.
 *
 * TOP RIGHT, where a signed-in person looks for their own account on every
 * other site on the internet — and where the WordPress bar used to put it. It
 * was bottom left and too quiet to find: proper brass now, not a greyed disc,
 * and big enough to be a door rather than a keyhole.
 */

.hsw-desk-mark {
	position: fixed;
	right: 1.1rem;
	top: 1.1rem;
	z-index: 9998;
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	border: 1px solid #b9924f;
	border-radius: 50%;
	background: linear-gradient( 160deg, #d7a95c 0%, #a97f3f 55%, #8a6733 100% );
	color: #fffaf0;
	text-decoration: none;
	box-shadow: 0 3px 14px rgba( 33, 29, 23, 0.35 );
}

.hsw-desk-mark:hover,
.hsw-desk-mark:focus-visible {
	/*
	 * The FIGURE goes Olivetti green on hover. The disc stays brass.
	 *
	 * The orange the figure used to take belonged to the first branding concept,
	 * which has since changed. The green is the Lettera 32's own body colour,
	 * lifted off the photograph on the desk.
	 *
	 * The brass lightens a little rather than changing hue, because a mid-green
	 * figure on the darker brass reads as a smudge. Lifting the disc gives the
	 * green something to sit against while the button stays the same button.
	 *
	 * The green is a deeper shade of the typewriter than the body panel, chosen
	 * by measurement: the sage straight off the photograph came out at 2.24:1
	 * against the lightened brass, which is a smudge whatever it is called. This
	 * is 3.71:1, past the 3:1 that WCAG asks of a graphic you are meant to be
	 * able to make out, and past the 3.48:1 the old white figure managed.
	 */
	background: linear-gradient( 160deg, #e8c588 0%, #c79a55 55%, #a67f42 100% );
	color: #3d4936;
}

/*
 * The figure's colour, stated on the figure itself and defended.
 *
 * Elementor's global kit emits a bare `a:hover { color: #E56A25 }` site-wide —
 * the orange of the first branding concept, still sitting in the kit long after
 * the brand moved on. The figure is drawn with `stroke: currentColor`, so it
 * takes whatever wins on the anchor, and the anchor is an `<a>` like any other.
 *
 * The theme's `.hsw-desk-mark:hover` (0,2,0) does out-rank `a:hover` (0,1,1),
 * so this should never have been in doubt — but Kara has now seen the orange
 * come back twice, and a colour this project has already spent two releases on
 * should not depend on winning a specificity race with a plugin that rewrites
 * its own stylesheet whenever the kit is saved. `!important` is the honest tool
 * here, and this file has the precedent: the same kit already had to be beaten
 * on headings.
 *
 * Stated on BOTH states so the resting white is as safe as the hover green.
 */
.hsw-desk-mark .hsw-desk-mark__figure { stroke: #fffaf0 !important; }
.hsw-desk-mark:hover .hsw-desk-mark__figure,
.hsw-desk-mark:focus-visible .hsw-desk-mark__figure { stroke: #3d4936 !important; }

.hsw-desk-mark:focus-visible { outline: 2px solid #211d17; outline-offset: 3px; }

/* The figure, drawn rather than set in type, so it takes the disc's own colour
   and cannot be swapped for a glyph the font does not have. */
.hsw-desk-mark__figure {
	width: 1.6rem;
	height: 1.6rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

/* The admin bar, when an editor still has one, occupies the top of the
   viewport — drop below it rather than under it. */
body.admin-bar .hsw-desk-mark { top: 3.1rem; }

@media ( max-width: 782px ) {
	body.admin-bar .hsw-desk-mark { top: 3.6rem; }
}

/* The pad stays bottom left; the disc no longer shares that corner. */

@media print {
	.hsw-desk-mark { display: none; }
}

/*
 * The homepage puts its masthead in the same corner — "HUMAN STILL WINS" and
 * the line under it are right-aligned at the top. Drop below them there, so the
 * disc never sits on the site's own name.
 */
body.home .hsw-desk-mark { top: 6.2rem; }
body.home.admin-bar .hsw-desk-mark { top: 8.2rem; }

@media ( max-width: 782px ) {
	body.home .hsw-desk-mark { top: 5.4rem; }
	body.home.admin-bar .hsw-desk-mark { top: 7.9rem; }
}

/*
 * Not on a phone.
 *
 * The bar at the top of a phone already carries the same figure, in the place a
 * thumb expects it. Two of them is one too many, and the disc was landing on
 * top of the header. Below the reading breakpoint the header's is the only one.
 */
@media (max-width: 40rem) {
	.hsw-desk-mark { display: none; }
}