/*
 * AUTOOL Dongchedi App Shell — fixed header + fixed left sidebar.
 * Structure, breakpoints, and interaction geometry are copied 1:1 from
 * autoGenFile/dongchedi (STYLE_IMPLEMENTATION_GUIDE.md + the live
 * dongchedi-home snapshot markup/CSS). Colors come from the theme's
 * tokens.css (--dcd-* custom properties), which this file consumes but
 * does not redefine.
 *
 * Breakpoints match the reference exactly: 1024 / 1280 / 1440 / 1680 / 1920.
 */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--shell-nav-w: 0px;
	--wp-admin-bar-h: 0px;
	--shell-header-h: 56px;
}

@media (min-width: 1440px) {
	:root {
		--shell-header-h: 64px;
	}
}

@media (min-width: 1680px) {
	:root {
		--shell-header-h: 78px;
	}
}

/* WordPress's own admin toolbar is fixed at the real viewport top when an
   editor is logged in. Mirror core's own html.wp-toolbar offset (32px,
   46px under 783px) so our fixed header/sidebar/drawer drop below it
   instead of sliding underneath it. */
body.admin-bar {
	--wp-admin-bar-h: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--wp-admin-bar-h: 46px;
	}
}

@media (min-width: 1024px) {
	:root {
		--shell-nav-w: 82px;
	}
}

/*
 * 240px, not the reference's 160px: measured in a real headless-Chrome
 * render, the widest current label ("Tools & Equipment") needs ~215px of
 * total rail width to fit on one line at the >=1680px 16px type tier
 * (133px of text + 82px of icon/gap/padding/arrow overhead). Dongchedi's
 * 160px works for them because every one of their own labels is 2-3 CJK
 * characters; forcing English labels into that width means either
 * truncating or wrapping them, both explicitly rejected. 240px keeps
 * ~25px of headroom for any future label.
 */
@media (min-width: 1680px) {
	:root {
		--shell-nav-w: 240px;
	}
}

:root[data-dcd-nav="expanded"] {
	--shell-nav-w: 240px;
}

/*
 * 92px, not 82px: matches the reference guide's own distinction ("Compact
 * width: 82px; it becomes 92px at 1680px when manually kept compact") —
 * and the extra ~10px happens to be exactly what "Maintenance" (the one
 * label a real render showed still splitting mid-word, e.g.
 * "Maintenan"/"ce") needed to fit on one line at the compact 12px tier.
 */
:root[data-dcd-nav="compact"] {
	--shell-nav-w: 92px;
}

@media (max-width: 1023px) {
	:root[data-dcd-nav="expanded"],
	:root[data-dcd-nav="compact"] {
		--shell-nav-w: 0px;
	}
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

/* !important on the geometry-critical properties: Blocksy ships its own
   `#header{position:relative;z-index:50}` base rule for the same element
   ID (we're intentionally repurposing Blocksy's own header element via
   the blocksy:builder:header:custom-output filter, so this is a known,
   deliberate override of a specific competing framework default — not a
   general specificity workaround). */
#header {
	position: fixed !important;
	top: var(--wp-admin-bar-h) !important;
	right: 0 !important;
	left: 0 !important;
	min-width: 320px;
	z-index: var(--dcd-z-header, 9999) !important;
	height: var(--shell-header-h, 56px);
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--dcd-border);
	transition: height 0.2s ease, top 0.2s ease;
}

.dcd-header-fix {
	position: relative;
	height: 100%;
}

.dcd-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-left: 56px;
	padding-right: 4%;
}

/* >=1024px: the logo becomes position:absolute (see .dcd-logo) so it can
   stay pinned near the toggle switch instead of drifting outward as the
   sidebar-width breakpoint grows. Once it's out of flow, the row's own
   left padding is what has to clear it — a flat value works because the
   logo's position no longer depends on the sidebar's current width. */
@media (min-width: 1024px) {
	.dcd-header-row {
		padding-left: 260px;
	}
}

@media (max-width: 1023px) {
	.dcd-header-row {
		gap: 8px;
	}
}

.dcd-side-switch {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	line-height: 1;
	color: var(--dcd-text-secondary);
	cursor: pointer;
	border-radius: var(--dcd-radius-sm);
}

