/* ============================================================================
   COLAMCO mobile off-canvas menu — the NAVY DRAWER
   (M2 "Navy Deck", MOBILE-CHROME-M2-BUILD-PLAN-2026-08-18.md §3 for the paint,
   §10.3 G5 for the information architecture.)

   THE PAINT IS NOW .cart-strip's, NOT THE MASTHEAD's (M3 section 1.7 / item 15 / D6,
   2026-08-18). Session 2 (cdv 967) gave this panel the masthead's radial-gradient
   navy; Juan's M3 report is that the deck, the drawer and the strip read as three
   different backdrops on one screen. So all three now carry the SAME flat #0a2f57
   field, the same rgba(255,255,255,.14) hairline on the edge they open from and the
   same 16px/.22 drop shadow. It is a literal in both themes for the same reason it
   always was: this is an on-navy field and it does not flip with the theme.
   The gradient and the 20% 0% light source are gone with it - a gradient cannot be
   "the same field" as a flat one.

   §10.3 G5 (2026-08-18) is the STRUCTURE session 2 never touched, and it is what
   made Juan say the updated sidebar was not on the site:
     header  a display-type title, not the account row.
     body    a display-type level-0 index that PUSHES a white pane per section,
             instead of a navy Bootstrap accordion expanding in place.
     footer  the account row, the Chat / Contact / Call grid, then Log out.
   So the account row and the quick actions moved header -> footer, the collapse
   became a push, and the level-0 rows lost their leading icons (the mockup draws
   none) and never gained the mockup's per-row counts (Juan's "no counts anywhere").

   ⚠ THE `mm-` PREFIX IS SHARED WITH THE DESKTOP MEGA MENU (Menus\Mega\menu.css), WHICH
   DECLARES ITS RULES ON BARE CLASSES. Measured 2026-08-18: the pushed pane was first written as
   `.mm-pane`, which is the mega menu's RAIL pane and carries `display: none` unless it is inside
   `.mm-rail-item.active` - so the drawer's pane rendered as a 0x0 box with NO rule of this file's
   own overriding it (this file never declares `display` on it, so there was nothing to win with).
   It reads exactly like a JS failure: the pane is in the DOM, has the right children and the right
   computed background, and paints nothing. Hence `mm-sheet*` here. The mega menu already owns
   mm-pane / mm-pane-all / mm-pane-head / mm-pane-title / mm-panel* / mm-grid / mm-rail* / mm-link*
   / mm-cs* / mm-assist* / mm-errand* / mm-top* / mm-root / mm-simple / mm-veil / mm-anchor /
   mm-caret / mm-vall / mm-viewall - CHECK THAT FILE BEFORE ADDING ANY `mm-` CLASS HERE.

   ⚠ The .mm-light class name is HISTORICAL and stays. It is written in
   Menus\Sidebar\menu.txt, a hand-written DDRMenu template whose parser reads
   [tokens] out of HTML comments and <script> blocks alike, so touching that file
   to rename a class buys nothing and risks a silently truncated menu.

   ⚠ INK IS NAMED ON THE CONTROLS, never on the panel — the same rule the
   masthead's tier-1 controls and the deck's tabs follow. Every control on the
   NAVY surface wears the on-navy --field-* constants (which do NOT flip with the
   theme) instead of the theme's --ink / --paper ladder. The PANES are the one
   exception and are deliberately the other way round: they are a --paper surface,
   so they take the theme's own ink and flip with it, exactly as the mockup draws
   them white against the navy index. Structure lives in menu.txt.
   ========================================================================== */

/* WIDTH: M2 draws the panel at 87vw (`left: 13%`), and the painted panel was
   80vw — because resources\libraries\bootstrap-menukit\menukit.css caps EVERY
   off-canvas in the skin at `max-width: 80%`, which is the cap that binds, not
   the min() below (MEASURED 321.59px in a 402px viewport, session 2).
   ⚠ Beating that cap is not a specificity fight over `width` — `max-width` is a
   DIFFERENT PROPERTY, so the cap has to be re-stated, not out-ranked. This ID
   selector out-ranks menukit's class selector on the same property, which is what
   lets the panel reach 87vw. The border-left is the field's closing hairline (a
   navy field is closed by a light hairline, not by a shadow) and costs no outer
   width: box-sizing is border-box. */
