/* ============================================================================
   METATRIX SIDEBAR — Claude-style left navigation shell, themed to Metatrix.
   Injected site-wide. Collapsible rail, account menu, login modal, search +
   Max chat overlays. Pure CSS, no framework.
   ========================================================================== */
:root { --mtx-side-w: 264px; --mtx-rail-w: 56px; }
#mtx-side, #mtx-side * { box-sizing: border-box; }

/* shift page content when the sidebar is shown (desktop) */
@media (min-width: 901px) {
  html.mtx-side-open body { padding-left: var(--mtx-side-w) !important; }
  html.mtx-side-rail body { padding-left: var(--mtx-rail-w) !important; }
  html.mtx-side-open body, html.mtx-side-rail body { transition: padding-left .18s ease; }
}

/* ---- the sidebar ---- */
#mtx-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--mtx-side-w); z-index: 2147482000;
  /* pure-black sidebar, purple clickables */
  background-color: #000000; background-image: none;
  border-right: 1px solid #000000; color: #ededf2;
  box-shadow: 0 0 40px rgba(0,0,0,0.45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  display: flex; flex-direction: column; transition: width .18s ease, transform .2s ease;
  overscroll-behavior: contain;
  overflow-y: auto; overflow-x: hidden;   /* scroll when content exceeds the viewport */
}
/* Keep the header pinned at the top and the account/sign-in button pinned at the
   bottom while the middle (nav + Products + injected Device/Music/Market/Clip
   panels + Recents) scrolls — so nothing is ever cut off / unreachable on short
   viewports (previously the account button + lower sections overflowed off-screen). */
#mtx-side .mtx-head { position: sticky; top: 0; background: #000; z-index: 5; }
#mtx-side .mtx-acct { position: sticky; bottom: 0; background: #000; z-index: 5; }
#mtx-side::-webkit-scrollbar { width: 8px; }
#mtx-side::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 8px; }
/* CRITICAL: in a flex column that scrolls, flex-shrink defaults to 1, which
   collapsed the injected Device/Music/Market/Clip panels to ~2px (their content
   was clipped, so the sidebar looked empty unless the page was zoomed way out).
   Pin every child to its natural height so all content shows and the rail just
   scrolls. (Recents keeps flex:1 to fill spare space when the list is short.) */
#mtx-side > * { flex-shrink: 0; }
html.mtx-side-rail #mtx-side { width: var(--mtx-rail-w); }
html.mtx-side-rail #mtx-side .mtx-label, html.mtx-side-rail #mtx-side .mtx-seclabel,
html.mtx-side-rail #mtx-side .mtx-recents, html.mtx-side-rail #mtx-side .mtx-wordmark,
html.mtx-side-rail #mtx-side .mtx-acct-meta, html.mtx-side-rail #mtx-side .mtx-acct-caret { display: none; }
html.mtx-side-rail #mtx-side .mtx-item { justify-content: center; padding-left: 0; padding-right: 0; }
/* RAIL HEAD — the two icon buttons cannot both fit a 56px rail. The head keeps
   14px padding each side, so 56 - 28 - 8(gap) leaves ~19px for two 34px buttons
   and flex-shrink squeezed BOTH: measured 17px on index.html and 0px on
   comic-to-video.html, where the button became literally unclickable (a real
   click times out; only a programmatic .click() fired). Two 24px targets — the
   WCAG 2.2 2.5.8 minimum — do not fit 56px, so the rail keeps the one control
   it needs, the panel toggle, at full size. Search is unaffected: it is still
   Ctrl/⌘K, and its button returns as soon as the sidebar is open. */
html.mtx-side-rail #mtx-side .mtx-head { justify-content: center; padding-left: 4px; padding-right: 4px; gap: 0; }
html.mtx-side-rail #mtx-side #mtx-search-btn { display: none; }
html.mtx-side-rail #mtx-side #mtx-collapse { flex: 0 0 34px; width: 34px; height: 34px; }
html.mtx-side-rail #mtx-side .mtx-acct { justify-content: center; padding: 10px 0; }

/* ----------------------------------------------------------------------------
   RAIL MODE — the injected sections (Device Link · Music/Videos · Market · Clip)
   collapse to clean centered colored dots, matching the built-in icon rail.
   When the sidebar is open they keep their full panels (untouched). Their
   "Marketplace/Clipboard/…" section labels are already hidden via .mtx-seclabel.
   ========================================================================== */