.dcd-side-switch:hover {
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-side-switch .dcd-icon {
	width: 20px;
	height: 20px;
}

.dcd-side-switch-mobile {
	display: none;
}

@media (max-width: 1023px) {
	.dcd-side-switch {
		left: 16px;
	}

	.dcd-side-switch-desktop {
		display: none;
	}

	.dcd-side-switch-mobile {
		display: flex;
	}
}

[data-dcd-nav="compact"] .dcd-side-switch-desktop .dcd-icon {
	transform: rotate(180deg);
}

.dcd-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	max-height: 32px;
}

/* Structural equivalent of the reference's translate-based logo pinning:
   real dongchedi keeps its logo at a constant ~72px from the header's
   left edge regardless of breakpoint (the sidebar-width padding grows
   from 88->160px, but a matching negative translate cancels it out for
   the logo specifically). That exact hack is tuned to their logo asset's
   pixel width; since this site has no custom logo uploaded yet (falls
   back to a text wordmark), position:absolute at a constant offset gets
   the same "doesn't drift with the sidebar breakpoint" behavior without
   depending on one specific asset's dimensions. */
@media (min-width: 1024px) {
	.dcd-logo {
		position: absolute;
		left: 64px;
		top: 50%;
		transform: translateY(-50%);
		max-width: 180px;
		overflow: hidden;
	}
}

.dcd-logo img {
	display: block;
	height: 32px;
	width: auto;
}

@media (min-width: 1440px) {
	.dcd-logo,
	.dcd-logo img {
		height: 36px;
	}
}

@media (min-width: 1680px) {
	.dcd-logo,
	.dcd-logo img {
		height: 46px;
	}
}

.dcd-logo-text {
	font-size: 18px;
	font-weight: 700;
	color: var(--dcd-text);
	white-space: nowrap;
}

.dcd-search {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	height: 32px;
	max-width: 444px;
	margin: 0 24px;
}

@media (min-width: 768px) {
	.dcd-search {
		max-width: 574px;
	}
}

@media (min-width: 1440px) {
	.dcd-search {
		height: 40px;
		max-width: 574px;
	}
}

@media (min-width: 1680px) {
	.dcd-search {
		height: 44px;
		max-width: 569px;
	}
}

@media (min-width: 1920px) {
	.dcd-search {
		max-width: 664px;
	}
}

@media (max-width: 767px) {
	.dcd-search {
		margin: 0 8px;
		max-width: none;
	}

	.dcd-search-submit span,
	.dcd-search-submit {
		font-size: 12px;
	}
}

/*
 * !important on the box-model properties only: Blocksy ships a generic
 * `select,textarea,input:is([type=search],[type=text],...)` form-control
 * rule with specificity (0,1,1) — an :is() argument counts, so it out-
 * ranks this plain (0,1,0) class selector regardless of load order. That
 * rule was silently supplying its own height (40px), padding (0 15px),
 * border (1px), border-radius (3px) and background-color here instead of
 * ours — confirmed by inspecting the actual computed styles in a headless
 * render, not guessed. Same category of fix as the #header override
 * above: a known, specific competing framework default, not general
 * !important use.
 */
