/**
 * YWS mobile chrome shell (max-width: 768px)
 * Desktop chrome unchanged above this breakpoint.
 */

/* Hidden on desktop; shown only in the media query below */
#mobile-header,
#mobile-footer,
#mobile-nav,
#mobile-account,
#mobile-sidebar-backdrop {
	display: none;
}

@media (max-width: 768px) {
	/*
	 * Fluid layout at device width. Viewport meta (minimum-scale=1,
	 * shrink-to-fit=no) keeps the fixed header at true screen size.
	 */
	html {
		/* F1: safe-area insets (notches, rounded corners, home indicator) */
		--yws-safe-top: env(safe-area-inset-top, 0px);
		--yws-safe-right: env(safe-area-inset-right, 0px);
		--yws-safe-bottom: env(safe-area-inset-bottom, 0px);
		--yws-safe-left: env(safe-area-inset-left, 0px);
		--yws-mobile-header-h: calc(56px + var(--yws-safe-top));
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body.is-mobile-sidebar-open,
	body.is-mobile-nav-open {
		overflow: hidden;
	}

	/* ---- Hide desktop chrome ---- */
	#user-bar-container {
		/* Keep in DOM for #sign-in-box; collapse visual bar */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 0 !important;
		min-height: 0 !important;
		z-index: 16000;
		overflow: visible;
		pointer-events: none;
		width: 100% !important;
	}

	#user-bar {
		position: static;
		height: 0 !important;
		min-height: 0 !important;
		background: transparent;
		overflow: visible;
		pointer-events: none;
		width: 100% !important;
	}

	#user-bar .inner {
		max-width: none;
		height: 0;
		overflow: visible;
		zoom: normal;
	}

	#user-bar .user-bar__nav,
	#user-bar .user-bar__search {
		display: none !important;
	}

	#user-bar .user-bar__nav-wrap {
		position: static;
		height: 0;
		overflow: visible;
		pointer-events: none;
	}

	#logo-area,
	#navtabs {
		display: none !important;
	}

	/* Quoteline + desktop footer columns */
	div[style*="min-width:1000px"],
	.yws-labyrinth-whisper {
		min-width: 0 !important;
		width: 100% !important;
	}

	#quoteline {
		display: none !important;
	}

	#footer-wrap {
		min-width: 0 !important;
		padding: 16px 12px;
		box-sizing: border-box;
	}

	#footer {
		display: none !important;
	}

	/* Desktop chrome leftovers that force ~1000px */
	#user-bar .inner,
	#logo-area,
	#navtabs {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	/*
	 * Mobile header = screen chrome (not part of the wide content column).
	 * Sized in CSS px at scale 1. JS may counter-scale via visualViewport
	 * if the page is pinch-zoomed.
	 */
	#mobile-header {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		height: var(--yws-mobile-header-h) !important;
		min-height: var(--yws-mobile-header-h) !important;
		/* FQ-4: must render above the backdrop (15550) and the nav/sidebar
		   drawers (15600) so the hamburger/account toggles stay visually
		   undimmed and tappable while a drawer is open. */
		z-index: 15700;
		margin: 0 !important;
		/* F1: push content below the notch/status bar; sides handled by .mobile-header__inner */
		padding: var(--yws-safe-top) 0 0 !important;
		overflow: visible !important;
		background-color: #17316d !important;
		color: #ecebf1 !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
		font-size: 16px !important;
		line-height: 1.2 !important;
		box-sizing: border-box !important;
		transform-origin: top left;
	}

	.mobile-header__inner {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 4px;
		width: 100% !important;
		max-width: 100% !important;
		height: 56px !important;
		min-height: 56px !important;
		margin: 0 !important;
		/* F1: respect rounded-corner/notch safe area in landscape */
		padding: 0 max(6px, var(--yws-safe-right)) 0 max(6px, var(--yws-safe-left)) !important;
		box-sizing: border-box !important;
	}

	.mobile-header__start {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 2px;
		justify-self: start;
		grid-column: 1;
		min-width: 0;
	}

	.mobile-header__menu {
		justify-self: start;
	}

	.mobile-header__logo {
		display: inline-flex !important;
		align-items: center;
		justify-self: center;
		grid-column: 2;
		line-height: 0 !important;
		flex: 0 0 auto;
	}

	.mobile-header__logo img {
		display: block !important;
		width: 64px !important;
		height: 28px !important;
		max-width: none !important;
		max-height: none !important;
		object-fit: contain;
	}

	.mobile-header__actions {
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 2px;
		justify-self: end;
		grid-column: 3;
		min-width: 0;
		flex-wrap: nowrap;
	}

	.mobile-header__btn {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
		padding: 0 !important;
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
		min-height: 44px !important;
		border: 0 !important;
		border-radius: 6px;
		background: transparent !important;
		color: #ecebf1 !important;
		cursor: pointer;
		font-size: 16px !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
		-webkit-appearance: none;
		appearance: none;
	}

	.mobile-header__btn:hover,
	.mobile-header__btn:focus-visible {
		background: rgba(255, 255, 255, 0.12) !important;
		outline: none;
	}

	.mobile-header__btn [class^="icon-"],
	.mobile-header__btn [class*=" icon-"],
	.mobile-header__btn [class^="icon-"]:before,
	.mobile-header__btn [class*=" icon-"]:before {
		font-size: 22px !important;
		line-height: 1 !important;
		width: auto !important;
		height: auto !important;
		vertical-align: middle;
	}

	/* FQ-1: mobile account entry point (Sign in / Me) */
	.mobile-header__account {
		position: relative;
	}

	.mobile-header__badge-dot {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #e0245e;
		box-shadow: 0 0 0 2px #17316d;
	}

	.mobile-header__search {
		display: none !important;
		align-items: center;
		gap: 2px;
		min-width: 0;
		width: 100%;
		height: 44px !important;
		margin: 0;
		padding: 0 0 0 10px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.12);
		box-sizing: border-box;
	}

	.mobile-header__search-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.mobile-header__search-input {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 40px !important;
		margin: 0;
		padding: 0 4px !important;
		border: 0 !important;
		background: transparent !important;
		color: #fff !important;
		font-size: 16px !important;
		line-height: 40px !important;
		box-shadow: none !important;
	}

	.mobile-header__search-input::placeholder {
		color: rgba(236, 235, 241, 0.7);
	}

	.mobile-header__search-submit,
	.mobile-header__search-close {
		flex: 0 0 auto;
		width: 44px !important;
		min-width: 44px !important;
		height: 44px !important;
	}

	.mobile-header__search-close {
		font-size: 28px !important;
		line-height: 1 !important;
	}

	/* Search mode: hamburger stays; rest of header becomes the search bar.
	   Logo/actions use display:!important in the base rules, so these overrides
	   must also use !important or the bar collapses under them. */
	#mobile-header.is-search-open .mobile-header__inner {
		grid-template-columns: auto 1fr !important;
	}

	#mobile-header.is-search-open .mobile-header__logo,
	#mobile-header.is-search-open .mobile-header__actions,
	#mobile-header.is-search-open .mobile-header__account {
		display: none !important;
	}

	#mobile-header.is-search-open .mobile-header__search,
	#mobile-header.is-search-open .mobile-header__search[hidden] {
		display: flex !important;
		grid-column: 2;
		align-self: center;
	}

	/* ---- Sign-in / Me dropdown under mobile header ---- */
	#sign-in-box {
		position: fixed !important;
		top: var(--yws-mobile-header-h) !important;
		left: auto !important;
		right: calc(8px + var(--yws-safe-right)) !important;
		width: min(280px, calc(100vw - 16px - var(--yws-safe-right))) !important;
		max-height: calc(100vh - var(--yws-mobile-header-h) - 8px - var(--yws-safe-bottom));
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
		z-index: 16001;
	}

	/* ---- FQ-1: account dropdown (mobile-header trigger, left of logo) ---- */
	#mobile-account {
		display: none;
		position: fixed;
		top: var(--yws-mobile-header-h);
		left: calc(8px + var(--yws-safe-left));
		right: auto;
		width: min(300px, calc(100vw - 16px - var(--yws-safe-right) - var(--yws-safe-left)));
		max-height: calc(100vh - var(--yws-mobile-header-h) - 8px - var(--yws-safe-bottom));
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 16001;
		background-color: #5b87b3;
		border-radius: 0 0 6px 6px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	body.is-mobile-account-open #mobile-account,
	body.is-mobile-account-open #mobile-account[hidden] {
		display: block;
	}

	.mobile-account__panel {
		padding: 12px 14px calc(12px + var(--yws-safe-bottom));
		color: #fff;
		font-size: 13px;
		box-sizing: border-box;
	}

	.mobile-account__profile {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 -14px 8px;
		padding: 4px 14px 12px;
		color: #fff;
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	}

	.mobile-account__avatar {
		flex: 0 0 44px;
		line-height: 0;
	}

	.mobile-account__avatar img,
	.mobile-account__avatar .avatar {
		display: block;
		width: 44px;
		height: 44px;
		border-radius: 4px;
	}

	.mobile-account__profile-meta {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mobile-account__username {
		display: block;
		font-weight: bold;
		font-size: 14px;
		line-height: 1.25;
		color: #fff;
	}

	.mobile-account__profile-caption {
		font-size: 11px;
		line-height: 1.2;
		color: rgba(255, 255, 255, 0.85);
	}

	.mobile-account__menu {
		list-style: none;
		margin: 0 0 4px;
		padding: 0;
	}

	.mobile-account__link {
		display: flex !important;
		align-items: center;
		gap: 8px;
		width: auto;
		height: auto !important;
		min-height: 44px;
		margin: 0 -14px;
		padding: 12px 14px !important;
		color: #fff !important;
		font-size: 13px;
		line-height: 1.3;
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		box-sizing: border-box;
	}

	.mobile-account__link:hover,
	.mobile-account__link:focus {
		background-color: #3B6AA0 !important;
		color: #fff !important;
	}

	.mobile-account__link [class^="icon-"] {
		width: 18px;
		font-size: 15px;
		text-align: center;
		flex: 0 0 auto;
	}

	.mobile-account__badge {
		margin-left: auto;
		padding: 1px 7px;
		border-radius: 999px;
		background: #e0245e;
		color: #fff;
		font-size: 11px;
		font-weight: bold;
		line-height: 1.4;
	}

	.mobile-account__footer {
		margin-top: 4px;
		padding-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.mobile-account__logout {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 8px 0;
		color: #fff;
		font-size: 13px;
		text-decoration: none;
	}

	.mobile-account__logout:hover {
		text-decoration: underline;
	}

	.mobile-account__title {
		margin: 0 0 8px;
		padding: 0;
		color: #fff;
		font-size: 13px;
		font-weight: bold;
	}

	.mobile-account__form label {
		display: block;
		margin: 8px 0 4px;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
	}

	.mobile-account__form label:first-of-type {
		margin-top: 0;
	}

	.mobile-account__form input.inputbox {
		width: 100%;
		max-width: 100%;
		height: 40px !important;
		margin: 0;
		padding: 4px 8px;
		font-size: 16px !important;
		box-sizing: border-box;
	}

	.mobile-account__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-top: 10px;
	}

	.mobile-account__actions .gemini-sidebar-btn {
		width: auto;
		min-width: 0;
		flex: 0 0 auto;
		margin: 0;
		padding: 9px 14px;
		font-size: 12px !important;
	}

	.mobile-account__remember {
		display: flex;
		align-items: center;
		gap: 5px;
		margin: 0;
		color: #fff;
		font-size: 11px;
		font-weight: normal;
		cursor: pointer;
	}

	.mobile-account__oauth {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 10px 0 0;
		color: rgba(255, 255, 255, 0.85);
		font-size: 11px;
	}

	.mobile-account__forgot {
		display: inline-block;
		margin-top: 10px;
		color: #fff;
		font-size: 12px;
		text-decoration: none;
	}

	.mobile-account__forgot:hover {
		text-decoration: underline;
	}

	.mobile-account__register {
		margin: 12px 0 0;
		padding-top: 10px;
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.mobile-account__register-link {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		color: #fff;
		font-size: 13px;
		font-weight: bold;
		text-decoration: none;
	}

	/* ---- Main shell (fluid — no 710px lock) ---- */
	#wrap {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0;
		padding: 12px;
		/* F1: clear fixed mobile header (56 + gap) plus notch safe area */
		padding-top: calc(68px + var(--yws-safe-top));
		box-sizing: border-box;
		border-radius: 0;
	}

	#content-main,
	#content,
	.breadcrumb-line,
	.nova-ucp {
		float: none !important;
		display: block;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	#content-main {
		padding: 10px;
	}

	/* Desktop uses margin-top:-10px (pull toward sticky chrome); that leaves
	   almost no gap under the fixed mobile header. */
	.breadcrumb-line {
		margin-top: 0 !important;
		margin-bottom: 10px !important;
	}

	.breadcrumb-line .breadcrumb {
		float: none !important;
		display: block;
	}

	body.section-index #content-main {
		padding: 0 !important;
		background: transparent !important;
	}

	/*
	 * F2: fix real overflow sources with fluid children instead of leaning on
	 * html/body overflow-x:hidden alone (that only clips content, it doesn't
	 * fix the layout). overflow-x:hidden above stays as a last-resort net.
	 */
	#content-main,
	.postbody,
	.pretty_text,
	.nova-ucp {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	#content-main img,
	.postbody img,
	.pretty_text img,
	.nova-ucp img {
		max-width: 100%;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	#content-main iframe,
	.postbody iframe,
	.pretty_text iframe,
	#content-main embed,
	.postbody embed,
	#content-main object,
	.postbody object,
	#content-main video,
	.postbody video,
	.post-text iframe,
	.post-text embed,
	.post-text object,
	.post-text .bbmedia,
	.post-text .bbvideo,
	.post-text .bbaudio {
		max-width: 100%;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	#content-main pre,
	.postbody pre,
	.pretty_text pre {
		max-width: 100%;
		overflow-x: auto;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	/* Wide tables scroll locally instead of pushing the whole page wide */
	#content-main table,
	.postbody table,
	.pretty_text table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Desktop leftovers that hard-code the 710px content column.
	 * Section banners bleed via their chrome wrapper (not width:calc on the
	 * banner itself — iOS Safari mis-measures calc(100% + 20px) and overflows).
	 * .create-banner-bleed covers About/Info (+ create) banners with inline 710px.
	 */
	.browse-modern > .yws-area-board-chrome,
	.people-modern > .yws-area-board-chrome,
	#content-main > .forum-board-chrome {
		margin-left: -10px !important;
		margin-right: -10px !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* Cancel #content-main top padding on browse/people (forums use padding-top:0). */
	.browse-modern > .yws-area-board-chrome,
	.people-modern > .yws-area-board-chrome {
		margin-top: -10px !important;
	}

	.browse-modern > .yws-area-board-chrome > .yws-area-board__banner,
	.people-modern > .yws-area-board-chrome > .yws-area-board__banner,
	.forum-board-chrome > .yws-area-board__banner,
	.forum-board-chrome > .forum-board__banner {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		box-sizing: border-box !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	.yws-area-board__copy,
	.yws-area-board__tagline {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
		word-wrap: break-word;
	}

	.browse-modern .browse-banner,
	.create-banner-bleed,
	#bannerhome,
	#bannerpeople,
	#chooseteam,
	#homerow,
	#content.leaderboards-modern .lb-hero {
		width: calc(100% + 20px) !important;
		max-width: none !important;
		min-width: 0 !important;
		margin-left: -10px !important;
		margin-right: -10px !important;
		box-sizing: border-box !important;
	}

	.browse-modern .browse-banner,
	.create-banner-bleed,
	#bannerhome,
	#bannerpeople,
	#chooseteam,
	#content.leaderboards-modern .lb-hero {
		margin-top: -10px !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}

	/* About / App wordmark banners: keep full “WriterFeed” readable
	   instead of mid-cropping under cover + fixed 158px height. */
	.create-banner-bleed.create-banner-bleed--wordmark {
		height: auto !important;
		aspect-ratio: 710 / 158;
		background-size: 100% 100% !important;
		background-position: center center !important;
	}

	/* About/Info Gemini forms: 16px inputs avoid iOS focus-zoom; actions share width. */
	#content .gemini-form .gemini-input,
	#content .gemini-form input[type="email"],
	#content .gemini-form input[type="password"],
	#content .gemini-form input[type="text"],
	#content .gemini-form textarea {
		font-size: 16px !important;
	}

	#content .gemini-form .gemini-form-actions .gemini-btn {
		flex: 1 1 auto;
		min-height: 44px;
		box-sizing: border-box;
	}

	#work {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		box-sizing: border-box !important;
	}

	/* Homepage: stack desktop multi-column home2 layouts */
	body.section-index .home2-welcome,
	body.section-index .home2-welcome__guest-layout,
	body.section-index .home2-main,
	body.section-index #content.home2-modern,
	body.section-index #content.home2-modern .home2-main.home-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.section-index .home2-welcome__guest-layout {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-areas: "copy" "metrics" "ribbon" !important;
		gap: 14px !important;
		padding: 16px 12px 0 !important;
	}

	body.section-index .home2-welcome__guest-copy,
	body.section-index .home2-welcome__guest-metrics {
		justify-self: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.section-index .home2-welcome__guest-ribbon {
		margin: 0 -12px !important;
	}

	body.section-index #content.home2-modern .hero-grid,
	body.section-index #content.home2-modern .content-grid,
	body.section-index #content.home2-modern .spotlight-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	/* Guests: login under welcome, then lead/league, then anagram — all inside
	   the white home-card (card width minus padding). display:contents lets
	   sidebar children take their own grid areas. */
	body.section-index #content.home2-modern .hero-grid:has(.home2-sidebar-card--login) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas: "login" "main" "anagram" !important;
		gap: 12px !important;
		align-items: stretch !important;
	}

	body.section-index #content.home2-modern .hero-grid:has(.home2-sidebar-card--login) .hero-sidebar {
		display: contents !important;
	}

	body.section-index #content.home2-modern .hero-grid:has(.home2-sidebar-card--login) .home2-sidebar-card--login {
		grid-area: login;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.section-index #content.home2-modern .hero-grid:has(.home2-sidebar-card--login) .hero-column {
		grid-area: main;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.section-index #content.home2-modern .hero-grid:has(.home2-sidebar-card--login) .home2-anagram {
		grid-area: anagram;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.section-index #content.home2-modern .home2-main.home-card {
		padding: 14px 12px 16px !important;
	}

	body.section-index #content.home2-modern .hero-column,
	body.section-index #content.home2-modern .hero-sidebar {
		gap: 12px !important;
	}

	/* Welcome header: avatar + greeting stay side-by-side; stats stay a
	   compact 3-up chip row (not full-width stacked bars); actions denser 2×2. */
	body.section-index .home2-welcome__header-row {
		grid-template-columns: auto minmax(0, 1fr) !important;
		grid-template-areas:
			"avatar intro"
			"stats stats" !important;
		column-gap: 10px !important;
		row-gap: 8px !important;
		margin-bottom: 8px !important;
		padding: 10px 12px 0 !important;
	}

	body.section-index .home2-welcome__avatar {
		width: 52px !important;
		height: 52px !important;
	}

	body.section-index .home2-welcome__title {
		font-size: 15px !important;
		letter-spacing: 0.2px !important;
	}

	body.section-index .home2-welcome__subtitle {
		line-height: 1.35 !important;
	}

	body.section-index .home2-welcome__header-row .home2-welcome__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 5px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	body.section-index .home2-welcome__stat {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		min-height: 44px !important;
		padding: 6px 4px !important;
		text-align: center !important;
	}

	body.section-index .home2-welcome__stat-body {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px 4px !important;
		width: 100% !important;
	}

	body.section-index .home2-welcome__stat-line {
		flex: 0 1 auto !important;
		line-height: 1.2 !important;
	}

	body.section-index .home2-welcome__stat-line-full {
		display: none !important;
	}

	body.section-index .home2-welcome__stat-line-short {
		display: inline !important;
	}

	body.section-index .home2-welcome__stat-streak-mark {
		margin-left: 0 !important;
		padding: 1px 5px !important;
	}

	/* Compact secondary CTAs under the greeting — short labels stay one line. */
	body.section-index .home2-welcome__actions,
	body.section-index .home2-welcome__actions--onboard,
	#content.home2-modern .quick-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.section-index .home2-welcome__actions {
		gap: 5px !important;
		padding: 0 12px 10px !important;
	}

	body.section-index .home2-welcome__action {
		min-height: 32px !important;
		padding: 5px 6px !important;
		gap: 4px !important;
		line-height: 1.15 !important;
		white-space: nowrap !important;
	}

	body.section-index .home2-welcome__action-label-full {
		display: none !important;
	}

	body.section-index .home2-welcome__action-label-short {
		display: inline !important;
	}

	body.section-index .home2-welcome__onboard {
		min-height: 40px !important;
		padding: 6px 6px !important;
		gap: 3px !important;
	}

	/* A1: reviewer-league cards (5-up) clip names/avatars under ~350px —
	   let them wrap to a 3-up grid instead. */
	body.section-index #content.home2-modern .home2-weekly-reviewers__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;
	}

	body.section-index #content.home2-modern .home2-weekly-reviewers__head {
		flex-wrap: wrap !important;
		gap: 6px 8px !important;
	}

	body.section-index #content.home2-modern .home2-weekly-reviewers__link {
		margin-left: auto !important;
	}

	body.section-index #content.home2-modern .spotlight-card {
		padding: 10px !important;
	}

	body.section-index #content.home2-modern .side-col {
		gap: 12px !important;
	}

	/* ---- Shared backdrop ---- */
	#mobile-sidebar-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 15550;
		background: rgba(0, 0, 0, 0.45);
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	#mobile-sidebar-backdrop:not([hidden]) {
		display: block;
	}

	/* ---- Nav menu (hamburger → #navtabs) ---- */
	#mobile-nav {
		display: none;
		position: fixed;
		top: var(--yws-mobile-header-h);
		left: 0;
		bottom: 0;
		width: min(280px, 85vw);
		/* F4: must render above the backdrop (was 15000 < backdrop 15550, making the
		   panel unclickable/dimmed under the backdrop) */
		z-index: 15600;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #17316d;
		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.28);
		box-sizing: border-box;
	}

	body.is-mobile-nav-open #mobile-nav {
		display: block;
	}

	body.is-mobile-nav-open #mobile-nav[hidden] {
		display: block;
	}

	.mobile-nav__panel {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		/* F1: left edge sits on the screen edge (rounded corner in landscape); bottom
		   clears the home indicator */
		padding: 12px 0 calc(20px + var(--yws-safe-bottom)) var(--yws-safe-left);
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
	}

	.mobile-nav__title {
		margin: 0 16px 10px;
		padding: 0;
		color: rgba(236, 235, 241, 0.7);
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.mobile-nav__links {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.mobile-nav__links a,
	.mobile-nav__links .mobile-nav__desktop-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		float: none !important;
		width: 100%;
		height: auto !important;
		margin: 0;
		padding: 12px 16px;
		border: 0;
		border-radius: 0 !important;
		background: transparent !important;
		color: #ecebf1 !important;
		font-size: 14px;
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		box-sizing: border-box;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.mobile-nav__links a .navtab-icon,
	.mobile-nav__links .mobile-nav__desktop-toggle .navtab-icon {
		display: inline-block !important;
		flex: 0 0 1.25em;
		width: 1.25em;
		text-align: center;
		line-height: 1;
	}

	.mobile-nav__links a .navtab-label,
	.mobile-nav__links .mobile-nav__desktop-toggle .navtab-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		clip: auto;
		border: 0;
		flex: 1 1 auto;
	}

	.mobile-nav__links a.greenroom {
		float: none !important;
		margin-right: 0 !important;
	}

	.mobile-nav__links a:hover,
	.mobile-nav__links a:focus,
	.mobile-nav__links .mobile-nav__desktop-toggle:hover,
	.mobile-nav__links .mobile-nav__desktop-toggle:focus {
		background: rgba(255, 255, 255, 0.1) !important;
		color: #fff !important;
	}

	.mobile-nav__links a.selected {
		background: rgba(255, 255, 255, 0.14) !important;
		font-weight: bold;
	}

	/* ---- Sidebar drawer ---- */
	#sidebar {
		display: none;
		float: none !important;
		position: fixed;
		top: var(--yws-mobile-header-h);
		right: 0;
		bottom: 0;
		width: min(280px, 85vw);
		margin: 0;
		/* F1: right edge sits on the screen edge (rounded corner in landscape); bottom
		   clears the home indicator */
		padding: 12px calc(12px + var(--yws-safe-right)) calc(12px + var(--yws-safe-bottom)) 12px;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 15600;
		background-color: #3B6AA0;
		box-sizing: border-box;
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.28);
		-webkit-overflow-scrolling: touch;
	}

	body.is-mobile-sidebar-open #sidebar,
	body.is-mobile-sidebar-open #sidebar:has(.reading-sidebar),
	body.section-index.is-mobile-sidebar-open #sidebar {
		display: block !important;
	}

	/* ---- Mobile footer ---- */
	#mobile-footer {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		/* F1: clear the home indicator */
		padding: 4px 4px calc(8px + var(--yws-safe-bottom));
		box-sizing: border-box;
		color: #939393;
		font-size: 13px;
		text-align: center;
	}

	.mobile-footer__tools {
		margin: 0 0 12px;
		padding: 0;
		color: #a8a8a8;
		font-size: 12px;
	}

	.mobile-footer__tools a,
	.mobile-footer__nav a,
	.mobile-footer__copy a {
		color: #c5c5c5;
		text-decoration: none;
	}

	.mobile-footer__tools a:hover,
	.mobile-footer__nav a:hover {
		color: #fff;
		text-decoration: underline;
	}

	.mobile-footer__nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 16px;
		margin: 0 0 12px;
	}

	.mobile-footer__copy,
	.mobile-footer__stats {
		margin: 0 0 8px;
		padding: 0;
		font-size: 12px;
		letter-spacing: 0.02em;
		text-transform: none;
		font-weight: normal;
		color: #939393;
	}

	.mobile-footer__stats {
		margin-bottom: 0;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 11px;
	}

	/* Login keeps its own chrome (register uses the normal mobile shell) */
	body.login-page #mobile-header,
	body.login-page #mobile-footer,
	body.login-page #mobile-nav,
	body.login-page #mobile-sidebar-backdrop {
		display: none !important;
	}

	body.login-page #wrap {
		min-width: 0;
		padding-top: 12px;
		padding-right: 12px;
	}
}

