/* Light sidebar, from the user's "Frame 21" design: a white, frosted column,
   the logo at the top, plain rows of icon + label with no pill behind them,
   and the current page marked by blue text and a short blue bar on the
   sidebar's inner edge.

   Loaded last, on the office and the platform admin, so it sits over the
   palette's dark rail. To go back to the dark rail, remove this file's
   <link> from index.html and platform/index.html - nothing else depends on
   it.

   Two deliberate departures from the design:
   - The design's grey for idle rows, #B9C0DE, measures 1.8:1 on white;
     words need 4.5:1. Idle rows use a deeper grey of the same hue (#6B7398,
     4.6:1). The design value is kept as --side-ink-design, one swap away.
   - The design's active icon is two-tone blue and pink. The app's icons are
     single-colour strokes, so the active icon is solid blue. */
@media screen {
:root, :root[data-theme='light'] {
  --side-ink-design: #b9c0de;
  --side-ink: #6b7398;
  --side-active: #00719c; /* #00bbf9's text-safe step: 5.5:1 on white */
  --side-glow: rgb(0 56 255 / .15);
  --side-pad: 40px;
  /* The palette draws the rail from these; pointing them at the light
     column restyles every row it styles. */
  --rail: rgb(255 255 255 / .8);
  --rail-ink: var(--side-ink);
  --rail-muted: var(--side-ink);
  --rail-hover: transparent;
  --rail-line: var(--border);
}
:root[data-theme='dark'] {
  /* Charcoal, a step lighter than the page, with the light blue for the
     current page (6.4:1) and soft gray rows (7.2:1). */
  --side-ink: #aab0bd;
  --side-active: #33c9fa;
  --side-glow: rgb(125 162 255 / .2);
  --rail: #1f232b;
  --rail-ink: var(--side-ink);
  --rail-muted: var(--side-ink);
  --rail-hover: transparent;
  --rail-line: #2b303b;
}

/* 300px as drawn, on screens wide enough to spare it. */
@media (min-width: 1440px) { :root { --rail-open: 300px; } }
@media (min-width: 901px) and (max-width: 1439px) { :root { --rail-open: 264px; } }
@media (max-width: 1100px) { :root { --side-pad: 28px; } }

:root body .nav {
  background: var(--rail);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border-inline-end: 1px solid var(--border);
  padding: 40px 0 24px;
  gap: 0;
  color: var(--side-ink);
}
@media (min-width: 901px) {
  /* office.css pins the old rail at 205px; the column follows --rail-open. */
  :root body .nav { width: var(--rail-open); padding-inline: 0; }
}
:root body .nav .nav__brand { padding: 0 var(--side-pad) 28px; }
:root body .nav .nav__divider { display: none; }
/* The rail is white in the light theme, so the logo as drawn; in the dark
   theme the rail is dark and office.css's light copy stays. */
:root:not([data-theme='dark']) body .nav .brand-logo.brand-logo--on-light { display: block; }
:root:not([data-theme='dark']) body .nav .brand-logo.brand-logo--on-dark { display: none; }

/* Section names: small, quiet, the same grey. */
:root body .nav .nav__label {
  padding: 0 var(--side-pad);
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--side-ink);
  opacity: .8;
}
:root[dir='ltr'] body .nav .nav__label { letter-spacing: 1px; text-transform: uppercase; }

:root body .nav .nav__group { display: flex; flex-direction: column; gap: 10px; }

/* Rows: no pill, no fill. Icon 20px, a 10px gap, 15px label. */
:root body .nav :is(a, .nav__parent) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0 var(--side-pad);
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--side-ink) !important;
  font-size: 15px;
  font-weight: 400;
  text-align: start;
  box-shadow: none;
}
:root body .nav :is(a, .nav__parent) :is(.nav__text, .nav__icon, .nav__chev) { color: inherit !important; }
:root body .nav :is(a, .nav__parent, .nav__signout) .nav__icon { color: inherit !important; width: 20px; height: 20px; min-width: 20px; }
/* The palette colours the current row's icon for its old pill; here it
   follows the row's blue, like its label. */
:root body .nav a[aria-current='page'] .nav__icon { color: inherit !important; }
/* Row labels keep normal spacing: tracking suits the small uppercase
   section names above, not sentence-case words people read to navigate. */
@media (hover: hover) and (pointer: fine) { :root body .nav :is(a, .nav__parent):hover { color: var(--fg) !important; } }
:root body .nav :is(a, .nav__parent) .nav__text { flex: 1; min-width: 0; }
:root body .nav .nav__chev { margin-inline-start: auto; }

/* The group a current page sits in reads darker, without the bar. */
:root body .nav .nav__parent--current { color: var(--fg) !important; }

/* The current page: blue text and icon, and the 5 x 30 bar on the inner
   edge with its soft blue glow. The platform admin marks its current item
   with .nav__parent--current, so it gets the same treatment. */
:root body .nav a[aria-current='page'],
:root body .nav .nav__sub a[aria-current='page'],
:root body .platform-nav .nav__parent--current {
  color: var(--side-active) !important;
  font-weight: 500;
  background: transparent !important;
}
:root body .nav a[aria-current='page']::after,
:root body .platform-nav .nav__parent--current::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 5px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50px;
  background: var(--side-active);
  box-shadow: -2px 0 10px 2px var(--side-glow);
}
:root[dir='rtl'] body .nav a[aria-current='page']::after,
:root[dir='rtl'] body .platform-nav .nav__parent--current::after { box-shadow: 2px 0 10px 2px var(--side-glow); }

/* Pages inside a group: no rail line, indented to line up with the labels
   above them (pad + 20px icon + 10px gap). */
:root body .nav .nav__sub {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root body .nav .nav__sub[hidden] { display: none; }
:root body .nav .nav__sub a {
  min-height: 38px;
  padding-inline-start: calc(var(--side-pad) + 30px);
  font-size: 14px;
}

/* Language, at the foot of the column. */
:root body .nav .nav__foot { padding: 0 var(--side-pad); }
:root body .nav .nav__foot .nav__label { padding: 0; }
:root body .nav .langswitch { background: var(--surface-alt); border: 1px solid var(--border); }
:root body .nav .langswitch button { background: transparent; color: var(--side-ink); }
@media (hover: hover) and (pointer: fine) { :root body .nav .langswitch button:hover:not([aria-pressed='true']) { background: var(--surface); color: var(--fg); } }
:root body .nav .langswitch button[aria-pressed='true'] { background: var(--surface); color: var(--side-active); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }

/* The phone drawer: solid, not frosted (it slides over a dimmed page), and
   wide enough that no label wraps. Closed, it slides out by its own width
   (office.css). */
@media (max-width: 900px) {
  :root, :root[data-theme] { --side-pad: 22px; --rail: var(--surface); --drawer-w: min(272px, 86vw); }
  :root body .nav { width: var(--drawer-w); padding-top: 24px; }
}
}