/* Global app navigation drawer (see wp-sidenav.js).

   An off-canvas panel rather than a pinned rail, at every width: the field view is a
   centred 760px column read on a phone or a tablet in a glove, and a permanent
   sidebar would either squeeze that column or hide on the one device that matters.
   Overlay behaves identically everywhere, which is also one less layout to test.

   Colours come from the dark app bar it hangs off, so the drawer reads as an
   extension of the bar. Until T3.2 that intent was written as hardcoded hex —
   30 of them — which made the drawer only accidentally match the bar. It now
   reads the same --wp-appbar-* tokens the bar does, so the stated intent is
   actually true and flipping --wp-appbar-bg takes the drawer with it. */

.wp-navbtn{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px; padding: 0;
  background: none; border: none; border-radius: 0; cursor: pointer;
  color: var(--cds-text-inverse); font-family: inherit; line-height: 1;
}
.wp-navbtn:hover{ background: var(--wp-appbar-hover); }
.wp-navbtn:focus-visible{ outline: 2px solid var(--wp-appbar-fg); outline-offset: -2px; }
/* A light bar (the SOP suite / creator headers) needs the opposite ink. */
.wp-navbtn[data-bar="light"]{ color: var(--cds-text-primary); }
.wp-navbtn[data-bar="light"]:hover{ background: var(--cds-layer-hover); }

.wp-navscrim{
  position: fixed; inset: 0; z-index: 10010;
  background: var(--wp-scrim-drawer);
  opacity: 0; transition: opacity .18s ease;
}
.wp-navscrim.is-open{ opacity: 1; }
.wp-navscrim[hidden]{ display: none; }

.wp-sidenav{
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 10011;
  width: min(284px, 84vw);
  display: flex; flex-direction: column;
  background: var(--wp-appbar-bg); color: var(--cds-text-inverse);
  font-family: var(--wp-font-sans-2);
  transform: translateX(-100%); transition: transform .2s ease;
  box-shadow: var(--wp-shadow-drawer);
  overflow: hidden;
}
.wp-sidenav.is-open{ transform: translateX(0); }
/* Respect a reduced-motion preference: the drawer still opens, it just doesn't slide. */
@media (prefers-reduced-motion: reduce){
  .wp-sidenav, .wp-navscrim{ transition: none; }
}

.wp-sidenav-head{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--cds-inverse-02); flex: 0 0 auto;
}
.wp-sidenav-head .wp-logo-chip{ flex: 0 0 auto; }
.wp-sidenav-title{ font-size: 13px; font-weight: 600; line-height: 1.25; }
.wp-sidenav-title span{ display: block; font-size: 11px; font-weight: 400; color: var(--cds-text-placeholder); }

/* The active project, in full (B2). Below 1024px the app bar shows the project
   number alone, so this is where the whole name has to be readable — it wraps on
   as many lines as it needs and is never truncated. */
.wp-sidenav-proj{
  padding: 12px 14px; border-bottom: 1px solid var(--cds-inverse-02); flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 2px;
}
.wp-sidenav-proj[hidden]{ display: none; }
.wp-sidenav-proj-k{
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cds-text-placeholder);
}
.wp-sidenav-proj strong{
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--cds-text-inverse);
  overflow-wrap: anywhere;
}
.wp-sidenav-proj-n{ font-size: 11px; color: var(--wp-appbar-fg-dim); }
.wp-sidenav-close{
  margin-left: auto; width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
  background: none; border: none; border-radius: 0; color: var(--wp-appbar-fg-dim);
  font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
}
.wp-sidenav-close:hover{ background: var(--wp-appbar-hover); color: var(--wp-appbar-fg); }

.wp-sidenav-body{ flex: 1 1 auto; overflow-y: auto; padding: 6px 0 18px; }
.wp-sidenav-sect{
  padding: 14px 16px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cds-ui-04);
}
.wp-sidenav-link{
  display: flex; align-items: center; gap: 12px; width: 100%;
  /* 44px minimum: this is tapped with a work glove on. */
  min-height: 44px; padding: 10px 16px;
  background: none; border: none; border-left: 3px solid transparent; border-radius: 0;
  color: var(--cds-text-inverse); font: inherit; font-size: 14px; text-align: left; text-decoration: none;
  cursor: pointer;
}
.wp-sidenav-link:hover{ background: var(--wp-appbar-hover); }
.wp-sidenav-link:focus-visible{ outline: 2px solid var(--wp-appbar-fg); outline-offset: -2px; }
.wp-sidenav-link.is-current{ background: var(--wp-appbar-layer); border-left-color: var(--cds-interactive-01); font-weight: 600; }
.wp-sidenav-ico{
  flex: 0 0 20px; width: 20px; text-align: center; font-size: 15px; color: var(--wp-appbar-fg-dim);
}
.wp-sidenav-link.is-current .wp-sidenav-ico{ color: var(--cds-link-inverse); }
.wp-sidenav-label{ flex: 1 1 auto; min-width: 0; }
.wp-sidenav-label small{ display: block; font-size: 11.5px; font-weight: 400; color: var(--cds-text-placeholder); }

.wp-sidenav-foot{
  flex: 0 0 auto; border-top: 1px solid var(--cds-inverse-02); padding: 8px 0;
}
.wp-sidenav-who{
  padding: 6px 16px 8px; font-size: 12px; color: var(--cds-text-placeholder);
}
.wp-sidenav-who strong{ display: block; color: var(--cds-text-inverse); font-size: 13px; font-weight: 600; }