.dcd-search-input {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	height: 100% !important;
	padding: 0 16px !important;
	font-family: inherit;
	font-size: 12px;
	line-height: normal;
	color: var(--dcd-text) !important;
	background: var(--dcd-surface) !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-color: var(--dcd-yellow) !important;
	border-right: 0 !important;
	border-radius: var(--dcd-radius-sm) 0 0 var(--dcd-radius-sm) !important;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

@media (min-width: 1680px) {
	.dcd-search-input {
		font-size: 14px;
	}
}

.dcd-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.dcd-search-submit {
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 64px;
	height: 100%;
	/* Confirmed via headless-render measurement: Blocksy's generic
	   [type=submit]{min-height:var(--theme-button-min-height)} rule (this
	   button IS type="submit") resolves to 40px and applies unopposed
	   whenever this height tier is below that — min-height silently wins
	   over an explicit height in box-model resolution. Since this rule
	   never declared min-height at all, there was nothing for the later
	   source order to favor; declaring it here is what lets our height
	   actually take effect below the 1440px tier. */
	min-height: 0 !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	color: var(--dcd-text);
	background: var(--dcd-yellow);
	border: 0;
	border-radius: 0 var(--dcd-radius-sm) var(--dcd-radius-sm) 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
	/* Native button chrome (esp. Safari's push-button appearance) can
	   silently ignore an explicit height and draw its own intrinsic
	   padding/border, which is what made this button taller than the
	   search input next to it. appearance:none makes it a plain styleable
	   box instead of a native widget. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.dcd-search-submit:hover {
	background: var(--dcd-orange);
	color: #fff;
}

.dcd-search-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--dcd-surface);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-md);
	box-shadow: 0 12px 32px rgba(31, 33, 41, 0.12);
	z-index: 20;
	max-height: 360px;
	overflow-y: auto;
}

.dcd-search-suggest li a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 20px;
	color: var(--dcd-text);
	text-decoration: none;
}

.dcd-search-suggest li a:hover,
.dcd-search-suggest li a:focus {
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-search-suggest .dcd-suggest-type {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--dcd-text-muted);
}

.dcd-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.dcd-cta {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--dcd-text);
	background: var(--dcd-yellow-active-gradient, var(--dcd-yellow));
	border-radius: var(--dcd-radius-md);
	text-decoration: none;
	transition: filter 0.15s ease;
}

.dcd-cta:hover {
	filter: brightness(0.94);
	color: var(--dcd-text);
}

@media (max-width: 479px) {
	.dcd-cta {
		padding: 0 10px;
		font-size: 12px;
	}
}

.dcd-account-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--dcd-page);
	color: var(--dcd-text-secondary);
}

.dcd-account-pill:hover {
	color: var(--dcd-orange-hover-text);
	background: var(--dcd-hover-tint);
}

.dcd-account-pill .dcd-icon {
	width: 18px;
	height: 18px;
}

/* ------------------------------------------------------------------ */
/* Sidebar (desktop, >=1024px)                                         */
/* ------------------------------------------------------------------ */

.dcd-side-nav {
	display: none;
}

@media (min-width: 1024px) {
	.dcd-side-nav {
		display: block;
		position: fixed;
		top: var(--wp-admin-bar-h);
		left: 0;
		bottom: 0;
		width: var(--shell-nav-w);
		background: var(--dcd-page);
		z-index: var(--dcd-z-sidenav, 1999);
		transition: width 0.2s ease;
		/*
		 * The compact/expanded item layout below reacts to this element's
		 * own rendered width via @container instead of the [data-dcd-nav]
		 * attribute. That attribute only exists once JS has run (a click,
		 * or a saved localStorage preference) — a first-time visitor in
		 * the 1024-1679px range gets --shell-nav-w:82px from the plain
		 * media query above with NO attribute set at all. Keying the
		 * layout to the attribute too would mean that visitor gets an
		 * 82px-wide rail still laid out in full row mode (icon+label side
		 * by side, unwrapped) — text spilling straight out of the rail.
		 * A container query has one source of truth (the actual width)
		 * so the two can't drift apart the way two separately-maintained
		 * rule sets can.
		 */
		container-type: inline-size;
		container-name: dcd-sidenav;
	}
}

.dcd-side-fixed {
	position: absolute;
	top: var(--shell-header-h, 56px);
	left: 0;
	right: 0;
	bottom: 0;
}

.dcd-side-scroll {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: none;
	padding-top: 6px;
}

.dcd-side-list {
	margin: 0;
	padding: 0 6px;
	list-style: none;
}

.dcd-list-item {
	position: relative;
	border-top: 1px solid var(--dcd-border);
}

.dcd-list-item:first-child {
	border-top: 0;
}

.dcd-item-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0 12px 24px;
	color: var(--dcd-text-secondary);
	text-decoration: none;
	border-radius: var(--dcd-radius-md);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dcd-link-icon {
	display: flex;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.dcd-link-icon .dcd-icon {
	width: 100%;
	height: 100%;
}

/*
 * Real dongchedi's own labels are all 2-3 CJK characters, so their fixed
 * 160px rail never needed to solve wrapping. OBD2SCAN's English labels
 * ("Tools & Equipment") are longer, so this needs a dedicated
 * .dcd-link-text span rather than relying on .dcd-link-name's own text
 * node: flex items default to min-width:auto, which refuses to shrink
 * below the text's unwrapped width regardless of white-space, so every
 * ancestor down to this span needs flex:1 1 auto with an explicit
 * min-width:0 override before wrapping (or a reliable single-line fit)
 * can actually happen.
 */
.dcd-link-name {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 22px;
}

/*
 * Expanded rail (240px, measured to fit every current label): single
 * line, no wrap, no ellipsis. Compact rail (82px, icon over label,
 * @container rule below): too narrow for any label on one line, so it
 * wraps there instead — that was never the reported problem.
 */
.dcd-link-text {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
}

@media (min-width: 1680px) {
	.dcd-link-name {
		font-size: 16px;
		line-height: 24px;
	}
}

.dcd-link-arrow {
	display: flex;
	align-self: center;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-left: auto;
	color: var(--dcd-text-muted);
}

/*
 * Reacts to the sidenav's actual rendered width (see container-type on
 * .dcd-side-nav above), not to [data-dcd-nav] — so it applies correctly
 * whether the rail is 82px because of the auto media-query default, a
 * saved user preference, or a same-session manual toggle. 120px sits
 * comfortably between the two real widths (82px / 240px).
 *
 * This block is placed LAST and deliberately re-declares font-size and
 * display rather than relying on being "more specific": every selector
 * here is plain-class, equal specificity to the base/1680px rules above,
 * so with equal specificity the LATER declaration wins regardless of the
 * @container condition. Two real bugs shipped from getting this ordering
 * wrong: the arrow stayed visible in compact mode (the base
 * .dcd-link-arrow rule above used to come after this block) and the
 * label kept the >=1680px 16px font instead of dropping to 12px (same
 * reason) — both confirmed via a real headless-Chrome render, not
 * assumed.
 */
@container dcd-sidenav (max-width: 120px) {
	.dcd-item-link {
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		padding: 12px 4px;
		text-align: center;
	}

	.dcd-link-icon {
		width: 20px;
		height: 20px;
	}

	.dcd-link-name {
		font-size: 12px;
		line-height: 16px;
		max-width: 100%;
	}

	.dcd-link-text {
		white-space: normal;
		overflow-wrap: break-word;
	}

	.dcd-link-arrow {
		display: none;
	}
}

.dcd-item-link:hover {
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-item-link.dcd-is-active {
	background: var(--dcd-yellow-active-gradient);
	color: var(--dcd-text);
	font-weight: 500;
}

.dcd-item-link.dcd-is-active .dcd-link-arrow,
.dcd-item-link.dcd-is-active .dcd-link-icon {
	color: var(--dcd-text);
}

/* Small flyout (Account) — compact list of 1-3 links */
/*
 * .dcd-child-list and .dcd-flyout-panel are `position: fixed`, not
 * absolute, on purpose: they're DOM descendants of .dcd-side-scroll,
 * which needs `overflow-y: auto` for the item list itself. An
 * absolutely-positioned flyout would be clipped by that ancestor's
 * overflow box the moment it tried to poke out past the sidebar's own
 * width. `position: fixed` establishes its containing block at the
 * viewport instead, so it escapes that clipping entirely. shell.js sets
 * the exact top/left inline on hover/focus (CSS :hover/:focus-within
 * still does the show/hide — DOM-tree hover bubbling works the same
 * regardless of the descendant's own position value).
 */
.dcd-child-list {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	min-width: 200px;
	padding: 8px;
	list-style: none;
	background: var(--dcd-surface);
	border-radius: var(--dcd-radius-md);
	box-shadow: 0 12px 32px rgba(31, 33, 41, 0.14);
	z-index: 2000;
}

.dcd-child-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 22px;
	color: var(--dcd-text);
	text-decoration: none;
	border-radius: var(--dcd-radius-sm);
	white-space: nowrap;
}

.dcd-child-link:hover {
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-child-icon {
	display: flex;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.dcd-child-icon .dcd-icon {
	width: 100%;
	height: 100%;
}

/* Large flyout (the six content pillars) — multi-column mega panel */
.dcd-flyout-panel {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--dcd-surface);
	border-radius: var(--dcd-radius-md);
	box-shadow: 0 16px 40px rgba(31, 33, 41, 0.16);
	z-index: 2000;
}

.dcd-flyout-inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(160px, 1fr));
	gap: 32px;
	padding: 24px;
	min-width: 560px;
}

.dcd-flyout-heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dcd-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dcd-flyout-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcd-flyout-panel li + li {
	margin-top: 4px;
}

.dcd-flyout-panel a {
	display: block;
	padding: 6px 8px;
	margin: 0 -8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--dcd-text);
	text-decoration: none;
	border-radius: var(--dcd-radius-sm);
}

.dcd-flyout-panel a:hover {
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-has-children:hover + .dcd-child-list,
.dcd-has-children:hover + .dcd-flyout-panel,
.dcd-list-item:hover > .dcd-child-list,
.dcd-list-item:hover > .dcd-flyout-panel,
.dcd-list-item.dcd-open > .dcd-child-list,
.dcd-list-item.dcd-open > .dcd-flyout-panel {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.dcd-side-nav,
	.dcd-header-row,
	#header,
	.dcd-item-link,
	.dcd-mobile-drawer {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Content offset — only on requests where the shell actually renders  */
/* ------------------------------------------------------------------ */

body.dcd-shell-active {
	padding-top: calc(var(--shell-header-h) + var(--wp-admin-bar-h));
}

@media (min-width: 1024px) {
	body.dcd-shell-active #main-container {
		margin-left: var(--shell-nav-w);
		transition: margin-left 0.2s ease;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile drawer (<1024px)                                             */
/* ------------------------------------------------------------------ */

.dcd-modal-mask {
	position: fixed;
	top: var(--wp-admin-bar-h);
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(15, 17, 21, 0.5);
	z-index: 2000;
}

.dcd-modal-mask[hidden] {
	display: none;
}

.dcd-mobile-drawer {
	position: fixed;
	top: var(--wp-admin-bar-h);
	bottom: 0;
	left: 0;
	width: min(320px, 86vw);
	background: var(--dcd-page);
	z-index: 2001;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}

.dcd-mobile-drawer:not([hidden]) {
	transform: translateX(0);
}

.dcd-mobile-drawer[hidden] {
	display: flex;
	visibility: hidden;
}

.dcd-mobile-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 16px;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--dcd-border);
}

.dcd-mobile-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	line-height: 1;
	color: var(--dcd-text-secondary);
	cursor: pointer;
}

.dcd-mobile-close .dcd-icon {
	width: 20px;
	height: 20px;
}

.dcd-mobile-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px 0 24px;
}

.dcd-mobile-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcd-mobile-link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 48px;
	padding: 0 20px;
	color: var(--dcd-text);
	text-decoration: none;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
}

