/* The navbar's layer band: 40–50, and nothing on a page belongs in it.
   Below it is ordinary page content, which stops at 10 (the chats rail's
   circles are the highest thing there); above it, from 100 up, are the
   full-screen modals that are meant to cover the navbar — the contract and
   preview modals, the verify window, the work viewer. The old numbers (5 and
   6) sat *underneath* page content, so the chats icons showed through the open
   drawer. The band is wide enough to keep the top bar, both drawers and their
   scrims in a fixed order without anyone having to guess a number again. */
.nav-top{
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  height:60px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  background-color:var(--nd-navbar-bg);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter: blur(15px);
  /* Highest of the three: the language and notification popups hang out of it
     into the page, and they ride in its stacking context. */
  z-index:50;
}
.nav-top-leftside{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px 30px;
  gap:50px;
}
.nav-top-center{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px 30px;
  gap:50px;
}
.nav-top.logged-in .nav-top-center{
  display:none;
}
.nav-top-link{
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:16px;
  font-weight:400;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.nav-top-link-sep{
  color:var(--nd-grey-light);
  margin:0px 4px;
}
.nav-top-right{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px 30px;
}
.nav-top-right-guest{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
}
.nav-top-right-user{
  display:none;
  flex-direction:row;
  align-items:center;
  gap:40px;
}
.nav-top.logged-in .nav-top-right-guest{
  display:none;
}
.nav-top.logged-in .nav-top-right-user{
  display:flex;
}
.nav-top-user-links{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:30px;
}
.nav-top-user-actions{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
}
.nav-top-start-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:var(--nd-action);
  color:var(--nd-on-accent);
  font-family: var(--nd-font);
  font-size:15px;
  font-weight:400;
  text-decoration:none;
  border:none;
  border-radius:8px;
  padding:9px 22px;
  cursor:pointer;
  transition:filter 0.2s ease, transform 0.2s ease;
}
.nav-top-start-btn:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}
/* Narrow screens. The bar is about 870px wide for a guest and 670px signed in,
   and on anything narrower it ran off the right edge, taking Start and the gear
   with it. Nothing is lost by dropping pieces here: every top-bar link is also
   a row in the left drawer behind the menu button, and the language is also in
   the settings panel behind the gear. So the bar sheds duplicates in that
   order, and the controls that exist only here — menu, logo, bell, avatar,
   gear, Start — always stay. */
@media (max-width: 900px){
  .nav-top-center{
    display:none;
  }
}
@media (max-width: 720px){
  .nav-top-user-links{
    display:none;
  }
}
@media (max-width: 560px){
  .nav-top-leftside{
    padding:0px 16px;
    gap:20px;
  }
  .nav-top-right{
    padding:0px 16px;
  }
  .nav-top-right-guest,
  .nav-top-user-actions{
    gap:16px;
  }
  .nav-top-right .nav-lang{
    display:none;
  }
}
/* Language pill.
   The outer button reserves the full expanded width so neighbouring nav items
   never shift when it opens/closes. The inner pill is pinned to the right edge
   and animates its width, so it grows leftward: the globe (anchored to the
   inner's left edge) slides left to reveal "Eng" and slides right to cover it. */
