/*
 * SONGREPS directory pages — /cohort-directory/ and /directory/.
 *
 * Visual reference: docs/design/design-system.md (locked tokens) and
 * docs/design/this-week-dashboard.html (top-bar + hero markup).
 * Mobile-first. Single 768px breakpoint. No scale or lift animations
 * on cards (per design-system.md §13). Hover bumps shadow only.
 *
 * Design tokens: WP block-theme CSS vars first, literal Coffee Shop
 * palette as fallback so the page stays on-brand even if the theme
 * stylesheet hasn't emitted yet.
 */

:root {
	--songreps-bg:        var(--wp--preset--color--background, #f4ede0);
	--songreps-fg:        var(--wp--preset--color--foreground, #2a3744);
	--songreps-primary:   var(--wp--preset--color--primary,    #5b6f7d);
	--songreps-accent:    var(--wp--preset--color--accent,     #b58655);
	--songreps-accent-dark: var(--wp--preset--color--accent-dark, #8c6238);
	--songreps-muted:     var(--wp--preset--color--muted,      #8c8478);
	/* Body-text muted — cooler blue-gray for eyebrows, labels, and
	 * secondary copy. Distinct from --songreps-muted (warm sand). */
	--songreps-text-muted: var(--wp--preset--color--text-muted, #6f7e89);
	--songreps-sage:      var(--wp--preset--color--success,    #7a8c6f);
	--songreps-rust:      var(--wp--preset--color--error,      #a85a4a);
	--songreps-cream:     #fffaf0;
	/* Manila — slightly warmer/darker than the page bg so the cream
	 * strip sits as its own subtle layer above the dark nav. Used
	 * exclusively by the .songreps-cream-strip context bar. */
	--manila:             #f3ede0;
	--songreps-border:    rgba(42, 55, 68, 0.10);
	--songreps-border-strong: rgba(42, 55, 68, 0.20);
	/* Hairlines — visible row dividers and softer in-card dividers.
	 * Cream-tinted so they sit on top of the page background without
	 * announcing themselves. */
	--songreps-hairline:      var(--wp--preset--color--hairline,      #d8cfbc);
	--songreps-hairline-soft: var(--wp--preset--color--hairline-soft, #e8e0cf);
	--songreps-shadow-soft:   0 1px 3px rgba(42, 55, 68, 0.08);
	--songreps-shadow-hover:  0 4px 12px rgba(42, 55, 68, 0.12);
	--songreps-font-display: 'Manrope', system-ui, -apple-system, sans-serif;
	--songreps-font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

body.songreps-directory {
	margin: 0;
	font-family: var(--songreps-font-body);
	color: var(--songreps-fg);
	background: var(--songreps-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.songreps-directory * { box-sizing: border-box; }
/* Body-content anchor styling — scoped to .songreps-page so it doesn't
 * bleed into chrome (the topbar nav has its own canonical off-white
 * styling near the bottom of this file; without this scope the topbar
 * inherits the body bronze and "Cohort / Directory / My profile" render
 * as decorative links instead of functional nav). */
body.songreps-directory .songreps-page a { color: var(--songreps-accent); text-decoration: none; }
body.songreps-directory .songreps-page a:hover { text-decoration: underline; }
body.songreps-directory img { max-width: 100%; display: block; }

/* ---------- Top bar ---------- */

.songreps-topbar {
	background: var(--songreps-fg);
	/* Mobile base — compact bar matching iOS Safari chrome. Logo
	 * fills the bar edge-to-edge via height: 100% on the <img>.
	 * Desktop override at the @media (min-width: 768px) block
	 * below bumps the bar to 68px; the logo override there bumps
	 * to match. The two heights MUST stay in sync at each
	 * breakpoint. */
	height: 48px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Mobile-logged-in: pin the primary nav to the top of the viewport
 * once the cream-strip scrolls past. Paired with .platform-bar's
 * sticky rule at top:48px so the two bars stack against the
 * viewport edge as the page scrolls. Logged-out mobile leaves the
 * topbar in normal flow — the hamburger sheet's tap-to-close on
 * scroll-outside is sensitive to sticky parent quirks on iOS, and
 * the logged-out chrome is unchanged in this commit. Desktop is
 * also unchanged (the media query below doesn't reach this rule). */
@media (max-width: 767.98px) {
	.songreps-topbar--logged-in {
		position: sticky;
		top: 0;
		z-index: 110;
	}
}
.songreps-topbar__left { display: flex; align-items: center; gap: 32px; min-width: 0; }
/* Logo link — wraps the branded nav banner image. The aria-label on
 * the <a> carries the brand name for screen readers, so the <img>
 * itself uses alt="" (decorative). The PNG already has transparency
 * baked in, so the bar's deep-slate background shows through cleanly
 * without any CSS rounding. */
.songreps-topbar__logo {
	display: flex;
	align-items: center;
	/* Stretch to the bar's full height so the logo image inside can
	 * fill edge-to-edge. The PNG's transparent surround lets the deep-
	 * slate bar show through, making the bar feel like a window
	 * cutting across the round badge's center stripe. */
	align-self: stretch;
	text-decoration: none;
}
.songreps-topbar__logo:hover { text-decoration: none; opacity: 0.9; }
.songreps-topbar__logo:focus-visible {
	outline: 2px solid var(--songreps-accent);
	outline-offset: -2px; /* sit inside the bar instead of bleeding past */
	border-radius: 4px;
}
.songreps-topbar__logo-img {
	display: block;
	/* Hard-set to match the bar's exact height. Using height: 100%
	 * here would collapse to the image's natural 128px because the
	 * wrapping <a>'s height isn't explicitly typed (it's stretched by
	 * the parent flex's align-items: center but not by a computed
	 * height value, so % wouldn't resolve). The two values below
	 * MUST stay in sync with .songreps-topbar's height. Desktop
	 * override at the @media (min-width: 768px) block bumps both. */
	height: 48px;
	width: auto;
}

@media ( min-width: 768px ) {
	.songreps-topbar__logo-img {
		height: 68px;
	}
}
.songreps-topbar__nav { display: none; }
/* .songreps-topbar__user replaced by .songreps-topbar__user-link
 * (a wrapping <a> introduced 2026-05) — see chrome rules at the
 * bottom of this file. */
.songreps-topbar__name {
	font-size: 13px;
	color: rgba(244, 237, 224, 0.7);
}
.songreps-topbar__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--songreps-accent);
	color: var(--songreps-fg);
	font-family: var(--songreps-font-display);
	font-weight: 600;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* When Songreps_Avatar::render() emits an <img> for a user with a
 * headshot, swap-in object-fit:cover so the image fills the circle
 * cleanly — initials' background color sits behind the image but
 * is invisible once the image paints. object-position is "center top"
 * (not the CSS default "center center") so the head stays anchored
 * when a non-square portrait gets cropped — pilot-feedback fix
 * Monday 12224325418. */
img.songreps-avatar {
	object-fit: cover;
	object-position: center top;
	background: rgba(42, 55, 68, 0.06);
}

/* ---------- Page wrapper ---------- */

.songreps-page {
	max-width: 920px;
	margin: 0 auto;
	padding: 24px 20px 48px;
}

/* ---------- Hero ---------- */

.songreps-hero { margin-bottom: 28px; }
.songreps-hero__eyebrow {
	font-family: var(--songreps-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--songreps-accent);
	margin-bottom: 8px;
}
.songreps-hero__title {
	font-family: var(--songreps-font-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--songreps-fg);
	margin: 0;
}
.songreps-hero__subhead {
	font-size: 15px;
	color: var(--songreps-primary);
	margin: 10px 0 0;
	line-height: 1.55;
	max-width: 580px;
}

/* ---------- Bulk download band (cohort directory only) ---------- */

.songreps-bulkdownload {
	background: var(--songreps-cream);
	border: 0.5px solid var(--songreps-border);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: var(--songreps-shadow-soft);
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.songreps-bulkdownload__title {
	font-family: var(--songreps-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--songreps-fg);
	line-height: 1.3;
}
.songreps-bulkdownload__hint {
	font-size: 13px;
	color: var(--songreps-muted);
	margin-top: 4px;
	line-height: 1.55;
}

/* ---------- Search bar (program directory) ---------- */

.songreps-search {
	position: sticky;
	top: 0;
	z-index: 10;
	margin: 0 -20px 24px;
	padding: 12px 20px;
	background: var(--songreps-bg);
	border-bottom: 0.5px solid var(--songreps-border);
}
.songreps-search__label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.songreps-search__input {
	width: 100%;
	min-height: 44px;
	padding: 12px 14px;
	background: rgba(42, 55, 68, 0.04);
	border: none;
	border-radius: 8px;
	font-family: var(--songreps-font-body);
	font-size: 14px;
	color: var(--songreps-fg);
	outline: none;
}
.songreps-search__input:focus {
	box-shadow: 0 0 0 2px rgba(181, 134, 85, 0.4);
}
.songreps-search__input::placeholder { color: var(--songreps-muted); }

/* ---------- Grid ---------- */

.songreps-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* ---------- Writer card ---------- */

.songreps-card {
	background: var(--songreps-cream);
	border: 0.5px solid var(--songreps-border);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: var(--songreps-shadow-soft);
	transition: box-shadow 150ms ease-out;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.songreps-card:hover { box-shadow: var(--songreps-shadow-hover); }
.songreps-writer--host {
	border-color: rgba(181, 134, 85, 0.40);
}
.songreps-writer__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.songreps-writer__name-block { flex: 1; min-width: 0; }
.songreps-writer__name {
	font-family: var(--songreps-font-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--songreps-fg);
	line-height: 1.3;
}
.songreps-writer__role-suffix {
	font-family: var(--songreps-font-body);
	font-weight: 400;
	font-size: 13px;
	color: var(--songreps-muted);
	margin-left: 6px;
}
.songreps-writer__meta {
	font-size: 13px;
	color: var(--songreps-muted);
	margin-top: 2px;
}
.songreps-writer__bio {
	font-size: 13px;
	color: var(--songreps-primary);
	margin: 0;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.songreps-writer__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding-top: 4px;
}

/* ---------- Avatars (large 44px for cards) ---------- */

.songreps-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	font-family: var(--songreps-font-display);
	font-weight: 600;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.songreps-avatar.av-slate  { background: var(--songreps-primary); color: var(--songreps-cream); }
.songreps-avatar.av-bronze { background: var(--songreps-accent);  color: var(--songreps-cream); }
.songreps-avatar.av-sand   { background: var(--songreps-muted);   color: var(--songreps-cream); }
.songreps-avatar--photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
}

/* ---------- Buttons ---------- */

.songreps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 16px;
	border: 0.5px solid var(--songreps-border-strong);
	background: transparent;
	color: var(--songreps-primary);
	font-family: var(--songreps-font-body);
	font-weight: 500;
	font-size: 14px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}
.songreps-btn:hover {
	background: rgba(42, 55, 68, 0.04);
	text-decoration: none;
}
.songreps-btn--secondary { /* alias for clarity at call sites */ }

.songreps-btn-text {
	color: var(--songreps-accent);
	font-family: var(--songreps-font-body);
	font-weight: 500;
	font-size: 13px;
	text-decoration: none;
}
.songreps-btn-text:hover { text-decoration: underline; }
.songreps-btn-text--muted { color: var(--songreps-primary); }

/* ---------- Empty states ---------- */

.songreps-empty {
	background: var(--songreps-cream);
	border: 0.5px solid var(--songreps-border);
	border-radius: 12px;
	padding: 32px 20px;
	text-align: center;
	color: var(--songreps-muted);
	font-size: 14px;
	box-shadow: var(--songreps-shadow-soft);
}
.songreps-empty--no-matches { margin-top: 14px; }
.songreps-empty__query {
	font-weight: 600;
	color: var(--songreps-fg);
}
.songreps-empty__query::before { content: '\201C'; }
.songreps-empty__query::after  { content: '\201D'; }

/* ---------- Footnote ---------- */

.songreps-page__footnote {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 0.5px solid var(--songreps-border);
	text-align: center;
	font-size: 13px;
	color: var(--songreps-muted);
}
.songreps-page__footnote a {
	color: var(--songreps-accent);
	text-decoration: none;
	font-weight: 500;
}
.songreps-page__footnote a:hover { text-decoration: underline; }

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
	.songreps-topbar {
		height: 68px;
		padding: 0 32px;
		/* Desktop sticky — pins to viewport top once the cream-strip
		 * scrolls past. The .is-stuck class (toggled by
		 * assets/js/nav-sticky.js from an IntersectionObserver on
		 * the cream-strip) shrinks the bar to match the platform-
		 * bar's intrinsic desktop height (57px = 10px padding-y on
		 * each side + ~28px tallest content + 1px border-bottom)
		 * so the two stack edge-to-edge cleanly. Mobile sticky
		 * (logged-in only) is unchanged and lives at the max-width:
		 * 767.98px block near the top of this file. */
		position: sticky;
		top: 0;
		z-index: 110;
		transition: height 250ms ease-out, padding 250ms ease-out;
	}
	.songreps-topbar__logo-img {
		transition: height 250ms ease-out;
	}
	.songreps-topbar.is-stuck {
		height: 57px;
	}
	.songreps-topbar.is-stuck .songreps-topbar__logo-img {
		height: 57px;
	}
	.songreps-topbar__nav {
		display: flex;
		align-items: center;
		gap: 24px;
	}
	.songreps-topbar__nav-item {
		font-family: var(--songreps-font-body);
		font-size: 13px;
		color: rgba(244, 237, 224, 0.7);
		text-decoration: none;
	}
	.songreps-topbar__nav-item:hover { color: var(--songreps-bg); text-decoration: none; }
	.songreps-topbar__nav-item.is-active {
		color: var(--songreps-bg);
		font-weight: 500;
	}

	.songreps-page { padding: 32px 40px 64px; }

	.songreps-hero { margin-bottom: 36px; }
	.songreps-hero__title { font-size: 36px; line-height: 1.15; }

	.songreps-bulkdownload {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px;
		gap: 24px;
	}
	.songreps-bulkdownload__copy { flex: 1; min-width: 0; }
	.songreps-btn { padding: 12px 20px; }

	.songreps-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.songreps-card { padding: 22px 24px; }

	.songreps-search { margin: 0 0 28px; padding: 14px 0; }
}

/* -----------------------------------------------------------------------
 * Directory controls strip — sort dropdown + filter checkboxes.
 * Lives between the search input and the grid. Mobile: vertical stack
 * (sort first, filters below). Desktop: single horizontal row.
 * --------------------------------------------------------------------- */
.songreps-controls {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 20px;
	padding: 16px 18px;
	background: var(--songreps-cream);
	border: 0.5px solid var(--songreps-border);
	border-radius: 12px;
	box-shadow: var(--songreps-shadow-soft);
}

@media ( min-width: 768px ) {
	.songreps-controls {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		margin-bottom: 28px;
		padding: 14px 22px;
	}
}

.songreps-controls__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.songreps-controls__label,
.songreps-controls__legend {
	font-family: var(--songreps-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--songreps-muted);
	margin: 0;
	padding: 0;
}

.songreps-controls__select {
	min-height: 36px;
	padding: 6px 32px 6px 12px;
	background: var(--songreps-bg);
	border: 0.5px solid var(--songreps-border);
	border-radius: 8px;
	font-family: var(--songreps-font-body);
	font-size: 14px;
	color: var(--songreps-fg);
	cursor: pointer;
	min-width: 220px;
}

.songreps-controls__select:focus-visible {
	outline: 2px solid var(--songreps-accent);
	outline-offset: 2px;
}

.songreps-controls__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	border: none;
	margin: 0;
	padding: 0;
}

.songreps-controls__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--songreps-font-body);
	font-size: 14px;
	color: var(--songreps-fg);
	cursor: pointer;
}

.songreps-controls__check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--songreps-accent);
	cursor: pointer;
}

.songreps-controls__submit {
	min-height: 36px;
	padding: 6px 14px;
	background: var(--songreps-primary);
	color: var(--songreps-cream);
	border: none;
	border-radius: 8px;
	font-family: var(--songreps-font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* -----------------------------------------------------------------------
 * Per-row activity badges. Sage / sand / neutral pills above the bio.
 * Mirrors the existing pill convention used in cohort.css but scoped
 * to the directory page so we can tune sizes independently.
 * --------------------------------------------------------------------- */
.songreps-writer__activity {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin: -4px 0 8px;
}

.songreps-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--songreps-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.songreps-pill--active {
	/* Sage utility tint per design-system.md §2 / §8. */
	background: rgba( 122, 140, 111, 0.14 );
	color: #4d5e44;
}

.songreps-pill--last {
	background: rgba( 42, 55, 68, 0.06 );
	color: var(--songreps-muted);
}

.songreps-pill--rounds {
	background: rgba( 42, 55, 68, 0.06 );
	color: var(--songreps-primary);
	font-weight: 600;
}

/* -----------------------------------------------------------------------
 * Writer name link (popover trigger). Shares look with the rest of
 * .songreps-writer__name; the anchor adds a subtle hover/focus state
 * so writers know the name is clickable.
 * --------------------------------------------------------------------- */
.songreps-writer-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.songreps-writer-link:hover,
.songreps-writer-link:focus {
	color: var(--songreps-accent);
	text-decoration: none;
}

.songreps-writer-link:focus-visible {
	outline: 2px solid var(--songreps-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ============================================================
 * Cream strip — repurposed manila band above the primary nav.
 *
 * Two visual modes, swapped by viewport:
 *
 *   - Mobile (< 768px): a session-affordance band. Right-aligned
 *     Log in + Sign up (logged out), or Log out (logged in). The
 *     mobile primary nav is too short to host these, so they live
 *     here for one-tap reach.
 *
 *   - Desktop (>= 768px): a 20px decorative band. The session
 *     cluster ships in markup but is display:none — Log in / Sign
 *     up live in the primary nav's right side on desktop. The
 *     band exists to give the slate primary nav a soft top edge.
 *
 * Companion partial: templates/parts/cream-strip.php.
 * ============================================================ */

.songreps-cream-strip {
	background: var(--manila, #f3ede0);
	min-height: 36px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.songreps-cream-strip__session {
	display: flex;
	align-items: center;
	gap: 12px;
}

.songreps-cream-strip__link {
	font-family: var(--songreps-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--songreps-text-muted, #6f7e89);
	text-decoration: none;
	line-height: 1;
	padding: 6px 4px;      /* touch-target padding while keeping the band visually compact */
	transition: color 80ms ease;
}
.songreps-cream-strip__link:hover,
.songreps-cream-strip__link:focus { color: var(--songreps-fg); text-decoration: none; }
.songreps-cream-strip__link:focus-visible {
	outline: 2px solid var(--songreps-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.songreps-cream-strip__cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--songreps-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--songreps-cream);
	background: var(--songreps-accent);
	padding: 6px 12px;
	line-height: 1;
	border-radius: 6px;
	text-decoration: none;
	transition: background 80ms ease;
}
.songreps-cream-strip__cta:hover,
.songreps-cream-strip__cta:focus {
	background: var(--songreps-accent-dark, #8c6238);
	color: var(--songreps-cream);
	text-decoration: none;
}
.songreps-cream-strip__cta:focus-visible {
	outline: 2px solid var(--songreps-cream);
	outline-offset: 2px;
}

/* Mobile-logged-in: render the strip as a 20px decorative band —
 * the same visual treatment as desktop — even though there's no
 * logged-in content to host. The pure manila pop above the slate
 * primary nav is a deliberate visual continuity choice; the 2026-
 * 05-14 consolidation initially collapsed this entirely but that
 * was an over-correction (the strip serves a visual job, not just
 * a content job). The strip scrolls away on page scroll while the
 * primary nav + platform bar stick to viewport top (see the
 * sticky rules under .songreps-topbar--logged-in and .platform-bar
 * at the mobile breakpoint). */
.songreps-cream-strip--empty {
	min-height: 0;
	height: 20px;
	padding: 0;
}

/* Desktop: collapse the strip to a decorative 20px band across
 * both auth states. The logged-out session cluster stays in markup
 * but is hidden — Log in / Sign up live in the primary nav's
 * right side at >= 768px (see .songreps-topbar__session below). */
@media (min-width: 768px) {
	.songreps-cream-strip {
		min-height: 0;
		height: 20px;
		padding: 0;
	}
	.songreps-cream-strip__session { display: none; }
}

/* ============================================================
 * Session affordances — right side of the primary nav, logged-out
 * only. "Log in" text link + "Sign up" bronze CTA button.
 * Logged-in users render nothing on the right side of the dark
 * slate bar — their account affordances live in the platform bar.
 *
 * Mobile: the cluster hides; Log in / Sign up move into the
 * hamburger sheet below as a separated section.
 * ============================================================ */

.songreps-topbar__session {
	display: none;
	align-items: center;
	gap: 20px;
	margin-left: auto;
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.songreps-topbar__session { display: inline-flex; }
}

.songreps-topbar__session-link {
	font-family: var(--songreps-font-body);
	font-size: 14px;
	font-weight: 500;
	color: rgba(244, 237, 224, 0.85);
	text-decoration: none;
	transition: color 100ms ease;
}
.songreps-topbar__session-link:hover,
.songreps-topbar__session-link:focus-visible {
	color: var(--songreps-cream);
	text-decoration: none;
}
.songreps-topbar__session-link:focus-visible {
	outline: 2px solid var(--songreps-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.songreps-topbar__session-cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--songreps-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--songreps-cream);
	background: var(--songreps-accent);
	padding: 9px 18px;
	line-height: 1;
	border-radius: 6px;
	text-decoration: none;
	transition: background 100ms ease;
}
.songreps-topbar__session-cta:hover,
.songreps-topbar__session-cta:focus {
	background: var(--songreps-accent-dark);
	color: var(--songreps-cream);
	text-decoration: none;
}
.songreps-topbar__session-cta:focus-visible {
	outline: 2px solid var(--songreps-cream);
	outline-offset: 2px;
}

/* ============================================================
 * Mobile-logged-in avatar trigger + account dropdown
 *
 * Right-side cluster of the primary nav for logged-in writers on
 * narrow viewports. Visible below 768px only — on desktop the
 * platform-bar avatar takes over the same role (see
 * .platform-bar__account in platform-bar.css). The dropdown markup
 * merges workspace destinations, identity actions, public links,
 * and Log out into a single sheet — replacing the previous
 * hamburger + cream-strip avatar pair on mobile-logged-in.
 *
 * Toggle JS lives in assets/js/platform-bar.js (same module that
 * runs the desktop platform-bar dropdown — both triggers share
 * the click-outside / Escape / aria-expanded handling).
 * ============================================================ */

.songreps-topbar__account-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.songreps-topbar__account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* 44x44 minimum hit area to meet WCAG 2.5.5. The visible chip
	 * is smaller; padding pads the touch surface around the avatar
	 * + name without inflating the visual size. */
	min-height: 44px;
	padding: 4px 10px 4px 4px;
	border-radius: 22px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: rgba(244, 237, 224, 0.92);
	font: inherit;
	line-height: 1;
	transition: background 0.15s ease;
}
.songreps-topbar__account:hover,
.songreps-topbar__account:focus-visible {
	background: rgba(255, 250, 240, 0.06);
}
.songreps-topbar__account:focus-visible {
	outline: 2px solid var(--songreps-accent, #b58655);
	outline-offset: 2px;
}
.songreps-topbar__account-avatar {
	width: 28px;
	height: 28px;
	font-size: 11px;
}
.songreps-topbar__account-name {
	font-family: var(--songreps-font-body);
	font-size: 14px;
	font-weight: 500;
	color: rgba(244, 237, 224, 0.92);
	white-space: nowrap;
}
.songreps-topbar__account-caret {
	color: rgba(244, 237, 224, 0.6);
	font-size: 10px;
	margin-left: 1px;
	line-height: 1;
}

.songreps-topbar__account-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 220px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--songreps-hairline-soft, #e8e0cf);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(42, 55, 68, 0.10),
	            0 1px 3px rgba(42, 55, 68, 0.08);
	z-index: 60;
}
.songreps-topbar__account-menu[hidden] { display: none; }

.songreps-topbar__account-menu-item {
	display: block;
	padding: 10px 16px;
	font-family: var(--songreps-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--songreps-fg, #2a3744);
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}
.songreps-topbar__account-menu-item:hover,
.songreps-topbar__account-menu-item:focus-visible {
	background: var(--songreps-bg, #f4ede0);
	color: var(--songreps-fg, #2a3744);
	text-decoration: none;
	outline: none;
}
.songreps-topbar__account-menu-item--muted {
	color: var(--songreps-text-muted, #6f7e89);
}
.songreps-topbar__account-menu-item--muted:hover,
.songreps-topbar__account-menu-item--muted:focus-visible {
	color: var(--songreps-fg, #2a3744);
}
.songreps-topbar__account-menu-divider {
	height: 1px;
	background: var(--songreps-hairline-soft, #e8e0cf);
	margin: 4px 0;
	list-style: none;
	padding: 0;
}

/* Desktop: the platform-bar avatar handles this surface. The
 * topbar avatar trigger ships in markup but is hidden so the
 * platform-bar.js trigger lookup harmlessly no-ops on this
 * element at >= 768px. */
@media (min-width: 768px) {
	.songreps-topbar__account-wrap { display: none; }
}

/* ============================================================
 * Mobile-logged-out hamburger + sheet
 *
 * Toggle button visible at < 768px only. Sheet (the disclosure
 * panel below the dark nav) hidden by default; topbar.js flips
 * its hidden attribute on tap and listens for tap-outside +
 * Escape to close. Logged-in users see the avatar trigger above
 * instead — both the hamburger button AND the sheet are gated on
 * !is_user_logged_in() in the partial.
 * ============================================================ */

.songreps-topbar__menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	/* 44x44 hit area to meet WCAG 2.5.5 minimum target size. Inner
	 * icon bars stay at 18x2 — visual size is preserved while the
	 * tappable area grows. */
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
}
.songreps-topbar__menu-toggle:hover,
.songreps-topbar__menu-toggle:focus-visible {
	background: rgba(255, 250, 240, 0.06);
}
.songreps-topbar__menu-toggle:focus-visible {
	outline: 2px solid var(--songreps-accent);
	outline-offset: 2px;
}
.songreps-topbar__menu-bar {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: rgba(244, 237, 224, 0.85);
	transition: transform 120ms ease, opacity 120ms ease;
}

/* Open state — three bars morph into an X. */
.songreps-topbar__menu-toggle.is-open .songreps-topbar__menu-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.songreps-topbar__menu-toggle.is-open .songreps-topbar__menu-bar:nth-child(2) {
	opacity: 0;
}
.songreps-topbar__menu-toggle.is-open .songreps-topbar__menu-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.songreps-topbar__menu {
	background: var(--songreps-fg);
	color: var(--songreps-bg);
	padding: 12px 20px 20px;
	border-top: 1px solid rgba(244, 237, 224, 0.06);
	z-index: 80;
}

.songreps-topbar__menu-nav {
	display: flex;
	flex-direction: column;
}
.songreps-topbar__menu-link {
	display: block;
	padding: 12px 4px;
	font-family: var(--songreps-font-body);
	font-size: 15px;
	color: rgba(244, 237, 224, 0.85);
	text-decoration: none;
	border-bottom: 1px solid rgba(244, 237, 224, 0.06);
}
.songreps-topbar__menu-link:last-child { border-bottom: 0; }
.songreps-topbar__menu-link:hover,
.songreps-topbar__menu-link:focus { color: var(--songreps-bg); text-decoration: none; }
.songreps-topbar__menu-link.is-active {
	color: var(--songreps-bg);
	font-weight: 500;
}

/* Reduced-motion: kill the stuck-state animation. The class still
 * toggles instantly; the user just doesn't see the 250ms ease. */
@media (prefers-reduced-motion: reduce) {
	.songreps-topbar,
	.songreps-topbar__logo-img {
		transition: none;
	}
}

/* Logged-out session block inside the hamburger sheet. Separated
 * from the public nav above by a hairline so Log in / Sign up read
 * as their own group. */
.songreps-topbar__menu-nav--session {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(244, 237, 224, 0.10);
}
.songreps-topbar__menu-link--cta {
	color: var(--songreps-accent);
	font-weight: 600;
}
.songreps-topbar__menu-link--cta:hover,
.songreps-topbar__menu-link--cta:focus {
	color: var(--songreps-accent);
}

@media (min-width: 768px) {
	/* Desktop — hamburger goes away, sheet never renders. */
	.songreps-topbar__menu-toggle { display: none; }
	.songreps-topbar__menu        { display: none !important; }
}