#navSidebarMenu.mm-light {
	width: min(87vw, 400px);
	max-width: 87vw;
	/* M3 section 1.7 (item 15, D6, 2026-08-18): the panel wears .cart-strip's surface, not its own.
	   Juan's report is that the deck, the drawer and the strip read as three different backdrops on
	   one screen, so the strip is the reference and all three now carry the same flat #0a2f57 field,
	   the same .14 hairline on the edge they open from, and the same -4px/16px shadow at .22.
	   The radial gradient goes with it - it was the masthead's, and a gradient cannot be "the same
	   field" as a flat one. The shadow's OFFSET is mirrored to this panel's own open edge (-4px on X
	   rather than on Y): the strip's `0 -4px` points up because it is a floor bar, and copying that
	   literally would cast the shadow along an edge that is against the viewport bottom.
	   ⚠ The 18px LEFT-EDGE radius below is untouched - that is this panel's own corner treatment
	   (section 1.7), not the strip's top-corner case. */
	background-color: #0a2f57;
	color: var(--field-ink);
	border-radius: 18px 0 0 18px;
	box-shadow: -4px 0 16px rgba(4, 26, 48, .22);
	display: flex;
	flex-direction: column;
	border-left: 1px solid rgba(255, 255, 255, .14);
	/* The panes slide in from outside the panel, so the panel is the clip. Safe here and NOT on a
	   .search-header: nothing hangs out of this box on purpose (the 2026-08-17 suggest-clip trap
	   was a panel appended INSIDE a clipping group). */
	overflow: hidden;
}

/* ---------- header: the display-type title + close ---------- */
#navSidebarMenu .mm-header {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: calc(1.6rem + env(safe-area-inset-top, 0px)) 1.1rem 0.85rem;
}

/* M3 section 1.6a (item 2, 2026-08-18): "Browse COLAMCO" at 1.45rem/700 in the display face was the
   SAME type as .mm-nav-row below it, so the header read as the first nav row. The fix goes the other
   way from the rows, not the same way harder: the utility face at 0.72rem/800, uppercase, +0.14em
   tracking, on --field-ink-3 - a small-caps EYEBROW that labels the panel and cannot be tapped by
   mistake. Nothing about the rows changed; they are still the 1.45rem display index. */
#navSidebarMenu .mm-title {
	flex: 1 1 auto;
	margin: 0;
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--field-ink-3);
}

/* ~~M3 section 1.5 (item 6, D12): the theme toggle moved here from the phone masthead's tier 1~~
   DELETED 2026-08-23 (Juan): the drawer's copy of the toggle is gone from Menus/Sidebar/menu.txt,
   so its three .mm-theme rules go with it rather than sitting here matching nothing. The toggle
   lives on the phone masthead's tier 1 (Controls/Header.ascx) and on desktop tier 1; both wear
   .theme-toggle-field, which is styled in the skin, not here. */

#navSidebarMenu .mm-close {
	flex: none;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--field-ink);
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

#navSidebarMenu .mm-close:hover,
#navSidebarMenu .mm-close:focus-visible {
	background: rgba(255, 255, 255, .2);
	color: var(--field-ink);
}

/* ---------- body: the index, with the panes stacked over it ----------
   The panes are absolutely positioned siblings of .mm-nav inside this box, so a
   pane covers the index instead of pushing it — the mockup's `position:absolute;
   inset:0` panes over an `inset:0` index. */
#navSidebarMenu .mm-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

#navSidebarMenu .mm-nav {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 0 1rem;
	/* UI batch 2026-08-27, B1 (Juan): `scrollbar-width: thin` was here - same defect as
	   Menus/Mega/menu.css's .mm-rail, this is the same index on the touch surface. The standard
	   property opts the element OUT of the sitewide ::-webkit-scrollbar branding (_global.scss:83).
	   Declare NOTHING here. */
}

#navSidebarMenu .mm-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

/* The level-0 index row. Both shapes — a leaf <a> and a parent <button> — are the
   same row, so they are declared together and nothing can drift between them. */
#navSidebarMenu .mm-nav-row,
#navSidebarMenu .mm-nav-list > .mm-nav-item > .mm-nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 60px;
	padding: 0.85rem 1.1rem;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .13);
	background: none;
	text-align: left;
	text-decoration: none;
	color: var(--field-ink) !important;
	font-family: 'Schibsted Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.025em;
	cursor: pointer;
	transition: padding-left 0.16s ease-out, color 0.15s ease;
}

#navSidebarMenu .mm-nav-row:hover,
#navSidebarMenu .mm-nav-row:focus-visible,
#navSidebarMenu .mm-nav-list > .mm-nav-item > .mm-nav-link:hover,
#navSidebarMenu .mm-nav-list > .mm-nav-item > .mm-nav-link:focus-visible {
	padding-left: 1.5rem;
	color: var(--field-accent) !important;
}