.nav-lang-pill{
  position:relative;
  width:86px;
  height:34px;
  background:none;
  border:none;
  padding:0px;
  cursor:pointer;
}
.nav-lang-inner{
  position:absolute;
  top:0px;
  right:0px;
  height:100%;
  width:44px;
  background-color:var(--nd-bg-alt);
  border-radius:999px;
  overflow:hidden;
  transition:width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-lang-pill.nav-lang-open .nav-lang-inner{
  width:86px;
}
.nav-lang-globe{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  object-fit:contain;
}
.nav-lang-label{
  position:absolute;
  top:50%;
  left:40px;
  transform:translateY(-50%);
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:15px;
  font-weight:400;
  white-space:nowrap;
  opacity:0;
  transition:opacity 0.25s ease;
}
.nav-lang-pill.nav-lang-open .nav-lang-label{
  opacity:1;
  transition:opacity 0.3s ease 0.15s;
}

/* Translated state.
   While the page is showing machine-translated text the pill is held open by
   JS (`setTranslated` in navbar-component.js) and two lines run through it, on
   a loop, for as long as that is true. The open pill names the language; the
   loop is what makes it read as a live state rather than a setting chosen once
   — the page in front of you is being translated right now, and this is the
   thing that undoes it.

   Both lines start at the left, where the globe is, and reach out along the
   pill: one over the top, one under the bottom, drifting apart as they go, so
   the pair reads as something opening rather than something sliding past. Each
   is brightest where it starts and fades to nothing by the far end — the
   gradient runs --nd-purple-soft to transparent, in that order, which is why
   the light looks like it is coming out of the control rather than being
   dragged across it.

   The light is wide rather than bright, and only the light changes: a version
   of this that lit the globe, the label and the rim as well read as an alert
   rather than a status, and this thing is on screen the entire time somebody is
   reading a translated page. So the halo and the wash carry all of it, and
   everything else on the control is left alone.

   Their strength is two numbers, and only two, kept here rather than spread
   across four box-shadows so that changing it is one edit and the halo and the
   wash can never drift apart. They are the accent at double the alpha of the
   theme's --nd-glow-action-soft (25%) and --nd-glow-action-wash (8%), which is
   where this started; the ramp exists in whole steps that could not express a
   doubling, so it is done here in terms of --nd-action itself and stays tied to
   the accent colour.

   The halo is why the reveal animates `width` rather than scaleX: a scaled
   element scales its shadow too, so the glow would squash horizontally while
   the line grew, which reads as a smear.

   opacity, width and a 2px translate on two 1.5px elements — small enough to
   run for as long as it has to. */
.nav-lang-pill.nav-lang-translated{
  --nd-lang-glow-near: color-mix(in srgb, var(--nd-action) 50%, transparent);
  --nd-lang-glow-far: color-mix(in srgb, var(--nd-action) 16%, transparent);
}
.nav-lang-pill.nav-lang-translated .nav-lang-inner{
  box-shadow:inset 0 0 0 1px var(--nd-glass-rim);
}

/* The wash. On the pill rather than the inner, because the inner clips to
   itself (overflow:hidden, which is what holds the lines to the rounded ends)
   and light that can only spread inward is not a glow. The two coincide exactly
   while the pill is held open, which it always is here. */
.nav-lang-pill.nav-lang-translated::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  box-shadow:
    0 0 10px 1px var(--nd-lang-glow-near),
    0 0 26px 6px var(--nd-lang-glow-far);
  opacity:0;
  animation:nd-lang-aura 2.8s ease-in-out infinite;
}
@keyframes nd-lang-aura{
  0%   { opacity:0; }
  45%  { opacity:1; }
  100% { opacity:0; }
}

.nav-lang-pill.nav-lang-translated .nav-lang-inner::before,
.nav-lang-pill.nav-lang-translated .nav-lang-inner::after{
  content:"";
  position:absolute;
  left:8px;
  width:0;
  height:1.5px;
  border-radius:1px;
  pointer-events:none;
  background:linear-gradient(90deg, var(--nd-purple-soft), transparent);
  box-shadow:
    0 0 5px var(--nd-lang-glow-near),
    0 0 12px var(--nd-lang-glow-far);
}
/* They rest 3px in and drift out to 1px. The travel has to end inside the
   pill: the inner clips to itself, so a line still lit when it crosses the
   edge is cut off mid-stroke rather than seen leaving — and it takes its
   halo with it, which is the half you would actually notice. */
.nav-lang-pill.nav-lang-translated .nav-lang-inner::before{
  top:3px;
  animation:nd-lang-trace-up 2.8s ease-out infinite;
}
.nav-lang-pill.nav-lang-translated .nav-lang-inner::after{
  bottom:3px;
  animation:nd-lang-trace-down 2.8s ease-out infinite;
}

/* Out of the left, apart, gone. The 2px of drift is the whole difference
   between two bars and a thing opening outwards. */
