/* ══ THE PHONE MENU, THE SIDE PANEL'S OWN CARD ═════════════════  20 Oct 2026 (rp170) ══
   Sir, 20 Oct 2026, after the dashboards' side panel became a card (rp169):
   "once you've made that improvement for this side panel, any other side
   panels on the sites in general, I'd like you to improve it".

   The phone menu (`.mobile-drawer`, behind the three lines in the masthead on
   fourteen signed-in pages and the service page) was a cream sheet the height
   of the window, sliding over the masthead from the right: seven or eight bare
   words in a column, no way shut on the sheet itself, the masthead dimmed
   under it, and the setup guide's bar and the tour's button drawn over its
   foot. It becomes the left panel's card on the right: 12px under the
   masthead and 12px from the window's edge, as tall as it holds, 22px
   corners, the card's edge; the person on the navy plate at its head with the
   way shut; every row a mark on a stone tile, the page you are on a navy pill
   with its mark gold; the guides and help a small step apart from the places.
   The masthead stays bright and its three lines (a cross while open) still
   shut it. hyyryn-phone-menu.js makes the head and marks the page you are on.

   Built by docs/dev/build-rail-card.py; the marks are docs/dev/rail-card.icons.json.
   Every rule names the menu's class twice (0,2,x) to win over the pages' own
   `.mobile-drawer.open` on count (Mason 05). */

:root { --pm-top: 76px; --pm-head-b: 64px; }

