/**
 * Clue bar — fixed strip at the top of a publisher's article that pushes their
 * page down rather than covering it.
 *
 * The height cannot be known here: it changes when the clue wraps, which
 * depends on viewport width and clue length. clue-bar.js measures the rendered
 * bar and publishes --lc-clue-bar-h, which the padding rule below consumes.
 *
 * Everything is namespaced under .lc-clue-bar and every property is set
 * explicitly. This stylesheet lands on someone else's site, inside their theme,
 * and must neither inherit surprises from it nor leak into it.
 *
 * @see docs/superpowers/specs/2026-09-13-clue-bar-design.md
 */

/**
 * Nothing of the publisher's is covered — their masthead starts below the bar.
 * Falls back to 0 so a failed measurement leaves the page usable rather than
 * padded by a broken value.
 */
html.lc-clue-bar-open body {
	padding-top: var(--lc-clue-bar-h, 0px);
}

.lc-clue-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Above sticky theme headers and most cookie bars. */
	z-index: 2147483000;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(136deg, #005e40 0%, #003341 100%);
	color: #ffffff;
	/* Jost is the brand face. It is NOT loaded from here — see the note in the
	   spec: pulling Google Fonts onto a publisher's page adds a third-party
	   request and a consent question that a clue bar has no business raising.
	   Sites that already serve Jost get it; everyone else gets the stack. */
	font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.lc-clue-bar *,
.lc-clue-bar *::before,
.lc-clue-bar *::after {
	box-sizing: inherit;
}

/**
 * The bar is a <button> whenever there is a game tab to return to, so the whole
 * strip is clickable with one tab stop. These reset the theme's button styling,
 * which would otherwise inherit its own padding, borders and font.
 */
button.lc-clue-bar {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

button.lc-clue-bar:hover {
	background: linear-gradient(136deg, #00704c 0%, #003e4e 100%);
}

button.lc-clue-bar:focus-visible {
	outline: 2px solid #ffd017;
	outline-offset: -3px;
}

/**
 * Back control: gold tile with a CSS triangle, label beneath. Left-hand side,
 * where the artwork puts it and where a back affordance is expected.
 */
.lc-clue-bar__back {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.lc-clue-bar__arrow {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: #ffd017;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
	position: relative;
}

/* Drawn, not typed: a glyph would depend on a font the publisher may not load. */
.lc-clue-bar__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate(-60%, -50%);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 11px solid #00503a;
}

.lc-clue-bar__back-label {
	color: #ffd017;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
}


/**
 * Crossword-tile wordmark. A background image keeps it out of the DOM and out
 * of the accessible name; hidden below 900px, where the clue needs the width
 * more than the branding does.
 */
.lc-clue-bar__mark {
	flex: 0 0 auto;
	width: 158px;
	height: 43px;
	background: url("../img/clue-bar-mark.svg") no-repeat center / contain;
}

/**
 * Narrow viewports get the LC monogram instead of nothing. Most readers arrive
 * on a phone, so hiding the mark there would drop the branding in exactly the
 * place it is seen most.
 */
@media (max-width: 900px) {
	.lc-clue-bar__mark {
		width: 34px;
		height: 34px;
		background-image: url("../img/clue-bar-mark-sm.svg");
	}
}

/* The rule from the artwork sits between the back control and the clue. */
.lc-clue-bar__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 14px;
	border-left: 2px solid rgba(156, 156, 156, 0.55);
}

.lc-clue-bar__meta {
	display: block;
	margin-bottom: 2px;
	opacity: 0.6;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

/**
 * No clamp: a long clue makes the bar taller rather than losing words. Since
 * the bar pushes the page down by its measured height, growing is safe — the
 * article moves with it instead of disappearing underneath.
 */
.lc-clue-bar__clue {
	display: block;
}

button.lc-clue-bar:hover .lc-clue-bar__arrow {
	background: #ffdb45;
}

/**
 * The back control stays beside the clue rather than dropping to its own row:
 * it is the reason the bar exists, and a thumb reaches the left edge easily.
 * Only the tile shrinks.
 */
@media (max-width: 600px) {
	.lc-clue-bar {
		gap: 10px;
		padding: 9px 12px;
		font-size: 14px;
	}

	.lc-clue-bar__arrow {
		width: 30px;
		height: 30px;
	}

	.lc-clue-bar__body {
		padding-left: 10px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.lc-clue-bar {
		animation: lc-clue-bar-in 160ms ease-out;
	}

	@keyframes lc-clue-bar-in {
		from {
			transform: translateY(-100%);
		}

		to {
			transform: translateY(0);
		}
	}
}