@keyframes nd-lang-trace-up{
  0%   { width:0;      transform:translateY(0);     opacity:0; }
  18%  {                                            opacity:1; }
  70%  { width:calc(100% - 16px); transform:translateY(-2px); opacity:1; }
  100% { width:calc(100% - 16px); transform:translateY(-2px); opacity:0; }
}
@keyframes nd-lang-trace-down{
  0%   { width:0;      transform:translateY(0);     opacity:0; }
  18%  {                                            opacity:1; }
  70%  { width:calc(100% - 16px); transform:translateY(2px);  opacity:1; }
  100% { width:calc(100% - 16px); transform:translateY(2px);  opacity:0; }
}

/* Motion is the decoration, not the message: with it turned off the pill is
   still held open, still outlined, and still washed — the parts that say "you
   are reading a translation" survive; only the loop goes. */
@media (prefers-reduced-motion: reduce){
  .nav-lang-pill.nav-lang-translated .nav-lang-inner::before,
  .nav-lang-pill.nav-lang-translated .nav-lang-inner::after{
    display:none;
  }
  .nav-lang-pill.nav-lang-translated::after{
    animation:none;
    opacity:0.6;
  }
}

/* Language selector popup */
.nav-lang{
  position:relative;
}
.nav-lang-popup{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  width:240px;
  display:none;
  flex-direction:column;
  background-color:var(--nd-bg-alt);
  border-radius:16px;
  padding:12px;
  z-index:10;
}
.nav-lang-popup.open{
  display:flex;
}
.nav-lang-search{
  width:100%;
  box-sizing:border-box;
  background-color:var(--nd-hover-wash);
  border:none;
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:10px;
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:14px;
  outline:none;
}
.nav-lang-search::placeholder{
  color:var(--nd-grey-light);
}
.nav-lang-list{
  display:flex;
  flex-direction:column;
  max-height:190px;
  overflow-y:auto;
}
/* The language list's own scrollbar rules are gone: it takes the site-wide one
   from CSS/ND.css, which is the point of having a site-wide one. */
.nav-lang-option{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:8px;
  background:none;
  border:none;
  text-align:left;
  padding:9px 10px;
  border-radius:8px;
  cursor:pointer;
}
.nav-lang-option:hover{
  background-color:var(--nd-hover-wash);
}
.nav-lang-native{
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:14px;
  font-weight:400;
}
.nav-lang-english{
  color:var(--nd-grey-light);
  font-family: var(--nd-font);
  font-size:12px;
  font-weight:400;
}
.nav-lang-option.nav-lang-selected .nav-lang-native{
  color:var(--nd-action);
}
.nav-lang-hidden{
  display:none;
}
.nav-lang-empty{
  display:none;
  color:var(--nd-grey-light);
  font-family: var(--nd-font);
  font-size:13px;
  padding:12px 10px 4px;
  text-align:center;
}
.nav-lang-empty.visible{
  display:block;
}

/* Every glyph in the bar — menu, globe, bell, settings — and the wordmark
   ship as white PNGs, so on the bright theme they'd be white-on-white.
   --nd-icon-invert is 1 on dark and 0 on bright, which flips them to black
   without needing a second set of assets. The avatar is a photo and is
   deliberately excluded. */
.nav-icon,
.nav-lang-globe,
.ND-small-logo{
  filter:invert(var(--nd-icon-invert));
}
.nav-icon{
  width:30px;
  height:30px;
}
.nav-icon-small{
  width:22px;
  height:22px;
}
.nav-icon-btn{
  background:none;
  border:none;
  padding:0px;
  display:flex;
  align-items:center;
  cursor:pointer;
}
/* The gear leans on the action colour while its drawer is open, so the bar
   shows which panel you're in — same idea as the sidebar's menu button. */
.nav-settings-toggle{
  transition:transform 0.25s ease;
}
.nav-settings-toggle:hover{
  transform:rotate(45deg);
}
.nav-settings-toggle[aria-expanded="true"]{
  transform:rotate(90deg);
}
.nav-settings-toggle:focus-visible{
  outline:2px solid var(--nd-action);
  outline-offset:4px;
  border-radius:999px;
}