#navSidebarMenu .mm-nav-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#navSidebarMenu .mm-nav-cv {
	flex: none;
	font-size: 0.85rem;
	color: var(--field-ink-3);
}

/* --cta is #00467f in light: a 1.6:1 pill on this field, i.e. white text floating with
   no pill behind it. The on-navy accent solid with the field's own darkest stop as ink
   is the same pair the cookie notice's accept button spends.
   This is NOT the deck's cart count — that badge is GREEN and lives on the masthead cart
   icon (§10.3 G1/G3). This is the nav-node badge, driven by COLAMCO.MobileMenu.SetBadge /
   the colamco:mobilemenu:badge event. */
#navSidebarMenu .mm-badge {
	background: var(--field-accent) !important;
	color: #062b4c !important;
	font-size: 0.66rem;
	flex: none;
}

/* ---------- the shortcut chips (M3 section 1.6c, item 2, D2, 2026-08-18) ----------
   The mockup's five ERRANDS, under the level-0 index and inside the same scroller.
   RADIUS: --radius-md, NOT the mockup's 999px capsule. D2 and item 10 retire the capsule from the
   rectangular phone-chrome controls together (the floor bar's Checkout CTA, the masthead's account
   chip and Sign in pill moved in the same session); the discs on this panel - .mm-avatar and
   .mm-badge - keep their 50%, because a disc is not a pill.
   ⚠ `:visited` IS NAMED, and it is not defensive: _global.scss's `a:visited { color: var(--blue-link) }`
   is (0,1,1) and out-ranks a bare class, and in DARK --blue-link resolves to #8cc0e8 - which is
   --field-accent, the colour this chip's own border and hover spend. A visited chip would paint its
   label into its own field. getComputedStyle DELIBERATELY LIES about :visited, so only a screenshot
   catches it (the 2026-08-18 masthead Sign in pill). */
/* ITEM 19 (2026-08-19, Juan): THE RULE MOVES UP TIGHT TO THE TEXT AND THE SPACE MOVES BELOW IT.
   The rule that separates the nav section from these chips is this element's own border-top, and the
   0.9rem margin-top sat ABOVE it. MEASURED at 402x874 on devbeta: the five nav rows are 60px each and
   end at y 375, but the rule painted at y 390 - so the last row, "Customer Service", read as a 75px
   item, taller than its four siblings, which is exactly what Juan reported. The chips then started at
   y 407, only 17px under the rule.
   The fix is a SWAP, not a removal: margin-top 0.9rem -> 0, and the 14.4px it was worth is added to
   the padding-top (1rem -> 1.9rem) so the group is not jammed against the rule either - that
   separation was the design intent. Net: rule at 375 (tight to the row it closes), chips at ~406
   (where they already were). */
#navSidebarMenu .mm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1.9rem 1.1rem 0;
	margin-top: 0;
	border-top: 1px solid rgba(255, 255, 255, .13);
}

#navSidebarMenu .mm-chip,
#navSidebarMenu .mm-chip:visited {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0.45rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--radius-md, 10px);
	background: rgba(255, 255, 255, .06);
	color: var(--field-ink);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#navSidebarMenu .mm-chip:hover,
#navSidebarMenu .mm-chip:focus-visible {
	background: rgba(255, 255, 255, .14);
	border-color: var(--field-accent);
	color: var(--field-ink);
}

/* The submenu markup DDRMenu emits is the PANES' source, cloned out of here by
   menu.txt's script. It is never painted in place — `hidden` is on the wrapper in
   the template and this is the belt to that braces. */
#navSidebarMenu .mm-submenu-wrap {
	display: none !important;
}

/* ---------- the pushed pane: a --paper surface over the navy index ----------
   Deliberately on the THEME's ink ladder, not the --field-* constants: this is a
   paper surface and it must flip with the theme, which is the opposite rule from
   every other control in this file. */
#navSidebarMenu .mm-sheet {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--paper);
	color: var(--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 1.2rem;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(.32, .72, 0, 1);
}

#navSidebarMenu .mm-sheet.in {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	#navSidebarMenu .mm-sheet {
		transition: none;
	}
}

#navSidebarMenu .mm-sheet-back {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 1.1rem;
	border: 0;
	border-bottom: 1px solid var(--rule);
	background: none;
	color: var(--blue-link);
	font-size: 0.9rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