html.mtx-side-rail #mtx-devlink, html.mtx-side-rail #mtx-music,
html.mtx-side-rail #mtx-market,  html.mtx-side-rail #mtx-clip {
  margin: 2px 0 !important; padding: 0 !important;
  border: 0 !important; background: transparent !important; overflow: visible !important;
}
/* drop the bodies and all text/controls — leave only the status dot */
html.mtx-side-rail #mtx-devlink .dl-body, html.mtx-side-rail #mtx-music .mu-body,
html.mtx-side-rail #mtx-market .mk-body,  html.mtx-side-rail #mtx-clip .ck-body,
html.mtx-side-rail #mtx-devlink .dl-title, html.mtx-side-rail #mtx-devlink .dl-caret,
html.mtx-side-rail #mtx-music .mu-title,  html.mtx-side-rail #mtx-music .mu-caret,
html.mtx-side-rail #mtx-market .mk-title, html.mtx-side-rail #mtx-market .mk-caret, html.mtx-side-rail #mtx-market .mk-zoom,
html.mtx-side-rail #mtx-clip .ck-title,  html.mtx-side-rail #mtx-clip .ck-caret,  html.mtx-side-rail #mtx-clip .ck-zoom {
  display: none !important;
}
/* center the head so it reads as one tappable rail light */
html.mtx-side-rail #mtx-devlink .dl-head, html.mtx-side-rail #mtx-music .mu-head,
html.mtx-side-rail #mtx-market .mk-head,  html.mtx-side-rail #mtx-clip .ck-head {
  justify-content: center !important; gap: 0 !important; padding: 8px 0 !important; cursor: pointer;
}
/* enlarge the dot into a status light (keeps its real colour: grey→green when
   live for Device Link/Music, pink for Market, teal for Clip) */
html.mtx-side-rail #mtx-devlink .dl-dot, html.mtx-side-rail #mtx-music .mu-dot,
html.mtx-side-rail #mtx-market .mk-dot,  html.mtx-side-rail #mtx-clip .ck-dot {
  width: 11px !important; height: 11px !important; flex-basis: 11px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
html.mtx-side-rail #mtx-devlink .dl-head:hover .dl-dot, html.mtx-side-rail #mtx-music .mu-head:hover .mu-dot,
html.mtx-side-rail #mtx-market .mk-head:hover .mk-dot,  html.mtx-side-rail #mtx-clip .ck-head:hover .ck-dot {
  transform: scale(1.25);
}

/* header */
#mtx-side .mtx-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
#mtx-side .mtx-wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 600; letter-spacing: .2px; color: #f4f2ff; flex: 1; }
#mtx-side .mtx-iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: #b8b8c4; display: grid; place-items: center; cursor: pointer; }
#mtx-side .mtx-iconbtn:hover { background: rgba(166,108,255,0.16); color: #c9b8ff; }
#mtx-side svg { width: 17px; height: 17px; display: block; }

/* nav */
#mtx-side .mtx-nav { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
#mtx-side .mtx-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  color: #c4b3ff; font-size: 14px; border: 0; background: transparent; text-align: left; width: 100%; text-decoration: none;
}
#mtx-side .mtx-item:hover { background: rgba(166,108,255,0.14); color: #e9e0ff; }
#mtx-side .mtx-item .mtx-ic { width: 18px; flex: 0 0 18px; color: #a66cff; display: grid; place-items: center; }
#mtx-side .mtx-item:hover .mtx-ic { color: #c9b8ff; }
#mtx-side .mtx-item .mtx-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mtx-side .mtx-item .mtx-trail { margin-left: auto; color: #6b6b76; }

#mtx-side .mtx-seclabel { padding: 14px 14px 5px; font-size: 11px; letter-spacing: .04em; color: #7b7b86; text-transform: none; display: flex; align-items: center; }
#mtx-side .mtx-seclabel .mtx-trail { margin-left: auto; color: #6b6b76; cursor: pointer; }

/* recents */
#mtx-side .mtx-recents { flex: 1; overflow-y: auto; padding: 0 8px 8px; min-height: 40px; }
#mtx-side .mtx-recents::-webkit-scrollbar { width: 8px; }
#mtx-side .mtx-recents::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 8px; }
#mtx-side .mtx-recent { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: #c2c2cd; font-size: 13.5px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mtx-side .mtx-recent:hover { background: rgba(166,108,255,0.12); color: #e9e0ff; }
#mtx-side .mtx-recent.muted { color: #6f6f7a; cursor: default; }
#mtx-side .mtx-recent.muted:hover { background: transparent; }
#mtx-side .mtx-signin-cta { margin: 6px 8px; padding: 9px 12px; border-radius: 9px; border: 1px solid #a66cff44; background: #a66cff14;
  color: #c9b8ff; font-size: 12.5px; cursor: pointer; width: calc(100% - 16px); }