.dcd-mobile-link::-webkit-details-marker {
	display: none;
}

.dcd-mobile-link .dcd-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--dcd-text-muted);
}

.dcd-mobile-link.dcd-is-active {
	color: var(--dcd-orange-hover-text);
	background: var(--dcd-hover-tint);
}

.dcd-mobile-caret {
	display: flex;
	width: 14px;
	height: 14px;
	margin-left: auto;
	color: var(--dcd-text-muted);
	transition: transform 0.15s ease;
}

.dcd-mobile-details[open] > summary .dcd-mobile-caret {
	transform: rotate(90deg);
}

.dcd-mobile-sublist {
	margin: 0;
	padding: 4px 0 8px 54px;
	list-style: none;
}

.dcd-mobile-sublist a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--dcd-text-secondary);
	text-decoration: none;
	font-size: 14px;
}

.dcd-mobile-sublist a:hover,
.dcd-mobile-sublist a:active {
	color: var(--dcd-orange-hover-text);
}

@media (min-width: 1024px) {
	.dcd-mobile-drawer,
	.dcd-modal-mask {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Focus visibility (keyboard users) — never rely on hover alone       */
/* ------------------------------------------------------------------ */

.dcd-side-switch:focus-visible,
.dcd-item-link:focus-visible,
.dcd-child-link:focus-visible,
.dcd-flyout-panel a:focus-visible,
.dcd-mobile-link:focus-visible,
.dcd-mobile-sublist a:focus-visible,
.dcd-cta:focus-visible,
.dcd-account-pill:focus-visible,
.dcd-search-submit:focus-visible {
	outline: 2px solid var(--dcd-orange);
	outline-offset: 2px;
}

.dcd-list-item:focus-within > .dcd-child-list,
.dcd-list-item:focus-within > .dcd-flyout-panel {
	display: block;
}