/* Fits rather than crops, the same as every other image (CSS/ND.css): it is
   the same photo as the one on the profile card, and the two should not
   disagree about what it is a picture of. */
.nav-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
}
.nav-avatar-link{
  display:inline-flex;
  border-radius:50%;
}
.nav-avatar-link:focus-visible{
  outline:2px solid var(--nd-action);
  outline-offset:4px;
}
.ND-small-logo{
  width:80px;
}
.nav-logo-link{
  display:inline-flex;
  cursor:pointer;
}
.nav-menu-toggle{
  cursor:pointer;
}

/* Notifications dropdown */
.nav-notifications{
  position:relative;
}
.nav-notifications-panel{
  position:absolute;
  top:calc(100% + 18px);
  /* Centred on the bell rather than flush to its right edge. The panel hangs
     off a `position:relative` wrapper that is exactly the button's width, so
     "the middle of the bell" is that wrapper's 50% and the panel is pulled back
     by half its own width. */
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:260px;
  display:none;
  flex-direction:column;
  gap:14px;
  z-index:10;
}
/* The bell sits near the right edge with only the avatar and gear beyond it, so
   a centred 260px panel runs off a narrow screen. Below this width it goes back
   to hanging from its right edge, which is the only anchor that always fits. */
@media (max-width: 560px){
  .nav-notifications-panel{
    left:auto;
    right:0px;
    transform:none;
  }
}
.nav-notifications-panel.open{
  display:flex;
}
.nav-notification-card{
  background-color:var(--nd-bg-alt);
  border-radius:16px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-notification-title{
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:15px;
  font-weight:400;
}
.nav-notification-divider{
  height:2px;
  background:linear-gradient(90deg, var(--nd-action), var(--nd-glow-action-fade));
}
.nav-notification-preview{
  color:var(--nd-grey-light);
  font-family: var(--nd-font);
  font-size:14px;
  font-weight:400;
  line-height:1.4em;
}
.nav-notification-more{
  border-bottom:2px dotted var(--nd-grey);
  width:100%;
}
/* Nothing to show. Same card shell as a real notification so the panel keeps
   its shape and its weight on the page rather than collapsing to a bare line —
   the design the placeholder cards were carrying, with none of their content. */
.nav-notification-empty{
  background-color:var(--nd-bg-alt);
  border-radius:16px;
  padding:16px 18px;
  color:var(--nd-grey-light);
  font-family: var(--nd-font);
  font-size:14px;
  font-weight:400;
  text-align:center;
}
/* The unread count, over the bell's top-right corner. The button is the
   positioning context; `nav-icon-btn` has no padding, so this hangs off the
   glyph itself. */
.nav-icon-btn{
  position:relative;
}
.nav-bell-badge{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:16px;
  height:16px;
  padding:0px 4px;
  border-radius:999px;
  background:var(--nd-action);
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:10px;
  font-weight:600;
  line-height:16px;
  text-align:center;
  pointer-events:none;
}
/* A nudge, not an alarm: ~3 degrees either way over half a second, once per
   message. Big enough to catch the eye of someone reading their own portfolio,
   small enough not to read as an error. */
@keyframes nd-bell-shake{
  0%, 100%{ transform:rotate(0deg); }
  15%{ transform:rotate(-9deg); }
  30%{ transform:rotate(7deg); }
  45%{ transform:rotate(-5deg); }
  60%{ transform:rotate(3deg); }
  75%{ transform:rotate(-2deg); }
}
.nav-bell-shake{
  animation:nd-bell-shake 0.55s ease-in-out;
  transform-origin:50% 15%;  /* swings from the crown, the way a bell hangs */
}
@media (prefers-reduced-motion: reduce){
  .nav-bell-shake{ animation:none; }
}

/* Left drawer */
.nav-left-overlay{
  position:fixed;
  top:60px;
  left:0px;
  right:0px;
  bottom:0px;
  background-color:var(--nd-scrim);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:40;
}
.nav-left-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.nav-left{
  /* The inset above the first card is also the gap between cards, so the two
     come off one number — see #navLeftGroups. */
  --nav-left-inset:20px;
  position:fixed;
  top:60px;
  left:0px;
  width:min(320px, 85vw);
  height:calc(100vh - 60px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:var(--nav-left-inset) 16px;
  background-color:var(--nd-bg);
  transform:translateX(-100%);
  transition:transform 0.3s ease;
  z-index:45;
}
.nav-left.open{
  transform:translateX(0);
}
/* The groups live inside a wrapper the JS regenerates, so the gap between
   them has to be declared here rather than on .nav-left — that one only ever
   separates this block from the home link below it. The gap borrows the
   drawer's own padding so the space between two cards matches the space
   above the first one. */
#navLeftGroups{
  display:flex;
  flex-direction:column;
  gap:var(--nav-left-inset);
}
.nav-left-group{
  background-color:var(--nd-bg-alt);
  border-radius:16px;
  padding:0px 16px;
  overflow:hidden;
}
.nav-left-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:14px 0px;
}
.nav-left-item{
  color:var(--nd-white);
  font-family: var(--nd-font);
  font-size:15px;
  font-weight:400;
  text-decoration:none;
  cursor:pointer;
  width:100%;
}
/* The group-type row (Portfolio, Community, Work | Freelance) is a button, so
   the browser's own button paint has to be undone before it can sit in the
   card as just another row — with the caret pushed out to the far edge. */