#navSidebarMenu .mm-sheet-back:hover,
#navSidebarMenu .mm-sheet-back:focus-visible {
	background: var(--paper-2, rgba(0, 0, 0, .04));
}

#navSidebarMenu .mm-sheet-title {
	margin: 0;
	padding: 1rem 1.1rem 0.6rem;
	font-family: 'Schibsted Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--ink);
}

#navSidebarMenu .mm-sheet-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A cloned row, re-based onto paper. The clone still carries .mm-nav-item /
   .mm-nav-link, so this has to out-rank the navy index rules above — a longer
   selector on the same properties, not !important stacking. */
#navSidebarMenu .mm-sheet-list > .mm-nav-item > .mm-nav-link,
#navSidebarMenu .mm-sheet-list > .mm-nav-item > .mm-nav-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-top: 1px solid var(--rule);
	background: none;
	color: var(--ink) !important;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-decoration: none;
}

#navSidebarMenu .mm-sheet-list > .mm-nav-item > .mm-nav-link:hover,
#navSidebarMenu .mm-sheet-list > .mm-nav-item > .mm-nav-link:focus-visible {
	padding-left: 1.1rem;
	background: var(--paper-2, rgba(0, 0, 0, .04));
	color: var(--blue-link) !important;
}

/* M3 section 1.6b: a pane row can now be a PUSH row too (Products drills twice), and the cloned
   chevron still carries the navy index's --field-ink-3. On a --paper pane that is a light grey on
   white; the pane is on the theme's own ladder, so the marker takes --ink-3 with it. */
#navSidebarMenu .mm-sheet-list .mm-nav-cv {
	color: var(--ink-3);
}

#navSidebarMenu .mm-sheet-list > .mm-nav-item > .mm-nav-row:hover,
#navSidebarMenu .mm-sheet-list > .mm-nav-item > .mm-nav-row:focus-visible {
	background: var(--paper-2, rgba(0, 0, 0, .04));
	color: var(--blue-link) !important;
}

#navSidebarMenu .mm-sheet-list .mm-badge {
	background: var(--cta) !important;
	color: #fff !important;
}

/* ⚠ `:visited` IS NAMED ON EVERY ANCHOR IN THIS FILE THAT DOES NOT ALREADY USE !important.
   _global.scss:354's `a:visited { color: var(--blue-link) }` is (0,1,1) and out-ranks a bare class;
   in DARK --blue-link is #8cc0e8, the same accent these controls spend, so a visited link paints its
   own field colour. getComputedStyle LIES about :visited, so only a screenshot catches it - it cost a
   diagnosis on the masthead's Sign in pill 2026-08-18. The .mm-nav-link rules are safe because their
   `color` is already !important, which beats specificity outright. */
#navSidebarMenu .mm-sheet-all,
#navSidebarMenu .mm-sheet-all:visited {
	display: block;
	margin: 1rem 1.1rem 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md, 10px);
	color: var(--blue-link);
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

#navSidebarMenu .mm-sheet-all:hover,
#navSidebarMenu .mm-sheet-all:focus-visible {
	background: var(--paper-2, rgba(0, 0, 0, .04));
}

/* selected page */
/* The active entry read as --blue-link, a light-field colour: 1.9:1 on this field in the
   light theme. On navy the entry goes to full white and the marker takes the accent —
   the same split the deck's active tab makes (white ink, --field-accent pill).
   LIVE since M3 §8 (2026-08-19). The rule was always correct; DDRMenu's SELECTED token never
   fires here because every //Menu-Desktop// node is a POINTER tab, so menu.txt now derives the
   class from data-mm-url and marks the whole trail. Full reasoning is in menu.txt. */
#navSidebarMenu .mm-nav-item.active > .mm-nav-row,
#navSidebarMenu .mm-nav-item.active > .mm-nav-link {
	color: var(--field-ink) !important;
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--field-accent);
}

/* The same row CLONED INTO A PANE is on --paper, not on the navy field, so the rule above paints
   its label WHITE ON WHITE - measured 2026-08-19 on /Customer-Service/ContactUs, where the marked
   "Contact Us" row rendered as an accent bar with no text. The rule above ties with the pane's own
   base rule at (1,3,0) and wins on order, so the pane needs its own statement at (1,4,0): paper ink
   for the label, and the marker keeps the pane's ladder the way .mm-nav-cv does. */
#navSidebarMenu .mm-sheet-list > .mm-nav-item.active > .mm-nav-row,
#navSidebarMenu .mm-sheet-list > .mm-nav-item.active > .mm-nav-link {
	color: var(--blue-link) !important;
	box-shadow: inset 3px 0 0 var(--blue-link);
}