#mtx-side .mtx-signin-cta:hover { background: #a66cff22; }

/* live Sovereign / local-AI status light (real /api/llm/providers) */
#mtx-side #mtx-sov { margin: 6px 10px 2px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); font-size: 11.5px; color: #8a8a95; cursor: default;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
#mtx-side #mtx-sov .sov-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 7px; background: #5b5b66; transition: background .25s, box-shadow .25s; }
#mtx-side #mtx-sov.sov-live { color: #bfe9cf; border-color: rgba(41,241,156,.20); background: rgba(41,241,156,.05); }
#mtx-side #mtx-sov.sov-live .sov-dot { background: #29f19c; box-shadow: 0 0 8px rgba(41,241,156,.75); animation: mtxSovPulse 2.4s ease-in-out infinite; }
#mtx-side #mtx-sov .sov-text { overflow: hidden; text-overflow: ellipsis; }
@keyframes mtxSovPulse { 0%,100% { box-shadow: 0 0 6px rgba(41,241,156,.55); } 50% { box-shadow: 0 0 12px rgba(41,241,156,.95); } }
html.mtx-side-rail #mtx-side #mtx-sov { justify-content: center; padding: 8px 0; margin: 4px 0; border: 0; background: transparent; }
html.mtx-side-rail #mtx-side #mtx-sov .sov-text { display: none; }
html.mtx-side-rail #mtx-side #mtx-sov .sov-dot { width: 11px; height: 11px; flex-basis: 11px; }

/* account button */
#mtx-side .mtx-acct { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-top: 0; cursor: pointer; }
#mtx-side .mtx-acct:hover { background: #ffffff08; }
/* account avatar — radiant white ambient light by default; becomes the user's
   own photo once they add one (click to add, right-click to clear) */
#mtx-side .mtx-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: grid; place-items: center;
  color: transparent; font-size: 0; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #ffffff 36%, #eaf0ff 62%, #c9d3ff 100%);
  background-size: cover; background-position: center;
  box-shadow: 0 0 10px rgba(255,255,255,.85), 0 0 22px rgba(188,200,255,.55), inset 0 0 6px rgba(255,255,255,.9);
  animation: mtxAvatarGlow 3.2s ease-in-out infinite; transition: transform .15s ease; }
#mtx-side .mtx-avatar:hover { transform: scale(1.07); }
#mtx-side .mtx-avatar.has-photo { background-image: var(--mtx-photo); animation: none;
  box-shadow: 0 0 10px rgba(255,255,255,.5), 0 0 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
@keyframes mtxAvatarGlow {
  0%, 100% { box-shadow: 0 0 9px rgba(255,255,255,.8), 0 0 18px rgba(188,200,255,.5), inset 0 0 6px rgba(255,255,255,.9); }
  50%      { box-shadow: 0 0 14px rgba(255,255,255,1), 0 0 30px rgba(198,210,255,.72), inset 0 0 7px rgba(255,255,255,1); }
}
#mtx-side .mtx-acct-meta { flex: 1; min-width: 0; }
#mtx-side .mtx-acct-name { font-size: 13.5px; color: #f0f0f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mtx-side .mtx-acct-plan { font-size: 11.5px; color: #8a8a95; }
#mtx-side .mtx-acct-caret { color: #8a8a95; }

/* collapsed-rail floating expand button */
#mtx-rail-toggle { position: fixed; left: 8px; top: 10px; z-index: 2147482001; display: none; }

/* ---- account popup menu ---- */
#mtx-menu {
  position: fixed; z-index: 2147483000; min-width: 250px; background: #1f1f1d; border: 1px solid #ffffff1c; border-radius: 12px;
  box-shadow: 0 18px 60px #000a; padding: 6px; color: #e9e9ef; font-family: -apple-system, system-ui, sans-serif; display: none;
}
#mtx-menu.show { display: block; }
#mtx-menu .mtx-menu-email { padding: 9px 12px 7px; font-size: 12.5px; color: #9a9aa4; border-bottom: 1px solid #ffffff12; margin-bottom: 5px; }
#mtx-menu .mtx-menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #e2e2e9; }
#mtx-menu .mtx-menu-item:hover { background: #ffffff12; }
#mtx-menu .mtx-menu-item .mtx-ic { width: 17px; color: #b0b0bb; display: grid; place-items: center; }
#mtx-menu .mtx-menu-item .mtx-trail { margin-left: auto; color: #7a7a85; font-size: 12px; }
#mtx-menu .mtx-menu-sep { height: 1px; background: #ffffff12; margin: 5px 4px; }