.nav-left-head{
  width:100%;
  justify-content:space-between;
  gap:12px;
  background:none;
  border:0px;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
/* The other half of telling a heading from a link. The rule below it does most
   of the work; this is the small weight difference that stops the two reading
   as the same kind of thing before you've noticed the rule at all. */
.nav-left-head .nav-left-item{
  width:auto;
  font-weight:600;
}
.nav-left-chevron{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--nd-white);
  transition:transform 0.25s ease;
}
.nav-left-group.open .nav-left-chevron{
  transform:rotate(180deg);
}
/* 0fr -> 1fr animates the panel to whatever height its own rows need, so a
   group can gain rows without a hardcoded max-height clipping them. */
.nav-left-sub{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.28s ease;
}
.nav-left-group.open .nav-left-sub{
  grid-template-rows:1fr;
}
.nav-left-sub-inner{
  overflow:hidden;
}
/* Two rules that look alike do not tell you which of the two things they
   separate is a heading. An open card is a section name followed by its
   destinations, and everything about it read as one flat list: same white type,
   same magenta rule above every row, so "Portfolio" looked like a third place
   you could go to.

   So the rules are ranked. The one under the head — the first child of the
   panel, always — keeps the full-strength magenta and gets to be the section's
   own line. The ones between destinations drop to under half of it: still the
   same colour family as the rest of the drawer, but plainly a divider rather
   than a border. Hierarchy out of one hue instead of two.

   Under half rather than a quarter — at 0.25 the rules had faded past quiet
   into hard to see at all, which is a different problem from the one being
   solved. The gap to the head's line is what carries the hierarchy, and it is
   still a wide one: 1px at 0.4 against 2px at full strength. */
.nav-left-divider{
  height:1px;
  background:linear-gradient(90deg, var(--nd-glow-action), var(--nd-glow-action-fade));
}
.nav-left-sub-inner > .nav-left-divider:first-child{
  height:2px;
  background:linear-gradient(90deg, var(--nd-action), var(--nd-glow-action-fade));
}
/* The two links that belong to no group, held at the foot of the drawer
   (margin-top:auto claims the leftover space). Neither is a filled card, so
   neither competes with the groups above — but they aren't equals either: one
   is a room you can walk into, the other is the way out of the app. */