/*
 * Tablet sidebar drawer (769–1024): desktop user-bar stays, but the floated
 * 230px sidebar no longer fits beside content. Hide the column and open it as
 * a drawer from the user-bar hot-dog (#user-bar-sidebar-toggle).
 */
@media (max-width: 1024px) and (min-width: 769px) {
	html {
		--yws-safe-top: env(safe-area-inset-top, 0px);
		--yws-safe-right: env(safe-area-inset-right, 0px);
		--yws-safe-bottom: env(safe-area-inset-bottom, 0px);
		--yws-safe-left: env(safe-area-inset-left, 0px);
		--yws-user-bar-h: calc(45px * var(--yws-density, 1));
	}

	body.is-mobile-sidebar-open {
		overflow: hidden;
	}

	#content-main {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		/* Must blockify: desktop uses display:inline with float; width is ignored
		   on inline boxes once float is cleared (empty blue gutters at tablet). */
		display: block !important;
		box-sizing: border-box !important;
	}

	.breadcrumb-line {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	#mobile-sidebar-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 15550;
		background: rgba(0, 0, 0, 0.45);
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	#mobile-sidebar-backdrop:not([hidden]) {
		display: block;
	}

	#sidebar {
		display: none;
		float: none !important;
		position: fixed;
		top: var(--yws-user-bar-h);
		right: 0;
		bottom: 0;
		width: min(280px, 85vw);
		margin: 0;
		padding: 12px calc(12px + var(--yws-safe-right)) calc(12px + var(--yws-safe-bottom)) 12px;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 15600;
		background-color: #3B6AA0;
		box-sizing: border-box;
		box-shadow: -4px 0 16px rgba(0, 0, 0, 0.28);
		-webkit-overflow-scrolling: touch;
	}

	body.is-mobile-sidebar-open #sidebar,
	body.is-mobile-sidebar-open #sidebar:has(.reading-sidebar),
	body.section-index.is-mobile-sidebar-open #sidebar {
		display: block !important;
	}
}