/* ---- modal / overlay scrim ---- */
.mtx-scrim { position: fixed; inset: 0; z-index: 2147483200; background: #000000a8; backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 20px; }
.mtx-scrim.show { display: flex; }

/* login modal */
#mtx-login-card { width: 100%; max-width: 400px; background: #141416; border: 1px solid #ffffff1c; border-radius: 16px; padding: 28px; color: #ededf2;
  font-family: -apple-system, system-ui, sans-serif; box-shadow: 0 30px 90px #000b; }
#mtx-login-card h2 { margin: 0 0 4px; font-size: 22px; font-family: Georgia, serif; }
#mtx-login-card .mtx-sub { margin: 0 0 18px; color: #9a9aa4; font-size: 13.5px; }
#mtx-login-card label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8a95; margin: 12px 0 5px; font-family: monospace; }
#mtx-login-card input { width: 100%; background: #0d0d0f; border: 1px solid #ffffff22; border-radius: 9px; color: #fff; padding: 11px 12px; font-size: 14px; outline: none; }
#mtx-login-card input:focus { border-color: #a66cff; box-shadow: 0 0 0 1px #a66cff55; }
#mtx-login-card .mtx-err { color: #ff8a8a; font-size: 12.5px; margin-top: 10px; min-height: 16px; }
#mtx-login-card .mtx-primary { width: 100%; margin-top: 16px; background: #a66cff; color: #0a0a0a; border: 0; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
#mtx-login-card .mtx-primary:hover { background: #b985ff; }
#mtx-login-card .mtx-primary:disabled { opacity: .55; cursor: wait; }
#mtx-login-card .mtx-toggle { margin-top: 16px; text-align: center; font-size: 13px; color: #9a9aa4; }
#mtx-login-card .mtx-toggle a { color: #c9b8ff; cursor: pointer; }
#mtx-login-card .mtx-close { float: right; cursor: pointer; color: #8a8a95; background: 0; border: 0; font-size: 18px; }

/* settings modal */
#mtx-settings-card { width: 100%; max-width: 460px; background: #141416; border: 1px solid #ffffff1c; border-radius: 16px; padding: 26px; color: #ededf2; font-family: -apple-system, system-ui, sans-serif; }
#mtx-settings-card h2 { margin: 0 0 16px; font-size: 20px; font-family: Georgia, serif; }
#mtx-settings-card label { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8a8a95; margin:12px 0 5px; font-family:monospace; }
#mtx-settings-card input, #mtx-settings-card select { width:100%; background:#0d0d0f; border:1px solid #ffffff22; border-radius:9px; color:#fff; padding:10px 12px; font-size:14px; outline:none; }
#mtx-settings-card .mtx-primary { margin-top:18px; background:#a66cff; color:#0a0a0a; border:0; border-radius:10px; padding:11px 18px; font-weight:700; cursor:pointer; }
#mtx-settings-card .mtx-ghost { margin-top:18px; margin-left:8px; background:transparent; color:#c2c2cd; border:1px solid #ffffff22; border-radius:10px; padding:11px 18px; cursor:pointer; }

/* search overlay */
#mtx-search-card { width: 100%; max-width: 560px; background: #141416; border: 1px solid #ffffff1c; border-radius: 14px; overflow: hidden; align-self: flex-start; margin-top: 10vh; }
#mtx-search-card input { width: 100%; background: #141416; border: 0; border-bottom: 1px solid #ffffff14; color: #fff; padding: 16px 18px; font-size: 16px; outline: none; }
#mtx-search-results { max-height: 50vh; overflow-y: auto; }
#mtx-search-results a { display: block; padding: 12px 18px; border-bottom: 1px solid #ffffff0a; color: #e2e2e9; text-decoration: none; }
#mtx-search-results a:hover { background: #ffffff0d; }
#mtx-search-results .t { font-size: 14px; }
#mtx-search-results .s { font-size: 12px; color: #8a8a95; margin-top: 2px; }
#mtx-search-results .empty { padding: 18px; color: #8a8a95; font-size: 13px; }

/* chat overlay */
#mtx-chat { position: fixed; inset: 0; z-index: 2147483100; background: #0b0b0d; display: none; flex-direction: column;
  font-family: -apple-system, system-ui, sans-serif; color: #ededf2; }
@media (min-width: 901px) { html.mtx-side-open #mtx-chat { left: var(--mtx-side-w); } html.mtx-side-rail #mtx-chat { left: var(--mtx-rail-w); } }
#mtx-chat.show { display: flex; }
#mtx-chat .mtx-chat-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #ffffff12; }
#mtx-chat .mtx-chat-top b { font-family: Georgia, serif; font-size: 16px; font-weight: 600; }
#mtx-chat .mtx-chat-top .mtx-iconbtn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: #b8b8c4; cursor: pointer; }
#mtx-chat .mtx-chat-top .mtx-iconbtn:hover { background: #ffffff12; color: #fff; }
#mtx-chat .mtx-chat-msgs { flex: 1; overflow-y: auto; padding: 24px 18px; max-width: 760px; width: 100%; margin: 0 auto; }
#mtx-chat .mtx-msg { display: flex; gap: 12px; margin-bottom: 18px; }
#mtx-chat .mtx-msg .mtx-mavatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; background: radial-gradient(circle at 38% 38%, #fff8e5, #a66cff); }
#mtx-chat .mtx-msg .mtx-mbody { font-size: 15px; line-height: 1.6; white-space: pre-wrap; padding-top: 2px; }
#mtx-chat .mtx-msg.u { justify-content: flex-end; }
#mtx-chat .mtx-msg.u .mtx-mbody { background: #a66cff22; padding: 10px 14px; border-radius: 14px; max-width: 80%; }
#mtx-chat .mtx-chat-greet { color: #9a9aa4; text-align: center; margin-top: 8vh; font-size: 15px; }
#mtx-chat .mtx-chat-greet b { color: #f0f0f5; font-family: Georgia, serif; font-size: 26px; display: block; margin-bottom: 8px; }
#mtx-chat .mtx-chat-composer { border-top: 1px solid #ffffff12; padding: 14px 18px 22px; }
#mtx-chat .mtx-chat-inwrap { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; background: #16161a; border: 1px solid #ffffff1e; border-radius: 16px; padding: 10px 12px; }
#mtx-chat textarea { flex: 1; resize: none; background: transparent; border: 0; outline: none; color: #fff; font-size: 15px; max-height: 180px; font-family: inherit; }
#mtx-chat .mtx-send { background: #a66cff; color: #0a0a0a; border: 0; border-radius: 10px; width: 36px; height: 36px; cursor: pointer; font-size: 16px; flex: 0 0 36px; }
#mtx-chat .mtx-send:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  #mtx-side { transform: translateX(-100%); box-shadow: 0 0 60px #000a; }
  html.mtx-side-open #mtx-side { transform: translateX(0); }
  html.mtx-side-rail #mtx-side { transform: translateX(-100%); }
  #mtx-rail-toggle { display: block; }
  .mtx-side-scrim { position: fixed; inset: 0; background: #0008; z-index: 2147481999; display: none; }
  html.mtx-side-open .mtx-side-scrim { display: block; }
}

/* ============================================================================
   MAIN-PAGE (index) HERO TUNING — this stylesheet only loads on index.html.
   Remove the version block, and center the hero (wordmark + tagline + buttons).
   ========================================================================== */
section[aria-label="hero"] > div.left-6.top-24 { display: none !important; }
section[aria-label="hero"] > div.flex.flex-col.justify-center.pt-32 { align-items: center !important; text-align: center !important; }
section[aria-label="hero"] > div.flex.flex-col.justify-center.pt-32 > p { margin-left: auto !important; margin-right: auto !important; }
section[aria-label="hero"] > div.flex.flex-col.justify-center.pt-32 > div.flex { justify-content: center !important; }

/* connect the green: the primary nav underline becomes green so it meets the
   sidebar's green right edge; remove the portal-strip divider line above it. */
header[aria-label="Primary"] { border-bottom-color: #39FF14 !important; box-shadow: 0 1px 10px rgba(57,255,20,0.28) !important; }
/* green seam at the footer top edge (black meets white), connects to the sidebar */
body > footer { border-top: 2px solid #39FF14 !important; box-shadow: 0 -1px 12px rgba(57,255,20,0.3) !important; }

/* ── Primary header: true-centred pill row ─────────────────────────────────
   The nav is three slots — brand · pills · ENTER. `mx-auto` alone centres the
   pill row in the LEFTOVER space, so unequal side widths (81px vs 79px plus
   ml-auto) pushed it off-centre. Giving both side slots an equal flex basis
   centres the pills against the header itself. Guarded to >=768px so narrow
   screens keep the natural scrolling row. */
@media (min-width: 768px) {
  header[aria-label="Primary"] > nav > a:first-child,
  header[aria-label="Primary"] > nav > div:last-child { flex: 1 1 0; min-width: 0; }
  header[aria-label="Primary"] > nav > div:last-child { display: flex; justify-content: flex-end; margin-left: 0; }
  header[aria-label="Primary"] > nav > ul { flex: 0 0 auto; margin-left: 0; margin-right: 0; }
}