.nav-left-foot{
  margin-top:auto;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-left-support,
.nav-left-home{
  padding:12px 16px;
  border:1px solid var(--nd-border-soft);
  border-radius:12px;
  color:var(--nd-text-muted);
  font-family: var(--nd-font);
  font-size:14px;
  font-weight:400;
  text-align:center;
  text-decoration:none;
  transition:color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
/* Support carries the drawer's own magenta, because it's the one thing here
   anybody might need at any moment and it shouldn't have to be hunted for. Kept
   to a tinted rim and lit type rather than a filled button: it's an offer, not
   the thing the drawer wants you to press. */
.nav-left-support{
  border-color:var(--nd-glow-action-border);
  color:var(--nd-text-lilac);
  font-weight:500;
}
.nav-left-support:hover{
  border-color:var(--nd-action);
  background-color:var(--nd-glow-action-wash);
  color:var(--nd-text-lilac-bright);
}
.nav-left-home:hover{
  border-color:var(--nd-border);
  color:var(--nd-text);
}

/* ---------------------------------------------------------------------- */
/* Settings drawer                                                         */
/*                                                                         */
/* The mirror of .nav-left: same 60px offset under the bar, same width,     */
/* same 0.3s slide, same rounded --nd-bg-alt groups and magenta gradient    */
/* rules — hinged on the right instead, and with its rules running the      */
/* other way so the colour lands against the screen edge the panel came     */
/* from. Only one of the two drawers is ever open; the JS closes the other. */
/* ---------------------------------------------------------------------- */
.nav-right-overlay{
  position:fixed;
  top:60px;
  left:0px;
  right:0px;
  bottom:0px;
  background-color:var(--nd-scrim);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:40;
}
.nav-right-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.nav-right{
  position:fixed;
  top:60px;
  right:0px;
  width:min(340px, 88vw);
  height:calc(100vh - 60px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:20px 16px;
  background-color:var(--nd-bg);
  /* The sidebar has the logo to separate it from the page; this panel has
     nothing, so it gets a hairline and a shadow to lift it off the page. */
  border-left:1px solid var(--nd-border-soft);
  box-shadow:var(--nd-shadow-lg);
  transform:translateX(100%);
  /* visibility, not just the transform: parked off-screen the panel would
     still take tab focus, which puts the keyboard somewhere invisible. It's
     delayed so it only flips once the slide-out has finished. */
  visibility:hidden;
  transition:transform 0.3s ease, visibility 0s linear 0.3s;
  z-index:45;
}
.nav-right.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform 0.3s ease, visibility 0s;
}
.nav-right:focus{
  outline:none;
}
.nav-right-head{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:0px 8px;
}
.nav-right-heading{
  color:var(--nd-text);
  font-family: var(--nd-font);
  font-size:20px;
  font-weight:600;
}
.nav-right-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0px;
  border:none;
  border-radius:999px;
  background:none;
  color:var(--nd-text-muted);
  cursor:pointer;
  transition:background-color 0.2s ease, color 0.2s ease;
}
.nav-right-close svg{
  width:18px;
  height:18px;
}
.nav-right-close:hover{
  background-color:var(--nd-hover-wash);
  color:var(--nd-text);
}
.nav-right-close:focus-visible{
  outline:2px solid var(--nd-action);
  outline-offset:2px;
}

.nav-right-group{
  background-color:var(--nd-bg-alt);
  border-radius:16px;
  padding:0px 16px;
  overflow:hidden;
}
.nav-right-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:14px 0px;
}
.nav-right-divider{
  height:2px;
  background:linear-gradient(270deg, var(--nd-action), var(--nd-glow-action-fade));
}
.nav-right-label{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav-right-title{
  color:var(--nd-text);
  font-family: var(--nd-font);
  font-size:15px;
  font-weight:500;
}
.nav-right-hint{
  color:var(--nd-text-muted);
  font-family: var(--nd-font);
  font-size:12px;
  font-weight:400;
  line-height:1.45;
}

/* Language row's picker. A native <select> on purpose, not a copy of the
   pill's popup: this list is ~100 rows, and the platform's own control is the
   one that already scrolls properly on a phone, jumps when you type a letter,
   and reads correctly to a screen reader. It is styled to sit in the panel
   rather than rebuilt.

   `appearance:none` takes the platform chrome off and the arrow is drawn back
   as an inline SVG in the background, kept clear of the text by the right
   padding. The options themselves are left to the OS — a popup list is not
   ours to paint — so they get explicit colours instead, since a dark control
   with a default-light dropdown is the one combination that looks broken. */
.nav-right-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:10px 36px 10px 14px;
  border-radius:12px;
  background-color:var(--nd-field-wash);
  border:1px solid var(--nd-border-soft);
  color:var(--nd-text);
  font-family: var(--nd-font);
  font-size:14px;
  font-weight:400;
  line-height:1.2;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px 16px;
  transition:border-color 0.2s ease;
}
.nav-right-select:hover{
  border-color:var(--nd-border);
}
.nav-right-select:focus-visible{
  outline:2px solid var(--nd-action);
  outline-offset:2px;
}
.nav-right-select option{
  background-color:var(--nd-surface);
  color:var(--nd-text);
}