/* ---------- footer: the account row, the quick actions, then log out ----------
   M2 puts all three here. The row is no longer signed-in-only: a guest sees
   "Welcome / Sign in or create an account" and it opens the framed sign-in modal
   (menu.txt), which is why the whole footer lost its d-none. */
#navSidebarMenu .mm-footer {
	flex: none;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: 0.8rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
}

/* ITEM 11 (2026-08-19, Juan): --radius-md, not a hand-written 12px.
   IDENTIFIED ON SCREEN FIRST, and the finding is that there is NO PILL LEFT IN THIS DRAWER: every
   non-zero radius in #navSidebarMenu at 402 measured 10px (.mm-chip, .mm-sheet-all, .mm-quick-action),
   12px (this row) or 50% (.mm-avatar and the two header discs, which are DISCS and keep it under the
   existing ruling). M3 section 1.4 item 10 already retired the mockup's 999px capsules from this
   panel, so the only row still off the standard was this one, by 2px. It goes on the token the chips
   spend so the panel has ONE row radius rather than a token and a literal.
   The panel's own 18px 0 0 18px left-edge treatment (section 1.7) is NOT a row and is untouched. */
#navSidebarMenu .mm-account,
#navSidebarMenu .mm-account:visited {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 56px;
	padding: 0.55rem 0.65rem;
	border-radius: var(--radius-md, 10px);
	background: rgba(255, 255, 255, .09);
	color: var(--field-ink);
	text-decoration: none;
	margin-bottom: 0.65rem;
}

#navSidebarMenu .mm-account:hover,
#navSidebarMenu .mm-account:focus-visible {
	background: rgba(255, 255, 255, .16);
	color: var(--field-ink);
}

/* The --blue (#00467f) fill this replaces measures 1.6:1 against the field's own
   #051a30 — a brand fill on brand navy is not a disc, it is a smudge. A wash of the
   field ink reads as a disc on every stop of the gradient. */
#navSidebarMenu .mm-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--field-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	flex: none;
}

#navSidebarMenu .mm-account-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

#navSidebarMenu .mm-greeting {
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#navSidebarMenu .mm-subtitle {
	font-size: 0.74rem;
	color: var(--field-ink-3);
	font-weight: 600;
}

#navSidebarMenu .mm-chevron {
	flex: none;
	color: var(--field-ink-3);
	font-size: 0.8rem;
}

#navSidebarMenu .mm-quick-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

#navSidebarMenu .mm-quick-action,
#navSidebarMenu .mm-quick-action:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 10px;
	color: var(--field-ink);
	font-size: 0.76rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* BG1 (2026-08-14, Juan) put these glyphs on --blue-link because the tile was theme
   paper and --blue-link is the token that flips with it. The tile is a wash of the NAVY
   FIELD now, so the theme-flipping token is exactly the wrong one: its light value
   #00579e measures 1.9:1 on the field. --field-accent is the on-navy accent constant,
   and it is what the deck's active tab marker already spends. */
#navSidebarMenu .mm-quick-action i {
	font-size: 0.95rem;
	color: var(--field-accent);
}

#navSidebarMenu .mm-quick-action:hover,
#navSidebarMenu .mm-quick-action:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: var(--field-accent);
	color: var(--field-ink);
}

#navSidebarMenu .mm-footer-item,
#navSidebarMenu .mm-footer-item:visited {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 44px;
	margin-top: 0.55rem;
	padding: 0.5rem 0.6rem;
	border: 0;
	background: none;
	color: var(--field-ink-2);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--radius-sm, 6px);
	cursor: pointer;
}

#navSidebarMenu .mm-footer-item:hover,
#navSidebarMenu .mm-footer-item:focus-visible {
	background: rgba(255, 255, 255, .1);
	color: var(--field-ink);
}

/* ---------- focus visibility ----------
   --focus-ring is a wash of the LIGHT theme's #00467f (and of #8cc0e8 in dark), so in
   light it painted a navy ring on a navy field. Stated literally here for the same
   reason the field is: this surface does not flip with the theme.
   The PANES are paper, so they get the theme's own ring back — the second block. */
#navSidebarMenu a:focus-visible,
#navSidebarMenu button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(140, 192, 232, .55);
	border-radius: 6px;
}

#navSidebarMenu .mm-sheet a:focus-visible,
#navSidebarMenu .mm-sheet button:focus-visible {
	box-shadow: 0 0 0 3px var(--focus-ring, rgba(0, 70, 127, .45));
}