/* ── the card ──────────────────────────────────────────────────────────── */
html body .mobile-drawer.mobile-drawer {
  position: fixed; top: var(--pm-top); right: 12px; left: auto; bottom: auto; z-index: 201;
  width: min(300px, calc(100vw - 24px)); height: auto;
  max-height: calc(100vh - var(--pm-top) - 12px); max-height: calc(100dvh - var(--pm-top) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 8px 10px; box-sizing: border-box;
  border: 0; border-radius: 22px;
  background: radial-gradient(120% 40% at 100% 0%, rgba(212,169,67,.06), rgba(212,169,67,0) 55%), linear-gradient(180deg, #FCFBF7 0%, #F7F4EC 100%) #F7F4EC;
  color: #0A1628;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), inset 0 1px 0 #FFFFFF,
              0 2px 6px rgba(10,22,40,.08), 0 18px 40px -18px rgba(10,22,40,.32), 0 50px 90px -40px rgba(10,22,40,.45);
  transform: translateX(calc(100% + 24px)); opacity: 0; visibility: hidden;
  transition: transform 320ms cubic-bezier(.22,.85,.3,1), opacity 200ms ease, visibility 0s linear 320ms;
  scrollbar-width: thin; scrollbar-color: rgba(10,22,40,.18) transparent;
}
html body .mobile-drawer.mobile-drawer.open {
  right: 12px; transform: none; opacity: 1; visibility: visible;
  transition: transform 320ms cubic-bezier(.22,.85,.3,1), opacity 200ms ease;
}
/* the page's own close (two pages carry one) gives way to the head's */
html body .mobile-drawer.mobile-drawer > .md-close { display: none; }

/* the page under it: a soft dim, under the masthead only, so the masthead
   stays bright and its three lines still shut the menu */
html body .mobile-overlay.mobile-overlay {
  top: var(--pm-head-b); z-index: 200; background: rgba(10,22,40,.18); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── the head: who you are, on the navy plate, and the way shut ─────────── */
html body .mobile-drawer.mobile-drawer > .pm-head {
  position: relative; display: flex; align-items: center; gap: 12px; flex: none;
  margin: 0 0 6px; padding: 14px 54px 14px 14px; border-radius: 16px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(212,169,67,.16), rgba(212,169,67,0) 60%), linear-gradient(160deg, #16305A, #102341) #102341;
  color: #FAF8F3;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.20), inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px -14px rgba(10,22,40,.55);
}
html body .mobile-drawer .pm-face {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #F3EFE4; color: #0A1628; box-shadow: 0 0 0 2px rgba(212,169,67,.55);
  font: 400 15px/1 var(--serif-display, 'Libre Caslon Display', Georgia, serif); letter-spacing: .04em; }
html body .mobile-drawer .pm-who { min-width: 0; }
html body .mobile-drawer .pm-name {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FAF8F3;
  font: 400 18px/1.2 var(--serif-display, 'Libre Caslon Display', Georgia, serif); letter-spacing: .02em; }
html body .mobile-drawer .pm-role { margin: 3px 0 0; color: rgba(243,238,227,.74); font: 400 12.5px/1.4 var(--sans, Inter, system-ui, sans-serif); }
html body .mobile-drawer .pm-x {
  position: absolute; top: 50%; right: 10px; translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(250,248,243,.10); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(250,248,243,.22);
  transition: background-color .2s ease, box-shadow .2s ease; }
html body .mobile-drawer .pm-x::before { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .mobile-drawer .pm-x:hover { background: rgba(250,248,243,.22); box-shadow: inset 0 0 0 1px rgba(250,248,243,.36); }
html body .mobile-drawer .pm-x:focus-visible { outline: 2px solid #E2BE6A; outline-offset: 2px; }

/* ── the rows ─────────────────────────────────────────────────────────── */
html body .mobile-drawer.mobile-drawer > a {
  display: flex; align-items: center; gap: 12px; flex: none; min-height: 46px; margin: 0; padding: 7px 12px 7px 7px; box-sizing: border-box;
  border: 0; border-radius: 14px; background: none; box-shadow: none; color: #0A1628; text-decoration: none; text-align: left;
  font: 500 15px/1.25 var(--sans, Inter, system-ui, sans-serif); letter-spacing: 0; text-transform: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
html body .mobile-drawer.mobile-drawer > a::before {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: var(--pm-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")) center / 16px 16px no-repeat, #EFEAE0;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.07);
  transition: background-color .16s ease, box-shadow .16s ease;
}
html body .mobile-drawer.mobile-drawer > a:hover { background: rgba(10,22,40,.05); color: #0A1628; }
html body .mobile-drawer.mobile-drawer > a[aria-current="page"] {
  background: #0A1628; color: #FAF8F3; box-shadow: 0 1px 2px rgba(10,22,40,.18), 0 10px 20px -12px rgba(10,22,40,.6); }
html body .mobile-drawer.mobile-drawer > a[aria-current="page"]::before {
  background-image: var(--pm-ico-on, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")); background-color: rgba(250,248,243,.10); box-shadow: inset 0 0 0 1px rgba(250,248,243,.14); }
html body .mobile-drawer.mobile-drawer > a:focus-visible { outline: 2px solid #D4A943; outline-offset: -2px; }
/* the guides and help stand a small step apart from the places */
html body .mobile-drawer.mobile-drawer > a[href="how-it-works.html"]:not(:first-of-type) { margin-top: 10px; }

/* each row's mark, by where it goes */
html body .mobile-drawer a:is([href^="dashboard-tradesperson"], [href^="my-jobs"]) { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); }
html body .mobile-drawer a:is([href^="browse-"], [href^="results"]) { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="saved-"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="messages-"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href*="#tab-money"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7c0-5.33-8-5.33-8 0'/%3E%3Cpath d='M10 7v14'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M6 13h10'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7c0-5.33-8-5.33-8 0'/%3E%3Cpath d='M10 7v14'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M6 13h10'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="how-it-works"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href*="#s-cost"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="payment-protection"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="settings-"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="trade-profile"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="verification-"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="login"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 17 5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E"); }
html body .mobile-drawer a[href^="register"] { --pm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E"); --pm-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E"); }

/* the setup guide's bar and the tour's button were drawn over the menu's foot */
html:has(.mobile-drawer.open) :is(.hg-bar, .hy-tour-dock) { visibility: hidden; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html body .mobile-drawer.mobile-drawer, html body .mobile-drawer.mobile-drawer.open { transition: none; }
}
@media (forced-colors: active) {
  html body .mobile-drawer.mobile-drawer { border: 1px solid CanvasText; }
  html body .mobile-drawer.mobile-drawer > a::before { forced-color-adjust: none; }
}
@media print { html body .mobile-drawer.mobile-drawer, html body .mobile-overlay.mobile-overlay { display: none; } }