/* Segmented dark / bright control. Two real options rather than a checkbox,
   because neither theme is the "off" state of the other. The filled thumb
   slides between them on the same easing the language pill uses.

   Which half reads as selected is driven entirely by <html data-theme>, not
   by a class the JS maintains: one source of truth, and the control is
   already correct on the very first paint. */
.nav-segmented{
  position:relative;
  display:flex;
  flex-direction:row;
  width:100%;
  padding:4px;
  border-radius:999px;
  background-color:var(--nd-field-wash);
  border:1px solid var(--nd-border-soft);
}
.nav-segmented-thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  border-radius:999px;
  background-color:var(--nd-purple);
  box-shadow:0 0 12px var(--nd-glow-purple-soft);
  transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
             background-color 0.25s ease;
}
:root[data-theme="light"] .nav-segmented-thumb{
  transform:translateX(100%);
  background-color:var(--nd-action);
}
.nav-segment{
  position:relative;
  z-index:1;
  flex:1 1 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 6px;
  border:none;
  border-radius:999px;
  background:none;
  color:var(--nd-text-muted);
  font-family: var(--nd-font);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:color 0.25s ease;
}
.nav-segment:hover{
  color:var(--nd-text);
}
.nav-segment:focus-visible{
  outline:2px solid var(--nd-action);
  outline-offset:2px;
}
.nav-set-glyph{
  width:16px;
  height:16px;
  flex:none;
}
/* The selected half sits on the thumb, so it takes on-accent rather than
   --nd-text — which would be near-black on the purple fill in bright mode. */
:root .nav-segment-dark,
:root[data-theme="light"] .nav-segment-light{
  color:var(--nd-on-accent);
  cursor:default;
}
:root[data-theme="light"] .nav-segment-dark{
  color:var(--nd-text-muted);
  cursor:pointer;
}

/* An option that isn't available yet. Dimmed rather than removed, so it's
   clear the bright theme is coming — and still clickable, because pressing
   it is what reveals the note explaining why it won't take. */
.nav-segment[aria-disabled="true"]{
  opacity:0.5;
}
.nav-segment[aria-disabled="true"]:hover{
  opacity:0.75;
}

/* "Under development" note, revealed under the toggle when a gated option
   is pressed. Warn-coloured rather than danger — nothing has gone wrong. */
.nav-right-note{
  display:none;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  margin:0px 0px 14px;
  padding:10px 12px;
  border-radius:12px;
  background-color:var(--nd-warn-bg);
  border:1px solid var(--nd-warn-border);
  color:var(--nd-warn);
  font-family: var(--nd-font);
  font-size:12px;
  font-weight:400;
  line-height:1.45;
}
.nav-right-note.visible{
  display:flex;
  animation:nd-note-in 0.25s ease both;
}
.nav-right-note-icon{
  width:16px;
  height:16px;
  flex:none;
  margin-top:1px;
}
@keyframes nd-note-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .nav-right-note.visible{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .nav-right,
  .nav-segmented-thumb,
  .nav-settings-toggle{
    transition:none;
  }
}

.hidden {
  transform: translateY(-100%);
}